/* ==========================================================================
   Vanilla theme - ported from the Skandivvs reference design.
   Hanken Grotesk, monochrome ink-on-white with dark punctuation bands,
   frosted fixed nav, uppercase bold nav/buttons, generous spacing.
   ========================================================================== */

:root {
    --font-heading: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --color-bg: #ffffff;
    --color-surface: #f8f7f4;
    --color-surface-dark: #1a1a1a;
    --color-border: #e8e6e1;

    --color-text: #1a1a1a;
    --color-text-secondary: #5c5c5c;
    --color-text-muted: #303030;
    --color-text-on-dark: #ffffff;
    --color-text-on-dark-muted: #b3b3b3;

    /* Brand accent - monochrome by default; a tenant brand colour overrides it. */
    --color-accent: #1a1a1a;
    --color-accent-hover: #333333;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    --max-width: 1200px;
    --nav-height: 80px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: clamp(16px, 15.4px + 0.44vw, 18px); }
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--nav-height);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); }

/* ===== ACCESSIBILITY ===== */
.skip-link {
    position: absolute; top: -100%; left: 16px;
    background: var(--color-accent); color: #fff;
    padding: 8px 16px; border-radius: var(--radius-sm);
    z-index: 9999; font-weight: 600; font-size: 0.875rem;
}
.skip-link:focus { top: 16px; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== LAYOUT ===== */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-l); }
section { padding: var(--space-4xl) 0; }

/* ===== BUTTONS ===== */
.btn-primary {
    display: inline-block;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--color-accent); color: var(--color-text-on-dark);
    padding: 16px 36px; border-radius: var(--radius-sm);
    transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
.btn-secondary {
    display: inline-block;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    background: transparent; color: var(--color-text);
    padding: 16px 36px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-border);
    transition: border-color 0.2s, transform 0.15s;
}
.btn-secondary:hover { border-color: var(--color-text); transform: translateY(-1px); }

/* Canonical button classes (.btn + BEM modifiers) used by the booking flow
   and forms. Kept in sync with the .btn-primary/.btn-secondary aliases above. */
.btn { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 36px; border-radius: var(--radius-sm); transition: background 0.2s, transform 0.15s; cursor: pointer; border: none; }
.btn--primary { background: var(--color-accent); color: var(--color-text-on-dark); }
.btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--color-text); border: 1.5px solid var(--color-border); }
.btn--secondary:hover { border-color: var(--color-text); transform: translateY(-1px); }

/* ===== NAVBAR ===== */
.c-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 0; display: flex; align-items: center;
    min-height: var(--nav-height);
}
.c-nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.c-nav__logo { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: var(--color-text); display: inline-flex; align-items: center; }
.c-nav__logo-img { display: block; height: 44px; width: auto; max-width: 220px; object-fit: contain; }
.c-nav__links { display: flex; align-items: center; gap: var(--space-xl); }
.c-nav__link { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); transition: opacity 0.2s; }
.c-nav__link:hover { opacity: 0.55; }
.c-nav__link--button { color: var(--color-text-on-dark); background: var(--color-accent); padding: 12px 24px; border-radius: var(--radius-sm); }
.c-nav__link--button:hover { opacity: 1; background: var(--color-accent-hover); }
.c-nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.c-nav__hamburger span { width: 22px; height: 2px; background: var(--color-text); border-radius: 1px; }

.c-nav__mobile { display: none; position: fixed; inset: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); z-index: 200; padding: var(--space-3xl) var(--space-l); flex-direction: column; gap: var(--space-l); align-items: center; justify-content: center; }
.c-nav__mobile.is-open { display: flex; }
.c-nav__mobile a { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-s) 0; border-bottom: 1px solid var(--color-border); }
.c-nav__mobile-close { position: absolute; top: var(--space-m); right: var(--space-m); width: 48px; height: 48px; font-size: 1.5rem; }

/* ===== HERO ===== */
.c-hero { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); text-align: center; }
.c-hero--image { background-size: cover; background-position: center; color: var(--color-text-on-dark); }
.c-hero--image .c-hero__label, .c-hero--image .c-hero__desc { color: rgba(255,255,255,0.85); }
.c-hero__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-l); }
.c-hero__title { font-size: clamp(2.8rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; max-width: 800px; margin: 0 auto var(--space-xl); overflow-wrap: break-word; }
.c-hero__desc { font-size: 1.1rem; color: var(--color-text-secondary); font-weight: 300; max-width: 550px; margin: 0 auto var(--space-2xl); line-height: 1.7; }
.c-hero__actions { display: flex; justify-content: center; gap: var(--space-m); flex-wrap: wrap; }

/* ===== SECTION HEADER (headline + generic) ===== */
.c-section-head { text-align: center; margin-bottom: var(--space-3xl); }
.c-section-head__label, .c-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-l); }
.c-section-head__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.c-section-head__sub { font-size: 1rem; color: var(--color-text-secondary); max-width: 600px; margin: var(--space-m) auto 0; line-height: 1.7; }

