/* ════════════════════════════════════════════════════════════
   TRIPLVI — Design System v2 · Swiss editorial · Dark + Light
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ── Theme tokens ── */
:root {
  --crimson:   #8B0000;
  --crimson-2: #A30D0D;
  --sans: 'Archivo','Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif;
  --pad:  clamp(24px, 5vw, 88px);
  --maxw: 1640px;
  --nav-h: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark (default) */
:root, [data-theme="dark"] {
  --bg:       #1A1A1A;
  --bg-deep:  #141414;
  --bg-card:  #202020;
  --bg-raise: #262626;
  --tx:       #F6F4F0;
  --tx-2:     rgba(246,244,240,0.66);
  --tx-3:     rgba(246,244,240,0.42);
  --tx-faint: rgba(246,244,240,0.18);
  --line:      rgba(246,244,240,0.10);
  --line-soft: rgba(246,244,240,0.055);
  --line-str:  rgba(246,244,240,0.20);
  --mark:      rgba(139,0,0,0.11);
  --glow:      rgba(139,0,0,0.15);
  --tint:      rgba(139,0,0,0.06);
  --btn-solid-tx: #F6F4F0;
  --shadow: 0 24px 70px rgba(0,0,0,0.45);
  color-scheme: dark;
}
/* Light */
[data-theme="light"] {
  --bg:       #F6F4F0;
  --bg-deep:  #EDE9E3;
  --bg-card:  #FFFFFF;
  --bg-raise: #FFFFFF;
  --tx:       #141414;
  --tx-2:     rgba(20,20,20,0.70);
  --tx-3:     rgba(20,20,20,0.48);
  --tx-faint: rgba(20,20,20,0.22);
  --line:      rgba(20,20,20,0.12);
  --line-soft: rgba(20,20,20,0.07);
  --line-str:  rgba(20,20,20,0.24);
  --mark:      rgba(139,0,0,0.08);
  --glow:      rgba(139,0,0,0.09);
  --tint:      rgba(139,0,0,0.05);
  --btn-solid-tx: #F6F4F0;
  --shadow: 0 24px 60px rgba(20,20,20,0.10);
  color-scheme: light;
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.35s ease, color 0.35s ease;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul { list-style:none; }
::selection { background: var(--crimson); color:#F6F4F0; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.section { padding: clamp(80px, 11vh, 150px) 0; position:relative; }
.section--deep { background: var(--bg-deep); }
.section--card { background: var(--bg-card); }

/* ── Type primitives ── */
.eyebrow {
  font-size:11px; font-weight:700; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--crimson-2); display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before { content:''; width:26px; height:1px; background:var(--crimson); }
.h2 {
  font-size: clamp(34px, 4.6vw, 72px);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.028em;
  text-transform: uppercase; text-wrap: balance; margin-top: 22px;
}
.h2 .cr { color: var(--crimson-2); }
.lede {
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.62;
  color: var(--tx-2); font-weight: 400; max-width: 56ch; text-wrap: pretty;
}
.outline { -webkit-text-stroke: 1.5px var(--tx-faint); color: transparent; }
.cr { color: var(--crimson-2); }
.dim { color: var(--tx-3); }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:12px;
  font-size:12px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  padding:17px 32px; transition: all 0.3s var(--ease);
}
.btn-solid { background:var(--crimson); color:var(--btn-solid-tx); }
.btn-solid:hover { background:var(--crimson-2); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--tx); border:1px solid var(--line-str); padding:16px 31px; }
.btn-ghost:hover { border-color:var(--tx); transform:translateY(-2px); }
.btn-line {
  font-size:12px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--tx-2); border-bottom:1px solid var(--line-str); padding-bottom:6px;
  transition: color 0.25s, border-color 0.25s;
}
.btn-line:hover { color:var(--crimson-2); border-color:var(--crimson); }
.btn-arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(5px); }

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); transition: background 0.35s, border-color 0.35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}
.logo { font-size:16px; font-weight:900; letter-spacing:0.04em; text-transform:uppercase; }
.logo .v { color: var(--crimson-2); }
.nav-links { display:flex; align-items:center; gap: clamp(18px, 2.6vw, 40px); }
.nav-links a {
  font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--tx-3); position:relative; transition:color 0.2s; padding:6px 0;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:1px;
  background:var(--crimson); transition:width 0.3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color:var(--tx); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav-cta {
  font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  border:1px solid var(--line-str); padding:10px 20px; transition:all 0.25s;
}
.nav-cta:hover { background:var(--crimson); border-color:var(--crimson); color:#F6F4F0; }
.theme-toggle {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-str); color:var(--tx-2); transition:all 0.25s;
}
.theme-toggle:hover { color:var(--tx); border-color:var(--tx); }
.theme-toggle svg { width:16px; height:16px; }
.theme-toggle .ic-sun { display:none; }
[data-theme="light"] .theme-toggle .ic-sun { display:block; }
[data-theme="light"] .theme-toggle .ic-moon { display:none; }
.nav-burger { display:none; flex-direction:column; gap:5px; width:26px; padding:4px 0; }
.nav-burger span { display:block; height:2px; background:var(--tx); transition:transform 0.3s var(--ease), opacity 0.3s; }
.nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-drawer {
  display:none; position:fixed; inset:0; z-index:290; background:var(--bg-deep);
  padding: calc(var(--nav-h) + 32px) var(--pad) 40px; flex-direction:column;
}
.nav-drawer.open { display:flex; }
.nav-drawer a {
  font-size:clamp(26px,7vw,44px); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em;
  padding:14px 0; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
}
.nav-drawer a .num { font-size:12px; font-weight:700; color:var(--crimson-2); letter-spacing:0.1em; }

