@font-face{font-family:'Geologica';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/geologica-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geologica';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/geologica-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geologica';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/geologica-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/martian-mono-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/martian-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/martian-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --glass:#e9eee8; --glass-2:#dfe6df; --glass-3:#c7d4c9;
  --ink:#16211c; --ink-2:#41544b;
  --night:#0e1412; --night-2:#182220;
  --paper:#f4f6f2; --paper-2:#c3cec6;
  --ultra:#1e3ec4; --ultra-deep:#16309b; --ultra-lit:#7fa4ff;
  --ochre:#a8520c; --ochre-lit:#e8944a;
  --sans:'Geologica',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,Consolas,monospace;
  --hair:1px solid var(--glass-3);
  --gut:clamp(20px,4.4vw,64px);
  --e:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:380;background:var(--glass);color:var(--ink);
  line-height:1.6;font-size:clamp(1rem,.95rem + .22vw,1.09rem);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--ultra-lit);outline-offset:3px;border-radius:2px}
::selection{background:var(--ultra);color:#fff}
li{list-style:none}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums}

h1,h2{font-weight:660;line-height:1.0;letter-spacing:-.045em;text-wrap:balance}
h1{font-size:clamp(2.35rem,1.3rem + 4.3vw,5.1rem)}
h2{font-size:clamp(1.85rem,1.2rem + 2.6vw,3.35rem)}
h3{font-weight:640;letter-spacing:-.03em;font-size:1.06rem;line-height:1.25}

