/* Three-tone system: navy is the signature, ivory and true black are the contrast.
   Ivory carries the reading sections, black is reserved for acting/film,
   navy frames the open and the close. Silver is the only accent. */
:root {
  --ivory: #F7F6F1;
  --ivory-deep: #ECEBE4;
  --navy: #0F2240;
  --navy-deep: #0A1830;
  --navy-soft: #1E3A66;
  --ice: #C7D3E6;
  --black: #0B0C0E;
  --black-raise: #16181C;
  --silver: #B8BEC0;
  --silver-dim: #8B9296;
  --ink: #11161F;
  --ink-soft: #4A5262;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tight: "Inter Tight", "Inter", system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 44px);
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --slide-ms: 6000ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--silver); outline-offset: 3px; }
::selection { background: var(--navy); color: var(--ivory); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--navy); color: var(--ivory); padding: 10px 14px; border-radius: 6px;
}
.skip:focus { left: 8px; }

/* film grain: an SVG noise tile at low opacity keeps flat navy/black from looking like a placeholder */
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .09; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */
.eyebrow, .section-tag {
  font: 500 12px/1 var(--tight);
  letter-spacing: .26em;
  text-transform: uppercase;
}
.section-tag {
  display: flex; align-items: center; gap: 14px;
  color: var(--navy-soft);
  margin: 0 0 24px;
}
.section-tag::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .6; }
.section-tag.on-dark { color: var(--silver); }

.display {
  font: 800 clamp(42px, 6.4vw, 84px)/.95 var(--tight);
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: var(--navy);
}
.display.on-dark { color: var(--ivory); }

