/*
  PHILOSOPHY PAGE MODULE
  ======================
  Single source of truth for Philosophy / History.

  Desktop base is defined first.
  Mobile-only rules live in the final @media block and must not affect desktop.
*/

body.philosophy-page {
  --contact-subnav-w: clamp(205px, 15vw, 286px);
  --contact-red: var(--color-r3-red);

  --philosophy-paper: var(--color-paper);
  --philosophy-ink: #17192c;
  --philosophy-stage-pad: clamp(72px, 5.6vw, 128px);

  --philosophy-image-h: clamp(680px, 79vh, 930px);
  --philosophy-image-w: clamp(472px, 32vw, 650px);
  --philosophy-copy-w: clamp(300px, 19vw, 380px);
  --philosophy-copy-gap: clamp(96px, 8vw, 170px);

  --philosophy-shared-image-w: clamp(640px, 41vw, 850px);
  --philosophy-shared-image-half: clamp(320px, 20.5vw, 425px);
  --philosophy-shared-image-h: clamp(480px, 56vh, 680px);
  --philosophy-shared-copy-w: clamp(430px, 28vw, 590px);
  --philosophy-shared-copy-gap: clamp(82px, 6.4vw, 132px);
  --philosophy-shared-gradient-w: clamp(630px, 45vw, 900px);

  --philosophy-history-scene-gap: var(--philosophy-copy-gap);
  --philosophy-shared-tail-space: clamp(180px, 13vw, 300px);

  --philosophy-intro-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--philosophy-image-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-copy-w)
  );

  --philosophy-shared-section-w: calc(
    var(--philosophy-shared-image-w)
    + var(--philosophy-shared-copy-gap)
    + var(--philosophy-shared-copy-w)
    + var(--philosophy-stage-pad)
    + var(--philosophy-shared-tail-space)
  );

  background: var(--philosophy-paper);
  color: var(--philosophy-ink);
}

body.philosophy-page .main {
  inset: 0 !important;
}

body.philosophy-page .panel {
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
}

body.philosophy-page .footer-panel {
  height: 100vh;
  flex: 0 0 var(--footer-w);
}

/* PHILOSOPHY-specific opaque rail; all other pages retain their own rail rules. */
body.philosophy-page.subpage .rail {
  background: rgb(24 26 63 / 92%) !important;
}

/* Restored default footer treatment. */
body.philosophy-page .philosophy-footer {
  color: var(--color-footer-ink);
  background: var(--color-footer-surface);
}

/* Full horizontal canvas: inner menu → History 01 → Shared Commitment → footer. */
body.philosophy-page .panel--philosophy-history {
  width: var(--philosophy-history-auto-w, calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
  )) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
  ) !important;
}

body.philosophy-page .philosophy-entry {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 100vh;
  padding-left: var(--rail-w);
  overflow: hidden;
  background:
    var(--dot-grid-light),
    var(--philosophy-paper);
  background-size: var(--dot-grid-size), auto;
}

body.philosophy-page .philosophy-entry::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23,25,44,.016), transparent 35%, rgba(255,255,255,.40)),
    linear-gradient(0deg, rgba(23,25,44,.012), transparent 50%);
}

/* CONTACT-geometry inner menu; Philosophy only changes surface/rule colors. */
body.philosophy-page .contact-subnav.philosophy-inner-nav {
  position: relative;
  z-index: 2;
  width: var(--contact-subnav-w);
  min-width: var(--contact-subnav-w);
  height: 100vh;
  flex: 0 0 var(--contact-subnav-w);
  padding: 52px 22px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(246,245,243,.97);
  box-shadow: none;
  backdrop-filter: blur(12px) saturate(105%);
  -webkit-backdrop-filter: blur(12px) saturate(105%);
}

body.philosophy-page .philosophy-inner-nav .contact-subnav__label {
  align-self: flex-start;
  color: var(--r3-red);
  font-size: clamp(12px, .9vw, 17px);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: normal;
}

body.philosophy-page .philosophy-inner-nav .contact-subnav__group {
  width: 100%;
  margin: auto 0;
  display: grid;
  justify-items: center;
  gap: 24px;
}

body.philosophy-page .philosophy-inner-nav .contact-subnav__rule {
  width: 1px;
  height: 62px;
  display: block;
  background: var(--color-rule-dark);
}

body.philosophy-page .philosophy-inner-nav .contact-subnav__item,
body.philosophy-page .philosophy-inner-nav .contact-subnav__item:not(.is-active),
body.philosophy-page .philosophy-inner-nav .contact-subnav__item:not(.is-active):hover,
body.philosophy-page .philosophy-inner-nav .contact-subnav__item:not(.is-active):focus-visible {
  padding: 0;
  color: var(--r3-red) !important;
  -webkit-text-fill-color: var(--r3-red);
  background: transparent !important;
  font-size: clamp(10px, .72vw, 14px) !important;
  font-weight: 400 !important;
  letter-spacing: .03em !important;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transform: none !important;
  translate: none !important;
}

/*
  APPROVED PHILOSOPHY INNER-NAV STATE
  -----------------------------------
  Active topic is red, never white. Inactive topics keep the same red color
  at the smaller standard type scale. !important + webkit text fill prevent
  legacy inherited treatments from reverting this state in later revisions.
*/
body.philosophy-page .philosophy-inner-nav .contact-subnav__item.is-active,
body.philosophy-page .philosophy-inner-nav .contact-subnav__item.is-active:hover,
body.philosophy-page .philosophy-inner-nav .contact-subnav__item.is-active:focus-visible,
body.philosophy-page .philosophy-inner-nav .contact-subnav__item[aria-current="page"] {
  color: var(--r3-red) !important;
  -webkit-text-fill-color: var(--r3-red);
  background: transparent !important;
  font-size: clamp(19px, 1.6vw, 31px) !important;
  font-weight: 500 !important;
  letter-spacing: .035em !important;
  transform: none !important;
  translate: none !important;
}

/* Global drawer current-page contract. */
body.philosophy-page .menu-drawer .menu-tree__item.is-current-page,
body.philosophy-page .menu-drawer .menu-tree__item.is-current-page:hover,
body.philosophy-page .menu-drawer .menu-tree__item.is-current-page:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  letter-spacing: .065em;
}

/* History 01: tall visual + vertically centered R3-standard copy. */
body.philosophy-page .philosophy-history-intro {
  position: relative;
  z-index: 1;
  width: var(--philosophy-intro-section-w);
  height: 100%;
  flex: 0 0 var(--philosophy-intro-section-w);
  isolation: isolate;
}

body.philosophy-page .philosophy-history-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: var(--gradient-philosophy-paper);
}

body.philosophy-page .philosophy-history-intro__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0 0 0 var(--philosophy-stage-pad);
  display: flex;
  align-items: center;
}

body.philosophy-page .philosophy-history-intro__media {
  position: relative;
  width: var(--philosophy-image-w);
  height: var(--philosophy-image-h);
  flex: 0 0 var(--philosophy-image-w);
  margin: 0;
  overflow: hidden;
  clip-path: polygon(14% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 14%);
  background: linear-gradient(135deg, rgba(23,25,44,.09), rgba(23,25,44,.025)), #e6e5e2;
  box-shadow: 0 16px 38px rgba(23,25,44,.08);
}

body.philosophy-page .philosophy-history-intro__media img,
body.philosophy-page .philosophy-history-shared__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.014);
  transition:
    opacity .28s var(--ease),
    transform 6.2s cubic-bezier(.2,.65,.25,1);
}

body.philosophy-page .philosophy-history-intro__media img.is-loaded,
body.philosophy-page .philosophy-history-shared__media img.is-loaded {
  opacity: 1;
}

body.philosophy-page .philosophy-history-intro__media:hover img.is-loaded,
body.philosophy-page .philosophy-history-shared__media:hover img.is-loaded {
  transform: scale(1.05);
}

body.philosophy-page .philosophy-history-intro__copy {
  position: relative;
  width: var(--philosophy-copy-w);
  height: var(--philosophy-image-h);
  flex: 0 0 var(--philosophy-copy-w);
  margin-left: var(--philosophy-copy-gap);
  color: var(--philosophy-ink);
}

body.philosophy-page .philosophy-history-intro__copy-main {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

body.philosophy-page .philosophy-history-intro__copy h1,
body.philosophy-page .philosophy-history-shared__copy h2 {
  margin: 0 0 var(--content-copy-gap);
  color: var(--philosophy-ink);
  font-size: var(--content-heading-size);
  font-weight: var(--content-heading-weight);
  letter-spacing: var(--content-heading-spacing);
  line-height: var(--content-heading-line-height);
  text-transform: uppercase;
}

body.philosophy-page .philosophy-history-intro__copy h1 span,
body.philosophy-page .philosophy-history-intro__copy h1 em,
body.philosophy-page .philosophy-history-shared__copy h2 span,
body.philosophy-page .philosophy-history-shared__copy h2 em {
  display: block;
}

body.philosophy-page .philosophy-history-intro__copy h1 em,
body.philosophy-page .philosophy-history-shared__copy h2 em {
  color: var(--r3-red);
  font: inherit;
}

body.philosophy-page .philosophy-history-intro__copy p,
body.philosophy-page .philosophy-history-shared__copy p {
  margin: 0;
  color: var(--color-muted-dark);
  font-size: var(--content-copy-size);
  font-weight: var(--content-copy-weight);
  letter-spacing: 0;
  line-height: var(--content-copy-line-height);
}

body.philosophy-page .philosophy-history-intro__link {
  position: absolute;
  left: 0;
  bottom: clamp(42px, 4vw, 82px);
  color: var(--r3-red);
  font-size: clamp(10px, .6vw, 12px);
  font-weight: 500;
  letter-spacing: .015em;
  text-decoration: none;
  transition: color .22s var(--ease), transform .22s var(--ease);
}

body.philosophy-page .philosophy-history-intro__link:hover,
body.philosophy-page .philosophy-history-intro__link:focus-visible {
  color: var(--philosophy-ink);
  outline: none;
  transform: translateX(4px);
}

/* Shared Commitment: appended after History 01. */
body.philosophy-page .philosophy-history-shared {
  position: relative;
  z-index: 1;
  width: var(--philosophy-shared-section-w);
  height: 100%;
  flex: 0 0 var(--philosophy-shared-section-w);
  margin-left: var(--philosophy-history-scene-gap);
  isolation: isolate;
}

body.philosophy-page .philosophy-history-shared::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: var(--philosophy-shared-image-half);
  width: var(--philosophy-shared-gradient-w);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(224 224 224 / 92%) 0%,
    rgb(223 227 236 / 82%) 15%,
    rgba(229, 232, 237, .56) 31%,
    rgba(242, 243, 246, .20) 47%,
    rgba(246, 245, 243, 0) 100%
  );
}

body.philosophy-page .philosophy-history-shared__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0 var(--philosophy-stage-pad) 0 0;
  display: flex;
  align-items: center;
}

body.philosophy-page .philosophy-history-shared__media {
  position: relative;
  width: var(--philosophy-shared-image-w);
  height: var(--philosophy-shared-image-h);
  flex: 0 0 var(--philosophy-shared-image-w);
  margin: 0;
  overflow: hidden;
  clip-path: polygon(14% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 14%);
  background: linear-gradient(135deg, rgba(23,25,44,.12), rgba(23,25,44,.035));
  box-shadow: 0 16px 38px rgba(23,25,44,.08);
}

body.philosophy-page .philosophy-history-shared__copy {
  width: var(--philosophy-shared-copy-w);
  flex: 0 0 var(--philosophy-shared-copy-w);
  margin-left: var(--philosophy-shared-copy-gap);
  color: var(--philosophy-ink);
}

body.philosophy-page .philosophy-history-shared__copy p + p {
  margin-top: 17px;
}

/* Responsive: Philosophy only. No desktop selector is changed here. */
@media (max-width: 900px) {
  body.philosophy-page .main {
    position: static !important;
    overflow: visible !important;
  }

  body.philosophy-page .panel,
  body.philosophy-page .panel--philosophy-history {
    width: 100% !important;
    height: auto;
    min-height: 100svh;
    flex-basis: 100% !important;
  }

  body.philosophy-page .philosophy-entry {
    min-height: 0;
    padding: var(--rail-h) 0 0;
    flex-direction: column;
    overflow: visible;
  }

  body.philosophy-page .contact-subnav.philosophy-inner-nav {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 76px;
    padding: 18px 24px;
    flex-basis: auto;
    flex-direction: row;
    justify-content: space-between;
  }

  body.philosophy-page .philosophy-inner-nav .contact-subnav__label {
    align-self: auto;
    font-size: 12px;
  }

  body.philosophy-page .philosophy-inner-nav .contact-subnav__group {
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body.philosophy-page .philosophy-inner-nav .contact-subnav__rule {
    display: none;
  }

  body.philosophy-page .philosophy-inner-nav .contact-subnav__item {
    font-size: 9px;
  }

  body.philosophy-page .philosophy-inner-nav .contact-subnav__item.is-active {
    font-size: 13px;
  }

  body.philosophy-page .philosophy-history-intro,
  body.philosophy-page .philosophy-history-shared {
    width: 100%;
    height: auto;
    flex-basis: auto;
    margin-left: 0;
  }

  body.philosophy-page .philosophy-history-intro::before {
    background: linear-gradient(
      180deg,
      rgb(224 224 224 / 72%) 0%,
      rgba(246, 245, 243, 0) 64%
    );
  }

  body.philosophy-page .philosophy-history-shared::before {
    left: 0;
    width: 100%;
    background: linear-gradient(
      180deg,
      rgb(224 224 224 / 72%) 0%,
      rgba(246, 245, 243, 0) 64%
    );
  }

  body.philosophy-page .philosophy-history-intro__layout,
  body.philosophy-page .philosophy-history-shared__layout {
    height: auto;
    padding: 54px 24px 78px;
    flex-direction: column;
    align-items: flex-start;
  }

  body.philosophy-page .philosophy-history-intro__media {
    width: min(76vw, 430px);
    height: auto;
    aspect-ratio: 260 / 374;
    flex-basis: auto;
    align-self: center;
  }

  body.philosophy-page .philosophy-history-shared__media {
    width: min(100%, 620px);
    height: auto;
    aspect-ratio: 371 / 279;
    flex-basis: auto;
    align-self: center;
  }

  body.philosophy-page .philosophy-history-intro__copy,
  body.philosophy-page .philosophy-history-shared__copy {
    width: min(100%, 520px);
    height: auto;
    flex-basis: auto;
    margin: 42px 0 0;
  }

  body.philosophy-page .philosophy-history-intro__copy-main {
    position: static;
    transform: none;
  }

  body.philosophy-page .philosophy-history-intro__link {
    position: static;
    display: inline-block;
    margin-top: 36px;
  }

  body.philosophy-page .footer-panel {
    width: 100%;
    height: auto !important;
    min-height: 280px;
    flex-basis: auto !important;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v3
   Solid-black inner rules + History 03 wide visual.
========================================================= */

body.philosophy-page {
  --philosophy-wide-visual-w: clamp(900px, 58vw, 1200px);
  --philosophy-wide-tail-space: clamp(110px, 7vw, 155px);

  /*
    Shared Commitment now leads into another History structure.
    Its outer end padding/tail is removed so the following visual begins
    after the same controlled gap used between the prior image/text blocks.
  */
  --philosophy-shared-section-w: calc(
    var(--philosophy-shared-image-w)
    + var(--philosophy-shared-copy-gap)
    + var(--philosophy-shared-copy-w)
  );

  --philosophy-wide-section-w: calc(
    var(--philosophy-wide-visual-w)
    + var(--philosophy-stage-pad)
    + var(--philosophy-wide-tail-space)
  );
}

/*
  PHILOSOPHY INNER RULES — final approved state:
  solid black, never gray/white, and isolated to this page only.
*/
body.philosophy-page .contact-subnav.philosophy-inner-nav .contact-subnav__rule {
  background: #000 !important;
  opacity: 1 !important;
}

/* Full canvas: menu → History 01 → Shared Commitment → History 03 → footer. */
body.philosophy-page .panel--philosophy-history {
  width: var(--philosophy-history-auto-w, calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
  )) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
  ) !important;
}

/* No hidden right padding after Shared Commitment before the new wide media. */
body.philosophy-page .philosophy-history-shared__layout {
  padding: 0;
}

/*
  History 03 starts after the same gap that was explicitly approved for:
  visual → copy and copy → subsequent visual.
*/
body.philosophy-page .philosophy-history-wide {
  position: relative;
  z-index: 1;
  width: var(--philosophy-wide-section-w);
  height: 100%;
  flex: 0 0 var(--philosophy-wide-section-w);
  margin-left: var(--philosophy-history-scene-gap);
}

body.philosophy-page .philosophy-history-wide__layout {
  width: 100%;
  height: 100%;
  padding: 0 var(--philosophy-stage-pad) 0 0;
  display: flex;
  align-items: center;
}

body.philosophy-page .philosophy-history-wide__media {
  width: var(--philosophy-wide-visual-w);
  flex: 0 0 var(--philosophy-wide-visual-w);
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(23,25,44,.12), rgba(23,25,44,.035));
  box-shadow: 0 16px 38px rgba(23,25,44,.08);
}

body.philosophy-page .philosophy-history-wide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.014);
  transition:
    opacity .28s var(--ease),
    transform 6.2s cubic-bezier(.2,.65,.25,1);
}

body.philosophy-page .philosophy-history-wide__media img.is-loaded {
  opacity: 1;
}

body.philosophy-page .philosophy-history-wide__media:hover img.is-loaded {
  transform: scale(1.05);
}

