:root{color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: a seven-chapter scroll story. Text on one side, a live illustration on the other; alternating light and deep-sea chapters; a thin rail marks the current chapter. */
:root{
  --bg:#062c4a; --bg-alt:#093a60; --fg:#f4f8fa; --muted:#bdd4e6; --line:#1f4f72;
  --accent:#efcf86; --accent-ink:#172a2e;
  --deep:#05253f; --on-deep:#f4f8fa; --on-deep-muted:#bdd4e6; --deep-line:#1f4f72;
  --gold:#efcf86; --gold-ink:#172a2e;
  --seam-hero:rgb(16,50,90); --seam-water:rgb(11,40,66);
  --ring-a:#efcf86; --ring-b:#4eb8e5; --ring-track:rgba(225,233,244,.2);
  --stage:#093a60; --stage-ink:#bdd4e6;
  --wa:#1b7f46; --wa-ink:#ffffff;
  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  --bg:#f7fafc; --bg-alt:#eaf4f8; --fg:#193d50; --muted:#2b4856; --line:#d5e5e9;
  --accent:#06579a; --accent-ink:#ffffff;
  --deep:#eaf4f8; --on-deep:#193d50; --on-deep-muted:#2b4856; --deep-line:#d5e5e9;
  --gold:#06579a; --gold-ink:#ffffff;
  --seam-hero:rgb(104,154,190); --seam-water:rgb(150,192,216);
  --ring-a:#06579a; --ring-b:#5aa7e6; --ring-track:rgba(25,61,80,.14);
  --stage:#eaf4f8; --stage-ink:#2b4856; color-scheme:light;
}
:root[data-theme="dark"]{color-scheme:dark;}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.9vw,2.8rem);letter-spacing:-.01em}
h3{font-size:1.2rem;line-height:1.25}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.deep :focus-visible{outline-color:var(--gold)}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;flex:none}
.brand-lockup{display:flex;align-items:center;padding:0;background:transparent;border-radius:0;flex:none}
.brand-logo{display:block;width:clamp(145px,19vw,200px);height:auto;max-height:48px;object-fit:contain;flex:none}
.brand-logo-light,.footer-logo-light{display:none}
:root[data-theme="light"] .brand-logo-dark,:root[data-theme="light"] .footer-logo-dark{display:none}
:root[data-theme="light"] .brand-logo-light,:root[data-theme="light"] .footer-logo-light{display:block}
.brand-sub{display:block;width:160px;white-space:pre-line;font-size:.75rem;color:var(--muted);line-height:1.3}
.footer-branding{align-items:center}
.footer-logo{width:clamp(100px,13vw,150px);height:auto;max-height:85px;object-fit:contain}
@media (max-width:520px){.bar{min-height:76px;gap:8px}.brand{gap:3px;margin-left:-8px}.brand-logo{width:clamp(88px,25vw,100px);max-height:48px}.brand-logo-dark{content:url("../assets/images/brand/logo-footer-dark.webp")}.brand-logo-light{content:url("../assets/images/brand/logo-footer-light.webp")}.brand-sub{display:block;width:clamp(104px,30vw,120px);font-size:clamp(10px,2.8vw,12px);line-height:1.2;white-space:pre-line}.header-controls{gap:5px}.theme-toggle{width:38px;height:38px}.lang-toggle{width:38px;height:38px}.footer-logo{width:112px;max-height:70px}}
.header-controls{display:flex;align-items:center;gap:10px;flex:none}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--gold);background:var(--bg-alt);color:var(--gold);border-radius:6px;cursor:pointer;flex:none}
.theme-toggle span{display:block;font:400 1.55rem/1 Arial,sans-serif;transform:translateY(-1px)}
:root[data-theme="light"] .theme-toggle{color:var(--fg);border-color:var(--fg);background:#fff}
.theme-toggle:hover{background:var(--gold);color:var(--gold-ink)}
.theme-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.langs{position:relative;display:inline-flex;align-items:center;min-width:42px}
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:40px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg-alt);color:var(--fg);font:500 .9rem var(--font-body);cursor:pointer}
.lang-toggle:focus-visible,.lang-option:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lang-current-flag{font-size:1.35rem;line-height:1}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:100;min-width:180px;padding:5px;background:var(--bg-alt);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.lang-menu[hidden]{display:none}
.lang-option{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:5px;background:transparent;color:var(--fg);font:500 .9rem var(--font-body);text-align:left;cursor:pointer}
.lang-option:hover,.lang-option[aria-current="true"]{background:var(--bg);color:var(--accent)}
.lang-option-flag{display:inline-flex;align-items:center;justify-content:center;width:24px;font-size:1.2rem}
.lang-select-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:560px){.langs{min-width:42px}.lang-menu{min-width:170px}}

/* chapters */
.chap{padding-block:clamp(56px,9vw,112px)}
.chap.alt{background:var(--bg-alt)}
.chap.deep{background:var(--deep);color:var(--on-deep)}
.eyebrow{font:500 .75rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.deep .eyebrow{color:var(--gold)}
.lede{font-size:1.08rem;color:var(--muted);max-width:56ch;margin-top:20px}
.deep .lede{color:var(--on-deep-muted)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
.copy{min-width:0}
@media (max-width:860px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split.stage-first .stage{order:-1}
}
.stage{margin:0;background:var(--stage);border-radius:6px;overflow:hidden;min-width:0}
.stage svg{display:block;width:100%;height:auto}
.stage figcaption{font:400 .7rem var(--font-mono);letter-spacing:.06em;color:var(--stage-ink);padding:8px 14px 10px}
@media (min-width:861px){.sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);align-self:start}}
@media (max-width:860px){
  .sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:10}
  .sticky svg{max-height:32vh}
  .sticky figcaption{display:none}
}

.badges{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.badges li{font:500 .74rem var(--font-mono);letter-spacing:.06em;padding:.5em .8em;border:1px solid var(--line);border-radius:4px;color:var(--fg)}
.reasons{list-style:none;padding:0;margin:clamp(40px,6vw,72px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.reasons li{border-top:2px solid var(--fg);padding-top:16px}
.reasons p{color:var(--muted);font-size:.95rem;margin-top:10px}
@media (max-width:980px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.reasons{grid-template-columns:minmax(0,1fr)}}
.scrollhint{display:inline-block;margin-top:40px;font:500 .75rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.scrollhint::after{content:" \2193"}

/* controls */
.ctl{margin-top:22px}
.lab{display:block;font:500 .72rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 .9rem var(--font-body);padding:.5em .95em;border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:4px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.spec{font:500 .95rem var(--font-mono);margin-top:28px;color:var(--fg)}
.price{color:var(--muted);font-size:.95rem;margin-top:4px;white-space:pre-line}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:flex-start}
.btn{display:inline-flex;align-items:center;gap:8px;padding:.78em 1.2em;border-radius:4px;font:600 .95rem var(--font-body);border:1px solid var(--line);background:transparent;color:var(--fg);text-decoration:none;cursor:pointer;line-height:1.3}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.deep .btn.primary{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.deep .btn{color:var(--on-deep);border-color:var(--deep-line)}
.deep .btn.primary{color:var(--gold-ink)}
details.more{margin-top:14px}
details.more summary{list-style:none;display:inline-flex}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"+";margin-left:6px;font-family:var(--font-mono)}
details.more[open] summary::after{content:"\2212"}
details.more ol{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:0;max-width:52ch;counter-reset:d}
details.more li{counter-increment:d;display:grid;grid-template-columns:2.2em 1fr;padding:10px 0;border-top:1px solid var(--line);font-size:.95rem}
details.more li::before{content:counter(d);font:500 .8rem var(--font-mono);color:var(--accent);padding-top:.15em}

.styles{display:grid;gap:10px;margin-top:26px}
.scard{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;text-align:left;padding:14px 16px;border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:6px;cursor:pointer;font:inherit}
.scard[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.scard .sw{display:flex;gap:4px;align-items:center;grid-row:1 / span 2}
.scard .sw i{width:14px;height:34px;border:1px solid rgba(128,128,128,.35)}
.scard strong{font:600 1.1rem var(--font-display)}
.scard span.d{font-size:.9rem;color:var(--muted);grid-column:2}

/* Build section: one shared background image across the feature and all build stages. */
#s4{
  position:relative;
  isolation:isolate;
  background:var(--deep);
}
#s4::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 40%,transparent 100%),
    linear-gradient(180deg,rgba(4,29,52,.52) 0%,rgba(4,29,52,.68) 42%,rgba(4,29,52,.88) 100%),
    url("../assets/images/build/build-main-desktop.webp");
  background-size:100% clamp(100px,12vw,170px),cover,cover;
  background-position:top center,center top,center top;
  background-repeat:no-repeat;
}
/* Light theme follows the hero treatment: brighten the photo with a pale wash and use dark text. */
html[data-theme="light"] #s4::before{
  background-image:
    linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 40%,transparent 100%),
    linear-gradient(0deg,rgba(188,222,240,.98) 0%,rgba(188,222,240,.82) 14%,rgba(188,222,240,.12) 40%),
    linear-gradient(90deg,rgba(188,222,240,.94) 0%,rgba(188,222,240,.82) 18%,rgba(188,222,240,.48) 34%,rgba(188,222,240,.12) 48%,transparent 58%),
    linear-gradient(270deg,rgba(188,222,240,.94) 0%,rgba(188,222,240,.82) 18%,rgba(188,222,240,.48) 34%,rgba(188,222,240,.12) 48%,transparent 58%),
    url("../assets/images/build/build-main-desktop.webp");
  background-size:100% clamp(100px,12vw,170px),cover,cover,cover,cover;
  background-position:top center,center top,center top,center top,center top;
}
html[data-theme="light"] #s4 .split .copy,
html[data-theme="light"] #s4 .split .copy p,
html[data-theme="light"] #s4 .split .copy h2{color:#102d3a;text-shadow:0 1px 10px rgba(255,255,255,.16)}
html[data-theme="light"] #s4 .split .eyebrow{color:#054a85}
html[data-theme="light"] #s4 .split .copy a{color:#06579a;text-shadow:none}
@media (max-width:860px){
  #s4::before{display:none}
  #s4{
    padding-top:0;
    margin-top:0;
    border-top:0;
    box-shadow:none;
  }
  #s4 .split{
    position:relative;
    isolation:isolate;
    background:var(--deep);
  }
  #s4 .split::before{
    content:"";
    position:absolute;
    inset:0 calc(-1 * clamp(16px,4vw,28px)) 0;
    z-index:0;
    pointer-events:none;
    background-image:
      linear-gradient(180deg,var(--deep) 0%,rgba(4,29,52,.66) 12%,rgba(4,29,52,.30) 38%,rgba(4,29,52,.36) 62%,rgba(4,29,52,.66) 82%,var(--deep) 100%),
      url("../assets/images/build/build-main-desktop.webp");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    /* Fade the entire photo layer out at the bottom so its edge cannot form a seam. */
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
  }
  /* Mobile-only Starlink image sits below the stage, behind monitoring copy and visit CTA. */
  #s4 .build-monitor{
    position:relative;
    isolation:isolate;
    margin-inline:calc(-1 * clamp(16px,4vw,28px));
    padding:18px clamp(16px,4vw,28px) 22px;
    background:var(--deep);
    border:0;
    outline:0;
    box-shadow:none;
  }
  #s4 .build-monitor::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0 calc(-1 * clamp(16px,4vw,28px)) 0;
    pointer-events:none;
    background:
      linear-gradient(180deg,var(--deep) 0%,rgba(4,29,52,.22) 18%,rgba(4,29,52,.18) 66%,var(--deep) 100%),
      url("../assets/images/build/build-starlink.webp") right center / cover no-repeat;
    background-repeat:no-repeat;
    border:0;
    outline:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
  }
  #s4 .build-monitor .watch{
    position:relative;
    isolation:isolate;
    border-top:0;
  }
  /* Local contrast veil behind monitoring copy; keep the Starlink dish itself visible. */
  #s4 .build-monitor .watch::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-14px -16px -6px;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(2,21,38,.84) 0%,rgba(2,21,38,.78) 72%,rgba(2,21,38,.25) 100%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
  }
  html[data-theme="dark"] #s4 .build-monitor .watch .lede{
    color:#d6e6ef;
    text-shadow:0 1px 8px rgba(0,0,0,.45);
  }
  html[data-theme="light"] #s4 .build-monitor .watch .lede{
    color:#17323f;
    text-shadow:0 0 10px rgba(255,255,255,.6);
  }
  html[data-theme="light"] #s4 .build-monitor .watch::before{
    background:linear-gradient(180deg,rgba(240,248,250,.88) 0%,rgba(240,248,250,.8) 72%,rgba(240,248,250,.3) 100%);
  }

  html[data-theme="light"] #s4 .build-monitor::before{
    background:
      linear-gradient(180deg,var(--deep) 0%,rgba(220,239,246,.12) 18%,rgba(220,239,246,.10) 66%,var(--deep) 100%),
      url("../assets/images/build/build-starlink.webp") right center / calc(100% + 6px) calc(100% + 6px) no-repeat;
  }
  /* Theme-specific Build photo fades: keep the same crop/mask, change only the overlay colors. */
  html[data-theme="dark"] #s4 .split::before{
    background-image:
      linear-gradient(180deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 60%,transparent) 45%,transparent 100%),
      linear-gradient(180deg,rgba(5,39,68,.88) 0%,rgba(5,39,68,.60) 12%,rgba(5,39,68,.28) 38%,rgba(5,39,68,.34) 62%,rgba(5,39,68,.70) 82%,var(--deep) 100%),
      linear-gradient(90deg,rgba(9,58,96,.30) 0%,rgba(9,58,96,.16) 48%,rgba(9,58,96,.04) 100%),
      url("../assets/images/build/build-main-desktop.webp");
    background-size:100% 150px,cover,cover,cover;
    background-position:top center,center center,center center,center center;
  }
  html[data-theme="light"] #s4 .split::before{
    background-image:
      linear-gradient(180deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 60%,transparent) 45%,transparent 100%),
      linear-gradient(180deg,rgba(220,239,246,.08) 0%,rgba(220,239,246,.02) 42%,rgba(220,239,246,.40) 72%,rgba(220,239,246,.86) 92%,var(--deep) 100%),
      linear-gradient(90deg,rgba(220,239,246,.66) 0%,rgba(220,239,246,.34) 48%,rgba(220,239,246,.08) 100%),
      url("../assets/images/build/build-main-desktop.webp");
    background-size:100% 150px,cover,cover,cover;
    background-position:top center,center center,center center,center center;
  }
  html[data-theme="light"] #s4 .split .copy,
  html[data-theme="light"] #s4 .split .copy p,
  html[data-theme="light"] #s4 .split .copy h2{color:#102d3a;text-shadow:0 1px 8px rgba(255,255,255,.26)}
  html[data-theme="light"] #s4 .split .eyebrow{color:#054a85}
  html[data-theme="light"] #s4 .split .copy>.eyebrow{color:#054a85}
  html[data-theme="light"] #s4 .split .copy a{color:#06579a;text-shadow:none}
  #s4 .split>*{position:relative;z-index:1}
  #s4 .split .copy{padding-bottom:8px}
}
#s4>*{position:relative;z-index:1}

