/* ============================================
   YASSIN STUDIO — Design System
   Pure monochrome · Black · White · Gray
   ============================================ */
:root{
  --bg:#080808;
  --bg-2:#0e0e0e;
  --surface:#141414;
  --lift:#1a1a1a;
  --line:#222222;
  --line-2:#2e2e2e;
  --muted:#6a6a6a;
  --ink-3:#9a9a9a;
  --ink-2:#c8c8c8;
  --ink:#f5f5f5;
  --white:#ffffff;
  --shadow:0 30px 80px rgba(0,0,0,.6);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --ease:cubic-bezier(.7,0,.3,1);
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased; }
html,body{ background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; overflow-x:hidden; font-size:16px; line-height:1.6; }
body.locked{ overflow:hidden; }
::selection{ background:var(--white); color:#000; }
::-webkit-scrollbar{ width:0; height:0; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ background:none; border:0; cursor:pointer; color:inherit; font:inherit; }

/* TYPE */
.serif{ font-family:'Fraunces',Georgia,serif; font-variation-settings:"opsz" 144,"SOFT" 50; letter-spacing:-0.02em; }
.sans{ font-family:'Bricolage Grotesque','Inter',sans-serif; letter-spacing:-0.025em; font-weight:600; }
.mono{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; }

body::after{ content:""; position:fixed; inset:0; z-index:9990; pointer-events:none; background-image:var(--grain); opacity:.04; mix-blend-mode:overlay; }

/* PERSISTENT 3D CANVAS */
#bg-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }
main, section, header, footer{ position:relative; z-index:2; }

/* CURSOR */
.cur{ position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%; background:var(--white); pointer-events:none; z-index:9999; mix-blend-mode:difference; transform:translate(-50%,-50%); transition:width .35s, height .35s; }
.cur.big{ width:84px; height:84px; }
.cur-label{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); font-family:'JetBrains Mono',monospace; font-size:10px; color:#000; font-weight:700; letter-spacing:.15em; opacity:0; transition:opacity .25s; text-transform:uppercase; mix-blend-mode:difference; }
.cur.big + .cur-label{ opacity:1; color:#000; }
@media (max-width:900px), (hover:none){ .cur, .cur-label{ display:none; } }

/* SCROLL PROGRESS */
.progress{ position:fixed; top:0; left:0; right:0; height:1px; background:var(--white); transform-origin:left; transform:scaleX(0); z-index:80; }

/* ============================================
   LOADER — Active Theory style cinematic open
   ============================================ */
#loader{
  position:fixed; inset:0; background:#000; z-index:10000;
  display:flex; flex-direction:column; padding:2rem;
}
#loader .top{ display:flex; justify-content:space-between; align-items:flex-start; }
#loader .meta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:#666; letter-spacing:.18em; text-transform:uppercase; line-height:1.7; }
#loader .meta b{ color:var(--white); }
#loader .meta.right{ text-align:right; }
#loader .center{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
#loader .mark{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(60px,12vw,180px); line-height:.86; letter-spacing:-0.05em;
  color:var(--white); display:flex; align-items:center; gap:.1em;
  opacity:0;
}
#loader .mark em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
#loader .tag-c{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:#555; letter-spacing:.25em; text-transform:uppercase; margin-top:1.2rem;
  opacity:0;
}
#loader .tag-c .acc{ color:var(--white); }
#loader .bot{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }
#loader .bar-wrap{ flex:1; }
#loader .bar-lbl{ font-family:'JetBrains Mono',monospace; font-size:10px; color:#555; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.6rem; display:flex; justify-content:space-between; }
#loader .bar{ height:1px; background:#222; position:relative; overflow:hidden; }
#loader .bar i{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--white); }
#loader .num{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(40px,7vw,96px); line-height:.86; letter-spacing:-0.04em; color:var(--white);
  font-variant-numeric:tabular-nums;
}
.curtain{ position:fixed; inset:0; background:#000; z-index:9999; transform:translateY(100%); pointer-events:none; }

/* HEADER */
header{ position:fixed; inset:0 0 auto 0; z-index:50; padding:1.4rem 2rem; display:flex; justify-content:space-between; align-items:center; mix-blend-mode:difference; }
header .mark{ display:flex; align-items:center; gap:.6rem; color:var(--white); }
header .mark .dot{ width:10px; height:10px; border-radius:50%; background:var(--white); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ transform:scale(.7); opacity:.6; } }
header .mark .word{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.02em; }
header .mark .word em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; margin-left:.2em; opacity:.7; }
header nav{ display:flex; gap:2rem; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--white); letter-spacing:.15em; text-transform:uppercase; }
header nav a{ position:relative; padding-bottom:3px; }
header nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--white); transition:width .35s; }
header nav a:hover::after{ width:100%; }
header nav a .num{ opacity:.5; margin-right:.4rem; }
header .right{ display:flex; align-items:center; gap:1rem; }
header .clock{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--white); opacity:.5; letter-spacing:.15em; text-transform:uppercase; }
header .menu-btn{ display:none; }
@media (max-width:900px){
  header{ mix-blend-mode:normal; padding:1rem; background:rgba(8,8,8,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
  header nav, header .clock{ display:none; }
  header .menu-btn{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line); border-radius:6px; }
  header .menu-btn svg{ width:18px; height:18px; }
}

/* HERO */
.hero{ position:relative; min-height:100vh; padding:18vh 2rem 8vh; display:flex; flex-direction:column; justify-content:flex-end; }
.hero .hi{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--white); letter-spacing:.2em; text-transform:uppercase; margin-bottom:2.5rem; display:flex; align-items:center; gap:1rem; }
.hero .hi .blip{ width:7px; height:7px; background:var(--white); border-radius:50%; animation:pulse 1.6s infinite; }
.hero .hi .arrow{ width:24px; height:1px; background:var(--white); display:inline-block; opacity:.5; }
.hero h1{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(40px, 7.5vw, 116px); line-height:.92; letter-spacing:-0.04em;
  text-transform:uppercase; max-width:1300px;
}
.hero h1 .ln{ display:block; overflow:hidden; padding:0 0 .04em; }
.hero h1 .word{ display:inline-block; }
.hero h1 .word .char{ display:inline-block; will-change:transform; }
.hero h1 .it{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; letter-spacing:-0.04em; color:var(--ink-2); padding:0 .08em; }
.hero h1 .stamp{ display:inline-block; padding:0 .15em; background:var(--white); color:#000; font-style:italic; font-family:'Fraunces',serif; font-weight:300; }

.hero-bot{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:3rem; gap:2rem; flex-wrap:wrap; }
.hero-bot .lhs{ max-width:36rem; color:var(--ink-2); font-size:16px; line-height:1.6; }
.hero-bot .lhs strong{ color:var(--white); font-weight:500; }
.hero-bot .rhs{ display:flex; gap:.6rem; align-items:center; }

/* BUTTONS */
.btn-primary{
  background:var(--white); color:#000;
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 1.6rem; display:inline-flex; align-items:center; gap:.6rem;
  transition:background .25s, color .25s, box-shadow .25s;
  border-radius:50px;
}
.btn-primary:hover{ background:#000; color:var(--white); box-shadow:inset 0 0 0 1px var(--white); }
.btn-ghost{
  color:var(--white); border:1px solid var(--line-2);
  padding:1rem 1.6rem;
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem;
  border-radius:50px;
  transition:border-color .25s, background .25s, color .25s;
}
.btn-ghost:hover{ border-color:var(--white); background:var(--white); color:#000; }

/* WhatsApp button — green tinted but still mono-friendly */
.btn-wa{
  background:transparent; color:var(--white); border:1px solid var(--line-2);
  padding:1rem 1.6rem;
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem;
  border-radius:50px;
  transition:border-color .25s, color .25s;
}
.btn-wa:hover{ border-color:var(--white); }
.btn-wa svg{ width:14px; height:14px; }

.scroll-cue{ position:absolute; right:2rem; bottom:4rem; z-index:5; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.25em; text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; gap:1rem; }
.scroll-cue::after{ content:""; width:1px; height:50px; background:linear-gradient(to bottom,var(--muted),transparent); animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* MARQUEE */
.marquee{ overflow:hidden; padding:2rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(8,8,8,.6); backdrop-filter:blur(8px); }
.marquee .row{ display:flex; gap:2.5rem; white-space:nowrap; align-items:center; animation:scroll 40s linear infinite; }
.marquee .row span{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(36px,6vw,84px); line-height:.86; letter-spacing:-0.04em; color:var(--white); }
.marquee .row span.it{ font-style:italic; font-family:'Fraunces',serif; font-weight:300; color:var(--ink-2); }
.marquee .row span.stroke{ color:transparent; -webkit-text-stroke:1px var(--line-2); font-family:'Bricolage Grotesque',sans-serif; }
.marquee .row span.star{ color:var(--ink-3); font-size:clamp(24px,3vw,48px); }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* SECTIONS */
section.block{ position:relative; padding:18vh 2rem; }
.block-inner{ max-width:1500px; margin:0 auto; }
.block-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:8vh; flex-wrap:wrap; }
.block-head .lhs{ max-width:48rem; }
.block-head .tag{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.4rem; display:flex; align-items:center; gap:.8rem; }
.block-head .tag::before{ content:""; width:24px; height:1px; background:var(--ink-3); }
.block-head .tag .num{ color:var(--white); }
.block-head h2{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(32px,4.6vw,72px); line-height:1; letter-spacing:-0.03em; text-transform:uppercase;
}
.block-head h2 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; letter-spacing:-0.03em; color:var(--ink-2); }
.block-head .meta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; line-height:1.8; text-align:right; }
.block-head .meta b{ color:var(--white); }

/* WORK — Active Theory style cards */
.work{ background:rgba(8,8,8,.6); backdrop-filter:blur(4px); }
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.work-card{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  cursor:pointer; transition:transform .5s var(--ease);
}
.work-card.full{ grid-column:1/-1; aspect-ratio:21/9; }
.work-card .img{ position:absolute; inset:0; transition:transform .8s var(--ease); }
.work-card:hover .img{ transform:scale(1.06); }
.work-card .img.gr{ background:#0a0a0a; position:relative; }
/* Procedural visual layers — looks designed without needing an image */
.work-card .img.gr::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.work-card .img.gr::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.08), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(255,255,255,.04), transparent 50%);
}
.work-card .glyph{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(60px,8vw,140px); line-height:1; letter-spacing:-0.04em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.15);
  text-transform:uppercase; white-space:nowrap;
  transition:color .5s, -webkit-text-stroke .5s, transform .8s var(--ease);
}
.work-card:hover .glyph{ color:rgba(255,255,255,.06); -webkit-text-stroke:1px rgba(255,255,255,.3); transform:translate(-50%,-50%) scale(1.05); }
.work-card .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7) 100%); opacity:0; transition:opacity .4s; }
.work-card:hover .scrim{ opacity:1; }
.work-card .info{ position:absolute; left:1.5rem; right:1.5rem; bottom:1.5rem; display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; }
.work-card .info-l .ix{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase; margin-bottom:.5rem; }
.work-card .info-l .nm{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(20px,2vw,30px); line-height:1; letter-spacing:-0.02em; text-transform:uppercase; color:var(--white); }
.work-card .info-l .nm em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.work-card .info-l .tags{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-3); letter-spacing:.15em; text-transform:uppercase; margin-top:.5rem; }
.work-card .info-r{ display:flex; align-items:center; gap:.5rem; }
.work-card .info-r .pill{ font-family:'JetBrains Mono',monospace; font-size:9px; padding:.3rem .6rem; border:1px solid var(--white); color:var(--white); letter-spacing:.18em; text-transform:uppercase; border-radius:50px; background:rgba(0,0,0,.4); backdrop-filter:blur(8px); }
.work-card .info-r .arrow{ width:36px; height:36px; border:1px solid var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:14px; transition:background .25s, color .25s; }
.work-card:hover .info-r .arrow{ background:var(--white); color:#000; }
@media (max-width:900px){ .work-grid{ grid-template-columns:1fr; gap:1rem; } .work-card{ aspect-ratio:4/3; } .work-card.full{ aspect-ratio:4/3; } }

/* MANIFESTO */
.manifesto{ padding:24vh 2rem; text-align:center; background:rgba(8,8,8,.4); backdrop-filter:blur(2px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.manifesto h2{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(40px,8vw,128px); line-height:.96; letter-spacing:-0.045em; text-transform:uppercase; max-width:1300px; margin:0 auto;
}
.manifesto h2 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; letter-spacing:-0.03em; color:var(--ink-2); }
.manifesto h2 .stamp{ display:inline-block; padding:0 .12em; background:var(--white); color:#000; font-style:italic; font-family:'Fraunces',serif; font-weight:300; }
.manifesto .signoff{ margin-top:6vh; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.2em; text-transform:uppercase; }
.manifesto .signoff b{ color:var(--white); }

/* SERVICES */
.services{ background:rgba(8,8,8,.55); backdrop-filter:blur(4px); }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.svc{ background:var(--bg-2); padding:2.5rem; min-height:520px; display:flex; flex-direction:column; gap:1.4rem; transition:background .3s; position:relative; }
.svc:hover{ background:var(--surface); }
.svc.feat{ background:linear-gradient(180deg, rgba(255,255,255,.04), var(--bg-2) 60%); }
.svc .meta{ display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.svc .meta .ix{ color:var(--white); }
.svc .meta .badge{ color:#000; padding:.25rem .6rem; background:var(--white); border-radius:50px; font-weight:700; }
.svc h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(26px,3vw,40px); line-height:1; letter-spacing:-0.025em; text-transform:uppercase; }
.svc h3 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.svc .price{ display:flex; align-items:baseline; gap:.4rem; font-family:'Fraunces',serif; font-style:italic; font-weight:300; }
.svc .price .from{ font-size:11px; color:var(--muted); font-style:normal; font-family:'JetBrains Mono',monospace; letter-spacing:.18em; text-transform:uppercase; margin-right:.4rem; }
.svc .price .amt{ font-size:clamp(40px,4.4vw,68px); line-height:1; letter-spacing:-0.02em; color:var(--white); }
.svc .lede{ color:var(--ink-2); font-size:14px; line-height:1.6; }
.svc ul{ list-style:none; padding:0; margin:auto 0 0; display:flex; flex-direction:column; gap:.4rem; }
.svc li{ font-size:13px; color:var(--ink-2); padding:.6rem 0; border-top:1px solid var(--line); display:flex; align-items:flex-start; gap:.6rem; line-height:1.4; }
.svc li:last-child{ border-bottom:1px solid var(--line); }
.svc li::before{ content:"→"; color:var(--white); font-family:'JetBrains Mono',monospace; flex-shrink:0; }
.svc .cta{ margin-top:1.4rem; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--white); display:inline-flex; align-items:center; gap:.6rem; align-self:flex-start; padding-bottom:3px; border-bottom:1px solid var(--white); transition:gap .25s; }
.svc .cta:hover{ gap:1rem; }
@media (max-width:900px){ .svc-grid{ grid-template-columns:1fr; } .svc{ min-height:auto; padding:2rem; } }

/* TESTIMONIALS — animated cards, marquee row */
.testi{ padding:18vh 0; background:rgba(8,8,8,.55); backdrop-filter:blur(4px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.testi .block-head{ padding:0 2rem; max-width:1500px; margin:0 auto 6vh; }
.testi-row{ display:flex; gap:1.5rem; padding:0 2rem; will-change:transform; }
.testi-card{
  flex:0 0 clamp(320px, 28vw, 460px);
  background:var(--bg-2); border:1px solid var(--line);
  padding:2rem; display:flex; flex-direction:column; gap:1.2rem;
  transition:border-color .3s, transform .5s var(--ease);
  min-height:340px;
}
.testi-card:hover{ border-color:var(--white); transform:translateY(-6px); }
.testi-card .top{ display:flex; justify-content:space-between; align-items:center; }
.testi-card .ix{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; }
.testi-card .stars{ display:flex; gap:2px; }
.testi-card .stars span{ color:var(--white); font-size:14px; }
.testi-card blockquote{ font-family:'Fraunces',serif; font-weight:300; font-style:italic; font-size:clamp(18px,1.5vw,22px); line-height:1.4; letter-spacing:-0.01em; color:var(--ink); flex:1; }
.testi-card blockquote::before{ content:"❝"; font-size:42px; line-height:0; vertical-align:-12px; color:var(--ink-3); margin-right:.2em; }
.testi-card .who{ display:flex; align-items:center; gap:.8rem; padding-top:1rem; border-top:1px solid var(--line); }
.testi-card .av{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, #1a1a1a, #2e2e2e); display:flex; align-items:center; justify-content:center; color:var(--white); font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:14px; flex-shrink:0; border:1px solid var(--line-2); }
.testi-card .meta-w{ flex:1; min-width:0; }
.testi-card .nm{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:14px; line-height:1.1; color:var(--white); }
.testi-card .role{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.1em; margin-top:.2rem; }

/* PROCESS */
.process{ background:rgba(8,8,8,.5); backdrop-filter:blur(4px); }
.proc-grid{ display:flex; flex-direction:column; }
.proc{ display:grid; grid-template-columns:120px 1fr 2fr 100px; gap:2rem; padding:2.6rem 0; border-top:1px solid var(--line); align-items:start; transition:background .3s, padding .3s; }
.proc:last-child{ border-bottom:1px solid var(--line); }
.proc:hover{ background:linear-gradient(90deg, rgba(255,255,255,.025), transparent); padding:3rem 0; }
.proc .num{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; font-size:clamp(48px,5vw,80px); line-height:.86; letter-spacing:-0.025em; color:var(--ink-2); }
.proc h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(20px,2.2vw,28px); line-height:1.05; letter-spacing:-0.02em; text-transform:uppercase; }
.proc p{ color:var(--ink-2); font-size:15px; line-height:1.6; max-width:36rem; }
.proc .dur{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; text-align:right; }
.proc .dur b{ color:var(--white); }
@media (max-width:900px){ .proc{ grid-template-columns:1fr; gap:.8rem; padding:2rem 0; } .proc .dur{ text-align:left; } .proc:hover{ padding:2rem 0; } }

/* ABOUT */
.about{ background:rgba(8,8,8,.5); backdrop-filter:blur(4px); }
.about-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:5vw; align-items:start; max-width:1500px; margin:0 auto; }
.about-img{ aspect-ratio:4/5; background:linear-gradient(135deg, var(--surface), var(--bg) 70%); border:1px solid var(--line); position:relative; overflow:hidden; }
.about-img::before{
  content:"Y"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-style:italic; font-weight:300; font-size:clamp(180px,22vw,320px); line-height:1; letter-spacing:-0.05em; color:var(--white);
  opacity:.95;
}
.about-img::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:30px 30px;
}
.about-img .stamp{ position:absolute; top:1rem; left:1rem; right:1rem; display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; z-index:1; }
.about-img .stamp.bot{ top:auto; bottom:1rem; }
.about-img .stamp b{ color:var(--white); }
.about-text .tag{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.5rem; }
.about-text h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(28px,4vw,56px); line-height:1; letter-spacing:-0.03em; text-transform:uppercase; margin-bottom:2rem; }
.about-text h2 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.about-text p{ color:var(--ink-2); font-size:16px; line-height:1.7; margin-bottom:1.4rem; max-width:38rem; }
.about-text .quote{ color:var(--white); font-style:italic; font-family:'Fraunces',serif; font-size:20px; margin-top:2.5rem; padding-left:1.4rem; border-left:2px solid var(--white); }
.about-text .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:3rem; }
.about-text .stats .cell{ background:var(--bg-2); padding:1.6rem 1.2rem; }
.about-text .stats .v{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; font-size:clamp(28px,3vw,44px); line-height:1; letter-spacing:-0.02em; color:var(--white); }
.about-text .stats .lbl{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; margin-top:.4rem; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } .about-img{ aspect-ratio:1; } }

