:root{
  --ink:#161616;--ink-2:#3a3a3a;--accent:#c81e1e;--dot:#ffd400;
  --panel:#161616;--panel-line:rgba(255,255,255,.12);
  --gut:clamp(20px,5.7vw,82px);--ease:cubic-bezier(.22,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff}
body{font-family:'Inter Tight',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.atmo{position:fixed;inset:0;z-index:0;pointer-events:none;background:#fff}
.atmo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
main{position:relative;z-index:1}

/* Nav */
.nav{position:fixed;z-index:50;top:20px;left:var(--gut);right:var(--gut);height:60px;border-radius:999px;background:#fff;display:flex;align-items:center;padding:0 10px 0 22px;
  box-shadow:0 1px 0 rgba(20,20,20,.04),0 10px 30px -18px rgba(20,20,20,.25);opacity:0;transform:translateY(-8px);animation:navin .9s var(--ease) .15s forwards}
@keyframes navin{to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.bn{display:grid;line-height:1}
.bn small{margin-top:3px;font-size:8.5px;font-weight:600;letter-spacing:.04em;color:var(--accent);white-space:nowrap}
.links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:31px;font-size:14px;font-weight:500;letter-spacing:-.005em}
.links a{opacity:.92;transition:opacity .2s}
.links a:hover,.links a[aria-current]{opacity:.55}
.right{margin-left:auto;display:flex;align-items:center}
.mob{display:none;position:relative;margin-left:4px}
.mob summary{list-style:none;width:42px;height:42px;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.mob summary::-webkit-details-marker{display:none}
.menu{position:absolute;right:-6px;top:56px;min-width:190px;display:grid;background:#fff;border-radius:20px;padding:8px;box-shadow:0 20px 40px -18px rgba(20,20,20,.45)}
.menu a{padding:12px 14px;font-size:15px;font-weight:500;border-radius:12px}
.menu a:hover{background:#f3f3f3}
.wafab{position:fixed;z-index:60;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.55);transition:transform .25s var(--ease)}
.wafab:hover{transform:scale(1.08)}
.wafab svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.login{font-size:14px;font-weight:500;padding:0 14px;transition:padding .35s var(--ease)}
.navcta{width:42px;height:42px;overflow:hidden;border-radius:999px;margin-left:-42px;transform:scale(0);transform-origin:100% 50%;
  transition:transform .35s var(--ease),width .65s var(--ease) .22s,margin .35s var(--ease)}
.navcta .btn{width:142px}
.navcta .lbl{opacity:0;transition:opacity .4s .45s}
#nav.on .navcta{width:142px;margin-left:16px;transform:scale(1)}
#nav.on .navcta .lbl{opacity:1}
#nav.on .login{padding-right:0}

.navcta{width:34px;height:34px;margin-left:-34px}
.navcta .btn{width:112px;height:34px;padding:0 34px 0 15px;font-size:12.5px}
.navcta .dot{right:13px;width:8px;height:8px;margin-top:-4px}
.navcta .btn:hover .dot{width:26px;height:26px;margin-top:-13px;right:4px}
#nav.on .navcta{width:112px}

/* Button */
.btn{position:relative;display:inline-flex;align-items:center;height:42px;padding:0 46px 0 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;border:0;font-family:inherit;cursor:pointer}
.dot{position:absolute;right:16px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--dot);box-shadow:0 0 10px rgba(255,212,0,.7);display:grid;place-items:center;
  transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),right .45s var(--ease),box-shadow .45s}
.dot svg{width:12px;height:12px;opacity:0;transform:translateX(-4px);transition:opacity .3s .05s,transform .3s .05s}
.btn:hover .dot{width:32px;height:32px;margin-top:-16px;right:5px;box-shadow:none}
.btn:hover .dot svg{opacity:1;transform:none}
.btn.lg{height:62px;padding:0 62px 0 28px;font-size:17px}
.btn.lg .dot{width:14px;height:14px;margin-top:-7px;right:24px}
.btn.lg .dot svg{width:16px;height:16px}
.btn.lg:hover .dot{width:48px;height:48px;margin-top:-24px;right:7px}

/* Hero */
.hero{position:relative;height:100vh;min-height:640px}
.hero>*{position:absolute;left:var(--gut)}
#h1{top:21.5vh;font-weight:400;font-size:clamp(34px,4.65vw,70px);line-height:1.03;letter-spacing:-.035em;white-space:nowrap}
.hl{color:var(--accent)}
.trust{top:58vh;font-size:clamp(15px,1.28vw,19px);letter-spacing:-.015em;color:var(--ink-2)}
.hero .btn.lg{bottom:7.5vh}
.logos{left:auto;right:var(--gut);width:calc(50% - var(--gut));top:55vh;bottom:7.5vh;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:6px}
.logos a{position:relative;overflow:hidden;border-radius:8px;background:#ddd}
.logos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.logos a::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(transparent 35%,rgba(0,0,0,.78));box-shadow:inset 0 0 0 0 var(--dot);transition:box-shadow .25s}
.logos a:hover::after,.logos a:focus-visible::after{box-shadow:inset 0 0 0 3px var(--dot)}
.logos a:hover img{transform:scale(1.08)}
.logos span{position:absolute;z-index:1;left:12px;right:8px;bottom:10px;color:#fff;font-size:clamp(10px,.9vw,13px);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

.hero .hphoto{left:auto;right:var(--gut);top:14vh;width:34vw;height:37vh;object-fit:cover;border-radius:28px;border:6px solid #fff;box-shadow:0 30px 60px -30px rgba(20,20,20,.5)}

.fade-up{opacity:0;transform:translateY(14px)}
body.ready .fade-up{animation:fu .9s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes fu{to{opacity:1;transform:none}}

/* Statement */
.statement{position:relative;height:306vh;margin-top:-31vh;pointer-events:none}
.pin{position:sticky;top:0;height:100vh}
#stmt{position:absolute;top:41.5vh;left:0;right:0;text-align:center;font-weight:400;font-size:clamp(20px,2.8vw,42px);line-height:1.16;letter-spacing:-.03em;white-space:nowrap;will-change:transform}

/* Dark split */
.split{position:relative;z-index:2;background:var(--panel);color:#fff;min-height:100vh;display:grid;grid-template-columns:58.3% 41.7%}
.split .l{position:relative;padding-left:var(--gut);padding-bottom:10vh}
.split .l::before{content:"";position:absolute;left:var(--gut);top:0;bottom:0;width:1px;background:var(--panel-line)}
#h2{font-weight:400;font-size:clamp(32px,3.15vw,48px);line-height:1.08;letter-spacing:-.03em;padding:21vh 0 0 6.2vw}
.row{margin-top:6.4vh;border-top:1px solid var(--panel-line);display:grid;grid-template-columns:1fr 1.05fr;gap:24px;padding:3vh 6vw 0 6.2vw;
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.row+.row{margin-top:4vh}
.rows.on .row{opacity:1;transform:none}
.rows.on .row+.row{transition-delay:.15s}
.row h3{font-weight:400;font-size:clamp(17px,1.4vw,21px)}
.row p{font-size:clamp(13px,1.1vw,16px);line-height:1.38;color:rgba(255,255,255,.5);max-width:20em}
.row b{color:#fff;font-weight:500}
.map{grid-column:1/-1;width:100%;height:230px;border:0;border-radius:16px;margin-top:8px;background:#222}
.row a{text-decoration:underline;text-underline-offset:3px}
.split .r{position:relative;overflow:hidden;background:#111}
#bricks{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 60%;object-fit:cover}
.split .r::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.6))}
.hours{z-index:1;position:absolute;left:8%;right:8%;bottom:9vh;background:rgba(20,20,20,.72);border:1px solid var(--panel-line);border-radius:22px;padding:28px;backdrop-filter:blur(8px)}
.hours h4{font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#ffd400;margin-bottom:16px}
.hours dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:clamp(15px,1.25vw,19px)}
.hours dt{color:rgba(255,255,255,.55)}
.hours .btn{margin-top:24px;background:#fff;color:var(--ink)}

/* Reviews */
.reviews{position:relative;z-index:2;background:var(--dot);padding:12vh var(--gut)}
.reviews h2{font-weight:400;font-size:clamp(32px,3.15vw,48px);line-height:1.08;letter-spacing:-.03em}
.score{display:flex;align-items:center;gap:16px;margin:20px 0 36px;font-size:15px;line-height:1.5}
.score b{font-size:56px;font-weight:600;letter-spacing:-.04em;line-height:1}
.stars{color:var(--accent);font-size:19px;letter-spacing:2px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.rgrid figure{background:#fff;border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 40px -30px rgba(20,20,20,.5)}
.rgrid blockquote{flex:1;font-size:17px;line-height:1.4;letter-spacing:-.01em}
.rgrid figcaption{font-size:13.5px;color:#4a4a4a}
.rgrid figcaption b{color:var(--ink);font-weight:600}
.reviews .btn{margin-top:32px}

/* Footer */
footer{position:relative;z-index:2;background:#0c0c0c;color:rgba(255,255,255,.6);padding:48px var(--gut);display:flex;flex-wrap:wrap;gap:20px 48px;font-size:14px;line-height:1.6}
footer strong{display:block;color:#fff;font-weight:500;margin-bottom:4px}
footer .copy{flex-basis:100%;font-size:12.5px;color:rgba(255,255,255,.45);border-top:1px solid var(--panel-line);padding-top:20px;margin-top:12px}
footer .copy a{color:var(--dot)}
footer .copy a:hover{text-decoration:underline}
.social{flex:1;min-width:260px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 20px}
.social strong{grid-column:1/-1}
.social a{display:flex;align-items:center;gap:12px;color:#fff;line-height:1.3}
.social small{display:block;font-size:12px;color:rgba(255,255,255,.5)}
.si{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--dot);transition:background .25s,color .25s,transform .25s var(--ease)}
.si svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.social a:hover .si{background:var(--dot);color:var(--ink);transform:scale(1.08)}

/* Products page */
.phead{position:relative;padding:22vh var(--gut) 6vh}
.phead h1{font-weight:400;font-size:clamp(34px,4.65vw,70px);line-height:1.03;letter-spacing:-.035em}
.phead p{margin-top:20px;font-size:clamp(15px,1.28vw,19px);color:var(--ink-2);max-width:36em;line-height:1.4}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--gut) 28px}
.chips button{font:500 14px 'Inter Tight',system-ui,sans-serif;color:var(--ink);background:rgba(255,255,255,.75);border:1px solid rgba(20,20,20,.12);border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .2s,color .2s}
.chips button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding:0 var(--gut) 12vh}
.card{background:#fff;border:1px solid rgba(20,20,20,.08);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px -24px rgba(20,20,20,.4)}
.card img{width:100%;height:170px;object-fit:cover;background:#eee}
.card .bd{padding:20px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card small{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b}
.card h3{font-weight:500;font-size:19px;letter-spacing:-.02em}
.card p{font-size:14px;line-height:1.45;color:#4a4a4a;flex:1}
.card .btn{align-self:flex-start;margin-top:6px}
.note{padding:0 var(--gut) 8vh;font-size:13.5px;color:#4a4a4a}

@media (max-width:820px){
  .links,.ig,.hphoto{display:none}
  .mob{display:block}
  .nav{height:54px;top:12px}
  #nav.on .navcta{margin-left:8px}
  .login{padding:0 6px}
  #h1{top:17vh;font-size:7.4vw;white-space:normal;right:var(--gut)}
  .trust{top:44vh;right:var(--gut)}
  .logos{left:var(--gut);width:auto;top:50vh;bottom:18vh;gap:4px}
  .logos span{left:6px;bottom:6px;font-size:9px;letter-spacing:0}
  .hero .btn.lg{bottom:6vh}
  #stmt{white-space:normal;font-size:23px;max-width:15em;margin:0 auto}
  #stmt br{display:none}
  .split{grid-template-columns:1fr;grid-template-rows:auto 70vh}
  #h2{padding:16vh 0 0 6vw}
  .row{grid-template-columns:1fr;padding:3vh 6vw 6vh}
  .phead{padding-top:16vh}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}
@media (max-width:480px){#nav.on .bn small{display:none}}