/* ============================ top bar ============================ */
.top{position:fixed;inset:0 0 auto;z-index:80;transition:background .35s var(--e),border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent}
.top-in{display:flex;align-items:center;gap:clamp(10px,2.2vw,28px);height:72px}
.mark b{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.top .mark span{color:var(--ultra-lit);font-size:.68rem;transition:color .35s}
.mark{display:flex;align-items:center;gap:.6rem;margin-right:auto;min-width:0;color:var(--paper);transition:color .35s}
.mark-logo{height:38px;width:auto;display:block;flex:none}
@media(max-width:600px){.mark span{display:none}.mark-logo{height:30px}}
.langs{display:flex;border:1px solid rgba(244,246,242,.42);border-radius:2px;overflow:hidden;flex:none;transition:border-color .35s}
.langs button{font-family:var(--mono);font-size:.63rem;letter-spacing:-.03em;padding:.44rem .56rem;
  color:var(--paper-2);transition:background .2s,color .2s}
.langs button+button{border-left:1px solid rgba(244,246,242,.28)}
.langs button:hover{background:rgba(244,246,242,.14);color:var(--paper)}
.langs button[aria-pressed=true]{background:var(--paper);color:var(--night)}
.top .wa{display:inline-flex;align-items:center;gap:.5rem;flex:none;background:var(--ultra);color:#fff;
  font-weight:600;font-size:.85rem;padding:.6rem 1.05rem;border-radius:2px;letter-spacing:-.02em;
  transition:background .2s,transform .2s}
.top .wa:hover{background:#3856dd;transform:translateY(-1px)}
.top .wa svg{width:17px;height:17px;fill:currentColor;flex:none}
@media(max-width:860px){.top .wa span{display:none}.top .wa{padding:.6rem .72rem}}
/* solid state once past the hero */
.top.stuck{background:color-mix(in srgb,var(--glass) 92%,transparent);backdrop-filter:blur(12px);border-bottom-color:var(--glass-3)}
.top.stuck .mark{color:var(--ultra-deep)}
.top.stuck .mark span{color:var(--ultra-deep)}
.top.stuck .langs{border-color:var(--ink)}
.top.stuck .langs button{color:var(--ink-2)}
.top.stuck .langs button+button{border-left-color:var(--glass-3)}
.top.stuck .langs button:hover{background:var(--glass-2);color:var(--ink)}
.top.stuck .langs button[aria-pressed=true]{background:var(--ink);color:var(--glass)}

/* ============================ hero ============================ */
.hero{position:relative;min-height:min(100svh,940px);display:flex;align-items:flex-end;
  background:var(--night);overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,13,12,.94) 0%,rgba(9,13,12,.82) 34%,rgba(9,13,12,.34) 62%,rgba(9,13,12,.5) 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:34%;z-index:-1;
  background:linear-gradient(rgba(9,13,12,0),rgba(9,13,12,.86))}
/* narrow screens lose the side scrim, so the copy needs the vertical one instead */
@media(max-width:860px){
  .hero::before{background:linear-gradient(rgba(9,13,12,.62) 0%,rgba(9,13,12,.5) 26%,rgba(9,13,12,.78) 62%,rgba(9,13,12,.93) 100%)}
  .hero::after{height:52%}
}
@media(prefers-reduced-motion:no-preference){
  .hero-img{animation:drift 26s ease-out forwards}
  @keyframes drift{from{transform:scale(1.1)}to{transform:scale(1)}}
}
.hero-in{position:relative;width:100%;padding:calc(72px + clamp(40px,7vw,90px)) 0 clamp(30px,4vw,52px)}
.hero-in>*{max-width:min(100%,880px)}
.hero h1{color:var(--paper);max-width:18ch;text-shadow:0 2px 40px rgba(0,0,0,.45);
  font-weight:600;font-size:clamp(1.95rem,1.4rem + 2.5vw,3.55rem);line-height:1.1;letter-spacing:-.034em}
.hero h1 em{font-style:normal;color:var(--ultra-lit)}
.hero .deck{margin-top:1.3rem;max-width:50ch;color:var(--paper-2);font-size:clamp(1.02rem,.96rem + .34vw,1.22rem);line-height:1.52}
.act{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:clamp(24px,3vw,34px)}
.btn{display:inline-flex;align-items:center;gap:.62rem;background:var(--ultra);color:#fff;font-weight:600;
  letter-spacing:-.02em;padding:1rem 1.6rem;border-radius:2px;font-size:1.02rem;
  box-shadow:0 22px 48px -20px rgba(30,62,196,.9);transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{background:#3856dd;transform:translateY(-2px);box-shadow:0 28px 56px -18px rgba(56,86,221,.95)}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn-ghost{display:inline-flex;align-items:center;font-weight:600;font-size:.98rem;padding:1rem 0;
  color:var(--paper);border-bottom:1.5px solid rgba(244,246,242,.5);transition:border-color .2s,color .2s}
.btn-ghost:hover{border-color:var(--ultra-lit);color:var(--ultra-lit)}

.creds{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:clamp(28px,3.6vw,44px);padding-top:20px;
  border-top:1px solid rgba(244,246,242,.22);max-width:none}
.creds li{display:flex;align-items:baseline;gap:.5rem;font-size:.87rem;color:var(--paper-2)}
.creds .n{font-family:var(--mono);font-size:.78rem;letter-spacing:-.05em;color:var(--paper);font-variant-numeric:tabular-nums}

/* annotation pinned to the real glass */
.tagline{position:absolute;z-index:3;right:clamp(16px,4vw,64px);top:clamp(96px,15vh,190px);
  max-width:min(78vw,232px);padding-left:16px;border-left:1px solid var(--ultra-lit)}
.tagline .v{display:block;font-family:var(--mono);letter-spacing:-.06em;color:var(--ultra-lit);
  font-size:clamp(1.02rem,.9rem + .55vw,1.3rem);line-height:1.12;font-variant-numeric:tabular-nums}
.tagline .k{display:block;color:var(--paper);font-weight:600;font-size:.82rem;margin-top:.24rem;line-height:1.3}
.tagline .s{display:block;color:var(--paper-2);font-size:.74rem;line-height:1.45;margin-top:.16rem}
@media(max-width:860px){.tagline{display:none}}

/* ============================ shared section furniture ============================ */
.sec{padding:clamp(56px,7.5vw,120px) 0}
.sec--dark{background:var(--night);color:var(--paper)}
.sec--dark h2{color:var(--paper)}
.lede{margin-top:1.1rem;max-width:56ch;color:var(--ink-2);font-size:clamp(1.02rem,.97rem + .3vw,1.16rem);line-height:1.55}
.sec--dark .lede{color:var(--paper-2)}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:-.02em;color:var(--ultra-deep);margin-bottom:1.15rem}
.kicker::before{content:"";width:26px;height:1px;background:currentColor}
.sec--dark .kicker,.close .kicker{color:var(--ultra-lit)}

/* ============================ real job: before / after ============================ */
.ba-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);
  gap:clamp(26px,4.4vw,72px);align-items:center}
