/*
  RESPONSIVE İŞLEM — V99-2
  =========================
  Site-wide stabilization layer.

  Contract:
  - 1600px+ desktop compositions remain the visual baseline.
  - 1101px–1599px retains horizontal RMK navigation, with safe-width guards.
  - 1100px and below uses native vertical flow on every page family.
  - This file only resolves cross-page breakpoint conflicts; it does not rewrite
    approved desktop scene geometry.
*/

:root {
  --responsive-tablet-cutover: 1100px;
  --responsive-compact-desktop-min: 1101px;
  --responsive-reference-desktop-min: 1600px;
  --responsive-wide-desktop-min: 2200px;
  --responsive-inline-pad: clamp(22px, 4vw, 72px);
  --responsive-mobile-inline: clamp(20px, 6vw, 32px);
  --responsive-mobile-section-gap: clamp(44px, 10vw, 78px);
}

/* =========================================================
   GLOBAL CONTENT SAFETY
========================================================= */

body :is(
  .content-copy,
  .heritage-copy,
  .philosophy-history-intro__copy,
  .philosophy-history-shared__copy,
  .r3-refit-copy,
  .r3-vessel-specs,
  .model-detail-copy-scene,
  .contact-address,
  .contact-form,
  .career-flow__copy,
  .career-form
) {
  min-width: 0;
}

body :is(input, select, textarea, button) {
  max-width: 100%;
}

body :is(.contact-form, .career-form, .home-contact-enquiry__form) :is(input, select, textarea) {
  min-width: 0;
}

/* =========================================================
   WIDE DESKTOP — no scene redesign, only capped editorial zones
========================================================= */
@media (min-width: 2200px) {
  :root {
    --rail-w: 190px;
    --footer-w: 132px;
  }

  .drawer {
    width: min(34vw, 760px);
  }

  /* Wide displays must not make editorial copy grow into neighbouring visual zones. */
  body.philosophy-page :is(
    .philosophy-history-intro__copy,
    .philosophy-history-shared__copy,
    .culture-editorial__copy,
    .philosophy-shipyard-intro__copy,
    .philosophy-shipyard-quality__copy
  ),
  body.r3-page :is(
    .r3-refit-copy,
    .r3-refit-projects__intro,
    .r3-vessel-specs__copy,
    .r3-vessel-related__copy
  ) {
    max-width: min(34vw, 680px);
  }

  body.models-page.model-detail-page :is(
    .model-detail-copy-scene__copy,
    .model-detail-title-scene__copy,
    .model-detail-spec-card
  ) {
    max-width: min(36vw, 720px);
  }

  /* Home R3/CONTACT has its own long multi-screen stage. Only the visual buffer
     changes here; text and CTA retain the approved page-module typography. */
  body.home-page .home-r3-contact__rotor {
    left: calc(var(--home-r3-left-screen) - clamp(900px, 51vw, 1320px));
  }

  body.home-page .home-r3-contact__copy {
    width: min(56vw, 1280px);
  }

  body.home-page .home-r3-contact__contact-stage {
    right: clamp(78px, 5.5vw, 150px);
  }

  body.models-page.bespoke-page .bespoke-origin__oval-media {
    width: clamp(680px, 40vw, 980px);
  }

  body.models-page.bespoke-page .bespoke-origin__copy {
    width: min(20vw, 400px);
  }
}

