/*
Theme Name: Shariq Afridi Portfolio
Theme URI:
Author: Shariq Afridi
Description: ACF/SCF block-based portfolio theme. Projects are a custom post type; pages are assembled from Flexible Content blocks.
Version: 1.0.0
WPVibe: yes
*/

/* Compiled from src/scss/. Edit the SCSS, not this file. */

:root{
  --bg:        #08090b;
  --bg-2:      #0d0f12;
  --bg-3:      #12151a;
  --line:      #1e2229;
  --line-soft: #16191f;
  --fg:        #edeef0;
  --fg-mid:    #9aa0aa;
  --fg-dim:    #6a7079;
  --accent:    #c8f04e;
  --accent-dk: #9dc22e;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1500px;
  --sec: clamp(64px, 7vw, 116px);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

/* height:auto is load-bearing — without it the width/height attributes on the
   screenshots win and every image renders stretched to its intrinsic height. */
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

::selection{ background:var(--accent); color:#000; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip{
  position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--accent); color:#000; padding:10px 16px; border-radius:6px;
  font:500 13px/1 var(--mono);
}
.skip:focus{ top:16px; }

/* admin bar shouldn't cover the fixed nav */
body.admin-bar .nav{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .nav{ top:46px; } }

/* ── loader ─────────────────────────────────────────── */
.loader{ position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center; }
.loader__inner{ text-align:center; }
.loader__name{ font:500 12px/1 var(--mono); letter-spacing:.4em; color:var(--fg-dim); }
.loader__bar{ margin-top:18px; width:min(220px,50vw); height:1px; background:var(--line); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--accent); }

/* ── nav ────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:24px;
  padding:16px var(--pad);
  transition:background .4s var(--ease), border-color .4s, padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,9,11,.8);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
  padding-top:11px; padding-bottom:11px;
}
.nav__logo{ font:600 16px/1 var(--mono); letter-spacing:.06em; margin-right:auto; }
.nav__logo span{ color:var(--accent); }
.nav__links{ display:flex; gap:26px; }
.nav__links a{
  font:400 13px/1 var(--mono); color:var(--fg-mid);
  position:relative; padding:4px 0; transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after{ width:100%; }

.nav__burger{ display:none; width:34px; height:34px; position:relative; }
.nav__burger span{
  position:absolute; left:7px; width:20px; height:1.5px; background:var(--fg);
  transition:transform .35s var(--ease);
}
.nav__burger span:first-child{ top:14px; }
.nav__burger span:last-child{ top:20px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.mobilemenu{
  position:fixed; inset:0; z-index:99; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--pad);
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .6s var(--ease);
}
.mobilemenu.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.mobilemenu a{
  font:600 clamp(30px,8.5vw,50px)/1.15 var(--sans); letter-spacing:-.02em;
  padding:6px 0; border-bottom:1px solid var(--line-soft);
}

/* ── buttons ────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:100px;
  background:var(--accent); color:#000;
  font:500 14px/1 var(--mono);
  border:1px solid var(--accent);
  transition:background .3s, transform .3s var(--ease), border-color .3s;
}
.btn:hover{ background:var(--accent-dk); border-color:var(--accent-dk); transform:translateY(-2px); color:#000; }
.btn em{ font-style:normal; opacity:.6; font-size:12px; }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line); }
.btn--ghost:hover{ background:var(--bg-3); border-color:var(--fg-dim); color:var(--fg); }
.btn--sm{ padding:10px 16px; font-size:12.5px; }

/* ── hero ───────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:104px var(--pad) 34px;
  overflow:hidden;
}
.hero__gl{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.6s ease .3s; }
.hero__gl.is-live{ opacity:1; }
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  opacity:.7;
}
/* The hero block is centred as one unit. Nothing is pushed to the bottom
   with an auto margin — that was opening a dead band above the stats. */
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin:0 auto;
}

