/* ==========================================================================
   Sanctuary Insurance v2, complaints.html page skin (Round-24, client ask 4
   and 5). Extends the FROZEN foundation (styles.css); page-scoped classes only.
   Every value traces to design/brands/sanctuary.md (the kit), to the ref scale
   already encoded in styles.css, or to a sibling page skin (quote.css owns the
   page-hero, pill13 and scroll-cue vocabularies; they are re-declared here
   because quote.css does not load on this page).
   Inner pages are CALM: one static world (world-light). The IPEC band paints
   world-deep charcoal on the SECTION itself, never an html world flip.
   House rule: no em or en dashes anywhere in this file.
   ========================================================================== */

/* ---- Page hero (calm, centered; same vocabulary as quote.css) ---- */
.page-hero {
  padding: 60px 48px 64px;   /* kit: page gutter 48; 60 top clears the 92px fixed nav rhythm */
  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;
}
.page-hero h1 {
  font-size: 80px;           /* ref h1 80px, weight 400, hierarchy by size */
  line-height: 88px;
  letter-spacing: -2px;
  font-weight: 400;
  max-width: 980px;
  margin-top: 20px;
}
.page-lede {
  margin-top: 24px;
  font-size: 24px;           /* ref trust-line scale 24 */
  line-height: 1.4;
  color: var(--muted-ink);
  max-width: 760px;
}

/* ---- catalog 069 ScrollIndicator (elegant chevrons preset), re-tokened
        exactly as quote.css: two stacked chevrons drift and fade on the
        component's 1.8s loop; a real anchor, so it works with JS off ---- */
.scroll-cue {
  margin-top: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;                                  /* component chevronGap */
  color: var(--muted-ink);
  transition: color .2s ease;
}
.scroll-cue:hover,
.scroll-cue:focus-visible { color: var(--ink); }
.sc-chev { display: block; line-height: 0; animation: sq-sc-drift 1.8s ease-in-out infinite; }
.sc-chev:nth-child(2) { animation-delay: .14s; }
@keyframes sq-sc-drift {
  0%   { transform: translateY(0);   opacity: 0; }
  17%  { transform: translateY(0);   opacity: 1; }
  50%  { transform: translateY(8px); opacity: 1; }
  83%  { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0);   opacity: 0; }
}

/* ==========================================================================
   The compose form. NO fake backend (build law): the form's native action is
   a real mailto and complaints.js only upgrades it to a structured body.
   Inputs follow the kit's in-page input rule: filled surface pill, radius 96.
   ========================================================================== */
.tell-sec { padding: 0 48px; max-width: 1000px; margin: 0 auto; } /* kit: page gutter 48; calm form measure inside the ref 1344 box */
.sec-head { display: flex; flex-direction: column; gap: 12px; }
.sec-head h2 {
  font-size: 48px;           /* derived: one step under the 96 display, the inner-page section head */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.2px;    /* ref display tracking scaled to 48 */
}
.sec-lede {
  font-size: 16px;           /* kit: body 16 */
  line-height: 1.6;
  color: var(--muted-ink);
  max-width: 640px;
}

.complaint-form { margin-top: 40px; }
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;            /* ref card gap 32 across, 24 down */
}
.field { display: flex; flex-direction: column; gap: 10px; }
.field-wide { grid-column: 1 / -1; }
.field-label { font-size: 16px; color: var(--muted-ink); }
.field-opt { font-size: 14px; }  /* ref legal-row scale 14 for the optional tag */
.field-input {
  width: 100%;
  height: 60px;              /* ref navPill height 60, the kit's in-page pill input scale */
  padding: 0 28px;
  border: 0;
  border-radius: 96px;       /* kit: pill radius 96 */
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
}
.field-input::placeholder { color: rgba(26, 26, 26, .42); } /* charcoal at 42 percent, readable but clearly a hint */
.field-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
textarea.field-input {
  /* the pill radius is wrong for a multi-line box: drop to the kit's 24 */
  height: auto;
  min-height: 190px;
  padding: 20px 28px;
  border-radius: 24px;
  line-height: 1.6;
  resize: vertical;
}

/* the rhythm here is per-child margins, not a flex gap, on purpose: the status
   line is an aria-live region that must stay in the DOM and out of display:none
   (a region revealed from display:none is not reliably announced), so while it
   is empty it has to collapse to nothing without leaving a gap behind it */
