/* ============================================================
   TRIPLVI — Complete Redesign
   Editorial dark style · Brand-matched
============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500&display=swap');

/* ── Tokens ── */
:root {
  --black:      #111111;
  --dark:       #1A1A1A;
  --charcoal:   #222222;
  --card:       #1E1E1E;
  --border:     rgba(246,244,240,0.10);
  --border-str: rgba(246,244,240,0.18);
  --crimson:    #8B0000;
  --crimson-2:  #A50000;
  --off-white:  #F6F4F0;
  --cream:      #EDE9E3;
  --gray:       #7A7470;
  --gray-lt:    #B8B4B0;

  --font-d: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-b: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);

  --nav-h:  68px;
  --max:    1360px;
  --gutter: clamp(20px, 4vw, 60px);
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background: var(--dark);
  color: var(--off-white);
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Perspective grid pattern — matches brand cover, very subtle */
  background-image:
    repeating-linear-gradient(158deg, transparent, transparent 79px, rgba(246,244,240,0.025) 79px, rgba(246,244,240,0.025) 80px),
    repeating-linear-gradient(180deg, transparent, transparent 79px, rgba(246,244,240,0.02) 79px, rgba(246,244,240,0.02) 80px);
}
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; }

/* ── NAV ── */
.site-nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  transition: background 0.4s var(--ease), border-bottom 0.4s;
}
.site-nav.scrolled {
  background: rgba(17,17,17,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  width:100%; max-width:var(--max); margin:0 auto;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center; gap:24px;
}
.nav-logo {
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-logo .vi { color: var(--crimson); }
.nav-links {
  display:flex; align-items:center; justify-content:center;
  gap: clamp(20px,3vw,48px);
}
.nav-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-lt);
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; 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(--off-white); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta {
  font-size: 11px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  border: 1px solid var(--border-str);
  padding: 9px 20px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.nav-cta:hover { background:var(--crimson); border-color:var(--crimson); color:#fff; }
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  width:28px; cursor:pointer; padding:4px 0;
}
.nav-toggle span {
  display:block; height:1.5px; background:var(--off-white);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-drawer {
  display:none; position:fixed; inset:0; z-index:99;
  background: var(--black);
  padding: calc(var(--nav-h) + 40px) var(--gutter) 40px;
  flex-direction:column; gap:8px;
}
.nav-drawer.open { display:flex; }
.nav-drawer a {
  font-family: var(--font-d); font-size: clamp(28px,8vw,48px);
  font-weight:800; text-transform:uppercase; letter-spacing:-0.02em;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.nav-drawer a .num { font-size:13px; color:var(--gray); }

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: calc(var(--nav-h) + 40px) var(--gutter) clamp(48px,6vw,80px);
  position:relative; overflow:hidden;
}
.hero-eyebrow {
  font-size:11px; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--gray); margin-bottom:24px;
}
.hero-title {
  font-family: var(--font-d);
  font-size: clamp(64px, 11vw, 180px);
  font-weight:900;
  line-height:0.9;
  letter-spacing:-0.04em;
  text-transform:uppercase;
  max-width:var(--max);
  position:relative; z-index:1;
}
.hero-title .vi-accent { color: var(--crimson); }
.hero-bottom {
  margin-top:clamp(32px,4vw,56px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.hero-sub {
  max-width:480px;
  font-size: clamp(14px,1.4vw,16px);
  color:var(--gray-lt); line-height:1.7;
}
.hero-actions { display:flex; gap:16px; align-items:center; flex-shrink:0; }
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--crimson); color:#fff;
  font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  padding:14px 28px;
  transition: background 0.25s, transform 0.25s var(--ease);
}
.btn-primary:hover { background:var(--crimson-2); transform:translateY(-2px); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--border-str); color:var(--gray-lt);
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  padding:14px 28px;
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.btn-ghost:hover { border-color:var(--off-white); color:var(--off-white); transform:translateY(-2px); }
/* Decorative large VI mark behind hero */
.hero-vi-bg {
  position:absolute; right:-2%; top:50%; transform:translateY(-50%);
  font-family:var(--font-d); font-size:clamp(280px,40vw,600px);
  font-weight:900; color:rgba(139,0,0,0.07);
  line-height:1; pointer-events:none; user-select:none;
  letter-spacing:-0.05em;
}
/* Grid overlay on hero — stronger, bottom-left */
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(158deg, transparent, transparent 59px, rgba(246,244,240,0.04) 59px, rgba(246,244,240,0.04) 60px),
    repeating-linear-gradient(180deg, transparent, transparent 59px, rgba(246,244,240,0.035) 59px, rgba(246,244,240,0.035) 60px);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 5% 95%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 40%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 70% at 5% 95%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 40%, transparent 70%);
  pointer-events:none;
}
.hero-divider {
  position:absolute; bottom:0; left:0; right:0;
  height:1px; background:var(--border);
}

