/* ============================================================
   L'Oiseau Des Iles II — Homepage art direction
   "The Expedition Log" — editorial, cinematic, coordinates motif
   Scoped to #home-page so inner pages keep global.css untouched.
   ============================================================ */

#home-page {
  --hm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hm-hairline-dark: rgba(10, 46, 92, 0.14);
  --hm-hairline-light: rgba(251, 250, 248, 0.16);
  --hm-navy-deep: #071F3F;
  --hm-pad-x: clamp(1.25rem, 5vw, 6rem);
  --hm-pad-y: clamp(5rem, 12vh, 10rem);
  --hm-display: clamp(2.6rem, 6.5vw, 5.4rem);
  --hm-display-xl: clamp(3rem, 9.5vw, 8.2rem);
  background: var(--off-white);
}

/* Film grain over everything — the single texture that binds the page */
#home-page::after {
  content: '';
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Release the new sections from global.css's main>section container rule */
#home-page main > section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
}

/* ---------- Shared editorial primitives ---------- */
#home-page .hm-wrap {
  width: min(1400px, 100% - 2 * var(--hm-pad-x));
  margin: 0 auto;
}

#home-page .hm-eyebrow {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.6rem;
}
#home-page .hm-eyebrow::before {
  content: '';
  width: 3.5rem; height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}
#home-page .hm-dark .hm-eyebrow { color: var(--sand); }

#home-page .hm-chapter-head { position: relative; }
#home-page .hm-num {
  position: absolute;
  top: -0.18em; right: -0.05em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(7rem, 18vw, 15rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(10, 46, 92, 0.12);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
#home-page .hm-dark .hm-num { -webkit-text-stroke-color: rgba(251, 250, 248, 0.10); }

#home-page .hm-title {
  position: relative; z-index: 1;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--hm-display);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 1.5rem;
  max-width: 18ch;
  text-wrap: balance;
}
#home-page .hm-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--ocean);
}
#home-page .hm-dark .hm-title { color: var(--off-white); }
#home-page .hm-dark .hm-title em { color: var(--sky); }

#home-page .hm-kicker {
  font-size: 1.02rem;
  color: var(--ink-muted);
  max-width: 52ch;
}

/* Buttons — editorial rectangles with a sweep fill, not SaaS pills */
#home-page .hm-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.9em;
  padding: 1.05em 1.9em;
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  text-decoration: none;
  color: var(--off-white);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.45s var(--hm-ease), border-color 0.45s var(--hm-ease);
}
#home-page .hm-btn::before {
  content: '';
  position: absolute; inset: 0;
  color:#fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--hm-ease);
  z-index: 0;
}

.hm-btn:hover, .hm-btn:focus-visible { color: #fff !important; border-color: var(--sky); }
#home-page .hm-btn:hover::before, #home-page .hm-btn:focus-visible::before { transform: scaleX(1); }
#home-page .hm-btn:hover, #home-page .hm-btn:focus-visible { color: var(--hm-navy-deep); border-color: var(--sky); }
#home-page .hm-btn > * { position: relative; z-index: 1; }
#home-page .hm-btn svg {
  width: 1.1em; height: 1.1em;
  transition: transform 0.4s var(--hm-ease);
  color:#fff;
}
#home-page .hm-btn:hover svg { transform: translateX(5px); }

#home-page .hm-btn--ghost {
  background: transparent;
  color: var(--navy) !important;
  border-color: rgba(10, 46, 92, 0.35);
}
#home-page .hm-dark .hm-btn--ghost,
#home-page .hm-btn--ghost.hm-on-dark {
  color: var(--off-white) !important;
  border-color: rgba(251, 250, 248, 0.4);
}
#home-page .hm-btn--light {
  background: var(--off-white);
  color: var(--navy) !important;
  border-color: var(--off-white);
}

/* Underline-reveal text link */
#home-page .hm-link {
  display: inline-flex; align-items: baseline; gap: 0.6em;
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ocean);
  text-decoration: none;
  padding-bottom: 0.35em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size 0.45s var(--hm-ease);
}
#home-page .hm-link:hover { background-size: 30% 1px; }
#home-page .hm-dark .hm-link { color: var(--sky) !important; }

/* Reveal variants (main.js toggles .is-visible on [data-reveal]) */
#home-page [data-reveal] {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1s var(--hm-ease), transform 1s var(--hm-ease);
}
#home-page [data-reveal].is-visible { opacity: 1; transform: none; }
#home-page [data-reveal="clip"] {
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--hm-ease), opacity 0.8s var(--hm-ease);
}
#home-page [data-reveal="clip"].is-visible { clip-path: inset(0 0 0% 0); }
#home-page [data-reveal-stagger] > * {
  opacity: 0; transform: translateY(34px);
  transition: opacity 0.9s var(--hm-ease), transform 0.9s var(--hm-ease);
}
#home-page [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }
#home-page [data-reveal-stagger].is-visible > :nth-child(2) { transition-delay: 0.1s; }
#home-page [data-reveal-stagger].is-visible > :nth-child(3) { transition-delay: 0.2s; }
#home-page [data-reveal-stagger].is-visible > :nth-child(4) { transition-delay: 0.3s; }
#home-page [data-reveal-stagger].is-visible > :nth-child(5) { transition-delay: 0.4s; }
#home-page [data-reveal-stagger].is-visible > :nth-child(6) { transition-delay: 0.5s; }

