/* ============================================================
   ForgeFin Australia — design system
   Palette: abyss navy -> ink black, bioluminescent cyan, warm gold
   ============================================================ */

:root {
  --ink: #020409;
  --abyss: #041022;
  --deep: #06182f;
  --navy: #0a2540;
  --biolum: #46e6ff;
  --biolum-dim: #1fa8c9;
  --gold-300: #e9c97c;
  --gold-500: #c9a24b;
  --gold-600: #a87e2f;
  --pearl: #eaf2f8;
  --slateblue: #8fa6bd;
  --hairline: rgba(234, 242, 248, 0.09);
}

html { scroll-behavior: smooth; }
html, body { background: var(--ink); color: var(--pearl); }
body {
  font-family: "Manrope", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(70, 230, 255, .25); color: #fff; }

/* thin elegant scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #12283f; border-radius: 8px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: #1c3c5c; }

.font-display { font-family: "Cormorant Garamond", Georgia, serif; }

/* film grain */
.grain::after {
  content: "";
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 80;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-2%,3%); }
  40% { transform: translate(3%,-2%); }
  60% { transform: translate(-3%,-3%); }
  80% { transform: translate(2%,2%); }
}

/* labels */
.eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--biolum);
}
.eyebrow--gold { color: var(--gold-500); }

/* hairline rules */
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .95rem 2.1rem;
  font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  border: 1px solid; border-radius: 2px;
  transition: all .35s cubic-bezier(.22,.61,.36,1);
  cursor: pointer; white-space: nowrap;
}
.btn-gold { border-color: rgba(201,162,75,.65); color: var(--gold-300); background: transparent; }
.btn-gold:hover { background: var(--gold-500); border-color: var(--gold-500); color: #120c02; box-shadow: 0 8px 40px -8px rgba(201,162,75,.5); }
.btn-cyan { border-color: rgba(70,230,255,.4); color: var(--biolum); background: transparent; }
.btn-cyan:hover { background: rgba(70,230,255,.1); border-color: var(--biolum); box-shadow: 0 8px 40px -10px rgba(70,230,255,.45); }
.btn-solid { border-color: var(--gold-500); background: var(--gold-500); color: #120c02; }
.btn-solid:hover { background: var(--gold-300); border-color: var(--gold-300); box-shadow: 0 10px 44px -8px rgba(233,201,124,.55); }

/* nav */
#ff-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  transition: background .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}
#ff-nav.scrolled {
  background: rgba(2,4,9,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}
.nav-link {
  position: relative;
  font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--slateblue); transition: color .3s;
  padding: .4rem 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--biolum);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover, .nav-link.active { color: var(--pearl); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .12s; }
.rv-d2 { transition-delay: .24s; }
.rv-d3 { transition-delay: .36s; }

/* ================= DESCENT HERO ================= */
#descent { position: relative; }
.descent-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#oceanCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.descent-videos video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
}

.zone-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 1.5rem;
  opacity: 0; pointer-events: none;
  will-change: opacity, transform;
}
.zone-copy h1, .zone-copy h2 { text-wrap: balance; text-shadow: 0 2px 30px rgba(2,4,9,.55); }
.zone-copy p { text-shadow: 0 1px 16px rgba(2,4,9,.75); }

.scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  color: var(--slateblue); font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  transition: opacity .5s;
}
.scroll-cue .line { width: 1px; height: 54px; overflow: hidden; position: relative; background: rgba(143,166,189,.2); }
.scroll-cue .line::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%;
  background: linear-gradient(to bottom, transparent, var(--biolum));
  animation: cueDrop 2.1s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cueDrop { 0% { top: -50%; } 70%,100% { top: 105%; } }

/* HUD */
#hud {
  position: absolute; right: 2.4rem; top: 50%; transform: translateY(-50%);
  z-index: 20; display: flex; align-items: center; gap: 1.4rem;
  user-select: none; pointer-events: none;
}
#hud .rail { position: relative; width: 1px; height: 46vh; background: rgba(143,166,189,.22); }
#hud .rail .fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(to bottom, var(--gold-500), var(--biolum));
}
#hud .rail .marker {
  position: absolute; left: 50%; top: 0%;
  width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%,-50%);
  background: var(--biolum);
  box-shadow: 0 0 12px 2px rgba(70,230,255,.65);
}
#hud .zones { display: flex; flex-direction: column; justify-content: space-between; height: 46vh; }
.hud-zone { display: flex; flex-direction: column; gap: 2px; opacity: .38; transition: opacity .4s; }
.hud-zone.active { opacity: 1; }
.hud-zone .z-name { font-size: 10px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--pearl); }
.hud-zone.active .z-name { color: var(--biolum); text-shadow: 0 0 14px rgba(70,230,255,.5); }
.hud-zone .z-depth { font-size: 10px; letter-spacing: .18em; color: var(--slateblue); font-variant-numeric: tabular-nums; }

#depthReadout {
  position: absolute; left: 2.4rem; bottom: 2.4rem; z-index: 20;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
#depthReadout .d-num { font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; letter-spacing: .04em; color: var(--pearl); }
#depthReadout .d-label { font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--slateblue); }

/* trophy reveal */
#trophyReveal {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(58% 62% at 50% 38%, rgba(201,162,75,.16), transparent 62%),
    linear-gradient(to bottom, #0d0b08 0%, #16110a 46%, #060505 100%);
}
#trophyReveal.live { pointer-events: auto; }
#trophyReveal .wall-light {
  position: absolute; inset: 0;
  background: radial-gradient(42% 30% at 50% 24%, rgba(255,225,160,.14), transparent 70%);
}

/* The gold cast of the craft section's shader, lighting the room behind the
   collection. It is display:none until the room is live — #trophyReveal sits
   inside the sticky descent stage, so it is on screen (and would render) for
   the whole 920vh scroll otherwise, stealing frames from the descent itself.
   Going none -> block skips a transition, so the fade is an animation. */
.trophy-shader {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  display: none;
}
#trophyReveal.live .trophy-shader {
  display: block;
  animation: trophyShaderIn .9s ease both;
}
@keyframes trophyShaderIn { from { opacity: 0; } to { opacity: 1; } }

.trophy-shader canvas {
  display: block; width: 100%; height: 100%;
  opacity: .82;
  /* pool the light where the mounts hang and let it die at the edges */
  -webkit-mask-image: radial-gradient(88% 82% at 50% 44%, #000 34%, transparent 100%);
          mask-image: radial-gradient(88% 82% at 50% 44%, #000 34%, transparent 100%);
}
/* keep the room darker than the mounts — they stay the brightest thing in it */
.trophy-shader::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(64% 60% at 50% 44%, rgba(6,5,3,.06), rgba(6,5,3,.62) 100%),
    linear-gradient(to bottom, rgba(6,5,3,.42) 0%, rgba(6,5,3,.04) 42%, rgba(6,5,3,.6) 100%);
}
/* the orbiting collection hangs where the single marlin used to — same box,
   but it needs its own perspective now that it isn't riding the hero's */
.trophy-orbit {
  position: absolute; left: 50%; top: 60%;
  width: min(92vw, 1400px); height: min(42vh, 420px);
  transform: translate(-50%,-50%);
  perspective: 132vw;
  pointer-events: none;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)) drop-shadow(0 0 70px rgba(201,162,75,.14));
}
.trophy-orbit .orbit-space { width: 100%; height: 100%; }
.trophy-orbit .orbit-ring { --orbit-width: 74vw; }

