:root{color-scheme:dark}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}

/* Layout: scroll-driven hero stage (drone flies into lens -> footage), then a pinned horizontal work rail. Wide display type echoes the wordmark. */
@font-face{font-family:"Skylens Logo";src:url(/assets/fonts/skylens-logo.woff) format("woff");font-display:block}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo.woff) format("woff");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --bg:#060908; --surface:#111716; --fg:#eef3f2; --muted:#93a09d; --line:rgba(238,243,242,.14);
  --accent:#5cc0c9; --on-media:#ffffff; --scrim:rgba(4,10,12,.55);
  --header:rgba(6,9,8,.72); color-scheme:dark;
  --f-logo:"Skylens Logo","Archivo",system-ui,sans-serif;
  --f-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-media:28px; --gutter:clamp(16px,4vw,48px);
}
:root[data-theme="light"]{
  --bg:#fbfcfb; --surface:#eef2f1; --fg:#0c1211; --muted:#5a6563; --line:rgba(12,18,17,.12);
  --accent:#0e6a72; --header:rgba(251,252,251,.78); color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 14px;display:flex;align-items:center;gap:24px;background:var(--header);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.logo{font-family:var(--f-logo);font-size:22px;letter-spacing:.02em;text-decoration:none;line-height:1}
.nav{display:flex;gap:22px;margin-left:auto;font-variation-settings:"wdth" 100;font-size:14px;font-weight:500}
.nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--fg)}
.tools{display:flex;gap:6px}
.tbtn{font:600 12px/1 var(--f-body);letter-spacing:.08em;background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:9px 12px;cursor:pointer;min-width:44px}
.tbtn:hover{border-color:var(--fg)}
@media (max-width:820px){.nav{display:none}.tools{margin-left:auto}}

/* Hero sequence */
.hero{position:relative;height:420vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#drone{position:absolute;inset:0;width:100%;height:100%;display:block}
.footage{position:absolute;inset:0;clip-path:circle(0px at 50% 50%);opacity:0;will-change:clip-path}
.footage video,.footage img{width:100%;height:100%;object-fit:cover;display:block}
.footage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 30%,transparent 50%,var(--scrim) 100%)}
.intro{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,9vh,96px);display:grid;gap:18px;max-width:1100px;will-change:opacity,transform}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.h1{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(40px,7.4vw,112px);line-height:.95;letter-spacing:-.025em;margin:0;text-wrap:balance}
.h1 em{font-style:normal;color:var(--accent)}
.hint{position:absolute;right:var(--gutter);bottom:clamp(40px,9vh,96px);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.hint i{display:block;width:1px;height:42px;background:var(--line);position:relative;overflow:hidden}
.hint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--fg);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{to{top:100%}}
.outro{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,9vh,96px);display:grid;gap:20px;max-width:1000px;color:var(--on-media);opacity:0;pointer-events:none;will-change:opacity,transform}
.outro.on{pointer-events:auto}
.claim{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(38px,6.6vw,104px);line-height:.95;letter-spacing:-.025em;margin:0;text-wrap:balance}
.lead{font-size:clamp(16px,1.6vw,19px);max-width:52ch;margin:0;opacity:.92}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.btn{font:600 15px/1 var(--f-body);text-decoration:none;padding:16px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer}
.btn.pri{background:var(--on-media);color:#0c1211}
.btn.ghost{border-color:rgba(255,255,255,.55);color:var(--on-media)}
.caption{position:absolute;right:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 86px);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-media);opacity:0}