/* CTA */
.cta-section{ padding:22vh 2rem; text-align:center; background:rgba(8,8,8,.6); backdrop-filter:blur(2px); position:relative; overflow:hidden; border-top:1px solid var(--line); }
.cta-section .inner{ position:relative; z-index:2; max-width:1300px; margin:0 auto; }
.cta-section .tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-3); letter-spacing:.2em; text-transform:uppercase; margin-bottom:2.5rem; display:inline-flex; align-items:center; gap:.8rem; }
.cta-section .tag::before, .cta-section .tag::after{ content:""; width:24px; height:1px; background:var(--ink-3); }
.cta-section h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(40px,7.5vw,128px); line-height:.96; letter-spacing:-0.04em; text-transform:uppercase; margin-bottom:2rem; }
.cta-section h2 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; letter-spacing:-0.03em; color:var(--ink-2); }
.cta-section p{ color:var(--ink-2); font-size:17px; line-height:1.6; max-width:42rem; margin:0 auto 3rem; }
.cta-row{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.cta-row .btn-primary{ padding:1.2rem 2rem; font-size:13px; }
.cta-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8vh; max-width:1100px; margin-left:auto; margin-right:auto; }
.cta-meta .cell{ background:var(--bg-2); padding:1.6rem 1.2rem; text-align:left; }
.cta-meta .lbl{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; margin-bottom:.4rem; }
.cta-meta .v{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; font-size:17px; color:var(--white); }
.cta-meta .v a{ color:var(--white); transition:color .25s; }
.cta-meta .v a:hover{ color:var(--ink-3); }
@media (max-width:900px){ .cta-meta{ grid-template-columns:1fr 1fr; max-width:100%; text-align:left; } }

