/* =========================================================
   İSTANBUL PİLİÇ — OPENING
   Owns the home intro (loader) and the hero.
   Intro: a moving green field; the line fills in coral, then the
   green doors part onto a coral pair that parts a beat later —
   green, then orange, then the film.
   Hero: the facility film full-bleed on a sticky stage. Scrolling
   closes the film down into a window inside "Featured ▢ products",
   which then hands the stage to the product showcase.
   Motion lives in js/app.js.
   ========================================================= */

/* ===========================================================
   INTRO
   =========================================================== */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  color: var(--neutral-100);
  /* deep forest floor under the moving mesh (also the fallback if the mesh
     never paints). Darkened in oklch toward black, not toward the warm
     neutral-900, so the green keeps its hue instead of sliding into olive. */
  --loader-deep: color-mix(in oklch, var(--sage-700) 62%, black);
  --loader-base: color-mix(in oklch, var(--sage-700) 78%, black);
  /* purely visual - never trap clicks, so the page is live the moment the doors part */
  pointer-events: none;
}

#loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ----- split panels: the moving brand mesh that parts along the line ----- */
.loader-panel,
.loader-under {
  position: absolute;
  left: 0;
  width: 100%;
  will-change: transform;
}

.loader-panel {
  background: var(--loader-base);
}

/* the coral pair waits behind the green doors and parts a beat after them,
   so the intro hands over green → orange → film. A soft lift along the
   seam keeps it from reading as a flat fill. */
.loader-under {
  background: var(--coral-600);
}

.loader-under--top {
  top: 0;
  height: 47vh;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, color-mix(in srgb, var(--coral-500) 55%, transparent), transparent 70%),
    var(--coral-600);
}

.loader-under--bottom {
  top: 47vh;
  height: calc(53vh + 1px);
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, color-mix(in srgb, var(--coral-500) 55%, transparent), transparent 70%),
    var(--coral-600);
}

/* ----- moving mesh gradient -----
   Each door holds an identical 100vw x 100vh field clipped to its own slice
   (the bottom field is lifted by the seam height). Same keyframes + same
   start time keep both fields in lockstep, so the blobs flow across the seam
   at rest, and each door carries its half away when the screen splits.
   Soft radial blobs, transform-only drift: no filter blur, all compositor. */
.loader-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.loader-mesh-field {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(160deg, var(--loader-deep) 0%, var(--loader-base) 55%, var(--loader-deep) 100%);
}

.loader-panel--bottom .loader-mesh-field {
  top: -47vh;
}

/* --core / --mid / --fade shape each blob's falloff (default: fully soft).
   --blend lets a glow screen in, lifting what's beneath without dulling it. */
.loader-mesh-field i {
  position: absolute;
  left: calc(var(--x) - var(--s) / 2);
  top: calc(var(--y) - var(--s) / 2);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(closest-side,
      var(--c) var(--core, 0%),
      color-mix(in srgb, var(--c) 50%, transparent) var(--mid, 48%),
      transparent var(--fade, 100%));
  opacity: var(--o, 1);
  mix-blend-mode: var(--blend, normal);
  animation: var(--path) var(--d) ease-in-out var(--delay) infinite alternate;
  will-change: transform;
}

/* green is the surface. The dark corners stay deep green; the centre
   (type + line) stays on the green floor and the veil. */
/* green bodies */
.loader-mesh-field i:nth-child(1) { --c: var(--sage-600); --s: 72vmax; --x: 26%; --y: 44%; --o: 0.85; --path: loader-drift-a; --d: 9s; --delay: -2s; }
.loader-mesh-field i:nth-child(2) { --c: var(--sage-600); --s: 60vmax; --x: 74%; --y: 52%; --o: 0.75; --path: loader-drift-b; --d: 10.5s; --delay: -6s; }
.loader-mesh-field i:nth-child(3) { --c: var(--loader-deep); --s: 64vmax; --x: 50%; --y: 104%; --path: loader-drift-c; --d: 10s; --delay: -5s; }
/* light on the green: sage highlights only. Warm light screened over this
   green turns tan, and a blended coral turns brown — so the field stays
   cleanly green and the orange lives in crisp marks instead (the line, the
   tip, the sub phrase, the coral doors). */
