/* ==========================================================================
   VISTO — site styles

   Direction: the brand's own palette. A near-black ground, ivory type, and
   champagne gold held back so it keeps its value. Display type is a high-
   contrast serif in the spirit of the V; small labels are tracked capitals
   in the spirit of the lockup's tagline. The aperture mark drives the one
   signature motion, and the photography carries everything else.

   Palette (from the VISTO logo files)
     Black      #0A0A0A  the ground (the logo's charcoal)
     Black 2    #141414  raised surfaces (the logo's flat black)
     Ivory      #F4F1EA  type on black                       17.6:1 on black
     Ivory 2    #A9A397  secondary type on black              7.9:1 on black
     Gold       #C9A227  the mark and earned moments          8.2:1 on black
     Gold hi/lo #F7E2A6 / #A8762C  the mark's screen gradient only
     Ink        #141414  type on ivory bands                 16.3:1 on ivory
     Ink 2      #55514A  secondary type on ivory              7.0:1 on ivory

   Where gold appears, and nowhere else
     1. The mark (header, hero title page, footer lockup, brief card)
     2. The primary action ("Start a project", "Send the brief")
     3. The current section tab, and chips a visitor has chosen
     4. Keyboard focus on dark, section numerals, the process line
     Gold is never body text, never a large fill, and never sits on ivory
     (2.1:1 there). On ivory bands the accent is ink.
   ========================================================================== */

:root {
  --black: #0a0a0a;
  --black-2: #141414;
  --black-3: #1b1a18;
  --ivory: #f4f1ea;
  --ivory-2: #a9a397;
  --gold: #c9a227;
  --gold-hi: #f7e2a6;
  --gold-lo: #a8762c;
  --ink: #141414;
  --ink-2: #55514a;

  /* Section theme. Dark by default; .section--ivory flips it. */
  --bg: var(--black);
  --fg: var(--ivory);
  --fg-2: var(--ivory-2);
  --rule: rgba(244, 241, 234, 0.13);
  --rule-strong: rgba(244, 241, 234, 0.3);
  --accent: var(--gold);
  --focus-c: var(--gold);

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 88rem;
  --measure: 36rem;
  --band: clamp(4rem, 9vw, 8rem);
  --header-h: 7.25rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);

  color-scheme: dark;
}
@media (min-width: 60rem) {
  :root { --header-h: 5.25rem; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  background: var(--black);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

[hidden] { display: none !important; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
p { margin: 0; }
a { color: inherit; }

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

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

/* ----- Shared primitives ------------------------------------------------ */

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

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

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 400;
  background: var(--gold);
  color: var(--black);
  padding: 0.75rem 1.125rem;
  font-weight: 650;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Display type: the serif, set large and close. */
.d-l, .d-m, .hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}
.d-l { font-size: clamp(2.6rem, 6.4vw, 5.5rem); line-height: 0.98; }
.d-m { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; }

/* Tracked capitals: the lockup's tagline voice. */
.label {
  font-family: var(--sans);
  font-variation-settings: "wdth" 112;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  max-width: 42ch;
  color: var(--fg-2);
}

.body-copy { max-width: var(--measure); color: var(--fg-2); }

.hint {
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
}

/* Buttons: a pill, echoing the mark's ring. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.6rem;
  font-family: var(--sans);
  font-variation-settings: "wdth" 112;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--black); }
.btn--gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn--ghost:hover { border-color: var(--fg); background: rgba(244, 241, 234, 0.06); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* A text link with a quiet rule that lights on hover. */
.tlink {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--rule-strong);
  transition: box-shadow 0.25s var(--ease), color 0.25s var(--ease);
}
.tlink:hover { box-shadow: inset 0 -1px 0 var(--accent); }

/* The mark, wherever it appears */
.mark { display: block; overflow: visible; }
.mark { transition: transform 0.9s var(--ease); }

/* ----- Header ----------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 10, 10, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.site-header[data-over="dark"] {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.header-in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand . cta" "tabs tabs tabs";
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 0.625rem;
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  border-radius: 50%;
}
.brand-mark,
.brand img { width: 2.75rem; height: 2.75rem; }
.brand:hover .mark { transform: rotate(-12deg); }

.header-cta { grid-area: cta; min-height: 2.75rem; padding: 0 1.15rem; font-size: 0.75rem; }

/* Section tabs: a segmented control with a gold-edged marker that follows
   the pointer and settles back on the current page. */
.tabs {
  grid-area: tabs;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.4);
  isolation: isolate;
}
.tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-variation-settings: "wdth" 106;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  text-decoration: none;
  color: var(--ivory);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.tab:hover { color: var(--gold-hi); }
