/* ============================================================
   Kameron Frisby — personal brand site
   Design tokens extracted from the Claude Design source.
   ============================================================ */

:root {
  /* Surface ramp — near-black, warm-neutral */
  --bg:        #050506;
  --surface-1: #08080A;
  --surface-2: #0A0A0C;
  --surface-3: #0C0C0E;
  --surface-4: #0E0E11;
  --surface-5: #101013;

  /* Ink */
  --ink:      #F2F1EE;
  --ink-80:   rgba(242, 241, 238, .80);
  --ink-72:   rgba(242, 241, 238, .72);
  --ink-62:   rgba(242, 241, 238, .62);
  --ink-58:   rgba(242, 241, 238, .58);
  --ink-50:   rgba(242, 241, 238, .50);
  --ink-42:   rgba(242, 241, 238, .42);
  --ink-34:   rgba(242, 241, 238, .34);

  /* Accent — champagne gold */
  --gold:     #D9BE86;
  --gold-lit: #EBD9AE;
  --gold-40:  rgba(217, 190, 134, .40);

  /* Hairlines */
  --line:      rgba(255, 255, 255, .07);
  --line-soft: rgba(255, 255, 255, .10);
  --line-mid:  rgba(255, 255, 255, .14);
  --line-hi:   rgba(255, 255, 255, .18);
  --line-max:  rgba(255, 255, 255, .22);

  /* Type */
  --display: 'Archivo Black', system-ui, sans-serif;
  --body:    Manrope, system-ui, sans-serif;
  --script:  'Mrs Saint Delafield', cursive;
  --mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Geometry */
  --wrap:  1280px;
  --gutter: 40px;
  --r-lg: 34px;
  --r-md: 30px;
  --r-sm: 22px;
  --r-xs: 18px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 76px;
}

/* ── Reset ──────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: var(--ink); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--gold); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; color: var(--bg); }

/* Film grain — sits above everything, ignores pointer events */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background: 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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Motion primitives ──────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: none; }
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes glowPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .90; }
}

[data-stagger] > * {
  opacity: 0;
  animation: heroRise .95s var(--ease) forwards;
}
[data-stagger] > *:nth-child(1) { animation-delay: .08s; }
[data-stagger] > *:nth-child(2) { animation-delay: .18s; }
[data-stagger] > *:nth-child(3) { animation-delay: .30s; }
[data-stagger] > *:nth-child(4) { animation-delay: .44s; }
[data-stagger] > *:nth-child(5) { animation-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal]      { opacity: 1; transform: none; transition: none; }
  [data-stagger] > * { opacity: 1; animation: none; }
  .marquee__track    { animation: none; }
  .hero__glow        { animation: none; }
}

/* ── Scroll progress ────────────────────────────────────── */

.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-lit));
}

/* ── Nav ────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  background: rgba(5, 5, 6, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__logo {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav__logo span { color: var(--gold); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
}
.nav__links > a:not(.btn) { color: var(--ink-62); white-space: nowrap; }
.nav__links > a:not(.btn):hover { color: var(--gold); }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  padding: 0;
  place-items: center;
  gap: 5px;
  flex-direction: column;
}
.nav__toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s ease;
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
  position: sticky;
  top: var(--nav-h);
  z-index: 39;
  display: flex;
  flex-direction: column;
  padding: 10px var(--gutter) 22px;
  background: rgba(5, 5, 6, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
}
.mobile-menu a:last-child { border-bottom: 0; color: var(--gold); }

/* ── Buttons ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.btn--ghost {
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 11px;
  letter-spacing: .06em;
}
.btn--ghost:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}

.btn--solid {
  padding: 16px 30px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12.5px;
}
.btn--solid:hover { background: var(--gold); color: var(--bg); }

.btn--outline {
  padding: 16px 30px;
  border: 1px solid var(--line-hi);
  font-size: 12.5px;
}
.btn--outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Layout ─────────────────────────────────────────────── */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 120px;
}

.section { padding-top: 130px; }
.section--center { text-align: center; }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.section__intro {
  max-width: 400px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-62);
  text-wrap: pretty;
}

