/* YOUTOPIA website v2. One stylesheet for every page. */
:root{
  color-scheme:light;
  --paper:#FAF8F3; --paper-2:#F3EFE6; --ink:#23303C; --ink-2:#56616D; --rule:#E2DCCF;
  --a-sun:#F8A900; --a-ochre:#9C7424; --a-burg:#7E2D3A;
  --f-teal:#2D7A8C; --f-ink:#2A3F5C; --f-turq:#4FA8A8; --f-mist:#E6F0F0;
  --w-sage:#89C4A8; --w-teal:#4A9A88; --w-rose:#C47870; --w-mist:#EAF3EE;
  --accent:var(--a-burg); --accent-2:var(--a-ochre); --accent-mist:#F6EFE2;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Familjen Grotesk','Segoe UI',system-ui,sans-serif;
  --gutter:clamp(16px,5vw,72px);
  --max:1240px;
}
body.flow{--accent:var(--f-teal);--accent-2:var(--f-ink);--accent-mist:var(--f-mist)}
body.within{--accent:var(--w-teal);--accent-2:var(--w-rose);--accent-mist:var(--w-mist)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 19px/1.6 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;text-wrap:balance;margin:0}
p{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:20}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- page transitions between pages of the site ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.28s ease-in both vt-out}
  ::view-transition-new(root){animation:.42s cubic-bezier(.2,.7,.2,1) both vt-in}
  ::view-transition-group(brand-sun){animation-duration:.6s}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- the logo: the sun turns, the wordmark stays still ---------- */
.brand{display:inline-flex;align-items:center;gap:clamp(8px,1vw,12px);text-decoration:none}
.brand .sun{width:clamp(38px,4.2vw,52px);height:auto;view-transition-name:brand-sun}
.brand .word{height:clamp(19px,2.1vw,26px);width:auto;view-transition-name:brand-word}
.turn{animation:turn 36s linear infinite}
@keyframes turn{to{rotate:360deg}}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font:500 16px var(--sans)}
.nav a{text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent}
.nav a:hover{border-bottom-color:currentColor}
.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}
.nav .cta{border:1.5px solid var(--ink);border-radius:999px;padding:8px 16px}
.nav .cta:hover{background:var(--ink);color:var(--paper)}
.nav a{white-space:nowrap}
@media (max-width:640px){.nav .hide-s{display:none}}
@media (max-width:480px){.nav .cta{display:none}.nav{gap:14px}}

