:root{
  --forest: #1E4527;
  --cream: #FAF6EC;
  --cream-dim: #F0E6D4;
  --ink: #20241E;
  --rule: #D8CDB0;
  --sareewa: #3E7A4A;
  --doowraga: #B84E1A;
  --gatto: #2E4F45;
  --gatto-light: #7FB6A6;
  --ember: #E85A22;
  --coral: #E9815F;
  --paper-line: rgba(250,246,236,0.14);
  --max: 1240px;

  /* ---------- TYPE SCALE ----------
     Every fixed font-size used anywhere on the site (styles.css and each
     page's local <style> block), named as a single source of truth. Values
     are unchanged from what each selector used before — this tokenizes the
     existing scale rather than redesigning it, so no rendered size moves.
     A handful of near-identical steps (10px/10.5px/11px, 14px/14.5px, etc.)
     are kept distinct rather than merged into fewer canonical steps, since
     merging them would change real pixel output and that's a design call,
     not a maintainability one. Below the numeric micro/body-copy scale,
     the display sizes get semantic names tied to the component they size —
     those are the ones set with clamp() for fluid scaling. */
  --fs-10: 10px;
  --fs-10-5: 10.5px;
  --fs-11: 11px;
  --fs-11-5: 11.5px;
  --fs-12: 12px;
  --fs-12-5: 12.5px;
  --fs-14: 14px;
  --fs-14-5: 14.5px;
  --fs-15: 15px;
  --fs-15-5: 15.5px;
  --fs-16: 16px;
  --fs-16-5: 16.5px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;

  --fs-hero-h1: clamp(40px, 6.4vw, 84px);
  --fs-statement: clamp(22px, 2.8vw, 30px);
  --fs-manifesto-statement: clamp(30px, 4.6vw, 54px);
  --fs-section-h2: clamp(28px, 3.6vw, 44px);
  --fs-feature-h2: clamp(28px, 3.8vw, 46px);
  --fs-closing-h2: clamp(30px, 5vw, 52px);
  --fs-legal-banner-h1: clamp(32px, 4.8vw, 54px);
  --fs-page-banner-h1: clamp(36px, 5.6vw, 68px);
  --fs-biz-banner-h1: clamp(38px, 6vw, 76px);
  --fs-pull-quote: clamp(24px, 3.4vw, 36px);
  --fs-contact-banner-h1: clamp(34px, 5vw, 60px);
  --fs-error-banner-h1: clamp(32px, 5vw, 56px);
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
}

/* Section snapping is a pointing-device-only affordance. On a touch browser the
   engine re-evaluates snap positions whenever the visual viewport changes — and
   the URL bar collapsing on the first scroll of a fresh page is exactly that.
   Every .snap section is 100dvh tall, so that one change moves every snap
   position, and proximity snap re-settles the page onto the section below the
   hero a beat after it loads — which reads as a broken redirect.

   Gated on hover/pointer, NOT on width: a width gate (the previous 861px one)
   fixed phones but left every tablet ≥861px broken — iPad Pro portrait is
   1024px and any iPad in landscape is 1024-1366px, all touch, all with a
   collapsing URL bar. hover:hover + pointer:fine is true only for a mouse or
   trackpad; iPadOS reports coarse/none even with a keyboard case attached, so
   tablets now correctly fall out of this block at every size. The 861px floor
   stays as well — snapping full-height sections needs the room. */
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  html{scroll-snap-type:y proximity;}
  /* No scroll-snap-stop:always — that forces a mandatory rest at every section,
     so a long fling gets caught 3-9 times on the way down a page. Without it,
     proximity still settles you onto a section boundary when you scroll a short
     distance, but a deliberate fling travels the whole way. */
  .snap{scroll-snap-align:start;}
  footer{scroll-snap-align:end;}
}

/* ---------- REVEAL-ON-SCROLL ----------
   One system for every fade-up on the site, driven by the [data-reveal]
   attribute and the IntersectionObserver at the bottom of each page. The
   .js-enabled gate means the content is visible from the start if the script
   never runs. .underline-word opts out: it carries data-reveal for its own
   scaleX underline effect and should not fade its text. */