/* Statement */
.statement{padding-block:clamp(96px,16vh,180px);padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,80px);max-width:1400px;margin:0 auto}
.statement h2{font-family:var(--f-display);font-variation-settings:"wdth" 112;font-weight:650;font-size:clamp(28px,3.4vw,48px);line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
.statement p{font-size:clamp(18px,1.9vw,24px);line-height:1.45;margin:0;color:var(--fg);max-width:40ch}
.statement p span{color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip{font-size:13px;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--muted)}
@media (max-width:820px){.statement{grid-template-columns:1fr}}

/* Selected work: pinned horizontal rail */
.work{position:relative}
.work-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:28px;padding-top:70px}
.work-head{display:flex;align-items:flex-end;gap:20px;padding-inline:var(--gutter)}
.work-head h2{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(34px,5vw,72px);line-height:.95;letter-spacing:-.025em;margin:0}
.work-head .count{font-size:13px;color:var(--muted);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.arrows{margin-left:auto;display:flex;gap:8px}
.arrows button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);font-size:18px;cursor:pointer}
.arrows button:hover{border-color:var(--fg)}
.track{display:flex;gap:clamp(14px,2vw,28px);padding-inline:var(--gutter);will-change:transform}
.card{position:relative;flex:0 0 auto;width:min(72vw,1100px);aspect-ratio:16/9.5;max-height:64vh;border-radius:var(--r-media);overflow:hidden;background:var(--surface);text-decoration:none;color:var(--on-media)}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.035)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,10,12,.62) 100%)}
.meta{position:absolute;left:clamp(18px,2.4vw,32px);right:clamp(18px,2.4vw,32px);bottom:clamp(18px,2.4vw,30px);z-index:1;display:flex;align-items:flex-end;gap:16px}
.meta h3{font-family:var(--f-display);font-variation-settings:"wdth" 115;font-weight:700;font-size:clamp(26px,3.2vw,48px);line-height:1;margin:0;letter-spacing:-.02em}
.meta p{margin:6px 0 0;font-size:14px;opacity:.88}
.card .clogo{display:block;height:clamp(30px,3.4vw,50px);width:auto;max-width:100%;object-fit:contain;transform:none!important;margin-bottom:4px}
.card .clogo-na{height:clamp(36px,4vw,60px)}
.card .clogo-wi{height:clamp(34px,3.8vw,56px)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.meta .go{margin-left:auto;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:10px 16px;white-space:nowrap}
.card.next{background:var(--fg);color:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,44px);width:min(44vw,620px)}
.card.next::after{display:none}
.card.next h3{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(30px,3.6vw,56px);line-height:.98;margin:0;letter-spacing:-.025em;text-wrap:balance}
.card.next span{font-size:15px;font-weight:600;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:3px}
.progress{margin-inline:var(--gutter);height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.progress b{display:block;height:100%;width:0;background:var(--fg)}
@media (max-width:760px){
  .work{height:auto!important}
  .work-pin{position:relative;height:auto;padding-block:80px 40px}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding-bottom:6px;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .card{width:84vw;aspect-ratio:4/5;max-height:none;scroll-snap-align:center}
  .card.next{width:70vw}
  .meta{flex-direction:column;align-items:flex-start}.meta .go{margin-left:0}
  .arrows,.progress{display:none}
}

/* Team */
.team{padding-block:clamp(96px,14vh,160px);padding-inline:var(--gutter);max-width:1400px;margin:0 auto;display:grid;gap:clamp(28px,4vw,56px)}
.team-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.team-head h2{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(34px,5vw,72px);line-height:.95;letter-spacing:-.025em;margin:0;text-wrap:balance}
.team-head p{margin:0;color:var(--muted);font-size:clamp(16px,1.5vw,19px);max-width:44ch}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.person{margin:0;text-decoration:none;color:var(--fg);display:grid;gap:14px}
.ph{border-radius:var(--r-media);overflow:hidden;aspect-ratio:4/5;background:var(--surface)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.person:hover .ph img{transform:scale(1.03)}
.person figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:15px}
.person strong{font-family:var(--f-display);font-variation-settings:"wdth" 115;font-size:22px;font-weight:700}
.person span{color:var(--muted)}
.person em{font-style:normal;margin-left:auto;font-weight:600;font-size:13px;border-bottom:1px solid currentColor}
@media (max-width:760px){.team-head{grid-template-columns:1fr}.people{grid-template-columns:1fr}}

/* Shared section head */
.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.sec-head h2{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(34px,5vw,72px);line-height:.95;letter-spacing:-.025em;margin:0;text-wrap:balance}
.sec-head p{margin:0;color:var(--muted);font-size:clamp(16px,1.5vw,19px);max-width:44ch}
.muted{color:var(--muted)}
.tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Services */
.services,.process,.contact{padding-block:clamp(96px,14vh,160px);padding-inline:var(--gutter);max-width:1400px;margin:0 auto;display:grid;gap:clamp(28px,4vw,56px)}
.svc-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(12px,1.6vw,20px)}
.flow{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;border-top:1px solid var(--line);padding-top:22px}
.flow b{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.01em}
.flow b i{font-style:normal;color:var(--accent)}
.flow span{color:var(--muted);font-size:15px}
.svc{background:var(--surface);border-radius:var(--r-media);padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;min-width:0}
.svc h3{font-family:var(--f-display);font-variation-settings:"wdth" 115;font-weight:700;font-size:clamp(24px,2.4vw,34px);line-height:1;margin:0;letter-spacing:-.02em}
.svc p{margin:0;color:var(--muted);max-width:46ch}
.svc.main{justify-content:space-between;gap:28px}
.svc.main h3{font-size:clamp(36px,4.4vw,64px)}
.svc-top{display:grid;gap:12px}
.deliver{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-radius:18px;overflow:hidden}
.deliver li{background:var(--surface);padding:18px 20px;display:grid;gap:4px}
.deliver b{font-weight:650;font-size:17px}
.deliver span{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.svc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;font-size:14px}
.btn.line{border-color:var(--fg);color:var(--fg)}
.btn.line:hover{background:var(--fg);color:var(--bg)}
.price{margin-top:auto;font-weight:650;font-size:18px;font-variant-numeric:tabular-nums}
.svc .muted:last-child{margin-top:auto;font-size:14px}
.svc.opt{background:transparent;border:1px solid var(--line);grid-column:3}
.opts{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.opts li::before{content:"+ ";color:var(--accent)}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr}.svc.main,.svc.opt{grid-column:auto;grid-row:auto}.deliver{grid-template-columns:1fr}}