/* FOOTER */
footer{ background:#000; padding:6vh 2rem 3vh; border-top:1px solid var(--line); position:relative; overflow:hidden; }
.f-mark{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(80px,16vw,240px); line-height:.86; letter-spacing:-0.05em; color:var(--white); padding:4vh 0; text-align:center; }
.f-mark .it{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.f-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:3rem; max-width:1500px; margin:0 auto 4vh; padding-top:3vh; border-top:1px solid var(--line); }
.f-col h5{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.4rem; }
.f-col h5 b{ color:var(--white); margin-right:.4rem; }
.f-col ul{ list-style:none; padding:0; margin:0; }
.f-col li{ padding:.4rem 0; }
.f-col a{ color:var(--ink-2); font-size:14px; transition:color .2s; }
.f-col a:hover{ color:var(--white); }
.f-bot{ display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--line); max-width:1500px; margin:0 auto; flex-wrap:wrap; gap:1rem; }
.f-bot .copy{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.15em; text-transform:uppercase; }
.f-bot .socials{ display:flex; gap:.5rem; }
.f-bot .socials a{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--muted); border:1px solid var(--line); border-radius:50%; transition:color .2s, border-color .2s, background .2s; }
.f-bot .socials a:hover{ color:#000; border-color:var(--white); background:var(--white); }
.f-bot .socials svg{ width:14px; height:14px; }
@media (max-width:900px){ .f-grid{ grid-template-columns:1fr 1fr; gap:1.5rem; } }

/* MOBILE NAV */
.mobile-nav{ display:none; position:fixed; inset:0; z-index:60; background:rgba(8,8,8,.98); backdrop-filter:blur(20px); transform:translateX(100%); transition:transform .45s var(--ease); flex-direction:column; }
.mobile-nav.on{ transform:translateX(0); }
.mobile-nav .top{ display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid var(--line); }
.mobile-nav .top .mark{ display:flex; align-items:center; gap:.6rem; color:var(--white); }
.mobile-nav .close{ width:38px; height:38px; border:1px solid var(--line); border-radius:6px; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; }
.mobile-nav .links{ padding:1.5rem; display:flex; flex-direction:column; }
.mobile-nav .links a{ padding:1.2rem .8rem; border-bottom:1px solid var(--line); font-family:'Bricolage Grotesque',sans-serif; font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:-0.02em; display:flex; justify-content:space-between; align-items:center; transition:color .2s, padding .2s; }
.mobile-nav .links a:hover, .mobile-nav .links a:active{ padding-left:1.4rem; }
.mobile-nav .links a .num{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.18em; }
.mobile-nav .ctas{ padding:1rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; }
.mobile-nav .ctas a{ padding:1rem; text-align:center; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; border-radius:50px; }
.mobile-nav .ctas a.email{ background:var(--white); color:#000; }
.mobile-nav .ctas a.wa{ border:1px solid var(--line-2); color:var(--white); }
.mobile-nav .socials{ padding:1.5rem; display:flex; gap:.6rem; justify-content:center; border-top:1px solid var(--line); margin-top:auto; }
.mobile-nav .socials a{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; }
@media (max-width:900px){ .mobile-nav{ display:flex; } }

/* MOBILE OVERRIDES */
@media (max-width:900px){
  .hero{ padding:14vh 1rem 4rem; }
  .hero h1{ font-size:clamp(34px, 9.5vw, 56px); }
  .hero-bot{ flex-direction:column; align-items:stretch; }
  .hero-bot .rhs{ flex-direction:column; }
  .btn-primary, .btn-ghost, .btn-wa{ justify-content:center; }
  .scroll-cue{ display:none; }
  section.block{ padding:8vh 1rem; }
  .block-head{ flex-direction:column; align-items:flex-start; gap:1rem; margin-bottom:5vh; }
  .block-head .meta{ text-align:left; }
  .marquee{ padding:1.2rem 0; }
  .marquee .row span{ font-size:32px; }
  .manifesto{ padding:12vh 1rem; }
  .manifesto h2{ font-size:clamp(28px,9vw,48px); }
  .testi-row{ padding:0 1rem; }
  .testi-card{ flex:0 0 84vw; padding:1.6rem; min-height:auto; }
  .cta-section{ padding:12vh 1rem; }
  .cta-section h2{ font-size:clamp(34px,10vw,60px); }
}

/* REVEAL */
[data-reveal]{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].on{ opacity:1; transform:translateY(0); }

/* =================================================================
   NEW SECTIONS — premium add-ons
   ================================================================= */

/* LIVE AVAILABILITY BAR (under hero) */
.live-bar{ background:rgba(8,8,8,.75); backdrop-filter:blur(10px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:auto 1fr auto; align-items:stretch; height:54px; overflow:hidden; }
.live-bar .lbl{ background:var(--white); color:#000; padding:0 1.4rem; display:flex; align-items:center; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; gap:.5rem; }
.live-bar .lbl .blip{ width:7px; height:7px; background:#000; border-radius:50%; animation:pulse 1.4s infinite; }
.live-bar .feed{ overflow:hidden; position:relative; display:flex; align-items:center; }
.live-bar .strip{ display:flex; gap:3rem; white-space:nowrap; padding-left:2rem; animation:scroll 50s linear infinite; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-2); letter-spacing:.05em; }
.live-bar .strip span.k{ color:var(--white); margin-right:.4rem; font-weight:600; }
.live-bar .clock-bar{ padding:0 1.4rem; display:flex; align-items:center; gap:.8rem; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.15em; text-transform:uppercase; border-left:1px solid var(--line); }
@media (max-width:900px){ .live-bar{ grid-template-columns:auto 1fr; height:42px; } .live-bar .clock-bar{ display:none; } .live-bar .lbl{ padding:0 .8rem; font-size:9px; } .live-bar .strip{ font-size:11px; } }

/* TECH STACK / DELIVERABLES MARQUEE STRIP */
.stack-strip{ background:#000; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.4rem 0; overflow:hidden; }
.stack-strip .row{ display:flex; gap:3rem; white-space:nowrap; align-items:center; animation:scroll 50s linear infinite; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(20px,2.4vw,32px); letter-spacing:-0.02em; color:var(--ink-2); }
.stack-strip .row .it{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--muted); }
.stack-strip .row .stroke{ color:transparent; -webkit-text-stroke:1px var(--line-2); font-family:'Bricolage Grotesque',sans-serif; }
.stack-strip .row .star{ color:var(--white); }

/* CINEMATIC CASE STUDY — pinned BuilderLync deep-dive */
.case{ position:relative; background:rgba(8,8,8,.6); backdrop-filter:blur(4px); }
.case-pin{ height:100vh; min-height:680px; position:relative; overflow:hidden; padding:2rem; display:flex; flex-direction:column; }
.case-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; padding:0 2rem; max-width:1500px; margin:0 auto; width:100%; }
.case-head .lhs .tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--white); letter-spacing:.2em; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:.8rem; }
.case-head .lhs .tag::before{ content:""; width:24px; height:1px; background:var(--white); }
.case-head h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,52px); line-height:1; letter-spacing:-0.03em; text-transform:uppercase; max-width:36rem; }
.case-head h2 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.case-head .meta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; line-height:1.8; text-align:right; }
.case-head .meta b{ color:var(--white); }