.js-enabled [data-reveal]:not(.underline-word){
  opacity:0; transform:translateY(24px);
  /* Longhands, not the `transition` shorthand: the shorthand would reset
     transition-delay to 0 and silently kill the :nth-child stagger below,
     which is declared at lower specificity. */
  transition-property:opacity, transform;
  transition-duration:.6s;
  transition-timing-function:ease;
}
.js-enabled [data-reveal]:not(.underline-word).in-view{opacity:1; transform:translateY(0);}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Newsreader', serif;
  font-size:var(--fs-17);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  line-height:1.05;
  margin:0;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-11-5);
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.6;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--sareewa); outline-offset:3px;}

/* ---------- SKIP LINK ---------- */
.skip-link{
  position:absolute;
  top:-100px; left:16px; z-index:1000;
  background:var(--forest); color:var(--cream);
  padding:14px 22px; border-radius:2px;
  font-family:'IBM Plex Mono', monospace; font-size:var(--fs-12); letter-spacing:0.08em; text-transform:uppercase;
  transition:top .2s ease;
}
.skip-link:focus{top:16px;}

/* ---------- ANIMATED KEY-WORD UNDERLINE ---------- */
.underline-word{
  position:relative;
  display:inline-block;
}
@media (min-width:400px){
  .underline-word{white-space:nowrap;}
}
.underline-word::after{
  content:'';
  position:absolute;
  left:0; bottom:-0.07em;
  width:100%; height:0.07em;
  background:var(--underline-color, var(--ember));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s cubic-bezier(.22,.8,.28,1);
}
.underline-word.in-view::after{transform:scaleX(1);}

.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 32px;}

/* ---------- NAV ---------- */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 0;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.site-nav.solid{
  background:rgba(30,69,39,0.94);
  backdrop-filter:blur(6px);
  padding:14px 0;
  border-bottom:1px solid rgba(250,246,236,0.1);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; max-width:var(--max); margin:0 auto; padding:0 32px;}
.nav-wordmark{
  font-family:'Instrument Serif', serif;
  font-size:var(--fs-22);
  color:var(--cream);
  letter-spacing:0.01em;
}
.nav-wordmark span{color:var(--ember);}
.nav-links{display:flex; gap:34px; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-12);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--cream-dim);
  opacity:0.82;
  transition:opacity .2s ease;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
}
.nav-links a:hover, .nav-links a.current{opacity:1; border-color:var(--sareewa);}
.nav-toggle{display:none; position:relative; z-index:2; background:none; border:none; color:var(--cream); cursor:pointer; padding:4px;}
.nav-toggle svg{width:24px; height:24px;}
.nav-toggle svg line{transition:transform .3s ease; transform-origin:12px 12px;}
.nav-toggle[aria-expanded="true"] svg line:first-child{transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] svg line:last-child{transform:translateY(-5px) rotate(-45deg);}

@media (max-width:860px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--forest); flex-direction:column; justify-content:center; gap:26px;
    padding:0 40px; transform:translateX(100%);
    z-index:1;
    /* transform alone only pushes the drawer offscreen — its seven links stay
       in the tab order, so a keyboard user tabs off the wordmark into content
       they cannot see (WCAG 2.4.3). visibility:hidden takes them out of it.
       The 0s duration / .35s delay means visibility flips only once the
       slide-out has finished, so the close animation is unchanged; opening
       overrides the shorthand with no delay so the links are focusable
       immediately. */
    visibility:hidden;
    transition:transform .35s ease, visibility 0s .35s;
  }
  .nav-links.open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .35s ease;
  }
  .nav-toggle{display:block;}
}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-12); letter-spacing:0.08em; text-transform:uppercase;
  padding:15px 26px; border-radius:2px; display:inline-flex; align-items:center; gap:10px;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{background:var(--cream); color:var(--forest);}
.btn-primary:hover{background:var(--sareewa); color:var(--cream); transform:translateY(-2px);}
.btn-ghost{border:1px solid rgba(250,246,236,0.35); color:var(--cream);}
.btn-ghost:hover{border-color:var(--cream); transform:translateY(-2px);}

