/* ==========================================================================
   SS PARA LEGAL SERVICES - Design System
   ssadvisers.com/paralegal-support

   COLOUR IS LOCKED BY THE CLIENT.
   Source: client-provided/24-08-2026/SS_Paralegal_Color_Kit.pdf §1 and §5.
   Green, Gold and White/Ivory are the complete colour language. No red, no
   blue, no black-dominant sections, no unrelated accents. Every gradient,
   shadow and overlay is derived from the approved green family so the site
   always reads visually as GREEN rather than black. The WhatsApp control is
   the single functional exception (#25D366, white icon).

   Do not nudge these values by eye. They are the client's issued kit.

   CONTENTS
     1  Tokens
     2  Reset and base
     3  Layout primitives
     4  Typographic devices
     5  Buttons
     6  Availability strip
     7  Header, mega panel, drawer
     8  Opening frames
     9  Page headers
    10  Cards, pillars, steps, lists
    11  Disclosure (FAQ)
    12  Forms
    13  Callouts and compliance
    14  Footer
    15  WhatsApp control
    16  Motion
    17  Utilities and print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* ---- The locked kit, verbatim ---- */
  --ss-green:           #042B19;  /* Primary Deep Green  - hero, dark bands, footer */
  --ss-green-secondary: #0A502C;  /* Supporting Green    - gradients, cards, depth  */
  --ss-gold:            #D8AC54;  /* Premium Gold        - borders, icons, dividers */
  --ss-gold-highlight:  #EFC873;  /* Highlight Gold      - primary CTA, emphasis    */
  --ss-ivory:           #F5F3EE;  /* Warm White / Ivory  - header, light sections   */
  --ss-white:           #FFFFFF;
  --ss-whatsapp:        #25D366;

  /* ---- Derived, all inside the approved green family ----
     The kit forbids darkening toward black, so the deepest tone below is
     still a legible green. Used only at the far edge of gradients. */
  --green-lift:   #0E6237;
  --green-wash:   #ECF1ED;
  --green-line:   #DCE4DD;

  /* Gold as TEXT on a light surface. The kit's Premium Gold is an ink for
     borders, icons and dividers on green; at small sizes on ivory it only
     reaches 3.9:1, so gold emphasis text uses this darkened member of the same
     family, which clears 4.5:1 on ivory, wash and white alike. Gold on green
     is always the kit value. */
  --gold-ink: #84601E;

  /* ---- Ink ---- */
  --ink:        #042B19;
  --ink-soft:   #3A4A40;  /* secondary copy on light, 8.5:1 on ivory */
  --ink-faint:  #5C6A61;  /* fine print on light, 4.9:1 on ivory     */
  --on-green:        #FFFFFF;
  --on-green-soft:   rgba(255, 255, 255, 0.84);
  --on-green-faint:  rgba(255, 255, 255, 0.64);

  /* ---- Gold at low alpha, for hairlines and washes on green ---- */
  --gold-line:  rgba(216, 172, 84, 0.44);
  --gold-faint: rgba(216, 172, 84, 0.18);
  --gold-glow:  rgba(239, 200, 115, 0.28);

  /* ---- Type ---- */
  --font-display: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Floors are set for a 360px phone, ceilings for a 1440px desktop. The
     floors were raised after review: at the old values body copy landed at
     16px and secondary copy below that, which reads small on a handset. */
  --t-display: clamp(2.7rem,  1.55rem + 4.6vw,  4.4rem);
  --t-h1:      clamp(2.3rem,  1.6rem  + 3vw,    3.35rem);
  --t-h2:      clamp(1.85rem, 1.45rem + 1.75vw, 2.45rem);
  --t-h3:      clamp(1.3rem,  1.16rem + 0.6vw,  1.5rem);
  --t-h4:      clamp(1.12rem, 1.06rem + 0.26vw, 1.2rem);
  --t-lead:    clamp(1.14rem, 1.06rem + 0.36vw, 1.28rem);
  --t-body:    clamp(1.06rem, 1.02rem + 0.18vw, 1.12rem);
  --t-small:   0.98rem;
  --t-label:   0.82rem;

  /* ---- Space ---- */
  --space-band: clamp(4rem, 2.6rem + 6vw, 8rem);
  --space-gutter: clamp(1.25rem, 0.7rem + 2.4vw, 2.5rem);
  --shell: 1240px;
  --shell-narrow: 800px;

  /* ---- Radii and elevation (green-derived shadows, never neutral black) ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(4, 43, 25, 0.04), 0 4px 14px rgba(4, 43, 25, 0.06);
  --shadow-md: 0 2px 6px rgba(4, 43, 25, 0.06), 0 14px 38px rgba(4, 43, 25, 0.10);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Chrome heights, used for scroll offsets and safe areas ---- */
  --strip-h: 42px;
  --header-h: 72px;
}

@media (min-width: 1000px) {
  :root { --header-h: 84px; }
}

@media (min-width: 900px) and (max-height: 840px) {
  :root { --t-display: clamp(2.7rem, 1.55rem + 3.6vw, 3.7rem); }
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ss-ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.014em;
  margin: 0 0 0.5em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.008em; }
h4 { font-size: var(--t-h4); letter-spacing: -0.004em; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

hr { border: 0; height: 1px; background: var(--green-line); margin: 2rem 0; }

::selection { background: var(--ss-gold-highlight); color: var(--ss-green); }

/* Links inside running text. Scoped to text containers so buttons, cards and
   navigation keep their own colour - a blanket `a` rule outranks the component
   classes and was rendering the primary CTA gold-on-gold. */
:is(p, li, dd, .lead, .fine, .compliance) a {
  color: var(--ss-green-secondary);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
:is(p, li, dd, .lead, .fine, .compliance) a:hover { color: var(--ss-green); }
.band--green :is(p, li, dd, .lead, .fine, .compliance) a { color: var(--ss-gold-highlight); }
.band--green :is(p, li, dd, .lead, .fine, .compliance) a:hover { color: var(--ss-white); }

:focus-visible {
  outline: 3px solid var(--ss-gold-highlight);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--ivory :focus-visible,
.band--wash :focus-visible,
.band--white :focus-visible,
.header :focus-visible,
.mega :focus-visible,
.drawer :focus-visible { outline-color: var(--gold-ink); }

.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 999;
  background: var(--ss-gold-highlight);
  color: var(--ss-green);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: top 0.16s var(--ease);
}
.skip-link:focus { top: 8px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }

.band { position: relative; padding-block: var(--space-band); }

.band--ivory { background: var(--ss-ivory); }
.band--wash  { background: var(--green-wash); }
.band--white { background: var(--ss-white); }

/* Dark section. Never black corners: every stop is inside the green family. */
.band--green {
  background:
    radial-gradient(115% 85% at 84% 4%, rgba(14, 98, 55, 0.5) 0%, rgba(10, 80, 44, 0) 60%),
    radial-gradient(95% 70% at 6% 98%, rgba(10, 80, 44, 0.5) 0%, rgba(10, 80, 44, 0) 64%),
    linear-gradient(168deg, #073C22 0%, var(--ss-green) 48%, #032414 100%);
  color: var(--on-green);
  isolation: isolate;
}

.band--green h1, .band--green h2, .band--green h3, .band--green h4 { color: var(--ss-white); }
.band--green p { color: var(--on-green-soft); }

/* Guilloché - the security-print texture. Gold, very low opacity, dark bands
   only. Derived from the gold token so it stays inside the locked language. */
.band--green::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'>\
<g fill='none' stroke='%23D8AC54' stroke-width='0.55' opacity='0.13'>\
<circle cx='48' cy='48' r='46'/><circle cx='48' cy='48' r='33'/><circle cx='48' cy='48' r='20'/>\
<circle cx='0' cy='0' r='27'/><circle cx='96' cy='0' r='27'/>\
<circle cx='0' cy='96' r='27'/><circle cx='96' cy='96' r='27'/>\
</g></svg>");
  background-size: 96px 96px;
}

/* Gold hairline along the foot of every dark band. */
.band--green::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 18%, var(--gold-line) 82%, transparent);
  pointer-events: none;
}

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 880px) {
  .split              { grid-template-columns: 1fr 1fr; }
  .split--wide-first  { grid-template-columns: 1.2fr 1fr; }
  .split--wide-second { grid-template-columns: 1fr 1.2fr; }
  .split--sidebar     { grid-template-columns: 1.55fr 1fr; align-items: start; }
}