.tab[aria-current="page"] { color: var(--gold); background: rgba(201, 162, 39, 0.12); box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.65); }
/* With the script running, the marker carries the state instead. */
.tabs.has-ink .tab[aria-current="page"] { background: transparent; box-shadow: none; }
.tabs-ink {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.12);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.65);
  opacity: 0;
  transform: translateX(var(--ink-x, 0));
  width: var(--ink-w, 0);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity 0.3s var(--ease);
  pointer-events: none;
}
.tabs.has-ink .tabs-ink { opacity: 1; }

@media (min-width: 26rem) {
  .tab { font-size: 0.75rem; letter-spacing: 0.1em; }
}
@media (min-width: 60rem) {
  .header-in {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "brand tabs cta";
    padding-block: 0.75rem;
  }
  .header-cta { justify-self: end; font-size: 0.8125rem; padding: 0 1.4rem; }
  .brand-mark, .brand img { width: 3.25rem; height: 3.25rem; }
  .tabs { display: flex; gap: 2px; }
  .tab { padding: 0 1.5rem; font-size: 0.8125rem; letter-spacing: 0.14em; }
}

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

.hero {
  position: relative;
  background: var(--black);
  min-height: min(94svh, 58rem);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  margin-top: calc(var(--header-h) * -1);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-pos, center);
}
.hero-media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.hero-media video.is-on { opacity: 1; }

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 10, 10, 0.78) 0, rgba(10, 10, 10, 0.36) 6rem, rgba(10, 10, 10, 0) 12rem),
    linear-gradient(to right, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.8) 30%, rgba(10, 10, 10, 0.4) 58%, rgba(10, 10, 10, 0.06) 100%),
    linear-gradient(to top, rgba(10, 10, 10, 0.55) 0, rgba(10, 10, 10, 0) 40%);
}
@media (max-width: 47.99rem) {
  .hero-scrim {
    background:
      linear-gradient(to bottom, rgba(10, 10, 10, 0.82) 0, rgba(10, 10, 10, 0.4) 8rem, rgba(10, 10, 10, 0) 13rem),
      linear-gradient(to top, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.78) 36%, rgba(10, 10, 10, 0.3) 66%, rgba(10, 10, 10, 0.05) 100%);
  }
}

/* Title page: no picture yet, so the mark holds the frame. */
.hero--plain { min-height: min(86svh, 50rem); align-items: center; }
.hero-emblem {
  position: absolute;
  right: calc(var(--gutter) - 2vw);
  top: 50%;
  width: min(48vw, 36rem);
  transform: translateY(-46%);
  pointer-events: none;
}
.hero-emblem .mark { width: 100%; height: auto; }
@media (max-width: 47.99rem) {
  .hero-emblem { right: -18vw; top: calc(var(--header-h) + 1rem); width: 78vw; transform: none; opacity: 0.32; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-emblem .mark { animation: emblem-turn 2.4s var(--ease) 0.2s both; }
  @keyframes emblem-turn { from { transform: rotate(-60deg); opacity: 0; } to { transform: none; opacity: 1; } }
}

.hero-in { position: relative; z-index: 2; width: 100%; }
.hero-copy { max-width: 48rem; }
.hero-title {
  font-size: clamp(2.9rem, 7vw, 6.4rem);
  line-height: 0.96;
  margin: 0 0 1.25rem;
  max-width: 13ch;
}
.hero-sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  max-width: 40ch;
  color: var(--ivory);
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero-replay {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 6vw, 5rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-replay:hover { border-color: var(--gold); color: var(--gold-hi); }
.hero-replay svg { width: 15px; height: 15px; }
@media (max-width: 47.99rem) {
  .hero-replay { bottom: auto; top: calc(var(--header-h) + 1rem); }
}

/* ----- The opening ------------------------------------------------------ */
/* The frame starts behind the mark's hexagon, then the aperture turns and
   widens until the picture is clear. Pure CSS once started, so it always
   finishes even if the script never runs; the script only lets a visitor
   skip it and records that it has been seen. */

.iris { display: none; }
.iris-on .iris {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  cursor: pointer;
  animation: iris-done 0.35s linear 2.05s forwards;
}
.iris-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  transform: scale(0.42);
  animation: iris-open 1.2s var(--ease-io) 0.95s forwards;
}
.iris-shade { fill: var(--black); }
.iris-lines { opacity: 0; animation: iris-in 0.6s var(--ease) 0.1s forwards, iris-out 0.4s ease 1.5s forwards; }
.iris-v { opacity: 0; animation: iris-in 0.5s var(--ease) 0.3s forwards, iris-out 0.25s ease 0.95s forwards; }
@keyframes iris-open { to { transform: scale(7.5) rotate(-60deg); } }
@keyframes iris-in { to { opacity: 1; } }
@keyframes iris-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes iris-done { to { opacity: 0; visibility: hidden; } }

.iris-on .hero-media img,
.iris-on .hero-media video { animation: iris-settle 2.4s var(--ease) 0.8s both; }
.iris-on .hero-emblem .mark { animation-delay: 1.6s; }
.iris-on .hero-copy > * { animation: iris-rise 0.9s var(--ease) both; }
.iris-on .hero-copy > :nth-child(1) { animation-delay: 1.75s; }
.iris-on .hero-copy > :nth-child(2) { animation-delay: 1.88s; }
.iris-on .hero-copy > :nth-child(3) { animation-delay: 2s; }
.iris-on .site-header { animation: iris-fade 0.7s ease 1.9s both; }
@keyframes iris-settle { from { transform: scale(1.14); } to { transform: none; } }
@keyframes iris-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes iris-fade { from { opacity: 0; } to { opacity: 1; } }

/* ----- Sections --------------------------------------------------------- */

.section {
  padding-block: var(--band);
  background: var(--bg);
  color: var(--fg);
}
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--raised { --bg: var(--black-2); }
.section--ivory {
  --bg: var(--ivory);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --rule: rgba(20, 20, 20, 0.14);
  --rule-strong: rgba(20, 20, 20, 0.34);
  --accent: var(--ink);
  --focus-c: var(--ink);
  color-scheme: light;
}
.section--ivory ::selection { background: var(--ink); color: var(--ivory); }

/* Section heads: heading and lede, no numbering or eyebrow. */
.section-head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
}
@media (min-width: 56rem) {
  .section-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; column-gap: 4rem; }
  .section-head .lede { justify-self: end; }
}

