/* ═══════════════════════════════════════════════════
   REDMARK CONSULTANCY — styles.css  (mobile-first)
   ═══════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────── */
:root {
  --ink:     #0A0A0A;
  --paper:   #F7F4EF;
  --card:    #F0ECE5;
  --red:     #D42619;
  --red-lo:  rgba(212,38,25,.07);
  --mid:     #7A756E;
  --line:    rgba(10,10,10,.09);
  --line-d:  rgba(255,255,255,.07);
  --white:   #ffffff;
  --f-sans:  'Bricolage Grotesque', sans-serif;
  --f-mono:  'DM Mono', monospace;
  --ease:    cubic-bezier(.16,1,.3,1);
  --pad-x:   clamp(20px, 5vw, 64px);
}

/* ── RESET ───────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--f-sans);
  cursor: none; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, canvas { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--f-sans); }
@media (pointer: coarse) { body { cursor: auto; } }

/* ── CURSOR ──────────────────────────── */
#cur, #cur-r {
  position: fixed; pointer-events: none; z-index: 9999;
  border-radius: 50%; transform: translate(-50%,-50%);
}
#cur   { width:9px;height:9px;background:var(--red);transition:width .18s var(--ease),height .18s var(--ease),background .18s; }
#cur-r { width:34px;height:34px;border:1px solid rgba(212,38,25,.3);transition:width .3s var(--ease),height .3s var(--ease); }
body.hov #cur   { width:46px;height:46px;background:transparent;border:1.5px solid var(--red); }
body.hov #cur-r { width:0;height:0;border-color:transparent; }
@media (pointer:coarse) { #cur,#cur-r { display:none; } }

/* ── NAV — white text over dark hero, switches to ink when scrolled ── */
nav {
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad-x);
  transition:padding .4s var(--ease),background .4s,backdrop-filter .4s;
}
nav.stuck {
  padding:12px var(--pad-x);
  background:rgba(247,244,239,.92);
  backdrop-filter:blur(28px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
/* Logo SVG: white on dark hero. Swap to dark on light nav */
.nav-logo { display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;letter-spacing:-.02em; }
.nav-logo-svg { transition:filter .35s ease; filter:none; }
/* On dark hero the SVG already has white text + red mark — perfect */
/* When scrolled: invert the white text paths to dark */
nav.stuck .nav-logo-svg { filter: invert(1) hue-rotate(180deg) brightness(.15) contrast(10); }
/* Simpler approach — just use a brightness invert that keeps red */
nav.stuck .nav-logo-svg, nav.drawer-open .nav-logo-svg { filter: brightness(0); }

.nav-mark  { width:22px;height:22px;background:var(--red);border-radius:50%;display:grid;place-items:center;flex-shrink:0; }
.nav-mark svg { width:10px;height:10px;stroke:white;fill:none;stroke-width:2.5; }
.nav-links { display:flex;align-items:center;gap:32px;list-style:none; }
.nav-links a { font-size:13px;font-weight:400;color:rgba(255,255,255,.55);transition:color .25s; }
nav.stuck .nav-links a { color:var(--mid); }
.nav-links a:hover,.nav-links a.on { color:white; }
nav.stuck .nav-links a:hover,nav.stuck .nav-links a.on { color:var(--ink); }
.nav-cta {
  background:rgba(255,255,255,.12);color:white;border:1px solid rgba(255,255,255,.2);
  font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 20px;border-radius:100px;transition:background .25s,color .25s,border-color .25s;cursor:none;
}
nav.stuck .nav-cta { background:var(--ink);color:var(--paper);border-color:transparent; }
.nav-cta:hover { background:var(--red);border-color:var(--red); }
.nav-burger { display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px; }
.nav-burger span { display:block;width:22px;height:1.5px;background:white;transition:all .3s var(--ease);transform-origin:center; }
nav.stuck .nav-burger span, nav.drawer-open .nav-burger span { background:var(--ink); }
.nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.nav-drawer {
  position:fixed;inset:0;z-index:190;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:72px var(--pad-x) 48px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.nav-drawer.open { opacity:1;pointer-events:auto; }
.nav-drawer ul { list-style:none;display:flex;flex-direction:column;gap:2px;margin-bottom:40px; }
.nav-drawer ul a { font-size:clamp(32px,9vw,52px);font-weight:800;letter-spacing:-.05em;color:var(--ink);display:block;transition:color .25s;line-height:1.2; }
.nav-drawer ul a:hover { color:var(--red); }
.nav-drawer .d-cta { background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:12px 26px;border-radius:100px; }
@media (max-width:768px) { .nav-links,.nav-cta { display:none; } .nav-burger { display:flex; } }

/* ── UTILITIES ───────────────────────── */
.tag { font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:8px; }
.tag::before { content:'';display:block;width:18px;height:1px;background:var(--red); }
h2.st { font-size:clamp(28px,4.5vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1.0; }
h2.st em { font-style:italic;color:var(--red);font-weight:300; }
.reveal { opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease); }
.reveal.vis { opacity:1;transform:translateY(0); }
@keyframes up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.btn-dark {
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--paper);
  font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  padding:12px 24px;border-radius:100px;transition:background .25s;cursor:none;white-space:nowrap;
}
.btn-dark:hover { background:var(--red); }
.btn-ghost {
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--ink);
  font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 24px;border-radius:100px;border:1px solid var(--line);
  transition:border-color .25s;cursor:none;white-space:nowrap;
}
.btn-ghost:hover { border-color:var(--ink); }
@media (pointer:coarse) { .btn-dark,.btn-ghost,.stab,.pfb,.nav-burger { cursor:pointer; } }

/* ── PAGE MANAGER ────────────────────── */
.page { display:none; } .page.on { display:block; }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  position:relative; height:100svh; min-height:520px; max-height:1000px;
  overflow:hidden; display:flex; align-items:center;
  background:#050505;
}
.hero-overlay {
  position:absolute;inset:0;z-index:1;
  /* Lighter left-side fade so the 3D scene shows clearly on the right */
  background:
    linear-gradient(to right,rgba(5,5,5,.88) 0%,rgba(5,5,5,.60) 24%,rgba(5,5,5,.10) 50%,transparent 65%),
    linear-gradient(to top,rgba(5,5,5,.50) 0%,transparent 30%);
}
.hero-content {
  position:relative;z-index:2;
  padding:0 var(--pad-x);
  max-width:min(600px,88vw);
  margin-top:-10vh;
}
.hero-tag { margin-bottom:22px;opacity:0;animation:up .7s .15s forwards; }
.hero-tag.tag { color:rgba(212,38,25,.9); }
.hero-tag.tag::before { background:rgba(212,38,25,.9); }
h1.hero-h1 {
  font-size:clamp(36px,6.5vw,88px);font-weight:800;
  letter-spacing:-.05em;line-height:.95;color:var(--white);
  opacity:0;animation:up .8s .3s forwards;
}
h1.hero-h1 em { font-style:italic;color:var(--red);font-weight:300; }
.hero-sub {
  margin-top:16px;font-size:clamp(13px,1.3vw,16px);line-height:1.72;
  color:rgba(255,255,255,.58);max-width:380px;font-weight:300;
  opacity:0;animation:up .75s .5s forwards;
}
.hero-btns { display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;opacity:0;animation:up .75s .65s forwards; }
.hero-btns .btn-dark  { background:var(--red); }
.hero-btns .btn-dark:hover { background:#b81e14; }
.hero-btns .btn-ghost { color:var(--white);border-color:rgba(255,255,255,.28); }
.hero-btns .btn-ghost:hover { border-color:rgba(255,255,255,.65); }
.hero-stats {
  position:absolute;bottom:clamp(22px,4.5vh,44px);right:var(--pad-x);z-index:2;
  display:flex;gap:clamp(18px,3vw,44px);
  opacity:0;animation:up .7s .9s forwards;
}
.hs-val { font-size:clamp(22px,3vw,38px);font-weight:800;letter-spacing:-.05em;color:var(--white);line-height:1; }
.hs-val b { color:var(--red); }
.hs-lbl { font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.30);margin-top:4px; }
.hero-scroll {
  position:absolute;bottom:clamp(22px,4.5vh,44px);left:var(--pad-x);z-index:2;
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.34);opacity:0;animation:up .6s 1.1s forwards;
}
.s-bar { width:30px;height:1px;background:rgba(255,255,255,.16);overflow:hidden;position:relative; }
.s-bar::after { content:'';position:absolute;left:-100%;top:0;width:100%;height:100%;background:var(--red);animation:slide 2.5s 1.3s infinite; }
@keyframes slide { 0%{left:-100%}50%{left:0}100%{left:100%} }
@media (max-width:768px) {
  .hero-stats { display:none; }
  .hero-scroll { display:none; }
  .hero-content { margin-top:42vh; }
}
@media (max-width:480px) {
  .hero-content { margin-top:42vh;max-width:100%; }
  h1.hero-h1 { font-size:clamp(32px,10vw,50px); }
  .hero-sub  { font-size:13px;max-width:100%; }
}