.loader-mesh-field i:nth-child(4) { --c: var(--sage-500); --s: 46vmax; --x: 20%; --y: 78%; --o: 0.3; --blend: screen; --path: loader-drift-d; --d: 8s; --delay: -3s; }
.loader-mesh-field i:nth-child(5) { --c: var(--sage-300); --s: 44vmax; --x: 84%; --y: 22%; --o: 0.26; --blend: screen; --path: loader-drift-d; --d: 9s; --delay: -7s; }
.loader-mesh-field i:nth-child(8) { --c: var(--sage-200); --s: 40vmax; --x: 50%; --y: 4%; --o: 0.14; --blend: screen; --path: loader-drift-c; --d: 8.5s; --delay: -6s; }
.loader-mesh-field i:nth-child(6) { --c: var(--sage-500); --s: 34vmax; --x: 92%; --y: 16%; --o: 0.22; --blend: screen; --path: loader-drift-d; --d: 7.5s; --delay: -1s; }
.loader-mesh-field i:nth-child(7) { --c: var(--sage-300); --s: 32vmax; --x: 10%; --y: 86%; --o: 0.2; --blend: screen; --path: loader-drift-d; --d: 9.5s; --delay: -4s; }
/* highlights */
.loader-mesh-field i:nth-child(9) { --c: var(--sage-500); --s: 34vmax; --x: 36%; --y: 80%; --o: 0.35; --blend: screen; --path: loader-drift-b; --d: 9s; --delay: -4.5s; }

/* soft deep-green pool behind the type + line so the pale lettering and the
   coral tip keep their contrast whichever blob drifts past the seam. */
.loader-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 26% at 50% 47%,
      color-mix(in srgb, var(--loader-deep) 60%, transparent) 0%,
      transparent 100%);
}

@keyframes loader-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(18vw, 12vh, 0) scale(1.15); }
  100% { transform: translate3d(-8vw, 22vh, 0) scale(0.9); }
}

@keyframes loader-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-20vw, 10vh, 0) scale(1.2); }
  100% { transform: translate3d(-6vw, -16vh, 0) scale(0.95); }
}

@keyframes loader-drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(14vw, -18vh, 0) scale(0.9); }
  100% { transform: translate3d(24vw, 6vh, 0) scale(1.1); }
}

/* tighter orbit for corner glows, so they breathe in place near their
   corner instead of drifting off-screen */
@keyframes loader-drift-d {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-9vw, 14vh, 0) scale(1.18); }
  100% { transform: translate3d(4vw, -8vh, 0) scale(0.92); }
}

/* once the doors have parted, stop the blobs entirely (display:none halts
   the animations instead of letting them tick behind a hidden layer) */
#loader.is-hidden .loader-mesh {
  display: none;
}

/* seam sits a touch above geometric centre (47vh): with the % lane and the
   sub phrase hanging below the line, optical centre wants the line higher */
.loader-panel--top {
  top: 0;
  height: 47vh;
}

.loader-panel--bottom {
  top: 47vh;
  height: calc(53vh + 1px);
}

/* the rail rides the top panel's bottom edge (the seam), and IS the
   progress bar — JS scales it with load progress. Coral on green. */
.loader-rail {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--coral-300);
  transform: scaleX(0);
  transform-origin: left;
}

.loader-stage {
  position: absolute;
  inset: 0;
}

/* ----- the brand word resting on the line, stamped bold by the tip ----- */
.loader-word {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.4vw, 3.6rem);
  letter-spacing: calc(-0.02em + var(--display-fit, 0em));
  line-height: 1;
  color: var(--neutral-100);
  white-space: nowrap;
}

