/* Oliveriden 2.2 mobile layer.
   The supplied 390px design is a geometry reference, not a scaled page canvas. */

@media (min-width: 900px) {
  .mobile-logo-static { display: none; }
}

@media (max-width: 899px) {
  .desktop-logo-contrast { display: none; }

  :root {
    --mobile-composition-max: 32.5rem;
    --mobile-card-max: 20.875rem;
    --mobile-stage-width: min(100vw, var(--mobile-composition-max));
    --mobile-inline: clamp(1.25rem, 7.18vw, 2.5rem);
    --mobile-title: clamp(1.375rem, 1.18rem + 0.8vw, 1.75rem);
    --mobile-copy: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
    --mobile-card-title: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
    --mobile-header-top: calc(clamp(1.75rem, 5.3svh, 2.8125rem) + env(safe-area-inset-top));
  }

  html {
    scroll-padding-top: calc(5.5rem + env(safe-area-inset-top));
  }

  body {
    min-width: 320px;
    overflow-x: clip;
  }

  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .section-frame { width: 100%; }

  /* Header --------------------------------------------------------------- */
  .site-header {
    z-index: calc(var(--z-overlay) + 10);
    top: var(--mobile-header-top);
    width: 100%;
    height: 3.25rem;
    padding: 20 var(--mobile-inline);
  }

  .header-blur-field {
    height: clamp(4.5rem, 18vw, 6.75rem);
  }

  .header-blur-field__layer--near {
    backdrop-filter: blur(clamp(0.22rem, 1.2vw, 0.44rem));
    -webkit-backdrop-filter: blur(clamp(0.22rem, 1.2vw, 0.44rem));
  }

  .header-blur-field__layer--mid {
    backdrop-filter: blur(clamp(0.46rem, 2.25vw, 0.82rem));
    -webkit-backdrop-filter: blur(clamp(0.46rem, 2.25vw, 0.82rem));
  }

  .header-blur-field__layer--far {
    backdrop-filter: blur(clamp(0.78rem, 3.5vw, 1.18rem));
    -webkit-backdrop-filter: blur(clamp(0.78rem, 3.5vw, 1.18rem));
  }

  .brand-lockup {
    --logo-collapse: 0;
    left: var(--mobile-inline);
    top: 0;
    width: clamp(10.25rem, 42vw, 13rem);
    height: clamp(1.95rem, 7.18vw, 2.45rem);
    transform-origin: left center;
  }

  .brand-logo-layer {
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    transform-origin: left center;
    will-change: opacity, transform;
  }

  .brand-logo-layer--full {
    width: 100%;
    height: 100%;
    opacity: calc(1 - var(--logo-collapse));
    transform: none;
  }

  .brand-logo-layer--mark {
    left: 0;
    top: 0;
    width: 17.47%;
    height: 96.43%;
    opacity: 1;
    transform: none;
  }

  .adaptive-logo,
  .adaptive-logo__fallback,
  .adaptive-logo__surface {
    width: 100%;
    height: 100%;
  }

  .desktop-nav { display: none; }

  .menu-toggle {
    position: absolute;
    right: var(--mobile-inline);
    top: 0;
    display: block;
    width: 3.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
  }

  .site-header--logo-only .menu-toggle {
    display: none;
  }

  .menu-toggle-line {
    left: auto;
    right: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    transform-origin: center;
    transition:
      top 0.45s var(--ease-emphasized),
      width 0.45s var(--ease-emphasized),
      transform 0.45s var(--ease-emphasized);
  }

  .menu-toggle-line--top {
    top: 0.55rem;
    width: 3.05rem;
  }

  .menu-toggle-line--bottom {
    top: 1.45rem;
    width: 2.62rem;
  }

  .menu-open .menu-toggle-line--top {
    top: 1.05rem;
    width: 3rem;
    transform: rotate(17deg);
  }

  .menu-open .menu-toggle-line--bottom {
    top: 1.05rem;
    width: 3rem;
    transform: rotate(-17deg);
  }

  .mobile-menu {
    position: fixed;
    z-index: var(--z-overlay);
    inset: 0;
    display: block;
    min-height: 100dvh;
    color: var(--color-cream);
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.46s;
  }

  .mobile-menu[hidden] { display: none; }

  .mobile-menu__scrim {
    position: absolute;
    inset: 0;
    background: var(--color-navy-a30);
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition:
      opacity 0.46s var(--ease-emphasized),
      background 0.46s var(--ease-emphasized),
      backdrop-filter 0.46s var(--ease-emphasized),
      -webkit-backdrop-filter 0.46s var(--ease-emphasized);
    will-change: opacity, backdrop-filter;
  }

  .mobile-menu nav {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(calc(100% - (2 * var(--mobile-inline))), var(--mobile-composition-max));
    margin-inline: auto;
    padding-top: calc(7.35rem + env(safe-area-inset-top));
    flex-direction: column;
    gap: clamp(1.05rem, 4.1vw, 1.55rem);
    font-family: var(--font-family-display);
    font-size: clamp(1.55rem, 7.1vw, 2.35rem);
    line-height: 1.02;
    text-transform: none;
    opacity: 0;
    transform: translateY(1rem);
    transition:
      opacity 0.38s ease,
      transform 0.46s var(--ease-emphasized);
  }

  .mobile-menu nav a {
    width: max-content;
    max-width: 100%;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    overflow-wrap: anywhere;
  }

  .mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .mobile-menu.is-open .mobile-menu__scrim {
    background: var(--color-navy-a30);
    opacity: 1;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
  }

  .mobile-menu.is-open nav {
    opacity: 1;
    transform: none;
  }

  .menu-open { overflow: hidden; }

  /* Hero ----------------------------------------------------------------- */
  .hero-shell {
    min-height: max(52.75rem, 100svh);
    overflow: clip;
  }

  .hero-copy {
    left: 50%;
    right: auto;
    top: clamp(12.8rem, 28.5svh, 15.2rem);
    width: min(calc(100% - (2 * var(--mobile-inline))), 23rem);
    transform: translateX(-50%);
    text-align: center;
  }

  .hero h1 {
    width: 100%;
    font-size: var(--mobile-title);
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
  }

  .hero-copy p {
    width: 100%;
    margin-top: 0.65rem;
    font-size: var(--mobile-copy);
    line-height: 1.26;
    text-wrap: pretty;
  }

  .primary-button {
    width: min(100%, 17.5625rem);
    height: 2.5rem;
    margin: clamp(3rem, 7.5svh, 4rem) auto 0;
    border-radius: 0.55rem;
    font-size: 0.9375rem;
  }

  .hero-bg { inset: 0; overflow: clip; }

  .ship-track {
    left: 50%;
    top: auto;
    bottom: clamp(4.5rem, 9svh, 6.25rem);
    width: calc(var(--mobile-stage-width) * 0.88);
    transform: translateX(-53%);
  }

  .sea-wave--back {
    left: 50%;
    top: auto;
    bottom: -9.6rem;
    width: max(62rem, 112vw);
    height: auto;
    aspect-ratio: 636.5 / 300;
    transform: translateX(-51.2%);
  }

  .sea-wave--front {
    left: 50%;
    top: auto;
    bottom: -5.9rem;
    width: max(62rem, 122vw);
    height: auto;
    aspect-ratio: 621 / 156;
    background: var(--color-cream);
    transform: translateX(-43.6%);
  }

  /* Threats sticky story ------------------------------------------------- */
  .threats {
    min-height: calc(100svh + 600svh);
    background: var(--gradient-threats-mobile);
    overflow: visible;
  }

  .threats-shell {
    position: sticky;
    top: 0;
    width: 100%;
    height: max(100svh, 46rem);
    min-height: 0;
    overflow: clip;
  }

  .threats-bg {
    inset: 0;
    background: var(--gradient-threats-mobile);
  }

  .threats-wave-side { display: none; }

  .threats-wave-bottom {
    left: 50%;
    top: auto;
    bottom: -1px;
    width: max(100%, 108rem);
    height: clamp(6.5rem, 18svh, 10.5rem);
    transform: translateX(-50%);
    color: var(--color-navy);
  }

  .threats h2 {
    left: 50%;
    top: clamp(6.25rem, 12svh, 8rem);
    width: min(calc(100% - (2 * var(--mobile-inline))), 22rem);
    transform: translateX(-50%);
    font-size: var(--mobile-title);
    line-height: 1.08;
    white-space: normal;
    text-wrap: balance;
  }

  .threat-slider {
    position: absolute;
    z-index: var(--z-copy);
    inset: 0;
    display: block;
    width: 100%;
  }

  .threat-slide {
    --slide-opacity: 0;
    --slide-y: 5rem;
    --marker-x: 0;
    --marker-w: clamp(5.55rem, 22.8vw, 6.4rem);
    --base-h: calc(var(--marker-w) * 102 / 137);
    --copy-x: 6.75rem;
    --copy-width: min(60vw, 15rem);
    --copy-align: left;
    position: absolute;
    left: 50%;
    top: clamp(13.5rem, 25svh, 16.5rem);
    width: min(calc(100% - (2 * var(--mobile-inline))), 23rem);
    height: calc(max(100svh, 46rem) - clamp(13.5rem, 25svh, 16.5rem));
    opacity: var(--slide-opacity);
    transform: translateX(-50%);
    will-change: opacity, transform;
    pointer-events: none;
  }

  .threat-slide .threat-marker {
    left: var(--marker-x, 0);
    top: 0;
    width: var(--marker-w);
    height: 100%;
  }

  .threat-slide .threat-marker__base {
    width: 100%;
    height: auto;
    transform: translate3d(0, var(--slide-y), 0);
    will-change: transform;
  }
  
  .threat-slide .threat-marker__stem {
    left: 35.8%;
    top: calc(var(--base-h) + var(--slide-y));
    height: calc(100% - var(--base-h) - var(--slide-y));
    transform: none;
    will-change: top, height;
  }

  .threat-slide > div {
    position: absolute;
    left: var(--copy-x, 6.75rem);
    right: auto;
    top: 0.55rem;
    width: var(--copy-width, min(60vw, 15rem));
    text-align: var(--copy-align, left);
    color: var(--color-navy);
    transform: translate3d(0, var(--slide-y), 0);
    will-change: transform;
  }

  .threat-slide h3 {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.12;
  }

  .threat-slide p {
    margin-top: 0.38rem;
    font-size: 0.9375rem;
    line-height: 1.14;
  }

  /* Clients -------------------------------------------------------------- */
  .clients-shell {
    display: grid;
    width: min(100%, var(--mobile-composition-max));
    min-height: max(52.75rem, 100svh);
    margin-inline: auto;
    padding: clamp(8.5rem, 15svh, 9.5rem) var(--mobile-inline) 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .clients-bg { background: var(--color-navy); }

  .clients h2 {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    font-size: var(--mobile-title);
    line-height: 1.08;
    text-wrap: balance;
  }

  .client-copy,
  .client-copy--student,
  .client-copy--business,
  .client-copy--startup {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 21rem);
    margin-inline: auto;
    opacity: 1;
    transform: none;
  }

  .client-copy--student { margin-top: 3.55rem; }
  .client-copy--business,
  .client-copy--startup { margin-top: 1.9rem; }

  .client-copy h3 {
    font-size: var(--mobile-card-title);
    line-height: 1.15;
  }

  .client-copy p {
    margin-top: 0.2rem;
    font-size: var(--mobile-copy);
    line-height: 1.18;
  }

  .compass {
    position: relative;
    left: auto;
    top: auto;
    width: min(92%, 20.75rem);
    height: auto;
    margin: 1.65rem auto 0;
    aspect-ratio: 1;
  }

  .compass-dial { left: 4.96%; top: 5.23%; width: 89.81%; height: 89.81%; }
  .compass-needles { left: 13.64%; top: 13.77%; width: 73%; height: 73%; }
  .compass-label { font-size: clamp(1rem, 4vw, 1.35rem); }

  .compass-hint {
    width: min(92%, 20.75rem);
    margin: 0.35rem auto 0;
    color: var(--color-cream-a50);
    font-size: 0.8125rem;
    line-height: 1.2;
    text-align: center;
  }

  /* Principles scroll story --------------------------------------------- */
  .principles {
    --principles-scene-top: clamp(8rem, 9svh, 10rem);
    --principles-stone-height: clamp(11rem, 34vw, 18rem);
    --principles-lighthouse-height: clamp(30rem, 112vw, 37rem);
    --principles-lighthouse-foot-trim: calc((var(--principles-lighthouse-height) * 0.00152) + 0.3svh);
    --principles-lighthouse-width: calc(var(--principles-lighthouse-height) * 180 / 568);
    --principles-lighthouse-anchor-x: 23.6vw;
    --principles-lighthouse-foot-ratio: 0.512;
    --principles-copy-left: clamp(13rem, 42vw, 34rem);
    --principles-copy-width: min(48vw, 24rem);
    min-height: calc(100svh + 185svh);
    overflow: visible;
  }

  .principles-shell {
    position: sticky;
    top: 0;
    width: 100vw;
    height: max(100svh, calc(var(--principles-scene-top) + var(--principles-lighthouse-height) + var(--principles-stone-height) - var(--principles-lighthouse-foot-trim)));
    min-height: max(100svh, calc(var(--principles-scene-top) + var(--principles-lighthouse-height) + var(--principles-stone-height) - var(--principles-lighthouse-foot-trim)));
    margin-inline: calc(50% - 50vw);
    overflow: clip;
    container-type: inline-size;
  }

  .principles-bg { background: var(--color-navy); }

  .principles h2 {
    left: 50%;
    top: clamp(5.75rem, 10svh, 7.5rem);
    width: min(82%, 23rem);
    transform: translateX(-50%);
    font-size: var(--mobile-title);
    line-height: 1.08;
  }

  .lighthouse {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .lighthouse-beam {
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .lighthouse-stage {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .lighthouse-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .lighthouse-stone-mobile {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100vw;
    height: var(--principles-stone-height);
    color: var(--color-cream);
    pointer-events: none;
  }

  .lighthouse-stone-mobile__stone {
    fill: currentColor;
  }

  .lighthouse-mobile-stage {
    position: absolute;
    z-index: 2;
    left: calc(var(--principles-lighthouse-anchor-x) - (var(--principles-lighthouse-width) * var(--principles-lighthouse-foot-ratio)));
    top: auto;
    bottom: calc(var(--principles-stone-height) - 3px);
    width: var(--principles-lighthouse-width);
    height: var(--principles-lighthouse-height);
    color: var(--color-red);
    pointer-events: none;
  }

  .lighthouse-mobile-stage__tower {
    fill: currentColor;
  }

  .lighthouse-mobile-stage__lamp {
    fill: var(--color-yellow);
  }

  .principle {
    z-index: 5;
    font-size: clamp(0.8125rem, 3.85cqw, 1rem);
    line-height: 1.08;
    pointer-events: none;
  }

  .principle--1,
  .principle--2,
  .principle--3 {
    left: var(--principles-copy-left);
    top: auto;
    width: var(--principles-copy-width);
  }

  .principle--1 { bottom: calc(var(--principles-stone-height) + clamp(19rem, 32svh, 22rem)); }
  .principle--2 { bottom: calc(var(--principles-stone-height) + clamp(8rem, 16svh, 11rem)); }
  .principle--3 { bottom: calc(var(--principles-stone-height) + clamp(13rem, 24svh, 17rem)); }

  /* Process -------------------------------------------------------------- */
  .process-shell {
    --process-mobile-top-space: clamp(6.5rem, 12svh, 8.75rem);
    --process-title-gap: clamp(1.75rem, 3.75svh, 3rem);
    --process-bottom-space: clamp(2.25rem, 5svh, 3.75rem);
    --process-scene-width: min(232vw, 58rem);
    --process-scene-height: calc(var(--process-scene-width) * 1441 / 1728);

    width: 100vw;
    min-height: max(122svh, calc(var(--process-mobile-top-space) + 1.08em + var(--process-title-gap) + var(--process-scene-height) + var(--process-bottom-space)));
    margin-inline: auto;
    padding: 0;
    overflow: visible;
  }

  .process h2 {
    padding-top: var(--process-mobile-top-space);
    font-size: var(--mobile-title);
    line-height: 1.08;
  }

  .process-scene {
    position: relative;
    left: 50%;
    top: auto;
    width: var(--process-scene-width);
    margin-top: var(--process-title-gap);
    transform: translateX(-50%);
  }

  .process-sail-stage,
  .process-steps {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .process-step {
    position: absolute;
    width: var(--process-step-width);
    height: var(--process-step-height);
    min-height: 0;
    padding-left: 0;
    text-align: center;
    opacity: 1;
    transform: none;
  }

  .process-step h3 {
    font-size: clamp(0.9rem, var(--process-step-title-size), 2rem);
  }

  .process-step p {
    font-size: clamp(0.5rem, var(--process-step-body-size), 1rem);
  }

  @media (min-width: 431px) {
    .process-shell {
      --process-scene-width: min(210vw, 60rem);

      min-height: max(118svh, calc(var(--process-mobile-top-space) + 1.08em + var(--process-title-gap) + var(--process-scene-height) + var(--process-bottom-space)));
    }
  }

  @media (min-width: 600px) {
    .process-shell {
      --process-mobile-top-space: clamp(7.25rem, 13svh, 9rem);
      --process-title-gap: clamp(2rem, 4svh, 3.25rem);
      --process-scene-width: min(145vw, 64rem);

      min-height: max(116svh, calc(var(--process-mobile-top-space) + 1.08em + var(--process-title-gap) + var(--process-scene-height) + var(--process-bottom-space)));
    }
  }

  /* Services ------------------------------------------------------------- */
  .services-shell {
    width: min(100%, var(--mobile-composition-max));
    min-height: 0;
    margin-inline: auto;
    padding: clamp(8.5rem, 15svh, 9.5rem) 0 3.25rem;
  }

  .services h2 {
    width: calc(100% - (2 * var(--mobile-inline)));
    font-size: var(--mobile-title);
    line-height: 1.08;
  }

  .price-carousel {
    --price-card-width: min(calc(100vw - (2 * var(--mobile-inline))), var(--mobile-card-max));
    width: 100vw;
    margin: 2.65rem calc(50% - 50vw) 0;
    overflow: hidden;
    touch-action: pan-y;
  }

  .price-grid {
    display: flex;
    width: max-content;
    gap: 1rem;
    padding-inline: calc((100vw - var(--price-card-width)) / 2);
    will-change: transform;
  }

  .price-grid.is-animating {
    transition: transform 0.48s var(--ease-carousel);
  }

  .price-card {
    width: var(--price-card-width);
    min-height: 26.4375rem;
    flex: 0 0 var(--price-card-width);
    padding: 2.1rem 1.35rem 1.25rem;
  }

  .price-card h3 { font-size: 1.25rem; line-height: 1.18; }
  .price-card__subtitle,
  .price-card__list,
  .price-card__meta { font-size: 0.9375rem; }
  .price-card__subtitle { line-height: 1.15; }
  .price-card__body { gap: 1.25rem; }
  .price-card__list { padding-left: 1.2rem; line-height: 1.15; }
  .price-card__meta strong { font-size: 1.875rem; }

  .price-dots {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 1.15rem;
  }

  .price-dots button {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-gray-mid);
    cursor: pointer;
  }

  .price-dots button.is-active { background: var(--color-navy); }

  .credit-composite {
    width: min(calc(100% - (2 * var(--mobile-inline))), var(--mobile-card-max));
    margin: 2.25rem auto 0;
  }

  .subscription-card {
    --subscription-wave-height: 4.375rem;
    --subscription-wave-underlay-height: 1.125rem;
    display: block;
    min-height: 24rem;
    border-radius: var(--radius-card);
  }

  .credit-composite.is-open .subscription-card {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: linear-gradient(
      to bottom,
      var(--color-navy) 0 calc(100% - var(--subscription-wave-underlay-height)),
      var(--color-red) calc(100% - var(--subscription-wave-underlay-height)) 100%
    );
  }

  .subscription-card__copy {
    position: relative;
    z-index: 2;
    padding: 1.8rem 1.35rem 6.65rem;
  }
  .subscription-card h3 { font-size: 1.25rem; }
  .subscription-plan,
  .credit-toggle { font-size: 0.9375rem; }

  .subscription-card__wave {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: -1px;
    height: var(--subscription-wave-height);
    background: linear-gradient(90deg, var(--color-gray-light) 0%, var(--color-wave-slate) 56.7308%, var(--color-navy) 100%);
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 334 70' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 52H164L334 43V54C334 62.8366 326.837 70 318 70H16C7.16344 70 0 62.8366 0 54V52Z'/%3E%3Cpath fill='black' d='M13.7075 32.6934C5.93877 37.1586 0 52.2893 0 52.2893L334 51.7101V47.0766C334 47.0766 327.716 32.8571 319.617 28.639C308.494 22.8465 299.795 36.2224 287.761 32.6934C276.777 29.4722 275.742 17.3354 264.594 14.7384C245.022 10.1791 241.803 40.5421 221.927 43.5049C194.471 47.5976 185.958 2.78546 159.181 10.1049C139.613 15.4539 142.846 44.7664 122.692 47.0766C97.3197 49.9849 101.927 -4.9021 76.9358 0.355202C58.3772 4.25929 64.5088 33.1805 46.1422 37.9061C33.7178 41.1028 24.8302 26.3004 13.7075 32.6934Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 334 70' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 52H164L334 43V54C334 62.8366 326.837 70 318 70H16C7.16344 70 0 62.8366 0 54V52Z'/%3E%3Cpath fill='black' d='M13.7075 32.6934C5.93877 37.1586 0 52.2893 0 52.2893L334 51.7101V47.0766C334 47.0766 327.716 32.8571 319.617 28.639C308.494 22.8465 299.795 36.2224 287.761 32.6934C276.777 29.4722 275.742 17.3354 264.594 14.7384C245.022 10.1791 241.803 40.5421 221.927 43.5049C194.471 47.5976 185.958 2.78546 159.181 10.1049C139.613 15.4539 142.846 44.7664 122.692 47.0766C97.3197 49.9849 101.927 -4.9021 76.9358 0.355202C58.3772 4.25929 64.5088 33.1805 46.1422 37.9061C33.7178 41.1028 24.8302 26.3004 13.7075 32.6934Z'/%3E%3C/svg%3E");
    pointer-events: none;
  }

  .subscription-card > img {
    position: absolute;
    z-index: 2;
    left: 58%;
    top: auto;
    right: auto;
    bottom: 1.28rem;
    width: 34%;
    transform: translateX(-32%) rotate(-7.34deg);
    pointer-events: none;
  }

  .credit-table-panel {
    width: 100%;
    margin: 0;
    align-self: stretch;
    transform: none;
  }

  .credit-table { padding: 1.3rem 0.8rem; }
  .credit-table__grid th,
  .credit-table__grid td { padding: 0.65rem 0.45rem; }
  .credit-table__grid th { font-size: 0.82rem; }
  .credit-table__grid td { font-size: 0.82rem; }

  .services-accordion {
    width: min(calc(100% - (2 * var(--mobile-inline))), var(--mobile-card-max));
    margin: 2.4rem auto 0;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .accordion-item { width: 100%; max-width: none; }
  .accordion-item button { min-height: 5.4rem; font-size: 1.25rem; }
  .accordion-panel ul { min-height: 0; font-size: 1rem; }

  .payment-terms {
    width: min(calc(100% - (2 * var(--mobile-inline))), var(--mobile-card-max));
    margin-top: 2.4rem;
    font-size: 0.9375rem;
    line-height: 1.2;
  }

  /* Footer --------------------------------------------------------------- */
  .site-footer {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 22rem;
    margin-top: 0;
    padding: 3rem var(--mobile-inline) calc(3.5rem + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .site-footer nav {
    align-items: center;
    gap: 0.62rem;
    font-size: 0.9375rem;
    text-align: center;
  }

  .site-footer a { min-height: 1.3rem; }

  .footer-logo {
    width: min(13.5rem, 62vw);
    height: auto;
    margin-top: 2rem;
    aspect-ratio: 292 / 56;
  }

  .footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Mobile keeps title reveal visible from the start so section headings never
     read as missing during normal navigation. */
  [data-title-reveal].title-reveal {
    opacity: 0.42;
    filter: blur(8px);
    transform: translateY(16px);
    transition: opacity var(--duration-reveal) var(--ease-emphasized),
      filter var(--duration-reveal) var(--ease-emphasized),
      transform var(--duration-reveal) var(--ease-emphasized);
  }

  [data-title-reveal].title-reveal.is-revealed {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-title-reveal].title-reveal,
    [data-title-reveal].title-reveal.is-revealed {
      opacity: 1;
      filter: none;
      transform: none;
      transition: none;
    }
  }

  html.visual-test [data-title-reveal].title-reveal,
  html.visual-test [data-title-reveal].title-reveal.is-revealed {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

@media (max-width: 899px) and (orientation: landscape) {
  .hero-shell,
  .clients-shell {
    min-height: 52.75rem;
  }

  .threats-shell {
    height: 52.75rem;
  }

  .principles-shell {
    height: max(100svh, calc(var(--principles-scene-top) + var(--principles-lighthouse-height) + var(--principles-stone-height) - var(--principles-lighthouse-foot-trim)));
    min-height: max(100svh, calc(var(--principles-scene-top) + var(--principles-lighthouse-height) + var(--principles-stone-height) - var(--principles-lighthouse-foot-trim)));
  }

  .site-header { top: calc(1rem + env(safe-area-inset-top)); }
  .hero-copy { top: 10.75rem; }
  .threats h2 { top: 8rem; }
  .threat-slide { top: 15.5rem; height: 37rem; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .brand-logo-layer,
  .menu-toggle-line,
  .mobile-menu,
  .mobile-menu__scrim,
  .mobile-menu nav {
    transition: none !important;
  }

  .threats,
  .principles { min-height: auto; }

  .threats-shell,
  .principles-shell {
    position: relative;
    height: auto;
    min-height: max(100svh, calc(var(--principles-scene-top) + var(--principles-lighthouse-height) + var(--principles-stone-height) - var(--principles-lighthouse-foot-trim)));
  }

  .threat-slider {
    position: relative;
    inset: auto;
    display: grid;
    gap: 1.25rem;
    padding: 15rem var(--mobile-inline) 8rem;
  }

  .threat-slide {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 23rem);
    height: 12rem;
    margin-inline: auto;
    opacity: 1 !important;
    transform: none !important;
  }

  .threat-slide .threat-marker__base,
  .threat-slide > div {
    transform: none !important;
  }

  .threat-slide .threat-marker__stem {
    top: var(--base-h) !important;
    height: calc(100% - var(--base-h)) !important;
  }

  .principle { opacity: 1 !important; color: var(--color-cream) !important; }
  .lighthouse-beam { display: none; }
}

@media (max-width: 899px) {
  .mobile-logo-static {
    position: absolute;
    inset: 0;
    display: block;
  }

  .mobile-logo-static img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    transition: opacity 0.2s linear;
  }

  .mobile-logo-static__dark { opacity: 1; }
  .mobile-logo-static__light { opacity: 0; }

  .site-header.logo-on-light {
    --mobile-header-logo-color: var(--color-navy);
  }

  .site-header:not(.logo-on-light) {
    --mobile-header-logo-color: var(--color-white);
  }

  .site-header.logo-on-light .mobile-logo-static__dark { opacity: 0; }
  .site-header.logo-on-light .mobile-logo-static__light { opacity: 1; }

  .brand-logo-layer .adaptive-logo {
    display: none;
  }

  .menu-toggle-line {
    background: var(--mobile-header-logo-color, var(--color-white));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .menu-open .menu-toggle-line {
    background: var(--color-white);
  }

  .menu-open .site-header .mobile-logo-static__dark { opacity: 1; }
  .menu-open .site-header .mobile-logo-static__light { opacity: 0; }
}

@media (max-width: 899px) {
  /* On mobile the ship sits behind both wave layers. */
  .ship-track { z-index: var(--z-background); }
  .sea-wave--back { z-index: var(--z-decoration-back); }
  .sea-wave--front { z-index: var(--z-copy); }

  /* Title reveal owns transform, so mobile centering must not depend on it. */
  .threats h2 {
    left: var(--mobile-inline);
    right: var(--mobile-inline);
    width: auto;
    transform: none;
    color: var(--color-navy);
  }

  .principles h2 {
    left: 9%;
    right: 9%;
    width: auto;
    transform: none;
  }
}

@media (max-width: 899px) {
  .ship-track {
    --mobile-ship-width: min(52vw, 20rem);
    --mobile-ship-y-adjust: -41vw;
    left: 0;
    width: var(--mobile-ship-width);
    transform: none;
  }
}