/* ── HERO (home) ── */
.hero {
  min-height:100vh; position:relative; overflow:hidden; background:var(--bg-deep);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: calc(var(--nav-h) + 48px) var(--pad) clamp(48px,7vh,84px);
}
.hero-grid {
  position:absolute; inset:0; z-index:0; opacity:0.5;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: clamp(60px,8vw,120px) clamp(60px,8vw,120px);
  mask-image: radial-gradient(120% 100% at 80% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 0%, transparent 75%);
}
.hero-glow {
  position:absolute; top:-20%; right:-10%; width:60vw; height:60vw; z-index:0;
  background: radial-gradient(circle, var(--glow) 0%, transparent 60%);
  pointer-events:none;
}
.hero-mark {
  position:absolute; right:calc(var(--pad) - 0.08em); top:50%; transform:translateY(-54%);
  font-size: clamp(280px, 42vw, 720px); font-weight:700; line-height:0.7;
  letter-spacing:-0.04em; color:var(--mark); z-index:0; user-select:none; pointer-events:none;
}
.hero-inner { position:relative; z-index:1; max-width:var(--maxw); width:100%; margin:0 auto; }
.hero-h1 {
  font-size: clamp(46px, 9vw, 150px); font-weight:800; line-height:0.92;
  letter-spacing:-0.03em; text-transform:uppercase; margin-top:26px;
}
.hero-h1 .ln { display:block; overflow:hidden; }
.hero-h1 .ln i { display:block; font-style:normal; transform:translateY(110%); animation: rise 0.9s var(--ease) forwards; }
.hero-h1 .ln:nth-child(2) i { animation-delay:0.12s; }
.hero-h1 .ln:nth-child(3) i { animation-delay:0.24s; }
@keyframes rise { to { transform:translateY(0); } }
.hero-foot {
  margin-top: clamp(30px,4.5vh,52px); display:flex; align-items:flex-end;
  justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; }
