/* ============================================================
   AUREAUX — Shared site chrome
   Base, buttons, nav + full-screen menu overlay, forms, footer,
   cookie banner and reveal helpers. Loaded after tokens.css.
   Page-specific section styles live in each page's <style> block.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--green-base);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  --menu-gap: 14px; --menu-panel: #0f381d; --nav-open-h: 102px;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; letter-spacing: var(--tracking-tight); line-height: 1.04; }
::selection { background: var(--gold); color: var(--green-ink); }

/* Film-grain overlay across the whole page */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 10000;
  background: var(--gold); color: var(--green-ink); padding: .8rem 1.2rem;
  font-family: var(--font-body); font-size: .8rem; letter-spacing: .08em;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Shared utilities ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-section-x); }
.section { padding-block: var(--pad-section-y); position: relative; }

.eyebrow {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: .85rem;
}
.eyebrow::before { display: none; }
.eyebrow--center { justify-content: center; }
.serif-i { font-style: italic; }

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 400; max-width: 16ch; }
.sec-head h2 em { font-style: italic; color: var(--sage); }
.sec-head p { color: var(--text-on-light-muted); max-width: 38ch; font-size: 1rem; }
.sec-head--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
.sec-head--center h2 { max-width: none; }
.sec-head--center p { max-width: 52ch; }

/* =========================================================
   BUTTONS — liquid-glass system
   Primary: polished champagne gold with a specular sheen.
   Keyline (ghost): frosted glass with a slow light that
   travels around the rim. See tokens.css for @property --btn-angle.
   ========================================================= */
.btn {
  position: relative; isolation: isolate;
  font-family: var(--font-body); font-weight: 500; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.05rem 1.9rem; border-radius: var(--radius-pill);
  cursor: pointer; border: 1px solid transparent;
  transition: transform .55s var(--ease-out-expo), background-color .45s var(--ease-soft),
              color .45s var(--ease-soft), border-color .45s var(--ease-soft), box-shadow .55s var(--ease-soft);
  will-change: transform;
}
.btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn .arr { transition: transform .5s var(--ease-out-expo); }
.btn:hover .arr { transform: translateX(5px); }
/* glass bevel — soft specular light along the top edge (all buttons) */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 46%); opacity: .55;
}