/* ── Type helpers ───────────────────────────────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.eyebrow--lg {
  gap: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-80);
}
.eyebrow--center { justify-content: center; }
.eyebrow .wave { font-size: 20px; }

.rule {
  display: block;
  flex: none;
  width: 18px;
  height: 1px;
  background: var(--gold);
}
.eyebrow--lg .rule { width: 26px; }

.h2 {
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.section--center .h2 { margin-top: 0; }
.h2--sm { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; }
.h2--lg { font-size: clamp(34px, 5vw, 64px); line-height: 1.02; margin-top: 20px; }

#products .h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; }
#stories  .h2 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.03; }
#method   .h2 { font-size: clamp(30px, 3.6vw, 46px); }

.h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.underline {
  height: 2px;
  width: 150px;
  margin-top: 22px;
  background: var(--line-max);
}
.underline--sm { width: 110px; margin: 20px 0 24px; }
.underline--center { width: 90px; margin: 26px auto 0; background: rgba(255, 255, 255, .24); }
#stories .underline { width: 130px; margin: 22px 0 26px; }

.signature {
  margin-top: 44px;
  font-family: var(--script);
  font-size: 62px;
  line-height: 1;
  color: var(--ink);
}
.signature--sm { margin-top: 52px; font-size: 56px; }
.signature__rule {
  width: 220px;
  height: 1px;
  margin-top: 6px;
  background: var(--line-hi);
}

/* ── Image slots ────────────────────────────────────────── */
/* An <img> layered over a labelled placeholder. If the image is
   missing or fails to load, JS flags .is-empty and the caption
   shows through — so the page never renders a broken frame.     */

.slot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--surface-4);
}
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 1.1s var(--ease);
}
.slot figcaption {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  border: 1px dashed var(--line-soft);
  border-radius: inherit;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-34);
}
.slot.is-empty img { display: none; }
.slot.is-empty figcaption { display: grid; }

.slot--contain img { object-fit: contain; object-position: bottom center; }
.slot--flush { border-radius: 0; }

/* Photographs cropped from a wider frame — bias the crop upward so the
   face stays in shot when a portrait source fills a landscape slot. */
.slot--face img { object-position: center 28%; }

/* Per-photo focal points. These are measured against the actual crop each
   slot produces, not guessed: the default centre cut the cap off the
   Mission portrait and buried the face in the marina shot. */
.slot[data-slot="mission"] img { object-position: center 12%; }
.slot[data-slot="vision"]  img { object-position: center 22%; }
.slot[data-slot="gal-2"]   img { object-position: center 74%; }

/* The hero frame — radius and clipping — lives on .hero__photo, so the
   slot just fills it. */
.slot--framed { border-radius: 24px; }
.slot--circle {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
}
.slot--circle figcaption { font-size: 8px; letter-spacing: .06em; padding: 4px; }

/* ── Hero ───────────────────────────────────────────────── */

.hero { padding-top: 110px; }

.hero__card {
  position: relative;
  padding: 96px 64px 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(217, 190, 134, .08), transparent 52%),
    linear-gradient(180deg, var(--surface-3), var(--surface-1));
}

/* Height is derived from top + bottom, not fixed — the frame stretches
   with the copy column beside it, which is what keeps the two sides of
   the hero card optically aligned. */
.hero__photo {
  position: absolute;
  right: 64px;
  top: 64px;
  bottom: 118px;
  width: min(44%, 500px);
  border-radius: 24px;
  overflow: hidden;
}
/* Clipped by the frame above, so this reads as an inner glow behind the
   portrait rather than an outer halo. */
.hero__glow {
  position: absolute;
  inset: -8%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(217, 190, 134, .16), transparent 72%);
  filter: blur(12px);
  pointer-events: none;
  animation: glowPulse 7s ease-in-out infinite;
}

.hero__copy {
  position: relative;
  max-width: 46%;
  padding-bottom: 130px;
}
.hero__title {
  margin: 18px 0 22px;
  font-family: var(--display);
  /* The design caps this at 104px, but the card stops growing at 1200px
     while 7vw does not — past ~1490px "KAMERON" slid under the photo,
     which now has an opaque frame rather than being a floating cut-out.
     96px is the largest size whose ink still clears the photo edge. */
  font-size: clamp(58px, 7vw, 96px);
  line-height: .94;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.hero__title span { display: block; }
.hero__lede {
  max-width: 440px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-62);
  text-wrap: pretty;
}