/* Header/nav styles live in global.css so the menu is identical on every page
   (frosted, solidifies on scroll via .is-scrolled toggled in main.js) */

/* =====================================================
   01 · HERO — cinematic, asymmetric, oversized display
   ===================================================== */
#home-page .hm-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
  background: var(--hm-navy-deep);
  color: var(--off-white);
}
#home-page .hm-hero-media {
  position: absolute; inset: 0;
  z-index: 0;
  will-change: transform;
}
#home-page .hm-hero-media video,
#home-page .hm-hero-media .hero-fallback-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
#home-page .hm-hero-media .hero-fallback-img { display: none; }
@media (prefers-reduced-motion: reduce) {
  #home-page .hm-hero-media video { display: none; }
  #home-page .hm-hero-media .hero-fallback-img { display: block; }
}
#home-page .hm-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(75deg, rgba(7, 31, 63, 0.82) 0%, rgba(7, 31, 63, 0.42) 45%, rgba(7, 31, 63, 0.18) 100%),
    linear-gradient(180deg, rgba(7, 31, 63, 0.35) 0%, rgba(7, 31, 63, 0) 30%, rgba(7, 31, 63, 0.88) 100%);
}
#home-page .hm-hero-inner {
  position: relative; z-index: 2;
  width: min(1400px, 100% - 2 * var(--hm-pad-x));
  margin: 0 auto;
  padding: clamp(7rem, 16vh, 12rem) 0 clamp(2.5rem, 5vh, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end;
}
#home-page .hm-hero-eyebrow {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 1rem;
}
#home-page .hm-hero-eyebrow::before {
  content: '';
  width: 4rem; height: 1px;
  background: var(--sand);
  opacity: 0.7;
}
#home-page .hm-hero-coords {
  color: var(--sky);
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}
#home-page .hm-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--hm-display-xl);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--off-white);
  margin: 0;
  text-shadow: 0 4px 60px rgba(7, 31, 63, 0.5);
}
#home-page .hm-hero-title em {
  font-style: italic; font-weight: 500;
  color: var(--sky);
}
#home-page .hm-line { display: block; overflow: hidden; }
#home-page .hm-line > span {
  display: block;
  transform: translateY(110%);
  animation: hm-rise 1.1s var(--hm-ease) forwards;
}
#home-page .hm-line:nth-child(2) > span { animation-delay: 0.12s; }
#home-page .hm-line:nth-child(3) > span { animation-delay: 0.24s; }
@keyframes hm-rise { to { transform: translateY(0); } }
#home-page .hm-line-sub > span {
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-top: 1.4rem;
}
#home-page .hm-hero-lede {
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(251, 250, 248, 0.88);
  border-left: 1px solid var(--hm-hairline-light);
  padding-left: clamp(1.2rem, 2vw, 2rem);
  opacity: 0;
  animation: hm-fade 1.2s ease 0.55s forwards;
}
@keyframes hm-fade { to { opacity: 1; } }
#home-page .hm-hero-lede strong { color: var(--white); }
#home-page .hm-hero-lede em { color: var(--sky); font-style: italic; }
#home-page .hm-hero-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem;
  margin-top: 1.8rem;
}
#home-page .hm-hero-actions .hm-link { color: var(--sky); }

#home-page .hm-hero-foot {
  position: relative; z-index: 2;
  border-top: 1px solid var(--hm-hairline-light);
  backdrop-filter: blur(6px);
  background: rgba(7, 31, 63, 0.25);
}
#home-page .hm-hero-foot-inner {
  width: min(1400px, 100% - 2 * var(--hm-pad-x));
  margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 0 clamp(1.5rem, 4vw, 4rem);
  padding: 1.1rem 0;
}
#home-page .hm-hero-fact {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.4rem 0;
}
#home-page .hm-hero-fact span {
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sand);
}
#home-page .hm-hero-fact strong {
  font-family: var(--font-serif);
  font-size: 1.15rem; font-weight: 600;
  color: var(--off-white);
}
/* =====================================================
   02 · MANIFESTO — problem / promise, deep navy act
   ===================================================== */
#home-page .hm-manifesto {
  position: relative;
  background: linear-gradient(180deg, var(--hm-navy-deep) 0%, var(--navy) 100%);
  color: var(--off-white);
  padding: var(--hm-pad-y) 0;
  overflow: clip;
}
#home-page .hm-manifesto .hm-wrap { position: relative; }
#home-page .hm-manifesto-statement {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--off-white);
  max-width: 24ch;
  margin: 0 0 clamp(3rem, 7vw, 5.5rem);
  text-wrap: balance;
}
#home-page .hm-manifesto-statement em {
  font-style: italic;
  color: var(--sky);
}
#home-page .hm-manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
#home-page .hm-manifesto-copy {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(251, 250, 248, 0.82);
}
#home-page .hm-manifesto-copy strong { color: var(--white); }
#home-page .hm-manifesto-copy em { color: var(--sky); }
#home-page .hm-manifesto-copy p { margin: 0; }
#home-page .hm-manifesto-copy p + p { margin-top: 1.4rem; }
#home-page .hm-captain {
  border-left: 2px solid var(--sand);
  padding-left: clamp(1.4rem, 2.5vw, 2.4rem);
  margin: 0;
}
#home-page .hm-captain p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.45;
  color: var(--gray-light);
  margin-bottom: 1.4rem;
}
#home-page .hm-captain footer {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sand);
}

