/* HAWK MEN v2 demo: black, teal and silver glass over a moving ambient glow. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/outfit-latin-1.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/manrope-latin-0.woff2) format('woff2')}

:root{
  color-scheme:dark;
  /* HAWK MEN product colour system */
  --obsidian:#050A0C; --midnight:#063136; --teal:#006B6F; --glow:#16D7D7; --silver:#C7CCD1; --platinum:#F2F6F6;
  --ink:#030709; --silver-hi:#F2F6F6; --text:#F2F6F6; --muted:#C3CBCE; --stone:#C7CCD1;
  --glass:rgba(199,204,209,.05); --glass-hi:rgba(6,49,54,.32);
  --edge:rgba(199,204,209,.14); --edge-teal:rgba(22,215,215,.38);
  --ease:cubic-bezier(.16,1,.3,1);
  --display:'Outfit',system-ui,sans-serif; --body:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--obsidian);color:var(--text);font:16px/1.65 var(--body)}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
::selection{background:var(--glow);color:var(--obsidian)}
:focus-visible{outline:2px solid var(--glow);outline-offset:4px}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(34px,5vw,64px);line-height:1.02;font-weight:700;color:var(--silver-hi)}
p{margin:0}
.wrap{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.skip{position:fixed;inset-inline-start:8px;top:8px;background:var(--glow);color:var(--obsidian);padding:10px 14px;z-index:99;transform:translateY(-200%)}
.skip:focus{transform:none}

/* page-wide ambient light, so glass panels have something to blur */
.ambient{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(120% 70% at 50% 0%,var(--midnight) 0%,var(--obsidian) 58%),linear-gradient(180deg,var(--obsidian) 70%,#04191c 100%),
  repeating-linear-gradient(115deg,rgba(199,204,209,.018) 0 2px,transparent 2px 6px)}
.ambient i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.75;animation:drift 26s var(--ease) infinite alternate}
.ambient i:nth-child(1){width:55vw;height:55vw;right:-12vw;top:-10vw;background:radial-gradient(circle,rgba(0,107,111,.62),rgba(6,49,54,.4) 40%,transparent 68%)}
.ambient i:nth-child(2){width:40vw;height:40vw;left:-10vw;top:45vh;background:radial-gradient(circle,rgba(6,49,54,.75),rgba(22,215,215,.06) 45%,transparent 68%);animation-duration:32s}
.ambient i:nth-child(3){width:45vw;height:45vw;right:10vw;bottom:-20vw;background:radial-gradient(circle,rgba(199,204,209,.10),transparent 65%);animation-duration:38s}
@keyframes drift{to{transform:translate3d(-6vw,6vh,0) scale(1.12)}}

/* teal cursor glow that follows the mouse everywhere */
.cursor-glow{position:fixed;left:0;top:0;z-index:70;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(22,215,215,.20) 0%,rgba(22,215,215,.07) 35%,transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .4s;will-change:transform}
.cursor-glow.on{opacity:1}

/* glass surface, with a teal edge light that follows the mouse */
.glass{position:relative;background:linear-gradient(150deg,var(--glass-hi),rgba(5,10,12,.35) 70%);border:1px solid var(--edge);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 rgba(242,246,246,.08),0 20px 60px -30px rgba(0,0,0,.8)}
.glass:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .4s;z-index:3;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),var(--glow),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass:hover:before{opacity:1}

/* progress */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--teal),var(--glow),var(--silver));transform:scaleX(0);transform-origin:0 50%}

/* header: glass bar, large logo */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:28px;padding:10px clamp(16px,3vw,40px);transition:background .4s,padding .4s var(--ease),border-color .4s;border-bottom:1px solid transparent}
.top.scrolled{background:rgba(5,10,12,.55);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--edge)}
.brand img{width:208px;transition:width .5s var(--ease)}
.top.scrolled .brand img{width:150px}
.top nav{display:flex;gap:26px;margin-left:auto}
.top nav a{text-decoration:none;font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--silver);padding:14px 0;position:relative}
.top nav a:after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--glow);transform:scaleX(0);transition:transform .35s var(--ease)}
.top nav a:hover{color:var(--text)}
.top nav a:hover:after{transform:scaleX(1)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border-radius:999px;font:700 14px/1 var(--display);letter-spacing:.04em;text-decoration:none;transition:transform .35s var(--ease),background .3s,box-shadow .35s,border-color .3s}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-solid{background:var(--glow);color:var(--obsidian);box-shadow:0 10px 40px -12px rgba(22,215,215,.7)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 50px -10px rgba(22,215,215,.9)}
.btn-line{border:1px solid var(--edge-teal);color:var(--text);background:rgba(22,215,215,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-line:hover{border-color:var(--glow);background:rgba(22,215,215,.14);box-shadow:0 0 30px -6px rgba(22,215,215,.6)}
.btn-ghost{color:var(--silver);padding-inline:6px;text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(199,204,209,.35)}
.btn-ghost:hover{color:var(--text)}
.btn-xl{min-height:60px;padding:0 32px;font-size:16px}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:170px clamp(20px,5vw,80px) 90px;overflow:hidden;isolation:isolate}
.giant{position:absolute;z-index:-1;left:-2vw;bottom:-6vw;font:800 clamp(140px,26vw,420px)/.8 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(199,204,209,.09);white-space:nowrap;user-select:none;transform:translateX(calc(var(--sy,0) * -0.15px))}
.status{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--silver);border-radius:999px;padding:10px 15px;margin-bottom:28px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 0 rgba(22,215,215,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(22,215,215,0)}100%{box-shadow:0 0 0 0 rgba(22,215,215,0)}}
.hero h1{font-size:clamp(52px,7.6vw,118px);line-height:.92;font-weight:700;letter-spacing:-.04em;color:var(--silver-hi)}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(40px) rotate(2deg);filter:blur(8px);animation:rise 1.1s var(--ease) forwards}
.hero h1 .w:nth-child(2){animation-delay:.08s}.hero h1 .w:nth-child(4){animation-delay:.2s}.hero h1 .w:nth-child(5){animation-delay:.28s}
.hero h1 .accent{color:var(--glow);text-shadow:0 0 40px rgba(22,215,215,.3)}
@keyframes rise{to{opacity:1;transform:none;filter:none}}
.lead{max-width:40ch;margin:28px 0 36px;font-size:clamp(17px,1.4vw,20px);color:var(--muted);opacity:0;animation:rise 1s .45s var(--ease) forwards}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;opacity:0;animation:rise 1s .6s var(--ease) forwards}

/* product deck: three stacked cards; click a back card to rotate it to the front */
.deck{position:relative;justify-self:center;width:min(330px,72vw);aspect-ratio:9/16;margin-right:110px;opacity:0;animation:rise 1.3s .3s var(--ease) forwards}
.card{all:unset;box-sizing:border-box;position:absolute;inset:0;border-radius:26px;overflow:hidden;cursor:pointer;border:1px solid var(--edge);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(242,246,246,.12);
  transition:transform .9s var(--ease),filter .9s var(--ease),box-shadow .5s;transform-origin:50% 100%}
.card-bg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(22px) brightness(.45) saturate(1.3)}
.card img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 92%,transparent);mask-composite:intersect;position:relative;height:78%;width:auto;max-width:86%;margin:8% auto 0;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.7))}
.card-label{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(0deg,rgba(5,10,12,.92),rgba(5,10,12,.45) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid var(--edge)}
.card-label strong{display:block;font:600 16px/1.25 var(--display);color:var(--silver-hi)}
.card-label small{font-size:12px;letter-spacing:.06em;color:var(--glow)}
.card[data-pos="0"]{z-index:3;transform:none}
.card[data-pos="1"]{z-index:2;transform:translateX(26%) rotate(6deg) scale(.9);filter:brightness(.7)}
.card[data-pos="2"]{z-index:1;transform:translateX(50%) rotate(12deg) scale(.8);filter:brightness(.5)}
.card[data-pos="1"]:hover,.card[data-pos="2"]:hover{filter:brightness(.95);box-shadow:0 0 0 1px var(--glow),0 0 50px -10px rgba(22,215,215,.7)}
.deck-hint{position:absolute;left:0;right:-40%;bottom:-44px;text-align:center;font:600 11px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.scroll-cue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;border:1px solid var(--edge);border-radius:14px;translate:-50% 0}
.scroll-cue span{position:absolute;left:50%;top:9px;width:3px;height:8px;border-radius:2px;background:var(--glow);translate:-50% 0;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{60%{transform:translateY(12px);opacity:0}}

/* marquee */
.glass-band{background:rgba(199,204,209,.04);border-block:1px solid var(--edge);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.marquee{overflow:hidden;padding:22px 0}
.track{display:flex;align-items:center;gap:38px;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font:600 clamp(20px,2.4vw,30px)/1 var(--display);letter-spacing:-.01em;color:var(--silver)}
.track b{width:9px;height:9px;transform:rotate(45deg);background:var(--glow);box-shadow:0 0 12px var(--glow)}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
section{position:relative}
.lineup,.routine,.quiz,.day,.story{padding:clamp(90px,12vw,160px) 0}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.section-head p{color:var(--muted);max-width:46ch;font-size:17px}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* products showcase */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.stage{aspect-ratio:4/5;border-radius:32px;overflow:hidden;display:grid;place-items:center}
.stage-ring{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(22,215,215,.25);animation:spin 40s linear infinite;z-index:1}
@keyframes spin{to{rotate:360deg}}
.slide{position:absolute;inset:0;margin:0;display:grid;place-items:center;opacity:0;transform:scale(.94) translateY(20px);filter:blur(6px);transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease)}
.slide.is-on{opacity:1;transform:none;filter:none}
.slide-bg{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(30px) brightness(.4);opacity:.85}
/* image sits inside the stage box at any width */
.slide img{position:absolute!important;inset:7% 10%;width:80%!important;height:86%!important;max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 92%,transparent);mask-composite:intersect;position:relative;z-index:2;height:82%;width:auto;max-width:80%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.75))}
.picker{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.picker button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto 2px;column-gap:12px;row-gap:16px;padding:18px 4px 0}
.picker .n{font:600 13px/1.6 var(--display);color:var(--muted);letter-spacing:.1em}
.picker strong{display:block;font:600 clamp(20px,2vw,26px)/1.2 var(--display);color:var(--muted);transition:color .3s}
.picker small{font-size:13px;color:var(--muted)}
.picker .bar{grid-column:1/-1;height:2px;background:var(--edge);overflow:hidden}
.picker .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--glow),var(--silver));transform:scaleX(0);transform-origin:0 50%}
.picker [aria-selected=true] strong{color:var(--silver-hi)}
.picker [aria-selected=true] .n{color:var(--glow)}
.picker button:hover strong{color:var(--text)}
.picker .desc{max-height:0;overflow:hidden;color:var(--muted);font-size:15px;padding-left:56px;transition:max-height .6s var(--ease),padding .6s var(--ease)}
.picker li.open .desc{max-height:120px;padding-block:10px 4px}
.lineup-note{margin-top:48px;color:var(--muted);font-size:17px}
.lineup-note a{color:var(--glow);text-underline-offset:5px;margin-left:6px}