.social {
  position: absolute;
  right: var(--gutter);
  top: 44%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--bg);
  font-size: 13px;
  font-weight: 700;
  transition: background .3s ease;
}
.social a:hover { background: var(--gold); color: var(--bg); }

.logos {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.logos__item {
  display: grid;
  place-items: center;
  height: 44px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--ink-34);
}

/* ── Stats ──────────────────────────────────────────────── */

/* Three stats. The 1px gaps show the container background as hairlines, so
   the column count has to match the cell count or the empty track renders
   as a bordered void. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 26px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
.stats__cell { padding: 30px 28px; background: var(--surface-1); }
.stats__num {
  font-family: var(--display);
  font-size: 40px;
  letter-spacing: -.02em;
}
.stats__label {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* ── Marquee ────────────────────────────────────────────── */

.marquee {
  margin-top: 110px;
  padding: 10px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
.marquee__line {
  flex: none;
  padding-right: 28px;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 64px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 241, 238, .28);
}
.marquee__line i {
  font-style: normal;
  color: var(--gold);
  -webkit-text-stroke: 0;
}

/* ── Product cards ──────────────────────────────────────── */

.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 52px;
}

.card {
  padding: 22px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 26px;
  transition: transform .55s var(--ease), border-color .3s ease, box-shadow .55s ease;
}
.card:hover {
  transform: translateY(-7px);
  border-color: rgba(217, 190, 134, .45);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .85);
}
.card__media {
  position: relative;
  height: 250px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-5);
}
.card:hover .card__media img { transform: scale(1.045); }

.card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
}
.card__body {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-62);
  text-wrap: pretty;
}

.pill {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 241, 238, .55);
}
.pill--live { color: var(--gold); border-color: var(--gold-40); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.tags li {
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--ink-50);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.arrow {
  display: inline-block;
  color: var(--gold);
  transition: transform .35s var(--ease);
}
.link-arrow:hover .arrow { transform: translate(4px, -4px); }

/* ── Success stories ────────────────────────────────────── */

.stories {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: start;
}
.stories__aside { position: sticky; top: 110px; }
.stories__intro {
  max-width: 340px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-62);
  text-wrap: pretty;
}
.stories__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.story {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .3s ease;
}
.story:hover { border-color: rgba(217, 190, 134, .4); }
.story__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 14px;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.story:hover .story__num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
.story__title {
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: 17px;
  text-transform: uppercase;
}
.story__meta { font-size: 13px; font-weight: 600; color: var(--ink-72); }
.story__date {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-42);
}
.story__body {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink-62);
  text-wrap: pretty;
}

/* ── Method ─────────────────────────────────────────────── */

.panel {
  padding: 56px 56px 60px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.panel .section__intro { max-width: 380px; }

.method {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 44px;
  background: var(--line);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.method__step { padding: 32px 26px 36px; background: var(--surface-4); }
.method__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold-40);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 13px;
  color: var(--gold);
}
.method__title {
  margin: 22px 0 10px;
  font-family: var(--display);
  font-size: 15px;
  text-transform: uppercase;
}
.method__body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-58);
  text-wrap: pretty;
}

/* ── About ──────────────────────────────────────────────── */

.about {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.about__photo {
  position: relative;
  height: 560px;
  background: var(--surface-4);
}
.about__copy { padding: 56px 52px; }
.about__lede {
  max-width: 520px;
  margin: 0 0 34px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-62);
  text-wrap: pretty;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.timeline li {
  display: flex;
  gap: 18px;
  align-items: center;
}
.timeline__year {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 12px;
  color: var(--gold);
}
.timeline__title {
  font-family: var(--display);
  font-size: 14px;
  text-transform: uppercase;
}
.timeline__body {
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--ink-58);
}

/* ── Mission / Vision ───────────────────────────────────── */

