/* ══════════════════════════════════════════════════
   MEKCON — shared design system
   ══════════════════════════════════════════════════ */
:root{
  --char:#1A1A1D; --char-deep:#0B0B0D; --orange:#E8934A; --orange-lt:#F2A862;
  --bone:#F2F0EC; --bone-2:#E7E4DE; --grey:#D8D5CF;
  --ink:#0A0A0B; --mute:#8C8C90; --mute-lt:#4B4B50;
  --sans:'Archivo',-apple-system,sans-serif; --mono:'IBM Plex Mono',monospace;
  --e:cubic-bezier(.19,1,.22,1);
  --pad:clamp(24px,4vw,52px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lock{overflow:hidden;height:100vh}
::selection{background:var(--orange);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.015em}

/* grain */
body::after{content:"";position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:200;opacity:.032;
 background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }

/* ── page transition veil ── */
#veil{position:fixed;inset:0;z-index:400;background:var(--ink);pointer-events:none;
  transform:scaleY(1);transform-origin:top;transition:transform 1.05s var(--e)}
#veil.up{transform:scaleY(0);transform-origin:top}
#veil.down{transform:scaleY(1);transform-origin:bottom;pointer-events:all}

/* ── preloader (index only) ── */
#pre{position:fixed;inset:0;z-index:500;background:var(--ink);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .85s var(--e),visibility .85s}
#pre.done{opacity:0;visibility:hidden}
#pre .mk{width:72px;opacity:0;animation:mkIn 1s var(--e) .1s forwards}
@keyframes mkIn{to{opacity:1}}
#pre .bar{width:180px;height:1px;background:rgba(245,243,238,.15);position:relative;overflow:hidden}
#pre .bar i{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left}
#pre .pct{font-family:var(--mono);font-size:9.5px;letter-spacing:.34em;color:var(--mute)}

/* ── cursor ── */
#cd{position:fixed;width:5px;height:5px;background:var(--orange);border-radius:50%;
  z-index:250;pointer-events:none;transform:translate(-50%,-50%);will-change:transform}
#cr{position:fixed;width:32px;height:32px;border:1px solid rgba(183,154,91,.45);border-radius:50%;
  z-index:250;pointer-events:none;transform:translate(-50%,-50%);will-change:transform;
  transition:width .35s var(--e),height .35s var(--e),border-color .35s,background .35s}
#cr.on{width:72px;height:72px;background:rgba(183,154,91,.09);border-color:transparent}
@media(hover:none),(pointer:coarse){#cd,#cr{display:none}}

/* ── chrome ── */
.top{position:fixed;top:0;left:0;right:0;z-index:100;padding:28px var(--pad);
  display:flex;align-items:flex-start;justify-content:space-between;
  pointer-events:none;transition:background .45s var(--e)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,11,.38),transparent 72%);
  transition:opacity .45s var(--e)}
.top.scrolled{background:transparent}
.top.scrolled::before{opacity:0}
/* over a light section the chrome flips to ink so it stays legible
   while the bar itself remains fully transparent */
.top.on-light .wordmark,
.top.on-light .tagline,
.top.on-light .side{color:var(--ink)}
.top.on-light .dots i{background:var(--ink)}
.top.on-light .tagline{opacity:.7}
.top>*{pointer-events:auto}
.wordmark{font-size:clamp(19px,2.2vw,28px);font-weight:700;letter-spacing:.42em;
  text-indent:.42em;color:#fff;line-height:1;display:block}
.tagline{font-family:var(--mono);font-size:8.5px;letter-spacing:.26em;color:#fff;
  text-align:center;line-height:1.95;margin-top:8px;opacity:.82}
.brand{position:absolute;left:50%;transform:translateX(-50%);text-align:center}
.dots{display:flex;gap:6px;cursor:pointer;padding:9px}
.dots i{width:7px;height:7px;border-radius:50%;background:#fff;transition:transform .35s var(--e)}
.dots:hover i:nth-child(1){transform:translateY(-4px)}
.dots:hover i:nth-child(3){transform:translateY(4px)}
.side{font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:#fff;line-height:1.9}
@media(max-width:640px){.side{display:none}}

.mono-fix{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:100;
  width:50px;opacity:.8;pointer-events:none}
.mono-fix *{stroke:var(--orange)}

/* ── menu ── */
#menu{position:fixed;inset:0;z-index:150;background:var(--char-deep);
  clip-path:circle(0% at calc(100% - 52px) 44px);transition:clip-path 1.05s var(--e);
  display:flex;align-items:center;justify-content:center}
#menu.open{clip-path:circle(150% at calc(100% - 52px) 44px)}
#menu nav{text-align:center}
#menu a{display:block;font-size:clamp(2rem,6.4vw,4.6rem);font-weight:500;letter-spacing:-.025em;
  padding:6px 0;opacity:0;transform:translateY(24px);
  transition:opacity .65s var(--e),transform .65s var(--e),color .3s}
#menu.open a{opacity:1;transform:none}
#menu a:hover,#menu a.cur{color:var(--orange)}
#menu a span{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--orange);
  vertical-align:super;margin-right:13px;opacity:.65}
