:root {
    --bg: #0f1727;
    --bg-deep: #0a1120;
    --panel: rgba(23, 35, 58, 0.92);
    --panel-solid: #16243b;
    --panel-soft: rgba(28, 42, 66, 0.7);
    --text: #eff4ff;
    --muted: #a8b3c7;
    --muted-strong: #c4cedf;
    --border: rgba(173, 184, 206, 0.18);
    --gold: #d7af59;
    --gold-strong: #f0cb73;
    --gold-deep: #8a6a25;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    --radius: 22px;
    --container: 1200px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(215, 175, 89, 0.14), transparent 30%),
        linear-gradient(180deg, #111b2d 0%, #09111d 100%);
    color: var(--text);
}

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

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

button,
input,
select,
textarea {
    font: inherit;
}

.site-shell {
    min-height: 100vh;
}

.container {
    width: min(var(--container), calc(100% - 2rem));
    margin: 0 auto;
}

.narrow {
    max-width: 840px;
}

.center {
    text-align: center;
}

.text-primary {
    color: var(--gold);
}

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: rgba(10, 17, 32, 0.82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}

/* The header bar spans the whole viewport, so it opts out of the 1200px content
   column it shares a class with. On a wide screen the column left the logo
   floating a couple of hundred pixels in from the edge with dead space beside
   it; the brand now starts at the edge of the screen and the actions end at the
   other, which is also what gives a long navigation room to fit. */
.nav-shell {
    width: 100%;
    max-width: none;
    padding-inline: clamp(1rem, 2.4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 84px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    /* Shrinkable on purpose. The company name is owner-supplied and the logo is
       too: unshrinkable, a long name plus a wide logo pushed the mobile menu
       button clean off the right of the screen. Squeezed, the name ellipsises
       instead (see .brand-text below) and the mark keeps its size. */
    flex: 0 1 auto;
    min-width: 0;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gold-strong), var(--gold-deep));
    color: var(--bg);
    box-shadow: 0 10px 30px rgba(215, 175, 89, 0.25);
}

/* An owner-supplied logo replaces the gold badge outright rather than sitting
   inside it: its own artwork carries the shape, and a tile behind a
   transparent PNG reads as a sticker stuck on the bar. Height is fixed and
   width follows, so a square mark and a wide lockup both sit on the same
   baseline as the company name. */
.brand-mark.brand-mark-image {
    width: auto;
    height: 3.7rem;
    /* Reserved so the company name does not jump sideways when the image
       finishes decoding in a fixed header. */
    min-width: 5rem;
    border-radius: 0;
    background: none;
    box-shadow: none;
    flex: 0 0 auto;
}

.brand-logo {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 11rem;
    object-fit: contain;
}

.site-footer .brand-mark.brand-mark-image {
    height: 4rem;
}

.site-footer .brand-logo {
    max-width: 13rem;
}

.site-footer .brand-mark.brand-mark-image {
    min-width: 5.5rem;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
    overflow: hidden;
}

/* The company name is owner-editable, so cap it rather than let a long one
   push the navigation off the header. A normal two-word name still fits. */
.brand-text strong,
.brand-text small {
    max-width: 15rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.brand-text strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.brand-text small {
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: 0.62rem;
    color: var(--muted);
}

.nav-links,
.desktop-actions,
.button-row,
.feature-row,
.footer-bottom,
.footer-inline-links,
.quick-stats,
.form-actions {
    display: flex;
    align-items: center;
}

/* No min-width:0 here on purpose. Collapsed below its content, the menu's
   links overflowed their own box and printed on top of the phone number and
   the buttons. Left at the automatic minimum the menu holds its width and the
   squeeze lands on the company name instead, which ellipsises cleanly. */
.nav-links {
    gap: 1.6rem;
}

.nav-link {
    color: rgba(239, 244, 255, 0.82);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--gold);
}

.desktop-actions {
    gap: 1rem;
}

.phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--muted-strong);
    font-size: 0.92rem;
}

.menu-button {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--text);
}

.mobile-nav-overlay {
    position: fixed;
    inset: 84px 0 0 0;
    background: rgba(0, 0, 0, 0.4);
}

.mobile-nav-panel {
    position: fixed;
    top: 84px;
    right: 1rem;
    left: 1rem;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(15, 23, 39, 0.97);
    box-shadow: var(--shadow);
    padding: 1.2rem;
}

.mobile-nav-links {
    display: grid;
    gap: 0.5rem;
}

.mobile-nav-link {
    display: block;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    color: var(--text);
    background: transparent;
}

.mobile-nav-link.active,
.mobile-nav-link:hover {
    background: rgba(215, 175, 89, 0.12);
    color: var(--gold);
}

.mobile-nav-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: linear-gradient(135deg, var(--gold-strong), var(--gold));
    color: var(--bg);
}

.button-secondary {
    border-color: rgba(215, 175, 89, 0.34);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
}

.button-light {
    background: var(--text);
    color: var(--bg);
}