/* Statement */
.section--statement { padding-top: clamp(4.5rem, 10vw, 9rem); }
.statement-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.statement-grid .d-l { max-width: 15ch; }
.statement-aside { display: grid; gap: 1.25rem; align-content: start; }
.statement-aside p { color: var(--fg-2); max-width: 38ch; }
@media (min-width: 56rem) {
  .statement-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); }
}

/* ----- Work ------------------------------------------------------------- */

.work-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
}
.work-entry { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.work-entry--lead .work-figure { aspect-ratio: 16 / 9; }
.work-entry--pair { gap: clamp(1.5rem, 4vw, 3rem); }
.work-entry--pair .work-figure { aspect-ratio: 4 / 3; }
@media (min-width: 56rem) {
  .work-entry--lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .work-entry--lead .work-figure { grid-column: 1 / -1; }
  .work-entry--lead .work-body { grid-column: 2; }
  .work-entry--pair { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  .work-entry--pair.is-flipped .work-figure { order: 2; }
}

.work-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--black-2);
  border-radius: 4px;
}
.work-figure img,
.work-figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-pos, center);
}
.work-open {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.work-open:focus-visible { outline-offset: -4px; }
.work-open::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0);
  transition: background-color 0.35s var(--ease);
}
.work-open:hover::after { background: rgba(10, 10, 10, 0.18); }

.work-count,
.work-play {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(10, 10, 10, 0.62);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
}
.work-count { right: 0.875rem; bottom: 0.875rem; }
.work-play {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  padding: 0;
  border: 1px solid var(--gold);
}
.work-play svg { width: 18px; height: 18px; color: var(--gold); }

.work-body { display: grid; gap: 0.75rem; align-content: start; }
.work-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
}
.work-sub { font-size: 0.9375rem; color: var(--fg-2); }
.work-caption { max-width: 48ch; color: var(--fg-2); }
.work-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.25rem; }
.tag,
.badge {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}
.tag { border: 1px solid rgba(201, 162, 39, 0.6); color: var(--gold); }
.badge { background: var(--ivory); color: var(--black); }
.work-actions { margin-top: 0.25rem; }

.work-empty {
  border-left: 1px solid var(--gold);
  padding: 0.25rem 0 0.25rem 1rem;
  display: grid;
  gap: 0.4rem;
  max-width: 44rem;
}
.work-empty p:last-child { color: var(--fg-2); font-size: 0.9375rem; }