@media (max-width: 900px) {
  body.philosophy-page {
    --philosophy-wide-visual-w: 100%;
    --philosophy-wide-section-w: 100%;
  }

  body.philosophy-page .philosophy-history-shared__layout {
    padding: 54px 24px 78px;
  }

  body.philosophy-page .philosophy-history-wide {
    width: 100%;
    height: auto;
    flex-basis: auto;
    margin-left: 0;
  }

  body.philosophy-page .philosophy-history-wide__layout {
    height: auto;
    padding: 54px 24px 78px;
  }

  body.philosophy-page .philosophy-history-wide__media {
    width: 100%;
    flex-basis: auto;
    aspect-ratio: 3 / 2;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v4
   History 03 gradient + animated horizontal chronology timeline.
========================================================= */

body.philosophy-page {
  /*
    HISTORY 03 gradient begins about 20% after the visual's left edge.
    It is intentionally underneath the opaque image and becomes visible
    from the visual's forward area into the surrounding paper canvas.
  */
  --philosophy-wide-gradient-start: clamp(180px, 11.6vw, 240px);
  --philosophy-wide-gradient-w: clamp(720px, 49vw, 1040px);

  /* Data-driven timeline dimensions. */
  --philosophy-timeline-item-w: clamp(340px, 23vw, 470px);
  --philosophy-timeline-baseline: clamp(112px, 12.5vh, 158px);
  --philosophy-timeline-tail-space: clamp(140px, 9vw, 205px);
  --philosophy-timeline-section-min-w: 5200px;
}

/*
  History 03 is no longer a terminal visual: remove its unused end padding
  and let the timeline begin after the same established scene-gap.
*/
body.philosophy-page {
  --philosophy-wide-section-w: var(--philosophy-wide-visual-w);
}

body.philosophy-page .philosophy-history-wide {
  position: relative;
  isolation: isolate;
}

body.philosophy-page .philosophy-history-wide::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: var(--philosophy-wide-gradient-start);
  width: var(--philosophy-wide-gradient-w);
  pointer-events: none;
  background: var(--gradient-philosophy-paper);
}

body.philosophy-page .philosophy-history-wide__layout {
  position: relative;
  z-index: 1;
  padding: 0;
}

/* Full canvas now ends with the timeline after History 03. */
body.philosophy-page .panel--philosophy-history {
  width: var(--philosophy-history-auto-w, calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
  )) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
  ) !important;
}

/* ============================
   HISTORY TIMELINE — DESKTOP
============================ */

body.philosophy-page .philosophy-history-timeline {
  position: relative;
  z-index: 1;
  width: max-content;
  min-width: var(--philosophy-timeline-section-min-w);
  height: 100%;
  flex: 0 0 auto;
  margin-left: var(--philosophy-history-scene-gap);
}

body.philosophy-page .philosophy-history-timeline__layout {
  width: max-content;
  min-width: 100%;
  height: 100%;
  padding-right: var(--philosophy-timeline-tail-space);
  display: flex;
  align-items: stretch;
}

body.philosophy-page .philosophy-timeline {
  position: relative;
  width: max-content;
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
}

/* The horizontal red timeline axis. */
body.philosophy-page .philosophy-timeline::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: var(--philosophy-timeline-baseline);
  left: 0;
  height: 2px;
  background: var(--r3-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.35s cubic-bezier(.22,.61,.36,1);
}

body.philosophy-page .philosophy-history-timeline.is-revealed .philosophy-timeline::before,
body.philosophy-page .philosophy-timeline:has(.philosophy-timeline__item.is-revealed)::before {
  transform: scaleX(1);
}

body.philosophy-page .philosophy-timeline__item {
  --timeline-stem-height: clamp(148px, 17vh, 210px);
  --timeline-media-w: clamp(202px, 13.2vw, 270px);

  position: relative;
  z-index: 1;
  width: var(--philosophy-timeline-item-w);
  height: 100%;
  flex: 0 0 var(--philosophy-timeline-item-w);
}

/* Alternation stays automatic: data sequence decides short / tall. */
body.philosophy-page .philosophy-timeline__item.is-tall {
  --timeline-stem-height: clamp(244px, 28vh, 338px);
}

body.philosophy-page .philosophy-timeline__stem {
  position: absolute;
  z-index: 1;
  bottom: var(--philosophy-timeline-baseline);
  left: 80px;
  width: 2px;
  height: var(--timeline-stem-height);
  background: var(--r3-red);
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform .76s cubic-bezier(.22,.61,.36,1);
}

body.philosophy-page .philosophy-timeline__content {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--philosophy-timeline-baseline) + var(--timeline-stem-height) + 18px);
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .48s ease .32s,
    transform .62s cubic-bezier(.22,.61,.36,1) .32s;
}

body.philosophy-page .philosophy-timeline__title {
  width: var(--timeline-media-w);
  min-height: calc(var(--content-copy-size) * 2.15);
  margin: 0 0 17px 101px;
  color: var(--r3-red);
  font-size: var(--content-copy-size);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.42;
  white-space: normal;
}

body.philosophy-page .philosophy-timeline__visual-row {
  display: grid;
  grid-template-columns: 62px 19px var(--timeline-media-w);
  align-items: center;
}

body.philosophy-page .philosophy-timeline__year {
  grid-column: 1;
  justify-self: center;
  color: var(--philosophy-ink);
  font-size: clamp(20px, 1.45vw, 30px);
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

body.philosophy-page .philosophy-timeline__media {
  grid-column: 3;
  width: var(--timeline-media-w);
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(23,25,44,.12), rgba(23,25,44,.035));
  box-shadow: 0 12px 28px rgba(23,25,44,.08);
}

body.philosophy-page .philosophy-timeline__media img {
  display: block;
  width: auto;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /*transform: scale(1.018);*/
  justify-self: anchor-center;
  transition:
    opacity .28s var(--ease),
    transform 5.8s cubic-bezier(.2,.65,.25,1);
}

body.philosophy-page .philosophy-timeline__media img.is-loaded {
  opacity: 1;
}

body.philosophy-page .philosophy-timeline__media:hover img.is-loaded {
  /*transform: scale(1.05);*/
}

/* Scroll-driven reveal: stem grows first; year, title and image follow. */
body.philosophy-page .philosophy-timeline__item.is-revealed .philosophy-timeline__stem {
  transform: scaleY(1);
}

body.philosophy-page .philosophy-timeline__item.is-revealed .philosophy-timeline__content {
  opacity: 1;
  transform: translateY(0);
}

/* ============================
   HISTORY TIMELINE — MOBILE
============================ */
@media (max-width: 900px) {
  body.philosophy-page {
    --philosophy-timeline-section-min-w: 100%;
  }

  body.philosophy-page .philosophy-history-wide::before {
    left: 20%;
    width: 80%;
    background: linear-gradient(
      180deg,
      rgb(224 224 224 / 72%) 0%,
      rgba(246, 245, 243, 0) 64%
    );
  }

  body.philosophy-page .philosophy-history-timeline {
    width: 100%;
    min-width: 0;
    height: auto;
    flex-basis: auto;
    margin-left: 0;
  }

  body.philosophy-page .philosophy-history-timeline__layout {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 58px 24px 84px;
  }

  body.philosophy-page .philosophy-timeline {
    width: 100%;
    min-width: 0;
    height: auto;
    display: block;
  }

  /* Timeline axis becomes vertical for mobile readability. */
  body.philosophy-page .philosophy-timeline::before {
    top: 54px;
    right: auto;
    bottom: 54px;
    left: 33px;
    width: 2px;
    height: auto;
    background: var(--r3-red);
    transform: scaleY(0);
    transform-origin: center top;
  }

  body.philosophy-page .philosophy-timeline__item {
    --timeline-media-w: min(100%, 440px);

    width: 100%;
    height: auto;
    min-height: 292px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }

  body.philosophy-page .philosophy-timeline__item.is-tall,
  body.philosophy-page .philosophy-timeline__item.is-short {
    --timeline-stem-height: 0px;
  }

  body.philosophy-page .philosophy-timeline__stem {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    bottom: auto;
    left: 33px;
    width: 2px;
    height: 100%;
    min-height: 292px;
    transform: scaleY(0);
    transform-origin: center top;
  }

  body.philosophy-page .philosophy-timeline__content {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    bottom: auto;
    left: auto;
    width: 100%;
    padding: 0 0 54px;
    opacity: 0;
    transform: translateY(20px);
  }

  body.philosophy-page .philosophy-timeline__title {
    width: auto;
    min-height: 0;
    margin: 0 0 15px;
    font-size: var(--content-copy-size);
  }

  body.philosophy-page .philosophy-timeline__visual-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  body.philosophy-page .philosophy-timeline__year {
    grid-column: 1;
    padding-top: 4px;
    font-size: 18px;
    writing-mode: horizontal-tb;
    transform: none;
  }

  body.philosophy-page .philosophy-timeline__media {
    grid-column: 2;
    width: 100%;
    max-width: 440px;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v5
   Timeline geometry correction + mobile overflow protection.
========================================================= */

body.philosophy-page {
  /*
    The timeline line starts at the exact x-position of the first rising stem.
    It has a deliberate tail after the final milestone before the footer.
  */
  --philosophy-timeline-axis-start: 80px;
  --philosophy-timeline-tail-space: clamp(260px, 17vw, 390px);
  --philosophy-timeline-section-min-w: 5200px;
}

/* Desktop timeline gets a true finite canvas; JS expands this variable when records are inserted. */
body.philosophy-page .philosophy-history-timeline {
  width: var(--philosophy-timeline-section-min-w);
  min-width: var(--philosophy-timeline-section-min-w);
  flex: 0 0 var(--philosophy-timeline-section-min-w);
}

body.philosophy-page .philosophy-history-timeline__layout,
body.philosophy-page .philosophy-timeline {
  width: 100%;
  min-width: 0;
}

/*
  Axis starts at the first stem, not before it.
  It ends before the dedicated final tail so the footer does not begin directly
  after the last historical milestone.
*/
body.philosophy-page .philosophy-timeline {
  padding-right: var(--philosophy-timeline-tail-space);
}

body.philosophy-page .philosophy-timeline::before {
  right: var(--philosophy-timeline-tail-space);
  left: var(--philosophy-timeline-axis-start);
}

/* Every stem uses a stable x-coordinate; the date is centered along this height. */
body.philosophy-page .philosophy-timeline__item {
  --timeline-stem-x: var(--philosophy-timeline-axis-start);
  --timeline-media-w: clamp(202px, 13.2vw, 270px);
  --timeline-media-h: clamp(126px, 8.25vw, 169px);
  --timeline-media-half-h: clamp(63px, 4.15vw, 85px);
  --timeline-media-left: calc(var(--timeline-stem-x) + 25px);
}

/*
  Tall / short relation is still driven automatically by the JS sequence;
  only its presentation is refined here.
*/
body.philosophy-page .philosophy-timeline__stem {
  left: var(--timeline-stem-x);
}

/* Year is now visually centered along the vertical stem, on its left side. */
body.philosophy-page .philosophy-timeline__year {
  position: absolute;
  z-index: 3;
  bottom: var(--philosophy-timeline-baseline);
  left: 0;
  width: calc(var(--timeline-stem-x) - 17px);
  height: var(--timeline-stem-height);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: var(--philosophy-ink);
  font-size: clamp(20px, 1.45vw, 30px);
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/*
  The image center sits at the endpoint of the rising red stem:
  image is lower than before, the text stays above with the approved 17px gap.
*/
body.philosophy-page .philosophy-timeline__content {
  position: absolute;
  z-index: 2;
  bottom: calc(
    var(--philosophy-timeline-baseline)
    + var(--timeline-stem-height)
    - var(--timeline-media-half-h)
  );
  left: var(--timeline-media-left);
  width: var(--timeline-media-w);
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .48s ease .32s,
    transform .62s cubic-bezier(.22,.61,.36,1) .32s;
}

body.philosophy-page .philosophy-timeline__title {
  width: 100%;
  min-height: 0;
  margin: 0 0 17px;
  color: var(--r3-red);
  font-size: var(--content-copy-size);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.42;
}

body.philosophy-page .philosophy-timeline__media {
  width: var(--timeline-media-w);
  height: var(--timeline-media-h);
  aspect-ratio: auto;
  margin: 0;
}

/* The old grid wrapper is no longer used after the corrected stem-center layout. */
body.philosophy-page .philosophy-timeline__visual-row {
  display: none;
}

/* First transition is visible as soon as the timeline area enters the viewport. */
body.philosophy-page .philosophy-timeline.is-revealed::before {
  transform: scaleX(1);
}

/* ============================
   MOBILE — ISOLATED FIXES ONLY
============================ */
@media (max-width: 900px) {
  /*
    Prevent the Philosophy track/timeline from ever adding a horizontal body
    overflow on mobile. Desktop geometry remains outside this media query.
  */
  body.philosophy-page,
  body.philosophy-page .main,
  body.philosophy-page .track,
  body.philosophy-page .philosophy-entry {
    max-width: 100%;
    overflow-x: clip;
  }

  body.philosophy-page {
    --philosophy-timeline-section-min-w: 100%;
    --philosophy-timeline-tail-space: 0px;
  }

  body.philosophy-page .philosophy-history-timeline,
  body.philosophy-page .philosophy-history-timeline__layout,
  body.philosophy-page .philosophy-timeline {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-basis: auto;
    box-sizing: border-box;
  }

  body.philosophy-page .philosophy-timeline {
    padding-right: 0;
  }

  /* Vertical mobile axis is contained within the responsive content gutter. */
  body.philosophy-page .philosophy-timeline::before {
    top: 54px;
    right: auto;
    bottom: 54px;
    left: 33px;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center top;
  }

  body.philosophy-page .philosophy-timeline.is-revealed::before {
    transform: scaleY(1);
  }

  body.philosophy-page .philosophy-timeline__item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 16px;
    align-items: stretch;
    box-sizing: border-box;
  }

  body.philosophy-page .philosophy-timeline__item.is-tall,
  body.philosophy-page .philosophy-timeline__item.is-short {
    --timeline-stem-height: auto;
  }

  body.philosophy-page .philosophy-timeline__stem {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    bottom: auto;
    left: 33px;
    width: 2px;
    height: 100%;
    min-height: 292px;
    transform: scaleY(0);
    transform-origin: center top;
  }

  /*
    On mobile the date returns to readable horizontal text, aligned to the
    corresponding content block without affecting desktop's vertical date style.
  */
  body.philosophy-page .philosophy-timeline__year {
    position: relative;
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    bottom: auto;
    left: auto;
    width: 68px;
    height: auto;
    padding-top: 3px;
    color: var(--philosophy-ink);
    font-size: 18px;
    writing-mode: horizontal-tb;
    transform: none;
  }

  body.philosophy-page .philosophy-timeline__content {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    bottom: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0 0 54px;
    opacity: 0;
    transform: translateY(20px);
    box-sizing: border-box;
  }

  body.philosophy-page .philosophy-timeline__title {
    width: 100%;
    max-width: 100%;
    margin: 0 0 15px;
    overflow-wrap: anywhere;
  }

  body.philosophy-page .philosophy-timeline__media {
    width: 100%;
    max-width: 440px;
    height: auto;
    aspect-ratio: 16 / 10;
    min-width: 0;
  }

  body.philosophy-page .philosophy-timeline__media img {
    max-width: 100%;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v6
   Timeline year-distance + terminal axis refinement.
========================================================= */
body.philosophy-page {
  --philosophy-timeline-year-gap: 25px;
  --philosophy-timeline-axis-end-gap: calc(
    var(--philosophy-timeline-tail-space)
    + (var(--philosophy-timeline-item-w) - var(--philosophy-timeline-axis-start))
  );
}

/* Horizontal axis now ends exactly at the final rising stem. */
body.philosophy-page .philosophy-timeline::before {
  right: var(--philosophy-timeline-axis-end-gap);
}

/* Year block uses the same stem gap rhythm as the image side. */
body.philosophy-page .philosophy-timeline__year {
  width: calc(var(--timeline-stem-x) - var(--philosophy-timeline-year-gap));
}

/* Keep the last item visually breathing before the footer without extending the red axis. */
body.philosophy-page .philosophy-timeline__item:last-child {
  margin-right: var(--philosophy-timeline-tail-space);
}

@media (max-width: 900px) {
  body.philosophy-page {
    --philosophy-timeline-year-gap: 0px;
    --philosophy-timeline-axis-end-gap: 0px;
  }

  body.philosophy-page .philosophy-timeline__item:last-child {
    margin-right: 0;
    padding-bottom: 84px;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v7
   Timeline year proximity + lifted label alignment.
========================================================= */
body.philosophy-page {
  --philosophy-timeline-year-gap: 25px;
  --philosophy-timeline-year-lift: clamp(28px, 2.2vh, 42px);
  --philosophy-timeline-axis-end-gap: calc(var(--philosophy-timeline-item-w) - var(--philosophy-timeline-axis-start));
}

/* End of the red axis now finishes like the beginning: at the last long stem. */
body.philosophy-page .philosophy-timeline::before {
  right: var(--philosophy-timeline-axis-end-gap);
}

/* Keep footer spacing, but remove the extra artificial tail from the last item. */
body.philosophy-page .philosophy-timeline__item:last-child {
  margin-right: 0;
}

/* Year labels sit closer to the red stems and are lifted upward. */
body.philosophy-page .philosophy-timeline__year {
  bottom: calc(var(--philosophy-timeline-baseline) + var(--philosophy-timeline-year-lift));
  width: var(--timeline-stem-x);
  height: calc(var(--timeline-stem-height) - var(--philosophy-timeline-year-lift));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--philosophy-timeline-year-gap);
  box-sizing: border-box;
}

@media (max-width: 900px) {
  body.philosophy-page {
    --philosophy-timeline-year-lift: 0px;
    --philosophy-timeline-axis-end-gap: 0px;
  }

  body.philosophy-page .philosophy-timeline__year {
    width: 68px;
    height: auto;
    display: block;
    padding-right: 0;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v8
   Exact terminal stem + endpoint-aligned years + History follow-ups.
========================================================= */

body.philosophy-page {
  --philosophy-timeline-year-gap: 25px;
  --philosophy-timeline-year-box-h: clamp(76px, 5.6vw, 108px);

  /*
    The red axis ends at the x-coordinate of the final stem:
    total timeline width minus final item start/stem offset.
  */
  --philosophy-timeline-axis-end-gap: calc(
    var(--philosophy-timeline-tail-space)
    + var(--philosophy-timeline-item-w)
    - var(--philosophy-timeline-axis-start)
  );
}

/*
  The old layout had tail padding on both the parent and the inner timeline,
  which made the final axis calculation drift. The tail now exists once only,
  as blank canvas after the last milestone.
*/
body.philosophy-page .philosophy-history-timeline__layout,
body.philosophy-page .philosophy-timeline {
  box-sizing: border-box;
  padding-right: 0;
}

/* Exact start: first stem. Exact end: final stem. */
body.philosophy-page .philosophy-timeline::before {
  left: var(--philosophy-timeline-axis-start);
  right: var(--philosophy-timeline-axis-end-gap);
}

/* A terminal milestone always finishes with a long stem, independent of item count. */
body.philosophy-page .philosophy-timeline__item:last-child {
  --timeline-stem-height: clamp(244px, 28vh, 338px);
  margin-right: 0;
}

/*
  The label centre now lands on the stem endpoint, exactly like the image centre.
  Its right edge sits 25px before the red line; the image begins 25px after it.
*/
body.philosophy-page .philosophy-timeline__year {
  bottom: calc(
    var(--philosophy-timeline-baseline)
    + var(--timeline-stem-height)
    - (var(--philosophy-timeline-year-box-h) / 2)
  );
  left: 0;
  width: calc(var(--timeline-stem-x) - var(--philosophy-timeline-year-gap));
  height: var(--philosophy-timeline-year-box-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  box-sizing: border-box;
}

/*
  Timeline is followed by two re-used History visual/copy structures.
  The exact first-scene gradient and large vertical media geometry stay intact.
*/
body.philosophy-page .philosophy-history-intro--followup {
  margin-left: var(--philosophy-history-scene-gap);
}

/* Panel width now includes Timeline → Follow-up 01 → Follow-up 02. */
body.philosophy-page .panel--philosophy-history {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-intro-section-w)
  ) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-intro-section-w)
  ) !important;
}

/* H2 copies retain the exact title style of the original H1 scene. */
body.philosophy-page .philosophy-history-intro__copy h2 {
  margin: 0 0 var(--content-copy-gap);
  color: var(--philosophy-ink);
  font-size: var(--content-heading-size);
  font-weight: var(--content-heading-weight);
  letter-spacing: var(--content-heading-spacing);
  line-height: var(--content-heading-line-height);
  text-transform: uppercase;
}

body.philosophy-page .philosophy-history-intro__copy h2 span,
body.philosophy-page .philosophy-history-intro__copy h2 em {
  display: block;
}

body.philosophy-page .philosophy-history-intro__copy h2 em {
  color: var(--r3-red);
  font: inherit;
}

@media (max-width: 900px) {
  body.philosophy-page {
    --philosophy-timeline-year-box-h: auto;
    --philosophy-timeline-axis-end-gap: 0px;
  }

  body.philosophy-page .philosophy-history-timeline__layout,
  body.philosophy-page .philosophy-timeline {
    padding-right: 0;
  }

  body.philosophy-page .philosophy-timeline__year {
    bottom: auto;
    left: auto;
    width: 68px;
    height: auto;
    display: block;
  }

  body.philosophy-page .philosophy-history-intro--followup {
    margin-left: 0;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v9
   Restore v7 timeline spacing, fix final stem join,
   and apply final two text scenes.
========================================================= */

body.philosophy-page {
  --philosophy-followup-footer-gap: clamp(96px, 7vw, 160px);
}

/* Restore the approved timeline spacing from the prior revision. */
body.philosophy-page .philosophy-timeline {
  padding-right: var(--philosophy-timeline-tail-space);
}

body.philosophy-page .philosophy-timeline::before {
  left: var(--philosophy-timeline-axis-start);
  right: calc(
    var(--philosophy-timeline-tail-space)
    + var(--philosophy-timeline-item-w)
    - var(--philosophy-timeline-axis-start)
  );
}

body.philosophy-page .philosophy-timeline__item {
  --timeline-stem-x: var(--philosophy-timeline-axis-start);
  --timeline-media-w: clamp(202px, 13.2vw, 270px);
  --timeline-media-h: clamp(126px, 8.25vw, 169px);
  --timeline-media-half-h: clamp(63px, 4.15vw, 85px);
  --timeline-media-left: calc(var(--timeline-stem-x) + 25px);
}

body.philosophy-page .philosophy-timeline__stem {
  left: var(--timeline-stem-x);
}

body.philosophy-page .philosophy-timeline__year {
  position: absolute;
  z-index: 3;
  bottom: var(--philosophy-timeline-baseline);
  left: 0;
  width: calc(var(--timeline-stem-x) - 17px);
  height: var(--timeline-stem-height);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: var(--philosophy-ink);
  font-size: clamp(20px, 1.45vw, 30px);
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

body.philosophy-page .philosophy-timeline__content {
  position: absolute;
  z-index: 2;
  bottom: calc(
    var(--philosophy-timeline-baseline)
    + var(--timeline-stem-height)
    - var(--timeline-media-half-h)
  );
  left: var(--timeline-media-left);
  width: var(--timeline-media-w);
}

/* Force the final milestone to end like the beginning: long stem + exact axis stop. */
body.philosophy-page .philosophy-timeline__item:last-child {
  --timeline-stem-height: clamp(244px, 28vh, 338px);
  margin-right: 0;
}

/* Standard gap from timeline to the next repeated History block. */
body.philosophy-page .philosophy-history-intro--followup {
  margin-left: var(--philosophy-history-scene-gap);
}

/* Footer should not sit immediately after the last follow-up copy. */
body.philosophy-page .philosophy-history-intro--followup:last-of-type {
  margin-right: var(--philosophy-followup-footer-gap);
}

/* Update panel width to include the footer breathing room after the last scene. */
body.philosophy-page .panel--philosophy-history {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-followup-footer-gap)
  ) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-followup-footer-gap)
  ) !important;
}

/* Rich text blocks for the last two History scenes. */
body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__copy h2 {
  margin: 0 0 var(--content-copy-gap);
  color: var(--philosophy-ink);
  font-size: var(--content-heading-size);
  font-weight: var(--content-heading-weight);
  letter-spacing: var(--content-heading-spacing);
  line-height: var(--content-heading-line-height);
  text-transform: uppercase;
}

body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__copy h2 span,
body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__copy h2 em {
  display: block;
}

body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__copy h2 em {
  color: var(--r3-red);
  font: inherit;
}

body.philosophy-page .philosophy-history-intro__rich-copy {
  width: 100%;
}

body.philosophy-page .philosophy-history-intro__rich-copy section + section {
  margin-top: 26px;
}

body.philosophy-page .philosophy-history-intro__rich-copy h3 {
  margin: 0 0 8px;
  color: var(--philosophy-ink);
  font-size: clamp(18px, 1vw, 22px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.35;
}

body.philosophy-page .philosophy-history-intro__rich-copy p {
  margin: 0;
  color: var(--color-muted-dark);
  font-size: var(--content-copy-size);
  font-weight: var(--content-copy-weight);
  line-height: var(--content-copy-line-height);
}

body.philosophy-page .philosophy-history-intro__rich-copy--single p {
  max-width: 100%;
}

@media (max-width: 900px) {
  body.philosophy-page .philosophy-timeline {
    padding-right: 0;
  }

  body.philosophy-page .philosophy-timeline::before {
    right: auto;
  }

  body.philosophy-page .philosophy-history-intro--followup {
    margin-left: 0;
  }

  body.philosophy-page .philosophy-history-intro--followup:last-of-type {
    margin-right: 0;
  }

  body.philosophy-page .panel--philosophy-history {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  body.philosophy-page .philosophy-history-intro__rich-copy section + section {
    margin-top: 20px;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v10
   Timeline year animation/proximity, exact terminal join,
   and wider follow-up copy layout spacing.
========================================================= */
body.philosophy-page {
  --philosophy-timeline-year-gap: 25px;
  --philosophy-timeline-year-lift: clamp(30px, 2.35vh, 44px);
  --philosophy-followup-copy-w: clamp(430px, 27vw, 560px);
  --philosophy-followup-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--philosophy-image-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-followup-copy-w)
  );
}

/* Desktop timeline end: keep the same tail for blank space, but close the last join manually. */
body.philosophy-page .philosophy-timeline {
  padding-right: var(--philosophy-timeline-tail-space);
}

body.philosophy-page .philosophy-timeline::before {
  left: var(--philosophy-timeline-axis-start);
  right: calc(var(--philosophy-timeline-item-w) - var(--philosophy-timeline-axis-start));
}

body.philosophy-page .philosophy-timeline__item:last-child {
  --timeline-stem-height: clamp(244px, 28vh, 338px);
  margin-right: 0;
}

/* Draw the final horizontal segment inside the last milestone so it meets the last vertical stem exactly. */
body.philosophy-page .philosophy-timeline__item:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--philosophy-timeline-baseline);
  width: var(--timeline-stem-x);
  height: 2px;
  background: var(--r3-red);
}

/* Years: same 25px stem gap rhythm as the image, closer to the line and animated on reveal. */
body.philosophy-page .philosophy-timeline__year {
  bottom: calc(var(--philosophy-timeline-baseline) + var(--philosophy-timeline-year-lift));
  left: 0;
  width: var(--timeline-stem-x);
  height: calc(var(--timeline-stem-height) - var(--philosophy-timeline-year-lift));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--philosophy-timeline-year-gap);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(18px) rotate(180deg);
  transition:
    opacity .42s ease .14s,
    transform .58s cubic-bezier(.22,.61,.36,1) .14s;
}

body.philosophy-page .philosophy-timeline__item.is-revealed .philosophy-timeline__year {
  opacity: 1;
  transform: translateY(0) rotate(180deg);
}

/* Keep content center at stem tip. */
body.philosophy-page .philosophy-timeline__content {
  bottom: calc(
    var(--philosophy-timeline-baseline)
    + var(--timeline-stem-height)
    - var(--timeline-media-half-h)
  );
}

/* Two concluding copied sections: use a wider text measure and standard breathing rhythm. */
body.philosophy-page .philosophy-history-intro--followup {
  width: var(--philosophy-followup-section-w);
  flex: 0 0 var(--philosophy-followup-section-w);
  margin-left: var(--philosophy-history-scene-gap);
}

body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__copy {
  width: var(--philosophy-followup-copy-w);
  flex: 0 0 var(--philosophy-followup-copy-w);
}

body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__copy h2 {
  max-width: 100%;
}

body.philosophy-page .philosophy-history-intro__rich-copy {
  max-width: 100%;
}

body.philosophy-page .philosophy-history-intro__rich-copy p,
body.philosophy-page .philosophy-history-intro__rich-copy--single p {
  max-width: 100%;
}

body.philosophy-page .philosophy-history-intro__rich-copy section + section {
  margin-top: 30px;
}

body.philosophy-page .philosophy-history-intro--followup:last-of-type {
  margin-right: var(--philosophy-followup-footer-gap);
}

/* Recalculate the history panel width with the wider final two sections. */
body.philosophy-page .panel--philosophy-history {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-followup-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-followup-section-w)
    + var(--philosophy-followup-footer-gap)
  ) !important;
  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-followup-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-followup-section-w)
    + var(--philosophy-followup-footer-gap)
  ) !important;
}

