/* SEND Saunas — site styles, built on corporate identity v1.0 */
:root{
  --cream:#FAF6EF; --paper:#F3EADC; --line:#E3D5BF; --ink:#1C1714; --char:#15100B;
  --mute:#6B5D4C; --ember:#EA580C; --ember2:#C2410C; --amber:#F59E0B;
  --salt:#6FA8B5; --salt2:#47808E; --ice:#A9CBD4;
  --cream-dim:#C8C3BD; --cream-mute:#9E9A94;
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.015em;line-height:1.08;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.overline{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember2)}
.on-dark .overline{color:var(--amber)}
.muted{color:var(--mute)}
section{padding:72px 0}

/* ---- logo ---- */
.logo{display:inline-flex;align-items:baseline;gap:.14em;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;letter-spacing:.02em;line-height:1}
.hero-logo .logo{font-size:inherit}
.logo .ebars{display:inline-flex;flex-direction:column;gap:.115em;align-self:center;transform:translateY(-.06em);justify-content:center}
.logo .ebars i{display:block;height:.15em;border-radius:.075em}
.logo .ebars i:nth-child(1){width:.62em;background:var(--ember2)}
.logo .ebars i:nth-child(2){width:.52em;background:var(--ember)}
.logo .ebars i:nth-child(3){width:.41em;background:var(--amber)}
.logo small{font-family:Inter,sans-serif;font-weight:600;font-size:.28em;letter-spacing:.42em;text-transform:uppercase;color:var(--mute);margin-left:.5em}
.on-dark .logo small{color:var(--cream-mute)}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.97);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav nav{display:flex;align-items:center;gap:28px}
.nav nav a{font-weight:500;font-size:15px;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent}
.nav nav a:hover{color:var(--ember2)}
.nav nav a.active{border-bottom-color:var(--ember);color:var(--ember2)}
.nav nav a.cta{background:var(--ink);color:var(--cream);padding:10px 20px;border-radius:999px;border-bottom:0}
.nav nav a.cta:hover{background:var(--ember2);color:var(--cream)}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;padding:14px 28px;border-radius:999px;background:var(--ember);color:#fff;transition:background .2s,transform .15s}
.btn:hover{background:var(--ember2);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream)}
.on-dark .btn.ghost{color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--cream-mute)}
.on-dark .btn.ghost:hover{background:var(--cream);color:var(--ink)}

