/* ============ TOKENS ============ */
:root{
  --canvas:#F8EFE7;        /* sampled from the client's own product photography */
  --canvas-2:#F1E6DB;
  --panel:#FDF8F2;
  --forest-900:#1B3D28;
  --forest-700:#2C5A3C;
  --forest-500:#47704C;
  --sage-200:#B8C9B5;
  --text-primary:#16211A;
  --text-secondary:#4A5A4E;
  --accent:#C9A961;
  --accent-hover:#A9863F;

  --capsules:#63762F; --nawah:#A0682E; --voy:#3E5A6E; --uno:#2E6F6A; --hatchi:#A96A6F;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.4,0,.2,1);
  /* Legibility inverted for a light canvas: a warm halo behind dark text */
  --tshadow:0 1px 2px rgba(252,247,240,.95),0 3px 12px rgba(252,247,240,.85),0 10px 44px rgba(252,247,240,.9);
  --wrap:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font:400 17px/1.7 "Instrument Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* one fixed environment layer so the whole page reads as one place */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 78% 12%,rgba(201,169,97,.10),transparent 60%),
    radial-gradient(ellipse 70% 50% at 8% 82%,rgba(44,90,60,.07),transparent 62%);
  animation:drift 84s var(--ease-2) -22s infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-2.2%,0) scale(1.06)}}
/* the brand's own leaf, drawn large and very faint, so the whole page sits
   inside the Doctor Health mark rather than on a neutral ground */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cpath d='M50 4c34 32 34 120 0 152C16 124 16 36 50 4z' fill='none' stroke='%232C5A3C' stroke-width='2.2'/%3E%3Cpath d='M50 14v132' stroke='%232C5A3C' stroke-width='1.4' fill='none'/%3E%3Cpath d='M50 48c14 6 22 15 26 25M50 48c-14 6-22 15-26 25M50 88c13 6 20 14 24 23M50 88c-13 6-20 14-24 23' fill='none' stroke='%232C5A3C' stroke-width='1.1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cpath d='M50 4c34 32 34 120 0 152C16 124 16 36 50 4z' fill='none' stroke='%232C5A3C' stroke-width='2.2'/%3E%3Cpath d='M50 14v132' stroke='%232C5A3C' stroke-width='1.4' fill='none'/%3E%3Cpath d='M50 48c14 6 22 15 26 25M50 48c-14 6-22 15-26 25M50 88c13 6 20 14 24 23M50 88c-13 6-20 14-24 23' fill='none' stroke='%232C5A3C' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:-4vmax 10vh, calc(100% + 5vmax) 62vh;
  background-size:26vmax auto, 19vmax auto;
  animation:leafDrift 110s var(--ease-2) -40s infinite alternate;
}
@keyframes leafDrift{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(0,-3vh,0) rotate(1.6deg)}}
main,header,footer{position:relative;z-index:1}

h1,h2,h3,.display{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;margin:0}
.display{font-size:clamp(40px,6.2vw,78px);letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(30px,4.4vw,58px);letter-spacing:-.015em;line-height:1.08}
h3{font-size:23px;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.6;color:var(--text-secondary);max-width:58ch}
.small{font-size:14px;line-height:1.6;color:var(--text-secondary)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--forest-700);color:#fff;padding:12px 18px}
.skip:focus{left:12px;top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media(min-width:900px){.wrap{padding:0 40px}}
section{padding:96px 0}
@media(min-width:900px){section{padding:150px 0}}

/* ============ CHAPTER HEADS (the journey device) ============ */
.ch{display:flex;align-items:baseline;gap:18px;margin-bottom:30px}
.ch .n{font-family:"Cormorant Garamond",serif;font-size:15px;letter-spacing:.14em;color:var(--accent);flex:none}
.ch .l{height:1px;background:currentColor;color:var(--forest-500);opacity:.34;flex:1;
  transform:scaleX(0);transform-origin:left;transition:transform .8s .1s var(--ease)}
.ch.in .l{transform:scaleX(1)}
.ch .t{font-size:13px;letter-spacing:.1em;color:var(--forest-500);flex:none}
.on-dark .ch .l{color:var(--sage-200)}
.on-dark .ch .t{color:var(--sage-200)}

/* the seed motif, used as a divider */
.seedmark{width:34px;height:34px;flex:none;opacity:.5}

/* ============ HEADER ============ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:40;height:86px;
  display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .28s var(--ease-2),border-color .28s var(--ease-2);
}
.hdr.solid{background:rgba(248,239,231,.9);backdrop-filter:blur(12px);border-bottom-color:rgba(44,90,60,.16)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--forest-900)}
.bwrap{display:flex;flex-direction:column;gap:2px}
.bname{font-family:"Cormorant Garamond",serif;font-size:21px;line-height:1;letter-spacing:.03em;white-space:nowrap}
@media(max-width:560px){
  .bname{font-size:18px}
  .hdr .btn-1{padding:12px 15px;font-size:13px;white-space:nowrap}
  .brand{gap:9px}
  .mark{width:29px;height:29px}
}
/* the slogan sits under the wordmark so the leaf animation has something to explain */
.bslogan{font-family:"Instrument Sans",sans-serif;font-weight:400;font-size:9.5px;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--forest-500);white-space:nowrap;
  animation:sloganUnfurl 1.4s .4s var(--ease) backwards;transition:color .22s var(--ease-2)}