/* ===== ARTICLE / PROSE ===== */
.c-article .container { max-width: 760px; }
.c-article--with-image .container { max-width: var(--max-width); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.c-article--image-right .c-article__media { order: 2; }
.c-article__media img { border-radius: var(--radius-md); }
.c-prose { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.8; }
.c-prose h2, .c-prose h3 { color: var(--color-text); margin: 1.2em 0 0.5em; }
.c-prose p { margin-bottom: 0.9em; }
.c-prose a { color: var(--color-text); border-bottom: 1px solid var(--color-text); }
.c-prose ul { list-style: disc; padding-left: 1.2em; margin-bottom: 0.9em; }

/* ===== SERVICES / CARDS ===== */
.c-services { background: var(--color-surface); }
.c-services__header { text-align: center; margin-bottom: var(--space-3xl); }
.c-services__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-l); }
.c-services__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
/* minmax(0, 1fr): a long unbreakable service name must never widen its
   column past the equal share (1fr alone lets min-content win). */
.c-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
.c-services__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-services__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-services__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-service-card { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.c-service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.06); }
.c-service-card__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--color-surface); }
.c-service-card__body { padding: var(--space-xl) var(--space-l) var(--space-2xl); }
.c-service-card__title { font-size: 1.4rem; font-weight: 700; margin-bottom: var(--space-s); line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }
.c-service-card__desc { overflow-wrap: break-word; }
.c-service-card__desc { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.7; }
.c-service-card__link { display: inline-block; margin-top: var(--space-m); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1.5px solid currentColor; }
.c-service-card__price { margin-top: var(--space-m); font-weight: 700; }

/* ===== STATS ===== */
.c-stats { background: var(--color-surface-dark); color: var(--color-text-on-dark); padding: var(--space-3xl) 0; }
.c-stats__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); text-align: center; }
.c-stat__value { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; margin-bottom: var(--space-xs); }
.c-stat__label { font-size: 0.82rem; color: var(--color-text-on-dark-muted); }

/* ===== COLUMNS ===== */
.c-columns__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2xl); }
.c-column h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-s); }
.c-column p { color: var(--color-text-secondary); line-height: 1.7; }

/* ===== TEAM ===== */
/* Flex, not grid: with fewer members than a full row (a one-person team),
   the cards sit centered instead of hugging the left edge. */
.c-team__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xl); }
.c-team-card { text-align: center; flex: 0 1 calc((100% - 2 * var(--space-xl)) / 3); min-width: 0; }
.c-team-card__photo { width: 100%; aspect-ratio: 3/4; background: var(--color-surface); border-radius: var(--radius-md); margin-bottom: var(--space-l); object-fit: cover; }
.c-team-card__name { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
.c-team-card__role { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: var(--space-s); }
.c-team-card__bio { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.6; }

/* ===== FAQ ===== */
.c-faq__inner { display: grid; grid-template-columns: 1fr 1.8fr; gap: var(--space-3xl); align-items: start; }
.c-faq__header { position: sticky; top: calc(var(--nav-height) + var(--space-l)); }
.c-faq__title { font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: var(--space-m); }
.c-faq__desc { color: var(--color-text-secondary); line-height: 1.7; }
.c-faq__items { border-top: 1px solid var(--color-border); }
.c-faq-item { border-bottom: 1px solid var(--color-border); }
.c-faq-item__question { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); padding: var(--space-l) 0; }
.c-faq-item__question::-webkit-details-marker { display: none; }
.c-faq-item__question::after { content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--color-text-muted); transition: transform 0.25s; }
.c-faq-item[open] .c-faq-item__question::after { transform: rotate(45deg); }
.c-faq-item__answer { padding: 0 0 var(--space-l); color: var(--color-text-secondary); line-height: 1.8; font-size: 0.95rem; max-width: 60ch; }

/* ===== TABS ===== */
.c-tabs { background: var(--color-surface); }
.c-tabs__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-border); }
.c-tabs__tab { font-size: 0.9rem; font-weight: 600; color: var(--color-text-secondary); padding: var(--space-m) var(--space-l); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; }
.c-tabs__tab:hover { color: var(--color-text); }
.c-tabs__tab.is-active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.c-tabs__panel { max-width: 760px; margin: 0 auto; }
.c-tabs__panel[hidden] { display: none; }

/* ===== SIDEBAR ===== */
.c-sidebar__inner { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3xl); align-items: start; }
.c-sidebar__inner--left { grid-template-columns: 1fr 2fr; }
.c-sidebar__heading { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--space-l); }
.c-sidebar__aside { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-xl); }
.c-sidebar__aside-heading { font-size: 1.2rem; font-weight: 700; margin-bottom: var(--space-l); }

/* ===== CTA ===== */
.c-cta { background: var(--color-surface); text-align: center; }
.c-cta__title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--space-m); }

/* ===== DIVIDER / SPACER ===== */
.c-divider hr { border: 0; border-top: 1px solid var(--color-border); max-width: var(--max-width); margin: 0 auto; }

/* ===== IMAGE ===== */
.c-image__figure { margin: 0; }
.c-image__img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.c-image--narrow .container { max-width: 760px; }
.c-image--full { padding: 0; }
.c-image--full .c-image__img { border-radius: 0; }
.c-image__caption { font-size: 0.9rem; color: var(--color-text-muted); margin-top: var(--space-s); text-align: center; }

