/* ==========================================================================
   Front of House — light-led green
   Design tokens + component styles

   Derived from: whatmattersagency.com  (light ground, full-bleed photography,
                                         colour-block footer, photo CTA band)
                 aperturecomms.com      (Archivo display, italic serif accent
                                         word, mono uppercase labels, numbered
                                         service rows, ruled principle grid)

   ONE palette, built around forest #1D4433. There is no theme switch.

   Colour works through CONTEXTS, not per-component overrides. Every component
   reads the -c variables below; a dark ground (.on-dark and the classes listed
   in §3) swaps them in one place. Lime is a highlight on dark grounds, and the
   one full field is the footer (whatmattersagency.com's colour-block footer,
   approved in the plan). Lime never sits on paper as text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; padding: 0; }

a { color: inherit; }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Greens. Contrast measured against WCAG 2.x:
       pine on paper 15.1:1 · forest on paper 9.6:1 · moss on paper 5.6:1
       moss on paper-2 5.2:1 · muted on paper-2 6.4:1
       lime on pine 13.2:1 · lime on forest 8.4:1 · sage on forest 5.8:1
       pine on lime 13.2:1 · forest on lime 8.4:1 */
  --paper:    #EEF2EA;   /* main ground, pale sage */
  --paper-2:  #E2EADF;   /* alternate section ground */
  --card:     #F8FAF5;   /* cards and the form card */
  --field:    #FCFDFB;   /* input fill */
  --pine:     #0E1F17;   /* text, dark bands */
  --forest:   #1D4433;   /* the brand green: blocks, featured items */
  --moss:     #2E6A4E;   /* numbers, labels, accent words on paper */
  --sage:     #A9C3AE;   /* muted text and rules on dark grounds */
  --lime:     #C8F169;   /* highlight on dark grounds; the footer field */
  --lime-tint:#E4F5BD;   /* hover fill for lime buttons */
  --success:  #DCEBD3;   /* form status fill */
  --error:    #A3241B;   /* 6.6:1 on paper, 7.1:1 on card */

  --muted:    #45564B;   /* secondary text on paper grounds */
  --placeholder: #5A6B60; /* input placeholders: 5.3:1 on the field fill */
  --line:     #C3D0C4;   /* hairlines on paper (decorative, not text) */

  /* Brand mark — the Cloche Seal stays forest/white, as in the earlier design */
  --brand:     #1D4433;
  --brand-ink: #FFFFFF;

  /* Light context (default). Components read these. */
  --ink-c:    var(--pine);
  --muted-c:  var(--muted);
  --accent-c: var(--moss);
  --label-c:  var(--moss);
  --line-c:   var(--line);
  --rule-c:   var(--pine);
  --inv-c:    var(--lime);   /* text colour when an outline button fills */
  --focus:    var(--pine);

  /* Type — aperturecomms.com's stack. EB Garamond replaces Aperture's
     Newsreader for the italic accent: it is already the face of the seal. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-accent:  "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid type scale. Display tops out at 6rem (craft floor). */
  --fs-hero:    clamp(2.6rem, 1rem + 5vw, 5.75rem);
  --fs-h1:      clamp(2.5rem, 1.2rem + 4.4vw, 5.5rem);
  --fs-h2:      clamp(2rem, 1.15rem + 3vw, 4rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-row:     clamp(1.6rem, 1rem + 2.4vw, 3.25rem);
  --fs-state:   clamp(1.9rem, 1rem + 2.6vw, 3.5rem);
  --fs-band:    clamp(2rem, 1rem + 3.6vw, 4.25rem);
  --fs-lead:    clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-label:   0.75rem;
  --fs-btn:     0.8125rem;

  /* Spacing */
  --space-1:  0.5rem;
  --space-2:  0.75rem;
  --space-3:  1rem;
  --space-4:  1.5rem;
  --space-5:  2rem;
  --space-6:  3rem;
  --space-7:  4rem;
  --space-8:  6rem;
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --gutter:    clamp(1.25rem, 4vw, 4rem);

  /* Shape rule — one documented system:
       controls, inputs, tags, panels  → square, 2px corner, 2px border
       photographs and image frames    → 16px corner
     Nothing is pill-shaped. */
  --radius-ctl:   2px;
  --radius-media: 16px;
  --border:       2px;

  --maxw:      1440px;
  --maxw-text: 62ch;

  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:      220ms;

  /* z-index scale: header 100 · mobile nav panel 90 · skip link 200 */
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   3. Colour contexts
   Dark grounds: photography, the pine band, forest blocks, featured items.
   -------------------------------------------------------------------------- */

.on-dark,
.hero,
.marquee,
.section--forest,
.chapter--forest,
.chapter--pine,
.cta-band,
.plan--featured,
.panel--forest {
  --ink-c:    var(--paper);
  --muted-c:  var(--sage);
  --accent-c: var(--lime);
  --label-c:  var(--sage);
  --line-c:   rgba(169, 195, 174, 0.34);
  --rule-c:   var(--sage);
  --inv-c:    var(--pine);
  --focus:    var(--lime);
  color: var(--ink-c);
}

/* Lime ground (footer): pine ink, forest for secondary text */
.on-lime {
  --ink-c:    var(--pine);
  --muted-c:  var(--forest);
  --accent-c: var(--forest);
  --label-c:  var(--forest);
  --line-c:   rgba(14, 31, 23, 0.28);
  --rule-c:   var(--pine);
  --inv-c:    var(--lime);
  --focus:    var(--pine);
  color: var(--ink-c);
}

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */

body {
  background: var(--paper);
  color: var(--ink-c);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  caret-color: var(--forest);
  scrollbar-color: var(--moss) var(--paper-2);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.02em; }

p { text-wrap: pretty; }

a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* Accent word: Aperture's italic serif move ("Appetite into demand").
   Moss on paper, lime on dark grounds. Extra line-height reserve stops the
   EB Garamond descenders (y, g, p) clipping. */
.accent,
.statement em,
h1 em,
h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 1.08em;
  letter-spacing: -0.01em;
  color: var(--accent-c);
  padding-right: 0.04em;
}
.accent { white-space: nowrap; }