@media(max-width:900px){.ba-grid{grid-template-columns:1fr}}

/* portrait, because that is how the source footage was actually shot */
.ba{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:478/850;max-width:430px;
  margin-inline:auto;width:100%;background:var(--night-2);
  box-shadow:0 44px 96px -52px rgba(14,20,18,.95);cursor:ew-resize;touch-action:none;user-select:none}

/* three more frames from the same two days */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:clamp(24px,3vw,34px)}
.proof figure{margin:0;position:relative;border-radius:3px;overflow:hidden;aspect-ratio:3/4;background:var(--night-2)}
.proof img{width:100%;height:100%;object-fit:cover}
.proof figcaption{position:absolute;left:0;right:0;bottom:0;padding:.5em .6em .45em;
  font-family:var(--mono);font-size:.55rem;letter-spacing:-.02em;color:var(--paper);
  background:linear-gradient(rgba(14,20,18,0),rgba(14,20,18,.88))}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--split,52%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--split,52%);width:2px;background:var(--paper);
  box-shadow:0 0 0 1px rgba(14,20,18,.35);z-index:3;pointer-events:none}
.ba .knob{position:absolute;top:50%;left:50%;translate:-50% -50%;width:46px;height:46px;border-radius:50%;
  background:var(--paper);display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(14,20,18,.7)}
.ba .knob svg{width:22px;height:22px;fill:var(--night)}
.ba figcaption{position:absolute;z-index:4;bottom:14px;font-family:var(--mono);font-size:.62rem;letter-spacing:-.03em;
  padding:.42em .7em;border-radius:2px;background:rgba(14,20,18,.76);color:var(--paper);pointer-events:none}
.ba .cap-l{left:14px}
.ba .cap-r{right:14px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}

/* ============================ materials ============================ */
.sec--deep{background:#d6dfd7;border-block:var(--hair)}
.mat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.switch{display:flex;border:1px solid var(--ink);border-radius:2px;overflow:hidden;flex:none}
.switch button{padding:.62rem 1.1rem;font-size:.88rem;font-weight:500;letter-spacing:-.02em;color:var(--ink-2);
  transition:background .2s,color .2s;white-space:nowrap}
.switch button+button{border-left:1px solid var(--glass-3)}
.switch button:hover{background:var(--glass-2);color:var(--ink)}
.switch button[aria-pressed=true]{background:var(--ultra);color:#fff}

.mat-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,3.6vw,56px);
  align-items:center;margin-top:clamp(28px,3.6vw,46px)}
@media(max-width:900px){.mat-grid{grid-template-columns:1fr}}
.mat-shot{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 34px 74px -46px rgba(14,20,18,.85)}
.mat-shot img{width:100%;height:100%;object-fit:cover}
.mat-shot .sect-badge{position:absolute;right:16px;bottom:16px;width:clamp(88px,13vw,124px);
  background:rgba(233,238,232,.95);border-radius:3px;padding:10px;box-shadow:0 14px 30px -14px rgba(14,20,18,.7)}
.section-svg{width:100%;height:auto}
.section-svg .a{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linejoin:round}
.section-svg .b{fill:none;stroke:var(--ink);stroke-width:1.7}
.section-svg .brk{fill:var(--ultra);stroke:none}
.section-svg .gl{fill:#b8ccd6;stroke:var(--ink);stroke-width:1.7}
.mat-note{color:var(--ink-2);line-height:1.6;max-width:56ch}
.figs{display:flex;gap:clamp(22px,3vw,40px);margin-top:26px;padding-top:20px;border-top:var(--hair)}
.figs .v{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.06em;
  color:var(--ultra);font-size:clamp(1.06rem,.94rem + .5vw,1.32rem);line-height:1.15}
.figs .k{display:block;font-size:.78rem;color:var(--ink-2);margin-top:.24rem}
.mat-foot{margin-top:20px;color:var(--ink-2);font-size:.8rem;max-width:70ch}

/* ============================ services: a spec sheet, not icon cards ============================ */
.svc-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,4vw,72px)}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr;gap:26px}}
.svc{border-top:1px solid rgba(244,246,242,.2)}
.svc li{display:grid;grid-template-columns:minmax(140px,.42fr) minmax(0,1fr);gap:6px clamp(16px,2.6vw,40px);
  padding:clamp(14px,1.8vw,20px) 0;border-bottom:1px solid rgba(244,246,242,.2);align-items:baseline}