/* build */
/* Build feature image: oversized desktop photo fading underneath the copy. */
@media (min-width:861px){
  #s4 .split{
    display:block;
    position:relative;
    min-height:390px;
  }
  #s4 .split .copy{
    position:relative;
    z-index:2;
    width:48%;
    padding-block:8px 22px;
  }
  #s4 .split .stage{
    position:absolute;
    z-index:1;
    top:-48px;
    right:0;
    width:68%;
    height:calc(100% + 76px);
    min-height:420px;
    margin:0;
    background:transparent;
    border:0;
    border-radius:0;
    overflow:hidden;
  }
  #s4 #frameStage{
    position:absolute;
    inset:0;
    height:100%;
  }
  #s4 #frameStage img{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100% !important;
    object-fit:cover;
    object-position:center;
  }
  #s4 .split .stage::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(90deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 84%,transparent) 15%,color-mix(in srgb,var(--deep) 30%,transparent) 35%,transparent 64%),
      linear-gradient(0deg,var(--deep) 0%,transparent 30%);
  }
  #s4 .split .stage figcaption{display:none}
}

.stages{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,40px);counter-reset:b}

/* Desktop uses the shared #s4 background image; hide the duplicate feature photo. */
@media (min-width:861px){#s4 .split .stage{display:none}}
.stages li{counter-increment:b;border-top:1px solid var(--deep-line);padding:18px 0 22px;min-width:0}
.stages li img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;margin:0 0 14px}
.stages li::before{content:"0" counter(b);display:block;font:500 .78rem var(--font-mono);letter-spacing:.14em;color:var(--gold);margin-bottom:8px}
.stages p{color:var(--on-deep-muted);font-size:.95rem;margin-top:8px}

@media (max-width:860px){
  .stages{
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-top:1px solid var(--deep-line);
    margin-top:4px;
  }
  .stages li{
    border-top:0;
    padding:8px 0 0;
  }
}
@media (max-width:520px){.stages{grid-template-columns:minmax(0,1fr)}}
.visit{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;color:var(--on-deep-muted)}

/* papers + care */
.twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);margin-top:clamp(32px,5vw,56px)}
@media (max-width:760px){.twocol{grid-template-columns:minmax(0,1fr)}}
.list{list-style:none;margin:16px 0 0;padding:0}
.list li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--line);min-width:0}
.care-icon{width:26px;height:26px;display:block;fill:none;stroke:var(--accent);stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.list li span{min-width:0;line-height:1.55}
.pane-p .care-icon{color:var(--accent)}
.pane-m .care-icon{color:var(--gold);stroke:var(--gold)}
.note{font-size:.85rem;color:var(--muted);margin-top:12px}

/* business */
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin-top:32px}
.points div{border-top:2px solid var(--fg);padding-top:12px}
.points p{color:var(--muted);font-size:.93rem;margin-top:6px}
@media (max-width:520px){.points{grid-template-columns:minmax(0,1fr)}}
.calc{border:1px solid var(--line);border-radius:6px;padding:clamp(18px,3vw,28px);background:var(--bg);min-width:0}
.calc h3{margin-bottom:6px}
.row{display:grid;gap:4px;margin-top:16px}
.row label{display:flex;justify-content:space-between;gap:12px;font-size:.9rem}
.row output{font:500 .85rem var(--font-mono)}
.row input[type=range]{width:100%;accent-color:var(--accent)}
.out{margin-top:22px;border-top:1px solid var(--line);padding-top:6px}
.out div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.93rem;flex-wrap:wrap}
.out div b{font:500 .95rem var(--font-mono);font-variant-numeric:tabular-nums}
.out div.big{font-size:1rem}
.out div.big b{color:var(--accent);font-size:1.15rem}

/* closing */
.form{display:grid;gap:12px;margin-top:0}
.form label{display:grid;gap:4px;font:500 .72rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-muted)}
.form input,.form textarea{font:400 1rem var(--font-body);color:var(--on-deep);background:transparent;border:1px solid var(--deep-line);border-radius:4px;padding:.65em .8em;width:100%;text-transform:none;letter-spacing:0}
.form textarea{resize:vertical;min-height:84px}
.form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.form .two{grid-template-columns:minmax(0,1fr)}}
.briefbox textarea{font:400 .85rem var(--font-mono);line-height:1.55;min-height:190px}
.fromprice{font:600 1.5rem var(--font-display);margin-top:28px;color:var(--gold)}
footer{background:var(--deep);color:var(--on-deep-muted);padding-block:28px calc(88px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--deep-line);font-size:.85rem}

/* floating + rail */
.brief-edit-button{align-self:flex-start;margin-top:10px}
.wafloat{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:100;display:inline-flex;visibility:visible;opacity:1;align-items:center;gap:8px;padding:.8em 1.2em;background:var(--wa);color:var(--wa-ink);border-radius:999px;text-decoration:none;font:600 .95rem var(--font-body);box-shadow:0 6px 20px rgba(0,0,0,.28);transition:opacity .25s ease,transform .25s ease,visibility 0s linear}
.back-to-top{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:100;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--bg-alt);color:var(--fg);box-shadow:0 6px 20px rgba(0,0,0,.22);cursor:pointer;transition:background .2s ease,transform .2s ease}
.back-to-top svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.back-to-top:active{transform:translateY(-2px)}
@media(min-width:561px){.back-to-top{display:flex}}

.rail{display:none}
@media (min-width:1360px){
  .rail{display:flex;flex-direction:column;gap:12px;position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:30;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:12px}
  .rail a{display:flex;align-items:center;justify-content:flex-end;gap:8px;font:500 .68rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none}
  .rail .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor}
  .rail .rl{display:inline;font-weight:400}
  .rail a[aria-current="true"]{color:var(--accent);font-weight:700}
  .rail a[aria-current="true"] .dot{background:currentColor}
  .rail a[aria-current="true"] .rl{font-weight:700}
}

/* chapter progress, chapter tabs, hooks, read-more, mobile compaction */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
.prog{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--accent);transition:width .12s linear}
.chaptabs{display:none;position:relative}
.chaptabs a{flex:none;font:500 .72rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:.5em .75em;border:1px solid transparent;border-radius:4px}
.chaptabs a[aria-current="true"]{color:var(--fg);border-color:var(--fg)}
.chaptabs a[data-sec="s7"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chaptabs .count{flex:none;font:500 .72rem var(--font-mono);color:var(--muted);padding-right:4px}
.hooks{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.hooks a{display:inline-flex;align-items:center;gap:6px;padding:.55em .95em;border:1px solid var(--fg);border-radius:4px;text-decoration:none;font:600 .92rem var(--font-body);color:var(--fg)}
.hooks a::after{content:"\2192";font-family:var(--font-mono)}
.tabs{display:none}
.adv summary{display:none}
.rm{font:500 .76rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;background:none;border:0;padding:0 0 0 .3em;color:var(--accent);text-decoration:underline;cursor:pointer}
.hero-description-more{margin-left:.25em}.hero-read-more[hidden]{display:none}
.deep .rm{color:var(--gold)}
@media (max-width:860px){
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 104px)}
  .bar{min-height:76px}
  .chaptabs{display:flex;align-items:center;gap:3px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:0 clamp(12px,3vw,28px) 8px;scroll-padding-inline:12px;position:relative}
  .chaptabs::-webkit-scrollbar{display:none}
  .chaptabs a{font-size:.66rem;letter-spacing:.045em;padding:.48em .58em}
  .chaptabs .count{font-size:.66rem;padding-right:2px}
  .chap{padding-block:clamp(32px,8vw,52px)}
  .scrollhint{display:none}
  .reasons,.stages{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * clamp(16px,4vw,40px));padding-inline:clamp(16px,4vw,40px);scroll-padding-inline:clamp(16px,4vw,40px);padding-bottom:10px;scrollbar-width:none}
  .reasons::-webkit-scrollbar,.stages::-webkit-scrollbar{display:none}
  .reasons li,.stages li{flex:0 0 76%;scroll-snap-align:start}
  .reasons{margin-top:32px}
  #s1-reasons .reasons{scroll-snap-type:none;scroll-behavior:auto;overscroll-behavior-inline:contain}
  #s1-reasons .reasons>.reason-clone{pointer-events:none}
  .stages{margin-top:28px}
  .ctl{margin-top:16px}
  .ctl .chips:not(#chOpts){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(16px,4vw,40px));padding-inline:clamp(16px,4vw,40px)}
  .ctl .chips:not(#chOpts)::-webkit-scrollbar{display:none}
  .chip{flex:none;white-space:nowrap}
  #chOpts .chip{white-space:normal;text-align:left}
  .sticky{top:calc(env(safe-area-inset-top,0px) + 100px)}
  .sticky svg{max-height:26vh}
  .adv summary{display:inline-flex;margin-top:16px;cursor:pointer;font:600 .9rem var(--font-body);color:var(--accent);list-style:none}
  .adv summary::-webkit-details-marker{display:none}
  .adv summary::after{content:"+";margin-left:6px;font-family:var(--font-mono)}
  .adv[open] summary::after{content:"\2212"}
}
@media (max-width:760px){
  /* Izin tabs on mobile: full-width 50/50 underline tabs. Text may wrap to two lines, so both labels always fit in every language. */
  .tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:22px;border-bottom:1px solid var(--line)}
  .tabs .chip{display:flex;align-items:center;justify-content:center;min-height:52px;padding:.6em .5em;text-align:center;line-height:1.25;text-wrap:balance;border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;background:transparent;color:var(--muted);font-weight:500}
  .tabs .chip[aria-pressed="true"]{background:transparent;color:var(--fg);border-bottom-color:var(--gold);font-weight:600}
  .tabs .chip:hover{color:var(--fg)}
  .tabs .chip:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
  .twocol{margin-top:14px}
  .pane h3{display:none}
  .twocol[data-tab="p"] .pane-m{display:none}
  .twocol[data-tab="m"] .pane-p{display:none}
}
@media (max-width:560px){
  .brand small{display:none}
}

