/* ==========================================================================
   Sanctuary Insurance v2, services.html page skin (catalog revamp, 2026-07-11).
   Extends the FROZEN foundation (styles.css); nothing here overrides the
   shared components, it only styles page-scoped classes. Every value traces
   to design/brands/sanctuary.md (the kit), to the ref scale already encoded
   in styles.css, or to a catalog component's extracted motion values.
   Catalog placements on this page: 016 AnimatedNumber (stat strip),
   004 HorizontalScroller (flagship pin), 011 Tilt Card (flagship cards),
   008 FAQs-Accordion (the other nine lines), 013 Icon Slide In Button
   (guide-band CTA). Inner pages stay CALM: one static world (world-light),
   no html flips (kit doctrine).
   House rule: no em or en dashes anywhere in this file.
   ========================================================================== */

/* ---- Page hero (calm, centered; type from the ref h1 fingerprint) ---- */
.page-hero {
  padding: 60px 48px 76px;   /* kit: page gutter 48; section pad member 76 hands off to the stat strip */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-eyebrow {
  font-size: 24px;           /* ref hero eyebrow 24 (same token as .hero-eyebrow in styles.css) */
  font-weight: 400;
  opacity: .82;              /* ref: eyebrow sits quieter than the h1 */
}
.page-hero h1 {
  font-size: 80px;           /* ref h1 80px, weight 400, hierarchy by size */
  line-height: 88px;         /* ref 88px */
  letter-spacing: -2px;      /* ref -2px */
  font-weight: 400;
  max-width: 900px;
  margin-top: 20px;
}
.page-lede {
  margin-top: 24px;
  font-size: 24px;           /* ref trust-line scale 24 (styles.css .trust-line) */
  line-height: 1.4;
  color: var(--muted-ink);   /* kit: muted ink role from the foundation */
  max-width: 640px;
}

/* ---- Stat strip (catalog 016 AnimatedNumber, re-tokened): 4 real figures,
        hierarchy by SIZE at 400, numbers on the ref 64 display step ---- */
.stat-strip {
  margin: 0 48px;                          /* kit: page gutter 48 */
  padding: 48px 0;                         /* derived: head-to-grid step 48 above and below */
  border-top: 1px solid var(--line);       /* kit: line as the hairline role */
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;                               /* ref card gap 32 */
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.stat-num {
  font-size: 64px;                         /* ref type scale member 64 (footer input display size) */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.6px;                  /* ref display tracking ratio at 64px */
  font-variant-numeric: tabular-nums;      /* count-up digits do not jitter mid-spring */
}
.stat-label { font-size: 16px; color: var(--muted-ink); } /* ref body 16, muted label role */

/* ---- Flagship pin (catalog 004 HorizontalScroller, re-tokened): sticky
        viewport + scroll-sprung track; the 3 home-surfaced lines as large
        pastel panels. Desktop only; mobile, reduced motion and no-JS get a
        calm static stack. ---- */
.flagship { margin-top: 96px; }            /* kit: section pad member 96 */
.flagship-sticky { padding: 0 48px; }      /* kit: page gutter 48 (static base state) */
.flagship-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.flagship-head-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.flagship-head h2 {
  font-size: 48px;                         /* derived: display step between the 32 step-title and 64 band display */
  font-weight: 400;
  letter-spacing: -1.2px;                  /* ref display tracking ratio (-2.5 percent) at 48px */
  line-height: 1.1;
}
.flagship-progress {
  width: 160px;
  height: 4px;                             /* kit: radius scale member 4 as the rail thickness */
  border-radius: 4px;
  background: var(--line);                 /* kit: secondary fill as the empty rail */
  overflow: hidden;
  display: none;                           /* shown only when the pin engages (desktop media below) */
}
.flagship-progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--accent-cta);           /* kit: accent-cta as the fill, the 026/027 progress role */
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.flagship-track {
  display: flex;
  flex-direction: column;                  /* static base: calm stack (mobile, no-JS, reduced motion) */
  gap: 32px;                               /* ref slide gap 32 */
  margin-top: 48px;                        /* derived: head-to-grid step 48 */
}
.flag-card {
  border-radius: 32px;                     /* ref card radius 32, flat filled, border NONE, shadow NONE */
  padding: 48px;                           /* derived: flagship panels breathe a step over the 32 card pad */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;                      /* tilt glare + transform anchor */
  overflow: hidden;                        /* clips the injected glare to the card radius */
}
.flag-eyebrow { font-size: 16px; color: var(--muted-ink); } /* muted label role */
.flag-card h3 {
  margin-top: 16px;
  font-size: 44px;                         /* derived: flagship title one step under the head 48; hierarchy by SIZE at 400 */
  font-weight: 400;
  letter-spacing: -1.1px;
  line-height: 1.15;
}
.flag-card p {
  margin-top: 16px;
  font-size: 16px;                         /* ref body 16/400 */
  line-height: 1.5;
  max-width: 520px;
}
.flag-link {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity .15s ease;
}
.flag-link:hover { opacity: .7; }
/* catalog 011 Tilt Card: transform + glare set by services.js; the card only
   declares the settle transition (component's extracted 0.2s ease-out) */
.flag-card[data-tilt] { transition: transform .2s ease-out; transform-style: preserve-3d; }
.tilt-glare {
  /* catalog 011 glare: radial white highlight following the pointer (component
     math: center 50 + mouse/2, fade to 0 at 80 percent); injected by JS only
     on fine pointers, so no-JS markup stays clean */
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 80%);
  transition: opacity .2s ease-out;        /* component's extracted transition */
}
.flag-card:hover .tilt-glare { opacity: 1; }

