/* =============================================================================
   ADVANTAGE MARKETING AND PRINT — styles.css
   Design system: "Press & Proof" — crisp, confident, precisely set.
   Palette: brand navy + brand green, sampled from the logo artwork.
   Type: Barlow Condensed (display) + Barlow (body).
   No framework, no build step.
   ============================================================================= */

/* ----------------------------- 1. Tokens ----------------------------------- */
:root {
  /* Brand — sampled from the logo bitmap */
  --navy:        #092F56;
  --navy-deep:   #061F3A;
  --navy-soft:   #14406E;
  --navy-mist:   #E7EDF5;
  --green:       #6DC727;
  --green-light: #A8E86A;  /* AA-safe accent on dark photo overlays */
  --green-dark:  #4E9A17;  /* AA-safe for text on white */
  --green-deep:  #3C7A0F;
  --green-mist:  #EFF9E4;

  /* Neutrals */
  --ink:         #17202B;
  --ink-soft:    #4A5766;
  /* #5F6D7D, not a lighter grey: this is used for breadcrumbs, form hints and
     <dt> labels, which must clear WCAG AA (4.5:1) on BOTH --paper (5.29:1) and
     --paper-2 (4.92:1). The previous #6E7C8C failed at 3.97:1 on --paper-2. */
  --ink-faint:   #5F6D7D;
  --paper:       #FFFFFF;
  --paper-2:     #F4F7FA;
  --paper-3:     #EAF0F6;
  --line:        #DDE5EE;
  --line-strong: #C3D0DE;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(9, 47, 86, .08), 0 1px 2px rgba(9, 47, 86, .04);
  --shadow-md: 0 8px 24px rgba(9, 47, 86, .10);
  --shadow-lg: 0 24px 56px rgba(9, 47, 86, .16);
  --shadow-navy: 0 10px 28px rgba(9, 47, 86, .28);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;

  /* Type */
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --container: 1180px;
  --narrow: 780px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --nav-h: 112px;
  --logo-h: clamp(54px, 6.6vw, 80px);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
}

/* ----------------------------- 2. Reset ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: clamp(1rem, .97rem + .16vw, 1.08rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--green); color: var(--navy-deep); }

/* ----------------------------- 3. Typography ------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--navy);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem); text-transform: uppercase; }
h2 { font-size: clamp(2rem, 1.55rem + 2.1vw, 3.1rem); text-transform: uppercase; }
h3 { font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem); }
h4 { font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; }

p { text-wrap: pretty; }
a { color: var(--green-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }

.lede {
  font-size: clamp(1.1rem, 1.02rem + .38vw, 1.32rem);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Small uppercase label with the brand rule */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 1.05rem;
}
.eyebrow::before {
  content: "";
  width: 38px;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
}
.on-navy .eyebrow { color: var(--green); }

/* ----------------------------- 4. Layout ----------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-width: var(--narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--paper2 { background: var(--paper-2); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { margin-top: .9rem; }

/* Navy band */
.on-navy {
  background: var(--navy);
  color: #DCE6F2;
  position: relative;
  overflow: hidden;
}
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4 { color: #fff; }
.on-navy .lede { color: #B9CADC; }
/* Scoped away from .btn so it doesn't out-specify the button colour rules
   (.on-navy a is 0,1,1 and would otherwise beat .btn--primary at 0,1,0,
   rendering green text on a green button). */
.on-navy a:not(.btn) { color: var(--green); }

/* Decorative diagonal echoing the logo check stroke */
.on-navy::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -30%;
  width: 46%;
  height: 170%;
  background: linear-gradient(180deg, rgba(109,199,39,.10), rgba(109,199,39,0));
  transform: skewX(-14deg);
  pointer-events: none;
}

/* ----------------------------- 5. Buttons ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .16s ease, background-color .16s ease,
              border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--green); color: var(--navy-deep); box-shadow: 0 6px 18px rgba(109,199,39,.34); }
.btn--primary:hover { background: #7BD634; color: var(--navy-deep); box-shadow: 0 10px 24px rgba(109,199,39,.42); }

.btn--navy { background: var(--navy); color: #fff; box-shadow: var(--shadow-navy); }
.btn--navy:hover { background: var(--navy-soft); color: #fff; }

.btn--ghost { border-color: var(--line-strong); color: var(--navy); background: transparent; }
.btn--ghost:hover { border-color: var(--navy); background: var(--navy); color: #fff; }

.on-navy .btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.on-navy .btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.9rem; }

/* ----------------------------- 6. Header / nav ----------------------------- */
.skip-link {
  position: absolute; left: .5rem; top: -100px; z-index: 200;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--r-sm); text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: .5rem; color: #fff; }

/* The header needs more room than the 1180px content column: a 80px-tall logo
   plus six nav links plus the CTA overflows it, and flex resolves that by
   crushing the button. Giving the bar its own wider container keeps the text
   column comfortable while the nav breathes. */
.site-header .container { max-width: 1340px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: var(--logo-h); width: auto; }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 58px; height: 52px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav { display: none; }
.site-nav.is-open {
  display: block;
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: .6rem var(--gutter) 1.4rem;
}
.site-nav ul { list-style: none; padding: 0; margin: 0; }
.site-nav a {
  display: block; padding: .8rem .25rem;
  font-family: var(--display); font-size: 1.42rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--green-deep); }