/* ===== FOOTER ===== */
.c-footer { background: var(--color-surface-dark); color: var(--color-text-on-dark); padding: var(--space-3xl) 0 var(--space-xl); }
.c-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2xl); margin-bottom: var(--space-3xl); }
.c-footer__col--full { grid-column: 1 / -1; }
.c-footer__text { display: block; font-size: 1rem; padding: 6px 0; opacity: 0.7; }
.c-footer__hours .oh-rows { font-size: 0.85rem; }
.c-footer__hours .oh-row { padding: 0.3rem 0; border-bottom-color: rgba(255,255,255,0.08); }
.c-footer__hours .oh-row__day { color: var(--color-text-on-dark-muted); }
.c-footer__hours .oh-row--today .oh-row__day,
.c-footer__hours .oh-row--today .oh-row__time { color: var(--color-text-on-dark); }
.c-footer__embed { font-size: 0.9rem; }
.c-footer__logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; margin-bottom: var(--space-m); }
.c-footer__desc { font-size: 1rem; line-height: 1.7; opacity: 0.7; }
.c-footer__heading { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-l); }
.c-footer__link { display: block; font-size: 1rem; padding: 6px 0; opacity: 0.7; transition: opacity 0.2s; }
.c-footer__link:hover { opacity: 1; }
.c-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--space-l); display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; opacity: 0.6; flex-wrap: wrap; gap: var(--space-m); }
.c-footer__owner { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.c-footer__owner:hover { border-bottom-color: currentColor; }
/* The Atlas Holly credit. Its own hairline row, at FULL strength:
   .c-footer__bottom is dimmed to 0.6 and this must not inherit that - a link
   that exists to be read and followed is not decoration.
   The bottom padding is not decoration: .bk-cart is a fixed, CENTERED pill
   sitting var(--space-l) from the bottom of the VIEWPORT, so anything at the
   very end of the document lands underneath it at full scroll. The padding
   is the room the credit needs to end up above it. Sized off the pill
   (~47px tall + 24px offset), not eyeballed. */
.c-footer__signature { border-top: 1px solid rgba(255,255,255,0.08); margin-top: var(--space-l); padding-top: var(--space-l); padding-bottom: 5rem; display: flex; justify-content: center; font-size: 0.85rem; }
.c-footer__signature a { color: inherit; text-decoration: none; }
.c-footer__signature a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== SERVICE / PRICING DETAIL ===== */
.c-detail__inner { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-3xl); align-items: start; }
.c-detail__aside { position: sticky; top: calc(var(--nav-height) + var(--space-l)); background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-xl); display: grid; gap: var(--space-m); }
.c-detail__price { font-size: 1.8rem; font-weight: 800; }
.pricing-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; margin-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-border); }
.pricing-groups { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; margin-bottom: var(--space-l); }
.pricing-group { font-size: 0.95rem; font-weight: 700; padding: var(--space-s) var(--space-l); border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); color: var(--color-text-secondary); }
.pricing-group.is-active { color: var(--color-text); border-color: var(--color-accent); border-width: 2px; }
.pricing-tab { font-size: 0.9rem; font-weight: 600; padding: var(--space-m) var(--space-l); border-bottom: 2px solid transparent; color: var(--color-text-secondary); }
.pricing-tab.is-active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.pricing-table { width: 100%; border-collapse: collapse; }
.pricing-table th, .pricing-table td { text-align: left; padding: var(--space-m) var(--space-s); border-bottom: 1px solid var(--color-border); }

/* ===== BOOKING / FORMS ===== */
.booking { max-width: 820px; margin: 0 auto; padding: var(--space-xl) var(--space-l) var(--space-2xl); }
.booking-progress { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-l); }
.booking-flow-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2xs, 4px); }
.booking-form { display: grid; gap: var(--space-l); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-size: 0.85rem; font-weight: 600; }
.field input, .field select, .field textarea { font: inherit; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-text); }
.field--error input, .field--error select { border-color: #b91c1c; }
.field__error { color: #b91c1c; font-size: 0.85rem; }
.field__hint { color: var(--color-text-muted, #6b7280); font-size: 0.85rem; margin-top: calc(-1 * var(--space-xs)); }

/* Booking time-slot picker */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: var(--space-xs); }
.slot-btn { font-size: 0.9rem; font-weight: 600; padding: 12px 8px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.slot-btn:hover { border-color: var(--color-text); }
.slot-btn.is-selected { background: var(--color-accent); color: var(--color-text-on-dark); border-color: var(--color-accent); }
.choice-list { display: grid; gap: var(--space-s); border: 0; }
.choice-list legend { font-weight: 700; margin-bottom: var(--space-xs); }
.choice { display: flex; align-items: center; gap: var(--space-s); }

/* ===== RESPONSIVE ===== */
@media (max-width: 968px) {
    .c-nav__links { display: none; }
    .c-nav__hamburger { display: flex; }
    .c-services__grid { grid-template-columns: 1fr 1fr; }
    .c-stats__inner { grid-template-columns: repeat(2, 1fr); }
    .c-team-card { flex-basis: calc((100% - var(--space-xl)) / 2); }
    .c-faq__inner, .c-sidebar__inner, .c-sidebar__inner--left, .c-article--with-image .container, .c-detail__inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .c-faq__header, .c-detail__aside { position: static; }
    .c-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    :root { --nav-height: 64px; }
    section { padding: var(--space-2xl) 0; }
    .c-services__grid, .c-stats__inner, .c-footer__grid { grid-template-columns: 1fr; }
    .c-team-card { flex-basis: 100%; }
}
@media (min-width: 969px) { .c-nav__mobile, .c-nav__mobile.is-open { display: none; } }

/* ==========================================================================
   Service + pricing pages (ported from Skandivvs)
   ========================================================================== */
.c-hero--compact { padding-top: var(--space-xl); padding-bottom: var(--space-m); }
.c-hero--compact .c-hero__title { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 auto var(--space-s); }
.c-pricing__intro { max-width: 640px; margin: var(--space-m) auto 0; color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.7; }
.c-pricing__intro > :last-child { margin-bottom: 0; }
.c-section--tight { padding-top: var(--space-l); padding-bottom: var(--space-3xl); }
.c-crumb { color: var(--color-text-secondary); border-bottom: 1px solid transparent; }
.c-crumb:hover { border-bottom-color: currentColor; }

/* Service detail: main + sticky aside */
.c-service-detail__inner { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-3xl); align-items: start; }
.c-service-detail__lead { font-size: 1.2rem; line-height: 1.6; margin-bottom: var(--space-l); }
.c-service-detail__body { font-size: 1rem; line-height: 1.8; color: var(--color-text-secondary); }
.c-service-detail__body p { margin-bottom: var(--space-m); }
.c-service-detail__aside { position: sticky; top: calc(var(--nav-height) + var(--space-l)); display: grid; gap: var(--space-l); }
/* Must live BELOW the base rules: the responsive block at the top of the
   file loses the cascade against them (same specificity, earlier source). */
@media (max-width: 968px) {
    .c-service-detail__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
    .c-service-detail__aside { position: static; }
}
.c-tag { display: inline-block; font-size: 0.85rem; font-weight: 500; padding: 6px 14px; border: 1px solid var(--color-border); border-radius: 999px; }

/* Price card */
.c-price-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-l); }
.c-price-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); }
.c-price-card__label { font-size: 0.9rem; color: var(--color-text-secondary); }
.c-price-card__value { font-size: 1.3rem; font-weight: 700; }