/* ── MARQUEE STRIP ── */
.marquee-strip {
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden; padding:14px 0;
  background:var(--charcoal);
}
.marquee-track {
  display:flex; gap:0;
  animation: marquee 28s linear infinite;
  width: max-content;
}
.marquee-track span {
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gray); padding:0 48px; white-space:nowrap;
}
.marquee-track span.cr { color:var(--crimson); }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ── SECTION SHELL ── */
.section {
  padding: clamp(80px,10vw,140px) var(--gutter);
  border-bottom:1px solid var(--border);
  position:relative;
}
.section--dark { background:var(--dark); }
.section--black { background:var(--black); }
.section--card  { background:var(--card); }
.container { max-width:var(--max); margin:0 auto; }
.section-label {
  font-size:11px; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--gray); margin-bottom:clamp(40px,5vw,64px);
  display:flex; align-items:center; gap:16px;
}
.section-label::before {
  content:''; display:block; width:32px; height:1px; background:var(--crimson);
}
.section-title {
  font-family:var(--font-d);
  font-size:clamp(40px,6vw,88px);
  font-weight:900; text-transform:uppercase;
  letter-spacing:-0.03em; line-height:0.92;
  color:var(--off-white);
}
.section-title .cr { color:var(--crimson); }

/* ── ABOUT / ERA STRIP ── */
.era-strip {
  padding:clamp(60px,8vw,100px) var(--gutter);
  border-bottom:1px solid var(--border);
  background:var(--black);
  overflow:hidden;
}
.era-inner {
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px);
  align-items:center;
}
.era-year {
  font-family:var(--font-d);
  font-size:clamp(48px,9vw,130px);
  font-weight:900; letter-spacing:-0.04em;
  color:var(--charcoal); text-transform:uppercase;
  line-height:1;
}
.era-year span { color:var(--off-white); }
.era-content p {
  font-size:clamp(14px,1.4vw,16px); color:var(--gray-lt);
  line-height:1.75; max-width:460px;
}
.era-content p + p { margin-top:20px; }
.era-cta { margin-top:32px; }

