/* ==========================================================================
   KGEC — Kuwait Green Energy Co.
   Single global stylesheet. No preprocessor, no build step.
   Design system inherited from SUAIQA (owner-approved reference).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- colour ---
     Nothing is pure black, pure white, or neutral grey. Warmth is the luxury. */
  --c-ink:         #0a0908;   /* warm near-black — primary dark ground */
  --c-ink-soft:    #14110d;
  --c-graphite:    #1f1c17;
  --c-steel:       #2a2621;

  --c-bone:        #f6f1e6;   /* light type on dark */
  --c-cream:       #ede6d4;
  --c-paper:       #fbf8f1;   /* light section ground */

  --c-gold:        #c9a961;   /* primary accent */
  --c-gold-deep:   #8b6f33;
  --c-gold-bright: #e0bf78;   /* italic accent lines */
  --c-amber:       #d49a3c;
  --c-rust:        #8b3a1f;

  --c-mute:        #8a8276;
  --c-line:        rgba(255, 255, 255, 0.12);
  --c-line-dark:   rgba(10, 9, 8, 0.12);

  /* --- type --- */
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --f-mono:    "JetBrains Mono", "Courier New", monospace;

  /* --- sizing --- */
  --pad-x:       22px;
  --pad-y:       64px;
  --container:   100%;        /* full-bleed — gutters come from --pad-x alone */
  --header-h:    76px;
  --subheader-h: 36px;

  /* --- motion --- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart:    cubic-bezier(0.77, 0, 0.175, 1);
}

@media (min-width: 768px) {
  :root { --pad-x: 48px; --pad-y: 96px;  --header-h: 92px; --subheader-h: 38px; }
}
@media (min-width: 1280px) {
  :root { --pad-x: 72px; --pad-y: 120px; }
}
@media (min-width: 1700px) {
  :root { --pad-x: 96px; --pad-y: 140px; }
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis owns scrolling when JS is active */
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--c-ink);
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

::selection { background: var(--c-gold); color: var(--c-ink); }

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

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section { padding: var(--pad-y) 0; }
.section--paper { background: var(--c-paper); color: var(--c-ink); }
.section--ink   { background: var(--c-ink);   color: var(--c-bone); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */

/* Small-caps label. Used for section eyebrows and meta rows. */
.eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.section--paper .eyebrow { color: var(--c-gold-deep); }

/* The signature heading: light serif with a gold italic line beneath. */
.display {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 6vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.display em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--c-gold-bright);
}
.section--paper .display em { color: var(--c-gold-deep); }

.lead {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--c-mute);
  max-width: 58ch;
}

/* Oversized numeral, for stat rows. */
.numeral {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  color: var(--c-gold);
  letter-spacing: -0.03em;
}

.rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}
.section--paper .rule { background: var(--c-line-dark); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background 0.5s var(--ease-out),
              color 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out);
}
.btn--gold {
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.btn--gold:hover {
  background: var(--c-gold);
  color: var(--c-ink);
}
.btn--solid {
  background: var(--c-gold);
  color: var(--c-ink);
}
.btn--solid:hover { background: var(--c-gold-bright); }

.btn--line {
  border-color: var(--c-line);
  color: var(--c-bone);
}
.btn--line:hover { border-color: var(--c-gold); color: var(--c-gold); }

/* --------------------------------------------------------------------------
   5. PRELOADER
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-ink);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: opacity 1s var(--ease-out), visibility 1s;
}
.preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback preloader — the REAL KGEC mark, revealed by a gold sweep. */
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 34px; }

.preloader__logo { position: relative; overflow: hidden; }
.preloader__logo img {
  width: min(58vw, 340px);
  height: auto;
  /* wipes upward, so the arcs appear before the wordmark */
  clip-path: inset(0 0 100% 0);
  animation: logo-wipe 1.25s var(--ease-quart) 0.15s forwards;
}
@keyframes logo-wipe { to { clip-path: inset(0 0 0% 0); } }

/* A single gold hairline travelling down across the mark as it forms. */
.preloader__sweep {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--c-gold-bright);
  box-shadow: 0 0 24px 4px rgba(224, 191, 120, 0.45);
  opacity: 0;
  animation: logo-sweep 1.25s var(--ease-quart) 0.15s forwards;
}
@keyframes logo-sweep {
  0%   { opacity: 0;   transform: translateY(0); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0;   transform: translateY(100%); }
}