/* desktop: the pin engages (sticky viewport, horizontal track) */
@media (min-width: 821px) {
  .flagship { height: 280vh; }             /* derived: pin travel; scroll distance 180vh maps to the track overflow */
  .flagship-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;                      /* the track slides past the viewport edge */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 112px 48px 40px;              /* 112 clears the 92px fixed nav */
  }
  .flagship-progress { display: block; }
  .flagship-track {
    flex-direction: row;
    will-change: transform;                /* catalog 004: scroll -> spring -> rAF -> translateX */
  }
  .flag-card {
    flex: 0 0 clamp(560px, 52vw, 720px);
    min-height: 480px;                     /* echoes the ref 427x571 feature-card presence at panel scale */
  }
  .flag-card .tags { margin-top: auto; }
}

/* sub-product tags: compact kit pills (kit: pill radius 96; 14px = ref legal-row scale) */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                                /* kit spacing base 16 halved for chip clusters */
  margin-top: 24px;
  padding-top: 0;
}
.tags li {
  display: inline-flex;
  align-items: center;
  height: 32px;                            /* ref radius scale member 32 as compact pill height */
  padding: 0 14px;
  border-radius: 96px;                     /* kit: pill radius 96 */
  background: var(--surface);              /* kit: cream surface as the tag fill on pastel cards */
  color: var(--ink);                       /* kit: ink on light fills */
  font-size: 14px;                         /* ref legal-row scale 14 */
}

/* ---- The other nine lines (catalog 008 FAQs-Accordion, re-tokened):
        soft container (component wrapper role -> kit line fill), cream rows,
        plus-circle icon with the component's exact bar choreography,
        measured-height expand, one open at a time ---- */
.svc-rest { padding: 96px 48px 0; }        /* kit: section pad member 96 */
.rest-intro { max-width: 900px; margin: 0 auto 32px; text-align: center; }
.rest-intro h2 {
  font-size: 48px;                         /* matches the flagship head step */
  font-weight: 400;
  letter-spacing: -1.2px;
  line-height: 1.1;
}
.rest-lede { margin-top: 12px; font-size: 16px; color: var(--muted-ink); }
.line-acc {
  max-width: 900px;                        /* derived: single reading column inside the ref 1344 content box */
  margin: 0 auto;
  background: var(--line);                 /* catalog 008 wrapper fill role -> kit secondary fill */
  border-radius: 32px;                     /* kit card radius 32 (component wrapper 26 mapped to the kit scale) */
  padding: 8px;                            /* component wrapper pad 4 doubled to the kit's 8 step */
  display: flex;
  flex-direction: column;
  gap: 8px;                                /* component gap 2 mapped up to the kit's 8 step */
}
.line {
  background: var(--surface);              /* catalog 008 item fill role -> kit cream */
  border-radius: 24px;                     /* kit radius scale member 24 inside the 32 wrapper */
  overflow: hidden;
}
.line-h { font-weight: 400; }              /* kit: hierarchy by SIZE at 400; the button carries the size */
.line-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px;                      /* component item pad 24 on the kit rhythm */
  text-align: left;
}
.line-name {
  font-size: 22px;                         /* derived: one step under the 26 card caption for the row scale */
  line-height: 1.3;
}
.line-btn:hover { background: rgba(250, 222, 222, .4); } /* kit line at 40 percent as the hover wash */
/* plus-circle icon: component geometry (28px circle, two bars), kit fills;
   bar choreography exact from the export: H bar -90deg -> 90deg, V bar
   -180deg -> 90deg, 0.25s cubic-bezier(0.4, 0, 0.2, 1) */