.button-ghost-light {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

/* A button size modifier, so it has to say so. Unscoped it also matched
   .section-copy.compact, which is why the intro paragraph on the contact panel
   sat indented from the heading above it. */
.button.compact {
    padding: 0.82rem 1.2rem;
}

.full-width {
    width: 100%;
}

.hero,
.page-hero {
    position: relative;
    overflow: hidden;
}

.hero {
    min-height: 100vh;
    padding-top: 110px;
}

.hero-subpage {
    min-height: 72vh;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9, 17, 29, 0.98) 0%, rgba(9, 17, 29, 0.88) 52%, rgba(9, 17, 29, 0.48) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    min-height: calc(100vh - 110px);
    padding-block: 4rem 2rem;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 3rem;
    align-items: center;
}

.hero-copy,
.max-width-medium {
    max-width: 42rem;
}

.eyebrow-pill,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

.eyebrow-pill {
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(215, 175, 89, 0.25);
    background: rgba(215, 175, 89, 0.08);
}

.status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 0 8px rgba(215, 175, 89, 0.15);
}

.hero-title,
.page-title,
.section-title,
.cta-content h2 {
    margin: 1rem 0 0;
    font-family: "Playfair Display", Georgia, serif;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.hero-title {
    font-size: clamp(3rem, 7vw, 5.6rem);
}

.page-title {
    font-size: clamp(2.6rem, 5vw, 4.5rem);
}

.section-title {
    font-size: clamp(2.1rem, 3.5vw, 3.2rem);
}

.section-title.small {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.hero-description,
.page-copy,
.section-copy,
.footer-copy,
.info-card p,
.detail-copy p,
.contact-item p,
.cta-content p {
    color: var(--muted);
    line-height: 1.75;
}

.hero-description,
.page-copy {
    font-size: 1.08rem;
    max-width: 40rem;
}

/* A centred banner centres the words inside each block, but these two are
   capped at 40rem and keep the default left margin — so the paragraph sat left
   of the heading it belongs under. Centre the block too, wherever an ancestor
   asked for centred text. */
.center .hero-description,
.center .page-copy {
    margin-inline: auto;
}

.button-row {
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.feature-row {
    gap: 1rem 1.6rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.feature-row.spacious {
    margin-top: 2.4rem;
}

.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--muted-strong);
    font-weight: 500;
}

.mini-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: var(--gold);
    background: rgba(215, 175, 89, 0.12);
}

.stats-bar {
    margin-top: 4rem;
    display: grid;
    /* The number of figures is owner-chosen, so the track count follows it
       (CmsSectionRenderer sets --stat-columns). A fixed four-column track left
       two numbers huddled in the left half of the strip with an empty right
       half, and auto-fit only moved the same problem onto the second row for
       seven or eight figures. */
    grid-template-columns: repeat(var(--stat-columns, 4), minmax(0, 1fr));
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 28px;
    background: rgba(20, 31, 51, 0.72);
    border: 1px solid var(--border);
    backdrop-filter: blur(16px);
}

.stats-bar.compact {
    margin-top: 0;
}

.stat-card {
    text-align: center;
    padding: 1rem 0.5rem;
}

.stat-value {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--gold);
}

.stat-label {
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.section {
    padding: 6rem 0;
}

.section-muted,
.page-hero-muted,
.stats-section {
    background: rgba(255, 255, 255, 0.025);
}

.page-hero {
    padding: 9rem 0 4rem;
    border-bottom: 1px solid var(--border);
}

.section-intro {
    margin-bottom: 3rem;
}

.section-intro.center {
    margin-inline: auto;
    max-width: 48rem;
}

.card-grid {
    display: grid;
    gap: 1.35rem;
}

.card-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-card,
.media-card,
.spec-card,
.form-panel,
.map-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.info-card {
    padding: 1.5rem;
}

.center-card {
    text-align: center;
}

.interactive-card {
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.interactive-card:hover {
    transform: translateY(-4px);
    border-color: rgba(215, 175, 89, 0.42);
    background: rgba(29, 43, 67, 0.98);
}

.info-card h3,
.media-card h3,
.contact-item h3,
.footer-grid h3 {
    margin: 1rem 0 0;
    font-size: 1.15rem;
}

.inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    color: var(--gold);
    font-weight: 600;
}

.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 18px;
    background: rgba(215, 175, 89, 0.12);
    color: var(--gold);
}

.icon-box.solid {
    background: linear-gradient(135deg, var(--gold-strong), var(--gold-deep));
    color: var(--bg);
}

.icon-box.subtle {
    width: 2.7rem;
    height: 2.7rem;
}

.split-grid,
.contact-grid,
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.stack-list,
.detail-stack,
.contact-list {
    display: grid;
    gap: 1rem;
}

/* Each photo card is as tall as its own content. Without this a column holding
   a single card stretched it to the full height of the text beside it, leaving
   a large empty box under a small photo. */
.stack-list {
    align-content: start;
}

.media-card {
    display: grid;
    /* The photo used to sit in a fixed 7rem x 5.6rem thumbnail slot, then in a
       third of the card — both small enough that owners thought their uploads
       had lost resolution. It now takes 44% of the card and runs its full
       height, which is about as far as it can go before the title and the
       facts beside it start wrapping awkwardly. */
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    gap: 1.15rem;
    padding: 0.9rem;
    align-items: stretch;
}

.media-card img,
.detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-card img {
    /* The photo fills the card's height, but it is also what decides that
       height. Without these bounds a wide panorama would collapse the card to a
       sliver and a tall portrait would stretch it to twice its neighbours. */
    min-height: 14rem;
    max-height: 21rem;
    border-radius: 16px;
}