.case-stage{ flex:1; display:grid; grid-template-columns:1fr 1.2fr; gap:5vw; align-items:center; max-width:1500px; margin:4vh auto 0; width:100%; padding:0 2rem; position:relative; }
.case-info{ position:relative; min-height:380px; }
.case-info .step{ position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); display:flex; flex-direction:column; gap:1.4rem; }
.case-info .step.on{ opacity:1; }
.case-info .step .ix{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--white); letter-spacing:.2em; text-transform:uppercase; padding:.4rem .8rem; border:1px solid var(--white); display:inline-flex; align-self:flex-start; }
.case-info .step h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(28px,3.4vw,48px); line-height:1; letter-spacing:-0.025em; text-transform:uppercase; }
.case-info .step h3 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.case-info .step p{ color:var(--ink-2); font-size:16px; line-height:1.7; max-width:32rem; }
.case-info .step .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:1rem; }
.case-info .step .stats .cell{ background:var(--bg-2); padding:1rem 1.2rem; }
.case-info .step .stats .v{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; font-size:24px; line-height:1; color:var(--white); }
.case-info .step .stats .lbl{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:.15em; text-transform:uppercase; margin-top:.3rem; }

.case-visual{ aspect-ratio:16/10; background:#0a0a0a; border:1px solid var(--line); position:relative; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.case-visual .frame{ position:absolute; inset:0; display:flex; flex-direction:column; }
.case-visual .frame-top{ height:32px; background:#1d1d1b; display:flex; align-items:center; gap:.4rem; padding:0 .8rem; border-bottom:1px solid #000; }
.case-visual .frame-top .dot{ width:9px; height:9px; border-radius:50%; background:#2a2a28; }
.case-visual .frame-top .url{ flex:1; text-align:center; font-family:'JetBrains Mono',monospace; font-size:10px; color:#666; }
.case-visual .frame-top .url b{ color:#cdcdc8; }
.case-visual .canvas{ flex:1; position:relative; overflow:hidden; }
.case-visual .canvas .panel{ position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease); display:flex; align-items:center; justify-content:center; padding:2rem; }
.case-visual .canvas .panel.on{ opacity:1; }
.case-visual .canvas .glyph{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(40px,7vw,120px); line-height:.86; letter-spacing:-0.04em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.18); text-transform:uppercase; }
.case-visual .canvas .glyph em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; -webkit-text-stroke:1px rgba(255,255,255,.4); }
.case-visual .canvas .grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%); pointer-events:none; }
.case-visual .canvas .pulse{ position:absolute; width:8px; height:8px; background:var(--white); border-radius:50%; box-shadow:0 0 0 0 rgba(255,255,255,.6); animation:caseP 2s infinite; }
@keyframes caseP{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.6); } 50%{ box-shadow:0 0 0 14px transparent; } }

