/* =========================================================
   Oceanic Manor — Marine Parade, Napier, Hawke's Bay
   Design: Art Deco marine · geometric sans throughout ·
   symmetric centred composition · stepped ornament
   ========================================================= */

:root {
    --marine:      #0c222b;
    --marine-2:    #102f3b;
    --marine-3:    #17414f;
    --marine-line: rgba(243, 236, 224, .16);

    --shell:       #f4eee2;
    --shell-2:     #eae1d1;
    --shell-3:     #ddd1bc;
    --white:       #fffdf8;

    --coral:       #cf6144;
    --coral-2:     #e07a5c;
    --coral-wash:  rgba(207, 97, 68, .1);
    --jade:        #3d8b80;
    --jade-2:      #55a79b;

    --slate:       #47606a;
    --slate-2:     #6c838d;
    --slate-3:     #90a3ab;

    --line:        rgba(12, 34, 43, .18);
    --line-soft:   rgba(12, 34, 43, .09);

    --geo:  "Futura", "Century Gothic", "Avenir Next", "URW Gothic", "Trebuchet MS", "Segoe UI", sans-serif;
    --grot: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --shell-w:  1300px;
    --read-w:   800px;
    --gut:      clamp(18px, 4vw, 44px);
    --ease:     .4s cubic-bezier(.2, .7, .3, 1);
}

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

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

body {
    margin: 0;
    background: var(--shell);
    color: var(--marine);
    font-family: var(--grot);
    font-size: 16.5px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.is-held { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--geo);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 18px;
    color: var(--marine);
}

h1 { font-size: clamp(30px, 4.4vw, 56px); letter-spacing: .06em; }
h2 { font-size: clamp(23px, 2.9vw, 37px); letter-spacing: .07em; }
h3 { font-size: clamp(17px, 1.6vw, 21px); letter-spacing: .1em; }
h4 { font-size: 14px; letter-spacing: .14em; }

p { margin: 0 0 17px; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 17px; padding-left: 19px; }
li { margin-bottom: 7px; }
strong, b { font-weight: 600; }
::selection { background: var(--coral); color: var(--white); }

.shell { width: 100%; max-width: var(--shell-w); margin: 0 auto; padding: 0 var(--gut); }
.read  { max-width: var(--read-w); }

/* ─── Deco ornament ────────────────────────────────────── */

/* stepped "speed lines" — three bars of decreasing width */
.steps { display: block; margin-bottom: 22px; }
.steps i { display: block; height: 3px; background: var(--coral); margin-bottom: 4px; }
.steps i:nth-child(1) { width: 62px; }
.steps i:nth-child(2) { width: 42px; }
.steps i:nth-child(3) { width: 22px; margin-bottom: 0; }
.steps.is-centred { margin-left: auto; margin-right: auto; width: 62px; }
.steps.is-centred i { margin-left: auto; margin-right: auto; }
.steps.on-dark i { background: var(--coral-2); }

/* zigzag band between sections */
.zig {
    height: 14px;
    background-image:
        linear-gradient(135deg, var(--marine) 25%, transparent 25%),
        linear-gradient(225deg, var(--marine) 25%, transparent 25%);
    background-size: 16px 16px;
    background-position: 0 0;
    opacity: .5;
}
.zig.on-dark {
    background-image:
        linear-gradient(135deg, var(--shell) 25%, transparent 25%),
        linear-gradient(225deg, var(--shell) 25%, transparent 25%);
    opacity: .22;
}

/* sunburst behind dark bands */
.sunburst { position: relative; overflow: hidden; }
.sunburst::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -46%;
    width: 150vw;
    height: 150vw;
    transform: translateX(-50%);
    background: repeating-conic-gradient(from 0deg,
        rgba(243, 236, 224, .035) 0deg 3deg,
        transparent 3deg 9deg);
    pointer-events: none;
}
.sunburst > * { position: relative; z-index: 1; }

.kicker {
    display: block;
    font-family: var(--geo);
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 14px;
}
.kicker.on-dark { color: var(--coral-2); }

.numeral {
    font-family: var(--geo);
    font-size: 13px;
    letter-spacing: .3em;
    color: var(--slate-2);
    display: block;
    margin-bottom: 12px;
}