/* the second ring rides above the first on the same cylinder — same diameter,
   same box, same perspective — so the only things it changes are the height
   it hangs at and the way it turns. */
.trophy-orbit--upper { top: 32%; }
.trophy-orbit--upper .orbit-ring {
  --orbit-dur: 63s;              /* off ring 1's 45s, so they never phase-lock */
  animation-name: orbitSpinRev;  /* and it turns the opposite way */
}
.trophy-plaque { text-align: center; }
.trophy-plaque .p-rule { width: 72px; height: 1px; margin: 0 auto .8rem; background: linear-gradient(90deg, transparent, var(--gold-500), transparent); }

/* mobile / tablet hud simplification */
@media (max-width: 1023px) {
  #hud .zones { display: none; }
}
@media (max-width: 767px) {
  #hud { right: 1.1rem; }
  #depthReadout { left: 1.2rem; bottom: 1.4rem; }
}

/* ================= ENQUIRY + PAYMENT FORMS ================= */
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .q-grid { grid-template-columns: 1fr; } }

.q-field { display: block; text-align: left; }
.q-field > span {
  display: block; margin-bottom: .5rem;
  font-size: 10px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--slateblue);
}
.q-field .opt { color: #5c7186; letter-spacing: .12em; }
.q-field textarea.f-input { resize: vertical; min-height: 132px; line-height: 1.6; }
.q-field select.f-input {
  appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238FA6BD' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
}

/* photo drop zone */
.q-drop {
  border: 1px dashed rgba(70,230,255,.28); border-radius: 3px;
  padding: 1.5rem 1rem; text-align: center; cursor: pointer;
  background: rgba(10,37,64,.28); transition: border-color .3s, background .3s;
}
.q-drop:hover, .q-drop.over { border-color: var(--biolum); background: rgba(70,230,255,.06); }
.q-drop * { pointer-events: none; }
.q-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .7rem; }
.q-thumbs img { width: 54px; height: 54px; object-fit: cover; border-radius: 2px; border: 1px solid var(--hairline); }

/* inline validation / transport note */
.q-note { min-height: 1.2em; margin-top: .9rem; font-size: 12.5px; letter-spacing: .02em; }
.q-note.err { color: #ff8a8a; }
.q-note.ok  { color: var(--biolum); }

/* success panel swapped in for the form */
.q-success {
  border: 1px solid rgba(201,162,75,.35); border-radius: 3px;
  padding: 2.6rem 1.6rem; text-align: center;
  background: linear-gradient(180deg, rgba(201,162,75,.06), transparent);
}

/* payment: numbered process */
.pay-steps { counter-reset: paystep; display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 3px; }
.pay-step { counter-increment: paystep; background: var(--ink); padding: 1.35rem 1.5rem; }
.pay-step h4 { display: flex; align-items: baseline; gap: .75rem; font-size: 14px; font-weight: 600; color: var(--pearl); }
.pay-step h4::before {
  content: counter(paystep, decimal-leading-zero);
  font-size: 10px; letter-spacing: .2em; color: var(--gold-500); font-weight: 700;
}
.pay-step p { margin-top: .45rem; padding-left: 1.85rem; font-size: 13px; line-height: 1.65; color: var(--slateblue); }

/* ================= CRAFT SHADER BACKGROUND ================= */
/* WebGL "mesh drift" field behind #craft. The canvas is opaque, so it is
   edge-faded into --ink and veiled by ::after (which sits above the canvas,
   at full strength, so the veil is the single place that sets readability).
   Measured at .32: background averages 4x its old brightness (9x at the
   lobes), slate body copy holds 6.1:1, pearl headings 6.8:1. Going below .25
   pushes copy over the brightest lobes under 3:1. */
.craft-shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.craft-shader canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .92;
  /* fade to nothing at the top and bottom so the section blends into --ink */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 13%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 13%, #000 84%, transparent 100%);
}

/* Veil: even across the width, because the layout alternates text left/right
   and a directional scrim would starve one side. Slightly heavier at the top
   and bottom edges to hide the join with the neighbouring sections. */
.craft-shader::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(2, 4, 9, .58) 0%,
      rgba(2, 4, 9, .32) 16%,
      rgba(2, 4, 9, .32) 84%,
      rgba(2, 4, 9, .62) 100%),
    radial-gradient(135% 95% at 50% 50%,
      rgba(2, 4, 9, 0) 0%, rgba(2, 4, 9, .34) 100%);
}

/* The field is bright enough now that slate body copy needs a little help;
   a soft shadow buys contrast without flattening the background behind it. */
#craft h2, #craft h3, #craft p {
  text-shadow: 0 1px 14px rgba(2, 4, 9, .85);
}

@media (prefers-reduced-motion: reduce) {
  .orbit-ring { animation-play-state: paused; }
  .craft-shader canvas { opacity: .6; }
  .trophy-shader canvas { opacity: .38; }
}

