/* ============================================================
   YACHT CINEMA PAGE V2 — page-scoped components
   Scoped under .page-yacht so nothing here can affect other
   routes. Uses the established Cinema Machina tokens; the only
   new tokens are the marine environmental accents, which are
   secondary to the bronze/gold brand system.
   ============================================================ */

.page-yacht {
  --marine-deep: #0d1b1e;
  --marine-accent: #28565d;
  --marine-accent-light: #326a72;
  --marine-line: rgba(50, 106, 114, 0.34);
  --marine-glow: rgba(40, 86, 93, 0.28);
}

/* ── Reusable media slot ──────────────────────────────────────
   The frame reserves its box from the declared aspect ratio, so
   a slot with no approved asset causes zero layout shift and the
   image can later be dropped in without touching layout. */
.yacht-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: linear-gradient(150deg, var(--marine-deep), #07100f 70%);
  aspect-ratio: var(--yacht-media-ratio, 16 / 10);
}

.yacht-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --media-focal is emitted per image by scripts/media-apply.mjs from the
     registry focal point, so a replacement asset never needs layout work. */
  object-position: var(--media-focal, 50% 50%);
}

.yacht-media > picture {
  position: absolute;
  inset: 0;
  display: block;
}

.yacht-media > picture + .yacht-fallback {
  display: none;
}

/* Empty state: a deliberate, brand-consistent panel — never a
   broken image and never a collapsed box. */
.yacht-media__placeholder,
.page-yacht .media-slot__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  background:
    radial-gradient(circle at 74% 18%, var(--marine-glow), transparent 58%),
    linear-gradient(160deg, var(--marine-deep) 8%, #060d0d 82%);
}

.yacht-media__placeholder::before,
.page-yacht .media-slot__placeholder::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--marine-line) 22%,
    var(--marine-line) 78%,
    transparent
  );
}

.yacht-media__label,
.page-yacht .media-slot__label {
  position: relative;
  color: var(--bronze);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.yacht-media__note,
.page-yacht .media-slot__note {
  position: relative;
  max-width: 34ch;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

/* ── Hero ──────────────────────────────────────────────────── */
.yacht-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 78vh, 46rem);
  padding: clamp(7rem, 12vh, 10rem) 0 clamp(4rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}

/* CSS atmosphere: carries the hero credibly before any approved
   image exists. Near-black marine gradient, restrained teal
   ambient light, a single fine horizon rule. No fake photograph. */
.yacht-hero__ambience {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(
      ellipse 70% 52% at 78% 34%,
      var(--marine-glow),
      transparent 66%
    ),
    radial-gradient(
      ellipse 46% 40% at 18% 88%,
      rgba(201, 169, 110, 0.07),
      transparent 70%
    ),
    linear-gradient(168deg, var(--marine-deep) 0%, #070605 68%);
}

.yacht-hero__ambience::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--marine-line) 30%,
    rgba(201, 169, 110, 0.22) 62%,
    transparent
  );
}

.yacht-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.yacht-hero__media picture,
.yacht-enquiry__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.yacht-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-focal, 62% 45%);
}

/* Keeps the headline legible over any future hero asset. */
.yacht-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(6, 8, 8, 0.94) 0%,
    rgba(6, 8, 8, 0.78) 38%,
    rgba(6, 8, 8, 0.34) 72%,
    rgba(6, 8, 8, 0.5) 100%
  );
}

.yacht-hero__inner {
  max-width: 46rem;
}

.yacht-hero h1 {
  margin-bottom: 1.2rem;
  text-wrap: balance;
}

.yacht-hero__lead {
  max-width: 46ch;
  margin-bottom: 2rem;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.72;
}

.yacht-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.1rem);
}

/* Secondary contextual link — gold text, understated underline
   reveal, small cinematic accent. Never a second boxed CTA. */
.yacht-textlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0 0.4rem 0.95rem;
  color: var(--bronze-light);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition:
    color 0.3s var(--ease-out),
    text-shadow 0.3s var(--ease-out);
}

.yacht-textlink::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border: 1px solid var(--bronze-dim);
  border-radius: 50%;
  pointer-events: none;
  transition:
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

