/* ==========================================================================
   PIVT , design system
   Ink / bone / platinum. Editorial, high-contrast, no template smell.
   ========================================================================== */

:root {
  /* Core palette */
  --ink:        #0A0A0B;
  --ink-2:      #131316;
  --ink-3:      #1C1C21;
  --line:       #26262C;
  --bone:       #F4F2ED;
  --bone-2:     #E4E1DA;
  --mute:       #8E8E96;
  --mute-2:     #6A6A73;
  --platinum:   #C0C0C0;
  --accent:     #E8E4DB;

  /* Light surfaces */
  --paper:      #FBFAF8;
  --paper-2:    #F1EEE8;
  --paper-line: #E2DED6;

  /* Type */
  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(4.5rem, 11vw, 9rem);
  --maxw: 1240px;
  --radius: 2px;

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

  color-scheme: dark;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
img, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.62;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "cv05";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Layout ----------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(3rem, 7vw, 5.5rem); }

.paper { background: var(--paper); color: var(--ink); }
.paper-2 { background: var(--paper-2); color: var(--ink); }
.ink-2 { background: var(--ink-2); }

/* Type ------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 560; line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(2.85rem, 8.4vw, 6.4rem); }
h2 { font-size: clamp(2.1rem, 5.4vw, 4rem); }
h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); letter-spacing: -0.025em; line-height: 1.15; }
h4 { font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.3; }
p { text-wrap: pretty; }

em, .serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: currentColor;
  opacity: .5;
  flex: none;
}
.paper .eyebrow, .paper-2 .eyebrow { color: var(--mute-2); }

.lead {
  font-size: clamp(1.125rem, 1.05rem + .55vw, 1.5rem);
  line-height: 1.48;
  letter-spacing: -0.018em;
  color: var(--bone-2);
}
.paper .lead, .paper-2 .lead { color: #3A3A40; }

.muted { color: var(--mute); }
.paper .muted, .paper-2 .muted { color: var(--mute-2); }

.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }

/* Buttons ---------------------------------------------------------------- */
.btn {
  --btn-bg: var(--bone);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 100px;
  font-size: .9375rem;
  font-weight: 550;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--bone); }
.paper .btn--ghost, .paper-2 .btn--ghost {
  --btn-fg: var(--ink);
  border-color: var(--paper-line);
}
.paper .btn--ghost:hover, .paper-2 .btn--ghost:hover { border-color: var(--ink); }

.paper .btn, .paper-2 .btn { --btn-bg: var(--ink); --btn-fg: var(--bone); }
.paper .btn--ghost, .paper-2 .btn--ghost { --btn-bg: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.txtlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 550; font-size: .9375rem;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: gap .3s var(--ease), opacity .3s var(--ease);
}
.txtlink:hover { gap: .8rem; }

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

/* Header ----------------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(10,10,11,.72);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom-color: var(--line);
}
.hdr__in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.15rem var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { display: block; flex: none; }
.brand img { height: 20px; width: auto; }

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a {
  font-size: .9rem; font-weight: 500; letter-spacing: -0.008em;
  color: var(--bone-2);
  position: relative; padding-block: .2rem;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover { color: var(--bone); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--bone); }

.hdr__cta { display: flex; align-items: center; gap: .75rem; }
.hdr__cta .btn { padding: .65rem 1.25rem; font-size: .875rem; }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 42px; height: 42px; margin-right: -8px;
  position: relative;
}
.burger span {
  position: absolute; left: 11px; width: 20px; height: 1.5px;
  background: var(--bone); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 24px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  padding: 6.5rem var(--gut) 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
body.menu-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a.mn-link {
  display: block;
  font-size: clamp(2rem, 9vw, 2.75rem);
  letter-spacing: -0.035em; font-weight: 500;
  padding-block: .45rem;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .mn-foot { color: var(--mute); font-size: .875rem; }

@media (max-width: 900px) {
  .nav, .hdr__cta .btn { display: none; }
  .burger { display: block; }
}

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: 8rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 8%,  rgba(192,192,192,.16) 0%, transparent 58%),
    radial-gradient(90% 70% at 12% 96%,  rgba(120,140,190,.13) 0%, transparent 60%),
    linear-gradient(180deg, #0F0F12 0%, var(--ink) 62%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: clamp(70px, 9vw, 120px) clamp(70px, 9vw, 120px);
  mask-image: radial-gradient(110% 80% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 30%, #000 20%, transparent 78%);
}
.grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero h1 { max-width: 15ch; }
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span {
  display: block;
  transform: translateY(105%);
  animation: rise 1.05s var(--ease) forwards;
}
.hero h1 .ln:nth-child(2) > span { animation-delay: .09s; }
.hero h1 .ln:nth-child(3) > span { animation-delay: .18s; }
@keyframes rise { to { transform: none; } }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  align-items: flex-end; justify-content: space-between;
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero__sub { max-width: 44ch; }
.scroll-cue {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--mute), transparent); }

/* Marquee ---------------------------------------------------------------- */
.marquee {
  border-block: 1px solid var(--line);
  padding-block: 1.15rem;
  overflow: hidden;
  background: var(--ink-2);
}
.marquee__track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  display: inline-flex; align-items: center; gap: 2.5rem;
  padding-right: 2.5rem;
  font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); white-space: nowrap;
}
.marquee span::after { content: "◆"; font-size: .5rem; opacity: .5; letter-spacing: 0; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Stats ------------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--paper-line); border-block: 1px solid var(--paper-line); }
.section.paper .stats, .section.paper-2 .stats { background: var(--paper-line); }
.stat { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem); }
.stat__n { font-size: clamp(2.25rem, 4.5vw, 3.4rem); letter-spacing: -0.045em; line-height: 1; font-weight: 560; }
.stat__l { margin-top: .5rem; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute-2); }