/* progress dots tracker */
.case-track{ position:absolute; left:2rem; bottom:1.5rem; display:flex; gap:.4rem; }
.case-track .dot{ width:32px; height:3px; background:var(--line-2); transition:background .4s; }
.case-track .dot.on{ background:var(--white); }

@media (max-width:900px){
  .case-pin{ height:auto; min-height:auto; padding:6vh 1rem; }
  .case-stage{ grid-template-columns:1fr; gap:2rem; padding:0 1rem; }
  .case-info{ min-height:auto; }
  .case-info .step{ position:relative; opacity:1; }
  .case-info .step:not(.on){ display:none; }
  .case-visual{ aspect-ratio:16/10; }
  .case-track{ position:static; margin-top:1rem; }
  .case-head{ padding:0 1rem; flex-direction:column; gap:1rem; }
  .case-head .meta{ text-align:left; }
}

/* STATS BAND — animated counters */
.stats-band{ padding:14vh 2rem; background:rgba(8,8,8,.5); backdrop-filter:blur(2px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-grid-big{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); max-width:1500px; margin:0 auto; }
.stats-grid-big .cell{ background:var(--bg-2); padding:3rem 2rem; transition:background .3s; }
.stats-grid-big .cell:hover{ background:var(--surface); }
.stats-grid-big .lbl{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.4rem; }
.stats-grid-big .v{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(48px,6vw,96px); line-height:.88; letter-spacing:-0.04em; color:var(--white); }
.stats-grid-big .v em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.stats-grid-big .v sup{ font-size:.4em; vertical-align:top; margin-left:.1em; color:var(--ink-2); font-family:'Fraunces',serif; font-style:italic; }
.stats-grid-big .desc{ font-family:'Inter',sans-serif; font-size:13px; color:var(--ink-2); line-height:1.5; margin-top:1rem; }
@media (max-width:900px){ .stats-grid-big{ grid-template-columns:1fr 1fr; } .stats-grid-big .cell{ padding:2rem 1.4rem; } }

/* PRICING COMPARISON TABLE */
.compare{ padding:14vh 2rem; background:rgba(8,8,8,.55); backdrop-filter:blur(4px); border-top:1px solid var(--line); }
.compare-inner{ max-width:1500px; margin:0 auto; }
.compare-head{ margin-bottom:6vh; }
.compare-head .tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-3); letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.4rem; display:flex; align-items:center; gap:.8rem; }
.compare-head .tag::before{ content:""; width:24px; height:1px; background:var(--ink-3); }
.compare-head h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(32px,4.6vw,72px); line-height:1; letter-spacing:-0.03em; text-transform:uppercase; max-width:42rem; }
.compare-head h2 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.compare-head p{ color:var(--ink-2); font-size:16px; line-height:1.6; max-width:48rem; margin-top:1.4rem; }

