/* ===== Taillor — design tokens ===== */
:root{
  --bg:        #1a1c20;
  --bg-2:      #232629;
  --bg-3:      #2c2f33;
  --paper:     #15171b;
  --ink:       #f3eee4;
  --ink-2:     #cfc8b9;
  --muted:     #8a8276;
  --line:      rgba(226, 213, 190, .10);
  --line-2:    rgba(226, 213, 190, .22);
  --bordo:     #7b2631;
  --bordo-2:   #a3343f;
  --gold:      #c5a36a;
  --gold-2:    #d8b878;
  --gold-ink:  #7c5e2b;

  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Inter", system-ui, sans-serif;
  --serif-italic: "Inter", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  --maxw: 1240px;
  --rail-x: 5.5vw;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
html{scroll-behavior:smooth}

body{
  font-family: var(--sans);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: #1f2126;
  background-image:
    radial-gradient(1100px 700px at 90% -10%, rgba(123,38,49,.18) 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 110%, rgba(197,163,106,.05) 0%, transparent 50%),
    /* couro acolchoado com costura */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none'><path d='M0 48 L48 0 L96 48 L48 96 Z' stroke='rgba(0,0,0,.34)' stroke-width='1'/><path d='M0 48 L48 0 L96 48 L48 96 Z' stroke='rgba(216,184,120,.42)' stroke-width='.8' stroke-dasharray='1.6 4'/><path d='M0 48 L48 0' stroke='rgba(255,255,255,.04)' stroke-width='.7'/><path d='M48 0 L96 48' stroke='rgba(255,255,255,.025)' stroke-width='.6'/><circle cx='48' cy='0' r='.9' fill='rgba(216,184,120,.5)'/><circle cx='0' cy='48' r='.9' fill='rgba(216,184,120,.5)'/><circle cx='96' cy='48' r='.9' fill='rgba(216,184,120,.5)'/><circle cx='48' cy='96' r='.9' fill='rgba(216,184,120,.5)'/></g></svg>"),
    /* sheen + grão */
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(180deg, #232629 0%, #1c1e22 60%, #1a1c1f 100%);
  background-size: auto, auto, 96px 96px, auto, auto;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--gold);font-weight:inherit}

.display{
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.display em{
  font-style: normal;
  color: var(--gold);
  font-weight: 500;
}
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -.02em; font-weight: 500; }
h1 { font-size: clamp(28px, 3.4vw, 52px); }
h2 { font-size: clamp(24px, 2.8vw, 40px); }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.mono-dim{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dim{color:var(--ink-2)}

/* ===== Alternância de tom entre seções (revela profundidade do couro) ===== */
main > section:nth-of-type(odd):not(.hero):not(.hero-cinema){
  background-color: rgba(8,10,14, .62);
}
main > section:nth-of-type(even):not(.hero):not(.hero-cinema){
  background-color: rgba(28,30,34, .18);
}

/* ===== Divisor padrão de seção: linha dourada em gradiente ===== */
.hero-cinema, .manifesto, .company, .pillars-row, .transform, .feature-teaser,
.contact-band, .page-hero, .concept-strip-section, .proj-featured, .proj-next,
.pd-numbers, .pd-ba, .pd-specs, .pd-gallery, .pd-build, .build-sheet{
  position: relative;
  border-bottom: none;
}
.hero-cinema::after, .manifesto::after, .company::after, .pillars-row::after,
.transform::after, .feature-teaser::after, .contact-band::after, .page-hero::after,
.concept-strip-section::after, .proj-featured::after, .proj-next::after,
.pd-numbers::after, .pd-ba::after, .pd-specs::after, .pd-gallery::after,
.pd-build::after, .build-sheet::after{
  content: "";
  position: absolute;
  left: clamp(20px, 6vw, 88px); right: clamp(20px, 6vw, 88px);
  bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(216,184,120,.18) 15%,
    rgba(216,184,120,.55) 50%,
    rgba(216,184,120,.18) 85%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* contact-band geralmente é a última — sem divisor */
.contact-band:last-of-type::after{display: none}

/* (trilhas removidas — não fazem sentido aqui) */
.bay-system, .bay-rail, .bay-beam, .bay-tap{display:none !important}
.bay-rail-removed{
  position:absolute;top:0;bottom:0;width:2px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(197,163,106,.22) 12%, rgba(197,163,106,.10) 50%, rgba(197,163,106,.22) 88%, transparent 100%);
}
.bay-rail::before{
  content:""; position:absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.06), transparent);
  background-size: 100% 200%;
}
.bay-rail-left{left:var(--rail-x)}
.bay-rail-right{right:var(--rail-x)}

/* Feixe de farol — varrida vertical de luz dourada */
.bay-beam{
  position:absolute;left:calc(var(--rail-x) - 26px);
  width:54px;height:90px;
  pointer-events:none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(216,184,120,.0) 20%,
    rgba(216,184,120,.28) 50%,
    rgba(216,184,120,.0) 80%,
    transparent 100%);
  filter: blur(6px);
  opacity: 0;
  transform: translateY(-120%);
}
.bay-beam-right{left:auto; right: calc(var(--rail-x) - 26px)}
body.ignition-on .bay-beam-left{animation: beamSweep 14s ease-in-out infinite}
body.ignition-on .bay-beam-right{animation: beamSweep 16s ease-in-out 2.2s infinite}
@keyframes beamSweep{
  0%   {transform: translateY(-30%); opacity: 0}
  8%   {opacity: 1}
  92%  {opacity: 1}
  100% {transform: translateY(110vh); opacity: 0}
}

/* Tap (telemetria) — labels que trocam por seção */
.bay-tap{
  position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;
  transition: top .6s var(--ease);
}
.bay-tap-left{left:0;padding-left:1.2vw}
.bay-tap-right{right:0;padding-right:1.2vw}
.bay-tap-chev{
  font-family: var(--serif); color: var(--gold);
  font-size: 22px; line-height: 1;
  animation: chevBlink 2.6s var(--ease) infinite;
}
@keyframes chevBlink{
  0%,100%{opacity:.45} 50%{opacity:1}
}
.bay-tap-pill{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); background: rgba(20,22,27,.82);
  border-top: 1px solid rgba(197,163,106,.45);
  border-bottom: 1px solid rgba(197,163,106,.18);
  border-left: 0; border-right: 0;
  padding: 9px 14px; min-width: 130px; text-align:center;
  backdrop-filter: blur(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), letter-spacing .35s var(--ease);
  position: relative;
}
.bay-tap-pill::before, .bay-tap-pill::after{
  content:""; position:absolute; top: 50%;
  width: 6px; height: 1px; background: var(--gold);
}
.bay-tap-pill::before{left: -8px}
.bay-tap-pill::after{right: -8px}
.bay-tap-pill.swap{opacity:.2;letter-spacing:.32em}

/* Telemetria fixa no rodapé — fica como leitura de painel */
.hud-telemetry{
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 22px;
  padding: 8px 16px;
  background: rgba(10,11,13,.7);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(10px);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
}
.hud-telemetry .tel-row{display:flex; gap: 8px; align-items: baseline}
.hud-telemetry em{font-style: normal; color: var(--muted); font-family: var(--mono)}
.hud-telemetry b{color: var(--gold); font-weight: 500; min-width: 36px}

@media (max-width: 900px){
  .hud-frame{display:none}
}

main,.nav,.footer{position:relative;z-index:2}
.stitch-shimmer{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(.3px) drop-shadow(0 0 2px rgba(216,184,120,.4));
}