.preloader__bar {
  width: min(46vw, 220px);
  height: 1px;
  background: var(--c-line);
  overflow: hidden;
}
.preloader__bar i {
  display: block;
  height: 100%;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  animation: load-bar 1.7s var(--ease-out) 0.2s forwards;
}
@keyframes load-bar { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   6. SUBHEADER — certification + contact strip
   -------------------------------------------------------------------------- */
.subheader {
  position: relative;
  z-index: 60;
  height: var(--subheader-h);
  background: var(--c-ink-soft);
  border-bottom: 1px solid var(--c-line);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.subheader__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.subheader__social { display: flex; align-items: center; gap: 6px; }
.subheader__social a {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-chip, 999px);
  color: var(--c-mute);
  transition: color .4s var(--ease-out), background .4s var(--ease-out);
}
.subheader__social svg { width: 13px; height: 13px; fill: currentColor; }
.subheader__social a:hover { color: var(--c-gold); background: rgba(201,169,97,0.12); }

.subheader__contact { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.subheader__contact .loc { color: var(--c-mute); }
.subheader__contact a { color: var(--c-cream); opacity: .82;
  transition: color .4s var(--ease-out), opacity .4s; }
.subheader__contact a:hover { color: var(--c-gold); opacity: 1; }
.subheader__contact .wa { color: var(--c-gold); opacity: 1; }

@media (max-width: 1180px) { .subheader__contact .loc { display: none; } }
@media (max-width: 760px) {
  .subheader__contact a[href^="mailto"] { display: none; }
  .subheader__contact { gap: 14px; }
  .subheader__contact a { font-size: 10px; }
  .subheader__social a { width: 24px; height: 24px; }
}

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: var(--subheader-h);
  left: 0;
  right: 0;
  z-index: 70;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: transform 0.6s var(--ease-out),
              background 0.6s var(--ease-out),
              border-color 0.6s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(10, 9, 8, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--c-line);
}
.header.is-hidden { transform: translateY(calc(-100% - var(--subheader-h))); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.brand { display: flex; align-items: center; }
.brand img { height: 38px; width: auto; }

.nav { display: flex; gap: 32px; }
.nav a {
  position: relative;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-bone);
  padding: 4px 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 1080px) {
  .nav, .header .btn { display: none; }
}

/* --------------------------------------------------------------------------
   8. BURGER + "THE SWEEP" MENU
   -------------------------------------------------------------------------- */
.burger {
  position: relative;
  z-index: 210;
  width: 48px; height: 48px;
  display: none;
  place-items: center;
}
@media (max-width: 1080px) { .burger { display: grid; } }

.burger svg { width: 26px; height: 26px; overflow: visible; }
.burger .bar {
  stroke: var(--c-bone);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: transform 0.6s var(--ease-out), opacity 0.4s var(--ease-out);
  transform-origin: center;
}
.menu-open .burger .bar--1 { transform: translateY(7px) rotate(45deg); }
.menu-open .burger .bar--2 { opacity: 0; }
.menu-open .burger .bar--3 { transform: translateY(-7px) rotate(-45deg); }

/* The panel is revealed by a circular clip expanding from the burger. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-ink);
  visibility: hidden;
  clip-path: circle(0% at calc(100% - 46px) calc(var(--subheader-h) + var(--header-h) / 2));
  transition: clip-path 0.9s var(--ease-quart), visibility 0.9s;
}
.menu-open .menu {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 46px) calc(var(--subheader-h) + var(--header-h) / 2));
}

/* Gold arcs sweeping outward, echoing the KGEC mark. */
.menu__sweep {
  position: absolute;
  top: calc(var(--subheader-h) + var(--header-h) / 2);
  right: 46px;
  width: 1px; height: 1px;
  pointer-events: none;
}
.menu__sweep span {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
.menu-open .menu__sweep span { animation: sweep 1.4s var(--ease-out) forwards; }
.menu__sweep span:nth-child(1) { width: 120vmax; height: 120vmax; animation-delay: 0.00s; }
.menu__sweep span:nth-child(2) { width: 120vmax; height: 120vmax; animation-delay: 0.09s; }
.menu__sweep span:nth-child(3) { width: 120vmax; height: 120vmax; animation-delay: 0.18s; }

@keyframes sweep {
  0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1); }
}

.menu__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--subheader-h) + var(--header-h) + 40px) var(--pad-x) 40px;
  overflow-y: auto;
}
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  font-family: var(--f-display);
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.1;
  color: var(--c-bone);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), color 0.4s;
}
.menu-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a .num {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--c-gold);
}
.menu__nav a:hover { color: var(--c-gold-bright); }

.menu__foot {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-mute);
  opacity: 0;
  transition: opacity 0.8s var(--ease-out) 0.6s;
}
.menu-open .menu__foot { opacity: 1; }