/* ---- Primary: liquid champagne gold ---- */
.btn-primary {
  overflow: hidden; color: var(--green-ink); background: var(--btn-gold);
  border-color: rgba(255,255,255,.24);
  box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 3px rgba(1,13,4,.20);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 3px rgba(1,13,4,.20);
}
.btn-primary::before { /* diagonal glare that sweeps across on hover */
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: -60%; width: 42%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.btn-primary:hover::before { animation: btn-sheen 1.5s cubic-bezier(.65, 0, .35, 1); }

/* ---- Keyline (frosted glass) + travelling rim light ---- */
.btn-ghost, .btn-dark-ghost {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.btn-ghost { color: var(--text-on-dark); background: var(--glass-fill-dark); border-color: var(--glass-rim-dark);
  box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-ghost:hover { transform: translateY(-2px); color: var(--gold-light); background: rgba(255,255,255,.09); border-color: rgba(220,190,134,.5); }
.btn-dark-ghost { color: var(--green-ink); background: var(--glass-fill-light); border-color: var(--glass-rim-light);
  box-shadow: 0 1px 2px rgba(1,13,4,.05), 0 10px 26px rgba(1,13,4,.08), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-dark-ghost:hover { transform: translateY(-2px); background: rgba(1,13,4,.05); border-color: rgba(1,13,4,.32); }

/* Travelling rim light — ONLY on keyline buttons inside a page header/hero.
   Body keyline buttons deliberately have no rim. */
.page-hero .btn-ghost::before, .page-hero .btn-dark-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--btn-angle),
    transparent 0deg 62deg, rgba(220,190,134,.12) 92deg,
    var(--gold-light) 116deg, #fff4e0 128deg, var(--gold-light) 140deg,
    rgba(220,190,134,.12) 164deg, transparent 196deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: btn-rim 16s linear infinite;
}
.page-hero .btn-dark-ghost::before {
  background: conic-gradient(from var(--btn-angle),
    transparent 0deg 62deg, rgba(168,125,69,.14) 92deg,
    var(--gold) 116deg, var(--gold-light) 128deg, var(--gold) 140deg,
    rgba(168,125,69,.14) 164deg, transparent 196deg 360deg);
}

@keyframes btn-sheen { 0% { left: -60%; opacity: 0; } 22% { opacity: .6; } 100% { left: 120%; opacity: 0; } }
/* two full rotations (~6s), fade out, rest ~10s, repeat — elusive, not a constant loop */
@keyframes btn-rim {
  0%    { --btn-angle: 0deg;   opacity: 0; }
  1.5%  { --btn-angle: 30deg;  opacity: 1; }
  36%   { --btn-angle: 690deg; opacity: 1; }
  37.5% { --btn-angle: 720deg; opacity: 0; }
  100%  { --btn-angle: 720deg; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero .btn-ghost::before, .page-hero .btn-dark-ghost::before { animation: none; opacity: 0; }
  .btn-primary:hover::before { animation: none; opacity: 0; }
  .btn:active { transform: translateY(1px); }
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================
   HEADER / NAV — transparent at top, frosted on scroll,
   hides on scroll-down / reveals on scroll-up.
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding-block: 0.6rem;
  /* align nav content (logo) to the hero rail (~100px), not the centred --maxw body rail */
  padding-inline: var(--pad-section-x);
  background: transparent; border: 1px solid transparent; border-radius: 0;
  transition: background-color .55s var(--ease-soft), backdrop-filter .55s var(--ease-soft), padding .55s var(--ease-soft), border-color .55s var(--ease-soft), top .55s var(--ease-soft), left .55s var(--ease-soft), right .55s var(--ease-soft), border-radius .55s var(--ease-soft), transform .5s var(--ease-soft);
}
.nav--hidden { transform: translateY(-100%); }
.nav.scrolled {
  background: rgba(7, 24, 14, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding-block: 1.05rem; border-bottom-color: var(--hairline-dark);
}
body.menu-open .nav {
  top: var(--menu-gap); left: var(--menu-gap); right: var(--menu-gap);
  background: var(--menu-panel); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: rgba(255,255,255,0.05); border-radius: 16px;
  padding-block: 1.05rem; padding-inline: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 2px 6px rgba(0,0,0,0.20), 0 18px 44px rgba(0,0,0,0.32);
}
body.menu-open .nav__logo { height: 68px; }
.nav__logo { justify-self: start; position: relative; z-index: 2; display: inline-flex; align-items: center; height: 68px; transition: height .55s var(--ease-soft); }
.nav.scrolled .nav__logo { height: 58px; }
.nav__logo-mark { height: 100%; width: auto; display: block; backface-visibility: hidden; transform-origin: left center; will-change: transform, opacity; }
/* The logo PNGs carry transparent left padding (12% landscape, 22.2% monogram);
   translateX pulls the visible mark back onto the pad-section-x rail so it
   lines up with hero headings. Keep the offset first in every transform list. */
.nav__logo-full { height: 150%; transform: translateX(-12%); transition: opacity .5s cubic-bezier(.62,0,.2,1) .14s, transform .7s cubic-bezier(.76,0,.24,1) .12s; }
.nav__logo-mono {
  position: absolute; left: 0; top: 50%; height: 100%; width: auto;
  opacity: 0; transform: translateX(-22.2%) translateY(-50%) translateY(9px) scale(.8) rotate(-5deg);
  transition: opacity .42s cubic-bezier(.62,0,.2,1), transform .55s cubic-bezier(.76,0,.24,1);
}
body.menu-open .nav__logo-full {
  opacity: 0; transform: translateX(-12%) translateY(-7px) scale(.84) rotate(5deg);
  transition: opacity .34s cubic-bezier(.62,0,.2,1), transform .5s cubic-bezier(.76,0,.24,1);
}
body.menu-open .nav__logo-mono {
  opacity: 1; transform: translateX(-22.2%) translateY(-50%) translateY(0) scale(1) rotate(0);
  transition: opacity .58s cubic-bezier(.62,0,.2,1) .14s, transform .68s cubic-bezier(.76,0,.24,1) .12s;
}

.nav__toggle {
  grid-column: 2; justify-self: center; position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .75rem;
  background: none; border: 0; cursor: pointer; color: var(--text-on-dark); padding: .4rem .2rem;
}
.nav__toggle-lines { position: relative; width: 24px; height: 11px; flex: none; }
.nav__toggle-lines i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease-out-expo), opacity .3s; }
.nav__toggle-lines i:nth-child(1) { top: 0; }
.nav__toggle-lines i:nth-child(2) { bottom: 0; }
body.menu-open .nav__toggle-lines i:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
body.menu-open .nav__toggle-lines i:nth-child(2) { transform: translateY(-4.75px) rotate(-45deg); }
.nav__toggle-label { font-family: var(--font-body); font-weight: 500; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; }
.nav__toggle:hover .nav__toggle-label, .nav__toggle:focus-visible .nav__toggle-label { color: var(--gold-light); }
.nav__toggle:focus-visible { outline: none; }
.nav__toggle:focus-visible .nav__toggle-lines i { background: var(--gold-light); }

.nav__cta { justify-self: end; grid-column: 3; position: relative; z-index: 2; }
.nav .btn { padding: .72rem 1.3rem; }

/* Full-screen overlay menu */
.nav-overlay {
  position: fixed; inset: 0; z-index: 999; overflow-y: auto;
  background: linear-gradient(180deg, rgba(0,17,8,0.46), rgba(0,11,5,0.60));
  backdrop-filter: blur(26px) saturate(118%); -webkit-backdrop-filter: blur(26px) saturate(118%);
  display: block;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .55s var(--ease-soft), visibility 0s linear .55s, backdrop-filter .55s var(--ease-soft);
}
body.menu-open .nav-overlay { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .55s var(--ease-soft), visibility 0s, backdrop-filter .55s var(--ease-soft); }

.nav-overlay__panel {
  position: relative; overflow: hidden;
  margin: calc(var(--menu-gap) + var(--nav-open-h) + var(--menu-gap)) var(--menu-gap) var(--menu-gap);
  background: var(--menu-panel); border-radius: 16px; border: 1px solid rgba(255,255,255,0.05);
  padding: clamp(2rem, 4vw, 3.75rem);
  box-shadow: 0 2px 6px rgba(0,0,0,0.20), 0 24px 60px rgba(0,0,0,0.36);
  clip-path: inset(0 0 100% 0 round 16px);
  transition: clip-path .62s cubic-bezier(.76, 0, .24, 1);
}
body.menu-open .nav-overlay__panel { clip-path: inset(0 0 0 0 round 16px); }
.nav-overlay__panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background: radial-gradient(90% 70% at 100% 0%, rgba(194,153,98,0.10), transparent 55%); }

.nav-overlay__inner {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 1fr 1.05fr 1.65fr; gap: clamp(1.75rem, 4.5vw, 4.5rem);
  align-items: stretch; min-height: clamp(380px, 50vh, 580px);
}

.nav-overlay__links { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(.3rem, 1.4vh, 1rem); }
.nav-overlay__links a {
  font-family: var(--font-display); font-weight: 300; line-height: 1.1;
  font-size: clamp(2.4rem, 5vw, 4.7rem); color: var(--text-on-dark);
  width: fit-content; display: inline-flex; align-items: center; overflow: hidden;
  transition: color .4s var(--ease-soft), padding-left .5s var(--ease-out-expo);
}
.nav-overlay__links a:hover, .nav-overlay__links a:focus-visible { color: var(--gold-light); padding-left: .6rem; outline: none; }
.nav-overlay__links a.is-active { color: var(--gold-light); }
  /* Services child links — quiet Montserrat group under the display link */
  .nav-overlay__group { display: flex; flex-direction: column; }
  .nav-overlay__sub {
    list-style: none; margin: .9rem 0 .4rem; padding: .15rem 0 .15rem 1.6rem;
    border-left: 1px solid var(--hairline-dark);
    display: flex; flex-direction: column; gap: .7rem;
    opacity: 0; transform: translateY(10px);
    transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
  }
  body.menu-open .nav-overlay__sub { opacity: 1; transform: none; transition-delay: 1.05s; }
  .nav-overlay__links .nav-overlay__sub a {
    font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; line-height: 1.35;
    letter-spacing: .02em; color: var(--text-on-dark-muted); overflow: visible;
  }
  .nav-overlay__links .nav-overlay__sub a:hover, .nav-overlay__links .nav-overlay__sub a:focus-visible { color: var(--gold-light); padding-left: .45rem; }
  .nav-overlay__links .nav-overlay__sub a.is-active { color: var(--gold-light); }
.nav-overlay__links a > span {
  display: block; transform: translateY(115%);
  transition: transform .95s cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}
body.menu-open .nav-overlay__links a > span { transform: translateY(0); }
body.menu-open .nav-overlay__links a:nth-child(1) > span { transition-delay: .55s; }
body.menu-open .nav-overlay__links a:nth-child(2) > span { transition-delay: .75s; }
body.menu-open .nav-overlay__group > a > span { transition-delay: .95s; }
body.menu-open .nav-overlay__links a:nth-child(4) > span { transition-delay: 1.15s; }

.nav-overlay__contact { display: flex; flex-direction: column; gap: .28rem; align-self: start; opacity: 0; transition: opacity 2s cubic-bezier(.33, 0, .2, 1) .55s; }
body.menu-open .nav-overlay__contact { opacity: 1; }
.nav-overlay__label { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--gold); margin-bottom: .35rem; }
.nav-overlay__contact a { font-family: var(--font-body); font-size: 1.14rem; color: var(--text-on-dark); width: fit-content; transition: color .35s var(--ease-soft); }
.nav-overlay__contact a:hover, .nav-overlay__contact a:focus-visible { color: var(--gold-light); outline: none; }
.nav-overlay__social { font-size: 1.14rem; }
.nav-overlay__note { font-family: var(--font-body); font-size: 1.08rem; color: var(--text-on-dark); line-height: 1.4; }
.nav-overlay__mt { margin-top: 1.6rem; }