#menu .mfoot{position:absolute;bottom:32px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--mute);opacity:0;
  transition:opacity .6s var(--e) .55s}
#menu.open .mfoot{opacity:1}
#close{position:absolute;top:32px;right:var(--pad);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.26em;cursor:pointer;color:var(--bone);z-index:2}

/* ── layout ── */
section{position:relative}
.light{background:var(--bone);color:var(--ink)}
.wrap{max-width:1500px;margin:0 auto;padding:clamp(80px,12vh,160px) var(--pad)}
.wrap-n{max-width:1500px;margin:0 auto;padding:0 var(--pad)}
.idx{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--orange);display:block}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:1px solid rgba(245,243,238,.14);padding-bottom:18px;margin-bottom:clamp(38px,6vh,72px)}
.light .sec-top{border-color:rgba(10,13,18,.14)}
.sec-top h2{font-size:clamp(1.4rem,2.9vw,2.3rem);text-transform:uppercase}

/* page hero (inner pages) */
.phero{position:relative;height:66svh;min-height:420px;display:flex;align-items:flex-end;overflow:hidden}
.phero .shot{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1);animation:kb 18s ease-out forwards}
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,13,18,.6) 0%,rgba(10,13,18,.2) 45%,rgba(10,13,18,.85) 100%)}
.phero .ptitle{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(40px,7vh,72px);max-width:1500px;margin:0 auto}
.phero h1{font-size:clamp(2.4rem,7.5vw,6rem);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.98}
.phero .sub{font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--orange);margin-bottom:16px;display:block}
@keyframes kb{to{transform:scale(1.12)}}

/* ── index hero ── */
#hero{position:relative;height:100svh;overflow:hidden}
#hero .shot{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1);transform-origin:52% 46%;
  animation:heroZoom 44s ease-in-out infinite alternate;
  will-change:transform;backface-visibility:hidden}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.16)}}
@media(prefers-reduced-motion:reduce){#hero .shot{animation:none;transform:scale(1.04)}}
#hero::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(10,13,18,.5) 0%,rgba(10,13,18,.12) 38%,rgba(10,13,18,.72) 100%)}
.scroll-cue{position:absolute;left:var(--pad);bottom:30px;z-index:3;font-family:var(--mono);
  font-size:9px;letter-spacing:.26em;color:rgba(245,243,238,.75);display:flex;align-items:center;gap:12px}
.scroll-cue i{display:block;width:48px;height:1px;background:rgba(245,243,238,.35);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--orange);
  transform:translateX(-100%);animation:sw 2.8s var(--e) infinite}
@keyframes sw{50%{transform:translateX(0)}100%{transform:translateX(100%)}}
.hero-meta{position:absolute;right:var(--pad);bottom:30px;z-index:3;text-align:right;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:rgba(245,243,238,.7);line-height:2}
@media(max-width:640px){.hero-meta{display:none}}

