/* ====================================================================
   AHO FARMS · design system + shared chrome
   One stylesheet linked from every page, loaded AFTER the page's own
   inline <style> so it wins ties. Since the 2026-09-14 design audit
   (docs/superpowers/specs/2026-09-14-design-system-audit-and-plan.md)
   this file is the single source for: tokens (colour, type scale,
   spacing, radii, shadows, layout), base resets, the header + mobile
   drawer + desktop dropdown, the footer, the floating "Connect with us"
   button, the plate grammar and the shared components (buttons, cards,
   eyebrows, stats, fields, notices). Page CSS extends these; it does
   not redefine them.

   Colour (CEO, 2026-09-15): premium black / neutral / cream is the
   foundation, photography is the warmth, and AHO TEAL is the brand
   accent and interaction colour on every page - eyebrows, rules, links,
   hovers, stats, the thread, card details, footer. Every accent role
   reads --aho-accent (teal). Gold is kept as --aho-warm for the film
   hero and a few editorial notes only; it is no longer an accent.
   ==================================================================== */

/* ---- 1. tokens -------------------------------------------------- */
:root{
  /* neutrals */
  --aho-void:#050505;
  --aho-ink:#0b0d0f;
  --aho-charcoal:#101112;
  --aho-graphite:#1a1d1f;
  --aho-white:#f3f1eb;
  --aho-paper:#f4f2ec;
  --aho-flax:#efe9db;
  --aho-sand:#e7dcc6;
  --aho-tan:#ded3bf;
  --aho-silver:#a8adb3;
  --aho-muted:#5d574c;          /* body text on light plates, secondary */
  --aho-ink-soft:#2a2722;       /* body text on light plates */
  /* brand accent */
  --aho-teal:#62aaa6;
  --aho-teal-light:#99c5c4;
  --aho-teal-deep:#3d6b69;      /* teal that passes contrast on flax/cream */
  --aho-teal-night:#1a2426;     /* dark teal chapter ground */
  --aho-ink-teal:#0e1817;       /* near-black teal, for closing passages */
  /* reserved warm note (film hero, editorial italics) - not an accent */
  --aho-gold:#c9a06a;
  --aho-gold-light:#e3c894;
  --aho-gold-deep:#8f6a33;
  --aho-warm:var(--aho-gold);
  /* hairlines */
  --aho-hair:rgba(243,241,235,0.1);
  --aho-hair-strong:rgba(243,241,235,0.18);
  --aho-hair-light:rgba(21,19,15,0.12);
  --aho-hair-light-strong:rgba(21,19,15,0.2);
  /* accent roles */
  --aho-accent:var(--aho-teal);
  --aho-accent-light:var(--aho-teal-light);
  --aho-accent-deep:var(--aho-teal-deep);
  --aho-accent-soft:rgba(98,170,166,0.38);
  --aho-accent-tint:rgba(98,170,166,0.12);
  --aho-accent-ink:#0b1514;
  --aho-rule:rgba(98,170,166,0.32);          /* teal hairline for section rules */
  --aho-rule-light:rgba(61,107,105,0.35);   /* same, on light plates */
  /* type */
  --aho-font-h:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --aho-font-b:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-xs:0.6875rem;                          /* 11 · eyebrows, meta */
  --t-sm:0.8125rem;                          /* 13 · captions, buttons, nav */
  --t-base:1rem;                             /* 16 · body */
  --t-md:1.125rem;                           /* 18 · lead */
  --t-lg:clamp(1.25rem,1.6vw,1.5rem);        /* 20–24 · h4 / pull */
  --t-h3:clamp(1.5rem,2.2vw,1.9rem);         /* 24–30 */
  --t-h2:clamp(2rem,4vw,3.6rem);             /* 32–58 · chapter heads */
  --t-h1:clamp(2.5rem,5.5vw,4.6rem);         /* 40–74 · page heads */
  --t-display:clamp(3rem,7vw,6.4rem);        /* 48–102 · hero statements */
  --lh-tight:1.05; --lh-heading:1.15; --lh-body:1.65;
  --track-caps:0.16em;
  /* spacing (8px scale) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --s9:192px;
  --sec-y-sm:clamp(48px,6vw,72px);
  --sec-y:clamp(72px,9vw,120px);
  --sec-y-lg:clamp(96px,12vw,160px);
  /* layout */
  --aho-max:1280px;
  --aho-gutter:32px;
  --max-prose:760px;
  --max-form:640px;
  --nav-h:72px;
  --plate-g:clamp(10px,1.4vw,22px);
  --plate-r:clamp(16px,2vw,30px);
  /* radii */
  --r-ctl:3px;
  --r-card:8px;
  --r-img:calc(var(--plate-r)*0.55);
  --r-pill:999px;
  /* shadows */
  --shadow-plate:0 30px 80px rgba(0,0,0,0.45);
  --shadow-card-light:0 12px 32px rgba(21,19,15,0.08);
  --shadow-float:0 18px 44px rgba(0,0,0,0.45);
  /* motion */
  --aho-ease:cubic-bezier(0.22,1,0.36,1);
}
@media(max-width:900px){:root{--aho-gutter:24px;}}
@media(max-width:560px){:root{--aho-gutter:20px;}}

/* ---- 2. base --------------------------------------------------- */
button,input,select,textarea{font:inherit;letter-spacing:inherit;}
button{color:inherit;}
img,video,svg{max-width:100%;}
img{height:auto;}
:focus-visible{outline:2px solid var(--aho-accent);outline-offset:3px;}
.aho-skip{position:absolute;left:var(--aho-gutter);top:-100px;z-index:200;padding:12px 18px;border-radius:var(--r-ctl);
  background:var(--aho-accent);color:var(--aho-accent-ink);font-family:var(--aho-font-b);font-size:var(--t-sm);font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;transition:top .2s;}
.aho-skip:focus-visible{top:calc(var(--nav-h) + 12px);}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ---- 3. typography roles ------------------------------------------
   Serif is for feature headings (h1, h2). Everything smaller is sans,
   as are navigation, buttons and body. Heading lines are balanced so
   the last line never carries one short word. */
body{font-family:var(--aho-font-b);font-size:var(--t-base);line-height:var(--lh-body);font-weight:400;-webkit-font-smoothing:antialiased;}
h1,h2{font-family:var(--aho-font-h);font-weight:400;line-height:var(--lh-heading);letter-spacing:-0.01em;}
h3,h4,h5,h6{font-family:var(--aho-font-b);font-weight:500;line-height:1.25;}
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}
small,.small{font-size:var(--t-sm);}
.eyebrow{display:block;font-family:var(--aho-font-b);font-size:var(--t-xs);font-weight:600;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--aho-accent);margin:0 0 12px;}
.eyebrow--muted{color:var(--aho-silver);}
.eyebrow--rule::before{content:'';display:inline-block;width:24px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px;opacity:.7;}
.stat{display:grid;gap:6px;}
.stat b{display:block;font-family:var(--aho-font-h);font-weight:400;font-size:var(--t-h2);line-height:1;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;color:var(--aho-accent);}
/* statistics: the number carries the teal, the label stays neutral */
.abx-stat-n,.adv-stat-c,.cl-stat-v,.cl-num,.hero-stat-number,.stat-card-value,.status-value,.portal-card-num,.obligation-number,.commit-num,.ab-impact-cell-num,.num-n{color:var(--aho-accent);}
.plate--flax .abx-stat-n,.plate--cream .abx-stat-n,.plate--earth .abx-stat-n,.ch-flax .abx-stat-n,.cl-flax .cl-stat-v,.cl-cream .cl-stat-v,.cl-earth .cl-stat-v,.cl-flax .cl-num,.cl-earth .cl-num{color:var(--aho-accent-deep);}
/* the 78.5% on About's flax chapter reads in ink (CEO, 2026-09-15); its % keeps the accent */
.abx2-city-stat .abx-stat-n{color:var(--aho-ink);}
/* rules and text links */
hr{border:0;border-top:1px solid var(--aho-rule);}
a:not([class]){color:var(--aho-accent);text-decoration-color:var(--aho-accent-soft);text-underline-offset:3px;transition:text-decoration-color .2s;}
a:not([class]):hover{text-decoration-color:var(--aho-accent);}
.stat span{font-size:var(--t-sm);color:var(--aho-silver);max-width:26ch;line-height:1.5;}

/* ---- 4. the wordmark, one asset, any colour ----------------------
   The mono SVG paints in currentColor with the lighter halves at 0.72
   alpha, so used as a mask it keeps the mark's two-tone split whatever
   colour the element carries. Height sets the size; width follows the
   mark's own ratio. On hover the header and footer marks crossfade
   (300ms) into the two-tone brand-colour wordmark - the mark itself is
   never redrawn (CEO, 2026-09-15). */
.aho-mark{
  display:inline-block;height:1em;aspect-ratio:731.21/250.10;vertical-align:middle;
  background:currentColor;
  -webkit-mask:url(brand/aho-wordmark.svg) center/contain no-repeat;
          mask:url(brand/aho-wordmark.svg) center/contain no-repeat;
}
.aho-mark--colour{-webkit-mask:none;mask:none;
  background:url(brand/aho-wordmark-colour.svg) center/contain no-repeat;}

