/* =============================================================
   PrimeWeb.design — Brutalist Grid (white · ink · gold)
   1. Tokens
   ============================================================= */
:root {
  --bg:        #FFFFFF;
  --bg-2:      #F4F1E8;        /* warm paper panel */
  --ink:       #0B0B0B;
  --ink-2:     #2E2E2E;
  --mute:      #6E6E6E;
  --gold:      #B98A2A;        /* mid gold */
  --gold-deep: #886312;        /* gold text on white */
  --gold-soft: #EBDCAE;        /* pale gold */
  --line:      #0B0B0B;        /* hairlines — full opacity, brutalist */

  --pad:       clamp(18px, 5vw, 90px);
  --nav-h:     74px;

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);

  --sans:      'Inter', system-ui, sans-serif;
  --display:   'Space Grotesk', 'Inter', sans-serif;
  --mono:      'IBM Plex Mono', ui-monospace, monospace;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.02; letter-spacing: -0.02em; font-weight: 600; }
mark { background: var(--gold-soft); color: var(--ink); padding: 0 .12em; }
::selection { background: var(--gold); color: #fff; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.gold { color: var(--gold-deep); }
.mute { color: var(--mute); }

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -200px; left: 16px; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--bg);
  font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* =============================================================
   4. Splash
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
  animation: splashSafety .01s 4.6s forwards;
}
.splash.is-out {
  transform: translateY(-101%);
  transition: transform .9s var(--ease-in);
}
@keyframes splashSafety { to { transform: translateY(-101%); pointer-events: none; } }
.splash-inner { width: min(560px, 86vw); }
.splash-mark {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 3rem); letter-spacing: -.03em;
}
.splash-mark span { color: var(--gold-deep); }
.splash-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 0 10px; font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.splash-count { font-size: 1.1rem; font-weight: 600; }
.splash-bar { height: 4px; background: var(--bg-2); }
.splash-bar span {
  display: block; height: 100%; width: 0%;
  background: var(--gold);
}

/* =============================================================
   5. Cursor coordinates
   ============================================================= */
.coords {
  position: fixed; right: 14px; bottom: 12px; z-index: 600;
  display: flex; gap: 12px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  color: var(--mute); pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease);
  mix-blend-mode: difference; color: #fff;
}
.coords.is-ready { opacity: .85; }

/* =============================================================
   6. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: transform .4s var(--ease);
}
.nav.hide { transform: translateY(-101%); }
.nav-logo img { height: 30px; mix-blend-mode: multiply; }
.nav-links { display: none; gap: 0; }
.nav-links a {
  position: relative;
  font-size: .82rem; font-weight: 500;
  padding: 6px 18px;
  display: flex; align-items: baseline; gap: 7px;
  border-left: 1px solid var(--line);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-links a i {
  font-family: var(--mono); font-style: normal;
  font-size: .58rem; color: var(--gold-deep);
}
.nav-links a:hover { background: var(--ink); color: var(--bg); }
.nav-links a:hover i { color: var(--gold); }
.nav-cta {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 11px 20px;
  border: 1px solid var(--line);
  transition: background .25s var(--ease), color .25s var(--ease);
}

/* invert helpers (brutalist signature) */
.invert-gold:hover { background: var(--gold); color: #fff; }
.invert-hover {
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.invert-hover:hover { background: var(--ink); color: var(--bg); }

/* =============================================================
   7. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 15px 26px; border: 1px solid var(--line);
  transition: background .28s var(--ease), color .28s var(--ease),
              transform .28s var(--ease);
}
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.btn-block { width: 100%; }

/* =============================================================
   8. Kicker / section heads
   ============================================================= */
.kicker {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold-deep);
}
.block {
  position: relative;
  padding: clamp(46px, 7vw, 104px) var(--pad);
  border-top: 1px solid var(--line);
  overflow: clip;
}
.block-head { margin-bottom: clamp(30px, 4.5vw, 56px); }
.block-head.split { display: grid; gap: 14px; }
.block-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  max-width: 18ch;
}
.ghost-num {
  position: absolute; top: -.1em; right: var(--pad);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(4.5rem, 15vw, 12rem);
  line-height: 1; color: var(--bg-2);
  z-index: -1; pointer-events: none; letter-spacing: -.04em;
}

/* =============================================================
   9. Hero
   ============================================================= */