.compare-table{ background:var(--bg-2); border:1px solid var(--line); }
.compare-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:1px; background:var(--line); }
.compare-row > div{ background:var(--bg-2); padding:1.4rem 1.6rem; }
.compare-row.head > div{ background:#0a0a0a; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; }
.compare-row.head .ys{ color:var(--white); }
.compare-row .ttl{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:-0.01em; color:var(--white); }
.compare-row .desc{ font-size:12px; color:var(--muted); margin-top:.3rem; line-height:1.5; }
.compare-row .v{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink-2); }
.compare-row .v.ys{ color:var(--white); font-weight:700; }
.compare-row .v.warn{ color:var(--ink-3); }
.compare-row .v.no{ color:var(--muted); }
@media (max-width:900px){ .compare-row{ grid-template-columns:1fr; } .compare-row > div{ padding:.9rem 1.2rem; } }

/* FAQ */
.faq{ padding:14vh 2rem; background:rgba(8,8,8,.55); backdrop-filter:blur(4px); border-top:1px solid var(--line); }
.faq-inner{ max-width:1100px; margin:0 auto; }
.faq-head{ text-align:center; margin-bottom:6vh; }
.faq-head .tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-3); letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.4rem; }
.faq-head h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(32px,4.6vw,72px); line-height:1; letter-spacing:-0.03em; text-transform:uppercase; }
.faq-head h2 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.faq-list .faq-item{ border-top:1px solid var(--line); }
.faq-list .faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-list summary{ list-style:none; cursor:pointer; padding:1.6rem 0; display:flex; justify-content:space-between; align-items:center; gap:2rem; transition:color .25s, padding .25s; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary .q{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:clamp(15px,1.4vw,20px); text-transform:uppercase; letter-spacing:-0.015em; line-height:1.2; }
.faq-list summary .pls{ color:var(--white); font-size:24px; line-height:.5; transition:transform .35s; }
.faq-list .faq-item[open] summary .pls{ transform:rotate(45deg); }
.faq-list .faq-item[open] summary{ padding-left:1rem; }
.faq-list .a{ padding:0 0 1.6rem; color:var(--ink-2); font-size:15px; line-height:1.7; max-width:48rem; }

/* ABOUT — photo treatment */
.about-img.real{ background:#0a0a0a; }
.about-img.real img{ width:100%; height:100%; object-fit:cover; opacity:.85; filter:grayscale(100%) contrast(1.1) brightness(.9); transition:opacity .5s, filter .5s; }
.about-img.real:hover img{ opacity:1; filter:grayscale(100%) contrast(1.15) brightness(1); }
.about-img.real::before{ content:""; }   /* hide the Y monogram override */

/* ===== FLAGSHIP — single clean card ===== */
.flagship{ position:relative; padding:14vh 2rem; background:rgba(8,8,8,.65); backdrop-filter:blur(6px); }
.flagship-inner{ max-width:1500px; margin:0 auto; }
.flagship-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:3rem; margin-bottom:5vh; flex-wrap:wrap; }
.flagship-head .lhs{ max-width:48rem; }
.flagship-head .tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--white); letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.5rem; display:inline-flex; align-items:center; gap:.8rem; padding:.5rem .9rem; border:1px solid var(--line-2); border-radius:50px; }
.flagship-head h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(32px,4.6vw,72px); line-height:1; letter-spacing:-0.03em; text-transform:uppercase; }
.flagship-head h2 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.flagship-head .meta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; line-height:1.9; text-align:right; flex-shrink:0; }
.flagship-head .meta b{ color:var(--white); }

/* Single clean card */
.flagship-card{ display:block; background:#0a0a0a; border:1px solid var(--line); overflow:hidden; box-shadow:0 50px 100px rgba(0,0,0,.6); transition:border-color .35s, transform .5s var(--ease); }
.flagship-card:hover{ border-color:var(--white); transform:translateY(-4px); }
.flagship-card .frame-top{ height:42px; background:#1a1a1a; display:flex; align-items:center; gap:.5rem; padding:0 1.2rem; border-bottom:1px solid #000; }
.flagship-card .frame-top .dot{ width:11px; height:11px; border-radius:50%; background:#2a2a28; }
.flagship-card .frame-top .url{ flex:1; text-align:center; font-family:'JetBrains Mono',monospace; font-size:11px; color:#888; letter-spacing:.05em; }
.flagship-card .frame-top .url b{ color:#cdcdc8; }
.flagship-card .frame-top .openbtn{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--white); padding:.35rem .7rem; border:1px solid var(--line-2); border-radius:50px; letter-spacing:.15em; text-transform:uppercase; transition:background .25s, color .25s, border-color .25s; }
.flagship-card:hover .frame-top .openbtn{ background:var(--white); color:#000; border-color:var(--white); }

.flagship-card .frame-body{ position:relative; aspect-ratio:16/9; background:#0a0a0a; overflow:hidden; }

/* Live iframe preview — desktop only, highest quality */
.flagship-card .frame-body iframe.preview{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; pointer-events:none; z-index:1;
  background:#0a0a0a;
  /* iframe loaded fades in over the image */
  opacity:0; transition:opacity 1s ease;
}
.flagship-card .frame-body iframe.preview.loaded{ opacity:1; }
@media (max-width:900px){
  /* Iframe too heavy on mobile — hide and use image */
  .flagship-card .frame-body iframe.preview{ display:none; }
}

/* Screenshot image fallback */
.flagship-card .frame-body img.preview-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform 1.2s var(--ease), opacity .8s ease;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  filter:contrast(1.04);
  z-index:0;
}
.flagship-card:hover .frame-body img.preview-img{ transform:scale(1.03); }
.flagship-card .frame-fallback{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; opacity:0; transition:opacity .3s; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #0c0c0c, #050505);
}
.flagship-card .frame-body.no-img .frame-fallback{ opacity:1; }
.flagship-card .frame-fallback .big{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(48px,8vw,120px); line-height:.86; letter-spacing:-0.04em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.5); text-transform:uppercase; }
.flagship-card .frame-fallback .small{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-3); letter-spacing:.2em; text-transform:uppercase; }

.flagship-card .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85) 100%); pointer-events:none; opacity:.6; transition:opacity .35s; }
.flagship-card:hover .overlay{ opacity:.9; }
.flagship-card .info{ position:absolute; left:2rem; right:2rem; bottom:2rem; display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; z-index:2; }
.flagship-card .info-l .nm{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(22px,3vw,40px); line-height:1.05; letter-spacing:-0.025em; text-transform:uppercase; color:var(--white); }
.flagship-card .info-l .nm em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.flagship-card .info-l .tags{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-3); letter-spacing:.15em; text-transform:uppercase; margin-top:.6rem; }
.flagship-card .info-r{ display:flex; align-items:center; gap:.6rem; }
.flagship-card .info-r .pill{ font-family:'JetBrains Mono',monospace; font-size:11px; padding:.5rem .9rem; border:1px solid var(--white); color:var(--white); letter-spacing:.18em; text-transform:uppercase; border-radius:50px; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); transition:background .25s, color .25s; }
.flagship-card:hover .info-r .pill{ background:var(--white); color:#000; }

/* Numbers band below the card */
.case-numbers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2rem; }
.case-numbers .cn{ background:var(--bg-2); padding:1.5rem 1.6rem; }
.case-numbers .cn .lbl{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; margin-bottom:.6rem; }
.case-numbers .cn .v{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:clamp(15px,1.6vw,20px); line-height:1.3; color:var(--ink); letter-spacing:-0.01em; }
.case-numbers .cn .v em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--white); }

