/* ═══════════════════════════════════════════════════════════════
   Dive On Krk — styles.css
   Extracted from index.html. Design tokens live on :root only —
   never hardcode a colour, radius or spacing value below.
═══════════════════════════════════════════════════════════════ */

:root {
    /* surfaces, light → dark */
    --abyss-1000: #020d13;
    --abyss-950:  #03151e;
    --deep-900:   #072431;
    --deep-800:   #0b3343;

    /* accents */
    --aqua-500:   #50c8da;
    --aqua-400:   #72d8e5;
    --teal-500:   #2a9d8f;
    --gold-500:   #efc249;

    /* text */
    --foam-100:   #e6f4f4;
    --foam-300:   #c5dddd;
    --muted:      rgba(222,241,241,.68);
    --faint:      rgba(222,241,241,.56);
    --border:     rgba(100,211,226,.18);
    --border-str: rgba(100,211,226,.38);

    /* layout */
    --section-space: clamp(72px,8vw,108px);
    --content-max:   1180px;
    --reading-max:   680px;
    --gutter:        clamp(20px,4vw,32px);

    /* radius / shadow / motion */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 40px;
    --sh-card: 0 18px 44px -30px rgba(0,0,0,.75);
    --sh-lift: 0 24px 60px -34px rgba(0,0,0,.8);
    --t-fast: .2s ease;
    --t-base: .3s ease;
    --t-slow: .45s cubic-bezier(.16,1,.3,1);
}

/* ── self-hosted fonts ──────────────────────────────────────────
   Google Fonts was render-blocking (~2 s on throttled mobile) and its
   late swap moved the whole hero (CLS 0.21). Same files, served from
   assets/fonts/ — latin + latin-ext subsets only. See fonts/README.md.
   Do NOT re-add the fonts.googleapis.com <link>.
─────────────────────────────────────────────────────────────── */
@font-face {
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/cormorant-garamond-400i-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/cormorant-garamond-400i-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/cormorant-garamond-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/cormorant-garamond-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/jost-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/jost-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/jost-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/jost-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; scroll-padding-top:88px; }
body {
    background:var(--abyss-1000);
    color:var(--foam-100);
    font-family:'Jost',sans-serif;
    font-weight:300;
    font-size:16px;
    line-height:1.65;
    overflow-x:hidden;
}
::selection { background:rgba(80,200,218,.28); color:#fff; }
a { color:inherit; }
img { display:block; max-width:100%; }
:where(a,button,summary,[tabindex]):focus-visible {
    outline:2px solid var(--aqua-400);
    outline-offset:3px;
    border-radius:4px;
}

/* film grain — deliberately near-invisible (§16) */
body::after {
    content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
    opacity:.015;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── layout helpers ─────────────────────────────────────────── */
.wrap { width:100%; max-width:var(--content-max); margin:0 auto; padding:0 var(--gutter); }
section { position:relative; z-index:1; }
.sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* section surfaces — the page needs visible rhythm, not one flat dark (§2.1) */
.band       { background:var(--abyss-950); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.band-deep  { background:linear-gradient(180deg, var(--abyss-1000), var(--deep-900) 55%, var(--abyss-1000)); }
.band-soft  { background:var(--abyss-950); }

/* localised caustic glow — no longer fixed behind the whole page (§16) */
.has-glow { overflow:hidden; }
.has-glow::before {
    content:''; position:absolute; z-index:0; pointer-events:none;
    top:-30%; left:50%; width:120%; height:150%; transform:translateX(-50%);
    background:
        radial-gradient(38% 42% at 22% 22%, rgba(80,200,218,.10), transparent 62%),
        radial-gradient(42% 46% at 80% 12%, rgba(42,157,143,.10), transparent 64%);
    filter:blur(8px);
}
.has-glow > * { position:relative; z-index:1; }

.eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--aqua-500); font-weight:400;
}
.eyebrow::before { content:''; width:24px; height:1px; background:var(--aqua-500); opacity:.7; }

h2.title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(38px,4.6vw,58px); line-height:1.02; letter-spacing:-.02em; margin:18px 0 0;
}
h2.title.sm { font-size:clamp(30px,3.4vw,42px); }
h2.title em, h1 em { font-style:italic; font-weight:400; color:var(--aqua-500); }  /* only the 400 italic face is shipped */
.lead { color:var(--muted); max-width:var(--reading-max); margin-top:18px; font-size:clamp(16px,1.4vw,18px); }
.sec-head { display:flex; flex-direction:column; align-items:flex-start; }
.sec-head.center { align-items:center; text-align:center; }
.sec-head.center .lead { text-align:center; }