.nav-overlay__media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nav-overlay__fig { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.nav-overlay__media-link { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 6px; border: 1px solid var(--hairline-dark); }
.nav-overlay__media-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.nav-overlay__imgwrap { display: block; width: 100%; height: 100%; transform: translateY(115%); transition: transform .95s cubic-bezier(.19, 1, .22, 1); will-change: transform; }
body.menu-open .nav-overlay__imgwrap { transform: translateY(0); }
.nav-overlay__img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-out-expo), filter .5s var(--ease-soft);
  filter: saturate(.96) brightness(.96);
}
.nav-overlay__media-link:hover .nav-overlay__img, .nav-overlay__media-link:focus-visible .nav-overlay__img { transform: scale(1.04); filter: saturate(1) brightness(1); }
.nav-overlay__fig figcaption {
  margin-top: .8rem; font-family: var(--font-body); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-on-dark-muted);
  opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}
body.menu-open .nav-overlay__fig figcaption { opacity: 1; transform: none; }
body.menu-open .nav-overlay__fig:nth-child(1) .nav-overlay__imgwrap { transition-delay: .65s; }
body.menu-open .nav-overlay__fig:nth-child(2) .nav-overlay__imgwrap { transition-delay: .85s; }
body.menu-open .nav-overlay__fig:nth-child(1) figcaption { transition-delay: 1s; }
body.menu-open .nav-overlay__fig:nth-child(2) figcaption { transition-delay: 1.2s; }