.media-card-empty {
    display: grid;
    place-items: center;
    min-height: 14rem;
    border-radius: 16px;
    background: rgba(215, 175, 89, 0.08);
    color: rgba(215, 175, 89, 0.55);
}

.media-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
}

.media-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* .media-card h3 carries a 1rem top margin from the shared card heading rule,
   which pulls the vertically centred body off centre. */
.media-card-top h3 {
    margin-top: 0;
}

.spec-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    color: var(--muted);
    font-size: 0.88rem;
    margin-top: 0.45rem;
}

.count-pill,
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(215, 175, 89, 0.12);
    color: var(--gold);
    font-weight: 700;
}

.count-pill {
    padding: 0.4rem 0.8rem;
    font-size: 0.88rem;
}

.detail-stack {
    gap: 5rem;
}

.detail-grid {
    align-items: center;
}

.detail-grid.reverse .detail-media {
    order: 2;
}

.detail-grid.reverse .detail-copy {
    order: 1;
}

.detail-media {
    position: relative;
    overflow: hidden;
    min-height: 26rem;
    border-radius: 30px;
    border: 1px solid var(--border);
}

.detail-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(9, 17, 29, 0.38) 100%);
}

.detail-media-badge,
.count-badge {
    position: absolute;
    z-index: 1;
}

.detail-media-badge {
    left: 1.5rem;
    bottom: 1.5rem;
}

.count-badge {
    top: 1rem;
    right: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--gold-strong), var(--gold-deep));
    color: var(--bg);
}

.feature-grid,
.spec-grid,
.pill-cloud {
    display: grid;
    gap: 1rem;
}

.feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
}

.check-item {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--muted-strong);
}

.spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
}

.spec-card {
    padding: 1rem;
}

.spec-label {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.spec-value {
    margin-top: 0.35rem;
    font-weight: 700;
}

.pill-cloud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.5rem;
}

.feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted-strong);
}

.cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    padding: 3.2rem 2rem;
    background: linear-gradient(135deg, #b6862f 0%, #d8b566 45%, #a8771f 100%);
    color: #10192b;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin: 0 auto;
    text-align: center;
}

.cta-content h2 {
    margin-top: 0;
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.cta-content p {
    color: rgba(16, 25, 43, 0.8);
}

.cta-orb {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
}

.orb-one {
    width: 22rem;
    height: 22rem;
    top: -11rem;
    right: -8rem;
}

.orb-two {
    width: 15rem;
    height: 15rem;
    bottom: -7rem;
    left: -5rem;
}

.quick-stats {
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.quick-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--panel);
}

.quick-stat-value {
    font-weight: 700;
}

.quick-stat-label {
    font-size: 0.85rem;
    color: var(--muted);
}

.contact-grid {
    align-items: start;
}

.contact-sidebar {
    display: grid;
    gap: 1.5rem;
}

.contact-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
}

.contact-item h3 {
    margin-top: 0;
}

.contact-item p {
    margin: 0.25rem 0 0;
}

.contact-item a:hover,
.footer-list a:hover,
.footer-contact a:hover,
.footer-inline-links a:hover {
    color: var(--gold);
}

/* Wraps every line of the address in one link, so a two-line address is one
   tap target rather than two identical ones. */
.contact-address-link {
    display: block;
}

.map-card {
    overflow: hidden;
}

.map-placeholder {
    display: grid;
    place-items: center;
    gap: 0.6rem;
    min-height: 18rem;
    padding: 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(215, 175, 89, 0.08), rgba(255, 255, 255, 0.04));
    color: var(--muted);
}

.map-placeholder.is-clickable {
    transition: background 0.2s ease, color 0.2s ease;
}

.map-placeholder.is-clickable:hover {
    background: linear-gradient(135deg, rgba(215, 175, 89, 0.16), rgba(255, 255, 255, 0.06));
    color: var(--text);
}

/* The pinned location, as an OpenStreetMap frame. OSM needs no API key, which
   Google Maps embeds do. */
.map-frame {
    position: relative;
    /* An explicit box, because an iframe has no intrinsic height to grow into. */
    height: 18rem;
    background: rgba(255, 255, 255, 0.04);
}

.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-open-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    font-size: 0.92rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.map-open-link span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.map-open-link:hover {
    background: rgba(215, 175, 89, 0.08);
    color: var(--gold);
}

.form-panel {
    padding: 2rem;
}

.quote-form {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.form-heading {
    margin: 0 0 1rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.82rem;
}

/* Says which parts of the quote form a visitor can skip. */
.form-heading-note {
    margin-left: 0.55rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(173, 184, 206, 0.14);
    color: var(--muted);
    letter-spacing: 0.08em;
    font-size: 0.68rem;
}

.form-section-hint {
    margin: -0.5rem 0 1rem;
}

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

/*
 * The quote form's decoy field. Moved off screen rather than given
 * display:none or hidden, because a bot worth trapping checks for those and
 * skips the input; it does not usually check the geometry. Nothing here is
 * reachable by keyboard or announced by a screen reader - the markup also
 * carries aria-hidden and tabindex="-1".
 */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.field {
    display: grid;
    gap: 0.45rem;
}

.field-full {
    grid-column: 1 / -1;
}

.field label {
    color: var(--muted-strong);
    font-size: 0.92rem;
}

.input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    padding: 0.95rem 1rem;
    outline: none;
}

