/* ===========================================================================
   CAPTAIN JACKS — GLOBAL STYLES
   ---------------------------------------------------------------------------
   Premium, photography-led maritime tourism.

     Type    Poppins throughout — one family, weighted for hierarchy
             (800 display, 700 headings, 600 UI/labels, 400 body)
     Colour  navy #093E62 → blue #2991D7 → turquoise #38E1C5,
             with yellow #FBC729 as the pop, over pale blues
     Motifs  clean full-bleed imagery, rounded cards, generous type,
             no wave dividers, no handwritten accents

   Mobile-first; breakpoints in responsive.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
    /* Blues, deep → light */
    --navy-d:   #05263D;
    --navy:     #093E62;
    --navy-l:   #0E5A8A;
    --blue-d:   #1873B0;
    --blue:     #2991D7;
    --blue-l:   #5FB2E8;
    --turq:     #38E1C5;
    --turq-d:   #1BBFA4;
    --turq-l:   #8AF0DF;

    /* Pops */
    --yellow:   #FBC729;
    --yellow-d: #E0A800;
    --amber:    #FFBF44;
    --coral:    #FF6B4A;

    /* Neutrals */
    --white:    #FFFFFF;
    --pale:     #F2FAFF;
    --pale-2:   #E9F4FB;
    --steel:    #D2E1EB;
    --steel-2:  #BED2DF;
    --grey:     #646464;
    --grey-d:   #3F3F3F;
    --ink:      #151515;

    /* Semantic */
    --bg:       var(--white);
    --fg:       var(--navy);
    --muted:    var(--grey);
    --rule:     var(--steel);
    --rule-soft: var(--pale-2);

    /* Type families — one family, kept as separate vars so any per-element
       overrides stay meaningful and a future change is a one-line swap. */
    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-hand:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Fluid type scale — retuned for Poppins, which is a normal-width sans and
       runs considerably larger per point than the condensed Teko it replaced. */
    --t-display: clamp(2.5rem, 1.2rem + 6vw, 5.25rem);
    --t-h1:      clamp(2rem, 1.3rem + 3.6vw, 3.75rem);
    --t-h2:      clamp(1.625rem, 1.2rem + 2.1vw, 2.75rem);
    --t-h3:      clamp(1.25rem, 1.05rem + 1vw, 1.65rem);
    --t-h4:      clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
    --t-body:    clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
    --t-lead:    clamp(1.125rem, 1rem + 0.7vw, 1.4375rem);
    --t-small:   0.9375rem;
    --t-micro:   0.75rem;

    /* Rhythm */
    --gutter:   clamp(1.25rem, 4vw, 3.5rem);
    --section:  clamp(4rem, 8vw, 8.5rem);
    --measure:  60ch;
    --max:      1480px;

    /* Rounding — the theme is soft-cornered throughout */
    --r-sm:     8px;
    --r:        16px;
    --r-lg:     24px;
    --r-xl:     36px;

    /* Motion */
    --ease:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);

    --shadow:    0 10px 30px rgba(9, 62, 98, 0.10);
    --shadow-lg: 0 24px 60px rgba(9, 62, 98, 0.18);

    --header-h: 84px;
}

/* ---------------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--grey-d);
    font-family: var(--font-body);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--navy); }
p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--yellow); color: var(--navy); }

:focus-visible {
    outline: 3px solid var(--turq);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 980px; }

.section { position: relative; padding-block: var(--section); }

.section--pale { background: var(--pale); }

.section--navy {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.82);
    --rule: rgba(255, 255, 255, 0.18);
    --rule-soft: rgba(255, 255, 255, 0.09);
    --muted: rgba(255, 255, 255, 0.62);
}
.section--navy h1, .section--navy h2,
.section--navy h3, .section--navy h4 { color: var(--white); }

/* Deep water gradient, used behind the boldest sections */
.section--deep {
    background: linear-gradient(165deg, var(--navy-l) 0%, var(--navy) 46%, var(--navy-d) 100%);
    color: rgba(255, 255, 255, 0.82);
    --rule: rgba(255, 255, 255, 0.18);
    --rule-soft: rgba(255, 255, 255, 0.09);
    --muted: rgba(255, 255, 255, 0.62);
}
.section--deep h1, .section--deep h2,
.section--deep h3, .section--deep h4 { color: var(--white); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--yellow);
    color: var(--navy);
    padding: 0.75rem 1.25rem;
    font-family: var(--font-ui);
    font-weight: 700;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* reCAPTCHA badge: NEVER shown. Google allows hiding it only because its
   text notice sits under every protected form (cj_recaptcha_note()). */