.hero {
  padding: calc(var(--nav-h) + 14px) 0 0;
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.hero-grid > div { padding: 26px var(--pad); }
.hero-title-cell { padding-top: 34px; padding-bottom: 22px; }
.hero-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.3rem, 8vw, 5.4rem);
  line-height: 0.98; letter-spacing: -.03em;
  text-transform: uppercase;
}
.hero-title .gold {
  color: var(--gold-deep);
  -webkit-text-stroke: 0;
}
.hero-side-cell {
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 24px;
}
.hero-sub {
  font-size: 1.05rem; max-width: 42ch; color: var(--ink-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { display: flex; flex-direction: column; gap: 8px; }
.hero-facts li {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--mono); font-size: .76rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line); padding-top: 8px;
}
.hero-facts li i { color: var(--gold-deep); font-style: normal; }
.hero-foot-cell {
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  color: var(--mute);
}
.hero-foot-arrow { animation: bob 2s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* =============================================================
   10. Marquee
   ============================================================= */
.marquee {
  border-bottom: 1px solid var(--line);
  background: var(--ink); color: var(--bg);
  overflow: hidden;
}
.marquee-track {
  display: flex; align-items: center; gap: 38px;
  width: max-content;
  padding: 16px 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.85rem, 1.7vw, 1.25rem);
  text-transform: uppercase; letter-spacing: -.01em;
  animation: marquee 38s linear infinite;
}
.marquee-dot { color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =============================================================
   11. 01 — Manifiesto
   ============================================================= */
.manifesto-grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  border-top: 1px solid var(--line); padding-top: 30px;
}
.manifesto-lead {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.1rem, 2.3vw, 1.7rem);
  line-height: 1.32; letter-spacing: -.015em;
}
.manifesto-aside p {
  font-size: .98rem; color: var(--ink-2); max-width: 38ch;
}
.stats {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 40px;
  border: 1px solid var(--line);
}
.stat {
  padding: 22px 18px;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
}
.stat:nth-child(-n+2) { border-top: 0; }
.stat:nth-child(2n) { border-right: 0; }
.stat-num {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1;
  color: var(--gold-deep);
}
.stat-label {
  font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--mute); margin-top: 8px; display: block;
}

/* =============================================================
   12. 02 — Servicios (hairline grid)
   ============================================================= */
