body.modal-open {
    overflow: hidden;
}
.gallery-service-trigger,
.service-media-trigger {
    border: 0;
    width: 100%;
    cursor: zoom-in;
    position: relative;
}
.service-media-hint {
    position: absolute;
    right: 16px;
    bottom: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(53, 36, 26, 0.74);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.image-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 18, 12, 0.72);
    backdrop-filter: blur(6px);
}
.image-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(92vw, 1100px);
    max-height: 90vh;
    margin: 4vh auto;
    padding: 18px;
    border-radius: 28px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
.image-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    color: var(--text);
    background: rgba(255,255,255,0.88);
    box-shadow: none;
}
.image-modal-img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 18px;
}
.image-modal-caption {
    margin-top: 12px;
    color: var(--text);
    font-weight: 700;
    text-align: center;
}
:root {
    --bg: #f3ebe2;
    --paper: rgba(255,255,255,0.78);
    --paper-strong: rgba(255,255,255,0.9);
    --line: rgba(120, 79, 52, 0.12);
    --text: #35241a;
    --muted: #6e5647;
    --accent: #b35f40;
    --accent-strong: #984929;
    --accent-soft: #f6d6c8;
    --accent-wash: rgba(246, 214, 200, 0.45);
    --mint-wash: rgba(221, 235, 214, 0.55);
    --shadow: 0 18px 45px rgba(103, 63, 41, 0.12);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(255, 228, 214, 0.88), transparent 28%),
        radial-gradient(circle at bottom right, rgba(227, 240, 219, 0.82), transparent 24%),
        linear-gradient(180deg, #f8f2ea 0%, #efe4d8 100%);
}
.site-shell { max-width: 1160px; margin: 0 auto; padding: 22px; }
.site-header {
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 18px 22px; border: 1px solid var(--line); border-radius: 28px;
    background: var(--paper-strong); backdrop-filter: blur(16px); box-shadow: var(--shadow);
}
.brand { color: var(--text); text-decoration: none; font-size: 28px; font-weight: 800; }
.site-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.site-nav a {
    text-decoration: none; color: var(--muted); padding: 10px 16px; border-radius: 999px;
    border: 1px solid transparent; transition: 0.2s ease;
}
.site-nav a.is-active, .site-nav a:hover { color: var(--accent-strong); border-color: rgba(179,95,64,0.2); background: rgba(255,255,255,0.78); }
.page-body { padding: 24px 0 40px; }
.hero-panel, .panel-card {
    border: 1px solid var(--line); border-radius: 32px; background: var(--paper);
    box-shadow: var(--shadow); backdrop-filter: blur(14px);
}
.hero-panel {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; padding: 34px;
    margin-bottom: 22px;
}
.hero-panel-rich {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.48), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,0.74), rgba(247, 233, 224, 0.88));
}
.hero-copy h1 { margin: 8px 0 14px; font-size: 52px; line-height: 1.02; max-width: 12ch; }
.hero-copy p, .muted-copy { color: var(--muted); line-height: 1.6; }
.eyebrow, .mini-kicker {
    display: inline-block; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.eyebrow { background: var(--accent-soft); color: var(--accent-strong); }
.mini-kicker { background: var(--mint-wash); color: #51704b; margin-bottom: 10px; }
.hero-stack { display: grid; gap: 16px; }
.hero-card { padding: 22px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,233,223,0.92)); }
.hero-card-warm { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(247,228,217,0.92)); }
.hero-card-soft { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(233,242,227,0.88)); }
.hero-card-title, .section-title { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.clean-list { margin: 0; padding-left: 18px; line-height: 1.7; }
.hero-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px;
}
.hero-stat {
    padding: 16px; border-radius: 22px; background: rgba(255,255,255,0.72); border: 1px solid rgba(120,79,52,0.08);
}
.hero-stat strong { display: block; font-size: 28px; margin-bottom: 4px; }
.hero-stat span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.gallery-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(243,235,226,0.86));
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
}
.gallery-service-card {
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(120,79,52,0.08);
    background: rgba(255,255,255,0.74);
}
.gallery-service-image-wrap {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: linear-gradient(180deg, rgba(248,233,223,0.78), rgba(255,255,255,0.9));
}
.gallery-service-image {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 18px;
}
.gallery-service-body {
    padding: 18px;
    display: grid;
    gap: 8px;
}
.tile-card-photo {
    min-height: 210px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tile-card-image-wrap {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 0;
}
.tile-card-image {
    width: 100%;
    height: 140px;
    object-fit: contain;
    border-radius: 18px;
}
.tile-card-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(53,36,26,0.02), rgba(53,36,26,0.10));
    color: var(--text);
}
.tile-card-overlay-plain {
    background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0));
}
.tile-card-photo .tile-meta,
.tile-card-photo .tile-title {
    color: var(--text);
}