/* routine */
.toggle{display:inline-grid;grid-template-columns:1fr 1fr;border-radius:999px;padding:5px;margin-bottom:44px}
.toggle button{all:unset;position:relative;z-index:1;cursor:pointer;padding:12px 26px;font:600 14px/1.4 var(--display);letter-spacing:.06em;color:var(--muted);text-align:center;transition:color .3s}
.toggle button[aria-selected=true]{color:var(--obsidian)}
.toggle .pill{position:absolute;inset:5px auto 5px 5px;width:calc(50% - 5px);border-radius:999px;background:linear-gradient(135deg,var(--silver-hi),var(--silver));box-shadow:0 0 24px -6px rgba(242,246,246,.5);transition:transform .5s var(--ease)}
.toggle.pm .pill{transform:translateX(100%)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps.pm{grid-template-columns:repeat(2,1fr)}
.step{min-height:340px;border-radius:26px;overflow:hidden;padding:30px;display:flex;flex-direction:column;isolation:isolate;transition:opacity .4s,transform .5s var(--ease)}
.step-photo{position:absolute;inset:0;z-index:-2;background-size:auto 115%;background-position:88% 40%;background-repeat:no-repeat;opacity:.22;transition:opacity .6s var(--ease),transform 1s var(--ease)}
.step:hover .step-photo{opacity:.42;transform:scale(1.04)}
.step-sun{background:radial-gradient(circle at 78% 30%,rgba(242,246,246,.38),rgba(22,215,215,.10) 30%,transparent 62%)}
.step-word{position:absolute;z-index:-1;left:22px;top:18px;font:800 clamp(46px,5.2vw,76px)/.9 var(--display);letter-spacing:-.04em;color:rgba(199,204,209,.05);-webkit-text-stroke:1px rgba(199,204,209,.28);transition:-webkit-text-stroke-color .4s}
.step:hover .step-word{-webkit-text-stroke-color:rgba(22,215,215,.65)}
.step .sec{align-self:flex-start;margin-top:auto;font:700 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--obsidian);background:var(--glow);padding:7px 11px;border-radius:999px}
.step h3{font-size:28px;margin:18px 0 8px;color:var(--silver-hi)}
.step p{color:var(--muted);min-height:3.3em;transition:opacity .3s}
.steps.swap .step p,.steps.swap .step h3{opacity:0}
.steps.pm .step-spf{display:none}

/* your day rail */
.rail{width:min(1200px,calc(100% - 40px));margin-inline:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.moment{border-radius:24px;padding:28px;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .5s var(--ease)}
.moment:hover{transform:translateY(-6px)}
.moment .time{font:700 clamp(36px,3.4vw,46px)/1 var(--display);color:transparent;-webkit-text-stroke:1px var(--silver);margin-bottom:auto;padding-bottom:24px}
.moment h3{font-size:clamp(20px,1.9vw,24px);margin:0 0 8px;color:var(--silver-hi)}
.moment p{color:var(--muted)}
.moment-cta{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 32px;background:linear-gradient(120deg,rgba(0,107,111,.45),rgba(0,107,111,.12));border-color:var(--edge-teal)}
.moment-cta h3{margin:0;font-size:clamp(20px,2.2vw,28px)}
.moment-cta a{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--glow);color:var(--obsidian);font:700 15px/1 var(--display);text-decoration:none;box-shadow:0 10px 30px -10px rgba(22,215,215,.7)}
@media (max-width:1100px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rail{grid-template-columns:1fr}.moment{min-height:0}.moment .time{padding-bottom:40px}.moment-cta{flex-direction:column;align-items:flex-start}}

/* story */
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center}
.story-img{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--edge);box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 60px -20px rgba(22,215,215,.25)}
.story-img img{width:100%;height:112%;object-fit:cover;object-position:50% 20%;transform:translateY(var(--py,0px))}
.story-copy{border-radius:28px;padding:clamp(28px,4vw,48px)}
.story-copy h2{font-size:clamp(32px,3.8vw,54px)}
.story-copy p{color:var(--muted);font-size:18px;margin:24px 0 32px;max-width:50ch}
.pillars{list-style:none;padding:0;margin:0}
.pillars li{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--edge)}
.pillars strong{font:600 20px/1.3 var(--display);color:var(--silver-hi)}
.pillars span{color:var(--muted);text-align:right}

/* CTA */
.cta{padding:clamp(80px,12vw,150px) 0}
.cta-inner{border-radius:36px;text-align:center;padding:clamp(48px,8vw,100px) 24px;background:linear-gradient(180deg,rgba(6,49,54,.55),rgba(0,107,111,.42));border-color:var(--edge-teal)}
.cta h2{font-size:clamp(46px,8vw,110px);letter-spacing:-.04em}
.cta-inner p{color:var(--muted);font-size:19px;max-width:46ch;margin:20px auto 40px}
.quiet{display:block;width:max-content;max-width:100%;margin:26px auto 0;color:var(--muted);font-size:14px;text-underline-offset:5px}
.quiet:hover{color:var(--text)}

/* footer */
.foot{border-top:1px solid var(--edge);padding:72px 0 120px;background:rgba(5,10,12,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.foot-grid{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center}
.foot-logo{width:230px}
.foot-line{font:700 26px/1.3 var(--display);color:var(--silver-hi)}
.foot-mail{display:inline-flex;align-items:center;min-height:48px;color:var(--glow);text-underline-offset:5px;font-size:19px;font-weight:600}
.foot-small{color:var(--muted);font-size:15px}
.social{display:flex;flex-wrap:wrap;gap:14px}
.social a{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;border:1px solid var(--edge);background:var(--glass);transition:border-color .3s,background .3s,box-shadow .3s}
.social a:hover{border-color:var(--glow);background:rgba(22,215,215,.1);box-shadow:0 0 24px -6px var(--glow)}
.social svg{width:27px;height:27px;fill:none;stroke:var(--silver);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* floating CTA */
.float-cta{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--glow);color:var(--obsidian);font:700 14px/1 var(--display);text-decoration:none;box-shadow:0 12px 40px -10px rgba(22,215,215,.7);transform:translateY(140%);transition:transform .5s var(--ease)}
.float-cta.show{transform:none}

/* responsive */
@media (max-width:1240px){
  .top nav{display:none}
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:150px;gap:70px}
  .deck{margin-right:90px}
  .section-head,.showcase,.story-grid{grid-template-columns:1fr}
  .stage{max-width:520px;width:100%;margin-inline:auto}
  .steps,.steps.pm{grid-template-columns:1fr}
  .top nav{display:none}
  .top .btn-line{margin-left:auto}
}
@media (max-width:640px){
  .brand img{width:150px}
  .top.scrolled .brand img{width:118px}
  .hero{padding:130px 20px 110px}
  .deck{width:min(220px,56vw);margin-right:96px}
  .card[data-pos="1"]{transform:translateX(20%) rotate(5deg) scale(.92)}
  .card[data-pos="2"]{transform:translateX(38%) rotate(10deg) scale(.84)}
  .deck-hint{right:-30%}
  .actions .btn-solid{width:100%;justify-content:center}
  .step{min-height:280px}
  .foot-grid{grid-template-columns:1fr}
  .top .btn-line{min-height:44px;padding:0 16px;font-size:13px}
}
@media (pointer:coarse){.cursor-glow{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .track{animation:none}
}

/* ===== shared additions: language switch, mobile menu, inner pages, Founding 100, RTL ===== */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/tajawal-arabic-2.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/tajawal-arabic-4.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/tajawal-arabic-6.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

.top nav{align-items:center}
.nav-survey{display:none}
.lang{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);color:var(--silver);text-decoration:none;font:600 14px/1 'Tajawal','Outfit',sans-serif;transition:border-color .3s,color .3s}
.lang:hover{border-color:var(--glow);color:var(--text)}
.lang svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.lang-short{display:none}
html[lang=ar] .lang{font-family:'Outfit',sans-serif}
.menu-btn{display:none;position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--edge);background:var(--glass);cursor:pointer;flex:none}
.menu-btn span{position:absolute;left:14px;right:14px;height:1.5px;background:var(--silver);transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-btn span:first-child{top:18px}.menu-btn span:last-child{top:26px}
.menu-open .menu-btn span:first-child{top:22px;transform:rotate(45deg)}
.menu-open .menu-btn span:last-child{top:22px;transform:rotate(-45deg)}
@media (max-width:1240px){
  .menu-btn{display:block}
  .top .lang{margin-left:auto}
  .top .head-cta{margin-left:0}
  .top.menu-open nav{display:flex;position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:120px 32px 40px;background:rgba(5,10,12,.86);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  .top.menu-open nav a{font:700 clamp(30px,7vw,46px)/1.2 var(--display);letter-spacing:-.02em;text-transform:none;color:var(--silver-hi);padding:8px 0}
  .top.menu-open nav a:after{display:none}
  .top.menu-open .nav-survey{display:inline-flex;margin-top:24px;font-size:18px!important;color:var(--obsidian)!important;background:var(--glow);padding:14px 26px!important;border-radius:999px}
}
@media (max-width:640px){
  .lang{padding:0 12px}
  .lang-full{display:none}.lang-short{display:inline}
  .head-cta{display:none!important}
  .top{gap:10px}
}

/* inner page header */
.page-hero{padding:clamp(170px,20vw,230px) 0 clamp(40px,6vw,70px)}
.page-kicker{font:600 13px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--glow);margin-bottom:22px}
.page-hero h1{font-size:clamp(46px,7vw,100px);line-height:.95;letter-spacing:-.04em;color:var(--silver-hi)}
.page-intro{max-width:60ch;margin-top:26px;font-size:clamp(17px,1.5vw,20px);color:var(--muted)}
.nf .actions{opacity:1;animation:none;margin-top:34px}

/* why HAWK */
.reasons{padding:20px 0 clamp(60px,8vw,110px)}
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.reason{border-radius:24px;padding:30px;min-height:240px;display:flex;flex-direction:column}
.reason-n{font:700 44px/1 var(--display);color:transparent;-webkit-text-stroke:1px var(--glow);margin-bottom:auto;padding-bottom:30px}
.reason h3{font-size:23px;margin-bottom:10px;color:var(--silver-hi)}
.reason p{color:var(--muted)}
.why-routine{padding:0 0 20px}
.why-routine-inner{border-radius:32px;padding:clamp(32px,5vw,60px);display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;overflow:hidden}
.why-routine-inner p{color:var(--muted);margin:16px 0 26px;font-size:18px}
.mini-deck{position:relative;height:300px}
.mini-deck img{position:absolute;bottom:0;height:88%;width:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.7));-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.mini-deck img:nth-child(1){left:6%;transform:rotate(-6deg)}
.mini-deck img:nth-child(2){left:40%;height:96%;z-index:2}
.mini-deck img:nth-child(3){left:68%;height:76%;transform:rotate(6deg)}