/* ── SERVICES ACCORDION ── */
.services-list { border-top:1px solid var(--border); }
.service-item {
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.service-header {
  display:grid;
  grid-template-columns: 48px 1fr 28px;
  align-items:center; gap:24px;
  padding:24px 0; cursor:pointer;
  transition: background 0.2s;
}
.service-header:hover .service-name { color:var(--off-white); }
.service-num {
  font-size:11px; letter-spacing:0.15em; color:var(--gray);
  font-family:var(--font-d); font-weight:600;
}
.service-name {
  font-family:var(--font-d);
  font-size:clamp(18px,2.5vw,26px);
  font-weight:700; text-transform:uppercase; letter-spacing:-0.01em;
  color:var(--gray-lt);
  transition:color 0.25s;
}
.service-toggle {
  width:28px; height:28px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--gray);
  transition: background 0.25s, border-color 0.25s, transform 0.35s var(--ease), color 0.25s;
  flex-shrink:0;
}
.service-item.open .service-toggle {
  background:var(--crimson); border-color:var(--crimson); color:#fff;
  transform:rotate(45deg);
}
.service-item.open .service-name { color:var(--off-white); }
.service-body {
  display:grid; grid-template-rows:0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.service-item.open .service-body { grid-template-rows:1fr; }
.service-body-inner {
  overflow:hidden;
  padding:0 0 0 72px;
}
.service-body-inner-pad { padding-bottom:32px; }
.service-desc {
  font-size:15px; color:var(--gray-lt); line-height:1.75;
  max-width:600px; margin-bottom:24px;
}
.service-img {
  width:100%; max-width:520px; aspect-ratio:16/9;
  object-fit:cover;
  background:var(--charcoal);
  margin-bottom:8px;
}
.service-img-placeholder {
  width:100%; max-width:520px; aspect-ratio:16/9;
  background: linear-gradient(135deg, var(--charcoal) 0%, #2a2a2a 100%);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
}
.service-img-placeholder span {
  font-family:var(--font-d); font-size:64px; font-weight:900;
  color:rgba(139,0,0,0.25); letter-spacing:-0.04em;
}

/* ── PROJECTS ── */
.projects-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(40px,5vw,64px); gap:24px; flex-wrap:wrap;
}
.projects-nav { display:flex; gap:12px; }
.proj-arrow {
  width:48px; height:48px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer;
  transition: background 0.25s, border-color 0.25s;
}
.proj-arrow:hover { background:var(--crimson); border-color:var(--crimson); }
.projects-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2px;
}
.project-tile {
  position:relative; overflow:hidden;
  aspect-ratio:4/3; cursor:pointer;
  background:var(--charcoal);
}
.project-tile:first-child {
  grid-column:1/-1; aspect-ratio:21/9;
}
.project-img-placeholder {
  width:100%; height:100%;
  background:linear-gradient(135deg, var(--charcoal) 0%, #282828 60%, #1e1e1e 100%);
  transition:transform 0.6s var(--ease);
}
.project-tile:hover .project-img-placeholder { transform:scale(1.04); }
.project-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,0.85) 0%, transparent 55%);
  padding:28px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.project-cat {
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gray-lt); margin-bottom:8px;
}
.project-name {
  font-family:var(--font-d); font-size:clamp(18px,2.2vw,26px);
  font-weight:800; text-transform:uppercase; letter-spacing:-0.02em;
}
.project-desc { font-size:13px; color:var(--gray-lt); margin-top:6px; line-height:1.5; }
.project-vi {
  position:absolute; right:-8px; bottom:-16px;
  font-family:var(--font-d); font-size:96px; font-weight:900;
  color:rgba(139,0,0,0.12); letter-spacing:-0.05em;
  pointer-events:none; user-select:none;
  transition: color 0.4s;
}
.project-tile:hover .project-vi { color:rgba(139,0,0,0.22); }
.project-arrow {
  position:absolute; top:20px; right:20px;
  width:36px; height:36px; border:1px solid rgba(246,244,240,0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  transform:translateY(-4px); opacity:0;
  transition:opacity 0.3s, transform 0.3s var(--ease);
}
.project-tile:hover .project-arrow { opacity:1; transform:none; }

/* ── STATS ── */
.stats-grid {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:2px;
  border-top:1px solid var(--border);
}
.stat-cell {
  padding:clamp(32px,4vw,56px) clamp(20px,3vw,40px);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stat-cell:last-child { border-right:none; }
.stat-num {
  font-family:var(--font-d);
  font-size:clamp(40px,5vw,72px);
  font-weight:900; letter-spacing:-0.03em;
  color:var(--off-white); line-height:1;
  margin-bottom:12px;
}
.stat-num .cr { color:var(--crimson); }
.stat-label {
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gray);
}

/* ── MANIFESTO STRIP ── */
.manifesto {
  padding:clamp(80px,10vw,130px) var(--gutter);
  background:var(--black);
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.manifesto::before {
  content:'VI';
  position:absolute; right:var(--gutter); top:50%;
  transform:translateY(-50%);
  font-family:var(--font-d); font-size:clamp(120px,20vw,280px);
  font-weight:900; color:rgba(139,0,0,0.06);
  pointer-events:none; user-select:none; letter-spacing:-0.05em;
}
.manifesto-inner { max-width:var(--max); margin:0 auto; }
.manifesto-quote {
  font-family:var(--font-d);
  font-size:clamp(22px,3.5vw,48px);
  font-weight:700; line-height:1.2; letter-spacing:-0.02em;
  max-width:800px; color:var(--off-white);
}
.manifesto-quote .cr { color:var(--crimson); }
.manifesto-attr {
  margin-top:28px; font-size:12px;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--gray);
}

/* ── CTA STRIP ── */
.cta-strip {
  padding:clamp(80px,10vw,120px) var(--gutter);
  background:var(--crimson);
  position:relative; overflow:hidden;
}
.cta-strip::before {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(158deg, transparent, transparent 59px, rgba(246,244,240,0.06) 59px, rgba(246,244,240,0.06) 60px),
    repeating-linear-gradient(180deg, transparent, transparent 59px, rgba(246,244,240,0.05) 59px, rgba(246,244,240,0.05) 60px);
  pointer-events:none;
}
.cta-inner { max-width:var(--max); margin:0 auto; position:relative; }
.cta-label {
  font-size:11px; letter-spacing:0.25em; text-transform:uppercase;
  color:rgba(246,244,240,0.6); margin-bottom:20px;
}
.cta-title {
  font-family:var(--font-d);
  font-size:clamp(36px,6vw,80px);
  font-weight:900; text-transform:uppercase;
  letter-spacing:-0.03em; line-height:0.95;
  color:#fff; margin-bottom:clamp(32px,4vw,48px);
}
.cta-actions { display:flex; gap:16px; flex-wrap:wrap; }
.btn-white {
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:var(--crimson);
  font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  padding:14px 28px;
  transition:background 0.25s, transform 0.25s var(--ease);
}
.btn-white:hover { background:var(--off-white); transform:translateY(-2px); }
.btn-outline-white {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,0.5); color:#fff;
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  padding:14px 28px;
  transition:border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
}
.btn-outline-white:hover { border-color:#fff; background:rgba(255,255,255,0.1); transform:translateY(-2px); }

/* ── FOOTER ── */
.site-footer {
  background:var(--black);
  border-top:1px solid var(--border);
  padding:clamp(60px,8vw,100px) var(--gutter) 40px;
}
.footer-inner { max-width:var(--max); margin:0 auto; }
.footer-top {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(32px,5vw,64px);
  padding-bottom:clamp(48px,6vw,80px);
  border-bottom:1px solid var(--border);
}
.footer-brand-name {
  font-family:var(--font-d); font-size:clamp(28px,3.5vw,48px);
  font-weight:900; text-transform:uppercase; letter-spacing:-0.03em;
  margin-bottom:16px;
}
.footer-brand-name .vi { color:var(--crimson); }
.footer-desc { font-size:14px; color:var(--gray); line-height:1.7; max-width:300px; }
.footer-col h4 {
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gray); margin-bottom:20px;
}
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col a {
  font-size:14px; color:var(--gray-lt);
  transition:color 0.2s;
}
.footer-col a:hover { color:var(--off-white); }
.footer-bottom {
  margin-top:32px;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap;
}
.footer-copy { font-size:12px; color:var(--gray); letter-spacing:0.05em; }
.footer-legal { display:flex; gap:24px; }
.footer-legal a { font-size:12px; color:var(--gray); transition:color 0.2s; }
.footer-legal a:hover { color:var(--off-white); }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: calc(var(--nav-h) + clamp(60px,8vw,100px)) var(--gutter) clamp(48px,6vw,72px);
  border-bottom:1px solid var(--border);
  background:var(--black);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(158deg, transparent, transparent 59px, rgba(246,244,240,0.03) 59px, rgba(246,244,240,0.03) 60px),
    repeating-linear-gradient(180deg, transparent, transparent 59px, rgba(246,244,240,0.025) 59px, rgba(246,244,240,0.025) 60px);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 5% 95%, rgba(0,0,0,0.8) 0%, transparent 65%);
  mask-image: radial-gradient(ellipse 70% 60% at 5% 95%, rgba(0,0,0,0.8) 0%, transparent 65%);
  pointer-events:none;
}
.page-hero-inner { max-width:var(--max); margin:0 auto; position:relative; }
.page-hero-label {
  font-size:11px; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--gray); margin-bottom:24px;
  display:flex; align-items:center; gap:14px;
}
.page-hero-label::before { content:''; width:28px; height:1px; background:var(--crimson); }
.page-hero-title {
  font-family:var(--font-d);
  font-size:clamp(48px,8vw,120px);
  font-weight:900; text-transform:uppercase;
  letter-spacing:-0.04em; line-height:0.9;
  color:var(--off-white);
}
.page-hero-title .cr { color:var(--crimson); }
.page-hero-sub {
  margin-top:28px; max-width:560px;
  font-size:clamp(14px,1.4vw,16px); color:var(--gray-lt); line-height:1.75;
}