/* ================= CARDS / CATALOG ================= */
.pcard {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--hairline); border-radius: 4px;
  background: linear-gradient(165deg, rgba(10,37,64,.34), rgba(4,16,34,.6));
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .45s, box-shadow .45s;
}
.pcard:hover {
  transform: translateY(-6px);
  border-color: rgba(70,230,255,.35);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(70,230,255,.08), 0 12px 50px -18px rgba(70,230,255,.12);
}
.pcard .img-wrap {
  position: relative; aspect-ratio: 5/3.4;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(70% 90% at 50% 115%, rgba(70,230,255,.14), transparent 60%),
    linear-gradient(to bottom, #0b2036, #050d18);
  overflow: hidden;
}
.pcard .img-wrap img {
  max-width: 88%; max-height: 84%; object-fit: contain;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.pcard:hover .img-wrap img { transform: scale(1.045); }
.pcard .water-tag {
  position: absolute; top: 10px; left: 10px;
  font-size: 9px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  padding: .32rem .6rem; border-radius: 2px;
  background: rgba(2,4,9,.55); backdrop-filter: blur(6px);
  color: var(--biolum); border: 1px solid rgba(70,230,255,.25);
}
.pcard .water-tag.fresh { color: var(--gold-300); border-color: rgba(201,162,75,.35); }

.chip {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: .55rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--hairline); color: var(--slateblue);
  background: transparent; cursor: pointer;
  transition: all .3s; white-space: nowrap;
}
.chip:hover { color: var(--pearl); border-color: rgba(143,166,189,.45); }
.chip.on { color: #071018; background: var(--biolum); border-color: var(--biolum); font-weight: 700; }

.f-select {
  background: rgba(10,37,64,.4); color: var(--pearl);
  border: 1px solid var(--hairline); border-radius: 2px;
  font-size: 12px; letter-spacing: .06em;
  padding: .7rem 2.2rem .7rem .9rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238FA6BD' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
  cursor: pointer;
}
.f-select:focus, .f-input:focus { outline: 1px solid rgba(70,230,255,.5); outline-offset: 0; }
.f-input {
  background: rgba(10,37,64,.4); color: var(--pearl);
  border: 1px solid var(--hairline); border-radius: 2px;
  font-size: 13px; padding: .7rem .95rem; width: 100%;
}
.f-input::placeholder { color: #5c7186; }

/* variant rows */
.vrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.05rem;
  border: 1px solid var(--hairline); border-radius: 3px;
  cursor: pointer; transition: all .25s;
}
.vrow:hover { border-color: rgba(70,230,255,.35); }
.vrow.sel { border-color: var(--gold-500); background: rgba(201,162,75,.07); box-shadow: 0 0 0 1px rgba(201,162,75,.35); }
.vrow .v-mm { font-weight: 600; font-size: 14.5px; color: var(--pearl); font-variant-numeric: tabular-nums; }
.vrow .v-sub { font-size: 11px; letter-spacing: .08em; color: var(--slateblue); }
.vrow .v-price { font-weight: 700; color: var(--gold-300); font-variant-numeric: tabular-nums; }

/* spec note card */
.spec-note {
  border: 1px solid rgba(201,162,75,.4); border-left: 3px solid var(--gold-500);
  background: linear-gradient(100deg, rgba(201,162,75,.1), rgba(201,162,75,.02));
  border-radius: 3px;
}

/* gallery */
.g-item { position: relative; overflow: hidden; border-radius: 4px; border: 1px solid var(--hairline); background: linear-gradient(160deg,#0a1f33,#040d18); }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.g-item:hover img { transform: scale(1.06); }
.g-item .cap {
  position: absolute; inset: auto 0 0 0; padding: 2.4rem 1.1rem .9rem;
  background: linear-gradient(to top, rgba(2,4,9,.85), transparent);
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--pearl);
  opacity: 0; transform: translateY(8px); transition: all .45s;
}
.g-item:hover .cap { opacity: 1; transform: none; }

/* showroom modal */
#showroomModal {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(2,4,9,.92); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
}
#showroomModal.open { display: flex; }
#showroomCanvasWrap {
  position: relative; width: min(92vw, 1080px); height: min(78vh, 720px);
  border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 30%, rgba(70,230,255,.09), transparent 65%),
    radial-gradient(55% 45% at 50% 92%, rgba(201,162,75,.1), transparent 60%),
    linear-gradient(to bottom, #071426, #02060c 70%, #01040a);
}

/* zone label big letters during descent */
.zone-watermark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: clamp(60px, 14vw, 210px); font-weight: 250; letter-spacing: .28em;
  color: rgba(234,242,248,.045); white-space: nowrap; pointer-events: none;
}


/* ============================================================
   ACT 0 — "THE BREACH": photographic surface parallax
   Layered plates separate as you scroll: a dusk surface sinks
   past the camera, the sea climbs the frame, and you punch
   through the waterline into open ocean. Hands off to the
   canvas descent engine below.
   ============================================================ */

.descent-stage { background: #050f1c; }

/* explicit stage stacking so the acts can cross-fade cleanly */
.ocean-shimmer  { z-index: 0; }
#oceanCanvas    { z-index: 1; opacity: 0; }
.uw-plate       { z-index: 2; }
.descent-videos { z-index: 3; }
.surface        { z-index: 4; }
.plunge         { z-index: 5; }
.zone-watermark { z-index: 6; }
.deep-shafts    { z-index: 7; }
#sharkCanvas    { z-index: 8; }
.zone-copy      { z-index: 10; }
#trophyReveal   { z-index: 15; }
#hud, #depthReadout, .scroll-cue { z-index: 20; }

.surface img, .uw-plate img { user-select: none; -webkit-user-drag: none; }

/* ---------- the light shafts ----------
   The skewed streaks out of the 21st.dev dark-gradient recipe, kept as an
   overlay: its black radial base, dot grid and CDN noise tile are all dropped
   so the water, the motes and the marlin still read straight through. The
   source streak is rgb(0,207,255), which goes green against this palette —
   recoloured to the same deep blue the Sunlit plate uses.

   These are the dive's only light shafts — they replaced a set the canvas
   used to draw. descent.js runs the group across the whole descent: strongest
   just under the surface, thinning with every zone, and out entirely before
   Midnight, which gets no surface light at all. It also steepens them through
   --shaft-skew, because rays stand up near the surface and rake over as the
   light that is left arrives from further and further off. */
.deep-shafts {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
}
.deep-shafts i {
  position: absolute; inset: 0; display: block;
  opacity: .2;
  background: linear-gradient(rgb(46, 124, 192) 0%, rgba(46, 124, 192, 0) 100%);
  transform: skewX(var(--shaft-skew, 45deg));
}
.deep-shafts i:nth-child(1) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 20%, rgba(0,0,0,0) 36%, rgb(0,0,0) 55%, rgba(0,0,0,.13) 67%, rgb(0,0,0) 78%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 20%, rgba(0,0,0,0) 36%, rgb(0,0,0) 55%, rgba(0,0,0,.13) 67%, rgb(0,0,0) 78%, rgba(0,0,0,0) 97%);
}
.deep-shafts i:nth-child(2) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 11%, rgb(0,0,0) 25%, rgba(0,0,0,.55) 41%, rgba(0,0,0,.13) 67%, rgb(0,0,0) 78%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 11%, rgb(0,0,0) 25%, rgba(0,0,0,.55) 41%, rgba(0,0,0,.13) 67%, rgb(0,0,0) 78%, rgba(0,0,0,0) 97%);
}
.deep-shafts i:nth-child(3) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 9%, rgb(0,0,0) 20%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.424) 40%, rgb(0,0,0) 48%, rgba(0,0,0,.267) 54%, rgba(0,0,0,.13) 78%, rgb(0,0,0) 88%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 9%, rgb(0,0,0) 20%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.424) 40%, rgb(0,0,0) 48%, rgba(0,0,0,.267) 54%, rgba(0,0,0,.13) 78%, rgb(0,0,0) 88%, rgba(0,0,0,0) 97%);
}
.deep-shafts i:nth-child(4) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 17%, rgba(0,0,0,.55) 26%, rgb(0,0,0) 35%, rgba(0,0,0,0) 47%, rgba(0,0,0,.13) 69%, rgb(0,0,0) 79%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 17%, rgba(0,0,0,.55) 26%, rgb(0,0,0) 35%, rgba(0,0,0,0) 47%, rgba(0,0,0,.13) 69%, rgb(0,0,0) 79%, rgba(0,0,0,0) 97%);
}
.deep-shafts i:nth-child(5) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 20%, rgba(0,0,0,.55) 27%, rgb(0,0,0) 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,.13) 67%, rgb(0,0,0) 74%, rgb(0,0,0) 82%, rgba(0,0,0,.47) 88%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 20%, rgba(0,0,0,.55) 27%, rgb(0,0,0) 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,.13) 67%, rgb(0,0,0) 74%, rgb(0,0,0) 82%, rgba(0,0,0,.47) 88%, rgba(0,0,0,0) 97%);
}