/* =====================================================
   03 · VESSEL — overlapping split composition
   ===================================================== */
#home-page .hm-vessel {
  padding: var(--hm-pad-y) 0;
  overflow: clip;
}
#home-page .hm-vessel .hm-chapter-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
#home-page .hm-vessel-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}
#home-page .hm-vessel-media {
  grid-column: 1 / 9;
  grid-row: 1;
  position: relative;
}
#home-page .hm-vessel-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* .hm-vessel-panel overlaps the right edge at every width, including mobile,
     so only the free left corners are rounded */
  border-radius: var(--radius-img) 0 0 var(--radius-img);
  box-shadow: 0 40px 90px rgba(7, 31, 63, 0.25);
}
#home-page .hm-vessel-media figcaption {
  position: absolute;
  left: 0; bottom: -2.2rem;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-muted);
}
#home-page .hm-vessel-panel {
  grid-column: 8 / 13;
  grid-row: 1;
  position: relative; z-index: 2;
  background: var(--white);
  padding: clamp(1.8rem, 3.5vw, 3.2rem);
  border-radius: var(--radius-img);
  box-shadow: 0 30px 80px rgba(7, 31, 63, 0.16);
  border-top: 3px solid var(--sky);
  margin: clamp(2rem, 5vw, 4rem) 0;
}
#home-page .hm-panel-label {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: 1rem;
}
#home-page .hm-vessel-panel h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--navy);
  margin-bottom: 1rem;
}
#home-page .hm-vessel-panel p { font-size: 0.98rem; color: var(--ink); }
#home-page .hm-ledger {
  list-style: none;
  margin: 1.4rem 0 1.8rem; padding: 0;
}
#home-page .hm-ledger li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 0.75em 0;
  margin: 0;
  border-top: 1px solid var(--hm-hairline-dark);
  font-size: 0.95rem;
}
#home-page .hm-ledger li:last-child { border-bottom: 1px solid var(--hm-hairline-dark); }
#home-page .hm-ledger li::before {
  content: counter(list-item, decimal-leading-zero);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--sand);
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* =====================================================
   04 · ARSENAL — spec-sheet aesthetic on deep navy
   ===================================================== */
#home-page .hm-arsenal {
  position: relative;
  background: var(--hm-navy-deep);
  color: var(--off-white);
  padding: var(--hm-pad-y) 0;
  overflow: clip;
}
#home-page .hm-arsenal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
#home-page .hm-arsenal-copy { font-size: 1.02rem; line-height: 1.8; color: rgba(251, 250, 248, 0.82); }
#home-page .hm-arsenal-copy strong, #home-page .hm-arsenal-copy em { color: var(--white); }
#home-page .hm-spec {
  list-style: none;
  margin: 2rem 0 2.2rem; padding: 0;
}
#home-page .hm-spec li {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1em 0;
  margin: 0;
  border-top: 1px solid var(--hm-hairline-light);
}
#home-page .hm-spec li:last-child { border-bottom: 1px solid var(--hm-hairline-light); }
#home-page .hm-spec-key {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--sand);
}
#home-page .hm-spec-val {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--off-white);
}
/* the UA default figure margin (1em 40px) was costing 80px of width, which is
   a quarter of the column on mobile - the flex gap handles the spacing instead */
#home-page .hm-arsenal-media { position: relative; margin: 0; }
#home-page .hm-arsenal-media img {
  width: 100%;
  height: auto;        /* natural 1536x1024 ratio - the whole photo, nothing cut */
  object-fit: contain;
  border-radius: var(--radius-img);
}
/* The offset sky-blue outline that used to sit here was drawn for the old 4/5
   portrait crop: its top and left edges sat inside the image. Now that the photo
   is shown whole at its natural 3/2 ratio, that line cut straight across it, so
   the frame is gone and the photo carries its own rounded corners instead. */
#home-page .hm-arsenal-media figcaption {
  position: absolute;
  right: 0; bottom: -2.4rem;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(251, 250, 248, 0.55);
}
/* The closing "secret de la réussite" copy and the CTA live in the right column,
   underneath the photo, so the caption has to come back in-flow or it lands on
   the paragraph. */
#home-page .hm-arsenal-side {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3vw, 2.4rem);
}
#home-page .hm-arsenal-side .hm-arsenal-media figcaption {
  position: static;
  text-align: right;
  padding-top: 1rem;
}

/* =====================================================
   05 · TECHNIQUES — three expanding panels
   ===================================================== */
#home-page .hm-techniques { padding: var(--hm-pad-y) 0; overflow: clip; }
#home-page .hm-techniques .hm-chapter-head { margin-bottom: clamp(2rem, 5vw, 4rem); }
#home-page .hm-tech-intro {
  max-width: 62ch;
  font-size: 1.02rem;
  color: var(--ink);
}
/* Desktop only: set the intro paragraph alongside the title instead of underneath it,
   so the block stops leaving a wide unused band on the right. Kept above 1050px
   because global.css's mobile block force-centres this content with !important. */
