/* ==========================================================================
   BLACKONE — blackone.cz
   Single stylesheet. No framework, no build step.
   ========================================================================== */

/* ============================================================= 00 FONTS */
/* Self-hosted. No Google Fonts, no external requests. */

/* Sources (.otf/.ttf) live in font/src/ and are not served — see .htaccess. */

/* GeForce — display face, matches the logo wordmark. Single weight;
   the 400–900 range maps every bold step onto it so the browser never
   synthesises a faux bold. */
@font-face {
  font-family: 'GeForce';
  src: url('../font/GeForce-Bold.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Metropolis — text and UI family, all seven weights. */
@font-face {
  font-family: 'Metropolis';
  src: url('../font/Metropolis-ExtraLight.woff2') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../font/Metropolis-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../font/Metropolis-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../font/Metropolis-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../font/Metropolis-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../font/Metropolis-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../font/Metropolis-Black.woff2') format('woff2');
  font-weight: 800 900; font-style: normal; font-display: swap;
}

:root {
  --bg:        #0C0D0E;
  --bg-dark:   #08090A;
  --bg-black:  #030304;
  --line:      #1B1E20;

  --gold:      #C6A15C;
  --gold-2:    #DCC08A;
  --gold-dim:  #8A7340;

  --white:     #FFFFFF;
  --grey:      #A7ACB0;   /* secondary headline */
  --text:      #8E9498;   /* body copy */
  --text-dim:  #6E7478;

  /* Two faces only: GeForce for display, Metropolis for everything else. */
  --display: 'GeForce', 'Metropolis', 'Arial Black', Helvetica, sans-serif;
  --body:    'Metropolis', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1380px;
  --pad: clamp(20px, 4vw, 64px);

  /* header */
  --hdr-wrap: 1620px;                       /* header container is wider than --wrap */
  --hdr-h: clamp(72px, 5.4vw, 100px);       /* bar height */
  --logo-h: clamp(48px, 3.9vw, 72px);       /* logo.svg height inside the bar */

  /* How far the strip rides up over the bottom of the hero. */
  --overlap: clamp(70px, 7vw, 120px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* , *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--hdr-h);   /* anchors clear the sticky bar */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
b { font-weight: 600; color: var(--gold-2); }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--white);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
::selection { background: var(--gold); color: #0B0C0D; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--gold); color: #0B0C0D;
  padding: 12px 20px;
  font-family: var(--body); text-transform: uppercase; letter-spacing: .14em;
}
.skip:focus { left: 0; }

.dot { color: var(--gold); }

/* --------------------------------------------------------------- kicker */
.kicker {
  margin: 0 0 22px;
  font-family: var(--body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .18em;          /* 180 in Photoshop */
  text-transform: uppercase;
  color: #af8646;
  display: flex;
  align-items: center;
  gap: 13px;
}
.kicker::before {
  content: "";
  width: 30px; height: 1px;
  background: currentColor;
  flex: none;
}
.kicker--c { justify-content: center; }
.kicker--c::before { display: none; }
.kicker--plain { margin-bottom: 14px; color: #836743; }
.kicker--plain::before { display: none; }

/* =========================================================== 01 HEADER */
/* The bar sits in the flow (sticky), so the hero image starts below it —
   never underneath it. --hdr-h is the single source of truth for its height. */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-black);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .3s var(--ease);
}
.hdr.is-stuck { background: #000; }

.hdr__in {
  max-width: var(--hdr-wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.logo__img {
  height: var(--logo-h);
  width: auto;
}

.nav { display: flex; align-items: center; gap: clamp(28px, 3.4vw, 62px); margin-left: auto; }
.nav a {
  font-family: var(--body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #B6BABD;
  transition: color .22s var(--ease);
  white-space: nowrap;
}
.nav a:hover, .nav a.is-active { color: var(--gold-2); }

.burger {
  --bar: 2px;
  --bar-gap: 9px;
  /* Half the distance between the two bar centres — the exact travel each
     bar needs to land on the button's centre line, so the X is symmetric. */
  --bar-shift: calc((var(--bar-gap) + var(--bar)) / 2);

  flex: none;
  width: 34px; height: 24px;
  margin-left: clamp(34px, 4vw, 76px);
  padding: 0;
  background: none; border: 0;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: var(--bar-gap);
}
.burger span {
  display: block; height: var(--bar); width: 34px;
  background: var(--gold);
  transform-origin: 50% 50%;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(var(--bar-shift)) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(calc(var(--bar-shift) * -1)) rotate(-45deg); }

@media (max-width: 900px) {
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #08090A;
    border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 26px;
    opacity: 0; visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 16px 0; font-size: 17px; border-bottom: 1px solid var(--line); }

  /* .nav leaves the flow here, so its margin-left:auto no longer pushes
     the burger over — the burger has to claim the space itself. */
  .burger { margin-left: auto; }
}

/* ============================================================= 02 HERO */
.hero {
  position: relative;
  /* Sized so the media box keeps roughly the photo's own 1.6 ratio —
     the full scene stays visible instead of being cropped in tight. */
  min-height: clamp(520px, 44vw, 880px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0E0F11 0%, #0A0B0C 100%);
}

/* Full bleed — the photo spans the whole hero, no side inset. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
  position: relative;
  top: 0;
}

.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  /* Lifts the copy clear of the tiles that ride up over the hero. Sits on
     .hero__in, not .hero, so the media box — and its crop — is untouched. */
  padding-bottom: var(--overlap);
}

.hero__title {
  max-width: 720px;
  font-size: clamp(30px, 3.5vw, 51px);
  line-height: 1.16;
  letter-spacing: -.01em;
  margin-bottom: 46px;
}
.hero__title em { font-style: normal; color: var(--grey); }

.hero__text {
  max-width: 600px;
  font-family: var(--body);
  font-weight: 200;               /* Extra Light */
  font-size: 17.5px;
  line-height: 1.82;
  color: #7e7e7e;
  margin-bottom: 34px;
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 14px 24px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 3px;
  text-decoration: none;
  color: var(--white);
  font-family: var(--body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease);
}
.btn svg { width: 21px; height: 21px; fill: var(--gold); stroke: none; }
.btn:hover {
  background: rgba(198,161,92,.18);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* ====================================================== 03 IMAGE STRIP */
.strip {
  --tile-w: clamp(190px, 17vw, 300px);
  --tile-gap: 10px;

  position: relative;
  z-index: 2;
  overflow: hidden;
  background: transparent;
  /* Pulled up over the bottom of the hero, so the hero's own photo — not a
     second copy of it — is what shows through the gaps between the tiles. */
  margin-top: calc(var(--overlap) * -1);
}

.strip__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: strip-run 64s linear infinite;
}

/* The gap is margin, not `gap`, so the four sets tile at an exact
   interval and translating by one quarter lands on the next set. */
.strip figure {
  position: relative;
  margin: 0 var(--tile-gap) 0 0;
  flex: none;
  width: var(--tile-w);
  border-radius: 20px;
  overflow: hidden;
}
/* The blur is already baked into the file; this only smooths the upscale
   of the small source. scale() hides the rim the blur leaves at the edge. */
.strip img {
  width: 100%;
  height: clamp(240px, 27vw, 400px);
  object-fit: cover;
  filter: blur(1px);
  transform: scale(1.03);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

@keyframes strip-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

/* One veil per tile, clipped by the tile's own radius — it never bleeds
   into the gaps between them. */
.nda {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  text-align: center;
  background: rgba(3, 3, 4, .74);

  font-family: var(--body);   /* same face as the menu */
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8A9095;
}
.nda__ico { width: 30px; height: 30px; fill: #8A9095; }

@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
}

/* =========================================================== 04 BADGES */
.badges { padding: clamp(44px, 5.5vw, 74px) var(--pad) clamp(30px, 3vw, 44px); }
.badges__in {
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.badge { display: flex; align-items: center; justify-content: center; gap: 14px; }
.badge p {
  margin: 0;
  font-family: var(--body);   /* Metropolis Medium */
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6e6e6e;
  line-height: 1.45;
}
.ico { width: 32px; height: 32px; color: var(--gold); flex: none; }
/* Badge icons are supplied artwork (img/*.svg) with their gold baked in. */
.badge .ico { width: 61px; height: 61px; }
.ico--lg { width: 64px; height: 64px; }

@media (max-width: 780px) {
  .badges__in { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .badge { justify-content: flex-start; }
}

/* ====================================================== 05 CAPABILITIES */
.why { padding: clamp(28px, 2.8vw, 44px) 0 clamp(56px, 7vw, 96px); text-align: center; }

.why__title {
  font-size: clamp(26px, 3.1vw, 47px);
  line-height: 1.14;
  margin-bottom: 32px;
}
.why__title em { font-style: normal; color: var(--grey); }

.why__text {
  max-width: 790px;
  margin: 0 auto clamp(36px, 4.5vw, 78px);
  font-size: 17.5px;
  line-height: 1.8;
  color: var(--text-dim);
}

/* Framed hero image */
.frame {
  position: relative;
  max-width: 964px;
  margin: 0 auto clamp(34px, 4vw, 54px);
  border: 1px solid rgba(255,255,255,.07);
  /* Matches .frame__img — a smaller radius here would clip the photo's
     corners and leave slivers of the frame showing through. */
  border-radius: 20px;
  overflow: hidden;
  background: #0A0B0C;
}
/* Classed, not `.frame > img` — that also caught the logo overlay and
   overrode its width. */
.frame__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
}
.frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,7,8,.55) 0%, rgba(6,7,8,0) 26%, rgba(6,7,8,0) 55%, rgba(6,7,8,.92) 100%);
  pointer-events: none;
}
.frame__logo {
  position: absolute;
  top: clamp(14px, 2vw, 22px);
  left: clamp(14px, 2vw, 22px);
  width: clamp(112px, 13vw, 150px);
  height: auto;
  z-index: 2;
}
/* Stats */
.stats {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(32px, 7vw, 112px);
}
.stat { display: flex; align-items: center; gap: 13px; }
/* Supplied artwork (img/*.svg), gold baked in — same treatment as .badge. */
.stat .ico { width: 84px; height: 84px; }
.stat dt {
  font-family: var(--display);   /* GeForce */
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 48px);
  color: #b28947;
  line-height: 1;
  padding-right: 15px;
}
/* The + and % run 15px below whatever size the number resolves to. */
.stat dt .sfx { font-size: calc(1em - 15px); }
.stat dd {
  margin: 0;
  text-align: left;
  font-family: var(--body);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6e6e6e;
  line-height: 1.45;
}

/* ====================================================== 06 PRODUCTIONS */
.prod { padding-bottom: clamp(56px, 7vw, 100px); }

.prod__head {
  position: relative;
  text-align: center;
  margin-bottom: clamp(26px, 3vw, 40px);
  padding-top: 20px;
}
.prod__ghost {
  position: absolute;
  top: -34px; left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: auto;
  opacity: .5;
  pointer-events: none;
}
.prod__title {
  position: relative;
  font-size: clamp(26px, 3.1vw, 47px);
  letter-spacing: .005em;
  margin-bottom: 36px;
}
.prod__tags {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--body);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #727271;
}
.prod__tags span { padding: 0 clamp(10px, 1.6vw, 20px); position: relative; }
.prod__tags span + span::before {
  content: "";
  position: absolute; left: -2px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px;
  background: var(--gold);
  border-radius: 50%;
}

/* Gallery — column 1 narrower, matching the layout */
/* 90% of the page, three equal columns — every tile the same size. */
.gal {
  width: 90%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gal figure {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #0A0B0C;
}
.gal img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: blur(1px);
  transform: scale(1.03);   /* hides the rim the blur leaves at the edge */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

@media (max-width: 860px) { .gal { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gal { grid-template-columns: 1fr; } }

/* =========================================================== 07 STUDIO */
/* No bottom padding — the footer's black band butts straight up to it. */
.studio { padding-block: clamp(50px, 6.5vw, 96px) 0; }

.studio__in {
  display: grid;
  /* The diagram's labels live inside the SVG, so the only way to make them
     readable is to give the artwork more room. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(28px, 3.4vw, 52px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 86px);
}

.studio__copy .ico--lg { margin-bottom: 18px; }
.studio__name {
  font-size: clamp(26px, 3.1vw, 47px);
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.studio__claim {
  font-family: var(--display);
  font-weight: 700;
  font-size: 29px;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 26px;
}
/* Body copy only. The kicker and the claim are <p> too, and this selector
   outranks their own classes — :not([class]) keeps it off anything styled. */
.studio__copy p:not([class]) { font-size: 17.5px; line-height: 1.8; color: var(--text-dim); max-width: 46ch; }

/* Hex diagram */
/* Supplied artwork — img/studio.svg carries the grid, mark and labels. */
.hex {
  width: 100%;   /* fills its grid column — the labels are tiny at 430px */
  height: auto;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .studio__in { grid-template-columns: 1fr; }
  .hex { width: min(100%, 360px); }
}

/* Pillars */
/* Band is full-bleed; the .wrap inside keeps the content centred. */
.pillars__band { background: #131414; padding-block: clamp(26px, 3vw, 44px); }

.pillars {
  width: 90%;              /* same full-bleed treatment as .gal */
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 38px);
}
.pillar { display: flex; gap: 18px; align-items: flex-start; }
/* Supplied artwork (img/*.svg) — same treatment as .badge and .stat. */
.pillar .ico { width: 64px; height: 64px; margin-top: -6px; }
.pillar h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: none;
  color: #b28947;
  margin-bottom: 6px;
}
.pillar p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

/* =========================================================== 08 FOOTER */
.ftr {
  background: var(--bg-black);
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: clamp(46px, 6vw, 78px);
  text-align: center;
}

.ftr__logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 26px;
}
.ftr__logo img { width: 200px; height: auto; margin: 0 auto 12px; }

.ftr__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(16px, 2.4vw, 30px);
  margin-bottom: 56px;
}
.ftr__nav a {
  font-family: var(--body);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #9BA0A4;
  transition: color .2s var(--ease);
}
.ftr__nav a:hover { color: var(--gold-2); }

.ftr__text {
  max-width: 700px;
  margin: 0 auto clamp(28px, 3.4vw, 44px);
  font-size: 17.5px;
  line-height: 1.8;
  color: var(--text-dim);
}

.ftr__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px clamp(24px, 3.4vw, 48px);
  padding-bottom: clamp(28px, 3.4vw, 44px);
}
.ftr__contact li { display: flex; align-items: center; gap: 10px; }
/* Material Symbols are filled paths, not strokes. */
.ftr__contact .ico { width: 32px; height: 32px; fill: currentColor; color: var(--gold); }
.ftr__contact a {
  padding-top: 2px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  color: #C2C6C9;
  transition: color .2s var(--ease);
}
.ftr__contact a:hover { color: var(--gold-2); }

.ftr__base {
  border-top: 1px solid rgba(255,255,255,.05);
  padding-block: 16px;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #4E5356;
}
.ftr__base p { margin: 0; }
.ftr__group { margin-top: 6px; color: #3C4043; }

/* ======================================= 09 CAPABILITIES (subpage) */
/* Reuses --wrap, .kicker, .why__title, .why__text, .stats and .btn so the
   subpage stays locked to the home page's scale. */

/* Same geometry as .hero on the home page. */
.phero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 44vw, 880px);
  overflow: hidden;
  background: linear-gradient(180deg, #0E0F11 0%, #0A0B0C 100%);
}
/* Full bleed, same treatment as the home page hero. The photo carries its
   own dark left side, so no gradient overlay is needed. */
.phero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.phero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}
.phero > .wrap { position: relative; z-index: 2; }