body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* The photography is already dark and warm — it needs only enough scrim to keep
   type legible, not a blackout. Was 0.5 + a heavy gradient, which crushed it. */
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      var(--c-ink) 0%,
      rgba(10, 9, 8, 0.82) 26%,
      rgba(10, 9, 8, 0.30) 62%,
      rgba(10, 9, 8, 0.10) 100%),
    linear-gradient(to right,
      rgba(10, 9, 8, 0.72) 0%,
      rgba(10, 9, 8, 0.28) 46%,
      rgba(10, 9, 8, 0) 78%);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 64px;
  padding-top: calc(var(--subheader-h) + var(--header-h) + 40px);
}
.hero h1 {
  font-size: clamp(40px, 6.8vw, 98px);
  line-height: 1.06;
  margin: 24px 0 26px;
}
.hero h1 em {
  display: block;
  font-style: italic;
  color: var(--c-gold-bright);
}
.hero__lead { max-width: 46ch; }

.hero__bar {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.hero__bar .scroll { display: flex; align-items: center; gap: 10px; }
.hero__bar .dash {
  display: block;
  width: 40px; height: 1px;
  background: var(--c-gold);
  transform-origin: left;
  animation: dash-pulse 2.4s var(--ease-out) infinite;
}
@keyframes dash-pulse {
  0%, 100% { transform: scaleX(0.4); opacity: 0.5; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

/* --------------------------------------------------------------------------
   10. REVEAL PRIMITIVES
   -------------------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.fade-up.in { opacity: 1; transform: none; }
.fade-up.d1 { transition-delay: 0.09s; }
.fade-up.d2 { transition-delay: 0.18s; }
.fade-up.d3 { transition-delay: 0.27s; }
.fade-up.d4 { transition-delay: 0.36s; }

/* Images wipe rather than fade — reads as more deliberate. */
.reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.3s var(--ease-quart);
}
.reveal-img.in { clip-path: inset(0 0 0% 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fade-up { opacity: 1; transform: none; }
  .reveal-img { clip-path: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   11. PLACEHOLDER MEDIA
   Temporary. Real assets replace these at the same slot names.
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      var(--c-ink-soft) 0 14px,
      var(--c-graphite) 14px 28px
    );
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  text-align: center;
  padding: 12px;
}

/* --------------------------------------------------------------------------
   12. STATEMENT
   -------------------------------------------------------------------------- */
.statement__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .statement__grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
}
.statement__body p { margin: 0 0 20px; max-width: 52ch; color: #4a453d; }
.statement__body .btn { margin-top: 8px; }

.spec-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--c-line-dark);
}
@media (min-width: 900px) { .spec-row { grid-template-columns: repeat(4, 1fr); } }

.spec { display: flex; flex-direction: column; gap: 10px; }
.spec .numeral { color: var(--c-gold-deep); }
.spec__label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-mute);
}

/* --------------------------------------------------------------------------
   13. HORIZONTAL SECTION — scroll-driven, never thumb-dragged
   -------------------------------------------------------------------------- */
/* The section is pinned, so it must fit exactly one viewport. Lay it out as a
   fixed-height column: head and foot take what they need, the card row takes
   the rest. That way the card can never overflow and clip its CTA. */
.hsec {
  position: relative;
  background: var(--c-ink);
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 4vh, 44px) 0 clamp(16px, 3vh, 32px);
  overflow: hidden;
}
.hsec__head { flex: 0 0 auto; padding-bottom: clamp(16px, 3vh, 34px); }
.hsec__head .display {
  margin-top: 12px;
  font-size: clamp(28px, 4.4vw, 58px);   /* smaller here — the cards are the subject */
}

.hsec__viewport { flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; }

.hsec__track {
  display: flex;
  gap: 24px;
  height: 100%;
  padding: 0 var(--pad-x);
  will-change: transform;
}

/* Fallback when GSAP is unavailable or motion is reduced: native swipe. */
.hsec.is-static .hsec__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.hsec.is-static .hsec__track > * { scroll-snap-align: start; }

/* Cards must be large enough that the track always exceeds the viewport —
   otherwise there is nothing to travel and the pin does nothing on wide screens. */
.dcard {
  flex: 0 0 auto;
  width: clamp(280px, 40vw, 640px);
  background: var(--c-ink-soft);
  border: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
}
/* Card fills the row exactly; the image absorbs the slack so the body — and
   critically the "View division" link — is always visible. */