.form-foot { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.form-note {
  margin-top: 16px;          /* kit spacing base 16 */
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 620px;
}
.form-note:empty { margin-top: 0; }        /* zero height, zero margin, still in the accessibility tree */
.form-hint, .form-plain, .form-privacy {
  font-size: 14px;           /* ref legal-row scale 14 for the quiet lines under the button */
  line-height: 1.6;
  color: var(--muted-ink);
  max-width: 620px;
}
.form-hint { margin-top: 16px; }
.form-plain, .form-privacy { margin-top: 8px; }
.form-hint a, .form-plain a, .form-privacy a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;   /* the address never overflows the column at 375 */
}

/* ==========================================================================
   How your complaint moves: three calm steps. No SLA, no timeline, because
   Sanctuary has published none (see the OWED comment in complaints.html).
   ========================================================================== */
.moves-sec { padding: 128px 48px 0; max-width: 1344px; margin: 0 auto; } /* kit: section pad member 128 */
.moves-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;                 /* ref card gap 32 */
  margin-top: 48px;
}
.move-card {
  border-radius: 32px;       /* ref card radius 32, flat filled, border none, shadow none */
  padding: 32px;             /* ref card pad 32 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;                 /* kit spacing base 16 */
}
.move-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px; /* ref chip height 48 as a numbered circle (quote.css .step-num) */
  border-radius: 50%;
  background: var(--accent-cta);
  color: #FFFFFF;            /* kit: white on accent-cta, 5.86:1 AA */
  font-size: 16px;
}
.move-card h3 {
  font-size: 26px;           /* ref card caption scale 26/400 */
  font-weight: 400;
  line-height: 1.3;
}
.move-card p { font-size: 16px; line-height: 1.6; }
.move-card a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.move-quote {
  /* their own tagline, set as a quotation and attributed; brand-kit voice list */
  font-size: 20px;           /* locked system: sheet-row scale 20 */
  line-height: 1.4;
  border-left: 2px solid var(--accent); /* kit: the exact logo red as a small saturated mark, never a large fill */
  padding-left: 16px;
}
.move-cite { font-size: 14px; color: var(--muted-ink); }
.move-link { margin-top: auto; font-size: 16px; }

/* ==========================================================================
   The IPEC band: world-deep charcoal painted on the SECTION (kit: world-deep
   1A1A1A with ink-inverse, 8.4:1 in the kit's contrast table). No html flip.
   Every fact inside is from research/ipec-verified-2026-08-22.md.
   ========================================================================== */
.ipec-band {
  margin-top: 128px;         /* kit section pad member 128 */
  background: var(--world-deep);
  color: var(--ink-inverse);
  padding: 96px 48px;        /* kit section pad member 96 */
  scroll-margin-top: 96px;   /* the homepage links complaints.html#ipec; clear the fixed nav */
}
.ipec-inner { max-width: 1344px; margin: 0 auto; } /* ref widest text box 1344 */
.ipec-band .chip {
  /* the chip tokens follow the html world, and this band is a section fill,
     so restate the deep-world values locally */
  background: rgba(255, 255, 255, .12);
  color: var(--ink-inverse);
}
.ipec-band h2 {
  margin-top: 24px;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.2px;
  max-width: 900px;
}
.ipec-lede {
  margin-top: 24px;
  font-size: 20px;
  line-height: 1.6;
  max-width: 800px;
  color: rgba(255, 255, 255, .88); /* white at 88 percent, comfortably AA on charcoal */
}
.ipec-steps {
  margin-top: 24px;
  max-width: 800px;
  list-style: decimal;
  padding-left: 22px;        /* room for the marker; the ladder reads clearer numbered */
}
.ipec-steps li {
  font-size: 16px;
  line-height: 1.7;
  margin-top: 8px;
  color: rgba(255, 255, 255, .88);
}
.ipec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;                 /* ref card gap 32 */
  margin-top: 56px;
}
.ipec-card {
  border-radius: 32px;       /* ref card radius 32 */
  padding: 32px;             /* ref card pad 32 */
  background: rgba(255, 255, 255, .07); /* the deep world's card fill: white at 7 percent on charcoal */
}
.ipec-card h3 {
  font-size: 20px;           /* locked system: sheet-row scale 20 */
  font-weight: 400;
  line-height: 1.3;
}
.ipec-dl { margin-top: 20px; }
.ipec-dl div { margin-top: 16px; }         /* kit spacing base 16 between rows */
.ipec-dl div:first-child { margin-top: 0; }
.ipec-dl dt {
  font-size: 14px;                          /* ref legal-row scale 14 for the field label */
  color: rgba(255, 255, 255, .65);          /* the deep world's muted ink token */
}
.ipec-dl dd {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;                  /* the long published tel string wraps instead of overflowing at 375 */
}
.ipec-dl a,
.ipec-foot a {
  /* the accent red only reaches 4.0:1 on charcoal, so links on this band stay
     white and carry an underline instead (kit contrast table) */
  color: var(--ink-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .15s ease;
}
.ipec-dl a:hover,
.ipec-foot a:hover { opacity: .75; }
.ipec-foot {
  margin-top: 48px;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ipec-register { font-size: 16px; line-height: 1.6; }
.ipec-source { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .65); }

/* ---- catalog 013 Icon Slide In Button, re-tokened to the kit pill (the
        variant set and the exact 0.5s cubic-bezier(.34,1.08,.64,1) motion are
        quote.css's; restated here because quote.css does not load) ---- */
.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;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
}
.pill13-sm { height: 52px; padding: 0 30px; } /* ref nav CTA pill height 52 */
.pill13::before {
  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(-9px); }