/* build monitoring note */
.watch{margin-top:clamp(44px,7vw,84px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--deep-line);max-width:68ch}
.watch .wh{font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2}
@media (max-width:860px){
  .watch{margin-top:8px;padding-top:12px}
}

/* motion: one gentle sway of the ship and the water */
.ship{animation:bob 6s ease-in-out infinite;transform-origin:400px 300px}
.wave{animation:drift 8s ease-in-out infinite alternate}
@keyframes bob{50%{transform:translateY(-3px) rotate(.4deg)}}
@keyframes drift{to{transform:translateX(-60px)}}
@media (prefers-reduced-motion:reduce){.ship,.wave{animation:none}}
/* Mobile: compact WhatsApp icon, shown from design through the final section. */
.wafloat.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
@media(max-width:560px){
  .wafloat{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:44px;height:44px;min-width:44px;padding:0;justify-content:center;gap:0;border-radius:50%}
  .wafloat svg{width:22px;height:22px}
  .wafloat span{display:none}
}
/* Mobile only: hide the large Build reference illustration; keep numbered stage photos. Desktop is unchanged. */
@media (max-width:860px){
  #s4 .split .stage{display:none}
}

/* Prevent accidental horizontal page movement on narrow screens. */
@media(max-width:860px){
  html,body{max-width:100%;overflow-x:clip}
  main,.chap,.wrap,.split,.copy,.stage,figure{min-width:0;max-width:100%}
  img,svg,video,canvas{max-width:100%}
  .split>*{min-width:0}
  .brand b{letter-spacing:.12em}
  .bar{gap:8px}
  .header-controls{gap:6px}
  .wrap{padding-inline:clamp(16px,4vw,28px)}
}