.hero-scroll {
  position:absolute; bottom:clamp(36px,6vh,64px); right:var(--pad); z-index:1;
  display:flex; align-items:center; gap:12px;
  font-size:10px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--tx-faint);
}
.hero-scroll i { display:block; width:1px; height:40px; background:linear-gradient(var(--crimson), transparent); animation:drip 2.2s ease-in-out infinite; }
@keyframes drip { 0%,100%{opacity:0.3} 50%{opacity:1} }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background:var(--bg-deep); position:relative; overflow:hidden;
  padding: calc(var(--nav-h) + clamp(60px,9vh,110px)) 0 clamp(56px,8vh,96px);
}
.page-hero .hero-grid { opacity:0.4; }
.page-hero .hero-mark { font-size:clamp(200px,28vw,460px); top:56%; }
.page-hero-inner { position:relative; z-index:1; }
.page-hero-title {
  font-size: clamp(40px, 7vw, 110px); font-weight:800; line-height:0.94;
  letter-spacing:-0.03em; text-transform:uppercase; margin-top:24px; text-wrap:balance;
}
.page-hero-sub { margin-top:26px; }
.breadcrumb { font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--tx-3); margin-bottom:26px; }
.breadcrumb a { transition:color 0.2s; }
.breadcrumb a:hover { color:var(--tx); }
.breadcrumb .bc-sep { margin:0 9px; color:var(--crimson-2); }

/* ── MARQUEE ── */
.marq { border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); overflow:hidden; background:var(--bg); padding:18px 0; }
.marq-track { display:flex; width:max-content; animation: marq 34s linear infinite; }
.marq-item {
  display:inline-flex; align-items:center; gap:34px; padding-right:34px;
  font-size:13px; font-weight:700; letter-spacing:0.26em; text-transform:uppercase; color:var(--tx-3); white-space:nowrap;
}
.marq-dot { width:5px; height:5px; background:var(--crimson); border-radius:50%; flex-shrink:0; }
@keyframes marq { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marq-track { animation:none; } .hero-h1 .ln i { animation:none; transform:none; } }

/* ── Reveal — hidden ONLY while current JS is confirmed running (html.js-v2).
     If JS fails to load for any reason, all content stays fully visible. ── */
html.js-v2 .rv { opacity:0; transform:translateY(26px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
html.js-v2 .rv.in { opacity:1; transform:none; }
html.js-v2 .rv.d1 { transition-delay:0.1s; } html.js-v2 .rv.d2 { transition-delay:0.2s; } html.js-v2 .rv.d3 { transition-delay:0.3s; }
@media (prefers-reduced-motion: reduce) { html.js-v2 .rv { opacity:1; transform:none; transition:none; } }

/* ── MANIFESTO / statement ── */
.manifesto .wrap { display:grid; grid-template-columns: 1.35fr 1fr; gap:clamp(40px,5vw,90px); align-items:start; }
.manifesto-statement {
  font-size: clamp(26px, 3.3vw, 52px); font-weight:600; line-height:1.16;
  letter-spacing:-0.018em; text-wrap:pretty; margin-top:30px;
}
.manifesto-side p { color:var(--tx-2); font-size:15px; line-height:1.75; }
.manifesto-side p + p { margin-top:18px; }
.manifesto-stats { margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.stat { background:var(--bg-card); padding:26px 24px; }
.stat-n { font-size:clamp(26px,2.6vw,38px); font-weight:800; letter-spacing:-0.02em; line-height:1; }
.stat-l { font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--tx-3); margin-top:10px; }

/* ── ECOSYSTEM ── */
.eco-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:clamp(40px,6vh,70px); }
.eco-stage { display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--line-soft); background:var(--bg-card); }
.eco-node {
  position:relative; padding:34px 26px 40px; cursor:pointer;
  border-right:1px solid var(--line-soft);
  transition:background 0.4s ease; min-height:360px; display:flex; flex-direction:column;
}
.eco-node:last-child { border-right:none; }
.eco-node::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--crimson); transform:scaleX(0); transform-origin:left;
  transition:transform 0.5s var(--ease);
}
.eco-node:hover, .eco-node.active { background:var(--tint); }
.eco-node:hover::before, .eco-node.active::before { transform:scaleX(1); }
.eco-node-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:auto; }
.eco-stage-n { font-size:10px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--tx-faint); }
.eco-node-dot {
  width:34px; height:34px; border:1px solid var(--line-str); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:var(--crimson-2); transition:all 0.3s;
}
.eco-node:hover .eco-node-dot, .eco-node.active .eco-node-dot { background:var(--crimson); border-color:var(--crimson); color:#F6F4F0; }
.eco-node-name { font-size:clamp(16px,1.3vw,20px); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; line-height:1.15; margin-top:26px; }
.eco-node-role { font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--crimson-2); margin-top:8px; }
.eco-node-desc { font-size:13px; color:var(--tx-2); line-height:1.6; margin-top:14px; }
.eco-flow {
  margin-top:26px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--tx-3);
}
.eco-flow .seg { display:inline-block; width:26px; height:1px; background:var(--crimson); margin:0 10px; vertical-align:middle; }
.eco-loop { color:var(--crimson-2); }