.stack > * + * { margin-top: 1.15rem; }

.grid { display: grid; gap: clamp(1rem, 0.5rem + 1.4vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* A section's opening block: eyebrow, heading, lead. */
.section-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHIC DEVICES
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1.1rem;
  line-height: 1.4;
}
.band--green .eyebrow { color: var(--ss-gold-highlight); }

.gold { color: var(--ss-gold-highlight); }
.band--ivory .gold, .band--wash .gold, .band--white .gold { color: var(--gold-ink); }

.lead { font-size: var(--t-lead); line-height: 1.62; color: var(--ink-soft); }
.band--green .lead { color: var(--on-green-soft); }

.fine { font-size: var(--t-small); color: var(--ink-faint); line-height: 1.62; }
.band--green .fine { color: var(--on-green-faint); }


/* --------------------------------------------------------------------------
   5. BUTTONS
   Colour Kit §2: Primary CTA = Highlight Gold fill, Deep Green text and icon.
   Secondary CTA = Green fill, white text, fine gold border.
   Every variant sets its own colour so no ancestor link rule can reach it.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn > svg { flex: none; }

.btn--primary,
.btn--primary:link,
.btn--primary:visited {
  background: linear-gradient(165deg, var(--ss-gold-highlight) 0%, var(--ss-gold) 100%);
  color: var(--ss-green);
  border-color: rgba(132, 96, 30, 0.32);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 20px rgba(216, 172, 84, 0.24);
}
.btn--primary:hover, .btn--primary:focus {
  background: linear-gradient(165deg, #F7D68C 0%, var(--ss-gold-highlight) 100%);
  color: var(--ss-green);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 12px 30px rgba(216, 172, 84, 0.34);
}

.btn--secondary,
.btn--secondary:link,
.btn--secondary:visited {
  background: var(--ss-green);
  color: var(--ss-white);
  border-color: var(--gold-line);
}
.btn--secondary:hover, .btn--secondary:focus {
  background: var(--ss-green-secondary);
  color: var(--ss-white);
  border-color: var(--ss-gold);
}

.btn--outline,
.btn--outline:link,
.btn--outline:visited {
  background: transparent;
  color: var(--ss-green);
  border-color: rgba(4, 43, 25, 0.24);
}
.btn--outline:hover, .btn--outline:focus {
  background: var(--ss-green);
  color: var(--ss-white);
  border-color: var(--ss-green);
}
.band--green .btn--outline,
.band--green .btn--outline:link,
.band--green .btn--outline:visited {
  color: var(--ss-white);
  border-color: var(--gold-line);
  background: rgba(255, 255, 255, 0.04);
}
.band--green .btn--outline:hover, .band--green .btn--outline:focus {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ss-white);
  border-color: var(--ss-gold);
}

.btn--sm { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.93rem; }
.btn--lg { min-height: 60px; padding: 1rem 2rem; font-size: 1.06rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.btn-row--center { justify-content: center; }
@media (max-width: 519px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 32px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: var(--ss-green-secondary);
}
.link-arrow::after { content: "→"; transition: transform 0.2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.band--green .link-arrow { color: var(--ss-gold-highlight); }

/* --------------------------------------------------------------------------
   6. AVAILABILITY STRIP
   Master Part 3: above the header, inside the mobile safe area, never cropped.
   -------------------------------------------------------------------------- */

.strip {
  background: var(--ss-green);
  color: var(--ss-white);
  padding: 0.5rem var(--space-gutter);
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
  text-align: center;
}
.strip__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.strip__icon { color: var(--ss-gold); flex: none; }
.strip__inner i { font-style: normal; opacity: 0.5; margin-inline: 0.05em; }

/* --------------------------------------------------------------------------
   7. HEADER, MEGA PANEL, DRAWER
   Colour Kit §2: ivory background, brand and navigation in deep green,
   supporting line in gold, Request Service visually distinct.
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 243, 238, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--green-line);
  transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.header[data-scrolled="true"] {
  background: rgba(245, 243, 238, 0.97);
  box-shadow: 0 1px 0 var(--gold-faint), 0 10px 30px rgba(4, 43, 25, 0.07);
}

.header__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.55rem var(--space-gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 2rem);
}

/* Brand lockup. flex:0 0 auto with min-width:0 keeps it from ever growing into
   the navigation, which is what produced the overlap in the first build. */
.brand {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark {
  width: 44px; height: 44px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(4, 43, 25, 0.18));
}
@media (min-width: 1000px) { .brand__mark { width: 52px; height: 52px; } }

.brand__words { display: flex; flex-direction: column; min-width: 0; }

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.98rem, 0.72rem + 0.85vw, 1.24rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--ss-green);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Master Part 3: the pillars line sits directly beneath the brand name. */
.brand__pillars {
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 0.6rem + 0.18vw, 0.7rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 0.25rem;
  white-space: nowrap;
}
.brand__pillars i { font-style: normal; opacity: 0.6; margin-inline: 0.1em; }

/* Navigation. Hidden until there is genuinely room; the mega panel keeps all
   eleven service pages one click away at every width. */
.nav { display: none; }

@media (min-width: 1000px) {
  .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(0.35rem, 0.6vw, 1rem);
  }
  .nav__item { display: flex; align-items: center; gap: 0.1rem; }

  .nav__link {
    position: relative;
    display: inline-block;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--ss-green);
    text-decoration: none;
    padding: 0.55rem;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: color 0.18s var(--ease);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0.55rem; right: 0.55rem;
    bottom: 0.22rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ss-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s var(--ease-out);
  }
  .nav__link:hover::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] { font-weight: 600; }
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  .nav__disclose {
    display: inline-grid;
    place-items: center;
    width: 32px; height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--gold-ink);
    cursor: pointer;
    transition: transform 0.24s var(--ease), background-color 0.18s var(--ease);
  }
  .nav__disclose:hover { background: rgba(4, 43, 25, 0.06); }
  .nav__disclose[aria-expanded="true"] { transform: rotate(180deg); }
}