/* Cinematic OMBAK MARINE hero: use the existing real Pinisi photo as the first comparison version. */
 .hero-cinematic{position:relative;isolation:isolate;display:flex;align-items:center;min-height:min(820px,calc(100svh - 92px));overflow:hidden;background:#062c4a;color:#f4f8fa;padding-block:clamp(52px,7vw,88px)}
.hero-media,.hero-shade{position:absolute;inset:0;z-index:-1}
.hero-media{overflow:hidden;background:#093a60}
.hero-media #heroStage,.hero-media #heroStage img{width:100%;height:100%}
.hero-media #heroStage img{display:block;object-fit:cover;object-position:center 52%;max-width:none;transform:translate3d(0,var(--hero-parallax-y,0px),0) scale(1.14);transform-origin:center;will-change:transform}
.hero-shade{background:radial-gradient(ellipse at 70% 32%,rgba(239,207,134,.30) 0%,rgba(239,207,134,0) 48%)}
/* Desktop: the dark left-side scrim only protects the text block and is masked away toward the bottom, so the water keeps its natural blue and meets hero-follow without a dark band. */
@media (min-width:861px){
  .hero-shade::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,28,48,.72) 0%,rgba(3,28,48,.52) 30%,rgba(3,28,48,.2) 58%,rgba(3,28,48,.03) 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 94%);mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 94%)}
  :root[data-theme="light"] .hero-shade::before{content:none}
}
/* Seam with hero-follow: the hero's last stretch fades to the same flat water blue that hero-follow starts from, so the two meet without a visible edge. */
.hero-cinematic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(90px,14%,160px);z-index:-1;pointer-events:none;background:linear-gradient(0deg,color-mix(in srgb,var(--seam-hero) 92%,transparent) 0%,color-mix(in srgb,var(--seam-hero) 50%,transparent) 40%,transparent 100%)}
.hero-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;min-height:inherit;padding-block:clamp(32px,5vw,60px)}
.hero-copy{max-width:720px;padding-block:12px}
.hero-copy .eyebrow{color:#efcf86;margin-bottom:20px}
.hero-copy h1{max-width:15ch;font-size:clamp(2.65rem,4.8vw,4.8rem);line-height:1.04;letter-spacing:-.025em;color:#f2f7fa;text-wrap:balance;text-shadow:0 2px 22px rgba(0,0,0,.22)}
.hero-copy .lede{max-width:48ch;color:rgba(242,247,250,.88);font-size:clamp(1rem,1.3vw,1.15rem);margin-top:24px;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.hero-copy .lede:not(.hero-description){max-width:42ch;font-size:clamp(1.25rem,1.8vw,1.55rem);font-weight:600;line-height:1.3;margin-top:8px}
.hero-copy .lede.hero-description{margin-top:24px;font-size:clamp(.98rem,1.25vw,1.08rem);font-weight:400;line-height:1.65}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-actions .btn{min-height:48px;padding:.85em 1.25em}
.hero-cinematic .btn.primary{background:#efcf86;border-color:#efcf86;color:#172a2e}
.hero-cinematic .hero-secondary{border-color:rgba(242,247,250,.72);background:rgba(3,26,43,.22);color:#f2f7fa}
.hero-cinematic .hero-secondary:hover{background:rgba(3,26,43,.62)}
.hero-cinematic .badges{margin-top:28px;gap:8px}
.hero-cinematic .badges li{border-color:rgba(242,247,250,.38);background:rgba(3,28,48,.2);color:#f4f8fa;font-size:.68rem}
.hero-scroll{position:absolute;right:clamp(16px,4vw,40px);bottom:clamp(24px,4vw,42px);font:500 .68rem var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:rgba(242,247,250,.85);text-decoration:none}
.hero-scroll::after{content:" ↓";font-size:1rem}
/* Hero follow: one ocean master (2702x900) painted with cover, so it is never stretched. min-height keeps the section at 4:1 or taller on wide screens. */
.hero-follow{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:min(25vw,480px);padding-block:clamp(32px,5vw,60px);background-color:#062c4a}
/* Layers, top to bottom: a fade that continues the hero's dark bottom edge (no hard seam), a soft dim over the sun glare at the top right, then the image. */
.hero-follow::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background-image:linear-gradient(180deg,color-mix(in srgb,var(--seam-hero) 92%,transparent) 0%,color-mix(in srgb,var(--seam-hero) 50%,transparent) 12%,transparent 34%,transparent 60%,transparent calc(100% - min(130px,45%)),var(--seam-water) 100%),radial-gradient(ellipse 36% 70% at 96% 0%,rgba(6,44,74,.4) 0%,rgba(6,44,74,0) 100%),url("../assets/images/backgrounds/hero-follow-background.webp");background-repeat:no-repeat;background-position:center,center,center;background-size:100% 100%,100% 100%,cover;opacity:.95}
.hero-follow::after{content:none}
.hero-follow>.wrap{position:relative;z-index:1;width:100%;min-width:0}
/* Light theme: wash the sea with a pale blue so the section reads light, with dark text and deep-blue rings. */
:root[data-theme="light"] .hero-cinematic::after{height:clamp(140px,22%,260px)}
:root[data-theme="light"] .hero-follow{color:#102d3a;--fg:#102d3a;--muted:#294956;--gold:#06579a;--ring-a:#0b4f73;--ring-b:#1c93c9;--ring-track:rgba(16,45,58,.2)}
:root[data-theme="light"] .hero-follow::before{
  background-image:
    linear-gradient(180deg,transparent calc(100% - min(130px,45%)),var(--seam-water) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--seam-hero) 92%,transparent) 0%,color-mix(in srgb,var(--seam-hero) 55%,transparent) 18%,color-mix(in srgb,var(--seam-hero) 18%,transparent) 36%,transparent 52%),
    linear-gradient(rgba(150,200,232,.66),rgba(150,200,232,.66)),
    url("../assets/images/backgrounds/hero-follow-background.webp");
  background-size:100% 100%,100% 100%,100% 100%,cover;
  background-position:center,center,center,center;
  opacity:1;
}
:root[data-theme="light"] .hero-follow .reasons-heading .eyebrow{color:#0b4f73}
@media(max-width:860px){
  .hero-follow{min-height:0}
}
.hero-follow .reasons{margin-top:0}
.hero-follow .reasons li{position:relative;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease}
.hero-follow .reasons li::before{content:"";position:absolute;left:0;top:-2px;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.hero-follow .reasons li:hover{transform:translateY(-3px)}
.hero-follow .reasons li:hover::before{transform:scaleX(1)}
.hero-follow .reasons li h3{transition:color .35s ease}
.hero-follow .reasons li:hover h3{color:var(--gold)}
.hero-follow.reasons-reveal .reasons li{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),border-color .45s ease}
.hero-follow.reasons-reveal .reasons li.is-visible{opacity:1;transform:translateY(0)}
.hero-follow.reasons-reveal .reasons li::before{z-index:1}
.hero-follow.reasons-reveal .reasons li.is-visible::before{animation:reasons-line-in .65s cubic-bezier(.2,.7,.2,1) both}
.hero-follow.reasons-reveal .reasons li.is-visible:nth-child(2){transition-delay:.08s}
.hero-follow.reasons-reveal .reasons li.is-visible:nth-child(3){transition-delay:.16s}
.hero-follow.reasons-reveal .reasons li.is-visible:nth-child(4){transition-delay:.24s}
@keyframes reasons-line-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (hover:none){.hero-follow .reasons li:hover{transform:none}.hero-follow .reasons li:hover h3{color:inherit}}
@media (prefers-reduced-motion:reduce){.hero-follow .reasons li,.hero-follow .reasons li::before,.hero-follow .reasons li h3{transition:none!important;animation:none!important}.hero-follow.reasons-reveal .reasons li{opacity:1;transform:none}}
@media (min-width:1200px){.hero-copy{margin-left:clamp(0px,2vw,28px)}}
@media (max-width:860px){
  .hero-cinematic{min-height:calc(82svh - 62px);align-items:flex-end;padding-block:0}
  .hero-media #heroStage img{object-position:58% center}
  .hero-shade{background:radial-gradient(ellipse at 72% 28%,rgba(239,207,134,.18) 0%,rgba(239,207,134,0) 48%),linear-gradient(0deg,rgba(3,28,48,.6) 0%,rgba(3,28,48,.42) 28%,rgba(3,28,48,.12) 68%,rgba(3,28,48,.03) 100%),linear-gradient(90deg,rgba(3,28,48,.12),transparent 100%)}
  .hero-content{min-height:calc(82svh - 62px);align-items:flex-end;padding-top:clamp(100px,20vh,170px);padding-bottom:78px}
  .hero-copy{max-width:620px}
  .hero-copy .eyebrow{font-size:.68rem;margin-bottom:14px}
  .hero-copy h1{max-width:16ch;font-size:clamp(2.15rem,7.6vw,3.5rem);line-height:1.06}
  .hero-copy .lede{max-width:42ch;margin-top:16px;font-size:1rem}
  .hero-actions{margin-top:22px;gap:9px}
  .hero-actions .btn{min-height:46px}
  .hero-cinematic .badges{margin-top:20px}
  .hero-scroll{right:clamp(16px,4vw,32px);bottom:22px;font-size:.62rem}
}
@media (max-width:560px){
  .hero-cinematic{min-height:calc(84svh - 62px)}
  .hero-media #heroStage img{object-position:61% center}
  .hero-content{min-height:calc(84svh - 62px);padding-top:120px;padding-bottom:86px}
  .hero-copy h1{font-size:clamp(2rem,8vw,2.8rem);max-width:17ch;line-height:1.08}
  .hero-copy .lede{font-size:.96rem;line-height:1.55}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .hero-actions .btn{justify-content:center;text-align:center;padding:.8em .65em;font-size:.86rem}
  .hero-cinematic .badges{gap:6px}
  .hero-cinematic .badges li{font-size:.59rem;letter-spacing:.025em;padding:.48em .55em}
  .hero-scroll{bottom:18px;left:50%;right:auto;transform:translateX(-50%);text-align:center;white-space:nowrap}
  .hero-follow .reasons{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
}
@media (max-width:380px){
  .hero-copy h1{font-size:1.9rem;max-width:17ch}
  .hero-actions{grid-template-columns:1fr}
  .hero-cinematic .badges li{font-size:.56rem}
}
@media (prefers-reduced-motion:reduce){.hero-cinematic *{scroll-behavior:auto}}


/* Hero theme split: cinematic dark mode, brighter editorial treatment in light mode. */
:root[data-theme="light"] .hero-cinematic{
  background:#edf3f4;
  color:#102d3a;
}
:root[data-theme="light"] .hero-media{
  background:#c9dfe5;
}
:root[data-theme="light"] .hero-media #heroStage img{
  filter:brightness(1.02) saturate(1.06);
}
:root[data-theme="light"] .hero-shade{
  background:
    linear-gradient(90deg,rgba(239,246,247,.76) 0%,rgba(239,246,247,.6) 28%,rgba(239,246,247,.3) 50%,rgba(239,246,247,.04) 70%,rgba(239,246,247,0) 80%);
  /* The white scrim only protects the text block; fade it away toward the bottom so the water stays blue. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 90%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 90%);
}
:root[data-theme="light"] .hero-copy .eyebrow{color:#054a85}
:root[data-theme="light"] .hero-copy h1{
  color:#102d3a;
  text-shadow:0 1px 10px rgba(255,255,255,.14);
}
:root[data-theme="light"] .hero-copy .lede{
  color:rgba(16,45,58,.88);
  text-shadow:none;
}
:root[data-theme="light"] .hero-cinematic .btn.primary{
  background:#06579a;
  border-color:#06579a;
  color:#fff;
}
:root[data-theme="light"] .hero-cinematic .hero-secondary{
  border-color:rgba(16,45,58,.58);
  background:rgba(255,255,255,.56);
  color:#102d3a;
}
:root[data-theme="light"] .hero-cinematic .hero-secondary:hover{
  background:rgba(255,255,255,.9);
}
:root[data-theme="light"] .hero-cinematic .badges li{
  border-color:rgba(16,45,58,.3);
  background:rgba(255,255,255,.42);
  color:#102d3a;
}
:root[data-theme="light"] .hero-scroll{color:rgba(16,45,58,.82)}
@media (max-width:860px){
  :root[data-theme="light"] .hero-shade{
    -webkit-mask-image:none;
    mask-image:none;
    background:
      linear-gradient(0deg,rgba(239,246,247,.8) 0%,rgba(239,246,247,.6) 28%,rgba(239,246,247,.22) 58%,rgba(239,246,247,0) 100%);
  }
  @media (max-width:560px){
    :root[data-theme="light"] .hero-content{padding-bottom:72px}
    :root[data-theme="light"] .hero-copy h1{font-size:clamp(1.95rem,7.6vw,2.65rem);max-width:18ch}
  }
}
@media (prefers-reduced-motion:reduce){
  :root[data-theme="light"] .hero-media #heroStage img{filter:none}
}
/* Mobile light hero ends in a pale wash (text sits at the bottom), so its seam colour with hero follow is pale too. */
@media (max-width:860px){
  :root[data-theme="light"]{--seam-hero:rgb(150,176,200)}
}


/* Interior reference gallery: consistent 16:9 frame, seven slides per style. */
.room-gallery{background:var(--stage);align-self:start}
.room-gallery #roomStage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0a2338}
.room-gallery-image{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;max-width:none}
.room-gallery-image.image-unavailable{object-fit:contain;background:#0a2338}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px 4px}
.gallery-arrow{display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--fg);font-size:1.2rem;cursor:pointer}
.gallery-arrow:hover{background:var(--fg);color:var(--bg)}
.gallery-counter{font:500 .75rem var(--font-mono);letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}
.gallery-caption{padding:7px 14px 10px;font:500 1rem var(--font-display);color:var(--fg)}
.room-gallery figcaption{border-top:1px solid var(--line);margin-top:2px}
@media(max-width:860px){
  .room-gallery{position:relative;top:auto;z-index:1}
  .room-gallery #roomStage,.room-gallery-image{aspect-ratio:16/9;max-height:none}
  .room-gallery figcaption{display:none}
  .gallery-controls{padding-top:10px}
}


/* Keep the interior preview directly above the style palettes and sticky while choosing. */
#s3 .split.stage-first{grid-template-columns:minmax(0,1fr);align-items:start}
#s3 .copy{width:100%}
#s3 .room-gallery{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);z-index:12;width:100%;margin:24px 0 28px}
#s3 .room-gallery #roomStage{aspect-ratio:16/9}
#s3 .room-gallery-image{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
@media(max-width:860px){
  #s3 .room-gallery{top:calc(env(safe-area-inset-top,0px) + 104px);margin:18px 0 20px}
}


/* Gallery controls float over the photo, keeping the sticky preview compact. */
#s3 .room-gallery{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);z-index:12;width:100%;margin:22px 0 24px;overflow:hidden;isolation:isolate}
#s3 .room-gallery #roomStage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0a2338}
#s3 .room-gallery-image{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;max-width:none}
#s3 .gallery-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,2vw,18px);pointer-events:none;background:linear-gradient(180deg,rgba(2,22,38,.62),transparent 27%,transparent 55%,rgba(2,22,38,.48))}
#s3 .gallery-overlay-top,#s3 .gallery-overlay-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
#s3 .gallery-caption{padding:0;color:#fff;font:500 clamp(1rem,1.8vw,1.35rem) var(--font-display);text-shadow:0 1px 8px rgba(0,0,0,.6)}
#s3 .gallery-counter{color:#fff;font:500 .75rem var(--font-mono);letter-spacing:.12em;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.6)}
#s3 .gallery-overlay-bottom{justify-content:space-between}
#s3 .gallery-arrow{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(4,27,45,.48);backdrop-filter:blur(8px);color:#fff;font-size:1.25rem;cursor:pointer}
#s3 .gallery-arrow:hover{background:rgba(255,255,255,.92);color:#102a35}
#s3 .gallery-hint{font:500 .62rem var(--font-mono);letter-spacing:.18em;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.6)}
#s3 .room-gallery figcaption{display:none}
@media(max-width:860px){
  #s3 .room-gallery{top:calc(env(safe-area-inset-top,0px) + 104px);margin:14px 0 18px}
  #s3 .gallery-overlay{padding:10px;background:linear-gradient(180deg,rgba(2,22,38,.62),transparent 32%,transparent 52%,rgba(2,22,38,.5))}
  #s3 .gallery-arrow{width:36px;height:36px;flex-basis:36px}
  #s3 .gallery-hint{font-size:.55rem}
}


/* Interior gallery: right-side sticky preview on desktop, released at the end of the interior configurator. */
@media (min-width:861px){
  #s3 .split.stage-first{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:clamp(28px,5vw,64px)}
  #s3 .copy{grid-column:1;grid-row:1;min-width:0}
  #s3 .room-gallery{grid-column:2;grid-row:1;align-self:start;position:sticky;top:calc(env(safe-area-inset-top,0px) + 110px);margin:0;z-index:12}
}
@media (max-width:860px){
  #s3 .split.stage-first{grid-template-columns:minmax(0,1fr);display:grid;align-items:start}
  #s3 .room-gallery{grid-row:1;position:sticky;top:calc(env(safe-area-inset-top,0px) + 104px);margin:14px 0 18px;z-index:12}
  #s3 .copy{grid-row:2}
}


/* Interior gallery placement: right side on desktop, immediately above the first palette on mobile. */
@media (min-width:861px){
  #s3 .copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,64px);align-items:start}
  #s3 .copy>*{grid-column:1;min-width:0}
  #s3 .copy>.room-gallery{grid-column:2;grid-row:1 / span 30;position:sticky;top:calc(env(safe-area-inset-top,0px) + 110px);align-self:start;margin:0;z-index:12}
}
@media (max-width:860px){
  #s3 .copy{display:flex;flex-direction:column}
  #s3 .copy>.room-gallery{order:3;position:sticky;top:calc(env(safe-area-inset-top,0px) + 104px);width:100%;margin:18px 0 16px;z-index:12}
  #s3 .copy>#styleList{order:4}
  #s3 .copy>.ctl{order:5}
  #s3 .copy>.actions{order:6}
}


/* Put the localized room name between the navigation arrows; keep the slide count top-right. */
#s3 .gallery-overlay-top .gallery-caption{display:none}
#s3 .gallery-overlay-bottom{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;justify-content:initial}
#s3 .gallery-caption-bottom{text-align:center;min-width:0;padding:0;font:500 clamp(1rem,1.8vw,1.35rem) var(--font-display);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);overflow-wrap:anywhere}
@media(max-width:860px){
  #s3 .gallery-overlay-bottom{grid-template-columns:36px minmax(0,1fr) 36px}
}


/* Fix desktop interior layout: let copy contents and the gallery share the section's two columns. */
@media (min-width:861px){
  #s3 .split.stage-first{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:clamp(28px,5vw,64px)}
  #s3 .copy{display:contents}
  #s3 .copy>*:not(.room-gallery){grid-column:1;min-width:0}
  #s3 .copy>.room-gallery{grid-column:2;grid-row:1;position:sticky;top:calc(env(safe-area-inset-top,0px) + 110px);align-self:start;margin:0;width:100%;z-index:12}
}
@media (max-width:860px){
  #s3 .split.stage-first{display:grid;grid-template-columns:minmax(0,1fr)}
  #s3 .copy{display:flex}
  #s3 .copy>.room-gallery{position:sticky;top:calc(env(safe-area-inset-top,0px) + 104px);order:3}
}

/* Desktop interior: align the gallery directly beside the palette cards, not sticky across the section. */
@media (min-width:861px){
  #s3 .split.stage-first{display:block}
  #s3 .copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,64px);align-items:start}
  #s3 .copy>.eyebrow,
  #s3 .copy>h2,
  #s3 .copy>.lede{grid-column:1 / -1}
  #s3 .copy>#styleList{grid-column:1;grid-row:4;margin-top:26px}
  #s3 .copy>.room-gallery{grid-column:2;grid-row:4;position:relative;top:auto;align-self:start;width:100%;margin:26px 0 0;z-index:1}
  #s3 .copy>.ctl{grid-column:1;grid-row:5}
  #s3 .copy>.actions{grid-column:1;grid-row:6}
}
@media (max-width:860px){
  #s3 .split.stage-first{display:grid;grid-template-columns:minmax(0,1fr)}
  #s3 .copy{display:flex;flex-direction:column}
  #s3 .copy>.room-gallery{position:sticky;top:calc(env(safe-area-inset-top,0px) + 104px);width:100%;margin:18px 0 16px;order:3;z-index:12}
  #s3 .copy>#styleList{order:4}
  #s3 .copy>.ctl{order:5}
  #s3 .copy>.actions{order:6}
}

/* Mobile gallery should stop sticking after the three palette cards, before the options selector. */
@media (min-width:861px){
  #s3 .room-gallery-group{display:contents}
}
@media (max-width:860px){
  #s3 .room-gallery-group{display:flex;flex-direction:column;gap:0;order:3;min-width:0;position:relative}
  #s3 .room-gallery-group>.room-gallery{position:sticky;top:calc(env(safe-area-inset-top,0px) + 104px);width:100%;margin:18px 0 16px;z-index:12}
  #s3 .room-gallery-group>#styleList{order:initial;margin-top:0}
  #s3 .copy>.room-gallery{order:initial}
  #s3 .copy>#styleList{order:initial}
  #s3 .copy>.ctl{order:4}
  #s3 .copy>.actions{order:5}
}

/* Desktop-only override: preserve the previously working PC layout after grouping gallery and palettes for mobile. */
@media (min-width:861px){
  #s3 .split.stage-first{display:block}
  #s3 .copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,64px);align-items:start}
  #s3 .copy>.eyebrow,
  #s3 .copy>h2,
  #s3 .copy>.lede{grid-column:1 / -1}
  #s3 .room-gallery-group{display:contents}
  #s3 .room-gallery-group>#styleList{grid-column:1;grid-row:4;margin-top:26px}
  #s3 .room-gallery-group>.room-gallery{grid-column:2;grid-row:4;position:relative;top:auto;align-self:start;width:100%;margin:26px 0 0;z-index:1}
  #s3 .copy>.ctl{grid-column:1;grid-row:5}
  #s3 .copy>.actions{grid-column:1;grid-row:6}
}

/* Design the hull: one intentional layout system for desktop and mobile. */
#s2 .ship-preview-image{opacity:0;transition:opacity .28s ease}
#s2 .ship-preview-image.is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){#s2 .ship-preview-image{transition:none}}
#s2 .split.stage-first{display:block}
#s2 .copy{min-width:0}
#s2 .design-sticky-group{min-width:0}
#s2 .stage{
  border:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  border-radius:8px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--stage) 92%,#042036),var(--stage));
  box-shadow:0 24px 70px rgba(0,0,0,.12);
}
#s2 .stage figcaption{padding:10px 14px 12px}
#s2 .copy>.eyebrow{margin-bottom:10px}
#s2 .copy>h2{max-width:14ch;line-height:1.04;letter-spacing:-.025em}
#s2 .copy>.lede{max-width:48ch;margin-top:16px;line-height:1.6}
#s2 .design-sticky-group>.ctl{min-width:0;margin-top:20px}
#s2 .lab{margin-bottom:8px;letter-spacing:.12em}
#s2 .chips{gap:7px}
#s2 .chip{
  min-height:40px;
  padding:.55em .9em;
  border-radius:5px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
/* Give unselected configurator chips a stronger outline in both themes,
   preserving each theme's existing border color. */
html[data-theme="dark"] #s2 .chip:not([aria-pressed="true"]),
html[data-theme="light"] #s2 .chip:not([aria-pressed="true"]){
  border-width:2px;
}
#s2 .chip:hover{border-color:var(--accent);transform:translateY(-1px)}
#s2 .chip[aria-pressed="true"]{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
  box-shadow:0 3px 12px rgba(0,0,0,.12);
}
#s2 .copy>.spec{
  font-size:.88rem;
  line-height:1.65;
  letter-spacing:-.02em;
  padding-top:18px;
  border-top:1px solid var(--line);
}
#s2 .copy>.price{font-size:1rem;line-height:1.5;margin-top:8px}
#s2 .copy>.actions{margin-top:18px}
#s2 .copy>.actions .btn{min-height:48px;justify-content:center}
#s2 .copy>details.more{margin-top:14px}
#s2 details.more summary{transition:color .2s ease,border-color .2s ease}
#s2 details.more summary:hover{border-color:var(--accent);color:var(--accent)}

/* Light theme only: dark-blue outlines improve contrast without changing fills or text colors. */
html[data-theme="light"] #s2 .chip:not([aria-pressed="true"]),
html[data-theme="light"] #s2 details.more summary.btn{
  border-color:#234e63;
  border-width:2px;
}
#s2 details.more ol{max-width:48ch}
#s2 details.more li{line-height:1.55}

/* Desktop: clear editorial split, controls left and ship preview right. */
@media (min-width:861px){
  #s2 .split.stage-first{display:block}
  #s2 .copy{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);
    column-gap:clamp(32px,4vw,64px);
    row-gap:0;
    align-items:start;
  }
  #s2 .copy>.eyebrow{grid-column:1;grid-row:1}
  #s2 .copy>h2{grid-column:1;grid-row:2}
  #s2 .copy>.lede{grid-column:1;grid-row:3}
  #s2 .design-sticky-group{display:contents}
  #s2 .design-sticky-group>.stage{
    grid-column:2;
    grid-row:1 / span 20;
    position:sticky;
    top:calc(env(safe-area-inset-top,0px) + 84px);
    align-self:start;
    width:100%;
    margin:0;
  }
  #s2 .design-sticky-group>.ctl{grid-column:1}
  #s2 .design-sticky-group>.ctl:nth-of-type(1){grid-row:4}
  #s2 .design-sticky-group>.ctl:nth-of-type(2){grid-row:5}
  #s2 .design-sticky-group>.ctl:nth-of-type(3){grid-row:6}
  #s2 .design-sticky-group>.ctl:nth-of-type(4){grid-row:7}
  #s2 .design-sticky-group>.ctl:nth-of-type(5){grid-row:8}
  #s2 .copy>.spec{grid-column:1;grid-row:9;margin-top:24px}
  #s2 .copy>.price{grid-column:1;grid-row:10}
  #s2 .copy>.actions{grid-column:1;grid-row:11}
  #s2 .copy>details.more{grid-column:1;grid-row:12}
}

