/* ---------- hero: one giant Snell's window ---------- */
.hero { position: relative; min-height: calc(100svh - 4.5rem); overflow: hidden; display: flex; align-items: center; }
.hero__port { position: absolute; width: 120vh; left: calc(80% - 60vh); top: calc(52% - 60vh); background: var(--z0); }
.hero__port img { transform-origin: 40% 60%; }
.hero__text { position: relative; z-index: 1; padding-block: 4rem 7rem; max-width: calc(80vw - 60vh); min-width: 30rem; }
.hero h1 { font-size: clamp(4rem, 6.6vw, 6.5rem); }
.hero__sub { margin-top: 1.75rem; font-size: 1.1875rem; line-height: 1.6; max-width: 26em; }
.hero__actions { margin-top: 2.25rem; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.hero__join { font-weight: 500; text-decoration-color: currentColor; }
.hero__note { position: absolute; left: var(--margin); bottom: 1.75rem; max-width: 30em; color: var(--muted); z-index: 1; }
.btn svg { flex: none; }

@media (max-width: 60em), (max-aspect-ratio: 5/4) {
  .hero { display: block; min-height: calc(100svh - 4.5rem); }
  .hero__port { width: 130vw; left: -15vw; top: max(56svh, 30rem); }
  .hero__text { max-width: none; min-width: 0; padding-top: 12svh; padding-bottom: 0; }
  .hero h1 { font-size: clamp(3rem, 11.5vw, 6rem); }
  .hero__sub { font-size: 1.0625rem; }
  .hero__note { display: none; }
}

/* ---------- intro statement with inline portholes ---------- */
.intro { padding-block: clamp(6rem, 22vh, 14rem); }
.intro__line { max-width: 22em; margin-inline: auto; text-align: center; font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; }
.thumb { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.28em; margin-inline: 0.2em; }
@media (max-width: 40em) { .intro__line { text-align: left; } }

/* ---------- the dive ---------- */
.dive { position: relative; }
.gauge { position: sticky; top: 4.5rem; height: 0; z-index: 5; pointer-events: none; }
.gauge__inner { position: absolute; right: var(--margin); top: 2rem; text-align: right; }
.gauge__depth { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.gauge__depth small { font-size: 0.4em; font-weight: 500; letter-spacing: 0; }
.gauge__zone { margin-top: 0.4rem; font-weight: 500; color: var(--muted); }
.gauge__track { margin-top: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; }
.gauge__track li { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(232, 243, 240, 0.28); transition: background-color 300ms ease, transform 300ms var(--ease-out); }
.gauge__track li.is-on { background: var(--accent); transform: scale(1.5); }
.gauge, .gauge__inner { transition: opacity 300ms ease; }
.dive:not(.is-active) .gauge__inner { opacity: 0; }

.zone { position: relative; padding-block: clamp(6rem, 14vw, 12rem); min-height: 100svh; display: flex; align-items: center; }
.zone > .wrap { width: 100%; }
.zone--0 { background: var(--z0); }
.zone--1 { background: var(--z1); }
.zone--2 { background: var(--z2); }
.zone--3 { background: var(--z3); }
.zone--4 { background: var(--z4); }
.zone__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: start; }
.zone h2.display { font-size: clamp(3.5rem, 8.4vw, 8.5rem); line-height: 0.95; }
.zone__range { margin-top: 0.75rem; font-size: var(--step-lead); font-weight: 500; }
.zone__body .lead { max-width: 24em; }
.zone__human { margin-top: 1.75rem; display: flex; gap: 0.75rem; align-items: baseline; max-width: 30em; font-weight: 500; }
.zone__human .dot { color: var(--accent); }
.zone__species { display: flex; gap: clamp(1rem, 2.5vw, 2rem); align-items: flex-end; }
.zone__species a { display: grid; gap: 0.75rem; justify-items: center; text-decoration: none; font-weight: 500; }
.zone__species .port { width: clamp(5rem, 9vw, 8.5rem); transition: transform 500ms var(--ease-out); }
.zone__species li:first-child .port { width: clamp(7rem, 13vw, 12rem); }
.zone__species img { transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .zone__species a:hover .port { transform: translateY(-6px); }
  .zone__species a:hover img { transform: scale(1.08); }
}
.zone__species--row { margin-top: 2.5rem; }

/* zone 0: headline left, body below, video porthole right */
.zone--0 .zone__head { grid-column: 1 / 7; }
.zone--0 .zone__body { grid-column: 1 / 7; }
.zone0__video { grid-column: 7 / 13; grid-row: 1 / 4; width: 100%; max-width: 40rem; justify-self: end; background: var(--z1); }
.zone--0 .zone__species { grid-column: 1 / 7; margin-top: 1rem; }

/* zone 1: picture left, text right */
.zone1__pic { grid-column: 1 / 6; grid-row: 1 / 3; width: 100%; }
.zone--1 .zone__head, .zone--1 .zone__body { grid-column: 7 / 13; }

/* zone 2: engraving inside a porthole, as if lit by its own lure */
.zone--2 .zone__head { grid-column: 1 / 7; }
.zone--2 .zone__body { grid-column: 1 / 7; }
.zone2__pic { grid-column: 8 / 13; grid-row: 1 / 3; display: grid; gap: 1rem; text-decoration: none; justify-items: center; }
.zone2__pic .port { width: 100%; background: #fff; }
.zone2__pic img { object-fit: contain; transform: scale(1.12); transition: transform 900ms var(--ease-out); }
.zone2__cap { color: var(--muted); font-size: var(--step-small); text-align: center; }
@media (hover: hover) and (pointer: fine) { .zone2__pic:hover img { transform: scale(1.2); } }

/* zone 3 */
.zone3__pic { grid-column: 1 / 5; grid-row: 1 / 3; width: 100%; align-self: center; }
.zone--3 .zone__head, .zone--3 .zone__body { grid-column: 6 / 13; }

/* zone 4: the one deliberate rest — a number and a line */
.zone4 { display: grid; gap: 2.5rem; }
.zone4__num { font-size: clamp(5.5rem, 19vw, 18rem); line-height: 0.85; font-weight: 600; letter-spacing: -0.06em; color: var(--accent); }
.zone4__num::after { content: " 米"; font-size: 0.2em; letter-spacing: 0; color: var(--ink); }
.zone4__text { display: grid; gap: 1.5rem; max-width: 40rem; margin-left: auto; justify-items: start; }
.zone4__text .btn { margin-top: 0.75rem; }

@media (max-width: 52em) {
  .gauge__inner { top: 1rem; }
  .gauge__depth { font-size: 1.75rem; }
  .gauge__track { display: none; }
  .gauge__inner { top: 0.75rem; display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 1rem; border-radius: 999px; background: var(--z4); }
  .gauge__zone { margin: 0; color: var(--ink); font-size: var(--step-small); }
  .gauge__depth { font-size: 1.25rem; }
  .who__count { display: none; }
  .zone { min-height: 0; }
  .zone__grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .zone0__video, .zone1__pic, .zone3__pic { width: 78vw; justify-self: start; }
  .zone2__pic { width: 82vw; justify-self: center; }
  .zone h2.display { font-size: clamp(3rem, 15vw, 5rem); }
  .zone4__text { margin-left: 0; }
}

/* ---------- paths: tiles that grow ---------- */
.paths { padding-top: var(--section); }
.paths__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 10px; align-items: end; }
.paths__h { grid-column: 1 / 8; grid-row: 1; align-self: start; padding-bottom: 2rem; }
.path { display: grid; gap: 0.6rem; text-decoration: none; align-content: end; }
.path--1 { grid-column: 1 / 4; grid-row: 2; }
.path--2 { grid-column: 4 / 8; grid-row: 2; }
.path--3 { grid-column: 8 / 13; grid-row: 1 / 3; }
.path__tile { display: grid; place-items: center; margin-bottom: 0.9rem; overflow: hidden; transition: background-color 400ms ease; }
.path--1 .path__tile { height: 30vh; background: var(--z0); }
.path--2 .path__tile { height: 44vh; background: var(--accent); }
.path--3 .path__tile { height: 60vh; background: var(--foam); }
.path__tile .port { transition: transform 700ms var(--ease-out); }
.path--1 .port { width: 52%; }
.path--2 .port { width: 62%; }
.path--3 .port { width: 72%; }
.path__name { font-size: var(--step-lead); font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.path__name::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0.5); transition: transform var(--t-hover) var(--ease-out), opacity var(--t-hover) ease; }
.path__text { max-width: 26em; padding-right: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .path:hover .path__tile .port { transform: scale(1.06); }
  .path:hover .path__name::after { transform: scale(1); opacity: 1; }
}
@media (max-width: 52em) {
  .paths__grid { display: grid; grid-template-columns: 1fr; row-gap: 2rem; }
  .paths__h, .path--1, .path--2, .path--3 { grid-column: 1; grid-row: auto; }
  .path--1 .path__tile { height: 34vw; } .path--2 .path__tile { height: 46vw; } .path--3 .path__tile { height: 62vw; }
  .path .port { width: auto; height: 82%; }
}