.acc-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 100px;
  background: var(--line);                 /* component icon fill role -> kit secondary fill */
  position: relative;
  overflow: hidden;
}
.acc-ico i {
  position: absolute;
  width: 1.5px;
  height: 12px;
  background: var(--ink);                  /* component bar color role -> kit ink */
  left: calc(50% - 0.75px);
  top: calc(50% - 6px);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.acc-ico .b1 { transform: rotate(-90deg); }
.acc-ico .b2 { transform: rotate(-180deg); }
.line.open .acc-ico .b1 { transform: rotate(90deg); }
.line.open .acc-ico .b2 { transform: rotate(90deg); }
/* measured-height expand (component: height 0 -> measured scrollHeight);
   services.js drives the pixel value, CSS owns the curve */
.line-panel {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .35s var(--ease-house), opacity .25s ease; /* kit house ease */
}
.line.open .line-panel { opacity: 1; }
.line-inner { padding: 0 28px 26px; }
.line-inner p {
  font-size: 16px;                         /* ref body 16/400 */
  line-height: 1.6;
  max-width: 720px;
}
.line-inner .tags { margin-top: 16px; }
.line-inner .tags li { background: var(--line); } /* kit: line fill keeps tags visible on the cream row */

/* ---- Staggered scroll reveals: applied only when JS confirms IO support
        (html.js-reveal), so no-JS never hides content ---- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.js-reveal [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease-house), transform .6s var(--ease-house);
  transition-delay: var(--rd, 0s);
}

/* ---- Guidance CTA band: STATIC rounded coral card, no world flip (kit:
        card-coral is the bright member of the card set; flips are home-only) ---- */
.guide-band {
  margin: 128px 48px 128px;                /* kit section pad member 128; page gutter 48 */
  border-radius: 32px;                     /* ref card radius 32 */
  background: var(--card-coral);           /* kit: pastel card 2 = world-bright reused as a card fill */
  color: var(--ink);                       /* kit contrast fact: ink on coral 4.6:1, large type */
  padding: 112px 48px;                     /* derived: kit section pads 96..128 midpoint for a band interior */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.guide-band .display {
  font-size: 64px;                         /* ref type scale member 64 */
  letter-spacing: -1.6px;
  line-height: 1.1;
}
.guide-band .pill13 { margin-top: 48px; }  /* ref cta-band stack rhythm */

/* ---- catalog 013 Icon Slide In Button, re-tokened to the kit pill:
        radius 96, height 68 (ref hero CTA), fill bubble blooms in the kit
        hover red, arrow slides in from the right while the label shifts.
        Motion exact from the export: 0.5s cubic-bezier(.34, 1.08, .64, 1). ---- */
.pill13 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 68px;                            /* ref hero CTA height 68 */
  padding: 0 40px;
  border-radius: 96px;                     /* kit pill radius 96 */
  overflow: hidden;                        /* clips the fill bubble */
  font-size: 16px;
  font-weight: 500;
}
.pill13::before {
  /* the fill bubble: a circle parked under the bottom edge that blooms to
     flood the pill (component geometry: 8px seed, bottom -8, expands ~108%) */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  transform: translateX(-50%);
  pointer-events: none;
  transition: width .5s cubic-bezier(.34, 1.08, .64, 1), height .5s cubic-bezier(.34, 1.08, .64, 1), bottom .5s cubic-bezier(.34, 1.08, .64, 1);
}
.pill13:hover::before,
.pill13:focus-visible::before {
  width: 112%;
  height: 220px;
  bottom: -60px;
}
.pill13-label {
  position: relative;
  z-index: 1;
  transition: transform .5s cubic-bezier(.34, 1.08, .64, 1), color .5s cubic-bezier(.34, 1.08, .64, 1);
}
.pill13:hover .pill13-label,
.pill13:focus-visible .pill13-label { transform: translateX(-10px); }
.pill13-icon {
  position: absolute;
  right: -24px;                            /* rest: parked off the clipped edge (component rest right -23) */
  display: inline-flex;
  z-index: 1;
  transition: right .5s cubic-bezier(.34, 1.08, .64, 1), color .5s cubic-bezier(.34, 1.08, .64, 1);
}
.pill13:hover .pill13-icon,
.pill13:focus-visible .pill13-icon { right: 18px; }
.pill13-primary {
  background: var(--accent-cta);           /* kit: primary pill = accent-cta with white text, 5.86:1 AA */
  color: #FFFFFF;
}
.pill13-primary::before { background: #AE1217; } /* kit: accent-cta hover red as the bloom fill */
/* touch surfaces have no hover: the arrow rests visible inside the pill */
@media (hover: none) {
  .pill13 { padding: 0 52px 0 32px; }
  .pill13-icon { right: 22px; }
}

/* ---- Mobile (matches the frozen 820 breakpoint) ---- */
@media (max-width: 820px) {
  .page-hero { padding: 32px 20px 48px; }  /* ref mobile page gutter 20 */
  .page-eyebrow { font-size: 16px; }       /* ref mobile eyebrow 16 */
  .page-hero h1 {
    font-size: 28.125px;                   /* kit: mobile h1 28px (ref mobile h1 fingerprint 28.125) */
    line-height: 30.9375px;
    letter-spacing: -0.703125px;
    max-width: 320px;
    margin-top: 12px;
  }
  .page-lede { font-size: 16px; margin-top: 16px; max-width: 335px; }

  .stat-strip { margin: 0 20px; padding: 32px 0; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .stat-num { font-size: 40px; letter-spacing: -1px; } /* derived: 64 steps down inside the mobile column */

  .flagship { margin-top: 64px; }
  .flagship-sticky { padding: 0 20px; }    /* ref mobile page gutter 20 */
  .flagship-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .flagship-head h2 { font-size: 32px; letter-spacing: -0.8px; } /* ref mobile display 32/-0.8 */
  .flagship-track { gap: 16px; margin-top: 32px; }
  .flag-card { padding: 24px; }            /* ref mobile card pad 24 */
  .flag-card h3 { font-size: 26px; letter-spacing: -0.5px; } /* ref card caption scale holds on mobile */
  .flag-card p { font-size: 16px; }

  .svc-rest { padding: 64px 20px 0; }
  .rest-intro h2 { font-size: 32px; letter-spacing: -0.8px; }
  .line-acc { padding: 6px; gap: 6px; border-radius: 24px; }
  .line { border-radius: 20px; }
  .line-btn { padding: 20px; }
  .line-name { font-size: 16px; }          /* kit: body 16 on mobile rows */
  .line-inner { padding: 0 20px 20px; }

  .guide-band {
    margin: 76px 20px 76px;                /* kit section pad member 76; mobile gutter 20 */
    padding: 64px 24px;
  }
  .guide-band .display { font-size: 32px; letter-spacing: -0.8px; }
  .guide-band .pill13 { margin-top: 32px; }
}

/* ---- Reduced motion: every animation on this page dies here (build law) ---- */
@media (prefers-reduced-motion: reduce) {
  .flagship { height: auto !important; }
  .flagship-sticky { position: static !important; height: auto !important; overflow: visible !important; padding-top: 0 !important; }
  .flagship-track { flex-direction: column !important; transform: none !important; }
  .flag-card { flex: 1 1 auto !important; width: 100% !important; min-height: 0 !important; }
  .flagship-progress { display: none !important; }
  .flag-card[data-tilt] { transition: none; transform: none !important; }
  .tilt-glare { display: none; }
  .line-panel, .acc-ico i { transition: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pill13::before, .pill13-label, .pill13-icon { transition: none; }
  .pill13 { padding: 0 52px 0 32px; }
  .pill13-icon { right: 22px; }            /* arrow rests visible, nothing slides */
}