/* Process + grading slider */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.steps li{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:8px;align-content:start}
.steps li.hl{border-top-color:var(--accent)}
.steps .n{font-size:12px;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}
.steps li.hl .n{color:var(--accent)}
.steps h3{font-family:var(--f-display);font-variation-settings:"wdth" 115;font-weight:700;font-size:clamp(22px,2vw,28px);margin:0}
.steps p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:820px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ba{position:relative;margin:0;border-radius:var(--r-media);overflow:hidden;aspect-ratio:16/9;max-width:100%;background:var(--surface);user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-before{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--on-media);pointer-events:none}
.ba-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--on-media);color:#0c1211;display:grid;place-items:center;font-size:18px;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.ba-lab{position:absolute;top:18px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-media);background:rgba(0,0,0,.35);padding:7px 10px;border-radius:999px;pointer-events:none}
.ba-lab.l{left:18px}.ba-lab.r{right:18px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba input:focus-visible + *,.ba:focus-within .ba-line span{outline:2px solid var(--accent);outline-offset:3px}
.ba-cap{margin:-28px 0 0;font-size:13px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form label{display:grid;gap:8px;font-size:13px;color:var(--muted)}
.form input:not([type=radio]),.form textarea{font:16px/1.4 var(--f-body);color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;outline:none;width:100%}
.form input:not([type=radio]):focus,.form textarea:focus{border-bottom-color:var(--fg)}
.form textarea{resize:vertical}
fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
legend{font-size:13px;color:var(--muted);margin-bottom:8px;width:100%}
.pill{display:inline-flex!important;cursor:pointer}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:14px;color:var(--fg)}
.pill input:checked + span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pill input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.btn.big{justify-self:start;background:var(--fg);color:var(--bg)}
.form-msg{margin:0;font-size:14px;color:var(--accent);min-height:1.4em}
.direct{display:flex;flex-direction:column;justify-content:space-between;gap:24px;border-left:1px solid var(--line);padding-left:clamp(20px,3vw,48px)}
.big-link{font-family:var(--f-display);font-variation-settings:"wdth" 110;font-weight:600;font-size:clamp(18px,1.8vw,24px);margin:12px 0 0;user-select:all;overflow-wrap:anywhere}
.big-link small{font-family:var(--f-body);font-size:12px;font-weight:500;color:var(--muted);margin-left:6px;user-select:none}
@media (max-width:820px){.contact-grid,.row2,.sec-head{grid-template-columns:1fr}.direct{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}}

/* Footer */
.foot{padding:40px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;font-size:13px}
.foot .logo{font-size:18px}
.foot nav{display:flex;gap:20px}
.foot nav a{color:var(--muted);text-decoration:none}
.foot .muted{margin-left:auto}

/* Views, CTA band, request flow */
.view{min-height:100vh}
.back{display:inline-block;margin:calc(env(safe-area-inset-top,0px) + 96px) var(--gutter) 0;font-size:14px;color:var(--muted);text-decoration:none}
.back:hover{color:var(--fg)}
.tbtn.req{text-decoration:none;background:var(--fg);color:var(--bg);border-color:var(--fg);display:inline-flex;align-items:center;letter-spacing:.02em;font-size:13px}
@media (max-width:480px){.tbtn.req{display:none}}
.svc.teaser{text-decoration:none;color:var(--fg);background:transparent;border:1px solid var(--line);transition:border-color .3s}
.svc.teaser:hover{border-color:var(--fg)}
.svc.teaser h3{font-size:clamp(22px,2vw,28px)}
.svc.teaser .arrow{margin-top:auto;font-size:22px}
.ctaband{padding:clamp(96px,14vh,160px) var(--gutter);max-width:1400px;margin:0 auto;display:grid;gap:22px;justify-items:start;border-top:1px solid var(--line)}
.ctaband h2{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(38px,6vw,96px);line-height:.95;letter-spacing:-.025em;margin:0;text-wrap:balance}
.ctaband p{margin:0;color:var(--muted);font-size:clamp(16px,1.5vw,19px)}
.process-extra{padding:0 var(--gutter) clamp(96px,14vh,160px);max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.process-extra .svc{flex:1 1 320px;max-width:520px}
.request{padding:32px var(--gutter) clamp(80px,12vh,140px);max-width:980px;margin:0 auto;display:grid;gap:28px}
.rq-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.rq-head h2{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(34px,5vw,64px);line-height:.95;letter-spacing:-.025em;margin:0}
.rq-step{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.1em}
.rq-bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rq-bar b{display:block;height:100%;width:20%;background:var(--accent);transition:width .4s}
#rq{display:grid;gap:22px}
.q{border:0;margin:0;padding:0;display:grid;gap:18px}
.q legend{font-family:var(--f-display);font-variation-settings:"wdth" 110;font-weight:650;font-size:clamp(22px,2.4vw,32px);margin-bottom:18px;padding:0}
.q legend small{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--muted);margin-left:8px}
.opts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:block;border:1px solid var(--line);border-radius:18px;padding:20px 22px;font-size:16px;font-weight:550;transition:border-color .2s,background .2s}
.opt:hover span{border-color:var(--muted)}
.opt input:checked + span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.field{display:grid;gap:8px;font-size:13px;color:var(--muted)}
.field input,.field textarea{font:16px/1.4 var(--f-body);color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;outline:none;width:100%}
.field input:focus,.field textarea:focus{border-bottom-color:var(--fg)}
.rq-nav{display:flex;justify-content:space-between;gap:12px}
.rq-err{margin:0;min-height:1.4em;font-size:14px;color:var(--accent)}
.done h3{font-family:var(--f-display);font-variation-settings:"wdth" 115;font-size:clamp(26px,3vw,40px);margin:0}
.done p{margin:0}
.summary{margin:0;white-space:pre-wrap;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface);border-radius:18px;padding:20px 22px;overflow-x:auto}
.small{font-size:13px}
.btn.wa{justify-self:start}
@media (max-width:600px){.opts-grid{grid-template-columns:1fr}}

