/* =====================================================================
   YachtsNorway – offentlig nettside

   Designet følger utkastene fra superdesign: lys bakgrunn, turkis
   aksentfarge, Outfit til overskrifter og Plus Jakarta Sans til brødtekst,
   avrundede kort med myke skygger.

   Utkastene ble tegnet med Tailwind. Her er de samme verdiene skrevet ut
   som vanlig CSS, slik at siden ikke trenger byggesteg eller CDN og kan
   ligge på et helt vanlig webhotell.
   ===================================================================== */

/* ---------------------------------------------------------------- fonter */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/outfit-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/outfit-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/outfit-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/outfit-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-700.woff2') format('woff2');
}

/* ---------------------------------------------------------------- tokens */
:root {
    --teal-primary: #1B7A7A;
    --teal-dark:    #0D5A5A;
    --teal-light:   #2A9D9D;
    --teal-400:     #2DD4BF;   /* aksentordet i overskriften */
    --teal-50:      #F0FDFA;   /* bakgrunn på små merkelapper */
    --cream:        #FDFBFA;

    --ink:          #1A1A1A;
    --gray-900:     #111827;
    --gray-500:     #6B7280;
    --gray-400:     #9CA3AF;
    --gray-200:     #E5E7EB;
    --gray-100:     #F3F4F6;
    --gray-50:      #F9FAFB;
    --footer-bg:    #030712;

    --positive:     #15803D;
    --warning:      #B45309;
    --negative:     #B91C1C;

    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-head: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;

    --shell: 80rem;            /* max-w-7xl */
    --gutter: 1.5rem;          /* px-6 */

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.4s;
}

/* ---------------------------------------------------------------- grunnlag */
*, *::before, *::after { box-sizing: border-box; }

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

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

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--teal-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--teal-primary); color: #fff; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--teal-primary);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- typografi */
h1, h2, h3, h4, .heading {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

.h-hero {
    font-size: clamp(2.75rem, 7vw, 6rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.h-1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.h-2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.h-3 { font-size: 1.5rem; }
.h-4 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--gray-500);
    font-weight: 300;
}

.prose { color: var(--gray-500); line-height: 1.8; }
.prose p { margin-bottom: 1.25rem; }
.prose strong { color: var(--ink); font-weight: 600; }

/* Liten etikett i versaler – gjennomgående over overskrifter */
.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--teal-primary);
    margin: 0 0 1rem;
}

.text-teal { color: var(--teal-primary); }
.text-teal-400 { color: var(--teal-400); }
.text-muted { color: var(--gray-500); }
.text-faint { color: var(--gray-400); }

/* ---------------------------------------------------------------- layout */
.shell {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.shell--narrow { max-width: 64rem; }
.shell--text   { max-width: 48rem; }

.section { padding-block: clamp(4rem, 10vw, 8rem); }
.section--sm { padding-block: clamp(3rem, 6vw, 5rem); }
.section--cream { background: var(--cream); }
.section--gray { background: var(--gray-50); }

.section-head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section-head p { color: var(--gray-500); max-width: 36rem; margin-inline: auto; }

/* ---------------------------------------------------------------- topplinje */
.masthead {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-100);
}

.masthead__inner {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.masthead__left { display: flex; align-items: center; gap: 2.5rem; }

.brand { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--teal-primary);
}
.brand__sub {
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gray-400);
    margin-top: -0.125rem;
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-900);
    transition: color 0.15s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--teal-primary); }

.masthead__right { display: flex; align-items: center; gap: 1rem; }

/* Forespørselsknappen står til høyre i topplinja på store skjermer.
   Den samme knappen ligger også i menyen, men den trengs først når
   menyen blir en skuff på mobil. */
.nav .btn { display: none; }

/* Språkvelgeren viser flagget til språket du er på nå. Ett trykk bytter,
   og da står det andre flagget der. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 9999px;
    background: var(--gray-100);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gray-500);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.lang-switch:hover { background: var(--gray-200, #E5E7EB); color: var(--ink); }

.lang-switch svg {
    border-radius: 2px;
    flex: none;
}

/* På små skjermer holder flagget alene */
@media (max-width: 30rem) {
    .lang-switch span { display: none; }
    .lang-switch { padding: 0.3125rem 0.4375rem; }
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--gray-900);
    padding: 0.5rem;
    margin-right: -0.5rem;
    cursor: pointer;
}

@media (max-width: 64rem) {
    .nav-toggle { display: block; }

    /* Skuffen henger under toppmenyen. Den festes til .masthead med
       top:100% i stedet for et fast pikseltall, ellers blir det en
       glippe der siden bak skinner igjennom når toppmenyen er lavere
       enn ventet, slik den er på telefon. */
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem var(--gutter) 2rem;
        border-bottom: 1px solid var(--gray-100);
        box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
        transform: translateY(-120%);
        transition: transform 0.3s var(--ease);
        visibility: hidden;
    }
    .nav[data-open="true"] { transform: translateY(0); visibility: visible; }

    .nav a {
        font-size: 1.0625rem;
        padding-block: 0.875rem;
        border-bottom: 1px solid var(--gray-100);
    }
}

/* ---------------------------------------------------------------- knapper */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.9375rem 1.75rem;
    border-radius: 9999px;
    border: 2px solid transparent;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    text-align: center;
    white-space: nowrap;
}

