/*
 * GDC Experience Page v10 — LOCKED TEMPLATE CSS
 * Source: gdc-template-v10.html (Dave Taylor, locked design)
 * DO NOT MODIFY without Dave approval.
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300&family=Manrope:wght@400;500;600&display=swap');
:root{
--void:#050505;--deep:#0D1117;--surface:#1C2430;
--ink:#f5f4f0;--soft:#c3c6c8;--mute:#6e7276;
--line:rgba(245,244,240,.14);--rule:rgba(245,244,240,.06);--teal:#4DD4C0;
--display:'Cormorant Garamond',serif;--body:Manrope,sans-serif;
--weight:300;--measure:33ch;--curve:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--void);color:var(--ink);overflow-x:hidden}
body{font-family:var(--body);font-size:15px;line-height:2.05;-webkit-font-smoothing:antialiased}
::selection{background:rgba(77,212,192,.12)}
::-webkit-scrollbar{width:0}
img{display:block;width:100%;height:100%;object-fit:cover}
/* main.css:130 is a site-wide `img{max-width:100%;height:auto}` reset, and it is
   enqueued after this sheet — so at equal specificity it won the height, every
   frame on this page letterboxed its photograph instead of filling it, and
   object-fit:cover had nothing to crop. One class deeper is enough to hold the
   v10 intent; v10.css only ever loads on this template, so the reach is the
   same. Whoever adds a frame here: give the frame the height, not the image. */
body.single-gdc_experience img{height:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--body)}

.r{opacity:0;transform:translateY(16px);transition:opacity 1.8s var(--curve),transform 1.8s var(--curve)}
.r.v{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}}

.mark{font-size:8px;font-weight:600;letter-spacing:.8em;text-transform:uppercase;color:rgba(245,244,240,.3)}
.label{font-size:9.5px;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--mute)}
.cap{display:flex;justify-content:space-between;padding:10px 24px 0;font-size:8px;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:rgba(245,244,240,.3)}

/* ═══ V1 — HERO SLIDESHOW ═══ */
.v1{position:relative;height:100vh;height:100svh;overflow:hidden}
.v1-slides{position:absolute;inset:0}
.v1-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.v1-slide.active{opacity:1}
.v1-slide img{position:absolute;inset:0;animation:gdcKenBurns 40s ease-in-out infinite alternate}
@keyframes gdcKenBurns{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.v1-slide img{animation:none}}
/* The dots are a sibling of .v1-bot, not a child, so nothing stops them landing
   in the middle of it — and they did. 16vh off the bottom put the row at y=757
   in a 900px hero while .v1-smis ran 664-799, so five 3px bars sat under
   "warship sunk on purpose, the" and read as accidental underlines. Measured on
   /trips/koh-tao/ and /trips/coral-bay/ at 375 and 1280 alike; the block grew
   past them when it gained the hook, the SMIS and the price line.
   .v1-bot is bottom:0, so its LAST line always ends exactly one padding-bottom
   above the hero floor. Anchoring the dots inside that padding is the only
   position that holds no matter how much copy the block carries: this clamp
   tops out at 26px and that one bottoms out at 36px, so they cannot cross at
   any viewport height. The safe-area term matches .v1-bot's own — without it
   the row hides under an iPhone home indicator. */
.v1-dots{position:absolute;bottom:calc(clamp(14px,2.2vh,26px) + env(safe-area-inset-bottom));left:clamp(24px,5vw,80px);display:flex;gap:8px;z-index:3}
.v1-dot{width:24px;height:3px;background:rgba(245,244,240,.2);border-radius:2px;transition:background .4s,width .4s}
.v1-dot.active{width:32px;background:rgba(245,244,240,.6)}
.v1-title{display:none}
/* The scrim runs the height of the text, not the last third of it. While the
   hero photograph was sizing itself to its own aspect ratio it stopped short
   of this block and the words sat on bare ground, so a gradient that only
   arrived at 70% was enough. The photograph fills the frame now, and the
   title, the location and the hook all sit on top of open water. */
/* The padding-top is the scrim's headroom, and it is load-bearing. .mark is the
   first child of .v1-bot, so with padding-top:0 it sat at 99% of a "to top,
   ...,transparent 100%" gradient — measured alpha 0.012-0.016, i.e. no scrim at
   all. Over a bright hero it contrasted 1.21:1 against its own backdrop and was
   effectively invisible. NO stop change alone can fix that: every stop above the
   mark is already transparent by construction. The gradient needs room to fade in
   ABOVE the mark, which is what the padding buys; the mark then lands at ~78% of
   the block where alpha is ~0.54, and contrast measures 1.88-2.45:1 across eight
   widths from 360 to 1920. The ceiling over a bright backdrop is ~2.4:1 (this mark
   is rgba(245,244,240,.3) — 30% opacity is a deliberate whisper), so this is most
   of what it can ever get. Only the 78% and 89% stops were lifted for it; 34% and
   62% are the originals, so the midtones are untouched.
   Cost, measured at 1440 on /trips/koh-tao/: the block grows 605px -> 767px, so
   the upper hero dims (luminance at y=250 goes 0.202 -> 0.082). That is the price
   of a scrim where there was none. Row-to-row luminance step across the new fade
   is 0.015, against 0.074 for the photo's own detail — the fade is smoother than
   the image it sits on, so it reads as a vignette and not as a band. If it wants
   to be lighter, lower the 78%/89% stops and the padding together; they have to
   move as a pair or the mark slides out of the scrim.
   .v1--no-img .v1-bot sets its own padding-top and is unaffected. */
.v1-bot{position:absolute;bottom:0;left:0;right:0;padding:clamp(112px,18vh,200px) clamp(24px,5vw,80px) clamp(36px,6vh,72px);padding-bottom:calc(clamp(36px,6vh,72px) + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(5,5,5,.92) 0%,rgba(5,5,5,.80) 34%,rgba(5,5,5,.58) 62%,rgba(5,5,5,.54) 78%,rgba(5,5,5,.30) 89%,transparent 100%)}
/* No break-word here. The fit() in the template shrinks this until it stops
   overflowing, and it decides that by comparing scrollWidth to the box — but
   break-word let a long destination wrap mid-word instead of overflowing, so
   scrollWidth never exceeded the box, fit() never shrank anything, and
   MALAPASCUA rendered as MALAPAS / CUA at every width. A word that is too
   wide must overflow, so that the measurement can see it.

   The clamp is a fallback only — fit() sets an inline font-size on every render,
   so this value is what shows before the script runs and all a no-JS reader gets.
   The old one was clamp(48px,15vw,30vw): the max sat ABOVE the preferred, so it
   never clamped anything and 1920px resolved to 288px. 21vw/420px tracks what
   fit() actually lands on at desktop widths, which is what kills the resize flash. */
