/*--------------------------------------------------------------
# AVS Boats — Public Site styles
# Ported from avs-basic/main.css. All selectors are scoped under
# `.public-site` so this stylesheet cannot leak into the admin UI.
# Load order: must come AFTER bootstrap.min.css so that public-site
# selectors override Bootstrap inside `.public-site`.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Fonts (defined globally so the browser can fetch them once)
--------------------------------------------------------------*/

@font-face {
    font-family: 'Bicyclette';
    src: url('/public/fonts/Bicyclette-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bicyclette';
    src: url('/public/fonts/Bicyclette-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bicyclette';
    src: url('/public/fonts/Bicyclette-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/*--------------------------------------------------------------
# Brand variables (kept global; admin doesn't use these names)
--------------------------------------------------------------*/

:root {
    --color-navy: #22305b;
    --color-navy-deep: #07114a;
    --color-gold: #d7b56d;
    --color-light: #ebecec;
    --color-white: #ffffff;
    --color-grey: #919191;
    --color-ink: #111111;

    --font-display: 'Bicyclette', 'Segoe UI', Arial, sans-serif;
    /* Brand font used site-wide. Work Sans kept only as fallback while Bicyclette loads. */
    --font-body: 'Bicyclette', 'Work Sans', 'Segoe UI', Arial, sans-serif;

    --container: 1180px;
    --header-height: 88px;

    /* Default overlay-header height so hero top spacing is correct on first paint,
       BEFORE the JS measurement runs — prevents the content from jumping down when
       --nav-height is (re)set. JS then sets the same measured value (no visible shift).
       Desktop nav ~220px; mobile hamburger header ~177px (see max-width:768px below). */
    --nav-height: 220px;

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    --shadow-soft: 0 24px 80px rgba(7, 17, 74, 0.12);
    --shadow-card: 0 18px 50px rgba(7, 17, 74, 0.16);

    --section-y: clamp(48px, 5.5vw, 88px);
    --transition: 220ms ease;
}

/* Below the nav breakpoint the header collapses to the mobile (hamburger) layout, which is
   shorter — match --nav-height so the pre-JS hero spacing stays correct here too. */
@media (max-width: 768px) {
    :root {
        --nav-height: 178px;
    }
}

/* Dark page backdrop so the brief blank during a full-page navigation is navy (matching the
   dark hero at the top of every public page) instead of a white flash. The .public-site /
   admin layouts paint their own backgrounds on top once loaded. */
html {
    background-color: var(--color-navy-deep);
}

/*--------------------------------------------------------------
# Public root wrapper (replaces the global body block from avs-basic)
--------------------------------------------------------------*/

.public-site {
    color: var(--color-ink);
    background: var(--color-white);
    font-family: var(--font-body);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Full-bleed elements use width:100vw; clip horizontal overflow so a vertical
       scrollbar can't trigger a sideways scroll when the viewport shrinks. */
    overflow-x: clip;
    /* Sticky-footer layout: the page is at least as tall as the viewport, the main content
       grows to fill it, so the footer is pinned to the bottom on short pages and pushed
       below the content on long ones. Scales at every screen size (no fixed heights). */
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.public-site > #main-content {
    flex: 1 0 auto;
    /* Lay the content out as a column so the hero can stretch into any leftover space on
       short pages (see .page-hero flex-grow below) — the hero itself reaches the footer,
       rather than a separate flat block appearing beneath it. */
    display: flex;
    flex-direction: column;
}

/* On short pages the hero grows to fill the remaining height down to the footer, so its
   background/gradient extends all the way (no white gap). On content-rich pages there is no
   leftover space, so this has no effect. */
.public-site #main-content > .page-hero {
    flex: 1 0 auto;
}

.public-site > .site-footer {
    flex-shrink: 0;
}

.public-site,
.public-site *,
.public-site *::before,
.public-site *::after {
    box-sizing: border-box;
}

.public-site img {
    display: block;
    max-width: 100%;
}

.public-site a {
    color: inherit;
    text-decoration: none;
}

.public-site p,
.public-site h1,
.public-site h2,
.public-site h3 {
    margin-top: 0;
}

.public-site p {
    color: rgba(17, 17, 17, 0.72);
}

/*--------------------------------------------------------------
# Shared layout classes
--------------------------------------------------------------*/

.public-site .container {
    width: min(var(--container), calc(100% - 40px));
    max-width: none;
    margin-inline: auto;
    padding: 0;
}

.public-site .section-padding {
    padding-block: var(--section-y);
}

.public-site .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 760;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.public-site .btn:hover,
.public-site .btn:focus-visible {
    transform: translateY(-2px);
}

.public-site .btn-primary {
    background: var(--color-gold);
    color: var(--color-navy-deep);
}

.public-site .btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.40);
    color: var(--color-white);
}

.public-site .btn-secondary:hover,
.public-site .btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.65);
    /* Keep the text white on hover/focus — otherwise Bootstrap's .btn-secondary
       hover colour takes over and the label appears to lose its colour. */
    color: var(--color-white);
}

.public-site .btn.full {
    width: 100%;
}