.lede { font-size: 18px; line-height: 1.68; color: var(--slate); }
.muted { color: var(--slate-2); }
.small { font-size: 14px; line-height: 1.65; }
.fine  { font-size: 12.5px; line-height: 1.62; color: var(--slate-2); }

/* ─── Buttons ──────────────────────────────────────────── */

.act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: var(--geo);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    background: var(--marine);
    color: var(--shell);
    border: 0;
    cursor: pointer;
    position: relative;
    transition: background var(--ease), color var(--ease);
}
.act::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(244, 238, 226, .34);
    pointer-events: none;
    transition: border-color var(--ease);
}
.act:hover { background: var(--coral); color: var(--white); }
.act:hover::after { border-color: rgba(255, 255, 255, .5); }

.act--coral { background: var(--coral); color: var(--white); }
.act--coral:hover { background: var(--marine); }

.act--hollow { background: transparent; color: var(--marine); box-shadow: inset 0 0 0 1px var(--marine); }
.act--hollow::after { border-color: rgba(12, 34, 43, .2); }
.act--hollow:hover { background: var(--marine); color: var(--shell); }

.act--pale { background: transparent; color: var(--shell); box-shadow: inset 0 0 0 1px rgba(244, 238, 226, .5); }
.act--pale::after { border-color: rgba(244, 238, 226, .2); }
.act--pale:hover { background: var(--shell); color: var(--marine); }

.act--mini { padding: 10px 18px; font-size: 10.5px; letter-spacing: .18em; }
.act--mini::after { inset: 3px; }

.acts { display: flex; flex-wrap: wrap; gap: 12px; }

.jump {
    display: inline-block;
    font-family: var(--geo);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--marine);
    padding-bottom: 6px;
    box-shadow: inset 0 -1px 0 0 var(--line);
    transition: color var(--ease), box-shadow var(--ease);
}
.jump:hover { color: var(--coral); box-shadow: inset 0 -1px 0 0 var(--coral); }
.jump.on-dark { color: var(--shell); box-shadow: inset 0 -1px 0 0 var(--marine-line); }
.jump.on-dark:hover { color: var(--coral-2); box-shadow: inset 0 -1px 0 0 var(--coral-2); }

.tie { color: var(--coral); box-shadow: inset 0 -1px 0 0 var(--coral-wash); transition: box-shadow var(--ease); }
.tie:hover { box-shadow: inset 0 -1px 0 0 var(--coral); }

/* ─── Age check ────────────────────────────────────────── */

.agecheck {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(9, 26, 33, .96);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}
.agecheck.is-up { display: flex; }

.agecheck__box {
    background: var(--shell);
    width: 100%;
    max-width: 600px;
    padding: 40px 38px 34px;
    max-height: 92vh;
    overflow-y: auto;
    text-align: center;
    position: relative;
}
.agecheck__box::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid var(--line);
    pointer-events: none;
}
.agecheck__box > * { position: relative; }
.agecheck .mark { margin: 0 auto 20px; }
.agecheck p { color: var(--slate); }
.agecheck .acts { justify-content: center; margin-top: 24px; }
.agecheck .act { flex: 1 1 210px; }

.agecheck__note {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.6;
    color: var(--slate-2);
}
.agecheck__deny { display: none; }
.agecheck.is-denied .agecheck__ask { display: none; }
.agecheck.is-denied .agecheck__deny { display: block; }

/* ─── Masthead ─────────────────────────────────────────── */

.strip {
    background: var(--marine);
    color: var(--slate-3);
    font-size: 12px;
    letter-spacing: .02em;
}
.strip .shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    flex-wrap: wrap;
}
.strip a { transition: color var(--ease); }
.strip a:hover { color: var(--shell); }
.strip__links { display: flex; gap: 20px; flex-wrap: wrap; }

.r20 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--geo);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--shell);
}
.r20 b { background: var(--coral); color: var(--white); padding: 3px 8px; font-weight: 500; letter-spacing: .12em; }

.masthead {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--shell);
    border-bottom: 1px solid var(--line);
}
.masthead .shell {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    min-height: 92px;
}