.header__tools { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
/* Below 560px the brand lockup, a labelled CTA and the menu control cannot
   share the row, so the CTA keeps its gold plate and drops to an icon-only
   target; the label stays in the accessibility tree. Below 480px even that
   does not fit beside the full brand name, and the drawer's own gold CTA plus
   the persistent WhatsApp control carry the conversion path instead. */
@media (max-width: 479px) { .header__cta { display: none; } }
@media (max-width: 759px) {
  .header__cta { padding-inline: 0; width: 46px; }
}
@media (max-width: 559px) {
  :root { --header-h: 84px; }
  .header__inner { padding-block: 0.4rem; }
  .brand { gap: 0.5rem; }
  .brand__mark { width: 64px; height: 64px; }
  .header__cta-label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

.burger {
  width: 46px; height: 46px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(4, 43, 25, 0.18);
  border-radius: var(--r-sm);
  color: var(--ss-green);
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.burger:hover { background: rgba(4, 43, 25, 0.05); }
.burger__bars { display: block; width: 20px; height: 14px; position: relative; }
.burger__bars span {
  position: absolute;
  left: 0; right: 0;
  height: 1.8px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.24s var(--ease), opacity 0.16s var(--ease);
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 6px; }
.burger__bars span:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Mega panel ---- */

.mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--ss-ivory);
  border-top: 1px solid var(--gold-faint);
  border-bottom: 1px solid var(--green-line);
  box-shadow: 0 26px 50px rgba(4, 43, 25, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease-out), visibility 0.22s;
}
.mega[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 999px) { .mega { display: none; } }

.mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
  gap: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
  padding-block: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
}

.mega__label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.9rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--green-line);
}

.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li { margin: 0; }

.mega__link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: var(--r-sm);
  font-size: 0.97rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.mega__link svg { flex: none; color: var(--gold-ink); transition: color 0.16s var(--ease); }
.mega__link:hover { background: var(--ss-white); color: var(--ss-green-secondary); }
.mega__link:hover svg { color: var(--ss-gold); }

.mega__aside { padding-left: clamp(1.25rem, 1rem + 1vw, 2rem); border-left: 1px solid var(--green-line); }

.mega__promo {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.65rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color 0.16s var(--ease);
}
.mega__promo:hover { background: var(--ss-white); }
.mega__promo-icon {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 172, 84, 0.7);
  border-radius: 50%;
  color: var(--gold-ink);
}
.mega__promo strong { display: block; font-size: 0.97rem; font-weight: 600; color: var(--ss-green); line-height: 1.3; }
.mega__promo em { display: block; font-style: normal; font-size: 0.87rem; color: var(--ink-faint); margin-top: 0.15rem; line-height: 1.4; }
.mega__cta { margin-top: 1.25rem; }

/* ---- Mobile drawer ---- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  background: rgba(4, 43, 25, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease), visibility 0.24s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; }
@media (min-width: 1000px) { .drawer, .burger { display: none; } }

.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  background: var(--ss-ivory);
  display: flex;
  flex-direction: column;
  transform: translateX(14px);
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.24s var(--ease);
}
.drawer[data-open="true"] .drawer__panel { transform: none; opacity: 1; }

.drawer__top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--green-line);
}
.drawer__title {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.drawer__close {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(4, 43, 25, 0.18);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ss-green);
  cursor: pointer;
}

.drawer__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 1.25rem 2rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list li { margin: 0; border-bottom: 1px solid var(--green-line); }
.drawer__link {
  display: block;
  padding: 0.95rem 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ss-green);
  text-decoration: none;
}
.drawer__link[aria-current="page"] { color: var(--gold-ink); }

.drawer__group-label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 1.9rem 0 0.5rem;
}
.drawer__sub { list-style: none; margin: 0; padding: 0; }
.drawer__sub li { margin: 0; }
.drawer__sub a {
  display: block;
  padding: 0.7rem 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(220, 228, 221, 0.7);
}
.drawer__sub a:hover { color: var(--ss-green); }

.drawer__actions { display: grid; gap: 0.7rem; margin-top: 2rem; }

body[data-drawer="open"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. OPENING FRAMES
   Master Part 4: three live responsive sections. Not posters, not a carousel,
   no autoplay. Primary copy stays in the central crop-safe area. On mobile the
   message comes first and the visual sits behind and below it.
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(3rem, 1.8rem + 4vw, 4.5rem);
  overflow: hidden;
}
.frame--first { min-height: calc(100svh - var(--header-h) - var(--strip-h)); }
.frame__inner { position: relative; z-index: 2; width: 100%; }

/* Frame art is a decorative CSS background, not an <img>: the artwork is
   supplied separately (see IMAGE-BRIEF.md), and a background that has not
   landed yet degrades silently to the approved green gradient instead of
   showing a broken-image box. Mobile art is portrait, desktop art landscape -
   the master forbids stretching the mobile composition. */
.frame__art {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
@media (min-width: 880px) {
  .frame__art { display: block; background-image: var(--art-desktop, none); }
}
/* Opaque where the copy sits, close to clear where the artwork does. */
.frame__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--ss-green) 4%, rgba(4, 43, 25, 0.9) 32%,
              rgba(4, 43, 25, 0.42) 62%, rgba(4, 43, 25, 0.16) 100%);
}

/* Certificate corners - drawn, not imaged. */
.corners { position: absolute; inset: clamp(12px, 2vw, 28px); z-index: 1; pointer-events: none; }
.corners span {
  position: absolute;
  width: clamp(20px, 2.6vw, 36px);
  height: clamp(20px, 2.6vw, 36px);
  border: 1px solid var(--gold-line);
}
.corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.frame__copy { max-width: 40rem; }
@media (min-width: 880px) { .frame__copy { max-width: 34rem; } }

.frame h1, .frame h2 {
  font-size: var(--t-display);
  line-height: 1.03;
  color: var(--ss-white);
  letter-spacing: -0.022em;
  margin-bottom: 0.5em;
}

.frame__next {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.6rem 0.9rem 0.6rem 0;
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-gold-highlight);
  text-decoration: none;
}
.frame__next svg { animation: nudge 2.8s var(--ease) infinite; }
.frame__next:hover { color: var(--ss-white); }
@keyframes nudge {
  0%, 74%, 100% { transform: translateY(0); }
  86% { transform: translateY(4px); }
}

/* Frame 2 audience list */
.audience { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem 1.5rem; max-width: 46rem; }
@media (min-width: 640px) { .audience { grid-template-columns: repeat(2, 1fr); } }
.audience li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
  line-height: 1.5;
  color: var(--ss-white);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(216, 172, 84, 0.16);
}
.audience li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  transform: rotate(45deg) translateY(-2px);
  background: var(--ss-gold);
}

/* Frame 3 objective plate */
.objective {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  padding: clamp(1.15rem, 0.8rem + 1.2vw, 1.75rem) clamp(1.35rem, 0.9rem + 1.6vw, 2.25rem);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(10, 80, 44, 0.5), rgba(3, 33, 15, 0.5));
  margin-top: 1.75rem;
}
.objective__figure {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.8rem + 4.4vw, 4.75rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--ss-gold-highlight);
}
.objective__label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-green-soft);
  line-height: 1.7;
  max-width: 16ch;
}

/* --------------------------------------------------------------------------
   9. PAGE HEADERS
   -------------------------------------------------------------------------- */

.pagehead { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); overflow: hidden; }
.pagehead__inner { position: relative; z-index: 2; max-width: 47rem; }
.pagehead h1 { margin-bottom: 0.5em; }
.pagehead .lead { max-width: 58ch; }
.pagehead .btn-row { margin-top: 2.25rem; }

.crumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 1.6rem;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; color: rgba(216, 172, 84, 0.5); }
.crumbs a { color: var(--on-green-faint); text-decoration: none; transition: color 0.16s var(--ease); }
.crumbs a:hover { color: var(--ss-gold-highlight); }
.crumbs [aria-current] { color: var(--ss-gold-highlight); }

/* The pillar badge. It names what the page belongs to rather than repeating
   the breadcrumb and the H1, which is what made the old page headers read
   as if the page name were printed twice. */
.pagehead__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.95rem 0.42rem 0.8rem;
  margin-bottom: 1.4rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: rgba(3, 33, 15, 0.42);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ss-gold-highlight);
}
.pagehead__tag svg { flex: none; }

/* --------------------------------------------------------------------------
   10. CARDS, PILLARS, STEPS, LISTS
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  background: var(--ss-white);
  border: 1px solid var(--green-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.26s var(--ease-out), box-shadow 0.26s var(--ease-out),
              border-color 0.2s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ss-gold), rgba(216, 172, 84, 0.1));
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 1.02rem; }
.card__foot { margin-top: auto; padding-top: 1.25rem; }

a.card { text-decoration: none; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(216, 172, 84, 0.55); }

.card--green {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028));
  border-color: var(--gold-faint);
  box-shadow: none;
}
.card--green h3 { color: var(--ss-white); }
.card--green p { color: var(--on-green-soft); }
a.card--green:hover { border-color: var(--gold-line); box-shadow: 0 18px 40px rgba(3, 33, 15, 0.3); }

/* The engraved seal that holds every icon - the badge language of the brand. */
.seal {
  position: relative;
  width: 52px; height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  color: var(--gold-ink);
  background: radial-gradient(circle at 32% 26%, #FBF6EA 0%, #F2EADB 62%, #E7DCC5 100%);
  box-shadow: 0 0 0 1px rgba(216, 172, 84, 0.85), 0 0 0 4px rgba(216, 172, 84, 0.13),
              0 2px 6px rgba(4, 43, 25, 0.1);
}
.seal::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(132, 96, 30, 0.26);
}
.band--green .seal, .card--green .seal, .pillar .seal {
  color: var(--ss-gold-highlight);
  background: radial-gradient(circle at 32% 26%, rgba(14, 98, 55, 0.85) 0%, rgba(4, 43, 25, 0.95) 70%);
  box-shadow: 0 0 0 1px var(--gold-line), 0 0 0 4px rgba(216, 172, 84, 0.1);
}
.band--green .seal::after, .card--green .seal::after, .pillar .seal::after { border-color: rgba(216, 172, 84, 0.32); }
.seal--sm { width: 42px; height: 42px; margin-bottom: 0.9rem; }
.seal--lg { width: 62px; height: 62px; }

/* Pillar block */
.pillar {
  padding: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem);
  border: 1px solid var(--gold-faint);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(14, 98, 55, 0.36), rgba(4, 43, 25, 0.1));
  transition: border-color 0.2s var(--ease), transform 0.26s var(--ease-out);
}
.pillar:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.pillar__name {
  font-family: var(--font-display);
  font-size: clamp(1.38rem, 1.2rem + 0.75vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ss-gold-highlight);
  margin-bottom: 0.65rem;
}

/* Numbered stage cards */
.steps { display: grid; gap: clamp(1rem, 0.5rem + 1.2vw, 1.4rem); list-style: none; margin: 0; padding: 0; }
@media (min-width: 660px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  position: relative;
  margin: 0;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--gold-faint);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026));
}
.step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: 0.9rem;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--ss-gold-highlight);
}
.step h3 { font-size: 1.15rem; color: var(--ss-white); margin-bottom: 0.45rem; }
.step p { font-size: 1rem; color: var(--on-green-soft); margin: 0; }

.steps--light .step { background: var(--ss-white); border-color: var(--green-line); box-shadow: var(--shadow-sm); }
.steps--light .step__no { color: var(--gold-ink); border-color: rgba(216, 172, 84, 0.7); }
.steps--light .step h3 { color: var(--ink); }
.steps--light .step p { color: var(--ink-soft); }

/* The process chain, rendered as a designed element rather than a heading. */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.chain li {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 0.74rem + 0.2vw, 0.84rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ss-gold-highlight);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--gold-faint);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.chain__arrow { color: rgba(216, 172, 84, 0.55); flex: none; }
.band--ivory .chain li, .band--wash .chain li, .band--white .chain li {
  color: var(--gold-ink);
  border-color: rgba(216, 172, 84, 0.45);
  background: var(--ss-white);
}
.band--ivory .chain__arrow, .band--wash .chain__arrow { color: rgba(132, 96, 30, 0.5); }