.nav-cta { margin-top: 1.1rem; }
.nav-cta .btn { width: 100%; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .site-nav ul { display: flex; align-items: center; gap: clamp(1.15rem, 2.2vw, 2.2rem); }
  .site-nav a {
    padding: .5rem 0; border-bottom: 3px solid transparent; font-size: 1.26rem;
    white-space: nowrap;
  }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--green); color: var(--navy); }
  .nav-cta { margin: 0 0 0 .8rem; flex-shrink: 0; }
  .nav-cta .btn { width: auto; padding: .85rem 1.7rem; font-size: 1.24rem; }
}

/* ----------------------------- 7. Hero ------------------------------------- */
.hero { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem); }
.hero h1 { margin-bottom: 1.2rem; }
.hero .lede { max-width: 38rem; }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: clamp(1.3rem, 3.2vw, 2.6rem);
  margin-top: 3rem; padding-top: 2.2rem;
  border-top: 1px solid rgba(255,255,255,.22);
}
.hero-stats div { min-width: 0; }
/* NOTE the spaces around the '+'. CSS math inside clamp() REQUIRES whitespace
   around + and -; "2rem+2.1vw" is a parse error that silently voids the whole
   declaration, so these numbers were inheriting the 1.08rem body size and
   rendering at ~17px instead of ~61px. */
.hero-stats dt {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.7rem + 1.3vw, 2.9rem);
  font-weight: 700; color: var(--green); line-height: 1;
}
.hero-stats dd { margin: .4rem 0 0; font-size: .98rem; letter-spacing: .03em; color: #BACDDF; white-space: nowrap; }

.hero-art {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.14);
}
.hero-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ----------------------------- 8. Cards ----------------------------------- */
.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 45rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-soft); }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }

/* Numbered cards (the "5 reasons" pattern) */
.card--num { position: relative; padding-top: 2.6rem; }
.card--num .num {
  position: absolute; top: 1.2rem; left: clamp(1.4rem, 2.6vw, 2rem);
  font-family: var(--display); font-weight: 700; font-size: 1.18rem;
  letter-spacing: .1em; color: var(--green-deep);
}

/* Icon tile */
.card .ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 1rem;
  background: var(--green-mist); border-radius: var(--r-sm);
  color: var(--green-deep);
}
.card .ico svg { width: 24px; height: 24px; }

/* Split feature tiles (PRINT / MARKET) */
.split { display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); }
@media (min-width: 48rem) { .split { grid-template-columns: repeat(2, 1fr); } }

.tile {
  position: relative; display: block;
  border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: #fff;
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.tile img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.04); }
/* The overlay is what makes the caption legible over an arbitrary photo, so it
   is tuned rather than decorative: measured against the actual tile images, the
   worst-case pixel behind the caption gives ~8.5:1 for white text and ~5.8:1 for
   the --green-light accent. A weaker ramp dropped the MARKET tile to 4.1:1. */
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
              rgba(6,31,58,0) 18%,
              rgba(6,31,58,.70) 55%,
              rgba(6,31,58,.96) 100%);
}
.tile-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: clamp(1.3rem, 3vw, 2rem); }
.tile-body h3 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); text-transform: uppercase; margin-bottom: .4rem; }
.tile-body p { color: #CFDCEA; font-size: .98rem; }
.tile-body .more {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .95rem;
  font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green-light);
  transition: gap .18s ease;
}
.tile:hover .tile-body .more { gap: .75rem; }

/* Category cards */
.cat {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--paper);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* Scoped to .cat-name, not a bare `.cat span`: a bare descendant selector is
   0,1,1 and would force display:block onto the .cat-blank flex container below. */
.cat .cat-name {
  display: block; padding: .85rem 1rem;
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--navy);
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green); }
.cat:hover .cat-name { color: var(--green-deep); }

/* Branded stand-in for categories that have no photography yet. */
.cat-blank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; aspect-ratio: 1 / 1; padding: 1.25rem;
  /* Solid colour first as a fallback, then the gradient over it. Text here is
     #A9BDD2 on this navy: 7.0:1 at the light end, 8.6:1 at the dark end. */
  background-color: var(--navy);
  background-image: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  text-align: center;
}
.cat-blank em {
  font-style: normal; font-size: .88rem; line-height: 1.45;
  color: #A9BDD2; max-width: 16ch;
}
.cat-check {
  width: 2.4rem; height: 1.3rem; flex-shrink: 0;
  border-left: 5px solid var(--green);
  border-bottom: 5px solid var(--green);
  transform: rotate(-45deg) translate(2px, -3px);
}
.cat--blank:hover .cat-blank { background: linear-gradient(160deg, var(--navy-soft) 0%, var(--navy) 100%); }