/* about */
.about-split{padding:0 0 clamp(60px,8vw,110px)}
.about-split .story-grid{align-items:start}
.about-grid{display:grid;gap:18px}
.about-card{border-radius:24px;padding:28px 30px}
.card-kicker{font:600 12px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--glow);margin-bottom:12px}
.about-card h2{font-size:clamp(24px,2.4vw,32px);margin-bottom:10px}
.about-card .statement{font:600 clamp(17px,1.5vw,20px)/1.45 var(--display);color:var(--silver-hi);margin-bottom:10px}
.about-card p{color:var(--muted)}
.ticks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;color:var(--muted)}
.ticks li:before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;border-left:2px solid var(--glow);border-bottom:2px solid var(--glow);transform:rotate(-45deg)}
.timeline{padding:0 0 clamp(40px,6vw,80px)}
.timeline h2{margin-bottom:40px}
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tl li{border-radius:24px;padding:28px}
.tl-tag{display:inline-block;font:700 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--edge);border-radius:999px;padding:7px 11px;margin-bottom:22px}
.tl li.is-now{border-color:var(--edge-teal)}
.tl li.is-now .tl-tag{background:var(--glow);color:var(--obsidian);border-color:var(--glow)}
.tl h3{font-size:23px;margin-bottom:8px;color:var(--silver-hi)}
.tl p{color:var(--muted)}
.story-link{margin-top:24px}

/* privacy */
.legal{padding:0 0 clamp(60px,8vw,110px)}
.legal-copy{border-radius:28px;padding:clamp(28px,5vw,60px);max-width:860px}
.legal-copy h2{font-size:clamp(22px,2.4vw,30px);margin:38px 0 12px}
.legal-copy h2:first-of-type{margin-top:30px}
.legal-copy p{color:var(--muted);margin:0 0 14px}
.legal-copy a{color:var(--glow);text-underline-offset:4px}
.legal-copy strong{color:var(--silver-hi)}

/* Founding 100 box inside the CTA */
.founding-box{max-width:560px;margin:46px auto 0;padding-top:34px;border-top:1px solid var(--edge)}
.founding-box h3{font-size:22px;color:var(--silver-hi)}
.founding-box p{margin:8px auto 18px!important;font-size:16px!important}
.founding-form{min-height:150px;text-align:left}
.founding-form iframe{display:block;border:0;width:100%}

/* footer nav */
.foot-nav{display:flex;flex-wrap:wrap;gap:0 22px;margin:8px 0}
.foot-nav a{display:inline-flex;align-items:center;min-height:48px;color:var(--silver);text-decoration:none;font-size:17px;font-weight:500}
.foot-nav a:hover{color:var(--glow)}

@media (max-width:980px){
  .reason-grid,.tl{grid-template-columns:1fr 1fr}
  .why-routine-inner{grid-template-columns:1fr}
}
@media (max-width:640px){
  .reason-grid,.tl{grid-template-columns:1fr}
  .mini-deck{height:220px}
}

/* ===== Arabic, right-to-left ===== */
[dir=rtl] body{font-family:'Tajawal','Manrope',sans-serif;font-size:17px}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .btn,[dir=rtl] .top nav a,[dir=rtl] .status,[dir=rtl] .card-label strong,[dir=rtl] .picker strong,[dir=rtl] .track span,[dir=rtl] .toggle button,[dir=rtl] .pillars strong,[dir=rtl] .foot-line,[dir=rtl] .page-kicker,[dir=rtl] .card-kicker,[dir=rtl] .tl-tag,[dir=rtl] .about-card .statement,[dir=rtl] .float-cta,[dir=rtl] .deck-hint{font-family:'Tajawal','Outfit',sans-serif;letter-spacing:0}
[dir=rtl] .hero h1{line-height:1.12;font-size:clamp(50px,7vw,108px)}
[dir=rtl] h2{line-height:1.2}
[dir=rtl] .page-hero h1{line-height:1.15}
[dir=rtl] .btn svg{transform:scaleX(-1)}
[dir=rtl] .btn:hover svg{transform:scaleX(-1) translateX(4px)}
[dir=rtl] .giant{left:auto;right:-2vw}
[dir=rtl] .deck{margin-right:0;margin-left:110px}
[dir=rtl] .card[data-pos="1"]{transform:translateX(-26%) rotate(-6deg) scale(.9)}
[dir=rtl] .card[data-pos="2"]{transform:translateX(-50%) rotate(-12deg) scale(.8)}
[dir=rtl] .deck-hint{left:-40%;right:0}
[dir=rtl] .picker .desc{padding-left:0;padding-right:56px}
[dir=rtl] .toggle .pill{left:auto;right:5px}
[dir=rtl] .toggle.pm .pill{transform:translateX(-100%)}
[dir=rtl] .step-word{left:auto;right:22px}
[dir=rtl] .step-photo{background-position:12% 40%}
[dir=rtl] .ticks li{padding-left:0;padding-right:26px}
[dir=rtl] .ticks li:before{left:auto;right:2px}
[dir=rtl] .pillars span{text-align:left}
[dir=rtl] .float-cta{right:auto;left:20px}
[dir=rtl] .founding-form{text-align:right}
[dir=rtl] .mini-deck{direction:ltr}
@media (max-width:1240px){[dir=rtl] .top .lang{margin-left:0;margin-right:auto}}
@media (max-width:640px){
  [dir=rtl] .deck{margin-left:96px;margin-right:0}
  [dir=rtl] .card[data-pos="1"]{transform:translateX(-20%) rotate(-5deg) scale(.92)}
  [dir=rtl] .card[data-pos="2"]{transform:translateX(-38%) rotate(-10deg) scale(.84)}
  [dir=rtl] .deck-hint{left:-30%}
}

/* larger footer on phones */
@media (max-width:640px){.foot-logo{width:190px}.foot-line{font-size:22px}.social a{width:56px;height:56px}}

/* ===== PHONE LAYOUT: side-by-side swipe rows, compact hero, bottom bar ===== */
.prod-row,.swipe-hint,.tabbar{display:none}
@media (max-width:640px){
  /* header + hero: headline, survey and the product cards in the first screen */
  .brand img,.top.scrolled .brand img{width:112px}
  .top{padding:8px 16px}
  .lang,.menu-btn{min-height:42px;height:42px}
  .menu-btn{width:42px}.menu-btn span:first-child{top:16px}.menu-btn span:last-child{top:24px}
  .menu-open .menu-btn span:first-child,.menu-open .menu-btn span:last-child{top:20px}
  .hero{min-height:auto;padding:104px 20px 40px;gap:26px}
  .status{margin-bottom:16px;padding:8px 12px;font-size:11px}
  .hero h1{font-size:clamp(42px,12vw,52px)}
  [dir=rtl] .hero h1{font-size:clamp(40px,11.5vw,50px)}
  .lead{margin:14px 0 18px;font-size:16px}
  .actions{gap:10px}
  .actions .btn-ghost{display:none}
  .deck{width:150px;margin:0 auto;transform:translateX(-30px)}
  [dir=rtl] .deck{margin:0 auto;transform:translateX(30px)}
  .card-label{padding:10px 12px}.card-label strong{font-size:13px}.card-label small{font-size:11px}
  .deck-hint{bottom:-30px;right:-70%}
  [dir=rtl] .deck-hint{left:-70%;right:0}
  .scroll-cue{display:none}
  .marquee{padding:14px 0}
  .track span{font-size:18px}

  /* shared swipe row */
  .swipe{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:4px 20px 8px;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{scroll-snap-align:start;flex:0 0 72%}
  .swipe-hint{display:block;margin:10px 0 0;font:600 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .swipe-hint span{color:var(--glow);display:inline-block;animation:nudge 1.6s ease-in-out infinite}
  [dir=rtl] .swipe-hint span{transform:scaleX(-1);animation-name:nudge-rtl}
  @keyframes nudge{50%{transform:translateX(5px)}}
  @keyframes nudge-rtl{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateX(5px)}}

  /* sections: tighter spacing */
  .lineup,.routine,.quiz,.day,.story{padding:64px 0}
  .section-head{gap:12px;margin-bottom:24px}
  .section-head p{font-size:15px}
  h2{font-size:clamp(30px,8.6vw,38px)}

  /* products: swipe row of three cards instead of one big photo */
  .showcase{display:none}
  .prod-card{border-radius:22px;padding:14px 14px 18px;display:flex;flex-direction:column}
  .prod-img{position:relative;height:230px;border-radius:16px;overflow:hidden;margin-bottom:14px}
  .prod-img .slide-bg{inset:-20px}
  .prod-img img{position:absolute;inset:6% 12%;width:76%;height:88%;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.7));-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 92%,transparent);mask-composite:intersect}
  .prod-card h3{font-size:18px;line-height:1.25;color:var(--silver-hi)}
  .prod-card small{display:block;margin:4px 0 8px;font-size:12px;color:var(--glow)}
  .prod-card p{font-size:14px;line-height:1.5;color:var(--muted)}
  .lineup-note{margin-top:22px;font-size:15px}

  /* routine: step cards side by side */
  .toggle{margin-bottom:18px}
  .steps,.steps.pm{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:4px 20px 8px;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 70%;scroll-snap-align:start;min-height:250px;padding:22px}
  .steps.pm .step{flex-basis:78%}
  .step-word{font-size:44px;left:16px;top:14px}
  [dir=rtl] .step-word{right:16px;left:auto}
  .step h3{font-size:22px;margin-top:12px}
  .step p{font-size:14px;min-height:0}
  .steps.pm~.steps-hint{visibility:hidden}

  /* your day: smaller time cards side by side */
  .rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;width:auto;margin-inline:0;padding:4px 20px 8px;scroll-padding-inline:20px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .moment{flex:0 0 58%;scroll-snap-align:start;min-height:200px;padding:20px}
  .moment .time{font-size:32px;padding-bottom:20px}
  .moment h3{font-size:18px}.moment p{font-size:14px}
  .moment-cta{flex:0 0 58%;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:20px}
  .moment-cta h3{font-size:19px}
  .moment-cta a{margin-top:14px;min-height:44px;padding:0 18px;font-size:14px}

  /* story: small photo next to a short text */
  .story-grid{grid-template-columns:36% 1fr;gap:14px;align-items:start}
  .story-img{aspect-ratio:3/4;border-radius:18px}
  .story-copy{padding:16px;border-radius:18px}
  .story-copy h2{font-size:20px;line-height:1.15}
  .story-copy p{font-size:13.5px;line-height:1.5;margin:10px 0 6px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .story-copy .pillars{display:none}
  .story-link{margin-top:4px;padding:0;font-size:13px;min-height:40px}

  /* survey + Founding 100 */
  .cta{padding:40px 0 64px}
  .cta-inner{padding:36px 18px;border-radius:26px}
  .cta h2{font-size:clamp(36px,10vw,44px)}
  .cta-inner p{font-size:16px;margin:12px auto 22px}
  .btn-xl{min-height:54px;padding:0 22px;font-size:15px}
  .founding-box{margin-top:30px;padding-top:24px}

  /* inner pages */
  .page-hero{padding:116px 0 30px}
  .page-hero h1{font-size:clamp(38px,11vw,48px)}
  .page-intro{font-size:16px;margin-top:16px}
  .reason-grid{grid-template-columns:1fr 1fr;gap:10px}
  .reason{min-height:0;padding:16px;border-radius:18px}
  .reason-n{font-size:28px;padding-bottom:14px}
  .reason h3{font-size:16px;line-height:1.25;margin-bottom:6px}
  .reason p{font-size:13px;line-height:1.5}
  .why-routine-inner{padding:24px;gap:10px}
  .mini-deck{height:180px}
  .about-split .story-grid{grid-template-columns:1fr}
  .about-split .story-img{aspect-ratio:16/10}
  .about-card{padding:20px}
  .tl{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:4px 20px 8px;scrollbar-width:none}
  .tl::-webkit-scrollbar{display:none}
  .tl li{flex:0 0 78%;scroll-snap-align:start;padding:20px}
  .legal-copy{padding:22px;border-radius:20px}

  /* footer: logo beside tagline, links in two columns, icons in one row */
  .foot{padding:40px 0 110px}
  .foot-grid{grid-template-columns:auto 1fr;gap:16px 18px;align-items:center}
  .foot-logo{width:118px}
  .foot-mid{display:contents}
  .foot-line{font-size:19px;align-self:center}
  .foot-nav{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin:0}
  .foot-mail{grid-column:1/-1;font-size:17px}
  .foot-small{grid-column:1/-1;font-size:13px}
  .social{grid-column:1/-1;gap:10px;justify-content:space-between}
  .social a{width:52px;height:52px}
  .social svg{width:24px;height:24px}

  /* bottom bar replaces the floating button */
  .float-cta{display:none}
  .tabbar{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;padding:6px;border-radius:22px;background:rgba(5,10,12,.72);border:1px solid var(--edge);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 14px 40px -12px rgba(0,0,0,.9);transform:translateY(160%);transition:transform .5s var(--ease)}
  .tabbar.show{transform:none}
  .tabbar a,.tabbar button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:16px;font:600 12px/1 var(--display);color:var(--silver);cursor:pointer;text-align:center}
  [dir=rtl] .tabbar a,[dir=rtl] .tabbar button{font-family:'Tajawal',sans-serif;font-size:13px}
  .tabbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tabbar .tab-main{background:var(--glow);color:var(--obsidian);box-shadow:0 8px 24px -8px rgba(22,215,215,.8)}
  .tabbar a:active,.tabbar button:active{transform:scale(.97)}
  body{padding-bottom:0}
}

