/* ============================================================
   HIGHER STANDARD — Concept B: "The Campaign"
   Bold editorial B&W. References: JUUN.J, BOLD HORIZON,
   Allex portfolio, Stone Investment, LINKA.
   Layout, type, and motion CSS. Figure placeholders live in
   figures.css; behavior in js/editorial.js.
   ============================================================ */

:root {
  --black: #101010;
  --black-soft: #181818;
  --paper: #f4f3f0;
  --paper-dim: #e9e7e1;
  --ink-40: rgba(16, 16, 16, 0.4);   /* labels/folios only — fails AA for body */
  --ink-62: rgba(16, 16, 16, 0.62);  /* body-size secondary text: ~4.6:1 on paper */
  --ink-15: rgba(16, 16, 16, 0.15);
  --white-70: rgba(244, 243, 240, 0.7);
  --white-25: rgba(244, 243, 240, 0.25);
  --signal: #e04a1f; /* reserved: the two CTAs only */

  --display: "Anton", "Arial Narrow", sans-serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--black);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--black); color: var(--paper); }

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

/* ---------- Type ---------- */

.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

.display--hero { font-size: clamp(4.2rem, 14.5vw, 13.5rem); }
.display--slab { font-size: clamp(2.6rem, 7.5vw, 6.5rem); }
.display--row  { font-size: clamp(1.7rem, 4.8vw, 4rem); }

.label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.label--dim { color: var(--ink-40); }

.body-l {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.7;
  max-width: 56ch;
}

.body-m { font-size: 0.95rem; max-width: 62ch; }

/* ---------- Layout ---------- */

.wrap {
  max-width: 1680px;
  margin: 0 auto;
  padding-left: clamp(20px, 3.5vw, 56px);
  padding-right: clamp(20px, 3.5vw, 56px);
}

.slab { position: relative; }
.slab--black { background: var(--black); color: var(--paper); }
.slab--pad { padding-top: clamp(90px, 10vw, 170px); padding-bottom: clamp(90px, 10vw, 170px); }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  mix-blend-mode: difference;
  color: #fff;
}

/* Three balanced tracks so the page links center on the true viewport axis,
   regardless of how wide the logo and the CTA are */
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 22px;
}

.nav-inner .nav-logo { justify-self: start; }
.nav-inner .nav-cta { justify-self: end; }

.nav-logo {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.nav-links { display: flex; gap: 34px; }

.nav-links a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.nav-links a:hover { opacity: 1; }

.nav-links a:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* ---------- Bracket button (LINKA) ---------- */

.btn-bracket {
  position: relative;
  display: inline-block;
  padding: 1.05rem 2.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: inherit;
}

.btn-bracket::before,
.btn-bracket::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  transition: transform 0.45s var(--ease-out);
}

.btn-bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.btn-bracket::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.btn-bracket:hover::before { transform: translate(-4px, -4px); }
.btn-bracket:hover::after  { transform: translate(4px, 4px); }

.btn-bracket:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* The nav's Consultation CTA: a solid block inside the brackets. The nav's
   difference blend flips it per backdrop — dark block on cream, light block
   over the film and black slabs — so it leads without leaving monochrome. */
.nav-cta.btn-bracket {
  background: #fff;
  color: #000;
  font-weight: 700;
  padding: 0.9rem 1.9rem;
}

.nav-cta.btn-bracket::before,
.nav-cta.btn-bracket::after {
  border-color: #fff;
}

.nav-cta.btn-bracket::before { top: -5px; left: -5px; }
.nav-cta.btn-bracket::after  { bottom: -5px; right: -5px; }

.nav-cta.btn-bracket:hover::before { transform: translate(-3px, -3px); }
.nav-cta.btn-bracket:hover::after  { transform: translate(3px, 3px); }

/* Solid signal CTA — used exactly twice on the page */
.btn-signal {
  display: inline-block;
  background: var(--signal);
  color: var(--black);
  padding: 1.15rem 2.8rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.btn-signal:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -10px rgba(224, 74, 31, 0.55);
}

.btn-signal:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

/* ---------- Reveal primitives (JS toggles .is-in) ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* Split-line reveals: JS wraps lines, CSS animates the inners */
[data-split-lines] { opacity: 1; transform: none; } /* parent stays visible */

[data-split-lines] .line { display: block; overflow: hidden; }

[data-split-lines] .line-inner {
  display: block;
  transform: translateY(112%);
  transition: transform 1.1s var(--ease-out);
}

[data-split-lines].is-in .line-inner { transform: translateY(0); }

/* Image unclip */
.unclip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease-out);
}