/* ---------- facts: stepped figure tiles ---------- */
.facts { padding-top: var(--section); }
.facts__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 14vh 12vh 44vh; gap: 8px; }
.fact { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.25rem, 2vw, 1.75rem); }
.fact--a { grid-column: 1 / 7; grid-row: 1 / 4; min-height: 70vh; background: var(--accent); color: var(--accent-ink); border-radius: 50% 50% 0 0 / 9rem 9rem 0 0; padding-top: 5.5rem; }
.fact--a .fact__num { text-align: center; }
.fact--b { grid-column: 7 / 10; grid-row: 2 / 4; background: var(--foam); color: var(--navy); border-radius: 50% 50% 0 0 / 5rem 5rem 0 0; padding-top: 3.5rem; }
.fact--c { grid-column: 10 / 13; grid-row: 3 / 4; align-self: end; height: 34vh; background: var(--surface-2); border-radius: 50% 50% 0 0 / 4rem 4rem 0 0; padding-top: 3rem; }
.fact--b .fact__num, .fact--c .fact__num { text-align: center; }
.fact__h { grid-column: 7 / 13; grid-row: 1; align-self: start; font-size: var(--step-head); line-height: 1.15; letter-spacing: -0.02em; padding-left: 0.5rem; }
.fact__num { font-size: clamp(3.5rem, 5.4vw, 5.75rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }
.fact__num small { font-size: 0.36em; letter-spacing: 0; margin-left: 0.15em; }
.fact__cap { font-weight: 500; max-width: 22em; }
.fact__src { display: block; margin-top: 0.4rem; font-size: var(--step-small); font-weight: 400; opacity: 0.85; }
@media (max-width: 52em) {
  .facts__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 6px; }
  .fact__h { grid-column: 1 / -1; grid-row: 1; padding: 0 0 1.25rem; }
  .fact--a { grid-column: 1 / -1; grid-row: 2; min-height: 56vw; border-radius: 50% 50% 0 0 / 5rem 5rem 0 0; padding-top: 3rem; }
  .fact--b { grid-column: 1; grid-row: 3; min-height: 64vw; margin-top: 1.5rem; }
  .fact--c { grid-column: 2; grid-row: 3; height: auto; min-height: 56vw; margin-top: calc(1.5rem + 32px); }
  .fact--b .fact__num, .fact--c .fact__num { font-size: 11vw; }
  .fact--b .fact__cap, .fact--c .fact__cap { font-size: 0.95rem; }
}