/* ===== FOOTER (arranged like the original site) ===== */
.foot .foot-grid{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"brand info" "nav nav" "small small";column-gap:clamp(24px,5vw,72px);row-gap:28px;align-items:center}
.foot .foot-brand{grid-area:brand;display:flex;align-items:center;justify-content:center}
.foot .foot-logo{width:clamp(110px,16vw,220px)}
.foot .foot-info{grid-area:info;display:flex;flex-direction:column;align-items:flex-start}
.foot .foot-mail{font-size:clamp(17px,1.6vw,21px);font-weight:500;color:var(--silver-hi);text-decoration:none;min-height:44px}
.foot .foot-mail:hover{color:var(--glow)}
.foot .foot-place{color:var(--muted);font-size:clamp(15px,1.3vw,18px);line-height:1.6;margin:4px 0 16px}
.foot .foot-connect{font:700 clamp(13px,1.2vw,16px)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--glow);margin-bottom:14px}
.foot .social{display:flex;flex-wrap:nowrap;gap:10px}
.foot .social a{width:56px;height:56px;border-radius:10px;border:1px solid rgba(22,215,215,.45);background:rgba(6,49,54,.7)}
.foot .social a:hover{border-color:var(--glow);background:rgba(22,215,215,.12)}
.foot .social svg{width:26px;height:26px}
.foot .foot-nav{grid-area:nav;display:flex;flex-wrap:wrap;gap:4px 34px;margin:0;padding-top:24px;border-top:1px solid var(--edge)}
.foot .foot-nav a{min-height:48px;font:700 clamp(15px,1.3vw,17px)/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--silver-hi)}
.foot .foot-nav a:hover{color:var(--glow)}
.foot .foot-small{grid-area:small;font-size:13px;color:var(--muted)}
[dir=rtl] .foot .foot-nav a,[dir=rtl] .foot .foot-connect{font-family:'Tajawal','Outfit',sans-serif;letter-spacing:0}
[dir=rtl] .foot .foot-info{align-items:flex-start}
@media (max-width:640px){
  .foot{padding:36px 0 110px}
  .foot .foot-grid{grid-template-columns:96px 1fr;column-gap:12px;row-gap:22px}
  .foot .foot-logo{width:96px}
  .foot .foot-mail{font-size:16px;min-height:40px}
  .foot .foot-place{font-size:14px;margin:0 0 12px}
  .foot .foot-connect{font-size:12px;margin-bottom:10px}
  .foot .social{gap:5px}
  .foot .social a{width:44px;height:44px;border-radius:8px}
  .foot .social svg{width:21px;height:21px}
  .foot .foot-nav{display:flex;flex-wrap:wrap;gap:0 26px;padding-top:16px}
  .foot .foot-nav a{font-size:15px;min-height:46px}
}
@media (max-width:380px){.foot .foot-grid{grid-template-columns:80px 1fr;column-gap:10px}.foot .foot-logo{width:80px}.foot .social{gap:4px}.foot .social a{width:40px;height:40px}.foot .social svg{width:19px;height:19px}.foot .foot-mail{font-size:15px}}

/* ===== PHONE FIT: everything inside the screen width, no half-cut cards ===== */
@media (max-width:640px){
  /* language button: readable word, bright */
  .lang{border-color:var(--edge-teal);color:var(--silver-hi);background:rgba(22,215,215,.08);padding:0 12px;gap:6px}
  .lang svg{width:16px;height:16px}
  .lang-short{font:700 14px/1 'Tajawal','Outfit',sans-serif}
  html[lang=ar] .lang-short{font-family:'Outfit',sans-serif;letter-spacing:.06em}

  /* products: three small cards in one row */
  .prod-row.swipe{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;margin-inline:0;padding:0}
  .prod-row>*{flex:none}
  .prod-card{padding:8px 8px 12px;border-radius:16px}
  .prod-img{height:150px;border-radius:12px;margin-bottom:10px}
  .prod-card h3{font-size:13px;line-height:1.25}
  .prod-card small{font-size:10.5px;margin:4px 0 0;letter-spacing:0}
  .prod-card p{display:none}
  .swipe-hint{display:none!important}

  /* routine: steps side by side, all visible */
  .steps,.steps.pm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;margin-inline:0;padding:0}
  .steps.pm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step,.steps.pm .step{flex:none;min-height:0;padding:12px 10px 14px;border-radius:16px}
  .step-photo{opacity:.18;background-size:auto 100%;background-position:50% 30%}
  .step-word{font-size:26px;left:8px;top:10px}
  [dir=rtl] .step-word{right:8px;left:auto}
  .step .sec{margin-top:56px;font-size:9.5px;padding:5px 7px;letter-spacing:.08em}
  .step h3{font-size:16px;margin:10px 0 4px}
  .step p{font-size:11.5px;line-height:1.4}

  /* your day: 2 x 2 grid, question bar underneath */
  .rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;width:calc(100% - 40px);margin-inline:auto;padding:0}
  .moment{flex:none;min-height:0;padding:14px;border-radius:16px}
  .moment .time{font-size:26px;padding-bottom:18px}
  .moment h3{font-size:15px;margin-bottom:4px}
  .moment p{font-size:12px;line-height:1.45}
  .moment-cta{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;padding:14px 16px}
  .moment-cta h3{font-size:15px;margin:0}
  .moment-cta a{margin:0;min-height:42px;padding:0 14px;font-size:13px;white-space:nowrap}

  /* about timeline: compact list instead of a swipe row */
  .tl{display:grid;gap:8px;overflow:visible;margin-inline:0;padding:0}
  .tl li{flex:none;padding:16px}

  /* marquee words a bit smaller so more fit */
  .track{gap:22px}
  .track span{font-size:16px}
}
@media (max-width:380px){
  .prod-img{height:130px}
  .prod-card h3{font-size:12px}
  .step p{font-size:11px}
  .moment-cta{flex-direction:column;align-items:flex-start;gap:10px}
}

/* Computer view footer: logo far left, contact details and social icons far right (mirrored in Arabic) */
@media (min-width:641px){
  .foot .foot-brand{justify-self:start}
  .foot .foot-info{justify-self:end;align-items:flex-end;text-align:end}
  [dir=rtl] .foot .foot-info{align-items:flex-end}
}

/* ===== Cut-out product photos (transparent): no edge fade, teal stage light behind ===== */
.card img,.slide img,.prod-img img,.mini-deck img{-webkit-mask-image:none!important;mask-image:none!important}
.card-bg,.slide-bg{inset:0!important;filter:none!important;opacity:1!important;background-image:radial-gradient(60% 45% at 50% 46%,rgba(0,107,111,.55),rgba(6,49,54,.35) 55%,transparent 80%),radial-gradient(70% 22% at 50% 92%,rgba(22,215,215,.22),transparent 70%),linear-gradient(180deg,rgba(5,10,12,.2),rgba(6,49,54,.45))!important}
.card img{height:76%;margin-top:7%;filter:drop-shadow(0 26px 28px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(22,215,215,.12))}
.slide img{inset:6% 14%!important;width:72%!important;height:84%!important;filter:drop-shadow(0 30px 34px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(22,215,215,.14))}
.prod-img img{inset:5% 8%;width:84%;height:90%}
.step-photo{background-size:auto 92%;background-position:92% 60%}
[dir=rtl] .step-photo{background-position:8% 60%}

/* Home link: current page highlighted; bottom bar has four items */
.top nav a[aria-current=page]{color:var(--glow)}
.top nav a[aria-current=page]:after{transform:scaleX(1)}
@media (max-width:640px){
  .tabbar{grid-template-columns:1fr 1.35fr 1fr 1fr}
  .tabbar a[aria-current=page]{color:var(--glow)}
}