/* ── TICKER ──────────────────────────── */
.ticker { border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;overflow:hidden; }
.tk-track { display:flex;white-space:nowrap;animation:tick 22s linear infinite; }
.tk-item  { display:inline-flex;align-items:center;gap:16px;padding:0 20px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid); }
.tk-dot   { width:3px;height:3px;background:var(--red);border-radius:50%;flex-shrink:0; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SERVICES ────────────────────────── */
.services-s { padding:clamp(52px,8vw,110px) var(--pad-x); }
.s-head { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(32px,5vw,52px);gap:18px;flex-wrap:wrap; }
.s-head-r { max-width:256px;font-size:14px;line-height:1.75;color:var(--mid);font-weight:300; }
.s-tabs { display:flex;border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; }
.s-tabs::-webkit-scrollbar { display:none; }
.stab { background:none;border:none;padding:11px 0;margin-right:26px;font-family:var(--f-sans);font-size:14px;font-weight:500;color:var(--mid);cursor:none;white-space:nowrap;position:relative;transition:color .25s;flex-shrink:0; }
.stab::after { content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .3s var(--ease); }
.stab.on { color:var(--ink); } .stab.on::after { transform:scaleX(1); }
.s-panel { display:none; }
.s-panel.on { display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5.5vw,84px);align-items:center;padding-top:44px; }
.sp-num   { font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--red);margin-bottom:12px; }
.sp-title { font-size:clamp(22px,2.8vw,38px);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin-bottom:14px;white-space:pre-line; }
.sp-desc  { font-size:14px;line-height:1.8;color:var(--mid);font-weight:300;margin-bottom:22px; }
.sp-chips { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px; }
.chip { font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:5px 12px;border:1px solid var(--line);border-radius:20px;color:var(--mid); }
.sp-items { list-style:none;display:flex;flex-direction:column; }
.sp-items li { display:flex;align-items:center;gap:11px;font-size:13px;color:var(--mid);font-weight:300;padding:9px 0;border-bottom:1px solid var(--line); }
.sp-items li::before { content:'';width:5px;height:5px;background:var(--red);border-radius:50%;flex-shrink:0; }
.sp-visual { position:relative;height:clamp(200px,30vw,400px); }
.sp-img-wrap { width:100%;height:100%;border-radius:4px;overflow:hidden;background:var(--ink); }
.sp-img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease); }
.sp-img-wrap:hover .sp-img { transform:scale(1.03); }
.sp-img-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.sp-img-ph-inner { text-align:center;opacity:.25; }
.sp-img-ph-label { font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:white;margin-top:8px; }
.sp-label { position:absolute;bottom:12px;left:14px;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.18); }
@media (max-width:768px) {
  .s-panel.on { grid-template-columns:1fr;gap:24px; }
  .sp-visual  { height:200px;order:-1; }
  .s-head-r   { display:none; }
}
@media (max-width:480px) { .sp-visual { height:175px; } .stab { font-size:13px;margin-right:20px; } }

