/* Interior pages. Shared typography and components live in site.css. */

/* Services: a compact, fully browsable overview. */
.services-index { padding-block-end: 80px; }
.services-index__head { display: flex; flex-direction: column; gap: 12px; margin-block-end: 38px; }
.services-index__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.svc-card { min-inline-size: 0; border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.svc-card__link { display: flex; flex-direction: column; block-size: 100%; color: inherit; text-decoration: none; }
.svc-card__link:focus-visible { outline: 3px solid var(--fg); outline-offset: -4px; border-radius: 20px; }
.svc-card__visual { position: relative; overflow: hidden; }
.svc-card__visual .photo { border: 0; border-radius: 0; aspect-ratio: 4 / 3; }
.svc-card__visual .photo img { transition: transform .5s ease; }
.svc-card__visual .photo--cutout { background: #eef1e8; }
.svc-card__number { display: grid; place-items: center; position: absolute; inset-block-start: 16px; inset-inline-start: 16px; inline-size: 38px; block-size: 38px; border-radius: 50%; background: #f6f7f2; color: #183b34; font-size: 12px; font-weight: 700; }
.svc-card__body { display: flex; flex-direction: column; flex: 1; padding: 25px 22px 20px; }
.svc-card__title { font-family: var(--font-body); font-size: 1.3rem; font-weight: 600; line-height: 1.35; letter-spacing: var(--ls-h3); }
.svc-card__summary { margin-block: 14px 25px; color: var(--fg-muted); font-size: .9rem; line-height: 1.65; }
.svc-card__more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: auto; padding-block-start: 18px; border-block-start: 1px solid var(--line); font-size: .8rem; font-weight: 600; }
.svc-card__arrow { display: grid; place-items: center; inline-size: 34px; block-size: 34px; flex: none; border: 1px solid var(--line); border-radius: 50%; transition: background .2s ease, border-color .2s ease; }
@media (hover: hover) {
  .svc-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16, 47, 42, .07); }
  .svc-card:hover .photo img { transform: scale(1.035); }
  .svc-card:hover .svc-card__arrow { background: #d9ed98; border-color: #d9ed98; }
}
@media (min-width: 600px) { .services-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .services-index__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Official service descriptions, presented as generous image and text pairs. */
.feature { border-block-start: 1px solid var(--line); scroll-margin-block-start: calc(var(--header-h) + 24px); }
.feature--alt { background: #edf1e8; }
.feature__grid { align-items: center; row-gap: 36px; }
.feature__figure, .feature__text { grid-column: 1 / -1; min-inline-size: 0; }
.feature__figure .photo { aspect-ratio: 6 / 5; border-radius: 24px; }
.feature__figure .photo--cutout { background: #fff; border: 1px solid var(--line); }
.feature__number { display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin-block-end: 30px; border: 1px solid var(--line); border-radius: 50%; font-size: .82rem; font-weight: 600; }
.feature__title { margin-block-start: 12px; max-inline-size: 18ch; }
.feature__lead { margin-block-start: 25px; font-size: clamp(1.1rem, 1.65vw, 1.3rem); line-height: 1.7; color: var(--fg); max-inline-size: 42ch; text-wrap: pretty; }
.feature__body { margin-block-start: 14px; color: var(--fg-muted); max-inline-size: 47ch; line-height: 1.75; }
.feature__link { margin-block-start: 32px; }
.standards { background: #e8eedf; }
.standards .about__title { margin-block-start: 16px; }
@media (min-width: 960px) {
  .feature__figure { grid-column: 1 / span 5; }
  .feature__text { grid-column: 7 / span 6; }
  .feature--alt .feature__figure { grid-column: 8 / span 5; }
  .feature--alt .feature__text { grid-column: 1 / span 6; grid-row: 1; }
  .feature__figure .photo { aspect-ratio: 1 / 1.05; }
}

/* Service detail. */
.included__grid { row-gap: 32px; }
.included__head, .included__list { grid-column: 1 / -1; }
.included__list { display: grid; margin: 0; }
.included__list > div:last-child { border-block-end: 1px solid var(--line); }
.included__list.features > div { padding-block: 26px; }
.included__title { max-inline-size: 12ch; }
.how .about__title { margin-block-start: 14px; }
.creds-mini .creds { border-block: 1px solid var(--line); padding-block: 30px; }
.related { padding-block-start: 20px; }
@media (min-width: 960px) {
  .included__head { grid-column: 1 / span 4; }
  .included__list { grid-column: 5 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
  .included__list > div { grid-column: auto; }
  .included__list > div:nth-last-child(-n+2) { border-block-end: 1px solid var(--line); }
}

/* Company. */
.company-statement__pull { max-inline-size: 15ch; }
.company-statement .about__grid { align-items: start; }
.company-statement .about__text { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.8; }
.company-facts { padding-block-start: 0; }
.company-facts .creds { border-block: 1px solid var(--line); padding-block: 32px; }
.company-entity { padding-block-start: 45px; }
.company-entity__grid { align-items: center; row-gap: 40px; }
.company-entity__figure, .company-entity__body { grid-column: 1 / -1; min-inline-size: 0; }
.company-entity__lockup { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; position: relative; isolation: isolate; overflow: hidden; padding: 48px; aspect-ratio: 6 / 5; background: #e3ecde; border: 1px solid rgba(24, 59, 52, .08); border-radius: 24px; }
.company-entity__lockup::before, .company-entity__lockup::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(24, 59, 52, .1); border-radius: 50%; inline-size: 95%; aspect-ratio: 1; }
.company-entity__lockup::after { inline-size: 125%; }
.company-entity__lockup .lockup__logo { inline-size: 100%; max-inline-size: 320px; block-size: auto; }
.company-entity__caption { font-size: .8rem; color: #52685b; }
.company-entity__title { margin-block-start: 14px; }
.company-entity__rows { margin-block-start: 30px; border-block-end: 1px solid var(--line); }
.company-entity__rows.features > div { grid-column: 1 / -1; padding-block: 21px; }
.company-entity__rows.features dt { font-size: 1.05rem; }
.company-entity__rows.features dd { font-size: .92rem; }
.company-mission .statement { border-block-start: 1px solid var(--line); padding-block-start: 28px; }
.company-vision { display: flex; gap: 14px; align-items: start; margin-block-start: 56px; padding-block-start: 28px; border-block-start: 1px solid var(--line); }
.company-vision__slot { display: block; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: #d9ed98; margin-block-start: .6em; }
.company-vision__text { max-inline-size: 70ch; color: var(--fg-muted); font-size: .94rem; }
.company-profile__card { grid-column: 1 / -1; grid-template-columns: 1fr; padding: 32px; border-radius: 22px; background: #fff; scroll-margin-block-start: calc(var(--header-h) + 28px); }
.company-profile__card .download__mark { inline-size: 75px; block-size: 95px; border-radius: 12px; background: #edf1e8; }
.company-profile__card .download__glyph { inline-size: 36px; block-size: auto; }
.company-profile__card .download__title { font-size: clamp(1.5rem, 3vw, 2rem); }
.company-profile__card .download__meta { margin-block: 10px 24px; }
@media (min-width: 640px) {
  .company-profile__card { grid-template-columns: 75px 1fr; align-items: center; padding: 40px; gap: 30px; }
}
@media (min-width: 960px) {
  .company-entity__figure { grid-column: 1 / span 5; }
  .company-entity__figure .lockup { aspect-ratio: 4 / 5; }
  .company-entity__body { grid-column: 7 / span 6; }
  .company-profile__card .download__body { display: grid; grid-template-columns: 1fr auto; column-gap: 36px; align-items: center; }
  .company-profile__card .download__title, .company-profile__card .download__meta { grid-column: 1; }
  .company-profile__card .download__meta { margin-block-end: 0; }
  .company-profile__card .download__body .btn { grid-column: 2; grid-row: 1 / span 2; }
}

/* Contact: direct contact details alongside a clear, calm inquiry form. */
.contact__grid { align-items: start; row-gap: 42px; }
.contact__details, .contact__form-col { grid-column: 1 / -1; min-inline-size: 0; }
.contact__title { max-inline-size: none; }
.contact__dl { margin-block-start: 34px; border-block-end: 1px solid var(--line); }
.contact__row { padding-block: 22px; border-block-start: 1px solid var(--line); }
.contact__row dt { font-size: .78rem; font-weight: 500; color: var(--fg-muted); }
.contact__row dd { margin-block-start: 8px; font-weight: 500; color: var(--fg); font-size: 1.05rem; overflow-wrap: anywhere; }
.contact__wa { display: inline-flex; align-items: center; gap: 9px; }
.contact__glyph { color: #38735e; flex: none; }
.contact__profile { margin-block-start: 25px; font-size: .85rem; }
.contact__form-col { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 25px; box-shadow: 0 12px 48px rgba(16, 47, 42, .025); }
.contact__form-col .notice p { margin: 0; }
.contact__form-title { grid-column: 1 / -1; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; margin-block-end: 10px; }
.contact__form > .visually-hidden { grid-column: 1 / -1; }
.contact__form .field__label { color: #52685b; font-size: .8rem; font-weight: 500; }
.contact__form .field__input { background: #f8f9f5; border: 1px solid #d9e0d5; border-radius: 9px; padding: 14px 15px; transition: border-color .2s ease, box-shadow .2s ease; }
.contact__form .field__input:focus { outline: none; border-color: #527e6c; box-shadow: 0 0 0 3px rgba(82, 126, 108, .13); }
.contact__form .field__input[aria-invalid="true"] { border-color: var(--error); }
.contact__form .field__input::placeholder { color: #708171; }
.contact__form .form__submit { margin-block-start: 4px; }
.contact__form .form__submit .btn { min-inline-size: 180px; }
.contact-thanks__body { grid-column: 1 / -1; }
.contact-thanks__links { display: flex; flex-wrap: wrap; gap: 24px; }
@media (min-width: 960px) {
  .contact__details { grid-column: 1 / span 4; }
  .contact__form-col { grid-column: 6 / span 7; padding: 42px; }
  .contact-thanks__body { grid-column: 1 / span 7; }
}

@media (max-width: 599.98px) {
  .services-index { padding-block-end: 50px; }
  .svc-card__body { padding: 24px; }
  .svc-card__title { font-size: 1.5rem; }
  .feature__number { margin-block-end: 22px; }
  .company-profile__card { padding: 26px; }
  .company-entity__lockup { padding: 34px; }
}
@media (max-width: 959.98px) {
  .company-statement__pull, .feature__title, .feature__lead, .feature__body, .company-vision__text, .contact__title { max-inline-size: none; text-wrap: pretty; }
}