.dcard { height: 100%; }
.dcard__img { flex: 1 1 auto; width: 100%; min-height: 60px; }
.dcard__body {
  flex: 0 0 auto;
  padding: clamp(16px, 2.2vh, 24px) 26px clamp(16px, 2.2vh, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
}
.dcard__num {
  font-family: var(--f-sans);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--c-gold);
}
.dcard h3 { font-size: clamp(21px, 2vw, 30px); }
.dcard p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--c-mute); }
.dcard a {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  transition: color 0.4s var(--ease-out);
}
.dcard a:hover { color: var(--c-gold-bright); }

.hsec__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(14px, 2.4vh, 28px);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.hsec__foot [data-h-counter] { color: var(--c-gold); min-width: 42px; }
.hsec__bar { flex: 1; height: 1px; background: var(--c-line); overflow: hidden; }
.hsec__bar i {
  display: block;
  height: 100%;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   14. MARQUEE — certification strip
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--c-ink-soft);
  border-block: 1px solid var(--c-line);
  padding: 26px 0;
  overflow: hidden;
}
.marquee__track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__track span {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 36px);
  color: var(--c-cream);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 44px;
}
.marquee__track span::after { content: "·"; color: var(--c-gold); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --------------------------------------------------------------------------
   15. THE INDEX
   -------------------------------------------------------------------------- */
.idx__head { display: grid; gap: 28px; margin-bottom: 56px; }
@media (min-width: 980px) {
  .idx__head { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; }
}
.idx__head .display { margin-top: 18px; }

.idx__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }

.idx__row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 8px 18px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
  transition: padding-left 0.6s var(--ease-out), background 0.6s var(--ease-out);
}
@media (min-width: 760px) {
  .idx__row { grid-template-columns: 90px 1fr auto; padding: 22px 0; }
}
.idx__row:hover { padding-left: 16px; background: rgba(201, 169, 97, 0.05); }

.idx__n { font-size: 10px; letter-spacing: 0.22em; color: var(--c-gold); }
.idx__name { font-family: var(--f-display); font-size: clamp(19px, 2.2vw, 27px); }
.idx__div {
  grid-column: 2;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-mute);
}
@media (min-width: 760px) { .idx__div { grid-column: 3; } }

.idx__cta { margin-top: 44px; }

/* --------------------------------------------------------------------------
   16. PROMISE / WHY
   -------------------------------------------------------------------------- */
.promise__head { margin-bottom: 48px; }
.promise__head .display { margin-top: 18px; }
.promise__list { border-top: 1px solid var(--c-line-dark); }

.promise__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 30px 0;
  border-bottom: 1px solid var(--c-line-dark);
  transition: padding-left 0.6s var(--ease-out);
}
@media (min-width: 760px) { .promise__item { grid-template-columns: 90px 1fr; } }
@media (hover: hover) { .promise__item:hover { padding-left: 16px; } }

.promise__n { font-size: 10px; letter-spacing: 0.22em; color: var(--c-gold-deep); padding-top: 8px; }
.promise__item h4 { font-size: clamp(21px, 2.4vw, 28px); margin-bottom: 8px; }
.promise__item p { margin: 0; font-size: 14.5px; color: #5a544a; max-width: 62ch; }

/* --------------------------------------------------------------------------
   17. CINEMA
   -------------------------------------------------------------------------- */
.cinema { position: relative; background: var(--c-ink); padding: 80px 0; }
.cinema__media { width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 700px) { .cinema__media { aspect-ratio: 4 / 5; } }
.cinema__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 110px;
}
.cinema__overlay .display { margin-top: 14px; }

/* --------------------------------------------------------------------------
   18. GALLERY
   -------------------------------------------------------------------------- */
.gallery__head { margin-bottom: 44px; }
.gallery__head .display { margin-top: 18px; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 44px;
}
@media (min-width: 900px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.gallery__cell.tall { aspect-ratio: 4 / 5; }
.gallery__cell.wide { aspect-ratio: 16 / 11; }

/* --------------------------------------------------------------------------
   19. QUOTE
   -------------------------------------------------------------------------- */
.quote { text-align: center; }
.quote blockquote {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(24px, 3.6vw, 46px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 auto;
  max-width: 24ch;
}
.quote cite {
  display: block;
  margin-top: 36px;
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
}

/* --------------------------------------------------------------------------
   20. FOOT CTA
   -------------------------------------------------------------------------- */
.foot-cta { background: var(--c-ink); padding: calc(var(--pad-y) * 1.2) 0; }
.foot-cta .display { font-size: clamp(38px, 8vw, 96px); max-width: 14ch; }
.foot-cta .lead { margin-top: 24px; }
.foot-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
@media (max-width: 560px) { .foot-cta__btns .btn { width: 100%; justify-content: center; } }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--c-ink-soft); border-top: 1px solid var(--c-line); padding-top: 72px; }
.footer__top { display: grid; gap: 48px; margin-bottom: 56px; }
@media (min-width: 1000px) { .footer__top { grid-template-columns: 1fr 2fr; gap: 72px; } }