/* ── SERVICES accordion ── */
.svc-list { margin-top:clamp(36px,5vh,60px); border-top:1px solid var(--line); }
.svc-row { border-bottom:1px solid var(--line); }
.svc-bar {
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(18px,3vw,44px); padding:clamp(22px,3vh,34px) 8px; cursor:pointer;
  transition:padding-left 0.35s var(--ease);
}
.svc-row:hover .svc-bar, .svc-row.open .svc-bar { padding-left:22px; }
.svc-rn { font-size:13px; font-weight:800; color:var(--crimson-2); letter-spacing:0.06em; min-width:32px; }
.svc-name { font-size:clamp(19px,2.4vw,32px); font-weight:800; text-transform:uppercase; letter-spacing:-0.015em; line-height:1.1; }
.svc-short { font-size:13px; color:var(--tx-3); max-width:32ch; text-align:right; }
.svc-toggle { position:relative; width:16px; height:16px; flex-shrink:0; }
.svc-toggle::before, .svc-toggle::after { content:''; position:absolute; background:var(--tx-2); transition:transform 0.35s var(--ease); }
.svc-toggle::before { top:7px; left:0; width:16px; height:2px; }
.svc-toggle::after { top:0; left:7px; width:2px; height:16px; }
.svc-row.open .svc-toggle::after { transform:rotate(90deg); }
.svc-panel { max-height:0; overflow:hidden; transition:max-height 0.55s var(--ease); }
.svc-panel-inner { padding:6px 8px clamp(28px,4vh,44px) calc(32px + clamp(18px,3vw,44px)); }
.svc-desc { max-width:62ch; color:var(--tx-2); font-size:15px; line-height:1.7; }
.svc-sub { margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.svc-sub-item {
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--tx-2); border:1px solid var(--line); padding:10px 16px; transition:all 0.25s;
}
.svc-sub-item:hover { border-color:var(--crimson); color:var(--tx); background:var(--tint); }
.svc-panel-cta { margin-top:26px; }