.input:focus {
    border-color: rgba(215, 175, 89, 0.58);
    box-shadow: 0 0 0 4px rgba(215, 175, 89, 0.1);
}

.input option {
    color: #0b1220;
}

.textarea {
    min-height: 8rem;
    resize: vertical;
}

.validation-message {
    color: #ffb2b2;
    font-size: 0.82rem;
}

.form-actions {
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.84rem;
}

.site-footer {
    padding: 4rem 0 2rem;
    background: rgba(6, 11, 20, 0.95);
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1.1fr;
    gap: 2rem;
}

.footer-copy {
    max-width: 22rem;
    margin-top: 1.2rem;
}

.footer-list,
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.75rem;
    color: var(--muted);
}

.footer-contact li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: start;
}

.footer-bottom {
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.86rem;
}

.footer-inline-links {
    gap: 1.4rem;
}

.section-action {
    margin-top: 2rem;
}

.section-action.center {
    display: flex;
    justify-content: center;
}

.section-copy.compact {
    margin-top: 0.75rem;
}

.icon-xs {
    width: 0.85rem;
    height: 0.85rem;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-md {
    width: 1.35rem;
    height: 1.35rem;
}

.icon-lg {
    width: 2rem;
    height: 2rem;
}

.blazor-error-boundary,
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #b32121;
    color: white;
    padding: 0.9rem 2.5rem 0.9rem 1.25rem;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .reload {
    color: white;
    text-decoration: underline;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.75rem;
}

.center-mobile {
    justify-content: center;
}

.page-hero-copy {
    margin-inline: auto;
}

.cms-success {
    display: grid;
    gap: 1rem;
}

/* Video showcase */
.video-showcase {
    display: grid;
    gap: 1.25rem;
    max-width: 960px;
    margin-inline: auto;
}

.video-frame {
    display: grid;
}

.video-tabs {
    display: flex;
    gap: 0.5rem;
}

.video-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    margin-bottom: -1px;
    border-radius: 16px 16px 0 0;
    background: rgba(215, 175, 89, 0.16);
    color: var(--gold);
    font-weight: 600;
    font-size: 0.92rem;
    border: 1px solid var(--border);
    border-bottom: none;
}

.video-panel {
    border: 1px solid var(--border);
    border-radius: 0 20px 20px 20px;
    overflow: hidden;
    background: #05080f;
    box-shadow: var(--shadow);
}

.video-player,
.video-embed iframe {
    display: block;
    width: 100%;
    border: 0;
}

.video-player {
    aspect-ratio: 16 / 9;
    background: #000;
    object-fit: contain;
}

.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    height: 100%;
}

.video-link-card {
    display: grid;
    place-items: center;
    gap: 1rem;
    aspect-ratio: 16 / 9;
    text-align: center;
    color: var(--text);
    background-size: cover;
    background-position: center;
    position: relative;
}

.video-link-card.has-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 15, 0.55);
}

.video-link-card > * {
    position: relative;
    z-index: 1;
}

.video-play-badge {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--bg);
}

.video-link-text {
    display: grid;
    gap: 0.2rem;
}

.video-link-text small {
    color: var(--muted);
}

.video-placeholder {
    display: grid;
    place-items: center;
    gap: 0.75rem;
    aspect-ratio: 16 / 9;
    color: var(--muted);
    text-align: center;
    padding: 2rem;
}

.video-caption {
    color: var(--muted);
    text-align: center;
    font-size: 0.95rem;
    margin: 0;
}

/* Admin media previews */
.admin-media-preview {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #05080f;
    margin-top: 0.5rem;
}

.admin-help {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0 0 0.75rem;
}

/* CMS clarity helpers */
.cms-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1rem;
}

.cms-save-state {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.cms-save-state::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: currentColor;
}

.cms-save-state.is-clean { color: #4ade80; }
.cms-save-state.is-dirty { color: var(--gold); }

.cms-hint {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.cms-advanced {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.4rem 1rem;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.02);
}

.cms-advanced > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--muted-strong);
    padding: 0.5rem 0;
}

.cms-advanced[open] {
    padding-bottom: 1rem;
}

.cms-danger > summary {
    color: #ffb2b2;
}

.cms-preview-wrap {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg);
}

.cms-preview-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    padding: 0.6rem 1rem;
    background: rgba(215, 175, 89, 0.12);
    color: var(--gold);
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.cms-preview-label .cms-hint {
    display: inline;
    margin-top: 0;
    font-weight: 400;
}

.cms-preview-frame {
    /* View-only: pointer-events:none keeps the preview non-interactive.
       No max-height/overflow here — a clipped scroll region can't be scrolled
       while pointer-events is none, so tall sections would be cut off. */
    pointer-events: none;
    border-top: 0;
}

.cms-success h3 {
    margin: 0;
    font-size: 1.4rem;
}

.admin-hero {
    padding-bottom: 3rem;
}

.admin-status {
    margin-top: 1rem;
    color: var(--gold);
    font-weight: 600;
}

.admin-workspace-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.03);
}

.admin-workspace-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.admin-workspace-link {
    padding: 0.75rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--muted-strong);
    font-weight: 600;
    transition: all 0.2s ease;
}

.admin-workspace-link:hover,
.admin-workspace-link.active {
    color: var(--gold);
    border-color: rgba(215, 175, 89, 0.35);
    background: rgba(215, 175, 89, 0.1);
}