.btn--teal {
    background: var(--teal-primary);
    color: #fff;
}
.btn--teal:hover {
    background: var(--teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(27, 122, 122, 0.3);
}

.btn--outline {
    border-color: var(--teal-primary);
    color: var(--teal-primary);
}
.btn--outline:hover { background: var(--teal-primary); color: #fff; }

.btn--white {
    background: #fff;
    color: var(--ink);
}
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2); }

.btn--ghost { color: var(--gray-500); border-color: var(--gray-200); }
.btn--ghost:hover { border-color: var(--gray-400); color: var(--ink); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.125rem 2.25rem; font-size: 0.9375rem; }
.btn--sm { padding: 0.625rem 1.125rem; font-size: 0.8125rem; }

/* Rektangulær variant, som «Send Bestilling» og «Gå Til Betaling» */
.btn--square { border-radius: 1rem; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

/* Rund ikonknapp, som søkeknappen i hero */
.btn-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: var(--teal-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 0;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.btn-icon:hover {
    background: var(--teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(27, 122, 122, 0.3);
}

/* ---------------------------------------------------------------- hero */
.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    /* Innholdet ligger nede, ikke midt på: da blir det luft over og
       fotografiet får plass til å være et fotografi. */
    align-items: flex-end;
    padding-top: 5rem;
    overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
}
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.1) 75%, transparent);
}

.hero__body {
    position: relative;
    z-index: 10;
    max-width: var(--shell);
    margin-inline: auto;
    /* Lite under, mye over. Bunnverdien er avstanden fra søkefeltet ned
       til kanten av bildet — den er knappen å skru på. */
    padding: 5rem var(--gutter) 2.5rem;
    width: 100%;
}
.hero__inner { max-width: 48rem; }