/* ── TWO-COL EDITORIAL ── */
.editorial {
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px);
  align-items:center;
}
.editorial.flip { direction:rtl; }
.editorial.flip > * { direction:ltr; }
.editorial-text { }
.editorial-label {
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gray); margin-bottom:20px;
  display:flex; align-items:center; gap:14px;
}
.editorial-label::before { content:''; width:24px; height:1px; background:var(--crimson); }
.editorial-h2 {
  font-family:var(--font-d);
  font-size:clamp(28px,4vw,52px);
  font-weight:800; text-transform:uppercase; letter-spacing:-0.02em;
  line-height:1.0; color:var(--off-white); margin-bottom:20px;
}
.editorial-h2 .cr { color:var(--crimson); }
.editorial-body {
  font-size:15px; color:var(--gray-lt); line-height:1.75;
}
.editorial-body + .editorial-body { margin-top:16px; }
.editorial-cta { margin-top:32px; }
.editorial-visual {
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--charcoal) 0%, #252525 100%);
  position:relative; overflow:hidden;
}
.editorial-visual-inner {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.editorial-vi {
  font-family:var(--font-d); font-size:clamp(80px,12vw,160px);
  font-weight:900; color:rgba(139,0,0,0.18); letter-spacing:-0.05em;
}
/* Perspective grid accent on editorial visual */
.editorial-visual::after {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(158deg, transparent, transparent 39px, rgba(246,244,240,0.03) 39px, rgba(246,244,240,0.03) 40px),
    repeating-linear-gradient(180deg, transparent, transparent 39px, rgba(246,244,240,0.025) 39px, rgba(246,244,240,0.025) 40px);
  pointer-events:none;
}

/* ── TEAM / ABOUT CARDS ── */
.team-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.team-card {
  background:var(--card);
  padding:clamp(28px,3vw,40px);
  border-bottom:2px solid transparent;
  transition:border-color 0.3s;
}
.team-card:hover { border-color:var(--crimson); }
.team-role { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray); margin-bottom:12px; }
.team-name { font-family:var(--font-d); font-size:clamp(18px,2vw,22px); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; margin-bottom:12px; }
.team-bio  { font-size:13px; color:var(--gray-lt); line-height:1.7; }