/* A pointer-following lens over the work, on devices with a fine pointer. */
.lens {
  position: fixed;
  left: 0; top: 0;
  z-index: 70;
  width: 5.5rem; height: 5.5rem;
  margin: -2.75rem 0 0 -2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(10, 10, 10, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--gold-hi);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--lx, -100px), var(--ly, -100px), 0) scale(0.6);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.lens.is-on { opacity: 1; transform: translate3d(var(--lx), var(--ly), 0) scale(1); }
.has-lens [data-cursor] { cursor: none; }

/* ----- Live concept frame ---------------------------------------------- */

.live { margin-top: clamp(4.5rem, 9vw, 8rem); display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.live-head { display: grid; gap: 1rem 3rem; align-items: end; }
.live-say { color: var(--fg-2); max-width: 46ch; }
.live-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
@media (min-width: 56rem) {
  .live-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .live-controls { grid-column: 1 / -1; }
}

.seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
}
.seg-btn {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.seg-btn[aria-pressed="true"] { background: var(--gold); color: var(--black); }
.seg-btn:not([aria-pressed="true"]):hover { color: var(--gold-hi); }

.live-frame {
  margin-inline: auto;
  width: 100%;
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  background: var(--black-2);
  overflow: hidden;
  transition: width 0.6s var(--ease), border-radius 0.6s var(--ease), padding 0.6s var(--ease);
}
.live-chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.5rem;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--rule);
}
.live-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(244, 241, 234, 0.18); }
.live-url {
  margin-left: 0.75rem;
  flex: 1;
  max-width: 26rem;
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  background: rgba(244, 241, 234, 0.06);
  font-size: 0.8125rem;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-view {
  position: relative;
  height: var(--live-h, min(78vh, 46rem));
  overflow: hidden;
  background: #fff;
}
.live-view iframe {
  position: absolute;
  left: 0; top: 0;
  width: var(--live-w, 100%);
  height: var(--live-ih, 100%);
  border: 0;
  transform: scale(var(--live-s, 1));
  transform-origin: 0 0;
  background: #fff;
}
.live-frame[data-mode="phone"] {
  width: min(100%, calc(390px * var(--live-s, 1) + 24px));
  padding: 12px;
  border-radius: 46px;
  background: #050505;
  border-color: rgba(244, 241, 234, 0.22);
}
.live-frame[data-mode="phone"] .live-chrome { display: none; }
.live-frame[data-mode="phone"] .live-view { border-radius: 34px; }

/* ----- Services: rows, not cards ---------------------------------------- */

.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  gap: 0.75rem 3rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.row-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
}
.row-text { color: var(--fg-2); max-width: 54ch; }
.row-figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(20, 20, 20, 0.06); }
.row-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 56rem) {
  .row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .row--media { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.8fr); }
}

.offer-grid { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.offer {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--rule);
}
.offer-n {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--fg-2);
  margin-bottom: 0.5rem;
}
.offer-figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.offer-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
  .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .offer { padding-inline: 0 clamp(1.5rem, 3vw, 2.5rem); }
  .offer:not(:nth-child(3n + 1)) { padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--rule); }
}

/* ----- Process: a real sequence, with a line that fills as you read ----- */

.steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.75rem;
  counter-reset: step;
  display: grid;
}
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--rule);
}
.steps::after { background: var(--gold); transform-origin: top; transform: scaleY(1); }
.step {
  counter-increment: step;
  display: grid;
  gap: 0.5rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.step:first-child { border-top: 0; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1;
  color: var(--gold);
}
.step-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  margin: 0;
}
.step-text { color: var(--fg-2); max-width: 50ch; }
@media (min-width: 56rem) {
  .steps { padding-left: 2.5rem; }
  .step { grid-template-columns: 6rem minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/* ----- Studio ----------------------------------------------------------- */

.studio-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.studio-figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.studio-figure img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-pos, center); }
.studio-body { display: grid; gap: 1.75rem; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.principle { display: grid; gap: 0.35rem; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
.principle h3 {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.principle p { color: var(--fg-2); max-width: 48ch; }
@media (min-width: 56rem) {
  .studio-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: clamp(3rem, 6vw, 5.5rem); }
  .studio-grid--noimg { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
  .studio-grid--noimg .studio-body { display: contents; }
  .studio-grid--noimg .studio-head { grid-column: 1; }
  .studio-grid--noimg .studio-rest { grid-column: 2; display: grid; gap: 1.75rem; }
}

.area-line { font-size: 0.9375rem; color: var(--fg-2); max-width: 54ch; }

/* ----- Crosslinks ------------------------------------------------------- */

.cross { display: grid; border-top: 1px solid var(--rule); }
.cross-item {
  position: relative;
  display: grid;
  gap: 0.5rem 2.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) 3.5rem clamp(1.75rem, 4vw, 2.75rem) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  align-items: baseline;
}
.cross-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  transition: color 0.3s var(--ease);
}
.cross-text { color: var(--fg-2); max-width: 44ch; }
.cross-arrow {
  position: absolute;
  right: 0; top: 50%;
  width: 2.75rem; height: 2.75rem;
  margin-top: -1.375rem;
  display: grid; place-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.cross-arrow svg { width: 1.1rem; height: 1.1rem; }
.cross-item:hover .cross-title { color: var(--gold); }
.cross-item:hover .cross-arrow { transform: translateX(4px); border-color: var(--gold); color: var(--gold); }
@media (min-width: 56rem) {
  .cross-item { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding-right: 5rem; }
}

/* ----- Contact: planner and brief -------------------------------------- */

.section--contact { --bg: var(--black-2); border-top: 1px solid var(--rule); }
.contact-grid { display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 3rem); }
.contact-copy { display: contents; }
.contact-copy > p { color: var(--fg-2); max-width: 40ch; }
.contact-copy > .d-l + p { margin-top: -0.75rem; }
.contact-main { order: 2; }
.brief { order: 3; }
.contact-direct { order: 4; font-size: 0.9375rem; }
.contact-direct .tlink { margin-left: 0.25rem; }
@media (min-width: 62rem) {
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .contact-copy {
    display: grid;
    gap: 1.5rem;
    align-content: start;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
  .contact-copy > .d-l + p { margin-top: 0; }
}

.brief {
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 18px;
  background: var(--black);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  gap: 1rem;
}
.brief-head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.brief-mark { width: 2.25rem; height: 2.25rem; }
.brief-rows { margin: 0; display: grid; gap: 0.875rem; }
.brief-row { display: grid; gap: 0.15rem; }
.brief-row dt {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.brief-row dd { margin: 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.35; overflow-wrap: anywhere; }
.brief-row.is-new dd { animation: brief-ink 0.6s var(--ease); }
@keyframes brief-ink { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.brief-empty { color: var(--fg-2); font-size: 0.9375rem; }

.planner { display: grid; gap: 0; }
.pl-step {
  margin: 0;
  padding: 1.75rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
  display: grid;
  gap: 1.25rem;
}
.pl-step:first-child { border-top: 0; padding-top: 0; }
.pl-step[hidden] { display: none; }
.pl-q {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.2;
}
.pl-q .hint { font-family: var(--sans); }
.pl-n {
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--gold);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 0.9375rem;
  line-height: 1.25;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip input:hover + span { border-color: var(--ivory); }
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--black); }
.chip input:focus-visible + span { outline: 2px solid var(--focus-c); outline-offset: 3px; }

.pl-grid { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) {
  .pl-grid { grid-template-columns: 1fr 1fr; }
  .pl-wide { grid-column: 1 / -1; }
}

.field { display: grid; gap: 0.45rem; align-content: start; }
.field label { font-size: 0.875rem; font-weight: 600; }
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.95rem;
  background: var(--black);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1rem;
}
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--gold); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(169, 163, 151, 0.75); }
.field input[aria-invalid="true"] { border-color: #e8a090; }

.pl-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.5rem; }
.form-status { min-height: 1.5rem; margin-top: 1rem; font-weight: 600; }
.form-status.is-err { color: #f0a898; }
.form-status.is-ok { color: var(--gold-hi); }
.pl-fine { margin-top: 0.5rem; font-size: 0.875rem; color: var(--fg-2); max-width: 52ch; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.routes { display: grid; border-top: 1px solid var(--rule); }
.route { display: grid; gap: 0.3rem; padding-block: 1.5rem; border-bottom: 1px solid var(--rule); }
.route-say { color: var(--fg-2); max-width: 44ch; }
.route .tlink { justify-self: start; margin-top: 0.25rem; }
.has-planner [data-planner-fallback] { display: none; }

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

.site-footer {
  background: var(--black);
  color: var(--ivory-2);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--rule);
}
.footer-in { display: grid; gap: 2rem; align-items: end; }
.footer-lockup { width: clamp(10rem, 16vw, 13.5rem); height: auto; }
.footer-tail { display: grid; gap: 0.5rem; }
.footer-note { max-width: 40ch; font-size: 0.9375rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; font-size: 0.9375rem; margin-top: 0.75rem; color: var(--ivory); }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow 0.25s var(--ease), color 0.25s var(--ease);
}
.footer-links a:hover { color: var(--gold-hi); box-shadow: inset 0 -1px 0 var(--gold); }
.footer-legal { font-size: 0.8125rem; margin-top: 0.5rem; }
@media (min-width: 56rem) {
  .footer-in { grid-template-columns: auto minmax(0, 1fr); gap: 4rem; }
  .footer-tail { justify-items: end; text-align: right; }
  .footer-links { justify-content: flex-end; }
}