/* Restrained: the mark should sit quietly, not shout. */
.footer__brand img { height: 34px; width: auto; margin-bottom: 20px; opacity: 0.9; }
.footer__brand p { font-size: 13.5px; color: var(--c-mute); max-width: 42ch; margin: 0; }

.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
@media (min-width: 760px) { .footer__cols { grid-template-columns: repeat(4, 1fr); } }
.footer__cols h5 {
  font-family: var(--f-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 16px;
}
.footer__cols a, .footer__cols span {
  display: block;
  font-size: 13.5px;
  color: var(--c-mute);
  padding: 5px 0;
  transition: color 0.4s var(--ease-out);
}
.footer__cols a:hover { color: var(--c-bone); }

/* Watermark, not a billboard — a whisper of the mark above the bottom bar. */
.footer__big { margin: 40px 0 10px; display: flex; justify-content: center; }
.footer__big img {
  width: auto;
  height: clamp(28px, 4vw, 54px);
  max-width: 62%;
  opacity: 0.07;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--c-line);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-mute);
}

/* Real media inside fixed-aspect slots: fill and crop, never distort. */
.gallery__cell { margin: 0; overflow: hidden; background: var(--c-ink-soft); }
.gallery__cell img,
.hero__media img,
.dcard__img img,
.cinema__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery__cell img {
  transition: transform 1.6s var(--ease-out);
}
.gallery__cell:hover img { transform: scale(1.045); }

/* ==========================================================================
   22. POLISH PASS
   Softened geometry + richer interaction. Radii are tokenised so the whole
   site's "curve" can be tuned from one place.
   ========================================================================== */
:root {
  --r-btn:   10px;   /* buttons */
  --r-card:  8px;    /* cards, media, figures */
  --r-chip:  999px;  /* pills / small tags */
}

/* --- buttons: curved, with a subtle lift and a travelling arrow ---------- */
.btn {
  position: relative;
  border-radius: var(--r-btn);
  overflow: hidden;
  isolation: isolate;
  transition: background 0.5s var(--ease-out),
              color 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out),
              transform 0.5s var(--ease-out),
              box-shadow 0.5s var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-gold);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-quart);
}
.btn--gold:hover, .btn--line:hover { background: transparent; }
.btn--gold:hover::after, .btn--line:hover::after { transform: translateY(0); }
.btn--gold:hover, .btn--line:hover { color: var(--c-ink); border-color: var(--c-gold); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.btn:active { transform: translateY(0); }

.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201,169,97,0.22); }
.btn--solid::after { display: none; }

/* --- curved media ------------------------------------------------------- */
.gallery__cell,
.dcard,
.cinema__media,
.ph { border-radius: var(--r-card); }
.dcard__img { border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; }
.gallery__cell img, .cinema__media img { border-radius: inherit; }

/* --- cards lift on hover ------------------------------------------------ */
.dcard {
  transition: transform 0.7s var(--ease-out), border-color 0.7s var(--ease-out);
}
@media (hover: hover) {
  .dcard:hover { transform: translateY(-6px); border-color: rgba(201,169,97,0.38); }
}

/* --- "View division" arrow slides on hover ------------------------------ */
.dcard a { display: inline-flex; align-items: center; gap: 8px; }
.dcard a::after {
  content: "→";
  transition: transform 0.5s var(--ease-out);
}
.dcard a:hover::after { transform: translateX(5px); }

/* --- index rows: gold rule draws left→right ----------------------------- */
.idx__row { position: relative; border-radius: 4px; }
.idx__row::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 100%;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-quart);
}
.idx__row:hover::after { transform: scaleX(1); }

/* --- promise rows: gold edge on hover ----------------------------------- */
.promise__item { position: relative; border-radius: 4px; }
.promise__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--c-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease-quart);
}
@media (hover: hover) { .promise__item:hover::before { transform: scaleY(1); } }

/* --- subheader / menu / footer chips ------------------------------------ */
.subheader__certs span {
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  padding: 2px 9px;
  background: rgba(201,169,97,0.07);
  transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
.subheader__certs span:hover { background: rgba(201,169,97,0.16); color: var(--c-gold); }

/* --- nav underline eases from the centre -------------------------------- */
.nav a::after { transform-origin: center; }

/* --- selection + scrollbar ---------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-ink); }
::-webkit-scrollbar-thumb {
  background: var(--c-graphite);
  border-radius: var(--r-chip);
  border: 2px solid var(--c-ink);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-gold-deep); }

/* --- images fade in as they decode -------------------------------------- */
img { background-color: var(--c-ink-soft); }

/* --- form controls (used on contact / careers) -------------------------- */
input, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--r-btn);
  padding: 14px 16px;
  width: 100%;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.section--paper input, .section--paper textarea, .section--paper select {
  border-color: var(--c-line-dark);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--c-gold);
  background: rgba(201,169,97,0.04);
}
::placeholder { color: var(--c-mute); opacity: 0.8; }