.brand:hover .bslogan{color:var(--forest-700)}
@media(max-width:420px){.bslogan{display:none}}
@keyframes sloganUnfurl{from{opacity:0;letter-spacing:.05em;transform:translateY(3px)}to{opacity:1;letter-spacing:.14em;transform:none}}

/* the mark: a leaf unfurling inside the seal, which is the slogan made visible */
.mark{width:34px;height:34px;flex:none;overflow:visible}
.mark .mk-leaf{transform-origin:24px 39px;animation:leafGrow 1.6s .3s var(--ease) backwards, leafPulse 6s 2s var(--ease-2) infinite alternate}
@keyframes leafGrow{from{transform:scaleY(.06) scaleX(.55);opacity:0}to{transform:none;opacity:1}}
@keyframes leafPulse{0%,100%{filter:drop-shadow(0 0 0px transparent);transform:scale(1)}50%{filter:drop-shadow(0 0 6px rgba(201,169,97,.5));transform:scale(1.06)}}
.mark .mk-vein{stroke-dasharray:28;stroke-dashoffset:28;animation:veinDraw 1.2s 1s var(--ease) forwards}
@keyframes veinDraw{to{stroke-dashoffset:0}}
.mark .mk-disc{transform-origin:24px 24px;animation:sealIn .9s var(--ease) backwards}
@keyframes sealIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
/* then it simply breathes, the way a growing thing does */
.brand .mark{animation:breathe 8s var(--ease-2) 2.4s infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.nav{display:none;gap:30px;align-items:baseline}
@media(min-width:1040px){.nav{display:flex}}
.nav a{font-size:14px;text-decoration:none;color:var(--text-secondary);transition:color .22s var(--ease-2)}
.nav a:hover{color:var(--forest-700)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:500 15px/1 "Instrument Sans",sans-serif;text-decoration:none;
  padding:14px 24px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:background .24s var(--ease-2),color .24s var(--ease-2),border-color .24s var(--ease-2);
  text-shadow:none;
}
.btn-1{background:var(--forest-700);color:#fff}
.btn-1:hover{background:var(--forest-900)}
.btn-2{background:transparent;color:var(--forest-900);border-color:rgba(44,90,60,.45)}
.btn-2:hover{border-color:var(--forest-700);background:rgba(44,90,60,.06)}
.on-dark .btn-2{color:#fff;border-color:rgba(184,201,181,.5)}
.on-dark .btn-2:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media(pointer:coarse){.btn{min-height:44px}}

/* ============ THE JOURNEY RAIL ============ */
.rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:35;display:none;
  flex-direction:column;gap:14px;align-items:flex-end}
@media(min-width:1180px){.rail{display:flex}}
@media(max-height:620px){.rail{display:none}}
.rail a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--forest-500);
  font-size:11px;letter-spacing:.1em;opacity:.42;transition:opacity .3s var(--ease-2),color .3s var(--ease-2)}