.public-site .eyebrow {
    margin-bottom: 18px;
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.public-site .eyebrow.dark {
    color: var(--color-navy);
}

.public-site .section-kicker {
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.public-site .section-header {
    margin-bottom: clamp(34px, 5vw, 70px);
}

.public-site .section-header.narrow {
    max-width: 780px;
}

.public-site .section-header.split {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
}

.public-site .intro-grid h2,
.public-site .section-header h2,
.public-site .text-panel h2,
.public-site .contact-cta-grid h2,
.public-site .yachts-section .section-header h2 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.6vw, 4.9rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.public-site .intro-grid p,
.public-site .text-panel p,
.public-site .contact-cta-grid p {
    max-width: 700px;
    font-size: 1.05rem;
}

.public-site .text-link {
    margin-top: auto;
    color: var(--color-navy);
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-site .text-link::after {
    content: ' →';
    color: var(--color-gold);
}

/*--------------------------------------------------------------
# Header & Navigation
--------------------------------------------------------------*/

.public-site .site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: transparent;
}

.public-site .top-header {
    padding: 1.8rem 0 1rem;
}

.public-site .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.public-site .brand-name {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.public-site .brand-name:hover {
    opacity: 0.8;
}

.public-site .brand-logo {
    display: inline-flex;
    transition: opacity 0.3s ease;
}

.public-site .brand-logo:hover {
    opacity: 0.85;
}

.public-site .brand-logo img,
.public-site .site-footer .footer-logo img {
    display: block;
    height: 112px;
    width: auto;
    border-radius: 8px;
    /* The logo's transparent areas would otherwise show the navy background through them and
       the text would disappear — fill them white so the logo reads as designed. */
    background-color: #fff;
    /* Crop the outer edge to remove the faint white rim, then a 1px feather so the cut isn't
       hard. Two crossed gradients (one per axis) combined so every edge gets the same
       treatment; the centre stays fully opaque white.
       0..crop  = fully transparent (cropped away)
       crop..crop+feather = soft 1px fade
       rest = opaque */
    --logo-crop: 4px;
    --logo-feather: 1px;
    -webkit-mask-image:
        linear-gradient(to right, transparent var(--logo-crop), #000 calc(var(--logo-crop) + var(--logo-feather)), #000 calc(100% - var(--logo-crop) - var(--logo-feather)), transparent calc(100% - var(--logo-crop))),
        linear-gradient(to bottom, transparent var(--logo-crop), #000 calc(var(--logo-crop) + var(--logo-feather)), #000 calc(100% - var(--logo-crop) - var(--logo-feather)), transparent calc(100% - var(--logo-crop)));
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent var(--logo-crop), #000 calc(var(--logo-crop) + var(--logo-feather)), #000 calc(100% - var(--logo-crop) - var(--logo-feather)), transparent calc(100% - var(--logo-crop))),
        linear-gradient(to bottom, transparent var(--logo-crop), #000 calc(var(--logo-crop) + var(--logo-feather)), #000 calc(100% - var(--logo-crop) - var(--logo-feather)), transparent calc(100% - var(--logo-crop)));
    mask-composite: intersect;
}

.public-site .language-switcher {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.public-site .language-switcher a {
    width: 48px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.public-site .language-switcher a:hover {
    border-color: rgba(255, 255, 255, 0.55);
}

.public-site .language-switcher a.active {
    background: var(--color-navy);
    border-color: var(--color-navy);
}

.public-site .navigation-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    background: rgba(10, 18, 38, 0.22);
}

.public-site .main-navigation {
    width: 100%;
    /* Nav links/buttons are for clicking, not text — prevent text selection so no I-beam
       cursor or blinking caret ever appears (it looked like you could type into them).
       user-select inherits, so this covers every link and the toggle. */
    -webkit-user-select: none;
    user-select: none;
}

.public-site .main-navigation a,
.public-site .nav-toggle {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint. */
.public-site .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 42px;
    padding: 11px 9px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    cursor: pointer;
}

.public-site .nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Animate the bars into an "X" while the panel is open. */
.public-site .navigation-bar.is-nav-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.public-site .navigation-bar.is-nav-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.public-site .navigation-bar.is-nav-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.public-site .nav-list {
    display: flex;
    align-items: center;
    /* Tight gap so even the longest HR/DE labels fit on a single row. The mobile
       breakpoint below 768px keeps it tight and switches to scroll-on-overflow. */
    gap: 1.05rem;
    list-style: none;
    padding: 1.1rem 0;
    margin: 0;
    /* Hard "no-wrap" on desktop — never break the navbar into two rows.
       Below 768px the responsive block converts the row to a scrollable strip. */
    flex-wrap: nowrap;
}

/* Reset Bootstrap's ".nav-link" padding (0.5rem 1rem = 32px horizontal each!)
   inside the public navbar. We use class="nav-link dropdown-toggle" on dropdown
   parents purely as a styling hook — we don't want Bootstrap's chunky padding,
   because it eats ~160px across 5 dropdown parents and forces HR labels onto a
   second row. The nav-list flex `gap` is what visually separates items here. */
.public-site .nav-list .nav-link {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}

.public-site .nav-list li {
    margin: 0;
    padding: 0;
}

.public-site .nav-list li a {
    position: relative;
    color: var(--color-white);
    text-decoration: none;
    /* Slightly reduced from 1rem (~16px) to ~15.2px so multi-word HR labels
       (e.g. "Poslijeprodajne usluge", "Upravljanje jahtom") fit in one row. */
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    /* Guarantee a label never wraps inside its own item — otherwise multi-word
       labels could push the row height up even before flex-wrap kicks in. */
    white-space: nowrap;
    transition: color 0.3s ease;
}

.public-site .nav-list li a:hover {
    color: var(--color-gold);
}

.public-site .nav-list li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.45rem;
    width: 0%;
    height: 1px;
    background: var(--color-gold);
    transition: width 0.3s ease;
}

.public-site .nav-list li a:hover::after {
    width: 100%;
}

/*--------------------------------------------------------------
# Dropdown navigation
--------------------------------------------------------------*/

/* Each nav-item is the positioning context for its absolutely-positioned
   .dropdown-menu child. */
.public-site .nav-item,
.public-site .nav-item.dropdown {
    position: relative;
}

/* Parent toggle: rendered as an <a> for graceful fallback; JS preventDefaults
   so the click opens the dropdown instead of navigating. Cursor stays pointer. */
.public-site .nav-list .dropdown-toggle {
    cursor: pointer;
    user-select: none;
}

/* Bootstrap injects its own ::after chevron on .dropdown-toggle — suppress it
   so only our themed ::before chevron renders. */
.public-site .dropdown-toggle::after {
    display: none !important;
}

.public-site .dropdown-toggle::before {
    content: '▾';
    display: inline-block;
    font-size: 0.7rem;
    /* Tightened from 0.4rem — saves ~10px across 5 dropdown parents so the HR
       navbar stays on a single row. float: right keeps the chevron visually to
       the right of the label (a ::before with content otherwise renders first). */
    margin-left: 0.25rem;
    float: right;
    color: var(--color-gold);
    transform-origin: center;
    transition: transform 0.25s ease;
}

/* Rotate the chevron when the dropdown is hovered OR pinned open via JS. */
.public-site .nav-item.dropdown:hover > .dropdown-toggle::before,
.public-site .nav-item.dropdown:focus-within > .dropdown-toggle::before,
.public-site .nav-item.dropdown.is-open > .dropdown-toggle::before {
    transform: rotate(180deg);
}

/* Hidden state.
   IMPORTANT: Bootstrap defines `.dropdown-menu { display: none }` globally.
   We must explicitly set `display: block` here (with higher specificity via
   .public-site) so the menu is always laid out — visibility/opacity are then
   used to show/hide with a transition. Without this, the menu stays
   display:none and no amount of opacity tweaking will make it visible. */
.public-site .nav-item.dropdown > .dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    display: block;
    min-width: 260px;
    padding: 0.45rem 0;
    margin: 0;
    list-style: none;
    background: var(--color-white);
    border: 1px solid rgba(34, 48, 91, 0.08);
    border-radius: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    z-index: 1000;
    box-shadow: 0 22px 50px rgba(7, 17, 74, 0.18);
}

/* Invisible bridge above the dropdown so the hover state survives the gap
   between the parent toggle and the menu. */
.public-site .nav-item.dropdown > .dropdown-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.public-site .nav-item.dropdown > .dropdown-menu li a {
    display: block;
    padding: 0.85rem 1.2rem;
    color: var(--color-navy);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    border-left: 2px solid transparent;
    transition: background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, padding-left 0.2s ease;
}

.public-site .nav-item.dropdown > .dropdown-menu li a:hover,
.public-site .nav-item.dropdown > .dropdown-menu li a:focus-visible {
    color: var(--color-navy-deep);
    background: rgba(34, 48, 91, 0.06);
    border-left-color: var(--color-gold);
    padding-left: calc(1.2rem + 4px);
}

/* Reuse the navbar's gold underline animation but suppress it inside the
   dropdown — the gold left-accent already conveys the hover state. */
.public-site .nav-item.dropdown > .dropdown-menu li a::after {
    display: none;
}

/* Visible states: hover, keyboard focus, or pinned-open via JS click. */
.public-site .nav-item.dropdown:hover > .dropdown-menu,
.public-site .nav-item.dropdown:focus-within > .dropdown-menu,
.public-site .nav-item.dropdown.is-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/*--------------------------------------------------------------
# Hero section
--------------------------------------------------------------*/

.public-site .hero-section {
    position: relative;
    min-height: 100svh;
    padding-top: var(--header-height);
    display: grid;
    align-items: center;
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-navy-deep);
}

.public-site .hero-media,
.public-site .hero-media img,
.public-site .hero-overlay {
    position: absolute;
    inset: 0;
}

.public-site .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.92) contrast(1.04);
}

.public-site .hero-overlay {
    background:
        linear-gradient(90deg, rgba(7, 17, 74, 0.88) 0%, rgba(34, 48, 91, 0.68) 44%, rgba(34, 48, 91, 0.12) 100%),
        linear-gradient(180deg, rgba(7, 17, 74, 0.22), rgba(7, 17, 74, 0.36));
}

.public-site .hero-content {
    position: relative;
    z-index: 2;
    /* Same top spacing as the sub-pages so the hero title sits at a consistent height. */
    padding-block: clamp(96px, 14vw, 180px) clamp(110px, 10vw, 150px);
}

.public-site .hero-section h1 {
    max-width: 860px;
    margin-bottom: 28px;
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 300;
    line-height: 0.94;
    letter-spacing: -0.065em;
}

.public-site .hero-lead {
    max-width: 720px;
    margin-bottom: 38px;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.55;
}

.public-site .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/*--------------------------------------------------------------
# Hero animated waves
--------------------------------------------------------------*/

.public-site .hero-wave-divider {
    /* Pinned to the bottom of the hero (the .hero-media fills the whole hero), so the wave
       always sits flush against the bottom edge of the hero image at every screen size. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 72px;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.public-site .hero-waves {
    display: block;
    width: 100%;
    height: 100%;
}

.public-site .wave use {
    will-change: transform;
}

.public-site .wave-one use {
    animation: avs-wave-move-one 18s linear infinite;
    fill: rgba(34, 48, 91, 0.85);
}

.public-site .wave-two use {
    animation: avs-wave-move-two 14s linear infinite;
    fill: rgba(215, 181, 109, 0.45);
}

.public-site .wave-three use {
    animation: avs-wave-move-three 22s linear infinite;
    fill: rgba(215, 181, 109, 0.92);
}

/* Thin white front wave so the hero blends smoothly into the white section below. */
.public-site .wave-four use {
    animation: avs-wave-move-one 26s linear infinite;
    fill: #ffffff;
}

@keyframes avs-wave-move-one {
    from { transform: translate3d(85px, 0, 0); }
    to { transform: translate3d(-90px, 0, 0); }
}

@keyframes avs-wave-move-two {
    from { transform: translate3d(-90px, 0, 0); }
    to { transform: translate3d(85px, 0, 0); }
}

@keyframes avs-wave-move-three {
    from { transform: translate3d(-70px, 0, 0); }
    to { transform: translate3d(90px, 0, 0); }
}

/*--------------------------------------------------------------
# Placeholder page hero (used by sub-pages without their own hero)
--------------------------------------------------------------*/

.public-site .page-hero {
    position: relative;
    /* Top spacing tracks the REAL header height (--nav-height, measured by JS) + a small
       scalable gap, so it stays correct at every width (mobile, tablet, desktop). Falls back
       to a sensible value before the script runs. */
    padding-block: calc(var(--nav-height, 200px) + clamp(24px, 3vw, 52px)) clamp(72px, 8vw, 110px);
    background: var(--color-navy-deep);
    color: var(--color-white);
    overflow: hidden;
}

.public-site .page-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 24%, rgba(215, 181, 109, 0.18), transparent 55%),
        linear-gradient(180deg, rgba(7, 17, 74, 0.0), rgba(7, 17, 74, 0.35));
    pointer-events: none;
}

.public-site .page-hero-content {
    position: relative;
    z-index: 2;
}

.public-site .page-hero h1 {
    margin-bottom: 22px;
    max-width: 880px;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.05em;
    color: var(--color-white);
}

.public-site .page-hero-lead {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
    line-height: 1.55;
}

/*--------------------------------------------------------------
# Intro section
--------------------------------------------------------------*/

.public-site .intro-section {
    background: var(--color-white);
    /* Tighten the gap down to the featured-listings section below. */
    padding-bottom: clamp(20px, 2.5vw, 40px);
}

.public-site .intro-grid {
    display: grid;
    grid-template-columns: 0.5fr minmax(0, 1.3fr) 0.7fr;
    gap: clamp(28px, 5vw, 70px);
    align-items: start;
}

.public-site .intro-stat-card {
    padding: 28px;
    background: var(--color-light);
    border-left: 4px solid var(--color-gold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.public-site .intro-stat-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-grey);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.public-site .intro-stat-card strong {
    color: var(--color-navy);
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.2;
}

/*--------------------------------------------------------------
# Home featured listings
--------------------------------------------------------------*/

.public-site .home-featured-listings {
    background: var(--color-white);
    /* Tighten the gap up to the intro section above. */
    padding-top: clamp(20px, 2.5vw, 40px);
}

.public-site .home-featured-listings .section-header.split {
    align-items: flex-end;
    margin-bottom: clamp(34px, 5vw, 56px);
}

.public-site .home-featured-listings__carousel {
    position: relative;
}

/* Soft edge fades on both sides: the cards appear to scroll under the section,
   reinforcing the auto-scroll feel. */
.public-site .home-featured-listings__carousel::before,
.public-site .home-featured-listings__carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(24px, 3vw, 48px);
    z-index: 2;
    pointer-events: none;
}

.public-site .home-featured-listings__carousel::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

.public-site .home-featured-listings__carousel::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

/* Continuous horizontal marquee. The track holds the cards twice and scrolls
   linearly; at translateX(-50%) the second copy sits exactly where the first
   started, so it loops seamlessly — cards slide off one edge and reappear at the
   other, with no flash and no step transition. Slide width matches the old 3-up
   grid, so card shape is unchanged. */
.public-site .home-featured-listings__viewport {
    overflow: hidden;
    container-type: inline-size;
}

.public-site .home-featured-listings__track {
    display: flex;
    width: max-content;
}

.public-site .home-featured-listings__track.is-marquee {
    animation: hfl-marquee var(--hfl-marquee-duration, 36s) linear infinite;
}

/* Pause on hover so visitors can read a card. */
.public-site .home-featured-listings__carousel:hover .home-featured-listings__track.is-marquee {
    animation-play-state: paused;
}

/* Each slide owns its trailing gap (margin, not gap) so -50% is exactly one set. */
.public-site .home-featured-listings__slide {
    flex: 0 0 calc((100cqw - 44px) / 3);
    min-width: 0;
    margin-right: 22px;
}

/* The default card shadow has a 90px blur that bleeds into the narrow gaps between
   cards, tinting them grey. A tighter shadow with negative spread stays under the card
   so the white section shows cleanly between listings. */
.public-site .home-featured-listings__slide .public-boat-card {
    box-shadow: 0 22px 38px -20px rgba(7, 17, 74, 0.3);
}

.public-site .home-featured-listings__track:not(.is-marquee) .home-featured-listings__slide:last-child {
    margin-right: 0;
}

@keyframes hfl-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Prev/next arrows beside the cards — bare chevrons (no circle), larger icon. */
.public-site .hfl-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 0;
    background: transparent;
    color: var(--color-navy);
    font-family: var(--font-display);
    font-size: 1.95rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.public-site .hfl-arrow:hover,
.public-site .hfl-arrow:focus-visible {
    color: var(--color-gold);
}

.public-site .hfl-arrow--prev {
    left: -46px;
}

.public-site .hfl-arrow--next {
    right: -46px;
}

/* On tighter viewports the side gutter shrinks, so keep the arrows just off the
   card edge instead of letting them clip past the screen. */
@media (max-width: 1260px) {
    .public-site .hfl-arrow--prev {
        left: -10px;
    }

    .public-site .hfl-arrow--next {
        right: -10px;
    }
}

@media (max-width: 1100px) {
    .public-site .home-featured-listings__slide {
        flex-basis: calc((100cqw - 22px) / 2);
    }
}

@media (max-width: 720px) {
    .public-site .home-featured-listings__slide {
        flex-basis: 100cqw;
    }
}

/*--------------------------------------------------------------
# Services section
--------------------------------------------------------------*/

.public-site .services-section,
.public-site .contact-cta-section {
    background: var(--color-light);
}

.public-site .services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.public-site .service-card {
    min-height: 370px;
    padding: clamp(26px, 3vw, 38px);
    background: var(--color-white);
    border: 1px solid rgba(34, 48, 91, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.public-site .service-card:hover {
    transform: translateY(-7px);
    border-color: rgba(215, 181, 109, 0.5);
    box-shadow: var(--shadow-card);
}

.public-site .service-number {
    margin-bottom: 56px;
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.public-site .service-card h3 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.8vw, 1.9rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.public-site .service-card p {
    margin-bottom: 28px;
}

.public-site .service-card a {
    margin-top: auto;
    color: var(--color-navy);
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-site .service-card a::after {
    content: ' →';
    color: var(--color-gold);
}

/*--------------------------------------------------------------
# Image + Text section
--------------------------------------------------------------*/

.public-site .image-text-section {
    background: var(--color-white);
}

.public-site .image-text-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(34px, 6vw, 88px);
    align-items: center;
}

.public-site .image-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.public-site .image-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: inherit;
    z-index: 2;
    pointer-events: none;
}

.public-site .image-frame img {
    width: 100%;
    min-height: 520px;
    object-fit: cover;
}

.public-site .text-panel {
    max-width: 620px;
}

.public-site .feature-list {
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
    display: grid;
    gap: 16px;
}

.public-site .feature-list li {
    position: relative;
    padding-left: 30px;
    color: var(--color-navy-deep);
    font-weight: 650;
}

.public-site .feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    transform: translateY(-50%);
}

/*--------------------------------------------------------------
# Featured yachts section
--------------------------------------------------------------*/

.public-site .yachts-section {
    background: var(--color-navy-deep);
    color: var(--color-white);
    overflow: hidden;
}

.public-site .yachts-section .section-header h2,
.public-site .yachts-section p {
    color: var(--color-white);
}

.public-site .yachts-section .text-link {
    color: var(--color-gold);
}

.public-site .yacht-card-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.85fr 0.85fr;
    gap: 18px;
}

.public-site .yacht-card {
    min-height: 520px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-navy);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.public-site .yacht-card img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    opacity: 0.86;
    transition: transform 600ms ease, opacity 600ms ease;
}