.grecaptcha-badge { visibility: hidden !important; }

/* POPIA notice under each form submit button */
.form-privacy {
    margin: 0;
    color: var(--grey);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Shown on /contact when the office email could not be sent */
.form-alert {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    color: var(--grey-d);
    background: rgba(255, 107, 74, 0.1);
    border: 1px solid rgba(255, 107, 74, 0.45);
    border-radius: var(--r);
    line-height: 1.55;
}
.form-alert strong { display: block; color: var(--navy); margin-bottom: 0.25rem; }

/* Standalone page header — sits clear of the fixed site header. Shared by the
   Contact, About, FAQ and News pages. */
.page-head {
    padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem));
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.page-head__title { margin-bottom: 1rem; }

.page-head__lead { color: rgba(255, 255, 255, 0.85); max-width: 52ch; }

/* ---------------------------------------------------------------------------
   4. WAVE DIVIDERS — removed
   Per client feedback the template-style wave dividers are gone; sections now
   meet as clean colour blocks. Rule kept as a guard against any stray markup.
   --------------------------------------------------------------------------- */
.wave { display: none !important; }

/* ---------------------------------------------------------------------------
   5. TYPOGRAPHY
   --------------------------------------------------------------------------- */
/* All headings carry a light, airy weight (300) to match the hero. */
.display {
    font-family: var(--font-display);
    font-size: var(--t-display);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.01em;
}

.h1, .h2, .h3 {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); line-height: 1.2; }

.h4 {
    font-family: var(--font-ui);
    font-size: var(--t-h4);
    font-weight: 300;
    line-height: 1.3;
}

/* Accent word — was a handwritten flourish, now a clean colour emphasis so
   headings stay one consistent family. Same size and weight as the heading
   around it; only the colour changes. */
.hand {
    font-family: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    color: var(--turq);
}

.hand--yellow { color: var(--yellow-d); }
.hand--blue   { color: var(--blue); }

.lead {
    font-size: var(--t-lead);
    font-weight: 400;
    line-height: 1.6;
    max-width: var(--measure);
}

.muted { color: var(--muted); }

/* Eyebrow / section label */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 1rem 0.4375rem 0.75rem;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    background: rgba(41, 145, 215, 0.12);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue-d);
}

.section--navy .eyebrow,
.section--deep .eyebrow {
    background: rgba(56, 225, 197, 0.16);
    color: var(--turq);
}

.eyebrow::before {
    content: '';
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    flex-shrink: 0;
}

/* Data / numbers */
.data {
    font-family: var(--font-ui);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.label {
    font-family: var(--font-ui);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------------- */
/* Primary button: brand blue with a teal glow. Yellow is now an accent colour
   only (pills, the "today" marker on the calendar) and no longer appears on
   any button. */
.btn {
    --btn-bg: var(--blue);
    --btn-fg: var(--white);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.0625rem 2rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 6px 24px rgba(56, 225, 197, 0.45),
                0 0 0 1px rgba(56, 225, 197, 0.28);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease);
}

/* Wash of turquoise sweeps across on hover */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--turq);
    transform: translateX(-101%);
    transition: transform 0.5s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before { transform: translateX(0); }

.btn:hover {
    transform: translateY(-2px);
    color: var(--navy);
    box-shadow: 0 12px 36px rgba(56, 225, 197, 0.62),
                0 0 0 1px rgba(56, 225, 197, 0.5);
}

.btn:active { transform: translateY(0) scale(0.985); }

.btn__arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--turq {
    --btn-bg: var(--turq);
    --btn-fg: var(--navy);
    box-shadow: 0 6px 20px rgba(56, 225, 197, 0.32);
}
/* Washes to navy rather than yellow, so no button turns yellow on hover */
.btn--turq::before { background: var(--navy); }
.btn--turq:hover {
    color: var(--white);
    box-shadow: 0 12px 30px rgba(9, 62, 98, 0.4);
}

