/* FLEXIPAX home refresh: full-colour imagery, quieter labels, SDK film section.
   Loaded after index-CDu_yZb8.css on the landing page only. */

:root {
  --film-bg: #0a0a0a;
  --film-ink: #f4f2ee;
  --film-muted: #a3a3a3;
  --film-line: rgba(255, 255, 255, 0.14);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1. Colour restored --------------------------------------------------- */
.parallax-image,
.hero-media .parallax-image,
.arrival-picture img,
.collage-large img,
.scroll-collage .collage-large img,
.collage-small img,
.story-product img,
.immersion-phone,
.journey-cinematic .immersion-phone,
.film-device,
.ship-reel img,
.original-figure img,
.passage-image img,
.phone-picture,
.animation-art,
.hero-heading .spatial-atmosphere {
  filter: saturate(1.06) contrast(1.02) !important;
}
/* The deck photo sits under white display type: keep it colour, just a touch deeper. */
.film-ocean img { filter: saturate(1.08) brightness(0.86) !important; }
/* A soft scrim keeps the hero overlay type legible on the colour photo. */
.hero-media:after {
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.42), rgba(10, 10, 10, 0) 62%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.28), rgba(10, 10, 10, 0) 38%) !important;
}

/* 2. Small typewriter labels and decorative lines removed --------------- */
.studio-header-note,
.hero-top,
.hero-aside .chapter-label,
.hero-image-content > span,
.hero-media figcaption,
.film-opening > span,
.film-label,
.film-grid,
.section-marker,
.arrival-picture figcaption,
.intro-copy .chapter-label,
.rail-top,
.panel-top,
.access-flow li > span,
.collage-meta,
.collage-large figcaption,
.collage-small figcaption,
.layer-intro .eyebrow,
.layer-count,
.step-index,
.step-tag,
.integration-bottom > span,
.product-caption,
.showcase-index,
.showcase-kicker,
.showcase-divider,
.ship-reel figcaption,
.faq-heading .eyebrow,
.faq-number,
.footer-invite .eyebrow,
.footer-base > span:nth-of-type(2),
.section-seam,
.depth-field,
.immersion-orbit,
.layer-depth i {
  display: none !important;
}
.key-showcase:before,
.key-showcase:after { display: none !important; }

/* Labels that still do a job read in the brand face, not a typewriter. */
.studio-menu-intro > span,
.studio-menu-base,
.studio-menu nav a > span,
.email-option-label,
.footer-directory .eyebrow,
.footer-base,
.text-link,
.integration-bottom {
  font-family: Inter, Arial, sans-serif !important;
  letter-spacing: 0.02em !important;
}
.footer-directory .eyebrow { font-size: 12px !important; font-weight: 700; color: var(--orange); }
.footer-base { font-size: 13px !important; }
.email-option-label { font-size: 12px !important; font-weight: 600; }
.text-link { font-size: 12px !important; }
/* Grids that used to reserve a column for the removed numbers. */
.connection-title { grid-template-columns: 1fr !important; gap: 0 !important; }
.connection-row .step-body { padding-left: 0 !important; }
.faq-list summary { grid-template-columns: 1fr 18px !important; }
.access-flow h3 { margin-top: 0 !important; }
.collage-feel { -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }

/* 3. SDK film: centred screening room ------------------------------------- */
.sdk-film {
  background: var(--film-bg);
  color: var(--film-ink);
  padding: clamp(72px, 9vw, 140px) var(--gutter, 4vw);
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: 90px;
  text-align: center;
}
.sdk-film__inner { max-width: 1240px; margin: 0 auto; }