/* ── WORK grid ── */
.work-head { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:clamp(36px,5vh,60px); }
.work-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:22px; }
.work-col { display:flex; flex-direction:column; gap:22px; }
.work-card { position:relative; overflow:hidden; background:var(--bg-card); border:1px solid var(--line-soft); cursor:pointer; display:block; }
.work-ph { position:relative; overflow:hidden; background:linear-gradient(150deg, var(--bg-raise), var(--bg-deep)); }
.work-card.tall .work-ph { aspect-ratio:4/4.6; }
.work-card.short .work-ph { aspect-ratio:16/8.2; }
.work-card.std .work-ph { aspect-ratio:16/10; }
.work-card.wide .work-ph { aspect-ratio:21/8; }
.work-ph-fallback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:clamp(64px,8vw,120px); font-weight:800; letter-spacing:-0.04em; color:var(--mark);
  transition:color 0.4s, transform 0.6s var(--ease);
}
.work-card:hover .work-ph-fallback { transform:scale(1.05); }
.work-card:hover { border-color:var(--line-str); }
.work-arr {
  position:absolute; top:18px; right:18px; z-index:2; width:42px; height:42px;
  border:1px solid var(--line-str); display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--tx); background:color-mix(in srgb, var(--bg-deep) 55%, transparent);
  backdrop-filter:blur(8px); opacity:0; transform:translate(-6px,6px); transition:all 0.35s var(--ease);
}
.work-card:hover .work-arr { opacity:1; transform:none; background:var(--crimson); border-color:var(--crimson); color:#F6F4F0; }
.work-body { padding:22px 24px 26px; }
.work-disc { font-size:10px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--crimson-2); }
.work-name { font-size:clamp(18px,1.8vw,26px); font-weight:800; text-transform:uppercase; letter-spacing:-0.015em; margin-top:10px; }
.work-line { font-size:13.5px; color:var(--tx-2); line-height:1.6; margin-top:8px; max-width:52ch; }
.work-result { font-size:12.5px; color:var(--tx-2); margin-top:14px; padding-top:14px; border-top:1px solid var(--line); line-height:1.6; }
.work-result b { color:var(--crimson-2); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; font-size:10px; margin-right:8px; }
.work-cards-2 { margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.work-sec-sub { max-width:66ch; color:var(--tx-2); font-size:14.5px; margin-top:14px; }
.work-sec.hide { display:none; }

/* ── Work filter ── */
.work-filter {
  position:sticky; top:var(--nav-h); z-index:250;
  background: color-mix(in srgb, var(--bg-deep) 90%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding:14px 0;
}
.work-filter .wrap { display:flex; gap:10px; flex-wrap:wrap; }
.wf-btn { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--tx-3); border:1px solid var(--line-str); padding:9px 18px; transition:all 0.25s; }
.wf-btn:hover { color:var(--tx); border-color:var(--tx); }
.wf-btn.active { background:var(--crimson); border-color:var(--crimson); color:#F6F4F0; }

/* ── Insight strip ── */
.insight-strip {
  margin-top:38px; display:flex; gap:26px; align-items:center;
  border:1px solid var(--line); border-left:2px solid var(--crimson);
  padding:clamp(22px,2.8vw,34px); background:var(--tint);
}
.insight-mark { font-size:clamp(28px,3.4vw,46px); font-weight:800; color:var(--crimson-2); opacity:0.55; flex-shrink:0; letter-spacing:-0.03em; }
.insight-strip p { font-size:clamp(14.5px,1.5vw,17px); color:var(--tx); font-weight:500; line-height:1.6; max-width:72ch; }

/* ── PROCESS timeline ── */
.proc-steps { margin-top:clamp(44px,6vh,72px); display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(18px,2.4vw,36px); position:relative; }
.proc-line-bg { position:absolute; top:20px; left:4%; right:4%; height:1px; background:var(--line); }
.proc-step { position:relative; }
.proc-dot {
  position:relative; z-index:1; width:41px; height:41px; background:var(--bg); border:1px solid var(--crimson);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--crimson-2);
}
.section--deep .proc-dot { background:var(--bg-deep); }
.proc-name { font-size:clamp(15px,1.3vw,19px); font-weight:800; text-transform:uppercase; margin-top:20px; letter-spacing:-0.01em; }
.proc-desc { font-size:13px; color:var(--tx-2); line-height:1.62; margin-top:10px; }

/* ── INDUSTRIES grid ── */
.ind-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:clamp(36px,5vh,56px); }
.ind-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.ind-item {
  background:var(--bg-card); padding:22px 24px; display:flex; align-items:center; gap:14px;
  transition:background 0.35s ease, padding-left 0.3s var(--ease);
}
a.ind-item:hover { background:var(--tint); padding-left:30px; }
.ind-n { font-size:10px; font-weight:800; color:var(--crimson-2); letter-spacing:0.1em; }
.ind-name { font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }

/* ── Hub cards ── */
.hub-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.hub-cards--2 { grid-template-columns:repeat(2,1fr); }
.hub-card { background:var(--bg-card); padding:clamp(28px,3vw,46px) clamp(24px,2.6vw,38px); display:flex; flex-direction:column; gap:14px; transition:background 0.3s; }
.hub-card:hover { background:var(--tint); }
.hub-card-num { font-size:12px; font-weight:800; color:var(--crimson-2); letter-spacing:0.1em; }
.hub-card h2, .hub-card h3 { font-size:clamp(19px,2vw,27px); font-weight:800; text-transform:uppercase; letter-spacing:-0.015em; line-height:1.12; }
.hub-card p { font-size:13.5px; color:var(--tx-2); line-height:1.65; }
.hub-card-list { display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.hub-card-list li { font-size:12.5px; color:var(--tx-3); padding-left:18px; position:relative; }
.hub-card-list li::before { content:''; position:absolute; left:0; top:9px; width:7px; height:1px; background:var(--crimson); }
.hub-card-link { margin-top:auto; padding-top:16px; font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--tx-3); transition:color 0.2s; }
.hub-card:hover .hub-card-link { color:var(--crimson-2); }