.admin-builder-section {
    padding-top: 3rem;
}

.admin-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.admin-sidebar,
.admin-main {
    display: grid;
    gap: 1.5rem;
}

.admin-card,
.admin-nested-card,
.admin-item-editor {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: rgba(17, 26, 43, 0.9);
    box-shadow: var(--shadow);
}

.admin-card,
.admin-nested-card {
    padding: 1.4rem;
}

.admin-item-editor {
    padding: 1rem;
}

.admin-card h2,
.admin-nested-card h3,
.admin-sub-editor h4 {
    margin: 0;
}

.admin-card-header,
.admin-inline-actions,
.admin-item-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-card-header {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.admin-inline-actions {
    flex-wrap: wrap;
}

.admin-kind-select {
    min-width: 180px;
}

.admin-page-list,
.admin-section-list,
.admin-nested-grid,
.admin-sub-editor {
    display: grid;
    gap: 1rem;
}

.admin-page-item,
.admin-section-item {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
}

.admin-page-item {
    display: grid;
    gap: 0.3rem;
    padding: 1rem;
    text-align: left;
}

.admin-page-item span {
    color: var(--muted);
    font-size: 0.86rem;
}

.admin-page-item.selected,
.admin-section-item.selected {
    border-color: rgba(215, 175, 89, 0.45);
    background: rgba(215, 175, 89, 0.09);
}

.admin-section-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
}

.admin-section-select {
    flex: 1;
    display: grid;
    gap: 0.25rem;
    text-align: left;
    background: transparent;
    color: inherit;
    border: 0;
}

.admin-section-select span,
.admin-kind-pill {
    color: var(--muted);
    font-size: 0.82rem;
}

.admin-kind-pill {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(215, 175, 89, 0.12);
    color: var(--gold);
}

.admin-mini-btn {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
}

.admin-mini-btn.danger {
    color: #ffb2b2;
}

.admin-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* A field standing on its own after a two-column row — the logo picker in
   Business details — otherwise butts straight up against the hint above it. */
.admin-two-col + .field {
    margin-top: 1.25rem;
}

.admin-checks {
    display: grid;
    gap: 0.75rem;
    align-content: center;
}

.admin-checks label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--muted-strong);
}

.admin-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.admin-pair-row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
}

.admin-sub-editor {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.admin-dashboard-grid,
.admin-summary-grid {
    display: grid;
    gap: 1.5rem;
}

.admin-dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.5rem;
}

.admin-panel-card {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.admin-span-full {
    grid-column: 1 / -1;
}

.admin-panel-card-featured {
    background:
        radial-gradient(circle at top right, rgba(215, 175, 89, 0.2), transparent 34%),
        rgba(17, 26, 43, 0.95);
}

.admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-panel-eyebrow,
.admin-summary-label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: var(--gold);
}

.admin-panel-card h2,
.admin-summary-card strong {
    margin: 0;
}

.admin-panel-card p,
.admin-alert-card p,
.admin-traffic-row small,
.admin-footprint-row small,
.admin-toggle-row small {
    margin: 0;
    color: var(--muted);
}

.admin-stat-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.admin-stat-strip div,
.admin-summary-card {
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
}

.admin-stat-strip strong,
.admin-summary-card strong {
    display: block;
    font-size: 1.9rem;
    color: var(--text);
}

.admin-stat-strip span,
.admin-summary-card span {
    color: var(--muted);
}

.admin-bullet-list,
.admin-alert-stack,
.admin-toggle-list,
.admin-traffic-list,
.admin-footprint-list {
    display: grid;
    gap: 0.9rem;
}

.admin-bullet-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted-strong);
}

.admin-bullet-list li {
    line-height: 1.55;
}

.admin-alert-card,
.admin-traffic-row,
.admin-footprint-row,
.admin-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
}

.admin-alert-card strong,
.admin-traffic-row strong,
.admin-footprint-row strong,
.admin-toggle-row strong {
    display: block;
    margin-bottom: 0.2rem;
}

.admin-alert-meta,
.admin-traffic-metric span,
.admin-footprint-row span {
    color: var(--gold);
    white-space: nowrap;
    font-size: 0.9rem;
}

.admin-empty-state {
    padding: 1.25rem;
    border-radius: 18px;
    border: 1px dashed rgba(215, 175, 89, 0.35);
    background: rgba(255, 255, 255, 0.02);
}

.admin-empty-state strong {
    display: block;
    margin-bottom: 0.4rem;
}

.admin-traffic-metric {
    text-align: right;
}

.admin-toggle-row input {
    width: 1.1rem;
    height: 1.1rem;
}

.admin-login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.admin-login-card {
    max-width: 34rem;
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(23, 35, 58, 0.94), rgba(15, 23, 39, 0.98));
    box-shadow: var(--shadow);
}

.admin-login-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.admin-auth-message {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    font-weight: 500;
}

.admin-auth-error {
    background: rgba(176, 52, 52, 0.16);
    border: 1px solid rgba(255, 129, 129, 0.24);
    color: #ffd0d0;
}

.admin-auth-success {
    background: rgba(82, 148, 90, 0.16);
    border: 1px solid rgba(123, 214, 135, 0.22);
    color: #d9ffe0;
}