.yacht-textlink::after {
  content: '';
  position: absolute;
  left: 0.95rem;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--bronze-light),
    rgba(226, 193, 155, 0.24)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease-out);
}

.yacht-textlink:hover,
.yacht-textlink:focus-visible {
  color: #f2d9b6;
  text-shadow: 0 0 12px rgba(226, 193, 155, 0.32);
}

.yacht-textlink:hover::after,
.yacht-textlink:focus-visible::after {
  transform: scaleX(1);
}

.yacht-textlink:hover::before,
.yacht-textlink:focus-visible::before {
  border-color: var(--bronze-light);
  box-shadow: 0 0 8px rgba(226, 193, 155, 0.28);
}

.yacht-textlink:focus-visible {
  outline: 2px solid rgba(201, 169, 110, 0.58);
  outline-offset: 4px;
}

/* ── Value proposition strip ───────────────────────────────── */
.yacht-value {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3.4vw, 3rem);
}

.yacht-value__item {
  padding-top: 1.1rem;
  border-top: 1px solid var(--marine-line);
}

.yacht-value__item h3 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.yacht-value__item p {
  max-width: 34ch;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ── Two-up split (media beside text) ──────────────────────── */
.yacht-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.yacht-split--reverse .yacht-split__media {
  order: 2;
}

.yacht-split__body > p {
  max-width: 62ch;
  color: var(--text-muted);
  line-height: 1.78;
}

.yacht-split__body > p + p {
  margin-top: 1.15rem;
}

/* ── Constraint list ───────────────────────────────────────── */
.yacht-constraints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  list-style: none;
}

.yacht-constraints li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.66;
}

.yacht-constraints li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--marine-accent-light);
}

/* ── Signal chain diagram (CSS/SVG only) ───────────────────── */
.yacht-chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--marine-line);
  border-radius: var(--btn-radius);
  overflow: hidden;
}

.yacht-chain__node {
  position: relative;
  padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(0.9rem, 1.8vw, 1.4rem);
  background: linear-gradient(
    180deg,
    rgba(13, 27, 30, 0.62),
    rgba(6, 9, 9, 0.8)
  );
  border-right: 1px solid var(--marine-line);
}

.yacht-chain__node:last-child {
  border-right: 0;
}

.yacht-chain__step {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--marine-accent-light);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
}

.yacht-chain__node h3 {
  margin-bottom: 0.4rem;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
}

.yacht-chain__node p {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.58;
}

/* ── Responsibility split ──────────────────────────────────── */
.yacht-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}

.yacht-scope__panel {
  padding: clamp(1.5rem, 2.8vw, 2.2rem);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: linear-gradient(
    180deg,
    rgba(20, 16, 10, 0.8),
    rgba(7, 6, 4, 0.9)
  );
}

.yacht-scope__panel--marine {
  border-color: var(--marine-line);
  background: linear-gradient(
    180deg,
    rgba(13, 27, 30, 0.6),
    rgba(6, 9, 9, 0.86)
  );
}

.yacht-scope__panel h3 {
  margin-bottom: 1rem;
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
}

.yacht-scope__panel ul {
  list-style: none;
}

.yacht-scope__panel li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.4rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}

.yacht-scope__panel li:last-child {
  border-bottom: 0;
}

.yacht-scope__panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 7px;
  height: 1px;
  background: var(--bronze-dim);
}

.yacht-scope__panel--marine li::before {
  background: var(--marine-accent-light);
}

/* ── Process timeline ──────────────────────────────────────── */
.yacht-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}

.yacht-process__step {
  position: relative;
  padding-top: 2.6rem;
}

.yacht-process__step::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 1.05rem;
  height: 1px;
  background: var(--marine-line);
}

.yacht-process__num {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--bronze-dim);
  border-radius: 50%;
  background: var(--bg);
  color: var(--bronze);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.yacht-process__step h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1rem, 1.25vw, 1.14rem);
}

.yacht-process__step p {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.62;
}