/* ---- hero ---- */
.hero{background:var(--char);color:var(--cream);padding:104px 0 96px;text-align:center;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.heat-field{position:absolute;inset:0;z-index:1;pointer-events:none}
.heat-field .glow{position:absolute;left:50%;top:46%;width:940px;height:560px;margin:-280px 0 0 -470px;border-radius:50%;background:radial-gradient(closest-side,rgba(234,88,12,.17),rgba(234,88,12,0) 72%);animation:glowdrift 11s ease-in-out infinite alternate}
.heat-field .glow.two{width:640px;height:400px;margin:-200px 0 0 -320px;background:radial-gradient(closest-side,rgba(245,158,11,.11),rgba(245,158,11,0) 72%);animation:glowdrift2 15s ease-in-out infinite alternate}
@keyframes glowdrift{from{transform:translate(-44px,12px) scale(.92);opacity:.7}to{transform:translate(44px,-18px) scale(1.07);opacity:1}}
@keyframes glowdrift2{from{transform:translate(60px,-8px) scale(1.06)}to{transform:translate(-52px,16px) scale(.9)}}
.heat-field .wisp{position:absolute;bottom:-140px;width:120px;height:360px;border-radius:50%;background:radial-gradient(closest-side,rgba(250,246,239,.055),rgba(250,246,239,0) 70%);animation:rise 9s linear infinite}
@keyframes rise{0%{transform:translateY(140px);opacity:0}16%{opacity:1}70%{opacity:.45}100%{transform:translateY(-640px) translateX(34px);opacity:0}}
.hero .hero-logo,.hero .lede,.hero .tagline,.hero .actions{animation:heroin .9s cubic-bezier(.2,.7,.2,1) both}
.hero .lede{animation-delay:.18s}
.hero .tagline{animation-delay:.36s}
.hero .actions{animation-delay:.5s}
@keyframes heroin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-logo .ebars i{animation:barheat 3.8s ease-in-out infinite}
.hero-logo .ebars i:nth-child(3){animation-delay:0s}
.hero-logo .ebars i:nth-child(2){animation-delay:.35s}
.hero-logo .ebars i:nth-child(1){animation-delay:.7s}
@keyframes barheat{0%,100%{box-shadow:0 0 0 rgba(234,88,12,0)}12%{box-shadow:0 0 24px rgba(234,88,12,.55)}32%{box-shadow:0 0 0 rgba(234,88,12,0)}}
.hero .lede{max-width:640px;margin:22px auto 0;font-size:18px;color:var(--cream-dim)}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);margin-top:18px}
.hero .actions{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero.light{background:var(--cream);color:var(--ink)}
.hero.light .lede{color:var(--mute)}
.hero .lede b{color:var(--cream);font-weight:600}
.hero .tagline{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15px;letter-spacing:.34em;text-transform:uppercase;color:var(--ice);margin-top:44px}
.hero-logo{display:flex;justify-content:center;margin-top:26px;font-size:clamp(64px,11vw,120px)}
.hero-logo .logo{color:var(--cream)}

/* temperature divider (maker's stamp) */
.stamp{display:flex;gap:8px;justify-content:center;padding:0}
.stamp i{height:6px;border-radius:3px;display:block}
.stamp i:nth-child(1){width:44px;background:var(--ember2)}
.stamp i:nth-child(2){width:34px;background:var(--ember)}
.stamp i:nth-child(3){width:26px;background:var(--amber)}
.stamp.cold i:nth-child(1){background:var(--salt2)}
.stamp.cold i:nth-child(2){background:var(--salt)}
.stamp.cold i:nth-child(3){background:var(--ice)}

/* ---- cards & grids ---- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:0 1px 2px rgba(28,23,20,.04),0 20px 40px -30px rgba(28,23,20,.25)}
.card h3{font-size:21px;margin-bottom:10px}
.card p{font-size:15px;color:var(--mute)}
.card.dark{background:var(--char);border-color:#2a241e;color:var(--cream)}
.card.dark p{color:var(--cream-dim)}
.card .mini{display:flex;gap:5px;margin-bottom:18px}
.card .mini i{height:4px;border-radius:2px;display:block}
.card .mini i:nth-child(1){width:26px;background:var(--ember2)}
.card .mini i:nth-child(2){width:20px;background:var(--ember)}
.card .mini i:nth-child(3){width:15px;background:var(--amber)}
.card .mini.cold i:nth-child(1){background:var(--salt2)}
.card .mini.cold i:nth-child(2){background:var(--salt)}
.card .mini.cold i:nth-child(3){background:var(--ice)}
.pill{display:inline-block;font-size:12px;font-weight:500;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:4px 12px;margin:4px 6px 0 0}
.card.dark .pill{border-color:#3a332c;color:var(--cream-mute)}

.sec-head{max-width:660px;margin-bottom:44px}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:10px 0 14px}
.sec-head p{color:var(--mute);font-size:16.5px}
.center{text-align:center}.center .sec-head{margin-left:auto;margin-right:auto}

/* product badge chip */
.prodbadge{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);border-radius:12px;padding:10px 18px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:.06em}
.prodbadge .mini{display:flex;flex-direction:column;gap:3px;margin:0}
.prodbadge .mini i{height:3.5px;border-radius:2px}
.prodbadge .mini i:nth-child(1){width:15px;background:var(--ember2)}
.prodbadge .mini i:nth-child(2){width:12px;background:var(--ember)}
.prodbadge .mini i:nth-child(3){width:9px;background:var(--amber)}
.prodbadge.cold{background:#241e18}
.prodbadge.cold .mini i:nth-child(1){background:var(--salt2)}
.prodbadge.cold .mini i:nth-child(2){background:var(--salt)}
.prodbadge.cold .mini i:nth-child(3){background:var(--ice)}
.seats{display:flex;gap:5px;margin:14px 0 6px}
.seats i{width:8px;height:8px;border-radius:50%;background:var(--ember)}

/* ---- split panels (home) ---- */
.split{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.panel{border-radius:24px;padding:46px 42px;position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end}
.panel .stamp{justify-content:flex-start;margin-bottom:auto}
.panel h3{font-size:30px;margin:26px 0 8px}
.panel p{font-size:15.5px;max-width:400px}
.panel .go{margin-top:22px;font-family:'Space Grotesk',sans-serif;font-weight:600;color:inherit}
.panel .go::after{content:" →"}
.panel.hot{background:linear-gradient(135deg,#fff, #F7EEDF);border:1px solid var(--line)}
.panel.hot p{color:var(--mute)}
.panel.hot .go{color:var(--ember2)}
.panel.cold{background:linear-gradient(135deg,#17120E,#241E18);color:var(--cream)}
.panel.cold p{color:var(--cream-dim)}
.panel.cold .go{color:var(--ice)}

/* ---- configurator ---- */
.config{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.configgrid{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center}
@media(max-width:880px){.configgrid{grid-template-columns:1fr}}
.stage{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;position:relative;overflow:hidden}
.stage .view{display:none}
.stage .view.active{display:block;animation:fadein .5s}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
svg .wd{transition:fill .5s ease}
.controls h3{font-size:24px;margin-bottom:6px}
.controls>p{font-size:14.5px;color:var(--mute);margin-bottom:26px}
.ctl-label{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:22px 0 10px}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px}
.seg button{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;border:0;background:transparent;color:var(--mute);padding:9px 20px;border-radius:999px;cursor:pointer;transition:all .2s}
.seg button.active{background:var(--ink);color:var(--cream)}
.tones{display:flex;gap:14px}
.tone{border:0;background:transparent;cursor:pointer;text-align:center;padding:0}
.tone .chip{width:54px;height:54px;border-radius:50%;border:3px solid transparent;transition:border-color .2s,transform .15s;background:linear-gradient(145deg,var(--a),var(--b))}
.tone:hover .chip{transform:scale(1.06)}
.tone.active .chip{border-color:var(--ember)}
.tone span{display:block;font-size:12px;font-weight:500;color:var(--mute);margin-top:8px}
.tone.active span{color:var(--ink);font-weight:600}
.tone[data-tone="light"] .chip{--a:#EFDCBB;--b:#D9BA89}
.tone[data-tone="medium"] .chip{--a:#D8AC72;--b:#B07F49}
.tone[data-tone="dark"] .chip{--a:#96663D;--b:#5F3D22}
/* ---- 3D viewer ---- */
.seg3d{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.seg3d button{font:inherit;font-size:13px;cursor:pointer;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mute);transition:background .15s,color .15s}
.seg3d button:hover{background:var(--paper)}
.seg3d button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.stage3d{background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden;height:min(62vh,560px)}
.stage3d three-d-stage{display:block;width:100%;height:100%}
three-d-stage:not(:defined){visibility:hidden}
#dims3d{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.config-note{font-size:13px;color:var(--mute);margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.config-note b{color:var(--ink)}

/* photo views — wood tone is simulated with a colour-graded overlay per view.
   The exterior photo is naturally light timber; the interior photo is naturally medium. */
.ph{position:relative;border-radius:16px;overflow:hidden}
.ph img{width:100%;display:block}
/* both stage views render at one fixed ratio so exterior/interior match on toggle */
.stage .ph{aspect-ratio:4/3}
.stage .ph img{width:100%;height:100%;object-fit:cover}

.ph .tint{position:absolute;inset:0;pointer-events:none}

/* ---- unit photography + engraved SEND mark ---- */
.unit-shot{position:relative;border-radius:14px;overflow:hidden;background:#101010;container-type:inline-size}
.unit-shot img{width:100%;display:block}
.unit-shot .engrave{position:absolute;transform:skewY(-1deg);pointer-events:none}
.elogo{display:inline-flex;align-items:baseline;gap:.14em;font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1;letter-spacing:.04em;font-size:34px;font-size:6.6cqw;color:rgba(250,246,239,.92);text-shadow:0 1px 0 rgba(255,255,255,.13),0 -1px 1px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.55)}
.elogo .ebars{display:inline-flex;flex-direction:column;gap:.115em;align-self:center;transform:translateY(-.06em)}
.elogo .ebars i{display:block;height:.15em;border-radius:.075em;box-shadow:0 1px 0 rgba(255,255,255,.1),0 3px 7px rgba(0,0,0,.55)}
.elogo .ebars i:nth-child(1){width:.62em;background:var(--salt2)}
.elogo .ebars i:nth-child(2){width:.52em;background:var(--salt)}
.elogo .ebars i:nth-child(3){width:.41em;background:var(--ice)}
.engrave .esub{display:block;margin-top:1em;font-family:Inter,sans-serif;font-weight:600;font-size:9px;font-size:1.6cqw;letter-spacing:.4em;color:rgba(250,246,239,.48);text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap}

/* ---- badge section ---- */
.badge-sec{background:var(--char);color:var(--cream)}
.badgegrid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center}
@media(max-width:820px){.badgegrid{grid-template-columns:1fr}}
.badge-sec h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:12px 0 16px}
.badge-sec p{color:var(--cream-dim);font-size:16px;max-width:480px}

/* ---- spec table ---- */
.spectable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14.5px}
.spectable th,.spectable td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--line)}
.spectable th{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);background:var(--paper)}
.spectable tr:last-child td{border-bottom:0}
.spectable td:first-child{font-weight:600}
.spectable td{color:var(--mute)}
.tablewrap{overflow-x:auto;border-radius:var(--r)}

/* ---- CTA strip ---- */
.cta-strip{background:var(--char);color:var(--cream);text-align:center;padding:84px 0}
.cta-strip h2{font-size:clamp(2rem,4.5vw,3rem)}
.cta-strip p{color:var(--cream-dim);margin:14px auto 30px;max-width:480px}

/* ---- contact ---- */
.contactgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:start}
@media(max-width:880px){.contactgrid{grid-template-columns:1fr}}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){form .row{grid-template-columns:1fr}}
label{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:18px 0 7px}
input,select,textarea{width:100%;font-family:Inter,sans-serif;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--ember);box-shadow:0 0 0 3px rgba(234,88,12,.14)}
textarea{resize:vertical;min-height:130px}
.infocard{margin-bottom:18px}
.infocard h3{font-size:16px}
.infocard p{font-size:14.5px}
.infocard a{color:var(--ember2);font-weight:500}