@media (max-width: 1024px) {
  .nav-overlay__inner { grid-template-columns: 1fr 1fr; }
  .nav-overlay__media { grid-column: 1 / -1; max-width: 460px; }
}
@media (max-width: 768px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__cta { display: none; }
  .nav__toggle { grid-column: 2; justify-self: end; }
  .nav-overlay__inner { grid-template-columns: 1fr; gap: 2rem; }
  .nav-overlay__media { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-overlay { transition: opacity .3s, visibility 0s; }
  .nav-overlay__panel, body.menu-open .nav-overlay__panel { clip-path: none; transition: none; }
  .nav__logo-full, body.menu-open .nav__logo-full { transition: opacity .25s linear; transform: translateX(-12%); }
  .nav__logo-mono, body.menu-open .nav__logo-mono { transition: opacity .25s linear; transform: translateX(-22.2%) translateY(-50%); }
  .nav-overlay__contact, body.menu-open .nav-overlay__contact { transition: opacity .4s linear; }
    .nav-overlay__sub, body.menu-open .nav-overlay__sub { transition: opacity .4s linear; transform: none; }
  .nav-overlay__imgwrap, body.menu-open .nav-overlay__imgwrap,
  .nav-overlay__fig figcaption, body.menu-open .nav-overlay__fig figcaption {
    transition: none; transform: none; opacity: 1;
  }
  .nav-overlay__links a > span, body.menu-open .nav-overlay__links a > span { transform: none; transition: none; }
}

/* =========================================================
   FORMS (reusable — dark surfaces)
   ========================================================= */
form { display: grid; gap: 1.3rem; }
.field { display: flex; flex-direction: column; gap: .55rem; }
.field label { font-family: var(--font-body); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.field input, .field textarea, .field select {
  background: rgba(255,255,255,0.03); border: 1px solid var(--hairline-dark); border-radius: var(--radius-md);
  color: var(--text-on-dark); font-family: var(--font-body); font-size: .96rem; font-weight: 300; padding: .95rem 1.1rem;
  transition: border-color .4s var(--ease-soft), background-color .4s var(--ease-soft); width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(234,231,220,0.35); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold-light); background: rgba(255,255,255,0.05); }
.field .err { color: #e0a99c; font-size: .76rem; letter-spacing: .02em; min-height: 1em; display: none; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid textarea { border-color: #c97b6b; }
.form-error { color: #e0a99c; font-size: .85rem; margin: 1rem 0 0; }
.consent { display: flex; gap: .8rem; align-items: flex-start; }
.consent input { width: 18px; height: 18px; margin-top: .25rem; accent-color: var(--gold); flex: none; }
.consent label { font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--text-on-dark-muted); line-height: 1.5; }
.consent a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.form-success { display: none; border: 1px solid var(--hairline-dark); border-radius: var(--radius-lg); padding: 2.4rem;
  background: rgba(220,190,134,0.06); text-align: center; }
.form-success.show { display: block; }
.form-success h3 { font-size: 1.6rem; margin-bottom: .6rem; color: var(--gold-light); }
.form-success p { color: var(--text-on-dark-muted); font-size: .95rem; margin: 0; }
form.hide { display: none; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--ivory-2); color: var(--text-on-light); padding-block: clamp(4rem, 7vw, 6rem) 2.4rem; }
/* the footer runs edge to edge, keeping only the section gutters */
.footer .wrap { max-width: none; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid var(--hairline-light); }
.footer__brand img { width: 240px; height: auto; margin-bottom: 1.6rem; display: block; }
.footer__brand p { color: var(--text-on-light-muted); font-size: .92rem; max-width: 34ch; margin: 0; }
.footer__col { display: block; }
.footer__col h2 { font-family: var(--font-body); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.2rem; font-weight: 500; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.footer__col a { font-size: .92rem; color: var(--text-on-light-muted); transition: color .35s var(--ease-soft); }
.footer__col a:hover { color: var(--gold-deep); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-top: 2rem; }
.footer__bottom p { margin: 0; font-size: .78rem; color: var(--text-on-light-muted); letter-spacing: .03em; }
.footer__legal { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer__legal a { font-size: .78rem; color: var(--text-on-light-muted); }
.footer__legal a:hover { color: var(--gold-deep); }
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   COOKIE BANNER
   ========================================================= */
.cookie { position: fixed; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 1100; max-width: 560px;
  background: var(--green-deep); border: 1px solid var(--hairline-dark); border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow-lg); transform: translateY(140%); transition: transform .7s var(--ease-out-expo); }
.cookie.show { transform: none; }
.cookie p { margin: 0 0 1.1rem; font-size: .86rem; color: var(--text-on-dark-muted); line-height: 1.6; }
.cookie p a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.cookie .btn { padding: .75rem 1.4rem; font-size: .7rem; }

/* =========================================================
   INTERIOR PAGE HERO + CTA BAND (shared by About/Services/Contact)
   ========================================================= */
.page-hero { position: relative; min-height: 80svh; display: grid; align-items: center; background: var(--green-base); overflow: hidden; padding-block: clamp(9rem, 17vh, 12rem) clamp(3.5rem, 8vh, 6.5rem); }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Neutral near-black scrim (not a green cast) so the photo's own tones come
   through — the shade reads as shadow, not colour */
.page-hero__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(3,5,4,0.88) 5%, rgba(3,5,4,0.5) 44%, rgba(3,5,4,0.08) 80%),
              linear-gradient(0deg, rgba(3,5,4,0.5), rgba(3,5,4,0) 46%); }