/* reveal on scroll — smaller travel, shorter time (§16) */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }
.reveal--d1 { transition-delay:.06s; }
.reveal--d2 { transition-delay:.12s; }
.reveal--d3 { transition-delay:.18s; }

/* ── nav ────────────────────────────────────────────────────── */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:200;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px var(--gutter); transition:background var(--t-base), padding var(--t-base), border-color var(--t-base);
    border-bottom:1px solid transparent;
}
.nav.scrolled {
    background:rgba(3,21,30,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    padding:9px var(--gutter); border-bottom-color:var(--border);
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; min-height:44px; }
.brand-mark {
    width:38px; height:38px; flex:none; border-radius:50%; object-fit:cover;
    border:1px solid var(--border); background:#0098bb;
}
.brand-name { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:500; letter-spacing:.02em; line-height:1; color:var(--foam-100); white-space:nowrap; }
.brand-name span { color:var(--aqua-500); }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a {
    display:inline-flex; align-items:center; min-height:44px;
    font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
    text-decoration:none; transition:color var(--t-fast); position:relative; padding:11px 0;
}
.nav-links a::after { content:''; position:absolute; left:0; bottom:9px; width:0; height:1px; background:var(--aqua-500); transition:width var(--t-base); }
.nav-links a:hover { color:var(--foam-100); }
.nav-links a:hover::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:14px; }

/* lang switcher — bigger hit area (§5).
   Below 560px it moves into the mobile menu: five buttons + brand +
   hamburger do not fit a 320px bar, and the hamburger lost. */
.lang-sw-desktop, .lang-sw-mobile { display:flex; align-items:center; }
.lang-sw-mobile { justify-content:center; }
.lang-btn {
    background:none; border:none; cursor:pointer;
    font-family:'Jost',sans-serif; font-size:12px; font-weight:400;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--faint); padding:11px 10px; transition:color var(--t-fast); line-height:1;
    min-height:44px; min-width:34px;
}
.lang-btn:hover { color:var(--foam-100); }
.lang-btn.active { color:var(--aqua-500); }
.lang-btn + .lang-btn { border-left:1px solid var(--border); }

