/* ───────────────────────────────────────────────────────────────
   THE FOUR PARENT/UTILITY PAGES — v2
   /services/, /areas-we-serve/, /my-account/, /thank-you/

   Built to the homepage's bar, not the old template:
     · the services grid staggers in and the photo pushes on hover
     · the areas explorer swaps a photo as you move down the list,
       auto-cycling until you take it over   (.areas idiom)
     · the portal hero carries two real actions and a perks rail
     · the thank-you tick draws itself

   Section padding is the homepage's clamp(60px,9vw,100px) and
   --rhythm (40px) sits under every heading block.
   ─────────────────────────────────────────────────────────────── */

:root { --accent-ink: #9a5200; }

.pg { padding: clamp(60px, 9vw, 100px) var(--pad); }
.pg--tint { background: var(--g-svcs, #faf5f0); }
.pg--plain { background: var(--g-proc, #fff); }
.pg__top .sec-title, .cband .sec-title { margin: .36em 0 .4em; }
.pg__top .sec-sub { margin-block-start: 18px; }
.pg__body { margin-block-start: var(--rhythm, 40px); }

/* ── services grid ──────────────────────────────────────── */
.sgrid { display: grid; gap: clamp(18px, 2.2vw, 30px); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .sgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .sgrid { grid-template-columns: repeat(3, 1fr); } }
.scard {
  position: relative; display: block; border-radius: 18px; overflow: hidden;
  background: #fff; border: 1px solid #e7ded4; text-decoration: none;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.scard:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(33,26,22,.16); border-color: #ddd0c0; }
.scard__ph { position: relative; overflow: hidden; aspect-ratio: 16 / 11; background: #eee5da; }
.scard__ph img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  transition: transform .75s cubic-bezier(.2,.7,.2,1); }
.scard:hover .scard__ph img { transform: scale(1.07); }
.scard__n {
  position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 2;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: #fff;
  background: rgba(28,23,20,.76); backdrop-filter: blur(6px);
  padding: 6px 11px; border-radius: 999px;
}
.scard__in { padding: clamp(18px, 2vw, 26px); }
.scard__t { margin: 0 0 8px; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -.015em; color: var(--heading, #3a2e26); }
.scard__b { margin: 0; font-size: 14.5px; line-height: 1.6; color: #6b6259; }
.scard__go { display: inline-flex; align-items: center; gap: 7px; margin-block-start: 14px;
  font-size: 13.5px; font-weight: 600; color: var(--accent-ink); }
.scard__go svg { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.scard:hover .scard__go svg { transform: translateX(5px); }
/* stagger, added by JS so nothing is hidden without it */
.sgrid.anim .scard { opacity: 0; transform: translateY(24px);
  transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.sgrid.anim.on .scard { opacity: 1; transform: none; }
.sgrid.anim.on .scard:nth-child(2){transition-delay:.09s}
.sgrid.anim.on .scard:nth-child(3){transition-delay:.18s}
.sgrid.anim.on .scard:nth-child(4){transition-delay:.27s}
.sgrid.anim.on .scard:nth-child(5){transition-delay:.36s}
.sgrid.anim.on .scard:nth-child(6){transition-delay:.45s}
.sgrid.anim.on .scard:hover { transform: translateY(-8px); }

/* ── portal hero extras ─────────────────────────────────── */
.perks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 26px; }
.perks__l { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-200, #e8d9d1); opacity: .8; }
.perks span.perk {
  font-size: 13px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26); color: #fcf6f2;
  background: rgba(255,255,255,.07); backdrop-filter: blur(5px);
}

/* ── closing band ───────────────────────────────────────── */
.cband { background: var(--dark, #211a16); color: #fcf6f2; text-align: center; }
.cband .pg__top { max-inline-size: 60ch; margin-inline: auto; }
.cband .sec-title { color: #fff; }
.cband__pts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-block-start: 22px; }
.cband__pts span { font-size: 13px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); }

/* ── thank you ──────────────────────────────────────────── */
.ty { min-block-size: 76vh; display: grid; place-items: center; text-align: center;
  background: var(--g-hero, #1c1714); color: #fcf6f2; padding: clamp(90px,11vw,140px) var(--pad); }
.ty__in { max-inline-size: 60ch; }
.ty__h { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.03em; margin: .3em 0 .45em; color: #fff; }
.ty__sub { font-size: clamp(16px,1.4vw,19px); line-height: 1.62; color: var(--ink-200, #e8d9d1); margin: 0 auto; max-inline-size: 52ch; }
.ty__list { list-style: none; margin: clamp(26px,3vw,38px) auto 0; padding: 0; display: grid; gap: 11px; max-inline-size: 44ch; text-align: start; }
.ty__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--ink-200, #e8d9d1); }
.ty__list svg { flex: none; margin-block-start: 2px; }
.ty__cta { margin-block-start: clamp(28px,3.2vw,40px); }
.ty__tick { margin-inline: auto; display: block; }
.ty__tick .tick { stroke-dasharray: 48; stroke-dashoffset: 48; animation: tyDraw .85s cubic-bezier(.2,.7,.2,1) .25s forwards; }
.ty__tick circle { stroke-dasharray: 164; stroke-dashoffset: 164; animation: tyDraw 1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes tyDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sgrid.anim .scard { opacity: 1; transform: none; }
  .scard, .scard__ph img, .scard__go svg { transition: none !important; }
  .ty__tick .tick, .ty__tick circle { animation: none; stroke-dashoffset: 0; }
}

/* The eyebrow inherits a muted tone meant for light sections; on the dark
   thank-you panel that measured 2.91:1. Lift it to the light-on-dark token. */
.ty .eyebrow { color: var(--ink-200, #e8d9d1); opacity: 1; }

/* .eyebrow--light resolves to --ink-300, which is meant for a mid-tone
   section, not the dark closing band — it measured 2.81:1 there. */
.cband .eyebrow, .cband .eyebrow--light { color: var(--ink-200, #e8d9d1); }

/* A split header spans the row. The 62ch cap belongs to a stacked heading
   block; left on the split it held the whole header at 48% of the row with
   the right half empty — the exact thing the split exists to fix.
   (Repeated per stylesheet because pages load different subsets.) */
.split.sx__top, .split.sig__top, .split.pg__top, .split.ab-top {
  max-inline-size: none;
  inline-size: 100%;
}
/* A lede is CONTENT: it belongs under the title, full width between the page
   padding, not in a 44% column beside it. The old rule parked the heading in
   62ch on the left, the lede in 56ch on the right, and left the rest of the
   row empty — which is what read as cluttered and left-pushed. A short .link
   or .btn may still sit beside a heading; that is the homepage's own pattern
   and the only thing .split is still doing here. */
.sx__aside, .sig__aside, .pg__aside, .ab-aside {
  flex: 1 0 100%; min-inline-size: 0; max-inline-size: none;
}
.ab-aside p + p { margin-block-start: .85em; }

/* A heading block with no supporting line has nothing to pair with, so the
   62ch cap just parks a short title in a narrow column with the row empty
   beside it. Let it span; the body below is full width anyway. */
@supports selector(:has(*)) {
  .sx__top:not(:has(.sec-sub)), .pg__top:not(:has(.sec-sub)) { max-inline-size: none; }
}

/* ⚠ .eyebrow IS A FLEX ROW, SO text-align ON THE BAND DOES NOTHING TO IT.
   .cband centres its contents with `text-align: center`, which centred the
   heading, the chips and the button — and left the eyebrow hard against the
   left edge, because a flex container positions its children with
   justify-content, not text-align. It has to be said explicitly.

   Rashi, 2026-10-29: "subheading center aligned". The rule bar centres with
   the text as one group, which is what the other centred sections do. */
.cband .eyebrow { justify-content: center; }