.hero__id{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:clamp(20px,3vh,34px);
  font:400 12.5px/1 var(--mono); letter-spacing:.04em;
}
.hero__name{ color:var(--fg); font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.hero__sep{ width:26px; height:1px; background:var(--line); }
.hero__role{ color:var(--fg-mid); }
.hero__avail{ display:inline-flex; align-items:center; gap:7px; margin-left:auto; color:var(--accent); }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(200,240,78,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(200,240,78,0); }
  100%{ box-shadow:0 0 0 0 rgba(200,240,78,0); }
}

.hero__title{
  font-weight:600; letter-spacing:-.042em; line-height:.94;
  font-size:clamp(44px, 9.2vw, 148px);
  margin-bottom:clamp(28px,4vh,48px);
  text-wrap:balance;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero__title .line > span{ display:block; }
.hero__title .line:last-child > span{ color:var(--accent); }

.hero__meta{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:28px 56px; align-items:end;
  border-top:1px solid var(--line); padding-top:26px;
}
.hero__lede{ font-size:clamp(15px,1.15vw,18px); color:var(--fg-mid); max-width:60ch; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }

.hero__stats{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw);
  margin:clamp(30px,5.5vh,68px) auto 0;
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
}
.stat{ padding:20px 0 24px; }
.stat + .stat{ border-left:1px solid var(--line); padding-left:20px; }
.stat__v{
  font:600 clamp(19px,2.1vw,30px)/1 var(--sans); letter-spacing:-.02em;
  display:block; margin-bottom:6px; font-variant-numeric:tabular-nums;
}
.stat__l{ font:400 11px/1.3 var(--mono); color:var(--fg-dim); }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:26px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero__scroll span{ font:400 10px/1 var(--mono); letter-spacing:.28em; color:var(--fg-dim); writing-mode:vertical-rl; }
.hero__scroll i{ width:1px; height:44px; background:linear-gradient(var(--accent), transparent); }

/* ── client band ────────────────────────────────────── */
.clients{
  border-block:1px solid var(--line); background:var(--bg-2);
  padding:26px 0 30px; overflow:hidden;
}
.clients__label{
  font:400 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-dim); padding:0 var(--pad); margin-bottom:20px;
}
.clients__track{ display:flex; gap:56px; width:max-content; will-change:transform; }
.clients__track span{
  font:500 clamp(17px,1.8vw,26px)/1 var(--sans); letter-spacing:-.02em;
  color:var(--fg-dim); white-space:nowrap;
  display:flex; align-items:center; gap:56px;
  transition:color .3s;
}
.clients__track span::after{ content:''; width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.5; }
.clients:hover .clients__track span{ color:var(--fg-mid); }

/* ── sections ───────────────────────────────────────── */
.section{
  max-width:var(--maxw); margin:0 auto;
  padding:var(--sec) var(--pad);
  display:flex; flex-direction:column; align-items:flex-start;
}
.section > * + *{ margin-top:22px; }
.section > .h2 + .section__sub{ margin-top:14px; }
.section > .filters{ margin-top:32px; }
.section > .workgrid,
.section > .services,
.section > .process,
.section > .stack,
.section > .about__cols{ margin-top:36px; width:100%; }
.section > .loadmore{ margin-top:36px; }

.tag{
  font:400 11.5px/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-dim);
}
.h2{
  font-weight:600; letter-spacing:-.035em; line-height:1.04;
  font-size:clamp(30px,4.6vw,64px); text-wrap:balance;
}
.section__sub{ color:var(--fg-mid); max-width:56ch; font-size:clamp(14px,1.05vw,17px); }

.bigtext{
  font-weight:500; letter-spacing:-.03em; line-height:1.18;
  font-size:clamp(23px,3.4vw,48px);
  max-width:26ch;
}
.bigtext .w{ display:inline-block; }

.about__cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,52px);
  border-top:1px solid var(--line); padding-top:36px;
}
.about__col h3{ font:500 17px/1.3 var(--sans); letter-spacing:-.015em; margin-bottom:11px; }
.about__col p{ color:var(--fg-mid); font-size:15px; }