/* centred wordmark, navigation split either side — deco symmetry */
.mark { display: inline-flex; flex-direction: column; align-items: center; text-align: center; }
.mark__name {
    font-family: var(--geo);
    font-size: clamp(18px, 2vw, 24px);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--marine);
    text-indent: .3em;
}
.mark__rule { width: 100%; height: 1px; background: var(--coral); margin: 7px 0 6px; }
.mark__sub {
    font-family: var(--geo);
    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--slate-2);
    text-indent: .28em;
}
.mark.on-dark .mark__name { color: var(--shell); }
.mark.on-dark .mark__sub { color: var(--slate-3); }

.pilot { display: flex; align-items: center; gap: 26px; }
.pilot--right { justify-content: flex-end; }
.pilot a {
    font-family: var(--geo);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--marine);
    padding: 8px 0;
    position: relative;
    transition: color var(--ease);
}
.pilot a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: var(--coral);
    transform: translateX(-50%);
    transition: width var(--ease);
}
.pilot a:hover { color: var(--coral); }
.pilot a:hover::after, .pilot a.is-here::after { width: 100%; }
.pilot a.is-here { color: var(--coral); }
.pilot .act { padding: 11px 20px; color: var(--shell); }
.pilot .act::after { display: none; }
.pilot .act:hover { color: var(--white); }

.hamb {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    position: relative;
}
.hamb span, .hamb span::before, .hamb span::after {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    background: var(--marine);
    transform: translateX(-50%);
    transition: transform var(--ease), opacity var(--ease);
}
.hamb span { top: 50%; margin-top: -1px; }
.hamb span::before { content: ""; left: 0; transform: none; top: -6px; }
.hamb span::after  { content: ""; left: 0; transform: none; top: 6px; }
.hamb[aria-expanded="true"] span { background: transparent; }
.hamb[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hamb[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.drawer { display: none; }

/* ─── Overture (hero) — framed panel beside the photograph ─ */

.overture { background: var(--marine); }
.overture .shell { padding: 0; max-width: none; }
.overture__grid { display: grid; grid-template-columns: 1fr 1fr; }

.overture__panel {
    background: var(--shell);
    padding: clamp(38px, 5.5vw, 84px) clamp(26px, 5vw, 76px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.overture__panel::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid var(--line);
    pointer-events: none;
}
.overture__panel > * { position: relative; }
.overture__sub { font-size: 17px; line-height: 1.7; color: var(--slate); margin-bottom: 26px; max-width: 46ch; }

.overture__photo { position: relative; min-height: 420px; }
.overture__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* coordinates / establishment plate under the hero */
.plate {
    background: var(--marine);
    color: var(--slate-3);
    border-top: 1px solid var(--marine-line);
}
.plate .shell {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--marine-line);
}
.plate__cell { background: var(--marine); padding: 22px 20px; text-align: center; }
.plate__cell dt {
    font-family: var(--geo);
    font-size: 9.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--slate-2);
    margin-bottom: 8px;
}
.plate__cell dd {
    margin: 0;
    font-family: var(--geo);
    font-size: 19px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--shell);
}

/* ─── Inner page overture ──────────────────────────────── */

.crest { background: var(--marine); color: var(--shell); position: relative; }
.crest__photo { position: relative; height: clamp(260px, 40vh, 400px); }
.crest__photo img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.crest__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 34, 43, .5) 0%, rgba(12, 34, 43, .72) 100%);
    pointer-events: none;
}
.crest__body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    text-align: center;
    z-index: 1;
}
.crest h1 { color: var(--shell); }
.crest p { color: rgba(244, 238, 226, .82); max-width: 62ch; margin: 0 auto; }
.crest .steps { margin-left: auto; margin-right: auto; }

.trail {
    font-family: var(--geo);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--slate-2);
    padding: 15px 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
}
.trail a:hover { color: var(--coral); }

/* ─── Bands ────────────────────────────────────────────── */

.band { padding: clamp(56px, 7vw, 96px) 0; }
.band--tight { padding: clamp(40px, 4.5vw, 62px) 0; }
.band--shell2 { background: var(--shell-2); }
.band--dark { background: var(--marine); color: rgba(244, 238, 226, .8); }
.band--dark h2, .band--dark h3, .band--dark h4 { color: var(--shell); }
.band--dark .lede { color: rgba(244, 238, 226, .8); }
.band--dark .fine { color: var(--slate-3); }