/* ----- Lightbox --------------------------------------------------------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  border: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  background: rgba(10, 10, 10, 0.97);
  color: var(--ivory);
}
.viewer::backdrop { background: rgba(10, 10, 10, 0.92); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr auto; }
.viewer-bar { display: flex; align-items: center; gap: 1rem; padding: 1rem var(--gutter); }
.viewer-title { font-family: var(--serif); font-size: 1.25rem; }
.viewer-close {
  margin-left: auto;
  min-height: 2.75rem; min-width: 2.75rem;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 50%; color: var(--ivory);
  cursor: pointer;
}
.viewer-close svg { width: 1.1rem; height: 1.1rem; }
.viewer-close:hover { border-color: var(--gold); color: var(--gold); }
.viewer-stage { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.viewer-stage img,
.viewer-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-stage iframe { width: min(100%, 72rem); aspect-ratio: 16 / 9; border: 0; }
.viewer-foot { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem var(--gutter); }
.viewer-nav {
  min-height: 2.75rem; padding: 0 1.25rem;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ivory);
  font-family: var(--sans); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.viewer-nav:not([disabled]):hover { border-color: var(--gold); color: var(--gold-hi); }
.viewer-nav[disabled] { opacity: 0.4; cursor: default; }
.viewer-count { font-size: 0.875rem; color: var(--ivory-2); }

/* ----- 404 -------------------------------------------------------------- */

.nf { min-height: 68svh; display: grid; align-content: center; gap: 1.5rem; }
.nf-mark { width: 5rem; height: 5rem; }

/* ----- Preview-only notes ----------------------------------------------- */

.note {
  font-size: 0.875rem;
  color: var(--fg-2);
  border-left: 1px solid var(--accent);
  padding-left: 0.875rem;
}

/* ----- Entrance and scroll-linked motion -------------------------------- */

/* Content is visible by default. The script opts in to the entrance only once
   it is running and has an observer to turn it back on with, so a failed or
   slow script can never leave the page blank. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal { opacity: 0; transform: translateY(16px); }
  .js-reveal .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  /* Inside a revealed block the heading lands first and the rest follows. */
  .js-reveal .reveal .section-head > *,
  .js-reveal .reveal.statement-grid > *,
  .js-reveal .reveal .row,
  .js-reveal .reveal .step,
  .js-reveal .reveal .principle,
  .js-reveal .reveal .cross-item,
  .js-reveal .reveal .offer {
    opacity: 0;
    transform: translateY(22px);
  }
  .js-reveal .reveal.is-in .section-head > *,
  .js-reveal .reveal.is-in.statement-grid > *,
  .js-reveal .reveal.is-in .row,
  .js-reveal .reveal.is-in .step,
  .js-reveal .reveal.is-in .principle,
  .js-reveal .reveal.is-in .cross-item,
  .js-reveal .reveal.is-in .offer {
    opacity: 1;
    transform: none;
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  .js-reveal .reveal.is-in :is(.section-head > *, .row, .step, .principle, .cross-item, .offer):nth-child(2) { transition-delay: 0.08s; }
  .js-reveal .reveal.is-in :is(.section-head > *, .row, .step, .principle, .cross-item, .offer):nth-child(3) { transition-delay: 0.16s; }
  .js-reveal .reveal.is-in :is(.row, .step, .principle, .cross-item, .offer):nth-child(4) { transition-delay: 0.24s; }
  .js-reveal .reveal.is-in :is(.row, .step, .principle, .cross-item, .offer):nth-child(n + 5) { transition-delay: 0.3s; }
  .js-reveal .reveal.is-in.statement-grid > :nth-child(2) { transition-delay: 0.12s; }
}