.mv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
  margin-top: 66px;
  text-align: left;
}
.mv__title {
  margin-bottom: 16px;
  font-family: var(--display);
  font-size: 30px;
  text-transform: uppercase;
}
.mv__body {
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-62);
  text-wrap: pretty;
}
.mv__media {
  position: relative;
  height: 330px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-4);
}

/* ── Quotes ─────────────────────────────────────────────── */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}
.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 32px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.quote > p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-80);
  text-wrap: pretty;
}
.quote footer {
  display: flex;
  align-items: center;
  gap: 14px;
}
.quote__name { font-size: 13.5px; font-weight: 700; }
.quote__role { margin-top: 2px; font-size: 12.5px; color: var(--ink-50); }

/* ── Gallery ────────────────────────────────────────────── */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 210px;
  gap: 16px;
  margin-top: 52px;
  text-align: left;
}
.gallery__cell {
  position: relative;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--surface-4);
}
.gallery__cell--wide { grid-column: span 2; }
.gallery__cell--tall { grid-row: span 2; }

.gallery__stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
/* This card leads with words instead of a figure, so the title has to carry
   the weight the number used to. */
.gallery__stat--quiet .gallery__title {
  margin-top: 0;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.gallery__stat--quiet .gallery__body { margin-top: 12px; }

.gallery__num {
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: -.02em;
}
.gallery__title {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 13px;
  text-transform: uppercase;
}
.gallery__body {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(242, 241, 238, .55);
  text-wrap: pretty;
}

/* ── Contact ────────────────────────────────────────────── */

.cta {
  position: relative;
  overflow: hidden;
  padding: 76px 56px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-md);
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(217, 190, 134, .10), transparent 60%),
    linear-gradient(180deg, var(--surface-4), var(--surface-1));
}
.cta__body {
  max-width: 520px;
  margin: 24px auto 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-62);
  text-wrap: pretty;
}
.cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* ── Footer ─────────────────────────────────────────────── */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 34px var(--gutter);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: rgba(242, 241, 238, .45);
}
.footer__links { display: flex; gap: 22px; }
.footer__links a { color: inherit; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1180px) {
  .hero__photo {
    /* `relative`, not `static` — the .slot inside is absolutely positioned
       and must keep this element as its containing block, or it expands to
       fill the whole hero card and covers the copy. */
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 420px;
    margin-top: 28px;
  }
  .hero__copy { max-width: 100%; padding-bottom: 0; order: -1; }
  .hero__card { display: flex; flex-direction: column; padding: 56px 34px 34px; }
  /* Full-bleed photo: pull the glow in so it can't push the page sideways. */
  .hero__glow { inset: -6% 0; }
  .social {
    position: static;
    flex-direction: row;
    margin-top: 26px;
  }
  .logos { order: 1; }
}