/* ---- footer ---- */
footer{background:var(--char);color:var(--cream-mute);padding:64px 0 48px;text-align:center;font-size:14px}
footer .logo{color:var(--cream);font-size:22px;justify-content:center;margin:22px 0 8px}
footer .tag{font-family:'Space Grotesk',sans-serif;letter-spacing:.28em;font-size:11px;color:var(--ice);text-transform:uppercase}
footer .fine{margin-top:26px;font-size:12.5px;color:#6d665e}
footer nav{margin-top:18px;display:flex;gap:22px;justify-content:center}
footer nav a:hover{color:var(--cream)}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media(max-width:640px){
  .nav nav{gap:16px}
  .nav nav a{font-size:13.5px}
  .logo small{display:none}
  section{padding:52px 0}
}

/* ---- flip tiles (ways to get one) ---- */
.flipgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:820px;margin:0 auto}
.flipgrid .flip.wide{grid-column:1 / -1}
.flipgrid .flip.wide .flip-inner{min-height:130px}
.flipgrid .flip.wide .flip-face.front{flex-direction:row;align-items:center;gap:20px}
.flipgrid .flip.wide .flip-face.front h3{flex:1}
.flipgrid .flip.wide .flip-face.back{align-items:center;text-align:center}
@media (max-width:640px){.flipgrid{grid-template-columns:1fr;max-width:420px}.flipgrid .flip.wide .flip-face.front{flex-direction:column;align-items:flex-start}}
.flipgrid .flip{perspective:1200px;outline:none}
.flip-inner{position:relative;min-height:210px;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.25,1)}
.flip:hover .flip-inner,.flip:focus-visible .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;margin:0}
.flip-face.front{gap:14px}
.flip-face.front h3{margin:0}
.flip-face.back{transform:rotateY(180deg)}
.flip-face.back p{margin:0}
.flip-hint{font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ash,#9E9A94);opacity:.75}
@media (hover:none){.flip .flip-inner{transform:none!important}.flip-face{position:static;backface-visibility:visible}.flip-face.back{transform:none;margin-top:-14px;border-top-left-radius:0;border-top-right-radius:0}.flip-hint{display:none}}

/* ---- landing intro: Salt & Ember x Natural Designs -> SEND ---- */
.intro{position:fixed;inset:0;z-index:60;background:var(--char);display:flex;align-items:center;justify-content:center;animation:introout .9s ease .1s both;animation-play-state:paused}
.intro.done{animation-play-state:running}
@keyframes introout{to{opacity:0;visibility:hidden}}
.intro-stage{position:relative;text-align:center;width:min(720px,86vw)}
.intro-makers{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4.5vw,52px)}
.maker{color:var(--cream)}
.maker.se{width:clamp(130px,18vw,190px);filter:drop-shadow(0 2px 10px rgba(0,0,0,.4));animation:sejourney 4.4s cubic-bezier(.45,.05,.55,.95) .4s both}
.maker.nd{width:clamp(140px,21vw,220px);animation:ndjourney 4.4s cubic-bezier(.45,.05,.55,.95) .4s both}
.maker-x{font-family:'Space Grotesk',sans-serif;font-size:clamp(15px,2.2vw,22px);color:var(--ash,#9E9A94);animation:xthenout 4.6s ease .4s both}
@keyframes sejourney{0%{opacity:0;transform:translateX(-128px) scale(1.03);filter:blur(5px)}20%{opacity:1;filter:blur(0)}60%{opacity:1}100%{opacity:0;transform:translateX(52px) scale(.74);filter:blur(12px)}}
@keyframes ndjourney{0%{opacity:0;transform:translateX(128px) scale(1.03);filter:blur(5px)}20%{opacity:1;filter:blur(0)}60%{opacity:1}100%{opacity:0;transform:translateX(-52px) scale(.74);filter:blur(12px)}}
@keyframes xthenout{0%{opacity:0;transform:scale(.4)}22%{opacity:1;transform:scale(1)}44%{opacity:.9;transform:scale(1)}62%{opacity:0;transform:scale(.55)}100%{opacity:0}}
@keyframes xin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.intro-mark{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;animation:markin 1.8s cubic-bezier(.2,.7,.2,1) 4.9s both}
@keyframes markin{0%{opacity:0;transform:scale(.94);filter:blur(18px)}45%{opacity:.7}100%{opacity:1;transform:scale(1);filter:none}}
.intro-mark .logo{font-size:clamp(52px,9vw,96px);color:var(--cream);pointer-events:none}
.intro-mark .logo .ebars i{animation:barheat 3.8s ease-in-out infinite}
.intro-tag{display:flex;align-items:center;gap:.9em;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(12px,1.5vw,16px);letter-spacing:.36em;text-transform:uppercase;animation:xin .9s ease 8.15s both}
.intro-tag .sep{font-style:normal;color:var(--cream-mute);opacity:.6}
.heat{color:var(--ember)}.cold{color:var(--salt)}.repeat{color:var(--amber)}
/* big sequential word flashes, centered on the tagline row */
.tag-flash{position:absolute;left:0;right:0;bottom:-4px;height:1.6em;pointer-events:none}
.tag-flash .fw{position:absolute;left:0;right:0;top:50%;text-align:center;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(26px,4.2vw,44px);letter-spacing:.22em;text-transform:uppercase;opacity:0;transform:translateY(-50%) scale(.8);animation:flashword 1.05s cubic-bezier(.2,.8,.3,1) both}
.tag-flash .fw.heat{animation-delay:5.65s}
.tag-flash .fw.cold{animation-delay:6.4s}
.tag-flash .fw.repeat{animation-delay:7.15s}
@keyframes flashword{0%{opacity:0;transform:translateY(-50%) scale(.9);filter:blur(5px);letter-spacing:.42em}30%{opacity:1;transform:translateY(-50%) scale(1.02);filter:blur(0);letter-spacing:.22em}58%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-50%) scale(1);filter:blur(3px);letter-spacing:.16em}}
.intro-sound{position:absolute;bottom:28px;left:32px;display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid rgba(250,246,239,.25);color:rgba(250,246,239,.6);font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border-radius:99px;cursor:pointer}
.intro-sound:hover{color:var(--cream);border-color:rgba(250,246,239,.6)}
.intro-sound .wave{opacity:.35;transition:opacity .3s}
.intro-sound.on{color:var(--cream);border-color:rgba(250,246,239,.5)}
.intro-sound.on .wave{opacity:1}
.intro-skip{position:absolute;bottom:28px;right:32px;background:none;border:1px solid rgba(250,246,239,.25);color:rgba(250,246,239,.6);font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:8px 16px;border-radius:99px;cursor:pointer}
.intro-skip:hover{color:var(--cream);border-color:rgba(250,246,239,.6)}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* steam layer between the makers and the SEND mark */
.intro-steam{position:absolute;left:calc(50% - 34px);top:50%;width:0;height:0;pointer-events:none}
.intro-steam span{position:absolute;bottom:-150px;left:-60px;width:120px;height:330px;border-radius:50%;background:radial-gradient(closest-side,rgba(250,246,239,.17),rgba(250,246,239,0) 70%);filter:blur(11px);opacity:0;animation:steamrise 3.6s cubic-bezier(.3,.2,.4,1) both}
.intro-steam span:nth-child(1){animation-delay:3.1s;left:-92px;width:110px}
.intro-steam span:nth-child(2){animation-delay:3.25s;left:-30px;width:150px}
.intro-steam span:nth-child(3){animation-delay:3.2s;left:32px;width:120px}
.intro-steam span:nth-child(4){animation-delay:3.5s;left:-62px;width:90px}
.intro-steam span:nth-child(5){animation-delay:3.6s;left:6px;width:100px}
@keyframes steamrise{0%{opacity:0;transform:translateY(150px) scaleY(.55)}20%{opacity:1}68%{opacity:.55}100%{opacity:0;transform:translateY(-340px) translateX(24px) scaleY(1.3)}}