::selection {
  background: var(--lime);
  color: var(--pine);
}

/* Focus — visible on every interactive control, never removed.
   Pine on light grounds, lime on dark grounds, via --focus. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-ctl);
}

/* Visible to screen readers only. Gives each marquee — whose visual track
   is aria-hidden — a readable text equivalent. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--pine);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-3); }

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--paper2 { background: var(--paper-2); }
.section--forest { background: var(--forest); }

/* Label: Aperture's mono uppercase line, led in by a short rule */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-c);
}
.label::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}

.sec-head {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* Measure in the heading's own ch, not the container's */
.sec-head h2 { max-width: 15ch; color: var(--ink-c); }
.sec-head--wide h2 { max-width: 19ch; }

/* Heading row: heading left, link right, sharing a baseline */
.sec-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4) var(--space-6);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sec-row .sec-head { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted-c);
  max-width: var(--maxw-text);
}
.note {
  color: var(--muted-c);
  max-width: var(--maxw-text);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.split__aside { display: grid; gap: var(--space-4); }

/* Vertical rhythm for a column of label + heading/statement + copy */
.stack > * + * { margin-top: var(--space-5); }
.stack > .label + * { margin-top: var(--space-4); }
.stack > .lead + .info { margin-top: var(--space-6); }

@media (min-width: 961px) {
  /* Drop the aside onto the statement's first line, not the label */
  .split--offset .split__aside { padding-top: 2.6rem; }
}

/* Ruled columns — the capability block and the service blocks.
   Borders are the armature here, not decoration. */
.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--border) solid var(--rule-c);
}
.col {
  padding: var(--space-5) var(--space-5) 0 0;
}
.col + .col {
  padding-left: var(--space-5);
  border-left: 1px solid var(--line-c);
}
.col h3 { color: var(--ink-c); }
.col > p { margin-top: var(--space-4); color: var(--muted-c); }
.col > .taglist { margin-top: var(--space-4); }
.col > p + p { margin-top: var(--space-3); }

/* Ruled 2×2 cells — Aperture's principles grid. Used for the process steps
   and the about-page values. */
.cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--border) solid var(--rule-c);
  border-left: 1px solid var(--line-c);
}
.cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 15rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid var(--line-c);
  border-bottom: 1px solid var(--line-c);
  transition: background var(--dur) var(--ease);
}
.cell:hover { background: var(--card); }
.cell h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  margin-top: var(--space-2);
}
.cell p { color: var(--muted-c); font-size: var(--fs-small); max-width: 40ch; }
.cell__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-c);
}
/* About values: heading with its line icon beside it, no tile */
.cell__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.cell__head h3 { margin-top: 0; }
.cell__glyph {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--accent-c);
}

/* --------------------------------------------------------------------------
   6. Buttons and links
   Square, 2px corner, 2px border, mono uppercase label — Aperture's button.
   Min height 48px keeps the 44px touch target with room to spare.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.8rem 1.4rem;
  border: var(--border) solid var(--pine);
  border-radius: var(--radius-ctl);
  background: var(--pine);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:hover { background: var(--forest); border-color: var(--forest); }
.btn:active { transform: translateY(1px); }
.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover svg { transform: translateX(4px); }

/* Lime: the primary action on dark grounds and photography */
.btn--lime {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--pine);
}
.btn--lime:hover {
  background: var(--lime-tint);
  border-color: var(--lime-tint);
  color: var(--pine);
}

/* Outline: secondary action, inherits the context ink */
.btn--outline {
  background: transparent;
  border-color: var(--ink-c);
  color: var(--ink-c);
}
.btn--outline:hover {
  background: var(--ink-c);
  border-color: var(--ink-c);
  color: var(--inv-c);
}

.btn--block { width: 100%; }

/* Inline text link: mono label with an arrow that steps forward on hover */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--ink-c);
  font-family: var(--font-mono);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--border) solid currentColor;
  cursor: pointer;
}
.tlink svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}
.tlink:hover svg { transform: translateX(5px); }
.tlink:hover { color: var(--accent-c); }