/* ---------- "Oceanic Shimmer" — the water column itself ----------
   The 21st.dev Gradient Builder recipe exported as live CSS: a fractal-noise
   tile blended over four radial stops running surface-white to deep navy,
   plus the recipe's own desaturated grain pass.

   It is no longer a plate for one zone. It comes up behind the underwater
   photo as that dissolves (~−7 m) and stays lit all the way through Twilight,
   with descent.js doing three things to it as you sink:
     · drifting .ocean-shimmer__water up past the lens, so the surface light
       slides away overhead instead of sitting still;
     · draining brightness and saturation out of it;
     · raising .ocean-shimmer__veil over it.
   The veil colours are picked to land on the canvas's own Twilight/Midnight
   grade, so when the canvas water column fades back in underneath there is
   nothing to see in the swap. */
.ocean-shimmer {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
}

/* taller than the stage so it can drift without exposing an edge: 125% height
   travelling to -20% of itself lands the bottom flush at the stage floor */
.ocean-shimmer__water {
  position: absolute; left: 0; right: 0; top: 0; height: 125%;
  will-change: transform, filter;
  background-color: #123A6B;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.215'/></svg>"),
    radial-gradient(150% 48.4% at 41.58% 6%,  rgba(234, 247, 251, 0.92) 0%, rgba(234, 247, 251, 0) 53%),
    radial-gradient(150% 48.4% at 42.42% 33%, rgba(127, 198, 230, 0.92) 0%, rgba(127, 198, 230, 0) 53%),
    radial-gradient(150% 48.4% at 51.19% 67%, rgba(46, 124, 192, 0.92) 0%,  rgba(46, 124, 192, 0) 53%),
    radial-gradient(150% 48.4% at 53.67% 94%, rgba(18, 58, 107, 0.92) 0%,   rgba(18, 58, 107, 0) 53%);
  background-size: 120px 120px, auto, auto, auto, auto;
  background-blend-mode: overlay, normal, normal, normal, normal;
}

/* the dark that closes over the water on the way down */
.ocean-shimmer__veil {
  position: absolute; inset: 0; opacity: 0; will-change: opacity;
  background: linear-gradient(to bottom, #04101f 0%, #020914 55%, #01060e 100%);
}

.ocean-shimmer__grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .215; mix-blend-mode: overlay; pointer-events: none;
}

/* ---------- underwater photographic plate ---------- */
.uw-plate {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; will-change: transform, opacity;
}
.uw-plate .uw-img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
  /* the plate photo is portrait (~9:16), so a landscape viewport shows only a
     ~31% band of it. 13% keeps the waterline at the top with the light rays
     falling through the frame; higher values crop the surface away entirely.
     Phones show the full height (and the reef) — the crop turns horizontal. */
  object-position: 50% 13%;
}
.uw-plate::after {                       /* grade the stock photo into the site palette */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(4,16,34,.06) 0%, rgba(4,16,34,.40) 56%, rgba(2,8,18,.74) 100%);
}
.uw-caustics {
  position: absolute; inset: -14%; z-index: 2;
  mix-blend-mode: screen; opacity: .4; pointer-events: none;
  background:
    radial-gradient(38% 24% at 22% 4%, rgba(150,235,255,.55), transparent 70%),
    radial-gradient(30% 18% at 57% 0%,  rgba(196,247,255,.45), transparent 70%),
    radial-gradient(26% 16% at 82% 7%,  rgba(120,220,255,.38), transparent 72%);
  animation: caustic 13s ease-in-out infinite alternate;
}
@keyframes caustic {
  0%   { transform: translate3d(-2%, 0, 0)    scale(1);    opacity: .30; }
  50%  { transform: translate3d(1.5%, 1%, 0)  scale(1.07); opacity: .50; }
  100% { transform: translate3d(3%, -1%, 0)   scale(1.02); opacity: .36; }
}

/* ---------- the surface stack ---------- */
.surface   { position: absolute; inset: 0; overflow: hidden; will-change: opacity; }
.px-layers { position: absolute; inset: 0; }
.px-l      { position: absolute; will-change: transform, opacity; backface-visibility: hidden; }

/* sky plate and sea plate are the SAME photo at the SAME geometry, so at
   rest they are pixel-identical and the seam is invisible; the sea plate is
   masked to its lower half and rises independently. */
.px-sky, .px-sea { inset: -8% -3%; }
.px-sky > img, .px-sea .plate img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

.px-sea .plate {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 33%, #000 52%);
          mask-image: linear-gradient(to bottom, transparent 33%, #000 52%);
}
.px-sea::after {                          /* deep water continuing below the plate,
                                             ramped in over the photo so the join
                                             never reads as a seam */
  content: ""; position: absolute; left: 0; right: 0; top: 72%; height: 260%;
  background: linear-gradient(to bottom,
    rgba(27,43,69,0) 0%, rgba(27,43,69,.72) 5%, #1b2b45 11%,
    #16243c 26%, #101c30 48%, #0a1423 74%, #060e1a 100%);
}

/* dusk bloom sitting on the horizon — kept restrained so the type holds */
.px-glow {
  inset: -8% -3%; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(120% 26% at 50% 53%, rgba(255,138,74,.20), transparent 66%),
    radial-gradient(42% 13% at 63% 51%,  rgba(255,214,158,.20), transparent 72%),
    radial-gradient(92% 40% at 50% 46%,  rgba(255,120,80,.07),  transparent 70%);
}

/* ---------- sky furniture: moon, clouds, the game boat ----------
   These are NOT inside .px-sky. The sea plate (.px-sea) is a masked copy of
   the same photograph painted over the lower half of the frame, so anything
   parked inside the sky plate near the horizon gets repainted away. They get
   their own planes above it instead — clouds behind the wordmark, the boat in
   front of everything — and descent.js glues each one to the sky plate's own
   drift so nothing ever slides off the horizon, then adds the per-layer
   offset that separates them into planes.

   left/top below are the AT-REST positions in stage coordinates; the horizon
   sits at ~52.7%. */
.px-scene, .px-boat { inset: 0; pointer-events: none; }
.sky-el {
  position: absolute; display: block; height: auto;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

/* the moon sits furthest back — barely moves, hazed into the dusk */
.sky-moon {
  --ax: -50%; --ay: -50%;
  left: 12%; top: 11%;
  width: clamp(70px, 8vw, 152px);
  opacity: .86;
  filter:
    saturate(1.1) brightness(1.04)
    drop-shadow(0 0 22px rgba(255,186,120,.5))
    drop-shadow(0 0 76px rgba(255,148,92,.26));
}

/* Clouds keep normal blending — screen washes the reds straight out of them.
   Low opacity plus a feathered underside settles them into the sky band
   instead of leaving them sitting on top of it. */
.sky-cloud {
  --ax: -50%; --ay: -50%;
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, rgba(0,0,0,.3) 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 56%, rgba(0,0,0,.3) 84%, transparent 100%);
}

/* high and far — thinned right down so it reads as haze, not a sticker */
.sky-cloud--far {
  left: 44%; top: 10%;
  width: clamp(120px, 14vw, 270px);
  opacity: .28;
  filter: blur(2px) saturate(1.05) brightness(.95);
}

/* the low bank on the left, sitting in the warm band above the horizon */
.sky-cloud--mid {
  left: 16%; top: 31%;
  width: clamp(210px, 25vw, 470px);
  opacity: .5;
  filter: blur(1px) saturate(1.15) brightness(.97);
}

/* the big one on the right — nearest, so it moves most and stays richest */
.sky-cloud--near {
  left: 91%; top: 32%;
  width: clamp(280px, 32vw, 620px);
  opacity: .58;
  filter: saturate(1.18) brightness(.96);
}

/* the game boat, bottom-anchored so its waterline is the thing we place.
   It is the nearest object in the act, so it takes the biggest move of
   anything on screen — see the boat's row in SKY over in descent.js. */
.sky-boat {
  --ax: -50%; --ay: -100%;
  left: 20%; top: 58.5%;
  width: clamp(158px, 19vw, 366px);
}
.sky-boat img {
  display: block; width: 100%; height: auto;
  /* the cutout is a bright studio shot on white — cooled and warmed into the
     dusk grade, with the bottom of the hull dissolved so the boat settles
     into the water instead of ending on a cut line */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, rgba(0,0,0,.5) 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, rgba(0,0,0,.5) 92%, transparent 100%);
  filter:
    brightness(.74) contrast(1.08) saturate(.72) sepia(.18)
    drop-shadow(0 4px 12px rgba(2,10,22,.5));
}
.sky-boat::after {                        /* waterline: hull shadow + wake */
  content: ""; position: absolute;
  left: 50%; bottom: -1%;
  width: 126%; height: 22%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(4,12,26,.62), rgba(4,12,26,0) 72%),
    radial-gradient(closest-side at 62% 30%, rgba(226,240,252,.55), rgba(226,240,252,0) 66%);
  filter: blur(6px);
}