.pill13-icon {
  position: absolute;
  right: -24px;
  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: 16px; }
.pill13-primary { background: var(--accent-cta); color: #FFFFFF; } /* kit: primary pill, 5.86:1 AA */
.pill13-primary::before { background: #AE1217; }                   /* kit: accent-cta hover red */
@media (hover: none) {
  .pill13 { padding: 0 52px 0 32px; }
  .pill13-sm { padding: 0 44px 0 26px; }
  .pill13-icon { right: 20px; }
}

/* ---- Staggered scroll reveals (JS-gated via html.js-reveal; no-JS never hides) ---- */
.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);
}

/* ---- catalog 058 Hover Text Highlight on the shared footer link columns ---- */
.hl-links a { position: relative; }
.hl-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease-house);
}
.hl-links a:hover::after,
.hl-links a:focus-visible::after { transform: scaleX(1); }

/* ---- Mobile (the frozen 820 breakpoint) ---- */
@media (max-width: 820px) {
  .page-hero { padding: 32px 20px 40px; }   /* ref mobile page gutter 20 */
  .page-eyebrow { font-size: 16px; }
  .page-hero h1 {
    font-size: 28.125px;                    /* ref mobile h1 fingerprint */
    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; }

  .tell-sec { padding: 0 20px; }
  .sec-head h2 { font-size: 24px; letter-spacing: -0.5px; } /* locked system: mobile inner head 24 */
  .complaint-form { margin-top: 28px; }
  .field-grid { grid-template-columns: 1fr; gap: 20px; }
  .field-input { height: 52px; padding: 0 20px; }
  textarea.field-input { min-height: 160px; padding: 16px 20px; }
  .form-foot { margin-top: 24px; }

  .moves-sec { padding: 76px 20px 0; }      /* kit section pad member 76 on mobile */
  .moves-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .move-card { padding: 24px; }             /* ref mobile card pad 24 */
  .move-num { width: 44px; height: 44px; }  /* ref mobile chip 44 */
  .move-card h3 { font-size: 20px; }

  .ipec-band { margin-top: 76px; padding: 76px 20px; }
  .ipec-band h2 { font-size: 24px; letter-spacing: -0.5px; }
  .ipec-lede { font-size: 16px; }
  .ipec-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .ipec-card { padding: 24px; }
  .ipec-foot { margin-top: 32px; }
}

/* ---- Reduced motion: every animation on this page dies here (build law) ---- */
@media (prefers-reduced-motion: reduce) {
  .sc-chev { animation: none; opacity: 1; }  /* the scroll cue rests visible */
  .hl-links a::after { 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-sm { padding: 0 44px 0 26px; }
  .pill13-icon { right: 20px; }              /* the arrow rests visible, nothing slides */
  .ipec-dl a, .ipec-foot a { transition: none; }
}