/* brushed-silver fill for the second word of the name */
.silvered {
  background: linear-gradient(100deg, #8F979B 0%, #E9ECED 38%, #A9B0B3 55%, #F4F5F5 72%, #9AA2A6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.silver-rule {
  border: 0; height: 1px; margin: 26px 0;
  background: linear-gradient(90deg, transparent, var(--silver) 15%, var(--silver) 85%, transparent);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  font: 600 13px/1 var(--tight);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn span { transition: transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
.btn:hover span { transform: translateX(5px); }
.btn-ivory { background: var(--ivory); color: var(--navy); }
.btn-ivory:hover { background: #fff; }
.btn-line { border-color: rgba(247, 246, 241, .45); color: var(--ivory); }
.btn-line:hover { border-color: var(--ivory); background: rgba(247, 246, 241, .08); }
.btn-block { width: 100%; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px var(--gutter);
  background: rgba(247, 246, 241, .86);
  color: var(--navy);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(15, 34, 64, .1);
  transition: background-color .4s, border-color .4s, color .4s, padding .4s;
}
.nav.is-dark { background: rgba(10, 24, 48, .78); border-color: rgba(184, 190, 192, .14); color: var(--ivory); }
.nav:not(.is-top) { padding-block: 10px; }
/* at the very top the bar dissolves into the hero instead of sitting on it */
.nav.is-top { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 24px; }
.nav-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mono {
  display: grid; place-items: center;
  width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%;
  font: 600 16px/1 var(--serif); letter-spacing: .06em;
  transition: transform .45s var(--ease), background-color .3s;
}
.nav-mark:hover .mono { transform: rotate(-8deg); background: rgba(184, 190, 192, .12); }
.nav-name { font: 600 13px/1 var(--tight); letter-spacing: .3em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font: 500 12.5px/1 var(--tight); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; position: relative; padding: 6px 0;
}
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-current::after { transform: scaleX(1); }
.nav-cta { border: 1px solid currentColor; padding: 11px 18px !important; border-radius: 2px; transition: background-color .3s, color .3s, transform .6s var(--ease-out); }
.nav-cta:hover { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.nav.is-dark .nav-cta:hover { background: var(--ivory); color: var(--navy); border-color: var(--ivory); }
.nav-toggle { display: none; }

/* ---------- 01 hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(100svh, 980px);
  display: flex;
  background: var(--navy-deep);
  color: var(--ivory);
}
.hero-media { position: absolute; top: -30px; right: -30px; bottom: -30px; width: calc(52% + 30px); overflow: hidden; will-change: translate; }
.hero-media::after {
  /* fade the photo's left edge into navy so the name can sit across the seam;
     z-index sits above the active (2) and leaving (1) slides */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, var(--navy-deep) 0%, rgba(10, 24, 48, .55) 28%, rgba(10, 24, 48, 0) 60%),
    linear-gradient(0deg, var(--navy-deep) 0%, rgba(10, 24, 48, 0) 32%),
    linear-gradient(180deg, rgba(10, 24, 48, .55) 0%, rgba(10, 24, 48, 0) 20%);
}
.slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  opacity: 0; z-index: 0; transform: scale(1.06);
  filter: grayscale(.35) contrast(1.05);
}
.slide.is-active { opacity: 1; z-index: 2; animation: hero-drift calc(var(--slide-ms) + 1600ms) linear both; }
/* .wipe is added by JS on every change, so a page without JS still shows slide one, static */
.slide.is-active.wipe { animation: slide-wipe 1.5s var(--ease-io) both, hero-drift calc(var(--slide-ms) + 1600ms) linear both; }
.slide.is-leaving { opacity: 1; z-index: 1; animation: slide-leave 1.5s var(--ease-io) both; }
@keyframes slide-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hero-drift { from { transform: scale(1.14); } to { transform: scale(1.03); } }
@keyframes slide-leave { from { transform: scale(1.03); filter: grayscale(.35) contrast(1.05) brightness(1); } to { transform: scale(1.03) translate3d(-7%, 0, 0); filter: grayscale(.6) contrast(1.05) brightness(.35); } }

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 150px 0 40px;
}
/* line-height covers the eyebrow wrapping to two lines on narrow phones */
.hero .eyebrow { color: var(--ice); margin: 0 0 22px; opacity: .85; line-height: 1.6; }
.hero-name {
  margin: 0;
  font: 800 clamp(72px, 12.5vw, 188px)/.84 var(--tight);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.hero-name .word { display: block; overflow: hidden; padding: .02em 0 .05em; margin: -.02em 0 -.05em; }
.hero-name .word-inner { display: block; transform-origin: 0 100%; }
.hero-roles {
  margin: 30px 0 0;
  font: 500 clamp(13px, 1.3vw, 15px)/1.3 var(--tight);
  letter-spacing: .32em; text-transform: uppercase; color: var(--ice);
}
.hero-roles i, .mediculus-roles i { font-style: normal; color: var(--silver-dim); padding: 0 .3em; }
.hero-motto {
  margin: 16px 0 38px;
  font: italic 500 clamp(26px, 3vw, 38px)/1.1 var(--serif);
  color: var(--ivory);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-foot {
  display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap;
  margin-top: 70px; padding-top: 26px;
  border-top: 1px solid rgba(184, 190, 192, .22);
}
.hero-facts { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 0; }
.hero-facts dt { font: 500 10.5px/1 var(--tight); letter-spacing: .26em; text-transform: uppercase; color: var(--silver-dim); }
.hero-facts dd { margin: 9px 0 0; font: 600 15px/1.2 var(--tight); color: var(--ivory); }

.reel { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.reel button {
  position: relative; display: block; padding: 0 0 12px; border: 0; background: none; cursor: pointer;
  font: 500 11px/1 var(--tight); letter-spacing: .18em; text-transform: uppercase; color: var(--silver-dim);
  transition: color .3s, transform .3s var(--ease); text-align: left; min-width: 104px;
}
.reel button b { display: block; margin-bottom: 7px; font: 600 12px/1 var(--tight); color: inherit; }
.reel button:hover, .reel button.is-active { color: var(--ivory); }
.reel button:hover { transform: translateY(-2px); }
.reel .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(184, 190, 192, .25); overflow: hidden; }
.reel .bar::after { content: ""; position: absolute; inset: 0; background: var(--ivory); transform: scaleX(0); transform-origin: left; }
.reel button.is-active .bar::after { animation: reel-fill var(--slide-ms) linear forwards; }
.reel.is-paused button.is-active .bar::after { animation: none; transform: scaleX(1); }
@keyframes reel-fill { to { transform: scaleX(1); } }

/* ---------- 02 journey (ivory) ---------- */
.journey { padding: clamp(90px, 12vw, 160px) 0; background: var(--ivory); }
.journey-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 7vw, 110px); align-items: center; }
.journey-photo { margin: 0; position: relative; z-index: 0; }
.journey-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); }
.journey-photo::before {
  /* navy block offset behind the photo: a hard-edged contrast shape instead of a drop shadow */
  content: ""; position: absolute; inset: 28px -28px -28px 28px; background: var(--navy); z-index: -1; border-radius: var(--radius);
}
.journey-photo figcaption {
  position: absolute; left: -1px; bottom: 26px; background: var(--black); color: var(--ivory);
  padding: 12px 18px; font: 500 11px/1 var(--tight); letter-spacing: .24em; text-transform: uppercase;
  display: flex; gap: 12px;
}
.journey-photo figcaption span { color: var(--silver-dim); }
.lead { font: 500 clamp(21px, 2.2vw, 27px)/1.4 var(--sans); color: var(--ink); margin: 0 0 24px; }
.journey-body p { margin: 0 0 16px; max-width: 60ch; color: var(--ink-soft); }