/* Numbered step panel */
.c-step-panel { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-xl); }
.c-step-panel__heading { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; margin-bottom: var(--space-l); }
.c-step-list { display: grid; gap: var(--space-m); }
.c-step { display: flex; gap: var(--space-m); align-items: flex-start; }
.c-step__num { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-text-on-dark); border-radius: 50%; font-size: 0.85rem; font-weight: 700; }

/* Quote CTA box */
.c-quote-cta { background: var(--color-surface-dark); color: var(--color-text-on-dark); border-radius: var(--radius-md); padding: var(--space-xl); text-align: center; }
.c-quote-cta__title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin-bottom: var(--space-s); }
.c-quote-cta__desc { font-size: 0.92rem; color: var(--color-text-on-dark-muted); line-height: 1.6; margin-bottom: var(--space-l); }
.c-quote-cta .btn-primary { background: var(--color-bg); color: var(--color-text); }

/* Pencil wrapper around an index card: a positioning context only - never a
   second card (nesting two .c-pricing-index__card caused a double-lift that
   hid the top border on hover). */
.c-card-edit { position: relative; display: flex; min-width: 0; }
.c-card-edit > .c-pricing-index__card,
.c-card-edit > .c-service-card { flex: 1; min-width: 0; }

/* Pricing index cards */
/* auto-fill (not auto-fit): a lone category card keeps card width
   instead of stretching across the whole row. */
.c-pricing-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-l); }
/* Grid/flex children default to min-width auto (= min-content): a long
   unbreakable category name then overflows into the neighbour card. */
.c-pricing-index__grid > * { min-width: 0; }
.c-pricing-index__card { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-xl); background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-md); transition: border-color 0.15s, transform 0.15s; }
.c-pricing-index__card:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.c-pricing-index__card-title { font-size: 1.2rem; font-weight: 700; hyphens: auto; overflow-wrap: break-word; }
.c-pricing-index__card-arrow { font-size: 0.88rem; font-weight: 600; color: var(--color-accent); margin-top: auto; }

/* Pricing table */
.c-pricing__category { font-size: 1.2rem; font-weight: 700; margin-bottom: var(--space-m); padding-bottom: var(--space-s); border-bottom: 2px solid var(--color-border); }
.c-pricing__table-wrap { overflow-x: auto; }
.c-pricing__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.c-pricing__table th { text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); padding: var(--space-s) var(--space-m); border-bottom: 1px solid var(--color-border); }
.c-pricing__table td { padding: var(--space-m); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.c-pricing__name { font-weight: 600; }
.c-pricing__price { font-weight: 600; white-space: nowrap; }
/* Matrix layout: one table per variant group, category section rows. */
.c-pricing__group { margin-bottom: var(--space-xl, 2rem); }
.c-pricing__group-title { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-m); }
/* Subtle, SEO-only link to the per-group price page - looks like the heading. */
.c-pricing__group-link { color: inherit; text-decoration: none; }
.c-pricing__group-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-pricing__matrix th.c-pricing__col { text-align: right; }
.c-pricing__matrix .c-pricing__price { text-align: right; }
.c-pricing__simple .c-pricing__price { text-align: right; width: 1%; }
.c-pricing__cat td { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); background: var(--color-surface, rgba(0,0,0,0.03)); padding: var(--space-s) var(--space-m); }
.c-pricing__na { color: var(--color-text-muted); }
/* Clickable prices → service-variant detail page (SEO). */
.c-pricing__price-link { color: var(--color-text); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--color-text); }
.c-pricing__price-link:hover { border-bottom-width: 2px; }
/* Service-detail price tables (left column, variant offerings). */
.c-service-prices { display: grid; gap: var(--space-l, 1.5rem); }
.c-service-prices__heading { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-s); }
.c-service-prices__group-title { font-size: 0.95rem; font-weight: 700; margin-bottom: var(--space-xs); }
.c-service-prices .c-pricing__table .is-selected { background: var(--color-surface, rgba(0,0,0,0.04)); }
.c-service-prices .c-pricing__price { text-align: right; }
.c-hero__variant { font-weight: 400; color: var(--color-text-on-dark-muted, rgba(255,255,255,0.7)); }
.c-hero__group { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin: calc(-1 * var(--space-m)) 0 var(--space-s); }
.c-pricing__offert { font-style: italic; color: var(--color-text-muted); }