/* Tick lists */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .ticks--2 { grid-template-columns: repeat(2, 1fr); } }
.ticks li { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; font-size: 1.02rem; line-height: 1.55; }
.ticks li::before {
  content: "";
  flex: none;
  width: 19px; height: 19px;
  margin-top: 0.2em;
  border: 1px solid rgba(216, 172, 84, 0.8);
  border-radius: 50%;
  background: no-repeat center / 9px 7px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'><path d='M1 4.2 3.6 6.8 9 1.4' fill='none' stroke='%2384601E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.band--green .ticks li::before {
  border-color: var(--gold-line);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'><path d='M1 4.2 3.6 6.8 9 1.4' fill='none' stroke='%23EFC873' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* A definition-style list for named benefits. */
.deflist { display: grid; gap: 1.2rem; margin: 0; }
.deflist > div { padding-left: 1.15rem; border-left: 2px solid rgba(216, 172, 84, 0.5); }
.deflist dt { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; }
.deflist dd { margin: 0; font-size: 1rem; color: var(--ink-soft); line-height: 1.6; }
.band--green .deflist dt { color: var(--ss-white); }
.band--green .deflist dd { color: var(--on-green-soft); }

/* --------------------------------------------------------------------------
   11. DISCLOSURE (FAQ)
   -------------------------------------------------------------------------- */

.faq {
  border: 1px solid var(--green-line);
  border-radius: var(--r-md);
  background: var(--ss-white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq__item + .faq__item { border-top: 1px solid var(--green-line); }
/* Each question is a top-level topic on that page, so it is an h2; the button
   inside carries the visual size. */
.faq__h { font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s var(--ease);
}
.faq__q:hover { background: var(--green-wash); }
.faq__sign {
  flex: none;
  width: 26px; height: 26px;
  position: relative;
  margin-top: 0.18rem;
  border: 1px solid rgba(216, 172, 84, 0.8);
  border-radius: 50%;
  transition: background-color 0.2s var(--ease);
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 6px auto 6px;
  height: 1.6px;
  background: var(--gold-ink);
  transform: translateY(-50%);
  transition: transform 0.24s var(--ease), opacity 0.2s var(--ease);
}
.faq__sign::after { transform: translateY(-50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign { background: rgba(216, 172, 84, 0.16); }
.faq__q[aria-expanded="true"] .faq__sign::after { opacity: 0; transform: translateY(-50%) rotate(0); }

.faq__a { display: none; padding: 0 clamp(1.1rem, 0.8rem + 1vw, 1.75rem) 1.4rem; max-width: 74ch; color: var(--ink-soft); }
.faq__a[data-open="true"] { display: block; }

html:not(.js) .faq__a { display: block; }
html:not(.js) .faq__sign { display: none; }

/* --------------------------------------------------------------------------
   12. FORMS
   Colour Kit §2: ivory fields, deep green labels, gold focus, green submit.
   -------------------------------------------------------------------------- */

.field { margin-bottom: 1.4rem; }
.field--split { display: grid; gap: 1.4rem; }
@media (min-width: 660px) { .field--split { grid-template-columns: repeat(2, 1fr); } }

.label { display: block; font-size: 0.94rem; font-weight: 600; color: var(--ss-green); margin-bottom: 0.45rem; }
.label .req { color: var(--gold-ink); }
.hint { display: block; font-size: 0.88rem; color: var(--ink-faint); margin-top: 0.4rem; line-height: 1.5; }

.input, .select, .textarea, .file {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--ss-ivory);
  border: 1px solid var(--green-line);
  border-radius: var(--r-sm);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), background-color 0.16s var(--ease);
}
.textarea { min-height: 170px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23042B19' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

.file { padding: 0.65rem 1rem; line-height: 1.6; cursor: pointer; }
.file::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ss-white);
  background: var(--ss-green);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color 0.16s var(--ease);
}
.file::file-selector-button:hover { background: var(--ss-green-secondary); }

.input:hover, .select:hover, .textarea:hover, .file:hover { border-color: rgba(216, 172, 84, 0.55); }
.input:focus, .select:focus, .textarea:focus, .file:focus {
  outline: none;
  background: var(--ss-white);
  border-color: var(--ss-gold);
  box-shadow: 0 0 0 4px var(--gold-glow);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--gold-ink); border-width: 2px; }

.error { display: none; margin-top: 0.45rem; font-size: 0.9rem; font-weight: 600; color: #6F4F14; }
.error[data-show="true"] { display: block; }

.check { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.check input { flex: none; width: 24px; height: 24px; margin-top: 0.15rem; accent-color: var(--ss-green-secondary); }

fieldset { border: 0; margin: 0 0 2rem; padding: 0; }
legend {
  padding: 0 0 0.9rem;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--green-line);
  margin-bottom: 1.4rem;
}

.panel {
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
  background: var(--ss-white);
  border: 1px solid var(--green-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.form__note { margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--green-line); }

/* --------------------------------------------------------------------------
   13. CALLOUTS AND COMPLIANCE
   -------------------------------------------------------------------------- */

.callout {
  position: relative;
  padding: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
  padding-left: clamp(1.6rem, 1.2rem + 1.1vw, 2.15rem);
  border: 1px solid rgba(216, 172, 84, 0.55);
  border-radius: var(--r-md);
  background: var(--green-wash);
}
.callout::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ss-gold);
}
.callout__title {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.65rem;
}
.band--green .callout {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028));
  border-color: var(--gold-faint);
}
.band--green .callout__title { color: var(--ss-gold-highlight); }

/* The approved compliance principle. Verbatim, unedited. */
.compliance {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-faint);
  padding-top: 1.35rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--green-line);
}
.compliance svg { flex: none; margin-top: 0.15rem; color: var(--ss-gold); }
.band--green .compliance { color: var(--on-green-faint); border-top-color: var(--gold-faint); }
.compliance--center { max-width: 64ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  background: linear-gradient(175deg, #073C22 0%, var(--ss-green) 42%, #032414 100%);
  color: var(--on-green-soft);
  padding-block: clamp(3.5rem, 2.4rem + 3.6vw, 5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.45;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'>\
<g fill='none' stroke='%23D8AC54' stroke-width='0.55' opacity='0.11'>\
<circle cx='48' cy='48' r='46'/><circle cx='48' cy='48' r='33'/><circle cx='48' cy='48' r='20'/>\
</g></svg>");
  background-size: 96px 96px;
}

.footer__top {
  display: grid;
  gap: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 1.6rem + 2vw, 3rem);
  border-bottom: 1px solid var(--gold-faint);
}
@media (min-width: 940px) { .footer__top { grid-template-columns: 1.4fr 1fr 1.15fr; } }

.footer__brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.footer__brand img { width: 54px; height: 54px; flex: none; }
.footer__brandname { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; line-height: 1.15; color: var(--ss-white); }
.footer__pillars { display: block; font-family: var(--font-mono); font-size: 0.84rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ss-gold); margin-top: 0.32rem; }

.footer__h { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ss-gold); margin: 0 0 1rem; }
.footer__list, .footer__services, .footer__contact { list-style: none; margin: 0; padding: 0; }
.footer__list li, .footer__services li { margin-bottom: 0.55rem; }
.footer__list a, .footer__services a { color: var(--on-green-soft); text-decoration: none; font-size: 1rem; transition: color 0.16s var(--ease); }
.footer__list a:hover, .footer__services a:hover { color: var(--ss-gold-highlight); }
.footer__services { columns: 2; column-gap: 1.5rem; }
.footer__services li { break-inside: avoid; }
.footer__services a { font-size: 0.96rem; }

.footer__contact li { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.8rem; font-size: 1rem; }
.footer__contact svg { flex: none; color: var(--ss-gold); margin-top: 0.22rem; }
.footer__contact a { color: var(--on-green-soft); text-decoration: none; }
.footer__contact a:hover { color: var(--ss-gold-highlight); }

.footer__bottom { padding-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .footer__bottom { grid-template-columns: 1fr auto; align-items: end; } }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.35rem; list-style: none; margin: 0; padding: 0; }
.footer__legal a { color: var(--on-green-faint); text-decoration: none; font-size: 0.92rem; }
.footer__legal a:hover { color: var(--ss-gold-highlight); }

/* The footer is dark but is not a .band--green, so it needs the on-green
   treatment for fine print explicitly. */
.footer .fine { color: var(--on-green-faint); }
.footer .compliance { color: var(--on-green-faint); border-top-color: var(--gold-faint); }

/* --------------------------------------------------------------------------
   15. WHATSAPP CONTROL
   Master Part 3: fixed bottom-right, device-safe spacing, original green,
   white official icon, no visible number. Visible but never competing.
   -------------------------------------------------------------------------- */