@media (max-width: 1040px) {
  .stories, .about { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .stories__aside { position: static; }
  .method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__photo { height: 400px; }
  .panel { padding: 40px 32px 44px; }

  .nav__links > a:not(.btn) { display: none; }
  .nav__toggle { display: flex; }

  /* The 44px toggle appears here and becomes the tallest thing in the bar,
     so --nav-h has to grow with it — the sticky mobile menu and
     scroll-padding-top both key off this value. */
  :root { --nav-h: 82px; }
}

@media (max-width: 900px) {
  :root { --gutter: 22px; }

  .hero { padding-top: 80px; }
  /* The source clamp() floors at 58px, which overflows a phone. Scale with
     the viewport instead — meets 58px exactly at this breakpoint. */
  /* 12.5vw still ran "KAMERON" past its column at 320px — Archivo Black is
     wide. 11vw fits the longest word at every width down to 320. */
  .hero__title { font-size: clamp(34px, 11vw, 58px); }
  .stats, .logos, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Odd count in a two-column grid — let the last one take the full row
     rather than leaving a half-width empty cell beside it. */
  .stats__cell:last-child { grid-column: 1 / -1; }
  .products, .quotes, .mv, .method { grid-template-columns: minmax(0, 1fr); }
  /* Design drops every span at this width so the cells tile evenly. */
  .gallery { grid-auto-rows: 220px; }
  .gallery > * { grid-column: auto; grid-row: auto; }
  .gallery__stat { min-height: 220px; }

  .section { padding-top: 92px; }
  .marquee { margin-top: 84px; }
  .marquee__line { font-size: 42px; }
  .mv { gap: 34px; margin-top: 44px; }
  .about__copy { padding: 40px 26px; }
  .cta { padding: 56px 26px; }
  .signature { font-size: 52px; }
}

@media (max-width: 560px) {
  .card__media { height: 200px; }
  .story { flex-direction: column; gap: 14px; padding: 24px; }
  .footer { flex-direction: column; align-items: flex-start; }
  .marquee__line { font-size: 32px; }
  .cta__actions .btn { width: 100%; justify-content: center; }
}

/* ── Touch targets ──────────────────────────────────────────
   Below the mobile-nav breakpoint every control needs ~44px of
   tappable area. Visual size is unchanged — the extra area comes from
   padding, or from a pseudo-element that grows the hit box without
   disturbing layout.                                                 */

@media (max-width: 1040px) {
  .link-arrow,
  .footer__links a,
  .nav__logo {
    position: relative;
  }
  .link-arrow::after,
  .footer__links a::after,
  .nav__logo::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .social a { width: 44px; height: 44px; }
  .btn--ghost { padding: 13px 20px; }
}

/* Long venture names plus a status pill overflow a narrow card and
   clipped the pill at 320px. Let the row wrap instead. */
@media (max-width: 560px) {
  .card__title { flex-wrap: wrap; gap: 10px 16px; }

  /* The script face carries wide flourishes, so its ink box runs past the
     column well before the glyphs look large. */
  .signature      { font-size: 44px; }
  .signature--sm  { font-size: 38px; }
  .signature__rule { width: min(220px, 100%); }

  /* Two columns leave this card ~72px of text width at 320px, which is
     narrower than a single long word. Give it the full row. */
  .gallery__stat { grid-column: 1 / -1; }

  /* The email address is the longest string on the page; tracked-out
     uppercase pushed it past a full-width button. */
  .btn--solid,
  .btn--outline { font-size: 12px; letter-spacing: .05em; padding: 15px 18px; }
  .cta__actions .btn { overflow-wrap: anywhere; }
}

/* ── Small type on phones ───────────────────────────────────
   The editorial sizes hold up on a desktop monitor but several labels
   sit at 9.5–12.5px, which is below what's comfortable held at arm's
   length. Raised here only — the desktop scale is unchanged, and the
   relative hierarchy between these elements is preserved.             */

@media (max-width: 900px) {
  .eyebrow        { font-size: 12.5px; }
  .stats__label   { font-size: 13px; }
  /* "60GB+" is 140px at the design's 40px against a 97px cell once the grid
     drops to two columns. 8vw keeps the widest value inside the cell at every
     width down to 320px, and clamps back to 40px before the desktop layout. */
  .stats__num     { font-size: clamp(24px, 8vw, 40px); }
  .stats__cell    { padding: 26px 20px; }
  /* Tighter tracking buys back the width the larger size costs, so the
     longest venture name still fits its cell. */
  .logos__item    { font-size: 12px; letter-spacing: .06em; }

  .pill           { font-size: 12px; }
  .tags li        { font-size: 12px; }
  .link-arrow     { font-size: 13px; }

  .story__meta    { font-size: 13.5px; }
  .story__date    { font-size: 13px; }

  .quote__name    { font-size: 14px; }
  .quote__role    { font-size: 13px; }

  .gallery__body  { font-size: 14px; }
  .timeline__body { font-size: 14px; }

  .btn--ghost                 { font-size: 12px; }
  .btn--solid, .btn--outline  { font-size: 13.5px; }

  .footer         { font-size: 13.5px; }
  .nav__links     { font-size: 14px; }

  /* Placeholder captions — only visible on unfilled slots, but they're
     still instructions someone has to read. */
  .slot figcaption         { font-size: 12px; }
  .slot--circle figcaption { font-size: 12px; letter-spacing: 0; padding: 2px; }
}