/* =========================================================
   COMPACT DESKTOP / LAPTOP — horizontal navigation stays on,
   but text and overlay systems cannot exceed their scene bounds.
========================================================= */
@media (min-width: 1101px) and (max-width: 1599px) {
  .drawer {
    width: min(42vw, 620px);
    min-width: min(430px, calc(100vw - var(--rail-w) - 44px));
    padding: clamp(34px, 3vw, 46px) clamp(32px, 3.6vw, 52px);
  }

  .menu-preview {
    width: min(34vw, 560px);
  }

  .panel :is(
    .models-category__content,
    .models-category__grid,
    .models-subcategory__content,
    .model-detail-copy-scene__copy,
    .model-detail-spec-card,
    .philosophy-history-intro__layout,
    .philosophy-history-shared__layout,
    .philosophy-history-wide__layout,
    .philosophy-history-timeline__layout,
    .culture-editorial__layout,
    .philosophy-shipyard-intro__layout,
    .philosophy-shipyard-capabilities__layout,
    .philosophy-shipyard-expertise__layout,
    .r3-refit-block,
    .r3-refit-copy,
    .r3-refit-projects,
    .r3-vessel-specs,
    .r3-vessel-gallery,
    .contact-tab-stage,
    .contact-location-layout,
    .enquiry-layout,
    .career-flow__copy,
    .career-flow__form
  ) {
    min-width: 0;
    max-width: 100%;
  }

  /* New home stage: preserve separate ownership for logo, rotor and copy. */
  body.home-page .home-r3-contact__rotor {
    width: clamp(470px, 31vw, 650px);
    left: calc(var(--home-r3-left-screen) - clamp(650px, 39vw, 860px));
  }

  body.home-page .home-r3-contact__copy {
    width: min(58vw, 1080px);
  }

  body.home-page .home-r3-contact__topics {
    gap: clamp(22px, 2vw, 48px);
  }

  body.home-page .home-contact-enquiry__layout {
    width: min(100% - 88px, 980px);
    grid-template-columns: minmax(230px, .82fr) minmax(400px, 1.18fr);
    gap: clamp(40px, 5vw, 70px);
  }

  /* Bespoke is kept horizontal in this range; only the collision-prone visual
     overlap is constrained. */
  body.models-page.bespoke-page .bespoke-origin__oval-media {
    left: 58%;
    width: clamp(520px, 46vw, 740px);
  }

  body.models-page.bespoke-page .bespoke-origin__copy {
    width: min(21vw, 350px);
  }

  body.models-page.bespoke-page .bespoke-dialogue__manifesto {
    width: min(46vw, 760px);
  }

  body.models-page.bespoke-page .bespoke-dialogue__side-copy {
    width: min(28vw, 520px);
  }

  /* Fixed inner navigation must retain enough room for content on laptops. */
  body :is(.inner-subnav, .contact-subnav, .r3-subnav, .philosophy-inner-nav) {
    width: clamp(178px, 14vw, 250px);
    min-width: clamp(178px, 14vw, 250px);
  }
}

/* Short laptop heights retain their intended scene without menu/footer collision. */
@media (min-width: 1101px) and (max-height: 800px) {
  .rail {
    padding-block: 20px;
  }

  .socials {
    bottom: 22px;
    gap: 12px;
  }

  .drawer {
    top: 16px;
    bottom: 16px;
  }

  .footer-panel {
    padding-block: 18px;
  }
}