/* ===== Hero variants ===== */
.c-hero--split { text-align: left; }
.c-hero__split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.c-hero__title--left, .c-hero__desc--left { text-align: left; margin-left: 0; }
.c-hero__actions--left { justify-content: flex-start; }
.c-hero__media img { width: 100%; border-radius: var(--radius-md); object-fit: cover; }
/* Reversed split: image on the left (desktop); text stays first on mobile. */
.c-hero--split-reverse .c-hero__media { order: -1; }
.c-hero--full { min-height: 70vh; display: flex; align-items: center; }
@media (max-width: 968px) {
    .c-hero__split-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .c-hero--split, .c-hero__title--left, .c-hero__desc--left { text-align: center; }
    .c-hero--split-reverse .c-hero__media { order: 0; }
    .c-hero__actions--left { justify-content: center; }
}

/* ==========================================================================
   Booking flow - services step (bdgroup-style layout, theme colours)
   ========================================================================== */
.booking-lead { color: var(--color-text-secondary); margin-bottom: var(--space-l); }

.bk-services__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-bottom: var(--space-xs); }
.bk-services__head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.bk-services__lead { color: var(--color-text-secondary); margin-bottom: var(--space-l); }
.bk-reg-for { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; }

.bk-section { margin-bottom: var(--space-xl); padding: 0; }
.bk-section__title {
    display: flex; align-items: center; gap: var(--space-s);
    font-size: 1.05rem; font-weight: 700; color: var(--color-text);
    margin-bottom: var(--space-m); padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}
.bk-section__title svg { color: var(--color-accent); flex-shrink: 0; }
.bk-section__title--popular { border-bottom-color: var(--color-accent); }

.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-s); }

.bk-card {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 12px 14px; border: 2px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg); cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bk-card:hover { border-color: var(--color-accent); background: var(--color-surface); }
.bk-card.is-selected { border-color: var(--color-accent); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-border); }
.bk-card__icon { flex-shrink: 0; color: var(--color-accent); display: flex; }
.bk-card__name { flex: 1; font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: var(--color-text); }
/* Members-only inline pencil (booking flow): jumps straight to the editor. */
.bk-edit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px; flex: none;
    background: oklch(0.96 0.18 115.3); color: #000; cursor: pointer;
    vertical-align: middle;
}
.bk-edit:hover { filter: brightness(0.94); }
.bk-edit svg { width: 14px; height: 14px; }
.bk-card__check {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center;
    color: transparent; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bk-card.is-selected .bk-card__check { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-on-dark); }

/* Authoritative checkbox option (native input visually hidden; :has drives state) */
.bk-card--option { position: relative; }
.bk-card--option input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bk-card--option:has(input:checked) { border-color: var(--color-accent); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-border); }
.bk-card--option:has(input:checked) .bk-card__check { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-on-dark); }
.bk-card--option:has(input:focus-visible) { outline: 2px solid var(--color-text); outline-offset: 2px; }
.bk-options[hidden] { display: none; }

/* ===== BOOKING - floating cart ===== */
.bk-cart { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--space-l); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: var(--space-s); }
.bk-cart__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-radius: 999px; border: none; cursor: pointer;
    background: var(--color-accent); color: var(--color-text-on-dark);
    font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}
.bk-cart__label { font-size: 0.9rem; }
.bk-cart__count {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--color-text-on-dark); color: var(--color-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 800;
}
.bk-cart__panel {
    width: min(340px, 88vw); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: 0 12px 36px rgba(0,0,0,0.22); padding: var(--space-m);
}
.bk-cart__head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: var(--space-s); }
.bk-cart__close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--color-text-secondary); line-height: 1; }
.bk-cart__list { list-style: none; margin: 0 0 var(--space-m); padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.bk-cart__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--color-bg); border-radius: var(--radius-sm); }
.bk-cart__item-name { font-size: 0.9rem; font-weight: 600; }
.bk-cart__remove { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--color-text-secondary); }
.bk-cart__remove:hover { color: var(--color-text); }
.bk-cart__continue { width: 100%; text-align: center; }

/* Category accordion */
.bk-cat { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-xs); overflow: hidden; }
.bk-cat summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
    padding: 12px 16px; cursor: pointer; font-weight: 700; font-size: 0.95rem; color: var(--color-text);
    list-style: none; background: var(--color-surface);
}
.bk-cat summary::-webkit-details-marker { display: none; }
.bk-cat summary:hover { background: var(--color-border); }
.bk-cat__arrow { color: var(--color-text-secondary); transition: transform 0.2s; }
.bk-cat[open] summary .bk-cat__arrow { transform: rotate(180deg); }
.bk-cat__body { padding: var(--space-m) var(--space-m) var(--space-m); }

/* Search */
.bk-search { margin-bottom: var(--space-m); }
.bk-search input {
    width: 100%; padding: 12px 16px; font: inherit; font-size: 1rem;
    border: 2px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); box-sizing: border-box; transition: border-color 0.15s, background 0.15s;
}
.bk-search input:focus { outline: none; border-color: var(--color-text); background: var(--color-bg); }
.bk-no-results { text-align: center; color: var(--color-text-secondary); padding: var(--space-l); }