/* ---------- SECTION LABEL ---------- */
.section-head{max-width:640px; margin:0 0 56px;}
.section-head .eyebrow{color:var(--sareewa); margin-bottom:16px; display:block;}
.section-head h2{font-size:var(--fs-section-h2);}

/* ---------- PHOTO CARD GRID (reused by home "How We Operate" and partnerships "Where We Collaborate") ---------- */
.op-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px;}
.op-card{
  --op-photo: none;
  position:relative; overflow:hidden; border-radius:6px;
  min-height:440px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px 22px; text-align:left;
  color:var(--cream);
}
.op-card:nth-child(2){transition-delay:.1s;}
.op-card:nth-child(3){transition-delay:.2s;}
.op-card:nth-child(4){transition-delay:.3s;}
.op-card::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--op-photo) center/cover no-repeat;
  filter:saturate(0.85) brightness(0.94);
  transform:scale(1.001);
  transition:transform .7s cubic-bezier(.22,.8,.28,1), filter .5s ease;
}
.op-card:hover::after, .op-card:focus-within::after{
  transform:scale(1.08);
  filter:saturate(1.15) brightness(1.02);
}
.op-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,26,18,0.1) 0%, rgba(15,26,18,0.5) 55%, rgba(15,26,18,0.9) 100%);
  transition:background .4s ease;
}
.op-card:hover::before, .op-card:focus-within::before{
  background:linear-gradient(180deg, rgba(15,26,18,0.3) 0%, rgba(15,26,18,0.68) 45%, rgba(15,26,18,0.95) 100%);
}
.op-card > *{position:relative; z-index:2;}
.op-card .tag{font-family:'IBM Plex Mono', monospace; font-size:var(--fs-10-5); letter-spacing:0.08em; text-transform:uppercase; color:#B9D9BC; display:block; margin-bottom:10px;}
.op-card h3{font-size:var(--fs-19); font-style:italic; color:var(--cream); margin:0;}
.op-card p{
  font-size:var(--fs-14-5); line-height:1.6; color:#DCE8DA;
  max-height:0; opacity:0; margin:0; overflow:hidden;
  transition:max-height .45s ease, opacity .35s ease, margin-top .45s ease;
}
.op-card:hover p, .op-card:focus-within p{
  max-height:220px; opacity:1; margin-top:14px;
}
@media (max-width:960px){.op-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){
  .op-grid{grid-template-columns:1fr;}
  .op-card{min-height:280px;}
  .op-card p{max-height:none; opacity:1; margin-top:14px;}
}

/* ---------- BUSINESS CARDS (reused by home teaser + businesses overview) ---------- */
.biz-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule);}
.biz-card{
  background:var(--cream); padding:44px 34px 40px;
  display:flex; flex-direction:column;
}
.biz-card:nth-child(2){transition-delay:.12s;}
.biz-card:nth-child(3){transition-delay:.24s;}