/* ── results band ───────────────────────────────────── */
.results{ background:var(--bg-2); border-block:1px solid var(--line); }
.results__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(48px,5.5vw,80px) var(--pad); }
.results__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  margin-top:32px; background:var(--line); border:1px solid var(--line);
}
.result{ background:var(--bg-2); padding:26px 22px 28px; }
.result__v{
  font:600 clamp(30px,3.6vw,54px)/1 var(--sans); letter-spacing:-.035em;
  display:block; margin-bottom:9px; font-variant-numeric:tabular-nums;
  color:var(--accent);
}
.result__l{ font:400 12px/1.45 var(--mono); color:var(--fg-mid); }
.results__note{ margin-top:20px; font:400 11.5px/1.5 var(--mono); color:var(--fg-dim); }

/* ── services ───────────────────────────────────────── */
.services{ border-top:1px solid var(--line); }
.service{
  display:grid; grid-template-columns:56px 1fr auto;
  gap:22px; align-items:center;
  padding:22px 4px; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left .45s var(--ease);
}
.service::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.service:hover{ padding-left:16px; }
.service:hover::before{ transform:scaleY(1); transform-origin:top; }
.service__n{ font:400 12px/1 var(--mono); color:var(--fg-dim); }
.service__t{
  font-weight:500; letter-spacing:-.025em;
  font-size:clamp(18px,2.1vw,30px); line-height:1.2;
  transition:color .35s;
}
.service:hover .service__t{ color:var(--accent); }
.service__d{ font:400 13px/1.5 var(--mono); color:var(--fg-dim); text-align:right; max-width:32ch; }

/* ── filters ────────────────────────────────────────── */
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filter{
  padding:9px 17px; border:1px solid var(--line); border-radius:100px;
  font:400 12.5px/1 var(--mono); color:var(--fg-mid);
  transition:all .3s var(--ease);
}
.filter:hover{ border-color:var(--fg-dim); color:var(--fg); }
.filter.is-on{ background:var(--fg); border-color:var(--fg); color:#000; }
.filter b{ font-weight:400; opacity:.5; margin-left:6px; }

/* ── work grid ──────────────────────────────────────── */
.workgrid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.5vw,24px); }
.card{
  grid-column:span 4; position:relative; cursor:pointer;
  border:1px solid var(--line-soft); border-radius:10px;
  background:var(--bg-2); overflow:hidden;
  transition:border-color .4s;
}
.card--wide{ grid-column:span 6; }
.card:hover{ border-color:#2c323b; }
.card[hidden]{ display:none !important; }

.card__shot{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-3); }
.card__shot img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:saturate(.88) brightness(.94); transition:filter .5s;
}
.card:hover .card__shot img{ filter:saturate(1) brightness(1); }

/* the scroll-through: a tall capture that pans on hover */
.card__pan{ position:absolute; inset:0; overflow:hidden; opacity:0; transition:opacity .45s var(--ease); }
.card__pan img{
  width:100%; height:auto; object-fit:unset;
  transform:translateY(0); will-change:transform; filter:none;
}
.card.is-panning .card__pan{ opacity:1; }

.card__badge{
  position:absolute; top:12px; left:12px; z-index:3;
  padding:5px 10px; border-radius:100px;
  background:rgba(8,9,11,.74); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.09);
  font:400 10.5px/1 var(--mono); color:var(--fg);
}
.card__open{
  position:absolute; right:12px; bottom:12px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:#000; font-size:15px;
  opacity:0; transform:translateY(8px) scale(.85);
  transition:all .4s var(--ease);
}
.card:hover .card__open{ opacity:1; transform:none; }
.card__foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:15px 16px 17px; border-top:1px solid var(--line-soft);
}
.card__name{ font-weight:500; font-size:16px; letter-spacing:-.015em; }
.card__cat{ font:400 11px/1.3 var(--mono); color:var(--fg-dim); text-align:right; }