/* =========================================================
   TABLET + MOBILE — one native vertical-flow contract for every page family.
========================================================= */
@media (max-width: 1100px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    height: auto;
    overflow-x: clip;
  }

  body {
    overflow-y: auto;
  }

  .main,
  body.subpage .main,
  body.models-page .main,
  body.philosophy-page .main,
  body.r3-page .main,
  body.contact-page .main {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .track,
  .models-track,
  .model-detail-track,
  .bespoke-track,
  .philosophy-track,
  .r3-track,
  .r3-refit-track,
  .r3-vessel-track,
  .contact-track {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    transform: none !important;
  }

  /* Every direct desktop stage becomes a block-stage. This catches pages that
     were created later and did not yet have a page-local mobile override. */
  .track > .panel,
  .track > .footer-panel,
  .track > footer.footer-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  .panel--double,
  .panel--triple,
  body.home-page .home-r3-contact {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

  /* Dedicated in-flow modules across Philosophy / Culture / Shipyard. */
  body.philosophy-page :is(
    .philosophy-history-intro,
    .philosophy-history-shared,
    .philosophy-history-wide,
    .philosophy-history-timeline,
    .culture-editorial,
    .culture-gallery,
    .philosophy-shipyard-intro,
    .philosophy-shipyard-followup,
    .philosophy-shipyard-capabilities,
    .philosophy-shipyard-specs,
    .philosophy-shipyard-expertise,
    .philosophy-shipyard-services,
    .philosophy-shipyard-quality,
    .philosophy-shipyard-quality-systems
  ),
  body.r3-page :is(
    .r3-category-stage,
    .r3-refit-block,
    .r3-refit-projects,
    .r3-vessel-hero,
    .r3-vessel-specs,
    .r3-vessel-gallery,
    .r3-vessel-related
  ),
  body.models-page :is(
    .models-subcategory,
    .liva-plus-selector,
    .model-detail-title-scene,
    .model-detail-visual-scene,
    .model-detail-copy-scene,
    .model-detail-floorplan-marker,
    .model-detail-floorplan-scene,
    .model-detail-spec-scene
  ),
  body.contact-page :is(
    .contact-view,
    .career-flow
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Prevent a grid/flex child from forcing horizontal scroll when a long label,
     form select or editorial title exists. */
  body :is(
    .models-category__content,
    .models-category__grid,
    .models-subcategory__content,
    .model-detail-spec-scene,
    .philosophy-history-intro__layout,
    .philosophy-history-shared__layout,
    .philosophy-history-wide__layout,
    .philosophy-history-timeline__layout,
    .culture-editorial__layout,
    .philosophy-shipyard-intro__layout,
    .philosophy-shipyard-capabilities__layout,
    .philosophy-shipyard-expertise__layout,
    .r3-refit-block,
    .r3-refit-projects,
    .r3-vessel-specs,
    .r3-vessel-gallery,
    .contact-tab-stage,
    .contact-location-layout,
    .enquiry-layout,
    .career-flow,
    .home-contact-enquiry__layout
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body :is(
    .contact-location-layout,
    .enquiry-layout,
    .career-flow,
    .home-contact-enquiry__layout
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Image frames keep their intended ratio but never force a page wider. */
  body :is(
    figure,
    .media-frame,
    .model-detail-visual-scene,
    .r3-refit-modernization-image,
    .r3-refit-services-image,
    .r3-vessel-gallery,
    .philosophy-history-intro__media,
    .philosophy-history-shared__media,
    .philosophy-history-wide__media,
    .culture-gallery,
    .philosophy-shipyard-intro__media
  ) {
    max-width: 100%;
    min-width: 0;
  }

  body :is(img, video, iframe, canvas) {
    max-width: 100%;
  }

  /* Long content should wrap inside its designed measure rather than create a
     horizontal document overflow. */
  body :is(h1, h2, h3, h4, p, li, label, legend, .btn, .discover-action, .inner-subnav__item) {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  body :is(.btn, .discover-action, .contact-form__submit, .career-form__submit) {
    white-space: normal;
  }

  /* Shared mobile form safety. The per-page visual styling remains untouched. */
  body :is(.contact-form, .career-form, .home-contact-enquiry__form) :is(
    input,
    select,
    textarea,
    .file-upload,
    .file-upload__trigger
  ) {
    width: 100%;
    max-width: 100%;
  }

  /* The application modal must remain inside the viewport on all page families.
     Its internal scroll zone is the only scrolling element; PDFs and CTA remain
     fixed inside the dialog's own layout. */
  .policy-modal {
    padding: 16px;
    align-items: center;
  }

  .policy-modal__dialog {
    width: min(100%, 640px) !important;
    max-height: calc(100svh - 32px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .policy-modal__scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .policy-modal__pdfs,
  .policy-modal__accept {
    flex: 0 0 auto;
  }
}

/* =========================================================
   NARROW MOBILE — only compacting, never a second desktop composition.
========================================================= */
@media (max-width: 700px) {
  :root {
    --responsive-mobile-inline: 22px;
  }

  .drawer {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px;
    padding-inline: 24px !important;
  }

  .drawer-nav a {
    max-width: 100%;
    white-space: normal;
  }

  body :is(
    .philosophy-history-intro__layout,
    .philosophy-history-shared__layout,
    .philosophy-history-wide__layout,
    .philosophy-history-timeline__layout,
    .culture-editorial__layout,
    .philosophy-shipyard-intro__layout,
    .philosophy-shipyard-capabilities__layout,
    .philosophy-shipyard-expertise__layout,
    .r3-refit-block,
    .r3-vessel-specs,
    .model-detail-spec-scene
  ) {
    gap: var(--responsive-mobile-section-gap) !important;
  }

  body.home-page .home-r3-contact__topics {
    gap: 12px 18px;
  }

  body.home-page .home-r3-contact__contact-title {
    max-width: calc(100vw - 48px);
  }

  .policy-modal__dialog {
    width: calc(100vw - 24px) !important;
    max-height: calc(100svh - 24px) !important;
  }
}

/* =========================================================
   TABLET GAP CLOSERS — page modules with older 900px mobile rules
   must still obey the global 1100px vertical-flow contract.
========================================================= */
@media (max-width: 1100px) {
    span.contact-subnav__label {
        width: fit-content;
    }
  body.home-page .philosophy {
    min-height: 860px !important;
  }

  body.home-page .philosophy-left-title {
    top: 72px !important;
    left: 24px !important;
    transform: none !important;
  }

  body.home-page .philosophy-copy {
    z-index: 3 !important;
    top: 278px !important;
    left: 24px !important;
    width: min(calc(100% - 48px), 330px) !important;
    transform: none !important;
  }

  body.home-page .philosophy-dancer-stage,
  body.home-page .philosophy.is-revealed .philosophy-dancer-stage {
    top: 382px !important;
    left: 50% !important;
    width: min(86vw, 340px) !important;
    opacity: 1 !important;
    transform: translate3d(-50%, 0, 0) rotate(0) scale(1) !important;
  }

  body.home-page .philosophy-dancer-float {
    animation: none !important;
    transform: none !important;
  }

  body.home-page .philosophy-dancer-float img {
    width: 100% !important;
    height: auto !important;
    max-height: 340px !important;
    object-fit: contain !important;
    transform: none !important;
  }

  body.home-page .philosophy-right-title {
    right: auto !important;
    bottom: 46px !important;
    left: 24px !important;
  }

  body.home-page .heritage-journey {
    --heritage-gap: 52px !important;
    gap: var(--heritage-gap) !important;
    padding: 44px 24px 72px !important;
  }

  body.home-page .heritage-journey :is(
    .heritage-stage--video,
    .heritage-stage--copy,
    .heritage-stage--image
  ) {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  body.home-page .heritage-journey :is(
    .heritage-stage--video,
    .heritage-stage--image,
    .heritage-video-wrap,
    .heritage-image
  ) {
    aspect-ratio: 16 / 9 !important;
  }

  body.home-page .heritage-journey :is(.heritage-video-wrap, .heritage-image) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body.home-page .heritage-journey :is(
    .heritage-video-poster,
    .heritage-video,
    .heritage-video-fallback,
    .heritage-image img
  ) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body.home-page .heritage-journey .heritage-copy {
    width: 100% !important;
    max-width: 525px !important;
    margin: 0 auto !important;
  }

  body.home-page .home-contact-enquiry {
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.home-page .home-contact-enquiry__layout {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 76px 24px 68px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 52px !important;
  }

  body.home-page :is(
    .home-contact-enquiry__address,
    .home-contact-enquiry__form-area,
    .home-contact-enquiry .contact-form
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.home-page .home-contact-enquiry__tabs {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
  }

  body.models-page :is(.models-category, .models-subcategory, .liva-plus-selector) {
    padding-top: 0 !important;
  }

  body.contact-page[data-contact-mode="career"] .contact-entry,
  body.contact-page[data-contact-mode="career"] .contact-tab-stage {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  body.contact-page[data-contact-mode="career"] .contact-view--career.career-flow {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: var(--rail-h) 24px 72px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 54px !important;
    overflow: visible !important;
  }

  body.contact-page[data-contact-mode="career"] :is(
    .career-flow__copy,
    .career-flow__image,
    .career-flow__form
  ) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  body.contact-page[data-contact-mode="career"] .career-flow__footer-space {
    width: auto !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  body.contact-page .contact-entry {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  body.contact-page .contact-subnav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 20px 24px !important;
    gap: 16px !important;
  }

  body.contact-page .contact-subnav__group {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 10px 12px !important;
  }

  body.contact-page .contact-tab-stage {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  body.contact-page .contact-view {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 42px 24px 64px !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.contact-page .contact-view:not(.is-active) {
    display: none !important;
  }

  body.contact-page .contact-view.is-active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.contact-page :is(.contact-location-layout, .enquiry-layout) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 30px !important;
    overflow: visible !important;
  }

  body.contact-page .office-map-frame {
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
  }

  body.contact-page .contact-view--enquiry .contact-address,
  body.contact-page .contact-view--enquiry .contact-form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.contact-page .contact-view--enquiry .enquiry-layout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 34px !important;
  }

  body.contact-page .contact-view--enquiry .contact-address,
  body.contact-page .contact-view--enquiry .contact-form,
  body.contact-page .contact-view--enquiry .contact-form__bottom {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.contact-page .contact-view--enquiry .contact-form,
  body.contact-page .career-flow__form,
  body.contact-page .career-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.contact-page :is(
    .contact-form__row,
    .contact-form__row--two,
    .career-form__row,
    .career-form__row--two
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.contact-page :is(.contact-form__row--phone, .career-form__row--phone) {
    grid-template-columns: minmax(104px, .42fr) minmax(0, 1fr) !important;
  }

  body.contact-page :is(.contact-form__bottom, .contact-form__bottom--dynamic) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  body.contact-page :is(.contact-form__checks, .contact-form__single-choice, .contact-form__single-choice-options) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.contact-page[data-contact-mode="career"] .contact-entry {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.contact-page[data-contact-mode="career"] .contact-view--career.career-flow {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 42px 24px 64px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 38px !important;
    overflow: visible !important;
  }

  body.contact-page .career-flow__form {
    order: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  body.contact-page .career-flow__footer-space {
    display: none !important;
  }

  body.philosophy-page .philosophy-entry {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.philosophy-page .contact-subnav.philosophy-inner-nav {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 22px 24px 20px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
  }

  body.philosophy-page .philosophy-inner-nav .contact-subnav__label {
    width: 100% !important;
    align-self: stretch !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  body.philosophy-page .philosophy-inner-nav .contact-subnav__group {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 10px !important;
  }

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

  body.philosophy-page .philosophy-inner-nav .contact-subnav__item,
  body.philosophy-page .philosophy-inner-nav .contact-subnav__item.is-active {
    min-width: 0 !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  body.philosophy-page .philosophy-inner-nav .contact-subnav__item.is-active {
    font-size: 11.5px !important;
    border-bottom: 1px solid currentColor;
  }

  body.philosophy-page :is(
    .philosophy-history-intro,
    .philosophy-history-shared,
    .philosophy-history-wide,
    .philosophy-history-timeline,
    .culture-editorial,
    .culture-gallery,
    .philosophy-shipyard-intro,
    .philosophy-shipyard-followup,
    .philosophy-shipyard-capabilities,
    .philosophy-shipyard-specs,
    .philosophy-shipyard-expertise,
    .philosophy-shipyard-services,
    .philosophy-shipyard-quality,
    .philosophy-shipyard-quality-systems
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  body.philosophy-page :is(
    .philosophy-history-intro__layout,
    .philosophy-history-shared__layout,
    .philosophy-history-wide__layout,
    .philosophy-history-timeline__layout,
    .culture-editorial__layout,
    .culture-gallery__layout,
    .philosophy-shipyard-intro__layout,
    .philosophy-shipyard-followup__layout,
    .philosophy-shipyard-capabilities__layout,
    .philosophy-shipyard-expertise__layout
  ) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 54px 24px 78px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--responsive-mobile-section-gap) !important;
  }

  body.philosophy-page :is(
    .philosophy-history-intro__media,
    .philosophy-history-shared__media,
    .philosophy-history-wide__media,
    .culture-gallery__media,
    .philosophy-shipyard-intro__media
  ) {
    width: min(100%, 660px) !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    aspect-ratio: 4 / 3;
  }

  body.philosophy-page :is(
    .philosophy-history-intro__copy,
    .philosophy-history-shared__copy,
    .culture-editorial__copy,
    .philosophy-shipyard-intro__copy,
    .philosophy-shipyard-quality__copy
  ) {
    position: relative !important;
    width: 100% !important;
    max-width: 720px !important;
    height: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

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

  body.philosophy-page .philosophy-history-timeline__layout {
    padding: 46px 24px 70px !important;
  }

  body.philosophy-page .philosophy-timeline {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  body.philosophy-page .philosophy-timeline::before,
  body.philosophy-page .philosophy-timeline__item::after,
  body.philosophy-page .philosophy-timeline__item:last-child::after {
    display: none !important;
  }

  body.philosophy-page .philosophy-timeline__item {
    --timeline-mobile-axis-x: 58px;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 42px 92px !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  body.philosophy-page .philosophy-timeline__item:last-child {
    padding-bottom: 0 !important;
  }

  body.philosophy-page .philosophy-timeline__stem {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: var(--timeline-mobile-axis-x) !important;
    width: 1px !important;
    height: auto !important;
    min-height: 100% !important;
    background: var(--r3-red) !important;
    transform: none !important;
  }

  body.philosophy-page .philosophy-timeline__year,
  body.philosophy-page .philosophy-timeline__item.is-revealed .philosophy-timeline__year {
    position: static !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--philosophy-ink) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    writing-mode: horizontal-tb !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.philosophy-page .philosophy-timeline__content {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.philosophy-page .philosophy-timeline__title {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 14px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  body.philosophy-page .philosophy-timeline__title p {
    margin: 0 !important;
  }

  body.philosophy-page .philosophy-timeline__media {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: min(100%, 210px) !important;
    height: auto !important;
    aspect-ratio: 202 / 126 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body.philosophy-page .philosophy-timeline__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body.r3-page .panel--r3-categories.r3-entry {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
  }

  body.r3-page .r3-subnav {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 24px 20px !important;
    align-items: center !important;
  }

  body.r3-page .r3-subnav__group {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 10px 12px !important;
  }

  body.r3-page .r3-category-stage {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  body.r3-page .r3-category-scroller {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    cursor: default !important;
  }

  body.r3-page .r3-category-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
    padding: 0 0 52px !important;
  }

  body.r3-page .r3-category-card {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  body.r3-page .r3-category-card__link,
  body.r3-page .r3-category-card__media,
  body.r3-page .r3-category-card__meta {
    width: 100% !important;
  }

  body.r3-page .r3-category-card__meta {
    padding: 20px 24px 0 !important;
    flex-wrap: wrap !important;
  }

  body.r3-page.r3-refit-page .r3-refit-flow {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 24px 64px !important;
    gap: 42px !important;
    overflow: visible !important;
  }

  body.r3-page.r3-refit-page .r3-refit-flow .r3-subnav {
    margin: 0 -24px !important;
  }

  body.r3-page.r3-refit-page .r3-refit-block,
  body.r3-page.r3-refit-page .r3-refit-block--modernization,
  body.r3-page.r3-refit-page .r3-refit-block--services {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.r3-page.r3-refit-page .r3-refit-copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body.r3-page.r3-refit-page :is(
    .r3-refit-modernization-image,
    .r3-refit-services-image
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.r3-page.r3-refit-page .r3-refit-projects,
  body.r3-page.r3-refit-page .r3-refit-projects.r3-refit-projects--intro-free {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.r3-page.r3-refit-page .r3-refit-projects.r3-refit-projects--intro-free > .r3-refit-projects__heading,
  body.r3-page.r3-refit-page .r3-refit-projects.r3-refit-projects--intro-free > .r3-project-carousel {
    grid-column: auto !important;
    width: 100% !important;
  }

  body.r3-page.r3-refit-page .r3-refit-projects__heading {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }

  body.r3-page.r3-refit-page .r3-refit-projects__heading span {
    display: block !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel,
  body.r3-page.r3-refit-page .r3-project-carousel__stack,
  body.r3-page.r3-refit-page .r3-project-carousel__meta {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel {
    height: auto !important;
    overflow: visible !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel__stack {
    position: relative !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel__card--previous,
  body.r3-page.r3-refit-page .r3-project-carousel__card--next {
    display: none !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel__prev,
  body.r3-page.r3-refit-page .r3-project-carousel__next {
    position: absolute !important;
    z-index: 5 !important;
    top: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel__prev {
    left: 10px !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel__next {
    right: 10px !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel.is-single-project .r3-project-carousel__prev,
  body.r3-page.r3-refit-page .r3-project-carousel.is-single-project .r3-project-carousel__next {
    display: none !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel__card--current {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel__card--current img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.r3-page.r3-refit-page .r3-project-carousel__meta {
    height: auto !important;
    min-height: 0 !important;
    margin: 16px 0 0 !important;
    flex-wrap: wrap !important;
  }

  body.r3-page.r3-vessel-page .panel--r3-vessel.r3-vessel-flow {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 24px 64px !important;
    gap: 42px !important;
    overflow: visible !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-subnav {
    width: calc(100% + 48px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 0 -24px !important;
    padding: 20px 24px !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-subnav__list {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.r3-page.r3-vessel-page :is(
    .r3-vessel-hero,
    .r3-vessel-specs,
    .r3-vessel-gallery,
    .r3-vessel-related
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.r3-page.r3-vessel-page :is(
    .r3-vessel-hero__image,
    .r3-vessel-gallery__slider,
    .r3-vessel-gallery__image
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel,
  body.r3-page.r3-vessel-page .r3-vessel-carousel__stack,
  body.r3-page.r3-vessel-page .r3-vessel-carousel__meta {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel {
    height: auto !important;
    overflow: visible !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel__stack {
    position: relative !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel__card--previous,
  body.r3-page.r3-vessel-page .r3-vessel-carousel__card--next {
    display: none !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel__prev,
  body.r3-page.r3-vessel-page .r3-vessel-carousel__next {
    position: absolute !important;
    z-index: 5 !important;
    top: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel__prev {
    left: 10px !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel__next {
    right: 10px !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel.is-single-project .r3-vessel-carousel__prev,
  body.r3-page.r3-vessel-page .r3-vessel-carousel.is-single-project .r3-vessel-carousel__next {
    display: none !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel__card--current {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel__card--current img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.r3-page.r3-vessel-page .r3-vessel-carousel__meta {
    height: auto !important;
    min-height: 0 !important;
    margin: 16px 0 0 !important;
    flex-wrap: wrap !important;
  }
}

body.r3-page .r3-project-carousel.is-single-project .r3-project-carousel__card--previous,
body.r3-page .r3-project-carousel.is-single-project .r3-project-carousel__card--next,
body.r3-page .r3-project-carousel.is-single-project .r3-project-carousel__prev,
body.r3-page .r3-project-carousel.is-single-project .r3-project-carousel__next {
  display: none !important;
}

body.r3-page .r3-vessel-carousel.is-single-project .r3-vessel-carousel__card--previous,
body.r3-page .r3-vessel-carousel.is-single-project .r3-vessel-carousel__card--next,
body.r3-page .r3-vessel-carousel.is-single-project .r3-vessel-carousel__prev,
body.r3-page .r3-vessel-carousel.is-single-project .r3-vessel-carousel__next {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}