/* Case study */
.case{padding:24px var(--gutter) clamp(80px,12vh,140px);max-width:1400px;margin:0 auto;display:grid;gap:clamp(40px,6vw,88px)}
.case-head{display:grid;gap:22px;justify-items:start}
.case-logo{height:clamp(40px,5vw,72px);width:auto;max-width:100%}
.case-title{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(40px,6.4vw,104px);line-height:.95;letter-spacing:-.025em;margin:0;max-width:16ch;text-wrap:balance}
.case-film{position:relative;border-radius:var(--r-media);overflow:hidden;background:var(--surface);aspect-ratio:16/9;max-width:100%}
.sound{position:absolute;z-index:2;top:16px;right:16px;font:600 13px/1 var(--f-body);color:#0c1211;background:var(--on-media);border:0;border-radius:999px;padding:11px 16px;cursor:pointer}
.case-film video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.facts-grid{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts-grid div{background:var(--bg);padding:24px clamp(16px,2vw,28px);display:grid;gap:8px;align-content:start;min-width:0}
.facts-grid dd{text-wrap:balance}
.facts-grid dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts-grid dd{margin:0;font-size:16px;font-weight:550}
.case-text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,80px)}
.case-text h2{font-family:var(--f-display);font-variation-settings:"wdth" 115;font-weight:700;font-size:clamp(24px,2.6vw,36px);margin:0 0 14px}
.case-text p{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.55;max-width:46ch}
.stills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(160px,22vw,320px);gap:clamp(10px,1.2vw,16px)}
.stills img{width:100%;height:100%;object-fit:cover;border-radius:20px;display:block}
.stills .w2{grid-column:span 2}
.case-grade{display:grid;gap:clamp(20px,3vw,36px)}
.case-grade .sec-head h2{font-size:clamp(30px,4vw,56px)}
.quote{margin:0;padding-block:clamp(20px,4vw,48px);border-top:1px solid var(--line);display:grid;gap:16px}
.quote p{margin:0;font-family:var(--f-display);font-variation-settings:"wdth" 108;font-weight:500;font-size:clamp(22px,2.6vw,38px);line-height:1.2;max-width:34ch;color:var(--fg)}
.quote footer{font-size:14px;color:var(--muted)}
.case-next{display:flex;align-items:center;gap:24px;padding:clamp(28px,4vw,48px);border-radius:var(--r-media);background:var(--surface);text-decoration:none;color:var(--fg);transition:background .3s}
.case-next img{height:clamp(30px,3.6vw,52px);width:auto}
:root[data-theme="light"] .case-next img,:root[data-theme="light"] .case-logo{filter:invert(1)}
.case-next .arrow{margin-left:auto;font-size:28px}
.case-next:hover{background:var(--line)}
@media (max-width:820px){.facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.case-text{grid-template-columns:1fr}.stills{grid-template-columns:repeat(2,minmax(0,1fr))}.stills .w2{grid-column:span 2}}