/* hamburger */
.hamburger { display:none; width:44px; height:44px; flex:none; border:none; background:none; cursor:pointer; position:relative; }
.hamburger span { position:absolute; left:11px; right:11px; height:2px; background:var(--foam-100); border-radius:2px; transition:transform var(--t-slow), opacity var(--t-fast), top var(--t-slow); }
.hamburger span:nth-child(1) { top:15px; }
.hamburger span:nth-child(2) { top:21px; }
.hamburger span:nth-child(3) { top:27px; }
.hamburger.open span:nth-child(1) { top:21px; transform:rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { top:21px; transform:rotate(-45deg); }

/* mobile menu */
.mobile-menu {
    position:fixed; inset:0; z-index:190;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
    padding:96px 24px 48px;
    background:linear-gradient(180deg, rgba(2,13,19,.98), rgba(7,36,49,.98));
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity var(--t-base), transform var(--t-base), visibility 0s linear .3s;
}
.mobile-menu.open { opacity:1; visibility:visible; transform:none; transition:opacity var(--t-base), transform var(--t-base), visibility 0s; }
.mm-links { display:flex; flex-direction:column; align-items:center; gap:2px; }
.mm-links a {
    font-family:'Cormorant Garamond',serif; font-size:clamp(28px,7vw,38px); font-weight:300;
    color:var(--foam-100); text-decoration:none; padding:10px 8px; letter-spacing:-.01em; line-height:1.1;
    transition:color var(--t-fast);
}
.mm-links a:hover, .mm-links a:active { color:var(--aqua-500); }
.mm-foot { display:flex; flex-direction:column; align-items:center; gap:14px; }
.mm-mail { color:var(--foam-300); font-size:15px; text-decoration:underline; text-underline-offset:4px; padding:10px; }

/* ── buttons ────────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.08em;
    text-transform:uppercase; text-decoration:none; cursor:pointer;
    min-height:48px; padding:13px 24px; border-radius:var(--r-pill); border:1px solid transparent;
    transition:transform var(--t-base), background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.btn svg { flex:none; transition:transform var(--t-base); }
.btn:hover svg.arw { transform:translateX(3px); }
.btn-primary { background:linear-gradient(120deg, var(--aqua-500), var(--teal-500)); color:#042029; font-weight:400; box-shadow:0 8px 22px -14px rgba(80,200,218,.75); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 28px -14px rgba(80,200,218,.85); }
.btn-ghost { border-color:rgba(222,241,241,.34); color:var(--foam-100); background:transparent; }
.btn-ghost:hover { border-color:var(--aqua-500); color:var(--aqua-500); }
.btn-sm { min-height:44px; padding:11px 18px; font-size:12px; }
.btn-block { width:100%; }
.txt-link {
    display:inline-flex; align-items:center; gap:8px; min-height:44px;
    color:var(--foam-300); font-size:15px; text-decoration:underline; text-underline-offset:4px;
    transition:color var(--t-fast);
}
.txt-link:hover { color:var(--aqua-400); }

/* ── hero ───────────────────────────────────────────────────── */
.hero { position:relative; z-index:1; display:flex; align-items:center; padding:132px 0 clamp(56px,7vw,84px); overflow:hidden; }
.hero-bg {
    position:absolute; inset:0; z-index:0;
    background-image:url('../hero.jpg');
    background-image:image-set(url('../hero.webp') type('image/webp'), url('../hero.jpg') type('image/jpeg'));
    background-size:cover; background-position:center 60%;
}
.hero-bg::after {
    content:''; position:absolute; inset:0;
    background:
        /* top scrim so the transparent nav stays readable over bright reef */
        linear-gradient(180deg, rgba(2,13,19,.72) 0px, rgba(2,13,19,.28) 90px, transparent 150px),
        linear-gradient(105deg, rgba(2,13,19,.86) 0%, rgba(2,13,19,.7) 46%, rgba(7,36,49,.56) 72%, rgba(11,51,67,.44) 100%);
}
.hero > .wrap { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(32px,4.5vw,58px); align-items:center; }
.hero h1 {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(48px,5.4vw,80px); line-height:1; letter-spacing:-.03em;
    margin:18px 0 0;
}
.hero-sub { color:var(--foam-300); max-width:46ch; margin-top:20px; font-size:clamp(16px,1.5vw,19px); }
.hero-meta {
    display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:22px;
    font-size:14px; letter-spacing:.02em; color:var(--foam-100);
}
.hero-meta b { color:var(--gold-500); font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:500; line-height:1; }
.hero-meta i { font-style:normal; color:var(--faint); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px; }

.hero-frame {
    position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border);
    aspect-ratio:16/9; background:#02080c; box-shadow:var(--sh-lift);
}
.hero-frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-frame-tag {
    position:absolute; left:12px; bottom:12px; z-index:3;
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 12px; border-radius:var(--r-pill);
    background:rgba(2,13,19,.6); border:1px solid rgba(222,241,241,.2); backdrop-filter:blur(6px);
    font-size:11px; letter-spacing:.08em; color:var(--foam-300);
}
.hero-frame-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--aqua-500); flex:none; }
.sound-btn {
    position:absolute; bottom:8px; right:8px; z-index:3;
    display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
    background:rgba(2,13,19,.6); border:1px solid rgba(222,241,241,.28); color:var(--foam-100);
    cursor:pointer; backdrop-filter:blur(6px); transition:border-color var(--t-base), color var(--t-base);
}
.sound-btn:hover { border-color:var(--aqua-500); color:var(--aqua-500); }
.hero-play {
    position:absolute; inset:0; z-index:2; display:none; place-items:center;
    border:none; background:rgba(2,13,19,.35); color:var(--foam-100); cursor:pointer;
}
.hero-play span {
    display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
    background:rgba(2,13,19,.5); border:1px solid rgba(222,241,241,.5); backdrop-filter:blur(4px);
}
.hero-frame.needs-tap .hero-play { display:grid; }