.phero__title {
  max-width: 720px;
  font-size: clamp(30px, 3.5vw, 51px);
  line-height: 1.16;
  letter-spacing: -.01em;
  margin-bottom: 46px;
}
.phero__title em { font-style: normal; color: var(--grey); }
/* Single column — it has to stay inside the photo's dark left half. */
.phero__text { max-width: 600px; }
.phero__text p {
  font-size: 17.5px;
  line-height: 1.82;
  color: #7e7e7e;
}

/* ------------------------------------------------ benefits at a glance */
.bens { padding-bottom: clamp(26px, 5vw, 40px); }
.bens__grid {
  width: 90%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}
.ben { padding-top: 18px; border-top: 1px solid var(--line); }
.ben h2 {
  margin-top: 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: none;
  color: #b28947;
  margin-bottom: 8px;
}
.ben p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

@media (max-width: 1100px) { .bens__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .bens__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------- four capability blocks */
.caps { background: var(--bg-black); padding-block: clamp(40px, 5vw, 72px); }
.caps__grid {
  width: 90%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(40px, 3.6vw, 60px);
  align-items: start;
}
.cap .ico { width: 64px; height: 64px; margin-bottom: 18px; }
.cap__no {
  margin: 0 0 10px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #836743;
}
.cap__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
.cap__text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.cap__list { display: grid; gap: 7px; }
.cap__list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
  color: #8E9498;
}
.cap__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 5px; height: 1px;
  background: var(--gold);
}