/* ===== SOUND PILL — tiny, unobtrusive ===== */
.sound-pill{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:60;
  display:flex; align-items:center; gap:.55rem;
  padding:.5rem .9rem;
  background:rgba(8,8,8,.7); backdrop-filter:blur(14px);
  border:1px solid var(--line-2); border-radius:50px;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); cursor:pointer;
  transition:color .3s, border-color .3s, background .3s, opacity .4s;
  animation:soundReady 2.6s ease-in-out infinite;
}
.sound-pill:hover{ color:var(--white); border-color:var(--white); }
.sound-pill .sdot{ width:6px; height:6px; border-radius:50%; background:var(--muted); transition:background .3s, box-shadow .3s; }
.sound-pill.on{ color:var(--white); border-color:var(--white); animation:none; }
.sound-pill.on .sdot{ background:#fff; box-shadow:0 0 10px rgba(255,255,255,.7); animation:soundPulse 1.6s ease-in-out infinite; }
@keyframes soundReady{ 0%,100%{ opacity:.85; } 50%{ opacity:1; border-color:rgba(255,255,255,.4); } }
@keyframes soundPulse{ 50%{ transform:scale(.65); opacity:.6; } }
@media (max-width:600px){
  .sound-pill{ bottom:1rem; right:1rem; padding:.45rem .7rem; font-size:9px; }
  .sound-pill .slbl{ display:none; }
}

/* ===== MOBILE — final pass ===== */
@media (max-width:900px){
  .flagship{ padding:8vh 1rem; }
  .flagship-head{ flex-direction:column; gap:1rem; margin-bottom:3vh; }
  .flagship-head .meta{ text-align:left; }
  .flagship-head h2{ font-size:clamp(28px,7vw,42px); }
  .flagship-card .frame-top{ height:34px; padding:0 .8rem; gap:.3rem; }
  .flagship-card .frame-top .dot{ width:8px; height:8px; }
  .flagship-card .frame-top .url{ font-size:9px; }
  .flagship-card .frame-top .openbtn{ font-size:9px; padding:.25rem .5rem; }
  .flagship-card .info{ left:1rem; right:1rem; bottom:1rem; flex-direction:column; align-items:flex-start; gap:.6rem; }
  .flagship-card .info-l .nm{ font-size:18px; }
  .flagship-card .info-l .tags{ font-size:9px; }
  .flagship-card .info-r .pill{ font-size:9px; padding:.35rem .7rem; }
  .case-numbers{ grid-template-columns:1fr; }

  .live-bar .lbl{ font-size:9px; padding:0 .8rem; }
  .live-bar .strip{ font-size:10px; gap:1.5rem; }
  .stack-strip{ padding:1rem 0; }
  .stack-strip .row{ font-size:18px; gap:1.5rem; }

  .stats-band{ padding:8vh 1rem; }
  .stats-grid-big{ grid-template-columns:1fr 1fr; }
  .stats-grid-big .cell{ padding:1.6rem 1.2rem; }
  .stats-grid-big .v{ font-size:clamp(34px,8vw,48px) !important; }
  .stats-grid-big .desc{ font-size:11px; }

  .compare{ padding:8vh 1rem; }
  .compare-row{ grid-template-columns:1fr; }
  .compare-row > div{ padding:1rem 1.2rem; }
  .compare-row.head{ display:none; }
  .compare-row .ttl::before{ content:none; }
  .compare-row .v::before{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; display:block; margin-bottom:.2rem; }

  .testi{ padding:8vh 0; }
  .testi-feature{ padding:0 1rem; }
  .testi-feature .card{ padding:1.6rem; gap:1.4rem; }
  .testi-feature .card .av-big{ width:80px; height:80px; font-size:40px; }
  .testi-feature .card blockquote{ font-size:18px; }

  .faq{ padding:8vh 1rem; }
  .faq-list summary{ padding:1.2rem 0; gap:1rem; }
  .faq-list summary .q{ font-size:14px; }
  .faq-list .a{ font-size:13px; padding-bottom:1.2rem; }

  .range-tag{ font-size:9px; gap:.5rem; padding:.5rem .8rem; }
}

/* ===== TIGHTEN HERO TYPE ON MOBILE ===== */
@media (max-width:600px){
  .hero{ padding:14vh 1rem 3rem; min-height:auto; }
  .hero h1{ font-size:clamp(34px, 11vw, 56px); line-height:.94; }
  .hero .hi{ font-size:11px; gap:.6rem; }
  .hero-bot{ margin-top:2rem; gap:1.2rem; }
  .hero-bot .lhs{ font-size:14px; }

  .stats-grid-big{ grid-template-columns:1fr; }
  .testi-feature .card{ grid-template-columns:1fr; padding:1.4rem; }

  .live-bar{ height:38px; }
  .live-bar .clock-bar{ display:none; }

  .marquee{ padding:1rem 0; }
  .marquee .row span{ font-size:30px; }

  .manifesto{ padding:10vh 1rem; }
  .manifesto h2{ font-size:clamp(28px, 9vw, 44px); }

  .cta-section{ padding:10vh 1rem; }
  .cta-section h2{ font-size:clamp(34px, 10vw, 56px); }
  .cta-meta{ grid-template-columns:1fr; }

  footer{ padding:4vh 1rem 2rem; }
  .f-mark{ font-size:60px; padding:2vh 0; }
  .f-grid{ grid-template-columns:1fr 1fr; gap:1.2rem; padding-top:2rem; }
  .f-bot{ flex-direction:column-reverse; gap:1rem; align-items:flex-start; }
}

/* BuilderLync flagship case-study layout */
.flagship{ position:relative; padding:14vh 2rem; background:rgba(8,8,8,.55); backdrop-filter:blur(4px); }
.flagship-inner{ max-width:1500px; margin:0 auto; }
.flagship-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:5vh; flex-wrap:wrap; }
.flagship-head .lhs{ max-width:48rem; }
.flagship-head .tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--white); letter-spacing:.2em; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:.8rem; }
.flagship-head .tag::before{ content:""; width:24px; height:1px; background:var(--white); }
.flagship-head h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(32px,4.6vw,72px); line-height:1; letter-spacing:-0.03em; text-transform:uppercase; }
.flagship-head h2 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.flagship-head .meta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; line-height:1.8; text-align:right; }
.flagship-head .meta b{ color:var(--white); }