@media (min-width: 1051px) {
  #home-page .hm-techniques .hm-chapter-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
    align-items: end;
  }
  #home-page .hm-techniques .hm-chapter-head .hm-eyebrow { grid-column: 1 / -1; }
  #home-page .hm-techniques .hm-title { grid-column: 1; max-width: 20ch; margin-bottom: 0; }
  #home-page .hm-techniques .hm-tech-intro {
    grid-column: 2;
    max-width: 46ch;
    margin: 0;
    align-self: end;
  }
}
/* Techniques carousel — the touch / narrow-screen layout: a plain scrolling
   carousel like the trophy one below, each photo whole at its own ratio with its
   caption underneath. From 1051px up on a pointer device the roll-over panels
   further down take over. */
#home-page .hm-tech-row {
  display: flex;
  gap: clamp(1rem, 2vw, 1.8rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 2.5rem;
  overflow-x: auto;
  /* full-bleed like the trophy strip: the row lives outside .hm-wrap and insets
     itself, so the cards run to the screen edge instead of being clipped at 1400px */
  padding: 0 var(--hm-pad-x);
  scrollbar-width: none;
}
/* Centre the row whenever the cards do not fill it, so the margins match left and
   right instead of all the slack piling up on one side. Auto margins on the end
   cards split the free space, and collapse to 0 the moment the row overflows - so
   the first card stays reachable at scrollLeft 0 and the arrows keep working. This
   is deliberately not justify-content:center (that strands the first card) nor
   "safe center" (not supported everywhere, and it would silently fall back to
   start-aligned, which is the layout being complained about). */
#home-page .hm-tech-row > :first-child { margin-inline-start: auto; }
#home-page .hm-tech-row > :last-child { margin-inline-end: auto; }
#home-page .hm-tech-row::-webkit-scrollbar { display: none; }
#home-page .hm-tech-panel {
  flex: 0 0 auto;
  width: auto;              /* the card follows the photo, never the reverse */
}
#home-page .hm-tech-panel img {
  display: block;
  width: auto;
  max-width: none;          /* beats the global img { max-width: 100% } reset */
  /* sized so all three cards fit inside the padded row from ~1050px up: the three
     photo ratios total 4.74, so height x 4.74 + gaps has to stay under the row's
     inner width. At 380px they overflowed and the third card bled off the right. */
  height: clamp(190px, 17.6vw, 340px);
  object-fit: contain;      /* belt and braces: nothing is cut */
  border-radius: var(--radius-img);
}
#home-page .hm-tech-meta {
  padding-top: 1rem;
  color: var(--ink);
  /* The photo must set the card width and the caption wrap inside it. Without
     this the caption's max-content widens the card - global.css drops the
     paragraph's max-width with !important below 1050px, which blew the cards
     out well past their photos. */
  width: 0;
  min-width: 100%;
}
#home-page .hm-tech-index {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ocean);
  font-size: 1rem;
  display: block;
  margin-bottom: 0.4rem;
}
#home-page .hm-tech-meta h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: var(--navy);
  margin: 0 0 0.5rem;
}
#home-page .hm-tech-meta p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
  /* kept under the narrowest photo's width so the copy never widens the card */
  max-width: 34ch;
}
/* Mobile: one whole photo per screen, matching the trophy carousel */
@media (max-width: 700px) {
  #home-page .hm-tech-panel { width: calc(100vw - 2 * var(--hm-pad-x)); }
  #home-page .hm-tech-panel img { width: 100%; height: auto; }
  #home-page .hm-tech-meta p { max-width: none; }
}
/* Desktop roll-over — the three expanding panels this section had before the
   carousel, restored. The photo fills its panel, the caption sits over it, and
   hovering (or tabbing to) a panel widens it, clears the tint and slides its copy
   in. Pointer devices from 1051px only: a touch screen has no hover, so below
   that the carousel above stays exactly as it is. */