/* ---------- the resident shark ----------
   The glTF layer that replaced the flat marlin cutout. It spans the stage and
   sits above the light shafts but under the zone copy, so the writing always
   wins. It draws nothing at all until the dive is a few metres under, which
   is why nothing here has to hide it during the surface act. */
#sharkCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* headline rides its own plane — lifted into the darker upper sky, with a
   soft scrim so it never has to fight the bright horizon band */
.px-title {
  inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 1.5rem 18vh;
}
.px-title::before {
  content: ""; position: absolute; left: 50%; top: -6%;
  width: min(1240px, 96%); height: 92%;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(56% 58% at 50% 46%,
    rgba(3,11,22,.46), rgba(3,11,22,.2) 56%, transparent 78%);
}
.px-title > * { position: relative; z-index: 1; }

/* the hero mark takes the headline's place — the artwork is dark navy and
   gold, so it wants a luminous scrim rather than the dark one */
/* perspective tracks the ring so the 3D read — and the ring's on-screen
   span — stay identical at every viewport width (1900px @ 1440) */
.px-title--mark { padding-bottom: 14vh; perspective: 132vw; }
.px-title--mark::before {
  top: 2%; height: 88%; width: min(1020px, 92%);
  background:
    radial-gradient(46% 44% at 50% 52%,
      rgba(228,242,255,.62), rgba(214,234,255,.26) 52%, transparent 74%),
    radial-gradient(38% 26% at 50% 78%,
      rgba(236,246,255,.5), rgba(220,238,255,.18) 56%, transparent 78%);
  filter: blur(2px);
}
.hero-mark {
  width: min(52vw, 760px);
  max-height: 66vh;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 52px rgba(233,201,124,.4))
    drop-shadow(0 0 18px rgba(244,250,255,.75))
    drop-shadow(0 0 5px rgba(244,250,255,.6))
    drop-shadow(0 16px 36px rgba(2,9,20,.45));
}

/* ---------- the mounts orbiting the mark ----------
   a cylinder of faces: each card is rotated to its own slice and pushed out
   by the radius, so spinning the ring is a single rotateY on the parent.
   radius = circumference / 2pi, and the circumference is just the faces
   laid end to end — same geometry the reference component uses. */
.orbit-space {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
}
.orbit-ring {
  --orbit-n: 12;
  /* the ring's on-screen span: the widest faces sit at z=0, so the silhouette
     is just the cylinder diameter. Drive the radius from that and let the face
     size fall out of it (circumference / n) rather than the other way round. */
  --orbit-width: 80vw;
  /* faces just forward of the sides are scaled up by the perspective, so the
     silhouette runs wider than the bare cylinder. Measured overshoot is 1.083x
     (constant, now that perspective scales with the ring), so trim the radius
     by it and --orbit-width becomes the true on-screen span. */
  --orbit-r: calc(var(--orbit-width) / 2 / 1.083);
  --face-w: calc(var(--orbit-r) * 6.2831853 / var(--orbit-n));
  --face-h: calc(var(--face-w) * 0.566);
  --face-gap: calc(var(--face-w) * 0.09);
  --orbit-dur: 45s;

  position: absolute; left: 50%; top: 50%;
  width: var(--face-w); height: var(--face-h);
  margin: calc(var(--face-h) / -2) 0 0 calc(var(--face-w) / -2);
  transform-style: preserve-3d;
  animation: orbitSpin var(--orbit-dur) linear infinite;
  pointer-events: none;
}
@keyframes orbitSpin {
  from { transform: rotate3d(0, 1, 0, 0deg); }
  to   { transform: rotate3d(0, 1, 0, -360deg); }
}
@keyframes orbitSpinRev {
  from { transform: rotate3d(0, 1, 0, 0deg); }
  to   { transform: rotate3d(0, 1, 0, 360deg); }
}

.orbit-card {
  position: absolute; inset: 0;
  padding-inline: var(--face-gap);
  transform:
    rotateY(calc(var(--i) * 360deg / var(--orbit-n)))
    translateZ(var(--orbit-r));
}
.orbit-card img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(2,9,20,.45));
}

.px-title h1, .px-title p, .px-title .eyebrow {
  text-shadow: 0 2px 30px rgba(2,9,20,.85), 0 1px 3px rgba(2,9,20,.7);
}

/* the waterline lip that sweeps past the lens */
.px-foam {
  left: -12%; right: -12%; top: 98%; height: 30vh;
  border-radius: 50% 50% 0 0 / 44% 44% 0 0;
  opacity: 0; pointer-events: none; filter: blur(9px);
  background: linear-gradient(to bottom,
    rgba(224,248,255,.95) 0%, rgba(158,218,242,.55) 10%,
    rgba(64,146,196,.2) 30%, rgba(20,60,95,0) 58%);
}

/* soften the frame edges of the whole act */
.surface-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(2,8,18,.5) 0%, transparent 26%),
    radial-gradient(76% 68% at 50% 46%, transparent 40%, rgba(2,8,18,.58) 100%);
}

/* ---------- the plunge ---------- */
.plunge { position: absolute; inset: 0; pointer-events: none; }
.plunge-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(80% 58% at 50% 74%,
    rgba(198,244,255,.95), rgba(110,196,238,.38) 40%, rgba(10,40,70,0) 72%);
}
.bubbles { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.bubbles i {
  position: absolute; display: block; top: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    rgba(255,255,255,.95), rgba(200,238,255,.55) 46%, rgba(200,238,255,0) 70%);
  animation-name: bubRise; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes bubRise {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--dx, 0px), -132vh, 0); }
}