/* ---- 5. header --------------------------------------------------
   Transparent over a hero, veiled once scrolled. Pages with no hero to
   absorb the bar carry <html class="aho-nav-solid"> (stamped by
   scripts/propagate-chrome.js) and get a solid bar + body offset. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 var(--aho-gutter);font-family:var(--aho-font-b);
  transition:background .4s var(--aho-ease),border-color .4s var(--aho-ease);}
.nav *{box-sizing:border-box;}
.nav.scrolled,html.aho-nav-solid .nav{background:rgba(5,8,12,0.86);border-bottom:1px solid var(--aho-hair);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
html.aho-nav-solid body{padding-top:var(--nav-h);}
.nav-inner{max-width:var(--aho-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:var(--s3);height:var(--nav-h);}
.nav-logo{grid-column:1;justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin-left:-4px;position:relative;
  color:var(--aho-white);font-size:26px;line-height:1;text-decoration:none;}
.nav-logo .aho-mark{height:26px;transition:opacity .3s var(--aho-ease);}
.nav-logo::after{content:'';position:absolute;left:4px;right:4px;top:50%;height:26px;transform:translateY(-50%);
  background:url(brand/aho-wordmark-colour.svg) center/contain no-repeat;opacity:0;transition:opacity .3s var(--aho-ease);pointer-events:none;}
.nav-logo:hover .aho-mark,.nav-logo:focus-visible .aho-mark{opacity:0;}
.nav-logo:hover::after,.nav-logo:focus-visible::after{opacity:1;}
.nav-links{grid-column:2;justify-self:center;display:flex;align-items:center;gap:var(--s4);list-style:none;margin:0;padding:0;}
.nav-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:var(--s3);}
.nav-parent > a,.nav-cta-wrap{display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:opacity .2s;}
/* Bilingual swap. Both labels occupy ONE grid cell sized to the wider
   of the two, so the bar cannot reflow when the text changes. Hover is
   scoped to each item's OWN trigger element only. */
.bil{display:grid;position:relative;}
.bil::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--aho-accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--aho-ease);}
.nav-parent>a:hover .bil::after,.nav-parent>a:focus-visible .bil::after{transform:scaleX(1);}
.nav-parent>a:hover .bil-mi,.nav-parent>a:focus-visible .bil-mi{color:var(--aho-accent);}
.bil-en,.bil-mi{grid-area:1/1;transition:opacity .32s ease,transform .32s ease,color .25s;}
.bil-en{font-size:var(--t-sm);font-weight:500;letter-spacing:0.04em;color:var(--aho-white);}
.bil-mi{font-size:var(--t-sm);font-weight:400;letter-spacing:0.04em;color:var(--aho-accent-light);font-style:italic;opacity:0;transform:translateY(3px);}
.nav-parent>a:hover .bil-en,.nav-sub a:hover .bil-en,.nav-cta-wrap:hover .bil-en{opacity:0;transform:translateY(-3px);}
.nav-parent>a:hover .bil-mi,.nav-sub a:hover .bil-mi,.nav-cta-wrap:hover .bil-mi{opacity:1;transform:translateY(0);}
.nav-caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.55;transition:transform .2s,color .25s;color:var(--aho-white);}
.nav-parent>a:hover .nav-caret,.nav-parent.is-expanded .nav-caret{color:var(--aho-accent);opacity:1;}
.nav-parent .nav-sub[hidden]{display:none;}
.nav-parent .nav-sub{list-style:none;margin:0;padding:0;z-index:110;}
.nav-parent .nav-sub a{display:block;padding:8px 20px;text-decoration:none;white-space:nowrap;}
.nav-parent.is-active > a .bil-en{color:var(--aho-accent);}
.nav-parent.is-expanded .nav-caret{transform:rotate(180deg);}
.nav-social{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none;}
.nav-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:rgba(243,241,235,0.72);transition:color .25s,background .25s;}
.nav-social a:hover,.nav-social a:focus-visible{color:var(--aho-accent);background:rgba(243,241,235,0.06);}
.nav-social svg{width:17px;height:17px;fill:currentColor;}
/* Contact pill: neutral at rest, text + border + arrow go teal on hover */
.nav-cta-wrap{background:transparent;border:1px solid var(--aho-hair-strong);color:var(--aho-white);padding:0 16px 0 18px;min-height:40px;border-radius:var(--r-ctl);
  transition:color .25s,border-color .25s;gap:8px;justify-content:center;text-align:center;}
.nav-cta-wrap .bil{justify-items:center;}
.nav-cta-wrap .bil::after{display:none;}
.nav-cta-wrap .bil-en,.nav-cta-wrap .bil-mi{color:inherit;}
.nav-cta-wrap::after{content:'→';font-size:var(--t-sm);line-height:1;color:var(--aho-silver);transition:color .25s,transform .25s var(--aho-ease);}
.nav-cta-wrap:hover,.nav-cta-wrap:focus-visible{color:var(--aho-accent);border-color:var(--aho-accent);}
.nav-cta-wrap:hover::after,.nav-cta-wrap:focus-visible::after{color:var(--aho-accent);transform:translateX(3px);}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-right:-8px;background:none;border:0;cursor:pointer;padding:0;align-items:center;}
.nav-burger span{display:block;width:22px;height:1.5px;background:var(--aho-white);transition:transform .25s var(--aho-ease),opacity .2s,background .25s;}
.nav-burger:hover span,.nav-burger:focus-visible span{background:var(--aho-accent);}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-drawer-foot{display:none;}

/* desktop: full-width dropdown panel below the bar */
@media(min-width:901px){
  .nav-parent .nav-sub{
    position:absolute;top:100%;left:0;right:0;margin:0;max-width:none;
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;
    gap:clamp(40px,6vw,112px);
    padding:30px max(var(--aho-gutter),calc((100% - var(--aho-max))/2 + var(--aho-gutter))) 34px;
    background:rgba(4,7,11,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--aho-hair);box-shadow:0 30px 60px rgba(0,0,0,0.42);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  }
  .nav-parent .nav-sub[hidden]{display:flex;}
  .nav-parent .nav-sub.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .2s ease,transform .2s ease;}
  .nav-parent .nav-sub:has(li:nth-child(4)){justify-content:space-between;gap:var(--s2);}
  .nav-parent .nav-sub li{flex:0 1 auto;min-width:0;}
  .nav-parent .nav-sub a{padding:6px 2px;position:relative;}
  .nav-parent .nav-sub a::after{content:'';position:absolute;left:2px;right:2px;bottom:-2px;height:1px;background:var(--aho-accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
  .nav-parent .nav-sub a:hover::after,.nav-parent .nav-sub a:focus-visible::after{transform:scaleX(1);}
  /* described items (Portals): label with its underline, a muted line beneath */
  .nav-parent .nav-sub--described,.nav-parent .nav-sub--described:has(li:nth-child(4)){align-items:flex-start;justify-content:center;gap:clamp(28px,4vw,72px);}
  .nav-parent .nav-sub--described li{flex:0 1 240px;}
  .nav-parent .nav-sub--described a{display:grid;gap:8px;padding:4px 2px;}
  .nav-parent .nav-sub--described a::after{display:none;}
  .nav-parent .nav-sub--described a .bil{width:max-content;}
  .nav-parent .nav-sub--described a:hover .bil::after,.nav-parent .nav-sub--described a:focus-visible .bil::after{transform:scaleX(1);}
  .nav-sub-desc{display:block;font-size:var(--t-xs);font-weight:400;letter-spacing:0;line-height:1.55;color:var(--aho-silver);white-space:normal;max-width:28ch;}
}
/* compact panels (three items or fewer, e.g. Products and Portals): a
   panel sized to its content, centred under its own trigger, with each
   option as a small card. The full-width bar above stays for Learn. */
@media(min-width:901px){
  .nav-parent:has(> .nav-sub--compact){position:relative;}
  .nav-parent .nav-sub--compact,.nav-parent .nav-sub--compact:has(li:nth-child(4)){
    left:50%;right:auto;top:calc(50% + var(--nav-h) / 2);width:max-content;max-width:min(92vw,760px);
    transform:translate(-50%,-6px);padding:14px;gap:6px;justify-content:center;align-items:stretch;
    border:1px solid var(--aho-hair);border-top:0;border-radius:0 0 var(--r-card) var(--r-card);
    box-shadow:0 30px 60px rgba(0,0,0,0.42);}
  .nav-parent .nav-sub--compact.is-open{transform:translate(-50%,0);}
  .nav-parent .nav-sub--compact li{flex:0 1 232px;min-width:200px;}
  .nav-parent .nav-sub--compact li:only-child{flex-basis:300px;}
  .nav-parent .nav-sub--compact a{display:grid;gap:8px;padding:18px 20px;border-radius:var(--r-card);border:1px solid transparent;
    transition:background .2s,border-color .2s;height:100%;}
  .nav-parent .nav-sub--compact a:hover,.nav-parent .nav-sub--compact a:focus-visible{background:rgba(243,241,235,0.04);border-color:var(--aho-hair);}
  .nav-parent .nav-sub--compact a::after{display:none;}
  .nav-parent .nav-sub--compact .bil{width:max-content;}
  .nav-parent .nav-sub--compact .bil-en{font-size:0.9375rem;font-weight:500;letter-spacing:0.01em;}
  .nav-parent .nav-sub--compact .bil-mi{font-size:0.9375rem;letter-spacing:0.01em;}
  .nav-parent .nav-sub--compact .nav-sub-desc{max-width:26ch;}
  .nav-parent .nav-sub--compact li:only-child .nav-sub-desc{max-width:34ch;}
  .nav-parent .nav-sub--compact li:only-child a{text-align:center;justify-items:center;padding:22px 26px;}
  .nav-parent .nav-sub--compact li:only-child .bil{justify-items:center;}
  .nav-parent .nav-sub--compact li:only-child .bil::after{left:20%;right:20%;}
}
@media(min-width:901px) and (max-width:1180px){
  .nav-parent .nav-sub--described{gap:var(--s3);}
  .nav-parent .nav-sub--described li{flex-basis:200px;}
  .nav-sub-desc{font-size:0.6875rem;}
}
@media(min-width:901px) and (max-width:1180px){
  .nav-parent .nav-sub{padding-top:24px;padding-bottom:28px;gap:clamp(18px,2.4vw,40px);}
  .nav-parent .nav-sub:has(li:nth-child(4)){gap:var(--s1);}
  .nav-parent .nav-sub .bil-en,.nav-parent .nav-sub .bil-mi{font-size:var(--t-xs);letter-spacing:0.02em;}
}

/* mobile: an accordion (CEO, 2026-09-22). The drawer opens on the
   top-level items; each group expands on tap to reveal its pages,
   indented behind a hairline, then the social row and the wordmark as
   the drawer's own footer. */
@media(max-width:900px){
  .nav-social{display:none;}
  .nav-logo .aho-mark{height:22px;}
  .nav-burger{display:flex;}
  .nav .bil-mi{display:none;}
  .nav-parent>a:hover .bil-en,.nav-sub a:hover .bil-en,.nav-cta-wrap:hover .bil-en{opacity:1;transform:none;}
  .bil::after{display:none;}
  .nav-cta-wrap{padding:0 16px;min-height:40px;white-space:nowrap;}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:auto;bottom:auto;width:100%;height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));
    justify-self:start;align-self:start;background:var(--aho-void);flex-direction:column;align-items:stretch;gap:0;
    padding:var(--s2) var(--aho-gutter) var(--s5);overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);transition:transform .28s var(--aho-ease),visibility 0s linear .28s;z-index:90;visibility:hidden;}
  .nav-links.is-open{transform:translateX(0);visibility:visible;transition:transform .28s var(--aho-ease);}
  .nav-parent{border-bottom:1px solid var(--aho-hair);padding:0;}
  .nav-parent > a{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:60px;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .nav-parent > a .bil-en{font-size:1.0625rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--aho-white);transition:color .2s;}
  .nav-parent.is-active > a .bil-en,.nav-parent.is-expanded > a .bil-en{color:var(--aho-accent);}
  .nav-parent > a:active .bil-en{color:var(--aho-accent);}
  /* chevron: the whole row is the control, the chevron only shows state */
  .nav-caret{display:block;width:9px;height:9px;flex-shrink:0;border:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:translateY(-3px) rotate(45deg);opacity:.75;color:var(--aho-silver);margin-right:4px;transition:transform .3s var(--aho-ease),color .25s;}
  .nav-parent.is-expanded .nav-caret{transform:translateY(2px) rotate(-135deg);color:var(--aho-accent);opacity:1;}
  .nav-parent .nav-sub,.nav-parent .nav-sub[hidden]{position:static;display:flex;flex-direction:column;flex-wrap:nowrap;transform:none;margin:0;max-width:none;min-width:0;
    background:none;backdrop-filter:none;border:0;box-shadow:none;border-radius:0;align-items:stretch;justify-content:flex-start;gap:0;padding:0;opacity:1;visibility:visible;pointer-events:auto;
    max-height:0;overflow:hidden;transition:max-height .35s var(--aho-ease),padding .35s var(--aho-ease);}
  .nav-parent.is-expanded .nav-sub{padding-bottom:var(--s2);}
  .nav-parent .nav-sub li{border-top:0;}
  .nav-parent .nav-sub a{display:flex;align-items:center;min-height:50px;padding:0 0 0 18px;white-space:normal;border-left:1px solid var(--aho-hair);margin-left:2px;}
  .nav-parent .nav-sub a:active,.nav-parent .nav-sub a[aria-current="page"]{border-left-color:var(--aho-accent);}
  .nav-parent .nav-sub a .bil-en{font-size:var(--t-base);font-weight:400;letter-spacing:0;color:var(--aho-white);}
  .nav-sub-desc{display:none;}
  .nav-parent .nav-sub a[aria-current="page"] .bil-en{color:var(--aho-accent);}
  .nav-drawer-foot{display:block;margin-top:auto;padding-top:var(--s5);}
  .nav-drawer-foot .nav-drawer-social{display:flex;gap:6px;margin:0 0 var(--s4);padding:0;list-style:none;}
  .nav-drawer-foot .nav-drawer-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--aho-hair);color:rgba(243,241,235,0.72);}
  .nav-drawer-foot .nav-drawer-social a:hover,.nav-drawer-foot .nav-drawer-social a:focus-visible{color:var(--aho-accent);border-color:var(--aho-accent-soft);}
  .nav-drawer-foot .nav-drawer-social svg{width:16px;height:16px;fill:currentColor;}
  .nav-drawer-mark{display:inline-flex;align-items:center;color:var(--aho-white);font-size:28px;line-height:1;text-decoration:none;padding:4px 0;}
  .nav-drawer-mark .aho-mark{height:28px;}
  .nav-drawer-line{margin:10px 0 0;font-size:var(--t-xs);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--aho-silver);}
}
@media(prefers-reduced-motion:reduce){
  .nav-parent .nav-sub,.bil-en,.bil-mi,.nav-links,.nav-caret{transition:none !important;}
  .nav-parent .nav-sub,.bil-en,.bil-mi,.nav-links{transform:none !important;}
  .nav-links:not(.is-open){transform:translateX(100%) !important;}
  .nav-parent .nav-sub a::after{transition:none !important;}
}