/* Mobile: keep the ship preview sticky while the controls scroll; its parent ends before the spec line. */
@media (max-width:860px){
  #s2.chap{padding-block:clamp(32px,7vw,56px)}
  #s2 .split.stage-first{display:flex;flex-direction:column;align-items:stretch}
  #s2 .copy{display:contents}
  #s2 .copy>.eyebrow{order:1;margin-bottom:6px}
  #s2 .copy>h2{order:2;max-width:16ch;font-size:clamp(2rem,8vw,2.7rem)}
  #s2 .copy>.lede{order:3;margin-top:8px;line-height:1.5}
  #s2 .design-sticky-group{
    display:flex;
    flex-direction:column;
    order:4;
    position:relative;
    min-width:0;
    isolation:isolate;
  }
  #s2 .design-sticky-group>.stage{
    position:sticky;
    top:calc(env(safe-area-inset-top,0px) + 78px);
    z-index:5;
    align-self:stretch;
    width:100%;
    margin:12px 0 4px;
    overflow:hidden;
    background:var(--stage);
    box-shadow:0 10px 28px rgba(0,0,0,.12);
  }
  #s2 .design-sticky-group>.stage #shipStage{height:auto;min-height:0;overflow:hidden}
  #s2 .design-sticky-group>.stage #shipStage svg,
  #s2 .design-sticky-group>.stage #shipStage img{display:block;width:100%;height:auto;transform:none}
  #s2 .design-sticky-group>.stage figcaption{display:none}
  #s2 .design-sticky-group>.ctl{margin-top:16px;position:relative;z-index:1}
  #s2 .lab{margin-bottom:6px}
  #s2 .chips{gap:6px}
  #s2 .chip{min-height:38px;padding:.48em .78em;font-size:.88rem}
  #s2 .copy>.spec{order:5;margin-top:20px;padding-top:14px;line-height:1.5}
  #s2 .copy>.price{order:6;margin-top:5px}
  #s2 .copy>details.more{order:7;margin-top:16px}
  #s2 .copy>.actions{order:8;margin-top:16px}
  #s2 .copy>.actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  #s2 .chip,#s2 details.more summary{transition:none}
  #s2 .chip:hover{transform:none}
}
/* Keep the read-more link inline with the short copy; reveal the continuation in the same paragraph flow. */
.yard-copy{display:block}
.yard-more{display:inline;margin:0}
.yard-more summary{display:inline;list-style:none;cursor:pointer;font:500 .76rem var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.yard-more summary::-webkit-details-marker{display:none}
.yard-more .yard-continuation{color:inherit;font:inherit}
.deep .yard-more summary{color:var(--gold)}
.yard-more[open] summary{margin-right:.25em}

/* Yard copy: expandable link is mobile-only; desktop shows the complete paragraph without a control. */
@media (min-width:861px){
  #s4 .yard-more{display:inline}
  #s4 .yard-more summary{display:none}
  #s4 .yard-more .yard-continuation{display:inline}
}
@media (max-width:860px){
  #s4 .yard-more:not([open]) .yard-continuation{display:none}
  #s4 .yard-more[open] summary{display:none}
  #s4 .yard-more[open] .yard-continuation{display:inline}
}

/* Mobile yard section: keep the visit line one text-line below the expanded monitoring paragraph. */
@media (max-width:860px){
  #s4 .visit{margin-top:1em;gap:12px}
  #s4 .visit>p{margin:0}
}

/* On mobile, reveal the yard visit sentence only when the monitoring copy is expanded. */
@media (max-width:860px){
  #s4 .visit>p{display:none}
  #s4 .watch.expanded-copy~.visit>p{display:block}
}


/* Mobile: hide the yard visit sentence; keep the visit button visible. */
@media (max-width:860px){
  #s4 .visit>p{display:none!important}
}

/* S2 background artwork: responsive asset with a soft fade behind the controls. */
/* Seam with hero-follow: #2 opens on the same flat water blue hero-follow fades to, then fades into its artwork. The fade is on the section too, so it still shows where the artwork is masked away on the left. */
#s2{
  position:relative;
  isolation:isolate;
  background-color:var(--bg-alt);
  background-image:linear-gradient(180deg,var(--seam-water) 0%,color-mix(in srgb,var(--seam-water) 55%,transparent) 40%,transparent 100%);
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% clamp(100px,12vw,170px);
}
#s2::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(180deg,var(--seam-water) 0%,color-mix(in srgb,var(--seam-water) 55%,transparent) 40%,transparent 100%),
    linear-gradient(180deg,rgba(2,21,38,.72) 0%,rgba(2,21,38,.42) 32%,rgba(2,21,38,.12) 68%,transparent 100%),
    url("../assets/images/backgrounds/nautical-desktop.webp");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:top center,top center,right center;
  background-size:100% clamp(100px,12vw,170px),100% clamp(150px,22vw,260px),auto 100%;
  opacity:.9;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 24%,rgba(0,0,0,.48) 48%,#000 72%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 24%,rgba(0,0,0,.48) 48%,#000 72%);
}
#s2>.wrap{
  position:relative;
  z-index:1;
}
@media(max-width:860px){
  #s2::before{
    background-image:
      linear-gradient(180deg,var(--seam-water) 0%,color-mix(in srgb,var(--seam-water) 55%,transparent) 40%,transparent 100%),
      linear-gradient(180deg,rgba(2,21,38,.72) 0%,rgba(2,21,38,.42) 32%,rgba(2,21,38,.12) 68%,transparent 100%),
      url("../assets/images/backgrounds/nautical-mobile.webp");
    background-position:top center,top center,center center;
    background-size:100% clamp(100px,12vw,170px),100% clamp(150px,22vw,260px),cover;
    opacity:.72;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.06) 22%,rgba(0,0,0,.42) 58%,#000 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.06) 22%,rgba(0,0,0,.42) 58%,#000 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  #s2::before{scroll-behavior:auto}
}