/* ----------------------------- 9. Check list ------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.15rem; height: .62rem;
  border-left: 3px solid var(--green);
  border-bottom: 3px solid var(--green);
  transform: rotate(-45deg);
}
.checklist--2 { grid-template-columns: 1fr; }
@media (min-width: 45rem) { .checklist--2 { grid-template-columns: repeat(2, 1fr); } }

/* ----------------------------- 10. Testimonials ---------------------------- */
.quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--r-md);
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  break-inside: avoid;
}
.quote blockquote { margin: 0; color: var(--ink-soft); }
.quote cite {
  display: block; margin-top: .9rem;
  font-family: var(--display); font-weight: 600; font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy);
  font-size: .98rem;
}
.quote-masonry { columns: 1; column-gap: clamp(1.1rem, 2.4vw, 1.8rem); }
.quote-masonry .quote { margin-bottom: clamp(1.1rem, 2.4vw, 1.8rem); }
@media (min-width: 48rem) { .quote-masonry { columns: 2; } }
@media (min-width: 70rem) { .quote-masonry { columns: 3; } }

/* ----------------------------- 11. Team ----------------------------------- */
.person {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: clamp(1.3rem, 2.6vw, 1.8rem);
  box-shadow: var(--shadow-sm);
}
.person h3 { margin-bottom: .15rem; }
.person .role {
  font-family: var(--display); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green-deep); font-size: .95rem;
  margin-bottom: 1rem;
}
.person dl { display: grid; gap: .6rem; margin: 0; }
.person dt { font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.person dd { margin: 0; color: var(--ink-soft); }

/* ----------------------------- 12. Accordion ------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; background: none; border: 0; text-align: left;
  font-family: var(--display); font-size: 1.22rem; font-weight: 600; color: var(--navy);
}
.accordion-btn .chev { flex-shrink: 0; width: 20px; height: 20px; color: var(--green-deep); transition: transform .2s ease; }
.accordion-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.accordion-panel { padding: 0 0 1.3rem; color: var(--ink-soft); max-width: 60ch; }

/* ----------------------------- 13. Forms ----------------------------------- */
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 45rem) { .form-grid { grid-template-columns: repeat(2, 1fr); } .form-grid .full { grid-column: 1 / -1; } }

.field label {
  display: block; margin-bottom: .4rem;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy);
}
.field .req { color: var(--green-deep); }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .9rem;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-dark);
  box-shadow: 0 0 0 3px rgba(109,199,39,.2);
}
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { margin-top: .35rem; font-size: .86rem; color: var(--ink-faint); }

/* Honeypot — offscreen but reachable to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 1.1rem; padding: .95rem 1.1rem; border-radius: var(--r-sm); display: none; }
.form-status.is-shown { display: block; }
.form-status.ok { background: var(--green-mist); border: 1px solid var(--green); color: var(--green-deep); }
.form-status.err { background: #FDECEC; border: 1px solid #E5A5A5; color: #992222; }

/* ----------------------------- 14. Contact panel --------------------------- */
.contact-split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60rem) { .contact-split { grid-template-columns: 1fr 1.15fr; } }

.info-list { padding: 0; margin: 0; display: grid; gap: 1.5rem; }
.info-list dt {
  font-family: var(--display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep);
  margin-bottom: .3rem;
}
.info-list dd { margin: 0; font-size: 1.08rem; }
.info-list a { color: var(--navy); text-decoration: none; }
.info-list a:hover { color: var(--green-deep); text-decoration: underline; }

.map-frame {
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-sm); margin-top: 2rem;
}
.map-frame iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ----------------------------- 15. CTA band -------------------------------- */
.cta-band { position: relative; z-index: 1; text-align: center; }
.cta-band .btn-row { justify-content: center; }

/* ----------------------------- 16. Footer ---------------------------------- */
.site-footer { background: var(--navy-deep); color: #9FB3C8; padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.footer-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer img.flogo { height: 54px; width: auto; margin-bottom: 1.1rem; }
.site-footer h4 { color: #fff; letter-spacing: .12em; margin-bottom: 1rem; font-size: .98rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.site-footer a { color: #9FB3C8; text-decoration: none; }
.site-footer a:hover { color: var(--green); }
.site-footer address { font-style: normal; line-height: 1.8; }

.footer-note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .9rem;
}
.sierra-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #C9D8E7; font-size: .92rem;
}
.sierra-badge::before {
  content: ""; width: .9rem; height: .5rem;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* ----------------------------- 17. Page head ------------------------------- */
.page-head { background: var(--paper-2); border-bottom: 1px solid var(--line); padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.page-head h1 { font-size: clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem); }
.page-head .lede { margin-top: .9rem; max-width: 44rem; }
.crumb { font-size: .9rem; color: var(--ink-faint); margin-bottom: .7rem; }
.crumb a { color: var(--ink-faint); text-decoration: none; }
.crumb a:hover { color: var(--green-deep); }

/* ----------------------------- 18. Prose ----------------------------------- */
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 2rem; }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--ink); }

/* ----------------------------- 19. Scroll reveal --------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ----------------------------- 20. Utilities ------------------------------- */
.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;
}
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.table-scroll { overflow-x: auto; }