/* Split / grid ----------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.split--even { grid-template-columns: 1fr; }
@media (min-width: 900px) { .split--even { grid-template-columns: 1fr 1fr; align-items: center; } }
.sticky { position: sticky; top: 6.5rem; }
@media (max-width: 899px) { .sticky { position: static; } }

.cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0));
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
  height: 100%;
}
.card:hover { border-color: #3A3A44; transform: translateY(-3px); }
.paper .card, .paper-2 .card {
  border-color: var(--paper-line);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.35));
}
.paper .card:hover, .paper-2 .card:hover { border-color: #C9C4B9; }
.card h3 { margin-bottom: .65rem; }
.card p { font-size: .96875rem; }
.card__i {
  width: 38px; height: 38px; margin-bottom: 1.4rem;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  color: var(--mute);
}
.paper .card__i, .paper-2 .card__i { border-color: var(--paper-line); }

/* Numbered steps --------------------------------------------------------- */
.steps { border-top: 1px solid var(--paper-line); }
.section:not(.paper):not(.paper-2) .steps { border-top-color: var(--line); }
.step {
  display: grid; gap: .5rem 2.5rem;
  grid-template-columns: 1fr;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--paper-line);
}
.section:not(.paper):not(.paper-2) .step { border-bottom-color: var(--line); }
@media (min-width: 800px) { .step { grid-template-columns: 5.5rem 1fr 1.5fr; align-items: baseline; } }
.step__n { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--mute-2); }
.step p { font-size: 1rem; }

/* Dual paths ------------------------------------------------------------- */
.paths { display: grid; gap: 1px; background: var(--line); grid-template-columns: 1fr; }
@media (min-width: 800px) { .paths { grid-template-columns: 1fr 1fr; } }
.path {
  background: var(--ink);
  padding: clamp(2rem, 5vw, 3.75rem);
  display: flex; flex-direction: column; gap: 1rem;
  min-height: clamp(320px, 40vw, 460px);
  position: relative; overflow: hidden;
  transition: background .5s var(--ease);
}
.path::after {
  content: ""; position: absolute; inset: auto -20% -60% auto;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(192,192,192,.14), transparent 68%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.path:hover::after { opacity: 1; }
.path h3 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -0.035em; }
.path .btn-row { margin-top: auto; padding-top: 1.5rem; }