/* ── Chips ── */
.chips { margin-top:clamp(28px,3.6vw,48px); display:flex; flex-wrap:wrap; gap:10px; }
.chip {
  font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--tx-2); border:1px solid var(--line-str); padding:12px 20px; transition:all 0.25s;
}
.chip:hover { border-color:var(--crimson); color:var(--tx); background:var(--tint); }

/* ── Detail blocks ── */
.detail-block { padding:clamp(34px,4.6vw,58px) 0; border-bottom:1px solid var(--line); }
.detail-block:last-child { border-bottom:none; }
.detail-block-head { display:flex; align-items:baseline; gap:22px; margin-bottom:24px; }
.detail-block-idx { font-size:12px; font-weight:800; color:var(--crimson-2); letter-spacing:0.14em; }
.detail-block-head h2 { font-size:clamp(21px,2.7vw,34px); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em; }
.detail-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 44px; }
.detail-list li { font-size:14.5px; color:var(--tx-2); line-height:1.6; padding-left:22px; position:relative; }
.detail-list li::before { content:''; position:absolute; left:0; top:12px; width:9px; height:1px; background:var(--crimson); }
.detail-prose { max-width:66ch; font-size:15px; color:var(--tx-2); line-height:1.78; }
.legal-prose .detail-list { grid-template-columns:1fr; }

/* ── Pager ── */
.pager { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.pager-link { background:var(--bg-card); padding:28px 32px; display:flex; flex-direction:column; gap:8px; transition:background 0.25s; }
.pager-link:hover { background:var(--tint); }
.pager-link span { font-size:10px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--tx-3); }
.pager-link strong { font-size:clamp(14px,1.5vw,19px); font-weight:800; text-transform:uppercase; }
.pager-link.right { text-align:right; align-items:flex-end; }

/* ── ENGAGEMENTS ── */
.eng-grid { margin-top:clamp(40px,5vh,64px); display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.eng-card {
  background:var(--bg-card); border:1px solid var(--line); position:relative;
  padding:clamp(32px,3vw,48px) clamp(28px,2.4vw,40px);
  display:flex; flex-direction:column; transition:transform 0.35s var(--ease), box-shadow 0.35s;
  scroll-margin-top:110px;
}
.eng-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.eng-card.feat { border-color:var(--crimson); box-shadow:0 0 0 1px var(--crimson); }
.eng-badge {
  position:absolute; top:-13px; left:clamp(28px,2.4vw,40px);
  background:var(--crimson); color:#F6F4F0; font-size:10px; font-weight:800;
  letter-spacing:0.2em; text-transform:uppercase; padding:6px 14px;
}
.eng-rn { font-size:13px; font-weight:800; color:var(--crimson-2); letter-spacing:0.1em; }
.eng-name { font-size:clamp(26px,2.8vw,38px); font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; margin-top:12px; }
.eng-sub { font-size:14.5px; color:var(--tx-2); margin-top:10px; line-height:1.55; }
.eng-rule { height:1px; background:var(--line); margin:24px 0; }
.eng-h { font-size:10px; font-weight:800; letter-spacing:0.24em; text-transform:uppercase; color:var(--tx-3); margin:18px 0 12px; }
.eng-list { display:flex; flex-direction:column; gap:11px; }
.eng-list li { font-size:13.5px; color:var(--tx-2); line-height:1.55; padding-left:22px; position:relative; }
.eng-list li::before { content:''; position:absolute; left:0; top:10px; width:9px; height:1px; background:var(--crimson); }
.eng-meta {
  margin-top:auto; padding-top:26px; display:flex; justify-content:space-between; align-items:baseline;
  font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--tx-3);
}
.eng-meta b { color:var(--tx); font-size:12px; letter-spacing:0.1em; }
.eng-card .btn-solid { margin-top:22px; justify-content:center; }