/* contact page */
.contact-sec{padding:10px 0 clamp(40px,6vw,80px)}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.contact-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;border-radius:24px;padding:clamp(22px,3vw,34px);text-decoration:none;color:inherit;transition:transform .5s var(--ease)}
a.contact-card:hover{transform:translateY(-4px)}
.contact-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;border:1px solid var(--edge-teal);background:rgba(6,49,54,.6);margin-bottom:12px}
.contact-ico svg{width:24px;height:24px;fill:none;stroke:var(--glow);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-card h2{font-size:clamp(20px,2vw,26px)}
.contact-value{font:600 clamp(18px,1.8vw,22px)/1.3 var(--display);color:var(--glow)}
.contact-card p:not(.contact-value){color:var(--muted)}
.contact-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;font:700 14px/1 var(--display);color:var(--silver-hi)}
.contact-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
[dir=rtl] .contact-go svg{transform:scaleX(-1)}
.contact-social .social{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.contact-social .social a{width:52px;height:52px;border-radius:12px;border:1px solid rgba(22,215,215,.45);background:rgba(6,49,54,.6)}
.contact-social .social svg{width:24px;height:24px}
.contact-note{margin-top:22px;color:var(--muted)}
.contact-note a{color:var(--glow);text-underline-offset:4px}
@media (max-width:640px){
  .contact-grid{grid-template-columns:1fr;gap:10px}
  .contact-card{padding:18px;border-radius:18px}
  .contact-ico{width:44px;height:44px;margin-bottom:6px}
  .contact-social .social{gap:6px}
  .contact-social .social a{width:46px;height:46px}
}

/* Story photo: fills its column exactly, same height as the text beside it, no parallax shift */
.story-grid{align-items:stretch}
.story-img{aspect-ratio:auto;height:100%;min-height:420px;align-self:stretch;position:relative}
.story-img img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:50% 18%;transform:none!important}
.about-split .story-img{min-height:520px;max-height:780px}
@media (max-width:980px){
  .story-img,.about-split .story-img{height:auto;min-height:0;aspect-ratio:4/3;max-height:none}
}
@media (max-width:640px){
  .story-grid{grid-template-columns:38% 1fr;align-items:stretch}
  .story-img{aspect-ratio:auto;height:auto;min-height:0;border-radius:18px}
  .about-split .story-grid{grid-template-columns:1fr}
  .about-split .story-img{aspect-ratio:4/3}
}
.story-img img{object-position:50% 0%}

/* Phone footer links: smaller, compact rows */
@media (max-width:640px){
  .foot .foot-nav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 18px;padding-top:12px}
  .foot .foot-nav a{font-size:12px;letter-spacing:.08em;min-height:38px}
  [dir=rtl] .foot .foot-nav a{font-size:13px;letter-spacing:0}
  [dir=rtl] .foot .foot-nav{gap:0 14px}
}
@media (max-width:380px){.foot .foot-nav{gap:0 14px}.foot .foot-nav a{font-size:11.5px}}

/* ===== Phone menu as a bottom sheet next to the Menu button ===== */
.menu-sheet{display:none}
@media (min-width:641px) and (max-width:1240px){.top.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (max-width:640px){
  .menu-btn{display:none!important}
  .tabbar{transform:none!important}
  .tabbar button.active{background:rgba(22,215,215,.14);color:var(--glow)}
  .menu-sheet{display:block;position:fixed;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:46;width:min(240px,calc(100% - 20px));padding:8px;border-radius:20px;background:rgba(5,10,12,.92);border:1px solid var(--edge-teal);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:0 20px 50px -12px rgba(0,0,0,.9);opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);transform-origin:90% 100%;transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s .35s}
  [dir=rtl] .menu-sheet{right:auto;left:10px;transform-origin:10% 100%}
  .menu-sheet.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .35s var(--ease)}
  .sheet-links{display:flex;flex-direction:column}
  .sheet-links a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;text-decoration:none;font:600 15px/1 var(--display);color:var(--silver-hi)}
  [dir=rtl] .sheet-links a,[dir=rtl] .sheet-survey{font-family:'Tajawal','Outfit',sans-serif}
  .sheet-links a:active,.sheet-links a:hover{background:rgba(22,215,215,.1)}
  .sheet-links a[aria-current=page]{color:var(--glow)}
  .sheet-survey{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px;border-radius:12px;background:var(--glow);color:var(--obsidian);font:700 14px/1 var(--display);text-decoration:none}
}

/* ===== Home page: one section per screen, scroll snaps to the next section ===== */
@media (max-width:640px){html:has(body.page-index){scroll-snap-type:y proximity}}
.page-index .hero,.page-index .lineup,.page-index .routine,.page-index .quiz,.page-index .day,.page-index .story,.page-index .cta{scroll-snap-align:start;scroll-snap-stop:always}
.page-index .foot{scroll-snap-align:end}
.page-index .lineup,.page-index .routine,.page-index .quiz,.page-index .day,.page-index .story,.page-index .cta{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(84px,11vh,120px) clamp(24px,4vh,48px)}
.page-index .lineup>.wrap,.page-index .routine>.wrap,.page-index .quiz>.wrap,.page-index .day>.wrap,.page-index .story>.wrap,.page-index .cta>.wrap{width:min(1200px,calc(100% - 40px))}
.page-index .section-head{margin-bottom:clamp(20px,4vh,48px)}
.page-index .hero{min-height:100svh;padding-top:clamp(120px,17vh,170px);padding-bottom:clamp(40px,7vh,90px)}
/* keep each section's content inside one screen */
@media (min-width:981px){
  .page-index .deck{width:min(330px,calc((100svh - 300px) * .5625))}
  .page-index .stage{aspect-ratio:auto;height:min(600px,calc(100svh - 330px));min-height:340px}
  .page-index .step{min-height:min(340px,calc(100svh - 470px))}
  .page-index .story-img{min-height:0;max-height:calc(100svh - 220px)}
  .page-index .lineup-note{margin-top:clamp(14px,3vh,48px)}
  .page-index .moment{min-height:min(280px,calc(100svh - 500px))}
  .page-index .moment .time{padding-bottom:16px}
  .page-index .moment-cta{padding-block:18px}
}
@media (min-width:641px) and (max-width:980px){
  .page-index .stage{height:min(520px,calc(100svh - 420px));aspect-ratio:auto;min-height:300px}
}
/* phones: sections fill the screen above the bottom bar */
@media (max-width:640px){
  .page-index .lineup,.page-index .routine,.page-index .quiz,.page-index .day,.page-index .story,.page-index .cta{padding-block:84px calc(96px + env(safe-area-inset-bottom))}
  .page-index .hero{min-height:100svh;padding-bottom:96px}
}
/* a small "next section" arrow at the bottom of each home section (computers and tablets) */
.next-sec{position:absolute;left:50%;bottom:18px;translate:-50% 0;display:none;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--edge);background:rgba(5,10,12,.4);color:var(--silver);cursor:pointer;transition:border-color .3s,color .3s}
.next-sec:hover{border-color:var(--glow);color:var(--glow)}
.next-sec svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
@media (min-width:641px) and (min-height:560px){.page-index .lineup .next-sec,.page-index .routine .next-sec,.page-index .day .next-sec,.page-index .story .next-sec{display:grid}}
/* full-screen sections: keep headings clear of the top bar; slimmer bar while scrolled */
@media (min-width:641px){
  .page-index .top.scrolled .brand img{width:118px}
  .page-index .top.scrolled{padding-block:6px}
  .page-index .lineup,.page-index .routine,.page-index .quiz,.page-index .day,.page-index .story,.page-index .cta{padding-top:clamp(112px,15vh,140px)}
}
.page-index .moment-cta{min-height:0!important}

/* Help build HAWK: survey and Founding 100 side by side (computers and tablets); stacked on phones */
.cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;text-align:start;padding:clamp(32px,4.5vw,56px)}
.cta-main h2{font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.03em}
.cta-inner .cta-main p{margin:16px 0 26px;max-width:40ch;font-size:18px;line-height:1.5}
.cta-inner .founding-box{max-width:none;margin:0;padding:0 0 0 clamp(20px,4vw,56px);border-top:0;border-left:1px solid var(--edge)}
[dir=rtl] .cta-inner .founding-box{padding:0 clamp(20px,4vw,56px) 0 0;border-left:0;border-right:1px solid var(--edge)}
.cta-inner .founding-box h3{font-size:22px;line-height:1.25}
.cta-inner .founding-box p{margin:6px 0 4px!important;font-size:15px!important;line-height:1.45;color:var(--muted);max-width:none}
.founding-form{min-height:0}
.founding-form iframe{margin-inline-start:-8px;width:calc(100% + 16px)!important}
@media (max-width:640px){
  .cta-inner{grid-template-columns:1fr;gap:18px;padding:24px 18px;border-radius:22px}
  .cta-inner .founding-box,[dir=rtl] .cta-inner .founding-box{padding:16px 0 0;border:0;border-top:1px solid var(--edge)}
  .cta-main h2{font-size:clamp(32px,9vw,40px)}
  .cta-inner .cta-main p{font-size:15px;margin:8px 0 16px}
  .cta-main .btn-xl{width:100%;justify-content:center;min-height:50px}
  .cta-inner .founding-box h3{font-size:19px}
  .cta-inner .founding-box p{font-size:14px!important}
}