/* ---------- the Dubai sky ---------- */
.sky{position:relative;overflow:hidden;background:#CFE3E6}
.sky svg{display:block;width:100%;height:100%}
.sky .when{position:absolute;right:var(--gutter);top:18px;font:500 14px/1 var(--sans);color:var(--ink);background:rgba(250,248,243,.72);padding:7px 12px;border-radius:999px;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sky .s-sun{transform-box:fill-box;transform-origin:center;animation:turn 90s linear infinite}
.sky .star{animation:twinkle var(--tw,4s) ease-in-out infinite alternate}
.sky .win-tw{animation:flick var(--tw,7s) steps(1) infinite}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}
@keyframes flick{0%,70%{opacity:1}72%,88%{opacity:.15}90%{opacity:1}}
.hero-sky{height:clamp(300px,46vw,560px)}

/* ---------- hero text sits below the horizon, on paper ---------- */
.hero-text{padding-block:clamp(36px,5vw,64px) clamp(40px,6vw,84px);display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.hero-text h1{font-size:clamp(44px,6.6vw,96px);line-height:.98;font-weight:300}
.hero-text .lede{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:40ch}
.hero-text .lede p + p{margin-top:14px}
.kicker{font:500 16px var(--sans);color:var(--accent);display:block;margin-bottom:16px}
@media (max-width:820px){.hero-text{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 16px var(--sans);text-decoration:none;border-radius:999px;padding:13px 22px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- sections ---------- */
.band{padding-block:clamp(64px,9vw,128px)}
.band.mist{background:var(--accent-mist)}
.band + .band:not(.mist){border-top:1px solid var(--rule)}
.band h2{font-size:clamp(34px,4.4vw,60px);line-height:1.02;font-weight:300;max-width:18ch}
.band .intro{font-size:clamp(18px,1.5vw,20px);color:var(--ink-2);max-width:56ch;margin-top:20px}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,6vw,96px);align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.prose p{max-width:60ch}
.prose p + p{margin-top:18px}

/* ---------- home: the two doors ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(36px,5vw,56px)}
.door{position:relative;display:grid;gap:22px;align-content:start;padding:clamp(26px,3.4vw,44px);border-radius:18px;text-decoration:none;background:#fff;border:1px solid var(--rule);overflow:hidden;min-height:clamp(300px,32vw,420px);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.door:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(35,48,60,.45)}
.door .lock{display:flex;align-items:center;gap:12px}
.door .lock .sun{width:clamp(56px,6vw,76px)}
.door .lock .word{height:clamp(22px,2.4vw,30px);width:auto}
.door h3{font-size:clamp(28px,2.8vw,38px);line-height:1.08;font-weight:300;max-width:16ch}
.door p{color:var(--ink-2);max-width:38ch}
.door .go{margin-top:auto;font:600 16px var(--sans);color:var(--door)}
.door .glow{position:absolute;right:-18%;bottom:-38%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--door-soft),transparent);pointer-events:none;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.door:hover .glow{transform:scale(1.15)}
.door.d-flow{--door:var(--f-teal);--door-soft:rgba(79,168,168,.28)}
.door.d-within{--door:var(--w-teal);--door-soft:rgba(137,196,168,.34)}
.door:hover .sun{animation-duration:9s}
@media (max-width:760px){.doors{grid-template-columns:1fr}}

/* ---------- Flow: four moves, a line draws through them as you scroll ---------- */
.moves{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px);position:relative}
.moves::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--rule)}
.moves::after{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(1)}
.moves li{position:relative;display:grid;gap:10px;align-content:start}
.moves .dot{width:46px;height:46px;border-radius:50%;background:var(--paper);border:2px solid var(--accent);display:grid;place-items:center;font:600 17px var(--sans);color:var(--accent);position:relative;z-index:1}
.moves b{font:400 clamp(26px,2.4vw,32px)/1.05 var(--serif);letter-spacing:-.015em;margin-top:8px}
.moves p{font-size:17px;color:var(--ink-2)}
@supports ((animation-timeline: view()) and (animation-range: 0% 100%)){
  @media (prefers-reduced-motion:no-preference){
    .moves::after{animation:draw linear both;animation-timeline:view();animation-range:entry 60% cover 55%}
  }
}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:820px){
  .moves{grid-template-columns:1fr}
  .moves::before,.moves::after{left:22px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:top}
  .moves li{grid-template-columns:46px 1fr;column-gap:18px}
  .moves li > :not(.dot){grid-column:2}
  .moves b{margin-top:6px}
  @keyframes draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

.pull{font:300 clamp(30px,3.8vw,52px)/1.12 var(--serif);letter-spacing:-.018em;max-width:24ch;text-wrap:balance}
.pull-by{margin-top:22px;color:var(--ink-2);max-width:56ch}

.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:baseline}
.ticks li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);translate:0 -2px}