/* ── Studio ── */
.vi-words { margin-top:clamp(32px,4vw,56px); display:flex; flex-wrap:wrap; gap:14px 34px; margin-bottom:28px; }
.vi-word { font-size:clamp(26px,3.6vw,48px); font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; }
.team-grid { margin-top:clamp(32px,4vw,56px); display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.team-card { background:var(--bg-card); border:1px solid var(--line); padding:clamp(26px,3vw,42px); }
.team-photo { aspect-ratio:16/9; background:linear-gradient(150deg, var(--bg-raise), var(--bg-deep)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.team-photo span { font-size:52px; font-weight:900; color:var(--mark); }
.team-card h3 { font-size:19px; font-weight:800; text-transform:uppercase; margin-bottom:10px; }
.team-card p { font-size:14px; color:var(--tx-2); line-height:1.68; }
.quote-attr { margin-top:26px; font-size:11px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--tx-3); }

/* ── CONTACT ── */
.contact-layout { display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(36px,5vw,84px); align-items:start; }
.contact-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field { margin-bottom:26px; }
.form-field label, .form-field .form-label {
  font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--tx-3); display:block; margin-bottom:11px;
}
.form-field label em, .form-field .form-label em { font-style:normal; text-transform:none; letter-spacing:0.04em; }
.form-field input, .form-field select, .form-field textarea {
  width:100%; background:var(--bg-card); border:1px solid var(--line-str);
  color:var(--tx); font:inherit; font-size:14.5px; padding:14px 17px;
  outline:none; transition:border-color 0.25s, background 0.25s; border-radius:0;
}
.form-field input::placeholder, .form-field textarea::placeholder { color:var(--tx-3); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--crimson); }
.form-field textarea { resize:vertical; }
.chk-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.chk {
  display:flex; align-items:center; gap:11px; border:1px solid var(--line);
  background:var(--bg-card); padding:12px 15px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--tx-2); transition:all 0.2s; user-select:none;
}
.chk:hover { border-color:var(--line-str); color:var(--tx); }
.chk input { accent-color:var(--crimson); width:15px; height:15px; flex-shrink:0; }
.chk:has(input:checked) { border-color:var(--crimson); background:var(--tint); color:var(--tx); }
.contact-aside-block { border:1px solid var(--line); background:var(--bg-card); padding:28px 30px; margin-bottom:20px; }
.contact-aside-block h3 { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.18em; margin-bottom:18px; color:var(--crimson-2); }
.contact-aside-block ul li { margin-bottom:11px; font-size:14px; color:var(--tx-2); }
.contact-aside-block ul a { transition:color 0.2s; }
.contact-aside-block ul a:hover { color:var(--crimson-2); }
.contact-aside-block a em, .contact-aside-block li em { font-style:normal; color:var(--tx-3); font-size:12px; }