/* Overflow guards — a long, unbroken string (a pasted URL, a 200-character
   email, a message with no spaces) must not widen its track. These are the
   flex/grid children whose default min-width:auto otherwise lets content
   push the layout open. */
.admin-section-select,
.admin-card-header > h2,
.admin-card-header > h3,
.admin-card-header > h4,
.admin-card-header > strong,
.admin-panel-header > span,
.admin-alert-card > div,
.admin-modal-header > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-page-item strong,
.admin-page-item span,
.admin-section-select strong,
.admin-section-select span,
.admin-panel-card p,
.admin-alert-card p,
.admin-empty-state p,
.admin-summary-card strong,
.read-more-plain,
.read-more-body {
    overflow-wrap: anywhere;
}

.admin-card-header {
    flex-wrap: wrap;
}

.admin-kind-select {
    min-width: min(180px, 100%);
}

/* Focus ring — previously only .input had a visible focus style. */
.button:focus-visible,
.admin-mini-btn:focus-visible,
.admin-page-item:focus-visible,
.admin-section-select:focus-visible,
.admin-workspace-link:focus-visible,
.admin-modal-close:focus-visible,
.read-more-toggle:focus-visible,
.cms-advanced > summary:focus-visible {
    outline: 2px solid rgba(215, 175, 89, 0.58);
    outline-offset: 2px;
}

/* Read more — collapsed long text with an inline expand toggle */
.read-more-body {
    display: inline;
}

.read-more-empty {
    color: var(--muted);
    font-style: italic;
}

.read-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.4rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gold);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.read-more-toggle:hover {
    color: var(--gold-strong);
}

.read-more-toggle::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-bottom: 0.15rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.read-more.is-expanded .read-more-toggle::after {
    transform: rotate(-135deg);
    margin-bottom: -0.1rem;
}

/* Line clamps for fixed-height contexts (card previews, list rows) */
.admin-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--admin-clamp-lines, 3);
    line-clamp: var(--admin-clamp-lines, 3);
    overflow: hidden;
    overflow-wrap: anywhere;
}

.admin-clamp-1 { --admin-clamp-lines: 1; }
.admin-clamp-2 { --admin-clamp-lines: 2; }
.admin-clamp-3 { --admin-clamp-lines: 3; }

.admin-truncate {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Admin modal / dialog.
   Sits above .site-header and #blazor-error-ui, which are both z-index: 1000.
   Scroll lock toggles .admin-modal-open on <html> via JS interop. */
html.admin-modal-open {
    overflow: hidden;
}

.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(5, 8, 15, 0.72);
    backdrop-filter: blur(6px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admin-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(46rem, 100%);
    max-height: calc(100dvh - 3rem);
    margin: auto;
    border: 1px solid var(--border);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(215, 175, 89, 0.14), transparent 38%),
        rgba(17, 26, 43, 0.98);
    box-shadow: var(--shadow);
    color: var(--text);
    animation: admin-modal-in 0.18s ease-out;
}

.admin-modal-narrow {
    width: min(32rem, 100%);
}

@keyframes admin-modal-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.admin-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.4rem 1rem;
    border-bottom: 1px solid var(--border);
}

.admin-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.admin-modal-eyebrow {
    display: block;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: var(--gold);
}

.admin-modal-body {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-height: 0;
    padding: 1.4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admin-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.4rem 1.4rem;
    border-top: 1px solid var(--border);
}

.admin-modal-footer-meta {
    margin-right: auto;
    color: var(--muted);
    font-size: 0.84rem;
}

.admin-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted-strong);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.admin-modal-close:hover {
    color: var(--gold);
    border-color: rgba(215, 175, 89, 0.35);
    background: rgba(215, 175, 89, 0.1);
}

.cms-danger-button {
    border-color: rgba(255, 129, 129, 0.35);
    background: rgba(176, 52, 52, 0.18);
    color: #ffd0d0;
}

.cms-danger-button:hover {
    border-color: rgba(255, 129, 129, 0.6);
    background: rgba(176, 52, 52, 0.3);
    color: #fff;
}

/* Definition list — structured quote data inside the modal */
.admin-deflist {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
}

.admin-deflist dt,
.admin-deflist dd {
    min-width: 0;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
    overflow-wrap: anywhere;
}

.admin-deflist dt {
    grid-column: 1;
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1.6;
}

.admin-deflist dd {
    grid-column: 2;
    margin: 0;
    color: var(--text);
    font-weight: 500;
    line-height: 1.6;
}

.admin-deflist dd a {
    color: var(--gold);
}