.pill {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    background: rgba(45, 212, 191, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.hero__title { color: #fff; margin-bottom: 2rem; }
.hero__lead {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.7;
    max-width: 36rem;

    /* Avstanden ned til søkefeltet. Hero-innholdet er loddrett midtstilt,
       så større tall skyver boksen ned og overskriften opp — og slipper
       mer av fotografiet til mellom dem. Dette er knappen å skru på. */
    margin-bottom: 4.5rem;
}

/* Søkekortet som ligger over bildet */
.searchbar {
    background: #fff;
    padding: 1.5rem;
    border-radius: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 56rem;
}
.searchbar__field {
    flex: 1;
    min-width: 0;
    border-right: 1px solid var(--gray-100);
    padding-right: 1rem;
}
.searchbar__field:last-of-type { border-right: 0; }
.searchbar__field label,
.searchbar__label {
    display: block;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
    font-weight: 700;
    margin: 0 0 0.25rem 0.5rem;
}
.searchbar__field select,
.searchbar__field input {
    width: 100%;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0 0 0 0.5rem;
    cursor: pointer;
}
.searchbar__field select:focus,
.searchbar__field input:focus { outline: none; }

/* Datofeltet er også et skjemafelt lenger nede i fila, og den regelen har
   samme spesifisitet som denne. Uten typevelgeren her arver feltet ramme
   og luft fra skjemaene, og blir bredere enn de andre feltene i baren. */
.searchbar__field input[type="date"],
.searchbar__field input[type="time"],
.searchbar__field input[type="number"] {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 0.5rem;
}

/* Hele feltet er en trykkflate for kalenderen, ikke bare ikonet.
   Etiketten over hører med, derfor peker markøren også der. */
.field--pickable { cursor: pointer; }
.field--pickable label { cursor: pointer; }
.searchbar__field.field--pickable input[type="date"],
.searchbar__field.field--pickable input[type="time"] { cursor: pointer; }

/* Kalenderikonet skal stå ytterst til høyre, så resten av bredden
   leser som en flate man kan trykke på. */
.searchbar__field input[type="date"]::-webkit-calendar-picker-indicator,
.searchbar__field input[type="time"]::-webkit-calendar-picker-indicator {
    margin-left: auto;
    cursor: pointer;
}

/* Dato- og klokkefelt.

   Safari på iPhone gir disse feltene en egen minstebredde som verken
   width:100% eller min-width:0 klarer å presse ned, fordi selve verdien
   ligger i et indre felt med sin egen bredde. Da vokser feltet ut av
   searchbar-en og drar hele siden med seg sidelengs. Vi slår av den
   innebygde utformingen og lar det indre feltet følge bredden. */
input[type="date"],
input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
    min-width: 0;
    width: 100%;
    margin: 0;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    margin-left: 0;
    padding: 0;
    flex-shrink: 0;
}
@media (max-width: 48rem) {
    /* Søkefeltet tok halve skjermen på telefon. Båtvalget ryker — de
       fleste velger «Åpen forespørsel» likevel, og feltet blir stående i
       skjemaet med den verdien. Dato og gjester deler linje. */
    .searchbar {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.875rem;
        border-radius: 1.5rem;
        background: transparent;
        box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
    }

    /*
     * Glasset ligger i et eget lag bak feltene, ikke på skjemaet selv.
     *
     * Med «backdrop-filter» rett på .searchbar sluttet datofeltet å svare
     * på trykk i Safari på iPhone — laget la seg over og spiste trykket.
     * På PC gikk det fint, som gjorde det vanskelig å se. Her ligger
     * uskarpheten bak, uten å ta imot trykk i det hele tatt.
     */
    .searchbar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;

        /* Lysere øverst, som lys som treffer glass ovenfra. Ingen ramme —
           en hvit strek rundt gjorde at det leste som en boks, ikke glass. */
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0.38)
        );
        /* Uten oppjustert lyshet ble glasset grått og trist over mørke
           partier i bildet, og da så skjemaet av. */
        -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
        backdrop-filter: blur(20px) saturate(140%) brightness(1.15);

        /* Bare en antydning langs toppkanten, som lys på en glasskant */
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    /* Uten uskarphet trengs mer dekke for at teksten skal stå fram */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .searchbar::before {
            background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.72),
                rgba(255, 255, 255, 0.6)
            );
        }
    }


    /*
     * Feltet er en kolonne der kontrollen fyller resten av høyden.
     *
     * Da er hele cellen selve kontrollen, og et trykk treffer den uansett
     * hvor man tar. Før lå datofeltet som en tynn stripe et sted i cellen,
     * og man måtte finne den.
     */
    .searchbar__field {
        display: flex;
        flex-direction: column;
        border-right: 0;
        border-bottom: 0;
        padding: 0;
        min-width: 0;
    }
    .searchbar__field select,
    .searchbar__field input { flex: 1 1 auto; }

    /*
     * Etter .searchbar__field, og med baren foran seg.
     *
     * Sto den før den regelen, hadde de to lik spesifisitet, og «display:
     * flex» vant fordi den kom sist — da dukket båtvalget opp igjen på
     * mobil uten at noen hadde bedt om det.
     */
    .searchbar .searchbar__field--yacht { display: none; }

    /* Hårstrek mellom dato og gjester, som på bred skjerm. Uten den
       flyter de to feltene sammen i den gjennomsiktige flaten. */
    .searchbar__field + .searchbar__field {
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        padding-left: 0.75rem;
    }

    /* Var så bleke mot glasset at hele boksen leste som deaktivert */
    .searchbar__field label,
    .searchbar__label { color: var(--gray-700, #374151); margin-left: 0.25rem; }
    .searchbar__field select,
    .searchbar__field input { padding-left: 0.25rem; }

    /*
     * Datofeltet får tilbake sin egen utforming.
     *
     * «appearance: none» ble satt for å hindre at Safari på iPhone blåste
     * bredden ut av baren. Men da tegner iOS ingenting i det hele tatt:
     * ingen «dd.mm.åååå», ingen trykkflate — feltet så tomt ut og svarte
     * ikke på trykk, mens det virket fint på PC.
     *
     * Bredden holdes nå av rutenettet og min-width:0, så vi trenger ikke
     * ta fra plattformen kontrollen for å få det til.
     */
    /*
     * Fast høyde, og det indre verdifeltet like høyt.
     *
     * iOS gir datofeltet sin egen, høyere boks enn de andre feltene. Med
     * bare min-height rant innholdet ut under kanten, og teksten lå og
     * gjemte seg der man ikke så den — som en skjult skrollboks.
     */
    .searchbar__field input[type="date"] {
        /* Utformingen tilbake: uten den tegner iOS verken tekst eller
           trykkflate, og feltet står tomt til noen finner det. */
        -webkit-appearance: auto;
        appearance: auto;
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 1.75rem;
        line-height: 1.4;
        padding: 0 0 0 0.25rem;
    }
    .searchbar__field input[type="date"]::-webkit-date-and-time-value,
    .searchbar__field input[type="date"]::-webkit-datetime-edit {
        height: 1.625rem;
        line-height: 1.625rem;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .btn-icon { grid-column: 1 / -1; width: 100%; border-radius: 1rem; }
}

/* ---------------------------------------------------------------- båtkort */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
@media (max-width: 64rem) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 1.5rem; } }

.yacht-card {
    background: #fff;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--gray-50);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.yacht-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--gray-100);
}
.yacht-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}
.yacht-card:hover .yacht-card__media img { transform: scale(1.1); }

.yacht-card__badge {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    padding: 0.375rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

.yacht-card__body {
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.yacht-card__body h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.yacht-card__specs { color: var(--gray-400); font-size: 0.875rem; margin-bottom: 1.5rem; }

.chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.chip {
    padding: 0.25rem 0.75rem;
    background: var(--teal-50);
    color: var(--teal-primary);
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 9999px;
}

.yacht-card__cta { margin-top: auto; }
.yacht-card__cta .btn { width: 100%; border-radius: 1rem; padding-block: 1rem; }

/* ---------------------------------------------------------------- båtside */
.gallery-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 3rem;
}
@media (max-width: 64rem) { .gallery-grid { grid-template-columns: 1fr; } }

.gallery-main {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--gray-100);
    cursor: zoom-in;
    border: 0;
    padding: 0;
    width: 100%;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.gallery-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 64rem) { .gallery-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; } }

.gallery-thumb {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--gray-100);
    cursor: zoom-in;
    border: 0;
    padding: 0;
    aspect-ratio: 4 / 3;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.gallery-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.badge-teal {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 2;
    padding: 0.5rem 1rem;
    background: var(--teal-light);
    color: #fff;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.yacht-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 64rem) { .yacht-layout { grid-template-columns: 1fr; } }

/* Nøkkeltall med ikoner */
.spec-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 1.5rem 1rem;
    padding-block: 2rem;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 2.5rem;
    text-align: center;
}
.spec-row__icon { color: var(--teal-primary); margin-bottom: 0.5rem; }
.spec-row__icon svg { margin-inline: auto; }
.spec-row__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 0.25rem;
}
.spec-row__value { font-weight: 700; font-size: 1.0625rem; }