.biz-mark{width:34px; height:34px; margin-bottom:26px;}
.biz-card h3{font-size:var(--fs-26); margin-bottom:6px;}
.biz-card .tag{font-style:italic; color:#6b6350; font-size:var(--fs-15); margin-bottom:18px; display:block;}
.biz-card p{font-size:var(--fs-15-5); color:#4a4636; flex-grow:1; margin:0 0 22px;}
.biz-card .discover{
  font-family:'IBM Plex Mono', monospace; font-size:var(--fs-11-5); letter-spacing:0.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  border-bottom:1px solid currentColor; padding-bottom:3px;
}
.biz-card:nth-child(1) .discover{color:var(--sareewa);}
.biz-card:nth-child(2) .discover{color:var(--doowraga);}
.biz-card:nth-child(3) .discover{color:var(--gatto);}
@media (max-width:860px){
  .biz-grid{grid-template-columns:1fr;}
  .biz-card h3{font-size:var(--fs-22);}
}

/* ---------- FOOTER ---------- */
footer{background:var(--forest); color:#B9AF93; padding:64px 0 32px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--paper-line);}
.footer-mark{border-radius:10px; object-fit:cover; margin-bottom:16px;}
.footer-wordmark{font-family:'Instrument Serif', serif; font-size:var(--fs-24); color:var(--cream); margin-bottom:14px;}
.footer-grid p{font-size:var(--fs-14); max-width:32ch; margin:0;}
.footer-col .eyebrow{color:#7C9B7E; display:block; margin-bottom:16px;}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col li{margin-bottom:10px; font-size:var(--fs-14);}
.footer-col a:hover{color:var(--cream);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; font-family:'IBM Plex Mono', monospace; font-size:var(--fs-11); letter-spacing:0.04em;
  color:#7A7259; flex-wrap:wrap; gap:14px;
}
.footer-bottom-left, .footer-bottom-right{display:flex; gap:20px; flex-wrap:wrap;}
.footer-bottom-right a{transition:color .2s ease;}
.footer-bottom-right a:hover{color:var(--cream);}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* ---------- LEGAL DOCUMENT PAGES (Privacy Policy / Terms of Use) ---------- */
.legal-banner{
  --legal-photo: none;
  position:relative;
  background:
    linear-gradient(180deg, rgba(18,32,22,0.6) 0%, rgba(16,29,20,0.78) 60%, rgba(15,26,18,0.95) 100%),
    var(--legal-photo) center/cover no-repeat, var(--forest);
  color:var(--cream);
  padding:150px 0 70px;
}
.legal-banner .wrap{position:relative; z-index:2;}
.legal-banner .eyebrow{color:#8FB093; margin-bottom:22px; display:block;}
.legal-banner h1{font-size:var(--fs-legal-banner-h1); max-width:22ch; color:var(--cream); margin-bottom:0;}

.legal-content{background:var(--cream); padding:70px 0 120px;}
.legal-article{max-width:760px; margin:0 auto;}
.legal-meta{
  font-family:'IBM Plex Mono', monospace; font-size:var(--fs-12); color:#6b6350;
  line-height:1.9; margin:0 0 20px;
}
.legal-article h2{font-size:var(--fs-24); margin:52px 0 16px; color:var(--ink);}
.legal-article h2:first-of-type{margin-top:0;}
.legal-article h3{font-size:var(--fs-16-5); margin:28px 0 10px; color:var(--ink);}
.legal-article p{font-size:var(--fs-16-5); color:#4a4636; line-height:1.75; margin:0 0 18px;}
.legal-article ul{margin:0 0 20px; padding-left:22px;}
.legal-article li{font-size:var(--fs-16-5); color:#4a4636; line-height:1.75; margin-bottom:10px;}
.legal-article strong{color:var(--ink);}
.legal-article table{width:100%; border-collapse:collapse; margin:8px 0 24px;}
.legal-article th, .legal-article td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule); font-size:var(--fs-14-5); color:#4a4636;}
.legal-article th{font-family:'IBM Plex Mono', monospace; font-size:var(--fs-10); letter-spacing:0.08em; text-transform:uppercase; color:#6b6350;}

/* ---------- PAGE BANNER (dark, full-bleed photo, used by about/businesses overview) ---------- */
.page-banner{
  --banner-photo: none;
  position:relative;
  background:
    linear-gradient(180deg, rgba(18,32,22,0.6) 0%, rgba(16,29,20,0.78) 60%, rgba(15,26,18,0.95) 100%),
    var(--banner-photo) center/cover no-repeat;
  color:var(--cream);
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:flex-start;
  padding:132px 0 80px;
}
.page-banner .wrap{width:100%; position:relative; z-index:2;}
.page-banner .eyebrow{color:#8FB093; margin-bottom:22px; display:block;}
.page-banner h1{font-size:var(--fs-page-banner-h1); max-width:16ch; color:var(--cream); margin-bottom:40px;}
.banner-lead{display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-top:32px; border-top:1px solid var(--paper-line); max-width:960px;}
.banner-lead p{margin:0; font-size:var(--fs-17); color:#DCE8DA; line-height:1.6;}
@media (max-width:860px){.banner-lead{grid-template-columns:1fr;}}

/* ---------- BUSINESS DETAIL PAGES ---------- */
.biz-banner{
  --accent: var(--sareewa);
  position:relative;
  background:
    linear-gradient(180deg, rgba(18,32,22,0.6) 0%, rgba(16,29,20,0.78) 60%, rgba(15,26,18,0.95) 100%),
    var(--biz-photo) center/cover no-repeat;
  color:var(--cream);
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:flex-end;
  padding:132px 0 100px;
}
.biz-banner .wrap{width:100%; position:relative; z-index:2;}
.biz-banner .eyebrow{color:var(--accent); margin-bottom:18px; display:block;}
.biz-banner h1{font-size:var(--fs-biz-banner-h1); margin-bottom:14px;}
.biz-banner .tag-line{font-family:'Newsreader', serif; font-style:italic; font-size:var(--fs-22); color:#DCE8DA; margin:0; max-width:44ch;}
.biz-banner-caption{
  position:absolute; right:32px; bottom:24px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:var(--fs-10-5); letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(250,246,236,0.5);
}

.biz-lead{
  background:var(--cream);
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:110px 0;
}
.biz-lead p{font-size:var(--fs-19); color:#3a3626; max-width:62ch; line-height:1.6; margin:0 0 22px;}
.biz-lead p:last-child{margin-bottom:0;}

.pull-quote{
  --accent: var(--sareewa);
  background:var(--forest); color:var(--cream);
  min-height:60vh; min-height:60dvh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:100px 0;
}
.pull-quote .eyebrow{color:var(--accent); margin-bottom:20px;}
.pull-quote p{font-family:'Newsreader', serif; font-style:italic; font-size:var(--fs-pull-quote); color:var(--cream); max-width:20ch; margin:0 auto; line-height:1.4;}

.feature-block{
  background:var(--cream);
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:110px 0;
}
.feature-block.alt{background:var(--cream-dim);}
.feature-block .section-head h2{font-size:var(--fs-feature-h2); max-width:14ch;}
.feature-block .section-head .eyebrow{color:var(--biz-accent, var(--sareewa));}
.feature-block-body{max-width:640px;}
.feature-block-body p{font-size:var(--fs-17); color:#4a4636; line-height:1.65; margin:0 0 20px;}
.feature-block-body p:last-child{margin-bottom:0;}

.check-list{list-style:none; margin:0; padding:0; max-width:640px;}
.check-list li{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--rule);
  font-size:var(--fs-17); color:var(--ink);
}
.check-list li:first-child{border-top:1px solid var(--rule);}
.check-list li svg{width:18px; height:18px; flex-shrink:0; margin-top:4px; stroke:var(--biz-accent, var(--sareewa));}

.compare-table{width:100%; border-collapse:collapse; margin-top:8px;}
.compare-table th{
  font-family:'IBM Plex Mono', monospace; font-size:var(--fs-10-5); letter-spacing:0.08em; text-transform:uppercase;
  color:#6b6350; text-align:left; padding:0 16px 14px 0; border-bottom:1px solid var(--rule);
}
.compare-table td{
  padding:20px 16px 20px 0; border-bottom:1px solid var(--rule);
  font-size:var(--fs-15-5); color:#3a3626; vertical-align:top;
}
.compare-table td:first-child{font-family:'Instrument Serif', serif; font-size:var(--fs-20); color:var(--ink);}
.compare-table tr:last-child td{border-bottom:1px solid var(--rule);}
@media (max-width:760px){
  .compare-table thead{display:none;}
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td{display:block; width:100%;}
  .compare-table tr{padding:18px 0; border-bottom:1px solid var(--rule);}
  .compare-table td{border-bottom:none; padding:4px 0;}
  .compare-table tr:last-child td{border-bottom:none;}
  .compare-table td:first-child{font-size:var(--fs-17);}
}

/* ---------- CLOSING CTA (shared across pages) ---------- */
.closing{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 160% at 50% 100%, var(--cream-dim) 0%, var(--cream) 72%);
  text-align:center;
  border-top:1px solid var(--rule);
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:110px 0;
}
.closing::before{
  content:''; pointer-events:none;
  position:absolute; left:50%; top:-160px; width:640px; height:640px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(62,122,74,0.12) 0%, rgba(62,122,74,0) 70%);
}
.closing .wrap{
  position:relative; z-index:1;
}
/* The closing call-to-action gets a longer, softer curve than the default.
   The .in-view partner is required: without it this rule ties on specificity
   with the global .in-view rule and, coming later in the file, would win —
   pinning the panel at translateY(28px) so only its opacity animated. */
.js-enabled .closing .wrap[data-reveal]{
  transform:translateY(28px);
  transition-duration:.9s;
  transition-timing-function:cubic-bezier(.22,.8,.28,1);
}
.js-enabled .closing .wrap[data-reveal].in-view{transform:translateY(0);}
.closing h2{font-size:var(--fs-closing-h2); max-width:18ch; margin:0 auto 34px;}
.closing .eyebrow{color:#6b6350;}
.closing .btn-primary{background:var(--forest); color:var(--cream); transition:background .3s ease, transform .3s ease;}
.closing .btn-primary:hover{background:var(--ember); color:var(--cream); transform:translateY(-2px);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  html{scroll-behavior:auto; scroll-snap-type:none;}
}

/* ==========================================================================
   PRINT
   Every page is built as a scroll-snap, viewport-height "experience" — most
   sections are min-height:100vh/100dvh, some content only appears on hover
   or scroll-reveal, and the home page manifesto is a 500vh pinned scroller
   with four of its five panels sitting at opacity:0 until JS flips them.
   None of that means anything on paper: left alone, a printed page is mostly
   blank space punctuated by a few lines of text. The dark, photo-backed
   banner/hero sections are a second problem on top of that: browsers don't
   print CSS background-images/colors by default (an ink-saving "economy"
   setting), which would drop the photo but keep the light CSS text color,
   leaving cream-on-white invisible text. `print-color-adjust:exact` tells
   the browser to print backgrounds as authored instead, so the fix here is
   to force that rather than to strip the photos — this block collapses
   every section to its natural content height, forces backgrounds/photos to
   actually print, and force-reveals anything gated behind scroll/hover/
   active-state JS so no copy or imagery is silently dropped from the
   printout.
   ========================================================================== */
@media print{
  html{scroll-snap-type:none !important;}
  *{
    min-height:0 !important; scroll-snap-align:none !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }

  body{font-size:12pt; line-height:1.5;}

  /* Screen-only chrome and interaction affordances (not content imagery). */
  header.site-nav, .nav-toggle, .skip-link, footer,
  .hero-ctas, .btn, .horizon-svg, .mi-track,
  .carousel-controls, .carousel-thumbs{display:none !important;}

  a{text-decoration:underline;}
  .wrap{max-width:none !important; padding:0 !important;}

  /* Content gated behind scroll-reveal, hover, or a JS "active" toggle would
     otherwise print blank — force it visible and back into normal flow. */
  [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important;}
  .op-card p{
    opacity:1 !important; max-height:none !important; overflow:visible !important;
    transform:none !important; transition:none !important; margin-top:14px !important;
  }
  .manifesto{height:auto !important;}
  .manifesto-sticky{position:static !important; height:auto !important; overflow:visible !important;}
  .mi-panel{opacity:1 !important; position:relative !important; inset:auto !important; padding:24px 0 !important;}
  .mi-content, .mi-header{position:static !important; transform:none !important; padding:0 0 20px !important;}

  /* The growing-floor carousel scrolls horizontally on screen; on paper,
     stack every slide instead of printing only whichever one is in view. */
  .photo-strip{height:auto !important;}
  .carousel-track{display:block !important; overflow:visible !important;}
  .carousel-slide{height:auto !important; margin-bottom:16px;}
  .carousel-slide img{height:auto !important; width:100% !important;}

  /* Avoid orphaned headings and content split awkwardly across a page break. */
  h1, h2, h3{page-break-after:avoid; break-after:avoid;}
  table, tr, li, .legal-article p{page-break-inside:avoid; break-inside:avoid;}

  .legal-content{padding:0 !important;}
  .legal-article{max-width:none !important;}
  .legal-meta{color:#444 !important;}
}