/* =====================================================================
   HALDEN · site.css · every page
   One ink (#0E1A2B) on white and haze, one blue. Inter Tight headlines
   with a Source Serif italic last word, Plex Mono labels. Motion lives
   in motion.css / motion.js; page behaviour in site.js.
   ===================================================================== */
:root{
  --ink:#0E1A2B;--ink-rgb:14,26,43;--navy:#173A5B;--blue:#3F62B4;--blue-soft:#A9C1EE;
  --paper:#FFFFFF;--haze:#F4F6F9;
  --t-100:rgba(14,26,43,1);--t-64:rgba(14,26,43,.66);--t-50:rgba(14,26,43,.54);--t-hair:rgba(14,26,43,.10);--t-rule:rgba(14,26,43,.18);
  --serif:"Source Serif 4",Georgia,serif;--sans:"Inter Tight",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--maxw:1320px;
  --grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .17 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{font-family:var(--sans);color:var(--t-64);background:var(--paper);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;background-image:var(--grain);opacity:.09}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
::selection{background:var(--ink);color:#fff}
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4.4vw,60px)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-50)}
.num{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--t-50)}
h1,h2,h3{font-weight:400;color:var(--t-100);letter-spacing:-.035em;line-height:1.02}
h1 em,h2 em,h3 em{font-family:var(--serif);font-style:italic;letter-spacing:-.015em;color:var(--blue)}
.lead{font-size:clamp(18px,1.45vw,21px);line-height:1.5}

.logo{display:inline-flex;align-items:center;gap:11px;color:var(--ink)}
.logo svg{width:26px;height:26px}
.logo .peak{position:relative;display:block;width:36px;height:32px;margin:-3px 0;color:var(--navy)}  /* the Peak, 96 × 86.2, on whole pixels */
.logo .peak.live svg{visibility:hidden}
.logo .peak svg,.logo .peak canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.logo .wm{font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.26em;padding-left:.26em}