/* Fasilitetskort */
.facility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}
.facility {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--gray-100);
    border-radius: 1rem;
    background: #fff;
    font-size: 0.9375rem;
}
.facility__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: var(--teal-50);
    color: var(--teal-primary);
    display: grid;
    place-items: center;
    flex: none;
}

/* Spesifikasjonstabell */
.spec-list { margin: 0; }
.spec-list__row {
    display: grid;
    grid-template-columns: minmax(7rem, 12rem) 1fr;
    gap: 1.5rem;
    padding-block: 0.875rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9375rem;
}
.spec-list__row:last-child { border-bottom: 0; }
.spec-list__row dt { color: var(--gray-400); }
.spec-list__row dd { margin: 0; font-weight: 600; }

/* Prisboks som følger med */
.price-card {
    position: sticky;
    top: 6.5rem;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--gray-100);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
    background: #fff;
}
@media (max-width: 64rem) { .price-card { position: static; } }

.price-card__head {
    background: linear-gradient(135deg, var(--teal-primary), var(--teal-dark));
    color: #fff;
    padding: 2rem;
}
.price-card__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}
.price-card__amount {
    font-family: var(--font-head);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.price-card__amount span { font-size: 1rem; font-weight: 400; opacity: 0.85; }
.price-card__body { padding: 1.5rem; }

.price-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
    font-size: 0.9375rem;
    color: var(--gray-500);
}
.price-line--total {
    border-top: 1px solid var(--gray-100);
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--ink);
}

/* ---------------------------------------------------------------- skjema */
.form-card {
    background: var(--cream);
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: 2.5rem;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-100);
}

.field { margin-bottom: 1.5rem; }

.field label, .label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="password"], select, textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }

input:hover, select:hover, textarea:hover { border-color: var(--gray-400); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(27, 122, 122, 0.1);
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Elementer med display satt i CSS overstyrer hidden-attributtet, som
   bare setter display:none fra nettleserens egen stilmal. Skjemaet
   skjuler felter med hidden, så regelen må vinne. */
[hidden] { display: none !important; }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.field-grid--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; }
@media (max-width: 40rem) { .field-grid, .field-grid--3 { grid-template-columns: 1fr; } }

.field__help { font-size: 0.8125rem; color: var(--gray-400); margin-top: 0.5rem; line-height: 1.5; }

/* Valg mellom dagstur og flere døgn. To kort ved siden av hverandre,
   der det valgte er tydelig merket. */
.field__legend {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.625rem;
}

.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

.choice {
    position: relative;
    display: block;
    padding: 1rem 1.125rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.choice:hover { border-color: var(--gray-400); }

.choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.choice__title { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--gray-900); }
.choice__note  { display: block; font-size: 0.8125rem; color: var(--gray-500); margin-top: 0.125rem; }

.choice.is-active {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 1px var(--teal-primary);
}
.choice.is-active .choice__title { color: var(--teal-primary); }

/* Tastaturnavigering må være synlig selv om selve radioknappen er skjult */
.choice:focus-within { box-shadow: 0 0 0 3px rgba(27, 122, 122, 0.25); }

@media (max-width: 40rem) {
    .choice-row { grid-template-columns: 1fr; }
}
.field__error { font-size: 0.8125rem; color: var(--negative); margin-top: 0.5rem; font-weight: 500; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--negative); }

/* Avkryssing */
.check {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    cursor: pointer;
    padding: 1rem 1.25rem;
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    background: #fff;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
    margin-bottom: 0.75rem;
}
.check:hover { border-color: var(--gray-400); }
.check:has(input:checked) { border-color: var(--teal-primary); background: var(--teal-50); }