/* ===== Nav ===== */
.nav{
  position: sticky; top: 0; z-index: 30;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding: 18px calc(var(--rail-x) + 14px);
  background:
    linear-gradient(180deg, rgba(28,30,34,.62) 0%, rgba(20,22,26,.55) 70%, rgba(14,16,20,.8) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none'><path d='M0 48 L48 0 L96 48 L48 96 Z' stroke='rgba(0,0,0,.34)' stroke-width='1'/><path d='M0 48 L48 0 L96 48 L48 96 Z' stroke='rgba(216,184,120,.55)' stroke-width='.9' stroke-dasharray='1.6 4'/><path d='M0 48 L48 0' stroke='rgba(255,255,255,.05)' stroke-width='.7'/><path d='M48 0 L96 48' stroke='rgba(255,255,255,.03)' stroke-width='.6'/><circle cx='48' cy='0' r='1' fill='rgba(216,184,120,.65)'/><circle cx='0' cy='48' r='1' fill='rgba(216,184,120,.65)'/><circle cx='96' cy='48' r='1' fill='rgba(216,184,120,.65)'/><circle cx='48' cy='96' r='1' fill='rgba(216,184,120,.65)'/></g></svg>") 0 0 / 96px 96px repeat,
    #1c1e22;
  border-bottom: 1px solid rgba(216,184,120,.22);
  box-shadow: 0 1px 0 rgba(216,184,120,.08);
  transition: padding .3s var(--ease);
}
body.scrolled .nav{
  padding-top:12px; padding-bottom:12px;
}

.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand-logo{
  width: auto;
  height: 38px;
  max-width: 142px;
  display: block;
  object-fit: contain;
}
.brand-mark{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line-2);
  background: linear-gradient(135deg, rgba(123,38,49,.22), rgba(20,22,27,.6));
  color: var(--gold);
  position: relative; overflow: hidden;
}
.brand-mark::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-120%);
}
.brand:hover .brand-mark::before{
  animation: sweep 1.1s var(--ease);
}
@keyframes sweep{ to { transform: translateX(120%) } }

.brand-m{stroke-dasharray: 220; stroke-dashoffset: 220; animation: drawM 1.4s var(--ease) .15s forwards}
@keyframes drawM{ to { stroke-dashoffset: 0 } }
.brand-signature{
  opacity:.55;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: drawM 1.1s var(--ease) .45s forwards;
}
@keyframes dotIn{ to { opacity: 1 } }

.brand-wordmark{display:flex;flex-direction:column;line-height:1.05}
.brand-name{
  font-family: var(--serif); font-weight: 700;
  font-size: 22px; letter-spacing: .04em;
}
.brand-sub{
  font-family: var(--mono); font-size: 10px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .2em;
  margin-top: 2px;
}

.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
  padding: 10px 14px;
  position: relative;
  transition: color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px;
  height:1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links .nav-admin-link{
  color: var(--gold);
  border: 1px solid rgba(197,163,106,.28);
  margin-left: 4px;
}
.nav-links .nav-admin-link:hover{
  color: #1a1107;
  background: var(--gold);
}

.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink);
  padding: 11px 16px;
  border: 1px solid var(--line-2);
  background: transparent;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.nav-cta:hover{background:var(--gold);color:#1a1107;border-color:var(--gold);transform:translateY(-1px)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px; padding:14px 22px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  cursor:pointer;
  border:1px solid transparent;
  transition: transform .2s, background .25s, color .25s, border-color .25s, box-shadow .25s;
  position: relative; overflow: hidden;
}
.btn:hover{transform:translateY(-1px)}
.btn-block{width:100%}

.btn-primary{
  background: linear-gradient(135deg, var(--bordo) 0%, var(--bordo-2) 100%);
  color:#fff;
  box-shadow: 0 12px 30px rgba(123,38,49,.36), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn-primary:hover::before{transform:translateX(120%)}

.btn-ghost{
  background: transparent; color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

.btn-line{
  background: transparent; color: var(--ink-2);
  border-color: var(--line);
}
.btn-line:hover{color:var(--ink);border-color:var(--line-2)}

.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* ===== Kickers / section heads ===== */
.kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-family: var(--mono); font-size: 11px;
  color: var(--gold);
  letter-spacing: .26em; text-transform: uppercase;
  margin: 0 0 22px;
}
.kicker-chev{
  color: var(--gold); font-family: var(--serif);
  font-size: 16px; line-height: 1; transform: translateY(-1px);
}
.kicker-slash{
  display: inline-block;
  width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: skewX(-30deg);
}

.section-head{margin-bottom: clamp(32px, 5vw, 64px); max-width: 880px}
.section-head h2{margin: 0}

/* ===== HERO ===== */
.hero{
  position: relative;
  min-height: calc(100vh - 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  padding: clamp(60px, 9vw, 130px) calc(var(--rail-x) + 18px) clamp(64px, 8vw, 110px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-position:center; background-size:cover;
  transform: scale(1.06);
  animation: kenburns 22s ease-in-out infinite alternate;
  filter: saturate(.9) contrast(1.04);
}
@keyframes kenburns{
  from{transform: scale(1.06) translate(0,0)}
  to  {transform: scale(1.14) translate(-1.8%, -1.4%)}
}
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.68) 38%, rgba(8,9,11,.2) 62%, rgba(8,9,11,.78) 100%),
    linear-gradient(180deg, rgba(8,9,11,.4) 0%, transparent 30%, transparent 70%, rgba(8,9,11,.78) 100%),
    radial-gradient(60% 60% at 20% 80%, rgba(123,38,49,.22), transparent 70%);
}

.hero-inner{position:relative;z-index:2;max-width:760px}
.hero-meta-top{
  display:flex;gap:18px;align-items:center;margin-bottom:38px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.hero-title{
  font-size: clamp(34px, 4vw, 60px);
  color: var(--ink);
  margin: 0;
}
.hero-sub{
  margin-top: 26px;
  color: var(--ink);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 540px;
  line-height: 1.6;
}

.hero-card{
  position:relative;z-index:2;
  justify-self: end; align-self: end;
  width: min(380px, 100%);
  border: 1px solid var(--line-2);
  background: rgba(14,16,20,.78);
  backdrop-filter: blur(12px);
  display: grid; grid-template-rows: 200px auto;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.hero-card:hover{
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.hero-card-img{
  background-position:center; background-size:cover;
  transition: transform 1s var(--ease);
}
.hero-card:hover .hero-card-img{transform:scale(1.06)}
.hero-card-body{padding: 22px}
.hero-card-body strong{
  display:block; margin-top:8px;
  font-family: var(--serif); font-size: 26px; font-weight: 600;
}
.hero-card-meta{
  display:flex; gap: 18px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  letter-spacing: .12em; text-transform: uppercase;
}
.hero-card-meta em{font-family:var(--mono);color:var(--muted);font-style:normal;margin-right:6px}
.hero-card-cta{
  display:inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}

.scroll-cue{
  position:absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-2); z-index: 2;
}
.scroll-cue .line{
  width:1px; height: 42px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollPulse 2.2s var(--ease) infinite;
}
@keyframes scrollPulse{
  0%{transform:scaleY(.2);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(.2);transform-origin:bottom}
}

/* ===== Hero CINEMA: foto full-bleed, texto sobreposto, strip técnico ===== */
.hero-cinema{
  position: relative;
  display: block;
  min-height: calc(100vh - 88px);
  padding: 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
}
.cinema-img{
  position: absolute; inset: 0; z-index: 0;
  background-position: center 40%;
  background-size: cover;
  transform: scale(1.04);
  animation: cinemaZoom 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cinemaZoom{
  from { transform: scale(1.04) }
  to   { transform: scale(1.10) translate(-1.2%, -1%) }
}
.cinema-veil{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,9,11,.5) 0%, rgba(8,9,11,.05) 25%, rgba(8,9,11,.15) 60%, rgba(8,9,11,.92) 100%),
    linear-gradient(90deg, rgba(8,9,11,.78) 0%, rgba(8,9,11,.2) 45%, rgba(8,9,11,.05) 70%, rgba(8,9,11,.5) 100%);
}

.cinema-inner{
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 88px);
  padding: clamp(80px, 10vw, 140px) calc(var(--rail-x) + 18px) clamp(60px, 8vw, 110px);
  max-width: 1100px;
}
.cinema-inner .hero-title{font-size: clamp(40px, 5.6vw, 80px); color: var(--ink); line-height: 1.02; margin: 18px 0 0}
.cinema-inner .hero-sub{margin-top: 26px; color: var(--ink); font-size: clamp(15px, 1.4vw, 18px); max-width: 540px; line-height: 1.6}
.cinema-inner .hero-ctas{margin-top: 38px}