.wa {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ss-whatsapp);
  color: var(--ss-white);
  box-shadow: 0 6px 22px rgba(3, 33, 15, 0.3);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease), opacity 0.2s var(--ease);
}
.wa:hover { transform: scale(1.07); color: var(--ss-white); box-shadow: 0 10px 28px rgba(3, 33, 15, 0.38); }
.wa svg { width: 31px; height: 31px; }
@media (min-width: 900px) {
  .wa { right: max(1.5rem, env(safe-area-inset-right, 0px)); bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}
body[data-drawer="open"] .wa { opacity: 0; pointer-events: none; }
/* On the homepage the floating control waits until the hero CTAs have left
   the screen, so it does not sit on top of WhatsApp Us. Scoped to .js so a
   reader with JavaScript off still has the control. */
html.js.wa-gated .wa {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: scale(0.86);
}
html.js.wa-gated .wa.is-on {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: none;
}
html.js.wa-gated .wa.is-on:hover { transform: scale(1.07); }

/* Keep the last band clear of the floating control on small screens. */
@media (max-width: 899px) {
  .footer { padding-bottom: calc(clamp(2.5rem, 2rem + 2vw, 3.5rem) + 72px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   16. MOTION
   Scoped to .js so content is never hidden behind a script.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js [data-reveal][data-shown="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   17. UTILITIES AND PRINT
   -------------------------------------------------------------------------- */

.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.measure { max-width: 66ch; }
.measure--tight { max-width: 56ch; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.mx-auto { margin-inline: auto; }

@media print {
  .strip, .header, .mega, .drawer, .wa, .frame__art, .btn-row, .frame__next, .corners { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 1.5rem; }
  .band--green { background: #fff !important; color: #000 !important; }
  .band--green::before, .band--green::after { display: none !important; }
  .band--green :is(h1, h2, h3, p, li) { color: #000 !important; }
  .faq__a { display: block !important; }
  .card, .panel, .faq { box-shadow: none !important; border-color: #999 !important; }
}

/* --------------------------------------------------------------------------
   18. BRAND FURNITURE
   Composed CSS objects that give the dark bands a subject before the
   commissioned artwork lands (see IMAGE-BRIEF.md). They are decorative: every
   word inside them already appears as live text elsewhere on the page.
   -------------------------------------------------------------------------- */

/* The pillar plate. Three stacked record cards, one per service pillar. */
.plate {
  position: relative;
  display: none;
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 5 / 4;
  margin-inline: auto;
  perspective: 1200px;
}
@media (min-width: 880px) { .plate { display: block; } }

.plate__card {
  position: absolute;
  left: 8%;
  width: 74%;
  border-radius: var(--r-md);
  border: 1px solid var(--gold-line);
  box-shadow: 0 22px 50px rgba(3, 33, 15, 0.42);
  transform-origin: center;
}
.plate__card--back {
  top: 2%;
  height: 62%;
  background: linear-gradient(155deg, rgba(14, 98, 55, 0.62), rgba(4, 43, 25, 0.9));
  transform: rotate(-7deg) translateX(12%);
}
.plate__card--mid {
  top: 16%;
  height: 62%;
  background: linear-gradient(155deg, rgba(10, 80, 44, 0.85), rgba(4, 43, 25, 0.95));
  transform: rotate(-2.5deg) translateX(4%);
}
.plate__card--front {
  top: 30%;
  height: 62%;
  padding: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  background: linear-gradient(158deg, #FBF9F4 0%, #F1EDE2 100%);
  border-color: rgba(216, 172, 84, 0.9);
  transform: rotate(2deg);
  overflow: hidden;
}
.plate__card--front::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(132, 96, 30, 0.28);
  border-radius: 7px;
  pointer-events: none;
}
.plate__card--front::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'>\
<g fill='none' stroke='%2384601E' stroke-width='0.5' opacity='0.16'>\
<circle cx='36' cy='36' r='34'/><circle cx='36' cy='36' r='23'/><circle cx='36' cy='36' r='12'/>\
</g></svg>");
  background-size: 72px 72px;
}

.plate__label {
  position: absolute;
  right: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  top: clamp(0.85rem, 0.6rem + 1vw, 1.2rem);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ss-gold-highlight);
  z-index: 2;
}
.plate__card--front .plate__label {
  right: auto;
  top: auto;
  left: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  bottom: clamp(0.9rem, 0.6rem + 1vw, 1.3rem);
  color: var(--gold-ink);
}

.plate__seal {
  position: absolute;
  right: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
  top: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
  width: clamp(52px, 4.4vw, 68px);
  z-index: 2;
}
.plate__seal img { width: 100%; height: auto; }

.plate__rules {
  position: absolute;
  left: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  top: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  display: grid;
  gap: 0.55rem;
  width: 46%;
  z-index: 2;
}
.plate__rules i { display: block; height: 5px; border-radius: 3px; background: rgba(132, 96, 30, 0.22); }
.plate__rules i:nth-child(2) { width: 84%; }
.plate__rules i:nth-child(3) { width: 62%; }

/* Frame 1 becomes a two-column composition once there is room for it. */
.frame__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
@media (min-width: 880px) { .frame__grid { grid-template-columns: 1.1fr 0.9fr; } }

/* A large, very quiet brand seal anchoring the right of a page header. */
.pagehead__seal {
  position: absolute;
  right: clamp(-90px, -4vw, -30px);
  top: 50%;
  transform: translateY(-50%);
  width: min(400px, 34vw);
  opacity: 0.075;
  z-index: 1;
  pointer-events: none;
  filter: saturate(0.4);
}
@media (max-width: 879px) { .pagehead__seal { display: none; } }

/* Stacked prose blocks that each open with an eyebrow. The eyebrow carries no
   leading rule any more, so separation comes from a hairline and real space. */
.svc-block + .svc-block {
  margin-top: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  padding-top: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  border-top: 1px solid var(--green-line);
}

/* Screenshot mode. Applied only when the page is loaded with ?qa=1. */
html.qa { scroll-behavior: auto; }
html.qa .header { position: relative; }
/* Viewport-height frames would each become as tall as the capture window in a
   full-page screenshot, so they are pinned to a realistic height instead. */
html.qa .frame { min-height: 620px; }
html.qa .wa { display: none; }

/* --------------------------------------------------------------------------
   19. SMALL-SCREEN ADJUSTMENTS
   These sit last on purpose: each one overrides a base rule declared earlier,
   and at equal specificity the later rule wins. Every value here was set by
   measuring the header across 320-1440px, not by eye.
   -------------------------------------------------------------------------- */

/* The supporting line of the brand lockup is 33 characters of monospace. On a
   360px row, beside a 46px menu control, ~10.5px is the arithmetic ceiling.
   It steps up as soon as the header actually has room for it. */
@media (min-width: 640px) {
  .brand__pillars { font-size: 0.78rem; letter-spacing: 0.1em; }
}
@media (min-width: 1000px) {
  .brand__pillars { font-size: 0.82rem; letter-spacing: 0.12em; }
}


/* --------------------------------------------------------------------------
   20. HERO FURNITURE FROM THE CLIENT'S UI/UX MOCKUP
   The badge, the three assurance marks and the closing assurance line are the
   client's own design. Their wording stays inside the approved compliance
   language, and every claim they make is repeated in full elsewhere on the
   site.
   -------------------------------------------------------------------------- */

.frame__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  margin-bottom: 1.4rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: rgba(3, 33, 15, 0.5);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ss-gold-highlight);
  line-height: 1.4;
}
.frame__badge i { font-style: normal; opacity: 0.55; }
.frame__badge svg { flex: none; }

/* The artwork's own panel on phones. The master asks for the message first and
   the supporting visual below it; the portrait art is composed with its subject
   in the lower 45%, so the panel crops to that. */
.frame__panel {
  position: relative;
  margin: clamp(1.75rem, 1rem + 3vw, 2.5rem) 0 0;
  aspect-ratio: var(--art-ratio, 16 / 11);
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-line);
  background-image: var(--art, none);
  background-size: cover;
  background-position: center var(--art-pos, 74%);
  box-shadow: 0 18px 44px rgba(3, 33, 15, 0.42);
  overflow: hidden;
}
.frame__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 43, 25, 0.5) 0%, rgba(4, 43, 25, 0) 34%,
              rgba(4, 43, 25, 0) 78%, rgba(4, 43, 25, 0.34) 100%);
}
.frame__panel--wide { --art-ratio: 16 / 10; --art-pos: 60%; }
@media (min-width: 880px) { .frame__panel { display: none; } }

/* Law-Compliant / Confidential / Timely Support */
.assurances {
  list-style: none;
  margin: clamp(1.75rem, 1.1rem + 2.4vw, 2.5rem) 0 0;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2rem) 0 0;
  border-top: 1px solid var(--gold-faint);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 0.1rem + 1.4vw, 1.5rem);
  max-width: 44rem;
}
.assurances li {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}
.assurances li + li { border-left: 1px solid var(--gold-faint); }
.assurances svg { color: var(--ss-gold); width: 34px; height: 34px; }
.assurances span { display: none; }
.assurances b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.76rem, 0.7rem + 0.22vw, 0.84rem);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  color: var(--ss-gold-highlight);
  line-height: 1.35;
}
.assurances span {
  font-size: clamp(0.86rem, 0.8rem + 0.24vw, 0.95rem);
  line-height: 1.45;
  color: var(--on-green-soft);
  text-wrap: balance;
}