/* Quote ------------------------------------------------------------------ */
.quote { text-align: center; max-width: 22ch; margin-inline: auto; }
.quote blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(2rem, 6vw, 4.25rem);
  line-height: 1.08; letter-spacing: -0.03em;
}
.quote figcaption { margin-top: 2rem; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* Portrait / media ------------------------------------------------------- */
.media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(145deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media__ph { text-align: center; padding: 2rem; color: var(--mute-2); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; }
.media--wide { aspect-ratio: 16 / 10; }

/* FAQ -------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.paper .faq, .paper-2 .faq { border-top-color: var(--paper-line); }
.faq details { border-bottom: 1px solid var(--line); }
.paper .faq details, .paper-2 .faq details { border-bottom-color: var(--paper-line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding-block: 1.4rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 550; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-size: 1.35rem; line-height: 1; color: var(--mute);
  transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.6rem; max-width: 68ch; font-size: .96875rem; }

/* Forms ------------------------------------------------------------------ */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.paper .field label, .paper-2 .field label { color: var(--mute-2); }
.field input, .field textarea, .field select {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: .7rem 0;
  font-size: 1.0625rem; letter-spacing: -0.01em;
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.paper .field input, .paper .field textarea, .paper .field select,
.paper-2 .field input, .paper-2 .field textarea, .paper-2 .field select { border-bottom-color: var(--paper-line); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: currentColor; }
.field textarea { resize: vertical; min-height: 5.5rem; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238E8E96' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1rem center;
  cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--mute-2); }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form .btn { justify-self: start; margin-top: .5rem; }
.form__note { font-size: .8125rem; color: var(--mute); }
.paper .form__note, .paper-2 .form__note { color: var(--mute-2); }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form__status { font-size: .9rem; display: none; }
.form__status.is-on { display: block; }

/* CTA band --------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 120% at 50% 110%, rgba(192,192,192,.18), transparent 62%);
}
.cta-band h2 { max-width: 16ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 2.25rem; }

/* Footer ----------------------------------------------------------------- */
.ftr { background: var(--ink); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.ftr__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.ftr h4 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 1rem; font-weight: 600; }
.ftr ul { list-style: none; display: grid; gap: .6rem; }
.ftr a { font-size: .9375rem; color: var(--bone-2); transition: color .3s var(--ease); }
.ftr a:hover { color: var(--bone); }
.ftr__brand img { height: 22px; width: auto; margin-bottom: 1.1rem; }
.ftr__brand p { font-size: .9375rem; color: var(--mute); max-width: 30ch; }
.ftr__base {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .8125rem; color: var(--mute-2);
}

/* Reveal on scroll ------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* Page header (inner pages) ---------------------------------------------- */
.phdr { padding-top: clamp(8.5rem, 16vw, 12rem); padding-bottom: clamp(3rem, 7vw, 5rem); position: relative; isolation: isolate; overflow: hidden; }
.phdr::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 80% at 82% 0%, rgba(192,192,192,.13), transparent 60%), linear-gradient(180deg, #101014, var(--ink) 72%);
}
.phdr h1 { max-width: 14ch; }
.phdr .lead { margin-top: 1.5rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bone); color: var(--ink); padding: .75rem 1.25rem; border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; }

/* Utility ---------------------------------------------------------------- */
.mt-1 { margin-top: .75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.25rem; } .mt-4 { margin-top: 3rem; }
.stack > * + * { margin-top: 1.15rem; }
.divider { height: 1px; background: var(--line); border: 0; }
.paper .divider, .paper-2 .divider { background: var(--paper-line); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-size: .8125rem; padding: .4rem .9rem;
  border: 1px solid var(--line); border-radius: 100px; color: var(--bone-2);
}
.paper .chip, .paper-2 .chip { border-color: var(--paper-line); color: #3A3A40; }

/* ==========================================================================
   Motion layer , scroll-driven reveals, parallax, progress
   ========================================================================== */

/* Scroll progress bar */
.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: 2px; background: transparent; pointer-events: none;
}
.progress i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(192,192,192,.35), var(--bone));
  will-change: transform;
}

/* Word-level heading reveal */
.w-out {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .10em .05em .20em;
  margin: -.10em -.05em -.20em;
}
.w-in {
  display: inline-block;
  transform: translateY(112%) rotate(2.5deg);
  transform-origin: 0 100%;
  transition: transform .95s var(--ease);
  will-change: transform;
}
.words.in .w-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .w-in { transform: none !important; transition: none; }
}

/* Reveal variants ------------------------------------------------------- */
.rv {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease),
    filter .9s var(--ease);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; filter: none; }

.rv[data-rv="fade"]  { transform: none; }
.rv[data-rv="left"]  { transform: translateX(-34px); filter: blur(5px); }
.rv[data-rv="right"] { transform: translateX(34px);  filter: blur(5px); }
.rv[data-rv="scale"] { transform: scale(.965) translateY(20px); }
.rv[data-rv="rise"]  { transform: translateY(48px); }