.loadmore{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.loadmore__count{ font:400 12px/1 var(--mono); color:var(--fg-dim); }
.loadmore.is-done .btn{ display:none; }

/* ── process ────────────────────────────────────────── */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,36px); }
.pstep{ border-top:1px solid var(--line); padding-top:20px; position:relative; }
.pstep::before{
  content:''; position:absolute; top:-1px; left:0; width:0; height:1px;
  background:var(--accent); transition:width 1s var(--ease);
}
.pstep.is-in::before{ width:100%; }
.pstep__n{ font:400 12px/1 var(--mono); color:var(--accent); margin-bottom:12px; display:block; }
.pstep h3{ font:500 19px/1.25 var(--sans); letter-spacing:-.02em; margin-bottom:9px; }
.pstep p{ color:var(--fg-mid); font-size:14.5px; }

/* ── stack ──────────────────────────────────────────── */
.stack{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); }
.stackgroup h3{
  font:400 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-dim); margin-bottom:16px; padding-bottom:13px;
  border-bottom:1px solid var(--line);
}
.stackgroup li{
  font-size:15px; color:var(--fg-mid); padding:6px 0;
  transition:color .3s, transform .3s var(--ease);
}
.stackgroup li:hover{ color:var(--accent); transform:translateX(4px); }

/* ── hire ───────────────────────────────────────────── */
.hire__title{
  font-weight:600; letter-spacing:-.04em; line-height:1.03;
  font-size:clamp(32px,6.2vw,88px); max-width:15ch; text-wrap:balance;
}
.hire__lede{ color:var(--fg-mid); max-width:56ch; font-size:clamp(14px,1.05vw,17px); }
.hire__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hire__note{ font:400 12.5px/1.6 var(--mono); color:var(--fg-dim); }

/* ── single project ─────────────────────────────────── */
.single{ max-width:var(--maxw); margin:0 auto; padding:calc(var(--sec) * .8) var(--pad) var(--sec); }
.single__head{ max-width:70ch; }
.single__back{
  display:inline-block; margin-bottom:26px;
  font:400 12.5px/1 var(--mono); color:var(--fg-dim); transition:color .3s;
}
.single__back:hover{ color:var(--accent); }
.single__title{
  font-weight:600; letter-spacing:-.04em; line-height:1.02;
  font-size:clamp(34px,6vw,84px); margin:14px 0 16px; text-wrap:balance;
}
.single__shot{
  margin:clamp(30px,4vw,54px) 0 0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg-3);
}
.single__shot img{ width:100%; height:auto; }
.single__body{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px); margin-top:clamp(30px,4vw,54px); align-items:start;
}
.single__copy{ color:var(--fg-mid); font-size:16px; }
.single__copy p{ margin:0 0 16px; }
.single__copy h2,.single__copy h3{
  color:var(--fg); font-weight:600; letter-spacing:-.02em;
  font-size:22px; margin:26px 0 10px;
}
.single__copy a{ color:var(--accent); }
.single__more{ padding-left:0; padding-right:0; }

/* ── footer ─────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--line);
  max-width:var(--maxw); margin:0 auto;
  padding:24px var(--pad) 32px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font:400 12px/1.5 var(--mono); color:var(--fg-dim);
}
.footer__top:hover{ color:var(--accent); }

/* ── project panel ──────────────────────────────────── */
.sheet{ position:fixed; inset:0; z-index:150; visibility:hidden; }
.sheet.is-open{ visibility:visible; }
.sheet__scrim{
  position:absolute; inset:0; background:rgba(4,5,6,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .5s var(--ease);
}
.sheet.is-open .sheet__scrim{ opacity:1; }
.sheet__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(720px,100%);
  background:var(--bg-2); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .6s var(--ease);
  display:flex; flex-direction:column;
}
.sheet.is-open .sheet__panel{ transform:none; }

.sheet__head{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 clamp(16px,3vw,28px) 0 clamp(22px,4vw,40px);
  height:60px; border-bottom:1px solid var(--line); background:var(--bg-2);
}
.sheet__eyebrow{ font:400 11.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); }
.sheet__close{
  width:40px; height:40px; border-radius:50%; font-size:14px; color:var(--fg-mid);
  display:grid; place-items:center; border:1px solid var(--line);
  transition:color .3s, border-color .3s;
}
.sheet__close:hover{ color:var(--accent); border-color:var(--accent); }