.public-site .yacht-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 17, 74, 0.02), rgba(7, 17, 74, 0.86));
}

.public-site .yacht-card:hover img {
    transform: scale(1.04);
    opacity: 1;
}

.public-site .yacht-card-content {
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    padding: clamp(24px, 3vw, 42px);
}

.public-site .yacht-meta {
    margin-bottom: 10px;
    color: var(--color-gold) !important;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.public-site .yacht-card h3 {
    margin-bottom: 8px;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2vw, 2.4rem);
    line-height: 1.1;
}

.public-site .yacht-card-content p:last-child {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.80);
}

/*--------------------------------------------------------------
# Locations / Contact section
--------------------------------------------------------------*/

.public-site .locations-section {
    background: var(--color-white);
}

.public-site .locations-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}

.public-site .locations-header {
    margin-bottom: clamp(28px, 4vw, 48px);
}

.public-site .locations-header h2 {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.6vw, 4.9rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.public-site .locations-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 36px;
}

.public-site .location-block,
.public-site .contact-details {
    padding: 28px;
    background: var(--color-light);
    border-left: 4px solid var(--color-gold);
    border-radius: var(--radius-md);
}

.public-site .location-block h3,
.public-site .contact-details h3 {
    margin-bottom: 12px;
    color: var(--color-navy-deep);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.public-site .location-block p,
.public-site .contact-details p {
    margin-bottom: 0;
    color: rgba(17, 17, 17, 0.74);
}

.public-site .contact-details {
    max-width: 620px;
}

.public-site .contact-details h3:not(:first-child) {
    margin-top: 28px;
}

.public-site .contact-details a {
    color: var(--color-navy);
    font-weight: 600;
}

.public-site .contact-details a:hover {
    color: var(--color-gold);
}

.public-site .locations-map {
    min-height: 520px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.public-site .locations-map iframe {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
}

/*--------------------------------------------------------------
# Contact CTA section
--------------------------------------------------------------*/

.public-site .contact-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(34px, 6vw, 90px);
    align-items: center;
}

.public-site .contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

/* Keep the call-to-action a centred pill at every width: fills the narrow desktop card
   but stays capped and centred once the card goes full-width on tablet/mobile. */
.public-site .contact-card .btn {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
}

.public-site .contact-card p {
    margin: 16px 0 0;
    color: var(--color-grey);
    font-size: 0.92rem;
}

/*--------------------------------------------------------------
# Contact form
--------------------------------------------------------------*/

.public-site .contact-form-section {
    background: var(--color-white);
}

.public-site .contact-form-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.public-site .contact-form-section__intro p {
    color: var(--color-grey);
}

.public-site .contact-form-section__listing {
    margin-top: 18px;
    padding: 14px 16px;
    border-left: 3px solid var(--color-gold);
    background: rgba(36, 53, 107, 0.04);
}

.public-site .contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.public-site .contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.public-site .contact-form__field--full {
    grid-column: 1 / -1;
}

.public-site .contact-form__field label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-navy);
}