/* ── WORKS ───────────────────────────── */
.works-s { padding:0 var(--pad-x) clamp(52px,8vw,110px); }
.w-head  { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(28px,4.5vw,44px);flex-wrap:wrap;gap:14px; }
.see-all { font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);display:flex;align-items:center;gap:7px;transition:color .25s; }
.see-all:hover { color:var(--ink); }
.see-all svg { width:12px;height:12px;transition:transform .25s; }
.see-all:hover svg { transform:translate(2px,-2px); }
.w-grid { display:grid;grid-template-columns:repeat(12,1fr);gap:3px; }
.wc { position:relative;overflow:hidden;background:var(--ink);cursor:none; }
.wc:nth-child(1){ grid-column:span 7;height:clamp(180px,28vw,460px); }
.wc:nth-child(2){ grid-column:span 5;height:clamp(180px,28vw,460px); }
.wc:nth-child(3),.wc:nth-child(4),.wc:nth-child(5){ grid-column:span 4;height:clamp(180px,22vw,360px); }
.wc-img { width:100%;height:100%;overflow:hidden; }
.wc-img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease); }
.wc:hover .wc-img img { transform:scale(1.04); }
.wc-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px; }
.wc-placeholder span { font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.2);text-align:center; }
.wc-over  { position:absolute;bottom:0;left:0;right:0;padding:18px;background:linear-gradient(to top,rgba(10,10,10,.88),transparent);transform:translateY(8px);opacity:0;transition:transform .4s var(--ease),opacity .3s; }
.wc:hover .wc-over { transform:translateY(0);opacity:1; }
.wc-cat  { font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:3px; }
.wc-name { font-size:16px;font-weight:700;letter-spacing:-.03em;color:white; }
.wc-arrow { position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(212,38,25,0);border:1px solid transparent;display:grid;place-items:center;transform:scale(0);transition:all .3s var(--ease); }
.wc:hover .wc-arrow { transform:scale(1);background:var(--red);border-color:var(--red); }
.wc-arrow svg { width:11px;height:11px;stroke:white; }
@media (max-width:768px) {
  .w-grid { grid-template-columns:1fr 1fr;gap:3px; }
  .wc:nth-child(1){ grid-column:1/-1;height:50vw; }
  .wc:nth-child(2){ grid-column:1/-1;height:42vw; }
  .wc:nth-child(3),.wc:nth-child(4),.wc:nth-child(5){ grid-column:span 1;height:38vw; }
  .wc-over { opacity:1;transform:translateY(0); }
  .wc-arrow { display:none; }
}
@media (max-width:480px) {
  .wc:nth-child(1){ height:54vw; }
  .wc:nth-child(3),.wc:nth-child(4),.wc:nth-child(5){ height:42vw; }
  .wc-name { font-size:14px; }
}