/* ── statement ── */
.statement{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.statement .shot{position:absolute;inset:-12% 0;background-size:cover;background-position:center;will-change:transform}
.statement::after{content:"";position:absolute;inset:0;background:rgba(8,11,16,.58)}
.stmt{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 var(--pad);width:100%}
.stmt h2{font-size:clamp(1.7rem,4.2vw,3.9rem);font-weight:700;line-height:1.14;
  letter-spacing:-.018em;text-transform:uppercase}
.stmt h2 .w{display:block;overflow:hidden}
.stmt h2 .w>i{display:block;font-style:normal;transform:translateY(105%);
  transition:transform 1s var(--e)}
.stmt.in h2 .w>i{transform:none}
.stmt h2 em{font-style:normal;color:var(--orange)}
.stmt .kicker{margin-bottom:28px}

/* ── work grid ── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(36px,5vw,64px) clamp(24px,3vw,42px)}
@media(max-width:820px){.grid{grid-template-columns:1fr;gap:38px}}
.proj{cursor:pointer;display:block}
.proj .fr{overflow:hidden;position:relative;aspect-ratio:4/3;background:var(--bone-2)}
.proj.portrait .fr{aspect-ratio:3/4}
.proj .fr img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)}
.proj:hover .fr img{transform:scale(1.055)}
.proj .cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:15px;gap:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.proj .cap b{font-weight:500}
.proj .cap .view{color:var(--orange);opacity:0;transform:translateX(-8px);white-space:nowrap;
  transition:opacity .45s var(--e),transform .45s var(--e)}
.proj:hover .cap .view{opacity:1;transform:none}
.proj .num{font-family:var(--mono);color:var(--orange);margin-right:9px}
.offset{margin-top:clamp(0px,7vw,110px)}
@media(max-width:820px){.offset{margin-top:0}}

/* ── big letters (values) ── */
.values{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(10,13,18,.14)}
@media(max-width:900px){.values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.values{grid-template-columns:1fr}}
.val{position:relative;border-right:1px solid rgba(10,13,18,.14);border-bottom:1px solid rgba(10,13,18,.14);
  padding:clamp(80px,11vw,150px) 22px clamp(34px,5vw,60px);text-align:center;overflow:hidden;
  transition:background .55s var(--e)}
.val:hover{background:rgba(183,154,91,.07)}
.val .bigl{position:absolute;top:-.16em;left:50%;transform:translateX(-50%);
  font-size:clamp(9rem,15vw,15rem);font-weight:800;color:var(--orange);opacity:.13;
  line-height:1;pointer-events:none;letter-spacing:-.04em}
.val h3{position:relative;font-size:clamp(.95rem,1.35vw,1.15rem);font-weight:700;color:var(--char);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.45}
.val p{position:relative;font-family:var(--mono);font-size:11px;line-height:1.9;color:var(--mute-lt);margin-top:16px}

/* ── mono copy block ── */
.mono-block{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,6vw,90px)}
@media(max-width:860px){.mono-block{grid-template-columns:1fr;gap:26px}}
.mono-block h3{font-family:var(--mono);font-size:clamp(.95rem,1.5vw,1.15rem);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.6}
.mono-block .body p{font-family:var(--mono);font-size:13px;line-height:2.05;color:var(--mute-lt)}
.mono-block .body p+p{margin-top:20px}
.dark .mono-block .body p{color:#9DA3AC}

/* ── approach list ── */
.appr{border-top:1px solid rgba(245,243,238,.13)}
.appr .it{display:grid;grid-template-columns:76px 1fr 1.35fr;gap:clamp(16px,3vw,42px);
  padding:clamp(28px,4vw,46px) 0;border-bottom:1px solid rgba(245,243,238,.13);
  align-items:baseline;transition:padding-left .45s var(--e)}
.appr .it:hover{padding-left:14px}
@media(max-width:780px){.appr .it{grid-template-columns:44px 1fr}.appr .it p{grid-column:2}}
.appr .n{font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--orange)}
.appr h3{font-size:clamp(1.15rem,2.3vw,1.8rem);font-weight:600;transition:color .35s}
.appr .it:hover h3{color:var(--orange)}
.appr p{color:var(--mute);font-size:14px;line-height:1.95;max-width:560px}

/* ── quote ── */
.quote{background:var(--char-deep);text-align:center}
.quote .wrap{max-width:1080px}
.quote p{font-size:clamp(1.25rem,2.9vw,2.35rem);font-weight:500;line-height:1.45;letter-spacing:-.012em}
.quote p em{font-style:normal;color:var(--orange)}
.quote .by{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--mute);margin-top:30px}

/* full-bleed break */
.bleed{height:72svh;min-height:340px;background-size:cover;background-position:center}
@media(max-width:900px),(pointer:coarse){.bleed{height:52svh}}

/* split text+image */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:34px}}
.split .copy p{color:var(--mute-lt);font-size:15px;line-height:1.95;max-width:540px}
.dark .split .copy p{color:var(--mute)}
.split .copy p+p{margin-top:17px}
.split h2{font-size:clamp(1.5rem,3.2vw,2.6rem);text-transform:uppercase;margin:20px 0 22px;line-height:1.14}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid rgba(10,13,18,.14);
  padding-top:34px;margin-top:clamp(46px,7vh,80px)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:28px}}
.dark .stats{border-color:rgba(245,243,238,.13)}
.stats .s .v{font-size:clamp(2rem,4vw,3.2rem);font-weight:700;letter-spacing:-.03em;color:var(--orange)}
.stats .s .k{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--mute);margin-top:8px}

/* ── contact ── */
.cta-line{font-size:clamp(2rem,7vw,6rem);font-weight:700;letter-spacing:-.035em;
  text-transform:uppercase;line-height:1}
.cta-line a{position:relative;display:inline-block}
.cta-line a::after{content:"";position:absolute;left:0;bottom:.08em;height:3px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .75s var(--e)}
.cta-line a:hover::after{transform:scaleX(1);transform-origin:left}
.cdetail{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:clamp(46px,8vh,84px);
  border-top:1px solid rgba(245,243,238,.13);padding-top:28px}
@media(max-width:820px){.cdetail{grid-template-columns:1fr 1fr}}
.cdetail .lb{font-family:var(--mono);font-size:8.5px;letter-spacing:.28em;color:var(--orange);display:block;margin-bottom:9px}
.cdetail p,.cdetail a{font-size:14px;line-height:1.85;color:var(--bone)}
.cdetail a:hover{color:var(--orange)}

/* form */
.frm{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;margin-top:14px}
@media(max-width:700px){.frm{grid-template-columns:1fr}}
.frm .f{position:relative}
.frm .f.full{grid-column:1/-1}
.frm label{font-family:var(--mono);font-size:8.5px;letter-spacing:.26em;color:var(--orange);display:block;margin-bottom:10px}
.frm input,.frm textarea{width:100%;background:transparent;border:none;
  border-bottom:1px solid rgba(245,243,238,.2);color:var(--bone);font-family:var(--sans);
  font-size:15px;padding:9px 0;transition:border-color .4s}