.route {
  list-style: none; margin: 40px 0 0; padding: 26px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  position: relative; border-top: 1px solid rgba(15, 34, 64, .15);
}
.route li { position: relative; padding-top: 24px; }
.route-dot { position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--navy); background: var(--ivory); }
.route li:last-child .route-dot { background: var(--navy); }
.route b { display: block; font: 500 10.5px/1 var(--tight); letter-spacing: .24em; text-transform: uppercase; color: #626A73; }
.route em { display: block; margin-top: 8px; font: 600 16px/1.3 var(--tight); font-style: normal; color: var(--navy); }

/* ---------- quote band ---------- */
.quote-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy);
  padding: clamp(110px, 15vw, 200px) 0;
  text-align: center; color: var(--ivory);
}
.quote-band > img {
  position: absolute; inset: -130px 0; width: 100%; height: calc(100% + 260px); object-fit: cover; object-position: 50% 25%;
  z-index: -1; opacity: .28; filter: grayscale(1) contrast(1.1);
  transform: scale(1.04);
  animation: quote-drift 24s ease-in-out infinite alternate;
}
@keyframes quote-drift {
  to { transform: scale(1.12) translate3d(-1.2%, 1%, 0); }
}
.quote-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(15, 34, 64, .55), rgba(10, 24, 48, .95) 75%);
}
.quote-band blockquote { position: relative; z-index: 2; margin-block: 0; }
.quote-band p { margin: 0 auto; max-width: 18ch; font: 500 clamp(40px, 6vw, 82px)/1.04 var(--serif); }
.quote-band em { background: linear-gradient(100deg, #A9B0B3, #F4F5F5 50%, #A9B0B3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-band cite { display: block; margin-top: 30px; font: 500 12px/1 var(--tight); font-style: normal; letter-spacing: .3em; text-transform: uppercase; color: var(--ice); }

/* ---------- 03 work (true black) ---------- */
.work { background: var(--black); color: rgba(247, 246, 241, .72); padding: clamp(90px, 12vw, 160px) 0 clamp(80px, 10vw, 140px); }
.work-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: end; }
.work-intro { margin: 0 0 34px; max-width: 34ch; font-size: 16px; color: var(--silver); }

.letterbox {
  position: relative; margin: 30px 0 clamp(70px, 9vw, 110px);
  aspect-ratio: 2.39 / 1; max-height: 80vh; overflow: hidden;
}
.letterbox img, .letterbox video { display: block; width: 100%; height: calc(100% + 140px); margin-top: -70px; object-fit: cover; object-position: 50% 42%; filter: contrast(1.06) saturate(.8); }
/* the scene video is framed tight to the top of the shot, so it gets a shorter parallax throw (data-speed .06 = about ±26px) and only that much overscan */
.letterbox video { height: calc(100% + 56px); margin-top: -28px; object-position: 50% 0%; }
.letterbox::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 12, 14, .6), transparent 25%, transparent 68%, rgba(11, 12, 14, .85));
}
.slate {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; z-index: 2;
  display: flex; gap: 24px;
  font: 500 11px/1 var(--tight); letter-spacing: .26em; text-transform: uppercase; color: var(--silver);
}
.slate b { color: var(--ivory); font-weight: 600; margin-left: 6px; }
.slate .rec { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ivory); }
.slate .rec i { width: 8px; height: 8px; border-radius: 50%; background: #E0453A; animation: rec 1.4s steps(2) infinite; }
@keyframes rec { 50% { opacity: .15; } }

.range-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.range-title { margin: 0; font: 500 clamp(28px, 3vw, 38px)/1.1 var(--serif); color: var(--ivory); }
.range-sub { margin: 6px 0 0; font-size: 15px; color: var(--silver-dim); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 15px; border-radius: 2px;
  border: 1px solid rgba(184, 190, 192, .22); background: transparent;
  font: 500 12px/1 var(--tight); letter-spacing: .12em; text-transform: uppercase; color: var(--silver);
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--ease);
}
.filters button:hover { border-color: var(--silver); color: var(--ivory); transform: translateY(-2px); }
.filters button[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); color: var(--black); }
.filters .count { font-size: 10.5px; opacity: .55; }

/* even 4:5 grid reads like a casting book; the lead still spans 2x2 and dense flow backfills gaps when a filter runs */
.stills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-auto-flow: dense; }
.stills li[hidden] { display: none; }
.stills li.feature { grid-column: span 2; grid-row: span 2; }
/* second feature pins to the right edge: with 14 stills, two 2x2 cells + 12 singles fill four columns exactly (no orphan on the last row) */
.stills li.feature-end { grid-column: span 2 / -1; }
.stills button {
  display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: var(--black-raise);
  border-radius: 2px; overflow: hidden; cursor: zoom-in; position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.stills li.feature button { aspect-ratio: auto; height: 100%; }
/* two features can share the top rows with no single beside them, and singles were the only thing sizing rows,
   so those rows collapsed. A 4:5 feature sizes its own two rows; min-height keeps it filling taller rows elsewhere. */
.stills li.feature button { aspect-ratio: 4 / 5; height: auto; min-height: 100%; }
/* absolute so the tall feature image adds no intrinsic height; the small stills alone size the rows */
.stills li.feature img { position: absolute; inset: 0; }
.stills img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  transition: transform .8s var(--ease), filter .5s; filter: saturate(.8) brightness(.88);
}
.stills button::after {
  content: attr(data-caption); position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 14px 13px; text-align: left;
  font: 500 11px/1.3 var(--tight); letter-spacing: .16em; text-transform: uppercase; color: var(--ivory);
  background: linear-gradient(transparent, rgba(10, 24, 48, .92));
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease);
}
.stills button:hover::after, .stills button:focus-visible::after { opacity: 1; transform: none; }
.stills button:hover, .stills button:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, .35); }
.stills button:hover img, .stills button:focus-visible img { transform: scale(1.05); filter: saturate(1) brightness(1); }