/* Lenis owns the scroll once it boots (it stamps .lenis on <html> itself,
   and strips any other lenis-* class, so hook onto its own) */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }

@media (max-width: 767px) {
  .px-title { padding-bottom: 12vh; }
  .sky-moon        { left: 15%; top: 10%; width: clamp(54px, 14vw, 92px); }
  .sky-cloud--far  { left: 38%; top:  9%; width: 32vw; opacity: .24; }
  .sky-cloud--mid  { left:  8%; top: 30%; width: 52vw; opacity: .46; }
  .sky-cloud--near { left: 95%; top: 33%; width: 68vw; opacity: .5; }
  /* the cover crop drops the horizon to ~57% on a phone, and the wordmark
     runs much wider — so the boat goes lower and further out of its way */
  .sky-boat        { left: 26%; top: 61.5%; width: clamp(130px, 38vw, 250px); }
  .hero-mark { width: min(88vw, 540px); }
  .trophy-orbit { top: 56%; height: min(34vh, 300px); }
  .trophy-orbit .orbit-ring { --orbit-width: 90vw; }
  .trophy-orbit--upper { top: 34%; }
  .px-foam { height: 22vh; }
}

@media (prefers-reduced-motion: reduce) {
  .uw-caustics, .bubbles i { animation: none; }
  .bubbles { display: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain::after { animation: none; }
  .rv { opacity: 1 !important; transform: none !important; transition: none; }
  .scroll-cue .line::after { animation: none; }
}

/* ================= STANDARD-SPEC CALLOUT =================
   Compact spec bar: three specs in a row, then the pricing rule as a
   tinted strip so the commercial fact is the last thing read. */
.spec-callout {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--gold-500);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(10, 37, 64, .34), rgba(2, 4, 9, .5));
  overflow: hidden;
}
.spec-callout__specs {
  display: grid;
  gap: 1px;
  background: var(--hairline);
}
@media (min-width: 700px) {
  .spec-callout__specs { grid-template-columns: repeat(3, 1fr); }
}
.spec-callout__item {
  background: linear-gradient(160deg, rgba(10, 37, 64, .18), rgba(2, 4, 9, .3));
  padding: 1.15rem 1.4rem;
}
.spec-callout__label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  line-height: 1.15;
  color: var(--pearl);
}
.spec-callout__label--gold { color: var(--gold-300); }
.spec-callout__note {
  margin-top: .35rem;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slateblue);
}
.spec-callout__price {
  padding: .95rem 1.4rem;
  border-top: 1px solid var(--hairline);
  background: rgba(201, 162, 75, .09);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slateblue);
}
.spec-callout__price span { color: var(--gold-300); font-weight: 600; }

/* Cormorant Garamond ships oldstyle figures by default, which sit at x-height
   and make numeric stats look a size smaller than word stats beside them. */
.stat-figure { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* ================= PAINT OPTIONS (custom orders) ================= */
.paint-opt {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(10, 37, 64, .3), rgba(2, 4, 9, .55));
  padding: 1.5rem 1.6rem;
}
.paint-opt--gold {
  border-color: rgba(201, 162, 75, .34);
  background: linear-gradient(160deg, rgba(201, 162, 75, .09), rgba(2, 4, 9, .55));
}
.paint-opt__tag {
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--slateblue);
}
.paint-opt__tag--gold { color: var(--gold-500); }
.paint-opt__title {
  margin-top: .55rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px; line-height: 1.1; color: var(--pearl);
}
.paint-opt__body {
  margin-top: .6rem;
  font-size: 13.5px; line-height: 1.6; color: var(--slateblue);
}
.paint-steps {
  counter-reset: paintstep;
  margin-top: 1rem;
  display: grid;
  gap: .4rem;
}
.paint-steps li {
  counter-increment: paintstep;
  display: flex; gap: .7rem;
  font-size: 12.5px; line-height: 1.5; color: var(--slateblue);
}
.paint-steps li::before {
  content: counter(paintstep);
  flex: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-variant-numeric: lining-nums;
  font-size: 14px; line-height: 1.35; color: var(--gold-500);
}
.paint-opt__foot {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--slateblue);
}
.paint-opt__foot--gold { color: var(--gold-300); }

/* Craft images are alpha cutouts, so the animated shader behind the section
   would otherwise drift through them. The frame carries its own fill. */
.craft-frame {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  /* Studio backdrop: lit behind the subject, falling off to the corners, so a
     cutout reads as photographed on a sweep rather than pasted onto a panel. */
  background:
    radial-gradient(ellipse 75% 65% at 50% 42%, #14324f 0%, #0a1e33 45%, #05101d 78%, #020810 100%);
}
.craft-frame img { display: block; position: relative; z-index: 1; }
/* Faint inner edge so the frame sits as a deliberate panel, not a hard crop. */
.craft-frame::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 60px 10px rgba(2, 6, 16, .55);
}

/* A headline that must hold one line from the md breakpoint up: the size
   tracks the viewport so it never outgrows the container, capped at the
   same 3.75rem the other section headings use. */
.headline-oneline { font-size: clamp(2.25rem, 5.6vw, 3.75rem); }
@media (min-width: 768px) { .headline-oneline { white-space: nowrap; } }

/* ================= PAY PAGE ================= */
/* Sits on the same tokens as the rest of the site: gold is the "act on this"
   colour, cyan is the quiet label colour, everything sits on a hairline grid. */

.pay-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .pay-layout { grid-template-columns: 1.45fr 1fr; gap: 3rem; } }

.pay-panel, .side-card {
  border: 1px solid var(--hairline); border-radius: 3px;
  background: linear-gradient(168deg, rgba(10,37,64,.3), rgba(4,16,34,.5));
  padding: 1.9rem 1.7rem;
}
@media (min-width: 640px) { .pay-panel { padding: 2.4rem 2.2rem; } }
.pay-side { display: grid; gap: 1.5rem; }
.side-copy { font-size: 13px; line-height: 1.7; color: var(--slateblue); }