[data-reveal].is-in .unclip,
.unclip.is-in { clip-path: inset(0 0 0% 0); }

.reduced-motion [data-reveal],
.reduced-motion [data-split-lines] .line-inner,
.reduced-motion .unclip {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* Fills the viewport on laptops; on tall monitors the film caps at 1120px
     wide, so the hero is allowed to end just under the film instead of
     stranding the copy at the foot of a 1440px screen. */
  min-height: min(100svh, calc(13vh + (min(1120px, 56vw, 74vh * 1.7778) / 1.7778) + 24rem));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(30px, 4vw, 70px);
  overflow: hidden;
}

/* Desktop: a wide 16:9 frame — how the brand film is actually
   shot. Width caps by screen width and by the height budget below the
   nav, so the crop is identical on every window shape. Mobile switches
   back to the portrait poster crop (see the 760px block). */
.hero-figure {
  position: absolute;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, 56vw, calc(74vh * 1.7778));
  aspect-ratio: 16 / 9;
  z-index: 1;
}

/* JUUN.J-style knockout: ink on paper, inverting to white where the
   headline crosses the photograph. */
.hero-type {
  position: relative;
  z-index: 2;
  color: var(--paper);
  mix-blend-mode: difference;
}

.hero-type .display--hero { margin-left: -0.04em; }

.hero-type .line:nth-child(2) .line-inner { margin-left: clamp(40px, 12vw, 260px); }

/* Hero print caption rides the right rail so the intro copy never overprints it */
.hero-figure .figure-caption {
  left: auto;
  right: 14px;
  text-align: right;
}

/* A light print on the light page needs a cut edge to read as an object */
.figure-print--light {
  box-shadow: inset 0 0 0 1px rgba(16, 16, 16, 0.16), 0 10px 30px -14px rgba(16, 16, 16, 0.35);
}

.hero-meta {
  position: relative;
  z-index: 2;
  color: var(--paper);
  mix-blend-mode: difference;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  margin-top: clamp(26px, 3vw, 48px);
}

.hero-meta .body-l { max-width: 44ch; }

/* ---------- Marquee ---------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  padding: 16px 0;
}

.marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  width: max-content;
}

.marquee-track > span {
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.6rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-right: 2.2em;
}

.marquee-track .tick { color: var(--ink-40); }

.slab--black .marquee-track .tick { color: var(--white-25); }

/* ---------- Facts slab (truthful, Allex-rhythm) ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--white-25);
}

.fact {
  padding: clamp(30px, 3.5vw, 60px) clamp(20px, 2.5vw, 44px);
  border-left: 1px solid var(--white-25);
}

.fact:first-child { border-left: 0; }

.fact-number {
  font-family: var(--display);
  font-size: clamp(3rem, 6.5vw, 6rem);
  line-height: 1;
}

.fact-label { margin-top: 14px; color: var(--white-70); }

/* ---------- Discipline index rows ---------- */

.index-row {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: baseline;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(22px, 2.6vw, 38px) 0;
  border-top: 1px solid var(--ink-15);
  transition: transform 0.5s var(--ease-out);
}

.index-row:last-of-type { border-bottom: 1px solid var(--ink-15); }

.index-row:hover { transform: translateX(18px); }

.index-no {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  transition: color 0.4s ease;
}

.index-row:hover .index-no { color: var(--black); }

.index-desc {
  font-size: 0.9rem;
  color: var(--ink-62);
  max-width: 34ch;
  text-align: right;
}

/* Cursor-follow row images removed: fragile in practice and adding
   nothing while the prints are placeholders. Rows are always visible. */

/* ---------- Journey timeline ---------- */

.journey {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 clamp(30px, 4vw, 70px);
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

.journey-line {
  grid-column: 2;
  grid-row: 1 / span 99;
  width: 1px;
  background: var(--white-25);
  position: relative;
}

.journey-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform-origin: top;
  transform: scaleY(var(--draw-progress, 0));
}

.journey-step {
  padding: clamp(24px, 3vw, 48px) 0;
}

.journey-step:nth-child(odd of .journey-step) { grid-column: 1; text-align: right; }
.journey-step:nth-child(even of .journey-step) { grid-column: 3; }

.journey-wk {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1;
}

.journey-step h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 12px;
}

.journey-step p {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--white-70);
  max-width: 38ch;
  display: inline-block;
}

/* ---------- Founder slab ---------- */

.founder {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(34px, 5vw, 90px);
  align-items: center;
}

.founder-quote {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: 1.14;
  text-transform: uppercase;
}

.founder-quote em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px var(--black);
}

/* ---------- Finale ---------- */