.admin-modal-note-label {
    margin: 0.4rem 0 0;
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.admin-modal-note {
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted-strong);
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Notification read / unread states */
.admin-alert-card {
    align-items: flex-start;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.admin-alert-card.is-clickable {
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.admin-alert-card.is-clickable:hover {
    border-color: rgba(215, 175, 89, 0.42);
    background: rgba(215, 175, 89, 0.07);
}

.admin-alert-body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-alert-card small {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.84rem;
}

.admin-alert-lead {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.admin-alert-dot {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.5rem;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 0 5px rgba(215, 175, 89, 0.15);
}

.admin-alert-card.is-unread {
    border-color: rgba(215, 175, 89, 0.35);
    background: rgba(215, 175, 89, 0.09);
}

.admin-alert-card.is-read {
    background: rgba(255, 255, 255, 0.02);
}

.admin-alert-card.is-read strong {
    font-weight: 500;
    color: var(--muted-strong);
}

.admin-alert-card.is-read .admin-alert-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--border);
}

.admin-unread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--bg);
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.admin-toolbar-spacer {
    margin-left: auto;
}

/* CMS editor controls — icon picker, link picker, photo field */
.cms-hint-warn {
    color: #ffb2b2;
}

/* The control sits inside its label, so reset the label's own type scale and
   let .cms-field-text carry the label styling. */
.field > label.cms-field {
    display: grid;
    gap: 0.35rem;
    font-size: 1rem;
}

.cms-field-text {
    color: var(--muted-strong);
    font-size: 0.92rem;
}

.cms-icon-picker {
    display: grid;
    gap: 0.6rem;
}

.cms-icon-current {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    justify-self: start;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted-strong);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.cms-icon-current:hover {
    border-color: rgba(215, 175, 89, 0.4);
    color: var(--gold);
}

.cms-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
}

.cms-icon-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--muted-strong);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cms-icon-option:hover {
    color: var(--gold);
    background: rgba(215, 175, 89, 0.1);
}

.cms-icon-option.is-active {
    color: var(--gold);
    border-color: rgba(215, 175, 89, 0.45);
    background: rgba(215, 175, 89, 0.14);
}

.cms-link-picker {
    display: grid;
    gap: 0.5rem;
}

.cms-image-field {
    display: grid;
    gap: 0.6rem;
}

.cms-image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--muted);
    font-size: 0.88rem;
}

.cms-image-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

/* The file input is visually replaced by its own label so it can be styled
   like every other button in the admin area. */
.cms-upload-button {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.cms-upload-button input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Section list on the page screen */
.cms-section-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
}

.cms-section-row.is-hidden {
    opacity: 0.55;
}

/* Highlights the page the owner just created so it is obvious where it landed
   in the menu list. */
.cms-section-row.is-new,
.cms-page-card.is-new {
    border-color: rgba(215, 175, 89, 0.55);
    background: rgba(215, 175, 89, 0.1);
}

.cms-section-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
    border: 1px solid rgba(215, 175, 89, 0.28);
    background: rgba(215, 175, 89, 0.1);
    color: var(--gold);
}

.cms-section-main {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.cms-section-main strong {
    overflow-wrap: anywhere;
}

.cms-section-kind {
    color: var(--muted);
    font-size: 0.82rem;
}

.cms-page-card {
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.cms-page-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    color: var(--muted);
    font-size: 0.86rem;
}

.cms-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    color: var(--muted);
    font-size: 0.86rem;
}

.cms-breadcrumb a {
    color: var(--gold);
}

/* Leaves room so the sticky publish bar never covers the last control. */
.admin-builder-section {
    padding-bottom: 7rem;
}

.cms-sticky-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.9rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(11, 18, 32, 0.96);
    backdrop-filter: blur(8px);
}

.cms-item-card {
    display: grid;
    gap: 0.9rem;
    padding: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
}

.cms-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cms-item-head strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cms-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cms-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted-strong);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.cms-choice.is-active {
    color: var(--gold);
    border-color: rgba(215, 175, 89, 0.4);
    background: rgba(215, 175, 89, 0.12);
}

.cms-kind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: 0.75rem;
}

.cms-kind-option {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted-strong);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cms-kind-option:hover {
    border-color: rgba(215, 175, 89, 0.4);
    background: rgba(215, 175, 89, 0.08);
}

.cms-kind-option strong {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
}

.cms-kind-option span {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Segmented control — Simple / Advanced mode */
.cms-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
}

.cms-mode-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted-strong);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.cms-mode-option:hover {
    color: var(--gold);
}

.cms-mode-option.is-active {
    color: var(--gold);
    border-color: rgba(215, 175, 89, 0.35);
    background: rgba(215, 175, 89, 0.1);
}

/* Public-site overflow guards. CMS copy is owner-supplied and can contain a
   long URL or an unspaced string; none of these should widen the page. */
.section-copy,
.hero-description,
.page-copy,
.info-card h3,
.info-card p,
.detail-copy h3,
.detail-copy p,
.media-card-top h3,
.spec-value,
.spec-label,
.stat-value,
.stat-label,
.quick-stat-label,
.contact-item p,
.footer-copy,
.feature-chip span,
.feature-pill span,
.check-item span {
    overflow-wrap: anywhere;
}

.media-card-body,
.detail-copy,
.contact-item > div,
.quick-stat > div {
    min-width: 0;
}

/* WhatsApp call-to-action */
.whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(37, 211, 102, 0.38);
    background: rgba(37, 211, 102, 0.12);
    color: #7ff0ab;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.whatsapp-link:hover {
    background: rgba(37, 211, 102, 0.2);
    border-color: rgba(37, 211, 102, 0.55);
    color: #b6ffd2;
}

.whatsapp-float {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    /* White on green: the brand mark is a solid silhouette now, and the old
       near-black ink read as a smudge against the gradient. */
    color: #fff;
    box-shadow: 0 14px 34px rgba(18, 140, 126, 0.42);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 18px 42px rgba(18, 140, 126, 0.55);
}

.whatsapp-float:focus-visible {
    outline: 2px solid #7ff0ab;
    outline-offset: 3px;
}