/* Photo and film heroes carry no teal (CEO, 2026-09-15): over photography
   the eyebrow, thread line, te reo line, wordmark and outline button read
   in white so nothing competes with the image. The accent returns from
   the first chapter down. */
html:not(.aho-nav-solid) .hero,.abx2-hero,.og-hero,.tm-hero,.th-hero,.cl-hero,.ql-hero,.pr-hero{
  --aho-accent:var(--aho-white);--aho-accent-light:var(--aho-white);--aho-accent-deep:var(--aho-white);
  --aho-accent-soft:rgba(243,241,235,0.45);--aho-accent-tint:rgba(243,241,235,0.1);--aho-accent-ink:var(--aho-ink);
  --gold:var(--aho-white);--gold-light:var(--aho-white);--teal:var(--aho-white);--teal-light:var(--aho-white);--teal-deep:var(--aho-white);
  --botanical:var(--aho-white);--celestial:var(--aho-white);}

/* ---- 6. plates & sections -------------------------------------------
   Inset rounded plates on the void canvas (baseline addendum). Tones
   are the only allowed light/dark chapter grounds. */
.aho-wrap{width:100%;max-width:var(--aho-max);margin:0 auto;padding:0 var(--aho-gutter);}
.aho-prose{max-width:var(--max-prose);}
.plate{margin:0 var(--plate-g);border-radius:var(--plate-r);overflow:hidden;position:relative;}
.plate--flax{background:var(--aho-flax);color:var(--aho-ink-soft);}
.plate--cream{background:var(--aho-paper);color:var(--aho-ink-soft);}
.plate--earth{background:var(--aho-tan);color:var(--aho-ink-soft);}
.plate--ink{background:var(--aho-charcoal);color:var(--aho-white);}
.plate--teal-night{background:var(--aho-teal-night);color:var(--aho-white);}
.plate--flax .eyebrow,.plate--cream .eyebrow,.plate--earth .eyebrow{color:var(--aho-accent-deep);}
.plate--flax .stat span,.plate--cream .stat span,.plate--earth .stat span{color:var(--aho-muted);}
/* On light grounds the accent is used for text (eyebrows, links, small
   labels), where mid gold / light teal fail contrast on flax. Inside any
   light chapter the page-level accent names resolve to the deep accent;
   filled buttons keep the true accent through .btn rules above. */
.plate--flax,.plate--cream,.plate--earth,.ch-flax,.cl-flax,.cl-cream,.cl-earth,.tm-flax,.og-sec.ch-flax,
.section-white,.section-offwhite,.sec-white,.sec-offwhite,.news-section,.newsletter-section,.filter-bar,.contacts-section,.form-section,
.legal-body,.portal-contents,.access-form-section,.section.why,.section.markets,.section.form-section,.portal-main,.content{
  --gold:var(--aho-accent-deep);--gold-light:var(--aho-accent-deep);--teal:var(--aho-accent-deep);--teal-light:var(--aho-accent-deep);
  --aho-accent-on:var(--aho-accent-deep);--aho-rule:var(--aho-rule-light);}
.sec{padding:var(--sec-y) 0;}
.sec--sm{padding:var(--sec-y-sm) 0;}
.sec--lg{padding:var(--sec-y-lg) 0;}
.hairline{border:0;border-top:1px solid var(--aho-rule);margin:var(--s5) 0;}
.plate--flax .hairline,.plate--cream .hairline,.plate--earth .hairline{border-top-color:var(--aho-rule-light);}
/* closing passages sit on the near-black teal ground so the last chapter of every page carries the brand */
.connect-sec,.abx-tuhono,.qc-close,.th-close,.cl-close,.wn-close,.location-section,.compliance-note{background:var(--aho-ink-teal) !important;}
.plate--teal-night{background:var(--aho-teal-night);}

/* ---- 7. buttons ------------------------------------------------
   One button family everywhere: 48px, 13px/600 caps, 3px radius.
   Colour roles read the page accent so a gold page never shows a teal
   primary beside gold labels. Legacy class names are mapped below so
   pages keep working while they are migrated. */
.btn,.btn-primary,.btn-outline,.btn-gold,.btn-teal,.btn-teal-full,.btn-teal-outline,.th-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;
  border:1px solid transparent;border-radius:var(--r-ctl);
  font-family:var(--aho-font-b);font-size:var(--t-sm);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,filter .2s;}