/* --------------------------------------------------------------------------
   7. Header / nav
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--pine);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

/* Transparent over the homepage hero until scrolled */
.site-header[data-transparent="true"]:not([data-scrolled="true"]) {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--paper);
  --focus: var(--lime);
  --ink-c: var(--paper);
  --inv-c: var(--pine);
}
/* Over the photograph the seal flips to its light version, as in the earlier design */
.site-header[data-transparent="true"]:not([data-scrolled="true"]) .wordmark {
  --logo-disc: var(--paper);
  --logo-ink: var(--brand);
}
.site-header[data-transparent="true"]:not([data-scrolled="true"]) .btn--nav {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--pine);
}
.site-header[data-transparent="true"]:not([data-scrolled="true"]) .btn--nav:hover {
  background: var(--lime-tint);
  border-color: var(--lime-tint);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Logo: inline SVG so the seal's ring text uses the page's own fonts.
   Parts colour through --logo-disc / --logo-ink. The lockup text stays in
   EB Garamond uppercase, as in the earlier design: it is the brand's wordmark. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  font-family: var(--font-accent);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__mark { width: 40px; height: 40px; flex: none; }
.wordmark__text {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.logo-disc  { fill: var(--logo-disc, var(--brand)); }
.logo-ink   { fill: var(--logo-ink, var(--brand-ink)); }
.logo-line  { fill: none; stroke: var(--logo-ink, var(--brand-ink)); }
.logo-shine { fill: none; stroke: var(--logo-disc, var(--brand)); stroke-linecap: round; }
.logo-ring-serif { font-family: var(--font-accent); font-size: 17px; font-weight: 600; letter-spacing: 2.4px; }
.logo-ring-sans  { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; letter-spacing: 2.6px; }

.nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
  margin-inline: auto;
}
.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.btn--nav {
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  font-size: var(--fs-label);
}

.burger {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  color: inherit;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Hero
   whatmattersagency.com's full-bleed photograph; Aperture's composition:
   rule-led label, heavy headline with one serif accent, subline bottom-left
   and actions bottom-right.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  /* Stop short of the fold so the pine band peeks into the first viewport */
  --peek: clamp(3.5rem, 7vw, 6rem);
  min-height: min(calc(100vh - var(--peek)), 960px);
  min-height: min(calc(100svh - var(--peek)), 960px);
  display: flex;
  align-items: flex-end;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  overflow: hidden;
  background: var(--pine);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Pine scrim: guarantees text contrast over any photograph */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(14, 31, 23, 0.94) 0%,
      rgba(14, 31, 23, 0.72) 34%,
      rgba(14, 31, 23, 0.42) 66%,
      rgba(14, 31, 23, 0.55) 100%);
}
.hero__inner {
  width: 100%;
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
}
.hero .label { color: var(--paper); }
.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.02;
  max-width: 19ch;
  margin-top: var(--space-4);
  color: var(--paper);
}
/* The accent words enter on their own beat, so they need a box to move */
.hero h1 .accent { display: inline-block; }
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5) var(--space-6);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(238, 242, 234, 0.3);
}
.hero__sub {
  max-width: 50ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--paper);
}
.hero__actions,
.pagehead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Inner-page head: typographic, ruled off in pine */
.pagehead {
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
  border-bottom: var(--border) solid var(--pine);
}
.pagehead h1 {
  max-width: 15ch;
  margin-block: var(--space-4) var(--space-5);
}
.pagehead .lead { max-width: 56ch; }
.pagehead__actions { margin-top: var(--space-5); }
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   9. Marquee band
   Aperture's dark "trusted by" band, holding the sector names instead of
   client logos. Separator is the cloche from the seal, masked in lime.
   Pausable, stops on hover and focus, static under reduced motion.
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  background: var(--pine);
  padding-block: clamp(1.25rem, 2.6vw, 2rem);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 44s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee[data-paused="true"] .marquee__track {
  animation-play-state: paused;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-inline: clamp(0.625rem, 1.5vw, 1.25rem);
  font-family: var(--font-display);
  font-size: var(--fs-band);
  font-weight: 800;
  font-stretch: 85%;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper);
}
.marquee__item::after {
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.42em;
  background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 104'%3E%3Ccircle cx='80' cy='14' r='10'/%3E%3Cpath d='M18 86a62 62 0 0 1 124 0z'/%3E%3Crect x='4' y='90' width='152' height='10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 104'%3E%3Ccircle cx='80' cy='14' r='10'/%3E%3Cpath d='M18 86a62 62 0 0 1 124 0z'/%3E%3Crect x='4' y='90' width='152' height='10'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Where a pine chapter runs straight into the band, rule them apart */
.chapter--pine + .marquee { border-top: 1px solid rgba(169, 195, 174, 0.3); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__pause {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: var(--border) solid var(--sage);
  border-radius: var(--radius-ctl);
  background: var(--pine);
  color: var(--lime);
  cursor: pointer;
  box-shadow: -24px 0 24px 8px var(--pine);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.marquee__pause:hover { background: var(--lime); color: var(--pine); }
.marquee__pause svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   10. Statements
   -------------------------------------------------------------------------- */

.statement {
  font-family: var(--font-display);
  font-size: var(--fs-state);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
  max-width: 18ch;
  color: var(--ink-c);
  text-wrap: balance;
}

/* Long-form text (privacy policy): a readable measure, quieter headings */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
  margin-top: var(--space-7);
  font-size: var(--fs-h3);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.prose h2 + * { margin-top: var(--space-3); }
.prose ul { padding-left: 1.25em; list-style: disc; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--moss); }
.prose a { overflow-wrap: anywhere; }
.prose__updated {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-c);
}

/* --------------------------------------------------------------------------
   11. Numbered rows (accordion)
   Aperture's service list rebuilt as real <button aria-expanded> rows.
   Used for the homepage services and every FAQ.
   -------------------------------------------------------------------------- */

.acc { border-top: var(--border) solid var(--rule-c); }
.acc__item { border-bottom: 1px solid var(--line-c); }

.acc__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 4.5ch minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.25rem, 2.4vw, 2rem);
  text-align: left;
  color: var(--ink-c);
  cursor: pointer;
}

.acc__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--label-c);
}

.acc__title {
  font-family: var(--font-display);
  font-size: var(--fs-row);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
  transition: transform 360ms var(--ease-out), color var(--dur) var(--ease);
}
.acc__btn:hover .acc__title { transform: translateX(8px); }
.acc__btn[aria-expanded="true"] .acc__title { color: var(--accent-c); }