.sdk-film__head { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.4vw, 32px); }
.sdk-film__title {
  margin: 0;
  color: #fff;
  font-size: clamp(50px, 8vw, 132px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.sdk-film__title span,
.sdk-film__title em { display: block; }
.sdk-film__title em { color: var(--orange); font-style: normal; }
.sdk-film__lede {
  margin: 0;
  max-width: 52ch;
  color: #cfcac2;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  text-wrap: pretty;
}

.sdk-film__stage { margin: clamp(44px, 5.5vw, 80px) 0 0; }
.sdk-film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--film-bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 0;
}
.sdk-film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--film-bg);
}
.sdk-film__caption {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.sdk-film__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
}
.sdk-film__progress span {
  display: block;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.sdk-film__controls {
  position: absolute;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 24px);
  display: flex;
  gap: 10px;
  transition: opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .sdk-film__frame[data-state="playing"]:not(:hover):not(:focus-within) .sdk-film__controls { opacity: 0.55; }
}
.sdk-film__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.6);
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.sdk-film__btn svg { width: 20px; height: 20px; fill: currentColor; }
.sdk-film__btn:hover { background: var(--orange); border-color: var(--orange); color: #1a1a1a; }
.sdk-film__btn:active { transform: scale(0.94); }
.sdk-film__btn .i-play,
.sdk-film__btn .i-sound { display: none; }
.sdk-film__frame:not([data-state="playing"]) .i-pause { display: none; }
.sdk-film__frame:not([data-state="playing"]) .i-play { display: block; }
.sdk-film__btn[aria-pressed="true"] .i-muted { display: none; }
.sdk-film__btn[aria-pressed="true"] .i-sound { display: block; }

/* Chapter timeline, synced to the film's own cuts */
.sdk-film__beats {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.sdk-film__beats button {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 20px 6px 8px;
  border: 0;
  background: none;
  color: var(--film-muted);
  font: inherit;
  cursor: pointer;
}
.sdk-film__beats button::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.sdk-film__beats i {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--orange);
  transform: scaleX(var(--beat, 0));
  transform-origin: 0 50%;
}
.sdk-film__beat-n { color: var(--orange); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sdk-film__beats strong {
  color: #bdb8b0;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}
.sdk-film__beats button:hover strong,
.sdk-film__beats button[aria-current="true"] strong { color: #fff; }

.sdk-film__answer {
  max-width: 720px;
  margin: clamp(64px, 7vw, 104px) auto 0;
}
.sdk-film__answer h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.sdk-film__answer > p { margin: 0 auto; color: #cfcac2; font-size: 18px; line-height: 1.7; }
.sdk-film__transcript { margin-top: 22px; color: var(--film-muted); }
.sdk-film__transcript summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}
.sdk-film__transcript summary::-webkit-details-marker { display: none; }
.sdk-film__transcript summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  font-weight: 400;
  transition: transform 200ms var(--ease-out-quint);
}
.sdk-film__transcript[open] summary::before { transform: rotate(45deg); }
.sdk-film__transcript p { margin: 8px auto 0; max-width: 62ch; font-size: 15px; line-height: 1.7; }

.sdk-film__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 32px;
  margin-top: clamp(36px, 4vw, 52px);
}
.sdk-film__primary {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--orange);
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background-color 150ms ease, transform 150ms var(--ease-out-quint);
}
.sdk-film__primary:hover { background: #fff; color: #1a1a1a; }
.sdk-film__primary:active { transform: scale(0.98); }
.sdk-film__secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  transition: border-color 150ms ease, color 150ms ease;
}
.sdk-film__secondary:hover { color: var(--orange); border-color: var(--orange); }

.sdk-film :is(button, a, summary):focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* Scroll-driven entrance: the frame settles from a slight inset as it arrives. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sdk-film__frame {
      animation: sdk-film-open linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}
@keyframes sdk-film-open {
  from { transform: scale(0.9); opacity: 0.6; }
  to { transform: scale(1); opacity: 1; }
}

@media (width <= 760px) {
  .sdk-film__beats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; }
}
@media (width <= 560px) {
  .sdk-film__stage { margin-inline: calc(var(--gutter, 20px) * -1); }
  .sdk-film__frame { border-radius: 0; box-shadow: none; }
  .sdk-film__primary { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sdk-film *, .sdk-film *::before { transition-duration: 0.01ms !important; }
}

/* 4. Closing act: proof, answers, invitation ---------------------------------- */

/* Integration: three centred columns */
.integration .integration-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center;
  gap: 24px !important;
  text-align: center;
}
.integration-head .line-content { white-space: normal !important; }
.integration-head h2 { margin: 0 !important; }
.integration-head p { max-width: 52ch; margin: 0 auto; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; }
.integration .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: 1240px;
  margin: 0 auto;
  border-top: 0 !important;
}
.integration .connection-row {
  border: 0 !important;
  border-top: 3px solid var(--orange) !important;
  padding: 30px 0 0 !important;
  text-align: center;
}
.integration .connection-row:is(:hover, :focus-within) { padding-inline: 0 !important; }
.integration .connection-row::before,
.integration .connection-row::after { display: none !important; }
.integration .connection-title { justify-items: center; font-size: clamp(26px, 2.4vw, 38px) !important; }
.integration .step-body { display: block !important; padding: 14px 0 0 !important; }
.integration .step-body > p { max-width: 34ch; margin: 0 auto; font-size: 17px !important; line-height: 1.65 !important; }
.integration .step-body .text-link { margin-top: 16px; }
.integration-bottom {
  justify-content: center !important;
  align-items: center;
  gap: 16px 36px !important;
  margin-top: clamp(40px, 5vw, 64px);
}