.btn--sm,.btn-sm{min-height:40px;padding:0 18px;font-size:0.75rem;}
.btn--lg,.btn-primary-lg{min-height:54px;padding:0 32px;}
.btn--full,.btn-full,.btn-teal-full{width:100%;}
/* primary: premium and understated at rest (cream on dark, ink on light), teal fill on hover */
.btn--primary,.btn-primary,.btn-teal,.btn-teal-full,.btn-submit{background:var(--aho-white);border-color:var(--aho-white);color:var(--aho-ink);}
.btn--primary:hover,.btn-primary:hover,.btn-teal:hover,.btn-teal-full:hover,.btn-submit:hover,
.btn--primary:focus-visible,.btn-primary:focus-visible,.btn-submit:focus-visible{background:var(--aho-accent);border-color:var(--aho-accent);color:var(--aho-accent-ink);}
/* secondary: 1px teal border, teal text, teal fill on hover */
.btn--secondary,.btn-teal-outline,.btn-gold,.th-btn{background:transparent;border-color:var(--aho-accent);color:var(--aho-accent);}
.btn--secondary:hover,.btn-teal-outline:hover,.btn-gold:hover,.th-btn:hover,
.btn--secondary:focus-visible,.btn-teal-outline:focus-visible,.btn-gold:focus-visible,.th-btn:focus-visible{background:var(--aho-accent);border-color:var(--aho-accent);color:var(--aho-accent-ink);}
/* ghost: hairline at rest, teal text + border on hover */
.btn--ghost,.btn-outline{background:transparent;border-color:var(--aho-hair-strong);color:var(--aho-white);}
.btn--ghost:hover,.btn-outline:hover,.btn--ghost:focus-visible,.btn-outline:focus-visible{border-color:var(--aho-accent);color:var(--aho-accent);}
.plate--flax .btn--primary,.plate--cream .btn--primary,.plate--earth .btn--primary,
.plate--flax .btn-primary,.plate--cream .btn-primary,.plate--earth .btn-primary,
.ch-flax .btn-primary,.cl-flax .btn-primary,.cl-cream .btn-primary,.cl-earth .btn-primary,
html.aho-nav-solid :is(.contacts-section,.news-section,.newsletter-section,.form-section,.portal-contents,.access-form-section,.section.why,.section.markets,.section.form-section,.legal-body) :is(.btn-primary,.btn--primary,.btn-submit,.btn-teal,.btn-teal-full){
  background:var(--aho-ink);border-color:var(--aho-ink);color:var(--aho-white);}
.plate--flax .btn--ghost,.plate--cream .btn--ghost,.plate--earth .btn--ghost{border-color:var(--aho-hair-light-strong);color:var(--aho-ink-soft);}
.plate--flax .btn--secondary,.plate--cream .btn--secondary,.plate--earth .btn--secondary{color:var(--aho-accent-deep);border-color:var(--aho-accent-deep);}
.btn--link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;
  font-family:var(--aho-font-b);font-size:var(--t-sm);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--aho-accent);text-decoration:none;}
.btn--link{position:relative;}
.aho-next{margin:var(--s3) 0 0;}
.btn--link::after{content:'→';transition:transform .2s var(--aho-ease);}
.btn--link::before{content:'';position:absolute;left:0;right:22px;bottom:10px;height:1px;background:var(--aho-accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--aho-ease);}
.btn--link:hover::after{transform:translateX(4px);}
.btn--link:hover::before{transform:scaleX(1);}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;}

/* ---- 8. cards, fields, notices -------------------------------------- */
.card{border:1px solid var(--aho-hair);border-radius:var(--r-card);padding:28px;background:rgba(243,241,235,0.03);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:border-color .3s;}
.card::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--aho-accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--aho-ease);}
.card:hover{border-color:var(--aho-accent-soft);}
.card:hover::before{transform:scaleX(1);}
.card > :last-child{margin-bottom:0;}
.card-cta{margin-top:auto;padding-top:8px;}
.plate--flax .card,.plate--cream .card,.plate--earth .card,.card--light{background:var(--aho-paper);border-color:var(--aho-hair-light);box-shadow:var(--shadow-card-light);}
.card h3,.card h4{margin:0;font-size:var(--t-lg);font-weight:500;line-height:1.25;}
.card p{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--aho-silver);}
.plate--flax .card p,.plate--cream .card p,.plate--earth .card p,.card--light p{color:var(--aho-muted);}
.icon{width:20px;height:20px;stroke:var(--aho-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0;}
.plate--flax .icon,.plate--cream .icon,.plate--earth .icon{stroke:var(--aho-accent-deep);}
.field{display:grid;gap:8px;}
.field label{font-size:var(--t-xs);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--aho-silver);}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--aho-hair-strong);border-radius:var(--r-ctl);
  background:rgba(243,241,235,0.04);color:var(--aho-white);font-size:var(--t-base);}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--aho-accent);outline-offset:1px;border-color:var(--aho-accent);}
.field small{font-size:0.75rem;color:var(--aho-silver);}
.plate--flax .field input,.plate--cream .field input,.plate--earth .field input,
.plate--flax .field select,.plate--cream .field select,.plate--earth .field select,
.plate--flax .field textarea,.plate--cream .field textarea,.plate--earth .field textarea{background:#fff;color:var(--aho-ink);border-color:var(--aho-hair-light-strong);}
.plate--flax .field label,.plate--cream .field label,.plate--earth .field label,.plate--flax .field small,.plate--cream .field small,.plate--earth .field small{color:var(--aho-muted);}
.notice{border:1px solid var(--aho-accent-soft);border-left-width:3px;border-radius:var(--r-ctl);padding:16px 20px;background:var(--aho-accent-tint);font-size:var(--t-sm);line-height:1.6;}
.notice b{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--aho-accent);margin-bottom:6px;}
.plate--flax .notice b,.plate--cream .notice b,.plate--earth .notice b{color:var(--aho-accent-deep);}

/* ---- 9. starfield (shared decorative canvas) ---------------------- */
.starfield{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.st{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(243,241,235,0.95) 0%,rgba(243,241,235,0) 70%);
  animation:twinkle var(--tw,5s) ease-in-out infinite;animation-delay:var(--td,0s);}
.st.blue{background:radial-gradient(circle,rgba(141,175,199,0.95) 0%,rgba(141,175,199,0) 70%);}
@keyframes twinkle{0%,100%{opacity:var(--o1,0.25);}50%{opacity:var(--o2,0.85);}}

/* ---- 10. footer ------------------------------------------------- 
   Four even columns on desktop: the brand, then Explore, Products and
   Connect. Everything in it comes from nav-config.js, so the staged-launch
   flags decide which portal links appear. The thread closes the page: a
   teal rule across the top and one fibre dropping into it. */
.aho-footer{position:relative;background:var(--aho-ink-teal);color:var(--aho-white);font-family:var(--aho-font-b);padding:var(--s7) 0 var(--s5);overflow:hidden;}
.aho-footer *{box-sizing:border-box;}
.aho-footer a{color:inherit;text-decoration:none;}
.aho-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--aho-rule) 20%,var(--aho-rule) 80%,transparent);}
.aho-footer::after{content:'';position:absolute;top:0;left:50%;width:1px;height:56px;background:linear-gradient(to bottom,var(--aho-accent),transparent);opacity:.8;}
.aho-footer-cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);row-gap:var(--s5);padding-bottom:var(--s6);border-bottom:1px solid var(--aho-rule);}
/* brand */
.aho-footer-brand{max-width:36ch;}
.aho-footer-logo{display:flex;width:max-content;align-items:center;min-height:44px;color:var(--aho-white);font-size:30px;line-height:1;margin:0 0 var(--s3);position:relative;}
.aho-footer-logo .aho-mark{height:30px;transition:opacity .3s var(--aho-ease);}
.aho-footer-logo::after{content:'';position:absolute;left:0;right:0;top:50%;height:30px;transform:translateY(-50%);background:url(brand/aho-wordmark-colour.svg) center/contain no-repeat;opacity:0;transition:opacity .3s var(--aho-ease);pointer-events:none;}
.aho-footer-logo:hover .aho-mark,.aho-footer-logo:focus-visible .aho-mark{opacity:0;}
.aho-footer-logo:hover::after,.aho-footer-logo:focus-visible::after{opacity:1;}
.aho-footer-intro{margin:0 0 var(--s3);font-size:0.9375rem;line-height:1.7;color:var(--aho-silver);}
.aho-footer-badge{display:inline-block;width:max-content;font-size:0.625rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--aho-accent);border:1px solid var(--aho-accent);border-radius:2px;padding:6px 12px;margin:0 0 var(--s2);}
.aho-footer-place{margin:0;font-size:var(--t-xs);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--aho-silver);}
/* columns: heading, then links on one rhythm */
.aho-footer-col .aho-footer-h{margin:0 0 var(--s2);padding:12px 0;font-family:var(--aho-font-b);font-size:var(--t-xs);font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--aho-accent);border-bottom:1px solid var(--aho-rule);}
.aho-footer-col ul{list-style:none;margin:0;padding:0;}
.aho-footer-col li{margin:0;}
.aho-footer-col ul:not(.aho-footer-social) li a{display:inline-block;padding:7px 0;font-size:0.9375rem;line-height:1.5;color:var(--aho-white);transition:color .25s;position:relative;}
.aho-footer-col ul:not(.aho-footer-social) li a::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--aho-accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--aho-ease);}
.aho-footer-col ul:not(.aho-footer-social) li a:hover::after,.aho-footer-col ul:not(.aho-footer-social) li a:focus-visible::after{transform:scaleX(1);}
.aho-footer-col ul:not(.aho-footer-social) li a:hover,.aho-footer-col ul:not(.aho-footer-social) li a:focus-visible{color:var(--aho-accent);}
.aho-footer-social{display:flex;gap:6px;margin:var(--s3) 0 0;padding:0;list-style:none;}
.aho-footer-social a{display:inline-flex !important;align-items:center;justify-content:center;width:44px;height:44px;min-height:0;padding:0 !important;border-radius:50%;border:1px solid var(--aho-hair);color:rgba(243,241,235,0.72);line-height:0;transition:color .25s,border-color .25s;}
.aho-footer-social a::after{display:none;}
.aho-footer-social a:hover,.aho-footer-social a:focus-visible{color:var(--aho-accent);border-color:var(--aho-accent-soft);}
.aho-footer-social svg{width:16px;height:16px;fill:currentColor;}
/* bottom bar */
.aho-footer-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s4);}
.aho-footer-copy{font-size:0.75rem;line-height:2.2;color:rgba(168,173,179,0.7);}
.aho-footer-copy a{display:inline-block;padding:4px 2px;text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
.aho-footer-copy a:hover,.aho-footer-copy a:focus-visible{color:var(--aho-accent);}
.aho-footer-legal{font-size:var(--t-xs);line-height:1.6;color:rgba(168,173,179,0.55);max-width:52ch;text-align:right;}
/* tablet: brand across the top, three columns beneath */
@media(max-width:1000px){
  .aho-footer{padding:var(--s7) 0 var(--s5);}
  .aho-footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s5);}
  .aho-footer-brand{grid-column:1 / -1;max-width:44ch;}
  .aho-footer-legal{text-align:left;}
}
/* phone: brand first, Explore and Products side by side, Connect full width */
@media(max-width:640px){
  .aho-footer{padding:var(--s6) 0 calc(var(--s4) + 64px);} /* room for the floating Connect */
  .aho-footer::after{height:36px;}
  .aho-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3);row-gap:var(--s4);padding-bottom:var(--s4);}
  .aho-footer-brand{grid-column:1 / -1;max-width:none;}
  .aho-footer-logo{margin-bottom:var(--s2);}
  .aho-footer-intro{font-size:var(--t-sm);margin-bottom:var(--s2);}
  .aho-footer-col .aho-footer-h{padding:8px 0;margin-bottom:6px;}
  .aho-footer-col ul:not(.aho-footer-social) li a{display:flex;align-items:center;min-height:44px;padding:0;font-size:var(--t-base);}
  .aho-footer-col ul:not(.aho-footer-social) li a::after{bottom:8px;}
  .aho-footer-col--connect{grid-column:1 / -1;}
  .aho-footer-col--connect ul:not(.aho-footer-social){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3);}
  /* the icon row sits centred between its own hairline and the bottom bar's: 24px above, 24px below */
  .aho-footer-col--connect .aho-footer-social{display:flex;flex-wrap:nowrap;gap:8px;margin:var(--s3) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--aho-rule);}
  .aho-footer-cols{padding-bottom:var(--s3);}
  .aho-footer-social li{flex:0 0 auto;}
  .aho-footer-social a{width:44px;height:44px;}
  .aho-footer-bottom{flex-direction:column;gap:var(--s2);padding-top:var(--s3);}
  .aho-footer-copy{line-height:2;}
}
@media(max-width:400px){
  .aho-footer-col--connect ul:not(.aho-footer-social){grid-template-columns:minmax(0,1fr);}
}