/* Actions */
.bk-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); margin-top: var(--space-m); }
.bk-actions__next { text-align: right; }
.bk-error { color: #b91c1c; font-weight: 600; font-size: 0.9rem; margin: 0 0 var(--space-xs); }

@media (max-width: 600px) {
    .bk-grid { grid-template-columns: 1fr; }
    .bk-actions { flex-direction: column-reverse; align-items: stretch; }
    .bk-actions__next { text-align: center; }
    .bk-actions .btn-primary, .bk-actions .btn-secondary { width: 100%; text-align: center; }
}

/* Upsells / add-ons step (bdgroup-style horizontal cards, theme colours) */
.bk-upsells { display: flex; flex-direction: column; gap: var(--space-s); margin-bottom: var(--space-m); }
.bk-upsell {
    position: relative; display: flex; align-items: center; gap: var(--space-m);
    padding: 16px 20px; border: 2px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg); cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bk-upsell:hover { border-color: var(--color-accent); background: var(--color-surface); }
.bk-upsell input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bk-upsell:has(input:checked) { border-color: var(--color-accent); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-border); }
.bk-upsell:has(input:focus-visible) { outline: 2px solid var(--color-text); outline-offset: 2px; }
.bk-upsell__icon { flex-shrink: 0; width: 44px; display: flex; align-items: center; justify-content: center; color: var(--color-accent); }
.bk-upsell__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bk-upsell__name { font-weight: 700; font-size: 1rem; color: var(--color-text); }
.bk-upsell__desc { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.4; }
.bk-upsell__price { flex-shrink: 0; font-weight: 700; font-size: 1rem; color: var(--color-text); white-space: nowrap; }
.bk-upsell__check {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center;
    color: transparent; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bk-upsell:has(input:checked) .bk-upsell__check { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-on-dark); }

@media (max-width: 500px) {
    .bk-upsell { flex-wrap: wrap; gap: 10px; }
    .bk-upsell__price { width: 100%; text-align: right; }
}

/* ==========================================================================
   Opening hours block
   ========================================================================== */
.oh-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
}
.oh-dept {
    flex: 1 1 340px;
    max-width: 460px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}
.oh-dept__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    flex-wrap: wrap;
    margin-bottom: var(--space-m);
    padding-bottom: var(--space-s);
    border-bottom: 2px solid var(--color-border);
}
.oh-dept__name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

/* Open / closed status pill */
.oh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.oh-badge__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.oh-badge__detail {
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* Weekly rows: day on the left, time on the right */
.oh-rows {
    display: flex;
    flex-direction: column;
}
.oh-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-l);
    padding: 0.6rem 0;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-border);
}
.oh-row:last-child { border-bottom: none; }
.oh-row__day { color: var(--color-text-secondary); }
.oh-row__time { font-weight: 600; white-space: nowrap; text-align: right; }
/* Today stands out */
.oh-row--today .oh-row__day,
.oh-row--today .oh-row__time { color: var(--color-text); font-weight: 700; }

/* ===== Add-to-cart chips on the price list ===== */
.c-pricing__add-form { display: inline-block; margin-left: 6px; vertical-align: middle; }
.c-pricing__add {
    height: 24px; padding: 0 8px; gap: 3px;
    border-radius: 999px; border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text);
    font-size: 0.95rem; font-weight: 700; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.c-pricing__add svg { width: 13px; height: 13px; }
.c-pricing__add:hover { background: var(--color-accent); color: var(--color-text-on-dark); border-color: var(--color-accent); }

/* ===== Gallery block (grid / masonry / slideshow / before-after) ===== */
.c-gallery__heading { margin-bottom: var(--space-m); }
.c-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.c-gallery__cell { margin: 0; }
.c-gallery__cell img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); display: block; }
.c-gallery__cell figcaption { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 4px; }
.c-gallery__masonry { columns: 3 240px; column-gap: 12px; }
.c-gallery__masonry .c-gallery__cell { break-inside: avoid; margin-bottom: 12px; }
.c-gallery__masonry .c-gallery__cell img { aspect-ratio: auto; }
.c-gallery__stage { position: relative; }
.c-gallery__slide { display: none; margin: 0; }
.c-gallery__slide.is-active { display: block; }
.c-gallery__slide img { width: 100%; max-height: 560px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.c-gallery__slide figcaption { font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 6px; }
.c-gallery__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 1.5rem; line-height: 1;
}
.c-gallery__nav--prev { left: 12px; }
.c-gallery__nav--next { right: 12px; }
.c-gallery__nav:hover { background: rgba(0, 0, 0, 0.65); }
.c-gallery__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 6px; justify-content: center; }
.c-gallery__dot { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255, 255, 255, 0.55); padding: 0; }
.c-gallery__dot.is-active { background: #fff; }
.c-gallery__ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-m); }
.c-gallery__ba { margin: 0; }
.c-gallery__ba-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4/3; }
.c-gallery__ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-gallery__ba-clip { position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; }
.c-gallery__ba-frame { container-type: inline-size; }
.c-gallery__ba-clip img { width: 100cqw; height: 100%; max-width: none; }
.c-gallery__ba-handle {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
    background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); pointer-events: none;
}
.c-gallery__ba-tag {
    position: absolute; top: 10px; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px;
    border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff;
}
.c-gallery__ba-tag--before { left: 10px; }
.c-gallery__ba-tag--after { right: 10px; }
.c-gallery__ba-range {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: ew-resize; margin: 0;
}
.c-gallery__ba figcaption { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 4px; }