/* ── CONTACT FORM ── */
.contact-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px);
}
.contact-info { }
.contact-info-item { padding:24px 0; border-bottom:1px solid var(--border); }
.contact-info-label { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray); margin-bottom:8px; }
.contact-info-val { font-size:16px; color:var(--off-white); }
.form-row { margin-bottom:24px; }
.form-label { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gray); display:block; margin-bottom:10px; }
.form-input, .form-select, .form-textarea {
  width:100%; background:transparent;
  border:none; border-bottom:1px solid var(--border);
  color:var(--off-white); font-family:var(--font-b); font-size:15px; font-weight:300;
  padding:12px 0; outline:none;
  transition:border-color 0.25s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--off-white); }
.form-textarea { resize:vertical; min-height:100px; }
.form-select { cursor:pointer; }
.form-select option { background:var(--dark); }
.form-submit {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--crimson); color:#fff;
  font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  padding:16px 36px; cursor:pointer;
  transition:background 0.25s, transform 0.25s var(--ease);
  border:none;
}
.form-submit:hover { background:var(--crimson-2); transform:translateY(-2px); }
.form-success {
  display:none; padding:20px; background:rgba(139,0,0,0.15);
  border-left:2px solid var(--crimson); color:var(--off-white);
  font-size:14px; margin-top:20px;
}
.form-success.show { display:block; }