/* the sub phrase hangs below the seam in the bottom panel, mirroring the
   brand word resting on top — offset past the travelling % readout's lane
   (top 16px + ~12px glyph height) so the number never sweeps through it */
.loader-word--sub {
  bottom: auto;
  top: 40px;
}

.loader-word .lw-sub {
  font-family: var(--font-text);
  font-style: italic;
  font-size: 0.72em;
  color: var(--coral-300);
}

.loader-word .char {
  display: inline-block;
  font-variation-settings: 'wght' 300;
  will-change: font-variation-settings, transform, opacity;
}

/* Hide the intro word on first paint so it doesn't flash in before GSAP's
   staggered rise takes over. JS removes .is-armed once the tween starts, and
   from() owns the reveal from there. Scoped to no-preference only: under
   reduced motion the tween never runs (so never clears the class), so we must
   not hide the word there. */
@media (prefers-reduced-motion: no-preference) {
  .loader-word.is-armed .char {
    opacity: 0;
  }
}

/* coral current that sweeps the completed line */
.loader-current {
  position: absolute;
  left: 0;
  bottom: -0.5px;
  width: 190px;
  height: 2px;
  background: var(--coral-500);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--coral-500) 70%, transparent);
  transform: translateX(-220px);
  opacity: 0;
}

/* ----- readout riding the tip: coral dot on the line, % just below ----- */
.loader-tip-dot {
  position: absolute;
  left: 0;
  bottom: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--coral-300);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--coral-500) 80%, transparent);
  transform: translateX(-50%);
  opacity: 0;
  animation: loader-fade-in 0.5s 0.55s var(--ease-out) forwards;
}

.loader-tip {
  position: absolute;
  left: 0;
  top: 16px;
  transform: translateX(-50%);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--neutral-100);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  animation: loader-fade-in 0.5s 0.55s var(--ease-out) forwards;
}

.loader-tip::after {
  content: "%";
  margin-left: 0.1em;
  font-size: 0.85em;
  color: var(--sage-200);
}

/* ----- corner HUD ----- */
.loader-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.4rem;
  padding: 0 var(--pad-side);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-text);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sage-200);
  opacity: 0;
  transform: translateY(10px);
  animation: loader-hud-in 0.8s 0.5s var(--ease-out) forwards;
}

.loader-status {
  margin-left: 0.5rem;
  color: var(--coral-300);
  letter-spacing: normal;
  text-transform: none;
}

@keyframes loader-fade-in {
  to {
    opacity: 1;
  }
}

@keyframes loader-hud-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-mesh-field i {
    animation: none;
  }

  .loader-hud,
  .loader-tip,
  .loader-tip-dot {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }

  .loader-word .char {
    font-variation-settings: 'wght' 500;
    opacity: 1;
    transform: none;
  }
}

/* ===========================================================
   HERO — the film, then the window
   =========================================================== */
.op-hero {
  --op-gutter: 4vw;
  --op-film-ink: var(--neutral-100);
  position: relative;
  /* 100vh sticky stage + 180vh of scrubbed travel */
  height: 280vh;
  background: var(--neutral-100);
  z-index: 2;
}

.op-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* ----- the film: full-bleed at rest; JS closes its clip down onto the
   window slot in the title below. clip-path also clips hit-testing, so the
   film only takes clicks where it is visible. ----- */
.op-film {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  margin: 0;
  background: var(--neutral-900);
  clip-path: inset(0px 0px 0px 0px round 0px);
  will-change: clip-path;
}

/* three nested layers, one transform owner each, so nothing fights:
   wrap = scroll scrub (GSAP), lean = window hover (CSS transition),
   video = entrance settle (GSAP) */
.op-film-wrap,
.op-film-lean,
.op-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.op-film-wrap {
  transform-origin: 50% 50%;
  will-change: transform;
}

.op-film-lean {
  transition: transform 0.9s var(--component-ease);
}

.op-video {
  display: block;
  object-fit: cover;
  will-change: transform;
}

/* legibility, not grading: a light overall shade, the nav band at the top,
   and a deep floor under the wordmark */