.head { max-width: 700px; margin: 0 auto clamp(38px, 4.5vw, 62px); text-align: center; }
.head--left { margin-left: 0; text-align: left; }
.head--left .steps { margin-left: 0; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 62px); align-items: start; }
.duo--wide { grid-template-columns: 1.35fr 1fr; }
.duo--narrow { grid-template-columns: 1fr 1.35fr; }
.duo--mid { align-items: center; }

/* ─── Frames & tiles ───────────────────────────────────── */

.tiles { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.frame {
    background: var(--white);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color var(--ease);
}
.frame::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--coral);
    transition: width var(--ease);
}
.frame:hover { border-color: var(--marine); }
.frame:hover::after { width: 100%; }

.frame__photo { aspect-ratio: 3 / 2; overflow: hidden; }
.frame__photo img { width: 100%; height: 100%; object-fit: cover; }

.frame__body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.frame__body h3 { margin-bottom: 11px; }
.frame__body p { color: var(--slate); font-size: 15px; line-height: 1.68; }
.frame__body .jump { margin-top: auto; padding-top: 18px; align-self: flex-start; }

.frame__no {
    font-family: var(--geo);
    font-size: 30px;
    letter-spacing: .04em;
    color: transparent;
    -webkit-text-stroke: 1px var(--coral);
    display: block;
    line-height: 1;
    margin-bottom: 12px;
}

/* ─── Alternating detail rows ──────────────────────────── */

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
    padding: clamp(32px, 4vw, 52px) 0;
    border-top: 1px solid var(--line-soft);
}
.row:first-of-type { border-top: 0; padding-top: 0; }
.row--flip .row__photo { order: 2; }
.row__photo { position: relative; }
.row__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.row__photo::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(244, 238, 226, .5);
    pointer-events: none;
}
.row__tag {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--coral);
    color: var(--white);
    font-family: var(--geo);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 9px 16px;
    z-index: 1;
}
.row__body p { color: var(--slate); }

/* ─── Specification lists ──────────────────────────────── */

.specs { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.specs li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
    margin: 0;
}
.specs dt, .specs span {
    font-family: var(--geo);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--slate-2);
    padding-top: 2px;
}
.specs b { font-weight: 500; text-align: right; }
.band--dark .specs { border-color: var(--marine-line); }
.band--dark .specs li { border-color: var(--marine-line); }
.band--dark .specs b { color: var(--shell); }

/* ─── Rooms ────────────────────────────────────────────── */

.suite {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--white);
    border: 1px solid var(--line);
    margin-bottom: 24px;
    transition: border-color var(--ease);
}
.suite:hover { border-color: var(--marine); }
.suite--flip .suite__photo { order: 2; }
.suite__photo img { width: 100%; height: 100%; min-height: 290px; object-fit: cover; }
.suite__body { padding: clamp(24px, 3vw, 40px); }
.suite__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.suite__body p { color: var(--slate); font-size: 15px; }

.tariff { text-align: right; }
.tariff b {
    display: block;
    font-family: var(--geo);
    font-size: 22px;
    letter-spacing: .06em;
    font-weight: 500;
    color: var(--coral);
}
.tariff span {
    font-family: var(--geo);
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--slate-2);
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 20px; }
.tags span {
    font-family: var(--geo);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slate);
    border: 1px solid var(--line);
    padding: 6px 10px;
}

/* ─── Tally (statistics) ───────────────────────────────── */

.tally { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--marine-line); }
.tally > div { background: var(--marine); padding: 30px 16px; text-align: center; }
.tally b {
    display: block;
    font-family: var(--geo);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--coral-2);
    line-height: 1;
    margin-bottom: 10px;
}
.tally span {
    font-family: var(--geo);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--slate-3);
}

/* ─── Notes, quotes, helplines ─────────────────────────── */

.note { background: var(--shell-2); border: 1px solid var(--line); padding: 24px 26px; }
.note + .note { margin-top: 18px; }
.note h4 { margin-bottom: 10px; }
.note p { color: var(--slate); font-size: 14.5px; }
.band--dark .note { background: var(--marine-2); border-color: var(--marine-line); }
.band--dark .note p { color: rgba(244, 238, 226, .78); }