@media (max-width: 900px) {
  body.philosophy-page {
    --philosophy-followup-copy-w: 100%;
    --philosophy-followup-section-w: 100%;
    --philosophy-timeline-year-lift: 0px;
  }

  body.philosophy-page .philosophy-timeline::before {
    right: auto;
  }

  body.philosophy-page .philosophy-timeline__item:last-child::after {
    left: 33px;
    bottom: 54px;
    width: 2px;
    height: calc(100% - 54px);
    background: transparent;
  }

  body.philosophy-page .philosophy-timeline__year {
    opacity: 0;
    width: 68px;
    height: auto;
    display: block;
    padding-right: 0;
    writing-mode: horizontal-tb;
    transform: translateY(16px);
  }

  body.philosophy-page .philosophy-timeline__item.is-revealed .philosophy-timeline__year {
    transform: translateY(0);
  }

  body.philosophy-page .philosophy-history-intro--followup,
  body.philosophy-page .philosophy-history-intro--followup:last-of-type {
    margin-left: 0;
    margin-right: 0;
  }

  body.philosophy-page .panel--philosophy-history {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v11
   Final terminal join + widened conclusion scenes.
========================================================= */

body.philosophy-page {
  /*
    The timeline no longer needs a terminal footer tail because it now flows
    into the first follow-up scene. That scene owns the transition spacing.
  */
  --philosophy-timeline-tail-space: 0px;

  /*
    Both concluding copy fields use the same wider editorial measure.
    This keeps the first red statement on one desktop line and gives the
    final philosophy statement the same breathing room.
  */
  --philosophy-followup-copy-w: clamp(760px, 46vw, 980px);
  --philosophy-followup-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--philosophy-image-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-followup-copy-w)
  );
}

/*
  The axis stops at the beginning of the final milestone. A local bridge inside
  that final item reaches the final stem, so the terminal junction is physically
  identical to the first stem junction without relying on an approximate right gap.
*/
body.philosophy-page .philosophy-timeline::before {
  left: var(--philosophy-timeline-axis-start);
  right: var(--philosophy-timeline-item-w);
}

body.philosophy-page .philosophy-timeline__item:last-child::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: var(--philosophy-timeline-baseline);
  width: var(--timeline-stem-x);
  height: 2px;
  background: var(--r3-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .56s cubic-bezier(.22,.61,.36,1) .18s;
}

body.philosophy-page .philosophy-timeline.is-revealed .philosophy-timeline__item:last-child::after {
  transform: scaleX(1);
}

/*
  Years sit just before the stem with the same 25px spatial rhythm used by
  the media after the stem. They reveal with the same scroll-based sequence
  as the stem, title and visual.
*/
body.philosophy-page .philosophy-timeline__year {
  bottom: var(--philosophy-timeline-baseline);
  left: 0;
  width: calc(var(--timeline-stem-x) - var(--philosophy-timeline-year-gap));
  height: var(--timeline-stem-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(18px) rotate(180deg);
  transition:
    opacity .42s ease .14s,
    transform .58s cubic-bezier(.22,.61,.36,1) .14s;
}

body.philosophy-page .philosophy-timeline__item.is-revealed .philosophy-timeline__year {
  opacity: 1;
  transform: translateY(0) rotate(180deg);
}

/* Timeline → penultimate conclusion uses half the standard scene gap. */
body.philosophy-page .philosophy-history-intro--followup-first {
  margin-left: calc(var(--philosophy-history-scene-gap) * .5);
}

/* The follow-up copy fields are structurally wider on both final scenes. */
body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__copy {
  width: var(--philosophy-followup-copy-w);
  flex: 0 0 var(--philosophy-followup-copy-w);
}

/* The requested red sentence is forced as one desktop line. */
body.philosophy-page .philosophy-history-intro--followup-first .philosophy-history-intro__copy h2 em {
  white-space: nowrap;
}

body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__copy-main {
  width: 100%;
}

/* Retain standard spacing inside the rich-copy field, with a more comfortable text measure. */
body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__rich-copy {
  width: 100%;
  max-width: 100%;
}

body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__rich-copy section + section {
  margin-top: 30px;
}

/* Standard first/second conclusion spacing remains for the final pair. */
body.philosophy-page .philosophy-history-intro--followup-last {
  margin-left: var(--philosophy-history-scene-gap);
}

@media (max-width: 900px) {
  body.philosophy-page {
    --philosophy-followup-copy-w: 100%;
    --philosophy-followup-section-w: 100%;
    --philosophy-timeline-tail-space: 0px;
  }

  body.philosophy-page .philosophy-timeline::before {
    right: auto;
  }

  body.philosophy-page .philosophy-timeline__item:last-child::after {
    display: none;
  }

  body.philosophy-page .philosophy-timeline__year {
    width: 68px;
    height: auto;
    padding-right: 0;
    writing-mode: horizontal-tb;
    transform: translateY(16px);
  }

  body.philosophy-page .philosophy-timeline__item.is-revealed .philosophy-timeline__year {
    transform: translateY(0);
  }

  body.philosophy-page .philosophy-history-intro--followup-first,
  body.philosophy-page .philosophy-history-intro--followup-last {
    margin-left: 0;
  }

  body.philosophy-page .philosophy-history-intro--followup-first .philosophy-history-intro__copy h2 em {
    white-space: normal;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v12
   Pure white canvas, follow-up gradient timing and final-copy refinement.
========================================================= */

body.philosophy-page {
  --philosophy-timeline-followup-gap: calc(var(--philosophy-history-scene-gap) / 3);
  --philosophy-followup-gradient-w: clamp(630px, 45vw, 920px);
  --philosophy-horizon-copy-w: clamp(490px, 30vw, 610px);
}

/* Approved Philosophy canvas: true white beneath the dotted point system. */
body.philosophy-page .philosophy-entry {
  background:
    var(--dot-grid-light),
    #ffffff;
  background-size: var(--dot-grid-size), auto;
}

/* Timeline → first concluding History scene is one and a half times tighter. */
body.philosophy-page .philosophy-history-intro--followup-first {
  margin-left: var(--philosophy-timeline-followup-gap);
}

/*
  Both final History scenes use the Shared Commitment gradient behaviour:
  no full-scene wash from the left; the gradient begins at the true middle
  of the media field and opens across the related copy side.
*/
body.philosophy-page .philosophy-history-intro--followup::before {
  background: transparent;
}

body.philosophy-page .philosophy-history-intro--followup::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(var(--philosophy-stage-pad) + (var(--philosophy-image-w) / 2));
  width: var(--philosophy-followup-gradient-w);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(224 224 224 / 92%) 0%,
    rgb(223 227 236 / 82%) 15%,
    rgba(229, 232, 237, .56) 31%,
    rgba(242, 243, 246, .20) 47%,
    rgba(246, 245, 243, 0) 100%
  );
}

body.philosophy-page .philosophy-history-intro--followup .philosophy-history-intro__layout {
  position: relative;
  z-index: 1;
}

/* OUR DEDICATION uses the tightened first follow-up geometry, so its gradient must start at the true midpoint of the visual itself. */
body.philosophy-page .philosophy-history-intro--followup-first::after {
  left: calc(var(--philosophy-image-w) / 2);
}

/* OUR HORIZON body copy is intentionally narrower than its wide heading column. */
body.philosophy-page .philosophy-history-intro--followup-last .philosophy-history-intro__rich-copy--single p {
  max-width: var(--philosophy-horizon-copy-w);
}

/* Panel width mirrors the closer timeline-to-follow-up gap instead of the generic scene gap. */
body.philosophy-page .panel--philosophy-history {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-timeline-followup-gap)
    + var(--philosophy-followup-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-followup-section-w)
    + var(--philosophy-followup-footer-gap)
  ) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-timeline-followup-gap)
    + var(--philosophy-followup-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-followup-section-w)
    + var(--philosophy-followup-footer-gap)
  ) !important;
}

