/* Duob · v3
   One stylesheet for both pages. Motion tokens live in :root; every hover is gated to
   real pointers; reduced motion keeps fades and drops movement. */

@font-face{font-family:"Duob Helvetica";src:url(../fonts/duob-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Duob Helvetica";src:url(../fonts/duob-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#0A0A0A; --paper:#FFFFFF; --mist:#F4F4F4; --stone:#A3A3A3; --slate:#5E5E5E; --pencil:#BDBDBD; --line:#E3E3E3; --coal:#1C1C1C; --night:#08090C;
  --display:"Duob Helvetica","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(16px,5vw,72px); --band:clamp(88px,11vw,160px); --max:1320px; --nav:60px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  /* motion */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --press:120ms; --ui:200ms; --reveal:800ms;
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--display);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.locked{overflow:hidden}
img,video{max-width:100%;display:block}
picture{display:contents}
a{color:inherit}
button{font:inherit;color:inherit}
a,button,label,summary,[role="button"]{touch-action:manipulation}
button,.btn,.pill span,.lang,.menu-btn,.loop-toggle{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:calc(var(--nav) + 32px + var(--safe-t))}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;transition:top var(--ui) var(--ease-out)}
.skip:focus{top:calc(12px + var(--safe-t))}

.wrap{max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.band{padding-block:var(--band)}
.light{background:var(--paper);color:var(--ink)}
.mist{background:var(--mist);color:var(--ink)}
.dark{background:var(--ink);color:var(--paper)}
.muted{color:var(--slate)}
.dark .muted{color:var(--stone)}
.label{font:700 12px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.dark .label{color:var(--stone)}
.stack{display:grid;gap:22px;align-content:start}

.h-hero{font-weight:700;font-size:clamp(44px,8.4vw,128px);line-height:.95;letter-spacing:-.05em}
.h-sec{font-weight:700;font-size:clamp(36px,5.2vw,72px);line-height:1.02;letter-spacing:-.04em}
h3{font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.1;letter-spacing:-.025em}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.45;max-width:44ch}

/* handwritten words: grey artwork drawn as an image (no CSS mask, so no edge artifacts in any browser) */
.hw{display:inline-block;height:var(--h);aspect-ratio:var(--ar);background:var(--w) center/contain no-repeat;vertical-align:var(--va);margin-left:calc(.04em - var(--pad,0em));margin-right:calc(-.06em - var(--pad,0em))}
/* each image has a transparent margin (--pad) so no stroke touches the image edge; the margins cancel it out */
.hw.w-destacar{--w:url(../img/hand/destacar.webp);--ar:1140/365;--h:1.213em;--va:-0.214em;--pad:0.066em}
.hw.w-stand-out{--w:url(../img/hand/stand-out.webp);--ar:928/254;--h:1.263em;--va:-0.259em;--pad:0.070em}
.hw.w-hacemos{--w:url(../img/hand/hacemos.webp);--ar:930/288;--h:1.287em;--va:-0.219em;--pad:0.067em}
.hw.w-we-make{--w:url(../img/hand/we-make.webp);--ar:926/245;--h:1.254em;--va:-0.231em;--pad:0.067em}
.hw.w-real{--w:url(../img/hand/real.webp);--ar:956/516;--h:1.152em;--va:-0.205em;--pad:0.063em}
.hw.w-marca{--w:url(../img/hand/marca.webp);--ar:928/256;--h:0.975em;--va:-0.208em;--pad:0.053em}
.hw.w-brand{--w:url(../img/hand/brand.webp);--ar:940/375;--h:1.201em;--va:-0.195em;--pad:0.064em}
.hw.w-vista{--w:url(../img/hand/vista.webp);--ar:948/442;--h:1.070em;--va:-0.167em;--pad:0.058em}
.hw.w-close{--w:url(../img/hand/close.webp);--ar:946/426;--h:1.174em;--va:-0.177em;--pad:0.063em}
.hw.w-importan{--w:url(../img/hand/importan.webp);--ar:932/292;--h:1.537em;--va:-0.540em;--pad:0.084em}
.hw.w-matter{--w:url(../img/hand/matter.webp);--ar:930/278;--h:1.222em;--va:-0.234em;--pad:0.066em}
.hw.w-propuesta{--w:url(../img/hand/propuesta.webp);--ar:932/300;--h:1.491em;--va:-0.493em;--pad:0.080em}
.hw.w-proposal{--w:url(../img/hand/proposal.webp);--ar:934/310;--h:1.517em;--va:-0.490em;--pad:0.083em}
.hw.w-por-nosotros{--w:url(../img/hand/por-nosotros.webp);--ar:1841/498;--h:1.606em;--va:-0.579em;--pad:0.087em}
.hw.w-speaks-for-itself{--w:url(../img/hand/speaks-for-itself.webp);--ar:2091/485;--h:1.541em;--va:-0.541em;--pad:0.083em}

/* stroke-by-stroke lettering (hero) */
.hws{display:inline-block;height:var(--h);aspect-ratio:var(--ar);vertical-align:var(--va);margin-left:.04em;margin-right:-.03em;color:var(--pencil)}
.hws.w-destacar{--ar:1100/325;--h:1.080em;--va:-0.148em}
.hws.w-stand-out{--ar:900/226;--h:1.124em;--va:-0.189em}
.hws svg{display:block;width:100%;height:100%;overflow:visible}
.hws path{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;animation:pen var(--d) linear var(--t) both}
@keyframes pen{0%{stroke-dashoffset:1;opacity:0}0.1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:999px;padding:15px 26px;font:700 15px/1 var(--display);text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform var(--press) var(--ease-out),background-color var(--ui) ease,color var(--ui) ease,border-color var(--ui) ease}
.btn:active{transform:scale(.97)}
.btn .arr{display:inline-block;transition:transform var(--ui) var(--ease-out)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(10,10,10,.22)}
.dark .btn-solid,.btn-light{background:var(--paper);color:var(--ink)}
.dark .btn-ghost,.d-hero .btn-ghost{color:var(--paper);border-color:rgba(255,255,255,.3)}
.btn-glass{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn[disabled]{opacity:.6;cursor:progress}
@media (hover:hover) and (pointer:fine){
  .btn-solid:hover{background:#2A2A2A}
  .dark .btn-solid:hover,.btn-light:hover{background:#E9E9E9}
  .btn-ghost:hover{border-color:var(--ink)}
  .dark .btn-ghost:hover,.d-hero .btn-ghost:hover{border-color:var(--paper)}
  .btn-glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
  .btn:hover .arr.r{transform:translateX(3px)}
  .btn:hover .arr.d{transform:translateY(3px)}
}

/* ---------- header: a floating glass pill that follows the section underneath ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;padding:calc(10px + var(--safe-t)) max(12px,calc(var(--gutter) - 12px)) 0;pointer-events:none;
  --hdr-bg:rgba(12,12,14,.38); --hdr-line:rgba(255,255,255,.14); --hdr-ink:#fff; --hdr-soft:rgba(255,255,255,.72); --hdr-chip:rgba(255,255,255,.12)}
.top[data-on="light"]{--hdr-bg:rgba(255,255,255,.78); --hdr-line:rgba(10,10,10,.08); --hdr-ink:var(--ink); --hdr-soft:var(--slate); --hdr-chip:rgba(10,10,10,.06)}
.top .bar{pointer-events:auto;max-width:var(--max);margin-inline:auto;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 8px 0 22px;border-radius:999px;
  background:var(--hdr-bg);border:1px solid var(--hdr-line);color:var(--hdr-ink);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
  transition:background-color 250ms ease,border-color 250ms ease,color 250ms ease,transform 350ms var(--ease-out)}
.top.away .bar{transform:translateY(calc(-100% - 14px - var(--safe-t)))}
.logo{display:block;width:72px;aspect-ratio:1400/449;background:currentColor;-webkit-mask:url(../img/logo.webp) center/contain no-repeat;mask:url(../img/logo.webp) center/contain no-repeat}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:15px;text-decoration:none;color:var(--hdr-soft);transition:color var(--ui) ease;padding-block:10px}
.nav a[aria-current="page"]{color:var(--hdr-ink)}
.right{display:flex;align-items:center;gap:8px}
.top .btn{min-height:44px;padding:12px 18px;font-size:14px}
.top .btn-cta{background:var(--hdr-ink);color:var(--hdr-bg)}
.top[data-on="dark"] .btn-cta{color:var(--ink)}
.top[data-on="light"] .btn-cta{color:var(--paper)}
.lang{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;width:88px;height:44px;border-radius:999px;background:var(--hdr-chip);border:0;padding:4px;cursor:pointer;font:700 11px/1 var(--display);letter-spacing:.08em}
.lang::before{content:"";position:absolute;top:4px;left:4px;width:40px;height:36px;border-radius:999px;background:var(--hdr-ink);transition:transform var(--ui) var(--ease-out),background-color 250ms ease}
.lang[data-lang="en"]::before{transform:translateX(40px)}
.lang span{position:relative;display:grid;place-items:center;color:var(--hdr-soft);transition:color var(--ui) ease}
.lang[data-lang="es"] .l-es,.lang[data-lang="en"] .l-en{color:var(--hdr-bg)}
.top[data-on="dark"] .lang[data-lang="es"] .l-es,.top[data-on="dark"] .lang[data-lang="en"] .l-en{color:var(--ink)}
.top[data-on="light"] .lang[data-lang="es"] .l-es,.top[data-on="light"] .lang[data-lang="en"] .l-en{color:var(--paper)}
.menu-btn{display:none;min-width:44px;height:44px;border:0;border-radius:999px;background:var(--hdr-chip);padding:0 16px;font:700 14px/1 var(--display);cursor:pointer;transition:transform var(--press) var(--ease-out)}
.menu-btn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){ .nav a:hover{color:var(--hdr-ink)} }

/* mobile menu: full-screen sheet, links cascade in */
.drawer{position:fixed;inset:0;z-index:45;background:var(--night);color:#fff;display:grid;align-content:end;gap:4px;padding:calc(96px + var(--safe-t)) var(--gutter) calc(40px + var(--safe-b));overscroll-behavior:contain;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity 180ms ease,visibility 0s linear 180ms}
.drawer.open{opacity:1;visibility:visible;transition:opacity 240ms var(--ease-out),visibility 0s}
.drawer a{font-size:clamp(34px,9vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.05;text-decoration:none;padding-block:8px;opacity:0;transform:translateY(14px);transition:opacity 150ms ease,transform 150ms ease}
.drawer.open a{opacity:1;transform:none;transition:opacity 360ms var(--ease-out),transform 420ms var(--ease-out);transition-delay:calc(60ms + var(--i,0) * 40ms)}
.drawer .d-meta{margin-top:28px;font-size:15px;color:var(--stone);display:grid;gap:6px}
.drawer .d-meta a{font-size:15px;font-weight:400;letter-spacing:0;padding:4px 0;color:#fff}

/* ---------- hero (home) ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr;color:#fff;background:var(--night);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;transform-origin:50% 40%}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 70% at 50% 45%,rgba(8,9,12,.25) 0%,rgba(8,9,12,.55) 70%),
  linear-gradient(180deg,rgba(8,9,12,.55) 0%,rgba(8,9,12,.2) 35%,rgba(8,9,12,.55) 75%,rgba(8,9,12,.95) 100%)}
.hero-inner{display:grid;justify-items:center;align-content:center;text-align:center;gap:clamp(22px,2.8vw,34px);padding-top:calc(var(--nav) + 10px + clamp(48px,11svh,128px) + var(--safe-t));padding-bottom:calc(clamp(32px,7svh,80px) + var(--safe-b))}
.hero h1{max-width:none;font-size:clamp(34px,10.2vw,104px);line-height:.98}
.hero h1 br{display:block}
.hero .lede{color:rgba(255,255,255,.78);max-width:42ch}
.hero .btns{justify-content:center}
.hero-logos{justify-self:stretch;margin-top:clamp(16px,4svh,48px);text-align:left;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:28px;padding:18px 0 18px 26px;border-radius:22px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero-logos .label{color:rgba(255,255,255,.6);white-space:nowrap}

/* entrance: blur-in, once, on load */
@keyframes blur-in{from{opacity:0;filter:blur(10px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes settle{from{transform:scale(1.08)}to{transform:none}}
.enter{animation:blur-in 900ms var(--ease-out) both;animation-delay:var(--at,0ms)}
.hero-media{animation:fade-in 1200ms ease both,settle 2000ms var(--ease-out) both}
/* the title is split into words by JS; without JS it still shows after a moment */
.js .hero h1:not(.split){opacity:0;animation:fade-in 400ms ease 1200ms forwards}
.hero h1 .hws+.wd{margin-left:-.06em}
.hero h1 .wd{display:inline-block;animation:blur-in 900ms var(--ease-out) both;animation-delay:calc(260ms + var(--i) * 70ms)}

/* ---------- logos marquee ---------- */
.marquee{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.track.paused{animation-play-state:paused}
.set{display:flex;align-items:center;gap:clamp(44px,5vw,80px);padding-right:clamp(44px,5vw,80px);font-size:13px}
.cl{display:block;flex:none;background:rgba(255,255,255,.78);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){ .marquee:hover .track{animation-play-state:paused} }
.cl-activityhero{--m:url(../img/clients/activityhero.webp);width:11.286em;height:1.606em}
.cl-amplitude{--m:url(../img/clients/amplitude.webp);width:9.404em;height:1.953em}
.cl-beeyond{--m:url(../img/clients/beeyond.webp);width:8.289em;height:2.216em}
.cl-classtime{--m:url(../img/clients/classtime.webp);width:10.418em;height:1.763em}
.cl-cookunity{--m:url(../img/clients/cookunity.webp);width:8.411em;height:1.747em}
.cl-ene{--m:url(../img/clients/ene.webp);width:7.775em;height:2.362em}
.cl-mastercard{--m:url(../img/clients/mastercard.webp);width:10.189em;height:1.803em}
.cl-anterra{--m:url(../img/clients/anterra.webp);width:4.987em;height:3.683em}
.cl-keyway{--m:url(../img/clients/keyway.webp);width:8.571em;height:2.143em}
.cl-localiza{--m:url(../img/clients/localiza.webp);width:9.583em;height:1.917em}
.cl-freddo{--m:url(../img/clients/freddo.webp);width:4.941em;height:2.974em}
.cl-nexton{--m:url(../img/clients/nexton.webp);width:8.443em;height:2.176em}
.cl-omw{--m:url(../img/clients/omw.webp);width:7.953em;height:2.309em}
.cl-smartbarrel{--m:url(../img/clients/smartbarrel.webp);width:11.286em;height:1.476em}
.cl-v1{--m:url(../img/clients/v1.webp);width:6.507em;height:2.823em}
.cl-buildcorridor{--m:url(../img/clients/buildcorridor.webp);width:10.478em;height:1.753em}
.cl-shift{--m:url(../img/clients/shift.webp);width:7.361em;height:1.996em}

/* ---------- work strip: drifts, drags, keeps momentum ---------- */
.work{padding-block:clamp(64px,8vw,120px)}
.work-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(28px,3.5vw,48px)}
.work-head .hint{font-size:14px;color:var(--stone);white-space:nowrap}
.strip{overflow:hidden;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.strip.drag{cursor:grabbing}
.strip-track{display:flex;gap:clamp(12px,1.6vw,24px);width:max-content;will-change:transform;padding-inline:var(--gutter)}
.strip .card{margin:0;flex:none;height:clamp(320px,40vw,620px);aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#161616;position:relative}
.strip .card img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform 900ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .strip:not(.drag) .card:hover img{transform:scale(1.04)}
}

/* ---------- services ---------- */
.svc-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.rows{display:grid}
.row-s{display:grid;grid-template-columns:72px minmax(0,1.1fr) minmax(0,1fr) clamp(180px,20vw,260px);gap:clamp(20px,3vw,48px);align-items:start;padding-block:clamp(28px,3.5vw,44px);border-top:1px solid var(--line)}
.row-s:last-child{border-bottom:1px solid var(--line)}
.row-s .n{font:700 15px/1.6 var(--display);color:var(--slate);font-variant-numeric:tabular-nums}
.row-s h3{font-size:clamp(26px,3vw,40px);transition:transform 350ms var(--ease-out)}
.row-s p{color:var(--slate);font-size:18px;max-width:38ch;padding-top:.3em}
.row-s .ph{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--mist)}
.row-s .ph img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .row-s:hover h3{transform:translateX(8px)}
  .row-s:hover .ph img{transform:scale(1.04)}
}

/* ---------- device feature (home): the frame opens up as you scroll ---------- */
.feature-band{background:var(--night);color:#fff;padding-block:var(--band);overflow:hidden}
.feature-copy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.feature-copy p.body{color:rgba(255,255,255,.7);font-size:19px;max-width:40ch}
.feature-copy .stack{gap:22px}
.grow{will-change:scale}
.loop-wrap{position:relative;aspect-ratio:16/9;border-radius:inherit;overflow:hidden;background:#111}
.loop-wrap video,.loop-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loop-toggle{position:absolute;right:14px;bottom:14px;z-index:2;width:44px;height:44px;border-radius:999px;border:0;display:grid;place-items:center;background:rgba(10,10,10,.5);color:#fff;font-size:12px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:.8;transition:opacity var(--ui) ease,transform var(--press) var(--ease-out)}
.loop-toggle:active{transform:scale(.94)}
.loop-toggle:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){ .loop-toggle:hover{opacity:1} }
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.facts span{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700}

/* ---------- contact ---------- */
.cta-head{display:grid;gap:28px;margin-bottom:clamp(56px,7vw,96px)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(48px,7vw,112px);align-items:start}
.contact .side{display:grid;gap:28px;align-content:start}
.data{display:grid;gap:12px;margin-top:8px;font-size:15px;color:var(--stone)}
.data a{color:var(--paper);text-decoration:none;justify-self:start;border-bottom:1px solid rgba(255,255,255,.25);padding-block:4px 2px;transition:border-color var(--ui) ease}
@media (hover:hover) and (pointer:fine){ .data a:hover{border-color:var(--paper)} }
form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px;min-width:0;border:0;margin:0;padding:0}
.field label,.field legend{font:700 12px/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--stone);padding:0}
.opt{text-transform:none;letter-spacing:0;font-weight:400;color:#7A7A7A}
input,select,textarea{font:400 16px/1.4 var(--display);color:var(--paper);background:var(--coal);border:1px solid transparent;border-radius:14px;padding:14px 16px;width:100%;transition:border-color var(--ui) ease,background-color var(--ui) ease}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:#7A7A7A}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(255,255,255,.55);background:#222}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#A3A3A3 50%),linear-gradient(135deg,#A3A3A3 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.field.bad input,.field.bad textarea{border-color:#E06B6B}
.err{font-size:13px;color:#F08A8A}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.pill span{display:inline-flex;align-items:center;justify-content:center;min-width:76px;min-height:44px;padding:12px 18px;border-radius:999px;border:1px solid #3D3D3D;font:700 15px/1 var(--display);font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform var(--press) var(--ease-out)}
.pill span:active{transform:scale(.96)}
.pill input:checked+span{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.pill input:focus-visible+span{outline:2px solid var(--paper);outline-offset:3px}
@media (hover:hover) and (pointer:fine){ .pill input:not(:checked)+span:hover{border-color:#777} }
.hint{font-size:13px;color:#7A7A7A}
.submit{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:8px}
.privacy{font-size:13px;color:#7A7A7A;max-width:32ch}
.done{border-radius:18px;background:var(--coal);padding:28px;display:grid;gap:10px;animation:pop-in 320ms var(--ease-out) both}
.done strong{font-weight:700;font-size:22px;letter-spacing:-.02em}
@keyframes pop-in{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}

/* ---------- footer ---------- */
footer{background:var(--paper);color:var(--ink);padding-block:72px calc(32px + var(--safe-b))}
footer .wrap{display:grid;gap:56px}
.f-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.f-brand{display:grid;gap:16px;align-content:start}
.f-brand .logo{color:var(--ink)}
.f-brand p{color:var(--slate);max-width:28ch}
.f-col{display:grid;gap:4px;align-content:start;font-size:15px;color:var(--slate)}
.f-col a{text-decoration:none;color:var(--ink);padding-block:6px;justify-self:start}
@media (hover:hover) and (pointer:fine){ .f-col a:hover{text-decoration:underline} }
.legal{font-size:13px;color:var(--slate);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.legal a{text-decoration:none;color:var(--slate);padding-block:6px}

/* ---------- device page ---------- */
.d-hero{background:var(--night);color:#fff;padding-top:calc(var(--nav) + clamp(64px,9vw,128px) + var(--safe-t));padding-bottom:clamp(48px,6vw,80px)}
.d-hero .grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,48px) 40px;align-items:end}
.d-hero .full{grid-column:1/-1}
.d-title{font-size:clamp(40px,6.4vw,104px)}
.d-hero .grid>.copy:last-child{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px}
.d-hero .copy{display:grid;gap:24px;justify-items:start}
.d-hero p.muted{color:rgba(255,255,255,.7);font-size:19px;max-width:40ch}
.video-band{background:var(--night);color:#fff;padding-bottom:var(--band);overflow:hidden}

/* how it works: sticky media, steps scroll past it */
.how-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
.how-head>p{font-size:20px;color:var(--slate);max-width:40ch}
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);margin-top:clamp(56px,7vw,96px)}
.steps{list-style:none;margin:0;padding:0;display:grid}
.steps li{display:grid;gap:14px;align-content:center;min-height:min(70vh,560px);padding-block:32px;border-top:1px solid var(--line);opacity:.35;transition:opacity 400ms ease}
.steps li.on{opacity:1}
.steps .n{font-weight:700;font-size:15px;color:var(--slate)}
.steps .step-ph{display:none}
.how-media{position:sticky;top:calc(50svh - min(26vw,300px) + var(--nav) / 2);align-self:start;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--mist)}
.how-media>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(6px);transform:scale(1.03);transition:opacity 420ms ease,filter 420ms ease,transform 600ms var(--ease-out)}
.how-media>.on{opacity:1;filter:none;transform:none}
.how-progress{position:absolute;left:16px;right:16px;top:16px;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.how-progress i{height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.how-progress i::after{content:"";display:block;height:100%;background:#fff;transform:scaleX(var(--p,0));transform-origin:left;transition:transform 600ms var(--ease-out)}

/* optional fields fold away so the form starts short */
.more{border-top:1px solid #2E2E2E;border-bottom:1px solid #2E2E2E}
.more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;font:700 14px/1.2 var(--display);color:var(--stone)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:20px;font-weight:400;transition:transform var(--ui) var(--ease-out)}
.more[open] summary::after{transform:rotate(45deg)}
.more-body{display:grid;gap:18px;padding-bottom:22px}
.more[open] .more-body{animation:blur-in 320ms var(--ease-out) both}
@media (hover:hover) and (pointer:fine){ .more summary:hover{color:var(--paper)} }

.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(48px,6vw,80px)}
.gallery figure{margin:0;display:grid;gap:12px;align-content:start;min-width:0}
.g-wide{grid-column:1/-1}
.gallery .img{border-radius:14px;overflow:hidden;background:var(--paper)}
.g-wide .img{aspect-ratio:3/2}
.g-wide .img img{width:100%;height:100%;object-fit:cover}
.g-tall .img{aspect-ratio:4/5}
.g-tall .img img{width:100%;height:100%;object-fit:cover}
.g-stack{display:grid;gap:clamp(14px,2vw,24px);align-content:start}
.g-stack .img{aspect-ratio:3/2}
.g-stack .img img{width:100%;height:100%;object-fit:cover}
figcaption{font:700 12px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}

.uses{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(40px,7vw,112px)}
.uses-list{list-style:none;margin:0;padding:0}
.uses-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding-block:26px;border-top:1px solid #222;transition:padding-left 350ms var(--ease-out)}
.uses-list strong{font-weight:700;font-size:21px;letter-spacing:-.02em}
.uses-list span{color:var(--stone)}
@media (hover:hover) and (pointer:fine){ .uses-list li:hover{padding-left:12px} }
.custom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);margin-top:clamp(48px,6vw,80px)}
.custom article{display:grid;gap:14px;align-content:start;padding-top:20px;border-top:1px solid var(--line)}
.custom p{color:var(--slate);max-width:36ch}
.battery{margin-top:clamp(32px,4vw,48px);color:var(--slate);font-size:15px}
.back{display:inline-flex;gap:8px;color:var(--stone);text-decoration:none;font-size:15px;padding-block:8px}

/* cases: an index; on a mouse, the image follows the cursor */
.cases-head{margin-bottom:clamp(36px,4.5vw,64px)}
.cases-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.case-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:20px;padding-block:clamp(18px,2.2vw,28px);border-bottom:1px solid var(--line)}
.case-row .n{font-weight:700;font-size:14px;color:var(--slate);font-variant-numeric:tabular-nums}
.case-row .name{font-weight:700;font-size:clamp(30px,4.6vw,64px);line-height:1;letter-spacing:-.04em;transition:color 250ms ease,transform 350ms var(--ease-out)}
.case-row .kind{font-size:15px;color:var(--slate)}
.case-row .thumb{display:none}
.case-float{position:fixed;left:0;top:0;width:clamp(260px,26vw,420px);aspect-ratio:3/2;border-radius:12px;overflow:hidden;pointer-events:none;z-index:40;opacity:0;transform:scale(.94);transition:opacity 200ms ease,transform 300ms var(--ease-out)}
.case-float.on{opacity:1;transform:none}
.case-float .pos{position:absolute;inset:0}
.case-float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 250ms ease}
.case-float img.on{opacity:1}
.case-float-wrap{position:fixed;left:0;top:0;z-index:40;pointer-events:none;will-change:transform}
@media (hover:hover) and (pointer:fine){
  .cases-list:hover .case-row .name{color:#C4C4C4}
  .cases-list .case-row:hover .name{color:var(--ink);transform:translateX(10px)}
}
@media (hover:none),(max-width:820px){
  .case-row{grid-template-columns:36px minmax(0,1fr) clamp(96px,28vw,160px)}
  .case-row .kind{display:none}
  .case-row .thumb{display:block;aspect-ratio:3/2;border-radius:8px;overflow:hidden}
  .case-row .thumb img{width:100%;height:100%;object-fit:cover}
  .case-float-wrap{display:none}
}

/* ---------- scroll reveals (only with JS and motion allowed) ---------- */
.rv [data-r]{transition:opacity var(--reveal) var(--ease-out),transform var(--reveal) var(--ease-out),clip-path 1000ms var(--ease-in-out),filter var(--reveal) var(--ease-out);transition-delay:var(--d,0ms)}
.rv [data-r="up"]:not(.in){opacity:0;transform:translateY(18px)}
.rv [data-r="line"]{clip-path:inset(-0.4em -0.3em -0.7em -0.3em)}
.rv [data-r="line"]:not(.in){clip-path:inset(0 0 100% 0);transform:translateY(.3em)}
.rv [data-r="img"]{clip-path:inset(0 0 0 0 round 14px)}
.rv [data-r="img"]:not(.in){clip-path:inset(100% 0 0 0 round 14px)}
.rv [data-r="img"] img,.rv [data-r="img"] video{transition:transform 1400ms var(--ease-out);transition-delay:var(--d,0ms)}
.rv [data-r="img"]:not(.in) img,.rv [data-r="img"]:not(.in) video{transform:scale(1.08)}
/* handwritten words write themselves in after their heading lands */
.rv [data-r] .hw{clip-path:inset(-20% 100% -20% -20%);transition:clip-path 1200ms var(--ease-in-out) 450ms}
.rv [data-r].in .hw{clip-path:inset(-20% -20% -20% -20%)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav,.top .btn-cta{display:none}
  .menu-btn{display:block}
  .feature-copy,.contact,.how-head,.d-hero .grid,.uses{grid-template-columns:minmax(0,1fr)}
  .row-s{grid-template-columns:48px minmax(0,1fr) clamp(140px,26vw,200px);grid-template-areas:"n t i" "n p i"}
  .row-s .n{grid-area:n}.row-s h3{grid-area:t}.row-s p{grid-area:p}.row-s .ph{grid-area:i}
  .custom{grid-template-columns:minmax(0,1fr)}
  .how{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .how-media{display:none}
  .steps li{min-height:0;opacity:1;padding-block:28px}
  .steps .step-ph{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;margin-top:8px;background:var(--mist)}
  .steps .step-ph img,.steps .step-ph video{width:100%;height:100%;object-fit:cover}
  .hero-logos{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px 0}
  .hero-logos .label{text-align:center}
}
@media (max-width:640px){
  body{font-size:16px}
  .top .bar{padding-left:18px}
  .lang{width:80px}
  .lang::before{width:36px}
  .lang[data-lang="en"]::before{transform:translateX(36px)}
  .hero .btns,.d-hero .btns{display:grid;width:100%}
  .hero .btns{max-width:340px}
    .row2,.f-top{grid-template-columns:minmax(0,1fr)}
  .row-s{grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "t" "p" "i";gap:12px}
  .row-s .ph{width:100%;aspect-ratio:4/3}
  .hero-media::after{background:linear-gradient(180deg,rgba(8,9,12,.6) 0%,rgba(8,9,12,.55) 50%,rgba(8,9,12,.8) 80%,rgba(8,9,12,.96) 100%)}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .uses-list li{grid-template-columns:minmax(0,1fr);gap:6px}
  .set{font-size:11px}
  .pill span{min-width:64px;padding:11px 14px}
  .work-head .hint{display:none}
}

/* ---------- reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .enter,.hero h1 .wd,.js .hero h1:not(.split){animation:fade-in 300ms ease both;animation-delay:0ms}
  .hero-media{animation:fade-in 300ms ease both}
  .hws path{animation:none;stroke-dashoffset:0;opacity:1}
  .btn:active,.pill span:active,.menu-btn:active,.loop-toggle:active{transform:none}
  .grow{scale:none!important}
  .drawer a,.drawer.open a{transform:none}
  .rv [data-r]:not(.in){transform:none!important;clip-path:none!important}
  .rv [data-r]{clip-path:none!important;transition:opacity 300ms ease}
  .rv [data-r="line"]:not(.in),.rv [data-r="img"]:not(.in){opacity:0}
  .rv [data-r] .hw{clip-path:none!important;transition:none}
  .how-media>*{filter:none;transform:none}
  .marquee{-webkit-mask:none;mask:none}
  .track{width:auto;animation:none}
  .set{flex-wrap:wrap;justify-content:center;row-gap:24px;padding:0 16px}
  .set[aria-hidden="true"]{display:none}
  .strip{overflow-x:auto;scrollbar-width:none}
  .top .bar,.row-s h3,.case-row .name,.uses-list li{transition-property:background-color,border-color,color}
}