/* Section arrows: up to the previous section and down to the next one */
.sec-nav{position:absolute;left:50%;bottom:16px;translate:-50% 0;display:none;gap:10px}
@media (min-width:641px) and (min-height:560px){.page-index .sec-nav{display:flex}}
.sec-nav button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--edge);background:rgba(5,10,12,.45);color:var(--silver);cursor:pointer;transition:border-color .3s,color .3s}
.sec-nav button:hover{border-color:var(--glow);color:var(--glow)}
.sec-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.next-sec{display:none!important}
.cta .sec-nav{bottom:10px}
/* Back to top (all screens): appears after scrolling */
.to-top{position:fixed;right:20px;bottom:84px;z-index:41;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--edge-teal);background:rgba(5,10,12,.8);color:var(--glow);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s,visibility 0s .3s}
.to-top.show{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
[dir=rtl] .to-top{right:auto;left:20px}
@media (max-width:640px){.to-top{left:14px;right:auto;bottom:calc(86px + env(safe-area-inset-bottom));width:42px;height:42px}[dir=rtl] .to-top{left:auto;right:14px}}

/* WhatsApp Channel: contact card + small link under the survey button */
.contact-grid .contact-social{grid-column:1/-1}
.cta-channel{display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:44px;font:600 15px/1.2 var(--display);color:var(--silver-hi);text-decoration:none}
.cta-channel svg{width:20px;height:20px;fill:none;stroke:var(--glow);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cta-channel:hover span{color:var(--glow);text-decoration:underline;text-underline-offset:4px}
[dir=rtl] .cta-channel{font-family:'Tajawal','Outfit',sans-serif}
.cta-main{display:flex;flex-direction:column;align-items:flex-start}
@media (max-width:640px){.cta-main{align-items:stretch}.cta-channel{justify-content:center;margin-top:10px}}

/* six social icons: phones show them as a tidy 3 x 2 grid in the footer */
@media (max-width:640px){.foot .social{display:grid;grid-template-columns:repeat(3,44px);gap:6px}}
@media (max-width:380px){.foot .social{grid-template-columns:repeat(3,40px)}}

/* early-access perk under the survey invitation */
.cta-perk{display:block;margin-top:10px;font-weight:600;color:var(--glow)}

/* product pages: /products and /products/<name> (added 2026-10-12) */
.pd-link{display:inline-block;margin-top:10px;font:700 13px/1.2 var(--display);letter-spacing:.04em;color:var(--glow);text-decoration:none}
.pd-link:hover{text-decoration:underline;text-underline-offset:4px}
.pl{padding:10px 0 clamp(60px,8vw,110px)}
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pl-card{border-radius:26px;overflow:hidden;display:flex;flex-direction:column}
.pl-img{display:block;aspect-ratio:1/1;overflow:hidden}
.pl-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pl-card:hover .pl-img img{transform:scale(1.04)}
.pl-body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pl-meta{font:600 12px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.pl-body h2{font-size:clamp(24px,2.4vw,30px);line-height:1.1}
.pl-body h2 a{text-decoration:none}
.pl-tag{color:var(--muted);margin-bottom:6px}
.pl-note{margin-top:22px;color:var(--muted);font-size:13px;font-style:italic}
.pd-hero{padding:clamp(130px,14vw,170px) 0 clamp(30px,5vw,60px)}
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.pd-media{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:1/1}
.pd-media img{width:100%;height:100%;object-fit:cover}
.pd-info{display:flex;flex-direction:column;align-items:flex-start}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--silver);text-decoration:none}
.crumbs a:hover{color:var(--glow)}
.pd-info h1{font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.03em;color:var(--silver-hi)}
.pd-meta{margin-top:14px;font:600 13px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--glow)}
.pd-tag{margin-top:18px;font:600 clamp(20px,2.2vw,26px)/1.25 var(--display);color:var(--silver-hi)}
.pd-lead{margin-top:12px;color:var(--muted);font-size:17px;max-width:52ch}
.pd-info .ticks{margin-top:18px}
.pd-info .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.pd-note{margin-top:16px;font-size:12.5px;font-style:italic;color:var(--muted)}
.pd-sec{padding:clamp(30px,5vw,60px) 0}
.pd-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pd-card{border-radius:24px;padding:clamp(24px,3vw,34px)}
.pd-card h2,.pd-h2{font-size:clamp(26px,3vw,36px);line-height:1.1;margin-bottom:6px}
.pd-h2{margin-bottom:22px}
.pd-steps{margin:16px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:14px}
.pd-steps li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;color:var(--muted)}
.pd-steps li:before{content:counter(s);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--display);color:var(--obsidian);background:var(--glow)}
.pd-sec .reason-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.pd-sec .reason{min-height:0}
.pd-routine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pr-item{display:flex;align-items:center;gap:16px;border-radius:20px;padding:14px 18px;text-decoration:none}
.pr-item img{width:56px;height:112px;object-fit:contain;flex:none}
.pr-item span{display:flex;flex-direction:column;gap:4px;min-width:0}
.pr-item small{font:600 11px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--glow)}
.pr-item strong{font:600 16px/1.25 var(--display);color:var(--silver-hi)}
.pr-item.is-here{border-color:var(--edge-teal);box-shadow:0 0 0 1px var(--edge-teal),0 20px 60px -30px rgba(0,0,0,.8)}
.pd-faq{display:grid;gap:12px;max-width:860px}
.pd-q{border-radius:18px;padding:0 22px}
.pd-q summary{cursor:pointer;list-style:none;padding:18px 0;font:600 17px/1.35 var(--display);color:var(--silver-hi);display:flex;justify-content:space-between;gap:16px}
.pd-q summary::-webkit-details-marker{display:none}
.pd-q summary:after{content:"+";color:var(--glow);font-size:22px;line-height:1}
.pd-q[open] summary:after{content:"–"}
.pd-q p{padding:0 0 18px;color:var(--muted)}
[dir=rtl] .pd-steps li{direction:rtl}
@media (max-width:980px){
  .pl-grid{grid-template-columns:1fr 1fr}
  .pd-grid{grid-template-columns:1fr}
  .pd-media{max-width:560px;width:100%;margin-inline:auto}
  .pd-routine{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pl-grid{grid-template-columns:1fr}
  .pd-hero{padding-top:100px}
  .pd-two{grid-template-columns:1fr}
  .pd-lead{font-size:16px}
  .pd-info .actions .btn-solid{width:100%;justify-content:center}
}

/* same studio photo on every page (2026-10-12): square product shots fill their frames */
.card-bg,.slide-bg{display:none!important}
.card{background:var(--obsidian)}
.card img{position:absolute!important;inset:0 0 auto 0!important;width:100%!important;height:84%!important;max-width:none!important;margin:0!important;object-fit:cover!important;object-position:50% 45%;filter:none!important}
.slide img{inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;filter:none!important;border-radius:inherit}
.stage{overflow:hidden}
/* home showcase (2026-10-13): show the whole square photo (no cropped cap/label); a blurred copy fills the wider box */
.stage .slide-bg{display:block!important;inset:-40px!important;background-size:cover!important;background-position:center!important;filter:blur(34px) brightness(.55) saturate(1.1)!important;opacity:1!important}
.stage .slide img{object-fit:contain!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)!important;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)!important}
.prod-img img{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:none!important}
.prod-img{background:var(--obsidian)}
.step-photo{background-size:cover!important;background-position:center!important}
.mini-deck img{height:72%!important;width:auto;aspect-ratio:1/1;object-fit:cover;border-radius:18px;border:1px solid var(--edge)}
.mini-deck img:nth-child(2){height:84%!important}
.pr-item img{width:72px;height:72px;object-fit:cover;border-radius:14px;flex:none}

/* product page alignment */
.pd-faq{max-width:none}
.pd-sub{color:var(--muted);max-width:60ch;margin:-10px 0 22px}
.pd-sec .reason-grid{align-items:stretch}
.pd-card{height:100%}
.pd-grid{align-items:center}
.pd-hero .pd-media{width:100%}

/* floating up/down section buttons on every page except home (home has its own per-section arrows) */
.sec-float{position:fixed;right:20px;bottom:140px;z-index:41;display:flex;flex-direction:column;gap:8px}
.sec-float button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--edge-teal);background:rgba(5,10,12,.8);color:var(--glow);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .3s,border-color .3s}
.sec-float button:hover{border-color:var(--glow)}
.sec-float button[disabled]{opacity:.3;cursor:default}
.sec-float svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
[dir=rtl] .sec-float{right:auto;left:20px}
@media (max-width:640px){.sec-float{left:14px;right:auto;bottom:calc(138px + env(safe-area-inset-bottom));gap:6px}.sec-float button{width:42px;height:42px}[dir=rtl] .sec-float{left:auto;right:14px}}

/* product gallery: 4 angles per product (2026-10-12) */
.pd-gallery{display:flex;flex-direction:column;gap:12px;min-width:0}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pd-thumb{all:unset;box-sizing:border-box;cursor:pointer;border-radius:14px;overflow:hidden;border:1px solid var(--edge);aspect-ratio:1/1;transition:border-color .3s,box-shadow .3s,opacity .3s;opacity:.7}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb:hover{opacity:1}
.pd-thumb[aria-pressed="true"]{opacity:1;border-color:var(--glow);box-shadow:0 0 0 1px var(--glow)}
.pd-thumb:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.pd-media img{transition:opacity .25s}
.pd-routine{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.pd-gallery{max-width:560px;width:100%;margin-inline:auto}.pd-routine{grid-template-columns:1fr}}
@media (max-width:640px){.pd-thumbs{gap:8px}.pd-thumb{border-radius:10px}}

/* QA fixes (2026-10-12) */
@media (max-width:640px){.card img{height:70%!important}}
.mini-deck{display:flex!important;align-items:flex-end;justify-content:center;gap:0}
.mini-deck img{position:static!important;height:auto!important;width:31%!important;margin-inline:-1.5%;transform:rotate(-5deg)}
.mini-deck img:nth-child(2){width:37%!important;z-index:2;transform:none}
.mini-deck img:nth-child(3){transform:rotate(5deg)}
.step-photo{background-size:auto 100%!important;background-position:92% 50%!important}
[dir=rtl] .step-photo{background-position:8% 50%!important}
.pd-sec .reason-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
/* up/down buttons: on touch-size screens they show while scrolling and fade away after */
@media (max-width:1100px){.sec-float{transition:opacity .4s,visibility 0s .4s;opacity:0;visibility:hidden}.sec-float.awake{opacity:1;visibility:visible;transition:opacity .2s}}