/* Children stagger , set by JS via --d */
.rv { transition-delay: var(--d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Parallax + scroll-linked ------------------------------------------------ */
[data-parallax] { will-change: transform; }

/* Hero recedes as you scroll past it */
.hero__inner { will-change: transform, opacity; }

/* Media zoom-in on entry */
.media img, .media .media__ph {
  transform: scale(1.08);
  transition: transform 1.4s var(--ease);
}
.media.in img, .media.in .media__ph { transform: none; }

/* Cards lift in sequence and gain a light sweep on hover */
.card {
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.07), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.paper .card::before, .paper-2 .card::before {
  background: radial-gradient(60% 60% at var(--mx, 50%) var(--my, 0%), rgba(0,0,0,.045), transparent 70%);
}

/* Steps draw their rule as they enter */
.step {
  position: relative;
  overflow: hidden;
}
.step::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--bone);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
  opacity: .25;
}
.steps.in .step::after { transform: scaleX(1); }
.steps.in .step:nth-child(2)::after { transition-delay: .12s; }
.steps.in .step:nth-child(3)::after { transition-delay: .24s; }
.steps.in .step:nth-child(4)::after { transition-delay: .36s; }
.paper .step::after, .paper-2 .step::after { background: var(--ink); }

/* Path panels slide in from opposite sides */
.paths .path:first-child { --path-x: -28px; }
.paths .path:last-child  { --path-x: 28px; }
.path.rv { transform: translateX(var(--path-x, 0)) translateY(18px); }

/* Quote gets a slow letter-spacing settle */
.quote blockquote { transition: letter-spacing 1.4s var(--ease), opacity .9s var(--ease); }
.quote.rv blockquote { letter-spacing: .01em; }
.quote.rv.in blockquote { letter-spacing: -0.03em; }

/* Marquee reacts to scroll velocity (JS sets --mq) */
.marquee__track { animation-duration: 38s; }
.marquee.fast .marquee__track { animation-duration: 12s; }

/* Sticky section headings get a subtle fade as they release */
.sticky { transition: opacity .5s var(--ease); }

/* Anchor offset so fixed header never covers a target */
[id] { scroll-margin-top: 6.5rem; }

/* Headings that also word-reveal shouldn't double up on movement */
.rv.words { transform: none; filter: none; }
.rv.words.in { transform: none; }

/* Clip the dual-path slide-in so it never creates a horizontal scrollbar */
.paths { overflow: hidden; }

