: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; }
.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 {
    /* Zeroing the page margin removes the browser-generated print header/footer (the page URL,
       title, date and page numbers). The whitespace around the report is restored via a body
       margin instead, so the printed PDF keeps its margins but not the URL address. */
    @page { margin: 0; }
    .site-header, .site-footer, .report-toolbar, .site-nav { display: none !important; }
    body { background: #fff; margin: 1.6cm; -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%; }
}