@media(max-width:560px){.svc li{grid-template-columns:1fr}}
.svc .name{font-weight:640;letter-spacing:-.028em;color:var(--paper);font-size:1.02rem}
.svc .desc{color:var(--paper-2);font-size:.93rem;line-height:1.5}

/* ============================ process ============================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(28px,3.6vw,46px)}
@media(max-width:880px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.steps li{border-top:2px solid var(--ultra);padding-top:16px}
.steps .n{font-family:var(--mono);font-size:.7rem;letter-spacing:-.05em;color:var(--ultra-deep)}
.steps .t{display:block;font-weight:640;letter-spacing:-.028em;margin-top:.5rem;font-size:1.02rem}
.steps .d{display:block;color:var(--ink-2);font-size:.92rem;line-height:1.5;margin-top:.35rem}

/* ============================ faq ============================ */
.faq{margin-top:clamp(26px,3.4vw,42px);max-width:900px;border-top:var(--hair)}
.faq details{border-bottom:var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:clamp(15px,1.9vw,21px) 44px clamp(15px,1.9vw,21px) 0;
  position:relative;font-weight:600;letter-spacing:-.028em;font-size:clamp(1rem,.96rem + .26vw,1.1rem);
  transition:color .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ultra)}
.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--ultra);border-bottom:1.8px solid var(--ultra);
  translate:0 -60%;rotate:45deg;transition:rotate .25s var(--e),translate .25s var(--e)}
.faq details[open] summary::after{rotate:-135deg;translate:0 -20%}
.faq .a{padding:0 44px clamp(18px,2.2vw,24px) 0;color:var(--ink-2);line-height:1.62;max-width:74ch}
.faq .a p+p{margin-top:.8rem}

/* ============================ towns ============================ */
.towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3.4vw,40px)}
.towns a{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:-.04em;color:var(--paper);
  border:1px solid rgba(244,246,242,.3);border-radius:2px;padding:.5rem .85rem;
  transition:border-color .2s,background .2s,color .2s}
.towns a:hover{border-color:var(--ultra-lit);background:rgba(127,164,255,.14);color:var(--ultra-lit)}

/* ============================ close ============================ */
.close{position:relative;overflow:hidden;isolation:isolate;background:var(--night);
  border-top:1px solid rgba(244,246,242,.16)}
.close img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.close::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(85deg,rgba(9,13,12,.95),rgba(9,13,12,.66) 58%,rgba(9,13,12,.82))}
.close .wrap{padding-block:clamp(60px,8vw,124px)}

/* ============================ foot ============================ */
.foot{background:var(--night);color:var(--paper-2);font-size:.85rem;
  border-top:1px solid rgba(244,246,242,.14);padding:30px 0 42px}
.foot-in{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}
.foot a{border-bottom:1px solid rgba(244,246,242,.26)}
.foot a:hover{color:var(--paper);border-color:var(--paper)}
.foot .mono{font-size:.79rem;color:var(--paper)}

/* ---- entrance: one authored moment, from an already-visible default ---- */
@media(prefers-reduced-motion:no-preference){
  .anim .rise{opacity:0;transform:translateY(16px);animation:rise .85s var(--e) forwards}
  .anim .rise:nth-child(1){animation-delay:.05s}
  .anim .rise:nth-child(2){animation-delay:.14s}
  .anim .rise:nth-child(3){animation-delay:.23s}
  .anim .rise:nth-child(4){animation-delay:.32s}
  .anim .tagline{opacity:0;animation:rise .85s var(--e) .5s forwards}
}
@keyframes rise{to{opacity:1;transform:none}}

/* ============================ town pages ============================ */
.hero--town{min-height:min(72svh,660px)}
.hero--town h1{max-width:13ch}
.hero--town .hero-in{padding-top:calc(72px + clamp(34px,5.5vw,72px))}
a.mark{text-decoration:none}
.svc--plain li{grid-template-columns:1fr;padding:clamp(11px,1.4vw,15px) 0}
.foot-in a[href="/"],.foot-in a[href="/aviso-legal"]{font-weight:600;color:var(--paper)}