header[data-nav]{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.74);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-bottom:1px solid var(--t-hair)}
.nav{display:flex;align-items:center;gap:30px;height:66px}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:14.5px;color:var(--t-50)}
.nav-links a{position:relative;transition:color .18s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{transform:none}

/* buttons: one opaque object and one quiet outline */
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;white-space:nowrap;border-radius:4px;font:400 15px/1 var(--sans);border:1px solid transparent;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{color:#fff;background:linear-gradient(160deg,#1C3555,#0E1A2B);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(14,26,43,.1),0 8px 22px -10px rgba(14,26,43,.5)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(14,26,43,.12),0 14px 30px -12px rgba(14,26,43,.55)}
.btn-primary:active{transform:none;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.btn-line{color:var(--ink);border-color:var(--t-rule);background:rgba(255,255,255,.6)}
.btn-line:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-light{color:var(--ink);background:#fff;box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
.btn-light:hover{transform:translateY(-1px)}

/* ---------- hero: the H outline draws, then fills with live crosshairs ---------- */
.hero{position:relative;overflow:hidden;background:var(--paper);min-height:calc(100svh - 66px);display:flex;align-items:center}
.hero>.m-field{inset:-8% 0;width:100%;height:116%;-webkit-mask-image:radial-gradient(70% 70% at 72% 48%,#000 10%,transparent 72%);mask-image:radial-gradient(70% 70% at 72% 48%,#000 10%,transparent 72%)}
.hero .wrap{width:100%;padding-top:clamp(56px,9vh,100px);padding-bottom:clamp(56px,9vh,100px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(46px,6vw,88px);margin:22px 0 28px;max-width:11.5ch}
.hero .lead{max-width:30em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
.hero-mark{position:relative;aspect-ratio:1;width:100%;max-width:480px;justify-self:end}
.hero-mark .m-field{inset:0;width:100%;height:100%}
.hero-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-mark .guide{stroke:var(--blue);stroke-width:.16;fill:none;opacity:.5}
.hero-mark .guide-c{stroke:var(--blue);stroke-width:.16;fill:none;opacity:.5;stroke-dasharray:1 1.2}
.hero-mark .outline{fill:rgba(14,26,43,.035);stroke:var(--ink);stroke-width:.32}
.hero-mark .lbl{font:400 2px var(--mono);fill:var(--blue)}
/* the H waits until the headline, text and buttons on the left have arrived;
   its clock starts with theirs (motion.js marks the hero .entered when the words begin) */
.motion [data-hero]:not(.entered) .hero-mark *{animation-play-state:paused}
.motion .hero-mark .guide,.motion .hero-mark .guide-c{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.1s var(--ease) 1.2s forwards}
.motion .hero-mark .outline{stroke-dasharray:400;stroke-dashoffset:400;fill-opacity:0;animation:draw 1.5s var(--ease) 1.4s forwards,ink .8s var(--ease) 2.4s forwards}
.motion .hero-mark .lbl{opacity:0;animation:ink .7s var(--ease) 1.8s forwards}
.motion .hero-mark .m-field{opacity:0;animation:ink 1.2s var(--ease) 1.1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ink{to{opacity:1;fill-opacity:1}}

/* ---------- sections ---------- */
main>section{position:relative;background:var(--paper)}
.block{padding:clamp(96px,14vh,150px) 0}
.sh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(30px,5vh,52px)}

/* the studio: why, then what, in one place */
.studio{overflow:hidden}
.studio>.m-field{inset:-10% 0;width:100%;height:120%;-webkit-mask-image:linear-gradient(to left,#000 0%,transparent 55%);mask-image:linear-gradient(to left,#000 0%,transparent 55%)}
.why{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,96px);align-items:end}
.why h2{font-size:clamp(36px,4.2vw,62px);max-width:13ch}
.why p+p{margin-top:16px;color:var(--t-100)}
.sub{display:flex;justify-content:space-between;align-items:baseline;margin:clamp(80px,12vh,130px) 0 22px}
.rule{height:1px;background:var(--t-rule)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);margin-top:34px}
.pillar .idn{display:flex;align-items:baseline;gap:12px}
.pillar h3{font-size:clamp(34px,3.4vw,52px)}
.pillar p{margin-top:16px;max-width:24em;font-size:16px}
.pillar ul{list-style:none;margin-top:22px}
.pillar li{position:relative;padding:9px 0 9px 22px;border-top:1px solid var(--t-hair);font-size:15px}
.pillar li::before{content:"+";position:absolute;left:2px;font-family:var(--mono);font-size:13px;color:var(--blue)}
.foot-link{margin-top:42px}

/* work: cards holding windows */
main>section.work{background:var(--haze)}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.case{display:block;padding:12px 12px 22px;border:1px solid var(--t-hair);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(14,26,43,.04),0 30px 60px -42px rgba(14,26,43,.5);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.case:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(14,26,43,.05),0 42px 70px -40px rgba(14,26,43,.55)}
.case.feature{grid-column:1/-1}
.win{border-radius:10px;overflow:hidden;border:1px solid var(--t-hair)}
.chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#F6F7F9;border-bottom:1px solid var(--t-hair)}
.chrome i{width:8px;height:8px;border-radius:50%;background:#D5DAE2}
.chrome span{margin:0 auto;font:400 11px/1 var(--mono);color:var(--t-50);background:#fff;border:1px solid var(--t-hair);border-radius:5px;padding:5px 34px}
.view{aspect-ratio:16/10;background:var(--ink);--m-cover:#E9EDF3}
.case.feature .view{aspect-ratio:2.3/1}
.view img,.view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.2s var(--ease)}
.case.feature .view video{object-position:center 66%}
.case:hover .view img,.case:hover .view video{transform:scale(1.03)}
.cap{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:baseline;padding:20px 10px 0}
.cap h3{font-size:26px;letter-spacing:-.025em}
.cap .go{width:34px;height:34px;border-radius:50%;border:1px solid var(--t-hair);display:grid;place-items:center;color:var(--ink);transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.case:hover .cap .go{background:var(--ink);color:#fff;transform:translateX(3px)}
.cap p{grid-column:2;font-size:15.5px}

/* process: one compact strip */
.process{position:relative;overflow:hidden;padding:clamp(80px,12vh,120px) 0}
.process>.m-field{left:0;top:-30px;width:100%;height:calc(100% + 60px)}  /* the survey hillside, rising under the steps */
.process h2{font-size:clamp(30px,3.2vw,44px);max-width:20ch}
.steps-wrap{position:relative;margin-top:52px}
.steps-line{position:absolute;left:0;right:0;top:7px;height:1px;background:var(--t-rule)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.step{position:relative;padding-top:36px}
.step::before{content:"";position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid var(--blue);box-shadow:0 0 0 5px var(--paper)}
.step::after{content:"";position:absolute;left:4px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .4s var(--ease) var(--dd,0ms)}
.motion .steps.on .step::after,html:not(.motion) .step::after{transform:none}
.step h3{font-size:24px;margin:8px 0;letter-spacing:-.025em}
.step p{font-size:15.5px}

/* close: the H in crosshairs, the collaboration note, and the way in */
main>section.close{background:var(--ink);color:#fff;overflow:hidden}
.close>.m-field{inset:0;width:100%;height:100%}
.close .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,96px);align-items:end}
.close .eyebrow{color:rgba(255,255,255,.5)}
.close h2{color:#fff;font-size:clamp(44px,6vw,92px);max-width:9ch;margin-top:20px}
.close h2 em{color:var(--blue-soft)}
.close p{color:rgba(255,255,255,.7);max-width:30em}
.close p+p{margin-top:14px}
.close .actions{margin-top:34px}
.close .rows{margin-top:34px;border-top:1px solid rgba(255,255,255,.14)}
.close .rows div{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px}
.close .rows dt{color:#fff}.close .rows dd{color:rgba(255,255,255,.66)}
.close .rows a{border-bottom:1px solid rgba(255,255,255,.3)}

/* footer: short, then the word at full width */
footer{position:relative;z-index:1;background:var(--paper);padding:clamp(40px,7vh,60px) 0 clamp(24px,4vh,40px);overflow:hidden}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap}
.foot-top .logo svg{width:26px;height:26px}
.foot-top .city{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--t-50)}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:var(--t-50)}
.foot-links a:hover{color:var(--ink)}
.word{margin-top:clamp(34px,7vh,72px);font-family:var(--serif);font-weight:500;color:var(--ink);font-size:clamp(60px,15.8vw,228px);line-height:.82;letter-spacing:.12em;text-align:center;white-space:nowrap;padding-left:.12em}
.legal{display:flex;justify-content:space-between;margin-top:clamp(22px,4vh,36px);font-size:12.5px;color:var(--t-50)}
.legal a{margin-left:18px;color:inherit;transition:color .3s var(--ease)}.legal a:hover{color:var(--ink)}

/* privacy and terms: one readable column */
.updated{margin-top:26px;color:var(--t-50)}
.prose-wrap{padding-top:clamp(24px,4vh,48px)}
.prose{max-width:40em}
.prose h2{font-size:clamp(22px,1.9vw,27px);letter-spacing:-.02em;margin:clamp(40px,6vh,56px) 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:17px;line-height:1.65;color:var(--t-64)}
.prose p+p{margin-top:14px}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* the H as a mask, for shapes filled inside it */
:root{--hmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M13 14H43V16.6Q36.2 16.7 34.6 21.5V78.5Q36.2 83.3 43 83.4V86H13V83.4Q19.8 83.3 21.4 78.5V21.5Q19.8 16.7 13 16.6ZM57 14H87V16.6Q80.2 16.7 78.6 21.5V78.5Q80.2 83.3 87 83.4V86H57V83.4Q63.8 83.3 65.4 78.5V21.5Q63.8 16.7 57 16.6ZM34.6 45.5H65.4V70.5Q61.5 53.6 34.6 51.4Z'/%3E%3C/svg%3E")}
/* ---------- H: a navy H with the close's light crosshairs moving inside it ---------- */
.hfill{position:absolute;inset:0;-webkit-mask:var(--hmask) center/100% 100% no-repeat;mask:var(--hmask) center/100% 100% no-repeat}
.hfill .navy{position:absolute;inset:0;background:linear-gradient(165deg,#21436B,#0E1A2B 72%);transform-origin:50% 100%}
.hero-mark .outline{fill:none}
.motion .hfill .navy{transform:scaleY(0);animation:grow 1.2s var(--ease) 2.1s forwards}
.motion .hfill .m-field{opacity:0;animation:ink 1.6s var(--ease) 2.8s forwards}
@keyframes grow{to{transform:none}}

/* work: windows straight on the haze */
.cases.bare .case{padding:0;border:0;background:none;box-shadow:none;border-radius:0}
.cases.bare .case:hover{transform:none;box-shadow:none}
.cases.bare .win{box-shadow:0 1px 2px rgba(14,26,43,.06),0 30px 62px -36px rgba(14,26,43,.5);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.cases.bare .case:hover .win{transform:translateY(-4px);box-shadow:0 1px 2px rgba(14,26,43,.06),0 42px 72px -36px rgba(14,26,43,.6)}
.cases.bare .cap{padding:20px 2px 0}


/* ---------- inner pages ---------- */
.nav-links a[aria-current]{color:var(--ink)}
.nav-links a[aria-current]::after{transform:none}
.phero{position:relative;overflow:hidden;background:var(--paper);padding:clamp(76px,12vh,130px) 0 clamp(52px,8vh,88px)}
.phero>.m-field{inset:-8% 0;width:100%;height:116%;-webkit-mask-image:radial-gradient(60% 80% at 84% 40%,#000 8%,transparent 70%);mask-image:radial-gradient(60% 80% at 84% 40%,#000 8%,transparent 70%)}
.crumb{display:flex;gap:10px;align-items:center}
.crumb a{transition:color .18s var(--ease)}.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;opacity:.5}
.phero h1{font-size:clamp(44px,5.6vw,84px);max-width:13ch;margin:22px 0 26px}
.phero .lead{max-width:33em}
.phero .hero-cta{margin-top:34px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin-top:clamp(40px,7vh,64px);border-top:1px solid var(--t-rule)}
.facts div{padding-top:16px}
.facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-50)}
.facts dd{margin-top:8px;color:var(--t-100);font-size:16px}

/* services: one block per pillar, the services as hairline rows */
.svc{padding:clamp(72px,11vh,120px) 0}
.svc+.svc{padding-top:0}
.svc-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,96px);align-items:end}
.svc-head .idn{display:flex;align-items:baseline;gap:14px}
.svc-head h2{font-size:clamp(40px,4.6vw,68px)}
.svc-head p{max-width:30em}
.srows{margin-top:clamp(36px,6vh,56px)}
.srow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,96px);padding:28px 0;border-top:1px solid var(--t-hair)}
.srow:last-child{border-bottom:1px solid var(--t-hair)}
.srow h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.025em;line-height:1.1}
.srow .short{color:var(--t-100)}
.srow .long{margin-top:10px;font-size:15.5px;max-width:34em}
main>section.band{background:var(--haze);padding:clamp(80px,12vh,120px) 0}
.band p.big{font-size:clamp(28px,3vw,44px);line-height:1.15;letter-spacing:-.03em;color:var(--t-100);max-width:22ch}
.band p.big em{font-family:var(--serif);font-style:italic;letter-spacing:-.015em;color:var(--blue)}
.band .split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,96px);align-items:end}

/* work index */
main>section.worklist{background:var(--haze);padding:clamp(72px,11vh,120px) 0}
.worklist .cases{row-gap:clamp(44px,7vh,72px)}
.cap .meta{grid-column:2;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-50);margin-top:4px}
.more{margin-top:clamp(48px,8vh,80px);font-family:var(--serif);font-style:italic;color:var(--t-50)}
/* a phone screenshot in a case study: an iPhone, to the 16 Pro's proportions (sizes in cqw, % of the phone's width).
   Screen 393 × 852 pt inside a thin black border and a titanium edge; the status bar takes the page's own colour. */
.phone{position:relative;width:min(300px,72%);margin:0 auto;container-type:inline-size}
.phone .body{position:relative;padding:4.1cqw;border-radius:17cqw;background:#050506;box-shadow:inset 0 0 0 .45cqw #6B6D72,inset 0 0 0 .75cqw #2A2B2F,inset 0 0 0 1.05cqw #101113,0 1px 2px rgba(14,26,43,.1),0 36px 60px -34px rgba(14,26,43,.6)}
.phone .screen{position:relative;aspect-ratio:393/852;border-radius:12.9cqw;overflow:hidden;background:var(--sb,#fff);color:var(--sbt,#000)}
.phone .screen img{position:absolute;left:0;top:12.6cqw;width:100%;height:calc(100% - 12.6cqw);object-fit:cover;object-position:top center;display:block}
.phone .sbar{position:absolute;inset:0 0 auto;height:12.6cqw;display:flex;align-items:center;justify-content:space-between;padding:0 8.4cqw 0 11.2cqw;font:600 4.15cqw/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;letter-spacing:-.01em}
.phone .sbar .ics{display:flex;align-items:center;gap:1.4cqw}
.phone .sbar svg{display:block;fill:currentColor}
.phone .sig{width:4.3cqw}.phone .wifi{width:3.9cqw}.phone .bat{width:6.3cqw}
.phone .island{position:absolute;top:2.6cqw;left:50%;width:29.4cqw;height:8.6cqw;margin-left:-14.7cqw;border-radius:99px;background:#000}
.phone .screen::after{content:"";position:absolute;inset:auto 0 0;height:9cqw;background:linear-gradient(to bottom,transparent,var(--sb,#fff) 70%);pointer-events:none} /* Safari's band behind the home indicator */
.phone .home{z-index:1;position:absolute;bottom:1.9cqw;left:50%;width:31.4cqw;height:1.2cqw;margin-left:-15.7cqw;border-radius:99px;background:var(--sbt,#000);opacity:.55}
.phone .hw{position:absolute;width:.9cqw;border-radius:.5cqw;background:linear-gradient(90deg,#3B3C40,#7A7C81 45%,#4A4B50)}
.phone .act,.phone .vup,.phone .vdn{left:-.7cqw}.phone .pwr{right:-.7cqw}
.phone .act{top:18.5%;height:5.2%}.phone .vup{top:27%;height:9%}.phone .vdn{top:38%;height:9%}.phone .pwr{top:29.5%;height:14%}
/* work: the studio's own products, after the client work, three to a row */
.worklist .sh+.cases{margin-top:28px}
.more-work{margin-top:clamp(44px,7vh,72px)}
.cases.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cases.three .cap h3{font-size:21px}.cases.three .cap p{font-size:14.5px}
@media(max-width:1100px){.cases.three{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* case studies */
.shot{position:relative;z-index:1;margin-top:clamp(8px,2vh,20px)}
.shot .win{box-shadow:0 1px 2px rgba(14,26,43,.06),0 40px 80px -44px rgba(14,26,43,.55)}
.shot .view{aspect-ratio:16/10}  /* the screenshots are 16:10, so a window shows the whole page width */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,96px);align-items:start}
.story h2{font-size:clamp(34px,3.8vw,56px);max-width:12ch}
.story .pull{margin-top:22px;padding-left:18px;border-left:1px solid var(--blue);font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.45;color:var(--t-100)}
.feats{display:grid;gap:clamp(72px,12vh,128px);margin-top:clamp(56px,9vh,96px)}
.feat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px);align-items:center}
.feat.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.feat.flip .feat-text{order:2}
.feat h3{font-size:clamp(28px,2.8vw,40px);margin:14px 0 16px}
.feat p{max-width:28em}
.feat .win{box-shadow:0 1px 2px rgba(14,26,43,.06),0 30px 62px -36px rgba(14,26,43,.5)}
.feat .view{aspect-ratio:16/10}
main>section.compare{background:var(--haze)}
.compare h2{font-size:clamp(34px,3.8vw,56px);max-width:16ch}
.compare .sub-lead{margin-top:18px;max-width:34em}
.bas{display:grid;gap:clamp(48px,8vh,80px);margin-top:clamp(44px,7vh,72px)}
.ba figcaption{display:flex;justify-content:space-between;margin-top:16px}
.tsw{margin-top:clamp(48px,8vh,80px)}
.tsw-bar{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:22px}
.tsw-tabs{display:flex;gap:6px;padding:5px;border:1px solid var(--t-hair);border-radius:999px;background:#fff}
.tsw-tabs button{display:flex;align-items:center;gap:9px;padding:9px 16px 9px 11px;border:0;border-radius:999px;background:none;font:500 14px/1 var(--sans);color:var(--t-50);cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease)}
.tsw-tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.tsw-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tsw-tabs .sw{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(14,26,43,.18)}
.tsw-tabs button[aria-selected=true] .sw{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.tsw-notes{display:grid;flex:1 1 320px;max-width:34em}
.tsw-notes p{grid-area:1/1;margin:0;font-size:15px;color:var(--t-64);opacity:0;transform:translate3d(0,6px,0);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.tsw-notes p.cur{opacity:1;transform:none;transition-delay:.25s}
.tsw .win{box-shadow:0 1px 2px rgba(14,26,43,.06),0 40px 80px -44px rgba(14,26,43,.55)}
.tsw-view{position:relative;aspect-ratio:16/10}
.tsw-view img{clip-path:inset(0 100% 0 0);z-index:1}
.tsw-view img.cur{clip-path:inset(0);z-index:2}
.tsw-view img.tsw-in{z-index:3}
.tphones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);align-items:start;margin-top:clamp(64px,10vh,112px)}
.tphones figure{margin:0;text-align:center}
.tphones figure:nth-child(1){padding-top:64px}.tphones figure:nth-child(2){padding-top:32px} /* three steps up, the way the ground rises */
.tphones .phone{width:min(280px,100%)}
.tphones figcaption{margin-top:20px}
.ba .win{box-shadow:0 1px 2px rgba(14,26,43,.06),0 30px 62px -36px rgba(14,26,43,.5)}
.ba-view{position:relative;aspect-ratio:16/9;overflow:hidden;background:#fff;--p:50%;touch-action:pan-y}
.ba-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;user-select:none;-webkit-user-drag:none}
.ba-view .before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(14,26,43,.18);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--p);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 20px -6px rgba(14,26,43,.5);pointer-events:none;transition:transform .18s var(--ease)}
.ba-view:hover .ba-knob{transform:scale(1.06)}
.ba-tag{position:absolute;top:14px;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:4px;background:rgba(14,26,43,.78);color:#fff;pointer-events:none}
.ba-tag.l{left:14px}.ba-tag.r{right:14px;background:rgba(255,255,255,.9);color:var(--ink)}
.ba-view input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-view input:focus-visible~.ba-knob{box-shadow:0 0 0 3px var(--blue-soft),0 6px 20px -6px rgba(14,26,43,.5)}
.changed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);margin-top:34px}
.changed h3{font-size:clamp(24px,2.2vw,30px);margin:10px 0 12px;letter-spacing:-.025em}
.changed p{font-size:16px}
.next{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;padding:clamp(40px,7vh,64px) 0;border-top:1px solid var(--t-rule);border-bottom:1px solid var(--t-rule)}
.next h2{font-size:clamp(40px,5vw,76px);margin-top:14px;transition:color .4s var(--ease)}
.next .go{width:56px;height:56px;border-radius:50%;border:1px solid var(--t-rule);display:grid;place-items:center;color:var(--ink);transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.next:hover .go{background:var(--ink);color:#fff;transform:translateX(4px)}
.next:hover h2{color:var(--navy)}
.next-wrap{padding-bottom:clamp(80px,12vh,120px)}

/* apply: the form sits beside the headline, in view on arrival */
.apply-hero{padding:clamp(40px,6vh,72px) 0 clamp(80px,12vh,130px)}
.apply-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5.5vw,88px);align-items:start}
.apply-hero h1{font-size:clamp(40px,4.6vw,68px);max-width:10ch;margin:20px 0 22px}
.apply-hero .lead{max-width:22em;font-size:clamp(17px,1.3vw,19px)}
.how{list-style:none;border-top:1px solid var(--t-rule);margin-top:clamp(52px,9vh,88px)}
.how li{display:grid;grid-template-columns:40px 1fr;gap:6px 14px;padding:20px 0;border-bottom:1px solid var(--t-hair)}
.how h3{font-size:21px;letter-spacing:-.02em}
.how p{grid-column:2;font-size:15.5px}
.direct{margin-top:34px}
.direct a{display:inline-block;margin-top:8px;font-size:clamp(20px,1.8vw,24px);color:var(--ink);border-bottom:1px solid var(--t-rule);transition:border-color .18s var(--ease)}
.direct a:hover{border-color:var(--ink)}
.form{padding:clamp(26px,3.2vw,44px);border:1px solid var(--t-hair);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(14,26,43,.04),0 40px 80px -50px rgba(14,26,43,.45)}
.form h2{font-size:clamp(28px,2.6vw,36px)}
.form .req{margin-top:8px;font-size:14px}
.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 18px;margin-top:28px}
.field{display:grid;gap:8px;align-content:start}
.field.full{grid-column:1/-1}
.field label,.field legend{font-size:14px;color:var(--t-100)}
.field input,.field select,.field textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--t-rule);border-radius:6px;background:#fff;font:400 16px/1.4 var(--sans);color:var(--t-100);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.field textarea{height:auto;min-height:140px;padding:12px 14px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230E1A2B' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(63,98,180,.14)}
fieldset.field{border:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;height:38px;padding:0 15px;border:1px solid var(--t-rule);border-radius:999px;font-size:14.5px;color:var(--t-64);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.chip span:hover{border-color:var(--ink);color:var(--ink)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:focus-visible+span{box-shadow:0 0 0 3px var(--blue-soft)}
.form .send{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.form .note{font-size:13.5px;color:var(--t-50);max-width:30em}
.form .done{display:none;margin-top:22px;padding:16px 18px;border-radius:8px;background:var(--haze);color:var(--t-100);font-size:15px}
.form.sent .done{display:block}

@media (max-width:960px){
  .hero{min-height:0}
  .hero-in,.why,.close .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-mark{justify-self:start;max-width:320px}
  .pillars{grid-template-columns:1fr;gap:40px}
  .cases,.cases.three{grid-template-columns:1fr}.case.feature .view{aspect-ratio:16/10}
  .steps{grid-template-columns:1fr 1fr;gap:36px 24px}.steps-line{display:none}
  .svc-head,.srow,.story,.feat,.feat.flip,.band .split,.apply-grid{grid-template-columns:minmax(0,1fr)}
  .feat.flip .feat-text{order:0}
  .tphones{grid-template-columns:repeat(3,72vw);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .tphones figure{scroll-snap-align:center}.tphones figure:nth-child(n){padding-top:0}
  .changed{grid-template-columns:1fr;gap:30px}
}
@media (max-width:640px){
  .nav-links{display:none}.nav .btn-sm{margin-left:auto}
  .steps{grid-template-columns:1fr}
  .chrome span{padding:5px 14px}
  .foot-top{flex-direction:column;align-items:flex-start}
  .facts{grid-template-columns:1fr}.facts div{padding:14px 0;border-bottom:1px solid var(--t-hair)}
  .fields{grid-template-columns:minmax(0,1fr)}
  .next .go{width:44px;height:44px}
}