/* Story: the Attica quote is the emotional peak, set large and centred. */
.story { background: #fff !important; text-align: center; }
.story .story-grid { display: block !important; max-width: 1080px; margin: 0 auto !important; }
.story .story-product,
.story .story-booking { display: none !important; }
.story-copy h2 { margin: 0 auto; }
.story-copy blockquote {
  max-width: 30ch !important;
  margin: clamp(32px, 4vw, 56px) auto !important;
  font-size: clamp(26px, 3.2vw, 48px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}
.story-copy blockquote::first-letter { color: var(--orange); }
.story-copy .attribution { align-items: center; font-size: 15px !important; }
.story-copy .attribution b { font-size: 15px; letter-spacing: 0.04em; }
.story-copy .block-link { margin-top: 28px; }

/* More sea: a full-bleed colour photograph with the headline over it. */
.ship-showcase {
  position: relative;
  margin-top: 0 !important;
  padding: 0 !important;
  background: var(--film-bg) !important;
  color: #fff !important;
}
.ship-showcase .showcase-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: "stack";
  min-height: clamp(520px, 82vh, 900px);
  gap: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.ship-showcase .ship-reel,
.ship-showcase .showcase-copy { grid-area: stack; }
.ship-showcase .ship-reel {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
}
.ship-showcase :is(.ship-reel-window, .ship-reel-track, .ship-reel figure) {
  width: 100%;
  height: 100% !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  border: 0 !important;
}
.ship-showcase .ship-reel img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: 50% 55%;
}
.ship-showcase .ship-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.45) 45%, rgba(10, 10, 10, 0.78) 100%);
}
.ship-showcase .showcase-copy {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
  padding: clamp(56px, 8vw, 120px) var(--gutter, 24px);
  text-align: center;
  color: #fff;
}
.ship-showcase .showcase-copy h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(48px, 7.5vw, 120px) !important;
  line-height: 0.92 !important;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}