/* ==========================================================================
   23. INNER PAGES
   ========================================================================== */

/* --- page hero ---------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--c-ink);
  padding: calc(var(--subheader-h) + var(--header-h) + clamp(56px, 9vh, 120px)) 0
           clamp(48px, 8vh, 104px);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.page-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--c-ink) 2%, rgba(10,9,8,0.86) 40%, rgba(10,9,8,0.44) 100%),
    linear-gradient(to right, rgba(10,9,8,0.78) 0%, rgba(10,9,8,0.22) 58%, rgba(10,9,8,0) 88%);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero .crumb {
  display: inline-block;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: 22px;
}
.page-hero h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(42px, 8vw, 104px); line-height: 1.03; letter-spacing: -0.025em;
}
.page-hero h1 em {
  display: block; font-style: italic; color: var(--c-gold-bright);
}
.page-hero .lead { margin-top: 26px; }

/* --- manifesto (vision / mission) --------------------------------------- */
.manifesto {
  min-height: 82svh;
  display: grid; place-items: center;
  padding: clamp(64px,12vh,160px) 0;
  background: var(--c-ink);
}
.manifesto.section--paper { background: var(--c-paper); color: var(--c-ink); }
.mf {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(28px, 4.6vw, 64px); line-height: 1.18; letter-spacing: -0.02em;
  max-width: 22ch; margin: 0 auto; text-align: center;
}
.mf__w {
  display: inline-block;
  opacity: 0; transform: translateY(0.4em);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i) * 45ms);
  margin-right: 0.26em;
}
.manifesto.in .mf__w { opacity: 1; transform: none; }
.mf__rule {
  display: block; height: 1px; width: min(360px, 60%);
  margin: clamp(34px,6vh,64px) auto 0;
  background: var(--c-gold);
  transform: scaleX(0); transform-origin: center;
  transition: transform 1.4s var(--ease-quart) 0.5s;
}
.manifesto.in .mf__rule { transform: scaleX(1); }

/* --- cross-links -------------------------------------------------------- */
.cross__grid {
  display: grid; gap: 16px; margin-top: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .cross__grid { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); } }
.cross__card {
  display: block; padding: 30px 28px 26px;
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-ink-soft);
  transition: transform 0.6s var(--ease-out), border-color 0.6s var(--ease-out),
              background 0.6s var(--ease-out);
}
.cross__card h4 { font-size: 26px; margin-bottom: 10px; }
.cross__card p { margin: 0 0 18px; font-size: 13.5px; color: var(--c-mute); }
.cross__go { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-gold); }
@media (hover:hover) {
  .cross__card:hover { transform: translateY(-5px); border-color: rgba(201,169,97,0.4);
                       background: rgba(201,169,97,0.05); }
}