/* bubbles — hero only, and never on small screens (§16) */
.bubbles { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bubbles span {
    position:absolute; bottom:-40px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.45), rgba(80,200,218,.05) 60%, transparent 70%);
    animation:rise linear infinite; opacity:0;
}
@keyframes rise {
    0%   { transform:translateY(0); opacity:0; }
    12%  { opacity:.6; }
    88%  { opacity:.35; }
    100% { transform:translateY(-104%); opacity:0; }
}
.bubbles span:nth-child(1){ left:12%; width:9px;  height:9px;  animation-duration:19s; animation-delay:0s; }
.bubbles span:nth-child(2){ left:31%; width:6px;  height:6px;  animation-duration:24s; animation-delay:5s; }
.bubbles span:nth-child(3){ left:52%; width:12px; height:12px; animation-duration:17s; animation-delay:2s; }
.bubbles span:nth-child(4){ left:71%; width:7px;  height:7px;  animation-duration:22s; animation-delay:8s; }
.bubbles span:nth-child(5){ left:88%; width:10px; height:10px; animation-duration:20s; animation-delay:3s; }

/* ── trust strip (§7) ───────────────────────────────────────── */
.trust { padding:0; }
.trust-row {
    display:flex; align-items:stretch; justify-content:space-between; gap:0;
    list-style:none; padding:0;
}
.trust-row li {
    flex:1; display:flex; flex-direction:column; gap:4px; justify-content:center;
    padding:20px 22px; min-width:0;
}
.trust-row li + li { border-left:1px solid var(--border); }
.trust-k { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.trust-v { font-family:'Cormorant Garamond',serif; font-size:22px; line-height:1.15; color:var(--foam-100); }
.trust-v.gold { color:var(--gold-500); }

/* ── why / value cards (§8) ─────────────────────────────────── */
.why { padding:var(--section-space) 0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.card {
    position:relative; padding:28px 26px 30px; border-radius:var(--r-md);
    background:rgba(255,255,255,.028);
    border:1px solid var(--border); transition:transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.card:hover { transform:translateY(-3px); border-color:var(--border-str); background:rgba(80,200,218,.05); }
.card-icon { color:var(--aqua-500); margin-bottom:16px; }
.card h3 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:25px; letter-spacing:-.01em; line-height:1.15; }
.card p { color:var(--muted); margin-top:10px; font-size:15px; }

/* ── how it works (§9) ─────────────────────────────────────── */
.how { padding:var(--section-space) 0; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:44px; position:relative; }
.step { padding:0 26px 0 0; position:relative; }
.step + .step { padding-left:30px; border-left:1px solid var(--border); }
.step-n {
    display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
    border:1px solid var(--border-str); color:var(--aqua-500);
    font-size:14px; letter-spacing:.04em; margin-bottom:16px;
}
.step h3 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:24px; line-height:1.15; }
.step p { color:var(--muted); margin-top:8px; font-size:15px; max-width:34ch; }
.how-foot { margin-top:36px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ── quality / what you get (§10) ──────────────────────────── */
.quality { padding:var(--section-space) 0; }
.quality-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,4.5vw,56px); align-items:center; }
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; margin-top:26px; }
.stat { background:var(--deep-900); padding:24px 22px; }
.stat-v { font-family:'Cormorant Garamond',serif; font-size:clamp(34px,4vw,46px); font-weight:300; color:var(--foam-100); line-height:1; letter-spacing:-.02em; }
.stat-v em { font-style:italic; color:var(--aqua-500); }
.stat-c { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:9px; }
.stat-note { margin-top:14px; font-size:13px; color:var(--faint); }
.facts { list-style:none; display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.facts > li { background:var(--abyss-950); padding:18px 22px; display:grid; grid-template-columns:minmax(120px,.42fr) 1fr; gap:6px 20px; align-items:baseline; }
.facts .fk { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--aqua-500); }
.facts .fv { color:var(--foam-300); font-size:15px; }