.btn--navy {
    --btn-bg: var(--navy);
    --btn-fg: var(--white);
    box-shadow: 0 6px 20px rgba(9, 62, 98, 0.28);
}
.btn--navy::before { background: var(--turq); }
.btn--navy:hover { color: var(--navy); }

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: currentColor;
    box-shadow: inset 0 0 0 2px currentColor;
}
.btn--ghost::before { background: var(--white); }
.btn--ghost:hover { color: var(--navy); box-shadow: inset 0 0 0 2px var(--white); }

.btn--sm { padding: 0.75rem 1.375rem; font-size: 0.8125rem; }

/* Underlined text link */
.link {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-d);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 3px;
    transition: background-size 0.45s var(--ease), color 0.35s var(--ease);
}
.link:hover { background-size: 100% 2px; }

/* Inside running text: same colour and underline, but sentence case at the
   surrounding size, so it reads as a link rather than a button label. */
.link--inline {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    background-size: 100% 1px;
    padding-bottom: 1px;
}
.link--inline:hover { background-size: 100% 2px; }

.section--navy .link,
.section--deep .link { color: var(--turq); }

/* ---------------------------------------------------------------------------
   7. HEADER + MENU
   --------------------------------------------------------------------------- */
/* Floating glass bar, per the layout reference: a rounded, translucent pill
   inset from the top of the screen. Logo left, links centred, Book right.
   It stays glass over the hero and firms up (darker, tighter) once scrolled. */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    padding-inline: clamp(0.625rem, 2vw, 1.5rem);
    color: var(--white);
    pointer-events: none;
    transition: transform 0.5s var(--ease), height 0.45s var(--ease);
}

.site-header__inner {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding: 0.5rem 0.5rem 0.5rem 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    pointer-events: auto;
}

/* The glass lives on a pseudo-element, not the bar itself: an element with
   backdrop-filter becomes the backdrop root (and containing block) for its
   children, which would stop the Tours dropdown blurring the page behind it. */
.site-header__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(9, 62, 98, 0.32);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    box-shadow: 0 14px 40px rgba(5, 38, 61, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.site-header.is-stuck { height: 76px; }

.site-header.is-stuck .site-header__inner::before {
    background: rgba(5, 38, 61, 0.74);
    box-shadow: 0 16px 44px rgba(5, 38, 61, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.site-header.is-hidden { transform: translateY(-110%); }

/* Brand */
.brand { display: flex; align-items: center; gap: 0.6875rem; flex-shrink: 0; }

/* The logo is drawn navy-on-transparent for light grounds, so it sits on a
   white disc to read against the navy header. */
.brand__disc {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 2px 12px rgba(5, 38, 61, 0.35);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), width 0.45s var(--ease), height 0.45s var(--ease);
}

.brand__mark {
    width: 88%;
    height: 88%;
    object-fit: contain;
}

.brand:hover .brand__disc {
    transform: rotate(-6deg) scale(1.06);
    box-shadow: 0 4px 16px rgba(56, 225, 197, 0.45);
}

.site-header.is-stuck .brand__disc { width: 46px; height: 46px; }

.brand__text { display: flex; flex-direction: column; line-height: 1; }

.brand__name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Nav */
/* Centred in the bar, independent of how wide the brand and actions are */
.nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.nav__link {
    position: relative;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.86);
    transition: color 0.3s var(--ease);
}

.nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--turq);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--ease);
}