/* Where the browser can tie animation to scroll: pictures pull into focus as
   they enter the frame, and the process line fills as the steps are read.
   Browsers without it simply show the finished state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.motion-off * { animation: none !important; }
    .work-figure img,
    .work-figure video {
      animation: settle-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    @keyframes settle-in {
      from { transform: scale(1.16) translateY(4%); }
      to { transform: none; }
    }
    .steps::after {
      animation: fill-line linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 70%;
    }
    @keyframes fill-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

/* ----- The aperture in real-time 3D ------------------------------------ */
/* When WebGL is available the mark is drawn as machined gold blades; the
   flat SVG stays as the fallback and is hidden only once the 3D is live. */

.gl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.iris.is-gl .iris-svg { display: none; }
.hero-emblem.is-gl > .mark { visibility: hidden; }
.hero-emblem .gl-canvas { inset: -8%; width: 116%; height: 116%; }
.hero-emblem { aspect-ratio: 1; }

/* ----- Moving between the three pages ---------------------------------- */
/* Same-site page changes open like an aperture where the browser supports
   cross-document view transitions; elsewhere they are ordinary page loads. */

@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.5s var(--ease-io) both; }
  ::view-transition-new(root) { animation: vt-in 0.75s var(--ease-io) both; }
  @keyframes vt-out { to { opacity: 0.35; transform: scale(0.97); } }
  @keyframes vt-in {
    from { clip-path: polygon(50% 47%, 52.6% 48.5%, 52.6% 51.5%, 50% 53%, 47.4% 51.5%, 47.4% 48.5%); }
    to { clip-path: polygon(50% -110%, 190% -30%, 190% 130%, 50% 210%, -90% 130%, -90% -30%); }
  }
}
html.motion-off::view-transition-group(*),
html.motion-off::view-transition-old(*),
html.motion-off::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ----- Header end: motion switch and the main action -------------------- */

.header-end { grid-area: cta; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.header-end .header-cta { grid-area: auto; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ivory-2);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.motion-toggle:hover { color: var(--ivory); border-color: var(--rule-strong); }
.motion-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid currentColor; }
.motion-toggle[aria-pressed="true"] .motion-dot { background: var(--gold); border-color: var(--gold); }
@media (max-width: 30rem) {
  .motion-toggle { padding: 0 0.5rem; }
  .motion-toggle [data-motion-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .motion-dot { width: 0.75rem; height: 0.75rem; }
  .motion-toggle { min-width: 2.75rem; justify-content: center; }
}
@media (min-width: 60rem) {
  .header-end { justify-self: end; }
}

/* ----- Film hero ---------------------------------------------------------- */
/* Default (no script, reduced motion or Motion off): a still hero showing a
   frame from the film. The script adds .is-live, pins the stage and paints
   frames as the page scrolls. */

.hero--film { display: block; padding: 0; min-height: 0; }
.film-stage {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  max-height: 72rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(5rem, 11vh, 7.5rem);
}
.film-poster,
.film-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-poster--start { display: none; }
.film-canvas { display: none; }
.hero--film.is-live .film-poster--still { display: none; }
.hero--film.is-live .film-poster--start,
.hero--film.is-live .film-canvas { display: block; }
.hero--film .hero-in { position: relative; z-index: 2; }
.film-chapters { display: none; }
.film-meta { display: none; }

.hero--film.is-live .film-stage { max-height: none; }
.hero--film.is-live .film-chapters {
  display: block;
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 44rem;
  pointer-events: none;
}
.film-chapter { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; }
.film-chapter-n {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1rem;
}
.film-chapter-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.75rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  max-width: 12ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(10, 10, 10, 0.45);
}
.film-chapter-text { margin-top: 1.1rem; max-width: 42ch; color: var(--ivory); text-shadow: 0 1px 18px rgba(10, 10, 10, 0.6); }

.hero--film.is-live .film-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin-inline: auto;
  z-index: 3;
  padding-bottom: clamp(1.25rem, 3.5vh, 2rem);
}
.film-bar { position: relative; flex: 1; max-width: 18rem; height: 1px; background: var(--rule-strong); overflow: hidden; }
.film-bar-fill { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.film-load { font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.film-note { margin-left: auto; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ivory-2); }
.hero--film:not(.is-live) .film-note { display: none; }
.hero--film .hero-scrim {
  background:
    linear-gradient(to bottom, rgba(10, 10, 10, 0.75) 0, rgba(10, 10, 10, 0.25) 9rem, rgba(10, 10, 10, 0) 15rem),
    linear-gradient(to top, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.55) 32%, rgba(10, 10, 10, 0) 65%);
}