/* Strip técnico embaixo do hero — interatividade discreta automotiva */
.cinema-strip{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-2);
  background: rgba(10,11,13,.62);
  backdrop-filter: blur(10px);
  margin-top: auto;
}
.cinema-strip .cs-cell{
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px clamp(20px, 3vw, 36px);
  border-right: 1px solid var(--line);
  transition: background .3s var(--ease);
}
.cinema-strip .cs-cell:last-child{border-right: none}
.cinema-strip .cs-cell:hover{background: rgba(216,184,120,.05)}
.cinema-strip em{color: var(--muted); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; font-style: normal}
.cinema-strip b{color: var(--ink); font-weight: 500; font-size: 14px; letter-spacing: -.005em; display: inline-flex; align-items: center}
.cinema-strip .ficha-dot{margin-right: 8px}

.hero-cinema .scroll-cue{position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2}

@media (max-width: 920px){
  .cinema-strip{grid-template-columns: 1fr}
  .cinema-strip .cs-cell{border-right: none; border-bottom: 1px solid var(--line)}
  .cinema-strip .cs-cell:last-child{border-bottom: none}
  .cinema-inner{padding: 32vh 22px 32px}
  .hero-cinema .scroll-cue{display: none}
}

/* desativa as animações pesadas anteriores (vc-photo-morph etc.) */
.vc-photo-morph, .vc-img-build, .vc-reveal-line{animation: none !important}

/* ===== (legacy) Hero "photo": foto grande + caixinha (build card) ===== */
.hero-photo{
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  background: transparent;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.hero-photo .hero-inner{align-self: center; padding-right: 0}

.hero-photo-stage{
  position: relative;
  align-self: center;
  display: flex; align-items: center; justify-content: flex-end;
  padding: clamp(28px, 4vw, 64px) 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px);
  width: calc(100% + clamp(20px, 4vw, 80px));
  margin-right: calc(-1 * clamp(20px, 4vw, 80px));
  overflow: visible;
}

/* Vehicle Card — foto + ficha técnica em uma só moldura */
.vehicle-card{
  width: 100%;
  background: rgba(14,16,20,.86);
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.vc-photo{
  position: relative;
  width: 100%;
  aspect-ratio: 16/11;
  background-position: center;
  background-size: cover;
  background-color: #14161a;
  overflow: hidden;
  transition: background-position .3s ease-out;
}

/* Morph: stock → Taillor, com linha de revelação dourada que varre */
.vc-photo-morph{position: relative; overflow: hidden}
.vc-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.vc-img-stock{z-index: 1; filter: saturate(.85) contrast(1.02)}
.vc-img-build{
  z-index: 2;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  animation: vcMorph 11s cubic-bezier(.55,.05,.45,.95) 1.2s infinite;
}
@keyframes vcMorph{
  0%   { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0) }
  18%  { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0) }
  42%  { clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0) }
  72%  { clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0) }
  100% { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0) }
}

/* Linha dourada que acompanha a varrida */
.vc-reveal-line{
  position: absolute; top: 0; bottom: 0;
  left: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold) 12%, var(--gold-2) 50%, var(--gold) 88%, transparent);
  box-shadow: 0 0 16px rgba(216,184,120,.85), 0 0 40px rgba(216,184,120,.45);
  z-index: 3;
  opacity: 0;
  animation: vcRevealLine 11s cubic-bezier(.55,.05,.45,.95) 1.2s infinite;
  pointer-events: none;
}
@keyframes vcRevealLine{
  0%, 18%   { left: 0%; opacity: 0 }
  22%       { opacity: 1 }
  42%       { left: 100%; opacity: 1 }
  46%       { left: 100%; opacity: 0 }
  72%       { left: 100%; opacity: 0 }
  76%       { left: 100%; opacity: 1 }
  98%       { left: 0%; opacity: 1 }
  100%      { left: 0%; opacity: 0 }
}

/* Labels de estado */
.vc-state-l, .vc-state-r{
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 6px 10px;
  background: rgba(10,11,13,.78);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  backdrop-filter: blur(8px);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  z-index: 4;
  pointer-events: none;
}
.vc-state-l{left: 16px}
.vc-state-r{right: 16px; color: var(--gold); border-color: var(--gold)}

/* (scanner antigo do .vc-photo-scan mantido como variante alternativa) */
.vc-photo-scan::after{
  content:""; position: absolute; left: 0; right: 0;
  top: -3px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(216,184,120,.85) 30%, rgba(216,184,120,.95) 50%, rgba(216,184,120,.85) 70%, transparent);
  box-shadow: 0 0 16px rgba(216,184,120,.7), 0 0 36px rgba(216,184,120,.35);
  animation: vcScan 6.5s cubic-bezier(.4,0,.2,1) 1s infinite;
  pointer-events: none;
  z-index: 4;
}
@keyframes vcScan{
  0%   { top: -4px;  opacity: 0 }
  6%   { opacity: 1 }
  92%  { opacity: 1 }
  100% { top: calc(100% - 1px); opacity: 0 }
}

/* Scanline element extra com glow vertical larga seguindo o trace */
.vc-scanline{
  position: absolute; left: 0; right: 0;
  top: 0; height: 80px;
  background: linear-gradient(180deg, transparent 0%, rgba(216,184,120,.16) 50%, transparent 100%);
  opacity: 0;
  animation: vcScanGlow 6.5s cubic-bezier(.4,0,.2,1) 1s infinite;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}
@keyframes vcScanGlow{
  0%   { top: -80px; opacity: 0 }
  10%  { opacity: 1 }
  90%  { opacity: 1 }
  100% { top: 100%;  opacity: 0 }
}

/* Speed lines: linhas horizontais douradas varrendo da direita para esquerda */
.vc-speedlines{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    linear-gradient(90deg, transparent 60%, rgba(216,184,120,.08) 75%, transparent 90%),
    linear-gradient(90deg, transparent 85%, rgba(216,184,120,.05) 92%, transparent 100%);
  background-size: 200% 100%, 160% 100%;
  background-position: 100% 0, 100% 0;
  animation: vcSpeed 7s linear infinite, vcSpeed2 11s linear infinite;
  mix-blend-mode: screen;
}
@keyframes vcSpeed{
  from { background-position: 200% 0, 100% 0 }
  to   { background-position: -100% 0, 100% 0 }
}
@keyframes vcSpeed2{
  from { background-position: 100% 0, 200% 0 }
  to   { background-position: 100% 0, -160% 0 }
}

.vc-corner-stamp{
  position: absolute; right: 16px; bottom: 16px;
  padding: 6px 10px;
  background: rgba(10,11,13,.78);
  border: 1px solid var(--line-2);
  color: var(--gold);
  backdrop-filter: blur(8px);
  font-size: 9px;
  letter-spacing: .22em;
  z-index: 4;
}
.vc-tag{
  position: absolute; left: 16px; top: 16px;
  padding: 7px 11px;
  background: rgba(10,11,13,.78);
  border: 1px solid var(--gold);
  color: var(--gold);
  backdrop-filter: blur(8px);
}