/* Three-up card grid for the channels block */
@media (min-width: 940px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Effects layer 2, cursor, magnetics, tilt, wipes, page transitions
   ========================================================================== */

/* Page entry, content settles in on load ---------------------------------- */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
main { animation: pageIn .8s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { main { animation: none; } }

/* Page exit wipe ---------------------------------------------------------- */
.wipe {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink);
  transform: scaleY(0); transform-origin: 50% 100%;
  pointer-events: none;
  will-change: transform;
}
.wipe.go {
  transform: scaleY(1);
  transition: transform .55s cubic-bezier(.7,0,.3,1);
}
.wipe__mark {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .3s ease .15s;
}
.wipe__mark img { height: 22px; width: auto; }
.wipe.go .wipe__mark { opacity: 1; }

/* Custom cursor ----------------------------------------------------------- */
.cur, .cur-ring {
  position: fixed; top: 0; left: 0; z-index: 400;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}
.cur { width: 7px; height: 7px; background: #fff; margin: -3.5px 0 0 -3.5px; }
.cur-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(255,255,255,.55);
  transition: width .35s var(--ease), height .35s var(--ease),
              margin .35s var(--ease), border-color .35s var(--ease), opacity .3s;
}
body.cur-hot .cur-ring {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-color: rgba(255,255,255,.9);
}
body.cur-hide .cur, body.cur-hide .cur-ring { opacity: 0; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cur, .cur-ring { display: none; }
}

/* Magnetic buttons, JS drives --mgx/--mgy ---------------------------------- */
.btn {
  transform: translate3d(var(--mgx, 0px), var(--mgy, 0px), 0);
  transition: transform .45s var(--ease), background .35s var(--ease),
              color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { transform: translate3d(var(--mgx, 0px), calc(var(--mgy, 0px) - 2px), 0); }
.btn.is-magnetic { transition: transform .12s linear, background .35s var(--ease), border-color .35s var(--ease); }

/* Card tilt, JS drives --rx/--ry ------------------------------------------- */
.cards { perspective: 1400px; }
.card {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: border-color .4s var(--ease), transform .5s var(--ease), background .4s var(--ease);
}
.card:hover { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.card.is-tilting { transition: border-color .4s var(--ease), transform .15s linear; }

/* Hero spotlight follows the cursor --------------------------------------- */
.hero__spot {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 40%),
              rgba(192,192,192,.16), transparent 65%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.hero:hover .hero__spot { opacity: 1; }

/* Drifting grain ----------------------------------------------------------- */
@keyframes grainShift {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-2%, 1%, 0); }
  50%  { transform: translate3d(1%, -2%, 0); }
  75%  { transform: translate3d(-1%, -1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.grain { animation: grainShift 8s steps(4, end) infinite; }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* Light sections wipe in over the dark ------------------------------------ */
.section.paper, .section.paper-2 {
  background: transparent;
  isolation: isolate;
}
.section.paper::before, .section.paper-2::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--paper);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s cubic-bezier(.7,0,.2,1);
}
.section.paper-2::before { background: var(--paper-2); }
.section.wiped::before { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .section.paper::before, .section.paper-2::before { clip-path: none; transition: none; }
}

/* Progress rail beside the numbered steps --------------------------------- */
.steps { position: relative; }
.steps::before {
  content: "";
  position: absolute; left: -1.25rem; top: 0; bottom: 0; width: 1px;
  background: currentColor; opacity: .12;
}
.steps::after {
  content: "";
  position: absolute; left: -1.25rem; top: 0; width: 1px;
  height: var(--rail, 0%);
  background: currentColor; opacity: .55;
  transition: height .25s linear;
}
@media (max-width: 799px) { .steps::before, .steps::after { display: none; } }

/* Nav letters lift on hover ------------------------------------------------ */
.nav a .ltr {
  display: inline-block;
  transition: transform .4s var(--ease);
}
.nav a:hover .ltr { transform: translateY(-3px); }

/* Footer link sweep -------------------------------------------------------- */
.ftr a { position: relative; }
.ftr ul a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.ftr ul a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ==========================================================================
   Effects layer 3
   ========================================================================== */

/* WebGL hero canvas ------------------------------------------------------- */
.hero__gl {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero__gl.on { opacity: 1; }
.hero__bg { transition: opacity 1.4s var(--ease); }
.hero.gl-live .hero__bg { opacity: 0; }

/* Theme-aware header ------------------------------------------------------ */
.hdr .brand img { transition: filter .45s var(--ease); }
.hdr--light .brand img { filter: invert(1); }
.hdr--light .nav a { color: #3A3A40; }
.hdr--light .nav a:hover, .hdr--light .nav a[aria-current="page"] { color: var(--ink); }
.hdr--light .burger span { background: var(--ink); }
.hdr--light.is-stuck {
  background: rgba(251,250,248,.78);
  border-bottom-color: var(--paper-line);
}
.hdr--light .hdr__cta .btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--bone);
}
body.menu-open .hdr--light .brand img { filter: none; }
body.menu-open .hdr--light .burger span { background: var(--bone); }

/* Horizontal pinned rail --------------------------------------------------- */
.hpin { position: relative; }
.hpin__stage {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
}
.hpin__head { flex: none; }
.hpin__hint {
  margin-top: 1rem;
  font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
  display: flex; align-items: center; gap: .6rem;
}
.hpin__hint::after {
  content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .5;
  animation: hintPulse 2.4s var(--ease) infinite;
}
@keyframes hintPulse { 0%,100% { transform: scaleX(.4); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } }

.hpin__viewport { overflow: hidden; width: 100%; }
.hpin__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-inline: var(--gut);
  width: max-content;
  perspective: 1400px;
  will-change: transform;
}
.hcard {
  flex: 0 0 clamp(268px, 30vw, 400px);
  min-height: clamp(300px, 34vh, 380px);
  display: flex; flex-direction: column;
}

@media (max-width: 899px) {
  .hpin__stage { position: static; height: auto; padding-block: var(--sec); }
  .hpin__viewport { overflow: visible; }
  .hpin__track {
    display: grid; grid-template-columns: 1fr;
    width: auto; transform: none !important;
    max-width: var(--maxw); margin-inline: auto;
  }
  .hcard { min-height: 0; }
  .hpin__hint { display: none; }
}

/* Process line, SVG drawn ------------------------------------------------- */
.steps::before, .steps::after { display: none; }
.steps-svg {
  position: absolute; left: -1.5rem; top: 0;
  width: 14px; height: 100%;
  overflow: visible; pointer-events: none;
}
.steps-svg .trk { stroke: currentColor; stroke-width: 1; opacity: .13; }
.steps-svg .prg { stroke: currentColor; stroke-width: 1; opacity: .6; }
.steps-svg .nd {
  fill: var(--ink); stroke: currentColor; stroke-width: 1;
  opacity: .25;
  transform-box: fill-box; transform-origin: center;
  transition: opacity .4s var(--ease), r .4s var(--ease);
}
.paper .steps-svg .nd, .paper-2 .steps-svg .nd { fill: var(--paper-2); }
.steps-svg .nd.lit { opacity: 1; }
.steps-svg .nd-core {
  fill: currentColor; opacity: 0;
  transition: opacity .45s var(--ease);
}
.steps-svg .nd-core.lit { opacity: 1; }
@media (max-width: 799px) { .steps-svg { display: none; } }

/* Word-by-word illumination ----------------------------------------------- */
.il-w {
  color: var(--il-dim, rgba(228,225,218,.56));
  transition: color .45s var(--ease);
}
.il-w.lit { color: inherit; }
.paper .il-w, .paper-2 .il-w { --il-dim: rgba(58,58,64,.74); }
@media (prefers-reduced-motion: reduce) { .il-w { color: inherit !important; } }

/* Split-flap odometer ------------------------------------------------------ */
.odo { display: inline-flex; vertical-align: baseline; }
.odo__d {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}
.odo__r {
  display: block;
  transform: translateY(0);
  transition: transform 1.5s cubic-bezier(.16,.84,.24,1);
}
.odo__r span { display: block; height: 1em; line-height: 1; }
.odo__s { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .odo__r { transition: none; } }

/* Hero scrim, keeps type crisp over the live metal ------------------------ */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  background:
    linear-gradient(to bottom,
      rgba(10,10,11,.10) 0%,
      rgba(10,10,11,.28) 38%,
      rgba(10,10,11,.72) 82%,
      rgba(10,10,11,.92) 100%),
    linear-gradient(to right,
      rgba(10,10,11,.78) 0%,
      rgba(10,10,11,.42) 34%,
      rgba(10,10,11,.06) 66%,
      transparent 100%);
}
.hero.gl-live::after { opacity: 1; }

