/* THUNDER HONEY v3 design system. One typeface, three surfaces, glass, no grey, no icons.
   Surfaces: navy #0A2A4E, paper #FBFAF7, stone #EFEEE9, white. Navy is the only accent colour (29 Sep 2026: no light blue anywhere).
   On paper, stone and white: primary buttons, selected states and small accents are navy, with white type.
   On navy: the primary button is white with navy type, small accents are white or soft silver (white at about 72%).
   Light is warm white falling to stone; shadows are soft and navy-tinted.
   Glass is SILVER (29 Sep 2026, Joakim: "make it more like that silver metallic"): brushed aluminium, not white and never blue.
   A cool neutral grey tint, a faint diagonal sheen, a fine silver hairline, blur behind. New glass uses the .glass classes or the
   --glass-* tokens below (background:var(--glass-light-bg) on light grounds, var(--glass-bg) on navy and photos), never its own whites.
   A fine film grain sits over the whole site (body::after, end of this file), so whites read as grainy white, as on paper. */

@font-face{font-family:"Unica";src:url("fonts/unica-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Unica";src:url("fonts/unica-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Unica";src:url("fonts/unica-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Unica";src:url("fonts/unica-300i.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Unica";src:url("fonts/unica-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --navy:#0A2A4E; --navy-deep:#071E3A; --paper:#FBFAF7; --stone:#EFEEE9; --cobalt:#0047AB; --white:#FFFFFF;
  --silver:rgba(255,255,255,.72); --hair-inv:rgba(255,255,255,.55); /* small accents and accent hairlines on navy */
  --lf:236,234,227; /* the light-field colour on light grounds, used as rgba(var(--lf),a): a warm stone shade on paper and white, white on stone (.sec--stone) */
  --ink:#0A2A4E; --ink-2:rgba(10,42,78,.72); --ink-3:rgba(10,42,78,.52);
  --snow:#FFFFFF; --snow-2:rgba(255,255,255,.76); --snow-3:rgba(255,255,255,.56);
  --line:rgba(10,42,78,.14); --line-inv:rgba(255,255,255,.18);
  /* silver glass. --alu is the aluminium tint (a cool neutral grey, never blue); --sheen is the faint diagonal highlight that makes it read as metal.
     The -bg tokens are full backgrounds (gradients), so use them with background:, never background-color:. */
  --alu:229,231,234;
  --sheen:linear-gradient(115deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.50) 38%,rgba(255,255,255,.16) 52%,rgba(255,255,255,0) 68%);
  --sheen-inv:linear-gradient(115deg,rgba(255,255,255,0) 14%,rgba(255,255,255,.13) 36%,rgba(255,255,255,.035) 52%,rgba(255,255,255,0) 68%);
  --glass-bg:var(--sheen-inv),linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(218,222,227,.07) 52%,rgba(255,255,255,.11) 100%);
  --glass-line:rgba(255,255,255,.22);
  --glass-light-bg:var(--sheen),linear-gradient(158deg,rgba(252,252,253,.80) 0%,rgba(var(--alu),.66) 46%,rgba(221,224,228,.60) 72%,rgba(240,241,243,.72) 100%);
  --glass-light-line:rgba(160,167,176,.42);
  --glass-deep-bg:var(--sheen-inv),linear-gradient(160deg,rgba(16,50,90,.56) 0%,rgba(10,42,78,.46) 50%,rgba(7,30,58,.58) 100%);
  --glass-blur:blur(24px) saturate(1.08);
  /* edges: a lit top line inside, a silver hairline outside, a soft navy lift */
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(120,128,138,.10);
  --glass-hi-inv:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(255,255,255,.05);
  --glass-lift:0 24px 60px rgba(7,30,58,.12),0 2px 8px rgba(7,30,58,.05);
  --r:20px; --r-lg:28px; --r-pill:999px;
  --wrap:1240px; --gutter:clamp(20px,3vw,40px);
  /* one type scale and one vertical rhythm for every page: pages use these tokens, never their own H1/H2 sizes or section padding */
  --h1:clamp(44px,6.67vw,96px); --h1-sm:clamp(38px,3.6vw,54px); /* --h1-sm: the product page H1 only, smaller on purpose */
  --h2:clamp(38px,4.2vw,60px); --h2-lg:clamp(42px,5vw,72px);   /* --h2-lg: closing finale headlines only */
  --sec-y:clamp(80px,9vw,128px);
  --nav-h:76px;
  --ease:cubic-bezier(.165,.84,.44,1); --ease-out:cubic-bezier(.22,1,.36,1);
  --font:"Unica","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:400;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--navy);color:#FFFFFF}
.sec--navy ::selection,.on-navy ::selection{background:#FFFFFF;color:var(--navy)}
:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.sec--paper :focus-visible,.sec--stone :focus-visible,.sec--white :focus-visible{outline-color:var(--navy)}

/* ---------- type ---------- */
.h1{font-weight:300;font-size:var(--h1);line-height:1.02;letter-spacing:-.022em}
.h2{font-weight:300;font-size:var(--h2);line-height:1.08;letter-spacing:-.02em}
.h1--sm{font-size:var(--h1-sm)}
.h2--lg{font-size:var(--h2-lg)}
.h3{font-weight:400;font-size:clamp(22px,2.2vw,28px);line-height:1.22;letter-spacing:-.012em}
.h4{font-weight:500;font-size:18px;line-height:1.3}
.lead{font-weight:300;font-size:clamp(19px,1.6vw,22px);line-height:1.45}
.small{font-size:14px;line-height:1.5}
.eyebrow{font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sec--navy .eyebrow,.on-navy .eyebrow{color:var(--snow-3)}
.muted{color:var(--ink-2)}
.sec--navy .muted,.on-navy .muted{color:var(--snow-2)}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.measure{max-width:34em}
.measure-l{max-width:44em}
.center{text-align:center}
.center .measure,.center .measure-l{margin-left:auto;margin-right:auto}

/* ---------- layout ---------- */
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.sec{position:relative;padding:var(--sec-y) 0}
.sec--navy{background:var(--navy);color:var(--snow)}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--stone{background:var(--stone);color:var(--ink);--lf:255,255,255}
.sec--white{background:#FFFFFF;color:var(--ink)}
/* the primary button inverts on navy grounds: white pill, navy type */
.sec--navy,.on-navy{--btn-bg:#FFFFFF;--btn-fg:var(--navy);--btn-hover:#F3F2EE;--btn-hi:1}
.sec--tight{padding:clamp(40px,5vw,72px) 0}
.sechead{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,56px)}
.sechead--split{grid-template-columns:1.1fr .9fr;align-items:end;gap:32px}
.grid{display:grid;gap:clamp(16px,2vw,28px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.stack{display:grid;gap:12px}
.rule{height:1px;background:var(--line);border:0;margin:0}
.sec--navy .rule,.on-navy .rule{background:var(--line-inv)}
.rule--ice{height:2px;background:var(--navy)}
.sec--navy .rule--ice,.on-navy .rule--ice{background:#FFFFFF}

/* ---------- glass ---------- */
.glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--glass-hi-inv)}
.glass--light{background:var(--glass-light-bg);border-color:var(--glass-light-line);color:var(--ink);box-shadow:var(--glass-hi)} /* add var(--glass-lift) where the card should float */
.glass--deep{background:var(--glass-deep-bg);border-color:var(--glass-line);color:var(--snow);box-shadow:var(--glass-hi-inv)}
.glass--pad{padding:clamp(24px,3vw,40px)}
.glass--r{border-radius:var(--r)}

/* ---------- media ---------- */
.ph{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--stone)}
.ph>img,.ph>video{width:100%;height:100%;object-fit:cover}
.ph--45{aspect-ratio:4/5}
.ph--34{aspect-ratio:3/4}
.ph--11{aspect-ratio:1/1}
.ph--169{aspect-ratio:16/9}
.ph--32{aspect-ratio:3/2}
.ph--tall{aspect-ratio:9/13}
.sec--navy .ph{background:var(--navy-deep)}
/* photo with a glass card overlapping it, the retreat-page composition */
.overlap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.overlap>.ph{grid-column:1/2}
.overlap>.glass{grid-column:2/3;margin-left:calc(-1*clamp(40px,8vw,140px));position:relative;z-index:2}
.overlap--flip>.ph{grid-column:2/3;order:2}
.overlap--flip>.glass{grid-column:1/2;order:1;margin-left:0;margin-right:calc(-1*clamp(40px,8vw,140px))}
/* tap-to-play real video (data-ugc): the poster sits over a video that downloads nothing until it is tapped; a round dark play mark, sound on tap.
   Markup: <div class="tv" data-ugc role="button" tabindex="0" aria-label="Play video: ..."><video data-src="CDN mp4" playsinline preload="none"></video>
   <img src="poster" alt="..." loading="lazy"><span class="tv__play" aria-hidden="true"></span></div>. data-start / data-end on the video play a window of the clip. */
.tv{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-deep);cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;
  box-shadow:0 40px 90px rgba(7,30,58,.30),0 2px 10px rgba(7,30,58,.12)}
.tv--34{aspect-ratio:3/4}
.tv--11{aspect-ratio:1/1}
.tv>video,.tv>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tv>img{z-index:1;transition:opacity .5s var(--ease),transform 1.4s var(--ease-out)}
.tv:hover>img{transform:scale(1.035)}
.tv.is-playing>img{opacity:0;pointer-events:none}
.tv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(7,30,58,0) 60%,rgba(7,30,58,.34));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:opacity .4s var(--ease)}
.tv.is-playing::after{opacity:0}
.tv__play{position:absolute;z-index:2;left:50%;top:50%;width:68px;height:68px;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:rgba(7,30,58,.62);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,.26);
  box-shadow:0 16px 36px rgba(3,14,32,.34);transition:opacity .35s var(--ease),transform .45s var(--ease-out)}
.tv__play::before{content:"";position:absolute;left:27px;top:22px;border-style:solid;border-width:12px 0 12px 18px;border-color:transparent transparent transparent #FFFFFF}
.tv:hover .tv__play{transform:scale(1.08)}
.tv__cap{position:absolute;z-index:2;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:9px 14px;border-radius:var(--r-pill);font-weight:500;font-size:15px;line-height:1.25;color:var(--snow);pointer-events:none;
  background:rgba(10,42,78,.46);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.2);transition:opacity .35s var(--ease)}
.tv.is-playing .tv__play,.tv.is-playing .tv__cap{opacity:0}
.tv:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px}
.sec--paper .tv:focus-visible,.sec--stone .tv:focus-visible{outline-color:var(--navy)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:var(--r-pill);font-weight:500;font-size:16px;line-height:1;white-space:nowrap;transition:transform .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.btn:hover{transform:translateY(-1px)}
/* the primary button (the class keeps its old name): navy with white type on paper, stone, white and photos;
   a ground that is navy sets --btn-bg/--btn-fg/--btn-hover (see .sec--navy) and the button turns white with navy type */
.btn--ice{background:var(--btn-bg,var(--navy));color:var(--btn-fg,#FFFFFF);box-shadow:inset 0 1px 0 rgba(255,255,255,var(--btn-hi,.16)),0 10px 26px rgba(7,30,58,.20),0 1px 3px rgba(7,30,58,.10)}
.btn--ice:hover{background:var(--btn-hover,var(--navy-deep))}
.btn--navy{background:var(--navy);color:var(--snow)}
.btn--navy:hover{background:var(--navy-deep)}
.btn--ghost{border:1px solid var(--line-inv);color:var(--snow)}
.btn--ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.sec--paper .btn--ghost,.sec--stone .btn--ghost{border-color:var(--line);color:var(--ink)}
.sec--paper .btn--ghost:hover,.sec--stone .btn--ghost:hover{background:rgba(10,42,78,.04)}
.btn--sm{height:42px;padding:0 18px;font-size:15px}
.btn .arw{font-family:var(--font);transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.link{display:inline-flex;align-items:flex-end;gap:8px;min-height:44px;font-weight:500;padding-bottom:4px;border-bottom:1px solid currentColor;transition:gap .3s var(--ease)}
.link:hover{gap:12px}
.link--ice{border-bottom-color:var(--hair-inv)}
.sec--paper .link--ice,.sec--stone .link--ice,.sec--white .link--ice{border-bottom-color:currentColor}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);display:flex;align-items:center;color:var(--snow);transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav__links{display:flex;gap:28px;font-weight:400;font-size:16px}
.nav__links a{opacity:.86;transition:opacity .3s}
.nav__links a:hover{opacity:1}
.nav__brand{display:flex;align-items:center;justify-self:center;min-height:44px;padding:0 8px}
.nav__brand svg{height:18px;width:auto;fill:currentColor}
.nav__right{display:flex;justify-content:flex-end;align-items:center;gap:22px}
.nav__right .btn{height:42px;padding:0 20px;font-size:15px}
html:not(.scrolled) body.hero-page .nav .btn--ice{background:transparent;border:1px solid var(--line-inv);color:var(--snow)}
html.scrolled .nav,.nav.is-solid{background:rgba(10,42,78,.62);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);border-bottom:1px solid var(--line-inv)}
body.nav-dark .nav:not(.is-solid){color:var(--ink)}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line-inv);position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger::before{top:17px}.burger::after{top:25px}
html.menu-open .burger::before{top:21px;transform:rotate(45deg)}
html.menu-open .burger::after{top:21px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:70;background:rgba(10,42,78,.92);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);color:var(--snow);padding:calc(var(--nav-h) + 24px) var(--gutter) 40px;display:none;flex-direction:column;gap:8px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
html.menu-open .menu{display:flex}
html.menu-open{overflow:hidden}
.menu a{font-weight:300;font-size:34px;line-height:1.2;padding:12px 0;border-bottom:1px solid var(--line-inv)}
.menu .menu__sub{font-size:20px;font-weight:400;color:var(--snow-2);padding:10px 0}
.menu .btn{margin-top:28px;justify-content:center;flex:none}

/* ---------- reveal motion ---------- */
[data-rise]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-rise].is-in{opacity:1;transform:none}
[data-fade]{opacity:0;transition:opacity 1.1s var(--ease-out)}
[data-fade].is-in{opacity:1}
[data-stagger]>*{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-stagger].is-in>*{opacity:1;transform:none}
[data-stagger].is-in>*:nth-child(2){transition-delay:.08s}
[data-stagger].is-in>*:nth-child(3){transition-delay:.16s}
[data-stagger].is-in>*:nth-child(4){transition-delay:.24s}
[data-stagger].is-in>*:nth-child(5){transition-delay:.32s}
[data-stagger].is-in>*:nth-child(6){transition-delay:.40s}
[data-stagger].is-in>*:nth-child(7){transition-delay:.48s}
[data-stagger].is-in>*:nth-child(8){transition-delay:.56s}
.settle{transform:scale(1.06);transition:transform 2.2s var(--ease-out)}
.is-in .settle,.settle.is-in{transform:scale(1)}
@media (prefers-reduced-motion:reduce){[data-rise],[data-fade],[data-stagger]>*{opacity:1;transform:none;transition:none}.settle{transform:none}
  .tv>img,.tv__play{transition:none}.tv:hover>img{transform:none}.tv:hover .tv__play{transform:none}}

/* ---------- hero ---------- */
.hero{--btn-bg:#FFFFFF;--btn-fg:var(--navy);--btn-hover:#F3F2EE;--btn-hi:1;position:relative;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;background:var(--navy-deep) center/cover no-repeat;color:var(--snow);display:grid;place-items:end start}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.hero__vid.is-live{opacity:1}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,42,78,.30) 0%,rgba(10,42,78,.06) 35%,rgba(10,42,78,.58) 100%)}
.hero__in{position:relative;z-index:2;width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;display:grid;gap:20px;justify-items:start;padding-bottom:clamp(56px,9vh,110px)}
.hero__in .h1{text-shadow:0 1px 24px rgba(0,0,0,.18)}
.hero__in .lead{color:var(--snow-2);max-width:28em}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:90;background:rgba(7,30,58,.92);display:none;place-items:center;padding:24px}
#lb.on{display:grid}
#lb img,#lb video{max-width:min(1100px,100%);max-height:86vh;width:auto;height:auto;object-fit:contain;border-radius:var(--r)}
#lb .lb__x{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line-inv);color:var(--snow);font-size:22px;line-height:1}
[data-zoom]{cursor:zoom-in}

/* ---------- video pop-up (data-pop, v3.js): a small video card opens its clip here, with sound where the clip has one ---------- */
html.vlb-open{overflow:hidden}
.vlb{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:24px;background:rgba(7,30,58,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s var(--ease)}
.vlb[hidden]{display:none}
.vlb.is-on{opacity:1}
.vlb__v{display:block;height:min(84vh,calc((100vw - 48px) * 16 / 9));width:auto;max-width:100%;aspect-ratio:9/16;object-fit:contain;border-radius:var(--r-lg);background:var(--navy-deep);
  box-shadow:0 50px 120px rgba(3,14,32,.6),0 2px 10px rgba(3,14,32,.3);transform:scale(.96);transition:transform .45s var(--ease-out)}
.vlb.is-on .vlb__v{transform:none}
.vlb__v:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px}
.vlb__x{position:absolute;top:18px;right:18px;width:48px;height:48px;border-radius:var(--r-pill);border:1px solid var(--line-inv);background:rgba(255,255,255,.06);color:var(--snow);font-size:26px;line-height:1}
.vlb__x:hover{background:rgba(255,255,255,.14)}
.vlb__x:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
/* a clip with no sound track shows no volume control */
.vlb__v[data-silent]::-webkit-media-controls-mute-button,
.vlb__v[data-silent]::-webkit-media-controls-volume-slider,
.vlb__v[data-silent]::-webkit-media-controls-volume-control-container{display:none!important}
@media (prefers-reduced-motion:reduce){.vlb,.vlb__v{transition:none}.vlb__v{transform:none}}

/* ---------- sticky cta (mobile) ---------- */
.sticky{--btn-bg:#FFFFFF;--btn-fg:var(--navy);--btn-hover:#F3F2EE;--btn-hi:1;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--sheen-inv),rgba(10,42,78,.72);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--line-inv);color:var(--snow);display:none;align-items:center;justify-content:space-between;gap:12px;transform:translateY(110%);transition:transform .5s var(--ease)}
.sticky.on{transform:none}
.sticky__t{font-size:14px;line-height:1.3}
.sticky__t b{font-weight:500;display:block;font-size:15px}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:var(--snow);padding:clamp(56px,7vw,96px) 0 32px;position:relative;overflow:hidden}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot h4{font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--snow-3);margin-bottom:14px}
.foot li{padding:6px 0;color:var(--snow-2)}
.foot .muted{color:var(--snow-2)}
.foot .eyebrow{color:var(--snow-3)}
.foot__ok{color:var(--snow-2);font-size:15px;margin-top:12px}
.foot li a:hover{color:var(--snow)}
.foot__news{display:flex;gap:8px;margin-top:16px;max-width:380px}
.foot__news input{flex:1;height:48px;border-radius:var(--r-pill);border:1px solid var(--line-inv);background:rgba(255,255,255,.06);color:var(--snow);padding:0 18px;font:inherit;font-size:15px}
.foot__news input::placeholder{color:var(--snow-3)}
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--line-inv);color:var(--snow-3);font-size:13px}
.foot__wm{position:absolute;left:50%;bottom:-2vw;transform:translateX(-50%);width:120%;opacity:.05;pointer-events:none}
.foot__wm svg{width:100%;height:auto;fill:currentColor}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--nav-h:64px}
  .nav .wrap{grid-template-columns:44px 1fr 44px}
  .nav__links{display:none}
  .nav__brand{grid-column:2;justify-self:center}
  .nav__brand svg{height:15px}
  .nav__right{grid-column:3}
  .nav__right .nav__signin,.nav__right .btn{display:none}
  .burger{display:block}
  .sechead--split,.split,.grid-2,.grid-3{grid-template-columns:1fr}
  .overlap,.overlap--flip{grid-template-columns:1fr}
  .overlap>.ph,.overlap>.glass,.overlap--flip>.ph,.overlap--flip>.glass{grid-column:1/2;margin:0;order:0}
  .overlap>.glass{margin-top:-48px;width:calc(100% - 24px);margin-inline:auto}
  .sticky{display:flex}
  .eyebrow,.small,.sticky__t{font-size:15px}
  .foot{padding-bottom:calc(32px + 84px + env(safe-area-inset-bottom))}
  .hero{min-height:560px}
}
@media (max-width:600px){
  body{font-size:16px}
  .grid-4{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .btn{height:50px;padding:0 22px}
}
@media (max-width:380px){
  /* at 360 the sticky bar keeps "Thunder Honey Daylight" and the price each on one line next to the button */
  .sticky{gap:10px}
  .sticky .btn--sm{padding:0 15px}
}

/* ---------- cookie banner (shared th-consent.js) in v3 tokens: silver frosted glass, navy type, a navy Accept button ---------- */
.th-ck{font-family:var(--font)!important;background:var(--glass-light-bg)!important;-webkit-backdrop-filter:blur(26px) saturate(1.08)!important;backdrop-filter:blur(26px) saturate(1.08)!important;border:1px solid var(--glass-light-line)!important;border-radius:var(--r-lg)!important;
  box-shadow:var(--glass-hi),0 30px 80px rgba(7,30,58,.18),0 2px 8px rgba(7,30,58,.06)!important;color:var(--navy)!important}
.th-ck *{font-family:var(--font)!important;color:var(--navy)!important}
.th-ck p,.th-ck__desc,.th-ck__name{font-size:15px!important;line-height:1.5!important}
.th-ck p,.th-ck__desc,.th-ck__lock{color:var(--ink-2)!important}
.th-ck a{color:var(--navy)!important;text-decoration:underline}
.th-ck__btn{border-radius:var(--r-pill)!important;min-height:44px!important;padding:12px 18px!important;font-size:15px!important;font-weight:500!important;border:1px solid rgba(10,42,78,.22)!important;background:rgba(255,255,255,.55)!important;box-shadow:none!important}
.th-ck__btn.th-ck__yes{background:var(--navy)!important;color:#FFFFFF!important;border-color:var(--navy)!important;box-shadow:0 8px 20px rgba(7,30,58,.20)!important}
.th-ck__save{min-height:44px!important;border-color:rgba(10,42,78,.22)!important;background:rgba(255,255,255,.7)!important;font-weight:500!important}
.th-ck__opt input{accent-color:var(--navy)!important}
.th-ck :focus-visible{outline:2px solid var(--navy)!important;outline-offset:2px!important}
.th-ck__more{min-height:44px!important;display:inline-flex!important;align-items:center!important}
.th-ck__panel,.th-ck-panel{background:transparent!important;border-color:rgba(10,42,78,.10)!important}
/* while the banner is open (first visit) the mobile sticky bar stays tucked away, so the two never stack at the bottom */
body:has(> .th-ck) .sticky{transform:translateY(110%)!important;pointer-events:none}

/* ---------- silver glass on the homepage and product page surfaces that were built with their own white glass ----------
   Only the fill and the hairline change (background and border colour); each page keeps its own blur, radius and shadow.
   body + id + class outranks the pages' own id + class rules, while their :hover, [open] and .is-on states still win.
   Selected states stay as decided: the chosen plan is white with a 2px navy edge. #p-ben is left to its own section. */
body :is(#s-product .pd-chip,#s-product .pd-kit,#s-product .pd-c,#s-product .plan,#s-mushrooms .ing__arw,#s-proof .pf-rev,#s-proof .pf-fact,
  #s-founders .fd-card,#s-faq .faq-item,#p-buy .pb-zoom,#p-buy .pb-nav,#p-buy .pb-kit,#p-buy .plan,#p-dose .pd-bars,#p-dose .pd-m__cap,
  #p-how .ph-cap,#p-rev .pr-rev,#p-rev .pr-fact,#p-faq .pq-item){background:var(--glass-light-bg);border-color:var(--glass-light-line)}
/* on navy and over video: the same metal, dark */
body :is(#s-energy .en-player,#p-time .pt-card,#p-facts .pf-chip){background:var(--glass-bg)}

/* ---------- film grain over the whole site ----------
   Joakim, 29 Sep 2026: "just a tiny bit of grain", so whites read as grainy white. One fixed layer above everything:
   no layout, no pointer events, painted once and moved by the compositor, so scrolling costs nothing. Off for reduced transparency and print. */
body::after{content:"";position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:2147483600;pointer-events:none;
  opacity:.06;background-size:180px 180px;transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
@media (prefers-reduced-transparency:reduce){body::after{display:none}}
@media print{body::after{display:none}}