/* ===== Simple price list (menu) block ===== */
.c-menu__heading { margin-bottom: var(--space-m); }
.c-menu__list { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.c-menu__row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.c-menu__img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-md); flex: none; }
.c-menu__body { flex: 1; min-width: 0; }
.c-menu__line { display: flex; align-items: baseline; gap: 8px; }
.c-menu__title { font-weight: 600; }
.c-menu__dots { flex: 1; border-bottom: 2px dotted var(--color-border); transform: translateY(-4px); }
.c-menu__price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-menu__desc { font-size: 0.88rem; color: var(--color-text-secondary); margin: 2px 0 0; }

/* ===== Blog/news ===== */
/* auto-fit (not auto-fill): with few posts the cards share the row instead
   of leaving ghost columns on the right. Both blog and news sit in the same
   centered 760px reading column. */
.c-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-m); max-width: 760px; margin-inline: auto; }
.c-posts--news { grid-template-columns: 1fr; }
.c-post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); transition: border-color 0.15s, box-shadow 0.15s; }
.c-post-card:hover { border-color: var(--color-accent); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }
.c-posts--news .c-post-card { flex-direction: row; }
.c-post-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.c-posts--news .c-post-card__img { width: 180px; aspect-ratio: 4/3; flex: none; }
.c-post-card__body { padding: 16px 18px; }
.c-post-card__date { font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.c-post-card__title { font-size: 1.15rem; margin: 4px 0 6px; }
.c-post-card__excerpt { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0; }
.c-posts__empty { color: var(--color-text-secondary); }
.c-post__container { max-width: 760px; }
.c-post__meta { font-size: 0.85rem; color: var(--color-text-secondary); }
.c-post__meta a { color: var(--color-accent); text-decoration: none; }
.c-post__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 6px 0 18px; }
.c-post__hero { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 22px; }
.c-post__back { margin-top: 28px; }
.c-post__back a { color: var(--color-accent); text-decoration: none; }

/* ===== Campaign banner (surface-dark pairs safely with on-dark text in
   every theme, unlike accent which can be near-white) ===== */
.c-campaign-banner {
    background: var(--color-surface-dark); color: var(--color-text-on-dark);
    text-align: center; font-size: 0.92rem; font-weight: 600;
    padding: 12px 18px; line-height: 1.4;
    /* Sits snugly BELOW the fixed nav and stays there while scrolling. */
    position: sticky; top: var(--nav-height); z-index: 90;
}
.c-campaign-banner a { color: inherit; text-decoration: none; display: block; }
.c-campaign-banner a:hover { text-decoration: underline; }