/* ── partner (§11) ─────────────────────────────────────────── */
.partner { padding:var(--section-space) 0; }
.partner-grid { display:grid; grid-template-columns:.4fr .6fr; gap:clamp(28px,4vw,52px); align-items:center; }
.partner-logo {
    background:rgba(255,255,255,.94); border-radius:var(--r-md); padding:22px 26px;
    display:grid; place-items:center; border:1px solid var(--border); box-shadow:var(--sh-card);
    max-width:380px;   /* must not outshine the guest's own footage (§11) */
}
.partner-logo img { width:100%; max-width:240px; height:auto; }
.partner-badge { display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--aqua-500); }
.partner-badge svg { flex:none; }
.partner h2 { margin-top:14px; }
.partner p { color:var(--muted); margin-top:14px; max-width:52ch; font-size:16px; }
.partner .btn { margin-top:22px; }

/* ── pricing (§12) ─────────────────────────────────────────── */
.pricing { padding:var(--section-space) 0; }
.price-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,4vw,56px); align-items:start; margin-top:40px; }
.price-list { list-style:none; display:grid; gap:11px; }
.price-list li { display:flex; align-items:flex-start; gap:11px; color:var(--foam-300); font-size:15px; }
.price-list svg { flex:none; margin-top:5px; color:var(--aqua-500); }
.price-sub-h { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin:26px 0 12px; }
.price-warn {
    display:flex; align-items:flex-start; gap:12px; margin-top:24px; padding:16px 18px;
    border:1px solid rgba(239,194,73,.34); border-radius:var(--r-md); background:rgba(239,194,73,.07);
    color:var(--foam-100); font-size:15px;
}
.price-warn svg { flex:none; margin-top:3px; color:var(--gold-500); }
.price-card {
    border-radius:var(--r-lg); border:1px solid var(--border-str);
    background:linear-gradient(165deg, rgba(80,200,218,.09), rgba(255,255,255,.02));
    padding:30px 28px; box-shadow:var(--sh-card); position:sticky; top:96px;
}
.price-name { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--aqua-500); }
.price-amount { font-family:'Cormorant Garamond',serif; font-size:clamp(58px,7vw,78px); font-weight:300; line-height:1; margin:8px 0 2px; color:var(--gold-500); }
.price-notes { color:var(--muted); font-size:14px; }
.price-card .btn { margin-top:22px; }
.price-card .txt-link { margin-top:10px; }

/* ── gallery (§13) ─────────────────────────────────────────── */
.gallery { padding:var(--section-space) 0; }
.gal-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:40px; }
.gal-item {
    position:relative; grid-column:span 2; aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden;
    border:1px solid var(--border); cursor:pointer; background:var(--deep-900);
    padding:0; text-align:left; display:block; width:100%;
    transition:transform var(--t-slow), border-color var(--t-base);
}
.gal-item:nth-child(1), .gal-item:nth-child(2) { grid-column:span 3; aspect-ratio:16/9; }
.gal-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
/* the labels sit on bright turquoise water — the scrim has to be strong */
.gal-item::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(2,13,19,0) 34%, rgba(2,13,19,.5) 62%, rgba(2,13,19,.92)); transition:background var(--t-base); }
.gal-item:hover { transform:translateY(-3px); border-color:var(--border-str); }
.gal-item:hover img { transform:scale(1.04); }
.gal-play {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.94); z-index:2;
    width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
    background:rgba(2,13,19,.42); border:1px solid rgba(222,241,241,.55); color:#fff;
    backdrop-filter:blur(4px); transition:transform var(--t-base), background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.gal-item:hover .gal-play { transform:translate(-50%,-50%) scale(1); background:var(--aqua-500); color:#042029; border-color:var(--aqua-500); }
.gal-label { position:absolute; left:16px; right:16px; bottom:13px; z-index:2; display:flex; flex-direction:column; gap:2px; text-shadow:0 1px 12px rgba(2,13,19,.8); }
.gal-label b { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:19px; line-height:1.2; }
.gal-label span { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--aqua-400); }