.v1 h1{font-family:var(--display);font-weight:var(--weight);font-size:clamp(48px,21vw,420px);line-height:.86;text-transform:uppercase;letter-spacing:-.01em}
.v1 .loc{font-family:var(--display);font-weight:var(--weight);font-size:clamp(13px,1.8vw,16px);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.v1-hook{font-family:var(--display);font-weight:var(--weight);font-size:clamp(18px,3.2vw,32px);line-height:1.2;color:var(--ink);margin-top:20px;letter-spacing:.06em;text-transform:uppercase}
.v1-smis{font-family:var(--display);font-weight:var(--weight);font-size:clamp(16px,2.8vw,26px);line-height:1.3;font-style:italic;margin-top:6px;max-width:36ch}
.v1 .price-anchor{font-family:var(--display);font-weight:var(--weight);font-size:clamp(16px,2.5vw,22px);color:var(--soft);margin-top:14px}
.v1 .price-anchor span{color:var(--ink)}

/* ═══ V1 — NO-IMAGE FALLBACK ═══ */
.v1--no-img{height:auto;min-height:50vh;display:flex;align-items:flex-end;background:#050505}
.v1--no-img .v1-bot{position:relative;padding-top:clamp(80px,14vh,140px)}
.v1--no-img .hero-hook{font-family:var(--body);font-size:15px;line-height:2.05;color:var(--mute);max-width:42ch;margin-top:16px}

/* ═══ PROOF BAR ═══ */
.proof-bar{background:#0A0A0A;border-bottom:1px solid rgba(245,244,240,.04);padding:clamp(24px,4vh,36px) clamp(24px,5vw,80px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,48px)}
.proof-bar-item{text-align:center}
.proof-bar-num{font-family:var(--display);font-weight:var(--weight);font-size:clamp(24px,4vw,36px);line-height:1;margin-bottom:4px}
.proof-bar-tag{font-size:8px;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--mute)}

/* ═══ SECTION TEXT ═══ */
.sec{padding:clamp(60px,10vh,100px) clamp(24px,5vw,80px)}
.sec .label{margin-bottom:18px}
.sec h2{font-family:var(--display);font-weight:var(--weight);font-size:clamp(24px,5vw,40px);line-height:1.16;max-width:16ch;margin-bottom:28px}
.sec h2 em{font-style:italic}
.sec p{color:var(--soft);max-width:var(--measure)}
.sec p+p{margin-top:1.4em}
.sec b{color:var(--ink);font-weight:500}
.aside{margin-top:2em;padding-left:16px;border-left:1px solid var(--line);font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:clamp(17px,3vw,22px);line-height:1.45;color:var(--ink);max-width:20ch}

/* ═══ PLATES ═══ */
.plate{width:100%;height:clamp(50vh,75vh,92vh);overflow:hidden}
.plate img{transform:scale(1.04);transition:transform 8s var(--curve)}
.plate.v img{transform:scale(1)}

/* ═══ GALLERY (swipeable) ═══ */
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:3px}
.gallery::-webkit-scrollbar{display:none}
.gal-item{flex:0 0 90%;scroll-snap-align:start;position:relative;overflow:hidden}
/* The caption used to be legible by accident: the photograph stopped short of
   the frame and this sat on the black underneath it. Now the photograph fills
   the frame, so the caption needs the same scrim every other overlay on this
   page already has (.v1-bot, .beat-inner) — otherwise it lands on coral and
   sand and disappears. */
.gal-item .cap-ov{position:absolute;bottom:0;left:0;right:0;padding:32px 14px 10px;font-size:8px;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:rgba(245,244,240,.72);background:linear-gradient(to top,rgba(5,5,5,.85) 0%,rgba(5,5,5,.5) 55%,transparent 100%)}
@media(min-width:768px){.gal-item{flex:0 0 55%}}
@media(min-width:1200px){.gal-item{flex:0 0 45%}}

/* ═══ VALVE ═══ */
.valve{min-height:clamp(36vh,52vh,66vh);display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(56px,10vh,96px) clamp(28px,6vw,80px);background:#0A0A0A;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.valve::before{content:'\201C';position:absolute;top:-0.2em;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(220px,46vw,420px);line-height:1;color:rgba(77,212,192,.028);pointer-events:none;z-index:0}
.valve p{font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:clamp(26px,6vw,44px);line-height:1.28;max-width:14ch;position:relative;z-index:1}
.valve span{color:var(--teal)}

/* ═══ BEAT TIMELINE ═══ */
.timeline{padding:clamp(60px,10vh,100px) 0;background:linear-gradient(180deg,rgba(28,36,48,0) 0%,rgba(28,36,48,.34) 22%,rgba(28,36,48,.34) 78%,rgba(28,36,48,0) 100%)}
.timeline-head{padding:0 clamp(24px,5vw,80px) clamp(12px,1.8vh,18px)}
.timeline-head h2{font-family:var(--display);font-weight:var(--weight);font-size:clamp(24px,5vw,38px);line-height:1.18;max-width:16ch;margin-top:10px}
.timeline-head h2 em{font-style:italic}
.timeline-scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;padding:0 clamp(24px,5vw,80px) clamp(20px,3vh,32px)}
.timeline-scroll::-webkit-scrollbar{display:none}
/* Cinematic beat cards: image fills card, content overlays bottom */
.beat{flex:0 0 clamp(290px,88vw,380px);scroll-snap-align:start;background:var(--deep);border:1px solid rgba(245,244,240,.06);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .3s;position:relative;min-height:260px}
.beat:hover{border-color:rgba(245,244,240,.28)}
.beat-img{height:clamp(280px,45vw,360px);overflow:hidden}
.beat-inner{position:absolute;bottom:0;left:0;right:0;padding:clamp(18px,3vw,24px);background:linear-gradient(to top,rgba(5,5,5,.95) 0%,rgba(5,5,5,.70) 55%,transparent 100%)}
.beat-time{font-family:var(--display);font-weight:var(--weight);font-size:clamp(11px,2vw,13px);line-height:1;margin-bottom:8px;color:var(--teal);letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.beat h3{font-family:var(--display);font-weight:var(--weight);font-style:italic;font-size:clamp(17px,3.5vw,21px);line-height:1.2;margin-bottom:6px}
.beat p{font-size:13px;color:rgba(245,244,240,.72);line-height:1.72}
.beat b{color:var(--ink);font-weight:500}
@media(min-width:768px){.beat{flex:0 0 360px}}

/* ═══ PRICE SECTION ═══ */
.price-sec{padding:clamp(60px,10vh,100px) clamp(24px,5vw,80px)}
.price-sec h2{font-family:var(--display);font-weight:var(--weight);font-size:clamp(28px,6vw,46px);line-height:1.12;max-width:14ch;margin-bottom:28px}
.price-sec h2 em{font-style:italic}
.price-sec p{color:var(--soft);max-width:var(--measure)}
.price-sec p+p{margin-top:1.4em}
.price-sec b{color:var(--ink);font-weight:500}
.price-big{font-family:var(--display);font-weight:var(--weight);font-size:clamp(36px,9vw,56px);margin-top:32px}
/* Stands where .price-big stands, in the same display face, so the absence of a
   rate reads as a stated fact rather than a hole where a number failed to load.
   Sized down and set in --mute because it is a status, not an offer. */
.price-sec .price-pending{font-family:var(--display);font-weight:var(--weight);font-size:clamp(24px,5vw,34px);color:var(--mute);margin-top:32px}
.price-detail{font-size:13px;color:var(--mute);margin-top:6px}
/* The airport transfer. Sits with the price rather than in the assembly list
   above, because it is the one figure on this page that is NOT inside the big
   number — and the sentence's whole job is to say so before checkout does.
   Specificity beats .price-sec p+p (0,1,2), which would otherwise push a 1.4em
   gap between the two halves of one thought. */
.price-sec .price-once{font-size:13px;color:var(--mute);margin-top:6px;max-width:var(--measure)}
/* The assembly. One row per real thing: what it is, then why it is worth having.
   Hairlines rather than bullets — this is a closing section, not a spec sheet. */
.asm{list-style:none;margin:0 0 34px;padding:0;max-width:var(--measure)}
.asm li{padding:14px 0;border-top:1px solid rgba(245,244,240,.09)}
.asm li:last-child{border-bottom:1px solid rgba(245,244,240,.09)}
.asm-name{display:block;color:var(--ink);font-size:15px;font-weight:500;line-height:1.4}
.asm-hook{display:block;font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:15px;color:var(--teal);opacity:.85;margin-top:3px;line-height:1.5}

/* ═══ RICH CARDS (dive sites, experiences, stays) ═══ */
.card-section{padding:clamp(60px,10vh,100px) 0}
.card-section .label{padding-left:clamp(24px,5vw,80px);margin-bottom:18px}
.card-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;padding:0 clamp(24px,5vw,80px)}
.card-rail::-webkit-scrollbar{display:none}

/* DIVE SITE CARDS */
.dive-card{flex:0 0 clamp(300px,88vw,360px);scroll-snap-align:start;background:var(--deep);border:1px solid rgba(245,244,240,.06);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .3s}
.dive-card:hover{border-color:rgba(245,244,240,.28)}
.card-hook{font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:13px;color:var(--teal);margin-top:8px;opacity:.75}
.dive-card-img{height:clamp(220px,30vw,280px);overflow:hidden;position:relative}
.dive-card-body{padding:clamp(16px,2.5vw,20px)}
/* The hook leads the card, so it is sized to be read rather than to be a caption
   under the label. The name follows it, quieter — you know you want the dive
   before you learn what it is called. */
.dive-card .card-hook{font-size:16px;opacity:.95;margin:0 0 6px;line-height:1.45}
.dive-card h3{font-family:var(--display);font-weight:var(--weight);font-size:20px;margin-bottom:8px;color:var(--soft)}
.dive-card p{font-size:13.5px;color:var(--soft);line-height:1.72}
.dive-card .highlights{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dive-card .hl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:rgba(245,244,240,.06);padding:5px 12px;border-radius:6px}
.dive-card .entry{font-size:11px;color:var(--mute);margin-top:8px}

/* EXPERIENCE CARDS */
.exp-card{flex:0 0 clamp(300px,88vw,360px);scroll-snap-align:start;background:var(--deep);border:1px solid rgba(245,244,240,.06);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .3s}
.exp-card:hover{border-color:rgba(245,244,240,.28)}
.exp-card-img{height:clamp(220px,30vw,280px);overflow:hidden}
.exp-card-body{padding:clamp(16px,2.5vw,20px)}
.exp-card h3{font-family:var(--display);font-weight:var(--weight);font-size:20px;margin-bottom:8px}
.exp-card p{font-size:13.5px;color:var(--soft);line-height:1.72}
.exp-card .exp-meta{display:flex;align-items:center;gap:12px;margin-top:10px}
.exp-card .exp-tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:rgba(245,244,240,.06);padding:5px 12px;border-radius:6px}
.exp-card .exp-price{font-family:var(--display);font-weight:var(--weight);font-size:20px}
.exp-card .exp-price span{font-size:10px;color:var(--mute);font-family:var(--body);font-weight:400}