/* ── CTA strip ── */
.cta-strip { background:var(--crimson); color:#F6F4F0; padding:clamp(70px,10vh,120px) var(--pad); position:relative; overflow:hidden; }
.cta-strip::before {
  content:'VI'; position:absolute; right:-0.04em; top:50%; transform:translateY(-50%);
  font-size:clamp(200px,26vw,420px); font-weight:800; line-height:0.7; color:rgba(246,244,240,0.07);
  pointer-events:none;
}
.cta-inner { max-width:var(--maxw); margin:0 auto; position:relative; }
.cta-label { font-size:11px; font-weight:700; letter-spacing:0.34em; text-transform:uppercase; color:rgba(246,244,240,0.6); }
.cta-title { font-size:clamp(34px,5vw,76px); font-weight:800; line-height:1.02; letter-spacing:-0.025em; text-transform:uppercase; margin-top:20px; max-width:20ch; }
.cta-actions { margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
.cta-strip .btn-solid { background:#F6F4F0; color:#141414; }
.cta-strip .btn-solid:hover { background:#fff; }
.cta-strip .btn-ghost { color:#F6F4F0; border-color:rgba(246,244,240,0.35); }
.cta-strip .btn-ghost:hover { border-color:#F6F4F0; }

/* ── FOOTER ── */
.footer { background:var(--bg-deep); border-top:1px solid var(--line); padding:clamp(56px,8vh,90px) var(--pad) 36px; }
.footer-inner { max-width:var(--maxw); margin:0 auto; }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(28px,4vw,64px); padding-bottom:clamp(40px,6vh,64px); border-bottom:1px solid var(--line); }
.footer-brand { font-size:22px; font-weight:900; letter-spacing:0.03em; text-transform:uppercase; }
.footer-brand .v { color:var(--crimson-2); }
.footer-desc { margin-top:16px; font-size:13.5px; color:var(--tx-3); max-width:34ch; line-height:1.7; }
.footer-col h4 { font-size:10px; font-weight:800; letter-spacing:0.28em; text-transform:uppercase; color:var(--tx-3); margin-bottom:18px; }
.footer-col ul li { margin-bottom:11px; }
.footer-col ul a { font-size:13.5px; color:var(--tx-2); transition:color 0.2s; }
.footer-col ul a:hover { color:var(--crimson-2); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:28px; }
.footer-copy { font-size:12px; color:var(--tx-3); }
.footer-legal { display:flex; gap:22px; }
.footer-legal a { font-size:12px; color:var(--tx-3); transition:color 0.2s; }
.footer-legal a:hover { color:var(--tx); }

/* ── Cookie notice ── */
.cookie-notice {
  position:fixed; bottom:20px; left:20px; z-index:400; max-width:460px;
  background:var(--bg-card); border:1px solid var(--line-str); color:var(--tx);
  padding:22px 26px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow);
}
.cookie-notice[hidden] { display:none; }
.cookie-notice p { font-size:12.5px; color:var(--tx-2); line-height:1.6; }
.cookie-notice a { color:var(--tx); text-decoration:underline; text-underline-offset:3px; }
.cookie-actions { display:flex; gap:10px; }
.cookie-accept, .cookie-decline { font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; padding:10px 22px; transition:all 0.25s; }
.cookie-accept { background:var(--crimson); color:#F6F4F0; }
.cookie-accept:hover { background:var(--crimson-2); }
.cookie-decline { border:1px solid var(--line-str); color:var(--tx-2); }
.cookie-decline:hover { color:var(--tx); border-color:var(--tx); }

/* ── Misc ── */
.section-cta { margin-top:clamp(36px,5vw,56px); display:flex; gap:16px; flex-wrap:wrap; }
.hero--404 { justify-content:center; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--crimson-2); outline-offset:3px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .eco-stage { grid-template-columns:repeat(3,1fr); }
  .eco-node { border-bottom:1px solid var(--line-soft); min-height:0; }
  .ind-grid { grid-template-columns:repeat(3,1fr); }
  .proc-steps { grid-template-columns:repeat(3,1fr) !important; gap:36px 24px; }
  .proc-line-bg { display:none; }
}
@media (max-width: 980px) {
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .manifesto .wrap { grid-template-columns:1fr !important; }
  .work-grid { grid-template-columns:1fr; }
  .eng-grid { grid-template-columns:1fr; max-width:620px; }
  .hub-cards, .hub-cards--2 { grid-template-columns:1fr; }
  .contact-layout { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr; }
  .pager { grid-template-columns:1fr; }
  .pager-link.right { text-align:left; align-items:flex-start; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .svc-short { display:none; }
}
@media (max-width: 640px) {
  .eco-stage { grid-template-columns:1fr; }
  .ind-grid { grid-template-columns:1fr 1fr; }
  .proc-steps { grid-template-columns:1fr 1fr !important; }
  .work-cards-2 { grid-template-columns:1fr; }
  .contact-form .form-row { grid-template-columns:1fr; }
  .chk-grid { grid-template-columns:1fr; }
  .detail-list { grid-template-columns:1fr; }
  .manifesto-stats { grid-template-columns:1fr 1fr; }
  .insight-strip { flex-direction:column; align-items:flex-start; gap:12px; }
  .footer-top { grid-template-columns:1fr; }
  .cookie-notice { left:16px; right:16px; max-width:none; }
  .hero-scroll { display:none; }
}