.public-site .contact-form__field input,
.public-site .contact-form__field select,
.public-site .contact-form__field textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid rgba(36, 53, 107, 0.18);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-navy);
    font: inherit;
}

/* Phone: calling-code dropdown + the rest of the number side by side. */
.public-site .contact-form__phone {
    display: flex;
    gap: 8px;
}

.public-site .contact-form__phone-code {
    width: auto;
    flex: 0 0 6.5rem;
    padding-inline: 10px;
}

.public-site .contact-form__phone input {
    flex: 1 1 auto;
    min-width: 0;
}

.public-site .contact-form__field textarea {
    min-height: 160px;
    resize: vertical;
}

.public-site .contact-form__field input:focus,
.public-site .contact-form__field select:focus,
.public-site .contact-form__field textarea:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(36, 53, 107, 0.12);
}

.public-site .contact-form__field input[aria-invalid="True"],
.public-site .contact-form__field textarea[aria-invalid="True"] {
    border-color: #b00020;
}

.public-site .contact-form__validation {
    color: #8a0019;
    font-size: 0.86rem;
}

.public-site .contact-form__turnstile {
    margin-top: 22px;
}

.public-site .contact-form__submit {
    margin-top: 22px;
}

.public-site .contact-form__error,
.public-site .contact-form__success {
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
}

.public-site .contact-form__error {
    background: rgba(176, 0, 32, 0.08);
    color: #8a0019;
}

.public-site .contact-form__success {
    background: rgba(36, 53, 107, 0.06);
    color: var(--color-navy);
}

.public-site .contact-form__success h3 {
    margin: 0 0 8px;
}

.public-site .contact-form__success p {
    margin: 0;
}

@media (max-width: 900px) {
    .public-site .contact-form-section__inner,
    .public-site .contact-form__grid {
        grid-template-columns: 1fr;
    }

    /* Centre the submit button on the stacked (mobile) form. */
    .public-site .contact-form__submit {
        display: block;
        width: fit-content;
        margin-inline: auto;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.public-site .avs-notfound {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    padding-block: clamp(60px, 10vw, 140px);
}

.public-site .avs-notfound__title {
    margin: 0.2em 0 0.4em;
}

.public-site .avs-notfound__body {
    margin: 0 auto 1.6rem;
    color: var(--color-muted, rgba(0, 0, 0, 0.6));
}

.public-site .site-footer {
    position: relative;
    z-index: 2;
    padding-block: 32px;
    background: var(--color-navy);
    color: var(--color-white);
}

/* Keep the footer nav links above any overlapping layer so taps always reach them. */
.public-site .footer-nav {
    position: relative;
    z-index: 1;
}

.public-site .footer-nav a {
    display: inline-block;
}

.public-site .footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: start;
}

.public-site .site-footer .brand-name {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--color-white);
}

.public-site .footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.public-site .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Plain platform icons — no button/chip background. */
    color: var(--color-white);
    transition: color 0.2s ease, transform 0.2s ease;
}

.public-site .footer-social a:hover {
    color: var(--color-gold);
    transform: translateY(-2px);
}

.public-site .site-footer .footer-logo {
    display: inline-block;
    margin-bottom: 10px;
    transition: opacity 0.3s ease;
}

.public-site .site-footer .footer-logo:hover {
    opacity: 0.85;
}

/* .footer-logo img shares the header logo's sizing, white fill and edge feather — see the
   combined .brand-logo img / .footer-logo img rule above. */

.public-site .site-footer p {
    max-width: 520px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.72);
}

.public-site .footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 16px;
    gap: 12px 30px;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.public-site .footer-nav a:hover,
.public-site .footer-nav a:focus-visible {
    color: var(--color-gold);
}

/* Newsletter sign-up: sits in the right column (where the nav used to be),
   horizontally centred and top-aligned with the "AVS Boats" brand. */
.public-site .site-footer .footer-newsletter {
    text-align: left;
    align-self: center;
}

.public-site .site-footer .footer-newsletter__title {
    display: block;
    max-width: 340px;
    margin: 0 auto 12px;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--color-white);
}

.public-site .site-footer .footer-newsletter__lead {
    max-width: 340px;
    margin: 0 auto 16px;
    color: rgba(255, 255, 255, 0.72);
}

.public-site .site-footer .footer-newsletter__form {
    margin: 0;
}

.public-site .site-footer .footer-newsletter__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 340px;
    margin: 0 auto;
}

.public-site .site-footer .footer-newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.public-site .site-footer .footer-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.public-site .site-footer .footer-newsletter__input:focus {
    outline: none;
    border-color: var(--color-gold);
    background: rgba(255, 255, 255, 0.12);
}

.public-site .site-footer .footer-newsletter__button {
    padding: 12px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--color-gold);
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.public-site .site-footer .footer-newsletter__button:hover:not(:disabled) {
    background: #e6c987;
    transform: translateY(-1px);
}

.public-site .site-footer .footer-newsletter__button:disabled {
    opacity: 0.6;
    cursor: default;
}

.public-site .site-footer .footer-newsletter__message {
    margin: 12px auto 0;
    max-width: 460px;
    font-size: 0.88rem;
}

.public-site .site-footer .footer-newsletter__message--ok {
    color: var(--color-gold);
}

.public-site .site-footer .footer-newsletter__message--error {
    color: #ffb4b4;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width: 1100px) {
    .public-site .services-grid,
    .public-site .yacht-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-site .yacht-card.featured {
        grid-column: 1 / -1;
    }

    .public-site .intro-grid,
    .public-site .image-text-grid,
    .public-site .contact-cta-grid {
        grid-template-columns: 1fr;
    }

    .public-site .intro-stat-card,
    .public-site .text-panel {
        max-width: 720px;
    }
}

@media (max-width: 900px) {
    .public-site .locations-grid,
    .public-site .locations-columns {
        grid-template-columns: 1fr;
    }

    .public-site .locations-map,
    .public-site .locations-map iframe {
        min-height: 420px;
    }
}