/* Legal pages */
.legal{padding:24px var(--gutter) clamp(80px,12vh,140px);max-width:760px;margin:0 auto;display:grid;gap:14px}
.legal h1{font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:700;font-size:clamp(36px,5vw,64px);line-height:.95;letter-spacing:-.025em;margin:0 0 12px;overflow-wrap:anywhere}
.legal h2{font-family:var(--f-display);font-variation-settings:"wdth" 110;font-weight:650;font-size:20px;margin:26px 0 0}
.legal p{margin:0;color:var(--fg);max-width:65ch;line-height:1.65}
.legal .muted{color:var(--muted)}
.legal-en:empty{display:none}
.legal-en{color:var(--muted);font-size:14px}

/* Reels */
.reels{display:grid;gap:clamp(20px,3vw,36px)}
.reels .sec-head h2{font-size:clamp(30px,4vw,56px)}
.reel-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);max-width:980px}
.reel{position:relative;margin:0;aspect-ratio:9/16;max-width:100%;border-radius:24px;overflow:hidden;background:var(--surface)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel-sound{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:16px;cursor:pointer;backdrop-filter:blur(6px)}
@media (max-width:760px){.reel-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}.reel-row::-webkit-scrollbar{display:none}.reel{flex:0 0 62vw;scroll-snap-align:center}}