.check input {
    flex: none;
    width: 1.125rem; height: 1.125rem;
    margin: 0.1875rem 0 0;
    accent-color: var(--teal-primary);
    cursor: pointer;
}
.check__text {
    font-size: 0.9375rem;
    color: var(--ink);
    line-height: 1.5;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
.check__help {
    display: block;
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
    font-weight: 400;
}
.check__text a {
    color: var(--teal-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- varsler */
.notice {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-500);
}
.notice--success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.notice--error   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.notice--warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.notice--info    { background: var(--teal-50); border-color: #99F6E4; color: var(--teal-dark); }
.notice strong { font-weight: 700; }

/* ---------------------------------------------------------------- merker */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3125rem 0.75rem;
    border-radius: 9999px;
    background: var(--gray-100);
    color: var(--gray-500);
    white-space: nowrap;
}
.badge--teal     { background: var(--teal-50); color: var(--teal-primary); }
.badge--positive { background: #F0FDF4; color: var(--positive); }
.badge--warning  { background: #FFFBEB; color: var(--warning); }
.badge--negative { background: #FEF2F2; color: var(--negative); }

/* ---------------------------------------------------------------- steg */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Fire steg blir for trange før tre gjør det, så de brytes til to
   kolonner på nettbrett og én kolonne på telefon. */
@media (max-width: 64rem) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; } }
@media (max-width: 56rem) { .steps { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 44rem) { .steps--4 { grid-template-columns: 1fr; gap: 2rem; } }

.step { text-align: center; }
.step__num {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: var(--teal-50);
    color: var(--teal-primary);
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    margin: 0 auto 1.25rem;
}
.step h2,
.step h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.625rem; }
.step p { color: var(--gray-500); font-size: 0.9375rem; }

/* Punktliste med turkise haker */
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
}
.tick-list__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: var(--teal-50);
    color: var(--teal-primary);
    display: grid;
    place-items: center;
    flex: none;
}

/* ------------------------------------------------------------ kontaktfolk */
/* Navn, rolle og nummer på dem som har valgt å være synlige. Én linje
   pr. person, med nummeret tydelig nok til å trykkes på mobil. */
.team__list { list-style: none; margin: 0; padding: 0; }
.team__person {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding-block: 0.75rem;
    border-top: 1px solid var(--teal-50);
}
.team__person:first-child { border-top: 0; }
.team__name { font-weight: 600; }
.team__role {
    font-size: 0.8125rem;
    color: var(--gray-500);
}
.team__ways {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- lysbord */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(3, 7, 18, 0.96);
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[data-open="true"] { display: flex; }
.lightbox img { max-width: 100%; max-height: 86svh; object-fit: contain; border-radius: 1rem; }

.lightbox__close, .lightbox__nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    color: #fff;
    width: 3rem; height: 3rem;
    border-radius: 9999px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: clamp(0.5rem, 3vw, 2rem); }
.lightbox__nav--next { right: clamp(0.5rem, 3vw, 2rem); }
.lightbox__counter {
    position: absolute;
    bottom: clamp(1rem, 3vw, 2rem);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------- portal */
.offer {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: 1.5rem;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
}
@media (max-width: 48rem) {
    .offer { grid-template-columns: 1fr; }
    .offer__thumb { max-width: 10rem; }
}
.offer--chosen { border-color: var(--teal-primary); background: var(--teal-50); }
.offer--unavailable { opacity: 0.55; }

.offer__thumb { aspect-ratio: 4 / 3; border-radius: 1rem; overflow: hidden; background: var(--gray-100); }
.offer__thumb img { width: 100%; height: 100%; object-fit: cover; }

.offer__price {
    font-family: var(--font-head);
    font-size: 1.75rem;
    font-weight: 700;
    text-align: right;
    letter-spacing: -0.02em;
}
.offer__price small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--gray-400);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 0.25rem;
}
@media (max-width: 48rem) { .offer__price { text-align: left; } }

/* Samtale */
.thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.bubble {
    max-width: 34rem;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}