/* ---- 11. floating "Connect with us" ------------------------------------
   Bottom centre, appears once the visitor has scrolled. Opens a sheet
   with the ways in. Sits above the page but below the open nav drawer. */
.aho-connect{position:fixed;left:50%;bottom:22px;z-index:95;transform:translate(-50%,24px);opacity:0;pointer-events:none;
  transition:opacity .4s var(--aho-ease),transform .4s var(--aho-ease);}
.aho-connect.is-shown{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
.aho-connect-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px 0 18px;border-radius:var(--r-pill);border:1px solid var(--aho-accent);white-space:nowrap;
  background:rgba(11,13,15,0.82);color:var(--aho-white);font-family:var(--aho-font-b);font-size:var(--t-sm);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
  cursor:pointer;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-float);
  transition:background .25s,border-color .25s,color .25s,transform .25s var(--aho-ease);}
.aho-connect-btn svg{width:18px;height:18px;fill:none;stroke:var(--aho-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s;}
.aho-connect-btn:hover,.aho-connect-btn:focus-visible{background:var(--aho-accent);border-color:var(--aho-accent);color:var(--aho-accent-ink);transform:translateY(-2px);}
.aho-connect-btn:hover svg,.aho-connect-btn:focus-visible svg{stroke:var(--aho-accent-ink);}
.aho-connect-btn:focus-visible{outline:2px solid var(--aho-white);outline-offset:3px;}

.aho-sheet{position:fixed;inset:0;z-index:120;display:grid;place-items:end center;padding:16px;
  background:rgba(4,6,8,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--aho-ease),visibility 0s linear .3s;}
.aho-sheet.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--aho-ease);}
.aho-sheet-panel{width:min(100%,520px);border-radius:18px;border:1px solid var(--aho-hair);background:var(--aho-charcoal);color:var(--aho-white);
  padding:28px 28px 22px;box-shadow:0 40px 90px rgba(0,0,0,0.6);font-family:var(--aho-font-b);
  transform:translateY(24px);transition:transform .35s var(--aho-ease);}
.aho-sheet.is-open .aho-sheet-panel{transform:translateY(0);}
.aho-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;}
.aho-sheet-eyebrow{display:block;font-size:0.625rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--aho-accent);margin-bottom:8px;}
.aho-sheet-title{margin:0;font-family:var(--aho-font-h);font-weight:400;font-size:1.75rem;line-height:1.1;letter-spacing:-0.01em;color:var(--aho-white);}
.aho-sheet-close{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--aho-hair);background:transparent;color:var(--aho-white);cursor:pointer;display:grid;place-items:center;transition:border-color .25s,color .25s;}
.aho-sheet-close:hover,.aho-sheet-close:focus-visible{border-color:var(--aho-accent);color:var(--aho-accent);}
.aho-sheet-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;fill:none;}
.aho-sheet-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.aho-sheet-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-radius:10px;border:1px solid transparent;
  color:var(--aho-white);text-decoration:none;transition:background .2s,border-color .2s;}
.aho-sheet-list a:hover,.aho-sheet-list a:focus-visible{background:rgba(243,241,235,0.05);border-color:var(--aho-hair);}
.aho-sheet-list b{display:block;font-weight:600;font-size:0.9375rem;letter-spacing:0.01em;}
.aho-sheet-list small{display:block;margin-top:3px;font-size:0.75rem;color:var(--aho-silver);}
.aho-sheet-list svg{flex-shrink:0;width:16px;height:16px;stroke:var(--aho-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none;
  transform:translateX(-4px);opacity:0.6;transition:transform .25s var(--aho-ease),opacity .25s;}
.aho-sheet-list a:hover svg,.aho-sheet-list a:focus-visible svg{transform:none;opacity:1;}
.aho-sheet-list a.is-current{border-color:var(--aho-accent-soft);}
.aho-sheet-list a:focus-visible,.aho-sheet-close:focus-visible{outline:2px solid var(--aho-accent);outline-offset:2px;}
@media(min-width:640px){.aho-sheet{place-items:center;}}
@media(max-width:560px){
  .aho-connect{bottom:14px;}
  .aho-connect-btn{padding:0 18px 0 16px;font-size:0.75rem;}
  .aho-sheet-panel{padding:22px 18px 16px;border-radius:16px;}
}
body.aho-sheet-open{overflow:hidden;}

/* ---- 13. legacy page grammar -------------------------------------------
   The template-vintage pages (news, contact, prescribers, pharmacies,
   export partners, legal, 404 - every page stamped html.aho-nav-solid)
   keep their content and section order but render on the baseline's
   plate grammar: a void canvas, the hero and each light chapter as an
   inset rounded plate, dark passages full-width between them, one
   card spec, one heading treatment. Page CSS below this layer only
   supplies content-specific layout. */
html.aho-nav-solid body{background:var(--aho-void);}
html.aho-nav-solid :is(.hero,.legal-hero){margin:var(--plate-g);border-radius:var(--plate-r);overflow:hidden;
  padding:var(--sec-y) var(--aho-gutter);text-align:left;background:var(--aho-charcoal);}
html.aho-nav-solid :is(.hero,.legal-hero) > *{max-width:var(--aho-max);margin-left:auto;margin-right:auto;}
html.aho-nav-solid :is(.hero,.legal-hero) h1{font-size:var(--t-h1);max-width:18ch;margin-bottom:var(--s3);}
html.aho-nav-solid :is(.hero,.legal-hero) p{max-width:52ch;}
html.aho-nav-solid :is(.contacts-section,.news-section,.newsletter-section,.form-section,.portal-contents,.access-form-section,
  .section.why,.section.markets,.section.form-section,.legal-body,.section-white,.section-offwhite,.sec-white,.sec-offwhite){
  margin:0 var(--plate-g) var(--plate-g);border-radius:var(--plate-r);overflow:hidden;
  padding-top:var(--sec-y);padding-bottom:var(--sec-y);padding-left:var(--aho-gutter);padding-right:var(--aho-gutter);border:0;}
html.aho-nav-solid :is(.location-section,.compliance-note,.section-dark,.sec-dark,.section.portal-contents,.section-teal-deep){
  margin:0;border-radius:0;padding-top:var(--sec-y);padding-bottom:var(--sec-y);background:var(--aho-charcoal);}
html.aho-nav-solid .compliance-note{padding-top:var(--s5);padding-bottom:var(--s5);}
html.aho-nav-solid .filter-bar{position:static;top:auto;margin:0 var(--plate-g);border-radius:var(--plate-r) var(--plate-r) 0 0;border-bottom:1px solid var(--aho-hair-light);box-shadow:none;padding:var(--s2) var(--aho-gutter);}
html.aho-nav-solid .filter-bar + .news-section{border-radius:0 0 var(--plate-r) var(--plate-r);}
html.aho-nav-solid :is(.hero-inner,.section-inner,.section-header){max-width:var(--aho-max);margin-left:auto;margin-right:auto;}
html.aho-nav-solid :is(.card,.contact-card,.news-card,.market-card,.portal-card,.thesis-card,.obligation-card,.commitment-card,.quick-card,.evidence-card){
  border:1px solid var(--aho-hair-light);border-radius:var(--r-card);box-shadow:var(--shadow-card-light);position:relative;overflow:hidden;transition:border-color .3s;}
html.aho-nav-solid :is(.card,.contact-card,.news-card,.market-card,.portal-card,.thesis-card,.quick-card,.evidence-card)::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--aho-accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--aho-ease);z-index:1;}
html.aho-nav-solid :is(.card,.contact-card,.news-card,.market-card,.portal-card,.thesis-card,.quick-card,.evidence-card):hover{border-color:var(--aho-rule-light);}
html.aho-nav-solid :is(.card,.contact-card,.news-card,.market-card,.portal-card,.thesis-card,.quick-card,.evidence-card):hover::before{transform:scaleX(1);}
html.aho-nav-solid :is(.card,.contact-card,.news-card,.market-card,.portal-card,.thesis-card,.obligation-card,.commitment-card) :is(h3,h4){
  font-family:var(--aho-font-b);font-size:var(--t-lg);font-weight:500;line-height:1.25;}