/* Hero content sits on the ~100px rail (var(--pad-section-x)), not the centred --maxw body rail */
.page-hero .wrap { max-width: none; }
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { color: var(--text-on-dark); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; margin-top: 1.4rem; max-width: 18ch; }
.page-hero h1 em { font-style: italic; color: var(--gold-light); }
/* Manual hero line breaks — desktop only; collapse to natural wrapping on mobile */
@media (max-width: 768px) { .hero-br { display: none; } }
.page-hero__sub { color: var(--text-on-dark-muted); font-size: 1.08rem; max-width: 54ch; margin-top: 1.6rem; }

.cta-band { background: var(--green-deep); color: var(--text-on-dark); text-align: center; }
.cta-band__inner { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.cta-band h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 400; }
.cta-band h2 em { font-style: italic; color: var(--gold-light); }
.cta-band p { color: var(--text-on-dark-muted); max-width: 46ch; margin: 0; }

/* ---- CTA band film strip: a slow, tilted card rail drifts along the bottom,
        rising up behind the centred content; a green gradient scrim keeps the
        copy and CTA legible over the cards. Track is built by site.js. ---- */
.cta-band--marquee { position: relative; overflow: hidden; padding-bottom: clamp(9rem, 20vh, 14rem); }
.cta-band--marquee .cta-band__inner { position: relative; z-index: 2; }
.cta-marquee { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(17rem, 38vh, 23rem);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
                      linear-gradient(to bottom, transparent, #000 55%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
                      linear-gradient(to bottom, transparent, #000 55%);
          mask-composite: intersect; }
/* Scrim: strongest where the strip passes behind the content, clearing lower down */
.cta-marquee::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,38,21,.85) 0%, rgba(0,38,21,.5) 40%, rgba(0,38,21,.12) 100%); }
.cta-marquee__track { position: absolute; bottom: clamp(2rem, 4vh, 3rem); left: 0; display: flex; gap: 1.4rem;
  width: max-content; animation: cta-drift 120s linear infinite; will-change: transform; }