/* The one marquee: the places we work, drifting under the film. */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  background: var(--black);
  padding-block: 1.1rem;
}
.marquee-track { display: flex; width: max-content; }
.marquee-run { display: flex; align-items: center; gap: 2.25rem; padding-right: 2.25rem; margin: 0; white-space: nowrap; }
.marquee-run span:not(.marquee-sep) {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-style: italic;
  color: var(--ivory-2);
}
.marquee-sep { width: 0.45rem; height: 0.45rem; border: 1px solid var(--gold); transform: rotate(45deg); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .marquee-track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}

/* ----- Statement: the brand line, word by word -------------------------- */

.section--statement .statement-grid { align-items: end; }
.statement-title { font-size: clamp(3rem, 8.4vw, 7.5rem); line-height: 0.95; max-width: 11ch; }
.statement-title em { font-style: italic; color: var(--gold-hi); }
.statement-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.statement-title .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .statement-grid.reveal { opacity: 1; transform: none; }
  .js-reveal .statement-grid.reveal > .statement-title { opacity: 1; transform: none; }
  .js-reveal .statement-title .w > span { transform: translateY(105%); }
  .js-reveal .is-in .statement-title .w > span {
    transform: none;
    transition: transform 1.1s var(--ease);
    transition-delay: calc(var(--i) * 0.07s);
  }
}

/* ----- Feature: one large frame, the rest beside it --------------------- */

.feature { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.feature-item { display: grid; gap: 1.1rem; align-content: start; }
.feature-figure { margin: 0; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; background: var(--black-2); }
.feature-figure img { width: 100%; height: 100%; object-fit: cover; }
.feature-item--lead .feature-figure { aspect-ratio: 4 / 5; }
.feature-body { display: grid; gap: 0.5rem; }
.feature-n { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.16em; color: var(--gold); }
.feature-note { margin-top: 1.75rem; font-size: 0.8125rem; color: var(--fg-2); }
@media (min-width: 56rem) {
  .feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-auto-flow: dense; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .feature-item--lead { grid-row: span 2; }
  .feature-item:not(.feature-item--lead) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .feature-item:not(.feature-item--lead) .feature-figure { aspect-ratio: 4 / 5; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.motion-off) .feature-figure img {
      animation: settle-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}

/* ----- Pairs: a two-column grid of short points ------------------------- */

.pairs { display: grid; border-top: 1px solid var(--rule); }
.pair { display: grid; gap: 0.6rem; align-content: start; padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--rule); }
.pair-n { font-family: var(--serif); font-weight: 300; font-size: 2.5rem; line-height: 1; color: var(--gold); margin-bottom: 0.5rem; }
@media (min-width: 48rem) {
  .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pair { padding-right: clamp(1.5rem, 3vw, 3rem); }
  .pair:nth-child(2n) { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--rule); }
}

/* ----- Studio: principles side by side ---------------------------------- */

@media (min-width: 56rem) {
  .studio-grid--noimg { grid-template-columns: 1fr; }
  .studio-grid--noimg .studio-head { grid-column: 1; max-width: 18ch; }
  .studio-grid--noimg .studio-rest { grid-column: 1; }
  .studio-grid--noimg .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: 0; }
  .studio-grid--noimg .principle { border-bottom: 0; border-top: 1px solid var(--gold); padding: 1.5rem clamp(1.25rem, 2.5vw, 2.25rem) 0 0; margin-right: clamp(1.25rem, 2.5vw, 2.25rem); }
  .studio-grid--noimg .principle h3 { font-size: 1.625rem; }
}

/* ----- Crosslinks: doors to the other two pages ------------------------- */

.cross { gap: 1rem; border-top: 0; }
.cross-item {
  grid-template-columns: 1fr;
  align-content: space-between;
  min-height: 14rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--black-2);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.cross-item:hover { border-color: rgba(201, 162, 39, 0.6); background: #171612; }
.cross-arrow { top: auto; bottom: clamp(1.75rem, 3vw, 2.5rem); right: clamp(1.75rem, 3vw, 2.5rem); margin-top: 0; }
@media (min-width: 48rem) {
  .cross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cross-item { grid-template-columns: 1fr; padding-right: 5rem; }
}

/* Header fit at laptop widths: the outer columns size to their content and
   the tabs sit centred in the space between, so nothing wraps. */
.header-cta, .motion-toggle { white-space: nowrap; }
@media (min-width: 60rem) {
  .header-in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tabs { justify-self: center; }
}
@media (min-width: 60rem) and (max-width: 80rem) {
  .tab { padding: 0 1.05rem; letter-spacing: 0.1em; }
  .motion-toggle { padding: 0 0.6rem; }
}
.footer-imagery { margin-top: 0; opacity: 0.8; }