@media (max-width: 900px) {
  body.philosophy-page {
    --philosophy-timeline-followup-gap: 0px;
    --philosophy-horizon-copy-w: 100%;
  }

  body.philosophy-page .philosophy-history-intro--followup::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(
      180deg,
      rgb(224 224 224 / 72%) 0%,
      rgba(246, 245, 243, 0) 100%
    );
  }

  body.philosophy-page .philosophy-history-intro--followup-first {
    margin-left: 0;
  }

  body.philosophy-page .philosophy-history-intro--followup-last .philosophy-history-intro__rich-copy--single p {
    max-width: 100%;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v13
   Approved v10 timeline-year geometry lock + conclusion spacing.
========================================================= */

body.philosophy-page {
  /*
    LOCKED: v10 approved timeline-year geometry.
    Keep this untouched unless the timeline years themselves are explicitly revised.
  */
  --philosophy-timeline-year-gap: 25px;
  --philosophy-timeline-year-lift: clamp(30px, 2.35vh, 44px);

  /*
    Timeline → first conclusion:
    both the section gap and the first inner layout pad are reduced by 1.5x.
    This removes the hidden layout padding that was keeping the scene too far away.
  */
  --philosophy-timeline-followup-gap-v13: calc(var(--philosophy-history-scene-gap) / 4.5);
  --philosophy-followup-first-stage-pad: calc(var(--philosophy-stage-pad) / 1.5);
  --philosophy-followup-first-section-w: calc(
    var(--philosophy-followup-first-stage-pad)
    + var(--philosophy-image-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-followup-copy-w)
  );

  /*
    Final conclusion:
    footer distance equals the established image → copy gap.
    The final copy column follows the approved narrower OUR HORIZON text measure,
    so unused white canvas does not compound before the footer.
  */
  --philosophy-followup-footer-gap: var(--philosophy-copy-gap);
  --philosophy-followup-last-copy-w: var(--philosophy-horizon-copy-w);
  --philosophy-followup-last-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--philosophy-image-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-followup-last-copy-w)
  );
}

/*
  V10 approved year placement:
  - labels are 25px from their stem;
  - same proximity rhythm as the image after the stem;
  - lifted vertically as approved;
  - reveal animation remains synchronized with the stem/title/media.
*/
body.philosophy-page .philosophy-timeline__year {
  bottom: calc(
    var(--philosophy-timeline-baseline)
    + var(--philosophy-timeline-year-lift)
  );
  left: 0;
  width: var(--timeline-stem-x);
  height: calc(
    var(--timeline-stem-height)
    - var(--philosophy-timeline-year-lift)
  );
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--philosophy-timeline-year-gap);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(18px) rotate(180deg);
  transition:
    opacity .42s ease .14s,
    transform .58s cubic-bezier(.22,.61,.36,1) .14s;
}

body.philosophy-page .philosophy-timeline__item.is-revealed .philosophy-timeline__year {
  opacity: 1;
  transform: translateY(0) rotate(180deg);
}

/* Timeline → first concluding scene: geometry tightened at both section and layout level. */
body.philosophy-page .philosophy-history-intro--followup-first {
  width: var(--philosophy-followup-first-section-w);
  flex: 0 0 var(--philosophy-followup-first-section-w);
  margin-left: var(--philosophy-timeline-followup-gap-v13);
}

body.philosophy-page .philosophy-history-intro--followup-first .philosophy-history-intro__layout {
  padding-left: var(--philosophy-followup-first-stage-pad);
}

/*
  Final scene:
  reduces the internal unused copy canvas and sets the footer gap to the exact
  same spacing token used between its media and copy.
*/
body.philosophy-page .philosophy-history-intro--followup-last {
  width: var(--philosophy-followup-last-section-w);
  flex: 0 0 var(--philosophy-followup-last-section-w);
  margin-left: var(--philosophy-history-scene-gap);
  margin-right: var(--philosophy-followup-footer-gap);
}

body.philosophy-page .philosophy-history-intro--followup-last .philosophy-history-intro__copy {
  width: var(--philosophy-followup-last-copy-w);
  flex: 0 0 var(--philosophy-followup-last-copy-w);
}

body.philosophy-page .philosophy-history-intro--followup-last .philosophy-history-intro__rich-copy--single p {
  max-width: 100%;
}

/* Recalculate the full horizontal canvas with the actual first/last conclusion widths. */
body.philosophy-page .panel--philosophy-history {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-timeline-followup-gap-v13)
    + var(--philosophy-followup-first-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-followup-last-section-w)
    + var(--philosophy-followup-footer-gap)
  ) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-timeline-followup-gap-v13)
    + var(--philosophy-followup-first-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-followup-last-section-w)
    + var(--philosophy-followup-footer-gap)
  ) !important;
}

@media (max-width: 900px) {
  body.philosophy-page {
    --philosophy-timeline-followup-gap-v13: 0px;
    --philosophy-followup-first-stage-pad: 24px;
    --philosophy-followup-first-section-w: 100%;
    --philosophy-followup-last-copy-w: 100%;
    --philosophy-followup-last-section-w: 100%;
  }

  body.philosophy-page .philosophy-timeline__year {
    bottom: auto;
    left: auto;
    width: 68px;
    height: auto;
    display: block;
    padding-right: 0;
    writing-mode: horizontal-tb;
    transform: translateY(16px);
  }

  body.philosophy-page .philosophy-timeline__item.is-revealed .philosophy-timeline__year {
    transform: translateY(0);
  }

  body.philosophy-page .philosophy-history-intro--followup-first,
  body.philosophy-page .philosophy-history-intro--followup-last {
    width: 100%;
    flex-basis: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body.philosophy-page .philosophy-history-intro--followup-first .philosophy-history-intro__layout {
    padding: 54px 24px 78px;
  }
}


/* =========================================================
   PHILOSOPHY / HISTORY SYSTEM v14
   Timeline-to-follow-up visual-edge spacing lock.
========================================================= */

body.philosophy-page {
  /*
    This is the actual unused visual tail inside the final timeline record:
    final item width - (stem offset + timeline image width).
    It is subtracted from the follow-up margin so the physical space between
    the last timeline IMAGE and the next History IMAGE equals the approved
    --philosophy-history-scene-gap token exactly.
  */
  --philosophy-timeline-terminal-visual-tail: calc(
    var(--philosophy-timeline-item-w)
    - var(--philosophy-timeline-axis-start)
    - clamp(202px, 13.2vw, 270px)
  );

  --philosophy-timeline-to-followup-visual-gap: max(
    0px,
    calc(
      var(--philosophy-history-scene-gap)
      - var(--philosophy-timeline-terminal-visual-tail)
    )
  );

  /*
    The follow-up media starts at the section edge: no hidden stage padding is
    permitted at this particular Timeline → History transition.
  */
  --philosophy-followup-first-stage-pad-v14: 0px;
  --philosophy-followup-first-section-w-v14: calc(
    var(--philosophy-image-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-followup-copy-w)
  );
}

/*
  PHYSICAL GAP CONTRACT:
  last timeline visual right edge → next History visual left edge
  = --philosophy-history-scene-gap
*/
body.philosophy-page .philosophy-history-intro--followup-first {
  width: var(--philosophy-followup-first-section-w-v14);
  flex: 0 0 var(--philosophy-followup-first-section-w-v14);
  margin-left: var(--philosophy-timeline-to-followup-visual-gap);
}

body.philosophy-page .philosophy-history-intro--followup-first .philosophy-history-intro__layout {
  padding-left: var(--philosophy-followup-first-stage-pad-v14);
}

/*
  Canvas calculation follows the same visual-edge formula.
  Timeline year placement and timeline animation geometry are intentionally
  untouched in this revision.
*/
body.philosophy-page .panel--philosophy-history {
  width: var(--philosophy-history-auto-w, calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-timeline-to-followup-visual-gap)
    + var(--philosophy-followup-first-section-w-v14)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-followup-last-section-w)
    + var(--philosophy-followup-footer-gap)
  )) !important;

  flex: 0 0 var(--philosophy-history-auto-w, calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-intro-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shared-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-wide-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-timeline-section-min-w)
    + var(--philosophy-timeline-to-followup-visual-gap)
    + var(--philosophy-followup-first-section-w-v14)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-followup-last-section-w)
    + var(--philosophy-followup-footer-gap)
  )) !important;
}

@media (max-width: 900px) {
  body.philosophy-page {
    --philosophy-timeline-terminal-visual-tail: 0px;
    --philosophy-timeline-to-followup-visual-gap: 0px;
    --philosophy-followup-first-section-w-v14: 100%;
  }

  body.philosophy-page .philosophy-history-intro--followup-first {
    width: 100%;
    flex-basis: 100%;
    margin-left: 0;
  }

  body.philosophy-page .philosophy-history-intro--followup-first .philosophy-history-intro__layout {
    padding: 54px 24px 78px;
  }
}

/* =========================================================
   PHILOSOPHY / SHIPYARD INTRO
   Inner nav standard preserved; first scene starts right after it.
========================================================= */

body.philosophy-page {
  --philosophy-shipyard-image-w: clamp(700px, 43vw, 930px);
  --philosophy-shipyard-image-h: clamp(430px, 53vh, 610px);
  --philosophy-shipyard-copy-w: clamp(420px, 30vw, 620px);
  --philosophy-shipyard-gap: clamp(70px, 5.8vw, 122px);
  --philosophy-shipyard-tail-space: clamp(150px, 10vw, 230px);
  --philosophy-shipyard-gradient-w: clamp(820px, 58vw, 1200px);
  --philosophy-shipyard-gradient-start: clamp(36px, 2.5vw, 72px);
  --philosophy-shipyard-scene-gap: calc(var(--philosophy-history-scene-gap) * .58);

  --philosophy-shipyard-followup-image-w: clamp(455px, 27vw, 560px);
  --philosophy-shipyard-followup-image-h: clamp(620px, 74vh, 820px);
  --philosophy-shipyard-followup-copy-w: clamp(500px, 30vw, 680px);
  --philosophy-shipyard-followup-gap: clamp(70px, 5.5vw, 116px);
  --philosophy-shipyard-followup-tail-space: clamp(120px, 8vw, 190px);
  --philosophy-shipyard-followup-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--philosophy-shipyard-followup-image-w)
    + var(--philosophy-shipyard-followup-gap)
    + var(--philosophy-shipyard-followup-copy-w)
    + var(--philosophy-shipyard-followup-tail-space)
  );

  --philosophy-shipyard-capabilities-image-w: clamp(690px, 43vw, 920px);
  --philosophy-shipyard-capabilities-copy-w: clamp(430px, 27vw, 600px);
  --philosophy-shipyard-capabilities-gap: clamp(84px, 6.2vw, 130px);
  --philosophy-shipyard-capabilities-tail-space: clamp(160px, 10vw, 240px);
  --philosophy-shipyard-capabilities-table-w: clamp(940px, 61vw, 1180px);
  --philosophy-shipyard-capabilities-table-gap: clamp(72px, 6vw, 120px);
  --philosophy-shipyard-capabilities-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--philosophy-shipyard-capabilities-image-w)
    + var(--philosophy-shipyard-capabilities-gap)
    + var(--philosophy-shipyard-capabilities-copy-w)
    + var(--philosophy-shipyard-capabilities-tail-space)
  );

  --philosophy-shipyard-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--philosophy-shipyard-image-w)
    + var(--philosophy-shipyard-gap)
    + var(--philosophy-shipyard-copy-w)
    + var(--philosophy-shipyard-tail-space)
  );
}

body.shipyard-page .panel--shipyard-intro {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
  ) !important;
  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
  ) !important;
}

body.shipyard-page .philosophy-shipyard-intro {
  position: relative;
  z-index: 1;
  width: var(--philosophy-shipyard-section-w);
  height: 100%;
  flex: 0 0 var(--philosophy-shipyard-section-w);
  isolation: isolate;
}

body.shipyard-page .philosophy-shipyard-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(224 224 224 / 92%) 0%,
    rgb(223 227 236 / 82%) 15%,
    rgba(229, 232, 237, .56) 31%,
    rgba(242, 243, 246, .20) 47%,
    rgba(246, 245, 243, 0) 62%
  );
}

body.shipyard-page .philosophy-shipyard-intro__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0 var(--philosophy-shipyard-tail-space) 0 var(--philosophy-stage-pad);
  display: flex;
  align-items: center;
}

body.shipyard-page .philosophy-shipyard-intro__media {
  position: relative;
  width: var(--philosophy-shipyard-image-w);
  height: var(--philosophy-shipyard-image-h);
  flex: 0 0 var(--philosophy-shipyard-image-w);
  margin: 0;
  overflow: hidden;
  clip-path: polygon(10% 0, 100% 0, 100% 84%, 90% 100%, 0 100%, 0 16%);
  background: linear-gradient(135deg, rgba(23,25,44,.09), rgba(23,25,44,.025)), #e6e5e2;
  box-shadow: 0 16px 38px rgba(23,25,44,.08);
}

body.shipyard-page .philosophy-shipyard-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.014);
  transition:
    opacity .28s var(--ease),
    transform 6.2s cubic-bezier(.2,.65,.25,1);
}

body.shipyard-page .philosophy-shipyard-intro__media img.is-loaded {
  opacity: 1;
}

body.shipyard-page .philosophy-shipyard-intro__media:hover img.is-loaded {
  transform: scale(1.05);
}

body.shipyard-page .philosophy-shipyard-intro__copy {
  width: var(--philosophy-shipyard-copy-w);
  flex: 0 0 var(--philosophy-shipyard-copy-w);
  margin-left: var(--philosophy-shipyard-gap);
  color: var(--philosophy-ink);
}

body.shipyard-page .philosophy-shipyard-intro__eyebrow {
  margin: 0 0 24px;
  color: var(--r3-red);
  font-size: clamp(18px, 1vw, 24px);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}

body.shipyard-page .philosophy-shipyard-intro__motto-wrap {
  margin: 0 0 38px;
}

body.shipyard-page .philosophy-shipyard-intro__motto {
  display: block;
  width: min(100%, 660px);
  max-width: 100%;
  height: auto;
}

body.shipyard-page .philosophy-shipyard-intro__rich-copy p {
  margin: 0;
  color: var(--color-muted-dark);
  font-size: var(--content-copy-size);
  font-weight: var(--content-copy-weight);
  letter-spacing: 0;
  line-height: var(--content-copy-line-height);
}

body.shipyard-page .philosophy-shipyard-intro__rich-copy p + p {
  margin-top: 26px;
}


body.shipyard-page .philosophy-shipyard-followup {
  position: relative;
  z-index: 1;
  width: var(--philosophy-shipyard-followup-section-w);
  height: 100%;
  flex: 0 0 var(--philosophy-shipyard-followup-section-w);
  margin-left: var(--philosophy-history-scene-gap);
  isolation: isolate;
}

body.shipyard-page .philosophy-shipyard-followup::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(224 224 224 / 92%) 0%,
    rgb(223 227 236 / 82%) 15%,
    rgba(229, 232, 237, .56) 31%,
    rgba(242, 243, 246, .20) 47%,
    rgba(246, 245, 243, 0) 62%
  );
}

body.shipyard-page .philosophy-shipyard-followup__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0 var(--philosophy-shipyard-followup-tail-space) 0 var(--philosophy-stage-pad);
  display: flex;
  align-items: center;
}

body.shipyard-page .philosophy-shipyard-followup__media {
  position: relative;
  width: var(--philosophy-shipyard-followup-image-w);
  height: var(--philosophy-shipyard-followup-image-h);
  flex: 0 0 var(--philosophy-shipyard-followup-image-w);
  margin: 0;
  overflow: hidden;
  clip-path: polygon(10% 0, 100% 0, 100% 84%, 90% 100%, 0 100%, 0 16%);
  background: linear-gradient(135deg, rgba(23,25,44,.09), rgba(23,25,44,.025)), #e6e5e2;
  box-shadow: 0 16px 38px rgba(23,25,44,.08);
}

body.shipyard-page .philosophy-shipyard-followup__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.014);
  transition:
    opacity .28s var(--ease),
    transform 6.2s cubic-bezier(.2,.65,.25,1);
}

body.shipyard-page .philosophy-shipyard-followup__media img.is-loaded {
  opacity: 1;
}

body.shipyard-page .philosophy-shipyard-followup__media:hover img.is-loaded {
  transform: scale(1.05);
}

body.shipyard-page .philosophy-shipyard-followup__copy {
  width: var(--philosophy-shipyard-followup-copy-w);
  flex: 0 0 var(--philosophy-shipyard-followup-copy-w);
  margin-left: var(--philosophy-shipyard-followup-gap);
  color: var(--philosophy-ink);
}

body.shipyard-page .philosophy-shipyard-followup__copy-main {
  width: 100%;
}

body.shipyard-page .philosophy-shipyard-followup__copy h2 {
  margin: 0 0 34px;
  color: var(--r3-red);
  font-size: clamp(28px, 1.95vw, 42px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.14;
  text-transform: uppercase;
}

body.shipyard-page .philosophy-shipyard-followup__rich-copy p {
  margin: 0;
  color: var(--color-muted-dark);
  font-size: var(--content-copy-size);
  font-weight: var(--content-copy-weight);
  letter-spacing: 0;
  line-height: var(--content-copy-line-height);
}

body.shipyard-page .philosophy-shipyard-followup__rich-copy p + p {
  margin-top: 20px;
}


body.shipyard-page .philosophy-shipyard-capabilities {
  position: relative;
  z-index: 1;
  width: var(--philosophy-shipyard-capabilities-section-w);
  height: 100%;
  flex: 0 0 var(--philosophy-shipyard-capabilities-section-w);
  margin-left: var(--philosophy-shipyard-scene-gap);
}

body.shipyard-page .philosophy-shipyard-capabilities__layout {
  width: 100%;
  padding: 0 var(--philosophy-shipyard-capabilities-tail-space) 0 var(--philosophy-stage-pad);
  display: flex;
  align-items: center;
}

body.shipyard-page .philosophy-shipyard-capabilities__media {
  position: relative;
  width: var(--philosophy-shipyard-capabilities-image-w);
  flex: 0 0 var(--philosophy-shipyard-capabilities-image-w);
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(23,25,44,.09), rgba(23,25,44,.025)), #e6e5e2;
  box-shadow: 0 16px 38px rgba(23,25,44,.08);
}

body.shipyard-page .philosophy-shipyard-capabilities__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.014);
  transition:
    opacity .28s var(--ease),
    transform 6.2s cubic-bezier(.2,.65,.25,1);
}

body.shipyard-page .philosophy-shipyard-capabilities__media img.is-loaded {
  opacity: 1;
}

body.shipyard-page .philosophy-shipyard-capabilities__media:hover img.is-loaded {
  transform: scale(1.05);
}