/* ---------- who: two-column list with porthole bullets ---------- */
.who { padding-top: var(--section); }
.who__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 3rem; }
.who__count { color: var(--muted); }
.who__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; row-gap: 2.75rem; }
.who__list a { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.5rem; align-items: start; text-decoration: none; }
.who__list .port { transition: transform 500ms var(--ease-out); }
.who__list b { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step-lead); font-weight: 600; margin-bottom: 0.35rem; }
.who__list i { font-style: normal; font-size: var(--step-small); font-weight: 500; color: var(--accent); white-space: nowrap; padding-top: 0.3rem; }
.who__list b + span { display: block; max-width: 34em; }
@media (hover: hover) and (pointer: fine) { .who__list a:hover .port { transform: scale(1.08); } }
@media (max-width: 52em) { .who__list { grid-template-columns: 1fr; } .who__list a { grid-template-columns: 4rem 1fr; gap: 1.1rem; } }

/* ---------- sign-up: the dive card ---------- */
.signup { margin-top: var(--section); padding-block: clamp(5rem, 10vw, 9rem); }
.signup__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: center; }
.signup__side { grid-column: 7 / 13; display: grid; gap: 1.5rem; }
.signup__form { display: grid; gap: 1.5rem; margin-top: 0.5rem; }
.signup__form fieldset { border: 0; padding: 0; margin: 0; }
.signup__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
@media (max-width: 52em) { .divecard, .signup__side { grid-column: 1 / -1; } .divecard { width: 100%; justify-self: center; } }

/* ---------- the band: one word is the button ---------- */
.band { display: block; position: relative; margin-top: var(--section); min-height: 66svh; background: var(--accent); color: var(--accent-ink); text-decoration: none; border-radius: 50% 50% 0 0 / 7rem 7rem 0 0; overflow: hidden; transition: background-color 0ms, color 0ms; }
.band__line { position: absolute; z-index: 1; left: var(--margin); top: 4.5rem; font-size: var(--step-lead); line-height: 1.4; font-weight: 500; max-width: 15em; }
.band__arrow { position: absolute; right: var(--margin); top: 4.5rem; width: 3rem; height: 3rem; transition: transform 300ms var(--ease-out); }
.band__word { position: absolute; left: var(--margin); right: var(--margin); bottom: 1.5rem; font-size: clamp(7rem, 25vw, 24rem); font-weight: 600; line-height: 0.8; letter-spacing: -0.04em; text-align: left; }
.band:hover, .band:focus-visible { background: var(--ink); color: var(--bg); }
.band:hover .band__arrow { transform: translate(6px, -6px); }
@media (max-width: 52em) { .band { min-height: 46svh; border-radius: 50% 50% 0 0 / 3rem 3rem 0 0; } .band__line { top: 3rem; max-width: 11em; } .band__arrow { width: 2rem; height: 2rem; top: 3rem; } .band__word { font-size: 40vw; } }