/* night routine: wash, treat (serum), hydrate; morning: wash, hydrate, protect (2026-10-12) */
.steps:not(.pm) .step-serum{display:none}
.steps.pm{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.steps.pm{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* "Find your routine" quiz (home) */
.quiz-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center}
.quiz .kicker{font:700 12px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--glow);margin-bottom:16px}
.quiz-intro p:last-child{color:var(--muted);font-size:17px;max-width:40ch;margin-top:18px}
.quiz-card{border-radius:28px;padding:clamp(22px,3.4vw,40px);overflow:hidden}
.quiz-bar{height:3px;border-radius:3px;background:var(--edge);margin-bottom:26px;overflow:hidden}
.quiz-bar i{display:block;height:100%;background:var(--glow);box-shadow:0 0 12px var(--glow);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
[dir=rtl] .quiz-bar i{transform-origin:right}
.quiz-q{border:0;margin:0;padding:0;display:grid;gap:10px;animation:quizIn .45s var(--ease)}
.quiz-q legend{font:700 clamp(20px,2.4vw,28px)/1.25 var(--display);color:var(--silver-hi);margin-bottom:14px;padding:0}
.quiz-n{display:block;font:600 12px/1 var(--display);letter-spacing:.16em;color:var(--muted);margin-bottom:10px}
.quiz-opt{all:unset;box-sizing:border-box;cursor:pointer;min-height:52px;padding:14px 18px;border-radius:14px;border:1px solid var(--edge);background:rgba(5,10,12,.35);font:600 15px/1.35 var(--body);color:var(--text);transition:border-color .25s,background .25s,transform .25s var(--ease)}
.quiz-opt:hover,.quiz-opt:focus-visible{border-color:var(--glow);background:rgba(22,215,215,.08)}
.quiz-opt:active{transform:scale(.98)}
.quiz-result{animation:quizIn .5s var(--ease)}
.quiz-q[hidden],.quiz-result[hidden]{display:none}
.quiz-result:focus{outline:none}
.quiz-result h3{font-size:clamp(22px,2.6vw,30px);color:var(--silver-hi);margin-bottom:16px}
.quiz-prods{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px;counter-reset:qp}
.quiz-prods li{display:flex;align-items:center;gap:14px;padding-block:10px;padding-inline:10px 14px;border-radius:14px;background:rgba(5,10,12,.35);border:1px solid var(--edge)}
.quiz-prods li[hidden]{display:none}
.quiz-prods img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none}
.quiz-prods strong{display:block;font:700 15px/1.3 var(--display);color:var(--silver-hi)}
.quiz-prods small{color:var(--muted);font-size:13px}
.quiz-tip{color:var(--stone);font-size:15px;margin-top:8px}
.quiz-tip:empty{display:none}
.quiz-note{color:var(--muted);font-size:13px;margin-top:14px}
.quiz-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.quiz-actions .btn-ghost{all:unset;cursor:pointer;color:var(--silver);font:600 14px/1 var(--display);text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(199,204,209,.35);padding:12px 6px}
@keyframes quizIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:900px){.quiz-grid{grid-template-columns:1fr}}
@media (max-width:640px){
  .quiz-intro p:last-child{font-size:15px;margin-top:10px}
  .quiz .kicker{margin-bottom:10px}
  .quiz-card{padding:20px;border-radius:22px}
  .quiz-bar{margin-bottom:18px}
  .quiz-opt{min-height:48px;padding:12px 16px;font-size:14px}
  .quiz-prods img{width:46px;height:46px}
  .quiz-actions .btn-solid{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.quiz-q,.quiz-result{animation:none}}

/* home showcase: photo and names open the product page (2026-10-13) */
.stage{cursor:pointer}
/* product page on computers (2026-10-13): thumbnails in a column left of the photo, whole gallery fits the screen height */
@media (min-width:981px){
  .pd-gallery{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start;width:100%;max-width:calc(100svh - 190px + 98px);justify-self:center}
  .pd-thumbs{order:-1;display:flex;flex-direction:column;gap:12px}
  .pd-thumb{width:84px;height:84px}
  .pd-hero .pd-media{width:100%;max-height:calc(100svh - 190px)}
  .pd-hero{padding-top:clamp(140px,17vh,165px)}
}

/* product pages (2026-10-13): three full screens (product, details, routine + questions) like the home page */
.pd-gap{margin-top:clamp(28px,5vh,56px)}
@media (min-width:641px) and (min-height:560px){
  .pd-page .pd-hero,.pd-page .pd-screen,.pd-page .cta{min-height:100svh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start}
  .pd-page .pd-screen{padding-block:clamp(112px,15vh,140px) clamp(64px,9vh,90px)}
  .pd-page .pd-screen .pd-card{padding-block:clamp(18px,3vh,30px)}
  .pd-page .pd-screen .reason{padding-block:clamp(16px,2.6vh,26px)}
  .pd-page .pd-hero,.pd-page .pd-screen{position:relative}
  .pd-page .sec-nav{display:flex}
  .pd-page .pd-screen .pd-q summary{padding-block:12px}
  .pd-page .pd-screen .pd-faq{gap:8px}
  .pd-page .pd-screen .pr-item{padding-block:10px}
  .pd-page .pd-screen .pr-item img{width:56px;height:56px}
  .pd-page .pd-screen .pd-h2{margin-bottom:14px}
  .pd-page .pd-screen{padding-block:136px 76px}
}

/* every other page (why HAWK, about, contact, privacy, products list): full screens with up/down arrows on computers (2026-10-13) */
@media (min-width:641px) and (min-height:560px){
  .paged main > section{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;scroll-snap-align:start}
  .paged main > section:not(:first-child):not(.cta){padding-top:136px;padding-bottom:80px}
  .paged main > section.page-hero{padding-bottom:80px}
  .paged .sec-nav{display:flex}
}
/* fit tall sections into one computer screen (about, contact, products list) */
@media (min-width:981px) and (min-height:560px){
  .paged .about-split .story-grid{align-items:stretch}
  .paged .about-split .story-img{min-height:0;height:calc(100svh - 216px)}
  .paged .about-grid{gap:12px}
  .paged .about-card{padding:18px 26px}
  .paged .about-card h2{font-size:clamp(22px,2vw,28px);margin-bottom:6px}
  .paged .about-card .statement{font-size:clamp(15px,1.25vw,18px);margin-bottom:6px}
  .paged .about-card p{font-size:15px;line-height:1.5}
  .paged .about-card .ticks{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px}
  .paged .contact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .paged .contact-card{padding:22px 24px}
  .paged .contact-social{grid-column:span 2}
  .paged .pl-img{aspect-ratio:auto;height:clamp(240px,calc(100svh - 430px),460px);background:var(--obsidian)}
  .paged .pl-img img{object-fit:contain}
  .paged .pl-body{padding:18px 22px 22px;gap:8px}
  .paged .pl-note{margin-top:14px}
}
@media (min-width:981px) and (min-height:560px){
  .paged main > section:not(:first-child):not(.cta){padding-top:128px;padding-bottom:70px}
  .paged .about-card .card-kicker{display:none}
  .paged .about-card ul.ticks{display:grid!important;grid-template-columns:1fr 1fr;gap:4px 18px;margin-top:6px}
  .paged .about-card ul.ticks li{font-size:14px}
  .paged .contact-card{padding:18px 22px;gap:4px}
  .paged .contact-grid + p,.paged .contact-sec .wrap > p{margin-top:12px}
}
@media (min-width:981px) and (max-height:760px){
  .paged .contact-card > span:first-child,.paged .contact-card > .ic{transform:scale(.85);transform-origin:left top}
  .paged .pl-img{height:calc(100svh - 470px)}
  .paged .reason{padding-block:18px}
}
@media (min-width:981px) and (max-height:720px){
  .paged main > section:not(:first-child):not(.cta){padding-top:118px;padding-bottom:56px}
  .paged .contact-card p,.paged .about-card p{font-size:14px;line-height:1.4}
  .paged .contact-card{padding:14px 20px}
  .paged .contact-grid{gap:10px}
}

/* "Help build HAWK" box (every page, 2026-10-13): fits one laptop screen; the sign-up form gets the wider column so it wraps less */
@media (min-width:981px){
  body .cta{padding-top:118px;padding-bottom:64px}
  body .cta-inner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);padding:30px 44px;align-items:center}
  body .cta-main h2{font-size:clamp(40px,4.4vw,66px)}
  body .cta-inner .cta-main p{margin:12px 0 20px;font-size:17px}
  body .cta-inner .founding-box h3{font-size:20px}
  body .cta-inner .founding-box p{margin:4px 0 6px!important;font-size:15px!important}
}
@media (min-width:981px) and (max-height:760px){
  body .cta{padding-top:136px;padding-bottom:30px}
  body .cta-inner .founding-box h3{font-size:18px}
  body .cta-inner{padding:22px 40px}
  body .cta-main h2{font-size:clamp(38px,4vw,56px)}
  body .cta-inner .cta-main p{font-size:16px;margin:10px 0 16px}
}
@media (min-width:981px) and (max-height:760px){
  body .cta .sec-nav{bottom:0}
  body .cta-inner{padding:18px 40px}
}

/* Journal (2026-10-15) */
.jr-list{padding:0 0 clamp(50px,7vw,90px)}
.jr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.jr-card{border-radius:24px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px}
.jr-card h2{font-size:clamp(20px,1.9vw,25px);line-height:1.2}
.jr-card h2 a{text-decoration:none}
.jr-card p{color:var(--muted);font-size:15px}
.jr-card .pd-link{margin-top:auto}
.jr-meta{font:600 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.jr-article .legal-copy ul.ticks{margin:6px 0 18px}
.jr-article .legal-copy li{color:var(--muted)}
.jr-cta{margin:34px 0 10px;padding:22px 24px;border-radius:18px;border:1px solid var(--edge-teal);background:rgba(22,215,215,.06);display:grid;gap:16px;justify-items:start}
.jr-cta p{margin:0!important}
.jr-more{padding-inline-start:18px;margin:0 0 18px}
.jr-more a{color:var(--glow)}
@media (max-width:900px){.jr-grid{grid-template-columns:1fr}}
.jr-article .legal-copy{max-width:860px;margin-inline:auto}
.jr-article .jr-meta{margin:0 0 12px}
.jr-cta{margin:22px 0 14px}
.jr-more-h{margin:0 0 6px!important}
@media (min-width:981px) and (max-height:800px){.jr-article .legal-copy{padding-block:26px}.jr-article .legal-copy p,.jr-article .legal-copy li{font-size:15px;line-height:1.55}.jr-cta{padding:16px 18px;gap:12px}}
@media (min-width:981px) and (max-height:800px){body[class*="page-journal-"] main>section:first-child h1{font-size:clamp(34px,3.6vw,50px)}}
.jr-has-video .legal-copy{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:34px;align-items:center}
.jr-video{margin:0}
.jr-video video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--obsidian);border-radius:16px;border:1px solid var(--edge-teal)}
.jr-video figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.jr-has-video .legal-copy{grid-template-columns:1fr;gap:20px}}

/* Screen transition on scroll (2026-10-15) */
.sec-anim .sa-item{opacity:0;translate:0 60px;scale:.98;filter:blur(6px);transition:opacity 1.6s var(--ease),translate 1.9s var(--ease),scale 1.9s var(--ease),filter 1.6s var(--ease);transition-delay:calc(var(--i,0) * 220ms + 150ms)}
.sec-anim .sec-in .sa-item{opacity:1;translate:none;scale:none;filter:none}
@media (prefers-reduced-motion:reduce){.sec-anim .sa-item{opacity:1;translate:none;scale:none;filter:none;transition:none}}
.legal-copy a.btn-solid{color:var(--obsidian);text-decoration:none}

/* Day moments: the HAWK man in each moment, faded behind the text (2026-10-15) */
.moment-photo{overflow:hidden;isolation:isolate}
.moment-photo:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(5,10,12,.15) 0%,rgba(5,10,12,.25) 40%,rgba(5,10,12,.88) 78%,rgba(5,10,12,.96) 100%),var(--shot) center 25%/cover no-repeat;opacity:.85;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.moment-photo:hover:after{opacity:1;transform:scale(1.04)}
.moment-photo .time{text-shadow:0 2px 18px rgba(5,10,12,.6)}

/* Page heroes with a photo of the HAWK man (2026-10-15) */
.page-hero.has-photo{padding:clamp(120px,13vw,150px) 0 clamp(30px,4vw,50px)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,70px);align-items:center}
.ph-photo{margin:0;border-radius:28px;overflow:hidden;padding:0;max-height:min(68vh,620px);aspect-ratio:1136/1408;justify-self:end;width:100%}
.ph-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.has-photo h1{font-size:clamp(44px,5.6vw,88px)}
@media (max-width:900px){.ph-grid{grid-template-columns:1fr}.ph-photo{max-height:none;aspect-ratio:4/3;justify-self:stretch}.page-hero.has-photo{padding-top:120px}}
@media (min-width:901px) and (max-height:800px){.page-hero.has-photo{padding:104px 0 24px}.ph-photo{max-height:calc(100vh - 150px)}.has-photo h1{font-size:clamp(40px,4.8vw,72px)}.has-photo .page-intro{margin-top:16px}}
@media (min-width:901px) and (max-height:800px){.paged main > section.page-hero.has-photo{padding-top:100px;padding-bottom:30px}}