.vc-meta{
  padding: 18px clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--line-2);
}
.vc-head{
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.vc-head .mono{color: var(--gold); letter-spacing: .22em}
.vc-head .mono-dim{font-size: 9px}

.vc-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
}
.vc-stats > div{
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 12px;
  border-right: 1px solid var(--line);
}
.vc-stats > div:first-child{padding-left: 0}
.vc-stats > div:last-child{border-right: none; padding-right: 0}
.vc-stats dt{
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.vc-stats dd{
  margin: 0; color: var(--ink);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.vc-status dd{
  color: var(--gold);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500;
  display: inline-flex; align-items: center;
}

@media (max-width: 920px){
  .hero-photo{grid-template-columns: 1fr}
  .hero-photo-stage{padding: 0 18px 24px}
  .vc-stats{grid-template-columns: 1fr 1fr}
  .vc-stats > div{border-right: none; border-bottom: 1px solid var(--line); padding: 10px 0}
  .vc-stats > div:nth-child(odd){padding-right: 12px}
  .vc-stats > div:nth-child(even){padding-left: 12px; border-left: 1px solid var(--line)}
}

/* ===== Transform section (a brincadeira) ===== */
.transform{
  padding: clamp(80px, 11vw, 150px) calc(var(--rail-x) + 18px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 100% 100%, rgba(123,38,49,.14), transparent 60%),
    rgba(14,16,20,.55);
}
.transform .section-head{margin: 0 auto clamp(28px, 4vw, 56px); text-align: center; max-width: 720px}
.transform .kicker{justify-content: center}
.transform .bs-sub{margin: 22px auto 0; color: var(--ink-2); max-width: 540px; font-size: 16px}

/* ===== Concept strip (3 fotos em frame) ===== */
.concept-strip-section{
  padding: clamp(80px, 11vw, 150px) calc(var(--rail-x) + 18px);
  border-bottom: 1px solid var(--line);
}
.concept-strip-section .section-head{margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; max-width: 720px}
.concept-strip-section .kicker{justify-content: center}
.concept-strip{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.cs-frame{
  position: relative; margin: 0;
  background: var(--bg);
  overflow: hidden;
}
.cs-frame img{
  width: 100%; aspect-ratio: 4/5;
  object-fit: cover;
  filter: saturate(.95) contrast(1.06);
  transition: transform 1.4s var(--ease), filter .4s;
}
.cs-frame:hover img{transform: scale(1.05); filter: saturate(1.05) contrast(1.1)}
.cs-frame figcaption{
  position: absolute; left: 14px; bottom: 14px;
  padding: 8px 12px;
  background: rgba(10,11,13,.78);
  border: 1px solid var(--line-2);
  color: var(--gold);
  backdrop-filter: blur(8px);
}

@media (max-width: 920px){
  .concept-strip{grid-template-columns: 1fr}
}

/* ===== Transform slider stage (legacy, refeito) ===== */
.transform-stage{
  position: relative;
  align-self: center;
  width: 100%;
  padding: clamp(20px, 4vw, 60px);
}
.ts-eyebrow{
  margin: 0 0 18px;
  text-align: center;
  letter-spacing: .22em;
}

.tr-slider{padding: 0; align-self: stretch}
.tr-frame{
  position: relative;
  aspect-ratio: 16/9;
  background:
    radial-gradient(70% 80% at 50% 100%, rgba(216,184,120,.08), transparent 60%),
    linear-gradient(180deg, rgba(20,22,26,.7), rgba(14,16,20,.95));
  border: 1px solid var(--line-2);
  overflow: hidden;
  user-select: none;
  cursor: ew-resize;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
}

/* "blueprint" grid de fundo */
.tr-frame::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgba(216,184,120,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(216,184,120,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
}

.tr-svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.tr-stock{
  /* visível somente do lado esquerdo até --split */
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}
.tr-stock-bg{
  fill: rgba(14,16,20,.94);
}

.tr-line{stroke-linejoin: round; stroke-linecap: round}
.tr-line-strong{stroke: #efe6d2; stroke-width: 2.2}
.tr-line-soft  {stroke: #8a8276; stroke-width: 1.4; opacity: .9}
.tr-flare{
  stroke: var(--gold); stroke-width: 2.4;
  filter: drop-shadow(0 0 4px rgba(216,184,120,.4));
}
.tr-gold{stroke: var(--gold); stroke-width: 2}
.tr-ground{stroke: rgba(216,184,120,.28); stroke-width: 1; stroke-dasharray: 6 6}

.tr-dims line{stroke: rgba(216,184,120,.4); stroke-width: .7}
.tr-dims text{
  fill: var(--gold);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase;
}
.tr-stock .tr-dims text{fill: var(--muted)}

.tr-wheel-mardus circle:nth-child(2){
  filter: drop-shadow(0 0 6px rgba(216,184,120,.4));
}

/* Override do handle no tr-frame: usa --split do próprio frame */
.tr-frame .ba-handle{
  left: var(--split, 50%);
}
.tr-frame{--split: 50%}

/* Animação de "energização" inicial — destacar para o usuário que é interativo */
.tr-frame .ba-handle-knob{
  animation: knobBeacon 2.6s ease-in-out infinite;
}
@keyframes knobBeacon{
  0%,100%{box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 0 4px rgba(197,163,106,.12)}
  50%    {box-shadow: 0 12px 28px rgba(0,0,0,.6), 0 0 0 10px rgba(197,163,106,.0)}
}
.tr-frame.grabbed .ba-handle-knob{animation: none}

@media (max-width: 920px){
  .transform-stage{padding: 8px}
  .tr-frame{aspect-ratio: 16/11}
}

/* ===== Hero "brand": monograma Taillor como herói ===== */
.hero-brand{
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.hero-brand .hero-inner{align-self: center}
.hero-brand .transform-stage{display:none}

.hero-photo-stage{
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: block;
  min-height: min(72vh, 760px);
  border: 1px solid var(--line-2);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg-2);
  box-shadow: 0 34px 90px rgba(0,0,0,.45);
}

.hero-photo-stage::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,9,11,.1), rgba(8,9,11,.24)),
    linear-gradient(180deg, transparent 55%, rgba(8,9,11,.78));
  pointer-events: none;
}

.hero-photo-stage img{
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  filter: saturate(.94) contrast(1.05);
  transition: transform 1.2s var(--ease);
}

.hero-photo-stage:hover img{transform: scale(1.035)}

.hero-photo-label{
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 10px 12px;
  border: 1px solid rgba(216,184,120,.32);
  background: rgba(8,9,11,.72);
  color: var(--gold);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
}

.concept-strip{
  display: grid;
  grid-template-columns: 1.2fr .8fr 1.2fr;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.concept-strip img{
  width: 100%;
  height: clamp(360px, 42vw, 680px);
  object-fit: cover;
  background: var(--bg-2);
  filter: saturate(.94) contrast(1.04);
}

.hero-monogram{
  position: relative;
  align-self: center;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  color: #efe6d2;
}
.hero-monogram::before{
  content: ""; position: absolute; inset: 8% 8%;
  background:
    radial-gradient(ellipse at center, rgba(216,184,120,.12), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}
.monogram{
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.5));
}

/* M central */
.mono-stroke{
  stroke: #efe6d2;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: monoDraw 2.2s var(--ease) .3s forwards;
}
@keyframes monoDraw{ to { stroke-dashoffset: 0 } }

/* ornamentos horizontais */
.mono-ornament line{
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: monoOrn 1s var(--ease) 1.6s forwards;
}
@keyframes monoOrn{ to { stroke-dashoffset: 0 } }
.mono-ornament circle{
  fill: var(--gold);
  opacity: 0;
  animation: fadeIn .5s ease 2.0s forwards;
}

.mono-rule{
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: monoOrn 1.1s var(--ease) 2.2s forwards;
}

.mono-name{
  fill: #efe6d2;
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: .42em;
  opacity: 0;
  animation: fadeIn .8s ease 2.6s forwards;
}
.mono-sub{
  fill: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .32em;
  opacity: 0;
  animation: fadeIn .8s ease 2.9s forwards;
}

@media (max-width: 920px){
  .hero-brand{grid-template-columns: 1fr}
  .monogram{max-width: 320px}
}

/* ===== Hero "dash": palco com SVG do Tank + tacômetro + odômetro ===== */
.hero-dash{
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.hero-dash::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 70% at 100% 0%, rgba(123,38,49,.18), transparent 60%),
    radial-gradient(50% 60% at 20% 100%, rgba(0,0,0,.45), transparent 70%);
  z-index: 0;
}
.hero-dash > *{position: relative; z-index: 2}
.hero-dash .hero-inner{align-self: center}

.hero-stage{
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: clamp(40px, 5vw, 80px) clamp(20px, 3vw, 48px);
  z-index: 2;
  min-height: 600px;
}
.stage-figure{
  position: relative;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.stage-bg{position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden}
.stage-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(216,184,120,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(216,184,120,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.stage-glow{
  position: absolute; inset: 10% 5%;
  background: radial-gradient(ellipse at 50% 70%, rgba(216,184,120,.18), transparent 60%);
  filter: blur(20px);
}

/* SVG do Tank — desenho técnico animado */
.tank-svg{
  position: relative; z-index: 1;
  width: 100%; max-width: 760px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 14px 32px rgba(0,0,0,.4));
}
.tank-svg .tank-line{
  stroke: #efe6d2;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(216,184,120,.18));
}
.tank-svg .tank-body    { animation: draw 1.6s var(--ease) .2s forwards }
.tank-svg .tank-glass   { animation: draw 1.0s var(--ease) 1.0s forwards }
.tank-svg .tank-pillars { animation: draw .7s  var(--ease) 1.5s forwards }
.tank-svg .tank-arch    { animation: draw 1.0s var(--ease) 1.1s forwards }
.tank-svg .tank-detail  { animation: draw 1.0s var(--ease) 1.5s forwards }
.tank-svg .tank-front   { animation: draw .8s  var(--ease) 1.6s forwards }
@keyframes draw{ to { stroke-dashoffset: 0 } }

.tank-svg .tank-headlight{
  stroke: var(--gold); stroke-width: 1.4;
  opacity: 0;
  animation: fadeIn .5s ease 1.9s forwards;
  filter: drop-shadow(0 0 6px rgba(216,184,120,.6));
}
@keyframes fadeIn{ to { opacity: 1 } }

.tank-svg .tank-wheel{ opacity: 0; transform-origin: center; animation: wheelIn .6s var(--ease) 1.7s forwards }
.tank-svg .tank-wheel-r{ animation-delay: 1.85s }
@keyframes wheelIn{
  from{ opacity: 0; transform: scale(.4) }
  to  { opacity: 1; transform: scale(1) }
}
.tank-svg .tank-wheel circle{ stroke: #e6dcc4; stroke-width: 1.6 }
.tank-svg .tank-wheel .tank-rim { stroke: var(--gold); stroke-width: 1.8 }
.tank-svg .tank-wheel .tank-hub { fill: var(--gold); stroke: none; opacity: .9 }

.tank-svg .ground{ stroke: rgba(216,184,120,.28); stroke-width: 1; stroke-dasharray: 6 6 }

.tank-svg .tank-dims line{ stroke: rgba(216,184,120,.4); stroke-width: .7 }
.tank-svg .tank-dims text{
  fill: var(--gold);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; animation: fadeIn .5s ease 2.3s forwards;
}

.tank-svg .tank-spark{
  filter: drop-shadow(0 0 8px rgba(216,184,120,.9)) drop-shadow(0 0 16px rgba(216,184,120,.5));
}

/* Gauge / tacômetro — trio de mostradores no rodapé do palco */
.dash-instruments{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line-2);
  background: rgba(18,20,24,.86);
  backdrop-filter: blur(10px);
}
.dash-instruments > *{
  padding: 22px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.dash-instruments > *:last-child{border-right: none}
.dash-instruments .inst-label{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.dash-instruments .inst-value{
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  color: var(--ink); line-height: 1;
}
.gauge{
  width: 160px; height: 160px;
  display: block;
}
.gauge svg{width: 100%; height: 100%; display: block}
.gauge .gauge-needle{
  transform-origin: 70px 70px;
  transition: transform .25s var(--ease);
}
.gauge .gauge-value{
  fill: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
}
.gauge .gauge-unit{
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.gauge .gauge-fill{
  transition: stroke-dashoffset .25s var(--ease);
}

/* Dash strip — odômetro + status */
.dash-strip{
  margin-top: 42px;
  display: flex; gap: 24px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(28,30,34,.6), rgba(20,22,26,.4));
}
.odo, .rev{
  display: flex; flex-direction: column; gap: 8px;
}
.odo-digits{
  display: inline-flex; gap: 4px;
  font-family: var(--mono);
  font-size: 22px; font-weight: 500;
  color: var(--gold);
  letter-spacing: .12em;
}
.odo-digits span{
  display: inline-block;
  width: 18px; text-align: center;
  background: linear-gradient(180deg, #14161a, #0f1114);
  border: 1px solid var(--line);
  padding: 4px 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.odo-digits .odo-sep{background: transparent; border: none; color: var(--muted); padding: 4px 0}
.rev-label{
  font-family: var(--mono); font-size: 11px;
  color: var(--ink);
  letter-spacing: .18em; text-transform: uppercase;
  display: inline-flex; align-items: center;
}

@media (max-width: 920px){
  .hero-dash{grid-template-columns: 1fr}
  .hero-stage{padding: 20px 18px 48px}
  .gauge{position: relative; right: auto; bottom: auto; margin: 24px auto 0}
  .dash-strip{flex-direction: column; gap: 16px}
}

/* ===== PD build sheet (Tank 300 — desenho técnico + instrumentos + B/A) ===== */
.pd-build{
  padding: clamp(80px, 11vw, 150px) calc(var(--rail-x) + 18px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(123,38,49,.14), transparent 60%),
    rgba(20,22,26,.45);
}
.pd-build .section-head{margin-bottom: clamp(28px, 4vw, 56px)}
.build-stage{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 4vw, 64px);
  margin-bottom: clamp(40px, 5vw, 80px);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(80% 80% at 50% 100%, rgba(216,184,120,.06), transparent 60%),
    rgba(14,16,20,.7);
  min-height: 0;
}
.build-stage .stage-figure{min-height: 280px}
.build-stage .dash-instruments{grid-template-columns: 1fr}
.build-stage .dash-instruments > *{
  border-right: none;
  border-bottom: 1px solid var(--line);
}
.build-stage .dash-instruments > *:last-child{border-bottom: none}

.bs-sub{margin-top: 22px; color: var(--ink-2); font-size: 17px; max-width: 720px}

@media (max-width: 920px){
  .build-stage{grid-template-columns: 1fr; padding: 24px}
}

/* ===== Build sheet (home, legado) ===== */
.build-sheet{
  padding: clamp(80px, 11vw, 150px) calc(var(--rail-x) + 18px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 0% 100%, rgba(123,38,49,.12), transparent 60%),
    transparent;
}
.bs-sub{margin-top: 22px; color: var(--ink-2); font-size: 17px; max-width: 720px}

/* ===== Hero: slider antes/depois interativo (mantido, usado em .build-sheet) ===== */
.hero-split{
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  background:
    radial-gradient(80% 80% at 0% 100%, rgba(123,38,49,.12), transparent 60%),
    linear-gradient(180deg, #1d1f23 0%, #1a1c20 100%);
  border-bottom: 1px solid var(--line);
}
.hero-split .hero-inner{align-self: center; padding-right: 0}

.ba-slider{
  position: relative; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 3vw, 48px) clamp(20px, 3vw, 48px) clamp(40px, 5vw, 80px);
  z-index: 2;
}
.ba-slider-frame{
  position: relative; width: 100%; max-width: 720px;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  user-select: none;
  cursor: ew-resize;
}
.ba-slider-frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ba-after{filter: saturate(1.0) contrast(1.06)}
.ba-before-wrap{
  position: absolute; inset: 0;
  width: var(--split, 50%);
  overflow: hidden;
  border-right: 1px solid rgba(197,163,106,.0);
}
.ba-before{filter: saturate(.6) contrast(1.0) brightness(.92)}

.ba-label{
  position: absolute; top: 18px;
  padding: 7px 11px;
  background: rgba(10,11,13,.78);
  border: 1px solid var(--line-2);
  color: var(--gold);
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 3;
}
.ba-label-l{left: 18px}
.ba-label-r{right: 18px; color: var(--ink)}

.ba-handle{
  position: absolute; top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--gold) 12%, var(--gold) 88%, transparent 100%);
  transform: translateX(-.5px);
  z-index: 4;
  pointer-events: none;
}
.ba-handle-bar{
  position: absolute; inset: 0;
  width: 1px;
  box-shadow: 0 0 14px rgba(216,184,120,.5), 0 0 32px rgba(216,184,120,.25);
}
.ba-handle-knob{
  position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(20,22,26,.92);
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  color: var(--gold); font-family: var(--serif);
  font-size: 22px; line-height: 1;
  cursor: ew-resize;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 0 4px rgba(197,163,106,.12);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ba-handle-knob:hover{transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 12px 28px rgba(0,0,0,.6), 0 0 0 6px rgba(197,163,106,.18)}
.ba-handle-knob::before{
  content:""; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px dashed rgba(216,184,120,.35);
  animation: knobOrbit 8s linear infinite;
}
@keyframes knobOrbit{ to { transform: rotate(360deg) } }

.ba-hint{
  position: absolute; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  padding: 7px 12px;
  background: rgba(10,11,13,.72);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity .4s var(--ease);
}
.ba-slider-frame.grabbed .ba-hint{opacity: 0}

/* ===== Company section ===== */
.company{
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(80px, 11vw, 150px) calc(var(--rail-x) + 18px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(197,163,106,.06), transparent 60%),
    var(--bg);
}
.company-side h2{font-size: clamp(26px, 3vw, 42px)}
.company-text{margin: 22px 0 0; color: var(--ink-2); font-size: 17px; max-width: 520px; line-height: 1.7}

.company-stats{
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  margin: 0;
}
.stat{
  padding: clamp(24px, 3vw, 36px);
  background: var(--bg);
  transition: background .3s var(--ease);
}
.stat:hover{background: var(--bg-2)}
.stat dt{display: block; color: var(--gold); margin-bottom: 14px}
.stat dd{margin: 0; font-size: clamp(24px, 3vw, 36px); color: var(--ink); line-height: 1.05}
.stat p{margin-top: 14px; color: var(--muted); font-size: 14px}

/* ===== Feature teaser (único card de destaque) ===== */
.feature-teaser{
  padding: clamp(80px, 11vw, 140px) calc(var(--rail-x) + 18px);
  border-bottom: 1px solid var(--line);
}
.ft-card{
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 0;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(36,40,46,.85), rgba(28,30,34,.92));
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.ft-card:hover{
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.ft-cover{
  position: relative;
  background-position: center; background-size: cover;
  min-height: 460px;
  transition: transform 1.4s var(--ease);
}
.ft-card:hover .ft-cover{transform: scale(1.03)}
.ft-tag{
  position: absolute; left: 22px; top: 22px;
  padding: 8px 12px;
  background: rgba(10,11,13,.78);
  border: 1px solid var(--gold);
  color: var(--gold);
  backdrop-filter: blur(8px);
}
.ft-body{
  padding: clamp(32px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--line);
}
.ft-body h2{font-size: clamp(26px, 3vw, 40px); margin: 8px 0 18px}
.ft-text{margin: 0; color: var(--ink-2); font-size: 16px; max-width: 420px; line-height: 1.65}
.ft-meta{
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 28px;
  margin: 32px 0;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ft-meta-stack{grid-template-columns: repeat(4, 1fr); gap: 18px}
.ft-status{color: var(--gold); font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; display: inline-flex; align-items: center}
.ft-meta > div{display: flex; flex-direction: column; gap: 6px}
.ft-meta strong{
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--ink); line-height: 1;
}
.ft-cta{
  color: var(--gold);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  display: inline-flex; gap: 8px;
}

@media (max-width: 920px){
  .ft-card{grid-template-columns: 1fr}
  .ft-cover{min-height: 320px}
  .ft-body{border-left: none; border-top: 1px solid var(--line)}
  .ft-meta{grid-template-columns: 1fr 1fr}

  .company{grid-template-columns: 1fr}
  .hero-split{grid-template-columns: 1fr}
  .ba-slider{padding: 0 18px 32px}
  .ba-slider-frame{aspect-ratio: 4/5}
}

/* ===== Manifesto ===== */
.manifesto{
  padding: clamp(120px, 17vw, 220px) calc(var(--rail-x) + 18px);
  text-align: center;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(50% 70% at 50% 0%, rgba(123,38,49,.18), transparent 65%),
    radial-gradient(40% 60% at 50% 100%, rgba(197,163,106,.05), transparent 60%),
    rgba(20,22,26,.5);
  position: relative;
  overflow: hidden;
}

.manifesto .kicker{margin: 0 auto 56px; justify-content:center}

/* Ornamento dourado: dois traços com losango no centro (refere ao estofamento) */
.m-ornament{
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  max-width: 360px;
  margin: 0 auto 48px;
}
.m-ornament + .manifesto-line + .m-ornament{margin: 48px auto 0}
.m-rule{
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,184,120,.55), transparent);
}
.m-glyph{
  color: var(--gold);
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(216,184,120,.4);
}

.manifesto-line{
  max-width: 1100px; margin: 0 auto;
  font-family: var(--sans);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 48px);
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--ink);
  quotes: none;
}
.manifesto-line em{
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.signature{
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 0;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .04em;
  font-weight: 500;
}
.sig-mark{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--serif, "Bodoni Moda"), Georgia, serif;
  font-size: 14px; font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, rgba(123,38,49,.16), rgba(20,22,26,.6));
  box-shadow: 0 0 0 1px rgba(216,184,120,.12), 0 8px 18px rgba(0,0,0,.4);
}
.sig-dim{
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-left: 4px;
}
.reveal-word{
  display: inline-block;
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  margin-right: .25em;
}
.manifesto.in .reveal-word{opacity:1; transform: translateY(0)}
.manifesto.in .reveal-word:nth-child(1){transition-delay:.0s}
.manifesto.in .reveal-word:nth-child(2){transition-delay:.06s}
.manifesto.in .reveal-word:nth-child(3){transition-delay:.12s}
.manifesto.in .reveal-word:nth-child(4){transition-delay:.18s}
.manifesto.in .reveal-word:nth-child(5){transition-delay:.24s}
.manifesto.in .reveal-word:nth-child(6){transition-delay:.30s}
.manifesto.in .reveal-word:nth-child(7){transition-delay:.40s}
.manifesto.in .reveal-word:nth-child(8){transition-delay:.46s}
.manifesto.in .reveal-word:nth-child(9){transition-delay:.52s}
.manifesto.in .reveal-word:nth-child(10){transition-delay:.58s}
.manifesto.in .reveal-word:nth-child(11){transition-delay:.64s}
.manifesto.in .reveal-word:nth-child(12){transition-delay:.70s}
.manifesto.in .reveal-word:nth-child(13){transition-delay:.76s}

.signature{
  margin-top: 40px;
  color: var(--gold);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase;
}

/* ===== Signature project section (home) ===== */
.signature-project{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(80px, 11vw, 160px) calc(var(--rail-x) + 18px);
  border-bottom: 1px solid var(--line);
}
.sp-side{align-self:center}
.sp-side h2{font-size: clamp(28px, 3.2vw, 44px)}
.sp-text{
  margin: 26px 0 32px;
  color: var(--ink-2);
  font-size: 17px; max-width: 460px;
}
.sp-list{list-style:none; padding:0; margin: 0 0 36px; display: grid; gap: 1px; background: var(--line)}
.sp-list li{
  display:flex; gap: 22px; align-items:center;
  padding: 16px 0;
  background: var(--bg);
  font-size: 16px; color: var(--ink);
}
.sp-list li .mono{min-width: 36px; color: var(--gold)}

.sp-media{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 280px 220px;
  gap: 14px;
}
.sp-frame{position:relative; overflow:hidden; border: 1px solid var(--line); display:block}
.sp-frame img{width:100%;height:100%;object-fit:cover; filter: saturate(.9) contrast(1.06); transition: transform 1s var(--ease)}
.sp-frame:hover img{transform:scale(1.06)}
.sp-frame-main{grid-column: span 2}
.sp-tag{
  position:absolute; left: 14px; bottom: 14px;
  background: rgba(10,11,13,.78); border: 1px solid var(--line-2);
  color: var(--gold);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 7px 10px;
  backdrop-filter: blur(8px);
}

/* ===== Pillars ===== */
.pillars-row{
  padding: clamp(80px, 11vw, 150px) calc(var(--rail-x) + 18px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(80% 80% at 90% 0%, rgba(123,38,49,.14), transparent 60%),
    rgba(20,22,26,.45);
}
.pillars{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.pillar{
  padding: clamp(36px, 4.5vw, 56px);
  background: var(--bg);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.pillar:hover{background: var(--bg-2); transform: translateY(-2px)}
.pillar-mid{background: var(--bg-2)}
.pillar-num{
  display:block; color: var(--gold);
  margin-bottom: 28px;
}
.pillar h3{margin: 0 0 12px; font-size: 22px; color: var(--ink); font-weight: 600; letter-spacing:.01em}
.pillar p{margin:0; color: var(--muted); font-size: 15px}

/* ===== Contact band ===== */
.contact-band{
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(80px, 11vw, 150px) calc(var(--rail-x) + 18px);
  background:
    radial-gradient(55% 70% at 90% 100%, rgba(123,38,49,.18), transparent 65%),
    radial-gradient(40% 60% at 10% 0%, rgba(197,163,106,.05), transparent 60%),
    rgba(20,22,26,.5);
  border-bottom: 1px solid var(--line);
}
.cb-side h2{font-size: clamp(26px, 3vw, 42px)}
.cb-text{margin-top:22px; color: var(--ink-2); font-size: 17px; max-width: 540px}
.cb-actions{display:flex; flex-direction:column; gap: 12px}

/* ===== Page hero (lista) ===== */
.page-hero{
  padding: clamp(110px, 14vw, 180px) calc(var(--rail-x) + 18px) clamp(60px, 8vw, 96px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(123,38,49,.22), transparent 60%),
    var(--bg);
}
.page-hero.image-hero{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.72) 42%, rgba(8,9,11,.36) 100%),
    var(--page-image) center/cover;
}
.page-hero h1{font-size: clamp(32px, 4vw, 56px); max-width: 1000px}
.page-sub{margin-top: 24px; color: var(--ink-2); font-size: 18px; max-width: 620px}

/* ===== Featured project (lista) ===== */
.proj-featured{
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .9fr);
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(60px, 9vw, 130px) calc(var(--rail-x) + 18px);
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.proj-cover{
  position:relative; display:block;
  overflow:hidden; border:1px solid var(--line);
  aspect-ratio: 4/3; background: var(--bg-2);
}
.proj-cover img{
  width:100%;height:100%;object-fit:cover;
  filter: saturate(.92) contrast(1.05);
  transition: transform 1.4s var(--ease);
}
.proj-cover:hover img{transform: scale(1.05)}
.proj-tag{
  position:absolute; left: 18px; top: 18px;
  padding: 8px 12px;
  border: 1px solid var(--gold);
  background: rgba(10,11,13,.78);
  color: var(--gold); backdrop-filter: blur(8px);
}
.proj-cover-cta{
  position:absolute; right: 18px; bottom: 18px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(10,11,13,.78); border: 1px solid var(--line-2);
  padding: 10px 14px; backdrop-filter: blur(8px);
  transition: background .25s, color .25s, border-color .25s;
}
.proj-cover:hover .proj-cover-cta{background:var(--gold);color:#1a1107;border-color:var(--gold)}

.proj-summary{
  align-self: center;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(20,22,27,.94), rgba(14,16,20,.94));
}
.proj-summary h2{font-size: clamp(26px, 3vw, 40px); margin: 8px 0 12px}
.proj-sub{color: var(--ink-2); margin: 0}

.price-stack{display:grid; gap: 14px; margin: 32px 0}
.price-stack div{border-top:1px solid var(--line); padding-top: 14px}
.price-stack dt{color:var(--muted)}
.price-stack dd{
  margin: 6px 0 0; color: var(--ink);
  font-size: clamp(26px, 3vw, 38px);
}

.proj-strip{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.proj-strip img{
  width:100%; aspect-ratio: 4/5; object-fit: cover;
  filter: saturate(.92) contrast(1.06);
  transition: transform 1s var(--ease), filter .4s;
}
.proj-strip a{display:block; overflow:hidden; background: var(--bg)}
.proj-strip a:hover img{transform: scale(1.04); filter: saturate(1.05) contrast(1.08)}

.proj-next{
  text-align: center;
  padding: clamp(80px, 11vw, 150px) calc(var(--rail-x) + 18px);
}
.proj-next .kicker{justify-content:center}
.proj-next h2{margin: 0 auto; font-size: clamp(26px, 3vw, 42px)}
.proj-next .page-sub{margin: 22px auto 32px}

/* ===== Project detail ===== */
.project-detail{background: var(--bg)}

.pd-hero{
  position: relative;
  min-height: calc(100vh - 88px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
  padding: clamp(60px, 9vw, 130px) calc(var(--rail-x) + 18px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.pd-hero-img{
  position:absolute;inset:0;z-index:0;
  background-position: center; background-size: cover;
  transform: scale(1.06);
  animation: kenburns 24s ease-in-out infinite alternate;
}
.pd-hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,.2) 40%, rgba(8,9,11,.92) 100%),
    linear-gradient(90deg, rgba(8,9,11,.85), rgba(8,9,11,.15) 50%, rgba(8,9,11,.7));
}
.pd-hero-inner{position:relative;z-index:2;max-width:880px}
.pd-hero-meta{
  display:flex; gap: 18px; align-items:center;
  margin-bottom: 38px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.pd-hero h1{font-size: clamp(36px, 4.5vw, 64px); color: var(--ink); margin: 0}
.pd-lead{
  margin-top: 26px; max-width: 580px;
  color: var(--ink); font-size: clamp(16px, 1.5vw, 19px);
}

.pd-hero-ficha{
  position:relative; z-index: 2;
  justify-self: end; align-self: end;
  width: min(360px, 100%);
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--gold);
  background: rgba(14,16,20,.86);
  backdrop-filter: blur(12px);
  padding: 24px 26px;
}
.ficha-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.ficha-title{font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink)}
.ficha-rev{font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--muted)}
.ficha-body{margin: 0}
.ficha-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line); gap: 16px;
}
.ficha-row:last-child{border-bottom:none}
.ficha-row dt{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.ficha-row dd{margin:0; font-family: var(--serif); font-size: 18px; color: var(--ink); text-align: right}
.ficha-row-status dd{color: var(--gold); font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase}
.ficha-dot{
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #6fcf6f; box-shadow: 0 0 0 3px rgba(111,207,111,.18);
  margin-right: 8px; vertical-align: middle;
  animation: nodePulse 2.4s var(--ease) infinite;
}

/* ===== PD numbers ===== */
.pd-numbers{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border-bottom: 1px solid var(--line);
}
.num-block{
  padding: clamp(36px, 4.5vw, 64px);
  background: var(--bg);
}
.num-block-mid{background: rgba(123,38,49,.06)}
.num-block .mono{display:block; margin-bottom: 20px}
.num-block strong{
  display:block;
  font-size: clamp(32px, 4vw, 54px);
  color: var(--ink);
  line-height: 1;
}
.num-block p{
  margin-top: 22px;
  color: var(--muted); font-size: 14px; line-height: 1.65;
}

/* ===== Before / After ===== */
.pd-ba{
  padding: clamp(80px, 11vw, 150px) calc(var(--rail-x) + 18px);
  border-bottom: 1px solid var(--line);
}
.ba-text{margin-top: 24px; color: var(--ink-2); font-size: 17px; max-width: 720px}
.ba-stage{
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 48px;
}
.ba-frame{
  position:relative; margin: 0; overflow: hidden;
  border: 1px solid var(--line);
}
.ba-frame img{
  width:100%; aspect-ratio: 4/5; object-fit: cover;
  filter: saturate(.85) contrast(1.04);
  transition: transform 1.2s var(--ease);
}
.ba-frame:hover img{transform: scale(1.04)}
.ba-frame-after img{filter: saturate(1.0) contrast(1.08)}
.ba-frame figcaption{
  position:absolute; left: 18px; bottom: 18px;
  padding: 10px 14px;
  background: rgba(10,11,13,.82);
  border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink);
}
.ba-frame figcaption .mono{
  display:block; color: var(--gold); margin-bottom: 4px;
  font-size: 10px;
}

