:root {
    --navy: #1f3a5f;
    --navy-deep: #16293f;
    --heather: #6f5b8e;
    --gold: #c8a24b;
    --stone: #f4f2ee;
    --ink: #232323;
    --muted: #6b7280;
    --line: #e2e0da;
    --danger: #b3261e;
    --ok: #2f6f43;
    --radius: 10px;
    --shadow: 0 2px 6px rgba(22, 41, 63, .08), 0 8px 24px rgba(22, 41, 63, .06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Lato", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    color: var(--ink);
    background: var(--stone);
    line-height: 1.55;
}

.container { width: min(1080px, 92vw); margin-inline: auto; }
.main { padding: 2rem 0 3rem; }

/* Header */
.site-header { background: linear-gradient(120deg, var(--navy), var(--navy-deep)); color: #fff; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.brand-mark {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 8px;
    background: var(--gold); color: var(--navy-deep); font-weight: 800; letter-spacing: -1px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text small { color: #cdd6e4; font-weight: 400; }
.site-nav { display: flex; gap: 1.25rem; }
.site-nav a { color: #e8edf4; text-decoration: none; font-weight: 600; font-size: .95rem; }
.site-nav a:hover { color: #fff; text-decoration: underline; }

/* Footer */
.site-footer { border-top: 3px solid var(--gold); background: #fff; color: var(--muted); font-size: .85rem; padding: 1.5rem 0; }
.site-footer p { margin: .25rem 0; }

/* Cards / panels */
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.75rem;
}
.card + .card { margin-top: 1.5rem; }
.card-narrow { max-width: 460px; margin-inline: auto; }

h1, h2, h3 { color: var(--navy); line-height: 1.2; }
h1 { font-size: 1.6rem; margin: 0 0 .35rem; }
.lead { color: var(--muted); margin-top: 0; }

/* Forms */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--navy-deep); }
.field .hint { color: var(--muted); font-weight: 400; font-size: .85rem; }
.form-control {
    width: 100%; padding: .6rem .7rem; font-size: 1rem; color: var(--ink);
    border: 1px solid #cfd4db; border-radius: 8px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31, 58, 95, .15); }
textarea.form-control { min-height: 96px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.checkbox { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0; font-weight: 400; }
.checkbox input { margin-top: .3rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .65rem 1.4rem; font-size: 1rem; font-weight: 700; border-radius: 8px;
    border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); }
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: #b8923f; }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-block { width: 100%; }

.radio-list label { display: flex; gap: .5rem; align-items: center; font-weight: 400; margin: .3rem 0; }

/* Alerts */
.alert { border-radius: 8px; padding: .75rem 1rem; margin: 1rem 0; font-size: .95rem; }
.alert-error { background: #fdecea; color: var(--danger); border: 1px solid #f5c2c0; }
.alert-info { background: #eef4fb; color: var(--navy); border: 1px solid #cfe0f2; }
.alert-ok { background: #eaf5ee; color: var(--ok); border: 1px solid #c2e2cf; }

.text-danger { color: var(--danger); }
.required { color: var(--danger); }
.muted { color: var(--muted); }
.mt { margin-top: 1rem; }
.center { text-align: center; }

.cards-row img { max-width: 100%; height: auto; }

/* Honeypot: kept in the layout (not display:none, which some bots skip) but off-screen for humans. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Report styling ---------------------------------------------------------------------- */
.report-toolbar {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: .85rem 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow);
}
.report-toolbar .intro { color: var(--muted); font-size: .9rem; margin: 0; }
/* The intro text shares the row with the buttons on desktop (it takes the remaining space and
   wraps to two lines), then drops the whole button group below it on narrow screens. */
.report-toolbar > div:first-child { flex: 1 1 20rem; }
/* Keep the Back + Print pair together on one row; on a narrow screen the whole group drops
   below the intro (flex-wrap above) rather than the two buttons stacking on top of each other. */
.report-toolbar .toolbar-actions { display: flex; gap: .5rem; flex-shrink: 0; }
/* Compact, equal-sized toolbar buttons: roughly half the default height, and both the same
   size. The explicit line-height makes the <a> "Back" and the <button> "Print" render at an
   identical height; min-width makes them share one width regardless of label length. */
.report-toolbar .btn { padding: .24rem .7rem; font-size: .8rem; line-height: 1.2; min-width: 9.5rem; }

.report {
    background: #fff; color: #1a1a1a; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 2.5rem; max-width: 900px; margin-inline: auto; overflow: hidden;
    font-size: .92rem;
}
/* Full-width Clans and Castles banner across the top of the report. On screen it bleeds over the
   card's 2.5rem padding to sit edge-to-edge (clipped to the rounded corners); the print rule below
   resets the bleed so it spans the printed content width between the page margins instead. */
.report-banner {
    display: block; width: calc(100% + 5rem); max-width: none;
    margin: -2.5rem -2.5rem 0; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
    border-bottom: 3px solid var(--gold);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-titlebar { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin: 1.25rem 0 1.5rem; }
.report-titlebar h1 { font-size: 1.35rem; letter-spacing: .04em; margin: 0; color: var(--navy-deep); }
.report-titlebar .ref { color: var(--muted); text-align: right; }

/* Personal letter opening (dated greeting + recipient address + warm intro). */
.report .letter-open { margin-bottom: 1.5rem; }
.report .letter-meta { color: var(--muted); margin: 0 0 1rem; }
.report .recipient { font-style: normal; line-height: 1.5; margin: 0 0 1rem; }
.report .recipient .name { font-weight: 700; color: var(--navy-deep); }
.report .letter-intro { margin: 0; }
.report .letter-note { margin: .75rem 0 0; white-space: pre-line; }

.report h2.section {
    background: var(--navy); color: #fff; font-size: 1rem; letter-spacing: .06em;
    padding: .4rem .75rem; border-radius: 6px; margin: 1.75rem 0 .75rem;
}
.report table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.report th, .report td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.report th { background: var(--stone); color: var(--navy-deep); font-weight: 700; }
.report td.num, .report th.num { text-align: right; white-space: nowrap; }
/* Accommodation name heading on the Proposal: the hotel is the headline of each stay, so it
   sits above the detail grid rather than getting lost among the dt labels. */
.report .stay-name {
    font-size: 1.05rem; font-weight: 700; color: var(--navy-deep);
    margin: 1.25rem 0 .35rem;
}
.report .stay-name:first-of-type { margin-top: .5rem; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: .25rem .75rem; margin: .5rem 0; }
.kv dt { font-weight: 700; color: var(--navy-deep); }
.kv dd { margin: 0; }
.report .note { color: #444; font-size: .85rem; white-space: pre-line; margin: .5rem 0; }
.report .totals { text-align: right; font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-top: .5rem; }
.report .signoff { margin-top: 2rem; }
.report .empty { color: var(--muted); font-style: italic; }

@media print {
    /* Margins belong on @page, not on body. A body margin is applied once to the whole element —
       at the top of the first page and the bottom of the last — so with "@page { margin: 0 }"
       every continuation page ran its content right to the edge of the sheet, into the printer's
       unprintable border, and lines were lost off the top and bottom of pages 2 onwards. Setting
       the margin here gives every page the same A4 border.

       The previous "@page { margin: 0 }" existed to starve the browser of room to draw its own
       print header/footer (page URL, title, date, page numbers). With real margins restored those
       may reappear; they are switched off in the print dialog itself (Chrome/Edge: More settings >
       uncheck "Headers and footers"), and that choice is remembered. Losing a line of a customer's
       proposal is the worse of the two problems. */
    @page { size: A4; margin: 16mm 16mm 18mm; }
    .site-header, .site-footer, .report-toolbar, .site-nav { display: none !important; }
    body { background: #fff; margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .main { padding: 0; }
    .report { box-shadow: none; border: none; max-width: none; padding: 0; }
    /* With the report padding removed for print, drop the banner's negative-margin bleed so it spans
       the full printed content width between the page margins. */
    .report-banner { width: 100%; margin: 0 0 0; border-radius: 0; }
    .container { width: 100%; }

    /* Break control: keep the page break from landing somewhere that reads as missing content.
       Nothing here can hide content — a block taller than a page still breaks — it only stops
       gratuitous splits. Both the modern and legacy property names are given: Chrome and Safari
       still need page-break-* in places. */
    /* A section heading or hotel name stranded at the foot of a page reads as a lost section. */
    .report h2.section, .report .stay-name {
        break-after: avoid; page-break-after: avoid;
    }
    /* Repeat table column headings on every page a table runs onto, so a continued ferry or
       vehicle table is still readable. */
    .report thead { display: table-header-group; }
    .report tr { break-inside: avoid; page-break-inside: avoid; }
    /* Keep a label with its value, and each value whole, rather than slicing one across the break
       where the half-line looks like a print fault. */
    .kv dt { break-after: avoid; page-break-after: avoid; }
    .kv dt, .kv dd { break-inside: avoid; page-break-inside: avoid; }
    /* No single dangling line of a paragraph at the top or bottom of a page. */
    .report p { orphans: 3; widows: 3; }
}