@media (max-width: 1100px) { .caps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .caps__grid { grid-template-columns: 1fr; } }

/* ------------------------------------- production assets and locations */
.assets { padding-block: clamp(48px, 6vw, 92px) 40px; }
.assets__head, .locs__head { text-align: center; padding-bottom: 60px; }

.assets__grid {
  width: 90%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.asset { padding-top: 20px; border-top: 1px solid var(--line); }
.asset h3 {
  margin-top: 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: none;
  color: #b28947;
  margin-bottom: 8px;
}
.asset p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

@media (max-width: 900px) { .assets__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .assets__grid { grid-template-columns: 1fr; } }

.locs { background: var(--bg-black); padding-block: clamp(48px, 6vw, 92px); }
.locs__list {
  width: 90%;
  margin-inline: auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px clamp(24px, 3vw, 48px);
}

@media (max-width: 900px) { .locs__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .locs__list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- beyond production */
.beyond { padding-block: clamp(48px, 6vw, 92px); }
.beyond__head { text-align: center; padding-bottom: 60px; }

.beyond__grid {
  width: 90%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: start;
}
.beyond__col {
  background: #131414;
  border-radius: 20px;
  padding: clamp(24px, 2.4vw, 36px);
}
.beyond__col .ico { width: 48px; height: 48px; margin-bottom: 16px; fill: var(--gold); color: var(--gold); }
.beyond__col h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: none;
  color: #b28947;
  margin-bottom: 14px;
}

@media (max-width: 900px) { .beyond__grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- process */
.proc { background: var(--bg-black); padding-block: clamp(48px, 6vw, 92px); }
.proc__head { text-align: center; }

.proc__grid {
  /* It's an <ol>; the global reset only covers <ul>. */
  list-style: none;
  padding: 0;
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.step { position: relative; padding-top: 20px; border-top: 1px solid var(--line); }
.step__no {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: #b28947;
  margin-bottom: 12px;
}
.step h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--white);
  margin-bottom: 8px;
}
.step p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

@media (max-width: 900px) { .proc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .proc__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- stats */
.capstats { padding-block: clamp(44px, 5.5vw, 84px); }

/* ------------------------------------------------------------------ CTA */
.cta {
  padding-block: clamp(52px, 6.5vw, 100px);
  text-align: center;
  background: linear-gradient(180deg, var(--bg) 0%, #0E0F11 100%);
  border-top: 1px solid var(--line);
}
.cta__mark { width: 62px; height: auto; margin: 0 auto 22px; opacity: .5; }
.cta__title {
  font-size: clamp(26px, 3.1vw, 47px);
  line-height: 1.14;
  margin-bottom: 20px;
}
.cta__title em { font-style: normal; color: var(--grey); }
.cta__claim {
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #836743;
  margin-bottom: 38px;
}

/* ==================================================== 10 SCROLL REVEAL */
.rv { opacity: 0; transform: translateY(20px); }
.rv.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv.in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================ 10 PRINT */
@media print {
  .hdr, .burger, .strip { display: none; }
  body { background: #fff; color: #000; }
}