.mediculus {
  margin-top: clamp(90px, 11vw, 140px);
  padding-top: clamp(70px, 9vw, 100px);
  border-top: 1px solid rgba(184, 190, 192, .14);
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 7vw, 100px); align-items: center;
}
.mediculus-name {
  margin: 0; font: 800 clamp(48px, 7vw, 96px)/.9 var(--tight);
  text-transform: uppercase; letter-spacing: -.02em; color: var(--ivory);
}
.mediculus-name span { display: block; margin-top: .12em; font: 800 .78em/1 var(--tight); text-transform: uppercase; letter-spacing: 0; color: var(--ivory); }
.mediculus-roles { margin: 20px 0 26px; font: 500 12px/1 var(--tight); letter-spacing: .26em; text-transform: uppercase; color: var(--silver); }
.mediculus-copy > p:not(.section-tag):not(.mediculus-roles) { max-width: 54ch; margin: 0 0 30px; }
.crafts { list-style: none; margin: 0 0 36px; padding: 0; }
.crafts li {
  display: grid; grid-template-columns: 40px 120px 1fr; gap: 14px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid rgba(184, 190, 192, .14);
  transition: padding-left .35s var(--ease);
}
.crafts li:hover { padding-left: 8px; }
.crafts li:last-child { border-bottom: 1px solid rgba(184, 190, 192, .14); }
.crafts b { font: 600 12px/1 var(--tight); color: var(--silver-dim); }
.crafts strong { font: 600 13px/1 var(--tight); letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); }
.crafts span { font-size: 15.5px; }
.mediculus-photo { margin: 0; position: relative; }
.mediculus-photo::before { content: ""; position: absolute; top: -14px; left: -14px; right: 14px; aspect-ratio: 4 / 5; border: 1px solid rgba(184, 190, 192, .3); pointer-events: none; }
.mediculus-photo img { position: relative; z-index: 1; border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; width: 100%; }
.mediculus-photo figcaption { margin-top: 16px; font: 500 11px/1.4 var(--tight); letter-spacing: .22em; text-transform: uppercase; color: var(--silver-dim); }

/* ---------- 04 purpose (white/ivory) ---------- */
.purpose {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
  padding: clamp(170px, 22vw, 290px) 0 clamp(90px, 11vw, 150px);
}
.peaks { position: absolute; inset: 0 0 auto; height: clamp(160px, 23vw, 320px); }
.peaks svg { width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
/* far ridge palest, near ridge darkest: atmospheric depth */
.ridge.r1 { fill: var(--ice); opacity: .7; }
.ridge.r2 { fill: var(--navy-soft); opacity: .45; }
.ridge.r3 { fill: var(--navy); opacity: .92; }
.snow { fill: #fff; }
.purpose-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 7vw, 100px); align-items: start; }
.purpose-head { margin: 0 0 24px; font: 500 clamp(42px, 5.4vw, 74px)/1.02 var(--serif); color: var(--navy); }
.purpose-head em { font-style: italic; }
.purpose-sub { margin: 0; max-width: 40ch; color: var(--ink-soft); }
.pillars { display: grid; border-top: 1px solid rgba(15, 34, 64, .15); }
.pillar {
  display: grid; grid-template-columns: 80px 1fr; gap: 20px;
  padding: 30px 0; border-bottom: 1px solid rgba(15, 34, 64, .15);
  transition: background-color .4s, padding .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pillar:hover { background: var(--navy); padding-inline: 24px; transform: translateX(4px); box-shadow: 0 12px 28px rgba(15, 34, 64, .12); }
.pillar:hover h3, .pillar:hover .pillar-num { color: var(--ivory); }
.pillar:hover p { color: var(--ice); }
.pillar-num { font: italic 500 40px/1 var(--serif); color: var(--silver-dim); transition: color .4s; }
.pillar h3 { margin: 4px 0 10px; font: 700 20px/1 var(--tight); letter-spacing: .2em; text-transform: uppercase; color: var(--navy); transition: color .4s; }
.pillar p { margin: 0; color: var(--ink-soft); font-size: 16px; transition: color .4s; }

/* ---------- 05 contact + footer (navy) ---------- */
.foot { position: relative; overflow: hidden; background: var(--navy); color: rgba(247, 246, 241, .78); padding: clamp(90px, 11vw, 150px) 0 28px; }
.foot > .wrap { position: relative; z-index: 2; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 7vw, 100px); align-items: start; }
.contact-copy p:not(.section-tag) { max-width: 46ch; margin: 0 0 28px; color: var(--ice); }
.ig-link {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 16px/1 var(--tight); letter-spacing: .06em; color: var(--ivory); text-decoration: none;
  border-bottom: 1px solid var(--silver); padding-bottom: 7px;
  transition: transform .6s var(--ease-out), border-color .3s;
}
.ig-link:hover { border-color: var(--ivory); }
.ig-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ig-link .dot { fill: currentColor; stroke: none; }