@media (min-width: 1051px) and (hover: hover) {
  #home-page .hm-tech-row {
    gap: clamp(0.6rem, 1vw, 1rem);
    min-height: clamp(380px, 58vh, 560px);
    overflow: visible;               /* the panels fit the row: no scrolling left to do */
    /* the carousel row is full-bleed; pull it back to the wrap so the panels line
       up with the chapter head above and the outro below */
    width: min(1400px, 100% - 2 * var(--hm-pad-x));
    margin-inline: auto;
    padding: 0;
  }
  /* those auto margins centre a short carousel — here they would eat the row */
  #home-page .hm-tech-row > :first-child { margin-inline-start: 0; }
  #home-page .hm-tech-row > :last-child { margin-inline-end: 0; }
  #home-page .hm-tech-panel {
    position: relative;
    flex: 1;
    width: auto;
    overflow: hidden;
    border-radius: var(--radius-img);
    display: flex;
    align-items: flex-end;
    transition: flex-grow 0.8s var(--hm-ease);
    cursor: pointer;
  }
  #home-page .hm-tech-panel:hover,
  #home-page .hm-tech-panel:focus-within { flex-grow: 2.1; }
  #home-page .hm-tech-panel img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;               /* the panel sets the crop now, not the photo */
    border-radius: 0;
    filter: saturate(0.75) brightness(0.92);
    transform: scale(1.06);
    transition: filter 0.8s ease, transform 1.2s var(--hm-ease);
  }
  #home-page .hm-tech-panel:hover img,
  #home-page .hm-tech-panel:focus-within img {
    filter: saturate(1) brightness(1);
    transform: scale(1);
  }
  #home-page .hm-tech-panel::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(200deg, rgba(7, 31, 63, 0) 40%, rgba(7, 31, 63, 0.88) 100%);
  }
  #home-page .hm-tech-meta {
    position: relative; z-index: 1;
    width: 100%; min-width: 0;
    padding: clamp(1.4rem, 2.5vw, 2.2rem);
    color: var(--off-white);
  }
  #home-page .hm-tech-index { color: var(--sky); }
  #home-page .hm-tech-meta h3 {
    /* capped a touch lower than the rest of the page: "Appâts en Dérive" has to
       hold on one line inside a collapsed panel */
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    color: var(--off-white);
    white-space: nowrap;
  }
  #home-page .hm-tech-meta p {
    max-width: 42ch;
    color: rgba(251, 250, 248, 0.85);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease 0.15s, transform 0.6s var(--hm-ease) 0.15s;
  }
  #home-page .hm-tech-panel:hover .hm-tech-meta p,
  #home-page .hm-tech-panel:focus-within .hm-tech-meta p {
    opacity: 1;
    transform: none;
  }
  /* the three panels fill the row, so there is nothing left to page through */
  #home-page .hm-techniques .hm-carousel-btn { display: none; }
}
/* Reduced motion: keep the layout and the reveal, drop the sliding and scaling */
@media (min-width: 1051px) and (hover: hover) and (prefers-reduced-motion: reduce) {
  #home-page .hm-tech-panel,
  #home-page .hm-tech-panel img,
  #home-page .hm-tech-meta p { transition: none; }
  #home-page .hm-tech-panel img { transform: none; }
  #home-page .hm-tech-meta p { transform: none; }
}
#home-page .hm-tech-outro {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  border-top: 1px solid var(--hm-hairline-dark);
  padding-top: 2rem;
}
#home-page .hm-tech-outro p {
  max-width: 58ch;
  font-size: 0.98rem;
  color: var(--ink-muted);
  margin: 0;
}
/* Desktop only: "1fr auto" leaves no free space for space-between to strand, and
   dropping the 58ch cap lets the paragraph fill its column, so the wide hole that
   used to sit between the copy and the link is gone. */
@media (min-width: 1051px) {
  #home-page .hm-tech-outro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: end;
  }
  #home-page .hm-tech-outro p { max-width: none; }
}

/* =====================================================
   06 · CATCH LOG — stats + horizontal trophy strip
   ===================================================== */
#home-page .hm-catchlog {
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--hm-navy-deep) 100%);
  color: var(--off-white);
  padding: var(--hm-pad-y) 0 0;
  overflow: clip;
}
#home-page .hm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
}
#home-page .hm-stat {
  border-left: 1px solid var(--hm-hairline-light);
  padding-left: 1.4rem;
}
#home-page .hm-stat-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: var(--off-white);
  font-variant-numeric: tabular-nums;
}
#home-page .hm-stat-num sup {
  font-size: 0.4em;
  color: var(--sky);
  font-style: italic;
}
#home-page .hm-stat-label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--sand);
}
/* Trophy carousel. Every photo here is landscape (1.55 to 2.05), so the old fixed
   240-420px wide x 320-560px tall frames were cropping roughly half the width away.
   The row now sets a single height and lets each card's width follow its photo, so
   nothing is cut. Native scroll keeps swipe and keyboard behaviour; the arrows in
   js/home.js drive it for mouse users. */
#home-page .hm-carousel { position: relative; }
#home-page .hm-strip {
  display: flex;
  gap: clamp(1rem, 2vw, 1.8rem);
  overflow-x: auto;
  /* No scroll-snap: with a left padding gutter the browser snaps the first card
     flush to the scrollport, which both eats the gutter and leaves scrollLeft at
     a non-zero resting value, so the "previous" arrow could never disable. The
     arrows step exactly one card, which is all a simple carousel needs. */
  padding: 0 var(--hm-pad-x) 1.2rem;
  scrollbar-width: none;
}
/* same centring trick as .hm-tech-row - only kicks in on very wide screens where
   five cards stop filling the row */
#home-page .hm-strip > :first-child { margin-inline-start: auto; }
#home-page .hm-strip > :last-child { margin-inline-end: auto; }
#home-page .hm-strip::-webkit-scrollbar { display: none; }
#home-page .hm-strip figure {
  flex: 0 0 auto;
  margin: 0;
  width: auto; /* the card follows the photo, never the reverse */
}
#home-page .hm-strip img {
  width: auto;
  max-width: none; /* beats the global img { max-width: 100% } reset */
  height: clamp(220px, 30vw, 420px);
  object-fit: contain;
  border-radius: var(--radius-img); /* stands alone in the row, so all four corners */
  filter: saturate(0.85);
  transition: filter 0.6s ease;
}
#home-page .hm-strip figure:hover img { filter: saturate(1.05); }

/* Arrows */
#home-page .hm-carousel-btn {
  position: absolute;
  top: 45%; /* the measured box includes the captions, so sit slightly high of centre */
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 1.8rem; line-height: 1;
  color: var(--off-white);
  background: rgba(7, 31, 63, 0.6);
  border: 1px solid var(--hm-hairline-light);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease, opacity 0.3s ease;
}
#home-page .hm-carousel-btn:hover { background: var(--ocean); }
#home-page .hm-carousel-btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
#home-page .hm-carousel-btn[disabled] { opacity: 0.25; cursor: default; }
#home-page .hm-carousel-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
#home-page .hm-carousel-next { right: clamp(0.5rem, 2vw, 1.5rem); }
#home-page .hm-carousel[data-no-overflow] .hm-carousel-btn { display: none; }