@media (max-width: 820px) {
    :root {
        --header-height: 78px;
    }

    .public-site .header-inner {
        width: min(100% - 28px, 1320px);
    }

    .public-site .section-header.split {
        display: block;
    }

    .public-site .section-header.split .text-link {
        display: inline-block;
        margin-top: 18px;
    }

    .public-site .services-grid,
    .public-site .yacht-card-grid {
        grid-template-columns: 1fr;
    }

    .public-site .service-card,
    .public-site .yacht-card {
        min-height: auto;
    }

    .public-site .yacht-card img {
        min-height: 390px;
    }

    .public-site .image-frame img {
        min-height: 390px;
    }

    .public-site .footer-grid {
        grid-template-columns: 1fr;
    }

    .public-site .footer-nav {
        justify-content: flex-start;
    }
}

/* Compact desktop nav for mid-size viewports (~769px–1180px).
   Keeps the navbar on a single row before the 768px breakpoint switches it
   to a horizontally-scrollable strip. Tightens the gap and label font slightly
   without changing alignment, design, or dropdown behaviour. */
@media (max-width: 1180px) and (min-width: 769px) {
    .public-site .nav-list {
        gap: 0.85rem;
    }

    .public-site .nav-list li a {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .public-site .top-header {
        padding: 1.2rem 0 0.8rem;
    }


    .public-site .brand-name {
        font-size: 1.65rem;
    }

    .public-site .brand-logo img,
    .public-site .site-footer .footer-logo img {
        height: 76px;
    }

    .public-site .language-switcher {
        gap: 0.45rem;
    }

    .public-site .language-switcher a {
        width: 42px;
        height: 36px;
        font-size: 0.85rem;
    }

    /* Mobile: the nav bar itself is fully transparent so only the hamburger
       (nav-toggle) is visible over the hero. The dropdown panel below carries
       the AVS gradient. */
    .public-site .navigation-bar {
        border-top: 0;
        border-bottom: 0;
        backdrop-filter: none;
        background: transparent;
        overflow: visible;
    }

    /* nav-bar-inner anchors the gradient overlay; the hamburger sits above it. */
    .public-site .nav-bar-inner {
        position: relative;
        display: flex;
        justify-content: flex-start;
        padding: 0;
    }

    .public-site .nav-toggle {
        display: flex;
        margin: 0.85rem 0;
        position: relative;
        z-index: 95;
    }

    /* Open menu: gradient overlay (brand blue → slate-grey) that starts at the
       navbar (so the hamburger sits on the gradient) and fills full-bleed down to
       the bottom of the screen. The top-header (brand + language) stays above,
       over the hero, untouched. */
    .public-site .main-navigation {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        width: 100vw;
        height: 100dvh;
        overflow-y: auto;
        background: linear-gradient(160deg, #07114a 0%, #22305b 55%, #434f70 100%);
        padding-top: 4.5rem;
        z-index: 90;
    }

    /* The bar stays transparent even when open — only the panel below appears. */
    .public-site .navigation-bar.is-nav-open .main-navigation {
        display: block;
    }

    /* No-flash lock during a language switch: the header re-renders (dropping
       "is-nav-open"), but this lock lives on <html>, which never re-renders, so
       the panel stays visible with no gap until the open state is re-applied. */
    html.nav-switching .public-site .main-navigation {
        display: block;
    }

    /* Full width; transparent so the panel gradient shows through. */
    .public-site .nav-list {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0;
        width: 100%;
        background: transparent;
    }

    .public-site .nav-list > li {
        border-bottom: 0;
    }

    /* Every nav link (plain or dropdown parent) is the same uniform height,
       in the AVS brand font. */
    .public-site .nav-list li a {
        display: flex;
        align-items: center;
        min-height: 3.25rem;
        padding: 0 1.25rem;
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 400;
        letter-spacing: -0.01em;
        white-space: normal;
    }

    .public-site .nav-list > li > a::after {
        display: none;
    }

    /* Dropdown parent: same left padding as plain links (Home/About/News/Contact)
       so all labels line up in one vertical column; extra right padding lifts the
       chevron off the screen edge. Overrides the base ".nav-list .nav-link {padding:0}"
       which otherwise removes padding from the dropdown parents only. */
    .public-site .nav-list .dropdown-toggle {
        display: flex;
        padding: 0 1.6rem 0 1.25rem;
    }

    .public-site .nav-list .dropdown-toggle::before,
    .public-site .nav-list .dropdown-toggle::after {
        float: none;
        order: 2;
        font-size: 1.15rem;
        line-height: 1;
    }

    /* Chevron right-aligned so toggles line up in a column, lifted off the edge
       by the toggle's right padding. */
    .public-site .nav-list .dropdown-toggle::before {
        margin-left: auto;
    }

    .public-site .nav-item.dropdown.is-open > .dropdown-toggle {
        color: var(--color-gold);
    }

    /* Submenus: desktop white dropdown card, inset in the stacked panel. */
    .public-site .nav-item.dropdown {
        position: static;
        width: 100%;
    }

    /* Submenu matches the nav-list: same navy background, same white font. */
    .public-site .nav-item.dropdown > .dropdown-menu {
        position: static;
        display: none;
        min-width: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        background: rgba(255, 255, 255, 0.06);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    /* Sub-options: same uniform height as a top-level option, just indented. */
    .public-site .nav-item.dropdown > .dropdown-menu li a {
        display: flex;
        align-items: center;
        min-height: 3.25rem;
        padding: 0 1.2rem 0 2.25rem;
        color: var(--color-white);
        font-size: 0.95rem;
        font-weight: 400;
        white-space: nowrap;
        border-left: 2px solid transparent;
        transition: background 0.2s ease, color 0.2s ease,
                    border-color 0.2s ease, padding-left 0.2s ease;
    }

    .public-site .nav-item.dropdown > .dropdown-menu li a::after {
        display: none;
    }

    .public-site .nav-item.dropdown > .dropdown-menu li a:hover,
    .public-site .nav-item.dropdown > .dropdown-menu li a:focus-visible {
        color: var(--color-gold);
        background: rgba(255, 255, 255, 0.05);
        border-left-color: var(--color-gold);
        padding-left: calc(2.25rem + 4px);
    }

    .public-site .nav-item.dropdown > .dropdown-menu::before {
        display: none;
    }

    /* Mobile: only .is-open reveals submenus — ignore hover/focus-within. */
    .public-site .nav-item.dropdown:hover > .dropdown-menu,
    .public-site .nav-item.dropdown:focus-within > .dropdown-menu {
        display: none;
    }

    .public-site .nav-item.dropdown.is-open > .dropdown-menu {
        display: block;
    }

    .public-site .hero-section {
        min-height: 100vh;
    }

    .public-site .hero-content {
        padding-top: 150px;
        padding-bottom: 90px;
    }

    .public-site .hero-content h1 {
        font-size: clamp(2.1rem, 9vw, 3.1rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
        max-width: 100%;
    }

    .public-site .hero-lead {
        font-size: 1.02rem;
        line-height: 1.55;
        max-width: 92%;
    }

    .public-site .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .public-site .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

@media (max-width: 540px) {
    .public-site .container {
        width: min(100% - 28px, var(--container));
    }

    .public-site .hero-content {
        padding-block: 110px 120px;
    }

    .public-site .hero-actions,
    .public-site .btn {
        width: 100%;
    }

    .public-site .intro-grid h2,
    .public-site .section-header h2,
    .public-site .text-panel h2,
    .public-site .contact-cta-grid h2,
    .public-site .locations-header h2 {
        font-size: clamp(2.05rem, 12vw, 3.15rem);
    }

    .public-site .contact-card {
        padding: 22px;
    }
}

/*--------------------------------------------------------------
# Accessibility / reduced motion
--------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    .public-site *,
    .public-site *::before,
    .public-site *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*--------------------------------------------------------------
# Boats for sale — listing page (filters + horizontal cards)
# Brokerage look: navy/gold palette, soft shadows, rounded corners.
--------------------------------------------------------------*/

.public-site .boat-listings {
    /* Blue gradient fading to light at the bottom — matches the avs-basic
       boats-for-sale reference (.boats-listing-section). */
    background: linear-gradient(
        180deg,
        #22305b 0%,
        #2d3d6b 35%,
        #56627f 70%,
        #ebecec 100%);
    /* Tracks the real header height (--nav-height) + a scalable gap — correct at all widths. */
    padding-top: calc(var(--nav-height, 200px) + clamp(24px, 3vw, 52px));
}

/* Section header mirrors the reference .section-header.split:
   gold kicker + large light title on the left, "Request assistance" link
   bottom-aligned on the right, with generous spacing before the filters. */
.public-site .boat-listings__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(30px, 5vw, 70px);
    flex-wrap: wrap;
    margin-bottom: clamp(34px, 5vw, 70px);
}

.public-site .boat-listings__kicker {
    margin-bottom: 14px;
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.public-site .boat-listings__title {
    color: rgba(255, 255, 255, 0.94);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.6vw, 4.9rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.public-site .boat-listings__count {
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.public-site .boat-listings__head-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    white-space: nowrap;
    /* Drop the link + count down into the header's bottom gap so they sit
       just above the filter bar (leaving a small breathing space). */
    margin-bottom: calc(clamp(34px, 5vw, 70px) * -1 + 12px);
}

/* Force the "Request assistance" link above the listings count regardless of
   DOM order, so the count always reads underneath it. */
.public-site .boat-listings__head-actions .text-link {
    order: 0;
}

.public-site .boat-listings__head-actions .boat-listings__count {
    order: 1;
}

.public-site .boat-listings__head-actions .text-link {
    margin-top: 0;
    color: rgba(255, 255, 255, 0.92);
}

.public-site .boat-listings__head-actions .text-link::after {
    content: ' →';
    color: var(--color-gold);
}

.public-site .boat-listings__head-actions .text-link:hover,
.public-site .boat-listings__head-actions .text-link:focus-visible {
    color: var(--color-gold);
}

/* ── Filter bar ─────────────────────────────────────────────── */

.public-site .boat-filters {
    margin-bottom: 30px;
    padding: 18px;
    background: var(--color-white);
    border: 1px solid rgba(34, 48, 91, 0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.public-site .boat-filters__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.public-site .boat-filter-pill {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(34, 48, 91, 0.18);
    border-radius: 999px;
    background: transparent;
    color: var(--color-navy);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.public-site .boat-filter-pill:hover {
    border-color: var(--color-gold);
    color: var(--color-navy-deep);
}

.public-site .boat-filter-pill.is-active {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy-deep);
}

.public-site .boat-filters__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.public-site .boat-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.public-site .boat-filter-field--wide {
    grid-column: span 2;
}

.public-site .boat-filter-field label,
.public-site .boat-filter-field__label {
    color: var(--color-navy);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-site .boat-filter-field input,
.public-site .boat-filter-field select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(34, 48, 91, 0.18);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.92rem;
}

.public-site .boat-filter-field input:focus,
.public-site .boat-filter-field select:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(34, 48, 91, 0.25);
}

/* Manufacturer autocomplete — custom dropdown styled like the rest of the
   page (replaces the native <datalist>, which can't be styled and pops to the
   side). Anchored to the field so it drops straight down under the input. */
.public-site .boat-filter-field--autocomplete {
    position: relative;
}

.public-site .boat-filter-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid rgba(34, 48, 91, 0.18);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
}

.public-site .boat-filter-suggestions li {
    margin: 0;
    padding: 0;
}

.public-site .boat-filter-suggestion {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.public-site .boat-filter-suggestion:hover,
.public-site .boat-filter-suggestion:focus-visible {
    outline: none;
    background: rgba(34, 48, 91, 0.07);
    color: var(--color-navy-deep);
}

.public-site .boat-filter-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.public-site .boat-filter-range__dash {
    color: var(--color-grey);
}

.public-site .boat-filter-field--actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    justify-content: end;
}

.public-site .boat-filter-apply {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--color-navy);
    border-radius: var(--radius-sm);
    background: var(--color-navy);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), opacity var(--transition);
}

.public-site .boat-filter-apply:hover:not([disabled]) {
    background: transparent;
    color: var(--color-navy);
}

.public-site .boat-filter-apply[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.public-site .boat-filter-field--reset {
    justify-content: end;
}

.public-site .boat-filter-reset {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(34, 48, 91, 0.2);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-navy);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.public-site .boat-filter-reset:hover:not([disabled]) {
    background: var(--color-navy);
    color: var(--color-white);
}

.public-site .boat-filter-reset[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Listing grid + states ──────────────────────────────────── */

.public-site .boat-listings__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    transition: opacity 0.25s ease;
}

/* While new filter results load, dim the current results and fade back in — smooth
   transition instead of an abrupt blank/reload flash. */
.public-site .boat-listings__grid.is-updating {
    opacity: 0.4;
    pointer-events: none;
}

@media (max-width: 1100px) {
    .public-site .boat-listings__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.public-site .boat-listings__state {
    padding: 48px 24px;
    text-align: center;
    background: var(--color-white);
    border: 1px solid rgba(34, 48, 91, 0.08);
    border-radius: var(--radius-md);
}

.public-site .boat-listings__empty h3 {
    margin-bottom: 8px;
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
}

.public-site .boat-listings__empty .boat-listing-btn {
    margin-top: 16px;
}

/* ── Image-overlay card (matches avs-basic boats-for-sale) ─────
   A tall image fills the card; a dark gradient overlay sits on top;
   content (meta · title · specs · price · CTA) is anchored at the
   bottom. Cards sit in a 2-column grid inside .container. */

.public-site .public-boat-card {
    position: relative;
    min-height: 520px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-navy);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.18);
}

.public-site .public-boat-card__link {
    display: block;
    height: 100%;
    min-height: 520px;
    color: var(--color-white);
}

.public-site .public-boat-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Every card uses the same treatment the sold cards have: desaturated + dimmed imagery. */
    filter: grayscale(0.35);
    opacity: 0.55;
    transition: transform 600ms ease, opacity 600ms ease;
}

.public-site .public-boat-card:hover .public-boat-card__image {
    transform: scale(1.04);
    opacity: 1;
}

.public-site .public-boat-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(7, 17, 74, 0) 0%,
        rgba(7, 17, 74, 0.08) 55%,
        rgba(7, 17, 74, 0.62) 100%);
}

.public-site .public-boat-card__badges {
    position: absolute;
    z-index: 2;
    top: 24px;
    left: 24px;
    max-width: calc(100% - 160px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.public-site .public-boat-card__status-banner {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    padding: 12px 22px;
    border-bottom-left-radius: var(--radius-md);
    background: rgba(36, 53, 107, 0.94);
    color: var(--color-white);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

/* All status banners share the same blue regardless of status (Sold / On order /
   Sale pending) — only the corner position stays. */
.public-site .public-boat-card__status-banner--sold,
.public-site .public-boat-card__status-banner--pending,
.public-site .public-boat-card__status-banner--onorder {
    background: rgba(36, 53, 107, 0.94);
    color: var(--color-white);
}

.public-site .public-boat-card__badge {
    padding: 8px 13px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

.public-site .public-boat-card__badge--featured,
.public-site .public-boat-card__badge--prepared {
    background: rgba(215, 181, 109, 0.94);
    color: var(--color-navy-deep);
}

.public-site .public-boat-card__badge--tag {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-navy-deep);
}

/* Content overlaid at the bottom of the image. */
.public-site .public-boat-card__content {
    position: absolute;
    z-index: 2;
    inset: auto 0 0 0;
    padding: clamp(24px, 3vw, 40px);
}

.public-site .public-boat-card__meta {
    margin: 0 0 10px;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.public-site .public-boat-card__dot {
    margin: 0 8px;
    color: var(--color-white);
}

.public-site .public-boat-card__title {
    margin: 0 0 14px;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
}

/* Inline specs separated by gold dots — not a bullet list. */
.public-site .public-boat-card__specs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    color: var(--color-white);
    font-size: 0.92rem;
}

.public-site .public-boat-card__spec:not(:last-child)::after {
    content: '·';
    margin: 0 14px;
    color: var(--color-white);
}

.public-site .public-boat-card__description {
    max-width: 560px;
    margin: 0 0 22px;
    color: var(--color-white);
    font-size: 0.95rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.public-site .public-boat-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.public-site .public-boat-card__pricing {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.public-site .public-boat-card__price {
    display: block;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 2.1rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    /* Keep the amount and the € symbol on the same line (don't let € wrap alone). */
    white-space: nowrap;
}

.public-site .public-boat-card__tax {
    color: var(--color-white);
    font-size: 0.84rem;
}

.public-site .public-boat-card__cta {
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--transition);
}

.public-site .public-boat-card:hover .public-boat-card__cta {
    color: var(--color-white);
}

/* Sold listings keep the same imagery treatment as every other card (set on the base rule);
   only the status banner differs. */
.public-site .public-boat-card--sold .public-boat-card__status-banner {
    background: rgba(36, 53, 107, 0.94);
    color: var(--color-white);
}

/* Generic button used by the empty-state / reset action. */
.public-site .boat-listing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--color-navy-deep);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.public-site .boat-listing-btn--primary {
    background: var(--color-navy-deep);
    color: var(--color-white);
}

.public-site .boat-listing-btn--primary:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy-deep);
}

/* Generic button used by the empty-state / reset action. */
.public-site .boat-listing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--color-navy-deep);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.public-site .boat-listing-btn--primary {
    background: var(--color-navy-deep);
    color: var(--color-white);
}

.public-site .boat-listing-btn--primary:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy-deep);
}