/* the form card is ivory on navy: the strongest contrast moment on the page, where the action is */
.inquiry {
  background: var(--ivory); color: var(--ink);
  border-radius: var(--radius); padding: clamp(24px, 3.4vw, 40px);
  display: grid; gap: 20px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.topic { border: 0; margin: 0; padding: 0; min-width: 0; }
.topic legend, .field > span, .preview-label {
  display: block; margin-bottom: 10px;
  font: 500 10.5px/1 var(--tight); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft);
}
.topic-row { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-row input { position: absolute; opacity: 0; pointer-events: none; }
.topic-row span {
  display: inline-block; padding: 10px 14px; border-radius: 2px; cursor: pointer;
  border: 1px solid rgba(15, 34, 64, .22); font: 500 13.5px/1 var(--tight); color: var(--navy);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.topic-row span:hover { border-color: var(--navy); transform: translateY(-2px); }
.topic-row input:checked + span { background: var(--black); color: var(--ivory); border-color: var(--black); }
.topic-row input:focus-visible + span { outline: 2px solid var(--navy-soft); outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: block; }
.field input, .field textarea {
  width: 100%; border-radius: 2px; padding: 13px 14px;
  background: #fff; border: 1px solid rgba(15, 34, 64, .18);
  color: var(--ink); font: 400 16px/1.4 var(--sans); resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: #7D8593; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15, 34, 64, .12); }
.field.is-missing input, .field.is-missing textarea { border-color: #C0473A; }
.preview { border-left: 2px solid var(--navy); padding: 4px 0 4px 16px; }
.preview p { margin: 0; white-space: pre-line; font-size: 15px; color: var(--navy); min-height: 3em; }
.inquiry .btn-ivory { background: var(--navy); color: var(--ivory); }
.inquiry .btn-ivory:hover { background: var(--black); }
.form-note { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--ink-soft); text-align: center; }

.foot-sign { text-align: center; margin-top: clamp(90px, 11vw, 140px); }
.foot-name { margin: 0; font: 800 clamp(48px, 9vw, 130px)/.9 var(--tight); letter-spacing: -.03em; text-transform: uppercase; color: var(--ivory); }
.foot-motto { margin: 18px 0 0; font: italic 500 clamp(22px, 2.6vw, 30px)/1.2 var(--serif); color: var(--ivory); }
.foot-sign .silver-rule { max-width: 620px; margin: 30px auto; }
.foot-place { margin: 0; font: 500 12px/1 var(--tight); letter-spacing: .3em; text-transform: uppercase; color: var(--silver); }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 70px; padding-top: 22px; border-top: 1px solid rgba(184, 190, 192, .16);
  font-size: 13px; color: rgba(199, 211, 230, .75);
}
.foot-bottom a { color: var(--ivory); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 24px; background: rgba(6, 8, 12, .96);
}
.lightbox:not([hidden]) { animation: lightbox-backdrop-in .32s ease both; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
/* fixed height (not max-height) so the small thumb and the full file render at the same size during the zoom */
.lightbox img { height: calc(100svh - 120px); width: auto; max-width: 100%; object-fit: contain; border-radius: 2px; transform-origin: 50% 50%; will-change: transform; }
.lightbox figcaption { display: flex; gap: 18px; font: 500 12px/1 var(--tight); letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.lb-close, .lb-arrow {
  border: 1px solid rgba(184, 190, 192, .3); background: rgba(11, 12, 14, .7); color: var(--ivory);
  border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.lb-close:hover, .lb-arrow:hover { background: var(--navy); border-color: var(--silver); transform: scale(1.06); }
.lb-arrow { width: 52px; height: 52px; font-size: 30px; line-height: 1; padding-bottom: 4px; }
.lb-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; font-size: 26px; line-height: 1; }

/* ---------- motion system ----------
   Every hidden state below is scoped to .js-rv / .js-intro / .show-intro, which a head script adds
   and a 3s failsafe removes if main.js never reports in. No script, no hidden content. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.77, 0, .18, 1); }

/* generic reveal: rise, unblur, fade */
.js-rv .rv {
  opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(6px);
  transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out), filter 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js-rv .rv[data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
.js-rv .rv[data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.js-rv .rv.in { opacity: 1; transform: none; filter: none; }
.js-rv .section-tag::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) .2s; }
.js-rv .section-tag.in::before, .js-rv .rv.in .section-tag::before { transform: scaleX(1); }

/* hero lines wait for the intro, then stagger like a title sequence */
.js-rv .hero-copy .rv, .js-rv .hero-foot.rv { transition-duration: 1.2s, 1.4s, 1.2s; }
.js-rv .hero-copy .eyebrow { --d: .05s; }
.js-rv .hero-copy .hero-roles { --d: .55s; }
.js-rv .hero-copy .hero-motto { --d: .68s; }
.js-rv .hero-copy .hero-actions { --d: .82s; }
.js-rv .hero-foot.rv { --d: 1s; }

/* the name rises out of a mask, one word after the other */
.js-intro .hero-name .word-inner { transform: translate3d(0, 108%, 0) rotate(4deg); }
.hero-ready .hero-name .word-inner { transform: none; transition: transform 1.5s var(--ease-out) .12s; }
.hero-ready .hero-name .word + .word .word-inner { transition-delay: .26s; }

/* brushed-silver words catch a slow travelling glint */
.silvered { background-size: 260% 100%; animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* display headings rise line by line out of their own mask */
.split-lines .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-lines .line-inner { display: block; transform-origin: 0 100%; }
.js-rv .rv.split-lines { opacity: 1; transform: none; filter: none; }
.js-rv .split-lines .line-inner {
  transform: translate3d(0, 112%, 0) rotate(3deg);
  transition: transform 1.3s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--li, 0) * .1s);
}
.js-rv .split-lines.in .line-inner { transform: none; }

/* the quote arrives a word at a time, out of a soft focus pull */
.js-rv .split-words .w {
  display: inline-block; opacity: 0; transform: translate3d(0, .35em, 0); filter: blur(10px);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: calc(var(--wi) * 60ms);
}
.js-rv .split-words.in .w { opacity: 1; transform: none; filter: none; }
/* background-clip:text can't reach through transformed children, so the silver moves onto each word */
.split-words.is-split em { background: none; color: var(--ivory); }
.split-words.is-split em .w {
  background: linear-gradient(100deg, #A9B0B3, #F4F5F5 50%, #A9B0B3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* photos open like a shutter from the bottom while the image settles from a slight zoom */
.js-rv .rv-img img, .js-rv .rv-img video { clip-path: inset(100% 0 0 0); scale: 1.2; transition: clip-path 1.5s var(--ease-io), scale 2s var(--ease-out); }
.js-rv .rv-img.in img, .js-rv .rv-img.in video { clip-path: inset(0 0 0 0); scale: 1; }
/* once the 2s reveal has played (JS adds .is-settled), hover gets a quick ease instead of inheriting it */
.journey-photo img, .mediculus-photo img, .js-rv .rv-img.is-settled img { transition: scale .8s var(--ease-out); }
.journey-photo:hover img, .mediculus-photo:hover img,
.js-rv .journey-photo.in:hover img, .js-rv .mediculus-photo.in:hover img { scale: 1.03; }
.js-rv .rv-img figcaption { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .8s ease 1s, transform 1s var(--ease-out) 1s; }
.js-rv .rv-img.in figcaption { opacity: 1; transform: none; }
.js-rv .journey-photo::before { transform: translate3d(-28px, -28px, 0); opacity: 0; transition: transform 1.4s var(--ease-out) .7s, opacity .8s ease .7s; }
.js-rv .journey-photo.in::before { transform: none; opacity: 1; }
.js-rv .mediculus-photo::before { opacity: 0; transform: translate3d(14px, 14px, 0); transition: opacity .8s ease .9s, transform 1.4s var(--ease-out) .9s; }
.js-rv .mediculus-photo.in::before { opacity: 1; transform: none; }

/* staggered groups: children enter in order, then drop the delay so hover stays instant */
.js-rv [data-stagger] > * {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition-property: opacity, transform, background-color, padding, color, box-shadow;
  transition-duration: 1s, 1.2s, .4s, .4s, .4s, .4s;
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--si, 0) * 120ms);
}
.js-rv [data-stagger].in > * { opacity: 1; transform: none; }
.js-rv [data-stagger].is-settled > * { transition-delay: 0s; transition-duration: .4s; }
.js-rv .route .route-dot { scale: 0; transition: scale .7s var(--ease-out) calc(var(--si, 0) * 120ms + .3s); }
.js-rv .route.in .route-dot { scale: 1; }

/* gallery stills rise in column order as they reach the viewport */
.js-rv .stills > li {
  opacity: 0; transform: translate3d(0, 48px, 0) scale(.96);
  transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js-rv .stills > li.in { opacity: 1; transform: none; }
.stills button { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.stills button:hover { box-shadow: 0 0 0 1px rgba(247, 246, 241, .35), 0 30px 60px -30px rgba(0, 0, 0, .8); }

/* buttons: a fill sweeps up from the bottom; JS adds a magnetic pull on fine pointers */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color .3s, color .45s var(--ease-out), border-color .3s, transform .6s var(--ease-out), box-shadow .4s var(--ease-out); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sweep, var(--black));
  transform: translate3d(0, 101%, 0); transition: transform .6s var(--ease-io);
}
.btn:hover::before { transform: none; }
.btn-ivory { --sweep: var(--black); }
.btn-ivory:hover { background: var(--ivory); color: var(--ivory); }
.btn-line { --sweep: var(--ivory); }
.btn-line:hover { background: transparent; color: var(--navy); }
.inquiry .btn-ivory:hover { background: var(--navy); color: var(--ivory); }

/* nav: hides on the way down, returns on the way up; a hairline tracks reading progress */
.nav { transition: background-color .4s, border-color .4s, color .4s, padding .4s, transform .7s var(--ease-out); }
.nav.is-hidden { transform: translate3d(0, -100%, 0); }
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--silver), var(--ice));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
.nav.is-top .progress { opacity: 0; }

/* lightbox chrome eases in after the photo lands */
.lightbox figcaption, .lb-arrow, .lb-close { transition: opacity .5s ease, background-color .2s, border-color .2s, transform .2s var(--ease); }
.lightbox.is-opening figcaption, .lightbox.is-opening .lb-arrow, .lightbox.is-opening .lb-close { opacity: 0; }
.lightbox.is-closing { animation: lightbox-backdrop-out .45s ease both; }
@keyframes lightbox-backdrop-in { from { opacity: 0; } }
@keyframes lightbox-backdrop-out { to { background-color: rgba(6, 8, 12, 0); } }

/* ---------- intro curtain (first visit per session) ---------- */
.intro { display: none; }
.show-intro .intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--navy-deep); color: var(--ivory);
  animation: intro-lift 1.05s var(--ease-io) 1.1s both;
}
.show-intro body { overflow: hidden; }
.intro-mark { position: relative; width: 96px; height: 96px; display: grid; place-items: center; animation: intro-mark-out .55s var(--ease-io) 1s both; }
.intro-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.intro-mark circle { fill: none; stroke: var(--silver); stroke-width: 1; stroke-dasharray: 290; stroke-dashoffset: 290; animation: intro-draw 1.05s var(--ease-io) .1s forwards; }
.intro-mark span { font: 600 26px/1 var(--serif); letter-spacing: .08em; opacity: 0; animation: intro-fade .7s ease .4s forwards; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-mark-out { to { opacity: 0; transform: translate3d(0, -24px, 0) scale(.92); } }
@keyframes intro-lift { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }


/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .reel button { min-width: 0; }
  .reel { gap: 16px; }
}
@media (max-width: 900px) {
  .nav-toggle {
    display: grid; gap: 6px; place-content: center;
    width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  }
  .nav-toggle span { width: 24px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav-links {
    /* hangs off the header's own bottom edge, so it follows the bar as it grows (top of page) or shrinks */
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100svh - 100%); overflow-y: auto;
    padding: 10px var(--gutter) 24px; background: var(--ivory); color: var(--navy);
    border-bottom: 1px solid rgba(15, 34, 64, .12);
    transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav-links.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav-links a { padding: 16px 0; border-bottom: 1px solid rgba(15, 34, 64, .1); font-size: 13.5px; }
  .nav-links a::after { display: none; }
  .nav-links .nav-cta { margin-top: 14px; text-align: center; border: 1px solid var(--navy) !important; padding: 15px 18px !important; }
  .nav.is-dark .nav-links { background: var(--navy-deep); color: var(--ivory); border-color: rgba(184, 190, 192, .14); }
  .nav.is-dark .nav-links a { border-color: rgba(184, 190, 192, .14); }
  .nav.is-dark .nav-links .nav-cta { border-color: var(--ivory) !important; }
  /* an open menu at the top of the page needs a solid bar behind the toggle */
  .nav.is-top.menu-open { background: var(--navy-deep); }

  /* phone hero: photo fills the upper screen, name overlaps its faded bottom edge */
  .hero { flex-direction: column; min-height: 0; }
  .hero-media { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: min(66svh, 620px); min-height: 420px; }
  .hero-media::after {
    background:
      linear-gradient(0deg, var(--navy-deep) 8%, rgba(10, 24, 48, .35) 45%, rgba(10, 24, 48, 0) 70%),
      linear-gradient(180deg, rgba(10, 24, 48, .6) 0%, rgba(10, 24, 48, 0) 22%);
  }
  .hero-inner { margin-top: -150px; padding: 0 0 36px; }
  .hero-foot { margin-top: 44px; flex-direction: column; align-items: stretch; }
  .reel { justify-content: space-between; }

  .journey-grid, .mediculus, .contact-grid, .purpose-grid, .work-head { grid-template-columns: 1fr; }
  .journey-photo { max-width: 440px; margin-right: 28px; }
  .mediculus-photo { max-width: 460px; margin-left: 14px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav-name { display: none; }
  .hero-name { font-size: clamp(64px, 20vw, 96px); }
  .display { font-size: clamp(36px, 10.4vw, 52px); }
  .hero-roles { font-size: 12px; letter-spacing: .2em; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-facts { gap: 14px 28px; }
  .reel button { font-size: 10px; letter-spacing: .12em; }
  .route { grid-template-columns: 1fr; gap: 18px; border-top: 0; padding-top: 0; }
  .route li { padding: 0 0 0 26px; }
  .route li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -18px; width: 1px; background: rgba(15, 34, 64, .2); }
  .route li:last-child::before { display: none; }
  .route-dot { top: 4px; }
  .letterbox { aspect-ratio: 16 / 10; }
  .slate { gap: 14px; }
  .slate span:nth-child(3) { display: none; }
  .stills { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* at two columns the feature fills its own row, so nothing else sizes that row: give it a real ratio */
  .stills li.feature { grid-row: auto; }
  .stills li.feature button { aspect-ratio: 4 / 5; height: auto; }
  .crafts li { grid-template-columns: 34px 1fr; }
  .crafts span { grid-column: 2; }
  .pillar { grid-template-columns: 54px 1fr; }
  .pillar-num { font-size: 32px; }
  .field-row { grid-template-columns: 1fr; }
  .lightbox { grid-template-columns: 1fr; padding: 70px 12px 24px; }
  .lb-arrow { position: absolute; bottom: 20px; width: 46px; height: 46px; }
  .lb-prev { left: 20px; }
  .lb-next { right: 20px; }
  .lightbox img { max-height: calc(100svh - 190px); }
  .foot-bottom { justify-content: center; text-align: center; }
}

/* ---------- phone hardening ----------
   Phones size the whole layout to the widest thing on the page, including elements still parked
   off to the side waiting to reveal, so nothing may sit outside the screen even before it animates. */
main, footer { overflow-x: clip; }
@media (max-width: 900px) {
  /* side-entry reveals become rise-ins: a 48px sideways start is exactly what widened the page */
  .js-rv .rv[data-reveal]:not(.in) { transform: translate3d(0, 34px, 0); }
}
/* tablets are touch devices too, so this covers every width up to the tablet breakpoint and any coarse pointer */
@media (max-width: 900px), (pointer: coarse) {
  /* touch targets: 44px minimum on everything a thumb has to hit */
  .filters button { min-height: 44px; padding-inline: 14px; }
  .topic-row span { padding: 14px 16px; }
  .ig-link { padding: 12px 0 9px; }
  .foot-bottom a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
  .reel button { padding-top: 10px; min-height: 44px; }
  .lb-close { width: 48px; height: 48px; }
  .socials a, .contact-lines a { padding-block: 12px; }
  /* small caps labels: never under 11px on a phone */
  .hero-facts dt, .route b, .filters .count, .topic legend, .field > span, .preview-label,
  .mediculus-photo figcaption, .slate, .reel button, .j-tag, .contact-lines span { font-size: 11px; }
  .reel button { letter-spacing: .1em; }
  /* full-width form button: tighter tracking keeps "Copy & open Instagram DM →" on one line at 320px */
  .btn-block { padding-inline: 16px; letter-spacing: .08em; gap: 10px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .btn-block { font-size: 12px; letter-spacing: .05em; padding-inline: 12px; }
}

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

/* ---------- trailer: full frame, caption underneath ----------
   The Roof trailer is already 2.37:1 with title cards near its edges, so it is shown uncropped
   instead of the cover-cropped, parallaxed letterbox the old loop used. */
.letterbox.trailer { aspect-ratio: auto; max-height: none; overflow: visible; }
.letterbox.trailer::after { display: none; }
.letterbox.trailer video { height: auto; margin: 0; aspect-ratio: 960 / 404; object-fit: cover; object-position: 50% 50%; filter: none; background: #000; }
.letterbox.trailer .slate { position: static; padding: 16px var(--gutter) 0; align-items: center; }
@media (max-width: 900px) { .letterbox.trailer { aspect-ratio: auto; } }

/* ---------- The Roof: title over a large trailer with a play button ---------- */
.roof-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-top: clamp(20px, 3vw, 40px); }
.roof-title { margin: 0; font: 800 clamp(34px, 5vw, 64px)/1 var(--tight); letter-spacing: -.01em; text-transform: uppercase; color: var(--ivory); }
.roof-meta { margin: 0; font: 500 11px/1 var(--tight); letter-spacing: .26em; text-transform: uppercase; color: var(--silver); }
.trailer-screen { position: relative; background: #000; }
.trailer-screen video { display: block; }
.play-btn {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0; border: 0; background: none; color: var(--ivory); cursor: pointer;
  font: 600 11px/1 var(--tight); letter-spacing: .26em; text-transform: uppercase;
}
.play-btn svg { width: clamp(64px, 8vw, 96px); height: clamp(64px, 8vw, 96px); padding: clamp(18px, 2.2vw, 26px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; fill: currentColor; background: rgba(11, 12, 14, .35); backdrop-filter: blur(4px); transition: transform .3s, background .3s, border-color .3s; }
.play-btn:hover svg, .play-btn:focus-visible svg { transform: scale(1.06); background: rgba(255, 255, 255, .14); border-color: #fff; }
.play-btn[hidden] { display: none; }
@media (max-width: 560px) { .play-btn span { display: none; } }

/* In Character shares The Roof heading style so the three section names read as one set */
.range-title.roof-title { font: 800 clamp(34px, 5vw, 64px)/1 var(--tight); letter-spacing: -.01em; text-transform: uppercase; color: var(--ivory); margin-bottom: 10px; }

/* ---------- The Final Stop card (links to films/the-final-stop/) ---------- */
.film-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin: clamp(70px, 9vw, 120px) 0; text-decoration: none; color: inherit; }
.film-card-img { display: block; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; background: var(--black-raise); }
.film-card-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: scale 1s var(--ease-out, ease), filter .6s; }
.film-card:hover .film-card-img img, .film-card:focus-visible .film-card-img img { scale: 1.04; filter: none; }
.film-card-meta { display: block; margin-bottom: 14px; font: 500 11px/1.3 var(--tight); letter-spacing: .22em; text-transform: uppercase; color: var(--silver); }
.film-card-title { display: block; margin-bottom: 14px; font: 800 clamp(34px, 5vw, 64px)/1 var(--tight); letter-spacing: -.01em; text-transform: uppercase; color: var(--ivory); }
.film-card-text { display: block; max-width: 44ch; margin-bottom: 22px; color: rgba(247, 246, 241, .72); }
.film-card-cta { display: inline-block; padding-bottom: 6px; border-bottom: 1px solid rgba(184, 190, 192, .45); font: 600 12px/1 var(--tight); letter-spacing: .18em; text-transform: uppercase; color: var(--ivory); transition: border-color .3s; }
.film-card:hover .film-card-cta { border-color: var(--ivory); }
@media (max-width: 760px) { .film-card { grid-template-columns: 1fr; } }