/* --- large card grid ---------------------------------------------------- */
.lgrid__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px)  { .lgrid__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1200px) { .lgrid__grid { grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); } }
.lcard {
  border: 1px solid var(--c-line-dark); border-radius: var(--r-card);
  overflow: hidden; background: rgba(10,9,8,0.02);
  display: flex; flex-direction: column;
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.section--ink .lcard { border-color: var(--c-line); background: var(--c-ink-soft); }
.lcard__img { aspect-ratio: 4/3; overflow: hidden; }
.lcard__img img { width:100%; height:100%; object-fit:cover; transition: transform 1.6s var(--ease-out); }
@media (hover:hover) {
  .lcard:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,0.16); }
  .lcard:hover .lcard__img img { transform: scale(1.05); }
}
.lcard__body { padding: 26px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.lcard__num { font-size: 9.5px; letter-spacing: 0.24em; color: var(--c-gold-deep); }
.section--ink .lcard__num { color: var(--c-gold); }
.lcard h3 { font-size: clamp(23px,2.2vw,30px); }
.lcard p { margin:0; font-size:13.5px; line-height:1.6; color: var(--c-mute); flex:1; }
.lcard__go { font-size:9.5px; letter-spacing:0.22em; text-transform:uppercase;
             color: var(--c-gold-deep); padding-top:12px; border-top:1px solid var(--c-line-dark); }
.section--ink .lcard__go { color: var(--c-gold); border-top-color: var(--c-line); }

/* --- certificates ------------------------------------------------------- */
.certs__grid { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:700px)  { .certs__grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1150px) { .certs__grid { grid-template-columns:repeat(3,1fr); } }
.cert {
  padding: 34px 30px 30px;
  border:1px solid var(--c-line-dark); border-radius: var(--r-card);
  background: rgba(255,255,255,0.5);
  transition: transform .6s var(--ease-out), border-color .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.cert__mark {
  display:inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing:.14em;
  color: var(--c-gold-deep); border:1px solid var(--c-gold-deep);
  border-radius: var(--r-chip); padding: 5px 13px; margin-bottom: 18px;
}
.cert h3 { font-size: 25px; margin-bottom: 10px; }
.cert p { margin:0 0 18px; font-size:13.5px; color:#5a544a; }
.cert__year { font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-mute); }
@media (hover:hover) {
  .cert:hover { transform: translateY(-5px); border-color: var(--c-gold);
                box-shadow: 0 16px 40px rgba(0,0,0,0.10); }
}

/* --- downloads ---------------------------------------------------------- */
.dl__list { list-style:none; margin:0; padding:0; border-top:1px solid var(--c-line-dark); }
.dl__row {
  display:grid; grid-template-columns: 46px 1fr auto; gap: 6px 16px; align-items:center;
  padding: 22px 0; border-bottom:1px solid var(--c-line-dark);
  transition: padding-left .6s var(--ease-out), background .6s var(--ease-out);
}
@media (min-width:760px){ .dl__row { grid-template-columns: 70px 1fr 70px auto; } }
@media (hover:hover){ .dl__row:hover { padding-left:14px; background: rgba(201,169,97,0.06); } }
.dl__n { font-size:10px; letter-spacing:.22em; color: var(--c-gold-deep); }
.dl__name { font-family: var(--f-display); font-size: clamp(19px,2vw,25px); }
.dl__name em { display:block; font-family: var(--f-sans); font-style:normal;
               font-size:12.5px; color: var(--c-mute); margin-top:3px; letter-spacing:0; }
.dl__fmt { font-family: var(--f-mono); font-size:11px; color: var(--c-mute); }
.dl__go { font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--c-gold-deep); white-space:nowrap; }
.dl__note { margin-top:30px; font-size:13px; color: var(--c-mute); max-width:56ch; }

/* --- careers ------------------------------------------------------------ */
.openings__empty {
  border:1px solid var(--c-line-dark); border-radius: var(--r-card);
  padding: 36px 32px; background: rgba(201,169,97,0.05); max-width: 72ch;
}
.openings__empty p { margin:0 0 14px; font-size:14.5px; color:#5a544a; }
.openings__empty p:last-child { margin-bottom:0; }
.openings__empty strong { color: var(--c-ink); }

.applyx__grid, .contactx__grid { display:grid; gap:44px; grid-template-columns:1fr; }
@media (min-width:940px){
  .applyx__grid, .contactx__grid { grid-template-columns: 1fr 1fr; gap:72px; align-items:start; }
}

/* --- forms -------------------------------------------------------------- */
.form { display:flex; flex-direction:column; gap:18px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field > span {
  font-size:9.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color: var(--c-mute);
}
.form .btn { align-self:flex-start; margin-top:6px; }
@media (max-width:560px){ .form .btn { width:100%; justify-content:center; } }

/* --- contact ------------------------------------------------------------ */
.contactx__block { margin-bottom: 26px; }
.contactx__block .lbl {
  display:block; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--c-mute); margin-bottom:6px;
}
.contactx__block a, .contactx__block p {
  font-family: var(--f-display); font-size: clamp(21px,2.4vw,30px); margin:0;
  transition: color .4s var(--ease-out);
}
.contactx__block a:hover { color: var(--c-gold); }
.contactx__quick { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.contactx__form h3 { font-size: clamp(24px,2.4vw,32px); margin-bottom: 26px; }

/* --- flush spec row (no top rule) --------------------------------------- */
.spec-row--flush { margin-top:0; padding-top:0; border-top:0; }
.section--ink .spec .numeral { color: var(--c-gold); }

/* ==========================================================================
   24. ⭐ THE PRESSURE GAUGE — scroll drives the needle to 30,000 psi
   ========================================================================== */
.gauge { background: var(--c-ink); padding: clamp(72px,12vh,150px) 0; overflow:hidden; }
.gauge__inner { display:grid; gap:52px; grid-template-columns:1fr; align-items:center; }
@media (min-width:960px){ .gauge__inner { grid-template-columns: 1fr 1fr; gap:80px; } }
.gauge__copy .display { margin:16px 0 22px; }

.gauge__dial { position:relative; width:min(78vw,460px); margin:0 auto; }
.gauge__dial svg { width:100%; height:auto; overflow:visible; }
.gauge__face { fill: var(--c-ink-soft); stroke: var(--c-line); stroke-width:1; }
.gauge__ring { fill:none; stroke: rgba(201,169,97,0.14); stroke-width:1; }
.gauge__tick { stroke: rgba(246,241,230,0.30); stroke-width:1.1; }
.gauge__arc {
  fill:none; stroke: var(--c-gold); stroke-width:3; stroke-linecap:round;
  filter: drop-shadow(0 0 8px rgba(201,169,97,0.5));
}
.gauge__needle { transform-box: fill-box; transform-origin: 50% 93%; }
.gauge__needle line { stroke: var(--c-gold-bright); stroke-width:3; stroke-linecap:round; }
.gauge__needle circle { fill: var(--c-gold); }
.gauge__needle { transform: rotate(-135deg); }

.gauge__readout {
  position:absolute; left:0; right:0; bottom:14%;
  display:flex; align-items:baseline; justify-content:center; gap:10px;
}
.gauge__num {
  font-family: var(--f-display); font-weight:300;
  font-size: clamp(34px,5.4vw,62px); line-height:1; color: var(--c-bone);
  font-variant-numeric: tabular-nums;
}
.gauge__unit { font-size:11px; letter-spacing:.28em; text-transform:uppercase; color: var(--c-gold); }

.gauge.is-locked .gauge__num { color: var(--c-gold-bright); }
.gauge.is-locked .gauge__dial { animation: gauge-shiver .5s var(--ease-out); }
@keyframes gauge-shiver {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
}

/* ==========================================================================
   25. VISUAL SECTIONS
   Text never stands alone: every copy block is either paired with an image
   panel (.duo) or laid over a full-bleed image with a scrim (.has-bg).
   ========================================================================== */

/* --- full-bleed background behind a text section ------------------------ */
.has-bg { position: relative; overflow: hidden; }
.sec__bg { position: absolute; inset: 0; z-index: 0; }
.sec__bg img { width: 100%; height: 100%; object-fit: cover; }
.sec__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,9,8,0.90) 0%, rgba(10,9,8,0.80) 45%, rgba(10,9,8,0.94) 100%);
}
.section--paper.has-bg .sec__bg::after {
  background: linear-gradient(to bottom, rgba(251,248,241,0.95) 0%, rgba(251,248,241,0.90) 50%, rgba(251,248,241,0.96) 100%);
}
.has-bg > .wrap { position: relative; z-index: 2; }