/* Mobile: one whole photo per screen, at its natural ratio */
@media (max-width: 700px) {
  #home-page .hm-strip figure { width: calc(100vw - 2 * var(--hm-pad-x)); }
  #home-page .hm-strip img { width: 100%; height: auto; }
}
#home-page .hm-strip figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding-top: 0.8rem;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--sand);
}
#home-page .hm-strip figcaption em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--off-white);
}
#home-page .hm-striphint {
  width: min(1400px, 100% - 2 * var(--hm-pad-x));
  margin: 0.5rem auto 0;
  font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(251,250,248,0.45);
}
/* species marquee */
#home-page .hm-marquee {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--hm-hairline-light);
  padding: 1.6rem 0;
  overflow: hidden;
}
#home-page .hm-marquee-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: hm-marquee 42s linear infinite;
}
#home-page .hm-marquee span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(251, 250, 248, 0.5);
  white-space: nowrap;
}
#home-page .hm-marquee span.hm-solid {
  color: var(--sky);
  -webkit-text-stroke: 0;
}
@keyframes hm-marquee { to { transform: translateX(-50%); } }

/* =====================================================
   07 · PASSAGE — the process, sticky rail
   ===================================================== */
#home-page .hm-passage { padding: var(--hm-pad-y) 0; }
#home-page .hm-passage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
#home-page .hm-passage-aside { position: sticky; top: calc(var(--header-h) + 3rem); }
#home-page .hm-passage-aside .hm-kicker { margin-top: 1.2rem; }
#home-page .hm-steps { position: relative; counter-reset: step; }
#home-page .hm-steps::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--hm-hairline-dark);
}
#home-page .hm-steps-progress {
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  height: 0;
  background: var(--ocean);
  transition: height 0.3s linear;
}
#home-page .hm-step {
  position: relative;
  padding: 0 0 clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
  opacity: 0.35;
  transition: opacity 0.7s ease;
}
#home-page .hm-step.is-active { opacity: 1; }
#home-page .hm-step::before {
  content: '';
  position: absolute;
  left: -4px; top: 0.85em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--off-white);
  border: 1px solid var(--ocean);
  transition: background 0.5s ease;
}
#home-page .hm-step.is-active::before { background: var(--sky); }
#home-page .hm-step-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--sand);
  display: block;
  margin-bottom: 0.5rem;
}
#home-page .hm-step h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  color: var(--navy);
  margin: 0 0 0.7rem;
}
#home-page .hm-step p {
  font-size: 0.98rem;
  color: var(--ink);
  max-width: 52ch;
  margin: 0;
}

/* =====================================================
   08 · FORMULAS — editorial offer ledger, no cards
   ===================================================== */
#home-page .hm-formulas {
  background: var(--white);
  border-top: 1px solid var(--hm-hairline-dark);
  padding: var(--hm-pad-y) 0;
  overflow: clip;
}
#home-page .hm-formulas .hm-chapter-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
#home-page .hm-formula {
  display: grid;
  grid-template-columns: minmax(70px, 120px) minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(0.5rem, 1.5vw, 1.5rem);
  border-top: 1px solid var(--hm-hairline-dark);
  transition: background 0.5s ease;
}
#home-page .hm-formula:last-of-type { border-bottom: 1px solid var(--hm-hairline-dark); }
#home-page .hm-formula:hover { background: var(--off-white); }
#home-page .hm-formula-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ocean);
}
#home-page .hm-formula h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--navy);
  margin: 0 0 0.6rem;
}
#home-page .hm-formula-tag {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ocean);
  display: block;
  margin-bottom: 0.6rem;
}
#home-page .hm-formula-desc p { font-size: 0.96rem; color: var(--ink); margin-bottom: 0.6rem; }
#home-page .hm-formula-includes {
  list-style: none;
  margin: 0; padding: 0;
  font-size: 0.9rem;
  color: var(--ink);
}
#home-page .hm-formula-includes li {
  padding: 0.5em 0;
  margin: 0;
  border-top: 1px dashed var(--hm-hairline-dark);
  display: flex; gap: 0.7em; align-items: baseline;
}
#home-page .hm-formula-includes li::before {
  content: '›';
  color: var(--sky);
  font-weight: 700;
}
#home-page .hm-formula-cta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.9rem;
  text-align: right;
}
#home-page .hm-formula-price {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-muted);
  white-space: nowrap;
}
#home-page .hm-formula--featured {
  background: var(--hm-navy-deep);
  color: var(--off-white);
  border-radius: 2px;
  border-color: transparent;
  box-shadow: 0 30px 80px rgba(7, 31, 63, 0.28);
}
#home-page .hm-formula--featured:hover { background: var(--hm-navy-deep); }
#home-page .hm-formula--featured h3 { color: var(--off-white); }
#home-page .hm-formula--featured .hm-formula-tag { color: var(--sky); }
#home-page .hm-formula--featured .hm-formula-desc p,
#home-page .hm-formula--featured .hm-formula-includes { color: rgba(251, 250, 248, 0.85); }
#home-page .hm-formula--featured .hm-formula-includes li { border-top-color: var(--hm-hairline-light); }
#home-page .hm-formula--featured .hm-formula-num { -webkit-text-stroke-color: var(--sky); }
#home-page .hm-formula--featured .hm-formula-price { color: var(--gray-light); }
#home-page .hm-formula--featured strong { color: var(--white); }
#home-page .hm-formulas-note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* =====================================================
   09 · WHERE — practical facts + framed map
   ===================================================== */