.speak {
    border-left: 3px solid var(--coral);
    padding: 4px 0 4px 22px;
    margin: 26px 0;
    font-family: var(--geo);
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.42;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--marine);
}
.band--dark .speak { color: var(--shell); }

.helpgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.helpgrid > div { background: var(--white); padding: 20px 22px; }
.helpgrid b {
    display: block;
    font-family: var(--geo);
    font-size: 19px;
    letter-spacing: .08em;
    font-weight: 500;
    color: var(--coral);
    margin-bottom: 4px;
}
.helpgrid span { font-size: 12.5px; color: var(--slate-2); }

.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cells > div { background: var(--white); padding: 24px 22px; }
.cells h4 { margin-bottom: 9px; }
.cells p { font-size: 14.5px; color: var(--slate); }

.shot { margin: 0; }
.shot img { width: 100%; }
.shot figcaption {
    font-family: var(--geo);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slate-2);
    padding-top: 11px;
    margin-top: 12px;
    border-top: 1px solid var(--line);
    line-height: 1.6;
}
.band--dark .shot figcaption { border-color: var(--marine-line); color: var(--slate-3); }

/* ─── Enquiry form ─────────────────────────────────────── */

.desk { background: var(--white); border: 1px solid var(--line); padding: clamp(24px, 3.5vw, 42px); }

.slot { margin-bottom: 18px; }
.slot label {
    display: block;
    font-family: var(--geo);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 7px;
}
.must { color: var(--coral); }

.slot input, .slot select, .slot textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--shell);
    font-family: var(--grot);
    font-size: 15px;
    color: var(--marine);
    border-radius: 0;
    transition: border-color var(--ease), background var(--ease);
}
.slot textarea { min-height: 120px; resize: vertical; }
.slot input:focus, .slot select:focus, .slot textarea:focus {
    outline: none;
    border-color: var(--marine);
    background: var(--white);
}
.slot.is-wrong input, .slot.is-wrong select, .slot.is-wrong textarea { border-color: var(--coral); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.warn { display: none; font-size: 12px; color: var(--coral); margin-top: 5px; }
.slot.is-wrong .warn { display: block; }

.tick { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 13px; font-size: 13.5px; line-height: 1.6; color: var(--slate); }
.tick input { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--coral); }
.tick.is-wrong { color: var(--coral); }

.done { display: none; border: 1px solid var(--marine); border-left: 4px solid var(--coral); background: var(--shell-2); padding: 22px 24px; margin-bottom: 22px; }
.done.is-up { display: block; }
.done h4 { margin-bottom: 7px; }
.done p { font-size: 14.5px; color: var(--slate); }

/* ─── Documents ────────────────────────────────────────── */

.doc { max-width: 860px; margin: 0 auto; }
.doc h2 { font-size: clamp(19px, 2vw, 25px); margin-top: 42px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 15px; margin-top: 26px; }
.doc p, .doc li { color: var(--slate); }
.doc table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 11px 13px; text-align: left; vertical-align: top; }
.doc th {
    background: var(--shell-2);
    font-family: var(--geo);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--marine);
}

.stamp {
    font-size: 12.5px;
    color: var(--slate-2);
    border: 1px solid var(--line);
    padding: 14px 18px;
    margin-bottom: 32px;
}

.index-box { background: var(--shell-2); border: 1px solid var(--line); padding: 22px 26px; margin-bottom: 38px; }
.index-box h4 { margin-bottom: 12px; }
.index-box ol { margin: 0; padding-left: 18px; columns: 2; column-gap: 30px; }
.index-box li { font-size: 14px; margin-bottom: 5px; break-inside: avoid; }
.index-box a { color: var(--slate); }
.index-box a:hover { color: var(--coral); }

/* ─── Call band ────────────────────────────────────────── */

.call { background: var(--marine); color: var(--shell); padding: clamp(46px, 5.5vw, 74px) 0; text-align: center; }
.call h2 { color: var(--shell); }
.call p { color: rgba(244, 238, 226, .78); max-width: 58ch; margin: 0 auto 26px; }
.call .acts { justify-content: center; }
.call .steps { margin-left: auto; margin-right: auto; }

/* ─── Footer ───────────────────────────────────────────── */