/* ===== PD specs ===== */
.pd-specs{
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(80px, 11vw, 150px) calc(var(--rail-x) + 18px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(123,38,49,.18), transparent 50%),
    var(--bg);
}
.specs-side h2{font-size: clamp(28px, 3.2vw, 46px)}
.specs-sub{margin-top: 22px; color: var(--gold); font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase}
.specs-list{list-style:none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line)}
.specs-list li{
  display: grid; grid-template-columns: 60px 1fr;
  gap: 24px; align-items: start;
  padding: 24px 26px;
  background: var(--bg);
  transition: background .3s var(--ease);
}
.specs-list li:hover{background: var(--bg-2)}
.specs-list .spec-num{color: var(--gold); font-size: 16px}
.specs-list h3{margin: 0 0 6px; font-size: 18px; color: var(--ink); font-weight: 600}
.specs-list p{margin: 0; color: var(--muted); font-size: 14px}

/* ===== PD gallery ===== */
.pd-gallery{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.pd-gallery figure{margin: 0; overflow: hidden; background: var(--bg)}
.pd-gallery img{
  width:100%; aspect-ratio: 4/5; object-fit: cover;
  filter: saturate(.95) contrast(1.05);
  transition: transform 1.1s var(--ease);
}
.pd-gallery figure:hover img{transform: scale(1.05)}

/* ===== Reveal on scroll ===== */
.reveal{
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{opacity:1; transform: translateY(0)}
.reveal-stagger > *{
  opacity:0; transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.in > *{opacity:1; transform: translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.0s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.24s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.32s}

/* ===== Generic / forms ===== */
.section, .article, .form-page, .detail-layout{
  padding: clamp(56px, 8vw, 110px) calc(var(--rail-x) + 18px);
}
.section > *, .article > *, .form-page > *{
  max-width: var(--maxw); margin-left: auto; margin-right: auto;
}
.detail-layout{display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); max-width: 1280px; margin: 0 auto}
.detail-media > img{width:100%; aspect-ratio: 4/3; object-fit: cover}
.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px}
.gallery img{aspect-ratio: 1; object-fit: cover}
.specs{display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 26px 0}
.specs div{border-top: 1px solid var(--line); padding-top: 12px}
.specs dt{color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .2em}
.specs dd{margin: 4px 0 0; font-family: var(--serif); font-size: 20px}

.text-link{
  color: var(--gold); font-family: var(--mono); font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid currentColor;
  transition: color .25s;
}
.text-link:hover{color: var(--gold-2)}

.article{
  max-width: 820px;
  padding-top: clamp(88px, 10vw, 140px);
}
.article > .eyebrow{
  color: var(--gold);
  margin-bottom: 18px;
}
.article h1{
  max-width: 760px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.03;
}
.article .lead{
  max-width: 720px;
  margin: 22px 0 0;
  color: var(--ink);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.55;
  font-weight: 400;
}
.article-cover{
  margin: 42px 0 46px;
  border: 1px solid var(--line-2);
  overflow: hidden;
  background: #08090b;
}
.article-cover img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  filter: saturate(.95) contrast(1.05);
}
.rich-text{
  max-width: 720px;
  color: #e5ded0;
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.86;
}
.rich-text p{
  margin: 0 0 28px;
}
.rich-text p:first-child{
  color: var(--ink);
  font-size: 1.06em;
}
.rich-text strong,
.rich-text b{
  color: var(--ink);
}
.rich-text a{
  color: var(--gold-2);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.form-page{min-height: 76vh}
.form-page-with-art{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  overflow: hidden;
}
.form-page-with-art::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.86) 52%, rgba(8,9,11,.42) 100%),
    var(--form-image) right center/cover;
  z-index: -1;
}
.form-page-with-art > *{max-width: none}
.panel-form{padding: 28px; border: 1px solid var(--line-2); background: rgba(20,22,27,.72)}
.field{display:grid; gap: 7px; margin-bottom: 18px}
.field label{font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2)}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line-2); padding: 14px;
  font: inherit; background: #0c0d10; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color: var(--gold)}