.acc--faq .acc__title {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Plus/minus inside a square control box */
.acc__icon {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: var(--border) solid currentColor;
  border-radius: var(--radius-ctl);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.acc__icon::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.acc__icon::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc__btn:hover .acc__icon { background: var(--ink-c); color: var(--inv-c); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--ease-out);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }

.acc__body {
  display: grid;
  grid-template-columns: 4.5ch minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: var(--space-5);
}
.acc__body > :first-child { grid-column: 2; }
.acc__body p {
  color: var(--muted-c);
  max-width: var(--maxw-text);
  margin-bottom: var(--space-4);
}
.acc--faq .acc__body p { margin-bottom: 0; }

/* Mobile-only photo inside an open service row (desktop uses .svc__media) */
.acc__media { display: none; }

/* Outlined tags: square, mono */
.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-ctl);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-c);
}
/* The SEO query list, set large as the content it is */
.taglist--big .tag {
  padding: 0.6rem 0.95rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-width: var(--border);
}

/* --------------------------------------------------------------------------
   12. Homepage services: rows + sticky photo
   Opening a row cross-fades its photograph into the sticky frame.
   -------------------------------------------------------------------------- */

.svc {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.svc__media {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--paper-2);
}
.svc__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 640ms var(--ease-out), transform 1100ms var(--ease-out);
}
.svc__media img[data-active="true"] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   13. Rooms (sector cards)
   whatmattersagency.com's selection grid: one large photo, two smaller,
   with the words set under the photograph, never on it.
   -------------------------------------------------------------------------- */

.rooms {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.room {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--ink-c);
  text-decoration: none;
}
.room:first-child { grid-row: span 2; }
.room__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--paper-2);
}
.room:first-child .room__media {
  flex: 1;
  aspect-ratio: auto;
  min-height: 420px;
}
.room__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.room:hover .room__media img { transform: scale(1.04); }
.room__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: start;
}
.room h3 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
}
.room p {
  grid-column: 1;
  max-width: 42ch;
  color: var(--muted-c);
}
.room__go {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: var(--border) solid var(--pine);
  border-radius: var(--radius-ctl);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.room__go svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur) var(--ease-out);
}
.room:hover .room__go { background: var(--pine); color: var(--lime); }
.room:hover .room__go svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   14. Check lists
   -------------------------------------------------------------------------- */

.checks {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--ink-c);
}
.checks svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.22em;
  color: var(--accent-c);
}

/* --------------------------------------------------------------------------
   15. Process (homepage) — heading holds left while the cells scroll
   -------------------------------------------------------------------------- */

.process {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.process .sec-head {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   16. Service chapters (services page)
   -------------------------------------------------------------------------- */

.chapter { padding-block: var(--section-y); }
.chapter--paper2 { background: var(--paper-2); }
.chapter--forest { background: var(--forest); }
.chapter--pine   { background: var(--pine); }

.chapter__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.chapter--flip .chapter__top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.chapter--flip .chapter__top > .frame { order: -1; }
.chapter h2 {
  margin-top: var(--space-4);
  max-width: 17ch;
  color: var(--ink-c);
}
.chapter .lead { margin-top: var(--space-5); }
.chapter .note { margin-top: var(--space-4); }
.chapter .cols { margin-top: clamp(3rem, 6vw, 5rem); }

.frame {
  position: relative;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--paper-2);
}
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   17. Engagement models
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 22rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: var(--border) solid var(--pine);
  border-radius: var(--radius-ctl);
  background: var(--card);
  color: var(--ink-c);
}
.plan h3 { margin-top: var(--space-1); }
.plan p { color: var(--muted-c); }
.plan--featured {
  background: var(--forest);
  border-color: var(--forest);
}
.plan .label::before { display: none; }

/* --------------------------------------------------------------------------
   18. Forms
   Visible labels, never placeholder-only. Errors adjacent to the field.
   -------------------------------------------------------------------------- */

.form-card {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--card);
  border: var(--border) solid var(--pine);
  border-radius: var(--radius-ctl);
}

.form-card__title {
  margin-bottom: var(--space-5);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

.form { display: grid; gap: var(--space-4); }
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.field { display: grid; gap: 0.45rem; align-content: start; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
}
.field .req { color: var(--moss); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.95rem;
  background: var(--field);
  border: var(--border) solid var(--moss);
  border-radius: var(--radius-ctl);
  font-size: var(--fs-body);
  color: var(--pine);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input::placeholder,
.field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--pine); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--pine);
  box-shadow: inset 0 0 0 1px var(--pine);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230E1F17' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}