.frm input:focus,.frm textarea:focus{outline:none;border-color:var(--orange)}
.frm textarea{resize:vertical;min-height:92px}
.btn{display:inline-flex;align-items:center;gap:14px;border:1px solid rgba(245,243,238,.25);
  background:transparent;color:var(--bone);font-family:var(--mono);font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;padding:17px 34px;cursor:pointer;
  transition:background .4s,color .4s,border-color .4s;margin-top:8px}
.btn:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}

/* next page link */
.nextp{border-top:1px solid rgba(245,243,238,.13);display:block;
  padding:clamp(40px,7vh,80px) var(--pad);text-align:center;transition:background .5s}
.nextp:hover{background:rgba(183,154,91,.055)}
.nextp .lb{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--orange)}
.nextp .t{font-size:clamp(1.7rem,5vw,3.6rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.03em;margin-top:14px;transition:transform .55s var(--e)}
.nextp:hover .t{transform:translateX(12px)}
.light .nextp{border-color:rgba(10,13,18,.14)}

footer{border-top:1px solid rgba(245,243,238,.1);padding:22px var(--pad);display:flex;
  justify-content:space-between;font-family:var(--mono);font-size:9px;
  letter-spacing:.22em;color:var(--mute);flex-wrap:wrap;gap:10px}
.light footer{border-color:rgba(10,13,18,.12);color:var(--mute-lt)}

/* ── reveals (only when scrolled to) ── */
.rv{opacity:0;transform:translateY(40px);
  transition:opacity 1.05s var(--e),transform 1.05s var(--e)}
.rv.in{opacity:1;transform:none}
.rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.35s var(--e)}
.rv-img.in{clip-path:inset(0 0 0 0)}
.rv-l{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv-l.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv,.rv-l{opacity:1;transform:none}.rv-img{clip-path:none}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — all scoped to media queries.
   Desktop rendering above 768px is unchanged.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  :root{--pad:20px}

  /* header */
  .top{padding:18px var(--pad)}
  .wordmark{font-size:17px;letter-spacing:.34em;text-indent:.34em}
  .tagline{font-size:7.5px;letter-spacing:.2em;margin-top:6px;line-height:1.8}
  .dots{padding:13px 10px;gap:5px}                 /* 44px+ tap target */
  .dots i{width:6px;height:6px}
  .mono-fix{width:38px;bottom:18px;opacity:.7}

  /* hero */
  #hero{height:100svh}
  .scroll-cue{font-size:8.5px;letter-spacing:.2em;bottom:22px;gap:9px}
  .scroll-cue i{width:34px}

  /* page heroes */
  .phero{height:58svh;min-height:340px}
  .phero .ptitle{padding-bottom:34px}
  .phero h1{font-size:clamp(2.4rem,13vw,3.6rem)}
  .phero .sub{font-size:9px;margin-bottom:12px}

  /* statement */
  .statement{min-height:88svh}
  .stmt h2{font-size:clamp(1.35rem,6.2vw,2rem);line-height:1.24}
  .stmt .kicker{margin-bottom:18px}

  /* section headers stack */
  .sec-top{flex-direction:column;align-items:flex-start;gap:9px;padding-bottom:14px}
  .sec-top h2{font-size:clamp(1.25rem,6vw,1.7rem)}

  /* menu */
  #menu a{font-size:clamp(1.8rem,9vw,2.6rem);padding:11px 0}
  #menu a span{font-size:9px;margin-right:9px}
  #close{top:20px;right:var(--pad);padding:12px;font-size:11px}
  #menu .mfoot{bottom:26px;font-size:8px}

  /* work grid */
  .proj .cap{font-size:9.5px;letter-spacing:.1em;gap:8px;margin-top:12px}
  .proj .num{margin-right:6px}

  /* values */
  .val{padding:clamp(64px,20vw,96px) 18px 34px}
  .val .bigl{font-size:clamp(7rem,32vw,10rem)}
  .val h3{font-size:1.02rem}
  .val p{font-size:11.5px;margin-top:13px}

  /* approach list */
  .appr .it{padding:26px 0;gap:14px}
  .appr h3{font-size:1.2rem}
  .appr p{font-size:14.5px;line-height:1.9}

  /* quote */
  .quote p{font-size:clamp(1.15rem,5.4vw,1.6rem);line-height:1.5}

  /* readability bumps */
  .split .copy p,.mono-block .body p{font-size:14.5px;line-height:1.95}
  .mono-block h3{font-size:1rem}
  .cdetail{gap:22px;margin-top:44px}
  .cdetail p,.cdetail a{font-size:15px}

  /* forms — 16px prevents iOS zoom-on-focus */
  .frm{gap:20px 22px;margin-top:10px}
  .frm input,.frm textarea{font-size:16px;padding:12px 0}
  .frm label{font-size:8px}
  .btn{width:100%;justify-content:center;padding:18px 24px;margin-top:4px}

  /* next-page + footer */
  .nextp{padding:44px var(--pad)}
  .nextp .t{font-size:clamp(1.5rem,8vw,2.4rem)}
  footer{flex-direction:column;align-items:flex-start;gap:7px;font-size:8.5px;padding:20px var(--pad)}

  .stats{gap:24px;padding-top:26px;margin-top:40px}
}