html.aho-nav-solid :is(.card,.contact-card,.news-card,.market-card,.portal-card,.thesis-card,.obligation-card,.commitment-card) p{color:var(--aho-muted);}
html.aho-nav-solid :is(.contact-card-icon,.card-icon,.portal-card-icon,.quick-card-icon){background:var(--aho-accent-tint);border-radius:var(--r-card);color:var(--aho-accent-deep);}
html.aho-nav-solid :is(.contact-card-icon,.card-icon,.portal-card-icon,.quick-card-icon) svg{stroke:currentColor;}
@media(max-width:900px){
  html.aho-nav-solid :is(.hero,.legal-hero){padding:var(--sec-y-sm) var(--aho-gutter) var(--sec-y);}
}

/* ---- 14. responsive layer & shared polish ------------------------------
   Tablet and mobile are their own designs (baseline §21): the spacing
   scale contracts, tall photography is capped, small controls get
   real hit areas, app-shell overflows are contained. */
@media(max-width:1100px){
  :root{--s7:72px;--s8:96px;--s9:128px;}
  figure > img,figure > picture img,.adv-photo img,.adv-env-photo img{aspect-ratio:4/3;object-fit:cover;max-height:56vh;width:100%;}
}
@media(max-width:900px){
  :root{--s6:48px;--s7:64px;--s8:80px;--s9:96px;}
  .chapter{padding-top:var(--s8);padding-bottom:var(--s8);}
  .hero-scroll{display:none;}
}
@media(max-width:640px){
  figure > img,figure > picture img,.adv-photo img,.adv-env-photo img{aspect-ratio:3/4;max-height:64vh;}
  .adv-photo{min-height:0;}
}
/* touch targets */
/* carousel dots keep their 8px look; the hit area is an invisible 40px pseudo */
[class*="car-dot"],button[class*="dot"]{position:relative;}
[class*="car-dot"]::after,button[class*="dot"]::after{content:"";position:absolute;inset:-16px;border-radius:50%;}
.filter-pill,.pr-card-cta,.contact-card-link,.news-card a,.read-more{min-height:44px;display:inline-flex;align-items:center;}
.btn-logout,.header-logo{min-height:40px;display:inline-flex;align-items:center;}
.filter-pill{padding:0 14px;}
/* portal shells */
@media(max-width:900px){
  .mobile-tabs{display:flex !important;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:8px var(--aho-gutter);scrollbar-width:none;
    mask-image:linear-gradient(to right,#000 88%,transparent);-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);}
  .mobile-tabs::-webkit-scrollbar{display:none;}
  .mobile-tab{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center;}
  .header-user-name,.header-user strong{display:none;}
  .app-header,.portal-header{flex-wrap:wrap;}
}
/* copy over photography: keep a scrim so hero text never sits on a highlight */
@media(max-width:640px){
  .hero-ui::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,0.55),rgba(5,5,5,0.15) 60%,transparent);pointer-events:none;}
  .hero-ui > *{position:relative;}
}

/* ---- 12. optional photography treatment ------------------------------
   The CEO floated black-and-white photography for Palette 1 pages.
   Opt in per page with <html class="aho-mono">; colour returns on hover
   so the product is never hidden. Off by default. */
html.aho-mono img:not(.aho-keep-colour):not([src*="brand/"]):not([src*="partners/"]){filter:grayscale(1);transition:filter .6s var(--aho-ease);}
html.aho-mono img:not(.aho-keep-colour):hover{filter:none;}

/* ====================================================================
   15. MOBILE LAYER (CEO brief, 2026-09-15)
   Phones are their own design: a tighter spacing scale that still
   breathes, a mobile type scale that keeps hierarchy without desktop
   sizes, heroes cropped for portrait, photography capped, grids
   collapsed on purpose, 44px targets, a footer ordered for a thumb,
   decorative motion switched off. Everything here sits inside media
   queries so desktop and tablet are untouched.
   ==================================================================== */
@media(max-width:640px){
  :root{
    --t-xs:0.75rem;                 /* 12 · eyebrows read on a phone */
    --t-sm:0.8125rem;
    --t-base:1rem;
    --t-md:1.0625rem;
    --t-lg:1.2rem;
    --t-h3:1.4rem;
    --t-h2:clamp(1.85rem,7.2vw,2.3rem);
    --t-h1:clamp(2.2rem,9vw,2.9rem);
    --t-display:clamp(2.5rem,10.5vw,3.4rem);
    --track-caps:0.12em;
    --s5:40px;--s6:48px;--s7:56px;--s8:64px;--s9:80px;
    --sec-y-sm:40px;--sec-y:56px;--sec-y-lg:72px;
    --plate-g:8px;--plate-r:16px;
    --nav-h:64px;
  }
  body{line-height:1.6;}
  h1,h2{line-height:1.08;letter-spacing:-0.015em;max-width:100% !important;}
  h3{line-height:1.2;}
  p{max-width:100% !important;}
  .eyebrow{margin-bottom:10px;}
  /* --- header ------------------------------------------------- */
  .nav{padding:0 var(--aho-gutter);}
  .nav-inner{height:var(--nav-h);column-gap:var(--s2);}
  .nav-logo .aho-mark{height:20px;}
  .nav-logo::after{height:20px;}
  .nav-cta-wrap{min-height:38px;padding:0 12px 0 14px;font-size:0.75rem;}
  .nav-burger{margin-right:-10px;}
  .nav-links{padding:var(--s3) var(--aho-gutter) var(--s5);}
  .nav-parent{padding:0;}
  .nav-parent > a{min-height:58px;}
  .nav-parent .nav-sub a{min-height:50px;padding-left:18px;}
  .nav-parent .nav-sub a .bil-en{font-size:1rem;}
  .nav-parent .nav-sub a:active .bil-en,.nav-parent .nav-sub a[aria-current="page"] .bil-en{color:var(--aho-accent);}
  .nav-parent .nav-sub a:active{border-left-color:var(--aho-accent);}
  .nav-drawer-cta{margin:var(--s2) 0 var(--s4);width:100%;}
  html.aho-nav-solid body{padding-top:var(--nav-h);}
  /* --- heroes ------------------------------------------------- */
  html:not(.aho-nav-solid) .hero,.abx2-hero,.og-hero,.tm-hero,.th-hero,.cl-hero,.ql-hero,.pr-hero{min-height:min(88svh,680px) !important;height:auto !important;}
  .abx2-hero-media,.cl-hero-media img,.ql-hero-media img,.og-hero img,.og-hero video,.tm-hero img,.th-hero img{object-position:50% 35% !important;}
  .hero-ui > *,.abx2-hero-ui > *,.cl-hero-copy > *,.ql-hero-copy > *,.pr-hero-copy > *,.og-hero-ui > *,.tm-hero-copy > *,.th-hero-copy > *{max-width:100% !important;}
  html.aho-nav-solid :is(.hero,.legal-hero){padding:var(--s5) var(--aho-gutter) var(--s6);}
  html.aho-nav-solid :is(.hero,.legal-hero) h1{font-size:var(--t-h1);}
  /* --- images & photography ------------------------------------- */
  figure > img,figure > picture img,.adv-photo img,.adv-env-photo img,.og-photo img,.qc-two--photo img,.cl-terroir-media img,.pr-rooted-media img,.wn-tile img{aspect-ratio:4/5;max-height:62vh;object-fit:cover;width:100%;}
  .og-photo-stack{gap:var(--s2);}
  .og-photo figcaption,.abx2-carousel figcaption{left:14px !important;right:14px !important;bottom:14px !important;max-width:none;white-space:normal;line-height:1.4;}
  img.pr-hero-cola{object-position:55% 40%;}
  .cl-close{min-height:min(86svh,640px) !important;}
  /* --- plates, sections, rhythm ---------------------------------- */
  .plate,.cl-plate,.og-plate{margin-left:var(--plate-g);margin-right:var(--plate-g);}
  .chapter{padding-top:var(--s8);padding-bottom:var(--s8);}
  html.aho-nav-solid :is(.contacts-section,.news-section,.newsletter-section,.form-section,.portal-contents,.access-form-section,.section.why,.section.markets,.section.form-section,.legal-body,.section-white,.section-offwhite,.sec-white,.sec-offwhite){padding-top:var(--sec-y);padding-bottom:var(--sec-y);}
  /* --- grids: collapse on purpose ---------------------------------- */
  [class*="grid"]:not(.wn-grid):not(.nav-inner):not(.aho-footer-top):not(.tm-grid){grid-template-columns:minmax(0,1fr) !important;}
  .tm-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:var(--s4) var(--s2) !important;}
  .wn-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .card,.contact-card,.news-card,.market-card,.portal-card{padding:22px 20px;}
  /* --- buttons & targets ------------------------------------------- */
  .btn-row,.hero-actions,.abx-tuhono-btns,.pr-btns,.connect-btns{display:flex;flex-wrap:wrap;gap:12px;}
  .btn-row .btn,.hero-actions .btn,.abx-tuhono-btns .btn,.pr-btns .btn,.connect-btns .btn{flex:1 1 calc(50% - 12px);min-height:50px;padding:0 18px;white-space:normal;text-align:center;}
  .btn-row .btn:only-child,.hero-actions .btn:only-child{flex:0 1 auto;min-width:200px;}
  .contact-card a,.contact-card-email a,.legal-content li a,.aho-footer-copy a{display:inline-block;min-height:40px;padding:10px 0;}
  .nav-cta-wrap{min-height:40px;}
  .cl-car-btn,.abx2-car-btn,[class*="car-btn"]{width:44px !important;height:44px !important;}
  .og-photo,.og-photo img,.og-photo video,.og-founder-banner-img,.cl-close-media img{max-height:60vh;}
  .og-photo img,.og-photo video{object-fit:cover;}
  .filter-pill{min-height:44px;padding:0 14px;}
  /* --- forms --------------------------------------------------------- */
  input,select,textarea,.field input,.field select,.field textarea{min-height:50px;font-size:1rem;}
  form .btn,form button[type="submit"],.btn-submit,.btn-full{width:100%;}
  /* --- thread & decoration: shorter, quieter, no overflow ------------ */
  .drift,.starfield,.page-grain{display:none !important;}
  .hero-scroll,.hero-scroll-line{display:none !important;}
  .thread-inflow{height:56px !important;}
  /* --- the floating Connect stays clear of thumbs -------------------------- */
  .aho-connect{bottom:16px;}
}
@media(max-width:400px){
  :root{--t-h1:clamp(2rem,9vw,2.4rem);--t-display:clamp(2.3rem,10.5vw,2.8rem);--aho-gutter:18px;}
  .btn-row .btn,.hero-actions .btn,.abx-tuhono-btns .btn,.pr-btns .btn,.connect-btns .btn{flex-basis:100%;}
  .nav-cta-wrap::after{display:none;}
  .nav-cta-wrap{padding:0 12px;}
}
@media(max-width:640px) and (orientation:landscape){
  html:not(.aho-nav-solid) .hero,.abx2-hero,.og-hero,.tm-hero,.th-hero,.cl-hero,.ql-hero,.pr-hero{min-height:100svh !important;}
}
@media(max-width:640px) and (prefers-reduced-motion:no-preference){
  .reveal,.emerge{transition-duration:.5s !important;}
}