.bubble--them { background: var(--gray-50); border: 1px solid var(--gray-100); align-self: flex-start; }
.bubble--you  { background: var(--teal-50); border: 1px solid #99F6E4; align-self: flex-end; }
.bubble--system {
    align-self: center;
    max-width: 100%;
    background: none;
    font-size: 0.8125rem;
    color: var(--gray-400);
    text-align: center;
    padding: 0.5rem 0;
}
.bubble__meta {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 0.375rem;
}

/* ---------------------------------------------------------------- vilkårstekst */
.legal h2 { font-size: 1.25rem; margin: 2.5rem 0 0.875rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.0625rem; margin: 1.75rem 0 0.625rem; }
.legal ul, .legal ol { margin: 0 0 1.25rem; padding-left: 1.375rem; }
.legal li { margin-bottom: 0.5rem; }
.legal li::marker { color: var(--teal-primary); }
.legal a { color: var(--teal-primary); text-decoration: underline; }

/* ---------------------------------------------------------------- spørsmål og svar */
.faq details {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: 1.25rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.75rem;
}
.faq summary {
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .sign {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--teal-primary);
    transition: transform 0.3s var(--ease);
    flex: none;
}
.faq details[open] summary .sign { transform: rotate(45deg); }
/* Svaret kommer fra editoren og kan være flere avsnitt eller en liste */
.faq details .prose { margin-top: 1rem; color: var(--gray-500); }
.faq details .prose > *:first-child { margin-top: 0; }
.faq details .prose > *:last-child { margin-bottom: 0; }
.faq details .prose p { margin-bottom: 0.75rem; }
.faq details .prose ul,
.faq details .prose ol { margin: 0.75rem 0 0.75rem 1.25rem; }
.faq details .prose li { margin-bottom: 0.375rem; }
.faq details .prose a { color: var(--teal-primary); text-decoration: underline; }

/* ---------------------------------------------------------------- bunn */
.footer {
    background: var(--footer-bg);
    color: rgba(255, 255, 255, 0.6);
    padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
    font-size: 0.9375rem;
}

.footer__grid {
    display: grid;
    /* Merkevaren først og bredest, så fem lenkelister. minmax(0, …) for
       at en lang lenke ikke skal presse kolonnen ut av rutenettet. */
    grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr));
    gap: 2.5rem;
    padding-bottom: 3.5rem;
}
@media (max-width: 84rem) {
    .footer__grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (max-width: 72rem) {
    .footer__grid { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (max-width: 60rem) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 34rem) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

.footer .brand__name { color: var(--teal-light); }
.footer .brand__sub { color: rgba(255, 255, 255, 0.5); }

.footer h4 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.25rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.75rem; }
.footer a:hover { color: #fff; }

.footer__base {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Innlogging og utviklerkreditt står sammen ytterst til høyre */
.footer__base-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.footer__credit a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}
.footer__credit a:hover { color: #fff; text-decoration: underline; }

.social { display: flex; gap: 1rem; margin-top: 1.5rem; }
.social a { color: rgba(255, 255, 255, 0.5); transition: color 0.15s var(--ease); }
.social a:hover { color: #fff; }

/* ---------------------------------------------------------------- hjelpeklasser */
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mb-5 { margin-bottom: 3rem; }

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

/* Sider uten hero trenger luft under den faste toppen */
.page-top { padding-top: 8rem; }

/* Innhold som toner inn når det rulles inn i bildet.
 *
 * Kort og kort vei. 0,7 s og 1,5 rem så ut som om siden lastet tregt
 * framfor som en effekt — man rakk å lure på om noe manglet. Halve tiden
 * og halve avstanden leser som at det skjer med en gang. */
[data-reveal] {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
[data-reveal][data-visible="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; }
}

@media print {
    .masthead, .footer, .btn, .nav { display: none !important; }
}

/* =====================================================================
   Mobil

   Samlet nederst slik at det er ett sted å se hva som endrer seg på
   små skjermer, i stedet for spredte unntak gjennom hele fila.
   ===================================================================== */

@media (max-width: 64rem) {
    /* Handlingsknappen ligger i menyen på mobil, så den skal ikke
       konkurrere om plassen i topplinja. */
    .masthead__right > .btn { display: none; }
    .masthead__left { gap: 1rem; }

    /* Menyen får knappen tilbake, i full bredde nederst */
    .nav .btn { display: inline-flex; width: 100%; margin-top: 1rem; }
}

@media (max-width: 48rem) {
    /* Undertittelen brekker over to linjer og presser topplinja ut av fasong */
    .brand__sub { display: none; }
    .brand__name { font-size: 1.25rem; }

    .masthead__inner { height: 4.25rem; gap: 0.75rem; }

    /* Hero: teksten ligger over fotografiet, og da må bakgrunnen bære den */
    .hero { min-height: 88svh; padding-top: 4.25rem; }
    .hero__media::after {
        background: linear-gradient(to bottom,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.35) 35%,
            rgba(0,0,0,0.6) 100%);
    }
    .hero__body { padding-block: 2.5rem 1.5rem; }
    .hero__lead { font-size: 1.0625rem; margin-bottom: 3.5rem; }
    .pill { font-size: 0.6875rem; padding: 0.3125rem 0.75rem; }

    /* Store overskrifter må ikke sprenge linja på små skjermer */
    .h-hero { font-size: clamp(2.25rem, 11vw, 3.25rem); }
    .h-1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
    .h-2 { font-size: clamp(1.5rem, 6vw, 1.875rem); }

    .section { padding-block: 3.5rem; }
    .section-head { margin-bottom: 2rem; }

    /* Må stå etter .section, ellers overstyres toppmargen og
       innholdet forsvinner bak den faste toppmenyen. */
    .page-top,
    .section.page-top { padding-top: 6.5rem; }

    /* Prisboksen hører hjemme rett under teksten, ikke låst til siden */
    .price-card { position: static; }

    /* Galleriet: hovedbildet i full bredde, de to andre ved siden av hverandre */
    .gallery-grid { gap: 0.625rem; }
    .gallery-side { gap: 0.625rem; }

    /* Tilbudskortene i portalen stables */
    .offer { padding: 1.125rem; gap: 1rem; }
    .offer__thumb { max-width: 100%; }

    /* Skjemakort trenger ikke like mye luft på mobil */
    .form-card { padding: 1.25rem; border-radius: 1.5rem; }

    /* Knapper i full bredde er lettere å treffe med tommelen */
    .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 30rem) {
    :root { --gutter: 1.125rem; }

    .yacht-card__body { padding: 1.5rem 1.25rem; }
    .facility { padding: 0.875rem 1rem; font-size: 0.875rem; }
    .spec-list__row { grid-template-columns: 1fr; gap: 0.125rem; padding-block: 0.75rem; }
    .spec-list__row dd { font-weight: 600; }

    /* Nøkkeltallene på båtsiden: to og to i stedet for én lang rad */
    .spec-row { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.5rem; }

    .footer__base { flex-direction: column; gap: 0.75rem; }
    .footer__base-right { gap: 0.75rem 1.25rem; }
}

/* Trykkflater skal være minst 44 px høye, som er Apples anbefaling
   og omtrent bredden på en voksen tommel. */
/* Safari på iPhone zoomer inn når et felt med skrift under 16px får
   fokus, og siden hopper. 16px overalt på berøringsskjerm hindrer det. */
@media (pointer: coarse) {
    input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
    input[type="time"], input[type="number"], input[type="password"], input[type="search"],
    select, textarea,
    .searchbar__field select,
    .searchbar__field input { font-size: 1rem; }
}

@media (pointer: coarse) {
    .nav a,
    .footer a,
    .lang-switch,
    .crumbs a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .footer li { margin-bottom: 0.25rem; }
}

/* ---------------------------------------------------------------- galleri
   Egen rutenett-definisjon, ikke .grid-3, fordi et bildegalleri tåler
   smalere kolonner enn tekstkort. På mobil er to kolonner riktig:
   én kolonne gjør siden urimelig lang. */
.gallery-rest {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 64rem) { .gallery-rest { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem)  { .gallery-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } }

.gallery-rest .gallery-thumb { border-radius: 1rem; }

/* =====================================================================
   Artikler
   ===================================================================== */

.post-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: 1.5rem;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.post-card:hover { border-color: var(--teal-primary); transform: translateY(-2px); }

/* Bildet går helt ut i kanten av kortet, derfor de negative margene */
.post-card__media {
    display: block;
    margin: -1.75rem -1.75rem 0.375rem;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 1.5rem 1.5rem 0 0;
    background: var(--gray-100);
}
.post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.03); }

.post-card__title { font-size: 1.25rem; line-height: 1.3; margin: 0; }
.post-card__link { color: inherit; }
.post-card__link:hover .post-card__title { color: var(--teal-primary); }

.post-card__excerpt { color: var(--gray-500); font-size: 0.9375rem; margin: 0; flex: 1; }
.post-card__meta { font-size: 0.8125rem; color: var(--gray-400); margin: 0; }

.post-card__more {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--teal-primary);
    margin-top: 0.25rem;
}
.post-card__more:hover { text-decoration: underline; }

/* Brødsmuler */
.crumbs { font-size: 0.8125rem; color: var(--gray-400); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.crumbs a { color: var(--gray-500); }
.crumbs a:hover { color: var(--teal-primary); }

/* Innholdsfortegnelse */
.toc {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--cream);
    border-radius: 1rem;
}
.toc__title {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-400);
    font-weight: 700;
    margin: 0 0 0.625rem;
}
.toc ol { margin: 0; padding-left: 1.125rem; }
.toc li { margin-bottom: 0.375rem; font-size: 0.9375rem; }
.toc a { color: var(--gray-900); }
.toc a:hover { color: var(--teal-primary); text-decoration: underline; }

