:root {
    color-scheme: light;
    --ink: #15313a;
    --muted: #71858b;
    --teal: #278da2;
    --teal-dark: #126276;
    --sky: #e8f6f8;
    --line: #dce7e9;
    --surface: #fff;
    --background: #f3f7f8;
}

* { box-sizing: border-box; }
.statistics-chart { margin: 24px 0; }
.statistics-bar-row { display: grid; grid-template-columns: minmax(140px, 2fr) minmax(80px, 3fr) 65px; gap: 12px; align-items: center; margin: 10px 0; font-size: 13px; break-inside: avoid; }
.statistics-bar-row > span { overflow-wrap: anywhere; }
.statistics-bar-track { background: #e4eaf2; height: 18px; border: 1px solid #cad3df; }
.statistics-bar { display: block; height: 100%; background: #2364a8; border: 1px solid #164575; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.statistics-table-wrap { overflow-x: auto; margin-top: 24px; }
.statistics-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.statistics-table th, .statistics-table td { border: 1px solid #b7c3d2; padding: 8px; text-align: right; }
.statistics-table th:first-child, .statistics-table td:first-child { text-align: left; }
.statistics-table thead, .statistics-table tfoot { background: #e9eff6; font-weight: 700; }
.statistics-table tbody tr:nth-child(even) { background: #f5f8fc; }
.statistics-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.change-data { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; padding: 12px; background: #f3f7fb; }
@media (max-width: 600px) {
    .statistics-bar-row { grid-template-columns: minmax(0, 1fr) 60px; gap: 6px; }
    .statistics-bar-row > span { grid-column: 1 / -1; }
    .topbar { flex-wrap: wrap; }
}
@media print {
    @page { size: A4 landscape; margin: 12mm; }
    body { background: white !important; color: black !important; }
    .shell.statistics-page { max-width: none; width: 100%; margin: 0; padding: 0; }
    body:has(.statistics-page) .topbar, body:has(.statistics-page) .footer,
    .statistics-filters, .statistics-actions { display: none !important; }
    .panel.statistics-result { box-shadow: none !important; border: 0; padding: 0; }
    .statistics-table-wrap { overflow: visible; }
    .statistics-table { font-size: 9pt; table-layout: fixed; overflow-wrap: anywhere; }
    .statistics-table th, .statistics-table td { padding: 4px; }
    .statistics-table tr { break-inside: avoid; }
    .statistics-table thead { display: table-header-group; }
    .statistics-table tfoot { display: table-row-group; }
}

.reception-logout { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; margin: 0; }
.reception-logout .button { background: #fff; box-shadow: 0 4px 18px rgba(21, 49, 58, .18); }
.reception-main { padding-bottom: 100px; }
.reception-calendar { margin: 24px 0; }
.reception-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 780px; }
.reception-weekday { text-align: center; color: var(--muted); font-size: 12px; padding: 8px 0; }
.reception-calendar-day { min-width: 0; min-height: 65px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 9px; text-decoration: none; background: #fff; color: var(--ink); }
.reception-calendar-day small { font-size: 11px; }
.reception-calendar-day.has-bookings { background: #e8f6f8; border-color: #92cbd5; }
.reception-calendar-day.past { background: #f0f2f5; color: #727d8e; }
.reception-calendar-day[aria-current="date"] { outline: 3px solid var(--teal-dark); outline-offset: -3px; }
.reception-calendar-day[href]:hover, .reception-calendar-day[href]:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; }
@media (max-width: 520px) {
    .reception-calendar-grid { gap: 4px; }
    .reception-calendar-day { min-height: 54px; }
    .reception-count-label { display: none; }
}

.public-weddings { margin: 24px 0; }
.public-wedding-months { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.public-wedding-month { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; min-width: 0; }
.public-wedding-month h3 { font-size: 15px; margin: 0 0 14px; }
.wedding-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; text-align: center; }
.wedding-weekday { color: #52647e; font-size: 11px; padding-bottom: 5px; }
.wedding-day { align-items: center; border-radius: 7px; display: flex; font-size: 12px; justify-content: center; min-height: 32px; position: relative; }
.wedding-day.free, .day-key.free { background: #e1f4e8; color: #1e6240; }
.wedding-day.booked, .day-key.booked { background: #fbe1df; color: #94251e; font-weight: 700; }
.wedding-day.past, .wedding-day.unavailable, .day-key.unavailable { background: #f0f2f5; color: #727d8e; }
.day-dot { background: currentColor; border-radius: 50%; bottom: 3px; height: 3px; position: absolute; width: 3px; }
.wedding-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; margin: 16px 0; }
.wedding-legend > span { align-items: center; display: flex; gap: 7px; }
.day-key { border: 1px solid currentColor; border-radius: 4px; display: inline-block; height: 14px; width: 14px; }
.public-wedding-month summary { cursor: pointer; font-weight: 600; }
.public-wedding-list { list-style: none; margin: 12px 0 0; padding: 0; }
.public-wedding-list li { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; padding: 8px 0; }
.public-wedding-list strong { color: #923a32; }

body {
    margin: 0;
    background: var(--background);
    color: var(--ink);
    font: 15px/1.5 "Segoe UI", Arial, sans-serif;
}

a { color: inherit; }

.topbar {
    align-items: center;
    background: linear-gradient(110deg, #1a252a, #34444a);
    color: white;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    min-height: 68px;
    padding: 0 max(24px, calc((100vw - 1180px) / 2));
}

.brand {
    align-items: center;
    color: white;
    display: inline-flex;
    font-size: 25px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: -.06em;
    text-decoration: none;
}

.brand-mark { color: #52bfd0; font-size: 25px; }
.topbar-title { color: #8bd9e3; font-size: 14px; }
.topbar-link { color: #c5d8dc; font-size: 13px; margin-left: auto; text-decoration: none; }
.topbar-link:hover { color: white; }

.shell { margin: 0 auto; max-width: 1180px; padding: 36px 24px 64px; }
.shell.narrow { max-width: 620px; padding-top: 64px; }
.welcome { background: linear-gradient(120deg, #e5f6f8, #fff 72%); border: 1px solid #d7edf0; border-radius: 18px; margin-bottom: 28px; padding: 32px 36px; }
.welcome h1, .page-heading h1 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.035em; margin: 4px 0 8px; }
.welcome p:last-child, .page-heading p { color: var(--muted); margin: 0; max-width: 760px; }
.eyebrow { color: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: .1em; margin: 0; text-transform: uppercase; }

.booking-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 270px; }
.booking-main, .panel, .booking-aside { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 20px #17333d08; }
.booking-main { padding: 26px; }
.booking-aside { padding: 24px; }
.booking-aside h2 { font-size: 19px; margin: 10px 0; }
.aside-icon { align-items: center; background: var(--sky); border-radius: 12px; color: var(--teal-dark); display: flex; font-size: 25px; height: 46px; justify-content: center; width: 46px; }
.booking-aside ol { color: #51676d; padding-left: 19px; }
.booking-aside li { margin: 10px 0; padding-left: 3px; }
.muted { color: var(--muted); font-size: 13px; }

.step-heading { align-items: center; display: flex; gap: 13px; margin-bottom: 17px; }
.step-heading h2 { font-size: 19px; margin: 0; }
.step-heading p { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.step-number { align-items: center; background: var(--teal-dark); border-radius: 50%; color: white; display: flex; flex: 0 0 32px; font-size: 14px; font-weight: 700; height: 32px; justify-content: center; }
.step-spaced { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }

.service-grid { display: grid; gap: 10px; }
.service-card { align-items: center; border: 1px solid var(--line); border-radius: 11px; display: flex; gap: 13px; min-height: 72px; padding: 12px 15px; text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
.service-card:hover { border-color: #8acbd5; transform: translateY(-1px); }
.service-card.active { background: #f0fafb; border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.service-icon { align-items: center; background: #e4f4f6; border-radius: 9px; color: var(--teal-dark); display: flex; font-size: 24px; height: 40px; justify-content: center; width: 40px; }
.service-copy { display: grid; gap: 2px; }
.service-copy strong { font-size: 15px; }
.service-copy small { color: var(--muted); font-size: 12px; }
.service-info { background: #f5f8fc; border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; padding: 12px 15px; }
.service-info summary { color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.service-info-text { font-size: 14px; line-height: 1.6; margin-top: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.service-arrow { color: var(--teal); font-size: 20px; margin-left: auto; }

.date-picker { align-items: end; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 17px 45px; }
.date-picker label { color: #53696e; font-size: 13px; width: 100%; }
.date-picker input { max-width: 210px; }
input, select, textarea { background: #fff; border: 1px solid #cbdadd; border-radius: 8px; color: var(--ink); font: inherit; min-height: 42px; padding: 9px 11px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px #278da21c; outline: none; }
input[type="checkbox"] { accent-color: var(--teal-dark); min-height: 0; width: 17px; }

.button { align-items: center; border: 0; border-radius: 8px; cursor: pointer; display: inline-flex; font: inherit; font-size: 14px; font-weight: 700; justify-content: center; min-height: 42px; padding: 9px 16px; text-decoration: none; }
.button.primary { background: var(--teal-dark); color: white; }
.button.primary:hover { background: #0c5264; }
.button.secondary { background: #e9f3f4; color: var(--teal-dark); }
.button.secondary:hover { background: #dceef0; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-left: 45px; }
.slot-chip { border: 1px solid #b7dce1; border-radius: 8px; color: var(--teal-dark); font-weight: 700; min-width: 78px; padding: 9px 13px; text-align: center; text-decoration: none; }
.slot-chip:hover, .slot-chip.active { background: var(--teal-dark); border-color: var(--teal-dark); color: white; }
.empty-state { background: #f6f9fa; border: 1px dashed #c9d9dc; border-radius: 9px; color: var(--muted); padding: 18px; }

.panel { padding: 28px; }
.customer-form { margin-top: 24px; }
.customer-form > p { color: #62767b; margin: 0 0 18px 45px; }
.form-stack { display: grid; gap: 15px; }
.form-stack label { color: #405a60; display: grid; font-size: 13px; font-weight: 600; gap: 6px; }
.form-pair { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.notice { border-radius: 9px; margin: 15px 0; padding: 12px 15px; }
.notice-success { background: #e6f6ed; color: #226840; }
.notice-error { background: #fff0ed; color: #9a372c; }
.confirmation { text-align: center; }
.confirmation-mark { align-items: center; background: #e4f5eb; border-radius: 50%; color: #21804b; display: flex; font-size: 28px; height: 58px; justify-content: center; margin: 0 auto 16px; width: 58px; }
.confirmation h1 { font-size: 28px; margin: 5px 0; }
.confirmation > p:not(.eyebrow) { color: var(--muted); }
.booking-summary { background: #f5f9fa; border-radius: 10px; display: grid; gap: 9px 20px; grid-template-columns: 1fr 1fr; margin: 22px 0; padding: 17px; text-align: left; }
.booking-summary span { color: var(--muted); }
.footer { background: #273338; color: #cfdbde; font-size: 12px; padding: 17px 24px; text-align: center; }

.page-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 24px; }
.admin-grid { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.6fr); }
.admin-grid .panel { min-width: 0; }
.panel h2 { font-size: 20px; margin: 0 0 16px; }
.panel h3 { font-size: 16px; margin: 24px 0 12px; }
.service-row { align-items: center; border: 1px solid var(--line); border-radius: 8px; display: flex; justify-content: space-between; margin: 7px 0; padding: 10px 12px; text-decoration: none; }
.service-row small { color: var(--muted); }
.service-row.selected { background: var(--sky); border-color: #8acbd5; }
.compact { gap: 11px; }
.schedule-panel hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.schedule-list { display: grid; gap: 7px; margin-top: 14px; }
.schedule-item { align-items: center; background: #f6f9fa; border-radius: 8px; display: flex; justify-content: space-between; padding: 9px 11px; }
.schedule-item span { font-size: 13px; }
.schedule-item small { color: var(--muted); display: block; font-size: 11px; }
.icon-button { background: transparent; border: 0; color: #9b4b48; cursor: pointer; font-size: 21px; }
.checkbox-label { align-items: center; display: flex !important; gap: 9px !important; }

.admin-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.catalog-branch { border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; min-width: 0; }
.catalog-branch > summary { background: var(--sky); border-radius: 10px; cursor: pointer; font-weight: 700; padding: 12px; overflow-wrap: anywhere; }
.catalog-branch > summary:focus-visible { outline: 3px solid var(--teal); }
.catalog-children { padding: 4px 10px 10px; }
.service-catalog .service-card { margin-top: 8px; }
.catalog-row { align-items: end; border-bottom: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 62px 58px; padding: 12px 0; }
.catalog-row > a { align-self: center; font-size: 13px; overflow-wrap: anywhere; }
.catalog-row label { color: var(--muted); font-size: 12px; }
.catalog-row input { min-height: 38px; padding: 6px; }
.catalog-row .button { grid-column: 2 / 4; min-height: 34px; padding: 5px 10px; }
.catalog-row.selected { background: #f0fafb; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }
.admin-nav a { color: var(--teal-dark); font-weight: 600; }
.site-panel { max-width: 950px; margin: 0 auto; }
.site-panel > p { color: var(--muted); }
.site-hours { display: grid; gap: 14px; }
.site-hours fieldset { border: 1px solid var(--line); border-radius: 10px; min-width: 0; padding: 14px; }
.site-hours legend { color: var(--teal-dark); font-weight: 700; padding: 0 8px; }
.site-logo { display: block; max-width: 180px; max-height: 100px; object-fit: contain; }
.site-public { background: white; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 24px; padding: 20px; overflow-wrap: anywhere; }
.site-public h2 { font-size: 20px; margin: 0 0 8px; }
.site-public p { margin: 4px 0; }
.site-public summary { color: var(--teal-dark); cursor: pointer; font-weight: 600; margin-top: 12px; }
.onsite-service { background: #f6f9fa; }
.wedding-choice { border: 1px solid var(--line); border-radius: 12px; min-width: 0; padding: 20px; }
.wedding-choice legend { color: var(--teal-dark); font-weight: 700; }
.wedding-choice select { max-width: 100%; }
.wedding-requests { margin-top: 24px; }
.wedding-slot-row { align-items: center; background: var(--background); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 14px; padding: 15px; }
.wedding-slot-row input[type="number"] { max-width: 90px; }
.editor-form { padding: 20px; }
.editor-form fieldset { border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.editor-form .checkbox-label { margin: 8px 0; overflow-wrap: anywhere; }
.daily-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.daily-booking { margin-bottom: 15px; overflow-wrap: anywhere; }
.daily-booking h3 { margin-top: 0; }
.status-form { align-items: end; display: flex; flex-wrap: wrap; gap: 12px; }

.homepage {
    --ink: #172944;
    --muted: #52647e;
    --teal: #1760c4;
    --teal-dark: #1054b2;
    --sky: #eff5ff;
    --line: #e0e8f3;
    --background: #f8faff;
    background: linear-gradient(135deg, #eef4fc 0, #fff 55%, #f5f8fd 100%);
}
.homepage :is(a, button, summary):focus-visible { outline: 3px solid #1760c4; outline-offset: 4px; }
.homepage :is(section[id], .customer-form) { scroll-margin-top: 24px; }
.skip-link { background: #fff; color: #1054b2; left: 16px; padding: 12px; position: absolute; top: -100px; z-index: 2; }
.skip-link:focus { top: 8px; }
.home-header { background: #fff; border-bottom: 1px solid #e5ebf3; box-shadow: 0 2px 12px #18385c06; }
.home-header-inner { align-items: center; display: flex; gap: 28px; margin: auto; max-width: 1280px; min-height: 88px; padding: 12px 28px; }
.home-brand { align-items: center; display: flex; flex-shrink: 0; gap: 12px; text-decoration: none; }
.home-brand-mark { align-items: center; background: #eef4fd; border: 1px solid #dce8fb; border-radius: 12px; color: #165bb7; display: flex; height: 46px; justify-content: center; width: 46px; }
.home-brand-mark svg { height: 30px; width: 30px; }
.home-brand strong { display: block; font-size: 22px; letter-spacing: -.04em; line-height: 1.2; }
.home-brand small { color: #52647e; display: block; font-size: 11px; margin-top: 4px; }
.home-nav { align-items: center; display: flex; flex: 1; flex-wrap: wrap; gap: 12px 23px; justify-content: center; }
.home-nav a { color: #34455e; font-size: 12px; font-weight: 600; padding: 10px 0; text-decoration: none; }
.home-nav a:first-child { color: #1054b2; }
.home-nav a:hover { color: #1054b2; text-decoration: underline; text-underline-offset: 8px; }
.home-login { align-items: center; border: 1px solid #adc3e3; border-radius: 7px; color: #244f87; display: flex; flex-shrink: 0; font-size: 12px; font-weight: 600; gap: 12px; padding: 10px 13px; text-decoration: none; }
.home-login:hover { background: #eff5ff; }
.home-shell { max-width: 1280px; padding: 48px 28px 64px; }
.home-hero { align-items: start; display: grid; gap: 52px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.home-intro { min-width: 0; padding-top: 14px; }
.home-intro .eyebrow { font-size: 11px; letter-spacing: .035em; }
.home-intro h1 { font-size: clamp(30px, 3.5vw, 44px); font-weight: 750; letter-spacing: -.045em; line-height: 1.22; margin: 18px 0; }
.home-intro h1 span { color: #12345e; }
.hero-lead { color: #52647e; font-size: 16px; line-height: 1.8; margin: 0; max-width: 530px; }
.hero-highlights { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0; }
.hero-highlight { align-items: start; display: flex; gap: 9px; min-width: 0; }
.home-icon { align-items: center; background: #ebf2fe; border-radius: 10px; color: #1e60b8; display: inline-flex; flex: 0 0 36px; height: 36px; justify-content: center; }
.home-icon svg { height: 23px; width: 23px; }
.hero-highlight strong { display: block; font-size: 11px; line-height: 1.5; }
.hero-highlight p { color: #52647e; font-size: 11px; line-height: 1.7; margin: 5px 0 0; }
.city-hall-photo { margin: 0; }
.city-hall-photo img { border: 1px solid #e0e8f3; border-radius: 16px; display: block; height: auto; width: 100%; }
.city-hall-photo figcaption { color: #52647e; display: flex; flex-wrap: wrap; font-size: 10px; gap: 6px 14px; justify-content: space-between; padding: 9px 2px; }
.city-hall-photo a { text-underline-offset: 2px; }
.home-booking { box-shadow: 0 10px 35px #18385c0b, 0 2px 5px #18385c04; min-width: 0; padding: 32px; }
.booking-progress { display: flex; gap: 16px; justify-content: space-between; list-style: none; margin: 0 0 40px; padding: 0; }
.booking-progress li { align-items: center; color: #52647e; display: flex; flex: 1; flex-direction: column; font-size: 11px; font-weight: 600; gap: 9px; position: relative; }
.booking-progress li:not(:last-child)::after { background: #e4eaf3; content: ""; height: 1px; left: calc(50% + 26px); position: absolute; right: calc(-50% + 10px); top: 17px; }
.booking-progress span { align-items: center; background: #f0f3f8; border-radius: 50%; display: flex; height: 34px; justify-content: center; width: 34px; }
.booking-progress [aria-current="step"] { color: #1054b2; }
.booking-progress [aria-current="step"] span { background: #1054b2; box-shadow: 0 3px 10px #1054b226; color: #fff; }
.home-booking .step-heading h2 { font-size: 23px; letter-spacing: -.025em; }
.home-booking .step-heading p { line-height: 1.7; margin-top: 8px; }
.home-booking .step-spaced h2 { font-size: 18px; }
.service-picker { margin-top: 24px; }
.service-picker label { font-size: 12px; }
.service-picker select { min-height: 50px; text-overflow: ellipsis; }
.booking-tip { align-items: start; background: #f0f5fe; border-radius: 10px; display: flex; gap: 12px; margin-top: 12px; padding: 18px; }
.tip-mark { align-items: center; background: #155dbd; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 20px; font: 700 13px Georgia, serif; height: 20px; justify-content: center; }
.booking-tip strong { color: #224a83; font-size: 12px; }
.booking-tip p { color: #52647e; font-size: 12px; line-height: 1.8; margin: 5px 0 0; }
.picker-next { gap: 20px; justify-self: end; margin-top: 20px; min-width: 124px; }
.picker-next svg { height: 18px; width: 18px; }
.homepage .button.primary { background: #1054b2; }
.homepage .button.primary:hover { background: #083d87; }
.homepage .button.secondary { background: #edf3fc; }
.home-all-services { border-top: 1px solid #e0e8f3; margin-top: 24px; padding-top: 14px; }
.home-all-services > summary { color: #52647e; cursor: pointer; font-size: 12px; }
.home-booking .service-copy strong { font-size: 13px; }
.home-booking .date-picker, .home-booking .slot-grid { margin-left: 0; }
.home-booking .date-picker input { max-width: none; }
.home-booking .date-picker select { min-width: 0; }
.homepage .service-card.active { background: #eff5ff; }
.home-registration-note { align-items: center; background: #edf4ff; border-radius: 10px; color: #465c7a; display: flex; font-size: 12px; gap: 13px; margin: 22px 0 32px; padding: 16px 20px; }
.home-information { margin: 36px 0; }
.home-information > h2 { font-size: 25px; letter-spacing: -.025em; margin: 6px 0 20px; }
.home-benefits { background: #fff; border: 1px solid #e0e8f3; border-radius: 14px; display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 26px; }
.home-benefits article { align-items: start; display: flex; gap: 12px; min-width: 0; }
.home-benefits .home-icon { background: transparent; }
.home-benefits h3 { font-size: 12px; margin: 0 0 5px; }
.home-benefits p { color: #52647e; font-size: 12px; line-height: 1.7; margin: 0; }
.home-faq { margin: 32px 0; }
.home-faq details { border-top: 1px solid #e0e8f3; padding: 16px 0; }
.home-faq summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.home-faq p { color: #52647e; line-height: 1.8; max-width: 850px; }
.home-secondary { align-items: start; display: grid; gap: 24px; grid-template-columns: 1fr; }
.home-secondary > section { margin: 0; min-width: 0; padding: 28px; }
.home-secondary .site-public p { color: #52647e; font-size: 13px; margin: 9px 0; }
.home-secondary .public-weddings > p { color: #52647e; font-size: 13px; line-height: 1.8; }
.homepage .customer-form fieldset { border: 1px solid #e0e8f3; border-radius: 10px; min-width: 0; padding: 20px; }
.homepage .customer-form legend { color: #1054b2; font-weight: 600; padding: 0 6px; }
.homepage .footer { background: #fff; border-top: 1px solid #e0e8f3; color: #52647e; padding: 24px; }
.city-news { margin-top: 28px; overflow: hidden; min-width: 0; }
.city-news-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.city-news-heading h2 { margin: 5px 0; }
.city-news-heading > a { color: var(--teal-dark); font-size: 12px; }
.news-controls { font-size: 12px; margin: 12px 0; }
.news-viewport { overflow: hidden; border-top: 1px solid var(--line); padding-top: 16px; }
.news-track { display: flex; width: max-content; }
.news-items { align-items: stretch; display: flex; gap: 18px; list-style: none; margin: 0; padding: 0 18px 8px 0; }
.news-items li { flex-shrink: 0; width: clamp(200px, 65vw, 260px); }
.news-items a { background: #fff; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; font-size: 14px; height: 100%; overflow: hidden; text-decoration: none; }
.news-media { align-items: center; aspect-ratio: 13 / 8; background: #eef3fa; color: #52647e; display: flex; flex-shrink: 0; justify-content: center; overflow: hidden; position: relative; width: 100%; }
.news-media img { display: block; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.news-card-title { display: block; font-weight: 600; line-height: 1.5; padding: 14px; white-space: normal; }
.news-items a:hover { text-decoration: underline; }
.news-ready .news-track { animation: city-news-scroll 100s linear infinite; }
.city-news:hover .news-track, .city-news:focus-within .news-track, .news-paused .news-track { animation-play-state: paused; }
.city-news:focus-within .news-viewport, .news-paused .news-viewport { overflow-x: auto; }
@keyframes city-news-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .news-ready .news-track { animation: none; }
    .news-viewport { overflow-x: auto; }
    .news-items[aria-hidden="true"] { display: none; }
}

@media (max-width: 1100px) {
    .public-wedding-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-header-inner { flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
    .home-nav { flex-basis: 100%; order: 1; }
    .home-hero { gap: 28px; }
    .home-booking { padding: 26px; }
    .hero-highlights { grid-template-columns: 1fr; margin: 22px 0; }
    .hero-highlight p { margin: 0; }
    .home-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .public-wedding-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-hero, .home-secondary { grid-template-columns: 1fr; }
    .home-shell { padding-top: 24px; }
    .home-intro { padding-top: 0; }
    .home-intro h1 { font-size: 36px; }
    .hero-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .city-hall-photo { max-width: 620px; }
    .home-booking { padding: 24px; }
    .booking-progress { margin-bottom: 28px; }
    .home-nav { gap: 4px 18px; justify-content: start; }
    .home-login { padding: 9px 11px; }
}
@media (max-width: 520px) {
    .public-wedding-months { grid-template-columns: 1fr; }
    .home-header-inner { padding: 14px 16px 8px; }
    .home-brand { gap: 8px; }
    .home-brand strong { font-size: 20px; }
    .home-brand small { font-size: 9px; }
    .home-brand-mark { height: 38px; width: 38px; }
    .home-login { font-size: 10px; gap: 6px; padding: 9px; }
    .home-nav { gap: 0 15px; }
    .home-nav a { font-size: 11px; }
    .home-intro h1 { font-size: 32px; }
    .hero-lead { font-size: 14px; }
    .hero-highlights { grid-template-columns: 1fr; }
    .hero-highlight { align-items: center; }
    .hero-highlight strong { font-size: 12px; }
    .hero-highlight p { font-size: 12px; }
    .home-benefits { grid-template-columns: 1fr; padding: 20px; }
    .home-secondary > section { padding: 20px; }
    .homepage .home-booking { padding: 20px; }
    .home-booking .step-heading h2 { font-size: 21px; }
    .home-registration-note { align-items: start; padding: 14px; }
}

@media (max-width: 780px) {
    .booking-layout, .admin-grid { grid-template-columns: 1fr; }
    .booking-aside { order: -1; }
    .topbar { gap: 12px; padding: 0 16px; }
    .topbar-title { font-size: 12px; }
    .shell { padding: 22px 14px 42px; }
    .welcome { padding: 24px 20px; }
    .booking-main, .panel, .booking-aside { padding: 20px; }
}

@media (max-width: 520px) {
    .topbar { min-height: 58px; }
    .brand { font-size: 22px; }
    .topbar-link { font-size: 12px; }
    .form-pair { grid-template-columns: 1fr; }
    .date-picker, .slot-grid { margin-left: 0; }
    .page-heading { align-items: start; gap: 12px; }
    .page-heading .button { min-height: 36px; }
}