/* The brand mark is a solid silhouette, so it reads smaller than the outline
   icons at the same box size. */
.whatsapp-float svg {
    width: 1.8rem;
    height: 1.8rem;
}

/* In the footer every other contact icon is gold; WhatsApp keeps its own
   colour so the line is recognisable at a glance. */
.whatsapp-glyph {
    color: #25d366;
}

/* ------------------------------------------------- admin: location picker */

.cms-map-search {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.4rem;
}

.cms-map-search .input {
    flex: 1;
    min-width: 0;
}

.cms-map-results {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.cms-map-result {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.cms-map-result:hover {
    background: rgba(215, 175, 89, 0.12);
}

.cms-map-result span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cms-map-picker {
    height: 20rem;
    margin-top: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    /* Leaflet stacks its own panes; keep them under the admin save bar. */
    z-index: 0;
}

/* Hidden rather than removed: Leaflet owns the map element and everything
   inside it, so letting Blazor drop it from the tree would destroy a map that
   may yet load. */
.cms-map-shell.is-unavailable {
    display: none;
}

.cms-map-link-row {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.cms-map-link-row .field {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.cms-map-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.cms-map-summary > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.cms-map-summary-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .admin-modal {
        animation: none;
    }

    .whatsapp-float:hover {
        transform: none;
    }

    .button:hover,
    .interactive-card:hover {
        transform: none;
    }

    .read-more-toggle::after {
        transition: none;
    }
}

@media (max-width: 1100px) {
    .card-grid-four,
    .footer-grid,
    .admin-dashboard-grid,
    .admin-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The editor used to become a 50/50 grid here, squeezing the working
       column to ~480px. Stack instead. */
    .admin-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-grid,
    .split-grid,
    .contact-grid,
    .detail-grid,
    .detail-grid.reverse {
        grid-template-columns: 1fr;
    }

    .detail-grid.reverse .detail-media,
    .detail-grid.reverse .detail-copy {
        order: initial;
    }
}

/* The header carries a logo, the company name, the menu, a phone number, a
   WhatsApp pill and a quote button. Measured with the real content, the links
   start running into the buttons at about 1150px — well above the 900px this
   used to switch at — so the compact menu takes over there instead. */
@media (max-width: 1150px) {
    .desktop-nav,
    .desktop-actions {
        display: none;
    }

    .menu-button {
        display: inline-flex;
        flex: 0 0 auto;
    }

    /* The drop-down hangs off the brand and the menu button, so its edges line
       up with them rather than with a gutter the header no longer uses. */
    .mobile-nav-panel {
        right: clamp(1rem, 2.4vw, 3rem);
        left: clamp(1rem, 2.4vw, 3rem);
    }
}

@media (max-width: 900px) {
    /* A small screen has room for the mark or the name, not both at full size.
       The mark shrinks a little and the name ellipsises, which keeps the menu
       button on screen and above the 44px touch target. */
    .brand-mark.brand-mark-image {
        height: 3rem;
        min-width: 0;
    }

    .brand-logo {
        max-width: 7.5rem;
    }

    .stats-bar,
    .card-grid-three,
    .card-grid-four,
    .feature-grid,
    .spec-grid,
    .pill-cloud,
    .form-grid,
    .footer-grid,
    .admin-dashboard-grid,
    .admin-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Two form fields inside a half-width column is ~160px each on a tablet.
       Give editor rows the full width instead. */
    .admin-two-col,
    .admin-list-row,
    .admin-pair-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-list-row .admin-item-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 700px) {
    .hero {
        min-height: auto;
    }

    .hero-content {
        min-height: auto;
        padding-block: 3.5rem 2rem;
    }

    .page-hero {
        padding-top: 7.5rem;
    }

    .stats-bar,
    .card-grid-three,
    .card-grid-four,
    .feature-grid,
    .spec-grid,
    .pill-cloud,
    .form-grid,
    .footer-grid,
    .admin-layout,
    .admin-dashboard-grid,
    .admin-summary-grid,
    .admin-two-col,
    .admin-list-row,
    .admin-pair-row {
        grid-template-columns: 1fr;
    }

    .media-card {
        grid-template-columns: 1fr;
    }

    .media-card img,
    .media-card-empty {
        height: 16rem;
        min-height: 0;
        max-height: none;
    }

    /* A text box and its button side by side leave neither enough room. */
    .cms-map-search,
    .cms-map-link-row {
        flex-direction: column;
        align-items: stretch;
    }

    .cms-map-picker {
        height: 16rem;
    }

    .map-frame {
        height: 15rem;
    }

    .detail-media {
        min-height: 18rem;
    }

    .form-panel {
        padding: 1.4rem;
    }

    .button-row.center-mobile {
        justify-content: center;
    }

    .admin-section-item,
    .admin-card-header,
    .admin-item-actions {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .admin-workspace-nav,
    .admin-alert-card,
    .admin-traffic-row,
    .admin-footprint-row,
    .admin-toggle-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Full-screen modal on phones */
    .admin-modal-backdrop {
        padding: 0;
    }

    .admin-modal {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .admin-deflist {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-deflist dt,
    .admin-deflist dd {
        grid-column: 1;
    }

    .admin-deflist dt {
        padding-bottom: 0.1rem;
        border-bottom: 0;
    }

    .admin-deflist dd {
        padding-top: 0.1rem;
    }
}