/* Ghost button needs a floor when the metal runs bright behind it */
.hero .btn--ghost {
  background: rgba(10,10,11,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(244,242,237,.34);
}
.hero .btn--ghost:hover { border-color: var(--bone); background: rgba(10,10,11,.6); }

/* Scroll cue and eyebrow sit over the brightest zone on small screens */
@media (max-width: 899px) {
  .hero::after {
    background:
      linear-gradient(to bottom,
        rgba(10,10,11,.34) 0%,
        rgba(10,10,11,.46) 40%,
        rgba(10,10,11,.86) 100%);
  }
}

/* Rail progress indicator -------------------------------------------------- */
.hpin__bar {
  margin-top: 1.5rem;
  height: 1px; width: min(240px, 40%);
  background: rgba(244,242,237,.16);
  overflow: hidden;
}
.hpin__bar i {
  display: block; height: 100%; width: 100%;
  background: var(--bone);
  transform: scaleX(var(--hp, 0)); transform-origin: 0 50%;
}
.hpin__hint { transition: opacity .5s var(--ease); }
.hpin.moving .hpin__hint { opacity: 0; }
@media (max-width: 899px) { .hpin__bar { display: none; } }

/* Director portrait -------------------------------------------------------- */
.media { background: var(--paper-2); }
.portrait { margin: 0; }
.media img { filter: grayscale(1) contrast(1.02); }
.media__cap {
  margin-top: .9rem;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
}

/* Footer column headings, h2 for correct document outline ------------------ */
.ftr .ftr__h {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 1rem; font-weight: 600; line-height: 1.3;
}

/* Inline contact links get a comfortable tap target ------------------------ */
.ftr ul a, .stack a.txtlink { display: inline-block; padding-block: .18rem; }