/* the hamburger must stay right once .side is hidden (≤640px) */
@media (max-width:640px){
  .top{justify-content:flex-end}
}

/* touch behaviour — no sticky :hover states on tap */
@media (pointer:coarse){
  *{-webkit-tap-highlight-color:rgba(183,154,91,.18)}
  body{overscroll-behavior-y:none}
  .proj:hover .fr img{transform:none}
  .proj .cap .view{opacity:1;transform:none}
  .nextp:hover .t{transform:none}
  .appr .it:hover{padding-left:0}
  .val:hover{background:none}
  .cta-line a::after{transform:scaleX(1);transform-origin:left}
}

/* notch / home-indicator safe areas */
@supports (padding:max(0px)){
  @media (max-width:768px){
    .top{padding-left:max(var(--pad),env(safe-area-inset-left));
         padding-right:max(var(--pad),env(safe-area-inset-right))}
    footer{padding-bottom:max(20px,env(safe-area-inset-bottom))}
    .mono-fix{bottom:max(18px,env(safe-area-inset-bottom))}
  }
}

/* ══════════════════════════════════════════════
   REVIEWS
   ══════════════════════════════════════════════ */
.rfeat{border-left:2px solid var(--orange);padding-left:clamp(20px,3vw,40px);max-width:1000px}
.rfeat .stars{color:var(--orange);letter-spacing:5px;font-size:14px;display:block;margin-bottom:20px}
.rfeat blockquote{font-size:clamp(1.35rem,3.1vw,2.5rem);font-weight:500;line-height:1.38;letter-spacing:-.018em}
.rfeat blockquote em{font-style:normal;color:var(--orange)}
.rfeat .who{font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--mute);margin-top:26px;display:block}

.revgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,34px)}
@media(max-width:860px){.revgrid{grid-template-columns:1fr}}
.rcard{border:1px solid rgba(10,10,11,.13);padding:clamp(24px,3vw,38px);display:flex;
  flex-direction:column;transition:background .5s var(--e),border-color .5s var(--e)}
.rcard:hover{background:rgba(232,147,74,.055);border-color:rgba(232,147,74,.4)}
.dark .rcard,section:not(.light) .rcard{border-color:rgba(242,240,236,.14)}
.rcard .stars{color:var(--orange);letter-spacing:4px;font-size:12px;margin-bottom:16px}
.rcard p{font-size:14.5px;line-height:1.9;color:var(--mute-lt);flex:1}
.light .rcard p{color:var(--mute-lt)}
.rcard .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(10,10,11,.11);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.rcard .meta b{font-weight:500;color:var(--ink)}
.rcard .meta span{color:var(--mute)}
.rcard .job{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--orange);
  text-transform:uppercase;margin-bottom:12px;display:block}
@media(max-width:768px){
  .rcard p{font-size:14px}
  .rfeat{padding-left:16px}
}

/* ══════════════════════════════════════════════
   REVIEW BELT — continuous, seamless marquee
   ══════════════════════════════════════════════ */