/* ── WORK PAGE GRID ── */
.work-full-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
}
.work-full-tile {
  position:relative; overflow:hidden; aspect-ratio:4/3;
  background:var(--charcoal); cursor:pointer;
}
.work-full-tile:nth-child(3n+1) { grid-column:1/-1; aspect-ratio:21/9; }
.work-tile-bg {
  width:100%; height:100%;
  background:linear-gradient(135deg, var(--charcoal) 0%, #282828 60%, #1e1e1e 100%);
  transition:transform 0.6s var(--ease);
}
.work-full-tile:hover .work-tile-bg { transform:scale(1.04); }
.work-tile-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,0.85) 0%, transparent 55%);
  padding:32px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.work-tile-cat  { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray-lt); margin-bottom:8px; }
.work-tile-name { font-family:var(--font-d); font-size:clamp(20px,2.5vw,30px); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em; }
.work-tile-year { font-size:13px; color:var(--gray); margin-top:6px; }

/* ── ANIMATIONS ── */
.fade-up {
  transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js-ready .fade-up {
  opacity:0; transform:translateY(24px);
}
.js-ready .fade-up.in-view {
  opacity:1; transform:none;
}
.js-ready .fade-up:nth-child(2) { transition-delay:0.08s; }
.js-ready .fade-up:nth-child(3) { transition-delay:0.16s; }
.js-ready .fade-up:nth-child(4) { transition-delay:0.24s; }
.js-ready .fade-up:nth-child(5) { transition-delay:0.32s; }
.js-ready .fade-up:nth-child(6) { transition-delay:0.40s; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:none; }
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}

.hero-eyebrow { animation:fadeIn  0.7s var(--ease) 0.1s both; }
.hero-title   { animation:fadeUp  1s   var(--ease) 0.2s both; }
.hero-bottom  { animation:fadeUp  0.8s var(--ease) 0.45s both; }
.hero-vi-bg   { animation:fadeIn  1.4s var(--ease) 0.3s both; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .nav-links, .nav-cta { display:none; }
  .nav-toggle { display:flex; }
  .hero-title { font-size:clamp(48px,12vw,80px); }
  .era-inner { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .editorial { grid-template-columns:1fr; }
  .editorial.flip { direction:ltr; }
  .projects-grid { grid-template-columns:1fr; }
  .project-tile:first-child { aspect-ratio:4/3; }
  .work-full-grid { grid-template-columns:1fr; }
  .work-full-tile:nth-child(3n+1) { aspect-ratio:4/3; }
  .contact-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat-cell:nth-child(2) { border-right:none; }
  .stat-cell:nth-child(3) { border-right:1px solid var(--border); }
  .footer-top { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; align-items:stretch; width:100%; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-eyebrow,.hero-title,.hero-bottom,.hero-vi-bg { animation:none; }
  .js-ready .fade-up { opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee-track { animation:none; }
}