/* joeyrochlin.com — pearl, ink and champagne */
@font-face{font-family:"Inter";src:url(/fonts/InterVariable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/InstrumentSerif-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/InstrumentSerif-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}

:root{
  --pearl:#F3F4F6; --mist:#E7EAEF; --white:#FFFFFF; --ink:#14161A; --ink-2:#2A2D34;
  --slate:#5B616D; --hair:rgba(20,22,26,.12); --hair-2:rgba(20,22,26,.07);
  --champagne:#B08A4A; --champagne-deep:#7A5B28; --champagne-soft:#E9DCC3;
  --lilac:#DCD6F6; --sky:#CFE6F0; --blush:#F4DCE3; --mint:#DDEEDF;
  --serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --max:1240px; --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--pearl);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.09 0 0 0 0 0.1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:1}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:400}
::selection{background:var(--champagne-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--champagne-deep);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--pearl);padding:10px 16px;border-radius:999px;z-index:99}
.skip:focus{left:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.serif{font-family:var(--serif)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:50;transition:background .4s,box-shadow .4s}
.top.scrolled{background:rgba(243,244,246,.78);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 1px 0 var(--hair-2)}
.top .wrap{display:flex;align-items:center;gap:28px;height:72px}
.mark{font-family:var(--serif);font-size:27px;letter-spacing:-.01em;text-decoration:none;line-height:1;white-space:nowrap}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{font-size:15px;text-decoration:none;color:var(--ink-2);position:relative;padding:6px 0}
.nav .btn-ink{color:var(--pearl);padding:0 18px}
.nav a:not(.btn)[aria-current="page"]::after,.nav a:not(.btn):hover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;border-radius:999px;font:500 16px/1 var(--sans);
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .3s var(--ease),background .3s,box-shadow .3s;white-space:nowrap}
.btn-ink{background:var(--ink);color:var(--pearl);box-shadow:0 10px 30px -12px rgba(20,22,26,.55)}
.btn-ink:hover{transform:translateY(-1px);background:#000}
.btn-line{border-color:var(--hair);color:var(--ink);background:rgba(255,255,255,.4)}
.btn-line:hover{background:var(--white)}
.btn-sm{height:40px;padding:0 18px;font-size:14.5px}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:transparent;cursor:pointer}
.menu-btn span{display:block;width:16px;height:1.5px;background:var(--ink);margin:4px auto;transition:transform .3s}
@media (max-width:920px){
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;gap:4px;padding:16px var(--gut) 28px;background:rgba(243,244,246,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 40px -20px rgba(0,0,0,.2);transform:translateY(-8px);opacity:0;visibility:hidden;transition:.3s var(--ease)}
  .nav a{font-size:22px;font-family:var(--serif);padding:8px 0}
  .nav .btn{margin-top:12px;font-family:var(--sans)}
  .menu-open .nav{opacity:1;visibility:visible;transform:none}
  .menu-btn{display:block}
  .menu-open .menu-btn span:first-child{transform:translateY(2.75px) rotate(45deg)}
  .menu-open .menu-btn span:last-child{transform:translateY(-2.75px) rotate(-45deg)}
}