/* ============================ legal ============================ */
.legal{padding:calc(72px + clamp(34px,5vw,68px)) 0 clamp(50px,6vw,90px);background:var(--glass)}
.legal h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);max-width:22ch}
.legal .updated{font-family:var(--mono);font-size:.68rem;letter-spacing:-.03em;color:var(--ink-2);margin-top:1rem}
.legal section{margin-top:clamp(30px,3.6vw,52px);max-width:78ch}
.legal h2{font-size:clamp(1.15rem,1.02rem + .6vw,1.5rem);margin-bottom:.85rem}
.legal p,.legal li{color:var(--ink-2);line-height:1.68}
.legal p+p{margin-top:.85rem}
.legal ul{margin-top:.7rem;padding-left:0}
.legal ul li{position:relative;padding-left:20px;margin-top:.45rem}
.legal ul li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:1px;background:var(--ultra)}
.legal dl{margin-top:.8rem;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem}
@media(max-width:520px){.legal dl{grid-template-columns:1fr;gap:.1rem 0}.legal dd{margin-bottom:.7rem}}
.legal dt{font-family:var(--mono);font-size:.72rem;letter-spacing:-.04em;color:var(--ink);padding-top:.2em}
.legal dd{color:var(--ink-2)}
.legal a{color:var(--ultra-deep);border-bottom:1px solid var(--glass-3)}
.legal a:hover{border-color:var(--ultra-deep)}
.legal .note{margin-top:1rem;padding:1rem 1.15rem;background:var(--glass-2);border-radius:3px;
  font-size:.92rem;color:var(--ink-2)}

/* ============================ guides ============================ */
.guide{padding-top:calc(72px + clamp(30px,4.4vw,60px))}
.guide .kicker{color:var(--ultra-deep)}
.guide h1{font-size:clamp(1.95rem,1.35rem + 2.6vw,3.2rem);max-width:20ch;font-weight:640;
  line-height:1.06;letter-spacing:-.04em}
.guide .stand{margin-top:1.2rem;max-width:62ch;font-size:clamp(1.06rem,.99rem + .42vw,1.28rem);
  line-height:1.5;color:var(--ink-2)}
.guide-shot{margin:clamp(28px,4vw,52px) 0 0;height:clamp(190px,26vw,340px);overflow:hidden}
.guide-shot img{width:100%;height:100%;object-fit:cover}
.guide-body{padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(40px,5vw,76px)}
.guide-body h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem);margin-top:clamp(30px,3.6vw,50px);
  margin-bottom:.7rem;max-width:26ch}
.guide-body h2:first-child{margin-top:0}
.guide-body p{max-width:68ch;color:var(--ink-2);line-height:1.68}
.guide-body p+p{margin-top:.9rem}
.guide-body ul{margin-top:1rem;max-width:70ch}
.guide-body ul li{position:relative;padding-left:22px;margin-top:.62rem;color:var(--ink-2);line-height:1.6}
.guide-body ul li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--ultra)}
.guide-body ul li b,.guide-body p b{color:var(--ink);font-weight:640}
.guide-body .note{margin-top:1.3rem;padding:1.05rem 1.25rem;background:var(--glass-2);
  border-radius:3px;max-width:70ch;color:var(--ink-2)}
.guide-more{margin-top:clamp(18px,2.4vw,28px);display:grid;gap:2px;max-width:64ch}
.guide-more a{display:block;padding:clamp(14px,1.8vw,19px) 0;border-bottom:var(--hair);
  font-weight:600;letter-spacing:-.028em;transition:color .18s,padding-left .18s}
.guide-more a:hover{color:var(--ultra);padding-left:8px}
.guide-more li:first-child a{border-top:var(--hair)}

.faq-more{display:inline-block;margin-top:.7rem;font-weight:600;font-size:.93rem;color:var(--ultra-deep);
  border-bottom:1.5px solid var(--glass-3);transition:border-color .18s}
.faq-more:hover{border-color:var(--ultra-deep)}
.faq-more::after{content:" →"}

/* ============================ service tiles ============================ */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.3vw,18px);
  margin-top:clamp(28px,3.6vw,46px)}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/3;background:var(--night-2);
  isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .7s var(--e)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgba(9,13,12,0) 38%,rgba(9,13,12,.44) 68%,rgba(9,13,12,.88))}