/* ── Pagination ─────────────────────────────────────────────── */

.public-site .boat-listings__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 32px;
}

.public-site .boat-listing-page {
    min-width: 42px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(34, 48, 91, 0.18);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-navy);
    font-family: var(--font-display);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.public-site .boat-listing-page:hover:not([disabled]) {
    border-color: var(--color-gold);
}

.public-site .boat-listing-page.is-active {
    background: var(--color-navy-deep);
    border-color: var(--color-navy-deep);
    color: var(--color-white);
}

.public-site .boat-listing-page[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .public-site .boat-filters__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-site .boat-filter-field--wide {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .public-site .boat-listings__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    /* When the header stacks, drop the negative offset and left-align the
       actions so the count/link don't overlap the filter bar. */
    .public-site .boat-listings__head-actions {
        margin-bottom: 0;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .public-site .boat-filters__grid {
        grid-template-columns: 1fr;
    }

    .public-site .boat-filter-field--wide {
        grid-column: span 1;
    }

    .public-site .public-boat-card,
    .public-site .public-boat-card__link {
        min-height: 480px;
    }

    .public-site .public-boat-card__content {
        padding: 24px;
    }

    /* Hide the description on small screens to keep the overlay readable. */
    .public-site .public-boat-card__description {
        display: none;
    }

    .public-site .public-boat-card__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

.public-site .public-error-page__inner {
    max-width: 42rem;
}

.public-site .public-error-page__title {
    margin-bottom: 1rem;
}

.public-site .public-error-page__body,
.public-site .public-error-page__reference {
    color: var(--color-text-muted, #5a6478);
}

.public-site .public-error-page__reference {
    margin-top: 1.5rem;
    font-size: 0.95rem;
}

.public-site .public-error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.public-site .public-error-page__link {
    text-decoration: underline;
}

.public-site .public-error-page__link--secondary {
    opacity: 0.85;
}

/*--------------------------------------------------------------
# Service / detail pages (built on the home template)
--------------------------------------------------------------*/

/* Hero call-to-action button */
.public-site .page-hero-actions {
    margin-top: 26px;
}

/* Readable narrow text column used by intro / why-it-matters / how-avs-helps */
/* Keep the container's full inset width so text left-aligns with the hero and service
   sections (smooth transitions between pages); limit line length on the children instead
   of centering a narrow column. */
.public-site .service-narrow > * {
    max-width: 820px;
}

.public-site .service-block {
    background: var(--color-white);
}

.public-site .service-block--muted {
    background: var(--color-light);
}

.public-site .service-block h2 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin-bottom: 22px;
}

.public-site .service-block p {
    margin-bottom: 18px;
}

.public-site .service-block p:last-child {
    margin-bottom: 0;
}

/* "Why it matters" bullet list — gold markers, two columns on wide screens */
.public-site .service-points {
    list-style: none;
    margin: 8px 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 32px;
}

.public-site .service-points li {
    position: relative;
    padding-left: 26px;
    line-height: 1.4;
}

.public-site .service-points li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-gold);
    font-weight: 800;
}

/* Static "What we do" cards: content-height, no link footer */
.public-site .service-card--static {
    min-height: 0;
    padding: clamp(22px, 2.4vw, 32px);
}

.public-site .service-card--static p {
    margin-bottom: 0;
}

.public-site .service-card--static h3 {
    font-size: clamp(1.15rem, 1.5vw, 1.5rem);
    margin-bottom: 12px;
}

/* Numbered process steps ("How charter management works") */
.public-site .service-steps-section {
    background: var(--color-white);
}

.public-site .service-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
}