/* Selve teksten */
.prose--article { font-size: 1.0625rem; line-height: 1.75; }
.prose--article h2 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 2.5rem 0 0.875rem;
    scroll-margin-top: 6rem;
}
.prose--article h3 { font-size: 1.1875rem; margin: 1.75rem 0 0.5rem; }
.prose--article p { margin-bottom: 1.125rem; color: var(--gray-700, #374151); }
.prose--article ul, .prose--article ol { margin: 0 0 1.125rem 1.25rem; }
.prose--article li { margin-bottom: 0.5rem; }
.prose--article a { color: var(--teal-primary); text-decoration: underline; }
.prose--article strong { color: var(--ink); }
.prose--article blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 3px solid var(--teal-400);
    color: var(--gray-500);
}

/* Bilder i og over artikkelen */
.article-hero {
    margin: 1.75rem 0 0;
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--gray-100);
}
.article-hero img { display: block; width: 100%; height: auto; }

.prose--article img {
    display: block;
    width: 100%;
    height: auto;
    margin: 1.75rem 0;
    border-radius: 1rem;
}

/* Oppfordring nederst i artikkelen */
.post-cta {
    margin: 2.5rem 0 0;
    padding: 1.75rem;
    border: 1px solid var(--gray-100);
    border-radius: 1.5rem;
    background: #fff;
}
.post-cta--teal { background: var(--cream); border-color: transparent; }
.post-cta__label {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-400);
    font-weight: 700;
    margin: 0 0 0.5rem;
}

@media (max-width: 48rem) {
    .prose--article { font-size: 1rem; }
    .prose--article h2 { font-size: 1.3125rem; }
    .post-card { padding: 1.25rem; }
    .post-card__media { margin: -1.25rem -1.25rem 0.25rem; }
}

/* =====================================================================
   Partnersidene

   Egen, smal ramme uten flåte og meny. En partner skal se sine egne tall
   og ingenting annet, og da hjelper det at siden ikke ser ut som resten
   av nettstedet heller.
   ===================================================================== */

.partner-body { background: var(--cream); min-height: 100vh; display: flex; flex-direction: column; }
.partner-shell { width: min(56rem, 100% - 2.5rem); margin-inline: auto; }

.partner-top {
    background: var(--ink);
    color: #fff;
    padding: 1rem 0;
}
.partner-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.partner-top__link { color: rgba(255,255,255,0.7); font-size: 0.875rem; }
.partner-top__link:hover { color: #fff; }

.partner-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.16em;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}
.partner-brand span { font-weight: 400; opacity: 0.65; }
.partner-brand__tag {
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    text-transform: uppercase;
    opacity: 0.55;
    border-left: 1px solid rgba(255,255,255,0.25);
    padding-left: 0.5rem;
}

.partner-main { flex: 1; padding: 2.5rem 0 4rem; }
.partner-head { margin-bottom: 1.5rem; }

.partner-card {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: 1.25rem;
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}
.partner-card--narrow { max-width: 26rem; margin-inline: auto; margin-top: 2rem; }

/* Lenka partneren skal dele: feltet tar plassen, knappen står fast */
.partner-link { display: flex; gap: 0.5rem; align-items: stretch; }
.partner-link input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.8125rem;
}
.partner-link .btn { white-space: nowrap; }