/* Hero shot — full-width browser-frame style */
.flagship-hero{ position:relative; aspect-ratio:16/9; max-height:720px; background:#0a0a0a; border:1px solid var(--line); overflow:hidden; box-shadow:0 50px 100px rgba(0,0,0,.6); margin-bottom:2rem; }
.flagship-hero .frame-top{ height:38px; background:#1d1d1b; display:flex; align-items:center; gap:.5rem; padding:0 1rem; border-bottom:1px solid #000; }
.flagship-hero .frame-top .dot{ width:11px; height:11px; border-radius:50%; background:#2a2a28; }
.flagship-hero .frame-top .url{ flex:1; text-align:center; font-family:'JetBrains Mono',monospace; font-size:11px; color:#888; letter-spacing:.05em; }
.flagship-hero .frame-top .url b{ color:#cdcdc8; }
.flagship-hero .frame-top .openbtn{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--white); padding:.3rem .7rem; border:1px solid var(--line-2); border-radius:50px; letter-spacing:.1em; text-transform:uppercase; }
.flagship-hero .img-wrap{ position:absolute; inset:38px 0 0 0; overflow:hidden; }
.flagship-hero .img-wrap img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform 1s var(--ease); filter:grayscale(20%) contrast(1.05); }
.flagship-hero:hover .img-wrap img{ transform:scale(1.04); }
.flagship-hero .overlay{ position:absolute; inset:38px 0 0 0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7) 100%); pointer-events:none; }
.flagship-hero .info{ position:absolute; left:2rem; right:2rem; bottom:2rem; display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; pointer-events:none; }
.flagship-hero .info-l .nm{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,52px); line-height:1; letter-spacing:-0.025em; text-transform:uppercase; color:var(--white); }
.flagship-hero .info-l .nm em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-2); }
.flagship-hero .info-l .tags{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-3); letter-spacing:.15em; text-transform:uppercase; margin-top:.6rem; }
.flagship-hero .info-r{ display:flex; align-items:center; gap:.6rem; pointer-events:auto; }
.flagship-hero .info-r .pill{ font-family:'JetBrains Mono',monospace; font-size:10px; padding:.4rem .8rem; border:1px solid var(--white); color:var(--white); letter-spacing:.18em; text-transform:uppercase; border-radius:50px; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); }

/* Detail tiles below hero */
.flagship-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.flagship-tile{ position:relative; aspect-ratio:1; background:#0a0a0a; border:1px solid var(--line); overflow:hidden; transition:border-color .3s, transform .5s var(--ease); }
.flagship-tile:hover{ border-color:var(--white); transform:translateY(-4px); }
.flagship-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); filter:grayscale(15%) contrast(1.05); }
.flagship-tile:hover img{ transform:scale(1.06); }
.flagship-tile .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85) 100%); pointer-events:none; }
.flagship-tile .lbl{ position:absolute; left:1rem; right:1rem; bottom:1rem; }
.flagship-tile .lbl .ix{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase; margin-bottom:.3rem; }
.flagship-tile .lbl .nm{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:14px; line-height:1.1; letter-spacing:-0.01em; text-transform:uppercase; color:var(--white); }
@media (max-width:900px){ .flagship-tiles{ grid-template-columns:1fr 1fr; gap:1rem; } }
@media (max-width:600px){ .flagship-tiles{ grid-template-columns:1fr; } }

/* "More work" — coming soon cards */
.coming-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3rem; }
.coming{ aspect-ratio:4/3; background:#0a0a0a; border:1px dashed var(--line-2); display:flex; flex-direction:column; justify-content:space-between; padding:1.4rem; transition:border-color .3s, background .3s; }
.coming:hover{ border-color:var(--ink-3); background:#0c0c0c; }
.coming .top{ display:flex; justify-content:space-between; align-items:center; }
.coming .ix{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; }
.coming .pill{ font-family:'JetBrains Mono',monospace; font-size:9px; padding:.3rem .6rem; border:1px solid var(--ink-3); color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase; border-radius:50px; }
.coming .nm{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(20px,2vw,28px); line-height:1; letter-spacing:-0.02em; text-transform:uppercase; color:var(--ink-3); }
.coming .nm em{ font-family:'Fraunces',serif; font-style:italic; font-weight:300; }
.coming .tags{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.15em; text-transform:uppercase; }
@media (max-width:900px){ .coming-row{ grid-template-columns:1fr; } }

/* Range tag — "From $1k to $40k · 3d to 4w" */
.range-tag{ display:inline-flex; align-items:center; gap:.8rem; padding:.6rem 1rem; border:1px solid var(--line-2); border-radius:50px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); margin-top:1.2rem; }
.range-tag b{ color:var(--white); font-weight:700; }
.range-tag .div{ width:1px; height:12px; background:var(--line-2); }

/* Process visuals — small image columns */
.proc-with-img{ display:grid; grid-template-columns:1fr 1.2fr; gap:3vw; align-items:center; max-width:1500px; margin:0 auto 6vh; }
.proc-img{ aspect-ratio:4/3; background:#0a0a0a; border:1px solid var(--line); overflow:hidden; }
.proc-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.1) brightness(.85); }
@media (max-width:900px){ .proc-with-img{ grid-template-columns:1fr; } }

/* Single big testimonial card layout */
.testi-feature{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.testi-feature .card{ background:var(--bg-2); border:1px solid var(--line); padding:3rem; display:grid; grid-template-columns:200px 1fr; gap:3rem; align-items:start; }
.testi-feature .card .av-big{ width:200px; height:200px; background:linear-gradient(135deg, var(--surface), #2a2a2a); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-style:italic; font-weight:300; font-size:96px; color:var(--white); border:1px solid var(--line-2); }
.testi-feature .card .body .ix{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--white); letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.4rem; display:flex; align-items:center; gap:.8rem; }
.testi-feature .card .body .ix::before{ content:""; width:24px; height:1px; background:var(--white); }
.testi-feature .card .body .stars{ display:flex; gap:3px; margin-bottom:1.2rem; }
.testi-feature .card .body .stars span{ color:var(--white); font-size:18px; }
.testi-feature .card blockquote{ font-family:'Fraunces',serif; font-weight:300; font-style:italic; font-size:clamp(20px,2.4vw,32px); line-height:1.35; letter-spacing:-0.015em; color:var(--ink); margin-bottom:1.5rem; }
.testi-feature .card .who{ display:flex; align-items:center; gap:.8rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.testi-feature .card .who .nm{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:16px; line-height:1.1; color:var(--white); }
.testi-feature .card .who .role{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.1em; margin-top:.3rem; }
@media (max-width:900px){ .testi-feature .card{ grid-template-columns:1fr; padding:2rem; gap:2rem; } .testi-feature .card .av-big{ width:120px; height:120px; font-size:60px; } }