.op-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--neutral-900) 58%, transparent) 0%,
      transparent 24%),
    linear-gradient(to top,
      color-mix(in srgb, var(--neutral-900) 88%, transparent) 0%,
      color-mix(in srgb, var(--neutral-900) 46%, transparent) 38%,
      transparent 66%),
    color-mix(in srgb, var(--neutral-900) 22%, transparent);
}

/* ----- the copy on the film ----- */
.op-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--op-gutter) 26px;
  color: var(--op-film-ink);
  pointer-events: none;
}

.op-copy a,
.op-copy button {
  pointer-events: auto;
}

.op-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3vw;
}

/* the wordmark — Melodrama, light, tight; "Piliç" answers in italic */
.hero-heading {
  margin: 0 0 0 -0.045em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.07em;
  font-family: var(--font-display);
  font-size: clamp(4.6rem, 15.6vw, 17.5rem);
  font-weight: 380;
  letter-spacing: -0.045em;
  line-height: 0.8;
  color: inherit;
}

/* each word is a mask the letters rise through */
.hero-heading .word {
  display: inline-flex;
  overflow: hidden;
  padding: 0.1em 0.02em 0.12em;
  margin: -0.1em -0.02em -0.12em;
}

.hero-heading-sub {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 500;
  font-size: 0.29em;
  letter-spacing: -0.01em;
}

.hero-heading .char {
  display: inline-block;
  will-change: transform, opacity;
}

.op-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 300px;
  padding-bottom: 1.6vw;
}

.op-lede {
  margin: 0;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--neutral-100);
}

.op-lede span {
  color: color-mix(in srgb, var(--neutral-100) 72%, transparent);
}

/* ----- the rail: hairline, facts left, film controls right ----- */
.op-rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  padding-top: 14px;
}

.op-rail-line {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: color-mix(in srgb, var(--neutral-100) 16%, transparent);
  transform-origin: left;
}

.op-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--neutral-100) 82%, transparent);
}

.op-facts li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.op-facts li + li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--coral-300);
}

.op-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* text controls: hairline 4px boxes; fill sweeps up on hover */
.op-ctl {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--neutral-100) 38%, transparent);
  border-radius: 999px;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--neutral-100);
  transition: color 0.4s var(--component-ease), border-color 0.4s var(--component-ease);
}

.op-ctl::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--neutral-100);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--component-ease);
}

.op-ctl:hover,
.op-ctl:focus-visible {
  color: var(--neutral-900);
  border-color: var(--neutral-100);
}

.op-ctl:hover::before,
.op-ctl:focus-visible::before {
  transform: scaleY(1);
}

.op-ctl:focus-visible,
.op-down:focus-visible {
  outline: 2px solid var(--coral-300);
  outline-offset: 3px;
}

.op-ctl svg {
  width: 11px;
  height: 11px;
  flex: none;
}

.op-ctl-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* pause ⇄ play glyph swap */
.op-pause .op-ic-play,
.op-pause.is-paused .op-ic-pause {
  display: none;
}

.op-pause.is-paused .op-ic-play {
  display: block;
}

/* the one circle in the opening: the arrow down to the products */
.op-down {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--neutral-100) 38%, transparent);
  border-radius: 50%;
  color: var(--neutral-100);
  transition: border-color 0.4s var(--component-ease);
}

.op-down::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--coral-600);
  transform: scale(0);
  border-radius: 50%;
  transition: transform 0.45s var(--component-ease);
}

.op-down:hover {
  border-color: var(--coral-600);
}

.op-down:hover::before {
  transform: scale(1);
}

.op-down svg {
  width: 14px;
  height: 14px;
}

.op-down:hover svg {
  animation: op-nudge 0.9s var(--component-ease) infinite;
}