/* ── BIG MARQUEE ─────────────────────── */
.big-m { padding:clamp(22px,3.5vw,36px) 0;overflow:hidden;border-top:1px solid var(--line); }
.bm-track { display:flex;white-space:nowrap;animation:tick 14s linear infinite; }
.bm-item  { font-size:clamp(32px,6vw,76px);font-weight:800;letter-spacing:-.055em;padding:0 26px;display:inline-flex;align-items:center;gap:22px;color:var(--ink); }
.bm-dot { color:var(--red); }

/* ── ABOUT ───────────────────────────── */
.about-s { padding:clamp(52px,8vw,110px) var(--pad-x);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,100px);align-items:center;border-top:1px solid var(--line); }
.ab-wrap  { position:relative;height:clamp(240px,35vw,500px); }
.ab-img { width:100%;height:100%;object-fit:cover;border-radius:4px;display:block; }
.ab-stats { position:absolute;bottom:14px;left:14px;right:14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px; }
.abst { background:rgba(8,8,8,.86);backdrop-filter:blur(10px);padding:13px 14px; }
.abst-n { font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:-.04em;color:white;line-height:1; }
.abst-n b { color:var(--red); }
.abst-l { font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.26);margin-top:3px; }
.ab-text { margin-top:18px;font-size:15px;line-height:1.8;color:var(--mid);font-weight:300; }
.ab-text p+p { margin-top:14px; }
.ab-text strong { color:var(--ink);font-weight:500; }
@media (max-width:768px) { .about-s { grid-template-columns:1fr; } .ab-wrap { height:clamp(220px,65vw,360px); } }
@media (max-width:480px) { .ab-wrap { height:52vw;min-height:200px; } }