.nav__link:hover { color: var(--turq); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__link.is-active { color: var(--turq); }
.nav__link.is-active::after { transform: scaleX(1); }

/* Dropdown — "Tours". A glass panel that eases down on hover, keyboard focus
   or a tap on the chevron (see main.js). The invisible ::before bridges the
   gap so the pointer can travel from the link into the panel. */
.nav__group { position: relative; display: flex; align-items: center; gap: 0.25rem; }

.nav__toggle {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    transition: color 0.3s var(--ease);
}
.nav__toggle svg { width: 11px; height: 11px; transition: transform 0.45s var(--ease); }
.nav__group:hover .nav__toggle,
.nav__group.is-open .nav__toggle { color: var(--turq); }
.nav__group:hover .nav__toggle svg,
.nav__group.is-open .nav__toggle svg { transform: rotate(180deg); }

.nav__menu {
    position: absolute;
    top: calc(100% + 26px);
    left: 50%;
    min-width: 330px;
    padding: 0.625rem;
    background: rgba(9, 62, 98, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r);
    box-shadow: 0 24px 60px rgba(5, 38, 61, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -10px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s;
}

.nav__menu::before {
    content: '';
    position: absolute;
    inset: -30px 0 100% 0;
}

.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__group.is-open .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s;
}

/* A chevron tap closes it even while the pointer is still over the group */
.nav__group.is-closed .nav__menu { opacity: 0; visibility: hidden; transform: translate(-50%, -10px) scale(0.98); }

.nav__menu-list { display: grid; gap: 0.125rem; }

.nav__menu-link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.875rem 1rem;
    border-radius: var(--r-sm);
    opacity: 0;
    transform: translateY(-4px);
    transition: background 0.3s var(--ease), opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.nav__group:hover .nav__menu-link,
.nav__group:focus-within .nav__menu-link,
.nav__group.is-open .nav__menu-link { opacity: 1; transform: none; }
.nav__menu-list li:nth-child(2) .nav__menu-link { transition-delay: 0.04s; }
.nav__menu-list li:nth-child(3) .nav__menu-link { transition-delay: 0.08s; }

.nav__menu-link:hover,
.nav__menu-link:focus-visible { background: rgba(255, 255, 255, 0.1); }

.nav__menu-label {
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    transition: color 0.3s var(--ease);
}
.nav__menu-link:hover .nav__menu-label { color: var(--turq); }

.nav__menu-note {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.66);
}

/* Last item ("All tours") reads as a footer link */
.nav__menu-list li:last-child {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.header__actions { display: flex; align-items: center; gap: 1rem; padding-right: 0.125rem; }

/* Pale pill at the end of the bar, as in the reference */
.header__book {
    --btn-bg: var(--white);
    --btn-fg: var(--navy);
    gap: 0.4em;
    box-shadow: 0 6px 18px rgba(5, 38, 61, 0.22);
}

/* Icon only by default; the number slides out on click (see main.js) */
.header__phone {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-ui);
    font-size: 1.0625rem;
    font-weight: 700;
    transition: color 0.3s var(--ease);
}
.header__phone:hover { color: var(--turq); }
.header__phone-icon { width: 18px; height: 18px; flex-shrink: 0; }

.header__phone-num {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-4px);
    transition: max-width 0.4s var(--ease), opacity 0.3s var(--ease),
                margin 0.4s var(--ease), transform 0.4s var(--ease);
}

.header__phone.is-open .header__phone-num {
    max-width: 16ch;
    opacity: 1;
    margin-left: 0.5rem;
    transform: translateX(0);
}

/* Hamburger — three bars, matching the reference theme */
.burger {
    display: none;
    width: 46px;
    height: 46px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.burger__line {
    position: absolute;
    left: 11px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.45s var(--ease), opacity 0.3s var(--ease), width 0.4s var(--ease);
}
.burger__line:nth-child(1) { top: 15px; width: 24px; }
.burger__line:nth-child(2) { top: 22px; width: 17px; }
.burger__line:nth-child(3) { top: 29px; width: 24px; }

.burger.is-open .burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open .burger__line:nth-child(2) { opacity: 0; width: 0; }
.burger.is-open .burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: linear-gradient(165deg, var(--navy-l) 0%, var(--navy) 50%, var(--navy-d) 100%);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--header-h) var(--gutter) 2.5rem;
    clip-path: circle(0% at calc(100% - 46px) 42px);
    transition: clip-path 0.8s var(--ease);
    pointer-events: none;
}

.nav-drawer.is-open {
    clip-path: circle(150% at calc(100% - 46px) 42px);
    pointer-events: auto;
}

.nav-drawer__list { display: flex; flex-direction: column; gap: 0.125rem; }

.nav-drawer__item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.nav-drawer.is-open .nav-drawer__item { opacity: 1; transform: none; }
.nav-drawer.is-open .nav-drawer__item:nth-child(1) { transition-delay: 0.20s; }
.nav-drawer.is-open .nav-drawer__item:nth-child(2) { transition-delay: 0.26s; }
.nav-drawer.is-open .nav-drawer__item:nth-child(3) { transition-delay: 0.32s; }
.nav-drawer.is-open .nav-drawer__item:nth-child(4) { transition-delay: 0.38s; }
.nav-drawer.is-open .nav-drawer__item:nth-child(5) { transition-delay: 0.44s; }

.nav-drawer__link {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    padding: 0.375rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 9vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--white);
    transition: color 0.3s var(--ease), transform 0.4s var(--ease);
}
.nav-drawer__link:hover { color: var(--turq); transform: translateX(8px); }