.sheet__body{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(24px,4vw,40px) clamp(22px,4vw,40px) 56px;
}
.sheet h3{
  font-weight:600; letter-spacing:-.03em; line-height:1.06;
  font-size:clamp(26px,3.4vw,42px); margin-bottom:12px; text-wrap:balance;
}
.sheet__badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.chip{ padding:6px 12px; border:1px solid var(--line); border-radius:100px; font:400 11.5px/1 var(--mono); color:var(--fg-mid); }
.chip--on{ background:var(--accent); border-color:var(--accent); color:#000; }
.sheet__url{
  display:inline-flex; align-items:center; gap:8px;
  font:400 13px/1.5 var(--mono); color:var(--accent);
  border-bottom:1px solid rgba(200,240,78,.3); padding-bottom:3px;
  word-break:break-all;
}
.sheet__shot{
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  margin:26px 0 0; aspect-ratio:16/10; background:var(--bg-3);
}
.sheet__shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.sheet__summary{ color:var(--fg-mid); font-size:15px; margin-top:20px; }
.sheet__meta{ margin-top:26px; border-top:1px solid var(--line); }
.sheet__row{
  display:grid; grid-template-columns:130px 1fr; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px;
}
.sheet__row dt{ font:400 11.5px/1.5 var(--mono); color:var(--fg-dim); letter-spacing:.08em; text-transform:uppercase; }
.sheet__row dd{ margin:0; color:var(--fg); }
.sheet__actions{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.sheet__share{ font:400 12px/1.6 var(--mono); color:var(--fg-dim); margin-top:18px; }
.sheet__share span{ color:var(--fg-mid); word-break:break-all; }
.linkcopy{
  display:inline-block; margin-left:8px; padding:4px 10px;
  border:1px solid var(--line); border-radius:100px;
  font:400 11px/1.4 var(--mono); color:var(--fg-mid); transition:all .3s;
}
.linkcopy:hover{ border-color:var(--accent); color:var(--accent); }

.reveal-line{ will-change:transform, opacity; }

/* ── responsive ─────────────────────────────────────── */
@media (max-width:1100px){
  .about__cols{ grid-template-columns:1fr 1fr; }
  .process{ grid-template-columns:1fr 1fr; }
  .stack{ grid-template-columns:1fr 1fr; }
  .results__grid{ grid-template-columns:1fr 1fr; }
  .card, .card--wide{ grid-column:span 6; }
  .service{ grid-template-columns:40px 1fr; }
  .service__d{ display:none; }
  .hero__stats{ grid-template-columns:repeat(3,1fr); }
  .stat:nth-child(4){ border-left:0; padding-left:0; }
  .hero__meta{ grid-template-columns:1fr; align-items:start; }
  .hero__cta{ justify-content:flex-start; }
  .single__body{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav .btn--sm{ display:none; }
  .nav__burger{ display:block; }
  .hero{ min-height:auto; padding-top:120px; padding-bottom:12px; }
  .hero__id{ gap:10px; font-size:11.5px; }
  .hero__avail{ margin-left:0; }
  .hero__sep{ display:none; }
  .hero__scroll{ display:none; }
  .hero__stats{ grid-template-columns:repeat(2,1fr); }
  .stat{ padding:15px 0 17px; border-top:1px solid var(--line-soft); }
  .stat + .stat{ border-left:0; padding-left:0; }
  .about__cols{ grid-template-columns:1fr; gap:28px; }
  .process{ grid-template-columns:1fr; }
  .stack{ grid-template-columns:1fr; }
  .results__grid{ grid-template-columns:1fr; }
  .card, .card--wide{ grid-column:span 12; }
  .footer{ flex-direction:column; gap:8px; }
  .footer__mid{ order:3; }
  .sheet__panel{ width:100%; border-left:0; }
  .sheet__row{ grid-template-columns:1fr; gap:4px; }
}

/* ── reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero__gl{ display:none; }
  .clients__track{ transform:none !important; }
  .card__pan{ display:none; }
}