.public-site .service-step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.public-site .service-step__number {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-navy-deep);
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
}

.public-site .service-step h3 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    line-height: 1.15;
    margin-bottom: 8px;
}

.public-site .boat-listings__lead {
    margin-top: 10px;
    max-width: 720px;
    color: rgba(255, 255, 255, 0.82);
}

/* About page — team member card + closing */
.public-site .about-team-member {
    display: flex;
    gap: clamp(20px, 3vw, 38px);
    align-items: flex-start;
    margin: 28px 0;
    padding: clamp(22px, 2.4vw, 32px);
    background: var(--color-light);
    border-radius: var(--radius-md);
}

.public-site .about-team-member__photo {
    flex: 0 0 auto;
    width: clamp(124px, 16vw, 172px);
    height: auto; /* override the img height attribute so aspect-ratio keeps it square (no side-cropping) */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.public-site .about-team-member__info {
    flex: 1 1 auto;
    min-width: 0;
}

/* Portrait sits above the bio on narrow screens */
@media (max-width: 600px) {
    .public-site .about-team-member {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .public-site .about-team-member__photo {
        width: clamp(140px, 42vw, 180px);
    }
}

.public-site .about-team-member h3 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    margin-bottom: 2px;
}

.public-site .about-team-member__role {
    color: var(--color-gold);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
    margin-bottom: 14px;
}

.public-site .about-team-closing__title {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    margin: 8px 0 14px;
}

/* Legal documents (Privacy Policy / Terms of Use) */
.public-site .legal-doc__meta {
    margin-bottom: 8px;
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-site .legal-doc__section {
    margin-top: clamp(28px, 4vw, 44px);
}

.public-site .legal-doc__section h2 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.public-site .legal-doc__section h3 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 400;
    margin: 22px 0 10px;
}

.public-site .legal-doc__section p {
    margin: 0 0 14px;
    line-height: 1.7;
}

.public-site .legal-doc__section ul {
    margin: 0 0 16px;
    padding-left: 1.25rem;
}

.public-site .legal-doc__section li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Service / category index — linked cards built from existing service content */
.public-site .service-index-group + .service-index-group {
    margin-top: clamp(40px, 5vw, 68px);
}

.public-site .service-index-group__head {
    margin-bottom: clamp(18px, 2.4vw, 28px);
}

.public-site .service-index-group__head h2 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-top: 4px;
}

.public-site .service-index-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.public-site .service-index-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(24px, 3vw, 34px);
    background: var(--color-white);
    border: 1px solid rgba(34, 48, 91, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.public-site .service-index-card:hover,
.public-site .service-index-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(197, 160, 89, 0.55);
    box-shadow: 0 18px 40px rgba(7, 17, 74, 0.12);
}

.public-site .service-index-card h3 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.15;
}

.public-site .service-index-card p {
    flex: 1;
    margin: 0;
    color: var(--color-grey);
    font-size: 0.92rem;
    line-height: 1.55;
}

.public-site .service-index-card__arrow {
    color: var(--color-gold);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}

@media (max-width: 900px) {
    .public-site .service-index-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .public-site .service-index-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer legal bar */
.public-site .footer-legal-bar {
    /* Equal spacing above and below the divider: the content above (social icons) sits the
       same distance from the line as the Privacy/Terms links below it. */
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.public-site .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
}

.public-site .footer-legal a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
    text-decoration: none;
    transition: color var(--transition);
}

.public-site .footer-legal a:hover,
.public-site .footer-legal a:focus-visible {
    color: var(--color-white);
}

/* Ownership Lifecycle Framework diagram + team group photo */
.public-site .about-framework__graphic,
.public-site .about-team-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.public-site .about-framework__graphic {
    margin-top: clamp(24px, 3.5vw, 44px);
    box-shadow: var(--shadow-soft);
}

.public-site .about-team-photo {
    margin: clamp(18px, 2.5vw, 28px) 0 clamp(6px, 1vw, 12px);
}

