:root{
  --paper:#F5F0E8;--paper-2:#ECE4D8;--card:#FBF8F3;--ink:#1C1410;--ink-2:#5E5047;--line:#DCCFBF;--line-2:#C9B8A4;
  --orange:#E5561F;--rust:#A93E14;--amber:#F2A65A;--sand:#D9BFA0;
  --stage-a:#1E1612;--stage-b:#E8DAC6;--topo-a:#E5561F;--topo-b:#B4521F;
  --head-bg:rgba(245,240,232,.82);
  --shadow:0 40px 80px -30px rgba(60,28,10,.38),0 14px 28px -14px rgba(60,28,10,.28);
  --f-display:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#120D0A;--paper-2:#1A130F;--card:#211812;--ink:#F3ECE3;--ink-2:#B5A596;--line:#3A2C22;--line-2:#4C3A2D;
    --orange:#FF6B2C;--rust:#FF8A55;--amber:#F5B36B;--sand:#6B5442;
    --stage-a:#0A0706;--stage-b:#241A13;--topo-a:#FF6B2C;--topo-b:#C2602C;
    --head-bg:rgba(18,13,10,.8);
    --shadow:0 40px 80px -30px rgba(0,0,0,.7),0 14px 28px -14px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#120D0A;--paper-2:#1A130F;--card:#211812;--ink:#F3ECE3;--ink-2:#B5A596;--line:#3A2C22;--line-2:#4C3A2D;
  --orange:#FF6B2C;--rust:#FF8A55;--amber:#F5B36B;--sand:#6B5442;
  --stage-a:#0A0706;--stage-b:#241A13;--topo-a:#FF6B2C;--topo-b:#C2602C;
  --head-bg:rgba(18,13,10,.8);
  --shadow:0 40px 80px -30px rgba(0,0,0,.7),0 14px 28px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-feature-settings:"ss01" 0}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-display);font-stretch:112%;font-weight:600;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(42px,6.4vw,96px);line-height:.98;font-stretch:118%;letter-spacing:-.03em}