.partner-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.partner-stat {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: 1.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.partner-stat__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400); font-weight: 600; }
.partner-stat__value { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.partner-stat__value--positive { color: var(--teal-primary); }
.partner-stat__note { font-size: 0.8125rem; color: var(--gray-500); }

.partner-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; text-align: center; }
.partner-funnel__num { display: block; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.partner-funnel__label { display: block; font-size: 0.8125rem; color: var(--gray-500); }

.partner-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.partner-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    font-weight: 600;
    padding: 0 0 0.625rem;
    border-bottom: 1px solid var(--gray-100);
}
.partner-table td { padding: 0.75rem 0; border-bottom: 1px solid var(--gray-100); }
.partner-table tr:last-child td { border-bottom: 0; }
.partner-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Tabellen skroller i sin egen ramme, ikke ved å dra siden sidelengs */
.partner-table__wrap { overflow-x: auto; }

.partner-help { text-align: center; color: var(--gray-500); font-size: 0.875rem; }

.partner-foot {
    background: var(--ink);
    color: rgba(255,255,255,0.55);
    font-size: 0.8125rem;
    padding: 1.25rem 0;
}
.partner-foot .partner-shell { display: flex; justify-content: space-between; gap: 1rem; }
.partner-foot a { color: inherit; text-decoration: underline; }

@media (max-width: 48rem) {
    .partner-stats { grid-template-columns: 1fr; gap: 0.875rem; }
    .partner-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
    .partner-card { padding: 1.25rem; }
    .partner-link { flex-direction: column; }
    .partner-main { padding: 1.75rem 0 3rem; }
}

/* Kodefeltet: store, luftige siffer så man ser hva man har skrevet */
.partner-code-input {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.4em;
    text-align: center;
}

/* Kommer snart: merkelappen skal skille seg fra «Flaggskip» og «Ytelse»,
   for den sier noe annet — ikke hva båten er, men at den ikke er her ennå. */
.yacht-card__badge--coming {
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    border: 1px solid var(--gray-200);
}

.coming-note {
    display: block;
    text-align: center;
    padding: 1rem;
    border: 1px dashed var(--gray-200);
    border-radius: 0.75rem;
    background: var(--gray-50);
    margin: 0;
}
.coming-note strong { display: block; font-size: 1.0625rem; margin-bottom: 0.25rem; }
.coming-note span { display: block; font-size: 0.875rem; color: var(--gray-500); line-height: 1.55; }

/* =====================================================================
   Forsidebilder

   Fokuspunktet kommer som variabler på hvert bilde, satt i backoffice.
   Her velges bare hvilken av dem som gjelder ved denne skjermbredden —
   ett sted, i stedet for én klasse pr. bilde.
   ===================================================================== */

.hero__media img { object-position: var(--pos-desktop, 50% 50%); }

@media (max-width: 64rem) {
    .hero__media img { object-position: var(--pos-tablet, 50% 50%); }
}
@media (max-width: 40rem) {
    .hero__media img { object-position: var(--pos-mobile, 50% 50%); }
}

/* Bildene ligger oppå hverandre og krysstoner. Uten JavaScript blir det
   første stående — de andre er gjennomsiktige, ikke skjult, så et bilde
   alltid vises selv om skriptet ikke kjører. */
.hero__media--slider { position: absolute; inset: 0; }
.hero__media--slider .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Kort nok til at bildet rekker å stå stille før neste. Med 1,2 s
       toning og to sekunder mellom skiftene var det nesten alltid et
       bilde på vei inn eller ut. */
    transition: opacity 0.6s var(--ease);
}
.hero__media--slider .hero__slide.is-current { opacity: 1; }

/* Prikker som viser hvor mange bilder det er, og lar deg hoppe mellom dem.
   Nede til høyre, der de ikke kommer i veien for overskriften. */
/*
 * Prikkene sto nede til høyre, og det gikk bra så lenge innholdet lå midt
 * på bildet. Da skjemaet ble flyttet ned, havnet de oppå det — og en
 * usynlig trykkflate på 40 piksler stjal klikkene fra datofeltet.
 *
 * Nå ligger de øverst, der det uansett er blitt tomt bilde. Toppverdien
 * må klare den faste topplinja på 5 rem.
 */
.hero__dots {
    position: absolute;
    right: clamp(1.5rem, 5vw, 4rem);
    top: clamp(6.5rem, 14vh, 9rem);
    z-index: 12;
    display: flex;
    gap: 0.5rem;
}
.hero__dot {
    position: relative;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.75); }
.hero__dot.is-current { background: #fff; transform: scale(1.25); }

/* Trykkflaten er større enn prikken, ellers blir den umulig på telefon */
.hero__dot::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    margin: -12px 0 0 -12px;
}

@media (prefers-reduced-motion: reduce) {
    /* Kryssoningen får stå — det er gjennomsiktighet, ikke bevegelse.
       Det som fjernes er spranget i prikken. */
    .hero__dot { transition: background 0.3s var(--ease); }
    .hero__dot.is-current { transform: none; }
}

/* «Valgfritt» ved siden av ledeteksten, ikke under feltet: da holder
   kolonnene i et to-felts rutenett samme høyde. */
.label__note {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-400);
    margin-left: 0.375rem;
}

/* Litt luft under teksten i et flerlinjefelt. Uten dette klistrer første
   linje seg til toppkanten, mens et enlinjes felt er loddrett midtstilt
   av seg selv — og da ser de to ulike ut ved siden av hverandre. */
textarea { padding-block: 0.875rem; }

/* Placeholderen skal antyde, ikke instruere. Er den likevel lang på et
   smalt felt, kuttes den med ellipse framfor å bli hakket midt i et ord. */
input::placeholder {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}