/*
 * cinematic-v1.css
 * Cinematic override layer — loads after style.css
 * Scope: site-experiments/cinematic-v1/site/ only
 * Rule: never touch /site/ (live baseline)
 *
 * What this file does:
 *   1.  Hero — converts background-image to animated hero-media element
 *   2.  Services preview — reveals buried atmospheric background
 *   3.  Wide-feature — adds cinematic drift to vessel-04 image
 *   4.  Two-col figure — subtle hover zoom for landscape images
 *   5.  CTA block — deeper gradient treatment
 *   6.  Reduced-motion — disable all custom animations
 *   7.  Mobile — ensure no animation on small viewports
 *
 * Nothing in this file alters layout, spacing, typography, or the live site.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO — ANIMATED MEDIA ELEMENT
   The baseline hero uses background-image on the section element. This
   layer adds a .hero-media container with a <img> child that receives
   Ken-Burns animation. The inline style="background-image:..." on the
   section is removed in the HTML — the section falls back to a deep navy
   background, and the image is rendered through .hero-media instead.
   Parallax is handled separately in cinematic-motion.js by applying
   translateY to .hero-media (not the img, to avoid animation conflict).
═══════════════════════════════════════════════════════════════════════════ */

.hero {
  background-image: none;
  background-color: var(--navy-deep, #0e1420);
}

.hero-media {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  z-index: 0;
  will-change: transform;
  pointer-events: none;
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  will-change: transform;
  animation: cinematicHero 28s ease-in-out infinite alternate;
}

@keyframes cinematicHero {
  0%   { transform: scale(1.03) translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(-1.0%, -0.6%, 0); }
}

/* Deepen the bottom gradient — makes h1 more legible against the image */
.hero::before {
  background:
    linear-gradient(90deg,
      rgba(10, 16, 26, 0.80) 0%,
      rgba(10, 16, 26, 0.50) 38%,
      rgba(10, 16, 26, 0.20) 72%,
      rgba(10, 16, 26, 0.28) 100%),
    linear-gradient(to top,
      rgba(8, 14, 22, 0.96) 0%,
      rgba(8, 14, 22, 0.56) 36%,
      rgba(8, 14, 22, 0.12) 68%,
      rgba(8, 14, 22, 0.04) 100%);
}

/* hero-content and hero-caption sit above the media layer */
.hero-content,
.hero-caption {
  position: relative;
  z-index: 2;
}

/* Animate in the hero content with a slightly slower settle */
.hero-content {
  animation: heroContentSettle 1600ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

@keyframes heroContentSettle {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SERVICES PREVIEW — CLEAN SECTION, NO IMAGE BACKGROUND
   The baseline CSS background-image is neutralised so the section renders
   as a clean section-alt. No animated media element. No dark overlay.
   All three service cards share one consistent off-white treatment.
   Card variants (primary / supporting) are normalised to match the default.
═══════════════════════════════════════════════════════════════════════════ */

/* Neutralise the CSS background-image from style.css */
.services-preview {
  background-image: none;
}

/* Normalise all three card variants to the same clean off-white */
.service-card-primary,
.service-card-supporting {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(23, 33, 49, 0.08);
  box-shadow: var(--shadow-card);
}

/* Subtle lift on hover — consistent across all cards */
.service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 90, 115, 0.28);
  box-shadow: 0 28px 52px rgba(17, 26, 41, 0.09);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. WIDE-FEATURE — CINEMATIC DRIFT ON VESSEL-04
   The wide-feature block shows vessel-04 (catamaran foredeck, Mediterranean
   passage). The baseline has hover-zoom only. Here we add a slow cinematic
   drift that plays continuously — restrained to 4% translation so it never
   reads as a slide, only as depth.
   The overflow:hidden on .wide-feature-media clips the expanded dimensions.
═══════════════════════════════════════════════════════════════════════════ */

.wide-feature-media img {
  inset: -4%;
  width: 108%;
  height: 108%;
  will-change: transform;
  animation: wideFeatureDrift 34s ease-in-out infinite alternate;
}

@keyframes wideFeatureDrift {
  0%   { transform: scale(1.0) translate3d(0, 0, 0); }
  100% { transform: scale(1.04) translate3d(1.2%, -0.6%, 0); }
}

/* Deepen the edge fade on hover for better text/image separation */
.wide-feature-media::after {
  background: linear-gradient(
    90deg,
    rgba(10, 16, 26, 0) 55%,
    rgba(10, 16, 26, 0.18) 100%
  );
  transition: opacity 600ms ease;
}

.wide-feature-reverse .wide-feature-media::after {
  background: linear-gradient(
    270deg,
    rgba(10, 16, 26, 0) 55%,
    rgba(10, 16, 26, 0.18) 100%
  );
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. TWO-COL FIGURE — HOVER ZOOM ON POSITIONING IMAGE
   The two-col figure (dad-solo-05) has a static image in the baseline.
   A subtle zoom-on-hover adds depth without motion noise.
   Matching the scale, timing and easing used on .service-feature-media.
═══════════════════════════════════════════════════════════════════════════ */

.two-col figure {
  overflow: hidden;
}

.two-col figure img {
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

@media (hover: hover) {
  .two-col figure:hover img {
    transform: scale(1.04);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CTA BLOCK — DEEPER GRADIENT AND STRONGER VISUAL PRESENCE
   The existing cta-block is navy with a gradient. This pass deepens the
   bottom anchoring gradient so the section reads as a true close — a signal
   that the page is complete and the next action is the only remaining step.
═══════════════════════════════════════════════════════════════════════════ */

.cta-block {
  background:
    linear-gradient(180deg,
      #0a1018 0%,
      #08111e 60%,
      #060d16 100%);
}

.cta-block::before {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.cta-block::after {
  background: linear-gradient(0deg,
    rgba(6, 12, 22, 0.90) 0%,
    rgba(6, 12, 22, 0) 100%
  );
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. PAGE ANCHOR IMAGES (inner pages)
   The cinematicDrift animation already runs on anchor images in style.css.
   This block ensures the drift timing is slightly varied per page to avoid
   all anchors feeling identical.
   Also deepens the bottom gradient for legibility over the moving image.
═══════════════════════════════════════════════════════════════════════════ */

.page-anchor::before,
.services-cinematic-anchor::before {
  background:
    linear-gradient(180deg,
      rgba(8, 14, 22, 0.48) 0%,
      rgba(8, 14, 22, 0.18) 32%,
      rgba(8, 14, 22, 0.18) 50%,
      rgba(8, 14, 22, 0.88) 100%),
    linear-gradient(90deg,
      rgba(8, 14, 22, 0.62) 0%,
      rgba(8, 14, 22, 0.18) 48%,
      rgba(8, 14, 22, 0) 100%);
}

/* About anchor — deeper overlay for bright harbour/daylight Gemini render.
   The orange-jacket image is well-lit harbour daylight; standard overlay
   needs reinforcement so the heading stays legible over brighter tones. */
.about-anchor::before {
  background:
    linear-gradient(180deg,
      rgba(6, 12, 22, 0.72) 0%,
      rgba(6, 12, 22, 0.32) 28%,
      rgba(6, 12, 22, 0.24) 52%,
      rgba(6, 12, 22, 0.92) 100%),
    linear-gradient(90deg,
      rgba(6, 12, 22, 0.78) 0%,
      rgba(6, 12, 22, 0.36) 42%,
      rgba(6, 12, 22, 0.08) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. TRUST STRIP — SUBTLE REFINEMENT
   Increase visual separation between trust strip and hero.
   The strip already uses a border-top; this adds a touch more presence.
═══════════════════════════════════════════════════════════════════════════ */

.trust-strip {
  border-top: 1px solid rgba(14, 24, 42, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. REDUCED MOTION — DISABLE ALL CUSTOM ANIMATIONS
   Respects user OS preference. Disables every animation added by this file.
   The transitions are reduced to instant where the user has requested it.
═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  .hero-media img,
  .wide-feature-media img {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .hero-media {
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: auto;
    transform: none !important;
  }

  .hero-content {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .two-col figure img,
  .service-card {
    transition: none;
  }

  .service-card:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. MOBILE — DISABLE PARALLAX AND HEAVY ANIMATIONS BELOW 760PX
   Ken-Burns can remain (it's CSS, lightweight). Parallax JS will self-disable
   via the motion script. This block removes will-change on small screens to
   avoid unnecessary compositing layers.
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

  .hero-media {
    inset: -2%;
    width: 104%;
    height: 104%;
    will-change: auto;
  }

  .hero-media img {
    object-position: 56% 22%;
    animation-duration: 36s;
  }

  .hero-content {
    animation-duration: 1200ms;
  }

  .wide-feature-media img {
    inset: 0;
    width: 100%;
    height: 100%;
    animation: none;
    will-change: auto;
  }

  .service-card:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   STRUCTURAL EXPANSION — CINEMATIC DIRECTION
   All rules below are new section patterns for the ambitious exploratory pass.
   ██████████████████████████████████████████████████████████████████████████
═══════════════════════════════════════════════════════════════════════════ */

/* 10. HERO TYPOGRAPHY — bolder, more minimal */

.hero h1 {
  font-size: clamp(3.2rem, 6.8vw, 6rem);
  max-width: 22ch;
  letter-spacing: -0.042em;
  line-height: 1.02;
}

.hero p {
  max-width: 38rem;
  font-size: 1.1rem;
  line-height: 1.68;
}

/* 11. "MORE THAN A VESSEL TRANSFER" SECTION */

.transfer-statement {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--paper, #f5f1e8);
  border-top: 1px solid rgba(14, 24, 42, 0.08);
}

.transfer-statement-inner {
  max-width: var(--max-width, 1280px);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

.transfer-statement .eyebrow {
  margin-bottom: 1.2rem;
}

.transfer-statement h2 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  max-width: 18ch;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  letter-spacing: -0.034em;
  line-height: 1.05;
  color: var(--navy-deep, #0e1420);
}

.transfer-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem 5rem;
  border-top: 1px solid rgba(14, 24, 42, 0.10);
  padding-top: 2.8rem;
}

.transfer-pillar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pillar-number {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(14, 24, 42, 0.32);
}

.pillar-text {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.64;
  color: var(--navy-deep, #0e1420);
  font-weight: 400;
  margin: 0;
}

/* 12. FOUNDER SPLIT */

.founder-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  min-height: clamp(560px, 90vh, 960px);
  background: var(--paper, #f5f1e8);
  overflow: hidden;
}

.founder-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.75rem, 6vw, 5.5rem);
}

.founder-split-text .eyebrow { margin-bottom: 1.1rem; }

.founder-split-text h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  letter-spacing: -0.032em;
  line-height: 1.1;
  margin-bottom: 1.6rem;
  color: var(--navy-deep, #0e1420);
  max-width: 20ch;
}

.founder-split-text p {
  font-size: 1.05rem;
  line-height: 1.74;
  color: var(--text-body, #2a3040);
  max-width: 38ch;
}

.founder-split-text p + p { margin-top: 1rem; }

.founder-split-media {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep, #0e1420);
}

.founder-split-media img {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: center 32%;
  will-change: transform;
  animation: wideFeatureDrift 36s ease-in-out infinite alternate;
}

/* 13. PASSAGE DIVIDER */

.passage-divider {
  position: relative;
  min-height: clamp(320px, 52vh, 580px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy-deep, #0e1420);
}

.passage-divider-media {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  pointer-events: none;
  will-change: transform;
  animation: cinematicDrift 32s ease-in-out infinite alternate;
}

.passage-divider-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.passage-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(8, 14, 22, 0.60) 0%,
      rgba(8, 14, 22, 0.26) 30%,
      rgba(8, 14, 22, 0.26) 60%,
      rgba(8, 14, 22, 0.72) 100%),
    linear-gradient(90deg,
      rgba(8, 14, 22, 0.28) 0%,
      rgba(8, 14, 22, 0.0) 50%,
      rgba(8, 14, 22, 0.28) 100%);
}

.passage-divider-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--off-white, #f5f2ec);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem clamp(1.5rem, 5vw, 4rem);
}

.passage-divider-stat {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: clamp(5.5rem, 18vw, 13rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
  color: var(--off-white, #f5f2ec);
  display: block;
}

.passage-divider-unit {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.76rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.52);
  display: block;
  margin-top: 0.6rem;
}

.passage-divider-label {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(245, 242, 236, 0.38);
  display: block;
  margin-top: 0.3rem;
}

/* 14. WIDE-FEATURE TALL */

.wide-feature--tall {
  min-height: clamp(520px, 80vh, 880px);
}

/* 15. PAGE ANCHOR TALL / FULL */

.page-anchor--tall,
.services-cinematic-anchor--tall {
  min-height: clamp(420px, 68vh, 720px);
}

.page-anchor--full {
  min-height: 100svh;
  align-items: flex-end;
}

.page-anchor--full .anchor-inner {
  padding-bottom: clamp(3.5rem, 6vh, 6rem);
}

/* 16. AVIATION CINEMATIC BAND */

.aviation-cinematic-band {
  position: relative;
  min-height: clamp(380px, 56vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy-deep, #0e1420);
}

.aviation-cinematic-band-media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aviation-cinematic-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.aviation-cinematic-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(8, 14, 22, 0.68) 0%,
      rgba(8, 14, 22, 0.42) 40%,
      rgba(8, 14, 22, 0.42) 60%,
      rgba(8, 14, 22, 0.80) 100%);
}

.aviation-cinematic-band-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 42rem;
  padding: 3rem clamp(1.5rem, 5vw, 4rem);
  color: var(--off-white, #f5f2ec);
}

.aviation-cinematic-band-content .eyebrow {
  color: rgba(190, 200, 220, 0.68);
  margin-bottom: 1.2rem;
}

.aviation-cinematic-band-content h4 {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--off-white, #f5f2ec);
  margin-bottom: 1.4rem;
}

.aviation-cinematic-band-content p {
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(220, 228, 238, 0.78);
  margin-bottom: 0;
}

.aviation-cinematic-band-content p + p { margin-top: 0.9rem; }

/* 17. SERVICE FEATURE IMMERSIVE */

.service-feature--immersive {
  min-height: clamp(520px, 72vh, 780px);
}

/* 18. PASSAGE STAT DRAMATIC — Experience page */

.featured-passage {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(14, 24, 42, 0.10);
  border-bottom: 1px solid rgba(14, 24, 42, 0.10);
  margin: 2.5rem 0;
}

.passage-distance {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: clamp(4.5rem, 14vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--navy-deep, #0e1420);
  display: block;
  margin-bottom: 0.6rem;
}

/* 19. REDUCED MOTION — new structural sections */

@media (prefers-reduced-motion: reduce) {
  .passage-divider-media,
  .founder-split-media img {
    animation: none;
    will-change: auto;
  }
  .passage-divider-media {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .founder-split-media img {
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* 20. MOBILE — new structural sections */

@media (max-width: 980px) {
  .founder-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .founder-split-media {
    height: clamp(280px, 65vw, 480px);
    order: -1;
  }
  .founder-split-media img {
    inset: 0;
    width: 100%;
    height: 100%;
    animation: none;
    will-change: auto;
  }
  .founder-split-text {
    padding: 3rem clamp(1.25rem, 5vw, 2.5rem);
  }
  .transfer-pillars {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .passage-divider-stat {
    font-size: clamp(4rem, 22vw, 7rem);
  }
  .wide-feature--tall {
    min-height: clamp(380px, 58vh, 600px);
  }
  .aviation-cinematic-band-content {
    padding: 2.5rem 1.5rem;
  }
}

@media (max-width: 760px) {
  .page-anchor--full {
    min-height: 80svh;
  }
  .passage-divider {
    min-height: clamp(260px, 44vh, 400px);
  }
  .founder-split-media {
    height: 72vw;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. EXPERIENCE ANCHOR — OBJECT-POSITION FOR CATAMARAN SUNSET RENDER
   The passage-sunset-catamaran-enhanced image has more vessel mass on the
   left side. Shifting x-position left of center reveals more of the vessel
   rather than the open sky on the right. Vertical stays near waterline.
═══════════════════════════════════════════════════════════════════════════ */

.page-anchor--full .anchor-media img {
  object-position: 32% 48%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. SUBPAGE ANCHOR HEIGHT REDUCTION — CORRECTION PASS
   All inner-page top image sections were too tall (68vh–100svh) and too
   zoomed in. This block reduces heights to an editorial half-screen range
   and pulls back the zoom so more of the original image is visible.
   Applies to: about.html, services.html, experience.html, contact.html.
   Does not affect the homepage hero.
═══════════════════════════════════════════════════════════════════════════ */

/* — Reduce the base anchor height (fallback for any page-anchor variant) — */
.page-anchor,
.services-cinematic-anchor {
  min-height: clamp(240px, 50vh, 520px);
}

/* — About and Services: --tall variant — */
.page-anchor--tall,
.services-cinematic-anchor--tall {
  min-height: clamp(240px, 48vh, 500px);
}

/* — Experience: was 100svh, now editorial half-screen — */
.page-anchor--full {
  min-height: clamp(260px, 52vh, 540px);
  align-items: center;
}

/* Zero out the bottom-anchored inner padding (only needed for full-height) */
.page-anchor--full .anchor-inner {
  padding-bottom: 0;
}

/* — Contact: compact header — */
.page-anchor.page-anchor-medium {
  min-height: clamp(200px, 38vh, 380px);
}

/* — Reduce image zoom buffer on all inner-page anchors —
   Was inset: -4% / 108%/108% → now -2% / 104%/104%.
   Less buffer = less artificial zoom = more image visible.
   The drift animation still has headroom to move without showing edges. */
.page-anchor .anchor-media img,
.services-cinematic-anchor .anchor-media img {
  inset: -2%;
  width: 104%;
  height: 104%;
}

/* — Override the cinematicDrift keyframe with a calmer version —
   style.css defines scale(1.03)→scale(1.09) — a 6% scale swing that
   compounds with the buffer. This override brings it to 0→2% swing,
   keeping gentle life without aggressive zoom. Loads after style.css
   so this definition wins. — */
@keyframes cinematicDrift {
  0%   { transform: scale(1.0) translate3d(0, 0, 0); }
  100% { transform: scale(1.02) translate3d(-0.6%, -0.4%, 0); }
}

/* — Per-page object-position tuning for better composition at new crop — */

/* About: orange-jacket image — centre the figure, keep harbour visible */
.about-anchor .anchor-media img {
  object-position: center 35%;
}

/* Services: motor yacht bow — keep waterline and sky balanced */
.services-cinematic-anchor .anchor-media img {
  object-position: center 52%;
}

/* Experience: catamaran sunset — shift left to show vessel, avoid stamp */
.page-anchor--full .anchor-media img {
  object-position: 28% 44%;
}

/* Contact: existing image, centred vertically */
.page-anchor.page-anchor-medium .anchor-media img {
  object-position: center 45%;
}

/* — Mobile: proportionally smaller at narrow widths — */
@media (max-width: 760px) {
  .page-anchor,
  .services-cinematic-anchor {
    min-height: clamp(180px, 38vh, 360px);
  }
  .page-anchor--tall,
  .services-cinematic-anchor--tall {
    min-height: clamp(180px, 36vh, 340px);
  }
  .page-anchor--full {
    min-height: clamp(200px, 40vh, 380px);
  }
  .page-anchor.page-anchor-medium {
    min-height: clamp(160px, 32vh, 300px);
  }
}

/* — Reduced motion: no animation, no buffer needed — */
@media (prefers-reduced-motion: reduce) {
  .page-anchor .anchor-media img,
  .services-cinematic-anchor .anchor-media img {
    inset: 0;
    width: 100%;
    height: 100%;
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. ABOUT HERO — MATCH LIVE-SITE FRAMING (crop-fix-1)
   The experimental About anchor was using page-anchor--tall (48vh) + an
   object-position of center 35% that pulled the frame upward, hiding the
   bottom ~30% of the image.
   
   This block restores the About anchor to match the live site's framing:
   - height restored to live-baseline clamp(520px, 72vh, 760px)
   - no Ken-Burns / drift / scale animation on the About hero image
   - no inset buffer (no animation means no edge-flicker risk)
   - object-position: center 45% matches what the live About uses
   
   Rules here are .about-anchor–specific so they do not affect any other page.
   They appear last in this file and therefore win over every earlier override.
═══════════════════════════════════════════════════════════════════════════ */

/* Restore height to live-site baseline — overrides section 22 reduction */
.about-anchor {
  min-height: clamp(520px, 72vh, 760px);
}

/* About hero image: static, no animation, no scale buffer, correct framing */
.about-anchor .anchor-media img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center 45%;
  animation: none;
  transform: none;
  will-change: auto;
}

/* Mobile — proportional reduction without oversized crop */
@media (max-width: 980px) {
  .about-anchor {
    min-height: clamp(340px, 58vh, 560px);
  }
}

@media (max-width: 760px) {
  .about-anchor {
    min-height: clamp(260px, 48vh, 420px);
  }
}

/* Reduced motion — already handled by animation: none above */

/* ═══════════════════════════════════════════════════════════════════════════
   24. SHARED SUBPAGE ANCHOR — MATCH ABOUT HERO (match-about-hero-1)
   Services, Experience and Contact previously had different modifier classes
   (services-cinematic-anchor--tall, page-anchor--full, page-anchor-medium)
   producing inconsistent heights and zoom levels.

   Those modifiers have been removed from HTML. This shared class mirrors
   section 23's About hero treatment exactly — same height, same static image
   wrapper, same no-animation rule. Per-page object-position is tuned below.

   About is NOT changed. This class matches About's behaviour, not the reverse.
═══════════════════════════════════════════════════════════════════════════ */

/* Shared height — mirrors .about-anchor in section 23 exactly */
.subpage-anchor-compact {
  min-height: clamp(520px, 72vh, 760px);
}

/* Shared image wrapper — static, no buffer, no animation, no transform */
.subpage-anchor-compact .anchor-media img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: none;
  transform: none;
  will-change: auto;
}

/* — Per-page object-position — */

/* Services: motor-yacht-atmosphere-04 — waterline centred in lower third */
.services-cinematic-anchor.subpage-anchor-compact .anchor-media img {
  object-position: center 50%;
}

/* Experience: catamaran sunset — left-shift reveals vessel/deck, avoids stamp */
.page-anchor.subpage-anchor-compact .anchor-media img {
  object-position: 30% 44%;
}

/* Contact: vessel-01 — horizon balanced mid-frame */
.page-anchor.subpage-anchor-compact.contact-anchor .anchor-media img {
  object-position: center 45%;
}

/* — Mobile breakpoints — mirrors section 23 About mobile rules exactly — */
@media (max-width: 980px) {
  .subpage-anchor-compact {
    min-height: clamp(340px, 58vh, 560px);
  }
}

@media (max-width: 760px) {
  .subpage-anchor-compact {
    min-height: clamp(260px, 48vh, 420px);
  }
}

/* — Reduced motion — animation already none; belt-and-braces reset — */
@media (prefers-reduced-motion: reduce) {
  .subpage-anchor-compact .anchor-media img {
    animation: none;
    transform: none;
  }
}

/* ============================================================
   25. SECONDARY PASSAGE CARDS — Experience page
   Fully scoped to passage-secondary-* classes.
   Must not inherit from .passage-distance (clamp 4.5–10rem).
   ============================================================ */

.passage-secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0 0 2rem;
}

.passage-secondary-card {
  padding: 1.6rem 1.8rem;
  background: rgba(246, 243, 238, 0.55);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
}

.passage-secondary-vessel {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.passage-secondary-route {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0 0 1rem;
  line-height: 1.4;
}

.passage-secondary-distance {
  /* Explicit standalone rule — cannot inherit .passage-distance (clamp 4.5rem–10rem) */
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  display: block;
  margin: 0;
}

@media (max-width: 760px) {
  .passage-secondary-grid { grid-template-columns: 1fr; }
  .passage-secondary-distance { font-size: clamp(1.4rem, 5vw, 1.8rem); }
}

/* ============================================================
   26. HERO VIDEO BACKGROUND
   Shared rules for <video> replacing still <img> in hero/anchor
   media containers. Scoped to .hero-media and .anchor-media.
   ============================================================ */

/* Homepage hero — video fills the .hero-media parallax container.
   Container itself carries inset:-6%/112%/112% + translateY parallax.
   Video fills it edge-to-edge; object-position mirrors the img default. */
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  will-change: auto;
  animation: none;
  display: block;
}

/* Subpage anchors — video fills .anchor-media container.
   Mirrors section 24 .subpage-anchor-compact .anchor-media img rules. */
.anchor-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: none;
  transform: none;
  will-change: auto;
  display: block;
}