/* Parallax drift — the background moves slower than the copy. */
.has-bg .sec__bg img { transform: scale(1.12); will-change: transform; }

/* --- duo: image panel beside copy --------------------------------------- */
.duo__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .duo__grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); }
  .duo--flip .duo__media { order: 2; }
}
.duo__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-ink-soft);
}
.duo__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.8s var(--ease-out);
}
@media (hover: hover) { .duo:hover .duo__media img { transform: scale(1.04); } }
.duo__copy .display { margin: 16px 0 24px; }
.duo__body p { margin: 0 0 18px; max-width: 54ch; }
.section--paper .duo__body p { color: #4a453d; }
.section--ink   .duo__body p { color: var(--c-mute); }
.duo__body .btn { margin-top: 8px; }

/* --- specs over an image ------------------------------------------------ */
.specs.has-bg .spec__label { color: var(--c-cream); opacity: 0.75; }

/* --- index / promise over an image -------------------------------------- */
.idx.has-bg .idx__list,
.promise.has-bg .promise__list { border-top-color: rgba(246,241,230,0.18); }
.idx.has-bg .idx__row,
.promise.has-bg .promise__item { border-bottom-color: rgba(246,241,230,0.14); }

/* --- manifesto over an image -------------------------------------------- */
.manifesto.has-bg { position: relative; }
.manifesto.has-bg .sec__bg::after {
  background:
    radial-gradient(ellipse at center, rgba(10,9,8,0.72) 0%, rgba(10,9,8,0.94) 72%),
    linear-gradient(to bottom, rgba(10,9,8,0.86), rgba(10,9,8,0.92));
}

/* --- quote over an image ------------------------------------------------- */
.quote.has-bg blockquote { max-width: 26ch; }

/* Fail-open: if JS never runs, nothing may stay invisible. */
.no-js .fade-up, .no-js .reveal-img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.no-js .mf__w { opacity: 1 !important; transform: none !important; }