.rail a .d{width:22px;height:1px;background:currentColor;transition:width .35s var(--ease)}
.rail a:hover{opacity:.85}
.rail a.on{opacity:1;color:var(--forest-900)}
.rail a.on .d{width:40px;background:var(--accent)}
.rail .lb{width:8.5ch;text-align:right}
/* the rail crosses dark sections, so it inverts to stay readable there */
.rail.inv a{color:var(--sage-200);opacity:.5}
.rail.inv a:hover{opacity:.9}
.rail.inv a.on{color:#fff;opacity:1}

/* ============ HERO ============ */
/* 500vh, not 620: the kernel-to-bottle film is a slow push-in rather than a
   transforming shot, so the same beats over less scroll keep it from feeling
   static. Each caption still holds ~84vh, inside the readable range. */
.hero{position:relative;height:500vh;padding:0}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
.poster,#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background-size:cover;background-position:60% 50%}
#hero{opacity:0;transition:opacity .7s var(--ease);will-change:transform;transform:translateZ(0);object-position:60% 50%}
.stage.video-ready #hero{opacity:1}
.stage.video-failed #hero{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 110% 85% at 30% 42%,rgba(252,247,240,.30) 0%,rgba(252,247,240,0) 62%)}

.band{
  position:absolute;left:0;right:auto;top:0;
  width:min(560px,58vw);padding:0 0 0 clamp(24px,7vw,104px);
  opacity:0;color:var(--forest-900);text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-16% -14% -16% -18%;pointer-events:none;z-index:-1;
  opacity:calc(.28 + .72*var(--k,1));
  background:radial-gradient(ellipse 76% 64% at 42% 50%,rgba(253,249,243,.80) 0%,rgba(253,249,243,.56) 46%,rgba(253,249,243,0) 76%);
}
.b1{top:26vh}.b2{top:26vh}.b3{top:26vh}.b4{top:19vh;width:min(640px,64vw)}
.band .line{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(34px,5.2vw,66px);line-height:1.06;letter-spacing:-.02em}
.band .sub{margin-top:22px;font-size:clamp(15px,1.5vw,18px);line-height:1.62;color:var(--text-secondary);max-width:40ch}
.band .row{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* entrance (a): scatter, echoes the oil gathering */
.e-scatter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* entrance (f): drift-down, echoes the oil releasing */
.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
/* entrance (b): grid snap-align, echoes the flood advancing in one direction */
.e-snap .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* entrance (e): staged settle, echoes the arrival at rest */
.e-settle .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
.e-settle .sub{--ks:clamp(0,(var(--k,0) - .60)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.e-settle .row{--kb:clamp(0,(var(--k,0) - .74)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

.ring{position:absolute;right:clamp(20px,4vw,44px);bottom:clamp(20px,4vw,44px);width:48px;height:48px;color:var(--forest-700);opacity:.85}
.ring circle{transition:stroke-dashoffset .18s linear}
.cue{position:absolute;right:clamp(20px,4vw,44px);bottom:clamp(20px,4vw,44px);width:48px;height:48px;color:var(--forest-700);opacity:.7;animation:bob 2.6s var(--ease-2) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* static hero for phones, portrait tablets and reduced motion */
.static-hero{display:none;position:relative;min-height:100svh;padding:104px 0 0;align-items:flex-start;overflow:hidden}
.static-hero .bg{position:absolute;inset:0;background:var(--canvas) 64% bottom/cover no-repeat}
.static-hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--canvas) 0%,rgba(248,239,231,.97) 40%,rgba(248,239,231,.82) 56%,rgba(248,239,231,.20) 76%,rgba(248,239,231,0) 100%)}
.static-hero .inner{position:relative;z-index:1;padding-bottom:44vh}
.static-hero h1{font-size:clamp(31px,7.2vw,60px);line-height:1.08;max-width:15ch;color:var(--forest-900)}
@media (orientation:landscape) and (pointer:coarse){.static-hero .inner{padding-bottom:12vh}}
.static-hero .lede{margin-top:22px}
.static-hero .row{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rv.in{opacity:1;transform:none}
.stg>*{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.stg.in>*{opacity:1;transform:none}
.stg.in>*:nth-child(1){transition-delay:0s}
.stg.in>*:nth-child(2){transition-delay:.07s}
.stg.in>*:nth-child(3){transition-delay:.14s}
.stg.in>*:nth-child(4){transition-delay:.21s}
.stg.in>*:nth-child(n+5){transition-delay:.28s}
.stg.done>*:nth-child(1),.stg.done>*:nth-child(2),.stg.done>*:nth-child(3),
.stg.done>*:nth-child(4),.stg.done>*:nth-child(n+5){transition-delay:0s}

/* ============ 01 THE ORIGIN ============ */
.origin{background:var(--forest-900);color:var(--sage-200);position:relative;overflow:hidden}
.origin h2{color:#fff;max-width:13ch}
.origin .lede{color:var(--sage-200);margin-top:26px}
.origin .mote{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1.6px 1.6px at 18% 28%,rgba(201,169,97,.9),transparent),radial-gradient(1.4px 1.4px at 72% 62%,rgba(201,169,97,.75),transparent),radial-gradient(1.2px 1.2px at 44% 82%,rgba(201,169,97,.65),transparent),radial-gradient(1.5px 1.5px at 86% 22%,rgba(201,169,97,.7),transparent)}
.origin.vis .mote{animation:mote 66s linear -12s infinite}
@keyframes mote{to{transform:translate3d(0,-40px,0)}}
/* the date palm the premise rests on, beside the story */
.osplit{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.osplit{grid-template-columns:1.05fr .95fr;gap:70px}}
.osplit .im{overflow:hidden}
.osplit .im img{width:100%;transform:scale(1.06);transition:transform 1.3s var(--ease)}
.osplit.in .im img{transform:scale(1)}
.holdwrap{display:grid;gap:48px;align-items:center;margin-top:64px}
@media(min-width:880px){.holdwrap{grid-template-columns:250px 1fr;gap:76px}}
.hold{width:200px;height:200px;background:none;border:0;padding:0;cursor:pointer;display:block;margin:0 auto;position:relative;touch-action:none;-webkit-tap-highlight-color:transparent}
.hold svg{width:100%;height:100%;overflow:visible}
.hold .disc{fill:none;stroke:rgba(184,201,181,.34);stroke-width:1.5}
.hold .prog{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:295;stroke-dashoffset:calc(295 - 295*var(--p,0));transform:rotate(-90deg);transform-origin:50% 50%}
.hold .leafbg{fill:rgba(184,201,181,.16)}
.hold .leaffill{fill:var(--accent);opacity:calc(.25 + .75*var(--p,0));
  transform:scaleY(var(--p,0));transform-origin:50% 100%;transform-box:fill-box}
.hold .lip{fill:none;stroke:rgba(248,239,231,.55);stroke-width:1.5}
.holdlabel{margin-top:18px;text-align:center;font-size:12px;letter-spacing:.1em;color:var(--sage-200)}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.facts li{font-family:"Cormorant Garamond",serif;font-size:clamp(26px,3.4vw,44px);line-height:1.16;color:#fff;font-weight:300;
  opacity:.26;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.facts li.lit{opacity:1;transform:none}
.facts li b{font-weight:500;color:var(--accent)}

/* ============ 02 THE GROUP ============ */
.grid2{display:grid;gap:32px 28px;margin-top:56px}
@media(min-width:820px){.grid2{grid-template-columns:1fr 1fr}}
.unit{background:var(--panel);padding:30px;border:1px solid rgba(44,90,60,.16);border-radius:4px;
  perspective:1000px;transform-style:preserve-3d;
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.unit:hover{transform:perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(8px);
  border-color:var(--forest-700);box-shadow:0 20px 44px -12px rgba(27,61,40,.14),0 0 0 1px rgba(44,90,60,.22)}
.unit-img{overflow:hidden;margin-bottom:22px;border-radius:2px;aspect-ratio:16/9;background:var(--canvas-2);box-shadow:0 6px 16px rgba(0,0,0,.04)}
.unit-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform .9s var(--ease)}
.unit:hover .unit-img img{transform:scale(1)}
.unit .loc{font-size:13px;letter-spacing:.06em;color:var(--forest-500);margin-top:6px;font-weight:500}
.unit p:last-child{margin-top:14px;color:var(--text-secondary);max-width:44ch;font-size:15px;line-height:1.65}

/* Formal Corporate B2B Accent Badges */
.b2b-badge{display:inline-flex;align-items:center;gap:7px;font-family:"Instrument Sans",sans-serif;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-700);background:rgba(44,90,60,.06);border:1px solid rgba(44,90,60,.22);padding:5px 12px;border-radius:2px;margin-bottom:14px}
.b2b-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ============ 03 PROOF ============ */
.proof{display:grid;gap:60px;margin-top:60px}
.proof p{font-family:"Cormorant Garamond",serif;font-size:clamp(24px,3.1vw,38px);line-height:1.28;letter-spacing:-.01em;max-width:22ch;color:var(--forest-900);font-weight:300}
.proof strong{font-weight:500}
.proof em{font-style:italic}

/* ============ 04 THE BRANDS ============ */
.brandrow{padding:0}
.brandrow .inner{padding:88px 0;border-top:1px solid rgba(44,90,60,.16)}
@media(min-width:900px){.brandrow .inner{padding:120px 0}}
.brow{display:grid;gap:44px;align-items:center}
@media(min-width:900px){.brow{grid-template-columns:1.02fr 1fr;gap:80px}
  .brandrow.flip .bmedia{order:2}}
.bmedia{position:relative;overflow:hidden;background:color-mix(in srgb,var(--b) 6%,var(--panel));border-radius:4px;box-shadow:0 12px 30px -8px rgba(27,61,40,.09);perspective:1000px;transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.bmedia:hover{transform:perspective(1200px) rotateX(2.5deg) rotateY(-2.5deg) translateZ(6px);box-shadow:0 24px 50px -12px rgba(27,61,40,.16),0 0 0 1px color-mix(in srgb,var(--b) 35%,transparent)}
.bmedia img{width:100%;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.brandrow.in .bmedia img{transform:scale(1)}
.bmedia .num{position:absolute;top:18px;left:20px;font-family:"Cormorant Garamond",serif;
  font-size:13px;letter-spacing:.14em;color:var(--b);opacity:.85}
.blogo{height:96px;width:auto;object-fit:contain;object-position:left center;mix-blend-mode:multiply}
@media(min-width:900px){.blogo{height:118px}}
.blogo.plate{background:var(--forest-900);padding:18px 24px;height:104px;border-radius:2px;mix-blend-mode:normal}
@media(min-width:900px){.blogo.plate{height:120px}}
.brule{width:52px;height:2px;background:var(--b);margin:26px 0 22px;
  transform:scaleX(0);transform-origin:left;transition:transform .6s .3s var(--ease)}
.brandrow.in .brule{transform:scaleX(1)}
.btag{font-family:"Cormorant Garamond",serif;font-size:clamp(24px,2.7vw,34px);line-height:1.22;color:var(--forest-900);max-width:20ch}
.bdesc{margin-top:16px;color:var(--text-secondary);max-width:46ch}
.blist{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.blist li{font-size:13px;letter-spacing:.02em;color:var(--forest-700);
  border:1px solid color-mix(in srgb,var(--b) 42%,transparent);padding:8px 13px;border-radius:2px}
.soon{display:inline-block;font-size:11px;letter-spacing:.1em;color:var(--b);
  border:1px solid color-mix(in srgb,var(--b) 45%,transparent);padding:5px 10px;margin-bottom:18px}
/* UNO's mark is a spectrum, so its rule carries the real gradient */
.brandrow.uno-row .brule{width:82px;background:linear-gradient(90deg,#F0883E,#EE5C8A,#8E6FC4,#3E7FD0,#22A39A)}
/* one clean light sweep across the range as it arrives, like a fresh rinse */
.brandrow.uno-row .bmedia::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.60) 49%,transparent 64%);
  transform:translateX(-115%);
}
.brandrow.uno-row.in .bmedia::after{animation:sweep 2s .5s var(--ease) forwards}
@keyframes sweep{0%{opacity:0;transform:translateX(-115%)}14%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translateX(115%)}}

/* UNO product bundle showcase grid */
.uno-bundle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:24px}
.uno-bundle-item{background:rgba(46,111,106,.04);border:1px solid rgba(46,111,106,.15);border-radius:3px;padding:14px 16px;transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.uno-bundle-item:hover{transform:translateY(-3px);border-color:var(--uno);background:rgba(46,111,106,.09)}
.uno-bundle-item .ub-tag{font-size:10.5px;letter-spacing:.08em;font-weight:600;text-transform:uppercase;color:var(--uno);margin-bottom:4px;display:block}
.uno-bundle-item .ub-title{font-family:"Cormorant Garamond",serif;font-size:18px;font-weight:500;color:var(--forest-900);line-height:1.25}
.uno-bundle-item .ub-desc{font-size:12.5px;color:var(--text-secondary);margin-top:4px;line-height:1.4}
.bmedia.txt{display:flex;align-items:center;justify-content:center;padding:56px 40px;min-height:340px;text-align:center}
.bmedia.txt p{font-family:"Cormorant Garamond",serif;font-size:clamp(21px,2.3vw,28px);line-height:1.36;color:var(--b);max-width:20ch;margin:0}

/* ============ 05 SCIENCE / 06 PLANET ============ */
.zero{background:var(--forest-900);color:#fff}
.zero p{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(32px,5.4vw,72px);line-height:1.14;letter-spacing:-.015em;max-width:16ch}
.quote{background:var(--forest-900);color:var(--sage-200)}
.quote p{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(22px,2.7vw,32px);line-height:1.5;max-width:34ch;color:#fff}
.two{display:grid;gap:52px;margin-top:60px}
@media(min-width:820px){.two{grid-template-columns:1fr 1fr;gap:72px}}
.two h3{font-size:clamp(24px,2.6vw,34px);color:var(--forest-900)}
.two p{margin-top:14px;color:var(--text-secondary);max-width:42ch}
.three{display:grid;gap:44px;margin-top:60px;counter-reset:c}
@media(min-width:820px){.three{grid-template-columns:repeat(3,1fr)}}
.three .it{position:relative;padding-top:14px}
.three .it::before{counter-increment:c;content:counter(c);position:absolute;top:-34px;left:-6px;
  font-family:"Cormorant Garamond",serif;font-size:96px;line-height:1;color:var(--forest-500);opacity:.15;z-index:-1}
.three h3{font-size:21px;color:var(--forest-900)}
.three p{margin-top:12px;color:var(--text-secondary);font-size:15px;line-height:1.65}
/* a wide band, a different shape from the splits either side of it */
.band-im{margin-top:58px;overflow:hidden}
.band-im img{width:100%;transform:scale(1.05);transition:transform 1.4s var(--ease)}
.band-im.in img{transform:scale(1)}
/* the pet line, shown rather than only listed */
.petfig{margin:32px 0 0;max-width:430px}
.petfig img{width:100%}
.petfig figcaption{margin-top:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-500)}
.split{display:grid;gap:48px;align-items:center;margin-top:66px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:80px}}
.split .im{overflow:hidden}
.split .im img{width:100%;transform:scale(1.06);transition:transform 1.1s var(--ease)}
.split.in .im img{transform:scale(1)}
.split p+p{margin-top:20px}

/* ============ FAQ ============ */
.faq{margin-top:52px;border-top:1px solid rgba(44,90,60,.18)}
.faq details{border-bottom:1px solid rgba(44,90,60,.18)}
.faq summary{cursor:pointer;list-style:none;padding:26px 0;font-size:19px;color:var(--forest-900);
  font-family:"Cormorant Garamond",serif;font-weight:500;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--forest-500);font-family:"Instrument Sans",sans-serif;font-size:20px;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 0 26px;color:var(--text-secondary);max-width:62ch;font-size:16px}

/* ============ FORM ============ */
.partner{background:var(--canvas-2)}
.form{margin-top:52px;max-width:640px;display:grid;gap:22px}
.f label{display:block;font-size:13px;letter-spacing:.04em;color:var(--forest-700);margin-bottom:8px}
.f input,.f select,.f textarea{
  width:100%;min-height:52px;padding:14px 16px;border:1px solid rgba(44,90,60,.42);border-radius:2px;
  background:var(--panel);color:var(--text-primary);font:400 16px/1.5 "Instrument Sans",sans-serif;
  transition:border-color .22s var(--ease-2)}
.f textarea{min-height:132px;resize:vertical}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--forest-700)}
.f2{display:grid;gap:22px}
@media(min-width:660px){.f2{grid-template-columns:1fr 1fr}}
fieldset{border:0;margin:0;padding:0}
legend{font-size:13px;letter-spacing:.04em;color:var(--forest-700);margin-bottom:12px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{display:inline-flex;align-items:center;gap:8px;margin:0;padding:11px 16px;
  border:1px solid rgba(44,90,60,.42);border-radius:2px;cursor:pointer;font-size:14px;color:var(--text-primary);
  transition:border-color .22s var(--ease-2),background .22s var(--ease-2)}
.chips label:hover{border-color:var(--forest-700);background:rgba(44,90,60,.05)}
.chips input{width:auto;min-height:0;margin:0}
.ok{display:none;padding:26px;background:var(--panel);border-left:2px solid var(--accent);max-width:640px;margin-top:52px}
.ok p{color:var(--forest-900);font-size:18px}
.sent .form{display:none}
.sent .ok{display:block}
.dl{margin-top:44px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ============ FOOTER ============ */
footer{background:var(--forest-900);color:var(--sage-200);padding:88px 0 40px;font-size:15px}
footer h2{color:#fff;max-width:16ch}
.offices{display:grid;gap:38px;margin-top:52px}
@media(min-width:760px){.offices{grid-template-columns:repeat(3,1fr)}}
.offices h3{color:#fff;font-size:17px;font-family:"Instrument Sans",sans-serif;font-weight:500}
.offices p{margin-top:10px;line-height:1.7}
.tbd{color:var(--accent);font-size:13px;letter-spacing:.03em}
.fbot{margin-top:60px;padding-top:34px;border-top:1px solid rgba(184,201,181,.22);
  display:flex;flex-wrap:wrap;gap:24px 34px;justify-content:space-between;align-items:center;font-size:13px}
.fnav{display:flex;flex-wrap:wrap;gap:20px}
.fnav a,.fsoc a{color:var(--sage-200);text-decoration:none;transition:color .22s var(--ease-2)}
.fnav a:hover,.fsoc a:hover{color:#fff}
.fsoc{display:flex;flex-wrap:wrap;gap:20px}
.flock{height:104px;width:auto;flex:none;margin-right:16px}
@media(max-width:560px){.flock{height:76px;margin-right:0}}

/* ============ THE STATIC-HERO GATES ============
   Only two cases now. These selectors must stay character-identical to the
   GATES array in script.js, or CSS and JS disagree about which hero is live
   and one of them loads assets the other has hidden. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:flex}
}
@media (max-height:560px){.ring,.cue{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rv{opacity:1;transform:none}
  .stg>*{opacity:1;transform:none}
  .ch .l{transform:scaleX(1)}
  .brule{transform:scaleX(1)}
  .bmedia img,.split .im img,.osplit .im img,.band-im img{transform:scale(1)}
  .facts li{opacity:1;transform:none}
  .hold .leaffill{transform:scaleY(1);opacity:1}
  .hold .prog{stroke-dashoffset:0}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ===================================================================
   DARK-FOOTAGE HERO
   The kernel-to-bottle film is lit dark on the left, where the caption
   lane sits, so the hero's text system is inverted: light type, a dark
   scrim instead of a bright one, and a dark text shadow. Scoped to the
   hero and the static hero only, so the rest of the cream page is
   untouched.
   =================================================================== */
.hero,.static-hero{
  --tshadow:0 1px 2px rgba(18,12,4,.92),0 3px 14px rgba(18,12,4,.74),0 12px 46px rgba(18,12,4,.82);
}
.scrim{
  background:radial-gradient(ellipse 112% 86% at 30% 42%,rgba(14,10,4,.38) 0%,rgba(14,10,4,.14) 44%,rgba(14,10,4,0) 66%);
}
.band{color:#FCF7F0}
.band::before{
  background:radial-gradient(ellipse 76% 64% at 42% 50%,rgba(14,10,4,.72) 0%,rgba(14,10,4,.48) 46%,rgba(14,10,4,0) 76%);
}
.band .sub{color:rgba(247,238,226,.88)}
.band .btn-2{color:#fff;border-color:rgba(255,255,255,.52)}
.band .btn-2:hover{border-color:#fff;background:rgba(255,255,255,.10)}
.ring,.cue{color:rgba(252,247,240,.92)}

/* the static hero sits on the film's closing frame, so it inverts too */
.static-hero{color:#FCF7F0;text-shadow:var(--tshadow)}
.static-hero .bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(14,10,4,.62) 0%,rgba(14,10,4,.34) 46%,rgba(14,10,4,0) 78%);
}
.static-hero h1{color:#FCF7F0}
.static-hero .lede{color:rgba(247,238,226,.88)}
.static-hero .btn-2{color:#fff;border-color:rgba(255,255,255,.52)}
.static-hero .btn-2:hover{border-color:#fff;background:rgba(255,255,255,.10)}
.static-hero .btn{text-shadow:none}

/* The homepage header floats over the dark hero footage until it goes solid,
   so its type inverts there only. Other pages open on the cream canvas and
   keep the dark header. */
.home .hdr:not(.solid) .brand{color:#FCF7F0}
.home .hdr:not(.solid) .bslogan{color:rgba(247,238,226,.82)}
.home .hdr:not(.solid) .brand:hover .bslogan{color:#fff}
.home .hdr:not(.solid) .nav a{color:rgba(247,238,226,.86)}
.home .hdr:not(.solid) .nav a:hover{color:#fff}
.home .hdr:not(.solid) .mk-disc{fill:#F8EFE7}
.home .hdr:not(.solid) .mk-leaf{fill:#2C5A3C}
.home .hdr:not(.solid) .mk-vein{stroke:#F8EFE7}
.home .hdr:not(.solid) .btn-1{background:#F8EFE7;color:var(--forest-900)}
.home .hdr:not(.solid) .btn-1:hover{background:#fff}


/* ===================================================================
   SCROLL-DRIVEN VIDEO: RESPONSIVE FRAMING
   The footage is 1280x720. It is never stretched: object-fit stays cover
   and only object-position moves, so the NAWAH bottle survives every crop.
   Values below were measured against the real frames, not guessed.
   The bottle sits at roughly 62% of the frame width.
   =================================================================== */

/* Wide desktop: the crop is mild (about 10% off the sides), so centre holds */
#hero{object-fit:cover;object-position:52% 50%}

/* Laptops near the video's own 16:9 ratio: almost nothing is cropped */
@media(min-width:1024px) and (max-width:1439px){
  #hero{object-position:55% 50%}
}

/* Landscape tablets: taller relative to width, so the sides lose more */
@media(min-width:768px) and (max-width:1023px){
  #hero{object-position:60% 50%}
}

/* The static hero carries the phone experience, since phones never load the
   video. Its crop is far more aggressive, so the framing shifts right to keep
   the bottle whole: at 50% the bottle is cut, at 70% it is clear. */
.static-hero .bg{background-position:70% center}
@media(max-width:480px){
  .static-hero .bg{background-position:72% center}
}
/* Very tall, narrow phones crop hardest of all */
@media(max-width:400px) and (min-aspect-ratio:1/2.1){
  .static-hero .bg{background-position:74% center}
}

/* Modern viewport units so mobile browser chrome does not cause a jump */
.stage{height:100vh;height:100svh}
.static-hero{min-height:100vh;min-height:100dvh}

/* ===================================================================
   OFFICE CARDS
   Four markets, stated plainly. The three physical offices carry a pin,
   the digital portal a globe, so a buyer scanning the page can tell at a
   glance which entries are places and which is a channel.
   =================================================================== */
.offices{display:grid;gap:18px;margin-top:52px}
@media(min-width:700px){.offices{grid-template-columns:1fr 1fr;gap:20px}}
.ocard{
  padding:26px 28px;border:1px solid rgba(184,201,181,.22);border-radius:10px;
  background:rgba(255,255,255,.035);
  transition:border-color .3s var(--ease-2),background .3s var(--ease-2);
}
.ocard:hover{border-color:rgba(201,169,97,.42);background:rgba(255,255,255,.055)}
.ocard h3{
  display:flex;align-items:center;gap:9px;
  font-family:"Instrument Sans",system-ui,sans-serif;font-weight:500;font-size:16px;
  letter-spacing:0;color:#fff;margin-bottom:11px;
}
.ocard p{color:var(--sage-200);font-size:14.5px;line-height:1.66;margin:0}
.oico{width:17px;height:17px;flex:none;fill:var(--accent);stroke:none}
.oico .hole{fill:var(--forest-900)}
.oico.globe{fill:none;stroke:var(--accent);stroke-width:1.5}
.oico.globe circle,.oico.globe ellipse,.oico.globe path{fill:none;stroke:var(--accent)}
/* an underlined link that earns its underline on hover */
.ulink{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(201,169,97,.4);
  transition:border-color .25s var(--ease-2)}
.ulink:hover{border-bottom-color:var(--accent)}
.fsoc{display:flex;gap:22px}
.fsoc a{color:var(--sage-200);text-decoration:none;transition:color .22s var(--ease-2)}
.fsoc a:hover{color:#fff}


/* ===================================================================
   HEADER LOCKUP
   The supplied artwork knocks the leaf out to transparent, which reads as a
   hole over the dark hero video, so the file is flattened on white and the
   panel's rounded ends are restored here in CSS instead. Class is .hdr-logo,
   not .blogo, because .blogo already belongs to the brand logos further down
   the page.
   =================================================================== */
.brand{display:flex;align-items:center;text-decoration:none;line-height:0}
.hdr-logo{
  height:64px;width:auto;display:block;
  border-radius:3% 19% 19% 3% / 7% 50% 50% 7%;
  transform-origin:left center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease-2);
  animation:logoIn 1s var(--ease) backwards;
}
.brand:hover .hdr-logo{transform:scale(1.03)}
.hdr.solid .hdr-logo{box-shadow:0 2px 10px rgba(27,61,40,.16)}
@keyframes logoIn{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:900px){.hdr-logo{height:46px}}
@media(max-width:560px){.hdr-logo{height:38px}}
@media(max-width:380px){.hdr-logo{height:33px}}
@media(prefers-reduced-motion:reduce){
  .hdr-logo{animation:none}
  .brand:hover .hdr-logo{transform:none}
}

/* ===================================================================
   THE MOBILE HERO
   98% of this site's visitors arrive on a phone, so portrait is the primary
   design, not a squeezed copy of the desktop one.

   The film is 16:9. Cover-cropping that into a tall portrait window shows
   barely a fifth of its width, which blew the bottle up to fill the screen and
   put the headline straight across the product. So on phones the stage splits:
   the film keeps a landscape-ish window at the top where the whole bottle
   reads, and the words sit underneath it on the cream, where nothing competes
   with them. The film still scrubs with the scroll exactly as on desktop.
   =================================================================== */
@media (max-width:900px){
  .hero{height:420svh}                 /* shorter journey: thumbs move faster than wheels */
  .stage{display:block;background:var(--canvas)}

  /* the film's window, pinned to the top of the stage */
  .poster,#hero{
    top:0;bottom:auto;height:56svh;
    object-position:68% 50%;            /* keeps the bottle inside the crop */
  }
  .poster{background-position:68% 50%}
  .scrim{
    top:0;bottom:auto;height:56svh;
    background:linear-gradient(180deg,rgba(14,10,4,.30) 0%,rgba(14,10,4,0) 34%,rgba(14,10,4,0) 72%,rgba(248,239,231,.55) 92%,var(--canvas) 100%);
  }

  /* the words, below the film, on the cream: dark type, no scrim needed */
  .band{
    top:auto;bottom:0;left:0;right:0;width:auto;
    padding:5svh 24px calc(26px + env(safe-area-inset-bottom,0px));
    height:44svh;display:flex;flex-direction:column;justify-content:flex-start;
    color:var(--forest-900);text-shadow:none;
  }
  .band::before{display:none}          /* the dark radial belongs to footage, not cream */
  .band .line{font-size:clamp(30px,7.6vw,44px);line-height:1.08}
  .band .sub{color:var(--text-secondary);font-size:15px;max-width:none;margin-top:14px}
  .band .row{margin-top:22px;gap:10px}
  .band .btn{flex:1 1 auto;justify-content:center}
  .band .btn-2{color:var(--forest-900);border-color:rgba(44,90,60,.45)}

  /* the loading ring belongs over the film, not over the copy */
  .ring,.cue{top:calc(56svh - 62px);bottom:auto;right:20px;color:rgba(252,247,240,.92)}
}

/* very small phones: give the film a little less, the words a little more */
@media (max-width:380px){
  .poster,#hero,.scrim{height:50svh}
  .band{height:48svh}
  .ring,.cue{top:calc(50svh - 58px)}
}

/* tablets in portrait sit between the two: more film, words still clear of it */
@media (min-width:901px) and (max-width:1024px) and (orientation:portrait){
  .hero{height:460svh}
  .stage{display:block}
  .poster,#hero{top:0;bottom:auto;height:62svh;object-position:64% 50%}
  .poster{background-position:64% 50%}
  .scrim{top:0;bottom:auto;height:62svh;
    background:linear-gradient(180deg,rgba(14,10,4,.26) 0%,rgba(14,10,4,0) 36%,rgba(248,239,231,.5) 93%,var(--canvas) 100%)}
  .band{top:auto;bottom:0;left:0;right:0;width:auto;height:38svh;
    padding:4svh 40px 40px;display:flex;flex-direction:column;justify-content:flex-start;
    color:var(--forest-900);text-shadow:none}
  .band::before{display:none}
  .band .sub{color:var(--text-secondary);max-width:56ch}
  .band .btn-2{color:var(--forest-900);border-color:rgba(44,90,60,.45)}
  .ring,.cue{top:calc(62svh - 64px);bottom:auto;right:28px}
}

/* ===================================================================
   MOBILE NAVIGATION
   There was none: the desktop nav simply hid below 1040px, so on the device
   98% of visitors actually use, the only way through the site was the one
   header button. This is the fix.
   =================================================================== */
.navbtn{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;margin-left:auto;
  background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
@media(min-width:1040px){.navbtn{display:none}}
.navbtn span{
  display:block;height:1.5px;width:100%;background:var(--forest-900);border-radius:2px;
  transition:transform .34s var(--ease),opacity .22s var(--ease-2);
}
/* over the dark top of the film the bars need to be light */
.hdr:not(.solid) .navbtn span{background:#FCF7F0}
.navbtn[aria-expanded="true"] span{background:var(--forest-900)}
.navbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.navbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobnav{
  position:fixed;inset:0;z-index:39;
  background:var(--canvas);
  padding:calc(86px + env(safe-area-inset-top,0px)) 24px calc(32px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;transition:opacity .3s var(--ease-2);
  overflow-y:auto;overscroll-behavior:contain;
}
.mobnav.open{opacity:1}
@media(min-width:1040px){.mobnav{display:none}}
.mobnav nav{display:flex;flex-direction:column;gap:2px}
.mobnav a{
  display:flex;align-items:center;min-height:58px;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:32px;line-height:1.1;
  color:var(--forest-900);text-decoration:none;
  border-bottom:1px solid rgba(44,90,60,.12);
  opacity:0;transform:translateY(14px);
}
.mobnav.open a{opacity:1;transform:none;transition:opacity .44s var(--ease),transform .44s var(--ease)}
.mobnav.open a:nth-child(1){transition-delay:.05s}
.mobnav.open a:nth-child(2){transition-delay:.10s}
.mobnav.open a:nth-child(3){transition-delay:.15s}
.mobnav.open a:nth-child(4){transition-delay:.20s}
.mobnav.open a:nth-child(5){transition-delay:.25s}
.mobnav.open a:nth-child(6){transition-delay:.30s}
.mobnav.open a:nth-child(n+7){transition-delay:.35s}
.mobnav a.mcta{
  margin-top:26px;border-bottom:0;justify-content:center;
  font-family:"Instrument Sans",system-ui,sans-serif;font-size:16px;font-weight:500;
  background:var(--forest-700);color:#fff;border-radius:3px;min-height:56px;
}
body.navopen{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .mobnav,.mobnav a,.navbtn span{transition:none}
  .mobnav a{opacity:1;transform:none}
}

/* ===================================================================
   TOUCH TARGETS
   The audit found footer links at 22px and inline links at 20px. Anything a
   thumb has to hit gets 44px of height on a coarse pointer, added with
   padding so nothing moves on desktop.
   =================================================================== */
@media(pointer:coarse){
  .fnav a,.fsoc a{display:inline-flex;align-items:center;min-height:44px}
  .rail{display:none}                  /* the side rail is a mouse affordance */
  .ulink{display:inline-flex;align-items:center;min-height:44px}
  .blist li{min-height:40px;display:inline-flex;align-items:center}
}

/* the logo is a tap target too: it goes home */
@media(pointer:coarse){
  .brand{min-height:44px;align-items:center}
}

/* ===================================================================
   HEADER WHILE THE MENU IS OPEN
   The transparent header styles itself for the dark film behind it. Once the
   menu panel covers that film with cream, those light-on-dark styles make the
   close icon and the CTA nearly invisible. While the panel is open the header
   is treated as if it were solid. Selectors here carry .navopen on the body so
   they outrank the .home .hdr:not(.solid) block above.
   =================================================================== */
body.navopen .hdr{background:transparent;border-bottom-color:transparent}
body.navopen .hdr .navbtn span{background:var(--forest-900)}
body.navopen.home .hdr:not(.solid) .btn-1{background:var(--forest-700);color:#fff}
body.navopen.home .hdr:not(.solid) .btn-1:hover{background:var(--forest-900)}
body.navopen.home .hdr:not(.solid) .brand{color:var(--forest-900)}