/* Travels */
.travels{padding:24px var(--gutter) 0;max-width:1400px;margin:0 auto;display:grid;gap:clamp(40px,6vw,80px)}
.tr-head{display:grid;gap:16px}
.tr-head h1{font-family:var(--f-display);font-variation-settings:"wdth" 120;font-weight:700;font-size:clamp(56px,11vw,180px);line-height:.85;letter-spacing:-.035em;margin:0}
.tr-head p{margin:0;color:var(--muted);font-size:clamp(16px,1.6vw,20px);max-width:44ch}
.tfilms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.tfilm{position:relative;border:0;padding:0;border-radius:var(--r-media);overflow:hidden;aspect-ratio:4/5;background:var(--surface);cursor:pointer;color:var(--on-media);text-align:left}
.tfilm video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tfilm:hover video{transform:scale(1.04)}
.tfilm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.tfilm-t{position:absolute;left:22px;bottom:18px;z-index:1;font-family:var(--f-display);font-variation-settings:"wdth" 120;font-weight:700;font-size:clamp(28px,3.2vw,48px);letter-spacing:-.02em}
.tfilm-play{position:absolute;right:18px;bottom:20px;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--on-media);color:#0c1211;display:grid;place-items:center;font-size:14px}
.ttiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ttile{position:relative;border:0;padding:0;border-radius:18px;overflow:hidden;aspect-ratio:3/4;cursor:pointer;background:var(--surface);color:var(--on-media);text-align:left}
.ttile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ttile:hover img{transform:scale(1.05)}
.ttile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6))}
.ttile span{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:grid;gap:2px}
.ttile b{font-weight:700;font-size:15px}
.ttile small{font-size:12px;opacity:.85}
.hop{position:relative;height:340vh;width:100vw;margin-left:calc(50% - 50vw)}
.view{overflow-x:clip}
.hop-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.globe{position:absolute;inset:0;width:100%;height:100%;display:block}
.hop-label{position:relative;z-index:1;display:grid;justify-items:center;gap:8px;text-align:center;pointer-events:none;opacity:0}
.hop-label small{font-size:12px;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums}
.hop-label b{font-family:var(--f-display);font-variation-settings:"wdth" 122;font-weight:700;font-size:clamp(48px,10vw,160px);line-height:.9;letter-spacing:-.035em}
.chapter{display:grid;gap:clamp(18px,2.6vw,32px);padding-bottom:clamp(40px,8vw,120px)}
.ch-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 40px;align-items:end}
.ch-head .tag{grid-column:1/-1}
.ch-head h2{font-family:var(--f-display);font-variation-settings:"wdth" 120;font-weight:700;font-size:clamp(40px,6vw,96px);line-height:.92;letter-spacing:-.03em;margin:0}
.ch-head p{margin:0;color:var(--muted);font-size:clamp(16px,1.5vw,19px);max-width:40ch;justify-self:end}
.tmedia{position:relative;border-radius:var(--r-media);overflow:hidden;aspect-ratio:16/9;max-width:100%;background:var(--surface)}
.tmedia video,.tmedia img{width:100%;height:100%;object-fit:cover;display:block}
.soon{position:absolute;left:16px;top:16px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-media);background:rgba(0,0,0,.4);padding:7px 10px;border-radius:999px}
.tgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(80px,9vw,150px);gap:clamp(8px,1.2vw,16px)}
.tgrid img{width:100%;height:100%;object-fit:cover;display:block;border-radius:18px}
.la .g1{grid-column:1/8;grid-row:1/4}.la .g2{grid-column:8/13;grid-row:1/3}.la .g3{grid-column:8/13;grid-row:3/5}
.la .g4{grid-column:1/5;grid-row:4/7}.la .g5{grid-column:5/8;grid-row:4/7}.la .g6{grid-column:8/13;grid-row:5/7}
.lb .g1{grid-column:6/13;grid-row:1/4}.lb .g2{grid-column:1/6;grid-row:1/3}.lb .g3{grid-column:1/6;grid-row:3/5}
.lb .g4{grid-column:9/13;grid-row:4/7}.lb .g5{grid-column:6/9;grid-row:4/7}.lb .g6{grid-column:1/6;grid-row:5/7}
.tr-cta{display:grid;gap:24px;justify-items:start;padding-block:clamp(60px,10vw,140px);border-top:1px solid var(--line)}
.tr-cta h2{font-family:var(--f-display);font-variation-settings:"wdth" 120;font-weight:700;font-size:clamp(40px,7vw,112px);line-height:.92;letter-spacing:-.03em;margin:0}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:clamp(16px,4vw,48px)}
.lightbox video{width:min(100%,1400px);max-height:86vh;border-radius:18px;background:#000}
.lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;width:48px;height:48px;border-radius:50%;border:0;background:var(--on-media);color:#0c1211;font-size:26px;cursor:pointer}
@media (max-width:820px){.tfilms{grid-template-columns:1fr}.tfilm{aspect-ratio:16/10}.ttiles{grid-template-columns:repeat(3,minmax(0,1fr))}.ch-head{grid-template-columns:1fr}.ch-head p{justify-self:start}
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:38vw}.tgrid img{grid-column:auto!important;grid-row:auto!important}.tgrid .g1{grid-column:1/-1!important;grid-row:span 2!important}.hop{height:260vh}}
@media (prefers-reduced-motion:reduce){.hop{height:auto}.hop-pin{position:relative;height:50vh}.hop-label{opacity:1!important}}

/* Footer note */
.note{padding-block:clamp(80px,12vh,140px);padding-inline:var(--gutter);border-top:1px solid var(--line);display:grid;gap:14px;max-width:1400px;margin:0 auto}
.note .logo{font-size:clamp(48px,11vw,180px);color:var(--fg);opacity:.08;line-height:.85}
.note p{margin:0;color:var(--muted);font-size:14px;max-width:70ch}

@media (prefers-reduced-motion:reduce){
  .hero{height:auto}.stage{position:relative;height:auto;min-height:88vh}
  #drone{display:none}.footage{clip-path:none!important;opacity:1!important}
  .intro{display:none}.outro{opacity:1!important;pointer-events:auto}.caption{opacity:1!important}
  .hint{display:none}.hint i::after{animation:none}
}