#home-page .hm-where { padding: var(--hm-pad-y) 0; overflow: clip; }
#home-page .hm-where-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
#home-page .hm-where-copy { font-size: 1rem; color: var(--ink); }
#home-page .hm-facts {
  list-style: none;
  margin: 2rem 0 2.2rem; padding: 0;
}
#home-page .hm-facts li {
  display: grid;
  grid-template-columns: minmax(110px, 190px) 1fr;
  gap: 1.5rem;
  padding: 0.9em 0;
  margin: 0;
  border-top: 1px solid var(--hm-hairline-dark);
  align-items: baseline;
}
#home-page .hm-facts li:last-child { border-bottom: 1px solid var(--hm-hairline-dark); }
#home-page .hm-facts .k {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-muted);
}
#home-page .hm-facts .v {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--navy);
}
#home-page .hm-map-frame {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(7, 31, 63, 0.18);
}
#home-page .hm-map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(380px, 52vh, 520px);
  border: 0;
  filter: grayscale(0.85) contrast(1.02);
  transition: filter 0.6s ease;
}
#home-page .hm-map-frame:hover iframe { filter: grayscale(0); }
#home-page .hm-map-coords {
  position: absolute;
  left: 1.2rem; bottom: 1.2rem;
  background: var(--hm-navy-deep);
  color: var(--sky);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  padding: 0.7em 1.2em;
  border-radius: 2px;
  pointer-events: none;
}

/* =====================================================
   10 · FILMS — featured + reel row
   ===================================================== */
#home-page .hm-films {
  background: var(--hm-navy-deep);
  color: var(--off-white);
  padding: var(--hm-pad-y) 0;
  overflow: clip;
}
#home-page .hm-films .hm-chapter-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
#home-page .hm-films-featured {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}
#home-page .hm-films-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
  margin-top: clamp(1rem, 2vw, 1.6rem);
}
#home-page .hm-films-row iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 2px;
}

/* =====================================================
   11 · LOGBOOK — news as journal entries
   ===================================================== */
#home-page .hm-logbook { padding: var(--hm-pad-y) 0; overflow: clip; }
#home-page .hm-logbook .hm-chapter-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
#home-page .hm-entry {
  display: grid;
  grid-template-columns: minmax(70px, 110px) minmax(120px, 200px) 1fr;
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.4rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--hm-hairline-dark);
}
#home-page .hm-entry:last-of-type { border-bottom: 1px solid var(--hm-hairline-dark); }
#home-page .hm-entry-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--sand);
  line-height: 1;
}
#home-page .hm-entry img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  filter: saturate(0.9);
  transition: filter 0.5s ease;
}
#home-page .hm-entry:hover img { filter: saturate(1.05); }
#home-page .hm-entry h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  color: var(--navy);
  margin: 0 0 0.4rem;
}
#home-page .hm-entry p {
  font-size: 0.94rem;
  color: var(--ink-muted);
  margin: 0;
  max-width: 68ch;
}
#home-page .hm-logbook-cta { margin-top: 2.5rem; }

/* =====================================================
   12 · JOURNAL — blog, two asymmetric editorial features
   ===================================================== */
#home-page .hm-journal {
  background: var(--white);
  border-top: 1px solid var(--hm-hairline-dark);
  padding: var(--hm-pad-y) 0;
  overflow: clip;
}
#home-page .hm-journal .hm-chapter-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
#home-page .hm-journal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
#home-page .hm-post {
  display: block;
  text-decoration: none;
  color: inherit;
}
#home-page .hm-post-media { overflow: hidden; border-radius: 2px; }
#home-page .hm-post img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  transition: transform 1s var(--hm-ease);
}
#home-page .hm-post:nth-child(2) img { aspect-ratio: 4 / 3; }
#home-page .hm-post:hover img { transform: scale(1.04); }
#home-page .hm-post-meta {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.2rem 0 0.6rem;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-muted);
}
#home-page .hm-post-meta::after { content: ''; flex: 1; height: 1px; background: var(--hm-hairline-dark); }
#home-page .hm-post h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 0.7rem;
  transition: color 0.4s ease;
}
#home-page .hm-post:hover h3 { color: var(--ocean); }
#home-page .hm-post p { font-size: 0.95rem; color: var(--ink-muted); margin: 0 0 1rem; max-width: 60ch; }

/* =====================================================
   13 · FAQ — numbered, oversized serif questions
   ===================================================== */
#home-page .faq {
  width: 100% !important;
  border-top: 1px solid var(--hm-hairline-dark) !important;
  padding: var(--hm-pad-y) 0 !important;
}
#home-page .faq .section-title {
  text-align: left;
  width: min(1400px, 100% - 2 * var(--hm-pad-x));
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  font-size: var(--hm-display);
  line-height: 1.05;
}
#home-page .faq .section-title::after { display: none; }
#home-page .faq-container {
  max-width: none;
  width: min(1000px, 100% - 2 * var(--hm-pad-x));
  margin: 0 auto;
  counter-reset: faq;
}
#home-page .faq-item { border-bottom: 1px solid var(--hm-hairline-dark); }
#home-page .faq-question {
  counter-increment: faq;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  padding: 1.3em 0.2em;
  gap: 1.5rem;
  transition: color 0.3s ease;
}
#home-page .faq-question:hover { color: var(--ocean); }
#home-page .faq-question-text { display: flex; gap: 1.2em; align-items: baseline; }
#home-page .faq-question-text::before {
  content: counter(faq, decimal-leading-zero);
  font-size: 0.55em;
  font-style: italic;
  color: var(--sand);
  flex-shrink: 0;
}
#home-page .faq-icon {
  width: 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hm-hairline-dark);
  border-radius: 50%;
  font-size: 1.2rem;
  transition: transform 0.4s var(--hm-ease), background 0.3s ease, color 0.3s ease;
}
#home-page .faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  background: var(--navy);
  color: var(--off-white);
}
#home-page .faq-answer { padding: 0 0.2em 1.6em 3.6em; max-width: 72ch; color: var(--ink); }