body.shipyard-page .philosophy-shipyard-capabilities__copy {
  width: var(--philosophy-shipyard-capabilities-copy-w);
  flex: 0 0 var(--philosophy-shipyard-capabilities-copy-w);
  margin-left: var(--philosophy-shipyard-capabilities-gap);
  color: var(--philosophy-ink);
}

body.shipyard-page .philosophy-shipyard-capabilities__copy-main {
  width: 100%;
}

body.shipyard-page .philosophy-shipyard-capabilities__copy h2 {
  margin: 0 0 34px;
  color: var(--r3-red);
  font-size: clamp(28px, 1.95vw, 42px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.14;
  text-transform: uppercase;
}

body.shipyard-page .philosophy-shipyard-capabilities__rich-copy p {
  margin: 0;
  color: var(--color-muted-dark);
  font-size: var(--content-copy-size);
  font-weight: var(--content-copy-weight);
  letter-spacing: 0;
  line-height: var(--content-copy-line-height);
}

body.shipyard-page .philosophy-shipyard-capabilities__table-wrap {
  width: 100%;
  padding: var(--philosophy-shipyard-capabilities-table-gap) var(--philosophy-shipyard-capabilities-tail-space) 0 var(--philosophy-stage-pad);
  box-sizing: border-box;
}

body.shipyard-page .philosophy-shipyard-capabilities__table-card {
  width: min(100%, var(--philosophy-shipyard-capabilities-table-w));
  margin: 0 auto;
  padding: clamp(40px, 4.2vw, 64px) clamp(38px, 4vw, 56px) clamp(42px, 4.2vw, 62px);
  border-radius: clamp(28px, 3vw, 44px);
  background: #cfcfcf;
  box-sizing: border-box;
}

body.shipyard-page .philosophy-shipyard-capabilities__table-card h3 {
  margin: 0 0 34px;
  color: var(--r3-red);
  font-size: clamp(24px, 1.75vw, 38px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
}

body.shipyard-page .philosophy-shipyard-capabilities__table-scroll {
  width: 100%;
}

body.shipyard-page .philosophy-shipyard-capabilities__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body.shipyard-page .philosophy-shipyard-capabilities__table thead th {
  padding: 16px 20px;
  background: #17192c;
  color: var(--r3-red);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
  border-right: 1px solid rgba(229,229,229,.55);
}

body.shipyard-page .philosophy-shipyard-capabilities__table thead th:first-child,
body.shipyard-page .philosophy-shipyard-capabilities__table tbody td:first-child {
  width: 13%;
  text-align: center;
}

body.shipyard-page .philosophy-shipyard-capabilities__table thead th:nth-child(2),
body.shipyard-page .philosophy-shipyard-capabilities__table tbody td:nth-child(2) {
  width: 31%;
}

body.shipyard-page .philosophy-shipyard-capabilities__table thead th:nth-child(3),
body.shipyard-page .philosophy-shipyard-capabilities__table tbody td:nth-child(3) {
  width: 14%;
  text-align: center;
}

body.shipyard-page .philosophy-shipyard-capabilities__table thead th:last-child {
  border-right: 0;
}

body.shipyard-page .philosophy-shipyard-capabilities__table tbody td {
  padding: 14px 20px;
  background: rgba(255,255,255,.24);
  color: #2b2b2b;
  font-size: 14px;
  line-height: 1.25;
  border-top: 4px solid #cfcfcf;
  border-right: 4px solid #cfcfcf;
}

body.shipyard-page .philosophy-shipyard-capabilities__table tbody td:last-child {
  border-right: 0;
}


@media (max-width: 900px) {
  body.shipyard-page .panel--shipyard-intro {
    width: 100% !important;
    min-height: 100svh;
    flex-basis: 100% !important;
  }

  body.shipyard-page .philosophy-shipyard-intro {
    width: 100%;
    height: auto;
    flex-basis: auto;
  }

  body.shipyard-page .philosophy-shipyard-intro::before {
    background: linear-gradient(
      180deg,
      rgb(224 224 224 / 72%) 0%,
      rgba(246, 245, 243, 0) 64%
    );
  }

  body.shipyard-page .philosophy-shipyard-intro__layout {
    height: auto;
    padding: 54px 24px 78px;
    flex-direction: column;
    align-items: flex-start;
  }

  body.shipyard-page .philosophy-shipyard-intro__media {
    width: min(100%, 640px);
    height: auto;
    aspect-ratio: 16 / 10;
    flex-basis: auto;
    align-self: center;
  }

  body.shipyard-page .philosophy-shipyard-intro__copy {
    width: min(100%, 580px);
    flex-basis: auto;
    margin: 40px 0 0;
  }

  body.shipyard-page .philosophy-shipyard-intro__motto {
    width: min(100%, 540px);
  }

  body.shipyard-page .philosophy-shipyard-followup {
    width: 100%;
    min-height: 100svh;
    flex-basis: 100%;
    margin-left: 0;
  }

  body.shipyard-page .philosophy-shipyard-followup::before {
    background: linear-gradient(
      180deg,
      rgb(224 224 224 / 72%) 0%,
      rgba(246, 245, 243, 0) 64%
    );
  }

  body.shipyard-page .philosophy-shipyard-followup__layout {
    height: auto;
    padding: 54px 24px 78px;
    flex-direction: column;
    align-items: flex-start;
  }

  body.shipyard-page .philosophy-shipyard-followup__media {
    width: min(100%, 640px);
    height: auto;
    aspect-ratio: 4 / 5;
    flex-basis: auto;
    align-self: center;
  }

  body.shipyard-page .philosophy-shipyard-followup__copy {
    width: min(100%, 620px);
    flex-basis: auto;
    margin: 40px 0 0;
  }

  body.shipyard-page .philosophy-shipyard-capabilities {
    width: 100%;
    height: auto;
    flex-basis: auto;
    margin-left: 0;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__layout {
    padding: 54px 24px 0;
    flex-direction: column;
    align-items: flex-start;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__media {
    width: 100%;
    flex-basis: auto;
    align-self: center;
    aspect-ratio: 3 / 2;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__copy {
    width: 100%;
    flex-basis: auto;
    margin: 40px 0 0;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__table-wrap {
    padding: 42px 24px 78px;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__table-card {
    width: 100%;
    padding: 28px 18px 24px;
    border-radius: 22px;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__table-card h3 {
    margin-bottom: 20px;
    font-size: clamp(20px, 5vw, 28px);
  }

  body.shipyard-page .philosophy-shipyard-capabilities__table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__table {
    min-width: 620px;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__table thead th,
  body.shipyard-page .philosophy-shipyard-capabilities__table tbody td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

/* =========================================================
   PHILOSOPHY / SHIPYARD SYSTEM v21
   Visual → copy → compact specs stage.
========================================================= */

body.shipyard-page {
  /* Shipyard uses a tighter but consistent scene rhythm for the first two editorial scenes. */
  --philosophy-shipyard-scene-gap: calc(var(--philosophy-history-scene-gap) * .58);

  /* The third sequence remains visual → copy; the table is its own horizontal stage after the copy. */
  --philosophy-shipyard-capabilities-tail-space: 0px;
  --philosophy-shipyard-specs-w: clamp(700px, 43vw, 850px);
  --philosophy-shipyard-specs-card-w: clamp(590px, 37vw, 720px);
  --philosophy-shipyard-specs-tail-space: clamp(120px, 8vw, 190px);
}

/* Full horizontal canvas including the standalone specs stage and its closing breathing room. */
body.shipyard-page .panel--shipyard-intro {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shipyard-specs-w)
    + var(--philosophy-shipyard-specs-tail-space)
  ) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shipyard-specs-w)
    + var(--philosophy-shipyard-specs-tail-space)
  ) !important;
}

/* Second Shipyard visual: the same tall, cut-corner language as History 01. */
body.shipyard-page .philosophy-shipyard-followup {
  margin-left: var(--philosophy-shipyard-scene-gap);
}

body.shipyard-page .philosophy-shipyard-followup__media {
  clip-path: polygon(14% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 14%);
}

/* No special gradient is introduced behind Sustainability's plain wide visual. */
body.shipyard-page .philosophy-shipyard-capabilities {
  margin-left: var(--philosophy-shipyard-scene-gap);
}

/* Dedicated table stage, placed horizontally after the Sustainability copy. */
body.shipyard-page .philosophy-shipyard-specs {
  position: relative;
  z-index: 1;
  width: var(--philosophy-shipyard-specs-w);
  height: 100%;
  flex: 0 0 var(--philosophy-shipyard-specs-w);
  margin-left: var(--philosophy-history-scene-gap);
}

body.shipyard-page .philosophy-shipyard-specs__layout {
  width: 100%;
  height: 100%;
  padding: 0 var(--philosophy-shipyard-specs-tail-space) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Compact R3 vessel-specs proportion: controlled card, centered title/table, no oversized slab. */
body.shipyard-page .philosophy-shipyard-specs__card {
  width: min(100%, var(--philosophy-shipyard-specs-card-w));
  padding: clamp(32px, 3vw, 48px) clamp(30px, 3vw, 46px) clamp(34px, 3.15vw, 50px);
  border-radius: clamp(28px, 2.8vw, 42px);
  background: #cfcfcf;
  box-sizing: border-box;
}

body.shipyard-page .philosophy-shipyard-specs__card h3 {
  margin: 0 0 clamp(22px, 2.1vw, 32px);
  color: var(--r3-red);
  font-size: clamp(22px, 1.55vw, 31px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
}

body.shipyard-page .philosophy-shipyard-specs__table-scroll {
  width: 100%;
}

body.shipyard-page .philosophy-shipyard-specs__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body.shipyard-page .philosophy-shipyard-specs__table thead th {
  padding: clamp(10px, .92vw, 15px) clamp(12px, 1.12vw, 18px);
  background: #17192c;
  color: var(--r3-red);
  font-size: clamp(10px, .73vw, 13px);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
  border-right: 1px solid rgba(229,229,229,.55);
}

body.shipyard-page .philosophy-shipyard-specs__table thead th:first-child,
body.shipyard-page .philosophy-shipyard-specs__table tbody td:first-child {
  width: 13%;
  text-align: center;
}

body.shipyard-page .philosophy-shipyard-specs__table thead th:nth-child(2),
body.shipyard-page .philosophy-shipyard-specs__table tbody td:nth-child(2) {
  width: 31%;
}

body.shipyard-page .philosophy-shipyard-specs__table thead th:nth-child(3),
body.shipyard-page .philosophy-shipyard-specs__table tbody td:nth-child(3) {
  width: 14%;
  text-align: center;
}

body.shipyard-page .philosophy-shipyard-specs__table thead th:last-child {
  border-right: 0;
}

body.shipyard-page .philosophy-shipyard-specs__table tbody td {
  padding: clamp(8px, .78vw, 12px) clamp(12px, 1.12vw, 18px);
  background: rgba(255,255,255,.24);
  color: #2b2b2b;
  font-size: clamp(10px, .7vw, 13px);
  line-height: 1.25;
  border-top: 4px solid #cfcfcf;
  border-right: 4px solid #cfcfcf;
}

body.shipyard-page .philosophy-shipyard-specs__table tbody td:last-child {
  border-right: 0;
}

@media (max-width: 900px) {
  body.shipyard-page .philosophy-shipyard-specs {
    width: 100%;
    height: auto;
    flex-basis: auto;
    margin: 42px 0 78px;
  }

  body.shipyard-page .philosophy-shipyard-specs__layout {
    height: auto;
    padding: 0 24px;
  }

  body.shipyard-page .philosophy-shipyard-specs__card {
    width: 100%;
    padding: 28px 18px 24px;
    border-radius: 22px;
  }

  body.shipyard-page .philosophy-shipyard-specs__card h3 {
    margin-bottom: 20px;
    font-size: clamp(20px, 5vw, 28px);
  }

  body.shipyard-page .philosophy-shipyard-specs__table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.shipyard-page .philosophy-shipyard-specs__table {
    min-width: 620px;
  }

  body.shipyard-page .philosophy-shipyard-specs__table thead th,
  body.shipyard-page .philosophy-shipyard-specs__table tbody td {
    padding: 12px;
    font-size: 12px;
  }
}

/* =========================================================
   PHILOSOPHY / SHIPYARD SYSTEM v22
   Sustainability visual + copy: exact History-wide editorial geometry.
========================================================= */

body.shipyard-page {
  /*
    LOCKED INTERPRETATION:
    The Sustainability visual uses the exact History-wide media width and 3:2
    proportion. The copy remains to its right; only the already-approved
    standalone table stage follows later in the horizontal flow.
  */
  --philosophy-shipyard-capabilities-image-w: var(--philosophy-wide-visual-w);
  --philosophy-shipyard-capabilities-copy-w: clamp(530px, 32vw, 680px);
  --philosophy-shipyard-capabilities-gap: var(--philosophy-copy-gap);
  --philosophy-shipyard-capabilities-tail-space: clamp(132px, 8vw, 190px);
  --philosophy-shipyard-capabilities-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--philosophy-shipyard-capabilities-image-w)
    + var(--philosophy-shipyard-capabilities-gap)
    + var(--philosophy-shipyard-capabilities-copy-w)
    + var(--philosophy-shipyard-capabilities-tail-space)
  );
}

/* The visual + copy pair is vertically centered as one editorial composition. */
body.shipyard-page .philosophy-shipyard-capabilities {
  height: 100%;
  flex: 0 0 var(--philosophy-shipyard-capabilities-section-w);
  width: var(--philosophy-shipyard-capabilities-section-w);
}

body.shipyard-page .philosophy-shipyard-capabilities__layout {
  height: 100%;
  min-height: 100%;
  padding: 0 var(--philosophy-shipyard-capabilities-tail-space) 0 var(--philosophy-stage-pad);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Same plain media treatment and exact width as .philosophy-history-wide__media. */
body.shipyard-page .philosophy-shipyard-capabilities__media {
  width: var(--philosophy-wide-visual-w);
  flex: 0 0 var(--philosophy-wide-visual-w);
  aspect-ratio: 3 / 2;
}

body.shipyard-page .philosophy-shipyard-capabilities__copy {
  width: var(--philosophy-shipyard-capabilities-copy-w);
  flex: 0 0 var(--philosophy-shipyard-capabilities-copy-w);
  margin-left: var(--philosophy-copy-gap);
}

body.shipyard-page .philosophy-shipyard-capabilities__copy h2 {
  font-size: clamp(25px, 1.7vw, 34px);
  white-space: nowrap;
}

body.shipyard-page .philosophy-shipyard-capabilities__rich-copy {
  max-width: 100%;
}

@media (max-width: 900px) {
  body.shipyard-page .philosophy-shipyard-capabilities {
    width: 100%;
    height: auto;
    min-height: 0;
    flex-basis: auto;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__layout {
    height: auto;
    min-height: 0;
    padding: 54px 24px 0;
    flex-direction: column;
    align-items: flex-start;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__media {
    width: 100%;
    flex-basis: auto;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__copy {
    width: 100%;
    flex-basis: auto;
    margin: 40px 0 0;
  }

  body.shipyard-page .philosophy-shipyard-capabilities__copy h2 {
    white-space: normal;
  }
}


/* =========================================================
   PHILOSOPHY / SHIPYARD SYSTEM v23
   Specs-stage spacing contract + footer-tone table surface.
========================================================= */

body.shipyard-page {
  /*
    PHYSICAL SPACING CONTRACT
    Sustainability copy → table = visual → copy gap.
    Table → following stage/footer = the same gap.

    The half-gap is used only inside the centered table stage. Together with
    the zero tail after the Sustainability copy, it preserves a centered card
    while keeping both visible exterior gaps exactly on the shared grid.
  */
  --philosophy-shipyard-table-half-gap: clamp(48px, 4vw, 85px);
  --philosophy-shipyard-capabilities-tail-space: 0px;
  --philosophy-shipyard-specs-tail-space: var(--philosophy-shipyard-table-half-gap);
  --philosophy-shipyard-specs-w: calc(
    var(--philosophy-shipyard-specs-card-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-shipyard-table-half-gap)
  );
}

/* Actual visible copy-edge → table-card gap resolves to --philosophy-copy-gap. */
body.shipyard-page .philosophy-shipyard-specs {
  margin-left: var(--philosophy-shipyard-table-half-gap);
}

/* Table card uses the global footer gray, including its grid separators. */
body.shipyard-page .philosophy-shipyard-specs__card {
  background: var(--color-footer-surface);
}

body.shipyard-page .philosophy-shipyard-specs__table tbody td {
  border-top-color: var(--color-footer-surface);
  border-right-color: var(--color-footer-surface);
}

@media (max-width: 900px) {
  body.shipyard-page .philosophy-shipyard-specs {
    margin: var(--philosophy-copy-gap) 0 var(--philosophy-copy-gap);
  }
}


/* =========================================================
   PHILOSOPHY / SHIPYARD SYSTEM v24
   Followup headline lock + post-specs editorial scene.
========================================================= */

body.shipyard-page {
  /* Block 2 heading must stay on one line and the body text spreads on a wider measure. */
  --philosophy-shipyard-followup-copy-w: clamp(620px, 37vw, 820px);
  --philosophy-shipyard-followup-gap: var(--philosophy-copy-gap);
  --philosophy-shipyard-followup-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--philosophy-shipyard-followup-image-w)
    + var(--philosophy-shipyard-followup-gap)
    + var(--philosophy-shipyard-followup-copy-w)
    + var(--philosophy-shipyard-followup-tail-space)
  );

  /* Block 4: same cut-corner wide media language as Block 1, with a right-side editorial copy. */
  --philosophy-shipyard-expertise-image-w: var(--philosophy-shipyard-image-w);
  --philosophy-shipyard-expertise-image-h: var(--philosophy-shipyard-image-h);
  --philosophy-shipyard-expertise-copy-w: clamp(520px, 31vw, 660px);
  --philosophy-shipyard-expertise-gap: var(--philosophy-copy-gap);
  --philosophy-shipyard-expertise-tail-space: clamp(140px, 9vw, 205px);
  --philosophy-shipyard-expertise-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--philosophy-shipyard-expertise-image-w)
    + var(--philosophy-shipyard-expertise-gap)
    + var(--philosophy-shipyard-expertise-copy-w)
    + var(--philosophy-shipyard-expertise-tail-space)
  );
}

/* Recompute the full horizontal canvas to include the new fourth editorial scene. */
body.shipyard-page .panel--shipyard-intro {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shipyard-specs-w)
    + var(--philosophy-shipyard-table-half-gap)
    + var(--philosophy-shipyard-expertise-section-w)
  ) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shipyard-specs-w)
    + var(--philosophy-shipyard-table-half-gap)
    + var(--philosophy-shipyard-expertise-section-w)
  ) !important;
}

body.shipyard-page .philosophy-shipyard-followup__copy h2 {
  font-size: clamp(24px, 1.58vw, 31px);
  line-height: 1.1;
  white-space: nowrap;
}

body.shipyard-page .philosophy-shipyard-followup__rich-copy {
  max-width: 100%;
}

/* Block 4 starts after the same visible spacing rhythm used around the specs card. */
body.shipyard-page .philosophy-shipyard-expertise {
  position: relative;
  z-index: 1;
  width: var(--philosophy-shipyard-expertise-section-w);
  height: 100%;
  flex: 0 0 var(--philosophy-shipyard-expertise-section-w);
  margin-left: var(--philosophy-shipyard-table-half-gap);
  isolation: isolate;
}

body.shipyard-page .philosophy-shipyard-expertise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(224 224 224 / 92%) 0%,
    rgb(223 227 236 / 82%) 15%,
    rgba(229, 232, 237, .56) 31%,
    rgba(242, 243, 246, .20) 47%,
    rgba(246, 245, 243, 0) 62%
  );
}