.nav-drawer__no {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--turq);
}

.nav-drawer__link.is-active { color: var(--yellow); }

.nav-drawer__sub {
    display: grid;
    gap: 0.25rem;
    margin: 0.25rem 0 0.5rem 2.1rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.16);
}

.nav-drawer__sublink {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s var(--ease);
}
.nav-drawer__sublink:hover { color: var(--turq); }

.nav-drawer__foot {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 2px solid rgba(255, 255, 255, 0.16);
    font-family: var(--font-ui);
    font-weight: 600;
}

body.is-locked { overflow: hidden; }

/* ---------------------------------------------------------------------------
   8. CARDS — the shared soft-cornered surface
   --------------------------------------------------------------------------- */
.card {
    position: relative;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Badge / pill */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.8125rem;
    border-radius: 999px;
    background: var(--pale-2);
    color: var(--blue-d);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pill--turq   { background: rgba(56, 225, 197, 0.18); color: var(--turq-d); }
.pill--yellow { background: rgba(251, 199, 41, 0.22); color: #8A6A00; }
.pill--navy   { background: var(--navy); color: var(--white); }

/* ---------------------------------------------------------------------------
   9. SCROLL REVEALS
   --------------------------------------------------------------------------- */
[data-reveal] { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }

.js [data-reveal] { opacity: 0; transform: translateY(30px); }

[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }

/* Single figures settle: the frame fades up while the photo inside eases
   from a slight zoom, which reads as a camera move rather than a pop. */
.js .about-figure[data-reveal] img,
.js .vessel__media[data-reveal] img {
    transform: scale(1.12);
    transition: transform 1.8s var(--ease);
}
.about-figure[data-reveal].is-in img,
.vessel__media[data-reveal].is-in img { transform: none; }

/* ---------------------------------------------------------------------------
   Text blocks (main.js 3a). A heading or paragraph reveals as one piece:
   it fades up a short way while a mask opens from the top, on a long
   ease-out — the way product pages introduce a block of copy. No word
   splitting. The negative final inset keeps descenders and the hand-style
   accents from being clipped once revealed.
   --------------------------------------------------------------------------- */
/* The mask is a tall gradient (solid top, clear bottom) slid upward, so a
   soft edge sweeps down the block. A mask, not clip-path: a fully clipped
   element never registers with IntersectionObserver and would stay hidden. */
.js [data-reveal="text"] {
    opacity: 0;
    transform: translateY(0.9em);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 60%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 60%);
    -webkit-mask-size: 100% 250%;
    mask-size: 100% 250%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    /* Longhands, so the [data-reveal-delay] steps still apply */
    transition-property: opacity, transform, -webkit-mask-position, mask-position;
    transition-duration: 1s, 1.2s, 1.3s, 1.3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.js [data-reveal="text"].is-in {
    opacity: 1;
    transform: none;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

/* ---------------------------------------------------------------------------
   Staggered groups (main.js 3b). Text leads by ~0.25s, then each child
   follows at 0.12s intervals with a gentle rise, fade and scale.

   Uses the individual `translate` / `scale` properties so it composes with
   each card's own hover `transform` instead of fighting it, and the whole
   rule set lifts off once the group settles (.is-settled), handing the
   children their own transitions back.
   --------------------------------------------------------------------------- */
.js [data-stagger]:not(.is-settled) > * {
    opacity: 0;
    translate: 0 36px;
    scale: 0.97;
    transition: opacity 0.9s var(--ease), translate 1.1s var(--ease), scale 1.1s var(--ease);
    transition-delay: calc(var(--stagger-lead, 0.25s) + var(--si, 0) * var(--stagger-step, 0.12s));
}

.js [data-stagger].is-in:not(.is-settled) > * { opacity: 1; translate: none; scale: none; }

/* Photos inside a staggered tile ease out of a zoom as the tile lands */
.js [data-stagger]:not(.is-settled) > * img {
    scale: 1.1;
    transition: scale 1.6s var(--ease);
    transition-delay: calc(var(--stagger-lead, 0.25s) + var(--si, 0) * var(--stagger-step, 0.12s));
}
.js [data-stagger].is-in:not(.is-settled) > * img { scale: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
    .js [data-reveal="text"] { -webkit-mask-image: none; mask-image: none; }
    .js [data-stagger]:not(.is-settled) > *,
    .js [data-stagger]:not(.is-settled) > * img { opacity: 1; translate: none; scale: none; }
    .js .about-figure[data-reveal] img, .js .vessel__media[data-reveal] img { transform: none; }
}

/* ---------------------------------------------------------------------------
   10. FOOTER
   --------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    /* Starts on the CTA's ending colour (navy-d) so the two sections read as
       one continuous dark block — no wave, no seam. */
    background: linear-gradient(180deg, var(--navy-d) 0%, #03151F 100%);
    color: var(--white);
    padding-top: clamp(4rem, 8vw, 7rem);
    overflow: hidden;
}

.site-footer__grid {
    display: grid;
    gap: clamp(2.25rem, 5vw, 4rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.footer-col__head {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 1.125rem;
}

.footer-col__list { display: flex; flex-direction: column; gap: 0.5625rem; }

.footer-col__list a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-ui);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--white);
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-col__list a:hover { color: var(--turq); transform: translateX(4px); }

.footer-col__address {
    font-family: var(--font-ui);
    font-size: 1.0625rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.7;
}

/* Accent line inside the footer pitch — colour only now. */
.footer__logo {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.footer__logo img { width: 90%; height: 90%; object-fit: contain; }

.footer__hand {
    display: inline-block;
    color: var(--turq);
}

.site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-block: 1.5rem;
    border-top: 2px solid rgba(255, 255, 255, 0.14);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 500;
}

.site-footer__legal { display: flex; gap: 0.5rem; }
.site-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal a:hover { color: var(--turq); }

.permit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(56, 225, 197, 0.14);
    border: 2px solid rgba(56, 225, 197, 0.34);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--turq);
}

.permit-badge__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--turq);
}