/* lightbox */
.lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(2,11,16,.9); backdrop-filter:blur(8px); }
.lightbox.open { display:flex; }
.lightbox video { width:min(1100px,100%); max-height:84vh; border-radius:var(--r-md); border:1px solid var(--border); background:#000; }
.lb-close {
    position:absolute; top:18px; right:18px; width:46px; height:46px; border-radius:50%;
    border:1px solid rgba(222,241,241,.35); background:rgba(2,13,19,.55); color:var(--foam-100);
    cursor:pointer; display:grid; place-items:center; transition:border-color var(--t-base), color var(--t-base);
}
.lb-close:hover { border-color:var(--aqua-500); color:var(--aqua-500); }

/* ── faq (§14) ─────────────────────────────────────────────── */
.faq { padding:var(--section-space) 0; }
.faq-list { margin-top:36px; border-top:1px solid var(--border); max-width:860px; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item summary {
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:19px 2px; cursor:pointer; list-style:none;
    font-family:'Cormorant Garamond',serif; font-size:clamp(19px,2vw,23px); font-weight:400; line-height:1.3;
    color:var(--foam-100); transition:color var(--t-fast); min-height:44px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:var(--aqua-400); }
.faq-item summary::after {
    content:''; flex:none; width:11px; height:11px; margin-right:4px;
    border-right:1.5px solid var(--aqua-500); border-bottom:1.5px solid var(--aqua-500);
    transform:rotate(45deg) translateY(-2px); transition:transform var(--t-base);
}
.faq-item[open] summary::after { transform:rotate(225deg) translateY(-2px); }
.faq-item p { color:var(--muted); font-size:15px; padding:0 44px 22px 2px; max-width:70ch; }

/* ── contact (§15) ─────────────────────────────────────────── */
.contact { padding:var(--section-space) 0; }
.contact-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,4.5vw,60px); align-items:start; }
.contact-desc { color:var(--muted); margin-top:16px; max-width:46ch; }
.contact-actions { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:26px; }
.contact-phone { color:var(--faint); font-size:14px; margin-top:4px; }
.contact-phone a { color:var(--foam-300); text-decoration:underline; text-underline-offset:3px; }
.contact-closing { margin-top:30px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(19px,2.2vw,25px); color:var(--foam-300); line-height:1.4; max-width:30ch; }
.checklist { border:1px solid var(--border); border-radius:var(--r-md); padding:24px 26px; background:rgba(255,255,255,.025); }
.checklist h3 { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--aqua-500); font-weight:400; }
.checklist ol { list-style:none; counter-reset:c; margin-top:16px; display:grid; gap:12px; }
.checklist li { counter-increment:c; display:flex; align-items:flex-start; gap:12px; color:var(--foam-300); font-size:15px; }
.checklist li::before {
    content:counter(c); flex:none; width:22px; height:22px; border-radius:50%; margin-top:2px;
    display:grid; place-items:center; font-size:11px;
    border:1px solid var(--border-str); color:var(--aqua-500);
}

/* ── sticky mobile CTA (§P1) ───────────────────────────────── */
.sticky-cta {
    position:fixed; left:0; right:0; bottom:0; z-index:180; display:none;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(3,21,30,.94); border-top:1px solid var(--border);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    transform:translateY(110%); transition:transform var(--t-base);
}
.sticky-cta.show { transform:none; }