/* ===== Reviews block + review form ===== */
.c-reviews__heading { margin-bottom: var(--space-m); }
.c-reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-m); }
.c-review-card { margin: 0; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.c-review-card__stars { color: #f59e0b; letter-spacing: 2px; font-size: 1.05rem; }
.c-review-card__dim { opacity: 0.25; }
.c-review-card blockquote { margin: 10px 0; font-size: 0.95rem; }
.c-review-card figcaption { font-size: 0.82rem; color: var(--color-text-secondary); font-weight: 600; }
.c-review-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.c-review-star input { position: absolute; opacity: 0; }
.c-review-star span[aria-hidden] { font-size: 2rem; color: var(--color-border); cursor: pointer; transition: color 0.1s; }
.c-review-star:hover span[aria-hidden],
.c-review-star:hover ~ .c-review-star span[aria-hidden],
.c-review-star:has(input:checked) span[aria-hidden],
.c-review-star:has(input:checked) ~ .c-review-star span[aria-hidden] { color: #f59e0b; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ===== Consent banner (optional, off by default) ===== */
.c-consent {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
    max-width: 520px; margin: 0 auto;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 16px 18px; font-size: 0.88rem;
}
.c-consent p { margin: 0 0 12px; }
.c-consent__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ===== Newsletter block ===== */
.c-newsletter__row { display: flex; gap: 8px; }
.c-newsletter__row input[type=email] {
    flex: 1; padding: 12px 14px; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); font-size: 0.95rem; font-family: inherit;
    background: var(--color-surface); color: var(--color-text);
}
.c-newsletter__consent { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 8px; }
.c-newsletter__done { font-weight: 600; color: var(--color-accent); }

/* ---- Slider block: one slide at a time, arrows/dots/swipe or autoplay -- */
.c-slider__viewport { position: relative; }
.c-slider__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 96px; height: 160px;
    border: 0; background: none; padding: 0;
    color: #000; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.85; z-index: 2;
}
.c-slider__arrow svg { width: 72px; height: 72px; }
.c-slider__arrow:hover { opacity: 1; }
.c-slider__arrow:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.c-slider__arrow--prev { left: 12px; }
.c-slider__arrow--next { right: 12px; }
.c-slider__dots {
    display: flex; gap: 8px; justify-content: center; margin-top: 12px;
}
.c-slider__dots:empty { display: none; }
.c-slider__dot {
    width: 10px; height: 10px; border-radius: 999px; border: 0;
    padding: 0; cursor: pointer; background: var(--color-border);
}
.c-slider__dot.is-active { background: var(--color-text); }

.c-slider__track {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
}
.c-slider__track::-webkit-scrollbar { display: none; }
.c-slider__slide {
    margin: 0; flex: 0 0 100%; scroll-snap-align: start;
    position: relative;
}
.c-slider__slide img {
    display: block; width: 100%; height: auto;
    max-height: 520px; object-fit: cover;
    border-radius: var(--radius-md);
}
.c-slider__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 14px; font-size: 0.85rem;
    color: var(--color-text-on-dark, #fff);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ---- Catalog images: card media + hatched placeholder for imageless ---- */
.c-cat-media {
    display: block; height: 150px; overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.c-cat-media .c-cat-media__img,
.c-cat-media img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Service detail: the image at the top of the right column. Rounding
   follows the theme's own radius token (0 in sharp-cornered themes). */
.c-service-detail__image { display: block; width: 100%; height: auto; }
.c-cat-media--empty {
    background: repeating-linear-gradient(
        45deg,
        transparent, transparent 10px,
        var(--color-border) 10px, var(--color-border) 11px
    );
}
.c-pricing-index__card--media { padding: 0; overflow: hidden; }
.c-pricing-index__card--media > .c-pricing-index__card-title { padding: var(--space-m) var(--space-xl) 0; }
.c-pricing-index__card--media > .c-service-card__desc { padding: 0 var(--space-xl); }
.c-pricing-index__card--media > .c-pricing-index__card-arrow { padding: 0 var(--space-xl) var(--space-xl); }
.c-service-detail__media { margin: 0 0 var(--space-lg); }
.c-service-detail__img,
.c-service-detail__media img {
    display: block; width: 100%; max-height: 380px;
    object-fit: cover; border-radius: var(--radius-md);
}

/* ---- Cart lines: quantity steppers ------------------------------------- */
.bk-cart__qty { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.bk-cart__qty-btn {
    width: 22px; height: 22px; border-radius: 999px;
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text); font-size: 0.9rem; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.bk-cart__qty-btn:hover { border-color: var(--color-accent); }
.bk-cart__qty-n { min-width: 16px; text-align: center; font-weight: 700; font-size: 0.85rem; }

.c-price-card__comment { margin: 6px 0 0; font-size: 0.8rem; color: var(--color-text-secondary); }

/* ===== MAP BLOCK ===== */
/* The plate is the pre-consent stand-in; the iframe replaces it on click. */
.c-map { padding: var(--space-2xl) 0; }
.c-map__heading { font-size: 1.75rem; margin-bottom: var(--space-m); }
.c-map__body { color: var(--color-text-secondary); max-width: 65ch; margin-bottom: var(--space-l); }
.c-map__plate {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    min-height: 340px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; overflow: hidden;
}
.c-map--full .c-map__plate { border-radius: 0; }
.c-map__plate.is-loaded { border: 0; background: none; }
.c-map__plate-inner { padding: var(--space-xl); }
.c-map__plate-inner svg { color: var(--color-accent); margin-bottom: var(--space-s); }
.c-map__plate-addr { font-weight: 600; margin-bottom: var(--space-m); }
.c-map__plate-note { font-size: 0.85rem; color: var(--color-text-secondary); margin-top: var(--space-s); }
.c-map__iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.c-map__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.c-map--split .c-map__body { margin-bottom: 0; }
@media (max-width: 760px) {
    .c-map__grid { grid-template-columns: 1fr; }
    .c-map--reverse .c-map__media { order: 2; }
}

/* ===== PRICE GROUP CHOICE ===== */
/* The variant group is the page's primary decision - card-sized, not tabs. */
.c-price-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-m);
    margin-bottom: var(--space-xl);
}
.c-price-choice__card {
    display: block;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-l);
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color 0.12s, background 0.12s;
}
.c-price-choice__card strong { display: block; font-size: 1.15rem; margin-bottom: 0.2rem; }
.c-price-choice__card small { color: var(--color-text-secondary); }
.c-price-choice__card:hover { border-color: var(--color-accent); }
.c-price-choice__card.is-active {
    border-color: var(--color-accent);
    background: var(--color-surface);
}

/* ===== PRICING SPACING + CATALOG GRID (overrides - keep after base) ===== */
/* Category headings on /priser/ sat flush against the table above.
   NOTE: no bare :first-child reset here - group headings are first child
   of stacked wrapper divs, so "first child" does NOT mean "nothing above".
   Only the top of a group SECTION (right under the chooser cards) resets. */
.c-pricing__group-title { margin-top: var(--space-2xl); }
.c-price-section > .c-pricing__group-title:first-child { margin-top: 0; }
/* /tjanster/: four cards per row got cramped - 320px min caps it at three. */
.c-pricing-index__grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ===== BLOCK RHYTHM (overrides - keep after base) =====
   Every block is a section with 8rem padding top AND bottom, so two
   stacked blocks put 16rem between them. The page template wraps each
   block in <div id="block-N">, which lets neighbours halve the paddings
   that face each other: 4+4 = 8rem between blocks, full 8rem kept at the
   top of the first and the bottom of the last. Browsers without :has()
   just keep the roomier spacing. */
[id^="block-"]:has(+ [id^="block-"]) > section { padding-bottom: var(--space-2xl); }
[id^="block-"] + [id^="block-"] > section { padding-top: var(--space-2xl); }

/* A standalone headline block inherited the 6rem margin meant for
   section heads INSIDE composite sections - it pushed the title far off
   vertical center. Equal padding above and below centers it. */
.c-headline .c-section-head { margin-bottom: 0; }

/* The button block is a single button in a tinted band - 8rem of band
   above and below it was absurd. (The neighbour rules above win on
   specificity with the same value, so the band stays this size.) */
.c-cta { padding: var(--space-2xl) 0; }