.field__hint { font-size: 0.875rem; color: var(--muted); }

.field__error {
  display: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--error);
}
.field[data-invalid="true"] .field__error { display: block; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--error); }

.form__note { font-size: 0.875rem; color: var(--muted); }

.form__status {
  display: none;
  padding: var(--space-4);
  border: var(--border) solid var(--forest);
  border-radius: var(--radius-ctl);
  background: var(--success);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--pine);
}
.form__status[data-visible="true"] { display: block; }
.form__status[data-state="error"] {
  border-color: var(--error);
  background: var(--card);
}
/* Spam trap field: never shown, never focusable */
.form__hp { display: none; }

/* --------------------------------------------------------------------------
   19. Contact details, side panels, placeholder
   -------------------------------------------------------------------------- */

.info { display: grid; gap: var(--space-5); }
.info__item { display: grid; gap: 0.35rem; }
.info__item dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-c);
}
.info__item dd {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-c);
}
.info__item a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow-wrap: anywhere; /* the email address is wider than a 320px phone allows */
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: var(--accent-c);
  text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums;
}
.info__item a:hover { color: var(--accent-c); }

.panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: var(--border) solid var(--pine);
  border-radius: var(--radius-ctl);
  background: var(--card);
}
.panel--forest {
  background: var(--forest);
  border-color: var(--forest);
}
.panel__body { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   20. Footer
   whatmattersagency.com's photo CTA band, then a solid lime block with the
   wordmark set huge.
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 13vw, 11rem);
  text-align: center;
  background: var(--pine);
}
.cta-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.cta-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 31, 23, 0.74);
}
.cta-band .label { color: var(--paper); }
.cta-band h2 {
  max-width: 13ch;
  margin: var(--space-4) auto var(--space-6);
  font-size: clamp(2.75rem, 1rem + 5.4vw, 6rem);
  color: var(--paper);
}

.footer-main {
  background: var(--lime);
  padding-block: clamp(3.5rem, 7vw, 6rem) var(--space-5);
}

.footer-brand {
  --logo-disc: var(--brand);
  --logo-ink: var(--brand-ink);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: var(--border) solid var(--pine);
  color: var(--pine);
  text-decoration: none;
}
.footer-brand .wordmark__seal {
  width: clamp(72px, 9vw, 136px);
  height: auto;
  flex: none;
}
.footer-brand .wordmark__text {
  font-family: var(--font-accent);
  font-size: clamp(2.25rem, 0.9rem + 6vw, 7rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr 1.2fr;
  gap: var(--space-6);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.footer-blurb {
  max-width: 34ch;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--pine);
}
.footer-grid h3 {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest);
}
.footer-grid ul { display: grid; gap: 0; list-style: none; }
.footer-grid li a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  min-height: 44px;
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}
.footer-grid li a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.socials { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.socials a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: var(--border) solid var(--pine);
  border-radius: var(--radius-ctl);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.socials a:hover { background: var(--pine); color: var(--lime); }
.socials svg { width: 20px; height: 20px; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(14, 31, 23, 0.28);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  color: var(--pine);
}
.footer-base a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   21. Motion
   One authored entrance (the hero), the service photo cross-fade, and a
   quiet scroll reveal. Defaults are visible: every animation runs FROM a
   hidden state, so content never depends on it finishing.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: settle 2200ms var(--ease-out) both; }
  .hero [data-enter] {
    animation: enter 1000ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 120ms + 180ms);
  }
}
@keyframes settle {
  from { transform: scale(1.08); }
}
@keyframes enter {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
}

/* Scroll reveal: opt-in via JS removing .no-js, so a script failure never
   hides content. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 70ms; }
.reveal:nth-child(3) { transition-delay: 140ms; }
.reveal:nth-child(4) { transition-delay: 210ms; }

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  /* Room for the full name beside the desktop nav just above the 960px breakpoint */
  .wordmark__text { font-size: 1rem; letter-spacing: 0.12em; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plans .plan:last-child { grid-column: 1 / -1; min-height: 0; }
}