/* S2 desktop editorial note: a restrained luxury detail in the negative space. */
#s2 .s2-editorial-note{display:none}
@media(min-width:1200px){
  #s2 .s2-editorial-note{
    display:block;
    position:absolute;
    z-index:1;
    top:29%;
    left:max(36px,calc((100vw - 1120px)/2 - 300px));
    width:clamp(190px,14vw,245px);
    padding:4px 0 0 19px;
    border-left:1px solid rgba(239,207,134,.62);
    color:var(--fg);
    pointer-events:none;
  }
  #s2 .s2-editorial-kicker{
    display:block;
    color:var(--gold);
    font:500 .62rem var(--font-mono);
    letter-spacing:.17em;
    line-height:1.7;
    text-transform:uppercase;
  }
  #s2 .s2-editorial-rule{
    display:block;
    width:34px;
    height:1px;
    margin:19px 0 17px;
    background:linear-gradient(90deg,var(--gold),transparent);
  }
  #s2 .s2-editorial-note h3{
    max-width:9ch;
    color:var(--fg);
    font:500 clamp(1.45rem,1.9vw,2rem)/1.12 var(--font-display);
    letter-spacing:-.025em;
    text-wrap:balance;
  }
  #s2 .s2-editorial-note p{
    max-width:26ch;
    margin-top:15px;
    color:color-mix(in srgb,var(--muted) 86%,transparent);
    font-size:.82rem;
    line-height:1.8;
  }
  #s2 .s2-editorial-index{
    display:block;
    margin-top:30px;
    color:rgba(239,207,134,.65);
    font:500 .62rem var(--font-mono);
    letter-spacing:.16em;
  }
}


/* Hero Follow: let the four heritage pillars breathe across the desktop canvas. */
@media(min-width:1200px){
  #s1-reasons>.wrap{
    width:100%;
    max-width:1540px;
    padding-inline:clamp(56px,6.5vw,124px);
  }
  #s1-reasons .reasons{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(28px,2.8vw,54px);
  }
}



/* S3 interior: natural shoreline photography, with a restrained fade for legible content. */
#s3{
  position:relative;
  isolation:isolate;
  background-color:var(--bg);
}
#s3::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("../assets/images/backgrounds/shoreline-desktop.webp");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  opacity:.6;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 82%,transparent 100%);
}
#s3>.wrap{
  position:relative;
  z-index:1;
}
/* Dark theme: a soft scrim keeps the copy readable now that the photo is brighter. It is strongest behind the text column (left) and lets the sea show on the right. */
:root:not([data-theme="light"]) #s3::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(6,44,74,.72) 0%,rgba(6,44,74,.5) 38%,rgba(6,44,74,.12) 70%,rgba(6,44,74,0) 100%);
}
@media(max-width:860px){
  :root:not([data-theme="light"]) #s3::after{background:linear-gradient(180deg,rgba(6,44,74,.38) 0%,rgba(6,44,74,.5) 100%)}
}
@media(max-width:860px){
  #s3{
    padding-bottom:clamp(64px,12vw,80px);
    background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 82%,var(--deep) 100%);
  }
  #s3::before{
    background-image:url("../assets/images/backgrounds/shoreline-mobile.webp");
    background-position:center center;
    background-size:cover;
    opacity:.5;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);
  }
}
html[data-theme="light"] #s3::before{
  opacity:.13;
}
@media(max-width:860px){
  html[data-theme="light"] #s3::before{opacity:.11}
}


/* Light theme: reuse the same shoreline assets, but restore enough contrast to make the sea visible. */
html[data-theme="light"] #s3::before{
  opacity:.34;
  filter:brightness(.72) saturate(1.18) contrast(1.08);
}
@media(max-width:860px){
  html[data-theme="light"] #s3::before{
    opacity:.27;
    filter:brightness(.72) saturate(1.18) contrast(1.08);
  }
}


/* Interior selectors: stronger outlines so palettes and selected options remain clear over photography. */
#s3 .scard{
  border:2px solid color-mix(in srgb,var(--fg) 38%,var(--accent));
}
#s3 .scard:hover{
  border-color:var(--accent);
}
#s3 .scard[aria-pressed="true"]{
  border:2px solid var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent),0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent);
}
#s3 #chOpts .chip{
  border:2px solid color-mix(in srgb,var(--fg) 34%,var(--accent));
  background:color-mix(in srgb,var(--bg) 62%,transparent);
}
#s3 #chOpts .chip:hover{
  border-color:var(--accent);
}
#s3 #chOpts .chip[aria-pressed="true"]{
  border:2px solid var(--accent);
  background:var(--accent);
  color:var(--accent-ink);
}
html[data-theme="light"] #s3 .scard,
html[data-theme="light"] #s3 #chOpts .chip{
  border-color:color-mix(in srgb,var(--fg) 42%,var(--accent));
}
html[data-theme="light"] #s3 .scard[aria-pressed="true"],
html[data-theme="light"] #s3 #chOpts .chip[aria-pressed="true"]{
  border-color:var(--accent);
}


/* Keep the original border color; increase border weight only for Interior selectors. */
#s3 .scard{
  border:2px solid var(--line);
}
#s3 .scard:hover{
  border-color:var(--line);
}
#s3 .scard[aria-pressed="true"]{
  border:2px solid var(--fg);
  box-shadow:inset 0 0 0 1px var(--fg);
}
#s3 #chOpts .chip{
  border:2px solid var(--line);
}
#s3 #chOpts .chip:hover{
  border-color:var(--line);
}
#s3 #chOpts .chip[aria-pressed="true"]{
  border:2px solid var(--fg);
  background:var(--fg);
  color:var(--bg);
}
html[data-theme="light"] #s3 .scard,
html[data-theme="light"] #s3 #chOpts .chip{
  border-color:var(--line);
}
html[data-theme="light"] #s3 .scard[aria-pressed="true"],
html[data-theme="light"] #s3 #chOpts .chip[aria-pressed="true"]{
  border-color:var(--fg);
}

/* Light theme only: dark-blue outlines for unselected Interior palettes and options. */
html[data-theme="light"] #s3 .scard:not([aria-pressed="true"]),
html[data-theme="light"] #s3 #chOpts .chip:not([aria-pressed="true"]){
  border-color:#234e63;
}

/* Light theme: selected Interior palette gets a stronger, darker-blue outline. */
html[data-theme="light"] #s3 .scard[aria-pressed="true"]{
  border-color:#06579a;
  box-shadow:inset 0 0 0 1px #06579a,0 0 0 1px rgba(8,104,176,.22);
}


/* Top gradient is layered with the nautical artwork in the original #s2::before rule above. */
#s2::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:clamp(120px,18vw,240px);
  z-index:0;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,var(--bg) 100%);
}
@media(max-width:860px){
  #s2::after{
    height:clamp(100px,20vh,180px);
  }
}

/* Build light theme: force the BANGUN eyebrow to the requested blue, without affecting other copy. */
html[data-theme="light"] #s4 .split .copy > .eyebrow{color:#054a85 !important}

/* Build light theme: darken all stage text for stronger readability over the blue wash. */
html[data-theme="light"] #s4 .stages li::before{color:#06579a}
html[data-theme="light"] #s4 .stages h3{color:#102d3a}
html[data-theme="light"] #s4 .stages p{color:#294956}


/* Fixed owner-share callout below the annual charter revenue estimate. */
#s6 .owner-share{margin-top:0;padding:8px 0;border-top:0}
#s6 .owner-share-label{display:block;color:var(--muted);font:500 .68rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
#s6 .out div.owner-share .owner-share-value{color:#efcf86;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1}
#s6 .owner-share-note{margin-top:7px;font-size:.68rem;line-height:1.45}

/* Charter calculator: remove the second divider and align labels, values and note. */
#s6 .out div.owner-share{border-bottom:0}
#s6 .owner-share-note{text-align:right}
#s6 .gross-label-mobile{display:none}
@media(max-width:600px){
  #s6 .out div.big{flex-wrap:nowrap;align-items:center;gap:12px}
  #s6 .out div.big>span{flex:0 0 11ch;max-width:11ch;line-height:1.25}
  #s6 .out div.big>b{margin-left:auto;text-align:right;white-space:nowrap}
  #s6 .gross-label-desktop{display:none}
  #s6 .gross-label-mobile{display:inline;white-space:pre-line}
  #s6 .owner-share-label{max-width:11ch}
}

/* Keep the owner-share disclaimer compact, in two right-aligned lines. */
#s6 .owner-share-note{width:42ch;max-width:100%;margin-left:auto;text-align:right;text-wrap:balance}


/* Keep optional onboard features hidden while preserving the controls required by the configurator script. */
#s2 .optional-features{display:none!important}

/* Match the Interior consultation button width to the Design button on mobile. */
@media (max-width:860px){
  #s3 .copy>.actions .btn{width:100%;justify-content:center;min-height:48px}
}