@keyframes op-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* entrance pre-hides — opacity only (a transform here would be baked into
   GSAP's offsets). Reduced motion never hides anything. */
@media (prefers-reduced-motion: no-preference) {
  .hero-heading .char,
  .op-side > *,
  .op-facts li,
  .op-controls > * {
    opacity: 0;
  }

  .op-rail-line {
    opacity: 0;
  }
}

/* ----- the hand-off: "Featured ▢ products" waits under the film and is
   uncovered as the film closes down onto the window ----- */
.op-feature {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--op-gutter);
  color: var(--neutral-900);
  text-align: center;
}

.op-feature-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  column-gap: 0.14em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8.6vw, 10rem);
  font-weight: 460;
  letter-spacing: calc(-0.045em + var(--display-fit, 0em));
  line-height: 0.86;
  transition: column-gap 0.7s var(--component-ease);
}

.op-ft-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* the window the film lands in — empty; the film itself is clipped to it */
.op-slot {
  flex: none;
  display: inline-block;
  width: 1.86em;
  height: 0.72em;
  border-radius: 5px;
}

.op-feature-note {
  max-width: 40ch;
  margin: 4.4vh 0 0;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  color: var(--neutral-700);
}

/* line-by-line rise (js/app.js): each word is a mask; top-aligned because
   an overflow-clipped inline-block would otherwise sit on its bottom edge */
.op-feature-note .nl-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.op-feature-note .nl-i {
  display: inline-block;
  will-change: transform;
}

/* window held: the words make room, the film leans in, the cursor offers
   to play the full film */
.op-hero.is-slotted .op-film {
  cursor: none;
}

.op-hero.is-window-hover .op-feature-title {
  column-gap: 0.24em;
}

.op-hero.is-window-hover .op-film-lean {
  transform: scale(1.06);
}

.op-window-label {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--coral-600);
  color: var(--neutral-100);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.3s, transform 0.45s var(--component-ease);
}

.op-window-label svg {
  width: 10px;
  height: 10px;
}

.op-hero.is-window-hover .op-window-label {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .op-ft-word,
  .op-feature-note {
    opacity: 0;
  }
}

/* ===========================================================
   REDUCED MOTION — no sticky travel: the film is a still poster
   with an explicit play control, and the featured title is a plain
   block below it with the poster in its window
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  .op-hero {
    height: auto;
  }

  /* the title sits first in the markup (so the film can cover it); here
     it has to follow the film */
  .op-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .op-feature {
    order: 2;
  }

  .op-film {
    position: relative;
    height: 100vh;
    height: 100svh;
    clip-path: none;
  }

  .op-copy {
    height: 100vh;
    height: 100svh;
    bottom: auto;
  }

  .op-feature {
    position: relative;
    inset: auto;
    padding-block: 18vh;
  }

  .op-slot {
    background: url("../assets/hero-bg-poster.webp?v=5") center / cover;
  }
}

/* ===========================================================
   SMALL SCREENS
   =========================================================== */
@media (max-width: 900px) {
  .op-hero {
    --op-gutter: 24px;
    height: 250vh;
  }

  .op-copy {
    padding-bottom: 20px;
  }

  .op-foot {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .op-side {
    order: -1;
    max-width: 30ch;
    padding-bottom: 0;
  }

  .op-lede {
    font-size: 14px;
  }

  .hero-heading {
    font-size: 24vw;
    row-gap: 0.04em;
  }

  .hero-heading-sub {
    font-size: 0.36em;
  }

  .op-rail {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 18px;
  }

  .op-facts {
    font-size: 13px;
    gap: 6px 16px;
  }

  .op-controls {
    justify-content: flex-start;
  }

  .op-ctl {
    padding: 0 12px;
  }

  .op-ctl-time {
    display: none;
  }

  .op-down {
    margin-left: auto;
  }

  .op-feature-title {
    flex-wrap: wrap;
    font-size: 15vw;
    row-gap: 0.1em;
  }

  /* "Featured" takes the first line; window + "products" share the second */
  .op-ft-word--lead {
    flex-basis: 100%;
  }

  .op-slot {
    width: 1.4em;
    height: 0.66em;
  }

  .op-feature-note {
    font-size: 14px;
  }
}