@media (max-width: 960px) {
  .burger { display: inline-flex; }

  /* Full-screen pine panel. Visibility flips immediately on open and is
     only delayed on close, so the panel is never invisible while opening. */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 90;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-5);
    padding: var(--space-5) var(--gutter) var(--space-6);
    overflow-y: auto;
    background: var(--pine);
    color: var(--paper);
    --focus: var(--lime);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 260ms var(--ease-out),
                transform 260ms var(--ease-out),
                visibility 0s linear 260ms;
  }
  .nav[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 260ms var(--ease-out),
                transform 260ms var(--ease-out),
                visibility 0s;
  }
  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }
  .nav__links a {
    min-height: 64px;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 9vw, 3.25rem);
    font-weight: 900;
    letter-spacing: -0.025em;
  word-spacing: 0.06em;
    text-transform: none;
    border-bottom: 1px solid rgba(169, 195, 174, 0.3);
  }
  .nav__links a::after { display: none; }
  .nav__links a[aria-current="page"] { color: var(--lime); }
  .nav .btn--nav,
  .site-header[data-transparent="true"]:not([data-scrolled="true"]) .nav .btn--nav {
    align-self: flex-start;
    min-height: 52px;
    padding: 0.9rem 1.5rem;
    font-size: var(--fs-btn);
    background: var(--lime);
    border-color: var(--lime);
    color: var(--pine);
  }

  /* While the menu is open the header joins the panel */
  .site-header:has(.burger[aria-expanded="true"]) {
    background: var(--pine);
    border-bottom-color: var(--pine);
    color: var(--paper);
    --focus: var(--lime);
  }
  .site-header:has(.burger[aria-expanded="true"]) .wordmark {
    --logo-disc: var(--paper);
    --logo-ink: var(--brand);
  }

  .split,
  .chapter__top,
  .chapter--flip .chapter__top,
  .process,
  .svc { grid-template-columns: minmax(0, 1fr); }
  .chapter--flip .chapter__top > .frame { order: 0; }
  .process .sec-head { position: static; }

  .svc__media { display: none; }
  .acc__media {
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-media);
    overflow: hidden;
    background: var(--paper-2);
  }
  .acc__media img { width: 100%; height: 100%; object-fit: cover; }

  .rooms { grid-template-columns: minmax(0, 1fr); }
  .room:first-child { grid-row: auto; }
  .room__media,
  .room:first-child .room__media {
    flex: none;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .cols { grid-template-columns: minmax(0, 1fr); }
  .col,
  .col + .col {
    padding: var(--space-5) 0;
    border-left: 0;
  }
  .col + .col { border-top: 1px solid var(--line-c); }

  .frame--4x5 { aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
  :root { --header-h: 68px; }

  .cells { grid-template-columns: minmax(0, 1fr); }
  .cell { min-height: 0; }

  .plans { grid-template-columns: minmax(0, 1fr); }
  .plans .plan:last-child { grid-column: auto; }
  .plan { min-height: 0; }

  .form__row { grid-template-columns: minmax(0, 1fr); }

  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn,
  .pagehead__actions .btn { flex: 1 1 auto; }

  .acc__btn { grid-template-columns: minmax(0, 1fr) auto; }
  .acc__num { grid-column: 1 / -1; }
  .acc__body { grid-template-columns: minmax(0, 1fr); }
  .acc__body > :first-child { grid-column: 1; }

  .footer-brand { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

  .wordmark__text { font-size: 1rem; letter-spacing: 0.12em; }

  /* The full name doesn't fit beside the burger on a phone, so the header
     lockup breaks onto two lines instead of pushing the burger off screen. */
  .site-header .wordmark { white-space: normal; }
  .site-header .wordmark__text { line-height: 1.15; }

  .marquee__pause { right: var(--space-2); }
}

/* --------------------------------------------------------------------------
   23. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* The marquee becomes a static row that starts at the first item and can
     be scrolled sideways, as in the earlier design. The duplicate loop group is dropped. */
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none !important; transform: none !important; }
  .marquee__group + .marquee__group { display: none; }
  .marquee__pause { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .acc__btn:hover .acc__title,
  .room:hover .room__media img,
  .btn:hover svg,
  .tlink:hover svg { transform: none; }
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .marquee, .burger, .cta-band, .svc__media { display: none; }
  .reveal { opacity: 1; transform: none; }
  .acc__panel { grid-template-rows: 1fr; }
  body { background: #FFFFFF; }
}