/* ---------- Type ---------- */
.display{font-family:var(--serif);font-size:clamp(52px,7.6vw,118px);line-height:.94;letter-spacing:-.022em}
.h2{font-family:var(--serif);font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.018em}
.h3{font-family:var(--serif);font-size:clamp(28px,2.6vw,38px);line-height:1.08;letter-spacing:-.01em}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--slate);max-width:36em}
.muted{color:var(--slate)}
.small{font-size:14.5px}
.kicker{font-size:15px;color:var(--champagne-deep);font-weight:500;margin-bottom:18px;display:block}
.link{color:var(--champagne-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.link:hover{color:var(--ink)}

/* ---------- Sections ---------- */
.sec{padding:clamp(80px,11vw,150px) 0}
.sec-tight{padding:clamp(56px,7vw,96px) 0}
.sec-mist{background:var(--mist)}
.sec-ink{background:var(--ink);color:var(--pearl)}
.sec-ink .muted,.sec-ink .lead{color:#A9AEB8}
.sec-head{display:grid;grid-template-columns:1fr minmax(0,30em);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.sec-head .lead{margin:0}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(28px,4vw,56px) 0 clamp(72px,9vw,120px);overflow:hidden}
.sheen{position:absolute;inset:-25% -15% auto -15%;height:150%;pointer-events:none;z-index:-1;filter:blur(30px);
  background:
   radial-gradient(30% 30% at 70% 38%,#CFC7F7,transparent 70%),
   radial-gradient(26% 30% at 86% 64%,#BCDDEC,transparent 70%),
   radial-gradient(24% 24% at 60% 74%,#F2CFDA,transparent 70%),
   radial-gradient(20% 22% at 90% 22%,#EADBBE,transparent 70%),
   radial-gradient(30% 30% at 10% 0%,rgba(207,230,240,.7),transparent 70%);animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1.5%,0) scale(1.04)}100%{transform:translate3d(1.5%,-1%,0) scale(1.02)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:40px;align-items:center;min-height:min(78vh,760px)}
.hero h1{margin:18px 0 26px}
.hero .lead{margin-bottom:34px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.via{display:none;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--hair-2);font-size:14.5px;color:var(--ink-2);
  box-shadow:0 8px 24px -16px rgba(0,0,0,.3)}
.via.on{display:inline-flex}
.via i{width:26px;height:26px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--champagne-soft);font-style:normal;font-size:13px}
.proof{display:flex;align-items:center;gap:14px;margin-top:44px;font-size:14.5px;color:var(--slate)}
.proof .icons{display:flex;flex:none}
.proof .icons img{width:36px;height:36px;border-radius:9px;border:2px solid var(--pearl);margin-left:-8px;box-shadow:0 4px 10px -4px rgba(0,0,0,.3)}
.proof .icons img:first-child{margin-left:0}
.hero-stage{position:relative;display:grid;place-items:center;perspective:1600px;min-height:620px}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;min-height:0}.hero-stage{min-height:0;margin-top:16px}}

/* ---------- Phone ---------- */
.phone{--w:300px;position:relative;width:var(--w);aspect-ratio:402/874;border-radius:calc(var(--w)*.165);padding:calc(var(--w)*.032);
  background:linear-gradient(145deg,#EEF0F3 0%,#A7ACB4 18%,#E6E8EC 34%,#8D929A 55%,#D9DCE1 78%,#9DA2AA 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 0 0 2px rgba(0,0,0,.18),
   0 60px 90px -40px rgba(20,22,26,.45),0 30px 50px -30px rgba(20,22,26,.35),0 2px 6px rgba(20,22,26,.12);transform-style:preserve-3d}
.phone::before{content:"";position:absolute;inset:calc(var(--w)*.012);border-radius:calc(var(--w)*.152);background:#050506}
.phone .screen{position:absolute;inset:calc(var(--w)*.03);border-radius:calc(var(--w)*.135);overflow:hidden;background:#0E0F12;container-type:inline-size;isolation:isolate}
.phone .island{position:absolute;top:calc(var(--w)*.054);left:50%;width:calc(var(--w)*.3);height:calc(var(--w)*.088);transform:translateX(-50%);background:#000;border-radius:99px;z-index:20}
.phone .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:25;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%)}
.phone video,.phone .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-lg{--w:min(330px,74vw)}
.phone-md{--w:min(290px,68vw)}
.phone-sm{--w:min(250px,60vw)}

/* hero phone motion */
.hero-phone{transform:rotateY(-14deg) rotateX(4deg) rotateZ(1deg);transition:transform 1.2s var(--ease)}
.js .hero-phone{opacity:0;transform:translateY(60px) rotateY(-24deg) rotateX(10deg)}
.ready .hero-phone{opacity:1;transform:rotateY(-14deg) rotateX(4deg) rotateZ(1deg);transition:transform 1.6s var(--ease),opacity 1s}
.float{position:absolute;z-index:30;display:flex;gap:12px;align-items:center;padding:12px 16px 12px 12px;border-radius:18px;max-width:260px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 24px 48px -24px rgba(20,22,26,.4),0 1px 0 rgba(255,255,255,.8) inset;font-size:13.5px;line-height:1.3;color:var(--ink-2)}
.float b{display:block;font-weight:600;color:var(--ink);font-size:14px}
.float .ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:var(--champagne-soft)}
.float .ic svg{width:18px;height:18px}
.js .float{opacity:0;transform:translateY(16px) scale(.96)}
.ready .float{opacity:1;transform:none;transition:opacity .8s var(--ease),transform 1s var(--ease)}
.ready .f1{transition-delay:.7s}.ready .f2{transition-delay:.95s}.ready .f3{transition-delay:1.2s}
.f1{right:-14%;top:12%}.f2{right:-17%;top:58%}.f3{left:-12%;bottom:0}
@media (max-width:1100px){.f1{right:-4%}.f2{right:-6%}.f3{left:-4%}}
@media (max-width:560px){.float{max-width:190px;font-size:11.5px;padding:8px 11px 8px 8px;border-radius:14px}.float b{font-size:12.5px}.float .ic{width:28px;height:28px;border-radius:8px}.f1{right:-6px;top:8%}.f2{right:-6px;top:auto;bottom:22%}.f3{left:-6px;bottom:-2%}}

/* ---------- In-phone UI (fictional sample brand) ---------- */
.ui{position:absolute;inset:0;color:#F3F1EC;font-family:var(--sans);font-size:3.9cqw;line-height:1.35;background:#0F1013;display:flex;flex-direction:column}
.ui .sb{display:flex;justify-content:space-between;align-items:center;padding:4.6cqw 8cqw 0;height:13cqw;font-weight:600;font-size:4.1cqw;flex:none}
.ui .sb .r{display:flex;gap:1.6cqw;align-items:center}
.ui .sb svg{height:3.2cqw;width:auto}
.ui .pad{padding:0 5.5cqw}
.ui .big{font-size:8.6cqw;font-weight:700;letter-spacing:-.02em;margin:2cqw 0 4cqw}
.ui .brand{font-family:var(--serif);font-size:7.2cqw;letter-spacing:-.01em;line-height:1}
.ui .group{background:#1B1C21;border-radius:4.4cqw;margin-bottom:4.4cqw;overflow:hidden}
.ui .row{display:flex;align-items:center;gap:3.4cqw;padding:3.3cqw 4cqw;border-bottom:1px solid rgba(255,255,255,.07);min-height:11.5cqw}
.ui .row:last-child{border-bottom:0}
.ui .row .t{flex:1;min-width:0}
.ui .row .s{color:#8E929B;font-size:3.3cqw}
.ui .chev{width:1.8cqw;height:3.2cqw;opacity:.4;flex:none}
.ui .ico{width:7.2cqw;height:7.2cqw;border-radius:1.8cqw;display:grid;place-items:center;flex:none;color:#fff}
.ui .ico svg{width:4.2cqw;height:4.2cqw}
.ui .tog{width:10.6cqw;height:6.4cqw;border-radius:9cqw;background:var(--champagne);position:relative;flex:none}
.ui .tog::after{content:"";position:absolute;right:.6cqw;top:.6cqw;width:5.2cqw;height:5.2cqw;border-radius:50%;background:#fff}
.ui .av{width:12cqw;height:12cqw;border-radius:50%;background:linear-gradient(135deg,#E9DCC3,#B08A4A);display:grid;place-items:center;color:#2A2216;font-weight:700;font-size:5cqw;flex:none}
.ui .foot{text-align:center;color:#7F838C;font-size:3.1cqw;margin-top:1cqw}
.ui .foot .brand{color:#E9DCC3;font-size:6cqw;margin-bottom:1.4cqw}
.ui .credit{position:relative;border-radius:4.4cqw;background:linear-gradient(180deg,#25221C,#1C1A16);box-shadow:0 0 0 1px rgba(233,220,195,.28)}
.ui .credit .row{border:0}
.ui .credit .t{color:#E9DCC3}
.ui .credit::after{content:"";position:absolute;inset:-1.4cqw;border-radius:5.6cqw;border:1px solid rgba(233,220,195,.5);opacity:0;animation:ping 3.2s 2.2s var(--ease) infinite}
@keyframes ping{0%{opacity:0;transform:scale(.97)}25%{opacity:1}70%{opacity:0;transform:scale(1.04)}100%{opacity:0}}
.ui .tabbar{margin-top:auto;display:flex;justify-content:space-around;padding:3cqw 4cqw 7.5cqw;background:rgba(15,16,19,.86);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.06);font-size:2.6cqw;color:#7F838C;flex:none}
.ui .tabbar span{display:flex;flex-direction:column;align-items:center;gap:1cqw}
.ui .tabbar svg{width:5.6cqw;height:5.6cqw}
.ui .tabbar .on{color:#E9DCC3}
.ui .art{border-radius:5cqw;position:relative;overflow:hidden;background:
  radial-gradient(70% 60% at 78% 20%,rgba(233,220,195,.85),transparent 60%),
  radial-gradient(60% 70% at 10% 100%,rgba(176,138,74,.75),transparent 65%),
  linear-gradient(160deg,#3A3226,#16130F)}
.ui .art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7cqw)}
.ui .art.a2{background:radial-gradient(60% 60% at 30% 25%,rgba(220,214,246,.75),transparent 60%),radial-gradient(60% 60% at 90% 90%,rgba(207,230,240,.6),transparent 60%),linear-gradient(160deg,#2A2C3A,#121318)}
.ui .art.a3{background:radial-gradient(60% 60% at 70% 30%,rgba(244,220,227,.75),transparent 60%),radial-gradient(60% 60% at 10% 90%,rgba(176,138,74,.6),transparent 60%),linear-gradient(160deg,#35252B,#151214)}
.ui .art.a4{background:radial-gradient(60% 60% at 40% 30%,rgba(221,238,223,.7),transparent 60%),radial-gradient(60% 60% at 90% 90%,rgba(207,230,240,.5),transparent 60%),linear-gradient(160deg,#22302A,#111513)}
.ui .pill{display:inline-flex;align-items:center;justify-content:center;height:8.4cqw;padding:0 4.4cqw;border-radius:9cqw;background:#F3F1EC;color:#15161A;font-weight:600;font-size:3.4cqw}
.ui .pill.gold{background:#E9DCC3;color:#2A2216}
.ui .pill.ghost{background:rgba(255,255,255,.1);color:#F3F1EC}
.ui .chips{display:flex;gap:2cqw;margin:0 0 4cqw}
.ui .chip{flex:1;text-align:center;border-radius:3.2cqw;padding:2.2cqw 0;background:#1B1C21;font-size:3cqw;color:#9DA1AA;line-height:1.2}
.ui .chip b{display:block;font-size:4.4cqw;color:#F3F1EC;font-weight:600}
.ui .chip.on{background:#E9DCC3;color:#2A2216}.ui .chip.on b{color:#2A2216}
.ui .cls{display:flex;align-items:center;gap:3.4cqw;padding:3.2cqw 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ui .cls .tm{width:13cqw;font-weight:600;font-size:3.6cqw}
.ui .cls .tm small{display:block;color:#8E929B;font-weight:400;font-size:2.9cqw}
.ui .cls .t{flex:1}
.ui .cls .t b{display:block;font-weight:600}
.ui .cls .t span{color:#8E929B;font-size:3.2cqw}
.ui .sheet{position:absolute;left:0;right:0;bottom:0;background:#1B1C21;border-radius:7cqw 7cqw 0 0;padding:3cqw 6cqw 9cqw;box-shadow:0 -20px 60px rgba(0,0,0,.6);z-index:5}
.ui .grab{width:10cqw;height:1.3cqw;border-radius:2cqw;background:rgba(255,255,255,.25);margin:0 auto 5cqw}
.ui .dim{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:4}
.ui .lock{position:absolute;inset:0;background:radial-gradient(80% 60% at 70% 20%,#4A4033,transparent 70%),radial-gradient(70% 60% at 20% 90%,#2E2A3C,transparent 70%),#121215}
.ui .clock{text-align:center;font-weight:600;font-size:21cqw;letter-spacing:-.03em;line-height:1;margin-top:6cqw;color:#F6F2EA}
.ui .date{text-align:center;font-size:4.4cqw;font-weight:500;margin-top:15cqw;color:#E9E4DA}
.ui .note{margin:7cqw 4cqw 0;padding:3.6cqw;border-radius:5cqw;background:rgba(40,38,36,.62);backdrop-filter:blur(14px);display:flex;gap:3cqw;border:1px solid rgba(255,255,255,.08)}
.ui .note .ai{width:9cqw;height:9cqw;border-radius:2.2cqw;background:#15161A;display:grid;place-items:center;flex:none;font-family:var(--serif);color:#E9DCC3;font-size:4.6cqw;box-shadow:0 0 0 1px rgba(233,220,195,.3)}
.ui .note .t{flex:1;font-size:3.5cqw}
.ui .note .t b{font-weight:600}
.ui .note .t .when{float:right;color:#B3AEA5;font-size:3cqw}
.ui .grid{display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.ui .vt{aspect-ratio:4/5;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:3cqw;font-size:3.2cqw;font-weight:600}
.ui .vt span:not(.play){position:relative;z-index:2}
.ui .vt small{display:block;font-weight:400;color:rgba(255,255,255,.75);font-size:2.8cqw}
.ui .play{position:absolute;z-index:3;width:9cqw;height:9cqw;border-radius:50%;background:rgba(255,255,255,.88);display:grid;place-items:center;top:3cqw;right:3cqw}
.ui .play::after{content:"";border-left:2.6cqw solid #15161A;border-top:1.6cqw solid transparent;border-bottom:1.6cqw solid transparent;margin-left:.6cqw}
.ui .map{height:42cqw;border-radius:5cqw;position:relative;overflow:hidden;background:#17181C}
.ui .map svg{position:absolute;inset:0;width:100%;height:100%}
.ui .pin{position:absolute;width:6cqw;height:6cqw;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#E9DCC3;box-shadow:0 0 0 2cqw rgba(233,220,195,.18)}
.ui .loc{background:#1B1C21;border-radius:4.4cqw;padding:4cqw;margin-top:3cqw}
.ui .loc b{font-weight:600}
.ui .loc .acts{display:flex;gap:2cqw;margin-top:3cqw}
.ui .hcard{height:56cqw;padding:5cqw;display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:4.6cqw}
.ui .hcard *{position:relative;z-index:2}
.ui .hcard .tag{font-size:3cqw;color:rgba(255,255,255,.75)}
.ui .hcard h4{font-family:var(--serif);font-size:8cqw;line-height:1;margin:1.4cqw 0 3.4cqw}
.ui .lbl{font-size:3.3cqw;color:#8E929B;margin:0 0 2.4cqw;font-weight:500}

/* ---------- Strip of apps ---------- */
.livebar{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:center;justify-content:space-between;padding:26px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.livebar p{margin:0;color:var(--slate);font-size:15px}
.livebar ul{display:flex;flex-wrap:wrap;gap:12px 34px;list-style:none;margin:0;padding:0}
.livebar a{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;letter-spacing:.01em}
.livebar img{width:40px;height:40px;border-radius:10px;box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}

/* ---------- Scrolly ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,96px)}
.story-phone{position:sticky;top:72px;height:calc(100vh - 72px);height:calc(100svh - 72px);display:grid;place-items:center}
.story-phone .phone{--w:min(310px,calc((100vh - 72px - 72px) * .46));--w:min(310px,calc((100svh - 72px - 72px) * .46))}
.story-phone .screen .ui{opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease);transform:scale(1.03)}
.story-phone .screen .ui.on{opacity:1;transform:none}
.steps{padding:12vh 0}
.step{min-height:64vh;display:flex;flex-direction:column;justify-content:center;max-width:30em;opacity:.28;transition:opacity .6s}
.step.on{opacity:1}
.step .num{font-family:var(--serif);font-size:20px;color:var(--champagne-deep);margin-bottom:14px}
.step h3{margin-bottom:16px}
.step p{color:var(--slate);font-size:18px}
.step .ex{font-size:14.5px;color:var(--slate);border-left:1px solid var(--champagne);padding-left:14px;margin-top:6px}
@media (max-width:920px){
  .story{grid-template-columns:1fr}
  .story-phone{top:76px;height:auto;padding:10px 0 18px;z-index:5;background:linear-gradient(var(--pearl) 82%,rgba(243,244,246,0))}
  .story-phone .phone{--w:min(170px,42vw)}
  .steps{padding:0}
  .step{min-height:56vh;opacity:.35}
}

/* ---------- Industries list ---------- */
.ind{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.ind li{border-bottom:1px solid var(--hair)}
.ind a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 48px;gap:24px;align-items:center;padding:30px 0;text-decoration:none;transition:padding .5s var(--ease)}
.ind a:hover{padding-left:14px}
.ind .n{font-family:var(--serif);font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.01em}
.ind .d{color:var(--slate);font-size:16px}
.ind .go{width:48px;height:48px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;transition:background .3s,color .3s}
.ind a:hover .go{background:var(--ink);color:var(--pearl);border-color:var(--ink)}
.ind .go svg{width:16px;height:16px}
@media (max-width:760px){.ind a{grid-template-columns:1fr 40px}.ind .d{grid-column:1;grid-row:2}.ind .go{grid-row:1/3;grid-column:2;width:40px;height:40px}}

/* ---------- Showreel ---------- */
.reel{position:relative;padding:clamp(80px,10vw,140px) 0;overflow:hidden;background:
  radial-gradient(40% 50% at 20% 30%,rgba(220,214,246,.55),transparent 70%),
  radial-gradient(40% 50% at 85% 70%,rgba(207,230,240,.6),transparent 70%),
  radial-gradient(30% 40% at 55% 100%,rgba(233,220,195,.6),transparent 70%),var(--mist)}
.reel-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,56px);align-items:stretch;padding-top:56px}
.reel-item{display:flex;flex-direction:column;align-items:center;text-align:center}
.reel-item:nth-child(2) .phone{transform:translateY(-44px)}
.reel-item .phone{--w:min(280px,100%)}
.reel-meta{position:relative;margin-top:46px;max-width:21em;display:flex;flex-direction:column;align-items:center;flex:1}
.reel-meta::before{content:"";position:absolute;left:50%;top:-34px;width:min(240px,86%);height:22px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,22,26,.30),rgba(20,22,26,0));filter:blur(2px);pointer-events:none}
.reel-item:nth-child(2) .reel-meta::before{width:min(210px,74%);opacity:.75;filter:blur(5px)}
.reel-meta .nm{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}
.reel-meta .nm img{width:44px;height:44px;border-radius:11px;box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.reel-meta h3{font-family:var(--sans);font-weight:700;font-size:19px;letter-spacing:.02em}
.reel-meta p{color:var(--slate);font-size:15.5px;margin-bottom:14px;min-height:calc(15.5px*1.6*4)}
.reel-meta .lk{margin-top:auto}
.vctl{position:absolute;z-index:30;right:calc(var(--w)*.08);bottom:calc(var(--w)*.1);width:34px;height:34px;border-radius:50%;border:0;background:rgba(20,22,26,.55);color:#fff;
  backdrop-filter:blur(8px);cursor:pointer;display:grid;place-items:center;opacity:.0;transition:opacity .3s}
.phone:hover .vctl,.vctl:focus-visible{opacity:1}
.vctl svg{width:12px;height:12px}
@media (max-width:860px){
  .reel-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px var(--gut) 10px;margin:0 calc(var(--gut)*-1);scrollbar-width:none}
  .reel-row::-webkit-scrollbar{display:none}
  .reel-item{scroll-snap-align:center}.reel-item:nth-child(2) .phone{transform:none}.reel-item:nth-child(2) .reel-meta::before{width:min(240px,86%);opacity:1;filter:blur(2px)}.reel-meta p{min-height:0}
  .vctl{opacity:1}
}

/* ---------- Process ---------- */
.proc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s;border-top:1px solid var(--hair)}
.proc li{list-style:none;padding:34px 28px 10px 0;position:relative}
.proc li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--serif);font-size:56px;line-height:1;color:var(--champagne);display:block;margin-bottom:22px}
.proc h3{font-family:var(--sans);font-weight:600;font-size:19px;margin-bottom:8px}
.proc p{color:var(--slate);font-size:16px}
.proc-long{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
.proc-long li{border-bottom:1px solid var(--hair);padding:34px 0 26px}
@media (max-width:980px){.proc{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}}
@media (max-width:600px){.proc,.proc-long{grid-template-columns:1fr}}

/* ---------- Feature list (two-column definition) ---------- */
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;margin:0}
.feats div{padding:26px 0;border-top:1px solid var(--hair)}
.feats dt{font-weight:600;font-size:18px;margin-bottom:6px;display:flex;gap:12px;align-items:baseline}
.feats dt::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--champagne);transform:translateY(-2px)}
.feats dd{margin:0;color:var(--slate);font-size:16px;padding-left:19px}
@media (max-width:760px){.feats{grid-template-columns:1fr}}

/* ---------- Promise band ---------- */
.promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.promise h3{font-family:var(--serif);font-size:30px;line-height:1.08;margin-bottom:14px;color:var(--pearl)}
.promise p{color:#A9AEB8;font-size:16px}
.promise .line{width:42px;height:1px;background:var(--champagne);margin-bottom:24px}
@media (max-width:860px){.promise{grid-template-columns:1fr;gap:36px}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--hair);max-width:880px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 0;font-size:clamp(19px,1.6vw,22px);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);position:relative;transition:transform .4s var(--ease),background .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease)}
.faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq details[open] .pm{background:var(--white)}
.faq .a{padding:0 60px 28px 0;color:var(--slate);font-size:17px;max-width:44em}
.faq .a p:last-child{margin:0}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;border-radius:36px;margin:0 auto;padding:clamp(56px,8vw,110px) clamp(24px,6vw,96px);background:var(--ink);color:var(--pearl);isolation:isolate}
.cta::before{content:"";position:absolute;inset:-30%;z-index:-1;filter:blur(40px);opacity:.9;animation:drift 18s ease-in-out infinite alternate;background:
  radial-gradient(30% 40% at 80% 20%,#6E6493,transparent 70%),radial-gradient(30% 40% at 95% 80%,#3E6575,transparent 70%),radial-gradient(25% 35% at 60% 110%,#8A6A35,transparent 70%)}
.cta .h2{max-width:13em;margin-bottom:22px}
.cta .lead{color:#B8BCC5;margin-bottom:36px}
.cta .btn-ink{background:var(--pearl);color:var(--ink)}
.cta .btn-line{color:var(--pearl);border-color:rgba(255,255,255,.25);background:transparent}
.cta .btn-line:hover{background:rgba(255,255,255,.08)}
.cta .mail{display:inline-block;margin-top:30px;color:#E9DCC3;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(233,220,195,.4)}

/* ---------- Page hero (sub pages) ---------- */
.phero{position:relative;padding:clamp(40px,6vw,90px) 0 clamp(56px,7vw,100px);overflow:hidden}
.phero .sheen{opacity:.75}
.crumbs{font-size:14px;color:var(--slate);margin-bottom:26px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 8px;opacity:.5}
.phero h1{max-width:12em;margin-bottom:26px}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,90px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.duo{gap:14px}.duo .phone{--w:min(220px,42vw)}.duo .phone:nth-child(2){transform:translateY(-20px)}.watch{width:calc(50% - 12px);border-radius:34px;padding:9px}.watch img{border-radius:26px}}

/* ---------- App pages ---------- */
.app-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;gap:clamp(32px,6vw,96px);align-items:center}
.app-id{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.app-id img{width:84px;height:84px;border-radius:20px;box-shadow:0 18px 36px -18px rgba(0,0,0,.5)}
.app-id .t b{display:block;font-size:22px;letter-spacing:.02em}
.app-id .t span{color:var(--slate);font-size:15px}
.wide{border-radius:28px;overflow:hidden;box-shadow:0 50px 90px -50px rgba(20,22,26,.55)}
.wide img{width:100%;height:auto}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.facts li{padding:8px 14px;border-radius:999px;border:1px solid var(--hair);font-size:14px;background:rgba(255,255,255,.45)}
.duo{display:flex;gap:clamp(18px,3vw,40px);justify-content:center;align-items:flex-end}
.duo .phone:nth-child(2){transform:translateY(-36px)}
.watch-row{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.watch{width:168px;aspect-ratio:416/496;border-radius:42px;padding:12px;background:linear-gradient(150deg,#ECEEF1,#9EA3AB 40%,#DADDE2 70%,#8F949C);box-shadow:0 30px 50px -28px rgba(20,22,26,.5)}
.watch img{width:100%;height:100%;border-radius:32px;object-fit:cover;background:#000}
@media (max-width:900px){.app-hero{grid-template-columns:minmax(0,1fr)}.app-hero .phone{margin:0 auto}}

.apps-list{display:grid;gap:clamp(56px,8vw,110px)}
.app-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.app-card:nth-child(even) .app-card-media{order:-1}
.app-card-media{display:grid;place-items:center;padding:40px 0;border-radius:32px;background:var(--mist);position:relative;overflow:hidden}
.app-card-media::before{content:"";position:absolute;inset:-20%;filter:blur(40px);opacity:.8;background:radial-gradient(40% 40% at 30% 30%,var(--lilac),transparent 70%),radial-gradient(40% 40% at 75% 75%,var(--sky),transparent 70%)}
.app-card-media .phone{--w:min(260px,62vw)}
@media (max-width:860px){.app-card{grid-template-columns:1fr}.app-card:nth-child(even) .app-card-media{order:0}}

/* ---------- Contact ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;background:rgba(255,255,255,.65);border:1px solid var(--white);border-radius:28px;padding:clamp(24px,4vw,44px);
  box-shadow:0 40px 80px -50px rgba(20,22,26,.4);backdrop-filter:blur(12px)}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:var(--ink-2)}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--hair);border-radius:14px;padding:13px 15px;transition:border-color .2s,box-shadow .2s}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--champagne);box-shadow:0 0 0 4px rgba(176,138,74,.16)}
.chips-in{display:flex;flex-wrap:wrap;gap:8px}
.chips-in label{margin:0}
.chips-in input{position:absolute;opacity:0;width:1px;height:1px}
.chips-in span{display:inline-block;padding:9px 15px;border-radius:999px;border:1px solid var(--hair);background:var(--white);font-size:14.5px;cursor:pointer;transition:.2s}
.chips-in input:checked+span{background:var(--ink);color:var(--pearl);border-color:var(--ink)}
.chips-in input:focus-visible+span{outline:2px solid var(--champagne-deep);outline-offset:2px}
.form .note{font-size:14px;color:var(--slate)}
.form .err{color:#9B2C2C;font-size:14px;display:none}
.form .err.on{display:block}
.direct{display:grid;gap:22px}
.direct .item{padding:24px 0;border-top:1px solid var(--hair)}
.direct .item b{display:block;font-size:14px;color:var(--slate);font-weight:500;margin-bottom:6px}
.direct .item a{font-family:var(--serif);font-size:clamp(26px,2.6vw,34px);text-decoration:none;line-height:1.1}
.copy-btn{margin-left:10px;font:500 13px var(--sans);border:1px solid var(--hair);background:var(--white);border-radius:999px;padding:6px 12px;cursor:pointer;vertical-align:middle}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* ---------- Prose (privacy) ---------- */
.prose{max-width:42em}
.prose h2{font-family:var(--serif);font-size:32px;margin:48px 0 14px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-left:20px}

/* ---------- Footer ---------- */
.foot{padding:80px 0 40px;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--hair)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:40px}
.foot .mark{font-size:34px;display:inline-block;margin-bottom:14px}
.foot h4{font-size:14px;font-weight:600;margin-bottom:14px;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;color:var(--slate);font-size:15px}
.foot a:hover{color:var(--ink)}
.foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:64px;padding-top:24px;border-top:1px solid var(--hair-2);font-size:13.5px;color:var(--slate)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}

/* 404 */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center}
.nf .display{margin-bottom:22px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .hero-phone,.js .float{opacity:1!important;transform:none!important}
  .hero-phone{transform:rotateY(-10deg)!important}
}