/* A liquid-metal sculpture and its reflections behind the editorial page. */
.shore-story { background: #182e3a; }
.shore-stage {
  position: fixed;
  inset: 0;
  top: var(--shore-header, 83px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #182e3a;
}
.shore-story main, .shore-story .footer { position: relative; z-index: 1; }
.shore-stage.scene-ready #salt-canvas { opacity: 1; }
.shore-stage.scene-ready .hero-poster { opacity: 0; transition: opacity .9s; }
.shore-story .hero { background: transparent; }
.shore-story .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #112a3b91, #152e4020 52%, transparent 78%);
  mask-image: linear-gradient(#000, #000 48%, transparent 87%);
  pointer-events: none;
}
.hero-poster {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  mask-image: none;
}
.hero h1 {
  text-shadow: 0 2px 30px #101b243d;
}
.hero-content { margin-top: 55px; }
.hero-eyebrow > span:last-child {
  color: #effcfa;
}
.hero-wordmark { color: #e3eff02b; text-shadow: none; }
.hero-bottom { color: #d9e9edba; }
.scene-note {
  top: 55%;
  color: #d5e8e9;
}
.scene-note .note-line {
  background: #d5e8e970;
}
.scene-note .note-line::before {
  background: #d5e8e9;
}

/* Quiet paper and deep blue panels keep the native content legible. */
.shore-story .work {
  color: #253c47;
  background: linear-gradient(180deg, #edf2f1dd, #e8eeedd0 76%, #e4eded85);
}
.shore-story .work::before, .shore-story .services::before { display: none; }
.shore-story :is(.belief, .playground, .process, .contact) > .section-background { display: none; }
.shore-story .belief { background: #142d4045; }
.shore-story .belief::before {
  background: linear-gradient(90deg, #16314724 15%, #152e408f 52%, #102536d6);
}
.shore-story .attitude-orbit { border-color: #dcf4ff38; }
.shore-story .attitude-coordinate { color: #e2f6ffb5; }
.shore-story .services {
  background: linear-gradient(100deg, #102b3dbf, #173c5094 60%, #122b3baa);
}
.shore-story .playground { background: #1431457d; }
.shore-story .playground::after {
  background: linear-gradient(90deg, #102b3dbe, #193e5278 55%, #234b5d38);
}
.shore-story .process { color: #253c47; background: #edf2f1dd; }
.shore-story .process::after { display: none; }
.shore-story .process-grid p { color: #536a72; }
.shore-story .faq { background: #edf3f3e0; color: #253c47; }
.shore-story .contact {
  color: #263e4a;
  background: linear-gradient(180deg, #edf2f2c0, #edf2f27d);
}
.shore-story .contact::after { display: none; }
.shore-story .contact .section-top > span { color: #526d78; }
.shore-story .contact-link { border-bottom-color: #263e4a55; }
.shore-story .footer { background: #edf2f1ef; color: #253c47; }
.shore-story .footer-top p, .shore-story .footer-bottom { color: #526d78; }
.shore-story .footer-bottom, .shore-story .back-top { border-color: #253c4733; }
.shore-story .site-header { --ink: #edf4f2; --paper: #253c47; color: #edf4f2; background: #142d3ce8; border-bottom-color: #edf4f31a; backdrop-filter: blur(18px); }
.shore-story .header-cta { color: #243a48; background: #e8eeed; }
.shore-story .header-caption, .shore-story .gnav a span { color: #d7e6edb8; }
.shore-story .motion-toggle, .shore-story .brand, .shore-story .gnav a { color: #edf4f2; }
.shore-story .mobile-nav { background: #183544f7; }
.shore-story .mobile-nav a { color: #edf4f2; }
.shore-story .hamburger span { background: #edf4f2; }
@media (max-width: 700px) {
  .shore-stage { --shore-header: 69px; }
  .shore-story .hero::before {
    background: linear-gradient(180deg, #10293b73, #10293b32 48%, transparent 76%);
    mask-image: none;
  }
  .hero-content { margin-top: 48px; }
  .scene-note {
    top: auto;
    top: 357px;
    bottom: auto;
    color: #deedef;
  }
  .shore-story .belief::before {
    background: linear-gradient(180deg, #142d402b, #16374a9c 36%, #112d40d4);
  }
  .shore-story .work { background: #edf2efde; }
  .shore-story .services { background: #143145cb; }
  .shore-story .process, .shore-story .faq { background: #edf2f2df; }
}
@media print {
  .shore-stage { display: none; }
  .shore-story :is(.hero, .work, .belief, .services, .playground, .process, .faq, .contact) {
    background: #fff; color: #173b47;
  }
}