:root{
  --black:#0F0F0F; --white:#FFFFFF; --stone:#E8E1D5; --muted:#8C8478; --ink:#141414;
  --bg:#FFFFFF; --fg:#141414;
  --font:'Jost','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.77,0,.18,1);
  color-scheme: light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#141414; --fg:#F2EEE7; --stone:#1E1B18; color-scheme:dark; } }
:root[data-theme="dark"]{ --bg:#141414; --fg:#F2EEE7; --stone:#1E1B18; color-scheme:dark; }
html{ scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px); }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-weight:300; font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }
.wrap{ max-width:1440px; margin:0 auto; padding:0 var(--pad); }
.line-mask{ display:block; overflow:hidden; }
.line-mask > span{ display:block; }

/* ---------- preloader ---------- */
.loader{ position:fixed; inset:0; z-index:100; background:var(--black); color:var(--white); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:40px; }
.loader-logo{ width:min(300px,60vw); }
.loader-logo rect,.loader-logo line{ fill:none; stroke:#fff; stroke-width:2; }
.loader-count{ font-size:15px; letter-spacing:6px; opacity:.6; font-variant-numeric:tabular-nums; }
html:not(.js) .loader{ display:none; }

/* ---------- cursor ---------- */
.cursor{ position:fixed; left:0; top:0; z-index:90; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#fff; mix-blend-mode:difference; pointer-events:none; display:flex; align-items:center; justify-content:center; transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease); }
.cursor span{ font-size:12px; letter-spacing:3px; color:#000; opacity:0; transition:opacity .3s; text-transform:uppercase; }
.cursor.big{ width:96px; height:96px; margin:-48px 0 0 -48px; }
.cursor.big span{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ---------- header ---------- */
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--black); }
.site-header{ position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:50; color:var(--white); transition:transform .6s var(--ease),background .4s,color .4s; }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:88px; }
.site-header.solid{ background:rgba(15,15,15,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.site-header.hide{ transform:translateY(-110%); }
.site-header .logo img{ width:120px; }
.nav{ display:flex; gap:clamp(22px,3vw,48px); align-items:center; }
.nav a{ font-size:15px; letter-spacing:2px; text-transform:uppercase; position:relative; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.pill{ display:inline-flex; align-items:center; gap:12px; padding:14px 26px; border:1px solid currentColor; border-radius:999px; font-size:14px; letter-spacing:2px; text-transform:uppercase; position:relative; overflow:hidden; isolation:isolate; background:transparent; color:inherit; font-family:var(--font); cursor:pointer; }
.pill::before{ content:""; position:absolute; inset:0; background:currentColor; transform:translateY(101%); border-radius:inherit; transition:transform .5s var(--ease); z-index:-1; }
.pill span{ transition:color .5s var(--ease); }
.pill:hover::before{ transform:translateY(0); }
.on-dark .pill:hover span,.site-header .pill:hover span{ color:var(--black); }
.on-light .pill:hover span{ color:var(--white); }
.menu-btn{ display:none; }
@media (max-width:900px){
  .nav{ position:fixed; inset:0; background:var(--black); flex-direction:column; justify-content:center; gap:26px; clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease); padding-top:env(safe-area-inset-top,0px); }
  .nav.open{ clip-path:inset(0 0 0 0); }
  .nav a{ font-size:30px; letter-spacing:4px; }
  .menu-btn{ display:inline-flex; position:relative; z-index:2; }
}

/* ---------- hero ---------- */
.hero{ position:relative; height:100vh; height:100svh; min-height:620px; overflow:hidden; background:var(--black); color:var(--white); }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.15); }
.hero-media img.on{ opacity:1; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.55) 100%); pointer-events:none; }
.hero-content{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--pad) clamp(40px,7vh,90px); }
.hero h1{ margin:0; font-weight:200; font-size:clamp(40px,8vw,150px); line-height:.95; letter-spacing:-.01em; text-transform:uppercase; }
.hero h1 .w2{ font-weight:400; padding-left:clamp(30px,8vw,180px); }
.hero-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-top:clamp(24px,4vh,48px); flex-wrap:wrap; }
.hero-foot p{ margin:0; max-width:440px; font-size:clamp(16px,1.3vw,19px); opacity:.9; }
.scroll-cue{ display:flex; align-items:center; gap:16px; font-size:13px; letter-spacing:4px; text-transform:uppercase; }
.scroll-cue i{ display:block; width:1px; height:56px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; left:0; top:-50%; width:1px; height:50%; background:#fff; animation:cue 2s var(--ease) infinite; }
@keyframes cue{ to{ top:100%; } }
.hero-index{ position:absolute; z-index:2; top:50%; right:var(--pad); transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; }
.hero-index b{ display:block; width:2px; height:34px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; }
.hero-index b i{ position:absolute; inset:0; background:#fff; transform:scaleY(0); transform-origin:top; }
@media (max-width:700px){ .hero-index{ display:none; } .hero h1 .w2{ padding-left:0; } }

/* ---------- about ---------- */
.about{ padding:clamp(110px,16vw,240px) 0 clamp(90px,12vw,180px); }
.eyebrow{ display:flex; align-items:center; gap:14px; font-size:14px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); margin-bottom:clamp(28px,4vw,56px); }
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; }
.big-text{ margin:0; font-weight:300; font-size:clamp(28px,4.2vw,68px); line-height:1.18; letter-spacing:-.01em; max-width:20ch; }
.big-text .word{ display:inline-block; }
.about-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,7vw,120px); margin-top:clamp(70px,10vw,150px); align-items:end; }
.reveal-img{ overflow:hidden; position:relative; }
.reveal-img img{ width:100%; height:100%; object-fit:cover; transform-origin:center; }
.about .reveal-img{ aspect-ratio:4/5; }
.about-copy p{ margin:0 0 40px; font-size:clamp(17px,1.35vw,20px); max-width:52ch; }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:30px; border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent); padding-top:34px; }
.stats strong{ display:block; font-weight:200; font-size:clamp(64px,7.5vw,128px); line-height:.9; }
.stats span{ font-size:15px; color:var(--muted); letter-spacing:1px; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }

/* ---------- marquee ---------- */
.marquee{ background:var(--black); color:var(--white); padding:clamp(34px,4vw,56px) 0; overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; align-items:center; gap:clamp(30px,4vw,70px); font-size:clamp(46px,8vw,140px); font-weight:200; text-transform:uppercase; line-height:1; will-change:transform; }
.marquee-track em{ font-style:normal; color:transparent; -webkit-text-stroke:1px #fff; }
.marquee-track .sq{ width:clamp(26px,3vw,48px); height:clamp(26px,3vw,48px); border:1.5px solid #fff; border-left:none; flex:none; }

/* ---------- services ---------- */
.services{ background:var(--black); color:var(--white); padding:clamp(80px,10vw,150px) 0; }
.services .eyebrow{ color:#A39B8F; }
.services-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:clamp(50px,7vw,100px); }
.services-head h2{ margin:0; font-weight:200; font-size:clamp(44px,7vw,120px); line-height:.95; text-transform:uppercase; }
.services-head p{ margin:0; max-width:40ch; color:#CFC8BC; }
.svc-layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,100px); }
.svc-visual{ position:sticky; top:14vh; height:72vh; overflow:hidden; }
.svc-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:inset(100% 0 0 0); transition:clip-path 1.1s var(--ease), transform 1.6s var(--ease); transform:scale(1.15); }
.svc-visual img.on{ clip-path:inset(0 0 0 0); transform:scale(1); }
.svc-visual img.first{ clip-path:inset(0 0 0 0); transform:scale(1); }
.svc-item{ min-height:72vh; display:flex; flex-direction:column; justify-content:center; border-top:1px solid rgba(255,255,255,.18); padding:40px 0; opacity:.28; transition:opacity .7s var(--ease); }
.svc-item.on{ opacity:1; }
.svc-item small{ font-size:14px; letter-spacing:4px; text-transform:uppercase; color:#A39B8F; }
.svc-item h3{ margin:14px 0 22px; font-weight:300; font-size:clamp(36px,4.4vw,72px); line-height:1; letter-spacing:-.01em; }
.svc-item p{ margin:0; max-width:46ch; color:#E1DBD1; }
.svc-item ul{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.svc-item li{ font-size:14px; letter-spacing:1px; padding:8px 16px; border:1px solid rgba(255,255,255,.28); border-radius:999px; }
.svc-item .mimg{ display:none; }
@media (max-width:900px){
  .svc-layout{ grid-template-columns:1fr; } .svc-visual{ display:none; }
  .svc-item{ min-height:auto; opacity:1; padding:48px 0; }
  .svc-item .mimg{ display:block; aspect-ratio:4/3; overflow:hidden; margin-bottom:28px; }
  .svc-item .mimg img{ width:100%; height:100%; object-fit:cover; }
}

/* ---------- work (horizontal) ---------- */
.work{ background:var(--bg); padding:clamp(90px,10vw,140px) 0 0; overflow:hidden; }
.work-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.work-head h2{ margin:0; font-weight:200; font-size:clamp(50px,9vw,160px); line-height:.9; text-transform:uppercase; }
.work-head p{ margin:16px 0 0; color:var(--muted); letter-spacing:1px; }
.work-count{ font-size:clamp(40px,5vw,80px); font-weight:200; font-variant-numeric:tabular-nums; line-height:1; }
.work-count span{ color:var(--muted); }
.h-pin{ height:100vh; height:100svh; display:flex; align-items:center; }
.h-track{ display:flex; gap:clamp(18px,2.4vw,40px); padding:0 var(--pad); will-change:transform; }
.h-card{ flex:none; width:min(70vw,1100px); margin:0; }
.h-card:nth-child(even){ width:min(42vw,620px); align-self:flex-end; }
.h-card .reveal-img{ aspect-ratio:16/10; }
.h-card:nth-child(even) .reveal-img{ aspect-ratio:4/5; }
.h-card figcaption{ display:flex; justify-content:space-between; margin-top:16px; font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
@media (max-width:900px){
  .h-pin{ height:auto; padding:48px 0 0; }
  .h-track{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .h-track::-webkit-scrollbar{ display:none; }
  .h-card,.h-card:nth-child(even){ width:82vw; scroll-snap-align:center; align-self:auto; }
  .h-card:nth-child(even) .reveal-img{ aspect-ratio:16/10; }
}
.clients{ padding:clamp(60px,7vw,110px) 0 clamp(90px,10vw,140px); }
.clients-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px 40px; border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent); padding-top:34px; }
.clients-row span{ font-size:clamp(22px,2.6vw,40px); font-weight:300; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- statement ---------- */
.statement{ position:relative; height:180vh; background:var(--bg); }
.statement-sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.statement-media{ position:absolute; inset:0; clip-path:inset(16% 22% 16% 22%); }
.statement-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.25); }
.statement-media::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.42); }
.statement h2{ position:relative; z-index:2; margin:0; color:#fff; text-align:center; font-weight:300; font-size:clamp(30px,5vw,84px); line-height:1.1; max-width:18ch; padding:0 var(--pad); text-transform:uppercase; }
.statement h2 .word{ display:inline-block; opacity:.18; }
@media (prefers-reduced-motion:reduce){ .statement{ height:auto; } .statement-sticky{ position:relative; } .statement-media{ clip-path:none; } .statement h2 .word{ opacity:1; } }

/* ---------- process ---------- */
.process{ padding:clamp(100px,12vw,180px) 0; }
.process h2{ margin:0 0 clamp(50px,7vw,100px); font-weight:200; font-size:clamp(44px,7vw,120px); line-height:.95; text-transform:uppercase; }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,48px); }
.steps-line{ position:absolute; left:0; right:0; top:0; height:1px; background:color-mix(in srgb,var(--fg) 15%,transparent); }
.steps-line i{ position:absolute; inset:0; background:var(--fg); transform:scaleX(0); transform-origin:left; }
.steps li{ padding-top:34px; position:relative; }
.steps li::before{ content:""; position:absolute; top:-6px; left:0; width:11px; height:11px; border:1px solid var(--fg); background:var(--bg); }
.steps .n{ font-size:clamp(50px,5vw,84px); font-weight:200; line-height:1; color:var(--muted); }
.steps h3{ margin:18px 0 12px; font-weight:400; font-size:24px; letter-spacing:.04em; text-transform:uppercase; }
.steps p{ margin:0; font-size:17px; color:color-mix(in srgb,var(--fg) 80%,transparent); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; row-gap:56px; } .steps-line{ display:none; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ---------- contact ---------- */
.contact{ background:var(--black); color:var(--white); padding:clamp(110px,14vw,200px) 0 0; overflow:hidden; }
.contact h2{ margin:0; font-weight:200; font-size:clamp(46px,9vw,170px); line-height:.92; text-transform:uppercase; }
.contact h2 .w2{ font-weight:400; padding-left:clamp(30px,10vw,220px); }
.contact-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-top:clamp(50px,7vw,100px); }
.circle-btn{ width:clamp(150px,15vw,220px); aspect-ratio:1; border-radius:50%; background:var(--white); color:var(--black); display:flex; align-items:center; justify-content:center; text-align:center; font-size:15px; letter-spacing:3px; text-transform:uppercase; line-height:1.4; transition:transform .4s var(--ease); }
.contact dl{ margin:0; display:grid; grid-template-columns:repeat(2,minmax(180px,auto)); gap:26px 70px; font-size:18px; }
.contact dt{ font-size:13px; letter-spacing:3px; text-transform:uppercase; color:#A39B8F; margin-bottom:6px; }
.contact dd{ margin:0; }
.contact dd a{ background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .5s var(--ease); }
.contact dd a:hover{ background-size:100% 1px; }
@media (max-width:600px){ .contact dl{ grid-template-columns:1fr; } }
.footer-logo{ margin-top:clamp(80px,10vw,140px); padding:0 var(--pad); }
.footer-logo img{ width:100%; max-width:1440px; margin:0 auto; opacity:.95; }
.footer-bar{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:30px var(--pad) 40px; font-size:14px; letter-spacing:1px; color:#A39B8F; }

/* initial states only when animation is on */
.anim .reveal-img{ clip-path:inset(100% 0 0 0); }
.anim .reveal-img img{ transform:scale(1.3); }
.anim .up{ opacity:0; transform:translateY(40px); }
.anim .line-mask > span{ transform:translateY(110%); }
.anim .big-text .word{ opacity:.12; }

/* ================= shared additions ================= */
.curtain{ position:fixed; inset:0; z-index:95; background:var(--black); pointer-events:none; }
html:not(.js) .curtain{ display:none; }

/* inner page hero */
.page-hero{ background:var(--black); color:var(--white); padding:calc(env(safe-area-inset-top,0px) + clamp(170px,20vw,260px)) 0 clamp(70px,8vw,120px); position:relative; overflow:hidden; }
.page-hero h1{ margin:0; font-weight:200; font-size:clamp(50px,9.6vw,184px); line-height:.88; text-transform:uppercase; letter-spacing:-.01em; }
.page-hero h1 .w2{ font-weight:400; padding-left:clamp(30px,10vw,220px); }
.page-hero .eyebrow{ color:#A39B8F; }
.page-hero-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-top:clamp(40px,6vw,80px); }
.page-hero-foot p{ margin:0; max-width:46ch; color:#D9D2C5; font-size:clamp(17px,1.4vw,20px); }
.page-hero-media{ margin-top:clamp(50px,6vw,90px); }
.page-hero-media .reveal-img{ aspect-ratio:21/9; }
@media (max-width:700px){ .page-hero-media .reveal-img{ aspect-ratio:4/3; } }

/* filters */
.filters{ display:flex; flex-wrap:wrap; gap:10px; }
.filter{ font-family:var(--font); font-size:14px; letter-spacing:2px; text-transform:uppercase; padding:11px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; cursor:pointer; transition:background .4s var(--ease),color .4s var(--ease); }
.filter[aria-pressed="true"],.filter:hover{ background:#fff; color:var(--black); }

/* project list */
.projects{ padding:clamp(80px,9vw,140px) 0; }
.proj{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(30px,5vw,80px); align-items:end; padding-bottom:clamp(70px,8vw,120px); margin-bottom:clamp(70px,8vw,120px); border-bottom:1px solid color-mix(in srgb,var(--fg) 15%,transparent); }
.proj:last-child{ border-bottom:none; margin-bottom:0; }
.proj:nth-child(even){ grid-template-columns:1fr 1.6fr; }
.proj:nth-child(even) .proj-media{ order:2; }
.proj-media{ display:block; }
.proj-media .reveal-img{ aspect-ratio:16/10; }
.proj-media img{ transition:transform 1.4s var(--ease) !important; }
.proj-media:hover img{ transform:scale(1.06) !important; }
.proj-info small{ display:block; font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.proj-info h2{ margin:14px 0 18px; font-weight:300; font-size:clamp(40px,5vw,84px); line-height:.95; text-transform:uppercase; }
.proj-info p{ margin:0 0 26px; max-width:40ch; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.tags span{ font-size:13px; letter-spacing:1px; padding:6px 14px; border:1px solid color-mix(in srgb,var(--fg) 30%,transparent); border-radius:999px; }
.on-light .pill{ color:var(--fg); }
.proj[hidden]{ display:none; }
@media (max-width:860px){ .proj,.proj:nth-child(even){ grid-template-columns:1fr; } .proj:nth-child(even) .proj-media{ order:0; } }

/* project detail */
.meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; border-top:1px solid rgba(255,255,255,.2); padding-top:30px; margin-top:clamp(40px,5vw,70px); }
.meta dt{ font-size:13px; letter-spacing:3px; text-transform:uppercase; color:#A39B8F; margin-bottom:8px; }
.meta dd{ margin:0; font-size:18px; color:#fff; }
@media (max-width:760px){ .meta{ grid-template-columns:1fr 1fr; } }
.intro{ padding:clamp(100px,12vw,180px) 0 clamp(60px,7vw,100px); }
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,30px); padding-bottom:clamp(90px,10vw,150px); }
.gallery .g{ margin:0; }
.gallery .g .reveal-img{ height:100%; }
.g-full{ grid-column:1/-1; } .g-full .reveal-img{ aspect-ratio:21/10; }
.g-big{ grid-column:1/8; } .g-big .reveal-img{ aspect-ratio:4/3; }
.g-side{ grid-column:8/13; align-self:end; } .g-side .reveal-img{ aspect-ratio:4/5; }
.g-left{ grid-column:2/7; } .g-left .reveal-img{ aspect-ratio:4/5; }
.g-right{ grid-column:7/13; margin-top:clamp(60px,10vw,180px) !important; } .g-right .reveal-img{ aspect-ratio:4/3; }
.gallery figcaption{ margin-top:12px; font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
@media (max-width:760px){ .gallery .g{ grid-column:1/-1 !important; margin-top:0 !important; } .gallery .g .reveal-img{ aspect-ratio:4/3 !important; } }
.next-proj{ display:block; background:var(--black); color:#fff; padding:clamp(90px,11vw,170px) 0; position:relative; overflow:hidden; }
.next-proj small{ font-size:14px; letter-spacing:4px; text-transform:uppercase; color:#A39B8F; }
.next-proj strong{ display:block; font-weight:200; font-size:clamp(54px,11vw,200px); line-height:.9; text-transform:uppercase; margin-top:14px; transition:letter-spacing 1s var(--ease); }
.next-proj:hover strong{ letter-spacing:.04em; }

/* service detail */
.svc-section{ padding:clamp(90px,10vw,160px) 0; border-bottom:1px solid color-mix(in srgb,var(--fg) 12%,transparent); }
.svc-section:nth-of-type(even){ background:var(--stone); }
.svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px); align-items:center; }
.svc-section:nth-of-type(even) .svc-grid > .reveal-img{ order:2; }
.svc-grid .reveal-img{ aspect-ratio:4/5; }
.svc-copy small{ font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.svc-copy h2{ margin:16px 0 26px; font-weight:200; font-size:clamp(46px,6vw,104px); line-height:.92; text-transform:uppercase; }
.svc-copy > p{ margin:0 0 36px; max-width:48ch; font-size:clamp(17px,1.35vw,20px); }
.svc-copy h3{ font-size:14px; letter-spacing:3px; text-transform:uppercase; font-weight:400; margin:0 0 14px; }
.checks{ list-style:none; margin:0 0 30px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 30px; }
.checks li{ padding-left:22px; position:relative; font-size:17px; }
.checks li::before{ content:""; position:absolute; left:0; top:.62em; width:11px; height:11px; border:1px solid var(--fg); border-left:none; }
.svc-copy .use{ font-size:16px; color:var(--muted); margin:0; }
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr; } .svc-section:nth-of-type(even) .svc-grid > .reveal-img{ order:0; } .checks{ grid-template-columns:1fr; } }

/* about page */
.story{ padding:clamp(100px,12vw,180px) 0; }
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,120px); margin-top:clamp(60px,8vw,120px); align-items:start; }
.story-grid .reveal-img{ aspect-ratio:4/5; }
.story-grid p{ margin:0 0 24px; font-size:clamp(17px,1.35vw,20px); max-width:50ch; }
.story-grid .sig{ margin-top:40px; font-size:15px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
@media (max-width:860px){ .story-grid{ grid-template-columns:1fr; } }
.values{ background:var(--black); color:#fff; padding:clamp(100px,12vw,180px) 0; }
.values h2{ margin:0 0 clamp(50px,7vw,100px); font-weight:200; font-size:clamp(44px,7vw,120px); line-height:.95; text-transform:uppercase; }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,60px); }
.values-grid div{ border-top:1px solid rgba(255,255,255,.25); padding-top:30px; }
.values-grid h3{ margin:0 0 14px; font-weight:300; font-size:clamp(26px,2.4vw,38px); }
.values-grid p{ margin:0; color:#D9D2C5; }
@media (max-width:860px){ .values-grid{ grid-template-columns:1fr; } }
.numbers{ padding:clamp(90px,10vw,150px) 0; }
.numbers-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.numbers-grid strong{ display:block; font-weight:200; font-size:clamp(70px,9vw,160px); line-height:.9; }
.numbers-grid span{ color:var(--muted); letter-spacing:1px; }
@media (max-width:700px){ .numbers-grid{ grid-template-columns:1fr; gap:50px; } }

/* contact page */
.form-section{ padding:clamp(90px,10vw,150px) 0; }
.form-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(40px,7vw,120px); }
.form-grid aside p{ margin:0 0 30px; max-width:36ch; font-size:clamp(17px,1.35vw,20px); }
.form-grid aside dl{ margin:0; display:grid; gap:24px; }
.form-grid aside dt{ font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.form-grid aside dd{ margin:0; font-size:18px; }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:34px 30px; }
.field{ position:relative; }
.field.full{ grid-column:1/-1; }
.field label{ display:block; font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input,.field select,.field textarea{ width:100%; font-family:var(--font); font-size:20px; font-weight:300; color:var(--fg); background:transparent; border:none; border-bottom:1px solid color-mix(in srgb,var(--fg) 30%,transparent); padding:10px 0 12px; outline:none; border-radius:0; transition:border-color .4s; }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-bottom-color:var(--fg); }
.field select option{ color:#141414; }
.hp{ position:absolute; left:-9999px; }
.form .pill{ justify-self:start; color:var(--fg); }
.form-note{ grid-column:1/-1; font-size:16px; margin:0; }
@media (max-width:860px){ .form-grid,.form{ grid-template-columns:1fr; } }

/* name bars (developers / projects) */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.name-bar{ overflow:hidden; padding:clamp(26px,3vw,40px) 0; border-block:1px solid color-mix(in srgb,currentColor 18%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.name-track{ display:flex; width:max-content; }
.name-track > div{ display:flex; align-items:center; gap:clamp(28px,3.4vw,56px); padding-right:clamp(28px,3.4vw,56px); flex:none; }
.name-track span{ font-size:clamp(20px,2.3vw,36px); font-weight:300; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; opacity:.72; transition:opacity .4s; }
.name-track span:hover{ opacity:1; }
.name-track i{ width:14px; height:14px; border:1px solid currentColor; border-left:none; opacity:.5; flex:none; }
.name-bar.projects-bar .name-track span{ font-size:clamp(30px,4vw,64px); font-weight:200; letter-spacing:.06em; }
@media (prefers-reduced-motion:no-preference){
  .name-track{ animation:nameScroll 70s linear infinite; }
  .projects-bar .name-track{ animation-duration:110s; animation-direction:reverse; }
  .name-bar:hover .name-track{ animation-play-state:paused; }
  @keyframes nameScroll{ to{ transform:translateX(-50%); } }
}
.dev-section{ padding:clamp(70px,8vw,120px) 0; }
.dev-section .wrap{ margin-bottom:clamp(30px,4vw,50px); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.dev-section h2{ margin:0; font-weight:200; font-size:clamp(36px,5vw,84px); line-height:.95; text-transform:uppercase; }
.dev-section p{ margin:0; max-width:38ch; color:var(--muted); }
.projects-band{ background:var(--black); color:#fff; padding:0; }

.logo-bar .name-track > div{ gap:clamp(36px,4.4vw,72px); padding-right:clamp(36px,4.4vw,72px); }
.logo-bar img{ display:block; opacity:.82; transition:opacity .4s; flex:none; }
.logo-bar img:hover{ opacity:1; }
.logo-bar .name-track span{ font-size:clamp(16px,1.6vw,24px); font-weight:400; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-bar img{ filter:invert(1); } }
:root[data-theme="dark"] .logo-bar img{ filter:invert(1); }