/* ── Contextual Film Request panel ─────────────────────────── */
.yacht-film {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  padding: clamp(1.8rem, 3.4vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(201, 169, 110, 0.06),
      transparent 60%
    ),
    linear-gradient(170deg, rgba(13, 27, 30, 0.42), rgba(7, 6, 4, 0.86));
}

.yacht-film p {
  max-width: 56ch;
  margin-bottom: 1.4rem;
  color: var(--text-muted);
  line-height: 1.74;
}

/* ── Closing enquiry panel ─────────────────────────────────── */
.yacht-enquiry {
  position: relative;
  padding: clamp(3.4rem, 7vw, 6rem) 0;
  overflow: hidden;
  isolation: isolate;
}

.yacht-enquiry__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(165deg, var(--marine-deep), #060909 78%);
}

.yacht-enquiry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-focal, 50% 40%);
}

.yacht-enquiry__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 9, 9, 0.72), rgba(6, 9, 9, 0.88));
}

.yacht-enquiry__inner {
  max-width: 44rem;
}

.yacht-enquiry p {
  max-width: 54ch;
  margin-bottom: 1.8rem;
  color: var(--text-secondary);
  line-height: 1.74;
}

.yacht-enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.1rem);
}

/* ── Closing boundaries note ───────────────────────────────── */
.yacht-boundaries {
  max-width: 68ch;
  padding-left: 1.1rem;
  border-left: 1px solid var(--marine-line);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.76;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .yacht-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .yacht-chain__node {
    border-bottom: 1px solid var(--marine-line);
  }
  .yacht-chain__node:nth-child(2n) {
    border-right: 0;
  }
  .yacht-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .yacht-value,
  .yacht-split,
  .yacht-scope,
  .yacht-film {
    grid-template-columns: minmax(0, 1fr);
  }
  .yacht-split--reverse .yacht-split__media {
    order: 0;
  }
  .yacht-constraints {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .yacht-chain,
  .yacht-process {
    grid-template-columns: minmax(0, 1fr);
  }
  .yacht-chain__node {
    border-right: 0;
  }
  .yacht-hero__actions,
  .yacht-enquiry__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.3rem;
  }
  .yacht-hero__actions .btn,
  .yacht-enquiry__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yacht-textlink,
  .yacht-textlink::before,
  .yacht-textlink::after {
    transition: none;
  }
}

/* Yacht page root: sections manage their own rhythm, so the main element
   only needs to establish the stacking context for the hero ambience. */
.yacht-page {
  position: relative;
  isolation: isolate;
}

/* ============================================================
   YACHT VISUAL UPLIFT — six chapters
   Every media slot on this page is ambient, so production
   renders no <img> at all. These rules are therefore not
   decoration around an image: they ARE the production visual.
   ============================================================ */

/* ── A. Hero chain overlay ───────────────────────────────── */