.rbelt{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rbelt-track{display:flex;gap:clamp(16px,2vw,26px);width:max-content;
  animation:beltRun 30s linear infinite;will-change:transform}
.rbelt:hover .rbelt-track{animation-play-state:paused}
@keyframes beltRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.rbelt-card{flex:0 0 auto;width:clamp(268px,24vw,340px);
  border:none;border-left:2px solid rgba(232,147,74,.5);
  padding:4px 0 4px clamp(16px,1.5vw,22px);
  display:flex;flex-direction:column;background:none;
  transition:border-color .45s var(--e)}
.rbelt-card:hover{border-color:rgba(232,147,74,.45);background:rgba(232,147,74,.05)}
.rbelt-card .job{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;color:var(--orange);
  text-transform:uppercase;display:block;margin-bottom:6px}
.rbelt-card .stars{color:var(--orange);letter-spacing:3px;font-size:10px;margin-bottom:7px}
.rbelt-card p{font-size:13px;line-height:1.58;color:var(--mute-lt);flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rbelt-card .who{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);font-weight:500;margin-top:9px;padding-top:0;border-top:none}
.rbelt-card .who span{color:var(--mute);margin-left:10px;font-weight:400}

@media(max-width:768px){
  .rbelt-track{animation-duration:22s}
  .rbelt-card{width:78vw;padding:24px 22px}
  .rbelt-card p{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  .rbelt-track{animation:none}
  .rbelt{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ══════════════════════════════════════════════
   BEFORE / AFTER COMPARISON SLIDER
   Handles mismatched source aspect ratios: both
   images are cover-fitted into one fixed frame,
   so a portrait + landscape pair still aligns.
   ══════════════════════════════════════════════ */
.ba{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;
  background:var(--char-deep);cursor:grab;user-select:none;
  -webkit-user-select:none;touch-action:pan-y}
.ba.dragging{cursor:grabbing}
@media(max-width:700px){.ba{aspect-ratio:4/3}}

.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;-webkit-user-drag:none}
/* per-image framing control — nudge if a real photo crops badly */
.ba .ba-before img{object-position:var(--pos-before,center)}
.ba .ba-after  img{object-position:var(--pos-after,center)}

.ba-before,.ba-after{position:absolute;inset:0}
/* the AFTER layer is revealed from the left by the handle */
.ba-after{clip-path:inset(0 0 0 var(--x,50%));will-change:clip-path}

.ba-tag{position:absolute;bottom:18px;z-index:3;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  padding:8px 14px;background:rgba(11,11,13,.72);color:var(--bone);
  backdrop-filter:blur(6px);pointer-events:none;transition:opacity .35s}
.ba-tag.b{left:18px}
.ba-tag.a{right:18px;background:rgba(232,147,74,.92);color:#161616;font-weight:600}

.ba-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;
  background:var(--orange);z-index:4;pointer-events:none;will-change:left;
  box-shadow:0 0 22px rgba(232,147,74,.55)}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:var(--orange);
  display:flex;align-items:center;justify-content:center;gap:5px;
  box-shadow:0 6px 26px rgba(0,0,0,.4);transition:transform .25s var(--e)}
.ba.dragging .ba-knob{transform:translate(-50%,-50%) scale(.9)}
.ba-knob i{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}
.ba-knob i:first-child{border-right:7px solid #161616}
.ba-knob i:last-child{border-left:7px solid #161616}
@media(max-width:700px){
  .ba-knob{width:46px;height:46px}
  .ba-tag{font-size:8.5px;padding:7px 11px;bottom:12px}
  .ba-tag.b{left:12px}.ba-tag.a{right:12px}
}
/* hint pulse until first interaction */
.ba:not(.touched) .ba-knob{animation:baPulse 2.6s ease-in-out infinite}
@keyframes baPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.09)}}
.ba:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

.ba-cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:15px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;flex-wrap:wrap}
.ba-cap .num{color:var(--orange);margin-right:9px}
.ba-cap .hint{color:var(--mute)}
@media(prefers-reduced-motion:reduce){.ba:not(.touched) .ba-knob{animation:none}}



/* ══════════════════════════════════════════════
   SOCIAL PROOF BAR
   ══════════════════════════════════════════════ */
.proofbar{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);
  margin-top:clamp(34px,5vh,54px);padding-top:26px;
  border-top:1px solid rgba(242,240,236,.14)}
@media(max-width:640px){.proofbar{grid-template-columns:1fr 1fr;gap:22px}}
.proofbar .pb{display:flex;flex-direction:column;gap:7px}
.proofbar .v{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;letter-spacing:-.035em;
  color:var(--orange);line-height:1}
.proofbar .k{font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mute)}
.proof-note{margin-top:26px;color:var(--mute);font-size:14.5px;line-height:1.85;max-width:60ch}

/* ══════════════════════════════════════════════
   DETAIL OVERLAY — projects & services
   ══════════════════════════════════════════════ */
#dtl{position:fixed;inset:0;z-index:300;display:flex;justify-content:flex-end;
  pointer-events:none;visibility:hidden}
#dtl.open{pointer-events:auto;visibility:visible}
#dtl .scrim{position:absolute;inset:0;background:rgba(6,6,8,.72);
  opacity:0;transition:opacity .6s var(--e);backdrop-filter:blur(3px)}
#dtl.open .scrim{opacity:1}

#dtl .panel{position:relative;width:min(660px,100%);height:100%;background:var(--bone);
  color:var(--ink);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .72s var(--e);
  -webkit-overflow-scrolling:touch}