/* ── footer ────────────────────────────────────────────────── */
footer { border-top:1px solid var(--border); padding:48px 0 40px; position:relative; z-index:1; background:var(--abyss-1000); }
.foot-grid { display:flex; align-items:flex-start; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.foot-tag { color:var(--faint); font-size:14px; max-width:34ch; margin-top:12px; }
.foot-links { display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.foot-links a { color:var(--foam-300); font-size:15px; text-decoration:none; padding:10px 0; min-height:44px; display:inline-flex; align-items:center; transition:color var(--t-fast); }
.foot-links a:hover { color:var(--aqua-400); }
.foot-sites { margin-top:26px; padding-top:20px; border-top:1px solid var(--border); display:flex; align-items:center; gap:6px 20px; flex-wrap:wrap; }
.foot-sites-label { color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.foot-sites a { color:var(--foam-300); font-size:14px; text-decoration:none; padding:10px 0; min-height:44px; display:inline-flex; align-items:center; transition:color var(--t-fast); }
.foot-sites a:hover { color:var(--aqua-400); }
.foot-copy { color:var(--faint); font-size:12px; line-height:1.8; margin-top:18px; }
.foot-copy a { color:var(--aqua-500); text-decoration:underline; text-underline-offset:2px; }
.foot-copy a:hover { text-decoration:underline; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:1000px) {
    .nav-links, .nav-cta { display:none; }
    .hamburger { display:block; }
    html { scroll-padding-top:74px; }
}
@media (max-width:920px) {
    .hero { padding:112px 0 64px; }
    .hero-grid { grid-template-columns:1fr; gap:32px; }
    .quality-grid, .partner-grid, .price-grid, .contact-grid { grid-template-columns:1fr; }
    .price-card { position:static; }
    .steps { grid-template-columns:1fr; gap:24px; }
    .step, .step + .step { padding:0 0 0 24px; border-left:1px solid var(--border); }
    .trust-row { flex-wrap:wrap; }
    .trust-row li { flex:1 1 50%; min-width:50%; }
    .trust-row li:nth-child(odd) { border-left:none; }
    .trust-row li:nth-child(n+3) { border-top:1px solid var(--border); }
}
@media (max-width:760px) {
    .hero-bg {
        background-image:url('../hero-800.jpg');
        background-image:image-set(url('../hero-800.webp') type('image/webp'), url('../hero-800.jpg') type('image/jpeg'));
    }
    .cards { grid-template-columns:1fr; gap:12px; }
    .gal-grid { grid-template-columns:1fr; gap:12px; }
    .gal-item, .gal-item:nth-child(1), .gal-item:nth-child(2) { grid-column:span 1; aspect-ratio:16/9; }
    .foot-grid { flex-direction:column; }
    .foot-links { align-items:flex-start; }
    .sticky-cta { display:block; }
    footer { padding-bottom:96px; }   /* clear the sticky CTA bar */
    /* effects off on small screens (§22) */
    .bubbles { display:none; }
    .has-glow::before { display:none; }
    body::after { display:none; }
}
@media (max-width:600px) {
    .hero h1 { font-size:clamp(44px,11vw,58px); }
    .hero-actions .btn { width:100%; }
    .facts > li { grid-template-columns:1fr; gap:4px; }
    .faq-item p { padding-right:12px; }
    .trust-row li { padding:16px 14px; }
}
@media (max-width:560px) {
    .lang-sw-desktop { display:none; }   /* moves into the mobile menu */
}
@media (max-width:400px) {
    .nav-right { gap:8px; }
    .brand-name { font-size:17px; }
    .trust-row li { flex:1 1 100%; min-width:100%; border-left:none; }
    .trust-row li + li { border-top:1px solid var(--border); }
}

/* ── reduced motion (§16) ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after {
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
    .reveal { opacity:1; transform:none; }
    .bubbles { display:none; }
    .btn:hover, .card:hover, .gal-item:hover { transform:none; }
}