body.shipyard-page .philosophy-shipyard-expertise__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0 var(--philosophy-shipyard-expertise-tail-space) 0 var(--philosophy-stage-pad);
  display: flex;
  align-items: center;
}

body.shipyard-page .philosophy-shipyard-expertise__media {
  position: relative;
  width: var(--philosophy-shipyard-expertise-image-w);
  height: var(--philosophy-shipyard-expertise-image-h);
  flex: 0 0 var(--philosophy-shipyard-expertise-image-w);
  margin: 0;
  overflow: hidden;
  clip-path: polygon(10% 0, 100% 0, 100% 84%, 90% 100%, 0 100%, 0 16%);
  background: linear-gradient(135deg, rgba(23,25,44,.09), rgba(23,25,44,.025)), #e6e5e2;
  box-shadow: 0 16px 38px rgba(23,25,44,.08);
}

body.shipyard-page .philosophy-shipyard-expertise__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.014);
  transition:
    opacity .28s var(--ease),
    transform 6.2s cubic-bezier(.2,.65,.25,1);
}

body.shipyard-page .philosophy-shipyard-expertise__media img.is-loaded {
  opacity: 1;
}

body.shipyard-page .philosophy-shipyard-expertise__media:hover img.is-loaded {
  transform: scale(1.05);
}

body.shipyard-page .philosophy-shipyard-expertise__copy {
  width: var(--philosophy-shipyard-expertise-copy-w);
  flex: 0 0 var(--philosophy-shipyard-expertise-copy-w);
  margin-left: var(--philosophy-shipyard-expertise-gap);
  color: var(--philosophy-ink);
}

body.shipyard-page .philosophy-shipyard-expertise__copy-main {
  width: 100%;
}

body.shipyard-page .philosophy-shipyard-expertise__copy h2 {
  margin: 0 0 34px;
  color: var(--r3-red);
  font-size: clamp(25px, 1.68vw, 33px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
}

body.shipyard-page .philosophy-shipyard-expertise__rich-copy p {
  margin: 0;
  color: var(--color-muted-dark);
  font-size: var(--content-copy-size);
  font-weight: var(--content-copy-weight);
  letter-spacing: 0;
  line-height: var(--content-copy-line-height);
}

@media (max-width: 900px) {
  body.shipyard-page .panel--shipyard-intro {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  body.shipyard-page .philosophy-shipyard-followup__copy {
    width: min(100%, 700px);
  }

  body.shipyard-page .philosophy-shipyard-followup__copy h2 {
    white-space: normal;
  }

  body.shipyard-page .philosophy-shipyard-expertise {
    width: 100%;
    height: auto;
    flex-basis: auto;
    margin-left: 0;
  }

  body.shipyard-page .philosophy-shipyard-expertise::before {
    background: linear-gradient(
      180deg,
      rgb(224 224 224 / 72%) 0%,
      rgba(246, 245, 243, 0) 64%
    );
  }

  body.shipyard-page .philosophy-shipyard-expertise__layout {
    height: auto;
    padding: 54px 24px 78px;
    flex-direction: column;
    align-items: flex-start;
  }

  body.shipyard-page .philosophy-shipyard-expertise__media {
    width: min(100%, 640px);
    height: auto;
    aspect-ratio: 16 / 10;
    flex-basis: auto;
    align-self: center;
  }

  body.shipyard-page .philosophy-shipyard-expertise__copy {
    width: min(100%, 620px);
    flex-basis: auto;
    margin: 40px 0 0;
  }

  body.shipyard-page .philosophy-shipyard-expertise__copy h2 {
    white-space: normal;
  }
}


/* =========================================================
   PHILOSOPHY / SHIPYARD SYSTEM v25
   Block 4 service tabs + gallery lightbox.
========================================================= */

body.shipyard-page {
  /* FACILITY & EXPERTISE copy → services stage uses the same standard visual/copy spacing. */
  --philosophy-shipyard-expertise-tail-space: 0px;
  --philosophy-shipyard-services-tabs-w: clamp(300px, 20vw, 410px);
  --philosophy-shipyard-services-content-w: clamp(570px, 37vw, 760px);
  --philosophy-shipyard-services-gap: var(--philosophy-copy-gap);
  --philosophy-shipyard-services-tail-space: var(--philosophy-copy-gap);
  --philosophy-shipyard-services-section-w: calc(
    var(--philosophy-shipyard-services-tabs-w)
    + var(--philosophy-shipyard-services-gap)
    + var(--philosophy-shipyard-services-content-w)
    + var(--philosophy-shipyard-services-tail-space)
  );
}

body.shipyard-page .panel--shipyard-intro {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shipyard-specs-w)
    + var(--philosophy-shipyard-table-half-gap)
    + var(--philosophy-shipyard-expertise-section-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-shipyard-services-section-w)
  ) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shipyard-specs-w)
    + var(--philosophy-shipyard-table-half-gap)
    + var(--philosophy-shipyard-expertise-section-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-shipyard-services-section-w)
  ) !important;
}

body.shipyard-page .philosophy-shipyard-services {
  position: relative;
  z-index: 1;
  width: var(--philosophy-shipyard-services-section-w);
  height: 100%;
  flex: 0 0 var(--philosophy-shipyard-services-section-w);
  margin-left: var(--philosophy-copy-gap);
}

body.shipyard-page .philosophy-shipyard-services__layout {
  width: 100%;
  height: 100%;
  padding: 0 var(--philosophy-shipyard-services-tail-space) 0 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

body.shipyard-page .philosophy-shipyard-services__tabs {
  width: var(--philosophy-shipyard-services-tabs-w);
  flex: 0 0 var(--philosophy-shipyard-services-tabs-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(14px, 1.65vw, 27px);
}

body.shipyard-page .philosophy-shipyard-services__tab {
  width: 100%;
  min-height: clamp(42px, 3vw, 60px);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #171717;
  cursor: pointer;
  font: inherit;
  font-size: clamp(17px, 1.24vw, 25px);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.15;
  text-align: center;
  transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}

body.shipyard-page .philosophy-shipyard-services__tab span {
  display: none;
  margin-left: 14px;
  color: currentColor;
  font-size: 1.1em;
  line-height: 0;
}

body.shipyard-page .philosophy-shipyard-services__tab.is-active {
  border-color: #24234a;
  color: var(--r3-red);
  font-weight: 500;
}

body.shipyard-page .philosophy-shipyard-services__tab.is-active span {
  display: inline;
}

body.shipyard-page .philosophy-shipyard-services__tab:hover,
body.shipyard-page .philosophy-shipyard-services__tab:focus-visible {
  border-color: rgba(36,35,74,.7);
  outline: none;
}

body.shipyard-page .philosophy-shipyard-services__tab:not(.is-active):hover {
  color: var(--r3-red);
  transform: translateX(4px);
}

body.shipyard-page .philosophy-shipyard-services__content {
  width: var(--philosophy-shipyard-services-content-w);
  flex: 0 0 var(--philosophy-shipyard-services-content-w);
  margin-left: var(--philosophy-shipyard-services-gap);
}

body.shipyard-page .philosophy-shipyard-services__copy {
  max-width: 100%;
}

body.shipyard-page .philosophy-shipyard-services__copy p {
  margin: 0;
  color: var(--color-muted-dark);
  font-size: var(--content-copy-size);
  font-weight: var(--content-copy-weight);
  letter-spacing: 0;
  line-height: var(--content-copy-line-height);
}

body.shipyard-page .philosophy-shipyard-services__copy ul {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--r3-red);
  font-size: var(--content-copy-size);
  font-weight: 500;
  line-height: 1.48;
}

body.shipyard-page .philosophy-shipyard-services__copy li::before {
  content: "- ";
}

body.shipyard-page .philosophy-shipyard-services__gallery {
  width: 100%;
  height: clamp(290px, 32vh, 410px);
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.shipyard-page .philosophy-shipyard-services__gallery-item {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: #e6e5e2;
  cursor: zoom-in;
  overflow: hidden;
}

body.shipyard-page .philosophy-shipyard-services__gallery-item--tall {
  grid-row: 1 / 3;
}

body.shipyard-page .philosophy-shipyard-services__gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.012);
  transition: opacity .28s var(--ease), transform .42s var(--ease);
}

body.shipyard-page .philosophy-shipyard-services__gallery-item img.is-loaded {
  opacity: 1;
}

body.shipyard-page .philosophy-shipyard-services__gallery-item:hover img.is-loaded,
body.shipyard-page .philosophy-shipyard-services__gallery-item:focus-visible img.is-loaded {
  transform: scale(1.06);
}

body.shipyard-page .philosophy-shipyard-services__gallery-item:focus-visible {
  outline: 2px solid var(--r3-red);
  outline-offset: 3px;
}

body.shipyard-page .philosophy-shipyard-services__content.is-switching {
  animation: shipyard-service-content-switch .42s var(--ease) both;
}

@keyframes shipyard-service-content-switch {
  0% { opacity: .25; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Gallery lightbox: translucent navy/blue glass, close with X, backdrop or Escape. */
.shipyard-gallery-lightbox {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 82px);
  background: rgb(24 26 63 / 72%);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
}

.shipyard-gallery-lightbox[hidden] {
  display: none;
}

.shipyard-gallery-lightbox__dialog {
  position: relative;
  width: min(100%, 1120px);
  max-height: 100%;
  display: grid;
  place-items: center;
}

.shipyard-gallery-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - clamp(48px, 10vw, 150px));
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}

.shipyard-gallery-lightbox__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 50%;
  background: rgb(24 26 63 / 58%);
  color: #fff;
  cursor: pointer;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.shipyard-gallery-lightbox__close:hover,
.shipyard-gallery-lightbox__close:focus-visible {
  background: var(--r3-red);
  outline: none;
  transform: scale(1.05);
}

body.shipyard-gallery-lightbox-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  body.shipyard-page .philosophy-shipyard-services {
    width: 100%;
    height: auto;
    flex-basis: auto;
    margin: 0;
  }

  body.shipyard-page .philosophy-shipyard-services__layout {
    height: auto;
    padding: 54px 24px 78px;
    flex-direction: column;
    align-items: stretch;
  }

  body.shipyard-page .philosophy-shipyard-services__tabs {
    width: 100%;
    flex-basis: auto;
    gap: 12px;
  }

  body.shipyard-page .philosophy-shipyard-services__tab {
    min-height: 48px;
    font-size: clamp(15px, 4.2vw, 20px);
  }

  body.shipyard-page .philosophy-shipyard-services__content {
    width: 100%;
    flex-basis: auto;
    margin: 42px 0 0;
  }

  body.shipyard-page .philosophy-shipyard-services__gallery {
    height: min(74vw, 390px);
  }

  .shipyard-gallery-lightbox {
    padding: 28px 20px;
  }

  .shipyard-gallery-lightbox__close {
    top: -15px;
    right: -8px;
  }
}


/* =========================================================
   PHILOSOPHY / SHIPYARD SYSTEM v27
   Services gallery carousel + Quality Management editorial scene.
========================================================= */

body.shipyard-page {
  /* Approved services menu sizing. */
  --philosophy-shipyard-services-tabs-gap: clamp(14px, 1.65vw, 15px);
  --philosophy-shipyard-services-tab-size: clamp(16px, 1.24vw, 20px);

  /*
    Block 5 uses the final History scene language: tall cut-corner media,
    editorial copy at right, and the standard media-to-copy spacing.
    Its left pad is deliberately zero so the visible gap after Services is
    exactly the already-approved standard --philosophy-copy-gap tail.
  */
  --philosophy-shipyard-quality-image-w: var(--philosophy-image-w);
  --philosophy-shipyard-quality-image-h: var(--philosophy-image-h);
  --philosophy-shipyard-quality-copy-w: clamp(500px, 30vw, 660px);
  --philosophy-shipyard-quality-gap: var(--philosophy-copy-gap);
  --philosophy-shipyard-quality-tail-space: var(--philosophy-copy-gap);
  --philosophy-shipyard-quality-section-w: calc(
    var(--philosophy-shipyard-quality-image-w)
    + var(--philosophy-shipyard-quality-gap)
    + var(--philosophy-shipyard-quality-copy-w)
    + var(--philosophy-shipyard-quality-tail-space)
  );
}

/* Exact service-tab spacing and typography requested for desktop. */
body.shipyard-page .philosophy-shipyard-services__tabs {
  gap: var(--philosophy-shipyard-services-tabs-gap);
}

body.shipyard-page .philosophy-shipyard-services__tab {
  font-size: var(--philosophy-shipyard-services-tab-size);
}

/* Add Block 5 to the desktop horizontal canvas after the Services stage. */
body.shipyard-page .panel--shipyard-intro {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shipyard-specs-w)
    + var(--philosophy-shipyard-table-half-gap)
    + var(--philosophy-shipyard-expertise-section-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-shipyard-services-section-w)
    + var(--philosophy-shipyard-quality-section-w)
  ) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shipyard-specs-w)
    + var(--philosophy-shipyard-table-half-gap)
    + var(--philosophy-shipyard-expertise-section-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-shipyard-services-section-w)
    + var(--philosophy-shipyard-quality-section-w)
  ) !important;
}

/*
  New Block 5: follows the History final-scene composition.
  The #e8eefa paper field begins from the visual midpoint, behind the media
  and copy, then dissipates toward the end of the editorial scene.
*/
body.shipyard-page .philosophy-shipyard-quality {
  position: relative;
  z-index: 1;
  width: var(--philosophy-shipyard-quality-section-w);
  height: 100%;
  flex: 0 0 var(--philosophy-shipyard-quality-section-w);
  margin-left: 0;
  isolation: isolate;
}

body.shipyard-page .philosophy-shipyard-quality::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(var(--philosophy-shipyard-quality-image-w) / 2);
  width: calc(
    (var(--philosophy-shipyard-quality-image-w) / 2)
    + var(--philosophy-shipyard-quality-gap)
    + var(--philosophy-shipyard-quality-copy-w)
    + var(--philosophy-shipyard-quality-tail-space)
  );
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #e8eefa 0%,
    rgb(232 238 250 / 92%) 16%,
    rgb(232 238 250 / 62%) 42%,
    rgb(232 238 250 / 22%) 67%,
    rgb(232 238 250 / 0%) 100%
  );
}

body.shipyard-page .philosophy-shipyard-quality__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0 var(--philosophy-shipyard-quality-tail-space) 0 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

body.shipyard-page .philosophy-shipyard-quality__media {
  position: relative;
  width: var(--philosophy-shipyard-quality-image-w);
  height: var(--philosophy-shipyard-quality-image-h);
  flex: 0 0 var(--philosophy-shipyard-quality-image-w);
  margin: 0;
  overflow: hidden;
  clip-path: polygon(14% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 14%);
  background: linear-gradient(135deg, rgba(23,25,44,.09), rgba(23,25,44,.025)), #e6e5e2;
  box-shadow: 0 16px 38px rgba(23,25,44,.08);
}

body.shipyard-page .philosophy-shipyard-quality__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.014);
  transition:
    opacity .28s var(--ease),
    transform 6.2s cubic-bezier(.2,.65,.25,1);
}

body.shipyard-page .philosophy-shipyard-quality__media img.is-loaded {
  opacity: 1;
}

body.shipyard-page .philosophy-shipyard-quality__media:hover img.is-loaded {
  transform: scale(1.05);
}

body.shipyard-page .philosophy-shipyard-quality__copy {
  position: relative;
  width: var(--philosophy-shipyard-quality-copy-w);
  height: var(--philosophy-shipyard-quality-image-h);
  flex: 0 0 var(--philosophy-shipyard-quality-copy-w);
  margin-left: var(--philosophy-shipyard-quality-gap);
  color: var(--philosophy-ink);
}