#dtl.open .panel{transform:none}
@media(max-width:700px){#dtl .panel{width:100%}}

#dtl .phead{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--char-deep)}
#dtl .phead img{width:100%;height:100%;object-fit:cover}
#dtl .phead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,10,11,.72))}
#dtl .phead .cap{position:absolute;left:clamp(22px,4vw,40px);bottom:22px;z-index:2;color:var(--bone)}
#dtl .phead .cap .k{font-family:var(--mono);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--orange);display:block;margin-bottom:9px}
#dtl .phead .cap h3{font-size:clamp(1.4rem,3.4vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}

#dtl .pbody{padding:clamp(26px,4vw,44px)}
#dtl .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid rgba(10,10,11,.13)}
@media(max-width:520px){#dtl .meta{grid-template-columns:1fr 1fr}}
#dtl .meta div span{display:block}
#dtl .meta .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--orange);margin-bottom:6px}
#dtl .meta .v{font-size:14px;font-weight:600}
#dtl .pbody p{font-size:15px;line-height:1.9;color:var(--mute-lt)}
#dtl .pbody p+p{margin-top:15px}
#dtl .pbody h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink);margin:28px 0 13px}
#dtl .pbody ul{list-style:none;display:grid;gap:9px}
#dtl .pbody li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.75;color:var(--mute-lt)}
#dtl .pbody li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:1px;background:var(--orange)}
#dtl blockquote{margin-top:28px;padding:20px 22px;background:rgba(232,147,74,.09);
  border-left:2px solid var(--orange);font-size:14.5px;line-height:1.8;font-style:italic;color:var(--ink)}
#dtl blockquote cite{display:block;margin-top:11px;font-style:normal;font-family:var(--mono);
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
#dtl .pcta{display:inline-flex;align-items:center;gap:11px;margin-top:30px;
  background:var(--ink);color:var(--bone);font-family:var(--mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;padding:16px 28px;transition:background .35s}
#dtl .pcta:hover{background:var(--orange);color:var(--ink)}

#dtl .x{position:absolute;top:18px;right:18px;z-index:5;width:46px;height:46px;
  border-radius:50%;background:rgba(10,10,11,.55);backdrop-filter:blur(8px);
  border:none;cursor:pointer;color:#fff;font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .3s}
#dtl .x:hover{background:var(--orange);color:var(--ink)}

/* clickable affordance */
.proj,.svc-item{cursor:pointer}

/* service rows read as clickable */
.svc-more{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--orange);margin-top:10px;
  opacity:0;transform:translateX(-6px);
  transition:opacity .4s var(--e),transform .4s var(--e)}
.appr .it:hover .svc-more,.appr .it:focus-visible .svc-more{opacity:1;transform:none}
.appr .it:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(pointer:coarse){.svc-more{opacity:1;transform:none}}

/* ══════════════════════════════════════════════
   BACKGROUND VIDEO (hero + services)
   ══════════════════════════════════════════════ */
#hero .shot,.statement .shot{z-index:0}
.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;opacity:0;transition:opacity 2.5s var(--e);pointer-events:none}
.bgvid.on{opacity:1}
#hero::after{z-index:2}
.statement::after{z-index:2}
.statement .stmt{z-index:3}

/* ══════════════════════════════════════════════
   HOMEPAGE MOTION — entrance + scroll-linked
   ══════════════════════════════════════════════ */
/* hero chrome rises in once the veil lifts */
.hero-in .wordmark,
.hero-in .tagline,
.hero-in .side,
.hero-in .scroll-cue,
.hero-in .hero-meta{opacity:0;transform:translateY(16px);
  animation:heroRise 1.15s var(--e) forwards}
.hero-in .wordmark{animation-delay:.15s}
.hero-in .tagline{animation-delay:.30s}
.hero-in .side{animation-delay:.45s}
.hero-in .hero-meta{animation-delay:.55s}
.hero-in .scroll-cue{animation-delay:.70s}
@keyframes heroRise{to{opacity:1;transform:none}}

/* hero drifts away as you scroll — set by JS via --sp (0→1) */
#hero .shot,#hero .bgvid{transform:scale(calc(1 + (var(--sp,0) * .07)))}
#hero .scroll-cue,#hero .hero-meta{opacity:calc(1 - (var(--sp,0) * 1.6))}

/* statement image drifts opposite for depth */
.statement .shot{transform:translate3d(0,calc(var(--sp2,0) * -4%),0) scale(1.06)}

@media(prefers-reduced-motion:reduce){
  .hero-in .wordmark,.hero-in .tagline,.hero-in .side,
  .hero-in .scroll-cue,.hero-in .hero-meta{animation:none;opacity:1;transform:none}
  #hero .shot,#hero .bgvid,.statement .shot{transform:none}
}

/* ── about: credential grid + closer (fills dead space) ── */
.credgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(10,10,11,.13);
  margin-top:clamp(38px,6vh,64px);border:1px solid rgba(10,10,11,.13)}
@media(max-width:760px){.credgrid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.credgrid{grid-template-columns:1fr}}
.credgrid .cg{background:var(--bone);padding:22px 20px;display:flex;flex-direction:column;gap:8px;
  transition:background .45s var(--e)}
.credgrid .cg:hover{background:rgba(232,147,74,.07)}
.credgrid .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--orange)}
.credgrid .v{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45}
.closer{margin-top:clamp(40px,6vh,70px);display:flex;justify-content:space-between;
  align-items:center;gap:24px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(10,10,11,.13)}
.closer p{font-size:clamp(1.05rem,2.1vw,1.5rem);font-weight:600;letter-spacing:-.015em;color:var(--ink);max-width:24ch}
.closer-cta{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  background:var(--ink);color:var(--bone);padding:16px 30px;transition:background .35s,color .35s}
.closer-cta:hover{background:var(--orange);color:var(--ink)}