/* ---- 16. mobile fixes from the 2026-09-15 audit --------------------------
   Layouts that named their columns without "grid" in the class, and copy
   columns whose max-width is a desktop formula. */
@media(max-width:900px){
  .cl-close-copy,.cl-hero-copy,.ql-hero-copy,.pr-hero-copy{max-width:100% !important;padding-left:var(--aho-gutter) !important;padding-right:var(--aho-gutter) !important;}
}
@media(max-width:640px){
  .og-sunrise-ui,.og-home-top,.og-plate,.og-bigger-band,.og-bigger-coda,.og-steps,.og-model-grid,.cl-terroir-media,.qc-two,.cl-split{grid-template-columns:minmax(0,1fr) !important;}
  .og-bigger-band > *,.og-bigger-coda > *,.og-home-top > *,.og-plate > *{grid-column:1 !important;}
  .og-bigger-close,.og-lead,.og-copy,.og-pull,.og-plate-copy{max-width:100% !important;}
  .location-detail{flex-direction:column;align-items:flex-start;}
  .cl-close{display:block !important;}
}
@media(max-width:360px){
  .tm-grid{grid-template-columns:minmax(0,1fr) !important;}
}
@media(min-width:361px) and (max-width:640px){
  .tm-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:640px){
  .og-model-top{display:block !important;width:100% !important;position:static !important;}
  .og-model-intro,.og-model-head,.og-model-hope,.og-model-cell{max-width:100% !important;width:auto !important;}
  .og-journey img,.og-journey figure > img{aspect-ratio:auto !important;max-height:none !important;object-fit:contain !important;}
  .og-photo--bleed{width:100% !important;max-width:100% !important;margin:0 !important;}
}
@media(max-width:640px){
  .og-plate-copy,.og-copy{padding-left:0 !important;padding-right:0 !important;max-width:100% !important;}
  .og-plate{padding:var(--s4) var(--s3) !important;}
  .og-meet-copy{position:static !important;width:100% !important;max-width:100% !important;padding:var(--s3) var(--aho-gutter) !important;}
  .og-meet-line{max-width:100% !important;}
}
@media(max-width:360px){
  html.aho-nav-solid :is(.contacts-section,.news-section,.newsletter-section,.form-section,.portal-contents,.access-form-section,.section.why,.section.markets,.section.form-section,.legal-body){padding-left:14px;padding-right:14px;}
  .card,.contact-card,.news-card,.market-card,.portal-card{padding:18px 16px;}
  .news-card-body{padding:16px !important;}
}
@media(max-width:1100px){
  /* artwork that carries its own labels is never cropped: show it whole */
  .abx-circle img,img[src*="mo-tatou"],img[src*="principles"],img[src*="timeline"],img[src*="globe"]{aspect-ratio:auto !important;max-height:none !important;object-fit:contain !important;width:100% !important;height:auto !important;}
  .abx-circle{width:100%;max-width:100%;margin-left:0;margin-right:0;}
}
@media(max-width:640px){
  /* homepage film hero: give the copy air beneath the header (CEO, 2026-09-15) */
  .hero#hero{min-height:100svh !important;}
  .hero#hero .hero-ui-inner{padding-top:calc(var(--nav-h) + 40px) !important;padding-bottom:12svh !important;}
  .hero#hero .hero-ui{align-items:flex-end;}
}