/* ── PROCESS ─────────────────────────── */
.proc-s { padding:clamp(52px,8vw,110px) var(--pad-x);background:var(--ink);color:var(--paper);border-top:1px solid var(--line); }
.proc-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:clamp(32px,4.5vw,52px); }
.pc { background:#141414;padding:clamp(20px,3vw,42px) clamp(16px,2.5vw,28px);transition:background .3s; }
.pc:hover { background:#1c1c1c; }
.pc-step { font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--red);margin-bottom:22px;display:block; }
.pc-t { font-size:clamp(17px,2vw,21px);font-weight:700;letter-spacing:-.03em;color:var(--paper);margin-bottom:9px; }
.pc-d { font-size:13px;line-height:1.75;color:rgba(247,244,239,.34);font-weight:300; }
@media (max-width:900px) { .proc-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .proc-grid { grid-template-columns:1fr; } }

/* ── TESTIMONIALS ────────────────────── */
.testi-s { padding:clamp(52px,8vw,110px) var(--pad-x);border-top:1px solid var(--line); }
.t-grid  { display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:clamp(32px,4.5vw,52px); }
.tc { padding:clamp(22px,3.5vw,44px) clamp(18px,3vw,40px);border:1px solid var(--line);transition:border-color .3s,background .3s; }
.tc:hover { border-color:rgba(212,38,25,.2);background:var(--red-lo); }
.tc-q { font-size:clamp(13px,1.5vw,18px);font-weight:300;font-style:italic;letter-spacing:-.01em;line-height:1.65;color:var(--ink);margin-bottom:24px; }
.tc-q::before { content:'\201C';font-size:40px;font-weight:800;color:var(--red);line-height:0;vertical-align:-.35em;margin-right:2px;opacity:.38; }
.tc-a  { display:flex;align-items:center;gap:12px; }
.tc-av { width:34px;height:34px;border-radius:50%;background:var(--red-lo);border:1px solid rgba(212,38,25,.18);display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--red);flex-shrink:0; }
.tc-name { font-size:13px;font-weight:600;letter-spacing:-.01em; }
.tc-co   { font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--mid);margin-top:2px; }
@media (max-width:640px) { .t-grid { grid-template-columns:1fr; } }

/* ── CTA ─────────────────────────────── */
.cta-s { padding:clamp(64px,10vw,140px) var(--pad-x);text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line); }
.cta-s::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 55% at 50% 50%,rgba(212,38,25,.05) 0%,transparent 70%);pointer-events:none; }
.cta-s>* { position:relative;z-index:1; }
.cta-t   { font-size:clamp(38px,7vw,96px);font-weight:800;letter-spacing:-.055em;line-height:.93;margin-bottom:32px; }
.cta-t em{ font-style:italic;color:var(--red);font-weight:300; }
.cta-sub { font-size:15px;color:var(--mid);max-width:290px;margin:0 auto 36px;line-height:1.7;font-weight:300; }
@media (max-width:480px) { .cta-t { font-size:clamp(34px,10vw,56px); } .cta-sub { font-size:14px; } }

/* ── FOOTER ──────────────────────────── */
footer { background:var(--ink);padding:clamp(36px,6vw,60px) var(--pad-x) 24px; }
.ft { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(20px,4vw,60px);padding-bottom:clamp(28px,4.5vw,48px);border-bottom:1px solid var(--line-d);margin-bottom:20px; }
.fb-n  { font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--paper);margin-bottom:9px; }
.fb-d  { font-size:13px;line-height:1.7;color:rgba(247,244,239,.32);font-weight:300;max-width:200px; }
.fc-t  { font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,239,.24);margin-bottom:13px; }
.fc-links { list-style:none;display:flex;flex-direction:column;gap:9px; }
.fc-links a { font-size:13px;color:rgba(247,244,239,.36);transition:color .25s;font-weight:300; }
.fc-links a:hover { color:var(--paper); }
.fb-btm { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px; }
.fb-copy { font-size:12px;color:rgba(247,244,239,.22);font-weight:300; }
.fb-legal { display:flex;gap:14px; }
.fb-legal a { font-size:12px;color:rgba(247,244,239,.22);transition:color .25s; }
.fb-legal a:hover { color:rgba(247,244,239,.55); }
@media (max-width:768px) { .ft { grid-template-columns:1fr 1fr; } .ft>div:first-child { grid-column:1/-1; } }
@media (max-width:480px) { .ft { grid-template-columns:1fr; } }