/* Proof circles: animated SVG progress ring, no image assets required. */
#s1-reasons{padding-block:clamp(22px,3vw,38px)}
#s1-reasons .reasons-heading{text-align:center;margin:0 auto clamp(18px,2.5vw,30px)}
#s1-reasons .reasons-heading .eyebrow{color:var(--gold);margin:0 0 8px;font:600 clamp(1.05rem,2vw,1.45rem) var(--font-display);letter-spacing:.16em}
#s1-reasons .reasons-heading h2{margin:0;font:500 clamp(.85rem,1.4vw,1.05rem) var(--font-mono);letter-spacing:.14em}
#s1-reasons .reasons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2.4vw,34px);margin:0;padding:0;list-style:none}
#s1-reasons .reasons>li{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;border:0;padding:0;opacity:1;transform:none}
#s1-reasons .reasons>li::before{display:none}
#s1-reasons .proof-ring{position:relative;isolation:isolate;display:grid;place-items:center;width:clamp(92px,8.5vw,116px);aspect-ratio:1;border-radius:50%;padding:0;background:transparent}
#s1-reasons .proof-ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
#s1-reasons .proof-ring-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
#s1-reasons .proof-ring::after{content:"";position:absolute;inset:15%;border-radius:50%;border:1px solid var(--ring-track);pointer-events:none}
#s1-reasons .proof-ring-svg circle{fill:none;stroke-width:6.5}
#s1-reasons .proof-ring-track{stroke:var(--ring-track)}
#s1-reasons .proof-ring-progress{stroke:url(#proof-ring-gradient);stroke-linecap:butt;stroke-dasharray:277 277;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(78,184,229,.45))}
#s1-reasons .proof-value{position:relative;z-index:1;white-space:pre-line;color:var(--fg);font:500 clamp(1.15rem,2.1vw,1.8rem)/1.05 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.035em;text-shadow:0 0 16px rgba(110,196,238,.16)}
#s1-reasons .reasons>li h3{max-width:16ch;margin:14px 0 0;color:var(--muted);font:500 clamp(.8rem,1.15vw,1rem)/1.25 var(--font-display);letter-spacing:-.005em;text-wrap:balance;text-shadow:0 1px 8px rgba(3,28,48,.85),0 0 14px rgba(110,196,238,.1)}
#s1-reasons.proof-rings-filled .reasons>li .proof-ring-progress{animation:proof-ring-fill 1.7s cubic-bezier(.2,.72,.2,1) both}
#s1-reasons.reasons-reveal .reasons>li{opacity:1;transform:none;transition:none}
#s1-reasons.reasons-reveal .reasons>li.is-visible h3{animation:proof-label-in .5s ease both}
#s1-reasons.reasons-reveal .reasons>li:nth-child(2).is-visible h3{animation-delay:.08s}
#s1-reasons.reasons-reveal .reasons>li:nth-child(3).is-visible h3{animation-delay:.16s}
#s1-reasons.reasons-reveal .reasons>li:nth-child(4).is-visible h3{animation-delay:.24s}
#s1-reasons.reasons-reveal .reasons>li:nth-child(5).is-visible h3{animation-delay:.32s}
@keyframes proof-label-in{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes proof-ring-fill{from{stroke-dasharray:277 277;stroke-dashoffset:277}to{stroke-dasharray:277 277;stroke-dashoffset:0}}
@media(max-width:860px){
  #s1-reasons>.wrap{width:100%;max-width:none;padding-inline:0}
  #s1-reasons{padding-block:22px}
  #s1-reasons .reasons-heading{padding-inline:clamp(16px,4vw,40px);margin-bottom:16px}
  #s1-reasons .reasons{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:none;scroll-behavior:auto;overscroll-behavior-inline:contain;margin:0;padding:0 clamp(16px,4vw,40px) 10px;scrollbar-width:none}
  #s1-reasons .reasons::-webkit-scrollbar{display:none}
  #s1-reasons .reasons>li{flex:0 0 43%;scroll-snap-align:start}
  #s1-reasons .proof-ring{width:clamp(82px,22vw,100px)}
  #s1-reasons .reasons>li h3{font-size:clamp(.82rem,3.5vw,.98rem);max-width:15ch;margin-top:10px}
}
@media(max-width:380px){
  #s1-reasons .reasons>li{flex-basis:48%}
  #s1-reasons .proof-ring{width:clamp(76px,23vw,90px)}
}
@media(prefers-reduced-motion:reduce){
  #s1-reasons .proof-ring-progress{animation:none!important;stroke-dasharray:277 277!important;stroke-dashoffset:0!important}
  #s1-reasons.reasons-reveal .reasons>li.is-visible h3{animation:none!important}
}

/* Blue palette: lift the lower chapters (izin, mulai) with a soft vertical gradient. */
/* Izin: one wide photo (documents left, yard right) under a blue veil. On phones the crop follows the active tab. */
#s5{position:relative;isolation:isolate;overflow:hidden}
#s5>.wrap{position:relative;z-index:1}
#s5::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(180deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 55%,transparent) 16%,transparent 34%,transparent 70%,color-mix(in srgb,var(--s56) 70%,transparent) 90%,var(--s56) 100%),
    linear-gradient(180deg,rgba(5,37,64,.74) 0%,rgba(5,37,64,.82) 100%),
    url("../assets/images/backgrounds/izin-background.webp");
  background-size:100% 100%,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
  transition:background-position .5s ease;
}
html[data-theme="light"] #s5::before{
  background-image:
    linear-gradient(180deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 55%,transparent) 16%,transparent 34%,transparent 70%,color-mix(in srgb,var(--s56) 70%,transparent) 90%,var(--s56) 100%),
    linear-gradient(180deg,rgba(236,246,250,.86) 0%,rgba(236,246,250,.90) 100%),
    url("../assets/images/backgrounds/izin-background.webp");
}
@media(max-width:760px){
  #s5::before{background-position:center,center,left center}
  #s5:has(.twocol[data-tab="m"])::before{background-position:center,center,right center}
}
/* Mulai: aerial pinisi photo. One file for desktop, mobile, dark and light.
   Layers (top to bottom): fade into footer, fade from simulasi, left scrim for the copy, theme veil, photo. */
#s7{
  --s7-top:var(--deep);
  --s7-veil:rgba(5,37,64,.26);
  --s7-scrim:rgba(5,37,64,.66);
  background:var(--deep);
  position:relative;isolation:isolate;overflow:hidden;
}
html[data-theme="dark"] #s7{--s7-top:#073050}
html[data-theme="light"] #s7{--s7-veil:rgba(214,236,248,.40);--s7-scrim:rgba(226,242,251,.74)}
#s7>.wrap{position:relative;z-index:1}
#s7::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(180deg,transparent 0%,transparent 72%,color-mix(in srgb,var(--deep) 60%,transparent) 88%,var(--deep) 100%),
    linear-gradient(180deg,var(--s7-top) 0%,color-mix(in srgb,var(--s7-top) 70%,transparent) 8%,color-mix(in srgb,var(--s7-top) 25%,transparent) 20%,transparent 34%),
    linear-gradient(90deg,var(--s7-scrim) 0%,color-mix(in srgb,var(--s7-scrim) 55%,transparent) 36%,transparent 58%),
    linear-gradient(180deg,var(--s7-veil) 0%,var(--s7-veil) 100%),
    url("../assets/images/backgrounds/mulai-background.webp");
  /* Zoomed so the ship sits at the right edge, just past the form, and the islands behind the copy. */
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,134% auto;
  background-position:0 0,0 0,0 0,0 0,5% 32%;
  background-repeat:no-repeat;
}
@media(max-width:860px){
  /* Stacked: the photo only spans the copy (section top down to just above the form), ship top right,
     islands left. Below that it is plain gradient. */
  #s7{--s7-veil:rgba(5,37,64,.46)}
  html[data-theme="light"] #s7{--s7-veil:rgba(214,236,248,.66)}
  #s7::before{
    background-image:
      linear-gradient(180deg,transparent 0%,transparent 80%,color-mix(in srgb,var(--deep) 60%,transparent) 93%,var(--deep) 100%),
      linear-gradient(180deg,var(--s7-top) 0%,color-mix(in srgb,var(--s7-top) 70%,transparent) 6%,color-mix(in srgb,var(--s7-top) 25%,transparent) 14%,transparent 24%);
    background-size:100% 100%,100% 100%;background-position:0 0,0 0}
  #s7 .split{--g:clamp(28px,5vw,64px)}
  #s7 .split .copy{grid-area:1/1}
  #s7 .split .form{grid-area:2/1}
  #s7 .split::before{
    content:"";grid-area:1/1;align-self:stretch;justify-self:center;z-index:-1;pointer-events:none;
    width:100vw;margin-top:-30px;margin-bottom:calc(var(--g) * -1);
    background-image:linear-gradient(180deg,var(--s7-veil) 0%,var(--s7-veil) 100%),url("../assets/images/backgrounds/mulai-background.webp");
    background-size:100% 100%,cover;background-position:0 0,52% 40%;background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 84%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 84%,transparent 100%)}
}

/* Simulasi: harbour fleet photo. One file for desktop, mobile, dark and light.
   Layers (top to bottom): fade into mulai, fade from izin, left scrim for the copy, theme veil, photo. */
#s6{
  --s6-next:#073050;
  --s6-veil:rgba(5,37,64,.40);
  --s6-scrim:rgba(5,37,64,.62);
  position:relative;isolation:isolate;overflow:hidden;
}
html[data-theme="light"] #s6{--s6-next:var(--deep);--s6-veil:rgba(214,236,248,.56);--s6-scrim:rgba(226,242,251,.86)}
#s6>.wrap{position:relative;z-index:1}
#s6::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(180deg,transparent 0%,transparent 76%,color-mix(in srgb,var(--s6-next) 60%,transparent) 91%,var(--s6-next) 100%),
    linear-gradient(180deg,var(--s56) 0%,color-mix(in srgb,var(--s56) 70%,transparent) 8%,color-mix(in srgb,var(--s56) 25%,transparent) 20%,transparent 34%),
    linear-gradient(90deg,var(--s6-scrim) 0%,color-mix(in srgb,var(--s6-scrim) 55%,transparent) 38%,transparent 66%),
    linear-gradient(180deg,var(--s6-veil) 0%,var(--s6-veil) 100%),
    url("../assets/images/backgrounds/charter-background.webp");
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,cover;
  background-position:0 0,0 0,0 0,0 0,center 72%;
  background-repeat:no-repeat;
}
#s6 .calc{
  position:relative;
  box-shadow:0 18px 48px -18px rgba(3,30,52,.55),inset 0 1px 0 rgba(239,207,134,.35);
}
html[data-theme="light"] #s6 .calc{box-shadow:0 18px 48px -20px rgba(8,80,130,.30),inset 0 1px 0 rgba(8,104,176,.25)}
@media(max-width:760px){
  /* Mobile: the stacked estimate card would hide the photo, so the photo only spans the copy
     (section top down to just above the card). Below the card it is plain gradient. */
  #s6{--s6-veil:rgba(5,37,64,.54)}
  html[data-theme="light"] #s6{--s6-veil:rgba(214,236,248,.78)}
  #s6::before{
    background-image:
      linear-gradient(180deg,transparent 0%,transparent 80%,color-mix(in srgb,var(--s6-next) 60%,transparent) 93%,var(--s6-next) 100%);
    background-size:100% 100%;background-position:0 0}
  #s6 .split{--g:clamp(28px,5vw,64px)}
  #s6 .split .copy{grid-area:1/1}
  #s6 .split .calc{grid-area:2/1}
  #s6 .split::before{
    content:"";grid-area:1/1;align-self:stretch;justify-self:center;z-index:-1;pointer-events:none;
    width:100vw;margin-top:-52px;margin-bottom:calc(var(--g) * -1);
    background-image:linear-gradient(180deg,var(--s6-veil) 0%,var(--s6-veil) 100%),url("../assets/images/backgrounds/charter-background.webp");
    background-size:100% 100%,cover;background-position:0 0,center 78%;background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 84%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 84%,transparent 100%)}
}
html[data-theme="light"] #s6 .out div.owner-share .owner-share-value{color:var(--accent)}

/* Bangun -> izin: soft gradient seam so the two photos do not meet at a hard edge. */
#s4::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(140px,16vw,240px);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--deep) 45%,transparent) 55%,var(--deep) 100%);
}
#s5::before{
  background-image:
    linear-gradient(180deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 70%,transparent) 10%,color-mix(in srgb,var(--deep) 25%,transparent) 24%,transparent 40%,transparent 70%,color-mix(in srgb,var(--s56) 70%,transparent) 90%,var(--s56) 100%),
    linear-gradient(180deg,rgba(5,37,64,.74) 0%,rgba(5,37,64,.82) 100%),
    url("../assets/images/backgrounds/izin-background.webp");
}
/* Izin, light theme: let the photo show through a lighter blue wash instead of near-white. */
html[data-theme="light"] #s5::before{
  background-image:
    linear-gradient(180deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 70%,transparent) 10%,color-mix(in srgb,var(--deep) 25%,transparent) 24%,transparent 40%,transparent 70%,color-mix(in srgb,var(--s56) 70%,transparent) 90%,var(--s56) 100%),
    linear-gradient(180deg,rgba(214,236,248,.66) 0%,rgba(214,236,248,.74) 100%),
    url("../assets/images/backgrounds/izin-background.webp");
}