.foot { background: var(--marine); color: var(--slate-3); padding: 58px 0 0; font-size: 14px; }
.foot a { transition: color var(--ease); }
.foot a:hover { color: var(--shell); }
.foot h4 {
    color: var(--shell);
    font-family: var(--geo);
    font-size: 10px;
    letter-spacing: .24em;
    margin-bottom: 15px;
}
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 34px; padding-bottom: 44px; border-bottom: 1px solid var(--marine-line); }
.foot__grid ul { list-style: none; margin: 0; padding: 0; }
.foot__grid li { margin-bottom: 9px; }
.foot__about .mark { align-items: flex-start; text-align: left; }
.foot__about p { margin-top: 18px; line-height: 1.72; }

.foot__legalese { padding: 28px 0; border-bottom: 1px solid var(--marine-line); font-size: 12.5px; line-height: 1.75; color: var(--slate-2); }
.foot__legalese strong { color: var(--slate-3); font-weight: 500; }
.foot__help { display: flex; flex-wrap: wrap; gap: 7px 22px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--marine-line); }

.foot__base { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 20px 0 26px; font-size: 12.5px; }
.foot__base nav { display: flex; flex-wrap: wrap; gap: 7px 20px; }

/* ─── Consent ──────────────────────────────────────────── */

.consent {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 120;
    background: var(--shell);
    border-top: 3px solid var(--coral);
    box-shadow: 0 -16px 44px rgba(9, 26, 33, .2);
    display: none;
    padding: 20px 0;
}
.consent.is-up { display: block; }
.consent .shell { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.consent p { font-size: 13.5px; color: var(--slate); margin: 0; }
.consent__more { display: none; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.consent.is-open .consent__more { display: block; }
.consent__opt { border: 1px solid var(--line); background: var(--shell-2); padding: 14px 16px; }
.consent__opt .tick { margin: 0 0 5px; font-size: 12.5px; color: var(--marine); }
.consent__opt p { font-size: 12px; }

/* ─── Enter animation ──────────────────────────────────── */

.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .rise { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

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

@media (max-width: 1100px) {
    .foot__grid { grid-template-columns: 1fr 1fr; }
    .tally { grid-template-columns: repeat(3, 1fr); }
    .plate .shell { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
    .masthead .shell { grid-template-columns: 1fr auto; min-height: 76px; }
    .pilot { display: none; }
    .hamb { display: block; justify-self: end; }
    .mark { align-items: flex-start; text-align: left; }
    .mark__name { text-indent: 0; letter-spacing: .24em; }
    .mark__sub { text-indent: 0; }

    .drawer {
        display: none;
        background: var(--shell);
        border-bottom: 1px solid var(--line);
    }
    .drawer.is-open { display: block; }
    .drawer a {
        display: block;
        padding: 14px var(--gut);
        font-family: var(--geo);
        font-size: 12px;
        letter-spacing: .2em;
        text-transform: uppercase;
        border-top: 1px solid var(--line-soft);
    }
    .drawer a:hover, .drawer a.is-here { color: var(--coral); }

    .overture__grid, .duo, .duo--wide, .duo--narrow,
    .row, .suite, .tiles--3, .tiles--4 { grid-template-columns: 1fr; }
    .tiles--3, .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .row--flip .row__photo { order: 0; }
    .suite--flip .suite__photo { order: 0; }
    .suite__photo img { min-height: 230px; aspect-ratio: 3/2; }
    .overture__photo { min-height: 300px; }
    .cells { grid-template-columns: 1fr 1fr; }
    .index-box ol { columns: 1; }
}

@media (max-width: 720px) {
    body { font-size: 16px; }
    .strip .shell { justify-content: center; padding-top: 7px; padding-bottom: 7px; }
    .strip__links { gap: 14px; justify-content: center; }
    .tiles--2, .tiles--3, .tiles--4, .cells, .helpgrid, .pair, .duo { grid-template-columns: 1fr; }
    .helpgrid > div, .cells > div { border: 0; }
    .tally { grid-template-columns: repeat(2, 1fr); }
    .plate .shell { grid-template-columns: repeat(2, 1fr); }
    .consent .shell { grid-template-columns: 1fr; }
    .consent .acts .act { flex: 1 1 130px; }
    .agecheck__box { padding: 28px 22px 24px; }
    .suite__photo img { min-height: 190px; }
    .tariff { text-align: left; }
}