h2{font-size:clamp(26px,2.8vw,40px);line-height:1.08}
h3{font-size:22px;line-height:1.2}
p{margin:0}
::selection{background:var(--orange);color:#1C1410}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--gut);top:10px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:6px;transform:translateY(-200%);text-decoration:none}
.skip:focus{transform:none}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding-left:max(var(--gut),clamp(16px,4vw,48px));padding-right:max(var(--gut),clamp(16px,4vw,48px))}
.muted{color:var(--ink-2)}
.lede{font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--ink);max-width:34em;text-wrap:pretty}
.stack{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.stack-xl{display:flex;flex-direction:column;gap:clamp(72px,9vw,128px)}
.pad-b{padding-bottom:clamp(80px,10vw,140px)}
.prose{display:flex;flex-direction:column;gap:16px;max-width:36em;color:var(--ink-2);text-wrap:pretty}

/* labels */
.tags,.crumb,.hud,.rlabel,.photo figcaption,.coord,.note,.plan h3+ul::before,.steps li::before{font-family:var(--f-mono)}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.tags li{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px}
.crumb{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.crumb a{text-decoration:none;color:var(--rust)}
.crumb a:hover{text-decoration:underline}

/* buttons */
.btn{--bg:var(--orange);--fg:#1C1410;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--bg);color:var(--fg);text-decoration:none;font-weight:500;font-size:16px;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),background-color .25s,color .25s,border-color .25s;white-space:nowrap}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:hover{background:color-mix(in srgb,var(--bg) 88%,#000)}
.btn:active{transform:scale(.97)}
.btn.dark{--bg:#1C1410;--fg:#F5F0E8}
.btn.dark:hover{background:#000}
.btn.line{--bg:transparent;--fg:var(--ink);border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.btn.line:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);border-color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.textlink{display:inline-flex;align-items:center;gap:8px;color:var(--rust);text-decoration:none;font-weight:500;white-space:nowrap}
.textlink svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}
.textlink:hover{text-decoration:underline;text-underline-offset:4px}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;font-size:14px}
.iconbtn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:999px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--ink)}
.iconbtn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.iconbtn svg{width:20px;height:20px}
.icon-play,.icon-moon{display:none}
.motion-off .icon-play{display:block}.motion-off .icon-pause{display:none}
.is-dark .icon-moon{display:block}.is-dark .icon-sun{display:none}

/* header */
.site-head{position:fixed;inset:0 0 auto 0;z-index:50;height:68px;padding-top:env(safe-area-inset-top);background:var(--head-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);transition:background-color .35s,border-color .35s}
.site-head.over-hero{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.head-in{height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-stretch:118%;font-weight:650;font-size:20px;letter-spacing:-.02em}
.brand svg{width:30px;height:30px;color:var(--ink)}
.nav{display:flex;align-items:center;gap:4px}
.navlink{text-decoration:none;font-size:15px;padding:8px 12px;border-radius:999px;position:relative}
.navlink:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.navlink[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--orange);border-radius:2px}
.menu-btn{display:none}
@media (max-width:760px){.navlink{display:none}.menu-btn{display:inline-grid}#motionBtn{display:none}}
.sheet{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:80px var(--gut) 40px calc(var(--gut) + 8px)}
.sheet a{font-family:var(--f-display);font-stretch:118%;font-weight:600;font-size:40px;letter-spacing:-.02em;text-decoration:none;line-height:1.2}
.sheet a[aria-current="page"]{color:var(--rust)}
.sheet-close{position:absolute;top:14px;right:var(--gut)}

/* hero */
.hero-wrap{position:relative;height:172svh;background:#1C1410}
.static-hero .hero-wrap{height:auto}
.hero{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;color:var(--ink);isolation:isolate;background:linear-gradient(180deg,#C8703F 0%,#DD8C57 45%,#E7A06C 62%,#C77A4C 78%,#8E4A28 100%)}
.is-dark .hero{background:linear-gradient(180deg,#140B08 0%,#24120B 60%,#120906 100%)}
.hero>img,.hero>canvas{position:absolute;inset:0;width:100%;height:100%}
.hero>img{object-fit:cover;object-position:55% 64%;opacity:0}
.no-gl .hero>img{opacity:1}
.no-gl #heroGL{display:none}
#heroGL{opacity:0;transition:opacity 1.2s ease}
#heroGL.on{opacity:1}
#dust{pointer-events:none;z-index:1}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(to top,rgba(20,12,8,.62),rgba(20,12,8,0));z-index:1;pointer-events:none}
.hero-copy{position:absolute;inset:0 0 auto 0;z-index:3;padding-top:calc(68px + clamp(28px,7vh,88px))}
.hero-copy h1{max-width:9.5em;font-size:clamp(42px,min(6.6vw,10.5vh),104px)}
.hero-copy p{margin-top:clamp(16px,2.4vh,24px);max-width:30em;font-size:clamp(17px,1.35vw,20px);line-height:1.5}
.hero-copy .ctas{margin-top:clamp(20px,3.4vh,32px)}
.hud{position:absolute;inset:auto 0 0 0;z-index:3;color:#F5F0E8;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.hud-in{display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(245,240,232,.35);padding-top:12px}
.hud-in span{white-space:nowrap}
@media (max-width:640px){.hud-mid{display:none}}
.reticle{position:absolute;left:0;top:0;z-index:2;width:100px;height:100px;pointer-events:none;will-change:transform;opacity:0;transition:opacity .8s ease .6s}
.reticle.on{opacity:1}
.rc{position:absolute;width:14px;height:14px;border:0 solid var(--ink);transition:transform 1.1s var(--ease) .5s}
.rc.tl{left:0;top:0;border-width:1.5px 0 0 1.5px}
.rc.tr{right:0;top:0;border-width:1.5px 1.5px 0 0}
.rc.bl{left:0;bottom:0;border-width:0 0 1.5px 1.5px}
.rc.br{right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.reticle:not(.on) .tl{transform:translate(-18px,-18px)}.reticle:not(.on) .tr{transform:translate(18px,-18px)}
.reticle:not(.on) .bl{transform:translate(-18px,18px)}.reticle:not(.on) .br{transform:translate(18px,18px)}
.rlabel{position:absolute;left:calc(100% + 10px);top:0;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap;color:#F5F0E8;background:#1C1410;padding:6px 8px 5px;border-radius:2px}
.rlabel span{opacity:.6}
.rlabel::before{content:"";position:absolute;right:100%;top:50%;width:10px;height:1px;background:#1C1410}
.is-dark .rc{border-color:#F5F0E8}.is-dark .rlabel{background:#F5F0E8;color:#1C1410}.is-dark .rlabel::before{background:#F5F0E8}
@media (max-width:640px){.rlabel{display:none}}

/* sections */
.band{padding-block:clamp(80px,10vw,150px)}
.band.tight{padding-top:clamp(24px,4vw,56px)}
.band.alt{background:var(--paper-2)}
.split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.statement{font-family:var(--f-display);font-stretch:108%;font-weight:500;font-size:clamp(28px,3.4vw,50px);line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
.side-note{font-size:17px;max-width:30em}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(24px,3vw,40px);padding-bottom:16px;border-bottom:1px solid var(--line)}
.sec h2{margin-bottom:clamp(24px,3vw,40px)}
.sec.split h2,.sec.staff h2{margin-bottom:0}
.sec.split{align-items:start}
.svc-group{display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.tile{display:flex;flex-direction:column;gap:22px;text-decoration:none;color:inherit}
.stage{position:relative;aspect-ratio:5/4;border-radius:18px;overflow:hidden;background:var(--stage-a);isolation:isolate;--rx:0deg;--ry:0deg}
.stage.alt{background:var(--stage-b)}
.stage .topo{position:absolute;inset:0;width:100%;height:100%;color:var(--topo-a);transition:transform .9s var(--ease)}
.stage.alt .topo{color:var(--topo-b)}
.tile:hover .stage .topo{transform:scale(1.04)}
.tile-copy{display:flex;flex-direction:column;gap:8px}
.tile-copy h3{font-size:clamp(24px,2.2vw,30px)}
.tile-copy p{color:var(--ink-2);max-width:32em}
.tile-copy .tags{margin-top:8px}
.tile:hover h3{color:var(--rust)}
.tile:focus-visible{outline:none}
.tile:focus-visible .stage{outline:2px solid var(--orange);outline-offset:4px}

/* devices */
.devices{position:absolute;inset:0;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease);transform-style:preserve-3d}
.phone{container-type:inline-size;position:relative;margin:0;isolation:isolate}
.phone::before{content:"";position:absolute;inset:0;z-index:-1;background:#120C09;border-radius:15cqw;box-shadow:inset 0 0 0 1.2px #4A3B31,inset 0 0 0 3px #120C09,inset 0 0 0 4px #2B211B,var(--shadow)}
.phone .scr{position:relative;margin:3.4cqw;border-radius:11.6cqw;overflow:hidden;background:var(--top,#fff);display:flex;flex-direction:column}
.phone .scr img{width:100%;height:auto;aspect-ratio:540/1169;object-fit:cover}
.sb{flex:none;height:11cqw;display:flex;align-items:center;justify-content:space-between;padding:1.6cqw 7cqw 0 8.5cqw;color:var(--sbfg,#000);font-family:var(--f-body);font-weight:600;font-size:4cqw;letter-spacing:.01em;position:relative}
.sb .isl{position:absolute;left:50%;top:2.8cqw;width:28cqw;height:8cqw;margin-left:-14cqw;background:#000;border-radius:8cqw}
.sb svg{height:3.6cqw;width:auto;display:block}
.sb .sbi{display:flex;gap:1.4cqw;align-items:center}
.tablet{container-type:inline-size;position:relative;margin:0;isolation:isolate}
.tablet::before{content:"";position:absolute;inset:0;z-index:-1;background:#120C09;border-radius:5.4cqw;box-shadow:inset 0 0 0 1.2px #4A3B31,var(--shadow)}
.tablet .scr{margin:3.2cqw;border-radius:2.6cqw;overflow:hidden;background:#fff}
.tablet .scr img{width:100%;height:auto;aspect-ratio:960/1381}
.browser{margin:0;background:var(--card);border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent),var(--shadow)}
.browser .bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:color-mix(in srgb,var(--card) 80%,var(--paper-2));border-bottom:1px solid var(--line)}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.browser .scr img{width:100%;height:auto;aspect-ratio:4/3}
.devices.duo .phone{position:absolute;width:31%}
.devices.duo .back{left:21%;top:13%;transform:translateZ(-30px)}
.devices.duo .front{left:48%;top:22%;transform:translateZ(30px)}
.devices.trio .browser{position:absolute;left:8%;top:14%;width:70%;transform:translateZ(-20px)}
.devices.trio .tablet{position:absolute;left:12%;top:11%;width:44%;transform:translateZ(-20px)}
.devices.trio .phone{position:absolute;left:62%;top:26%;width:28%;transform:translateZ(40px)}

/* page heads */
.page{outline:none}
.page-head{position:relative;padding:calc(68px + clamp(56px,9vw,128px)) 0 clamp(56px,7vw,96px);overflow:hidden}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{margin-bottom:clamp(16px,2vw,24px)}
.head-topo{position:absolute;inset:0;width:100%;height:100%;color:var(--topo-a);-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 75%),linear-gradient(to bottom,#000 50%,transparent 98%);-webkit-mask-composite:source-in;mask-image:linear-gradient(100deg,transparent 30%,#000 75%),linear-gradient(to bottom,#000 50%,transparent 98%);mask-composite:intersect;opacity:.9}
.product-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.product-hero .stack{gap:18px}
.product-hero h1{margin-bottom:0}
.product-hero .muted{max-width:31em}
.devices.hero-duo,.devices.hero-trio{position:relative;inset:auto;aspect-ratio:1/1;max-width:600px;width:100%;margin-left:auto}
.devices.hero-duo .phone{position:absolute;width:42%}
.devices.hero-duo .back{left:6%;top:4%;transform:translateZ(-30px)}
.devices.hero-duo .front{left:46%;top:14%;transform:translateZ(30px)}
.devices.hero-trio .tablet{position:absolute;left:0;top:2%;width:66%;transform:translateZ(-20px)}
.devices.hero-trio .phone{position:absolute;left:58%;top:22%;width:38%;transform:translateZ(40px)}

/* stores */
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.store{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:8px 20px 8px 16px;border-radius:12px;background:#1C1410;color:#F5F0E8;line-height:1.15;font-weight:600;font-size:17px;cursor:default;box-shadow:inset 0 0 0 1px rgba(245,240,232,.18)}
.store small{display:block;font-weight:400;font-size:11px;letter-spacing:.02em;opacity:.75}
.store svg{width:22px;height:22px;opacity:.9}
.is-dark .store{background:#F3ECE3;color:#1C1410;box-shadow:none}
.is-dark .hero .btn.dark{--bg:var(--orange);--fg:#1C1410}
.is-dark .hero .btn.dark:hover{background:color-mix(in srgb,var(--orange) 85%,#fff)}

/* steps, grids, rows */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);counter-reset:s}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--line-2);position:relative}
.steps li::before{content:"0" counter(s);font-size:12px;letter-spacing:.1em;color:var(--rust);margin-bottom:10px}
.steps li::after{content:"";position:absolute;top:-1px;left:0;width:36px;height:2px;background:var(--orange)}
.steps b,.grid4 b,.grid3 b,.rows b{font-family:var(--f-display);font-stretch:108%;font-weight:600;font-size:20px;letter-spacing:-.01em;line-height:1.25}
.steps span,.grid4 span,.grid3 span{color:var(--ink-2)}
.grid4,.grid3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4 li,.grid3 li{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline;position:relative}
.rows li::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--orange);transition:width .8s var(--ease)}
.rows li:hover::before{width:100%}
.rows span{color:var(--ink-2)}
.rows.big li{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:28px 0}
.rows.big b{font-size:clamp(20px,2vw,26px)}
.rows.big span{font-size:17px}
.svc{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:start}
.svc h2{margin:0;padding-top:24px;color:var(--rust)}
.svc .rows li:first-child{border-top:1px solid var(--line)}

/* gallery */
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 28px;scrollbar-width:thin}
.gallery:focus-visible{outline-offset:6px}
.shot{margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:18px;min-width:200px}
.shot .phone{width:100%;--shadow:0 26px 50px -24px rgba(60,28,10,.45)}
.shot figcaption{display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.45}
.shot figcaption b{font-family:var(--f-display);font-stretch:108%;font-weight:600;font-size:17px}
.shot figcaption span{color:var(--ink-2)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.plan{padding:clamp(24px,3vw,40px);border-radius:18px;background:var(--card);border:1px solid var(--line)}
.plan h3{font-size:28px;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.plan.plus{background:linear-gradient(160deg,color-mix(in srgb,var(--orange) 14%,var(--card)),var(--card) 60%);border-color:color-mix(in srgb,var(--orange) 45%,var(--line))}
.plan.plus h3::after{content:"";width:10px;height:10px;border-radius:2px;background:var(--orange)}
.plan ul,.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.plan li,.ticks li{position:relative;padding-left:26px}
.plan li::before,.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1.5px;background:var(--orange)}

/* staff */
.staff{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,80px);align-items:center}
.staff .stack{gap:28px}
.browser.big{width:100%}

/* cta card, next */
.cta-card{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(28px,4vw,48px);border-radius:20px;background:var(--stage-a);color:#F5F0E8;position:relative;overflow:hidden}
.cta-card .muted{color:rgba(245,240,232,.72);margin-top:8px}
.cta-card>*{position:relative}
.cta-card>.topo{position:absolute;inset:0;width:100%;height:100%;color:var(--topo-a);opacity:.55;-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 85%);mask-image:linear-gradient(100deg,transparent 35%,#000 85%)}
.next{display:flex;align-items:center;justify-content:space-between;text-decoration:none;padding-top:28px;border-top:1px solid var(--line);font-family:var(--f-display);font-stretch:118%;font-weight:600;font-size:clamp(28px,4vw,52px);letter-spacing:-.025em}
.next small{display:block;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:400;margin-bottom:6px}
.next svg{width:clamp(28px,3vw,44px);height:clamp(28px,3vw,44px);color:var(--orange);transition:transform .45s var(--ease)}
.next:hover svg{transform:translateX(10px)}
.next:hover{color:var(--rust)}

/* founder / photo */
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.founder .stack{gap:18px}
.photo{position:relative;margin:0;border-radius:4px;overflow:hidden;background:var(--sand)}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.photo.tall img{aspect-ratio:4/5}
.hudframe::after{content:"";position:absolute;inset:14px;pointer-events:none;
  background:
   linear-gradient(#F5F0E8,#F5F0E8) top left/18px 2px no-repeat,linear-gradient(#F5F0E8,#F5F0E8) top left/2px 18px no-repeat,
   linear-gradient(#F5F0E8,#F5F0E8) top right/18px 2px no-repeat,linear-gradient(#F5F0E8,#F5F0E8) top right/2px 18px no-repeat,
   linear-gradient(#F5F0E8,#F5F0E8) bottom left/18px 2px no-repeat,linear-gradient(#F5F0E8,#F5F0E8) bottom left/2px 18px no-repeat,
   linear-gradient(#F5F0E8,#F5F0E8) bottom right/18px 2px no-repeat,linear-gradient(#F5F0E8,#F5F0E8) bottom right/2px 18px no-repeat}
.photo figcaption{position:absolute;left:28px;bottom:26px;color:#F5F0E8;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* about */
.about-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,6vw,96px);align-items:end}
.about-hero .stack{gap:20px}
.about-hero h1{margin-bottom:0}
.facts{margin:0;display:flex;flex-direction:column}
.facts>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.facts>div:first-child{border-top:1px solid var(--line)}
.facts dt{font-family:var(--f-display);font-stretch:108%;font-weight:600;font-size:19px}
.facts dd{margin:0;color:var(--ink-2)}
.mapbox{position:relative;aspect-ratio:1600/550;border-radius:18px;overflow:hidden;background:var(--stage-a)}
.mapbox canvas,.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.route{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round}
.places{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.places li{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line-2)}
.places b{font-family:var(--f-display);font-stretch:108%;font-weight:600;font-size:18px}
.places .coord{font-size:11.5px;letter-spacing:.08em;color:var(--rust);text-transform:uppercase}
.places span:last-child{color:var(--ink-2);font-size:15.5px}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:start}
.form{display:flex;flex-direction:column;gap:22px;position:relative}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.field{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-weight:500;font-size:15px;padding:0}
.field legend{margin-bottom:10px}
.hint{color:var(--ink-2);font-weight:400;font-size:13px;margin-left:6px}
.input{width:100%;min-height:50px;padding:12px 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);font:inherit;font-size:16px;transition:border-color .2s,box-shadow .2s}
textarea.input{min-height:160px;resize:vertical}
.input:hover{border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 25%,transparent)}
[data-invalid] .input{border-color:var(--rust)}
.err{color:var(--rust);font-size:14px}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick label{font-weight:400;font-size:15px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;user-select:none}
.pick label:hover{border-color:var(--ink)}
.pick input:checked+label{background:var(--orange);border-color:var(--orange);color:#1C1410}
.pick input:focus-visible+label{outline:2px solid var(--orange);outline-offset:2px}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.note{font-size:12px;letter-spacing:.04em;color:var(--ink-2);max-width:32em}
.sent{position:absolute;inset:-12px;background:var(--paper);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;padding:12px;outline:none}
.sent h2{font-size:clamp(32px,4vw,48px)}
.side{display:flex;flex-direction:column;gap:28px;padding:28px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.side b{font-family:var(--f-display);font-stretch:108%;font-weight:600;font-size:18px;display:block;margin-bottom:6px}

/* cta + footer */
.cta{position:relative;background:var(--orange);color:#1C1410;overflow:hidden}
.cta .topo{position:absolute;inset:0;width:100%;height:100%;color:#1C1410;opacity:.22}
.cta-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:clamp(64px,9vw,128px)}
.cta h2{font-size:clamp(34px,5vw,72px);font-stretch:118%;letter-spacing:-.03em;max-width:12em}
.foot{background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding-block:36px;font-size:14px}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot nav a{text-decoration:none}
.foot nav a:hover,.foot nav a[aria-current="page"]{color:var(--rust)}

/* motion */
.js .h-anim .wi{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*70ms + 80ms)}
.js .h-anim .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .h-anim.in .wi{transform:none}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .hero-copy p,.js .hero-copy .ctas{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) .55s,transform 1s var(--ease) .55s}
.js .hero-copy.in p,.js .hero-copy.in .ctas{opacity:1;transform:none}
.js .hero-copy.in .ctas{transition-delay:.7s}
.motion-off .h-anim .wi,.motion-off .rv,.motion-off .hero-copy p,.motion-off .hero-copy .ctas{transform:none!important;opacity:1!important;transition:none!important}
.motion-off *{scroll-behavior:auto!important}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--orange);z-index:70;transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* responsive */
@media (max-width:1060px){
  .steps.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .places{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-auto-columns:220px}
}
@media (max-width:900px){
  .tiles{grid-template-columns:1fr}
  .split,.founder,.about-hero,.contact-grid,.staff,.svc{grid-template-columns:1fr}
  .split{align-items:start}
  .svc h2{padding-top:0}
  .product-hero{grid-template-columns:1fr}
  .devices.hero-duo,.devices.hero-trio{margin:0 auto;max-width:520px}
  .founder .photo{max-width:420px}
  .about-hero .photo{max-width:420px}
}
@media (max-width:640px){
  body{font-size:16px}
  .rows li,.rows.big li,.facts>div{grid-template-columns:1fr;gap:4px}
  .steps,.steps.four,.grid4,.grid3,.plans,.row2{grid-template-columns:1fr}
  .places{grid-template-columns:1fr}
  .gallery{grid-auto-columns:64%;margin-inline:calc(-1 * max(var(--gut),16px));padding-inline:max(var(--gut),16px);scroll-padding-inline:max(var(--gut),16px)}
  .stage{aspect-ratio:1/1}
  .devices.duo .phone{width:36%}
  .devices.duo .back{left:14%;top:12%}
  .devices.duo .front{left:48%;top:20%}
  .devices.trio .browser{left:5%;width:76%;top:16%}
  .devices.trio .tablet{left:6%;width:52%;top:10%}
  .devices.trio .phone{left:60%;width:34%;top:28%}
  .hud{font-size:10.5px}
  .head-topo{opacity:.5}
  .cta-in{flex-direction:column;align-items:flex-start}
  .store{flex:1 1 150px}
  .next{font-size:30px}
}

/* view transitions */
.site-head{view-transition-name:head}
.progress{view-transition-name:progress}
::view-transition-old(root){animation:vt-out .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .6s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(20px)}}

/* brand stages */
.stage.bb{background:radial-gradient(90% 75% at 62% 38%,#2E2A78 0%,#1D1B4D 48%,#16153A 100%)}
.stage.bb .topo{color:#C4BFFA;--ta:.42;--tb:.16;--mark:#FFD15C;--spark:#FFD15C}
.stage.vl{background:radial-gradient(34% 30% at 16% 14%,rgba(255,244,190,.95),rgba(255,244,190,0) 72%),linear-gradient(180deg,#6FB2EA 0%,#9FCDF3 55%,#E6F2FC 100%)}
.stage.vl .topo{color:#FFFFFF;--ta:.9;--tb:.5;--mark:#F38315}
.is-dark .stage.vl{background:radial-gradient(34% 30% at 16% 14%,rgba(255,232,160,.35),rgba(255,232,160,0) 72%),linear-gradient(180deg,#2D6CA3 0%,#245886 55%,#1B3D5C 100%)}
.is-dark .stage.vl .topo{--ta:.55;--tb:.22}
.head-topo.bb{color:#7F77E0}
.head-topo.vl{color:#4F9BD8}
.is-dark .head-topo.bb{color:#9D96F0}
.is-dark .head-topo.vl{color:#5BA6E0}

/* carousel */
.car-wrap{display:flex;flex-direction:column;gap:14px;min-width:0}
.carousel{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--sand);touch-action:pan-y}
.carousel.hudframe::after{z-index:4}
.slide{position:absolute;inset:0;margin:0;z-index:1;clip-path:inset(100% 0 0 0);transition:clip-path 0s linear 1.2s}
.slide.is-on{z-index:2;clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 7.5s cubic-bezier(.2,.6,.3,1)}
.slide.is-on img{transform:scale(1.0)}
.slide figcaption{position:absolute;left:30px;bottom:28px;right:30px;z-index:3;display:flex;flex-direction:column;gap:3px;color:#F5F0E8;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.slide figcaption b{font-family:var(--f-display);font-stretch:108%;font-weight:600;font-size:17px;letter-spacing:-.01em}
.slide figcaption span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.slide::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(20,10,5,.55),rgba(20,10,5,0));z-index:2;pointer-events:none}
.scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:5;background:var(--orange);box-shadow:0 0 14px 2px color-mix(in srgb,var(--orange) 70%,transparent);opacity:0;pointer-events:none}
.car-ui{display:flex;align-items:center;gap:6px}
.car-count{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--ink-2);margin-right:8px;white-space:nowrap}
.car-count b{color:var(--ink);font-weight:500}
.car-bar{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;margin-right:6px}
.car-bar i{position:absolute;inset:0;background:var(--orange);transform-origin:0 50%;transform:scaleX(0)}
.iconbtn.sm{width:36px;height:36px;border-color:var(--line-2)}
.iconbtn.sm svg{width:18px;height:18px}
#carPause .c-play{display:none}
#carPause[aria-pressed="true"] .c-play{display:block}#carPause[aria-pressed="true"] .c-pause{display:none}
.motion-off #carPause{display:none}
.motion-off .slide,.motion-off .slide img{transition:none!important}
.motion-off .slide img{transform:none}

/* access maps card */
.am{position:relative;overflow:hidden;border-radius:20px;background:var(--stage-a);color:#F5F0E8;isolation:isolate}
.am .topo{position:absolute;inset:0;width:100%;height:100%;color:var(--topo-a);opacity:.6;-webkit-mask-image:linear-gradient(110deg,transparent 30%,#000 90%);mask-image:linear-gradient(110deg,transparent 30%,#000 90%)}
.am-in{position:relative;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.am-label{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.am h2{font-size:clamp(28px,3.6vw,52px);font-stretch:112%;line-height:1.05;max-width:18em}
.am-sub{max-width:38em;color:rgba(245,240,232,.75);font-size:18px}
.am-facts{list-style:none;margin:12px 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);width:100%}
.am-facts li{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid rgba(245,240,232,.22)}
.am-facts b{font-family:var(--f-display);font-stretch:108%;font-weight:600;font-size:18px}
.am-facts span{color:rgba(245,240,232,.7);font-size:15.5px}
.textlink.light{color:var(--amber)}

/* timeline */
.timeline{list-style:none;margin:0 0 clamp(32px,4vw,56px);padding:0;position:relative}
.timeline li{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:24px;padding:26px 0 26px;border-top:1px solid var(--line);position:relative}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline li::before{content:"";position:absolute;left:0;top:-1px;width:36px;height:2px;background:var(--orange)}
.timeline .when{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--rust);display:flex;flex-direction:column;gap:4px;text-transform:uppercase}
.timeline .when small{font-size:11.5px;color:var(--ink-2);letter-spacing:.08em}
.timeline b{font-family:var(--f-display);font-stretch:112%;font-weight:600;font-size:clamp(21px,2vw,26px);letter-spacing:-.015em;display:block}
.timeline .role{display:block;color:var(--ink);margin-top:2px;font-weight:500}
.timeline p{color:var(--ink-2);margin-top:8px;max-width:40em}
.facts.also>div:first-child{border-top:0}
.facts.also dt{font-size:17px}

/* map */
.map-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.map-head h2{margin:0}
.map-stat{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.map-stat b{font-family:var(--f-display);font-stretch:112%;font-size:26px;color:var(--ink);font-weight:600;letter-spacing:-.02em;margin-right:4px}
.map-stat span{margin:0 8px;color:var(--line-2)}
.pt rect{fill:var(--orange)}
.pt.trav rect{fill:var(--stage-a);stroke:var(--amber);stroke-width:2.2}
.pt text{fill:#F5F0E8;font-family:var(--f-mono);font-size:19px;letter-spacing:.08em;text-transform:uppercase;opacity:.92;transition:fill .2s,opacity .2s}
.pt.trav text{fill:#E9D9C6;opacity:.78}
.pt .ping{fill:none;stroke:var(--amber);stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.pt.home .ping{stroke:var(--orange);animation:ping 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.pt rect{transition:transform .25s var(--ease);transform-box:fill-box;transform-origin:center}
.pt.hl rect{transform:scale(1.6)}
.pt.hl text{fill:var(--amber);opacity:1}
.pt.hl .ping{animation:ping 1.2s cubic-bezier(.2,.6,.3,1) infinite}
.pt.in .ping{animation:ping 1.4s cubic-bezier(.2,.6,.3,1) calc(var(--d)*90ms + 400ms) 1}
.pt.home.in .ping{animation:ping 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(3.4)}}
.motion-off .pt .ping{animation:none!important}
@media (max-width:700px){.pt text{display:none}.pt.hl text{display:block;font-size:38px}}
.places{grid-template-columns:repeat(3,minmax(0,1fr))}
.places li,.chips li{cursor:default}
.travels{margin-top:28px;padding-top:18px;border-top:1px solid var(--line-2)}
.travels-h{font-family:var(--f-display);font-stretch:108%;font-weight:600;font-size:18px;margin-bottom:14px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:14.5px;padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;transition:background-color .2s,border-color .2s,color .2s}
.chips li:hover,.chips li.hl{background:var(--orange);border-color:var(--orange);color:#1C1410}
@media (max-width:1060px){.places{grid-template-columns:repeat(3,minmax(0,1fr))}.am-facts{grid-template-columns:1fr}}
@media (max-width:640px){.places{grid-template-columns:1fr}.timeline li{grid-template-columns:1fr;gap:10px}.car-ui .car-count{margin-right:2px}}
@media (max-width:900px){.about-hero .car-wrap{max-width:440px;width:100%}}

.stage.vl::after{content:"";position:absolute;z-index:1;left:-20%;right:-20%;bottom:-70%;height:88%;border-radius:50%;background:linear-gradient(180deg,#93CC6E,#6FAF54 40%);box-shadow:0 -5px 0 0 #F38315;opacity:.95}
.is-dark .stage.vl::after{background:linear-gradient(180deg,#5E9A47,#3F6F33 40%);box-shadow:0 -5px 0 0 #D8730F}
.stage .devices{z-index:2}

/* live form */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-error{color:var(--rust);font-weight:500;padding:12px 16px;border:1px solid color-mix(in srgb,var(--rust) 45%,transparent);border-radius:10px;background:color-mix(in srgb,var(--rust) 8%,transparent)}
.btn[disabled]{opacity:.7;cursor:progress}
.btn.busy svg{animation:mw-spin .9s linear infinite}
@keyframes mw-spin{to{transform:rotate(360deg)}}