@keyframes cta-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cta-marquee figure { margin: 0; flex: 0 0 auto; }
.cta-marquee figure:nth-child(odd)  { transform: rotate(-2.5deg) translateY(10px); }
.cta-marquee figure:nth-child(even) { transform: rotate(3.5deg) translateY(-8px); }
.cta-marquee figure:nth-child(3n)   { transform: rotate(-1.5deg) translateY(-16px); }
/* Sized so roughly five cards share the viewport width */
.cta-marquee img { display: block; width: clamp(13rem, 18vw, 18rem); aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: 0 18px 40px -20px rgba(1,13,4,.65); }
@media (prefers-reduced-motion: reduce) { .cta-marquee__track { animation: none; } }

/* =========================================================
   PROCESS TIMELINE — centred pill eyebrow, headline, and a
   horizontal connecting line with open node markers.
   Light section; shared by the process sections site-wide.
   ========================================================= */

.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(3rem, 6vw, 4.5rem); counter-reset: tl; }
@media (min-width: 1025px) {
  /* Pull the rail out to the wide card rail (clamp(100px,8vw,160px) from the
     viewport edge) so the long step names have room. minmax(0,1fr) columns
     keep the grid perfectly centred regardless of title length. */
  .timeline { margin-inline: clamp(-40vw, calc(-1 * ((100vw - var(--maxw)) / 2 + var(--pad-section-x) - clamp(100px, 8vw, 160px))), 0px); }
}
/* Hover: the step quietly wakes — kerning breathes open, the node blooms a
   soft gold aura, its stretch of the rail warms, the copy lifts to full ink.
   Long soft curves so it reads as a response, not an effect. */