/* ---- 17. CEO mobile edits, 2026-09-15 ---------------------------------- */
@media(max-width:640px){
  /* origins: the sunrise follows the return chapter closely; its eyebrow goes */
  .og-home{padding-top:0 !important;}
  .og-return{padding-bottom:var(--s5) !important;}
  .og-sunrise{margin-bottom:var(--s5) !important;min-height:min(80svh,600px) !important;}
  .og-sunrise .og-eyebrow{display:none !important;}
  /* origins: founder copy sits below the portrait, never over the face */
  .og-founder-banner{display:block !important;min-height:0 !important;}
  .og-founder-banner-img{position:relative !important;display:block !important;width:100% !important;height:auto !important;right:auto !important;top:auto !important;bottom:auto !important;aspect-ratio:4/5 !important;object-fit:cover !important;object-position:center 18% !important;}
  .og-founder-banner-rope{display:none !important;}
  .og-founder-banner-ui{margin-top:0 !important;padding:var(--s4) 0 var(--s6) !important;}
  .og-founder-banner::before{background:linear-gradient(to bottom,rgba(13,15,13,0) 70%,#0d0f0d 100%) !important;}
  /* origins: the return-to-whenua copy at phone sizes */
  .og-home-question,.og-return-pull{font-size:var(--t-h3) !important;line-height:1.2 !important;max-width:100% !important;}
  .og-return-pull{margin-top:var(--s5) !important;padding-top:var(--s4) !important;}
  /* origins: from a company to a model - the copy lives on the picture again,
     sized to fit a phone: intro and head at the top, the five cells two-up,
     the hope at the foot, one scrim behind all of it */
  .og-model{padding-top:0 !important;}
  .og-model-slide{position:relative !important;display:flex !important;flex-direction:column !important;justify-content:space-between !important;gap:var(--s3) !important;
    min-height:100svh !important;aspect-ratio:auto !important;padding:calc(var(--s4) + 8px) var(--aho-gutter) var(--s5) !important;
    background:#0c0b09 url("aho-origin-model-bg-mobile.jpg") center/cover no-repeat !important;}
  .og-model-slide::before{content:'' !important;display:block !important;position:absolute !important;inset:0 !important;top:0 !important;height:auto !important;z-index:0 !important;
    background:linear-gradient(to bottom,rgba(5,5,5,0.78) 0%,rgba(5,5,5,0.35) 38%,rgba(5,5,5,0.15) 55%,rgba(5,5,5,0.78) 100%) !important;}
  .og-model-slide::after{display:none !important;}
  .og-model-picture{display:none !important;}
  .og-model-top,.og-model-grid,.og-model-hope{position:relative !important;z-index:1 !important;padding:0 !important;margin:0 !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;width:100% !important;}
  .og-model-intro{font-size:0.9375rem !important;line-height:1.45 !important;max-width:36ch !important;margin:0 !important;}
  .og-model-head{font-size:1.5rem !important;line-height:1.12 !important;margin:12px 0 0 !important;max-width:100% !important;}
  .og-model-grid{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:14px 18px !important;}
  .og-model-cell i{width:22px !important;margin-bottom:8px !important;}
  .og-model-cell p{font-size:0.8125rem !important;line-height:1.4 !important;text-shadow:0 1px 12px rgba(0,0,0,0.6) !important;}
  .og-model-hope{font-size:0.9375rem !important;line-height:1.4 !important;max-width:100% !important;text-shadow:0 1px 14px rgba(0,0,0,0.7) !important;}
  /* products: the "Rooted here" plate grows to its copy; the aside follows the heading */
  .pr-rooted{min-height:0 !important;height:auto !important;}
  .pr-rooted-grid{min-height:0 !important;align-content:start !important;gap:var(--s4) !important;padding-bottom:var(--s6) !important;}
  .pr-rooted-aside{align-self:start !important;padding-top:0 !important;}
  .pr-rooted-aside span+span{margin-top:var(--s3) !important;}
}
@media(max-width:900px){
  /* cultivation: each site's photographs sit directly under its plate */
  #sites{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--plate-g);}
  #sites > .cl-band{order:0;}
  #sites > .cl-split{display:contents;}
  #sites > .cl-split > .cl-site:nth-child(1){order:1;}
  #sites > .cl-split > .cl-carousel:nth-child(1){order:2;}
  #sites > .cl-split > .cl-site:nth-child(2){order:3;}
  #sites > .cl-split > .cl-carousel:nth-child(2){order:4;}
  #sites > .cl-split > *{width:auto;margin-left:var(--plate-g);margin-right:var(--plate-g);}
  #sites > .cl-split > .cl-carousel{aspect-ratio:4/5;max-height:70vh;}
}
@media(max-width:900px){
  /* origins: two journeys meet - the copy sits on the tan beneath a square crop, at phone sizes */
  .og-journey{padding-bottom:var(--s5) !important;}
  .og-meet{padding:0 0 var(--s6) !important;}
  .og-meet-slide{display:flex !important;flex-direction:column !important;}
  .og-meet-slide img{aspect-ratio:1/1 !important;object-fit:cover !important;width:100% !important;height:auto !important;}
  .og-meet-copy{position:static !important;transform:none !important;width:100% !important;padding:var(--s5) var(--aho-gutter) 0 !important;}
  .og-meet-line{font-size:var(--t-h3) !important;line-height:1.25 !important;margin:0 0 var(--s3) !important;max-width:100% !important;}
  .og-meet-line--alt{margin-bottom:var(--s5) !important;}
  .og-born{font-size:var(--t-h2) !important;line-height:1 !important;}
  .og-born::after{width:52px !important;margin-top:var(--s4) !important;}
}
@media(max-width:640px){
  /* origins: from a company to a model, redesigned for phones (CEO, 2026-09-15):
     copy above, the picture on its own, the five lines as a list beneath it,
     the hope as a closing quote. Nothing sits on the photograph. */
  .og-model{padding:0 0 var(--s8) !important;}
  .og-model-slide{display:flex !important;flex-direction:column !important;justify-content:flex-start !important;gap:0 !important;
    min-height:0 !important;padding:var(--s5) var(--aho-gutter) 0 !important;background:#050505 !important;}
  .og-model-slide::before,.og-model-slide::after{display:none !important;}
  .og-model-top{order:0 !important;}
  .og-model-intro{font-size:var(--t-md) !important;line-height:1.5 !important;max-width:100% !important;color:var(--aho-silver) !important;}
  .og-model-head{font-size:var(--t-h2) !important;line-height:1.1 !important;margin:14px 0 0 !important;}
  .og-model-picture{display:block !important;order:1 !important;width:100% !important;aspect-ratio:4/5 !important;margin:var(--s5) 0 var(--s5) !important;
    border-radius:var(--plate-r) !important;background:#0c0b09 url("aho-origin-model-bg-mobile.jpg") center 45%/cover no-repeat !important;}
  .og-model-grid{order:2 !important;display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:var(--s4) !important;padding:0 !important;}
  .og-model-cell i{width:28px !important;height:1px !important;margin-bottom:12px !important;background:var(--aho-accent) !important;opacity:1 !important;}
  .og-model-cell p{font-size:var(--t-md) !important;line-height:1.45 !important;color:var(--aho-white) !important;text-shadow:none !important;}
  .og-model-hope{order:3 !important;margin:var(--s6) 0 0 !important;padding:var(--s4) 0 0 !important;border-top:1px solid var(--aho-rule) !important;
    font-size:var(--t-lg) !important;line-height:1.35 !important;max-width:100% !important;text-shadow:none !important;}
}
@media(max-width:640px){
  /* logo story: the mark under the whakapapa definition reads large and
     centred, its Hawke's Bay line centred beneath it (CEO, 2026-09-15) */
  .th-principle-rail .th-mark{width:min(72%,240px) !important;margin:var(--s5) auto var(--s3) !important;justify-self:center !important;opacity:1 !important;}
  .th-principle-rail .th-mark-tag{justify-self:center !important;text-align:center !important;max-width:none !important;margin:0 auto !important;}
}
@media(max-width:640px){
  /* about carousels: the caption sits above the arrow bar, never under it */
  .abx2-carousel figcaption{bottom:66px !important;right:14px !important;}
  .abx2-car-ui{right:14px !important;bottom:14px !important;}
}

/* ---- 18. Phone guard (CEO, 2026-09-14): nothing may grow past the viewport.
   Chrome sizes fr tracks to their share; Safari lets a percentage-width image
   or a long caps line push nested 1fr tracks wider than the phone, and the
   copy is clipped at the right edge (seen on the logo story). Every
   grid-template-columns on the site now uses minmax(0,Xfr); this is the
   belt to that brace. ----------------------------------------------------- */
@media(max-width:640px){
  /* body only: its clip propagates to the viewport. A clip on html, or a
     100vw cap on body, makes iOS Safari widen the layout viewport and zoom
     the page out (black band at the right, 2026-09-14). */
  body{overflow-x:clip;}
  img,video,svg,picture,iframe,canvas{max-width:100%;}
  .th-principle,.th-principle-top,.th-principle-rail{grid-template-columns:minmax(0,1fr) !important;}
  .th-principle-top > *,.th-principle-rail > *{min-width:0;max-width:100%;}
  .th-principle-rail .th-mark{width:min(72vw,240px) !important;max-width:100% !important;}
  .th-principle-rail .th-mark-tag{justify-self:stretch !important;width:100% !important;white-space:normal !important;}
}

/* ---- 19. Phones: captions and controls sit UNDER the photograph (CEO,
   2026-09-14), never over it. The figure stays the stage; the caption and
   the arrow bar hang below its frame, and the frame keeps its corners. ---- */
@media(max-width:640px){
  /* about carousels */
  .abx2-carousel{overflow:visible !important;margin-bottom:82px !important;}
  .abx2-carousel img{border-radius:calc(var(--plate-r)*0.55);}
  .abx2-carousel::before{display:none !important;}
  .abx2-carousel figcaption{position:absolute !important;top:calc(100% + 14px) !important;bottom:auto !important;left:0 !important;right:auto !important;
    max-width:calc(100% - 176px) !important;margin:0 !important;padding:0 !important;background:none !important;border-radius:0 !important;
    line-height:1.45 !important;color:var(--aho-silver) !important;text-shadow:none !important;border:0 !important;box-shadow:none !important;backdrop-filter:none !important;}
  .abx2-carousel figcaption::before{display:none !important;}
  .abx2-carousel figcaption svg{stroke:var(--aho-accent) !important;}
  .abx2-car-ui{position:absolute !important;top:calc(100% + 14px) !important;bottom:auto !important;right:0 !important;left:auto !important;}
  .abx2-car-btn{background:transparent !important;color:var(--aho-silver) !important;border-color:rgba(168,173,179,0.55) !important;}
  .abx2-car-btn:hover,.abx2-car-btn:focus-visible{border-color:var(--aho-accent) !important;color:var(--aho-accent) !important;}
  .abx2-car-dot{background:rgba(168,173,179,0.4) !important;}
  .abx2-car-dot[aria-selected="true"],.abx2-car-dot.on{background:var(--aho-accent) !important;}
  /* on the cream chapter the caption and controls read in ink */
  .ch-flax .abx2-carousel figcaption,.ch-flax .abx2-car-btn{color:var(--aho-ink-soft) !important;}
  .ch-flax .abx2-car-btn{border-color:rgba(42,39,34,0.45) !important;}
  .ch-flax .abx2-car-dot{background:rgba(42,39,34,0.3) !important;}
  .ch-flax .abx2-car-dot[aria-selected="true"],.ch-flax .abx2-car-dot.on{background:var(--aho-accent-deep) !important;}
  /* cultivation carousels: the arrow bar drops under the plate */
  .cl-carousel,.cl-carousel.unveil{overflow:visible !important;clip-path:none !important;margin-bottom:60px !important;}
  .cl-carousel .cl-car-slide{border-radius:var(--plate-r);overflow:hidden;}
  .cl-car-ui{top:calc(100% + 12px) !important;bottom:auto !important;left:0 !important;right:0 !important;padding:0 !important;background:none !important;justify-content:flex-end !important;}
  .cl-car-btn{background:transparent !important;color:var(--aho-silver) !important;border-color:rgba(168,173,179,0.55) !important;}
  .cl-car-dots button{background:rgba(168,173,179,0.4) !important;}
  .cl-car-dots button[aria-selected="true"]{background:var(--aho-accent) !important;}
  /* origins photographs: the caption hangs under the frame */
  .og-photo{overflow:visible !important;}
  .og-photo{margin-bottom:60px !important;}
  .og-photo img,.og-photo video{border-radius:var(--r-card,16px);}
  .og-photo figcaption{position:absolute !important;top:calc(100% + 12px) !important;bottom:auto !important;left:0 !important;right:0 !important;
    color:var(--aho-silver) !important;line-height:1.45 !important;text-shadow:none !important;}
  .og-photo figcaption::before{flex:none;}
  .ch-flax .og-photo figcaption{color:var(--aho-ink-soft) !important;}
  .og-photo figcaption{white-space:normal !important;width:100% !important;flex-wrap:nowrap !important;align-items:flex-start !important;}
  .og-photo figcaption::before{margin-top:0.55em;}
  /* origins, the return-home chapter: Safari transferred the video frame's
     220px minimum height through its 16:9 ratio into a 391px-wide grid
     track, wider than the phone. On phones the copy and the two frames
     stack as plain blocks with explicit widths, so nothing is inferred. */
  .og-home-top,.og-home .og-photo-stack{display:block !important;}
  .og-home .og-photo-stack{margin-top:var(--s5) !important;}
  .og-home .og-photo{display:block !important;width:100% !important;max-width:100% !important;min-width:0 !important;min-height:0 !important;height:auto !important;margin:0 0 72px !important;}
  .og-home .og-photo--loop{aspect-ratio:16/9 !important;}
  .og-home .og-photo--crop{aspect-ratio:4/3 !important;}
  .og-home .og-photo img,.og-home .og-photo video{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important;}
}

/* ---- 20. Logo story, phones: "Every thread carries what came before" sits
   high in the black top-left of the muka photograph (CEO, 2026-09-14). ---- */
@media(max-width:640px){
  .th-photo-note{top:14px !important;left:var(--s4) !important;max-width:19ch !important;padding-top:10px !important;}
}