.frame__assure {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: clamp(1.5rem, 1rem + 1.6vw, 2rem) 0 0;
  padding-top: clamp(1.25rem, 0.9rem + 1.2vw, 1.5rem);
  border-top: 1px solid var(--gold-faint);
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 0.76rem + 0.2vw, 0.88rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--ss-gold-highlight);
  max-width: 44rem;
}
.frame__assure svg { flex: none; }

/* The strip carries the mockup's three availability marks; the two secondary
   ones appear once the row can hold them without crowding. */
.strip__inner { display: inline-flex; align-items: center; gap: clamp(1rem, 3vw, 3.5rem); }
.strip__inner > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.strip__inner > .strip__extra { display: none; }
@media (min-width: 780px) { .strip__inner > .strip__extra { display: inline-flex; } }

/* --------------------------------------------------------------------------
   21. THE BRAND LOCKUP ON SMALL SCREENS
   Sized against measured room, not a single clamp: the burger is 46px, the
   gutter changes at 400px, and the Request control returns at 480px. Each
   step below was checked for collision at the width it starts at.
   -------------------------------------------------------------------------- */
.brand__name { font-size: 0.98rem; }
.brand__pillars { font-size: 0.62rem; letter-spacing: 0.02em; font-weight: 600; }

@media (min-width: 384px) {
  .brand__name { font-size: 1.08rem; }
  .brand__pillars { font-size: 0.7rem; }
}
@media (min-width: 440px) {
  .brand__name { font-size: 1.14rem; }
  .brand__pillars { font-size: 0.74rem; letter-spacing: 0.04em; }
}
@media (min-width: 640px) {
  .brand__name { font-size: 1.18rem; }
  .brand__pillars { font-size: 0.78rem; letter-spacing: 0.1em; }
}
@media (min-width: 1000px) {
  .brand__name { font-size: 1.24rem; }
  .brand__pillars { font-size: 0.82rem; letter-spacing: 0.12em; }
}

/* --------------------------------------------------------------------------
   22. PAGE-HEADER ARTWORK
   The opening frames hide their background on phones and show the artwork in
   a panel instead. Page headers are short, so they keep the background at
   every width, with a scrim that runs the way the copy does.
   -------------------------------------------------------------------------- */
.pagehead .frame__art {
  display: block;
  background-image: var(--art-mobile, none);
  background-position: center right;
}
@media (min-width: 880px) {
  .pagehead .frame__art { background-image: var(--art-desktop, var(--art-mobile, none)); }
}
@media (max-width: 879px) {
  .pagehead .frame__art { background-position: 72% center; }
  .pagehead .frame__art::after {
    background: linear-gradient(175deg, rgba(4, 43, 25, 0.95) 0%, rgba(4, 43, 25, 0.86) 46%,
                rgba(4, 43, 25, 0.55) 78%, rgba(4, 43, 25, 0.35) 100%);
  }
}

/* --------------------------------------------------------------------------
   23. LABEL LEGIBILITY
   The monospaced label voice sits at the small end of the scale by design, but
   at 13px on a handset it was being reported as hard to read. These are the
   labels people actually read rather than skim past.
   -------------------------------------------------------------------------- */
.eyebrow { font-size: 0.88rem; letter-spacing: 0.15em; }
.pagehead__tag { font-size: 0.86rem; letter-spacing: 0.11em; }
.frame__badge { font-size: 0.86rem; letter-spacing: 0.11em; }
.crumbs { font-size: 0.84rem; letter-spacing: 0.08em; }
.callout__title { font-size: 0.86rem; }
.footer__h { font-size: 0.86rem; }
.strip__inner { font-size: 0.84rem; letter-spacing: 0.13em; }
legend { font-size: 0.86rem; }
.mega__label { font-size: 0.84rem; }
.drawer__group-label, .drawer__title { font-size: 0.84rem; }
.objective__label { font-size: 0.84rem; }

/* --------------------------------------------------------------------------
   24. WIDTH OVERRIDES, LAST
   Everything here adjusts a rule declared earlier in the file. Media queries
   add no specificity, so position in the file is the only thing that decides
   which wins. Keep this section at the bottom.
   -------------------------------------------------------------------------- */

@media (max-width: 399px) { :root { --space-gutter: 1.05rem; } }

/* "Timely Support" is the longest of the three marks and was sitting hard
   against the column edge; pulling the tracking in re-centres it. */
@media (max-width: 480px) { .assurances b { letter-spacing: 0.02em; } }

/* On a page header the buttons sit low, where the artwork is most visible.
   The scrim keeps its lower half dense enough for them to stay crisp. */
@media (max-width: 879px) {
  .pagehead .frame__art::after {
    background: linear-gradient(175deg, rgba(4, 43, 25, 0.96) 0%, rgba(4, 43, 25, 0.9) 44%,
                rgba(4, 43, 25, 0.72) 74%, rgba(4, 43, 25, 0.6) 100%);
  }
}

/* The client's spec starts at 360px. Below that the brand lockup, at a size
   worth reading, no longer shares a row with the menu control, so the lockup
   steps down rather than the header clipping. */
@media (max-width: 359px) {
  :root { --space-gutter: 0.85rem; --header-h: 78px; }
  .brand { gap: 0.4rem; }
  .brand__mark { width: 56px; height: 56px; }
  .brand__name { font-size: 0.88rem; }
  .brand__pillars { font-size: 0.56rem; letter-spacing: 0.01em; }
  .burger { width: 42px; height: 42px; }
}

/* --------------------------------------------------------------------------
   25. THE FIRST FOLD ON PHONES
   The client's UI/UX mockup is a 900x1600 frame, exactly 9:16, so at a 375pt
   phone width it is a single 667pt fold with the whole hero inside it: badge,
   headline, paragraph, the three assurance marks, both calls to action and the
   compliance line. Measured off the JPEG, it only fits because its body copy
   runs at about 12.5px and its primary button at about 41pt, under the 44pt
   tap target. We do not follow it that far down.

   What we do follow is its composition. The mockup carries one full-bleed
   image behind the copy; the earlier build stacked the artwork in its own
   panel, which cost 263pt on its own, more than every type change combined.
   Dropping the panel, taking the headline to ~33px and tightening the vertical
   rhythm puts the whole hero inside the fold on a 390x844 handset, with the
   compliance line breaking the fold on a 375x812 one, which is the right place
   to lose it.

   Scoped to `html:not(.hero-long)` so `?hero=long` leaves every rule above
   this section untouched and renders the previous hero for comparison. Nothing
   here depends on JavaScript: with none, the compact fold is what runs.

   Only the opening frame is affected. Frames 2 and 3 keep their panels.
   -------------------------------------------------------------------------- */