/* --- warning / not-yet-configured banner --- */
.pay-warn {
  display: flex; gap: .85rem; align-items: flex-start;
  margin-bottom: 2.5rem; padding: 1rem 1.15rem;
  border: 1px solid rgba(233,201,124,.32); border-radius: 3px;
  background: rgba(201,162,75,.07); color: var(--gold-300);
}
.pay-warn svg { flex: none; margin-top: 1px; }
.pay-warn p { font-size: 12.5px; line-height: 1.65; color: var(--gold-300); }
.pay-warn strong { color: #fff3d6; }
.pay-warn code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.pay-warn--soft { margin-bottom: 0; border-color: rgba(70,230,255,.24); background: rgba(70,230,255,.05); }
.pay-warn--soft, .pay-warn--soft p { color: var(--slateblue); }
.pay-warn--soft strong { color: var(--biolum); }

/* --- method switch --- */
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); border-radius: 3px;
}
.seg-btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem .6rem; background: var(--ink); cursor: pointer;
  font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--slateblue); transition: color .3s, background .3s;
}
.seg-btn svg { width: 16px; height: 16px; }
.seg-btn:hover { color: var(--pearl); }
.seg-btn[aria-selected="true"] { color: #120c02; background: var(--gold-500); }

.method { padding-top: 2rem; }

/* --- card panel --- */
.check-list { display: grid; gap: .85rem; }
.check-list li {
  position: relative; padding-left: 1.75rem;
  font-size: 13px; line-height: 1.65; color: var(--slateblue);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 11px; height: 6px; border-left: 1.5px solid var(--biolum); border-bottom: 1.5px solid var(--biolum);
  transform: rotate(-45deg);
}
.btn.is-disabled { opacity: .4; pointer-events: none; }

/* ---------- credit card preview + form ----------
   Ported from the React component's styled-jsx. Structure and animation are
   the original's; the palette is the site's, since the source ships a white
   card on #fbfcff and its pink/blue accent rings would be the only two colours
   on the site that belong to neither the gold nor the biolum family. */
.cc { display: grid; gap: 1.6rem; margin-bottom: 2rem; }
.cc-card {
  position: relative; width: 100%; max-width: 420px; margin: 0 auto;
  transform-style: preserve-3d; transition: transform .8s; perspective: 1000px;
}
.cc-card.flip { transform: rotateY(180deg); }
.cc-front, .cc-back {
  width: 100%; height: 233px; border-radius: 20px; padding: 24px 30px 30px;
  background: linear-gradient(to right bottom, #16293f, #04101d);
  box-shadow: 0 33px 50px -15px rgba(2, 9, 20, .66);
  color: var(--pearl); overflow: hidden; position: relative;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.cc-back { position: absolute; inset: 0; transform: rotateY(180deg); padding: 24px 0 0; }
/* the accent rings — gold and deep sea, in place of the recipe's pink/blue */
.cc-front::before, .cc-back::before {
  content: ""; position: absolute; left: -17%; top: -45px;
  height: 300px; width: 300px; border: 16px solid rgba(201,162,75,.85);
  border-radius: 100%; filter: blur(13px);
}
.cc-front::after, .cc-back::after {
  content: ""; position: absolute; left: -200px; top: 55%;
  height: 300px; width: 300px; border: 16px solid rgba(46,124,192,.85);
  border-radius: 100%; filter: blur(13px);
}
.cc-highlight {
  position: absolute; z-index: 2; top: 0; left: 0; width: 0; height: 0;
  border: 1px solid rgba(234,242,248,.9); border-radius: 12px;
  box-shadow: 0 0 5px rgba(234,242,248,.7); transition: .3s; pointer-events: none;
}
.cc-highlight.is-hidden { display: none; }
.cc-highlight.is-number { width: 346px; height: 40px; top: 92px;  left: 18px; }
.cc-highlight.is-holder { width: 264px; height: 56px; top: 156px; left: 18px; }
.cc-highlight.is-expire { width: 86px;  height: 56px; top: 156px; left: 323px; }
.cc-highlight.is-cvv    { width: 381px; height: 91px; top: 83px;  left: 18px; }

.cc-head {
  position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; font-weight: 600; margin-bottom: 32px;
}
.cc-number {
  position: relative; z-index: 1; display: flex; height: 33px; overflow: hidden;
  font-size: 22px; margin-bottom: 32px; letter-spacing: .02em;
}
.cc-slot { display: inline-flex; }
.cc-slot:nth-child(4n) { margin-right: 10px; }
.cc-digit {
  display: flex; flex-direction: column; height: 33px; line-height: 33px;
  transition: transform .2s;
}
.cc-digit.filed { transform: translateY(-33px); }   /* slides the value into view */
.cc-row { height: 33px; display: block; }
.cc-foot {
  position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: space-between;
}
.cc-holder { text-transform: uppercase; }
.cc-cap { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--slateblue); }
.cc-stripe { position: relative; z-index: 1; height: 40px; width: 100%; background: #0a1725; }
.cc-cvv-wrap {
  position: relative; z-index: 1; margin-top: 24px; padding: 0 32px;
  display: flex; flex-direction: column; align-items: flex-end;
}
.cc-cvv-out {
  margin-top: 6px; height: 44px; width: 100%; border-radius: 12px;
  background: var(--pearl); color: #0d0c22; font-size: 25px; line-height: 21px;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 12px;
}

.cc-form { display: grid; gap: .75rem; }
.cc-form label {
  display: block; margin: .4rem 0 .3rem;
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--slateblue);
}
.cc-form input, .cc-form select {
  height: 52px; width: 100%; display: block; padding: 0 1.1rem;
  border: 1px solid var(--hairline); border-radius: 4px;
  background: rgba(4,16,34,.55); color: var(--pearl); font-size: 15px;
  outline: none; transition: border-color .25s, box-shadow .25s;
}
.cc-form input::placeholder { color: #4d6076; }
.cc-form input:focus, .cc-form select:focus {
  border-color: rgba(70,230,255,.55);
  box-shadow: 0 0 0 3px rgba(70,230,255,.12);
}
.cc-group { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; }
.cc-date  { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 560px) { .cc-group { grid-template-columns: 1fr; } }
.cc-submit {
  margin-top: .5rem; height: 48px; border: 1px solid var(--gold-500);
  border-radius: 2px; background: var(--gold-500); color: #120c02;
  font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  cursor: pointer; transition: opacity .3s, background .3s;
}
.cc-submit[disabled] { opacity: .45; cursor: not-allowed; }
.cc-submit:not([disabled]):hover { background: var(--gold-300); border-color: var(--gold-300); }

@media (prefers-reduced-motion: reduce) {
  .cc-card, .cc-digit, .cc-highlight { transition: none; }
}

/* ---------- Pay now ----------
   A gold plate cut to the same sharp 2px corner as every other .btn on the
   site, standing on its own in the payment band with nothing to compete
   with. The chrome pill that used to live here read as another brand's
   component; this one is just the house gold, given a bit more weight
   because it is now the only thing in its section.

   Three layers: the plate itself, a specular sweep (::before) that crosses
   on hover, and a hairline gold ring (::after) held a few pixels off the
   edge so the plate looks mounted rather than pasted on. */
.pay-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.15rem 3.2rem;
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(155deg, #f0d79a 0%, var(--gold-300) 30%, var(--gold-500) 68%, var(--gold-600) 100%);
  color: #140d02;
  font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(89,63,10,.35),
    0 18px 50px -18px rgba(201,162,75,.55);
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1);
}

/* the sweep — parked off the left edge, crosses once per hover */
.pay-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg,
    transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .75s cubic-bezier(.22,.61,.36,1);
}

/* the mounting ring, outside the plate so it survives the overflow clip */
.pay-btn::after {
  content: ""; position: absolute; inset: -6px;
  border: 1px solid rgba(201,162,75,.32);
  border-radius: 3px; pointer-events: none;
  transition: inset .35s cubic-bezier(.22,.61,.36,1), border-color .35s;
}

.pay-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(89,63,10,.35),
    0 24px 60px -16px rgba(201,162,75,.7);
}
.pay-btn:hover::before { transform: translateX(100%); }
.pay-btn:hover::after  { inset: -9px; border-color: rgba(233,201,124,.5); }
.pay-btn:active { transform: translateY(0); }