/* ---------- Flow: products shelf ---------- */
.shelf{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(36px,5vw,56px)}
.product{display:grid;grid-template-rows:auto 1fr;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--rule);text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.product:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(35,48,60,.45)}
.product .sky{height:clamp(170px,18vw,230px)}
.product .txt{padding:clamp(22px,2.6vw,32px);display:grid;gap:10px;align-content:start}
.product h3{font-size:clamp(30px,3vw,40px);line-height:1}
.product .tag{font:500 15px var(--sans);color:var(--f-teal)}
.product p{color:var(--ink-2)}
.product .go{font:600 16px var(--sans);color:var(--f-teal);margin-top:6px}
.next{border:1.5px dashed #C9D6D6;border-radius:18px;padding:clamp(22px,2.6vw,32px);display:grid;align-content:center;gap:10px;color:var(--ink-2)}
.next b{font:400 26px/1.1 var(--serif);color:var(--ink)}
@media (max-width:820px){.shelf{grid-template-columns:1fr}}

/* ---------- The Nightshift: the night that turns into morning as you scroll ---------- */
.journey{position:relative}
.journey .sticky-sky{position:sticky;top:76px;height:clamp(150px,24vh,230px);z-index:2;border-radius:0 0 18px 18px;overflow:hidden;box-shadow:0 18px 30px -28px rgba(35,48,60,.6)}
.steps{list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:120px 1fr;gap:clamp(18px,4vw,56px);padding-block:clamp(44px,7vh,80px);border-bottom:1px solid var(--rule);align-items:start}
.step .no{font:300 clamp(64px,8vw,112px)/.8 var(--serif);color:var(--f-teal);font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(28px,3vw,40px);line-height:1.05}
.step .when-label{font:500 15px var(--sans);color:var(--ink-2);display:block;margin-bottom:10px}
.step p{color:var(--ink-2);max-width:58ch;margin-top:12px}
.gate{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--f-ink);color:#EEF2F7;border-radius:14px;padding:14px 18px;max-width:62ch}
.gate b{font:600 14px var(--sans);background:#fff;color:var(--f-ink);border-radius:999px;padding:4px 12px}
.gate span{font-size:17px;line-height:1.45}
@media (max-width:640px){.step{grid-template-columns:1fr;gap:6px}.step .no{font-size:56px}}

/* the recommendation email, drawn as it arrives */
.mail{background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:0 30px 60px -40px rgba(35,48,60,.5);overflow:hidden;max-width:560px}
.mail .head{padding:16px 20px;border-bottom:1px solid var(--rule);display:grid;gap:4px;font:15px/1.35 var(--sans);color:var(--ink-2)}
.mail .head b{color:var(--ink);font-weight:600;font-size:16px}
.mail .bodyx{padding:20px;display:grid;gap:12px;font-size:17px}
.mail .row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--rule);padding-bottom:8px;font:15.5px var(--sans)}
.mail .row span:first-child{color:var(--ink-2)}
.mail .row span:last-child{font-weight:600}
.mail .choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.mail .choices span{font:600 14px var(--sans);border-radius:999px;padding:8px 14px;border:1.5px solid var(--f-ink);color:var(--f-ink)}
.mail .choices span:first-child{background:var(--f-ink);color:#fff}
.mail .note{font:italic 15px var(--serif);color:var(--ink-2)}

.crew{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.crew span{font:400 19px var(--serif);background:#fff;border:1px solid var(--rule);border-radius:999px;padding:8px 18px}

.nots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:36px}
.nots b{font:400 25px/1.15 var(--serif);display:block;margin-bottom:10px}
.nots p{color:var(--ink-2);font-size:17px}
@media (max-width:820px){.nots{grid-template-columns:1fr}}

.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.job{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:20px 22px;display:grid;gap:8px}
.job b{font:400 22px/1.15 var(--serif)}
.job .m{font:500 15px var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
.job .o{font:italic 17px var(--serif);color:var(--f-teal)}
@media (max-width:820px){.jobs{grid-template-columns:1fr}}

.byline{display:flex;align-items:center;gap:16px;margin-top:28px;font-size:18px;color:var(--ink-2)}
.byline .faces{display:flex}
.byline .faces i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 16px var(--sans);font-style:normal;color:#fff;border:3px solid var(--paper)}
.byline .faces i:first-child{background:var(--f-teal)}
.byline .faces i:last-child{background:var(--f-ink);margin-left:-10px}

/* ---------- Within: the breathing sun ---------- */
.breath{display:grid;place-items:center;padding-block:clamp(40px,6vw,80px) 0;background:radial-gradient(60% 70% at 50% 60%,var(--w-mist),var(--paper) 72%)}
.breath .orb{position:relative;width:clamp(200px,28vw,340px);aspect-ratio:1;display:grid;place-items:center}
.breath .orb img{width:100%}
.breath .halo{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(137,196,168,.5),transparent)}
.breath .cue{margin-top:22px;font:italic 400 22px var(--serif);color:var(--w-teal);min-height:1.6em}
@media (prefers-reduced-motion:no-preference){
  .breath .orb{animation:breathe 10s ease-in-out infinite}
  .breath .halo{animation:halo 10s ease-in-out infinite}
}
@keyframes breathe{0%{scale:.84}40%{scale:1}100%{scale:.84}}
@keyframes halo{0%{opacity:.35}40%{opacity:1}100%{opacity:.35}}

/* ---------- contact + FAQ + footer ---------- */
.contact-card{display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:end}
.contact-card .addr{font:300 clamp(28px,3.6vw,50px)/1.1 var(--serif);word-break:break-word}
.copy{font:600 15px var(--sans);background:transparent;border:1.5px solid var(--ink);border-radius:999px;padding:10px 18px;cursor:pointer;color:var(--ink)}
.copy:hover{background:var(--ink);color:var(--paper)}
@media (max-width:700px){.contact-card{grid-template-columns:1fr}}
.faq{margin-top:28px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font:400 clamp(21px,2vw,25px)/1.25 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 0 22px;color:var(--ink-2);max-width:64ch}
.foot{border-top:1px solid var(--rule);padding-block:40px 56px;font:15px/1.6 var(--sans);color:var(--ink-2)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 40px;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.crumb{font:500 15px var(--sans);color:var(--ink-2);margin-bottom:14px;display:block}
.crumb a{color:var(--f-teal)}

@media (prefers-reduced-motion:reduce){
  .turn,.sky .s-sun,.sky .star,.sky .win-tw{animation:none}
  .door,.product,.door .glow{transition:none}
}

/* ---------- The Nightshift: the crew clocks in as you reach them ---------- */
.crewgrid{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(8px,1.2vw,16px)}
.crewgrid li{display:grid;justify-items:center;gap:4px;text-align:center;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:10px 6px 14px;position:relative}
.crewgrid img{width:100%;max-width:130px;border-radius:12px;transition:filter .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.crewgrid b{font:600 15px var(--sans);letter-spacing:.02em;color:var(--f-ink)}
.crewgrid span{font-size:15px;color:var(--ink-2);line-height:1.25}
.crewgrid li::after{content:"";position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:50%;background:#C9CFCF;transition:background .4s}
.js .crewgrid:not(.on) img{filter:grayscale(.9) brightness(.92)}
.crewgrid.on li::after{background:#3FB37F;box-shadow:0 0 0 4px rgba(63,179,127,.18)}
.crewgrid.on img{transform:translateY(-3px)}
.crewgrid li:nth-child(2) img,.crewgrid li:nth-child(2)::after{transition-delay:.12s}
.crewgrid li:nth-child(3) img,.crewgrid li:nth-child(3)::after{transition-delay:.24s}
.crewgrid li:nth-child(4) img,.crewgrid li:nth-child(4)::after{transition-delay:.36s}
.crewgrid li:nth-child(5) img,.crewgrid li:nth-child(5)::after{transition-delay:.48s}
.crewgrid li:nth-child(6) img,.crewgrid li:nth-child(6)::after{transition-delay:.6s}
.crewgrid li:nth-child(7) img,.crewgrid li:nth-child(7)::after{transition-delay:.72s}
.crewgrid li:nth-child(8) img,.crewgrid li:nth-child(8)::after{transition-delay:.84s}
.crewgrid li:nth-child(9) img,.crewgrid li:nth-child(9)::after{transition-delay:.96s}
@media (max-width:1000px){.crewgrid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:620px){.crewgrid{grid-template-columns:repeat(3,1fr)}}
.nots{grid-template-columns:repeat(3,1fr);row-gap:clamp(24px,3vw,40px)}
@media (max-width:820px){.nots{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.crewgrid img,.crewgrid li::after{transition:none}}

/* email as an icon instead of the address written out */
.env{width:22px;height:22px;flex:none}
.mailbtn{font-size:18px;padding:15px 26px}
.contact-card{grid-template-columns:auto auto;justify-content:start;align-items:center}
.iconlink{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--rule);color:var(--ink)}
.iconlink:hover{border-color:var(--ink);text-decoration:none}
.iconlink .env{width:18px;height:18px}
@media (max-width:700px){.contact-card{grid-template-columns:1fr;justify-items:start}}

/* ---------- Within: one calm column, everything on the same left edge ---------- */
.w-col{max-width:760px;margin-inline:auto;padding-inline:var(--gutter);box-sizing:content-box}
.w-hero{padding-block:clamp(28px,4vw,48px) clamp(56px,8vw,104px)}
.w-hero h1{font-size:clamp(46px,7vw,92px);line-height:.98;font-weight:300}
.w-lede{font-size:clamp(20px,1.9vw,24px);line-height:1.5;color:var(--ink-2);margin-top:24px;max-width:36ch}
.w-tag{font:italic 400 20px var(--serif);color:var(--w-rose);margin-top:18px}
.w-body{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);margin-top:20px;max-width:60ch}
.w-page .band h2{max-width:20ch}
.w-grid{list-style:none;max-width:760px;margin:40px auto 0;padding:0 var(--gutter);box-sizing:content-box;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.w-grid li{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px 24px;display:grid;gap:8px;align-content:start}
.w-grid .w-sun{width:40px;animation-duration:24s}
.w-grid b{font:400 25px/1.15 var(--serif)}
.w-grid p{color:var(--ink-2);font-size:17px}
@media (max-width:640px){.w-grid{grid-template-columns:1fr}}

/* ---------- contact form ---------- */
.cform{margin-top:34px;display:grid;gap:18px;max-width:820px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cform label{display:grid;gap:8px;font:500 15px var(--sans);color:var(--ink)}
.cform .opt{color:var(--ink-2);font-weight:400}
.cform input,.cform select,.cform textarea{font:400 18px/1.4 var(--serif);color:var(--ink);background:#fff;border:1.5px solid var(--rule);border-radius:12px;padding:12px 14px;width:100%}
.cform textarea{resize:vertical;min-height:150px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.cform :user-invalid{border-color:#B4412F}
.cf-trap{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.cf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.cf-mail{display:inline-flex;align-items:center;gap:8px;font:500 16px var(--sans);text-decoration:none;color:var(--ink-2)}
.cf-mail:hover{color:var(--ink)}
.cf-status{min-height:1.5em;font:500 16px var(--sans)}
.cf-status.ok{color:#2F7A55}.cf-status.err{color:#B4412F}
.cform.sent .cf-row,.cform.sent > label,.cform.sent .cf-foot{display:none}
@media (max-width:640px){.cf-row{grid-template-columns:1fr}}
.cform select{height:50px}.cform input{height:50px}

/* =========================================================
   Design pass, 29 Sep: fewer cards, one big type moment per page, varied rhythm
   ========================================================= */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* one big typographic moment */
.statement{padding-block:clamp(72px,11vw,160px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.huge{font:300 clamp(56px,10vw,150px)/.92 var(--serif);letter-spacing:-.035em;color:var(--accent);max-width:12ch}
.pitch{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,48px);font-size:18px;color:var(--ink-2)}
.pitch b{display:block;font:400 26px/1.15 var(--serif);color:var(--ink);margin-bottom:6px}
@media (max-width:820px){.pitch{grid-template-columns:1fr}}

/* Flow: the four moves as huge words */
.bigmoves{list-style:none;margin:0;padding:0;counter-reset:m}
.bigmoves li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(16px,4vw,64px);align-items:baseline;padding-block:clamp(14px,2vw,26px);border-bottom:1px solid var(--rule);counter-increment:m}
.bigmoves li:first-child{border-top:1px solid var(--rule)}
.bigmoves .w{font:300 clamp(52px,9vw,132px)/.95 var(--serif);letter-spacing:-.035em;color:var(--accent)}
.bigmoves .w::before{content:counter(m);font:500 16px var(--sans);color:var(--ink-2);vertical-align:top;margin-right:.6em;letter-spacing:0}
.bigmoves p{font-size:18px;color:var(--ink-2);max-width:40ch}
@media (max-width:760px){.bigmoves li{grid-template-columns:1fr;gap:6px}}

/* Home: the doors become two full-bleed panels instead of cards */
.doors-band .doors{margin:0;gap:0}
.doors-band .door{border:0;border-radius:0;min-height:clamp(380px,40vw,560px);padding:clamp(34px,6vw,88px) var(--gutter)}
.doors-band .door:hover{transform:none;box-shadow:none}
.doors-band .d-flow{background:var(--f-mist)}
.doors-band .d-within{background:var(--w-mist)}
.doors-band .door h3{font-size:clamp(36px,4.4vw,64px);line-height:1}
.doors-band .door .glow{width:90%;right:-25%;bottom:-45%}
.doors-band .door .go{font-size:18px}
.doors-band .door .go::after{content:"";display:inline-block;width:.5em;height:.5em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;rotate:45deg;margin-left:.5em;translate:0 -.08em;transition:translate .3s}
.doors-band .door:hover .go::after{translate:.3em -.08em}

/* Flow: the product as a feature row, not a card */
.shelf .product{background:transparent;border:0;border-radius:0;grid-template-rows:auto;grid-template-columns:1.1fr 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.shelf .product:hover{transform:none;box-shadow:none}
.shelf .product .sky{border-radius:18px;height:clamp(220px,24vw,320px)}
.shelf .product .txt{padding:0}
.shelf{grid-template-columns:1fr;gap:28px}
.shelf .next{max-width:520px}
@media (max-width:820px){.shelf .product{grid-template-columns:1fr}}

/* The Nightshift: the crew is the hero */
.crew-hero{padding-block:0 clamp(40px,6vw,72px)}
.crewgrid.big{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);gap:clamp(6px,1vw,14px)}
.crewgrid.big li{background:transparent;border:0;padding:0}
.crewgrid.big img{max-width:none;border-radius:20px;background:#F1ECE2}
.crewgrid.big li::after{top:10px;right:10px}
.crewgrid.big b{margin-top:8px}
.crew-cap{margin-top:22px;color:var(--ink-2);font-size:17px}
.plainlist,.joblist{list-style:none;margin:0;padding:0;display:grid}
.plainlist li{padding:18px 0;border-bottom:1px solid var(--rule);font-size:18px;color:var(--ink-2)}
.plainlist li:first-child{border-top:1px solid var(--rule)}
.plainlist b{color:var(--ink);font:400 22px/1.2 var(--serif);display:block;margin-bottom:4px}
.joblist li{display:grid;grid-template-columns:1fr auto;gap:2px 20px;padding:18px 0;border-bottom:1px solid rgba(42,63,92,.18)}
.joblist li:first-child{border-top:1px solid rgba(42,63,92,.18)}
.joblist b{font:400 22px/1.2 var(--serif)}
.joblist span{font:500 15px var(--sans);color:var(--ink-2);grid-column:1}
.joblist em{grid-row:1/span 2;grid-column:2;align-self:center;font:italic 17px var(--serif);color:var(--f-teal)}

/* Within: the four cards lose their boxes */
.w-grid li{background:transparent;border:0;border-top:1px solid var(--rule);border-radius:0;padding:22px 0 0}
.step{padding-block:clamp(28px,4.5vh,48px)}
.step .no{font-size:clamp(52px,6vw,84px)}
.journey .band{padding-top:clamp(48px,6vw,80px)}
.hero-video{height:clamp(300px,46vw,600px);overflow:hidden;background:#3A3A36}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block}
.within-eye{background:#E9DCD2}
.prose-legal p{font-size:18px;color:var(--ink-2);margin-top:16px;max-width:64ch}
.prose-legal p b{color:var(--ink);font-weight:500}
.prose-legal h2{font-size:clamp(28px,3vw,40px)}
.prose-legal .plainlist{margin-top:20px}

/* phone pass: bigger tap targets, a header that fits */
.nav a:not(.cta){padding-block:13px}
.foot nav a{display:inline-block;padding-block:10px}
.cf-mail{padding-block:10px}
@media (max-width:480px){
  .nav .cta{display:inline-block;font-size:14px;padding:9px 13px}
  .nav .hide-xs{display:none}
  .nav{gap:12px}
  .brand .word{height:15px}
  .brand .sun{width:32px}
}

/* accessibility pass: text-safe teals (brand teals stay for large shapes), video pause control */
body.flow{--accent:#28717F}
body.within{--accent:#2F7263}
.door.d-flow{--door:#28717F}
.door.d-within{--door:#2F7263}
.joblist em,.product .tag,.product .go,.crumb a,.job .o{color:#28717F}
.hero-video{position:relative}
.vid-toggle{position:absolute;right:var(--gutter);bottom:16px;display:inline-flex;align-items:center;gap:8px;font:600 14px var(--sans);color:var(--ink);background:rgba(250,248,243,.85);border:0;border-radius:999px;padding:9px 14px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vid-toggle:hover{background:#fff}
.brand-film{background:#D9D5CC}.brand-film video{object-position:50% 45%}
.hero-video.brand-film{height:auto;aspect-ratio:16/9;max-height:78vh}
/* the crew as a quiet reference row, not the hero */
.crew-band{padding-block:clamp(48px,6vw,80px) clamp(40px,5vw,64px);border-top:1px solid var(--rule)}
.crew-band h2{font-size:clamp(28px,3vw,40px);margin-bottom:24px}
.crewgrid.small{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);gap:clamp(6px,1vw,12px)}
.crewgrid.small li{background:transparent;border:0;padding:0}
.crewgrid.small img{max-width:96px;border-radius:14px;background:#F1ECE2}
.crewgrid.small li::after{display:none}
.crewgrid.small b{font-size:13px;margin-top:6px}
.crewgrid.small span{font-size:13px}
.sky.hero-sky[data-city="off"]{height:clamp(240px,34vw,440px)}

/* play: the hero sun can be moved */
.sky.draggable{cursor:grab;touch-action:pan-y}
.sky.draggable.holding{cursor:grabbing}
.sky.draggable:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.sky .when{pointer-events:none}

/* every page ends at sunset: its own sun, half set on a thin horizon */
.sunset{position:relative;height:clamp(90px,11vw,150px);overflow:hidden;margin-top:clamp(20px,4vw,48px);border-bottom:1.5px solid var(--rule)}
.sunset img{position:absolute;left:50%;bottom:0;width:clamp(150px,20vw,260px);translate:-50% 50%;opacity:.9;animation-duration:120s}
.sunset::before{content:"";position:absolute;left:50%;bottom:0;width:60%;height:140%;translate:-50% 50%;background:radial-gradient(closest-side,rgba(248,169,0,.14),transparent);pointer-events:none}
body.flow .sunset::before{background:radial-gradient(closest-side,rgba(79,168,168,.16),transparent)}
body.within .sunset::before{background:radial-gradient(closest-side,rgba(137,196,168,.2),transparent)}
.sunset + .foot{border-top:0}

/* Home: a signed note from Ana, the one place the site speaks as "I" */
.note-band{padding-block:clamp(56px,8vw,112px);border-top:1px solid var(--rule)}
.note-col{max-width:720px;margin-inline:auto;padding-inline:var(--gutter);box-sizing:content-box}
.note-col p{font:300 clamp(22px,2.3vw,30px)/1.45 var(--serif);color:var(--ink);letter-spacing:-.005em}
.note-col p + p{margin-top:22px}
.note-col .sig{display:flex;align-items:center;gap:14px;margin-top:34px;font:inherit}
.note-col .sig img{width:44px;height:auto}
.note-col .sig span{display:grid;font:500 15px/1.35 var(--sans);color:var(--ink-2)}
.note-col .sig b{font:italic 400 24px/1.1 var(--serif);color:var(--a-burg)}

/* email reveal, and the footer envelope centred */
.foot nav .iconlink,.iconlink{display:inline-grid;place-items:center;padding:0;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer}
.iconlink .env{width:18px;height:18px;display:block}
.iconlink:hover{border-color:var(--ink)}
button.cf-mail{background:none;border:0;cursor:pointer;font:500 16px var(--sans);color:var(--ink-2);padding:10px 0}
button.cf-mail:hover{color:var(--ink)}
.reveal-tip{position:absolute;z-index:30;width:280px;display:grid;gap:2px;background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 18px 36px -18px rgba(0,0,0,.5);font:500 14px var(--sans)}
.reveal-tip .addr{font:400 18px var(--serif);user-select:all}
.reveal-tip .state{color:#C9D3DC}

/* Flow's big words: never collide with the line beside them */
.bigmoves li{grid-template-columns:auto minmax(260px,1fr)}
.bigmoves .w{font-size:clamp(44px,6.6vw,104px)}
@media (max-width:900px){.bigmoves li{grid-template-columns:1fr}}
/* Within list: one field and one button */
.cform.wlist{max-width:560px;gap:10px}
.wl-row{display:flex;gap:10px;flex-wrap:wrap}
.wl-row input{flex:1;min-width:220px}
.cform.wlist.sent .wl-row{display:none}
/* small phones: logo and one button only, so they never touch */
.top .wrap{gap:12px}
.brand{flex-shrink:0}
@media (max-width:400px){
  .nav a:not(.cta){display:none}
  .brand .word{height:13px}
  .brand .sun{width:30px}
  .nav .cta{font-size:13.5px;padding:8px 12px}
}
/* shown on phones only: the simulation is built for a bigger screen */
.phone-note{display:none;margin-top:14px;font:500 15px/1.45 var(--sans);color:var(--ink-2);max-width:40ch}
@media (max-width:820px){.phone-note{display:block}}

/* only the sun is grabbable; the rest of the sky scrolls the page as usual */
.sky.draggable{cursor:default;touch-action:auto}
.sun-handle{position:absolute;translate:-50% -50%;border-radius:50%;cursor:grab;touch-action:none;z-index:2}
.sky.holding .sun-handle{cursor:grabbing}

/* any phone: the logo and one button, never more */
@media (max-width:720px){
  .nav a:not(.cta){display:none}
  .brand .word{height:14px}
  .brand .sun{width:30px}
  .nav .cta{font-size:14px;padding:8px 13px}
}