.service-card-media {
    padding: 0;
    overflow: hidden;
}
.service-media-wrap {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: linear-gradient(180deg, rgba(248,233,223,0.78), rgba(255,255,255,0.92));
}
.service-media {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 18px;
}
.service-content {
    padding: 18px;
}

.feature-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-bottom: 22px;
}
.feature-pill {
    padding: 18px 20px; border-radius: 26px; border: 1px solid var(--line);
    background: rgba(255,255,255,0.7); box-shadow: var(--shadow);
}
.feature-pill strong { display: block; margin-bottom: 6px; }
.feature-pill span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.section-grid { display: grid; gap: 22px; }
.section-grid.two-up, .location-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.panel-card { padding: 24px; margin-bottom: 22px; }
.section-heading {
    display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px;
}
.section-chip {
    display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px;
    background: rgba(255,255,255,0.75); color: var(--accent-strong); font-size: 13px; font-weight: 700;
}
.tile-grid, .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.tile-grid-featured { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tile-card, .service-card, .booking-item, .stack-item {
    display: block; padding: 18px; border-radius: 24px; border: 1px solid rgba(120,79,52,0.08);
    background: rgba(255,255,255,0.72); text-decoration: none; color: inherit;
}
.tile-card-featured {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,233,223,0.82));
}
.stack-item-link { transition: 0.2s ease; }
.stack-item-link:hover, .tile-card:hover, .service-card-rich:hover, .location-card-rich:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(103, 63, 41, 0.08);
}
.tile-title, .service-head, .booking-topline {
    display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
}
.tile-meta, .service-meta, .muted-list, .location-address { color: var(--muted); font-size: 14px; line-height: 1.5; }
.stack-list { display: grid; gap: 14px; margin-bottom: 14px; }
.text-link { color: var(--accent-strong); text-decoration: none; font-weight: 700; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.compact-row { margin-top: 16px; }
.button-primary, .button-secondary, button {
    appearance: none; border: 1px solid transparent; cursor: pointer; text-decoration: none;
    border-radius: 999px; padding: 13px 20px; font: inherit; font-weight: 700; transition: 0.2s ease;
}
.button-primary, button, .button-secondary:hover {
    color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    box-shadow: 0 10px 24px rgba(152, 73, 41, 0.24);
}
.button-secondary {
    color: var(--accent-strong); background: rgba(255,255,255,0.72); border-color: rgba(179,95,64,0.2);
}
.inline-filter, .stack-form { display: grid; gap: 16px; }
.services-filter { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.page-intro-split {
    display: flex; justify-content: space-between; gap: 18px; align-items: end;
}
.intro-side-note {
    max-width: 330px; padding: 16px 18px; border-radius: 22px; background: rgba(255,255,255,0.68);
    border: 1px solid rgba(120,79,52,0.08);
}
.intro-side-note strong { display: block; margin-bottom: 6px; }
.intro-side-note span { color: var(--muted); line-height: 1.55; font-size: 14px; }
.form-grid.two-up { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
label { display: grid; gap: 8px; font-weight: 600; }
input, select, textarea {
    width: 100%; border: 1px solid rgba(120,79,52,0.14); border-radius: 18px; background: rgba(255,255,255,0.85);
    padding: 14px 16px; font: inherit; color: var(--text);
}
textarea { resize: vertical; }
.error-banner, .success-banner, .form-note {
    padding: 14px 16px; border-radius: 18px; font-weight: 600;
}
.error-banner { background: rgba(194, 81, 62, 0.12); color: #9a3f2d; }
.success-banner { background: rgba(102, 154, 105, 0.14); color: #3f7144; }
.form-note { background: rgba(255,255,255,0.72); color: var(--muted); }
.service-selector-groups { display: grid; gap: 14px; }
.service-category-group { padding: 16px; border: 1px solid rgba(120,79,52,0.08); border-radius: 24px; background: rgba(255,255,255,0.62); }
.service-category-title { font-weight: 800; margin-bottom: 12px; }
.service-selector-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.checkbox-card { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,0.76); }
.checkbox-card input { width: 18px; height: 18px; margin-top: 2px; }
.page-intro { margin-bottom: 18px; }
.category-card-rich { background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(248,233,223,0.75)); }
.service-grid-rich { grid-template-columns: repeat(2, minmax(0,1fr)); }
.service-card-rich p, .location-card-rich p { color: var(--muted); line-height: 1.6; }
.location-grid-rich { grid-template-columns: repeat(2, minmax(0,1fr)); }
.location-card-rich { background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(233,242,227,0.8)); }
.process-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(246,237,229,0.82));
}
.process-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;
}
.process-step {
    padding: 20px; border-radius: 24px; background: rgba(255,255,255,0.74); border: 1px solid rgba(120,79,52,0.08);
}
.process-number {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; margin-bottom: 12px;
}
.booking-item + .booking-item { margin-top: 12px; }
.booking-item-strong { background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(245,233,226,0.84)); }
.booking-lookup-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.lookup-summary {
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.summary-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.summary-pill {
    min-width: 110px; padding: 14px 16px; border-radius: 20px; text-align: center;
    background: rgba(255,255,255,0.74); border: 1px solid rgba(120,79,52,0.08);
}
.summary-pill strong { display: block; font-size: 24px; }
.summary-pill span { color: var(--muted); font-size: 13px; }
.status-badge {
    display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 800; white-space: nowrap;
}
.status-pending { background: rgba(197, 152, 65, 0.14); color: #8a6324; }
.status-confirmed { background: rgba(94, 133, 201, 0.14); color: #34568f; }
.status-completed { background: rgba(93, 152, 107, 0.14); color: #2f6c3a; }
.status-cancelled { background: rgba(194, 81, 62, 0.12); color: #9a3f2d; }
.empty-note { color: var(--muted); line-height: 1.6; }
.booking-actions {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.booking-actions form { margin: 0; }
.booking-limit { margin-top: 12px; }
.reschedule-panel {
    margin-top: 14px; padding: 16px; border-radius: 20px;
    background: rgba(255,255,255,0.68); border: 1px solid rgba(120,79,52,0.08);
}
.reschedule-form {
    display: grid; gap: 14px;
}
.reschedule-note {
    color: var(--muted); font-size: 14px; line-height: 1.5;
}
.empty-card {
    text-align: center;
}

@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    .hero-panel, .section-grid.two-up, .location-grid, .location-grid-rich, .form-grid.two-up, .tile-grid, .service-grid, .service-grid-rich, .service-selector-grid, .process-grid, .feature-strip, .hero-stats {
        grid-template-columns: 1fr;
    }
    .site-header, .lookup-summary, .page-intro-split { flex-direction: column; align-items: stretch; }
    .hero-copy h1 { font-size: 38px; max-width: none; }
    .booking-lookup-form, .services-filter { grid-template-columns: 1fr; }
}