/* Theme photos behind the Why HAWK reasons and About timeline boxes (2026-10-15) */
.box-photo{overflow:hidden;isolation:isolate}
.box-photo:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(5,10,12,.30) 0%,rgba(5,10,12,.62) 45%,rgba(5,10,12,.93) 100%),var(--shot) center/cover no-repeat;opacity:.7;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.box-photo:hover:after{opacity:.95;transform:scale(1.04)}
.box-photo h3,.box-photo .reason-n,.box-photo .tl-tag{text-shadow:0 2px 14px rgba(5,10,12,.7)}
.box-photo p{color:var(--silver)}

/* Home photos: routine steps in use, quiz and sign-up box (2026-10-15) */
.steps .step-photo{background-size:cover!important;background-position:center 30%!important;opacity:.55}
.steps .step:hover .step-photo{opacity:.8}
.steps .step-word{opacity:.5}
.quiz-photo{position:relative;isolation:isolate;overflow:hidden}
.quiz-photo:before{content:"";position:absolute;inset:0 45% 0 0;z-index:-1;background:url(/assets/sm/home-quiz.webp) center 25%/cover no-repeat;opacity:.38;-webkit-mask-image:linear-gradient(90deg,#000 35%,transparent);mask-image:linear-gradient(90deg,#000 35%,transparent)}
[dir=rtl] .quiz-photo:before{inset:0 0 0 45%;-webkit-mask-image:linear-gradient(270deg,#000 35%,transparent);mask-image:linear-gradient(270deg,#000 35%,transparent)}
@media (max-width:900px){.quiz-photo:before,[dir=rtl] .quiz-photo:before{inset:0 0 45% 0;opacity:.28;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}}
.cta-photo{isolation:isolate;overflow:hidden}
.cta-photo:after{content:"";position:absolute;inset:0 50% 0 0;z-index:-1;background:url(/assets/sm/box-tl-1.webp) center/cover no-repeat;opacity:.22;-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent);mask-image:linear-gradient(90deg,#000 30%,transparent);pointer-events:none}
[dir=rtl] .cta-photo:after{inset:0 0 0 50%;-webkit-mask-image:linear-gradient(270deg,#000 30%,transparent);mask-image:linear-gradient(270deg,#000 30%,transparent)}
@media (max-width:900px){.cta-photo:after,[dir=rtl] .cta-photo:after{inset:0 0 50% 0;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}}
.jr-video img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;border:1px solid var(--edge-teal)}
.jr-card.box-photo{min-height:300px}

/* iOS-style "liquid glass" (founder request 2026-10-15): clearer frosted glass, bright top edge, soft sheen */
:root{--lg-fill:rgba(242,246,246,.07);--lg-fill-lo:rgba(242,246,246,.02);--lg-edge:rgba(242,246,246,.16);--lg-spec:rgba(255,255,255,.30);--lg-tint:rgba(6,49,54,.22)}
.glass{
  background:
    radial-gradient(120% 70% at 12% 0%,rgba(255,255,255,.10),transparent 55%),
    linear-gradient(165deg,var(--lg-fill),var(--lg-fill-lo) 42%,var(--lg-tint) 100%);
  border:1px solid var(--lg-edge);
  backdrop-filter:blur(28px) saturate(185%) brightness(1.06);-webkit-backdrop-filter:blur(28px) saturate(185%) brightness(1.06);
  box-shadow:inset 0 1px 0 var(--lg-spec),inset 0 -1px 0 rgba(255,255,255,.05),inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(255,255,255,.03),0 26px 60px -30px rgba(0,0,0,.9);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s
}
@media (hover:hover){.glass:hover{border-color:rgba(242,246,246,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.07),inset 1px 0 0 rgba(255,255,255,.09),0 32px 70px -28px rgba(0,0,0,.95)}}
.top.scrolled{background:linear-gradient(180deg,rgba(242,246,246,.07),rgba(5,10,12,.30));backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);border-bottom-color:rgba(242,246,246,.12);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.lang,.sec-nav button,.sec-float button{background:linear-gradient(170deg,rgba(242,246,246,.12),rgba(242,246,246,.03));border:1px solid var(--lg-edge);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:inset 0 1px 0 var(--lg-spec),0 10px 30px -14px rgba(0,0,0,.9)}
.btn-solid{background-image:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 52%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(0,107,111,.35),0 10px 40px -12px rgba(22,215,215,.7)}
@media (max-width:640px){
  .tabbar{background:linear-gradient(170deg,rgba(242,246,246,.11),rgba(5,10,12,.38));border:1px solid var(--lg-edge);border-radius:28px;backdrop-filter:blur(30px) saturate(190%) brightness(1.05);-webkit-backdrop-filter:blur(30px) saturate(190%) brightness(1.05);box-shadow:inset 0 1px 0 var(--lg-spec),inset 0 -1px 0 rgba(255,255,255,.05),0 18px 44px -14px rgba(0,0,0,.95)}
  .tabbar .tab-main{border-radius:20px;background-image:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 24px -8px rgba(22,215,215,.8)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(10,21,24,.92)}}

/* Readable white text on photo cards (founder request 2026-10-15) */
.moment-photo p,.box-photo p,.steps .step p,.jr-card.box-photo p,.box-photo li{color:var(--platinum)!important;text-shadow:0 1px 10px rgba(5,10,12,.85)}
.moment-photo h3,.steps .step h3,.box-photo h2,.box-photo h3{text-shadow:0 2px 14px rgba(5,10,12,.85)}
:root{color-scheme:dark only}

/* Moving taglines live at the bottom of the first screen (2026-10-15): between screens they were never visible with screen-by-screen paging */
.page-index .hero{position:relative}
.hero .hero-marquee{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 0}
.page-index .hero{padding-bottom:calc(clamp(40px,7vh,90px) + 64px)}
.hero .scroll-cue{bottom:84px}
@media (min-width:641px){.page-index .hero{height:100svh;min-height:0}}
@media (min-width:641px) and (max-height:800px){.brand img{width:160px}.hero .hero-marquee{padding:8px 0}}
@media (max-width:640px){.hero .hero-marquee{position:relative;left:auto;right:auto;bottom:auto;margin:28px -20px 0;width:calc(100% + 40px)}.page-index .hero{padding-bottom:96px}}

/* One section = one screen on computers, content between header and arrows (2026-10-15); app.js fitScreens() scales tall content */
@media (min-width:641px) and (min-height:560px){
  .page-index main>section:not(.hero),.pd-page .pd-hero,.pd-page .pd-screen,.pd-page .cta,body.paged:not(.page-privacy) main>section{height:100svh!important;min-height:0!important;box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:center;padding-top:var(--fit-top,130px)!important;padding-bottom:78px!important}
  .sec-nav,.cta .sec-nav,body .cta .sec-nav{bottom:18px!important}
}
@media (min-width:641px) and (min-height:560px){body.page-privacy main>section.legal{padding-bottom:96px!important}}

/* Fewer asks, clearer promise, lighter phones (2026-10-15) */
.float-cta{display:none!important}
.survey-what{margin:10px 0 0!important;font-size:14px!important;line-height:1.4;color:var(--silver)!important;max-width:none!important}
.hero .survey-what{margin-top:14px!important}
.thanks-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.thanks-grid{grid-template-columns:1fr}}
/* background photos load only when their box is near the screen */
.box-photo:not(.bg-on),.moment-photo:not(.bg-on){--shot:none!important}
.quiz-photo:not(.bg-on):before,.cta-photo:not(.bg-on):after{background-image:none!important}
@media (max-width:640px){
  .glass{backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
  .cursor-glow{display:none}
}
@media (min-width:641px) and (max-height:800px){.page-index .hero h1{font-size:min(7.6vw,13vh)}}

/* Home hero: the HAWK man behind the product cards (founder request 2026-10-19) */
.hero-photo{position:absolute;z-index:-1;top:0;bottom:0;right:0;width:min(52vw,820px);background:url(/assets/story-man.webp) 50% 18%/cover no-repeat;opacity:.62;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 100%),linear-gradient(180deg,#000 55%,transparent 96%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 100%),linear-gradient(180deg,#000 55%,transparent 96%);mask-composite:intersect}
[dir=rtl] .hero-photo{right:auto;left:0;transform:scaleX(-1)}
@media (max-width:640px){.hero-photo{width:100%;height:62%;bottom:auto;opacity:.32;background-position:62% 12%}}
/* Card stack removed from the home hero (founder 2026-10-19): the photo fills the right side */
.page-index .hero-photo{width:min(58vw,980px);opacity:.85;background-position:50% 22%}
@media (max-width:640px){.page-index .hero-photo{width:100%;height:100%;opacity:.38;background-position:62% 8%}}

/* Critique fixes (2026-10-22): calmer motion, fewer glass panels, one survey ask, bigger tap targets, no cropped photos */
.ambient i,.stage-ring{animation:none}
.hero h1 .w{filter:blur(3px);animation-duration:.7s}
.lead,.actions{animation-duration:.6s}
.slide{filter:none;transition:opacity .45s var(--ease),transform .5s var(--ease)}
.sec-anim .sa-item{translate:0 24px;scale:none;filter:none;transition:opacity .5s var(--ease),translate .6s var(--ease);transition-delay:calc(var(--i,0) * 70ms + 40ms)}
.prod-card,.step,.contact-card,.reason{position:relative;border:1px solid var(--edge);background-color:color-mix(in srgb,var(--midnight) 38%,transparent)}
.reason-n{color:var(--glow);-webkit-text-stroke:0;font-size:18px;letter-spacing:.14em;padding-bottom:18px}
.reason .reason-h{font-size:23px;line-height:1.2;margin-bottom:10px;color:var(--silver-hi)}
.box-photo .reason-h{text-shadow:0 2px 14px rgba(5,10,12,.7)}
.status-line{font:600 12px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--silver);margin-bottom:18px}
.section-head{grid-template-columns:1fr;gap:14px;align-items:start}
.section-head p{max-width:60ch}
body .cta-inner{grid-template-columns:minmax(0,1fr)}
.cta-inner .cta-main .cta-alt{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:12px 0 0;font-size:15px;max-width:none}
.cta-alt a{display:inline-flex;align-items:center;min-height:44px;color:var(--silver-hi);text-underline-offset:4px}
.cta-alt .cta-channel{margin-top:0}
.cta-alt > span{color:var(--muted)}
.picker button:focus-visible{outline:2px solid var(--glow);outline-offset:4px;border-radius:8px}
@media (max-width:980px){.pd-thumbs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
@media (max-width:900px){.ph-photo{aspect-ratio:1136/1408;width:min(100%,440px);justify-self:center}}
@media (max-width:640px){
  .step-word{display:none}
  .pd-link,.story-link,.toggle button,.foot .foot-mail,.foot .foot-nav a,.contact-note a{display:inline-flex;align-items:center;min-height:44px}
  .reason-n{font-size:14px;padding-bottom:10px}
  .reason .reason-h{font-size:16px;line-height:1.25;margin-bottom:6px}
  .cta-alt{justify-content:center}
}
body .cta-inner{max-width:820px;margin-inline:auto}
@media (max-width:640px){.cta-alt > span{display:none}}