.error{color: #ff8a8a; font-family: var(--mono); font-size: 12px}

.status{
  display:inline-block; margin-bottom: 12px;
  color: var(--gold); border: 1px solid var(--gold);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 5px 10px;
}

.service-grid, .vehicle-grid, .post-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.service-grid article, .post-card, .vehicle-card{
  background: var(--bg); padding: 26px;
  transition: background .3s var(--ease);
}
.service-grid article:hover, .post-card:hover, .vehicle-card:hover{background: var(--bg-2)}
.post-card{padding:0; overflow:hidden}
.post-card img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  filter: saturate(.92) contrast(1.06);
  transition: transform 1.1s var(--ease);
}
.post-card:hover img{transform: scale(1.035)}
.post-card-body{padding: 24px}
.vehicle-card{padding: 0; overflow: hidden}
.vehicle-card img{width: 100%; aspect-ratio: 16/10; object-fit: cover}
.vehicle-card > div{padding: 22px}
.post-card span{
  color: var(--gold); font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
}

.messages{position: fixed; top: 90px; right: 18px; z-index: 40}
.message{
  background: rgba(20,22,27,.94); border-left: 2px solid var(--gold);
  padding: 12px 16px; box-shadow: 0 12px 34px rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
}

/* ===== Footer ===== */
.footer{
  display:grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  padding: 56px calc(var(--rail-x) + 18px) 32px;
  background: #06070a;
  border-top: 1px solid var(--line);
}
.foot-logo{
  width: auto;
  height: 46px;
  max-width: 168px;
  display: block;
  object-fit: contain;
}
.foot-brand .brand-name{font-size: 28px; color: var(--ink)}
.foot-brand p{color: var(--muted); margin: 14px 0 0; max-width: 420px; font-size: 14px; line-height: 1.65}
.foot-cols{display:flex; gap: 56px}
.foot-cols div{display: flex; flex-direction: column; gap: 8px}
.foot-label{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.foot-cols a{color: var(--ink-2); font-size: 14px; transition: color .25s}
.foot-cols a:hover{color: var(--gold)}
.foot-meta{
  grid-column: 1 / -1;
  display:flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}

/* ===== Mobile ===== */
@media (max-width: 920px){
  :root{--rail-x: 0px}
  .nav{
    flex-wrap: wrap; padding: 14px 18px; gap: 14px;
  }
  .brand-sub{display:none}
  .brand-logo{height: 34px; max-width: 126px}
  .nav-cta{order:2}
  .nav-links{order:3; width:100%; gap: 4px; overflow-x:auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px}
  .nav-links a{padding: 8px 12px; font-size: 10px; white-space: nowrap}

  .hero{grid-template-columns: 1fr; align-items: end; min-height: 88vh; padding: 24vh 22px 32px}
  .hero-title{font-size: clamp(28px, 8vw, 44px)}
  .hero-photo-stage{min-height: 360px}
  .concept-strip{grid-template-columns: 1fr}
  .concept-strip img{height: 420px}
  .hero-card{justify-self: stretch; width: 100%; margin-top: 32px}

  .manifesto-line{font-size: clamp(20px, 5vw, 28px)}

  .signature-project{grid-template-columns: 1fr}
  .sp-media{grid-template-rows: 240px 180px}

  .pillars{grid-template-columns: 1fr}
  .contact-band{grid-template-columns: 1fr}
  .cb-actions{max-width: none}
  .form-page-with-art{grid-template-columns: 1fr}
  .panel-form{padding: 20px}
  .messages{left:18px; right:18px}

  .proj-featured{grid-template-columns: 1fr}
  .proj-strip{grid-template-columns: 1fr}

  .pd-hero{grid-template-columns: 1fr; min-height: 86vh; padding: 22vh 22px 32px}
  .pd-hero h1{font-size: clamp(32px, 10vw, 52px)}
  .pd-hero-ficha{justify-self: stretch; width: 100%; margin-top: 32px}

  .pd-numbers{grid-template-columns: 1fr}
  .ba-stage{grid-template-columns: 1fr}
  .pd-specs{grid-template-columns: 1fr}
  .pd-gallery{grid-template-columns: 1fr}
  .detail-layout{grid-template-columns: 1fr; padding: 32px 18px 64px}
  .gallery{grid-template-columns: repeat(2, 1fr)}
  .specs{grid-template-columns: 1fr}
  .article{padding: 72px 18px 80px}
  .page-hero{padding: 92px 18px 56px}
  .page-hero h1{font-size: clamp(30px, 9vw, 44px)}

  .footer{grid-template-columns: 1fr; gap: 32px}
  .foot-cols{flex-direction: column; gap: 22px}
  .scroll-cue{display:none}
}

@media (max-width: 480px){
  .brand-name{font-size: 19px}
  .brand-mark{width: 38px; height: 38px}
  .brand-logo{height: 30px; max-width: 112px}
  .nav-cta{padding: 10px 12px; letter-spacing: .12em}
  .btn{
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    font-size: 10px;
    letter-spacing: .14em;
    text-align: center;
  }
  .hero-ctas{gap:10px}
  .cinema-inner .hero-title{font-size: clamp(36px, 13vw, 52px)}
  .cinema-inner .hero-sub{font-size: 15px}
  .concept-strip img{height: 340px}
  .company-stats .stat{padding: 22px}
  .pillars{gap: 1px}
  .pillar{padding: 26px 22px}
  .cb-actions{width: 100%}
  .ba-handle-knob{width: 48px; height: 48px}
  .ft-meta,
  .ft-meta-stack{grid-template-columns: 1fr}
  .post-card-body,
  .vehicle-card > div{padding: 20px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}