body.shipyard-page .philosophy-shipyard-quality__copy-main {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

body.shipyard-page .philosophy-shipyard-quality__copy h2 {
  margin: 0 0 28px;
  color: var(--r3-red);
  font-size: clamp(25px, 1.65vw, 33px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.12;
  text-transform: uppercase;
}

body.shipyard-page .philosophy-shipyard-quality__rich-copy p {
  margin: 0;
  color: var(--color-muted-dark);
  font-size: var(--content-copy-size);
  font-weight: var(--content-copy-weight);
  letter-spacing: 0;
  line-height: var(--content-copy-line-height);
}

body.shipyard-page .philosophy-shipyard-quality__rich-copy p + p {
  margin-top: 24px;
}

/* Lightbox becomes a navigable three-image gallery, scoped to the current Service tab. */
.shipyard-gallery-lightbox__dialog {
  width: min(100%, 1240px);
  grid-template-columns: clamp(46px, 4vw, 64px) minmax(0, 1fr) clamp(46px, 4vw, 64px);
  align-items: center;
  gap: clamp(8px, 1.4vw, 22px);
}

.shipyard-gallery-lightbox__media {
  grid-column: 2;
  width: 100%;
  display: grid;
  place-items: center;
}

.shipyard-gallery-lightbox__image {
  width: 100%;
}

.shipyard-gallery-lightbox__nav {
  width: clamp(44px, 3.6vw, 58px);
  height: clamp(74px, 8vw, 112px);
  border: 0;
  background: transparent;
  color: rgb(255 255 255 / 38%);
  cursor: pointer;
  font-size: clamp(44px, 4vw, 68px);
  font-weight: 300;
  line-height: .72;
  text-align: center;
  transition: color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease), text-shadow .2s var(--ease);
}

.shipyard-gallery-lightbox__nav--previous {
  grid-column: 1;
}

.shipyard-gallery-lightbox__nav--next {
  grid-column: 3;
}

.shipyard-gallery-lightbox__nav:hover,
.shipyard-gallery-lightbox__nav:focus-visible {
  color: var(--r3-red);
  outline: none;
  text-shadow: 0 0 20px rgb(255 68 61 / 52%);
  transform: scale(1.08);
}

.shipyard-gallery-lightbox__nav:active {
  transform: scale(.96);
}

@media (max-width: 900px) {
  body.shipyard-page .philosophy-shipyard-services__tabs {
    gap: 15px;
  }

  body.shipyard-page .philosophy-shipyard-services__tab {
    font-size: clamp(16px, 4.2vw, 20px);
  }

  body.shipyard-page .panel--shipyard-intro {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  body.shipyard-page .philosophy-shipyard-quality {
    width: 100%;
    height: auto;
    flex-basis: auto;
  }

  body.shipyard-page .philosophy-shipyard-quality::before {
    left: 0;
    width: 100%;
    top: 34%;
    background: linear-gradient(
      180deg,
      #e8eefa 0%,
      rgb(232 238 250 / 56%) 42%,
      rgb(232 238 250 / 0%) 100%
    );
  }

  body.shipyard-page .philosophy-shipyard-quality__layout {
    height: auto;
    padding: 54px 24px 78px;
    flex-direction: column;
    align-items: flex-start;
  }

  body.shipyard-page .philosophy-shipyard-quality__media {
    width: min(76vw, 430px);
    height: auto;
    aspect-ratio: 260 / 374;
    flex-basis: auto;
    align-self: center;
  }

  body.shipyard-page .philosophy-shipyard-quality__copy {
    width: 100%;
    height: auto;
    flex-basis: auto;
    margin: 40px 0 0;
  }

  body.shipyard-page .philosophy-shipyard-quality__copy-main {
    position: static;
    transform: none;
  }

  .shipyard-gallery-lightbox__dialog {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 2px;
  }

  .shipyard-gallery-lightbox__nav {
    width: 42px;
    height: 70px;
    font-size: 48px;
  }
}


/* =========================================================
   PHILOSOPHY / SHIPYARD SYSTEM v28
   Quality process sequence + certification download stage.
========================================================= */

body.shipyard-page {
  --philosophy-shipyard-quality-systems-w: clamp(1220px, 78vw, 1600px);
  --philosophy-shipyard-quality-systems-footer-gap: var(--philosophy-copy-gap);
}

/* Extend the Shipyard horizontal canvas with the closing Quality systems stage. */
body.shipyard-page .panel--shipyard-intro {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shipyard-specs-w)
    + var(--philosophy-shipyard-table-half-gap)
    + var(--philosophy-shipyard-expertise-section-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-shipyard-services-section-w)
    + var(--philosophy-shipyard-quality-section-w)
    + var(--philosophy-shipyard-quality-systems-w)
    + var(--philosophy-shipyard-quality-systems-footer-gap)
  ) !important;

  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--philosophy-shipyard-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-followup-section-w)
    + var(--philosophy-shipyard-scene-gap)
    + var(--philosophy-shipyard-capabilities-section-w)
    + var(--philosophy-history-scene-gap)
    + var(--philosophy-shipyard-specs-w)
    + var(--philosophy-shipyard-table-half-gap)
    + var(--philosophy-shipyard-expertise-section-w)
    + var(--philosophy-copy-gap)
    + var(--philosophy-shipyard-services-section-w)
    + var(--philosophy-shipyard-quality-section-w)
    + var(--philosophy-shipyard-quality-systems-w)
    + var(--philosophy-shipyard-quality-systems-footer-gap)
  ) !important;
}

/* This stage begins after the Quality copy's own standard tail gap. */
body.shipyard-page .philosophy-shipyard-quality-systems {
  position: relative;
  z-index: 1;
  width: var(--philosophy-shipyard-quality-systems-w);
  height: 100%;
  flex: 0 0 var(--philosophy-shipyard-quality-systems-w);
  margin-right: var(--philosophy-shipyard-quality-systems-footer-gap);
  overflow: hidden;
  background: #e8eefa;
}

    body.shipyard-page .philosophy-shipyard-quality-systems__layout {
        width: 100%;
        height: 100%;
        padding: clamp(72px, 10vh, 130px) clamp(74px, 6vw, 130px) clamp(58px, 8vh, 110px);
        box-sizing: border-box;
        display: flex;
        flex-direction: column; 
        justify-content: center !important;
    }

body.shipyard-page .philosophy-shipyard-quality-systems__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(132px, 1fr));
  gap: clamp(28px, 2.6vw, 58px);
  align-items: start;
}

body.shipyard-page .philosophy-shipyard-quality-systems__step {
  position: relative;
  min-height: clamp(152px, 13vw, 220px);
  padding: clamp(28px, 2.2vw, 42px) clamp(18px, 1.8vw, 34px);
  border-radius: clamp(22px, 1.8vw, 32px);
  background: rgba(255,255,255,.93);
  color: #121719;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(30px) scale(.97);
  transition:
    opacity .42s ease,
    transform .58s cubic-bezier(.22,.61,.36,1);
}

/* The stepped lower outline is intentionally alternate navy / red like the supplied concept. */
body.shipyard-page .philosophy-shipyard-quality-systems__step::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: clamp(-18px, -1.2vw, -10px);
  right: clamp(20px, 1.5vw, 28px);
  top: clamp(66px, 5.5vw, 94px);
  height: calc(100% + clamp(24px, 2vw, 36px));
  border: 1.5px solid #17192c;
  border-radius: clamp(22px, 1.8vw, 32px) 0 clamp(28px, 2vw, 36px) 0;
  border-top-color: transparent;
  pointer-events: none;
}

body.shipyard-page .philosophy-shipyard-quality-systems__step:nth-of-type(odd)::after {
  border-color: var(--r3-red);
  border-top-color: transparent;
}

body.shipyard-page .philosophy-shipyard-quality-systems__step span {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(14px, 1.03vw, 19px);
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.32;
  text-align: center;
  text-transform: uppercase;
}