/* =====================================================
   14 · FINALE — full-bleed closing call
   ===================================================== */
#home-page .hm-finale {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: center;
  overflow: clip;
  background: var(--hm-navy-deep);
  color: var(--off-white);
}
#home-page .hm-finale-media {
  position: absolute; inset: 0;
  will-change: transform;
}
#home-page .hm-finale-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
#home-page .hm-finale::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 31, 63, 0.75) 0%, rgba(7, 31, 63, 0.45) 50%, rgba(7, 31, 63, 0.8) 100%);
}
#home-page .hm-finale .hm-wrap {
  position: relative; z-index: 2;
  padding: var(--hm-pad-y) 0;
  text-align: center;
}
#home-page .hm-finale .hm-eyebrow {
  justify-content: center;
  color: var(--sand);
}
#home-page .hm-finale .hm-eyebrow::after {
  content: '';
  width: 3.5rem; height: 1px;
  background: currentColor; opacity: 0.6;
  flex-shrink: 0;
}
#home-page .hm-finale-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--hm-display-xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--off-white);
  margin: 0 auto 1.5rem;
  max-width: 14ch;
  text-wrap: balance;
}
#home-page .hm-finale-title em { font-style: italic; font-weight: 500; color: var(--sky); }
#home-page .hm-finale-sub {
  font-size: 1.05rem;
  color: rgba(251, 250, 248, 0.85);
  max-width: 52ch;
  margin: 0 auto 2.5rem;
}
#home-page .hm-finale strong,
#home-page .hm-dark strong { color: var(--white); }
#home-page .hm-finale-actions {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}
#home-page .hm-finale-coords {
  margin-top: clamp(3rem, 7vw, 5rem);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(251, 250, 248, 0.5);
  font-variant-numeric: tabular-nums;
}

/* ---------- Footer polish (scoped) ---------- */
#home-page .site-footer { margin-top: 0; }

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 1050px) {
  #home-page .hm-vessel-media { grid-column: 1 / 10; }
  #home-page .hm-vessel-panel { grid-column: 6 / 13; }
  #home-page .hm-formula {
    grid-template-columns: minmax(50px, 70px) 1fr;
  }
  #home-page .hm-formula-desc { grid-column: 2; }
  #home-page .hm-formula-cta {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 880px) {
  #home-page .hm-hero-inner { grid-template-columns: 1fr; align-items: start; }
  #home-page .hm-hero-lede { border-left: none; padding-left: 0; max-width: 58ch; }
  #home-page .hm-hero-foot-inner { gap: 0 2rem; }
  #home-page .hm-manifesto-grid,
  #home-page .hm-arsenal-grid,
  #home-page .hm-where-grid,
  #home-page .hm-passage-grid,
  #home-page .hm-journal-grid { grid-template-columns: 1fr; }
  #home-page .hm-passage-aside { position: static; }
  #home-page .hm-arsenal-media { margin-top: 1rem; }
  #home-page .hm-vessel-grid { display: block; }
  #home-page .hm-vessel-media figcaption { display: none; }
  #home-page .hm-vessel-panel { margin: -3rem 1rem 0; }
  /* the techniques row is a horizontal carousel now, so it must not be stacked
     into a column here, and there is no hover state left to neutralise */
  #home-page .hm-films-row { grid-template-columns: repeat(2, 1fr); }
  #home-page .hm-entry { grid-template-columns: minmax(90px, 130px) 1fr; }
  #home-page .hm-entry-num { display: none; }
  #home-page .hm-num { font-size: clamp(5rem, 22vw, 9rem); }
  #home-page .faq-answer { padding-left: 0.2em; }
}

@media (max-width: 540px) {
  #home-page .hm-hero-foot-inner { flex-direction: column; gap: 0; padding: 0.8rem 0; }
  #home-page .hm-hero-fact { flex-direction: row; align-items: baseline; gap: 0.8rem; padding: 0.35rem 0; }
  #home-page .hm-formula-cta { flex-direction: column; align-items: flex-start; }
  #home-page .hm-entry { grid-template-columns: 1fr; }
  #home-page .hm-entry img { max-width: 240px; }
  #home-page .hm-films-row { grid-template-columns: 1fr; }
  #home-page .hm-stats { gap: 1.4rem; }
}

/* Reduced motion: kill bespoke animations beyond global reset */
@media (prefers-reduced-motion: reduce) {
  #home-page .hm-line > span { transform: none; animation: none; }
  #home-page .hm-hero-lede { opacity: 1; animation: none; }
  #home-page .hm-marquee-track { animation: none; }
  #home-page .hm-step { opacity: 1; }
}