/* ---------------------------------------------------------------------------
   BACK TO TOP
   Fixed bottom-right; fades in once the visitor has scrolled past the hero.
   Toggled via [hidden] + .is-visible from main.js.
   --------------------------------------------------------------------------- */
.to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    /* Sits above the floating Book Now + WhatsApp stack (two 56px buttons) */
    bottom: calc(clamp(1rem, 3vw, 2rem) + 136px);
    z-index: 80;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    background: var(--blue);
    color: var(--white);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(56, 225, 197, 0.45), 0 0 0 1px rgba(56, 225, 197, 0.28);
    opacity: 0;
    transform: translateY(14px) scale(0.9);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.35s var(--ease);
}

.to-top[hidden] { display: none; }

.to-top.is-visible { opacity: 1; transform: none; }

.to-top:hover {
    background: var(--turq);
    color: var(--navy);
    transform: translateY(-3px);
}

.to-top svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
    .to-top { transition: opacity 0.2s linear; transform: none; }
    .to-top.is-visible { transform: none; }
}

/* ---------------------------------------------------------------------------
   FLOATING ACTION BUTTONS — fixed, visible on every page
   Icon-only round buttons for a clean screen; a label pill slides out on hover.
   Book Now sits above WhatsApp.
   --------------------------------------------------------------------------- */
.floats {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 82;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.float-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #ffffff;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.float-btn__icon { width: 28px; height: 28px; flex-shrink: 0; }

.float-btn--wa {
    background: #25D366;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5), 0 2px 8px rgba(5, 38, 61, 0.3);
}
.float-btn--wa:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(5, 38, 61, 0.32);
}

.float-btn--book {
    background: var(--yellow);
    color: var(--navy);
    box-shadow: 0 10px 28px rgba(251, 199, 41, 0.5), 0 2px 8px rgba(5, 38, 61, 0.3);
}
.float-btn--book:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(251, 199, 41, 0.62), 0 4px 12px rgba(5, 38, 61, 0.32);
}

/* Label pill — hidden until hover/focus, then slides out to the left */
.float-btn__label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    padding: 0.5rem 0.875rem;
    background: var(--navy);
    color: var(--white);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(5, 38, 61, 0.28);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.float-btn:hover .float-btn__label,
.float-btn:focus-visible .float-btn__label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ---------------------------------------------------------------------------
   SOCIAL ICON BUTTONS
   --------------------------------------------------------------------------- */
.social { display: flex; gap: 0.625rem; margin-top: 1rem; }

.social__btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.social__btn:hover {
    background: var(--turq);
    color: var(--navy);
    transform: translateY(-3px);
}

.social__btn svg { width: 19px; height: 19px; }