body.shipyard-page .philosophy-shipyard-quality-systems.is-revealed .philosophy-shipyard-quality-systems__step {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.shipyard-page .philosophy-shipyard-quality-systems.is-revealed .philosophy-shipyard-quality-systems__step:nth-of-type(1) { transition-delay: .02s; }
body.shipyard-page .philosophy-shipyard-quality-systems.is-revealed .philosophy-shipyard-quality-systems__step:nth-of-type(2) { transition-delay: .13s; }
body.shipyard-page .philosophy-shipyard-quality-systems.is-revealed .philosophy-shipyard-quality-systems__step:nth-of-type(3) { transition-delay: .24s; }
body.shipyard-page .philosophy-shipyard-quality-systems.is-revealed .philosophy-shipyard-quality-systems__step:nth-of-type(4) { transition-delay: .35s; }
body.shipyard-page .philosophy-shipyard-quality-systems.is-revealed .philosophy-shipyard-quality-systems__step:nth-of-type(5) { transition-delay: .46s; }

body.shipyard-page .philosophy-shipyard-quality-systems__downloads {
  width: min(100%, 1120px);
  margin: clamp(58px, 8vh, 112px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(80px, 10vw, 180px);
  row-gap: clamp(36px, 5vh, 68px);
}

body.shipyard-page .philosophy-shipyard-quality-systems__download {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 1.6vw, 28px);
  width: fit-content;
  max-width: 100%;
  color: #121719;
  text-decoration: none;
  transition: color .22s var(--ease), transform .22s var(--ease);
}

body.shipyard-page .philosophy-shipyard-quality-systems__download svg {
  flex: 0 0 clamp(58px, 4.4vw, 74px);
  width: clamp(58px, 4.4vw, 74px);
  height: auto;
  color: #17192c;
  transition: color .22s var(--ease), transform .22s var(--ease);
}

body.shipyard-page .philosophy-shipyard-quality-systems__download span {
  font-size: clamp(14px, .98vw, 18px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.45;
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:hover,
body.shipyard-page .philosophy-shipyard-quality-systems__download:focus-visible {
  color: var(--r3-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  outline: none;
  transform: translateX(5px);
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:hover svg,
body.shipyard-page .philosophy-shipyard-quality-systems__download:focus-visible svg {
  color: var(--r3-red);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  body.shipyard-page .panel--shipyard-intro {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems {
    width: 100%;
    height: auto;
    min-height: 100svh;
    flex-basis: auto;
    margin: 0;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__layout {
    height: auto;
    min-height: 100svh;
    padding: 68px 24px 78px;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__step {
    min-height: 138px;
    padding: 24px 14px;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__step:last-child {
    grid-column: 1 / -1;
    width: calc((100% - 20px) / 2);
    justify-self: center;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__step span {
    font-size: clamp(12px, 3.5vw, 16px);
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__downloads {
    grid-template-columns: 1fr;
    row-gap: 28px;
    margin-top: 64px;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__download {
    gap: 18px;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__download span {
    font-size: 14px;
  }
}

/* Accessible heading helper for the Quality systems stage. */
body.shipyard-page .philosophy-shipyard-quality-systems .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   PHILOSOPHY / SHIPYARD SYSTEM v29
   Quality field unification: solid #e8eefa begins at media midpoint.
========================================================= */

body.shipyard-page {
  --philosophy-shipyard-quality-surface: #e8eefa;

  /*
    The trailing standard gap is part of the blue Quality field, not a separate
    white panel gap. This carries the exact same surface continuously to footer.
  */
  --philosophy-shipyard-quality-systems-w: calc(
    clamp(1220px, 78vw, 1600px)
    + var(--philosophy-copy-gap)
  );
  --philosophy-shipyard-quality-systems-footer-gap: 0px;
}

/*
  QUALITY MANAGEMENT FIELD:
  solid—not degraded—from the visual midpoint onward. The point pattern stays
  visible on the blue surface, then continues without interruption in the
  quality-process/certificate area.
*/
body.shipyard-page .philosophy-shipyard-quality::before {
  left: calc(var(--philosophy-shipyard-quality-image-w) / 2);
  width: calc(
    (var(--philosophy-shipyard-quality-image-w) / 2)
    + var(--philosophy-shipyard-quality-gap)
    + var(--philosophy-shipyard-quality-copy-w)
    + var(--philosophy-shipyard-quality-tail-space)
  );
  background:
    var(--dot-grid-light),
    var(--philosophy-shipyard-quality-surface);
  background-size: var(--dot-grid-size), auto;
  background-repeat: repeat, repeat;
}

/* The closing Quality stage owns the full blue field through the footer edge. */
body.shipyard-page .philosophy-shipyard-quality-systems {
  margin-right: 0;
  background:
    var(--dot-grid-light),
    var(--philosophy-shipyard-quality-surface);
  background-size: var(--dot-grid-size), auto;
  background-repeat: repeat, repeat;
}

/* Hard-lock the requested two-by-three certificate grid: 2 / 2 / 2. */
body.shipyard-page .philosophy-shipyard-quality-systems__downloads {
  width: min(100%, 1120px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: row;
  column-gap: clamp(80px, 10vw, 180px);
  row-gap: clamp(36px, 5vh, 68px);
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(odd) {
  grid-column: 1;
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(even) {
  grid-column: 2;
}

@media (max-width: 900px) {
  body.shipyard-page .philosophy-shipyard-quality::before {
    top: 34%;
    left: 0;
    width: 100%;
    background:
      var(--dot-grid-light),
      var(--philosophy-shipyard-quality-surface);
    background-size: var(--dot-grid-size), auto;
    background-repeat: repeat, repeat;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems {
    margin: 0;
    background:
      var(--dot-grid-light),
      var(--philosophy-shipyard-quality-surface);
    background-size: var(--dot-grid-size), auto;
    background-repeat: repeat, repeat;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__downloads {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 28px;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(odd),
  body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(even) {
    grid-column: auto;
  }
}


/* =========================================================
   PHILOSOPHY / SHIPYARD SYSTEM v30
   Quality process geometry + paired certificate columns.
========================================================= */

body.shipyard-page {
  /* The blue quality field continues as the final page surface until the footer begins. */
  --philosophy-shipyard-quality-systems-w: calc(
    clamp(1220px, 78vw, 1600px)
    + var(--philosophy-copy-gap)
    + var(--footer-w)
  );
  --philosophy-shipyard-quality-systems-footer-gap: 0px;
}

/* Solid quality field begins at the visual midpoint and keeps the standard point texture visible. */
body.shipyard-page .philosophy-shipyard-quality::before {
  z-index: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(23,25,44,.11) 0 1px, transparent 1.45px),
    var(--philosophy-shipyard-quality-surface);
  background-size: 28px 28px, auto;
  background-repeat: repeat, repeat;
}

body.shipyard-page .philosophy-shipyard-quality-systems {
  background:
    radial-gradient(circle at 1px 1px, rgba(23,25,44,.11) 0 1px, transparent 1.45px),
    var(--philosophy-shipyard-quality-surface);
  background-size: 28px 28px, auto;
  background-repeat: repeat, repeat;
}

/* Exact stepped-outline geometry from the supplied reference. */
body.shipyard-page .philosophy-shipyard-quality-systems__step::after {
  left: clamp(-22px, -1.25vw, -14px);
  right: clamp(18px, 1.25vw, 28px);
  top: calc(var(--philosophy-shipyard-quality-step-h) * .56);
  height: calc(var(--philosophy-shipyard-quality-step-h) * .58);
  border: 1.5px solid #17192c;
  border-radius: 0 clamp(22px, 1.6vw, 32px);
  border-top-color: transparent;
}

body.shipyard-page .philosophy-shipyard-quality-systems__step:nth-of-type(odd)::after {
  border-color: var(--r3-red);
  border-top-color: transparent;
}

/* Three centered vertical pairs: 2 + 2 + 2, never a 2-column / 3-row grid. */
body.shipyard-page .philosophy-shipyard-quality-systems__downloads {
  width: min(100%, 1260px);
  margin: clamp(58px, 8vh, 112px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: clamp(54px, 5.5vw, 108px);
  row-gap: clamp(36px, 5vh, 68px);
  align-items: start;
}

body.shipyard-page .philosophy-shipyard-quality-systems__download {
  width: 100%;
  justify-self: start;
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(1),
body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(2) {
  grid-column: 1;
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(1) { grid-row: 1; }
body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(2) { grid-row: 2; }

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(3),
body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(4) {
  grid-column: 2;
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(3) { grid-row: 1; }
body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(4) { grid-row: 2; }

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(5),
body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(6) {
  grid-column: 3;
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(5) { grid-row: 1; }
body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(6) { grid-row: 2; }

@media (max-width: 900px) {
  body.shipyard-page .philosophy-shipyard-quality-systems__step::after {
    left: -14px;
    right: 18px;
    top: 58px;
    height: calc(100% + 20px);
    border-radius: 0 24px;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__downloads {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    row-gap: 28px;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
}


/* =========================================================
   PHILOSOPHY / SHIPYARD SYSTEM v31
   Quality process geometry lock + final blue field closure.
========================================================= */

body.shipyard-page {
  /* Existing upper-to-lower distance reduced by exactly 1.5×. */
  --philosophy-shipyard-quality-systems-w: calc(
    clamp(1020px, 62vw, 1240px)
    + var(--philosophy-copy-gap)
  );
  --philosophy-shipyard-quality-content-w: clamp(1060px, 70vw, 1240px);
  --philosophy-shipyard-quality-download-gap: clamp(98px, 12vh, 150px);
  --philosophy-shipyard-quality-download-col-gap: clamp(34px, 3.4vw, 68px);
  --philosophy-shipyard-quality-download-row-gap: clamp(36px, 4.8vh, 60px);
  --philosophy-shipyard-quality-step-w: clamp(150px, 9.3vw, 188px);
  --philosophy-shipyard-quality-step-h: clamp(126px, 9.9vw, 166px);
  --philosophy-shipyard-quality-step-outline-w: calc(var(--philosophy-shipyard-quality-step-w) * 1.24);
  --philosophy-shipyard-quality-step-outline-h: calc(var(--philosophy-shipyard-quality-step-outline-w) * .745);
}

/*
  Exact process-card outline geometry supplied for the five-step sequence.
  The high-specificity revealed rule prevents earlier revision layers from
  reintroducing the former multi-corner radius after the animation runs.
*/
    body.shipyard-page .philosophy-shipyard-quality-systems__step::after,
    body.shipyard-page .philosophy-shipyard-quality-systems.is-revealed .philosophy-shipyard-quality-systems__step::after {
        content: "";
        position: absolute;
        z-index: 1;
        left: calc(var(--philosophy-shipyard-quality-step-w) * -.10);
        right: auto;
        top: calc(var(--philosophy-shipyard-quality-step-h) * .30);
        width: var(--philosophy-shipyard-quality-step-outline-w);
        height: var(--philosophy-shipyard-quality-step-outline-h);
        border: 0;
        border-radius: 0;
        background: url("/App_Themes/RmkYachts/assets/images/shipyard-quality-step-navy.svg") center / 100% 100% no-repeat;
        pointer-events: none;
        width: 180px;
        top: 60px;
    }

    body.shipyard-page .philosophy-shipyard-quality-systems__step:nth-of-type(odd)::after,
    body.shipyard-page .philosophy-shipyard-quality-systems.is-revealed .philosophy-shipyard-quality-systems__step:nth-of-type(odd)::after {
        background-image: url("/App_Themes/RmkYachts/assets/images/shipyard-quality-step-red.svg");
       
    }

/*
  The process and certificate group now sit in a controlled normal flow.
  `space-between` had been holding the certificates too far below the cards;
  this retains the agreed 2 / 2 / 2 grid and brings it 1.5× closer.
*/
body.shipyard-page .philosophy-shipyard-quality-systems__layout {
  align-items: center;
  justify-content: flex-start;
  padding:
    clamp(96px, 12.5vh, 136px)
    clamp(72px, 5.7vw, 108px)
    clamp(48px, 7vh, 86px);
}

body.shipyard-page .philosophy-shipyard-quality-systems__steps {
  width: min(100%, var(--philosophy-shipyard-quality-content-w));
  margin: 0 auto;
  grid-template-columns: repeat(5, var(--philosophy-shipyard-quality-step-w));
  justify-content: space-between;
  gap: clamp(28px, 2.65vw, 48px);
}

body.shipyard-page .philosophy-shipyard-quality-systems__step {
  isolation: isolate;
  overflow: visible;
  width: var(--philosophy-shipyard-quality-step-w);
  min-height: var(--philosophy-shipyard-quality-step-h);
  padding: clamp(22px, 1.8vw, 34px) clamp(16px, 1.4vw, 26px);
  border-radius: clamp(16px, 1.35vw, 26px);
  background: transparent;
  box-shadow: none;
}

body.shipyard-page .philosophy-shipyard-quality-systems__step::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 42px rgba(24,26,63,.025);
  pointer-events: none;
}

body.shipyard-page .philosophy-shipyard-quality-systems__step span {
  position: relative;
  z-index: 3;
  font-size: clamp(11px, .76vw, 14px);
  line-height: 1.36;
}

    body.shipyard-page .philosophy-shipyard-quality-systems__downloads {
        margin-top: var(--philosophy-shipyard-quality-download-gap);
        width: min(100%, var(--philosophy-shipyard-quality-content-w));
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        gap: var(--philosophy-shipyard-quality-download-row-gap) var(--philosophy-shipyard-quality-download-col-gap);
    }

body.shipyard-page .philosophy-shipyard-quality-systems__download {
  flex: 0 0 calc(
    (100% - (var(--philosophy-shipyard-quality-download-col-gap) * 3)) / 4
  );
  width: auto;
  max-width: calc(
    (100% - (var(--philosophy-shipyard-quality-download-col-gap) * 3)) / 4
  );
  gap: clamp(14px, 1.25vw, 24px);
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(odd) {
  grid-column: auto;
}

body.shipyard-page .philosophy-shipyard-quality-systems__download:nth-child(even) {
  grid-column: auto;
}

body.shipyard-page .philosophy-shipyard-quality-systems__download svg {
  flex-basis: clamp(42px, 3.2vw, 58px);
  width: clamp(42px, 3.2vw, 58px);
}

body.shipyard-page .philosophy-shipyard-quality-systems__download span {
  font-size: clamp(11px, .74vw, 14px);
  line-height: 1.45;
}

/*
  The final Quality surface is the last flex child before the footer.
  Allowing it to grow into any residual panel width removes the white strip
  and carries the #e8eefa point field directly to the footer edge.
*/
body.shipyard-page .philosophy-shipyard-quality-systems {
  width: var(--philosophy-shipyard-quality-systems-w);
  min-width: var(--philosophy-shipyard-quality-systems-w);
  flex: 0 0 var(--philosophy-shipyard-quality-systems-w);
  margin-right: 0;
  align-self: stretch;
  background:
    radial-gradient(circle at 1px 1px, rgba(23,25,44,.11) 0 1px, transparent 1.45px),
    var(--philosophy-shipyard-quality-surface);
  background-size: 28px 28px, auto;
  background-repeat: repeat, repeat;
}

@media (max-width: 900px) {
  body.shipyard-page .philosophy-shipyard-quality-systems__step::after,
  body.shipyard-page .philosophy-shipyard-quality-systems.is-revealed .philosophy-shipyard-quality-systems__step::after {
    left: -14px;
    right: auto;
    top: 42%;
    width: calc(100% + 34px);
    height: calc((100% + 34px) * .745);
    border-radius: 0;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__downloads {
    margin-top: 42px;
    width: min(100%, 520px);
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 28px;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems__download {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  body.shipyard-page .philosophy-shipyard-quality-systems {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }
}


/* =========================================================
   PHILOSOPHY / CULTURE SYSTEM v32
   Culture page: editorial opener, five-image strip, ethics close.
========================================================= */

body.culture-page {
  --culture-image-w: var(--philosophy-image-w);
  --culture-image-h: var(--philosophy-image-h);
  --culture-copy-gap: var(--philosophy-copy-gap);
  --culture-scene-gap: var(--philosophy-history-scene-gap);

  /* Large enough for the one-line headline and the long Culture copy. */
  --culture-intro-copy-w: clamp(760px, 45vw, 940px);
  --culture-intro-section-w: calc(
    var(--philosophy-stage-pad)
    + var(--culture-image-w)
    + var(--culture-copy-gap)
    + var(--culture-intro-copy-w)
  );

  /* Five deliberately plain rectangular frames with a compact visual rhythm. */
  --culture-gallery-image-w: clamp(260px, 16.2vw, 330px);
  --culture-gallery-image-h: clamp(230px, 26vh, 320px);
  --culture-gallery-gap: clamp(18px, 1.35vw, 28px);
  --culture-gallery-section-w: calc(
    (var(--culture-gallery-image-w) * 5)
    + (var(--culture-gallery-gap) * 4)
  );

  /* Ethics final editorial scene, followed by a standard footer breathing gap. */
  --culture-ethics-copy-w: clamp(660px, 39vw, 820px);
  --culture-ethics-section-w: calc(
    var(--culture-image-w)
    + var(--culture-copy-gap)
    + var(--culture-ethics-copy-w)
  );
  --culture-footer-gap: var(--culture-scene-gap);
}

/* This is a dedicated horizontal canvas: nav → intro → five-image strip → ethics → footer gap. */
body.culture-page .panel--culture {
  width: calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--culture-intro-section-w)
    + var(--culture-scene-gap)
    + var(--culture-gallery-section-w)
    + var(--culture-scene-gap)
    + var(--culture-ethics-section-w)
    + var(--culture-footer-gap)
  ) !important;
  flex: 0 0 calc(
    var(--rail-w)
    + var(--contact-subnav-w)
    + var(--culture-intro-section-w)
    + var(--culture-scene-gap)
    + var(--culture-gallery-section-w)
    + var(--culture-scene-gap)
    + var(--culture-ethics-section-w)
    + var(--culture-footer-gap)
  ) !important;
}

/* Scope out History’s special timeline/follow-up geometry; Culture owns a clean equivalent structure. */
body.culture-page .culture-editorial {
  position: relative;
  z-index: 1;
  width: var(--culture-intro-section-w);
  height: 100%;
  flex: 0 0 var(--culture-intro-section-w);
  margin: 0;
  isolation: isolate;
}

body.culture-page .culture-editorial::before,
body.culture-page .culture-editorial::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

/* Opening scene retains the approved pale paper transition from the image midpoint. */
body.culture-page .culture-editorial--intro::before {
  left: calc(var(--philosophy-stage-pad) + (var(--culture-image-w) / 2));
  width: clamp(700px, 47vw, 980px);
  background: linear-gradient(
    90deg,
    rgb(224 224 224 / 92%) 0%,
    rgb(223 227 236 / 82%) 15%,
    rgba(229, 232, 237, .56) 31%,
    rgba(242, 243, 246, .20) 47%,
    rgba(246, 245, 243, 0) 100%
  );
}

body.culture-page .culture-editorial .philosophy-history-intro__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0 0 0 var(--philosophy-stage-pad);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

body.culture-page .culture-editorial .philosophy-history-intro__media {
  width: var(--culture-image-w);
  height: var(--culture-image-h);
  flex: 0 0 var(--culture-image-w);
  margin: 0;
  overflow: hidden;
  clip-path: polygon(14% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 14%);
  background: linear-gradient(135deg, rgba(23,25,44,.09), rgba(23,25,44,.025)), #e6e5e2;
  box-shadow: 0 16px 38px rgba(23,25,44,.08);
}

body.culture-page .culture-editorial .philosophy-history-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.014);
  transition:
    opacity .28s var(--ease),
    transform 6.2s cubic-bezier(.2,.65,.25,1);
}

body.culture-page .culture-editorial .philosophy-history-intro__media img.is-loaded {
  opacity: 1;
}

body.culture-page .culture-editorial .philosophy-history-intro__media:hover img.is-loaded {
  transform: scale(1.05);
}

body.culture-page .culture-editorial .philosophy-history-intro__copy {
  width: var(--culture-intro-copy-w);
  flex: 0 0 var(--culture-intro-copy-w);
  margin-left: var(--culture-copy-gap);
  color: var(--philosophy-ink);
}

body.culture-page .culture-editorial .philosophy-history-intro__copy-main {
  width: 100%;
  transform: none;
}

body.culture-page .culture-editorial--intro .philosophy-history-intro__copy h1,
body.culture-page .culture-editorial--intro .philosophy-history-intro__copy h2 {
  margin: 0 0 34px;
  color: var(--r3-red);
  font-size: clamp(25px, 1.65vw, 34px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
}

body.culture-page .culture-editorial .philosophy-history-intro__rich-copy {
  width: 100%;
  max-width: 100%;
}

body.culture-page .culture-editorial .philosophy-history-intro__rich-copy p {
  margin: 0;
  color: var(--color-muted-dark);
  font-size: var(--content-copy-size);
  font-weight: var(--content-copy-weight);
  letter-spacing: 0;
  line-height: var(--content-copy-line-height);
}

body.culture-page .culture-editorial .philosophy-history-intro__rich-copy p + p {
  margin-top: 24px;
}

/* Five-image visual strip begins after the exact standard copy-to-content gap. */
body.culture-page .culture-gallery {
  width: var(--culture-gallery-section-w);
  height: 100%;
  flex: 0 0 var(--culture-gallery-section-w);
  margin-left: var(--culture-scene-gap);
}

body.culture-page .culture-gallery__layout {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--culture-gallery-gap);
}

body.culture-page .culture-gallery__media {
  width: var(--culture-gallery-image-w);
  height: var(--culture-gallery-image-h);
  flex: 0 0 var(--culture-gallery-image-w);
  margin: 0;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(23,25,44,.09), rgba(23,25,44,.025)), #e6e5e2;
  box-shadow: 0 12px 30px rgba(23,25,44,.075);
}

body.culture-page .culture-gallery__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.014);
  transition:
    opacity .28s var(--ease),
    transform 6.2s cubic-bezier(.2,.65,.25,1);
}

body.culture-page .culture-gallery__media img.is-loaded {
  opacity: 1;
}

body.culture-page .culture-gallery__media:hover img.is-loaded {
  transform: scale(1.05);
}

/* Final Culture composition begins after the same standard gap; its media starts right at the section edge. */
body.culture-page .culture-editorial--ethics {
  width: var(--culture-ethics-section-w);
  flex: 0 0 var(--culture-ethics-section-w);
  margin-left: var(--culture-scene-gap);
  margin-right: var(--culture-footer-gap);
}

body.culture-page .culture-editorial--ethics::before {
  left: calc(var(--culture-image-w) / 2);
  width: clamp(760px, 50vw, 1050px);
  background: linear-gradient(
    90deg,
    rgba(255, 68, 61, .20) 0%,
    rgba(255, 112, 107, .14) 17%,
    rgba(255, 173, 167, .075) 39%,
    rgba(255, 239, 237, .015) 64%,
    rgba(255, 255, 255, 0) 100%
  );
}

body.culture-page .culture-editorial--ethics .philosophy-history-intro__layout {
  padding-left: 0;
}

body.culture-page .culture-editorial--ethics .philosophy-history-intro__copy {
  width: var(--culture-ethics-copy-w);
  flex-basis: var(--culture-ethics-copy-w);
}

body.culture-page .culture-editorial--ethics .philosophy-history-intro__copy h2 {
  margin: 0 0 34px;
  color: var(--philosophy-ink);
  font-size: clamp(25px, 1.65vw, 34px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 900px) {
  body.culture-page .panel--culture {
    width: 100% !important;
    height: auto;
    min-height: 100svh;
    flex-basis: 100% !important;
  }

  body.culture-page .culture-editorial,
  body.culture-page .culture-editorial--ethics,
  body.culture-page .culture-gallery {
    width: 100%;
    height: auto;
    flex-basis: 100%;
    margin: 0;
  }

  body.culture-page .culture-editorial::before,
  body.culture-page .culture-editorial--ethics::before {
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(255, 239, 237, .18) 0%,
      rgba(255,255,255,0) 64%
    );
  }

  body.culture-page .culture-editorial .philosophy-history-intro__layout,
  body.culture-page .culture-editorial--ethics .philosophy-history-intro__layout {
    height: auto;
    padding: 54px 24px 78px;
    flex-direction: column;
    align-items: flex-start;
  }

  body.culture-page .culture-editorial .philosophy-history-intro__media {
    width: min(100%, 640px);
    height: auto;
    aspect-ratio: 4 / 5;
    flex-basis: auto;
    align-self: center;
  }

  body.culture-page .culture-editorial .philosophy-history-intro__copy,
  body.culture-page .culture-editorial--ethics .philosophy-history-intro__copy {
    width: 100%;
    flex-basis: auto;
    margin: 40px 0 0;
  }

  body.culture-page .culture-editorial--intro .philosophy-history-intro__copy h1,
  body.culture-page .culture-editorial--intro .philosophy-history-intro__copy h2,
  body.culture-page .culture-editorial--ethics .philosophy-history-intro__copy h2 {
    white-space: normal;
  }

  body.culture-page .culture-gallery__layout {
    height: auto;
    padding: 0 24px 78px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    box-sizing: border-box;
  }

  body.culture-page .culture-gallery__media {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    flex-basis: auto;
  }

  body.culture-page .culture-gallery__media:last-child {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   PHILOSOPHY / CULTURE SYSTEM v33
   Follow-up geometry lock + red ethics field + heritage-scale gallery.
========================================================= */

body.culture-page {
  /*
    Each Culture gallery visual now carries the same desktop visual scale and
    fixed 16:9 field used by the homepage heritage-video-poster composition.
  */
  --culture-gallery-image-w: clamp(980px, 50vw, 1360px);
  --culture-gallery-image-h: auto;
  --culture-gallery-section-w: calc(
    (var(--culture-gallery-image-w) * 5)
    + (var(--culture-gallery-gap) * 4)
  );
}

/*
  Culture uses the approved History follow-up copy positioning verbatim:
  the copy is vertically centred against the tall visual through top:50% and
  translateY(-50%). This intentionally replaces the v32 transform:none rule.
*/
body.culture-page .culture-editorial .philosophy-history-intro__copy {
  position: relative;
  height: var(--philosophy-image-h);
}

body.culture-page .culture-editorial .philosophy-history-intro__copy-main {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-50%) !important;
}

/* The five images are each a full heritage poster field, not thumbnail cards. */
body.culture-page .culture-gallery__media {
  width: var(--culture-gallery-image-w);
  height: auto;
  aspect-ratio: 5 / 4;
  flex: 0 0 var(--culture-gallery-image-w);
}

/*
  Ethics keeps the original follow-up architecture, but only the soft red
  gradient survives from the true visual midpoint. The inherited follow-up
  after-layer was the unwanted dark/black visual field and is disabled.
*/
body.culture-page .culture-editorial--ethics::after {
  display: none !important;
  background: transparent !important;
}

body.culture-page .culture-editorial--ethics::before {
  left: calc(var(--culture-image-w) / 2);
  width: var(--philosophy-followup-gradient-w);
  background: linear-gradient(
    90deg,
    rgba(255, 68, 61, .24) 0%,
    rgba(255, 104, 98, .18) 15%,
    rgba(255, 154, 148, .105) 31%,
    rgba(255, 207, 203, .045) 47%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

/* The visible artwork remains above the color field; no opaque dark layer is retained. */
body.culture-page .culture-editorial--ethics .philosophy-history-intro__layout {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  body.culture-page .culture-editorial .philosophy-history-intro__copy {
    height: auto;
  }

  body.culture-page .culture-editorial .philosophy-history-intro__copy-main {
    position: static;
    transform: none !important;
  }

  body.culture-page .culture-gallery__media {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    flex-basis: auto;
  }
}


/* =========================================================
   PHILOSOPHY / CULTURE SYSTEM v35
   Gallery scale correction: exactly 1.5x smaller than v34.
========================================================= */

body.culture-page {
  /* v34: clamp(980px, 50vw, 1360px) → v35: each bound reduced by 1.5. */
  --culture-gallery-image-w: clamp(653px, 33.333vw, 907px);
  --culture-gallery-image-h: auto;
  --culture-gallery-section-w: calc(
    (var(--culture-gallery-image-w) * 5)
    + (var(--culture-gallery-gap) * 4)
  );
}

body.culture-page .culture-gallery__media {
  width: var(--culture-gallery-image-w);
  height: auto;
  aspect-ratio: 5 / 4;
  flex: 0 0 var(--culture-gallery-image-w);
}

@media (max-width: 900px) {
  body.culture-page .culture-gallery__media {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    flex-basis: auto;
  }
}


/* =========================================================
   PHILOSOPHY / CULTURE SYSTEM v36
   Gallery scale correction: balanced midpoint + wider image rhythm.
========================================================= */

body.culture-page {
  /* Raised from v35 without returning to the oversized v34 field. */
  --culture-gallery-image-w: clamp(780px, 40vw, 1080px);

  /* 0.5x wider than the established gallery rhythm. */
  --culture-gallery-gap: clamp(27px, 2.025vw, 42px);

  --culture-gallery-section-w: calc(
    (var(--culture-gallery-image-w) * 5)
    + (var(--culture-gallery-gap) * 4)
  );
}

body.culture-page .culture-gallery__media {
  width: var(--culture-gallery-image-w);
  height: auto;
  aspect-ratio: 5 / 4;
  flex: 0 0 var(--culture-gallery-image-w);
}

@media (max-width: 900px) {
  body.culture-page .culture-gallery__layout {
    gap: 24px;
  }

  body.culture-page .culture-gallery__media {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    flex-basis: auto;
  }
}

/* Philosophy inherits the compact global mobile footer; this closes the prior tall-footer override. */
@media (max-width: 900px) {
  body.philosophy-page .footer-panel {
    height: 158px !important;
    min-height: 158px !important;
    flex-basis: 158px !important;
  }
}

@media (max-width: 360px) {
  body.philosophy-page .footer-panel {
    height: 150px !important;
    min-height: 150px !important;
    flex-basis: 150px !important;
  }
}


/* V101 — history milestone visual is 1.5× larger; each timeline bay grows with it to prevent overlap. */
@media (min-width: 1101px) {
  body.philosophy-page {
    --philosophy-timeline-item-w: clamp(510px, 34.5vw, 705px);
  }

  body.philosophy-page .philosophy-timeline__item {
    --timeline-media-w: clamp(303px, 19.8vw, 405px);
    --timeline-media-h: clamp(189px, 12.375vw, 254px);
    --timeline-media-half-h: clamp(94px, 6.2vw, 127px);
  }
}

@media (max-width: 1100px) {
  body.philosophy-page .philosophy-timeline__media {
    max-width: min(100%, 660px);
  }
}