.tl-item { position: relative; text-align: center; padding: 3.3rem clamp(.7rem, 1.8vw, 1.6rem) 0; counter-increment: tl; }
/* Step number sits between the node and the heading; warms with the hover */
.tl-item::after { content: counter(tl, decimal-leading-zero); position: absolute; top: 1.35rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .08em; color: var(--text-on-light-muted);
  transition: color 1.1s var(--ease-soft); }
.tl-item:hover::after { color: var(--gold); }
.tl-item::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: var(--hairline-light); transition: background-color 1s var(--ease-soft); }
.tl-item:first-child::before { left: 50%; }
.tl-item:last-child::before { right: 50%; }
.tl-item:hover::before { background: rgba(194, 153, 98, .5); }
.tl-node { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--gold); background: var(--cream); box-shadow: 0 0 0 0 rgba(194, 153, 98, 0);
  transition: background-color .8s var(--ease-soft), transform .8s var(--ease-out-expo), box-shadow 1.1s var(--ease-soft); }
.tl-item:hover .tl-node { background: var(--gold); transform: translateX(-50%) scale(1.15); box-shadow: 0 0 0 7px rgba(194, 153, 98, .16); }
.tl-item h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.65rem); margin: 0 0 .7rem;
  white-space: nowrap; /* the kerning breath must never rewrap the step name */
  /* a name wider than its column overflows both sides equally, not just the right */
  width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%);
  letter-spacing: 0; transition: letter-spacing 1.1s var(--ease-soft), color 1.1s var(--ease-soft); }
.tl-item:hover h3 { letter-spacing: .045em; color: var(--gold); }
.tl-item p { color: var(--text-on-light-muted); font-size: .93rem; line-height: 1.6; margin: 0 auto; max-width: 24ch; transition: color .9s var(--ease-soft); }
.tl-item:hover p { color: var(--text-on-light); }
@media (max-width: 1024px) {
  .timeline { grid-template-columns: 1fr 1fr; gap: 2.8rem 1.4rem; }
  .tl-item { padding-top: 2.6rem; }
  .tl-item::before { display: none; }
}
@media (max-width: 640px) { .timeline { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .tl-item:hover .tl-node { transform: translateX(-50%); }
  .tl-item h3, .tl-item p, .tl-item::before, .tl-node { transition: none; }
  .tl-item:hover h3 { letter-spacing: 0; }
}