.ship-showcase .showcase-copy h2 br + span { color: var(--orange); }
.ship-showcase .showcase-rule { display: none !important; }
.ship-showcase .showcase-copy p { max-width: 46ch; margin: 22px auto 0; color: rgba(255, 255, 255, 0.88) !important; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; }
.ship-showcase .showcase-copy .studio-link { margin-top: 26px; color: #fff !important; border-color: rgba(255, 255, 255, 0.7); }

/* FAQ on the landing page: centred like the subpages. */
#marine-faq .faq-heading h2 { margin-inline: auto; }

/* Finale: one invitation, one button. */
.contact { text-align: center; }
.contact .contact-grid {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 24px !important;
  margin: 0 auto !important;
}
.contact h2 { font-size: clamp(56px, 9vw, 150px) !important; margin: 0 !important; }
.contact-action { display: flex !important; flex-direction: column; align-items: center; }
.contact-action p { max-width: none !important; margin: 0 !important; font-size: clamp(20px, 1.8vw, 26px) !important; }
.contact-action .contact-button { display: none !important; }
.contact .email-link {
  display: inline-flex !important;
  align-items: center;
  margin-top: clamp(28px, 3vw, 40px);
  padding: 20px 40px !important;
  border: 0 !important;
  border-radius: 999px;
  background: var(--ink);
  color: #fff !important;
  font-size: clamp(15px, 1.2vw, 18px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms var(--ease-out-quint);
}
.contact .email-link:hover { background: #fff; color: var(--ink) !important; text-decoration: none !important; }
.contact .email-link:active { transform: scale(0.98); }
.contact .email-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* One-time rise as each beat arrives. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .integration .steps,
    .story-copy blockquote,
    .ship-showcase .showcase-copy,
    #marine-faq .faq-list,
    .contact .contact-grid {
      animation: fx-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
  }
}
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}

@media (width <= 900px) {
  .integration .steps { grid-template-columns: 1fr; max-width: 560px; }
}

/* Photo fills the whole showcase; the copy sets the height. */
.ship-showcase .showcase-layout { position: relative; }
.ship-showcase .ship-reel { position: absolute !important; inset: 0; }
.ship-showcase .showcase-copy { min-height: clamp(520px, 82vh, 900px); justify-content: flex-end; }
.integration-head p { border-left: 0 !important; padding-left: 0 !important; }
.ship-showcase .showcase-layout { padding: 0 !important; }
.ship-showcase .ship-reel { grid-area: auto !important; }

/* 5. Calmer start: hero, then the phone passage. The photo carries no second headline
      (the passage opens with "All aboard"), and "Leave the wait behind" repeated the hero. */
.hero-image-content { display: none !important; }
.hero-media:after { background: linear-gradient(0deg, rgba(10, 10, 10, 0.18), rgba(10, 10, 10, 0) 40%) !important; }
.arrival-section { display: none !important; }

/* 6. Brand X: orange quote marks and the X of FLEXIPAX, the rest stays ink. */
.story-copy blockquote::first-letter { color: inherit !important; }
.q-mark, .brand-x { color: var(--orange); }

/* 7. The "Feel free" collage is removed: the phone and ship already appear in the passage above. */
.scroll-collage { display: none !important; }

/* 8. SDK film on brand orange, the video in a dark device frame. No visible controls. */
.sdk-film { background: var(--orange) !important; color: #1f1f1f !important; }
.sdk-film__title { color: #1f1f1f !important; }
.sdk-film__title em { color: #fff !important; }
.sdk-film__lede { color: #2b2b2b !important; }
.sdk-film__stage { max-width: 1120px; margin-inline: auto !important; }
.sdk-film__frame {
  border-radius: 22px !important;
  background: #0a0a0a !important;
  box-shadow: 0 0 0 10px #1f1f1f, 0 60px 100px -50px rgba(70, 35, 0, 0.6) !important;
  cursor: pointer;
}
.sdk-film__frame:focus-visible { outline: 3px solid #1f1f1f; outline-offset: 16px; }
.sdk-film__progress { background: rgba(255, 255, 255, 0.14) !important; }
.sdk-film__beats { margin-top: 44px !important; }
.sdk-film__beats button { color: #1f1f1f !important; }
.sdk-film__beats button::before { background: rgba(31, 31, 31, 0.2) !important; }
.sdk-film__beats i { background: #1f1f1f !important; }
.sdk-film__beat-n { color: #1f1f1f !important; opacity: 0.6; }
.sdk-film__beats strong { color: #1f1f1f !important; }
.sdk-film__beats button[aria-current="true"] .sdk-film__beat-n { opacity: 1; }
.sdk-film__answer h3 { color: #1f1f1f !important; }
.sdk-film__answer > p { color: #2b2b2b !important; }
.sdk-film__transcript { color: #2b2b2b !important; }
.sdk-film__transcript summary { color: #1f1f1f !important; }
.sdk-film__transcript summary::before { border-color: rgba(31, 31, 31, 0.45) !important; }
.sdk-film__primary { background: #1f1f1f !important; color: #fff !important; }
.sdk-film__primary:hover { background: #fff !important; color: #1f1f1f !important; }
.sdk-film__secondary { color: #1f1f1f !important; border-color: rgba(31, 31, 31, 0.55) !important; }
.sdk-film__secondary:hover { color: #fff !important; border-color: #fff !important; }
.sdk-film :is(button, a, summary):focus-visible { outline-color: #1f1f1f !important; }
@media (width <= 560px) {
  .sdk-film__stage { margin-inline: 0 !important; }
  .sdk-film__frame { border-radius: 14px !important; box-shadow: 0 0 0 6px #1f1f1f !important; }
}

/* 9. One tap, three layers: three stacked bands (access, connect, welcome). */
.marine-layers {
  display: block !important;
  background: #fff !important;
  padding: var(--section-space, 112px) var(--gutter, 24px) !important;
}
.layer-intro {
  position: static !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 820px;
  margin: 0 auto clamp(44px, 5vw, 72px);
  text-align: center;
}
.layer-intro h2 { margin: 0 0 20px !important; }
.layer-intro p { max-width: 46ch !important; margin: 0 auto 22px !important; }
.layer-stack {
  display: grid !important;
  gap: 0 !important;
  max-width: 1240px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.35);
}
.marine-layer {
  position: relative !important;
  top: auto !important;
  min-height: 0 !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 4vw, 56px) !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.marine-layer:nth-child(1) { background: #f6f6f5 !important; }
.marine-layer:nth-child(2) { background: #ebebe9 !important; }
.marine-layer:nth-child(3) { background: var(--orange) !important; }
.marine-layer .layer-depth {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  opacity: 1 !important;
  transform: none !important;
  color: inherit !important;
}
.marine-layer .layer-depth > span {
  position: static !important;
  translate: none !important;
  color: var(--orange);
  font-size: clamp(26px, 2.4vw, 38px) !important;
  font-weight: 800;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}
.marine-layer:nth-child(3) .layer-depth > span { color: #fff; }
.marine-layer .layer-depth i { display: none !important; }
.marine-layer h3 { margin: 0 !important; font-size: clamp(22px, 2vw, 32px) !important; line-height: 1.1 !important; }
.marine-layer p { max-width: 46ch !important; margin: 0 !important; font-size: 17px !important; line-height: 1.6 !important; }
.marine-layer > a { margin: 0 !important; padding: 0 !important; white-space: nowrap; }
@media (width <= 1000px) {
  .marine-layer { grid-template-columns: 1fr; gap: 12px; }
}

/* 10. One connection, a better arrival: numbered steps, a dark callout, answer cards. */
.access-explainer { border-top: 0 !important; margin-top: clamp(64px, 8vw, 120px) !important; padding-top: 0 !important; }
.access-heading {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 20px !important;
  max-width: 900px;
  margin: 0 auto clamp(44px, 5vw, 72px) !important;
  text-align: center;
}
.access-heading h2 .line-mask { padding-left: 0 !important; }
.access-heading > p { max-width: 60ch !important; margin: 0 auto; }
.access-flow { counter-reset: step; max-width: 1240px; margin: 0 auto !important; }
.access-flow li { counter-increment: step; border-top: 0 !important; padding-top: 0 !important; }
.access-flow li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  color: var(--orange);
  font-size: clamp(56px, 5vw, 84px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}
.access-flow h3 { min-height: 0 !important; margin: 0 0 12px !important; font-size: clamp(22px, 2vw, 30px) !important; }
.access-flow p { color: #4a4a4a; }
.conversion-row {
  max-width: 1240px;
  margin: clamp(48px, 6vw, 88px) auto 0 !important;
  padding: clamp(30px, 4vw, 52px) !important;
  border: 0 !important;
  border-radius: 20px;
  background: #141414;
  color: #fff;
}
.conversion-row h3 { color: #fff; }
.conversion-row p { color: #cfcac2; }
.conversion-row .booking-link {
  flex: none;
  margin: 0 !important;
  padding: 18px 30px !important;
  border: 0 !important;
  border-radius: 999px;
  background: var(--orange);
  color: #1f1f1f !important;
  font-size: 14px !important;
  letter-spacing: 0.03em;
}
.conversion-row .booking-link:hover { background: #fff; }
.access-answers { max-width: 1240px !important; margin: clamp(48px, 6vw, 88px) auto 0; text-align: center; }
.access-answers > h3 { margin: 0 0 8px; }
.access-answers dl { text-align: left; gap: clamp(16px, 2.4vw, 32px) !important; }
.access-answers dl > div { border-top: 0 !important; padding: 30px !important; border-radius: 18px; background: #f4f4f3; }
.access-answers .studio-link { display: inline-block; }

/* 11. The trip should start on board: centred intro, and panels with the phone centred
       in its own column and the story beside it. */
.experience .intro-grid {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 24px !important;
  text-align: center;
}
.experience .intro-grid h2 .line-mask { padding-left: 0 !important; }
.intro-copy { border: 0 !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; }
.intro-copy .lead { margin: 0 0 16px !important; }
.intro-copy > p:last-child { max-width: 52ch !important; font-size: 17px !important; line-height: 1.65; }
.journey-cinematic .journey-panel:nth-child(2) { background: #f1f1f1 !important; }
.journey-cinematic .panel-content {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto auto;
  align-content: center !important;
  align-items: start !important;
  column-gap: 6% !important;
  row-gap: 0 !important;
  height: 100% !important;
  padding: 0 0 0 4vw !important;
}
.journey-cinematic .chapter-number {
  grid-column: 1;
  grid-row: 1;
  align-self: end !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  opacity: 1 !important;
  font-size: clamp(80px, 9vw, 150px) !important;
  position: static !important;
}
.journey-cinematic .chapter-story { grid-column: 1; grid-row: 2; max-width: 34ch; }
.journey-cinematic .panel-content p { font-size: clamp(16px, 1.25vw, 19px) !important; }
.journey-cinematic .panel-word { display: none !important; }
.journey-cinematic .immersion-phone {
  top: 50% !important;
  left: 72% !important;
  translate: -50% -50%;
  width: clamp(170px, 17vw, 260px) !important;
  max-height: 70% !important;
}
@media (width <= 760px) {
  .journey-cinematic .panel-content {
    grid-template-columns: 1fr !important;
    align-content: end !important;
    padding: 0 0 7vh !important;
  }
  .journey-cinematic .chapter-number { font-size: 64px !important; margin-bottom: 8px !important; }
  .journey-cinematic .immersion-phone {
    top: 30% !important;
    left: 50% !important;
    width: 130px !important;
    max-height: 34% !important;
  }
}

/* 12. Fixes: step numbers reuse the old progress-line pseudo, journey layout beats the
       older absolute positioning, and the film frame no longer fades while arriving. */
.access-flow li::before {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  transform: none !important;
}
html .experience .journey-cinematic .chapter-story,
html .experience .journey-cinematic .chapter-number {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}
html .experience .journey-cinematic .chapter-story { grid-column: 1 !important; grid-row: 2 !important; max-width: 34ch !important; }
html .experience .journey-cinematic .chapter-number { grid-column: 1 !important; grid-row: 1 !important; }
html .experience .journey-cinematic .journey-panel .immersion-phone {
  top: 50% !important;
  left: 72% !important;
  width: clamp(170px, 17vw, 260px) !important;
  height: auto !important;
  max-height: 70% !important;
}
@media (width <= 760px) {
  html .experience .journey-cinematic .journey-panel .immersion-phone {
    top: 30% !important;
    left: 50% !important;
    width: 130px !important;
    max-height: 34% !important;
  }
  html .experience .journey-cinematic .chapter-story { max-width: none !important; }
}
@keyframes sdk-film-open {
  from { transform: scale(0.92); }
  to { transform: scale(1); }
}

/* 13. Passenger journey as a triptych: three cards side by side, each phone rising out of
       its card. No pinned slideshow (disabled in the bundle). Replaces rules 11-12 for panels. */
html .experience .journey-shell {
  width: auto !important;
  max-width: 1240px;
  height: auto !important;
  margin: 0 auto !important;
  overflow: visible !important;
  background: none !important;
  position: relative !important;
  transform: none !important;
}
html .experience .journey-cinematic {
  display: block !important;
  height: auto !important;
  transform: none !important;
  border: 0 !important;
}
html .experience .journey-cinematic :is(.rail-top, .rail-progress, .panel-top, .immersion-orbit, .panel-word) { display: none !important; }
html .experience .journey-cinematic .journey-track {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  width: auto !important;
  transform: none !important;
}
html .experience .journey-cinematic .journey-panel {
  display: flex !important;
  flex-direction: column;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 24px;
  overflow: hidden !important;
  background: #f6f6f5 !important;
}
html .experience .journey-cinematic .journey-panel:nth-child(2) { background: #ebebe9 !important; }
html .experience .journey-cinematic .journey-panel:nth-child(3) { background: var(--orange) !important; }
html .experience .journey-cinematic .panel-content {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px) 0 !important;
}
html .experience .journey-cinematic .chapter-number {
  display: block;
  margin: 0 0 16px !important;
  font-size: clamp(54px, 5vw, 84px) !important;
  line-height: 0.9 !important;
  opacity: 1 !important;
}
html .experience .journey-cinematic .chapter-story { max-width: none !important; }
html .experience .journey-cinematic .chapter-story h3 { margin: 0 !important; font-size: clamp(28px, 2.6vw, 42px) !important; line-height: 0.98 !important; }
html .experience .journey-cinematic .chapter-line > span { transform: none !important; }
html .experience .journey-cinematic .panel-content p {
  max-width: 34ch !important;
  margin: 16px 0 0 !important;
  color: #3d3d3d;
  font-size: 17px !important;
  line-height: 1.6 !important;
}
html .experience .journey-cinematic .journey-panel:nth-child(3) .panel-content p { color: #1f1f1f; }
html .experience .journey-cinematic .journey-panel .immersion-phone {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  display: block;
  width: 56% !important;
  height: auto !important;
  max-height: none !important;
  margin: clamp(32px, 3.4vw, 48px) auto -26% !important;
  transform: none !important;
  translate: 0 0 !important;
  rotate: var(--tilt, 0deg) !important;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.22)) !important;
  transition: translate 0.6s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html .experience .journey-cinematic .journey-panel:nth-child(1) .immersion-phone { --tilt: -4deg; }
html .experience .journey-cinematic .journey-panel:nth-child(3) .immersion-phone { --tilt: 4deg; }
@media (hover: hover) and (pointer: fine) {
  html .experience .journey-cinematic .journey-panel:hover .immersion-phone { translate: 0 -14px !important; rotate: 0deg !important; }
}
@media (width <= 900px) {
  html .experience .journey-cinematic .journey-track { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  html .experience .journey-cinematic .journey-panel .immersion-phone { width: 46% !important; margin-bottom: -20% !important; }
}

/* 14. Transcript toggle as a proper pill with a drawn plus that becomes a minus. */
.sdk-film__transcript summary {
  gap: 12px !important;
  min-height: 46px;
  padding: 0 22px 0 18px;
  border: 1.5px solid #1f1f1f;
  border-radius: 999px;
  font-size: 15px !important;
  font-weight: 650 !important;
  transition: background-color 150ms ease, color 150ms ease;
}
.sdk-film__transcript summary:hover { background: #1f1f1f; color: #fff !important; }
.sdk-film__transcript summary::before {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transform: none !important;
  transition: background-size 200ms ease;
}
.sdk-film__transcript[open] summary::before {
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 0 no-repeat;
}

/* 15. Phones always straight and centred in their cards. */
html .experience .journey-cinematic .journey-panel .immersion-phone,
html .experience .journey-cinematic .journey-panel:hover .immersion-phone {
  --tilt: 0deg !important;
  rotate: 0deg !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
}

/* 16. Passenger journey as a scroll story: one straight phone, centred on the page, held in
       place while the three steps pass on alternating sides. Its screen and the halo behind
       it change with each step. Replaces the slideshow and the triptych (rules 11-15). */
.jx {
  --jx-phone: clamp(240px, 21vw, 320px);
  max-width: 1240px;
  margin: clamp(40px, 5vw, 80px) auto 0;
}
.jx__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--jx-phone) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 96px);
}
.jx__step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78vh;
  max-width: 30rem;
  opacity: 0.28;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.jx__step[data-step="0"] { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.jx__step[data-step="1"] { grid-column: 3; grid-row: 2; justify-self: start; text-align: left; }
.jx__step[data-step="2"] { grid-column: 1; grid-row: 3; justify-self: end; text-align: right; }
.jx__step.is-active { opacity: 1; transform: none; }
.jx__n {
  color: var(--orange);
  font-size: clamp(64px, 6vw, 104px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.jx__title {
  margin: 14px 0 0;
  color: #1f1f1f;
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.jx__title span { display: block; }
.jx__step p { max-width: 34ch; margin: 18px 0 0; color: #4a4a4a; font-size: 18px; line-height: 1.6; }
.jx__step[data-step="0"] p,
.jx__step[data-step="2"] p { margin-left: auto; }

.jx__stage { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / span 3; }
.jx__sticky {
  position: sticky;
  top: calc(50vh - (var(--jx-phone) * 2.1667 + 40px) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jx__halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: calc(var(--jx-phone) * 1.083);
  width: calc(var(--jx-phone) * 2.2);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: #f1f1f0;
  transition: background-color 0.8s ease, scale 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.jx[data-active="1"] .jx__halo { background: #e3e3e0; scale: 1.04; }
.jx[data-active="2"] .jx__halo { background: var(--orange); scale: 1.08; }

.jx__phone {
  position: relative;
  z-index: 1;
  width: var(--jx-phone);
  aspect-ratio: 9 / 19.5;
  margin: 0;
  padding: 10px;
  border-radius: 48px;
  background: #121212;
  box-shadow: inset 0 0 0 2px #3a3a3a, 0 50px 90px -40px rgba(0, 0, 0, 0.45);
}
.jx__phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 38px; }
.jx__phone--main img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  opacity: 0;
  scale: 1.03;
  transition: opacity 0.6s ease, scale 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.jx__phone--main img.is-active { opacity: 1; scale: 1; }
.jx__dots { position: relative; z-index: 1; display: flex; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.jx__dots li { width: 8px; height: 8px; border-radius: 99px; background: rgba(31, 31, 31, 0.22); transition: width 0.4s ease, background-color 0.4s ease; }
.jx__dots li.is-active { width: 26px; background: #1f1f1f; }
.jx__phone--inline { display: none; }

@media (width <= 900px) {
  .jx__grid { grid-template-columns: 1fr; }
  .jx__stage { display: none; }
  .jx__step,
  .jx__step[data-step] {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    align-items: center;
    min-height: 0;
    max-width: none;
    padding: clamp(36px, 8vw, 56px) 0;
    text-align: center;
    opacity: 1;
    transform: none;
  }
  .jx__step p { margin-inline: auto !important; }
  .jx__phone--inline { display: block; width: min(62vw, 260px); margin: 32px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jx__step, .jx__halo, .jx__phone--main img, .jx__dots li { transition: none; }
}

/* 17. Halo stays inside the phone column so it never sits under the step text. */
.jx__halo { width: calc(var(--jx-phone) * 1.5) !important; }
.jx[data-active="1"] .jx__halo { scale: 1.03; }
.jx[data-active="2"] .jx__halo { scale: 1.06; }

/* 18. Less orange: the deck scene under the hero and the SDK film go neutral. Orange stays
       for the hero, single accents and the closing band. */
.passage-film { background: #fff !important; }

.sdk-film { background: #f3f3f1 !important; color: #1f1f1f !important; }
.sdk-film__title { color: #1f1f1f !important; }
.sdk-film__title em { color: var(--orange) !important; }
.sdk-film__lede,
.sdk-film__answer > p,
.sdk-film__transcript { color: #4a4a4a !important; }
.sdk-film__frame { box-shadow: 0 0 0 10px #1f1f1f, 0 60px 100px -50px rgba(0, 0, 0, 0.45) !important; }
.sdk-film__beats button::before { background: rgba(31, 31, 31, 0.14) !important; }
.sdk-film__beats i { background: var(--orange) !important; }
.sdk-film__beat-n { color: #a35e00 !important; opacity: 1; }
.sdk-film__primary { background: var(--orange) !important; color: #1f1f1f !important; }
.sdk-film__primary:hover { background: #1f1f1f !important; color: #fff !important; }
.sdk-film__secondary:hover { color: #a35e00 !important; border-color: var(--orange) !important; }
.sdk-film :is(button, a, summary):focus-visible { outline-color: var(--orange) !important; }

/* 19. The deck scene sits on charcoal: no orange, and its white headline stays readable
       where it runs past the photo. */
.passage-film { background: #1f1f1f !important; }

/* 20. Deck scene on white again; the headline sits inside the photo's starting frame
       (inset 10% 7%, scaled to 96%) so no letter ever overhangs onto white. */
.passage-film { background: #fff !important; }
.film-opening { inset: 15% 11% 12% 11% !important; }

/* 21. "One tap. Three layers." shares the soft grey of the film section below it. */
.marine-layers { background: #f3f3f1 !important; }
.marine-layer:nth-child(1) { background: #fff !important; }
.marine-layer:nth-child(2) { background: #f9f9f8 !important; }