/* STAY CARDS */
.stay-card{flex:0 0 clamp(320px,90vw,400px);scroll-snap-align:start;background:var(--deep);border:1px solid rgba(245,244,240,.06);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .3s}
.stay-card:hover{border-color:rgba(245,244,240,.28)}
.stay-card-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:clamp(250px,32vw,310px)}
.stay-card-gallery::-webkit-scrollbar{display:none}
.stay-card-gallery img{flex:0 0 100%;scroll-snap-align:start;height:100%}
.stay-card-dots{display:flex;justify-content:center;gap:5px;padding:8px 0 0}
.stay-card-dots span{width:5px;height:5px;border-radius:50%;background:rgba(245,244,240,.12)}
.stay-card-dots span:first-child{background:rgba(245,244,240,.4)}
.stay-card-body{padding:clamp(16px,2.5vw,22px)}
.stay-card h3{font-family:var(--display);font-weight:var(--weight);font-size:21px;margin-bottom:4px}
.stay-card .stay-type{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.stay-card p{font-size:13px;color:var(--soft);line-height:1.72}
.stay-card .stay-details{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(245,244,240,.06)}
.stay-card .sd{display:flex;flex-direction:column}
.stay-card .sd-label{font-size:8px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.stay-card .sd-value{font-size:13.5px;color:var(--ink);margin-top:2px}
.stay-card .stay-amenities{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.stay-card .stay-amenities span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:rgba(245,244,240,.06);padding:5px 12px;border-radius:6px}
.stay-card .stay-price{display:flex;align-items:baseline;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(245,244,240,.06)}
.stay-card .stay-price b{font-family:var(--display);font-weight:var(--weight);font-size:24px}
.stay-card .stay-price span{font-size:11px;color:var(--mute)}

/* ═══ DETAIL PANEL (slide-up overlay) ═══ */
.panel-overlay{position:fixed;inset:0;background:rgba(5,5,5,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:200;opacity:0;pointer-events:none;transition:opacity .4s}
.panel-overlay.open{opacity:1;pointer-events:all}
.panel{position:fixed;bottom:0;left:0;right:0;max-height:92vh;max-height:92svh;background:var(--void);border-top:1px solid rgba(245,244,240,.08);border-top-left-radius:24px;border-top-right-radius:24px;z-index:201;transform:translateY(100%);transition:transform .5s var(--curve);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.panel.open{transform:translateY(0)}
.panel-handle{width:40px;height:4px;background:rgba(245,244,240,.2);border-radius:2px;margin:12px auto 0}
.panel-close{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-end;padding:8px 16px 0}
.panel-close button{background:rgba(245,244,240,.06);border:1px solid rgba(245,244,240,.08);border-radius:50%;color:var(--soft);font-size:16px;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.panel-close button:hover{background:rgba(245,244,240,.12);color:var(--ink)}
.panel-gallery{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:clamp(220px,38vh,340px)}
.panel-gallery::-webkit-scrollbar{display:none}
.panel-gallery img{flex:0 0 100%;scroll-snap-align:start}
.panel-gallery-counter{position:absolute;top:14px;right:14px;font-size:10px;font-weight:600;letter-spacing:.2em;color:rgba(245,244,240,.7);background:rgba(5,5,5,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 10px;border-radius:6px;z-index:2;pointer-events:none}
.panel-thumbs{display:flex;gap:4px;padding:10px clamp(20px,5vw,36px) 0;overflow-x:auto;scrollbar-width:none}
.panel-thumbs::-webkit-scrollbar{display:none}
.panel-thumb{flex:0 0 56px;height:40px;border-radius:6px;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color .3s;opacity:.5;transition:opacity .3s}
.panel-thumb.active{border-color:rgba(245,244,240,.3);opacity:1}
.panel-thumb img{width:100%;height:100%;object-fit:cover}
.panel-swipe-hint{text-align:center;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,244,240,.2);padding:6px 0 0}
.panel-body{padding:4px clamp(20px,5vw,36px) 0}
.panel-body h2{font-family:var(--display);font-weight:var(--weight);font-size:clamp(24px,5vw,32px);line-height:1.2;margin-bottom:4px}
.panel-body .panel-sub{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
/* The long hook opens the panel — the reader clicked the short line, this
   finishes it. Sized to be read, above the description that explains it. */
.panel-body .panel-hook{font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:19px;line-height:1.45;color:var(--teal);opacity:.92;margin-bottom:16px}
.panel-body p{font-size:14px;color:var(--soft);line-height:1.85;max-width:50ch}
.panel-body p+p{margin-top:1em}
.panel-body b{color:var(--ink);font-weight:500}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(245,244,240,.04)}
.panel-grid .pg{display:flex;flex-direction:column;gap:2px}
.panel-grid .pg-label{font-size:8px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.panel-grid .pg-value{font-size:14px}
.panel-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.panel-tags span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:rgba(245,244,240,.06);padding:6px 14px;border-radius:6px;border:1px solid rgba(245,244,240,.06)}
.panel-price{display:flex;align-items:baseline;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(245,244,240,.04)}
.panel-price b{font-family:var(--display);font-weight:var(--weight);font-size:clamp(24px,5vw,32px)}
.panel-price span{font-size:12px;color:var(--mute)}
.panel-cta{display:block;width:100%;margin-top:20px;padding:14px;border:1px solid var(--ink);background:none;color:var(--ink);font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;text-align:center;cursor:pointer;border-radius:10px;transition:all .5s var(--curve)}
.panel-cta:hover{background:var(--ink);color:var(--void)}
@media(min-width:768px){.panel{max-width:560px;left:auto;right:0;border-top-left-radius:24px;border-top-right-radius:0;border-left:1px solid rgba(245,244,240,.08);max-height:100vh;max-height:100svh}}

/* ═══ FIGURES ═══ */
.figures{margin:0 clamp(20px,4vw,48px);padding:clamp(40px,8vh,72px) 0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figures>div{padding:clamp(18px,3vh,32px) 8px;text-align:center}
.figures>div:nth-child(odd){border-right:1px solid var(--line)}
.figures>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.fig-n{font-family:var(--display);font-weight:var(--weight);font-size:clamp(34px,9vw,52px);line-height:1}
.fig-l{display:block;margin-top:8px;font-size:8px;font-weight:600;letter-spacing:.44em;text-transform:uppercase;color:var(--mute)}

/* ═══ QUOTE ═══ */
.quote{min-height:clamp(32vh,44vh,52vh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:48px clamp(28px,6vw,80px)}
.quote p{font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:clamp(19px,4vw,26px);line-height:1.42;max-width:20ch}
.quote .src{font-size:8px;letter-spacing:.44em;text-transform:uppercase;color:var(--mute)}

/* ═══ V7 — BUILD YOUR TRIP ═══ */
.v7{padding:clamp(72px,14vh,140px) clamp(24px,5vw,80px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.v7 h2{font-family:var(--display);font-weight:var(--weight);font-size:clamp(26px,5.5vw,42px);line-height:1.18;max-width:15ch}
.v7 h2 em{font-style:italic}
/* The widget is the close. It gets room: every control is a full-width target
   with its own label above it, nothing shares a line with its own question, and
   the thing a guest presses is the only filled surface in the card.
   Inputs sit at 16px — below that iOS zooms the viewport on focus, and a zoomed
   viewport is where sideways scrolling starts. */
.build{width:100%;max-width:520px;background:var(--deep);border:1px solid rgba(245,244,240,.07);border-radius:20px;padding:clamp(20px,5vw,36px);text-align:left;margin-top:12px}
.build h3{font-family:var(--display);font-weight:var(--weight);font-size:clamp(22px,4.6vw,26px);line-height:1.2;text-align:center;margin-bottom:6px}
.build-from{text-align:center;font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);line-height:1.8;margin-bottom:clamp(22px,4vw,30px)}
.build-from b{font-family:var(--display);font-weight:var(--weight);font-size:17px;letter-spacing:.02em;text-transform:none;color:var(--ink)}

/* ── fields ── */
.build-field{display:block;margin-bottom:16px;min-width:0}
.build-field__label{display:block;font-size:9px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.build-input{display:block;width:100%;min-width:0;background:var(--surface);border:1px solid rgba(245,244,240,.10);border-radius:10px;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.35;padding:15px 14px;min-height:54px;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .3s var(--curve)}
.build-input:focus{outline:none;border-color:rgba(155,127,212,.55)}
select.build-input{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236e7276'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
/* color-scheme makes the native picker and the empty-field placeholder render
   against this page's ground rather than a white system sheet. */
input[type=date].build-input{color-scheme:dark;background-image:none;padding-right:12px}
.build-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}

/* ── rooms (radio) and extras (switch) ── */
.build-group{border:0;padding:0;margin:0 0 16px;min-width:0}
.build-group__label{display:block;padding:0;font-size:9px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.build-choice{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:14px 16px;margin-bottom:8px;background:var(--surface);border:1px solid rgba(245,244,240,.08);border-radius:12px;cursor:pointer;transition:border-color .3s var(--curve),background .3s var(--curve)}
.build-choice:last-child{margin-bottom:0}
.build-choice:hover{border-color:rgba(245,244,240,.2)}
.build-choice__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.build-choice__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.build-choice__name{font-size:14.5px;line-height:1.4;color:var(--ink)}
.build-choice__meta{font-size:11px;letter-spacing:.08em;color:var(--mute)}
.build-choice:has(.build-choice__input:checked){border-color:rgba(155,127,212,.45);background:rgba(155,127,212,.07)}
.build-choice__mark{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1px solid rgba(245,244,240,.28);position:relative;transition:border-color .3s var(--curve)}
.build-choice__mark::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--purple);opacity:0;transform:scale(.4);transition:opacity .25s var(--curve),transform .25s var(--curve)}
.build-choice__input:checked~.build-choice__mark{border-color:var(--purple)}
.build-choice__input:checked~.build-choice__mark::after{opacity:1;transform:none}
.build-choice__switch{flex:0 0 auto;width:46px;height:27px;border-radius:14px;background:rgba(245,244,240,.10);border:1px solid rgba(245,244,240,.14);position:relative;transition:background .3s var(--curve),border-color .3s var(--curve)}
.build-choice__switch::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:rgba(245,244,240,.5);transition:transform .3s var(--curve),background .3s var(--curve)}
.build-choice__input:checked~.build-choice__switch{background:var(--purple);border-color:var(--purple)}
.build-choice__input:checked~.build-choice__switch::after{transform:translateX(19px);background:#fff}
.build-choice__input:focus-visible~.build-choice__mark,.build-choice__input:focus-visible~.build-choice__switch{outline:2px solid var(--purple);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.build-choice,.build-choice__mark::after,.build-choice__switch,.build-choice__switch::after{transition:none}}

/* ── the number, and the one thing to press ── */
.build-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
.build-total-label{font-size:9px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--mute)}
.build-total-price{font-family:var(--display);font-weight:var(--weight);font-size:clamp(32px,7vw,42px);line-height:1;transition:opacity .3s var(--curve)}
.build-total-price.is-pricing{opacity:.45}
.build-total-note{font-size:11px;letter-spacing:.06em;color:var(--mute);text-align:right;margin-top:7px}
.build-deposit{font-size:11px;line-height:1.75;color:var(--mute);text-align:center;margin-top:16px}
.build-cta{display:block;width:100%;margin-top:18px;padding:20px;border:0;border-radius:12px;background:var(--purple);color:#fff;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;cursor:pointer;transition:background .4s var(--curve),transform .25s var(--curve)}
.build-cta:hover{background:#a98fe0}
.build-cta:active{transform:translateY(1px)}
.build-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.v7 .conf{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);margin-top:8px}
.v7 .terms{font-size:10px;color:var(--mute);line-height:2;margin-top:8px;max-width:30ch}
.v7 .whisper{font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:15px;color:var(--mute);margin-top:40px;max-width:22ch}

/* ═══ BRIDGE (D-COPY-ENGINE-1 natural flow) ═══ */
.bridge{padding:clamp(40px,7vh,72px) clamp(24px,5vw,80px);background:#0A0A0A;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bridge p{font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:clamp(17px,3.2vw,22px);line-height:1.55;color:rgba(245,244,240,.72);max-width:var(--measure);border-left:2px solid rgba(77,212,192,.28);padding-left:clamp(16px,2.5vw,24px)}
.bridge p+p{margin-top:1.2em}
.bridge-close{text-align:center}
.bridge-close p{color:var(--mute);font-size:clamp(13px,2.4vw,16px);margin:0 auto;max-width:24ch;border-left:none;padding-left:0}

/* ═══ SECTION NAV ═══
   Sticky header bar. Slides down from top on scroll. Shows section links
   centered with pill-style active state. Hidden on mobile — the floating
   CTA is enough. Frosted glass over #050505. */
.secnav{position:fixed;top:0;left:0;right:0;z-index:99;display:none;align-items:center;justify-content:center;gap:clamp(16px,3vw,32px);padding:14px 24px;background:rgba(5,5,5,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(245,244,240,.06);opacity:0;pointer-events:none;transform:translateY(-100%);transition:opacity .4s var(--curve),transform .4s var(--curve)}
.secnav.show{opacity:1;pointer-events:auto;transform:translateY(0)}
@media(min-width:768px){.secnav{display:flex}}
.secnav-link{display:flex;align-items:center;gap:0;padding:8px 14px;border-radius:20px;text-decoration:none;transition:background .3s var(--curve)}
.secnav-link:hover{background:rgba(245,244,240,.06)}
.secnav-dot{display:none}
.secnav-label{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1;color:rgba(245,244,240,.45);transition:color .3s var(--curve)}
.secnav-link:hover .secnav-label,.secnav-link.is-here .secnav-label{color:var(--silk)}
.secnav-link.is-here{background:rgba(155,127,212,.12)}
.secnav-link.is-here .secnav-label{color:var(--purple)}
.secnav-link:focus-visible{outline:1px solid var(--teal);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.secnav,.secnav-label{transition:none}}

/* ═══ FLOATING CTA ═══
   A card that floats, not a bar that spans. Bottom of the viewport on a phone,
   bottom-right corner on a desktop, out of the way of the detail panel (z-index
   100 sits under the panel's 201, so an open panel covers it).
   It carries the price because the price is the reason to press it. */
.sticky{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:16px;right:16px;background:rgba(10,10,10,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(155,127,212,.24);border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.52);padding:10px 10px 10px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:100;opacity:0;transform:translateY(140%);pointer-events:none;transition:transform .5s var(--curve),opacity .35s var(--curve)}
.sticky.show{opacity:1;transform:none;pointer-events:auto}
.sticky-left{display:flex;flex-direction:column;min-width:0}
.sticky-price{font-family:var(--display);font-weight:var(--weight);font-size:18px;line-height:1.2;white-space:nowrap}
.sticky-per{font-size:9px;line-height:1.6;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The one button on the page that is filled rather than outlined. It is the
   only action, so it is allowed to be the loudest thing in its corner. */
.sticky-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:13px 20px;border:0;border-radius:10px;background:var(--purple);color:#fff;font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-family:var(--body);line-height:1;white-space:nowrap;transition:background .4s var(--curve),transform .4s var(--curve)}
.sticky-btn:hover{background:#a98fe0}
.sticky-btn:active{transform:translateY(1px)}
.sticky-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* No price yet — the button is the whole card, so it fills it. */
.sticky:not(:has(.sticky-left)){padding:10px}
.sticky:not(:has(.sticky-left)) .sticky-btn{flex:1 1 auto;text-align:center}
@media(prefers-reduced-motion:reduce){.sticky{transition:opacity .2s linear;transform:none}}

/* ═══ DESKTOP ═══ */
@media(min-width:768px){
:root{--measure:42ch}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px)}
.two-col .sec{padding-right:clamp(8px,1.5vw,20px)}
.two-col .col-media{display:flex;align-items:center;padding:clamp(48px,8vh,80px) clamp(32px,4vw,60px)}
.figures{max-width:640px;margin:0 auto}
.build{max-width:520px}

/* The floating CTA leaves the bottom edge and takes the right corner. */
.sticky{left:auto;right:clamp(24px,3vw,40px);bottom:clamp(24px,3vw,40px);width:auto;max-width:360px;padding:12px 12px 12px 22px;gap:20px}
.sticky-price{font-size:20px}
.sticky-per{font-size:9.5px}
.dive-card,.exp-card{flex:0 0 360px}
.stay-card{flex:0 0 420px}

/* Wider plates on desktop — full bleed visual breathing */
.plate{height:clamp(280px,40vh,480px)}
.plate img{height:100%;width:100%;object-fit:cover}

/* Gallery items bigger on desktop */
.gallery{height:clamp(240px,35vh,400px)}

/* Crew bio lead paragraph — wider read on desktop */
.crew-lead-bio{max-width:52ch}

/* Valve — more vertical breathing on desktop */
.valve{padding:clamp(80px,14vh,160px) 24px}

/* Bridge text — let it breathe */
.bridge{padding:clamp(48px,8vh,96px) 24px}

/* Honest section — wider measure for the body text */
.sec h2+.r{max-width:48ch}
}
@media(min-width:1200px){
:root{--measure:48ch}
.dive-card,.exp-card{flex:0 0 400px}
.stay-card{flex:0 0 460px}

/* Larger plates on wide screens */
.plate{height:clamp(360px,45vh,560px)}
.gallery{height:clamp(300px,40vh,480px)}

/* Valve becomes a statement on wide screens */
.valve p{font-size:clamp(36px,5vw,52px);max-width:16ch}
}

/* ═══ DEMO LABELS — D-POUR-PURPOSE-1 ═══
   Added on top of the locked template. A poured page is a demo; every zone
   Go Dive Club filled says so, and says what the provider does about it. */
:root{--purple:#9B7FD4}
.demo-tag{display:inline-flex;align-items:center;gap:9px;margin-left:14px;padding:4px 12px;border:1px solid rgba(155,127,212,.32);border-radius:2px;font-family:var(--body);font-size:8px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;line-height:1.7;color:var(--purple);white-space:nowrap;vertical-align:middle}
.demo-tag b{font-weight:600;opacity:.85}
.demo-tag a{color:var(--purple);opacity:.72;border-bottom:1px solid rgba(155,127,212,.3);transition:opacity .4s var(--curve)}
.demo-tag a:hover{opacity:1}
.demo-tag--block{display:inline-flex;margin:0 0 20px;white-space:normal}
.price-sec .demo-tag--block{margin-bottom:26px}
.demo-tag--hero{margin:14px 0 0;white-space:normal}
.v1-bot .demo-tag{background:rgba(5,5,5,.42)}
.quote+.demo-tag--block,body>.demo-tag--block{margin:0 clamp(24px,5vw,80px) 20px}
@media(max-width:640px){
.demo-tag{margin-left:0;margin-top:10px;font-size:7.5px;letter-spacing:.26em;white-space:normal}
.label .demo-tag{display:flex;width:max-content;max-width:100%}
}

/* Example page banner — a page Go Dive Club invented as proof for providers */
.demo-ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,3vw,28px);padding:18px clamp(24px,5vw,80px);border-top:1px solid rgba(155,127,212,.22);border-bottom:1px solid rgba(155,127,212,.22);background:rgba(155,127,212,.05)}
.demo-ribbon-mark{font-family:var(--body);font-size:8px;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--purple);white-space:nowrap}
.demo-ribbon p{font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:clamp(14px,2.4vw,17px);line-height:1.6;color:var(--soft);flex:1 1 320px;margin:0}
.demo-ribbon-cta{font-family:var(--body);font-size:8px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--purple);padding:9px 20px;border:1px solid rgba(155,127,212,.4);white-space:nowrap;transition:background .4s var(--curve)}
.demo-ribbon-cta:hover{background:rgba(155,127,212,.1)}
@media(max-width:640px){.demo-ribbon{gap:12px;padding:16px 24px}.demo-ribbon-cta{width:100%;text-align:center}}

/* What the provider still owes the page */
.demo-missing{padding:clamp(40px,7vh,72px) clamp(24px,5vw,80px);border-top:1px solid rgba(155,127,212,.18)}
.demo-missing .label{display:block;color:var(--purple);margin-bottom:16px}
.demo-missing p{font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:clamp(15px,2.8vw,19px);line-height:1.55;color:var(--soft);max-width:var(--measure)}
.demo-missing ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.demo-missing li a{display:inline-block;padding:9px 18px;border:1px solid rgba(155,127,212,.32);font-size:8.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--purple);transition:background .4s var(--curve)}
.demo-missing li a:hover{background:rgba(155,127,212,.1)}

/* Experience card badges — every card type carries them (D-HUB-REDESIGN-1) */
.exp-card .exp-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.exp-card .exp-badges span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:rgba(245,244,240,.06);padding:5px 12px;border-radius:6px}

/* ═══ PANEL NAVIGATION — D-PANEL-NAV-1 ═══ */
/* An empty gallery was rendering as a 340px void that swallowed the close
   button on every page without photos. Collapse it. */
.panel-gallery:empty{display:none}
.panel-gallery:empty+.panel-body{padding-top:14px}
/* A room with no photograph of its own. The gallery is a fixed clamp(250px,32vw,310px)
   tall, so an empty one left a dead slab above the words — which reads as a broken
   image, not as a gap. Collapse it and let the card be a text card. Same rule the
   panel above has had all along. */
.stay-card-gallery:empty{display:none}
.panel-close{z-index:10}
.panel-close button{width:44px;height:44px;background:rgba(245,244,240,.10);border-color:rgba(245,244,240,.16);font-size:17px}
.panel-close button:active{background:rgba(245,244,240,.2)}
[data-panel-open]{cursor:pointer}
[data-panel-open]:focus-visible{outline:1px solid var(--teal);outline-offset:3px}

.panel-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding:9px 0 0;border-top:1px solid rgba(245,244,240,.08)}
.panel-nav-spacer{flex:1 1 0}
.panel-nav-count{font-size:8px;font-weight:600;letter-spacing:.3em;color:var(--mute);white-space:nowrap;flex:0 0 auto}
/* D-TAP-44 — the prev/next chips are how a guest walks the day, and they measured
   29px tall at 375px (13px label x 1.3 leading + 6px padding a side). WCAG 2.5.8 and
   Apple's HIG both want 44. The label keeps its size; the button box grows around it,
   and .panel-nav gives back the 15px it costs (padding-top 16->9, margin-top 22->18)
   so the label lands within half a pixel of where it always did. */
.panel-nav-btn{flex:1 1 0;display:flex;align-items:center;gap:8px;background:none;border:0;padding:6px 0;min-height:44px;cursor:pointer;color:var(--teal);text-align:left;min-width:0}
.panel-nav-btn--next{justify-content:flex-end;text-align:right}
.panel-nav-btn .pn-arrow{font-size:15px;line-height:1;opacity:.75;flex:0 0 auto}
.panel-nav-btn .pn-label{font-family:var(--display);font-style:italic;font-weight:var(--weight);font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.8;transition:opacity .3s var(--curve)}
.panel-nav-btn:hover .pn-label,.panel-nav-btn:focus-visible .pn-label{opacity:1}
.panel-nav-btn:focus-visible{outline:1px solid var(--teal);outline-offset:2px}
@media(max-width:520px){.panel-nav-btn .pn-label{font-size:13px}}

/* Hosted by — the page sells the place, this names who runs it */
.hosted-by{font-size:9px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(245,244,240,.42);margin-top:10px}
.hosted-by span{color:var(--teal);opacity:.85}

/* ═══ HERO — ENTRANCE ANIMATIONS ═══ */
.v1-bot .mark{animation:gdcFadeUp 1.2s .2s var(--curve) both}
.v1-bot h1{animation:gdcFadeUp 1.5s .5s var(--curve) both}
.v1-bot .loc{animation:gdcFadeUp 1.2s .7s var(--curve) both}
.v1-bot .hosted-by{animation:gdcFadeUp 1.2s .85s var(--curve) both}
.v1-bot .v1-hook{animation:gdcFadeUp 1.2s 1.0s var(--curve) both}
.v1-bot .v1-smis{animation:gdcFadeUp 1.2s 1.15s var(--curve) both}
.v1-bot .price-anchor{animation:gdcFadeUp 1.2s 1.3s var(--curve) both}
@keyframes gdcFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.v1-bot .mark,.v1-bot h1,.v1-bot .hosted-by,.v1-bot .v1-hook,.v1-bot .v1-smis,.v1-bot .price-anchor{animation:none;opacity:1}}

/* ═══ SCROLL CUE ═══ */
.scroll-cue{position:absolute;bottom:clamp(16px,3vh,28px);left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;pointer-events:none}
.scroll-cue span{display:block;width:1px;height:36px;background:linear-gradient(to bottom,rgba(245,244,240,.55),transparent);animation:scrollPulse 2.2s ease-in-out infinite;transform-origin:top center}
@keyframes scrollPulse{0%,100%{opacity:.2;transform:scaleY(.55)}55%{opacity:.85;transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.scroll-cue{display:none}}

/* ═══ PANEL CLOSE BUTTON — Z-INDEX BOOST ═══ */
.panel-close{z-index:50}
.panel-close button{position:relative;z-index:51}

/* ═══ EXP CARD — VISUAL DISTINCTION (purple vs teal for dive) ═══ */
.exp-card{border-top:2px solid rgba(155,127,212,.22)}
.exp-card:hover{border-top-color:rgba(155,127,212,.55);border-color:rgba(155,127,212,.36)}
.exp-card .exp-tag{background:rgba(155,127,212,.08);color:rgba(155,127,212,.7)}
.exp-card .exp-badges span{background:rgba(155,127,212,.08);color:rgba(155,127,212,.65)}

/* ═══ BRIDGE — IMAGE BACKGROUND ═══ */
.bridge[style]{background-size:cover;background-position:center;position:relative;isolation:isolate}
.bridge[style]::before{content:'';position:absolute;inset:0;background:rgba(5,5,5,.91);z-index:-1}

/* ═══ STAY CARD — PHOTO COUNT BADGE ═══ */
.stay-card-gallery{position:relative}
.stay-count-badge{position:absolute;bottom:10px;right:12px;font-size:10px;font-weight:600;letter-spacing:.14em;color:rgba(245,244,240,.88);background:rgba(5,5,5,.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:4px 10px;border-radius:6px;z-index:2;pointer-events:none}

/* ═══ BEAT CARDS — TIME AS CONTEXT, NOT LEAD ═══ */
.beat-time{font-size:9px;letter-spacing:.14em;opacity:.45;margin-bottom:0;margin-top:6px}

/* A beat with no photograph. .beat-inner is absolute so the words can sit on
   the picture; with no picture the rail stretched those cards to the height of
   a sibling that had one and printed the title at the foot of a black
   rectangle, under a gradient fading into more black. The words come back into
   flow, from the top, and the gradient goes. */
.beat--flat .beat-inner{position:static;background:none}
.beat--flat{min-height:0;display:flex;align-items:flex-start}
.beat--flat .beat-inner{width:100%}

/* ═══ SECTION RULE ═══ */
.section-rule{border:none;border-top:1px solid var(--rule);margin:clamp(48px,7vh,80px) clamp(24px,5vw,80px)}
.section-rule--tight{margin-top:clamp(28px,4vh,44px);margin-bottom:clamp(28px,4vh,44px)}

/* ═══ OFFERING HOOK — THE MINI-SMIS ═══
   On an offering the hook runs ABOVE the title: it is the line that earns the
   name underneath it, so it leads and the name lands. Teal, italic, the same
   voice the dive-site and stay hooks speak in — the purple override that used
   to sit here made the offerings rail read as a different page. */
.exp-card .card-hook{color:var(--teal);opacity:.82;margin:0 0 7px;line-height:1.5}

/* ═══ STAY CARD — THE ROOM ITSELF ═══
   A guest books a room, not a building. Name the rooms above the specs. */
.stay-card .stay-rooms,.panel-body .stay-rooms{display:flex;flex-direction:column;gap:3px;margin-top:14px}
.stay-card .stay-rooms-label,.panel-body .stay-rooms-label{font-size:8px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.stay-card .stay-rooms-list{font-size:13.5px;color:var(--ink);line-height:1.6}
.panel-body .stay-rooms{margin-top:18px}
.panel-body .stay-rooms-list{font-size:14px;color:var(--ink);line-height:1.6}
.stay-card .stay-details{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}

/* ═══ MOBILE — THUMB SPACING, ROOM TO READ ═══
   The rails were built desktop-out: 16px card padding and a 14px gutter put
   body copy against the card edge and two cards inside one thumb's reach.
   Cards hold at 88-90vw so the next one always peeks; everything inside them
   gets air. */
@media(max-width:640px){
.card-rail,.timeline-scroll{gap:16px;scroll-padding-left:24px}
.dive-card-body,.exp-card-body,.stay-card-body{padding:20px}
.beat-inner{padding:20px}
.dive-card p,.exp-card p,.stay-card p{font-size:14px;line-height:1.8}
.dive-card h3,.exp-card h3{font-size:21px;line-height:1.25;margin-bottom:10px}
.stay-card h3{font-size:22px;line-height:1.25}
.dive-card .hl,.exp-card .exp-tag,.exp-card .exp-badges span,.stay-card .stay-amenities span{padding:7px 14px;line-height:1.5}
.dive-card .highlights,.exp-card .exp-badges,.stay-card .stay-amenities{gap:7px}
.stay-card .stay-details{grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:16px}
.stay-card .sd-value{font-size:14px;line-height:1.5}
.exp-card .exp-meta{flex-wrap:wrap;gap:10px;margin-top:14px}
.stay-card .stay-price,.exp-card .exp-price{margin-top:18px}
.section-rule{margin:44px 24px}
.section-rule--tight{margin-top:28px;margin-bottom:28px}
.sec{padding-left:24px;padding-right:24px}
.panel-body{padding-left:24px;padding-right:24px}
.panel-tags span{padding:8px 15px}
.panel-cta{padding:17px}
}

/* ═══ CREW — WHO YOU DIVE WITH ═══ */
/* Ground and border match .exp-card / .stay-card exactly: the crew row is a
   card on the same page as every other card, and a second card colour would
   read as a second design. */
.crew-sec{padding-bottom:clamp(56px,9vh,110px)}
.crew-sec h2{margin-bottom:clamp(28px,4vh,40px);max-width:22ch}
.crew-lead-bio{font-size:clamp(15px,1.6vw,17px);line-height:2.05;color:var(--silk);max-width:60ch;margin-bottom:clamp(32px,5vh,48px)}
.crew-grid{display:grid;grid-template-columns:1fr;gap:clamp(12px,2vw,18px)}
.crew-card{display:flex;align-items:center;gap:clamp(14px,2.4vw,20px);background:var(--deep);border:1px solid rgba(245,244,240,.06);border-radius:16px;padding:clamp(14px,2.2vw,20px);transition:border-color .3s var(--curve)}
.crew-card:hover{border-color:rgba(245,244,240,.28)}
.crew-photo{flex:0 0 auto;width:clamp(56px,9vw,72px);height:clamp(56px,9vw,72px);border-radius:50%;overflow:hidden;background:rgba(245,244,240,.05)}
.crew-photo img{border-radius:50%}
.crew-photo--initials{display:flex;align-items:center;justify-content:center;border:1px solid rgba(77,212,192,.24);background:rgba(77,212,192,.05)}
.crew-photo--initials span{font-family:var(--display);font-weight:var(--weight);font-size:clamp(19px,3vw,23px);letter-spacing:.06em;line-height:1;color:var(--teal)}
.crew-card-body{min-width:0}
.crew-card h3{font-family:var(--display);font-weight:var(--weight);font-size:clamp(19px,2.6vw,22px);line-height:1.25;margin-bottom:4px}
/* Two classes, because .sec p already claims colour and measure on every
   paragraph inside a .sec and would otherwise win on specificity. */
.crew-card .crew-role{max-width:none;font-size:9.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;line-height:1.9;color:var(--mute)}
.crew-card .crew-bio{margin-top:8px;max-width:44ch;font-size:13.5px;line-height:1.72;color:var(--soft)}
@media(min-width:768px){.crew-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.crew-grid{grid-template-columns:1fr 1fr 1fr}}

/* ═══ OFFERINGS — THREE RAILS, NOT ONE ═══
   A certification, a sunset boat and a rash guard were the same card in the
   same rail, so the reader had to read every one to work out which of the three
   they were looking at. They are three sections now, and the two that are not
   "beyond the diving" get the treatment their content asks for.

   Certifications keep the full card — a course is a decision, and the card has
   to carry what it includes. Gear does not: a rash guard is a picture, a name
   and a number, and a 360px card in a scroll rail spent a screen and a half
   saying that. It lays out as a product grid at the card's own size, so five
   items read as five items instead of a rail nobody scrolls. */
.exp-includes{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.exp-includes-label{display:block;font-size:8px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.exp-includes ul{list-style:none;display:flex;flex-direction:column;gap:3px}
.exp-includes li{font-size:13px;line-height:1.6;color:var(--soft);padding-left:14px;position:relative}
.exp-includes li::before{content:'';position:absolute;left:0;top:.68em;width:5px;height:1px;background:var(--teal);opacity:.6}

/* The grid is the rail with its overflow taken away: same gutters, same gap, so
   a gear section lines up with the sites rail above it rather than sitting in
   its own margin. */
.card-rail--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));overflow:visible;gap:clamp(10px,1.6vw,16px)}
.card-rail--grid .exp-card{flex:none;width:auto}
.exp-card--merch .exp-card-img{height:clamp(150px,20vw,190px)}
.exp-card--merch .exp-card-body{padding:clamp(12px,1.8vw,16px)}
.exp-card--merch h3{font-size:17px;line-height:1.25;margin-bottom:6px}
.exp-card--merch p{font-size:12.5px;line-height:1.68}
.exp-card--merch .exp-meta{margin-top:10px}
.exp-card--merch .exp-price{font-size:17px}
@media(max-width:640px){
.card-rail--grid{grid-template-columns:1fr 1fr;gap:12px}
.exp-card--merch .exp-card-body{padding:14px}
.exp-card--merch h3{font-size:16px}
.exp-card--merch p{font-size:12.5px;line-height:1.7}
}

/* ═══ V2 — THE YES ═══
   The first thing after the proof bar, and the section that has to earn the
   rest of the scroll. It is a magazine spread: a small label, one column of
   prose narrow enough to read in a single eye movement, and a pullquote that is
   obviously a different kind of object from the prose above it.

   Three things this block is fixing, all of them small and all of them why it
   read as a text dump:

   - .sec's own 60-100px top padding put V2 hard against the proof bar. The
     container carries the breathing room now and .sec's top pad is zeroed, so
     the two do not stack to 240px.
   - .label is a <span>. `.sec .label{margin-bottom:18px}` has been inert on it
     the whole time — vertical margin does nothing on an inline box. It needs
     display:block before the gap exists.
   - `.aside` (0,1,0) loses to `.sec p` (0,1,1), so the pullquote was quietly
     rendering in body colour at the body measure — designed as a pullquote,
     shipped as another paragraph. `.v2 .aside` (0,2,0) wins.

   Scoped to .v2 on purpose: .two-col is V2 and V5 both, and V5 is not being
   touched here. */
.v2{padding-top:clamp(80px,12vh,140px)}
.v2>.sec{padding-top:0}
.v2>.sec .label{display:block;margin-bottom:clamp(26px,4vh,42px)}
/* div.r and p.aside, not bare .r. Every child of the section carries .r — it is
   the scroll-reveal hook, not a content class — so `.v2>.sec>.r` also matched
   the label and the pullquote, and at (0,3,0) it outranked `.v2 .aside` and
   handed the pullquote a 38ch measure. That is why the quote measured 414px
   against 359px of prose while its own rule said 20ch. */
.v2>.sec>div.r{max-width:38ch}
.v2>.sec>div.r p{max-width:38ch}
.v2>.sec>div.r p+p{margin-top:1.5em}
/* 27ch in the display face at 25px is ~294px against 359px of prose: clearly
   inside the body measure, which is the point of a pullquote, without the
   four-words-a-line sliver that 20ch rendered. Both numbers measured on the
   served page, not guessed.

   The rule takes its colour from the same token as the text, mixed down.
   Hardcoding #4DD4C0 was wrong: main.css re-points --teal at --gdc-teal-dark
   on :root, so every other teal on the page renders #2BA893 and the literal
   would have been the one teal that did not match its own text. var(--line)
   is the fallback for a browser without color-mix. */
.v2>.sec>p.aside{max-width:27ch;margin-top:clamp(38px,5.5vh,60px);padding-left:clamp(16px,2vw,22px);border-left:1px solid var(--line);border-left-color:color-mix(in srgb,var(--teal) 42%,transparent);color:var(--teal);font-size:clamp(19px,3.4vw,25px);line-height:1.4}

/* ── Provider brief ───────────────────────────────────────────────────────────
   The operator's ask on a demo card — what we need from them to make it real.
   Printed by gdc_v10_provider_brief(), which renders in provider mode only, so
   this block never reaches a guest. It reads as an aside, not as page copy:
   the guest's paragraphs above it are the page, this is a note in the margin. */
.panel-provider-brief{
  margin-top:28px;padding:20px 22px;
  border:1px solid rgba(155,127,212,.28);border-radius:12px;
  background:rgba(155,127,212,.06);
}
.panel-provider-brief .pb-label{
  display:block;margin-bottom:10px;
  font-family:var(--body);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:#9B7FD4;
}
.panel-provider-brief p{
  margin:0 0 10px;font-size:14px;line-height:1.75;opacity:.88;
}
.panel-provider-brief p:last-child{margin-bottom:0}