/* News cards + article */
.public-site .news-card__category {
    margin-bottom: 10px;
    color: var(--color-gold);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.public-site .news-article__back {
    margin-top: 28px;
}

.public-site .news-article__back a {
    color: var(--color-navy);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

/*--------------------------------------------------------------
# Service detail pages — "service-page" template (ported design)
--------------------------------------------------------------*/

.public-site .service-page {
    background: var(--color-white);
    overflow: hidden;
}

.public-site .service-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: end;
    overflow: hidden;
    color: var(--color-white);
    background:
        radial-gradient(circle at 76% 24%, rgba(215, 181, 109, 0.18), transparent 24%),
        linear-gradient(135deg, #07114a 0%, #16245a 52%, #22305b 100%);
}

.public-site .service-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(215, 181, 109, 0.7), transparent);
}

.public-site .service-hero__inner {
    position: relative;
    z-index: 3;
    /* Uses the .container width (also on this element) so the hero content aligns with the
       rest of the page instead of sitting flush against the viewport edge. */
    /* Clear the transparent overlay header (real height measured into --nav-height). */
    padding-top: calc(var(--nav-height, 120px) + clamp(52px, 7vw, 120px));
    padding-bottom: clamp(88px, 10vw, 140px);
}

.public-site .service-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.62);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-site .service-breadcrumb a {
    color: inherit;
}

.public-site .service-breadcrumb a:hover,
.public-site .service-breadcrumb a:focus-visible {
    color: var(--color-gold);
}

.public-site .service-hero__content {
    max-width: 980px;
}

.public-site .service-hero h1 {
    max-width: 980px;
    margin-bottom: 28px;
    font-family: var(--font-display);
    font-size: clamp(4rem, 9vw, 8.4rem);
    font-weight: 300;
    line-height: 0.88;
    letter-spacing: -0.07em;
}

.public-site .service-hero__lead {
    max-width: 760px;
    margin-bottom: 38px;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.public-site .service-hero__grid {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 90%);
}

.public-site .service-hero__orb {
    position: absolute;
    border: 1px solid rgba(215, 181, 109, 0.22);
    border-radius: 50%;
    pointer-events: none;
}

.public-site .service-hero__orb--one {
    width: 520px;
    height: 520px;
    right: -120px;
    top: 120px;
    animation: service-orbit 18s ease-in-out infinite alternate;
}

.public-site .service-hero__orb--two {
    width: 260px;
    height: 260px;
    right: 190px;
    top: 320px;
    animation: service-orbit 12s ease-in-out infinite alternate-reverse;
}

.public-site .service-hero__signal {
    position: absolute;
    right: 0;
    bottom: 86px;
    display: flex;
    gap: 10px;
    align-items: end;
}

.public-site .service-hero__signal span {
    display: block;
    width: 2px;
    background: var(--color-gold);
    border-radius: 999px;
    animation: service-signal 1.8s ease-in-out infinite;
}

.public-site .service-hero__signal span:nth-child(1) { height: 32px; }
.public-site .service-hero__signal span:nth-child(2) { height: 58px; animation-delay: 0.2s; }
.public-site .service-hero__signal span:nth-child(3) { height: 84px; animation-delay: 0.4s; }

@keyframes service-orbit {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(-34px, 22px, 0) rotate(8deg); }
}

@keyframes service-signal {
    0%, 100% { opacity: 0.35; transform: scaleY(0.72); }
    50% { opacity: 1; transform: scaleY(1); }
}

.public-site .service-intro__grid,
.public-site .service-process__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(44px, 8vw, 120px);
    align-items: start;
}

.public-site .service-intro h2,
.public-site .service-process h2,
.public-site .service-importance h2,
.public-site .service-final-cta h2 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 5.2rem);
    font-weight: 300;
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.public-site .service-intro__copy {
    max-width: 720px;
}

.public-site .service-intro__lead,
.public-site .service-process__lead {
    color: var(--color-navy-deep);
    font-size: 1.2rem;
    font-weight: 650;
}

/* Opening line featured in the left column when no curated statement headline exists.
   Deliberately smaller than the section h2 so a full sentence reads as an elegant lead-in
   rather than an oversized heading. */
.public-site .service-lead-statement {
    margin-top: 20px;
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.35rem);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.public-site .service-offer {
    background: var(--color-light);
}

.public-site .service-offer .section-header h2 {
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.public-site .service-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.public-site .service-detail-card {
    position: relative;
    min-height: 300px;
    padding: clamp(28px, 4vw, 44px);
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(34, 48, 91, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.public-site .service-detail-card::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(215, 181, 109, 0.22);
    border-radius: 50%;
    transition: transform 500ms ease, border-color 500ms ease;
}

.public-site .service-detail-card:hover {
    transform: translateY(-7px);
    border-color: rgba(215, 181, 109, 0.6);
    box-shadow: var(--shadow-card);
}

.public-site .service-detail-card:hover::after {
    transform: scale(1.25);
    border-color: rgba(215, 181, 109, 0.62);
}

.public-site .service-detail-card--featured {
    background: var(--color-navy);
    color: var(--color-white);
}

.public-site .service-detail-card--featured h3,
.public-site .service-detail-card--featured p {
    color: var(--color-white);
}

.public-site .service-detail-card__number {
    display: block;
    margin-bottom: 62px;
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.public-site .service-detail-card h3 {
    margin-bottom: 14px;
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.public-site .service-detail-card p {
    max-width: 560px;
    margin-bottom: 0;
}

/* Featured (dark navy) card: force white title + text. Higher specificity (both classes)
   so it wins over the base .service-detail-card h3/p navy colour regardless of order. */
.public-site .service-detail-card.service-detail-card--featured h3,
.public-site .service-detail-card.service-detail-card--featured p {
    color: var(--color-white);
}


.public-site .service-importance {
    position: relative;
    background: var(--color-navy-deep);
    color: var(--color-white);
}

.public-site .service-importance::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at center, #fff 1px, transparent 1px);
    background-size: 28px 28px;
}

.public-site .service-importance__grid,
.public-site .service-importance__closing {
    position: relative;
    z-index: 1;
}

.public-site .service-importance__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(48px, 8vw, 120px);
}

.public-site .service-importance h2,
.public-site .service-importance p {
    color: var(--color-white);
}

.public-site .service-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.public-site .service-benefit {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
}

.public-site .service-benefit span {
    display: block;
    margin-bottom: 22px;
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.public-site .service-benefit p {
    margin-bottom: 0;
    font-weight: 650;
}

.public-site .service-importance__closing {
    max-width: 850px;
    margin: 62px 0 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 1.05rem;
}

.public-site .service-process {
    background: var(--color-white);
}

.public-site .service-process__content {
    max-width: 760px;
}

.public-site .service-process__quote {
    margin: 38px 0 0;
    padding: 30px 32px;
    border-left: 4px solid var(--color-gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-light);
    color: var(--color-navy-deep);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.45;
}

.public-site .service-final-cta {
    padding-block: clamp(76px, 9vw, 120px);
    background:
        linear-gradient(120deg, rgba(7, 17, 74, 0.98), rgba(34, 48, 91, 0.94)),
        var(--color-navy);
    color: var(--color-white);
}

.public-site .service-final-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 44px;
    align-items: center;
}

.public-site .service-final-cta h2,
.public-site .service-final-cta p {
    color: var(--color-white);
}

.public-site .service-final-cta h2 {
    max-width: 920px;
    margin-bottom: 22px;
}

.public-site .service-final-cta p:not(.section-kicker) {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.1rem;
}

@media (max-width: 980px) {
    .public-site .service-intro__grid,
    .public-site .service-process__grid,
    .public-site .service-importance__grid,
    .public-site .service-final-cta__inner {
        grid-template-columns: 1fr;
    }

    .public-site .service-final-cta__inner {
        align-items: start;
    }

    .public-site .service-final-cta .btn {
        width: fit-content;
    }
}

@media (max-width: 720px) {
    .public-site .service-hero {
        min-height: 82vh;
    }

    .public-site .service-hero h1 {
        font-size: clamp(3.5rem, 17vw, 5.2rem);
    }

    .public-site .service-hero__orb--one {
        width: 340px;
        height: 340px;
        right: -180px;
    }

    .public-site .service-hero__orb--two,
    .public-site .service-hero__signal {
        display: none;
    }

    .public-site .service-card-grid,
    .public-site .service-benefits {
        grid-template-columns: 1fr;
    }

    .public-site .service-detail-card {
        min-height: auto;
    }

    .public-site .service-detail-card__number {
        margin-bottom: 42px;
    }

    .public-site .service-final-cta .btn {
        width: 100%;
    }
}

@media (max-width: 860px) {
    .public-site .service-points,
    .public-site .service-steps {
        grid-template-columns: 1fr;
    }
}