.tile:hover img{transform:scale(1.05)}
.tile-txt{position:absolute;inset:auto 0 0;padding:clamp(14px,1.8vw,20px)}
.tile-txt h3{color:var(--paper);font-size:clamp(1rem,.94rem + .3vw,1.14rem);letter-spacing:-.03em;
  text-shadow:0 1px 12px rgba(9,13,12,.85)}
.tile-txt p{color:var(--paper-2);font-size:.83rem;line-height:1.42;margin-top:.28rem;max-width:34ch;
  text-shadow:0 1px 10px rgba(9,13,12,.9)}
/* the one tile that is genuinely his gets to say so */

/* ============================ gallery ============================ */
.gal{padding-top:calc(72px + clamp(30px,4.4vw,60px))}
.gal .kicker{color:var(--ultra-deep)}
.gal h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);font-weight:640;letter-spacing:-.042em;line-height:1.04}
.gal .stand{margin-top:1.15rem;max-width:60ch;font-size:clamp(1.02rem,.97rem + .34vw,1.2rem);
  line-height:1.55;color:var(--ink-2)}

.job{padding:clamp(34px,4.6vw,70px) 0 clamp(30px,4vw,56px)}
.job-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:14px 30px;padding-bottom:16px;border-bottom:var(--hair)}
.job-head h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.2rem)}
.job-meta{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:baseline}
.job-meta dt{font-size:.6rem;color:var(--ink-2);text-transform:lowercase}
.job-meta dd{font-size:.76rem;color:var(--ink);margin-right:.2rem}
.job-d{margin-top:20px;max-width:66ch;color:var(--ink-2);line-height:1.65}

.grp{margin-top:clamp(30px,3.6vw,48px);font-family:var(--mono);font-size:.66rem;letter-spacing:-.02em;
  color:var(--ultra-deep);font-weight:400;display:flex;align-items:center;gap:.6rem}
.grp::before{content:"";width:26px;height:1px;background:currentColor}
.grp-note{margin-top:.5rem;font-size:.82rem;color:var(--ink-2)}

.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.1vw,14px);margin-top:18px}
@media(max-width:860px){.shots{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.shots{grid-template-columns:repeat(2,1fr)}}
.shot{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:var(--glass-3)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:.52rem;
  letter-spacing:-.02em;color:var(--paper);background:rgba(14,20,18,.8);padding:.32em .5em;border-radius:2px}

.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);margin-top:18px}
@media(max-width:760px){.clips{grid-template-columns:1fr;max-width:420px}}
.clip{margin:0}
.clip video{width:100%;height:auto;aspect-ratio:478/850;object-fit:cover;border-radius:3px;
  background:var(--night-2);display:block}
.clip figcaption{margin-top:.6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:-.02em;
  color:var(--ink-2)}

/* ============================ recent-work strip (home) ============================ */
.recent-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 30px}
.recent{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.1vw,14px);
  margin-top:clamp(22px,2.8vw,34px)}
@media(max-width:860px){.recent{grid-template-columns:repeat(3,1fr)}.recent .shot:nth-child(n+4){display:none}}
@media(max-width:520px){.recent{grid-template-columns:repeat(2,1fr)}.recent .shot:nth-child(n+3){display:none}}
.recent .shot{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:3px;
  background:var(--glass-3)}
.recent .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.recent .shot:hover img{transform:scale(1.05)}
.recent .shot span{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:.52rem;
  letter-spacing:-.02em;color:var(--paper);background:rgba(14,20,18,.8);padding:.32em .5em;border-radius:2px}
.recent .shot--more span{background:var(--ultra);color:#fff}

/* .btn-ghost is white for dark bands; on a light ground it needs ink */
.sec:not(.sec--dark) .btn-ghost,.guide .btn-ghost{color:var(--ink);border-bottom-color:var(--ink)}
.sec:not(.sec--dark) .btn-ghost:hover,.guide .btn-ghost:hover{color:var(--ultra);border-bottom-color:var(--ultra)}

/* header nav link */
.navlink{flex:none;font-weight:600;font-size:.86rem;letter-spacing:-.025em;color:var(--paper);
  padding-bottom:2px;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.navlink:hover{border-bottom-color:currentColor}
.top.stuck .navlink{color:var(--ink)}
.top.stuck .navlink:hover{color:var(--ultra)}
@media(max-width:480px){.navlink{display:none}}