.grid-cells {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.cell {
  background: var(--bg); padding: 30px 26px 38px;
  min-height: 200px;
  display: flex; flex-direction: column;
}
.cell-num {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  color: var(--gold-deep); margin-bottom: 26px;
}
.cell h3 {
  font-family: var(--display); font-size: 1.12rem; margin-bottom: 10px;
}
.cell p { font-size: .92rem; color: var(--ink-2); }
.cell.invert-hover:hover .cell-num { color: var(--gold); }
.cell.invert-hover:hover p { color: var(--bg); }

/* =============================================================
   13. 03 — Trabajos (horizontal scroll)
   ============================================================= */
.trabajos-viewport {
  overflow-x: auto; overflow-y: visible;
  border: 1px solid var(--line);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.trabajos-viewport::-webkit-scrollbar { height: 6px; }
.trabajos-viewport::-webkit-scrollbar-thumb { background: var(--gold); }
.trabajos-viewport::-webkit-scrollbar-track { background: var(--bg-2); }
.trabajos-track {
  display: flex; width: max-content;
}
.work {
  width: 78vw; max-width: 360px;
  flex: 0 0 auto;
  border-right: 1px solid var(--line);
  scroll-snap-align: start;
  background: var(--bg);
}
.work-frame { padding: 22px 22px 0; }
.work-bar { display: flex; gap: 6px; margin-bottom: 12px; }
.work-bar i { width: 9px; height: 9px; border: 1px solid var(--line); }
.work-screen {
  position: relative; aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  padding: 16px; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
}
.ws-tag {
  font-family: var(--mono); font-size: .56rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  align-self: flex-start;
  padding: 3px 8px; background: var(--ink); color: var(--bg);
}
.ws-h { height: 20px; width: 70%; background: var(--ink); }
.ws-row { height: 7px; width: 100%; background: rgba(11,11,11,.22); }
.ws-row.short { width: 55%; }
.ws-grid { display: flex; gap: 8px; margin-top: auto; }
.ws-grid b { flex: 1; aspect-ratio: 1; }
.work--food   .work-screen { background: linear-gradient(150deg,#F3E4D2,#E7C9A0); }
.work--food   .ws-grid b   { background: #C8852F; }
.work--clinic .work-screen { background: linear-gradient(150deg,#E4ECEF,#C6D8DD); }
.work--clinic .ws-grid b   { background: #5E7E86; }
.work--gym    .work-screen { background: linear-gradient(150deg,#E6E6E2,#C9C9BE); }
.work--gym    .ws-grid b   { background: var(--ink); }
.work--beauty .work-screen { background: linear-gradient(150deg,#F0E6EC,#DCC6D2); }
.work--beauty .ws-grid b   { background: #9A6E83; }
.work--estate .work-screen { background: linear-gradient(150deg,#E5EBE2,#C7D4C2); }
.work--estate .ws-grid b   { background: #5F7355; }
.work--studio .work-screen { background: linear-gradient(150deg,#EDE9DC,#D6CBA6); }
.work--studio .ws-grid b   { background: var(--gold); }
.work-meta {
  padding: 20px 22px 26px;
  border-top: 1px solid var(--line); margin-top: 22px;
}
.work-meta .mono { color: var(--gold-deep); }
.work-meta h3 {
  font-family: var(--display); font-size: 1.25rem;
  margin: 7px 0 6px;
}
.work-meta p { font-size: .88rem; color: var(--ink-2); }
.trabajos-note { margin-top: 16px; color: var(--mute); }

/* =============================================================
   14. 04 — Proceso
   ============================================================= */
.proceso-list {
  border-top: 1px solid var(--line);
}
.proceso-step {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s var(--ease);
}
.proceso-step:hover { padding-left: 22px; }
.proceso-num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: .9;
  color: var(--bg-2);
  -webkit-text-stroke: 1px var(--gold);
}
.proceso-body h3 {
  font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  margin-bottom: 6px;
}
.proceso-body p { font-size: .96rem; color: var(--ink-2); max-width: 52ch; }

/* =============================================================
   15. 05 — Comparativa
   ============================================================= */
.compare { border: 1px solid var(--line); }
.compare-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.compare-row:last-child { border-bottom: 0; }
.compare-feat, .compare-col {
  padding: 15px 16px;
  font-size: .82rem;
  border-right: 1px solid var(--line);
}
.compare-col:last-child { border-right: 0; }
.compare-feat {
  font-family: var(--mono); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: .68rem;
  grid-column: 1 / -1;
  background: var(--bg-2);
  border-right: 0;
}
.compare-head .compare-feat { background: var(--ink); color: var(--bg); }
.compare-head .compare-col {
  font-family: var(--mono); font-weight: 600; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.compare-us {
  background: var(--ink); color: var(--bg);
  font-weight: 600;
}
.compare-head .compare-us { background: var(--gold); color: #fff; }

/* =============================================================
   16. 06 — Inversión
   ============================================================= */
.price-grid {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--line);
}
.price-main {
  padding: 34px 28px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
}
.price-tag { color: var(--gold-deep); }
.price-main.invert-gold:hover .price-tag { color: #fff; }
.price-big {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 9vw, 5.4rem); line-height: .85;
  letter-spacing: -.04em;
}
.price-big span { font-size: .35em; vertical-align: super; color: var(--gold-deep); }
.price-main.invert-gold:hover .price-big span { color: #fff; }
.price-note { font-size: .86rem; color: var(--ink-2); }
.price-main.invert-gold:hover .price-note { color: rgba(255,255,255,.8); }
.price-list { padding: 26px 28px; display: flex; flex-direction: column; }
.price-list li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 11px 0; font-size: .92rem;
  border-bottom: 1px solid rgba(11,11,11,.12);
}
.price-list li:last-child { border-bottom: 0; }
.price-list li i {
  font-style: normal; font-weight: 700; color: var(--gold-deep);
}
.price-extras {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line); border-top: 0;
}
.extra {
  background: var(--bg); padding: 26px 28px;
}
.extra .mono { color: var(--gold-deep); }
.extra h3 { font-family: var(--display); font-size: 1.18rem; margin: 10px 0 8px; }
.extra p { font-size: .9rem; color: var(--ink-2); }
.extra.invert-hover:hover .mono { color: var(--gold); }
.extra.invert-hover:hover p { color: var(--bg); }

/* =============================================================
   17. 07 — Testimonios
   ============================================================= */
.quotes {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.quote {
  background: var(--bg); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 22px;
}
.quote blockquote {
  font-family: var(--display); font-weight: 500;
  font-size: 1.02rem; line-height: 1.45; letter-spacing: -.005em;
}
.quote figcaption { margin-top: auto; }
.quote-name { display: block; font-weight: 600; }
.quote-role { display: block; color: var(--gold-deep); margin-top: 3px; }
.quote.invert-hover:hover .quote-role { color: var(--gold); }

/* =============================================================
   18. 08 — Preguntas (FAQ)
   ============================================================= */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; cursor: pointer; list-style: none;
  padding: 22px 4px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.95rem, 1.7vw, 1.15rem);
  transition: color .25s var(--ease), padding-left .3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-deep); padding-left: 12px; }
.faq-sign {
  font-family: var(--mono); font-size: 1.4rem; font-weight: 400;
  color: var(--gold-deep); transition: transform .3s var(--ease);
  flex: 0 0 auto;
}
.faq-item[open] .faq-sign { transform: rotate(45deg); }
.faq-answer { padding: 0 4px 24px; max-width: 64ch; }
.faq-answer p { color: var(--ink-2); font-size: .96rem; }

/* =============================================================
   19. CTA / Contacto
   ============================================================= */
.cta {
  background: var(--ink); color: var(--bg);
  padding: clamp(64px, 11vw, 160px) var(--pad);
  border-top: 1px solid var(--line);
}
.cta .kicker { color: var(--gold); }
.cta-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 5.6rem);
  line-height: .96; text-transform: uppercase;
  letter-spacing: -.03em;
  margin: 16px 0 22px;
}
.cta-title .gold { color: var(--gold); }
.cta-sub { max-width: 46ch; color: rgba(255,255,255,.7); font-size: 1.02rem; }
.cta-link {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 44px;
  border-top: 1px solid rgba(255,255,255,.25);
  padding-top: 26px;
  transition: padding-left .4s var(--ease);
}
.cta-link:hover { padding-left: 16px; }
.cta-link-label { color: var(--gold); }
.cta-link-big {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 3rem); line-height: 1;
  letter-spacing: -.03em;
  transition: color .3s var(--ease);
}
.cta-link:hover .cta-link-big { color: var(--gold); }

/* =============================================================
   20. Footer
   ============================================================= */
.footer { border-top: 1px solid var(--line); }
.footer-grid {
  display: grid; grid-template-columns: 1fr;
}
.footer-grid > div {
  padding: 26px var(--pad);
  border-bottom: 1px solid var(--line);
}
.footer-brand img { height: 30px; mix-blend-mode: multiply; margin-bottom: 12px; }
.footer-brand .mono { color: var(--mute); }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-label { color: var(--gold-deep); margin-bottom: 6px; }
.footer-col a { font-size: .9rem; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--gold-deep); }
.footer-baseline {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  justify-content: space-between;
  padding: 16px var(--pad);
  color: var(--mute);
}

/* =============================================================
   21. Reveal (scroll-in)
   ============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
/* Defensive: split-text elements must never stay invisible */
.reveal[data-split] { opacity: 1; transform: none; }

/* =============================================================
   22. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat { border-top: 0; }
  .quotes { grid-template-columns: 1fr; }
}

@media (min-width: 720px) {
  .grid-cells { grid-template-columns: 1fr 1fr; }
  .price-extras { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr 1fr 1fr; }
  .compare-row {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
  .compare-feat {
    grid-column: auto;
    background: var(--bg-2);
    border-right: 1px solid var(--line);
  }
  .compare-head .compare-feat { background: var(--ink); }
  .work { width: 44vw; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-grid > div { border-right: 1px solid var(--line); }
  .footer-grid > div:last-child { border-right: 0; }
  .price-grid { grid-template-columns: 1fr 1.1fr; }
  .price-main { border-bottom: 0; border-right: 1px solid var(--line); }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .block-head.split {
    grid-template-columns: 1fr 1.6fr;
    align-items: end; gap: 40px;
  }
  .hero-grid {
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas:
      "title side"
      "foot foot";
  }
  .hero-title-cell  { grid-area: title; border-right: 1px solid var(--line); }
  .hero-side-cell   { grid-area: side; border-top: 0; justify-content: center; }
  .hero-foot-cell   { grid-area: foot; }
  .manifesto-grid { grid-template-columns: 1.7fr 1fr; gap: 50px; }
  .grid-cells { grid-template-columns: 1fr 1fr 1fr; }
  .work { width: 30vw; max-width: 380px; }
}

@media (min-width: 1280px) {
  .hero-title { font-size: clamp(3.4rem, 6vw, 5.8rem); }
  .work { width: 23vw; }
}

/* =============================================================
   23. Reduced motion (only intrusive effects)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-foot-arrow { animation: none; }
}