/* Izin -> simulasi: izin ends on the same colour simulasi starts with, and its own background is solid,
   so no fractional-pixel hairline of the page colour can show between the two sections. */
#s5{background-color:var(--s56);margin-bottom:-1px;padding-bottom:calc(clamp(56px,9vw,112px) + 1px)}
#s6{background-color:var(--s56)}

/* Footer: brand + tagline + social, quick navigation, address and contact. */

.footer-grid{display:grid;grid-template-columns:1.25fr .8fr 1.5fr;gap:32px clamp(24px,5vw,72px);align-items:start}
.footer-col h3{font:500 .72rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col a{color:var(--on-deep-muted);text-decoration:none;transition:color .2s}
.footer-col a:hover{color:var(--on-deep)}
.footer-col a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.footer-branding{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer-social{display:flex;gap:10px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--deep-line);border-radius:50%;color:var(--on-deep-muted);transition:color .2s,border-color .2s,background .2s}
.footer-social a:hover{color:var(--gold);border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.footer-social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-nav ul{display:grid;grid-template-columns:1fr;gap:9px}
.footer-contact address{font-style:normal;line-height:1.6;margin-bottom:12px}
.footer-contact address strong{color:var(--on-deep);font-weight:600}
.footer-lines{display:grid;gap:6px}
.footer-bottom{margin-top:32px;font-size:.78rem;color:var(--on-deep-muted)}
.footer-bottom>span{display:block;padding-top:18px;border-top:1px solid var(--deep-line);text-align:center}
@media(max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .footer-branding,.footer-contact{grid-column:1 / -1}
  .footer-nav{display:none}
  .footer-branding{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px 16px}
  .footer-branding .footer-logo{grid-column:1;grid-row:1}
  .footer-branding .footer-social{grid-column:2;grid-row:1;justify-self:end}
  .footer-branding }

/* Dark theme, D2+: desain (photo) and charter are one step darker. */
html[data-theme="dark"] #s5,html[data-theme="dark"] #s6{--s56:#073354}
#s5,#s6{--s56:var(--bg-alt)}
html[data-theme="dark"] #s2::before{opacity:.56}
@media(max-width:860px){html[data-theme="dark"] #s2::before{opacity:.46}}

/* Hero readability: the paragraph runs over the ship's busy deck and hull, so the scrim behind the copy is
   stronger, reaches further toward the ship and holds down to the paragraph and badge before fading. */
@media(min-width:861px){
  .hero-shade::before{
    background:linear-gradient(90deg,rgba(3,28,48,.78) 0%,rgba(3,28,48,.68) 30%,rgba(3,28,48,.5) 46%,rgba(3,28,48,.2) 60%,rgba(3,28,48,.03) 78%,rgba(3,28,48,0) 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 98%);
    mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 98%)}
  :root[data-theme="light"] .hero-shade{
    background:linear-gradient(90deg,rgba(239,246,247,.86) 0%,rgba(239,246,247,.76) 30%,rgba(239,246,247,.54) 46%,rgba(239,246,247,.22) 62%,rgba(239,246,247,.04) 78%,rgba(239,246,247,0) 90%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 98%);
    mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 98%)}
  .hero-copy .lede.hero-description{max-width:46ch}
}
.hero-copy .lede.hero-description{color:rgba(244,248,250,.96);text-shadow:0 1px 14px rgba(0,0,0,.5),0 0 2px rgba(0,0,0,.25)}
:root[data-theme="light"] .hero-copy .lede.hero-description{color:#102d3a;text-shadow:0 0 12px rgba(255,255,255,.65)}
@media(max-width:860px){
  .hero-shade{background:radial-gradient(ellipse at 72% 28%,rgba(239,207,134,.18) 0%,rgba(239,207,134,0) 48%),linear-gradient(0deg,rgba(3,28,48,.74) 0%,rgba(3,28,48,.64) 30%,rgba(3,28,48,.5) 46%,rgba(3,28,48,.2) 66%,rgba(3,28,48,.03) 100%),linear-gradient(90deg,rgba(3,28,48,.12),transparent 100%)}
  :root[data-theme="light"] .hero-shade{
    background:linear-gradient(0deg,rgba(239,246,247,.9) 0%,rgba(239,246,247,.84) 30%,rgba(239,246,247,.68) 46%,rgba(239,246,247,.32) 64%,rgba(239,246,247,0) 100%)}
}

/* Light theme: small-text readability pass.
   Text colours are darker (tokens above), small text over photos gets a soft pale halo, and the spots where
   the photo wash was too thin (build middle, mulai form, reasons labels over water) get extra support. */
html[data-theme="light"] :is(#s2,#s3,#s4,#s5,#s6,#s7) :is(.eyebrow,.lede,.rm,.spec,.fromprice,.note,.price,span.d,.points p,.stages p,.chip){text-shadow:0 0 8px rgba(255,255,255,.75),0 0 2px rgba(255,255,255,.6)}
html[data-theme="light"] .rm{color:#04497f}
html[data-theme="light"] #s1-reasons .reasons>li h3{color:#0f2a36;text-shadow:0 0 8px rgba(255,255,255,.35)}
html[data-theme="light"] #s4 .stages p{color:#1f3a47}
html[data-theme="light"] #s4 .stages h3{color:#0f2a36}
@media(min-width:861px){
  /* Build: uniform pale wash so the middle of the photo (stage cards, paragraph) is as calm as the edges. */
  html[data-theme="light"] #s4::before{
    background-image:
      linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 40%,transparent 100%),
      linear-gradient(0deg,rgba(188,222,240,.98) 0%,rgba(188,222,240,.82) 14%,rgba(188,222,240,.12) 40%),
      linear-gradient(90deg,rgba(188,222,240,.94) 0%,rgba(188,222,240,.82) 18%,rgba(188,222,240,.48) 34%,rgba(188,222,240,.12) 48%,transparent 58%),
      linear-gradient(270deg,rgba(188,222,240,.94) 0%,rgba(188,222,240,.82) 18%,rgba(188,222,240,.48) 34%,rgba(188,222,240,.12) 48%,transparent 58%),
      linear-gradient(rgba(214,236,246,.52),rgba(214,236,246,.52)),
      url("../assets/images/build/build-main-desktop.webp");
    background-size:100% clamp(100px,12vw,170px),cover,cover,cover,cover,cover;
    background-position:top center,center top,center top,center top,center top,center top}
  /* Mulai: the form sits over open water, so it gets a light glass panel. */
  html[data-theme="light"] #s7 .form{background:rgba(240,248,250,.76);padding:20px 22px;border-radius:8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
@media(max-width:860px){
  html[data-theme="light"] #s7{--s7-veil:rgba(214,236,246,.78)}
}
html[data-theme="light"] .eyebrow{color:#054a85}
html[data-theme="light"] :is(#s2,#s3,#s5,#s6,#s7) .lede,html[data-theme="light"] #s6 .points p{color:#1b3745}
html[data-theme="light"] #s2 .chip:not([aria-pressed="true"]){background:rgba(240,248,250,.72)}
html[data-theme="light"] #s5 .tabs .chip:not([aria-pressed="true"]){color:#17323f}
html[data-theme="light"] #s7 .form :is(input,textarea),html[data-theme="light"] #s7 .form .brief-edit-button{border-color:rgba(25,61,80,.38)}

/* Izin, mobile light: the tabs and the list sit on a frosted panel so the busy photo (lamp, charts, window)
   no longer runs behind the rows. The photo stays visible above and around the panel. */
@media(max-width:760px){
  html[data-theme="light"] #s5 .tabs{background:rgba(242,249,251,.84);padding:4px 12px 0;border-radius:12px 12px 0 0;border-bottom-color:rgba(25,61,80,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  html[data-theme="light"] #s5 .twocol{background:rgba(242,249,251,.84);padding:4px 16px 18px;margin-top:0;border-radius:0 0 12px 12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  html[data-theme="light"] #s5 .list li{border-top-color:rgba(25,61,80,.14)}
  html[data-theme="light"] #s5 .list li span{color:#17323f}
  html[data-theme="light"] #s5 .note{text-shadow:none}
}

/* Mobile light: eased, longer ramps so hero -> hero follow -> design read as one continuous sky/sea instead of stepped bands. */
@media(max-width:860px){
  :root[data-theme="light"]{--seam-hero:rgb(157,181,203)}
  :root[data-theme="light"] .hero-cinematic::after{
    height:clamp(200px,32%,300px);
    background:linear-gradient(0deg,
      color-mix(in srgb,var(--seam-hero) 94%,transparent) 0%,
      color-mix(in srgb,var(--seam-hero) 82%,transparent) 14%,
      color-mix(in srgb,var(--seam-hero) 58%,transparent) 36%,
      color-mix(in srgb,var(--seam-hero) 30%,transparent) 60%,
      color-mix(in srgb,var(--seam-hero) 10%,transparent) 82%,
      transparent 100%)}
  :root[data-theme="light"] .hero-follow::before{
    background-image:
      linear-gradient(180deg,transparent calc(100% - min(230px,80%)),color-mix(in srgb,var(--seam-water) 12%,transparent) calc(100% - min(190px,66%)),color-mix(in srgb,var(--seam-water) 34%,transparent) calc(100% - min(140px,50%)),color-mix(in srgb,var(--seam-water) 62%,transparent) calc(100% - min(90px,32%)),color-mix(in srgb,var(--seam-water) 86%,transparent) calc(100% - min(40px,14%)),var(--seam-water) 100%),
      linear-gradient(180deg,var(--seam-hero) 0%,color-mix(in srgb,var(--seam-hero) 70%,transparent) 14%,color-mix(in srgb,var(--seam-hero) 40%,transparent) 30%,color-mix(in srgb,var(--seam-hero) 14%,transparent) 46%,transparent 62%),
      linear-gradient(rgba(150,200,232,.66),rgba(150,200,232,.66)),
      url("../assets/images/backgrounds/hero-follow-background.webp")}
  html[data-theme="light"] #s2{
    background-image:linear-gradient(180deg,var(--seam-water) 0%,color-mix(in srgb,var(--seam-water) 82%,transparent) 14%,color-mix(in srgb,var(--seam-water) 56%,transparent) 36%,color-mix(in srgb,var(--seam-water) 28%,transparent) 60%,color-mix(in srgb,var(--seam-water) 9%,transparent) 82%,transparent 100%);
    background-size:100% 260px}
  html[data-theme="light"] #s2::before{
    background-image:
      linear-gradient(180deg,var(--seam-water) 0%,color-mix(in srgb,var(--seam-water) 82%,transparent) 14%,color-mix(in srgb,var(--seam-water) 56%,transparent) 36%,color-mix(in srgb,var(--seam-water) 28%,transparent) 60%,color-mix(in srgb,var(--seam-water) 9%,transparent) 82%,transparent 100%),
      linear-gradient(180deg,rgba(2,21,38,.72) 0%,rgba(2,21,38,.42) 32%,rgba(2,21,38,.12) 68%,transparent 100%),
      url("../assets/images/backgrounds/nautical-mobile.webp");
    background-size:100% 260px,100% clamp(150px,22vw,260px),cover}
}