.pay-btn:focus-visible {
  outline: 2px solid var(--biolum);
  outline-offset: 10px;
}

.pay-btn-label {
  display: inline-flex; align-items: center; gap: .75rem;
}
.pay-btn-label svg {
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.pay-btn:hover .pay-btn-label svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .pay-btn, .pay-btn::before, .pay-btn::after, .pay-btn-label svg { transition: none; }
  .pay-btn:hover { transform: none; }
  .pay-btn:hover::before { transform: translateX(-100%); }
}
.cta-note { margin-top: .95rem; font-size: 12px; line-height: 1.6; text-align: center; color: #5c7186; }

.schemes {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline);
}
.scheme {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 .5rem; border-radius: 3px;
  background: rgba(234,242,248,.94);
}
.scheme svg { height: 15px; width: auto; }
.scheme-note {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: auto;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--slateblue);
}

/* --- bank panel --- */
.bank-rows {
  display: grid; gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: 3px;
}
.bank-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .5rem 1rem; padding: 1.05rem 1.25rem; background: var(--ink);
}
.bank-key {
  grid-column: 1; font-size: 10px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--slateblue);
}
.bank-val {
  grid-column: 1; margin-top: .3rem;
  font-size: 17px; font-weight: 600; letter-spacing: .06em; color: var(--pearl);
  overflow-wrap: anywhere;
}
.bank-val--ref { color: var(--gold-300); }
.bank-val--unset { color: #b08d3f; font-style: italic; font-weight: 400; letter-spacing: .02em; }
.bank-row .copy-btn { grid-column: 2; grid-row: 1 / span 2; }
.is-placeholder { color: #5c7186; font-weight: 400; font-style: italic; letter-spacing: .02em; }

.copy-btn {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  padding: .5rem .8rem; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 2px; background: transparent;
  font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--slateblue); transition: all .3s cubic-bezier(.22,.61,.36,1);
}
.copy-btn svg { width: 13px; height: 13px; }
.copy-btn:hover:not(:disabled) { color: var(--biolum); border-color: rgba(70,230,255,.4); background: rgba(70,230,255,.07); }
.copy-btn:disabled { opacity: .3; cursor: not-allowed; }

.bank-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.bank-actions .btn { font-size: 10.5px; letter-spacing: .2em; padding-inline: 1.2rem; }

/* --- reference builder --- */
.type-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.type-chip {
  padding: .55rem .95rem; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 2px; background: transparent;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--slateblue); transition: all .3s;
}
.type-chip:hover { color: var(--pearl); border-color: rgba(234,242,248,.24); }
.type-chip[aria-pressed="true"] {
  color: var(--gold-300); border-color: rgba(201,162,75,.55); background: rgba(201,162,75,.1);
}

.ref-preview {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.5rem; padding: 1.05rem 1.2rem;
  border: 1px dashed rgba(201,162,75,.32); border-radius: 3px;
  background: rgba(201,162,75,.05);
}
.ref-preview-label {
  display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--slateblue);
}
.ref-preview-value {
  display: block; margin-top: .35rem;
  font-size: 15px; font-weight: 700; letter-spacing: .05em; color: var(--gold-300);
  overflow-wrap: anywhere;
}

/* --- contact rows --- */
.contact-row {
  display: flex; align-items: center; gap: .9rem; margin-top: .8rem;
  padding: .9rem 1rem; border: 1px solid var(--hairline); border-radius: 3px;
  transition: border-color .3s, background .3s;
}
.contact-row:hover { border-color: rgba(70,230,255,.34); background: rgba(70,230,255,.05); }
.contact-ic { flex: none; color: var(--biolum); }
.contact-ic svg { width: 17px; height: 17px; }
.contact-body { display: grid; gap: .2rem; min-width: 0; }
.contact-body strong { font-size: 13px; font-weight: 600; color: var(--pearl); }
.contact-body span { font-size: 11.5px; color: var(--slateblue); overflow-wrap: anywhere; }
.contact-arrow { width: 15px; height: 15px; margin-left: auto; flex: none; color: var(--slateblue); }

.pay-fine { font-size: 11.5px; line-height: 1.75; color: #5c7186; }

/* --- copy confirmation --- */
#toast {
  position: fixed; left: 50%; bottom: 2rem; z-index: 120;
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.3rem; border-radius: 3px;
  border: 1px solid rgba(70,230,255,.4); background: rgba(2,4,9,.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 12px; letter-spacing: .06em; color: var(--biolum);
  max-width: min(90vw, 420px);
  transform: translate(-50%, 130%); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s;
}
#toast.show { transform: translate(-50%, 0); opacity: 1; }
#toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The wordmark and its tagline are dark navy — on the footer's #01030a they
   disappear entirely and only the fish and the gold ring survive, so the mark
   still needs light behind it. A hard-edged plate reads as a sticker pasted
   onto the footer, so the light is a soft bloom instead: full strength across
   the mark's own footprint, then falling away to nothing inside the padding.
   No border, no corner, no edge to see — just a pool of light the type sits in. */
.footer-logo {
  position: relative; isolation: isolate;
  display: inline-block;
  padding: 3rem 4rem;
}
.footer-logo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Radii stay just under 50% so the gradient reaches full transparency
     before the box edge — at 50%+ it would be cut off mid-fade and the hard
     rectangle would come straight back. The padding above is the room the
     fade needs. The plateau holds to 56%, which clears the wordmark's widest
     point, so the outer letters and the tagline are lit as well as the centre. */
  background: radial-gradient(ellipse 49% 49% at 50% 48%,
    #f5f9fd 0%,
    #eff4fa 56%,
    rgba(223,234,245,.5) 74%,
    rgba(178,203,226,.16) 88%,
    rgba(150,185,215,0) 100%);
  filter: blur(12px);
}
.footer-logo img { display: block; position: relative; }

/* the print button exists so people can carry the bank details away */
@media print {
  #ff-nav, footer, #toast, .seg, .bank-actions, .pay-side, .pay-warn { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .method[hidden] { display: block !important; }
  .pay-panel { border-color: #999; background: none; }
  .bank-key, .bank-val, .check-list li { color: #000 !important; }
  .copy-btn { display: none !important; }
}

/* ================= CARD SPOTLIGHT (hover only) ================= */
.card-spotlight {
  position: absolute; inset: -1px;
  z-index: 3; pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s ease;
  mix-blend-mode: screen;
  background-color: #0d2740;
  -webkit-mask-image: radial-gradient(350px circle at var(--mx, 50%) var(--my, 50%), #fff, transparent 80%);
  mask-image: radial-gradient(350px circle at var(--mx, 50%) var(--my, 50%), #fff, transparent 80%);
}
.card-spotlight.is-on { opacity: 1; }
.card-spotlight canvas { position: absolute; inset: 0; display: block; }

@media (prefers-reduced-motion: reduce) {
  .card-spotlight { transition: none; }
}