/* ══════════════════════════════════════════════
   MARQUEE TICKER — Leone-idiom top band
   ══════════════════════════════════════════════ */
:root{ --tick-h:34px; --tick-bg:var(--orange); --tick-fg:var(--ink); }

.ticker{position:fixed;top:0;left:0;right:0;z-index:140;height:var(--tick-h);
  background:var(--tick-bg);color:var(--tick-fg);overflow:hidden;
  display:flex;align-items:center;user-select:none;pointer-events:none}
.tick-track{display:flex;flex:none;min-width:200%;
  animation:tickRun 34s linear infinite;will-change:transform}
.tick-track span{flex:none;padding:0 3.2vw;white-space:nowrap;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.22em}
@keyframes tickRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* header + monogram clear the band */
.ticker ~ .top{top:var(--tick-h)}
.ticker ~ #menu #close{top:calc(32px + var(--tick-h))}

/* hero wordmark scales up to Leone weight, but only over the hero */
.top:not(.scrolled) .wordmark{font-size:clamp(26px,4.4vw,54px);letter-spacing:.38em}
.top:not(.scrolled) .tagline{font-size:9.5px;letter-spacing:.3em;margin-top:14px}
.wordmark,.tagline{transition:font-size .5s var(--e),letter-spacing .5s var(--e)}

/* the band is decorative — never let it eat the veil or preloader */
#veil,#pre{z-index:400}
#pre{z-index:500}

@media(max-width:700px){
  :root{--tick-h:28px}
  .tick-track span{font-size:9.5px;letter-spacing:.18em;padding:0 6vw}
  .tick-track{animation-duration:22s}
}
@media(prefers-reduced-motion:reduce){
  .tick-track{animation:none;transform:none}
}

/* ══════════════════════════════════════════════
   WORK — category badge + filter
   ══════════════════════════════════════════════ */
.ptag{position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);background:rgba(10,10,11,.78);
  padding:6px 10px;pointer-events:none}

.pfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(26px,3.4vw,40px)}
.pf{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute-lt);background:none;border:1px solid rgba(26,26,29,.16);
  padding:9px 15px;cursor:pointer;transition:color .3s var(--e),border-color .3s var(--e),background .3s var(--e)}
.pf:hover{color:var(--ink);border-color:rgba(26,26,29,.42)}
.pf.on{color:var(--ink);border-color:var(--orange);background:rgba(232,147,74,.09)}
.pf:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.proj.hide{display:none}
@media(max-width:640px){
  .pf{font-size:8.5px;padding:8px 12px;letter-spacing:.16em}
  .ptag{top:10px;left:10px;font-size:8px;padding:5px 8px}
}


/* hero crossfade — linear so the blend rate is constant.
   The site's --e curve is expo-out: it slams opacity to ~90%
   instantly, which reads as a bright pop mid-dissolve. */
#heroVid,#heroVidB{transition:opacity 2.5s linear}

/* ── hero playback smoothness ──
   Two video layers cross-dissolving is already a heavy compositing job.
   Once a clip is up it fully covers the poster, so the poster's 44s zoom
   is invisible work — stop it. Promote the layers to their own GPU
   surfaces so the dissolve doesn't repaint the whole hero each frame. */
#hero.vid-on .shot{animation:none;will-change:auto}
#heroVid,#heroVidB{transform:translateZ(0);backface-visibility:hidden;contain:paint}

/* ══════════════════════════════════════════════
   PROJECT PAGES — body + review + gallery + lightbox
   ══════════════════════════════════════════════ */
.pj-top{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(30px,4vw,64px);align-items:start}
.pj-body .lead{font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.72;color:var(--mute-lt);max-width:60ch}
.pj-facts{margin-top:clamp(26px,3.4vw,40px)}

.pj-review{border-left:2px solid var(--orange);padding:2px 0 2px clamp(18px,1.6vw,26px)}
.pj-review .stars{color:var(--orange);letter-spacing:3px;font-size:11px;display:block;margin-bottom:12px}
.pj-review blockquote{font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.66;color:var(--ink);font-weight:500}
.pj-review .who{display:block;margin-top:14px;font-family:var(--mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:500}
.pj-review .who span{color:var(--mute);margin-left:10px;font-weight:400}

.pj-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px)}
.gi{display:block;overflow:hidden;background:var(--bone-2);cursor:zoom-in;position:relative}
.gi img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--e)}
.gi:hover img{transform:scale(1.045)}

#lb{position:fixed;inset:0;z-index:300;background:rgba(6,6,8,.94);display:flex;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,60px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--e)}
#lb.open{opacity:1;visibility:visible}
#lb img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.6)}
#lb .x{position:absolute;top:20px;right:24px;width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:20px;cursor:pointer;line-height:1}
#lb .x:hover{background:var(--orange);color:var(--ink)}

@media(max-width:900px){
  .pj-top{grid-template-columns:1fr;gap:28px}
  .pj-gal{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){ .pj-gal{grid-template-columns:1fr} }