.yacht-hero__chain {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.yacht-hero__chain li {
  position: relative;
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(201, 169, 110, 0.22);
  border-radius: 4px;
  background: rgba(4, 10, 12, 0.55);
}

.yacht-hero__chain li + li::before {
  content: '→';
  position: absolute;
  top: 50%;
  left: -0.42rem;
  transform: translate(-50%, -50%);
  color: var(--bronze-dim);
  font-size: 0.7rem;
}

.yacht-hero__chain span {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── B. Home cinema vs yacht cinema ──────────────────────── */

.yacht-compare {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.yacht-compare__head,
.yacht-compare__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding: 0.95rem clamp(1rem, 2.4vw, 1.6rem);
}

.yacht-compare__head {
  background: rgba(201, 169, 110, 0.07);
}

.yacht-compare__rows {
  margin: 0;
}

.yacht-compare__row {
  border-top: 1px solid rgba(201, 169, 110, 0.1);
}

.yacht-compare__row dd {
  margin: 0;
}

.yacht-compare__factor {
  color: var(--bronze);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.yacht-compare__home,
.yacht-compare__sea {
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Land and sea are told apart by a word and a rule, never by hue alone. */
.yacht-compare__home {
  color: var(--text-muted);
}

.yacht-compare__sea {
  padding-left: 0.85rem;
  border-left: 2px solid var(--bronze-dim);
  color: var(--text-primary);
}

.yacht-compare__row .yacht-compare__home::before {
  content: 'Home · ';
  color: var(--text-muted);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.yacht-compare__row .yacht-compare__sea::before {
  content: 'At sea · ';
  color: var(--bronze);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── C. Environments aboard ──────────────────────────────── */

.yacht-env {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.yacht-env__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}

.yacht-env__state {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.1rem, 2.5vw, 1.8rem);
  scroll-margin-top: 6rem;
}

.yacht-env__media {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.yacht-env__body h3 {
  margin: 0 0 0.6rem;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
}

.yacht-env__points {
  margin: 1.1rem 0;
  padding: 0;
  list-style: none;
}

.yacht-env__points li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.4rem;
  border-top: 1px solid rgba(201, 169, 110, 0.1);
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
}

.yacht-env__points li::before {
  content: '';
  position: absolute;
  top: 1rem;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bronze-dim);
}

.yacht-env__boundary {
  margin: 0;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(201, 169, 110, 0.35);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Designed production fallback: a drawn marine interior, never an empty box
   and never presented as a photograph of delivered work. */
.yacht-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.1rem;
  background:
    linear-gradient(
      to top,
      rgba(4, 10, 12, 0.92) 0%,
      rgba(4, 10, 12, 0.35) 45%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at 70% 18%,
      rgba(201, 169, 110, 0.16),
      transparent 60%
    ),
    repeating-linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.018) 0 2px,
      transparent 2px 26px
    ),
    linear-gradient(160deg, #122124 0%, #0a1416 55%, #060d0f 100%);
}

.yacht-fallback::before {
  content: '';
  position: absolute;
  inset: 12% 8% 26%;
  border: 1px solid rgba(201, 169, 110, 0.22);
  border-radius: 3px;
  background: linear-gradient(
    170deg,
    rgba(201, 169, 110, 0.08),
    rgba(4, 10, 12, 0.6)
  );
}

/* A slot with no approved photograph still has to look finished. These two
   states carry a drawn plan instead: an architectural diagram, not a
   placeholder. The abstract ::before panel is suppressed so the drawing is
   the only figure in the frame. */
.yacht-fallback--drawn::before {
  content: none;
}

.yacht-plan {
  position: absolute;
  inset: 8% 7% 16%;
  width: 86%;
  height: 76%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.yacht-plan__hull path {
  stroke: rgba(201, 169, 110, 0.26);
  stroke-width: 1;
  fill: rgba(8, 18, 20, 0.5);
}

.yacht-plan__acoustic path {
  stroke: rgba(201, 169, 110, 0.34);
  stroke-width: 1;
}

.yacht-plan__display rect {
  fill: rgba(201, 169, 110, 0.5);
  stroke: none;
}

.yacht-plan__glow {
  stroke: rgba(201, 169, 110, 0.22);
  stroke-width: 6;
  filter: blur(3px);
}

.yacht-plan__zone path {
  stroke: rgba(201, 169, 110, 0.3);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

.yacht-plan__furniture rect,
.yacht-plan__furniture path,
.yacht-plan__equipment rect,
.yacht-plan__equipment path {
  stroke: rgba(201, 169, 110, 0.4);
  stroke-width: 1;
}

.yacht-plan__equipment circle {
  fill: rgba(201, 169, 110, 0.75);
  stroke: none;
}

.yacht-plan__rack rect,
.yacht-plan__rack path {
  stroke: rgba(201, 169, 110, 0.42);
  stroke-width: 1;
}

.yacht-plan__depth {
  stroke: rgba(201, 169, 110, 0.24);
}

.yacht-plan__vent path {
  stroke: rgba(201, 169, 110, 0.34);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.yacht-plan__clearance rect {
  stroke: rgba(201, 169, 110, 0.2);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}

.yacht-plan__routes path {
  stroke: rgba(201, 169, 110, 0.32);
  stroke-width: 1;
}

.yacht-plan__routes circle {
  fill: rgba(201, 169, 110, 0.6);
  stroke: none;
}

@media (prefers-reduced-motion: reduce) {
  .yacht-plan__glow {
    filter: none;
  }
}

/* In the taller mobile frame the plan would otherwise float as a small figure
   in a large void, so let it take the available width. */
@media (max-width: 720px) {
  .yacht-plan {
    inset: 6% 4% 16%;
    width: 92%;
    height: 78%;
  }
}

.yacht-fallback--night::before {
  inset: 16% 10% 34%;
  border-color: rgba(201, 169, 110, 0.14);
}

.yacht-fallback__label {
  position: relative;
  color: var(--bronze);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── D. Marine signal architecture ───────────────────────── */

.yacht-signal {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.yacht-chain__stage {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(201, 169, 110, 0.18);
  border-radius: 6px;
  background: rgba(4, 10, 12, 0.5);
  transition: border-color 0.25s ease;
}

.yacht-chain__stage.is-active {
  border-color: var(--bronze-dim);
  background: rgba(201, 169, 110, 0.09);
}

.yacht-chain__label {
  color: var(--bronze);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.yacht-chain__value {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.6vw, 1.1rem);
  line-height: 1.35;
}

.yacht-signal__modes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  padding: 0;
  list-style: none;
}

.yacht-signal__modes li {
  padding: 1rem 1.15rem;
  border: 1px solid rgba(201, 169, 110, 0.14);
  border-radius: 6px;
  background: rgba(4, 10, 12, 0.42);
}

.yacht-signal__modes h3 {
  margin: 0 0 0.3rem;
  color: var(--bronze-light);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.yacht-signal__modes p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.55;
}

.yacht-signal__deps {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* JavaScript-built rail, shared by the environment and signal selectors. */
.yacht-rail {
  display: flex;
  gap: 0.45rem;
  margin: 0 0 1.5rem;
  padding-bottom: 0.35rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.yacht-rail__tab {
  flex: 0 0 auto;
  padding: 0.6rem 0.95rem;
  border: 1px solid rgba(201, 169, 110, 0.18);
  border-radius: 999px;
  background: rgba(4, 10, 12, 0.55);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  scroll-snap-align: start;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.yacht-rail__tab:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.yacht-rail__tab.is-active {
  border-color: var(--bronze-dim);
  background: rgba(201, 169, 110, 0.14);
  color: var(--bronze-light);
}

.page-yacht :focus-visible {
  outline: 2px solid var(--bronze-dim);
  outline-offset: 2px;
}

/* ── E. Control modes ────────────────────────────────────── */

.yacht-control {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.yacht-control > picture {
  display: block;
  width: 100%;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  aspect-ratio: 16 / 10;
}

.yacht-control > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-focal, 50% 50%);
}

.yacht-modes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yacht-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.9rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(201, 169, 110, 0.16);
  border-radius: 8px;
  background: rgba(4, 10, 12, 0.42);
}

/* Brand-neutral: drawn here, copied from no manufacturer interface. */
.yacht-mode__panel {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(201, 169, 110, 0.22);
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.02) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(160deg, rgba(8, 16, 18, 0.95), rgba(4, 8, 9, 0.98));
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.6);
}

.yacht-mode__title,
.yacht-mode__sub {
  display: block;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.yacht-mode__title {
  color: var(--bronze-light);
  font-size: clamp(0.82rem, 1.6vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.yacht-mode__sub {
  margin-top: 0.3rem;
  color: rgba(201, 169, 110, 0.5);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
}

.yacht-mode__read {
  margin: 0;
}

.yacht-mode__read > div {
  display: grid;
  grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr);
  gap: 0.2rem 0.9rem;
  padding: 0.45rem 0;
  border-top: 1px solid rgba(201, 169, 110, 0.09);
}

.yacht-mode__read dt {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.yacht-mode__read dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}

.yacht-control__note {
  margin: 1.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* ── F. Ownership journey ────────────────────────────────── */

.yacht-journey {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0;
  padding: 0;
  list-style: none;
  counter-reset: yacht-step;
}

.yacht-journey__step {
  position: relative;
  counter-increment: yacht-step;
  flex: 1 1 9rem;
  min-width: 0;
  padding: 0.9rem 0.95rem 0.9rem 2.4rem;
  border: 1px solid rgba(201, 169, 110, 0.16);
  border-radius: 6px;
  background: rgba(4, 10, 12, 0.45);
}

.yacht-journey__step::before {
  content: counter(yacht-step, decimal-leading-zero);
  position: absolute;
  top: 0.95rem;
  left: 0.85rem;
  color: var(--bronze-dim);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
}

.yacht-journey__step span {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.yacht-resp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.yacht-resp__note {
  max-width: 68ch;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--bronze-dim);
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.65;
}

/* ── G. Closing panel ────────────────────────────────────── */

.yacht-enquiry__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* The panel sat at 45% opacity over a lit background with a 0.16-alpha
   border, so its edges disappeared and the body copy competed with whatever
   was behind it. A more opaque surface and a stronger hairline fix that far
   more cheaply than a backdrop-filter, which would cost a compositing layer
   on exactly the mobile hardware this page is heaviest on. */

.yacht-enquiry__aside {
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
  border: 1px solid rgba(201, 169, 110, 0.34);
  border-radius: 8px;
  background: rgba(3, 8, 10, 0.88);
}

.yacht-enquiry__aside p {
  color: var(--text-secondary);
}

.yacht-enquiry__aside .yacht-textlink {
  border-bottom-color: var(--bronze);
}

.yacht-enquiry__aside h3 {
  margin: 0 0 0.6rem;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 400;
  line-height: 1.25;
}

.yacht-enquiry__actions {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ── Enhanced selectors ──────────────────────────────────── */

.yacht-env.is-enhanced .yacht-env__state {
  display: none;
}

.yacht-env.is-enhanced .yacht-env__state.is-active {
  display: grid;
}

.yacht-signal.is-enhanced .yacht-signal__modes > li {
  display: none;
}

.yacht-signal.is-enhanced .yacht-signal__modes > li.is-active {
  display: block;
}

.yacht-control.is-enhanced .yacht-mode {
  display: none;
}

.yacht-control.is-enhanced .yacht-mode.is-active {
  display: grid;
}

/* ── Breakpoints ─────────────────────────────────────────── */

@media (min-width: 861px) {
  .yacht-compare__head,
  .yacht-compare__row {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
  }

  .yacht-compare__row .yacht-compare__home::before,
  .yacht-compare__row .yacht-compare__sea::before {
    content: none;
  }

  .yacht-env__state {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }

  .yacht-chain {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .yacht-signal__modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yacht-signal.is-enhanced .yacht-signal__modes {
    grid-template-columns: minmax(0, 1fr);
  }

  .yacht-resp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yacht-enquiry__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }

  .yacht-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yacht-control.is-enhanced .yacht-modes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  .yacht-chain {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .yacht-rail__tab,
  .yacht-chain__stage {
    transition: none;
  }
}

/* The salon fallback keeps the base composition; the modifier exists so the
   markup names every environment explicitly rather than relying on order. */
.yacht-fallback--salon::before {
  inset: 14% 9% 28%;
}

.yacht-enquiry__body {
  align-self: start;
}

.yacht-signal__media {
  position: relative;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  border-radius: 10px;
}

.yacht-fallback--signal::before {
  inset: 18% 14% 22%;
  background: repeating-linear-gradient(
    90deg,
    rgba(201, 169, 110, 0.14) 0 2px,
    rgba(4, 10, 12, 0.72) 2px 34px
  );
}

/* The environment slots ship 4:5 mobile crops against 16:10 desktop ones, so
   they need a per-breakpoint ratio or the preview image shifts layout as it
   loads — an <img> can only carry one intrinsic ratio. Applying it to every
   environment state, photographed or drawn, also keeps the panel a constant
   height as a visitor moves between the four tabs. */
@media (max-width: 720px) {
  .yacht-env__media,
  .yacht-signal__media,
  .yacht-control > picture {
    --yacht-media-ratio: 4 / 5;
    aspect-ratio: 4 / 5;
  }
}

/* A band, not a void: the signal fallback sits under the chapter heading as a
   drawn rack elevation rather than a tall empty rectangle. */
.yacht-fallback--signal {
  align-items: center;
}

.yacht-fallback--signal::before {
  inset: 22% 12%;
  border-radius: 2px;
}