/* ══════════════════════════════════════
   PROJECTS PAGE
══════════════════════════════════════ */
.ph { padding:clamp(96px,13vh,152px) var(--pad-x) clamp(36px,5vw,60px);border-bottom:1px solid var(--line); }
.ph-title { font-size:clamp(44px,10vw,124px);font-weight:800;letter-spacing:-.055em;line-height:.88;opacity:0;animation:up .75s .2s forwards; }
.ph-title em { font-style:italic;color:var(--red);font-weight:300; }
.ph-meta { margin-top:clamp(18px,3vw,40px);display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;opacity:0;animation:up .7s .4s forwards; }
.ph-desc { font-size:15px;line-height:1.75;color:var(--mid);max-width:320px;font-weight:300; }
.ph-ct   { font-size:clamp(44px,7vw,84px);font-weight:800;letter-spacing:-.06em;line-height:1;color:rgba(10,10,10,.06); }
.pf-bar {
  padding:16px var(--pad-x);display:flex;gap:6px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  position:sticky;top:clamp(44px,7vh,62px);z-index:50;
  background:rgba(247,244,239,.93);backdrop-filter:blur(20px);
}
.pfb {
  padding:7px 15px;border-radius:100px;border:1px solid var(--line);
  background:transparent;color:var(--mid);
  font-family:var(--f-sans);font-size:12px;font-weight:500;
  cursor:pointer;transition:all .25s;
}
.pfb.on,.pfb:hover { background:var(--ink);color:var(--paper);border-color:var(--ink); }
.pr {
  display:grid;grid-template-columns:52px 1fr auto;
  align-items:center;gap:clamp(12px,3vw,40px);
  padding:clamp(14px,2.2vw,28px) var(--pad-x);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;transition:background .25s;cursor:pointer;
}
.pr::before { content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);transition:width .4s var(--ease); }
.pr:hover::before { width:3px; }
.pr:hover { background:rgba(212,38,25,.025); }
.pr-n   { font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--mid); }
.pr-title { font-size:clamp(15px,2.1vw,30px);font-weight:700;letter-spacing:-.04em;line-height:1.1;transition:color .25s; }
.pr:hover .pr-title { color:var(--red); }
.pr-sub { display:flex;gap:10px;align-items:center;margin-top:4px;flex-wrap:wrap; }
.pr-cat { font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--red); }
.pr-tags { display:flex;gap:6px;flex-wrap:wrap; }
.ptag   { font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);padding:3px 9px;border:1px solid var(--line);border-radius:12px; }
.pr-r   { display:flex;align-items:center;gap:clamp(8px,1.5vw,18px); }
.pr-img { width:clamp(48px,5.5vw,84px);height:clamp(34px,4vw,58px);background:var(--ink);border-radius:2px;overflow:hidden;flex-shrink:0;opacity:0;transition:opacity .3s,transform .3s;transform:scale(.96); }
.pr:hover .pr-img { opacity:1;transform:scale(1); }
.pr-img img,.pr-img-ph { width:100%;height:100%;object-fit:cover;display:block;border-radius:2px; }
.pr-arr { width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:all .25s;flex-shrink:0; }
.pr:hover .pr-arr { background:var(--red);border-color:var(--red); }
.pr-arr svg { width:12px;height:12px;stroke:var(--mid);transition:stroke .25s; }
.pr:hover .pr-arr svg { stroke:white; }
@media (max-width:640px) { .pr { grid-template-columns:36px 1fr auto;gap:10px; } .pr-img,.pr-tags { display:none; } }
@media (max-width:400px) { .pr { grid-template-columns:1fr auto; } .pr-n { display:none; } }
.psb { padding:clamp(40px,6vw,68px) var(--pad-x);border-bottom:1px solid var(--line); }
.psb-head { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:clamp(22px,3.5vw,36px);flex-wrap:wrap;gap:12px; }
.psb-title { font-size:clamp(22px,3.5vw,42px);font-weight:700;letter-spacing:-.04em; }
.psb-title em { font-style:italic;color:var(--red);font-weight:300; }
.psb-desc  { max-width:250px;font-size:13px;line-height:1.75;color:var(--mid);font-weight:300; }
.psb-grid  { display:grid;grid-template-columns:repeat(3,1fr);gap:3px; }
.psc { background:var(--card);padding:clamp(18px,3vw,34px) clamp(14px,2.5vw,26px);transition:background .25s;cursor:pointer; }
.psc:hover { background:#E8E2D9; }
.psc-ico svg { width:26px;height:26px;stroke:var(--red);fill:none;stroke-width:1.4;margin-bottom:12px;display:block; }
.psc-n { font-size:16px;font-weight:700;letter-spacing:-.03em;margin-bottom:7px; }
.psc-d { font-size:13px;line-height:1.7;color:var(--mid);font-weight:300;margin-bottom:12px; }
.psc-tags { display:flex;flex-wrap:wrap;gap:6px; }
.psc-lnk  { display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-top:12px;transition:gap .25s; }
.psc-lnk:hover { gap:10px; }
.psc-lnk svg { width:11px;height:11px;stroke:var(--red); }
@media (max-width:768px) { .psb-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .psb-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════
   CASE STUDY
══════════════════════════════════════ */
.cs-hero { min-height:72vh;position:relative;display:flex;align-items:flex-end;overflow:hidden; }
#cs-hero-c { position:absolute;inset:0;width:100%;height:100%; }
.cs-hero-ov { position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(10,10,10,.42) 55%,rgba(10,10,10,.12) 100%); }
.cs-hero-content { position:relative;z-index:2;padding:0 var(--pad-x) clamp(40px,7vh,68px);max-width:820px; }
.cs-back { display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:28px;transition:color .25s;cursor:pointer; }
.cs-back:hover { color:white; }
.cs-back svg { width:14px;height:14px;stroke:currentColor; }
.cs-kicker  { font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:14px; }
.cs-title   { font-size:clamp(32px,6vw,76px);font-weight:800;letter-spacing:-.05em;line-height:.92;color:white;margin-bottom:22px; }
.cs-subtitle{ font-size:clamp(13px,1.5vw,18px);font-weight:300;color:rgba(255,255,255,.52);line-height:1.6;max-width:490px;margin-bottom:28px; }
.cs-meta-pills { display:flex;gap:7px;flex-wrap:wrap; }
.cs-pill { font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:6px 13px;border:1px solid rgba(255,255,255,.15);border-radius:100px;color:rgba(255,255,255,.46); }
.cs-body { max-width:1200px;margin:0 auto; }
.cs-section { padding:clamp(40px,7vw,84px) var(--pad-x);border-bottom:1px solid var(--line); }
.cs-section:last-child { border-bottom:none; }
.cs-section-label { font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:16px;display:flex;align-items:center;gap:8px; }
.cs-section-label::before { content:'';width:16px;height:1px;background:var(--red); }
.cs-h2 { font-size:clamp(24px,3.5vw,44px);font-weight:700;letter-spacing:-.04em;margin-bottom:20px;line-height:1.0; }
.cs-h2 em { font-style:italic;color:var(--red);font-weight:300; }
.cs-prose { font-size:15px;line-height:1.85;color:var(--mid);font-weight:300;max-width:620px; }
.cs-prose p+p { margin-top:15px; }
.cs-prose strong { color:var(--ink);font-weight:500; }
.cs-two-col { display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,68px);align-items:start; }
.cs-three-col { display:grid;grid-template-columns:repeat(3,1fr);gap:3px; }
.cs-metrics-row { display:grid;grid-template-columns:repeat(4,1fr);gap:2px; }
.cs-stat-block  { padding:clamp(22px,3.5vw,42px);background:var(--card); }
.cs-stat-num    { font-size:clamp(30px,4vw,52px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink); }
.cs-stat-num b  { color:var(--red); }
.cs-stat-label  { font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin-top:7px; }
.cs-stat-desc   { font-size:13px;line-height:1.7;color:var(--mid);font-weight:300;margin-top:7px; }
.cs-callout { background:var(--ink);color:var(--paper);padding:clamp(24px,4vw,52px);border-radius:4px;margin-top:24px; }
.cs-callout-text { font-size:clamp(15px,2vw,26px);font-weight:300;font-style:italic;letter-spacing:-.02em;line-height:1.5;color:rgba(247,244,239,.80); }
.cs-callout-text em { color:var(--red);font-weight:700;font-style:normal; }
.cs-flow { display:flex;align-items:stretch;overflow-x:auto;padding-bottom:6px; }
.cs-flow-step { flex:1;min-width:140px;background:var(--card);padding:22px 18px;position:relative; }
.cs-flow-step::after { content:'→';position:absolute;right:-11px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--red);z-index:1; }
.cs-flow-step:last-child::after { display:none; }
.cs-flow-num   { font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--red);margin-bottom:7px; }
.cs-flow-title { font-size:14px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px; }
.cs-flow-desc  { font-size:12px;line-height:1.65;color:var(--mid);font-weight:300; }
.cs-platform-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:24px; }
.cs-platform { background:var(--card);padding:clamp(18px,3vw,34px); }
.cs-platform-icon { width:36px;height:36px;background:var(--ink);border-radius:7px;display:grid;place-items:center;margin-bottom:14px; }
.cs-platform-icon svg { width:20px;height:20px;stroke:var(--red);fill:none;stroke-width:1.4; }
.cs-platform-name { font-size:15px;font-weight:700;letter-spacing:-.03em;margin-bottom:6px; }
.cs-platform-desc { font-size:13px;line-height:1.7;color:var(--mid);font-weight:300; }
.cs-tags-row  { display:flex;flex-wrap:wrap;gap:7px;margin-top:16px; }
.cs-strip     { width:100%;aspect-ratio:16/7;position:relative;background:var(--ink);overflow:hidden; }
.cs-strip canvas { width:100%;height:100%;display:block; }
.cs-strip-caption { padding:9px var(--pad-x);font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);border-bottom:1px solid var(--line); }
.cs-timeline { display:flex;flex-direction:column; }
.cs-tl-item  { display:grid;grid-template-columns:100px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start; }
.cs-tl-phase { font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);padding-top:3px; }
.cs-tl-title { font-size:14px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px; }
.cs-tl-desc  { font-size:13px;line-height:1.7;color:var(--mid);font-weight:300; }
.cs-next { display:flex;justify-content:space-between;align-items:center;padding:clamp(24px,5vw,52px) var(--pad-x);background:var(--ink);flex-wrap:wrap;gap:16px; }
.cs-next-label { font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,244,239,.26);margin-bottom:5px; }
.cs-next-title { font-size:clamp(18px,2.8vw,34px);font-weight:700;letter-spacing:-.04em;color:var(--paper); }
.cs-upload-zone { position:relative;overflow:hidden;background:var(--ink);border-radius:4px; }
.cs-upload-zone canvas { width:100%;display:block; }
.cs-upload-hint { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.15);pointer-events:none;text-align:center;padding:12px; }
.cs-real-img { width:100%;height:100%;object-fit:cover;display:block;border-radius:4px; }
@media (max-width:768px) {
  .cs-two-col { grid-template-columns:1fr; }
  .cs-three-col { grid-template-columns:1fr 1fr; }
  .cs-metrics-row { grid-template-columns:1fr 1fr; }
  .cs-platform-grid { grid-template-columns:1fr; }
  .cs-strip { aspect-ratio:4/3; }
}
@media (max-width:480px) {
  .cs-three-col { grid-template-columns:1fr; }
  .cs-tl-item { grid-template-columns:1fr;gap:4px; }
}