.finale { text-align: center; }

.finale .display--slab { margin-bottom: clamp(26px, 3vw, 48px); }

/* ---------- Footer ---------- */

.footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(70px, 8vw, 130px);
}
/* Whatever slab the footer closes, the footer row is the last thing on the
   page: the parent's bottom padding is dropped so no dead band hangs below it */
.slab:has(> .footer) { padding-bottom: 0 !important; }

.footer-ghost {
  font-family: var(--display);
  font-size: clamp(4.5rem, 15vw, 14.5rem);
  line-height: 0.85;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--white-25);
  user-select: none;
  will-change: transform;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* middle column is always page-centre, like the header */
  align-items: start;
  gap: 30px;
  padding-top: clamp(36px, 4vw, 60px);
  padding-bottom: clamp(36px, 4vw, 60px); /* side gutters come from .wrap — never zero them */
  border-top: 1px solid var(--white-25);
  margin-top: clamp(40px, 5vw, 80px);
}

/* Legal links: a smaller, quieter line beneath the page links */
.footer-nav { display: flex; flex-direction: column; align-items: center; gap: 14px; }
@media (max-width: 900px) { .footer-nav { align-items: flex-start; } }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.footer-legal a:hover { opacity: 0.85; }

/* Footer links: never break a label mid-phrase; wrap as whole items */
.footer-cols .nav-links { flex-wrap: wrap; gap: 14px 28px; }
.footer-cols .nav-links a { white-space: nowrap; }
.footer-cols > .label:last-child { text-align: right; }
@media (max-width: 900px) {
  .footer-cols { grid-template-columns: 1fr; gap: 26px; }
  .footer-cols > .label:last-child { text-align: left; }
}

.footer a { transition: opacity 0.3s ease; }
.footer a:hover { opacity: 0.65; }
.footer a:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .founder { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; }
  .fact { border-top: 1px solid var(--white-25); }
  .fact:nth-child(-n+2) { border-top: 0; }
}

@media (max-width: 1000px) {
  /* Tuck the hero print up and short so the intro paragraph clears it */
  .hero-figure { width: min(680px, 74vw, calc(64vh * 1.7778)); top: 6vh; }
}

/* ---------- Mobile menu ---------- */

/* Burger: three hairline bars, blend-inverted like the rest of the nav.
   Hidden on desktop; on small screens it takes the CTA's slot and the
   Consultation block moves inside the menu. */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 0 6px;
  background: transparent;
  border: 0;
  color: #fff; /* buttons don't inherit color; the blend needs white to invert */
}

.nav-burger span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
}

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-burger:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Full-screen menu: a black slab beneath the blended nav bar */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--black);
  display: none;
  flex-direction: column;
  padding: 90px clamp(20px, 3.5vw, 56px) clamp(36px, 6vh, 64px);
}

/* Links float to the vertical center; the CTA holds the bottom */
.mobile-menu-link:first-child { margin-top: auto; }

.mobile-menu.is-open { display: flex; }

.mobile-menu a { -webkit-tap-highlight-color: transparent; }

.mobile-menu-link {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.6rem, 11vw, 4.6rem);
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--paper);
  padding: 0.12em 0;
}

.mobile-menu-link[aria-current="page"] { color: var(--white-70); }

.mobile-menu-link:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

.mobile-menu-cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  background: var(--paper);
  color: var(--black);
  padding: 1rem 2rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.mobile-menu-cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

html.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-inner { display: flex; justify-content: space-between; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

@media (max-width: 760px) {
  .journey { grid-template-columns: 16px 1px 1fr; }
  .journey-step:nth-child(odd of .journey-step) { grid-column: 3; text-align: left; }
  .index-row { grid-template-columns: 56px 1fr; }
  .index-desc {
    grid-column: 2;
    text-align: left;
    max-width: none;
    margin-top: 4px;
  }
  .hero-figure { width: min(88vw, calc(60vh * 0.75)); aspect-ratio: 3 / 4; top: 5vh; }
}

@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
  .fact { border-left: 0; }
}

/* ---------- Sticky mobile CTA (built by editorial.js) ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(20px, 3.5vw, 56px);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--black);
  color: var(--paper);
  text-decoration: none;
  border-top: 1px solid var(--white-25);
  transform: translateY(100%);
  transition: transform 0.45s var(--ease-out);
}
.sticky-cta .label { color: var(--paper); }
.sticky-cta-arrow { font-size: 1rem; line-height: 1; }
.sticky-cta.is-shown { transform: translateY(0); }
@media (max-width: 900px) {
  .sticky-cta { display: flex; }
}