@media (max-width: 879px) {

  /* Full-bleed portrait, composed like the client's UI/UX mockup: archival
     still life and gold map on the right, copy on the left. Sized under cover
     and pinned top-right so the whole cluster reads on a phone instead of a
     tight crop of one object. */
  html:not(.hero-long) .frame--first .frame__art {
    display: block;
    background-image: var(--art-mobile, none);
    background-position: right -10px top -32px;
    background-size: 86% auto;
  }
  /* Left-weighted scrim so the headline stays readable, the right-hand scene
     can actually be seen, and the buttons sit on denser green. */
  html:not(.hero-long) .frame--first .frame__art::after {
    background:
      linear-gradient(180deg, rgba(4, 43, 25, 0.10) 0%, rgba(4, 43, 25, 0.04) 38%,
                      rgba(4, 43, 25, 0.62) 64%, rgba(4, 43, 25, 0.84) 100%),
      linear-gradient(105deg, rgba(4, 43, 25, 0.88) 0%, rgba(4, 43, 25, 0.70) 36%,
                      rgba(4, 43, 25, 0.18) 62%, rgba(4, 43, 25, 0.36) 100%);
  }
  html:not(.hero-long) .frame--first .frame__panel { display: none; }

  html:not(.hero-long) .frame--first { padding-block: 1.35rem 1.5rem; }

  html:not(.hero-long) .frame--first .frame__badge {
    padding: 0.34rem 0.85rem 0.34rem 0.7rem;
    margin-bottom: 0.85rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  /* 34px at 390, against 43px before. Measured against the tightest handset in
     the range rather than a round number: at 360x800 the compliance line still
     lands 60pt clear of the fold, and the headline grows again on the wider
     phones where the room actually exists. */
  html:not(.hero-long) .frame--first h1 {
    font-size: clamp(1.95rem, 1.08rem + 3.9vw, 2.75rem);
    line-height: 1.07;
    margin-bottom: 0.4em;
    padding-right: 14%;
  }

  /* The paragraph keeps its full size. It is the one block on the fold that
     gets read rather than scanned, and the mockup's ~12.5px is exactly the
     economy we are not making. Only the leading tightens. A right inset
     keeps it off the ivory certificate. */
  html:not(.hero-long) .frame--first .lead {
    line-height: 1.48;
    margin-bottom: 0;
    padding-right: 42%;
  }

  html:not(.hero-long) .frame--first .assurances {
    margin-top: 1.1rem;
    padding-top: 1.05rem;
    gap: 0.45rem;
  }
  html:not(.hero-long) .frame--first .assurances li { gap: 0.4rem; }
  html:not(.hero-long) .frame--first .assurances svg { width: 34px; height: 34px; }

  /* 54pt clears the 44pt minimum with room to spare and buys back 12pt. */
  html:not(.hero-long) .frame--first .btn-row { margin-top: 1.1rem; gap: 0.6rem; }
  html:not(.hero-long) .frame--first .btn--lg {
    min-height: 54px;
    padding: 0.8rem 1.4rem;
  }

  html:not(.hero-long) .frame--first .frame__assure {
    margin-top: 1rem;
    padding-top: 0.85rem;
    line-height: 1.45;
  }

  html:not(.hero-long) .frame--first .frame__next {
    margin-top: 0.35rem;
    min-height: 40px;
    padding-bottom: 0;
  }
}

/* 360x800 is the tightest fold we still treat as a first-class handset.
   The extra right inset on the lead (to clear the still life) costs a line,
   so the vertical rhythm steps down here to keep the compliance line on
   the fold. */
@media (max-width: 379px) {
  html:not(.hero-long) .frame--first { padding-block: 1.1rem 1.15rem; }
  html:not(.hero-long) .frame--first h1 {
    font-size: 1.78rem;
    padding-right: 10%;
  }
  html:not(.hero-long) .frame--first .lead { padding-right: 38%; }
  html:not(.hero-long) .frame--first .assurances {
    margin-top: 0.8rem;
    padding-top: 0.75rem;
  }
  html:not(.hero-long) .frame--first .btn-row { margin-top: 0.8rem; }
  html:not(.hero-long) .frame--first .btn--lg {
    min-height: 50px;
    padding: 0.7rem 1.2rem;
  }
  html:not(.hero-long) .frame--first .frame__assure {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
  }
}

/* --------------------------------------------------------------------------
   26. FRAMES 2 AND 3 ON PHONES
   Same composition as the compact first fold: the portrait art sits full
   bleed behind the copy, the stacked panel is dropped, and the next-section
   cue is hidden so "Who We Serve" / "Three Working Days" are not named twice.
   -------------------------------------------------------------------------- */
@media (max-width: 879px) {
  .frame__next { display: none; }

  /* These are content bands, not second heroes. Dropping the viewport
     min-height removes the empty green above and below the copy; cover
     on the portrait art removes the second, mismatched green patch. */
  .frame--serve,
  .frame--days {
    min-height: 0;
    justify-content: flex-start;
    padding-block: 1.75rem 1.6rem;
  }
  html.qa .frame--serve,
  html.qa .frame--days { min-height: 0; }

  .frame--serve .frame__art,
  .frame--days .frame__art {
    display: block;
    background-image: var(--art-mobile, none);
    background-size: cover;
  }
  .frame--serve .frame__panel,
  .frame--days .frame__panel { display: none; }

  .frame--serve h2,
  .frame--days h2 {
    font-size: clamp(2.05rem, 1.15rem + 4vw, 2.7rem);
    line-height: 1.08;
    margin-bottom: 0.45em;
  }

  .frame--serve .frame__art { background-position: 92% 58%; }
  .frame--serve .frame__art::after {
    background:
      linear-gradient(180deg, rgba(4, 43, 25, 0.18) 0%, rgba(4, 43, 25, 0.10) 58%,
                      rgba(4, 43, 25, 0.50) 100%),
      linear-gradient(100deg, rgba(4, 43, 25, 0.90) 0%, rgba(4, 43, 25, 0.78) 52%,
                      rgba(4, 43, 25, 0.30) 80%, rgba(4, 43, 25, 0.32) 100%);
  }
  .frame--serve .audience {
    max-width: 14.5rem;
    gap: 0.35rem;
  }
  .frame--serve .audience li {
    display: grid;
    grid-template-columns: 6px 1fr;
    align-items: baseline;
    font-size: 1.02rem;
    padding-bottom: 0.48rem;
  }

  .frame--days .frame__art { background-position: 70% 82%; }
  .frame--days .frame__art::after {
    background:
      linear-gradient(180deg, rgba(4, 43, 25, 0.72) 0%, rgba(4, 43, 25, 0.38) 42%,
                      rgba(4, 43, 25, 0.22) 100%),
      linear-gradient(105deg, rgba(4, 43, 25, 0.82) 0%, rgba(4, 43, 25, 0.48) 52%,
                      rgba(4, 43, 25, 0.18) 100%);
  }
  .frame--days .frame__copy { max-width: none; }
  .frame--days .lead { margin-bottom: 0; }
  .frame--days .objective { margin-top: 1.25rem; }
}