/*
Theme Name: Basic Commercial
Theme URI: https://wpops.land/themes/basic-commercial
Author: WPOps Land
Author URI: https://wpops.land
Description: A dark, metal-and-accent block theme for small commercial and service businesses - trades, detailing, garages, cleaning, grounds care. Ships a full pattern library (hero, services, tiered pricing, before/after, gallery, testimonials, FAQ, opening hours, contact) so pages are assembled in the editor, and role-named colour tokens so a child theme can rebrand it without rewriting CSS.
Version: 1.2.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: basic-commercial
Tags: full-site-editing, block-patterns, block-styles, dark-mode, custom-colors, custom-logo, custom-menu, editor-style, wide-blocks, business

Basic Commercial WordPress Theme
Copyright (C) 2026 WPOps Land
*/

/* =============================================================================
   Tokens

   Everything below reads from the theme.json presets, so a child theme (or a
   Global Styles edit in the Site Editor) repaints the whole UI by changing
   the palette - never by overriding these rules.
   ============================================================================= */
:root {
    --bc-base: var(--wp--preset--color--base, #0b0d10);
    --bc-surface: var(--wp--preset--color--surface, #14181d);
    --bc-surface-2: var(--wp--preset--color--surface-2, #1b2027);
    --bc-line: var(--wp--preset--color--line, #232a32);
    --bc-line-strong: var(--wp--preset--color--line-strong, #313a45);

    --bc-text: var(--wp--preset--color--text, #edf1f4);
    --bc-text-secondary: var(--wp--preset--color--text-secondary, #b7c0c9);
    --bc-text-muted: var(--wp--preset--color--text-muted, #8b96a1);
    --bc-text-dim: var(--wp--preset--color--text-dim, #7b8590);

    --bc-metal: var(--wp--preset--color--metal, #e6ebef);
    --bc-metal-dark: var(--wp--preset--color--metal-dark, #a7b2bc);
    --bc-metal-gradient: var(--wp--preset--gradient--metal, linear-gradient(180deg, #fff 0%, #e6ebef 34%, #a7b2bc 54%, #dce3e8 74%, #8d98a2 100%));

    /* Accent as bare RGB channels, so the glow/shadow rgba() below can be
       retuned by a child theme or style variation. Keep in step with
       --bc-accent above; theme.json sets it via settings.custom.accentRgb. */
    --bc-accent-rgb: var(--wp--custom--accent-rgb, 41, 182, 246);

    --bc-accent: var(--wp--preset--color--accent, #29b6f6);
    --bc-accent-light: var(--wp--preset--color--accent-light, #7dd8ff);
    --bc-accent-dark: var(--wp--preset--color--accent-dark, #0b84c4);
    --bc-glow: var(--wp--preset--gradient--glow, radial-gradient(ellipse at 50% 0%, rgba(var(--bc-accent-rgb), .18) 0%, rgba(var(--bc-accent-rgb), 0) 70%));

    --bc-tier-1: var(--wp--preset--color--tier-1, #c08a4b);
    --bc-tier-2: var(--wp--preset--color--tier-2, #c9d1d9);
    --bc-tier-3: var(--wp--preset--color--tier-3, #e6c260);

    --bc-radius-sm: 6px;
    --bc-radius: 12px;
    --bc-radius-pill: 999px;

    --bc-shadow-card: var(--wp--preset--shadow--card, 0 10px 30px rgba(0, 0, 0, .45));
    --bc-shadow-lift: var(--wp--preset--shadow--lift, 0 18px 40px rgba(0, 0, 0, .55));
    --bc-shadow-glow: var(--wp--preset--shadow--glow, 0 0 24px rgba(var(--bc-accent-rgb), .22));

    --bc-transition: .25s cubic-bezier(.4, 0, .2, 1);
    --bc-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* Brushed/carbon weave - a couple of hundred bytes, sits under content */
    --bc-texture: repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 5px);
    /* The lit top edge that makes a panel read as a physical surface */
    --bc-edge: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16) 22%, rgba(255, 255, 255, .16) 78%, transparent);
}

/* =============================================================================
   Base
   ============================================================================= */
body {
    background-color: var(--bc-base);
    color: var(--bc-text-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wp-site-blocks {
    overflow-x: clip;
}

::selection {
    background: var(--bc-accent);
    color: var(--bc-base);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select, summary):focus-visible {
    outline: 2px solid var(--bc-accent-light);
    outline-offset: 3px;
    border-radius: 2px;
}

img {
    max-width: 100%;
    height: auto;
}

/* =============================================================================
   Typography helpers
   ============================================================================= */

/* Eyebrow label above a section heading */
.is-style-eyebrow,
.eyebrow {
    color: var(--bc-accent);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

/* Brushed-metal display text. Falls back to solid metal where
   background-clip:text is unsupported. */
.is-style-metal {
    color: var(--bc-metal);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .is-style-metal {
        background: var(--bc-metal-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        /* Bevel: a hard dark edge under the glyph plus a cold halo, so the
           display type sits in the page the way the logo sits on the van */
        text-shadow:
            0 2px 0 rgba(0, 0, 0, .55),
            0 4px 12px rgba(0, 0, 0, .45),
            0 0 40px rgba(var(--bc-accent-rgb), .16);
    }
}

.lead,
.is-style-lead {
    color: var(--bc-text-secondary);
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.6;
}

.subtitle {
    color: var(--bc-text-muted);
}

/* =============================================================================
   Header
   ============================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 13, 16, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bc-line);
    padding-block: .75rem;
    margin-bottom: 0;
}

.site-header-inner {
    gap: 1.5rem;
}

.site-branding {
    align-items: center;
    gap: .75rem;
}

.site-branding img,
.custom-logo {
    height: auto;
    max-height: 52px;
    width: auto;
}

.site-branding a {
    text-decoration: none;
}

.primary-navigation a {
    color: var(--bc-text-secondary);
    padding: .4rem 0;
    position: relative;
    transition: color var(--bc-transition);
}

.primary-navigation a:hover,
.primary-navigation .current-menu-item > a {
    color: var(--bc-text);
    text-decoration: none;
}

.primary-navigation a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--bc-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--bc-transition);
}

.primary-navigation a:hover::after,
.primary-navigation .current-menu-item > a::after {
    transform: scaleX(1);
}

/* Phone number sat next to the header CTA */
.header-phone a {
    color: var(--bc-text);
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Mobile navigation overlay */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--bc-base);
    padding-top: 4rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: var(--bc-text);
    font-family: var(--wp--preset--font-family--display);
    font-size: 1.5rem;
    text-transform: uppercase;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
    color: var(--bc-accent);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    color: var(--bc-text);
}

/* Core's open button draws two bars, which reads as an equals sign.
   Three bars, drawn with a border and two shadows - no SVG, no mask. */
.wp-block-navigation__responsive-container-open svg {
    display: none;
}

.wp-block-navigation__responsive-container-open::before {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
    margin: 2px 0 16px;
}

/* =============================================================================
   Buttons
   ============================================================================= */
.wp-block-button__link,
.wp-element-button {
    border-radius: var(--bc-radius-sm);
    background-image: linear-gradient(135deg, var(--bc-accent-dark) 0%, var(--bc-accent) 55%, var(--bc-accent-light) 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 22px rgba(var(--bc-accent-rgb), .3);
    transition: box-shadow .3s ease, filter .3s ease, transform .45s var(--bc-spring);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 34px rgba(var(--bc-accent-rgb), .45);
    filter: brightness(1.06);
    transform: translateY(-2px) scale(1.02);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-metal .wp-block-button__link {
    background-image: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 1px solid var(--bc-line-strong);
    box-shadow: none;
    color: var(--bc-text);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: rgba(var(--bc-accent-rgb), .08);
    border-color: var(--bc-accent);
    color: var(--bc-text);
}

/* Brushed-metal button - the "secondary but loud" option */
.wp-block-button.is-style-metal .wp-block-button__link {
    background: var(--bc-metal-gradient);
    border: 1px solid rgba(255, 255, 255, .5);
    color: #0b0d10;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.wp-block-button.is-style-metal .wp-block-button__link:hover {
    filter: brightness(1.08);
    color: #0b0d10;
}

/* =============================================================================
   Sections
   ============================================================================= */
.wp-block-group.is-style-section {
    padding-block: var(--wp--preset--spacing--60);
    border-top: 1px solid var(--bc-line);
}

.wp-block-group.is-style-section:first-child {
    border-top: 0;
}

.section-intro {
    color: var(--bc-text-muted);
    margin-bottom: var(--wp--preset--spacing--40);
    max-width: 42rem;
}

/* Full-bleed accent band (CTA strips) */
.wp-block-group.is-style-band {
    background:
        var(--bc-texture),
        linear-gradient(135deg, var(--bc-surface) 0%, var(--bc-surface-2) 100%);
    padding-block: calc(var(--wp--preset--spacing--50) + 2vw);
    position: relative;
    overflow: hidden;
    /* Angled joins top and bottom - vinyl-wrap language, not a hairline */
    clip-path: polygon(0 2.2vw, 100% 0, 100% calc(100% - 2.2vw), 0 100%);
}

.wp-block-group.is-style-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bc-glow);
    pointer-events: none;
}

.wp-block-group.is-style-band > * {
    position: relative;
}

/* =============================================================================
   Hero
   ============================================================================= */
.wp-block-group.is-style-hero {
    position: relative;
    padding-block: clamp(4.5rem, 13vw, 9rem);
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 120% 85% at 50% -15%, rgba(var(--bc-accent-rgb), .22), transparent 62%),
        linear-gradient(180deg, #10161d 0%, var(--bc-base) 72%);
    /* Shallow diagonal join into whatever follows */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2vw), 0 100%);
}

/* Diagonal sheen - the light sweeping across a wet panel */
.wp-block-group.is-style-hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        linear-gradient(104deg, transparent 28%, rgba(255, 255, 255, .07) 43%, rgba(255, 255, 255, .015) 52%, transparent 64%),
        var(--bc-texture);
    pointer-events: none;
}

/* Vignette, so the middle of the hero carries the eye */
.wp-block-group.is-style-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(0, 0, 0, .5) 100%);
    pointer-events: none;
}

.wp-block-group.is-style-hero > * {
    position: relative;
}

.wp-block-group.is-style-hero .wp-block-buttons {
    justify-content: center;
    margin-top: var(--wp--preset--spacing--30);
}

/* Hero sat on a cover image */
.wp-block-cover.is-style-hero {
    min-height: clamp(28rem, 60vh, 40rem);
}

.wp-block-cover.is-style-hero .wp-block-cover__background {
    background: linear-gradient(180deg, rgba(11, 13, 16, .55) 0%, rgba(11, 13, 16, .92) 100%);
}

/* Small proof-point row under a hero */
.trust-strip {
    color: var(--bc-text-muted);
    font-size: var(--wp--preset--font-size--small);
    gap: 1.5rem 2.5rem;
    margin-top: var(--wp--preset--spacing--40);
}

.trust-strip p {
    margin: 0;
}

.trust-strip strong {
    color: var(--bc-text);
}

/* =============================================================================
   Cards
   ============================================================================= */
.wp-block-group.is-style-card,
.wp-block-group.is-style-glass-card {
    position: relative;
    background:
        var(--bc-texture),
        linear-gradient(155deg, var(--bc-surface) 0%, var(--bc-surface-2) 100%);
    border: 1px solid var(--bc-line);
    border-radius: 14px;
    box-shadow: var(--bc-shadow-card);
    padding: var(--wp--preset--spacing--30);
    height: 100%;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, transform .45s var(--bc-spring);
}

/* Lit top edge - the difference between a box and a panel */
.wp-block-group.is-style-card::before,
.wp-block-group.is-style-glass-card::before,
.wp-block-group.is-style-price-card::before,
.wp-block-group.is-style-contact-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bc-edge);
    pointer-events: none;
}

.wp-block-group.is-style-glass-card {
    background: rgba(27, 32, 39, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wp-block-group.is-style-card:hover,
.wp-block-group.is-style-glass-card:hover {
    border-color: rgba(var(--bc-accent-rgb), .45);
    box-shadow: var(--bc-shadow-lift), 0 0 32px rgba(var(--bc-accent-rgb), .28);
    transform: translateY(-4px);
}

.wp-block-group.is-style-card > :last-child,
.wp-block-group.is-style-glass-card > :last-child {
    margin-bottom: 0;
}

.wp-block-group.is-style-card img {
    border-radius: calc(var(--bc-radius) - 4px);
}

/* Card grid: equal-height auto-fit columns that stay readable on tablets */
.wp-block-columns.is-style-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--wp--preset--spacing--30);
}

.wp-block-columns.is-style-card-grid > .wp-block-column {
    flex-basis: auto !important;
    margin-left: 0 !important;
}

.wp-block-columns.is-style-card-grid > .wp-block-column > .wp-block-group {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Push a card's button block to the bottom so grids line up */
.wp-block-columns.is-style-card-grid .wp-block-group > .wp-block-buttons:last-child {
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--20);
}

/* Small pill badge - "Most popular", durations, tier labels */
.badge {
    display: inline-block;
    background: rgba(var(--bc-accent-rgb), .12);
    border: 1px solid rgba(var(--bc-accent-rgb), .35);
    border-radius: var(--bc-radius-pill);
    color: var(--bc-accent);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    padding: .25rem .75rem;
    text-transform: uppercase;
}

.badge-muted {
    background: rgba(255, 255, 255, .04);
    border-color: var(--bc-line-strong);
    color: var(--bc-text-muted);
}

/* =============================================================================
   Lists
   ============================================================================= */
.wp-block-list.is-style-check-list {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-check-list li {
    padding-left: 1.75rem;
    position: relative;
    margin-bottom: .5rem;
}

/* Chevron bullets, lifted from the printed price list */
.wp-block-list.is-style-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: .38em;
    height: .38em;
    border-top: 2px solid var(--bc-accent);
    border-right: 2px solid var(--bc-accent);
    transform: rotate(45deg);
}

/* Label / value rows - opening hours, specs, "what's included" */
.wp-block-list.is-style-spec-list {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-spec-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--bc-line);
    padding: .6rem 0;
    margin: 0;
}

.wp-block-list.is-style-spec-list li:last-child {
    border-bottom: 0;
}

.wp-block-list.is-style-spec-list strong {
    color: var(--bc-text);
    font-weight: 600;
}

/* =============================================================================
   Pricing tiers
   ============================================================================= */
.wp-block-group.is-style-price-card,
.wp-block-group.is-style-price-card-featured {
    background:
        var(--bc-texture),
        linear-gradient(155deg, var(--bc-surface) 0%, var(--bc-surface-2) 100%);
    border: 1px solid var(--bc-line);
    border-radius: 14px;
    box-shadow: var(--bc-shadow-card);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
    position: relative;
    transition: border-color var(--bc-transition), transform var(--bc-transition), box-shadow var(--bc-transition);
}

.wp-block-group.is-style-price-card:hover,
.wp-block-group.is-style-price-card-featured:hover {
    border-color: rgba(var(--bc-accent-rgb), .45);
    box-shadow: var(--bc-shadow-lift);
    transform: translateY(-3px);
}

.wp-block-group.is-style-price-card-featured {
    border-color: rgba(var(--bc-accent-rgb), .75);
    box-shadow: var(--bc-shadow-card), 0 0 38px rgba(var(--bc-accent-rgb), .3);
    transform: translateY(-6px) scale(1.02);
    z-index: 1;
}

@media (max-width: 781px) {
    .wp-block-group.is-style-price-card-featured {
        transform: none;
    }
}

.wp-block-group.is-style-price-card-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--bc-radius);
    background: var(--bc-glow);
    pointer-events: none;
}

.wp-block-group.is-style-price-card-featured > * {
    position: relative;
}

/* The price itself */
.price {
    color: var(--bc-text);
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1;
    margin: .25rem 0 .25rem;
}

.price-note {
    color: var(--bc-text-muted);
    font-size: var(--wp--preset--font-size--small);
    margin-top: 0;
}

/* Tier accents - a child theme repaints these through the palette */
.tier-1 .price,
.tier-1 h3 {
    color: var(--bc-tier-1);
}

.tier-2 .price,
.tier-2 h3 {
    color: var(--bc-tier-2);
}

.tier-3 .price,
.tier-3 h3 {
    color: var(--bc-tier-3);
}

.tier-1 { border-top: 3px solid var(--bc-tier-1); }
.tier-2 { border-top: 3px solid var(--bc-tier-2); }
.tier-3 { border-top: 3px solid var(--bc-tier-3); }

/* Keep the CTA on the baseline across cards of different length */
.wp-block-group.is-style-price-card > .wp-block-buttons:last-child,
.wp-block-group.is-style-price-card-featured > .wp-block-buttons:last-child {
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--20);
}

/* =============================================================================
   Process steps
   ============================================================================= */
.wp-block-group.is-style-step {
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius);
    counter-increment: bc-step;
    padding: var(--wp--preset--spacing--30);
    padding-top: calc(var(--wp--preset--spacing--30) + 1rem);
    position: relative;
    height: 100%;
}

.wp-block-group.is-style-step::before {
    content: counter(bc-step, decimal-leading-zero);
    position: absolute;
    top: -.75rem;
    left: var(--wp--preset--spacing--30);
    background: var(--bc-base);
    border: 1px solid var(--bc-accent);
    border-radius: var(--bc-radius-pill);
    color: var(--bc-accent);
    font-family: var(--wp--preset--font-family--display);
    font-size: .875rem;
    line-height: 1;
    padding: .45rem .7rem;
}

.steps-grid {
    counter-reset: bc-step;
}

/* =============================================================================
   Gallery
   ============================================================================= */
.wp-block-columns.is-style-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--wp--preset--spacing--20);
}

.wp-block-columns.is-style-gallery-grid > .wp-block-column {
    flex-basis: auto !important;
    margin-left: 0 !important;
}

.wp-block-columns.is-style-gallery-grid figure,
.wp-block-columns.is-style-gallery-grid .wp-block-image {
    margin: 0;
    overflow: hidden;
    border-radius: var(--bc-radius);
}

.wp-block-columns.is-style-gallery-grid img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.wp-block-columns.is-style-gallery-grid figure:hover img {
    transform: scale(1.04);
}

.wp-block-columns.is-style-gallery-grid figcaption {
    color: var(--bc-text-muted);
    font-size: var(--wp--preset--font-size--small);
    padding-top: .5rem;
}

/* Framed / plate image styles */
.wp-block-image.is-style-framed img {
    border: 1px solid var(--bc-line-strong);
    border-radius: var(--bc-radius);
    box-shadow: var(--bc-shadow-card);
}

.wp-block-image.is-style-plate img {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--bc-radius);
    box-shadow: var(--bc-shadow-card), 0 0 0 6px rgba(255, 255, 255, .03);
}

/* =============================================================================
   Before / after comparison

   Progressive enhancement: without JS (or without the range input) the two
   images simply stack, each with its own caption.
   ============================================================================= */
.wp-block-columns.is-style-before-after {
    display: grid;
    gap: var(--wp--preset--spacing--20);
}

.bc-compare {
    position: relative;
    border-radius: var(--bc-radius);
    overflow: hidden;
    border: 1px solid var(--bc-line);
    box-shadow: var(--bc-shadow-card);
    line-height: 0;
}

.bc-compare > .wp-block-column,
.bc-compare figure {
    margin: 0;
}

.bc-compare img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* The second column is clipped to the slider position */
.bc-compare > .wp-block-column:last-child {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--bc-compare-pos, 50%));
}

.bc-compare figcaption {
    position: absolute;
    bottom: .75rem;
    left: .75rem;
    background: rgba(11, 13, 16, .75);
    border-radius: var(--bc-radius-pill);
    color: var(--bc-text);
    font-size: .75rem;
    letter-spacing: .08em;
    line-height: 1;
    padding: .4rem .75rem;
    text-transform: uppercase;
}

.bc-compare > .wp-block-column:last-child figcaption {
    left: auto;
    right: .75rem;
}

.bc-compare-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 3;
}

.bc-compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--bc-compare-pos, 50%);
    width: 2px;
    background: var(--bc-metal);
    box-shadow: var(--bc-shadow-glow);
    pointer-events: none;
    z-index: 2;
}

.bc-compare-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-50%, -50%);
    border: 2px solid var(--bc-metal);
    border-radius: 50%;
    background: rgba(11, 13, 16, .6);
}

.bc-compare-range:focus-visible + .bc-compare-handle::after {
    border-color: var(--bc-accent-light);
    box-shadow: var(--bc-shadow-glow);
}

/* =============================================================================
   Testimonials
   ============================================================================= */
.wp-block-quote.is-style-testimonial {
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    border-left-width: 1px;
    border-radius: var(--bc-radius);
    box-shadow: var(--bc-shadow-card);
    height: 100%;
    margin: 0;
    padding: var(--wp--preset--spacing--30);
}

.wp-block-quote.is-style-testimonial p {
    color: var(--bc-text-secondary);
}

.wp-block-quote.is-style-testimonial cite {
    color: var(--bc-text-muted);
    display: block;
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    margin-top: .75rem;
}

.stars {
    color: var(--bc-tier-3);
    letter-spacing: .15em;
    margin-bottom: .5rem;
}

/* =============================================================================
   FAQ (core/details)
   ============================================================================= */
.wp-block-details.is-style-faq {
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius);
    margin-bottom: .75rem;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    transition: border-color var(--bc-transition);
}

.wp-block-details.is-style-faq[open] {
    border-color: rgba(var(--bc-accent-rgb), .4);
}

.wp-block-details.is-style-faq summary {
    color: var(--bc-text);
    cursor: pointer;
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    list-style: none;
    padding-right: 2rem;
    position: relative;
}

.wp-block-details.is-style-faq summary::-webkit-details-marker {
    display: none;
}

.wp-block-details.is-style-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bc-accent);
    font-size: 1.5rem;
    line-height: 1;
}

.wp-block-details.is-style-faq[open] summary::after {
    content: "\2212";
}

.wp-block-details.is-style-faq > :not(summary) {
    padding-top: .75rem;
}

/* =============================================================================
   Contact panel, tables, forms
   ============================================================================= */
.wp-block-group.is-style-contact-panel {
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius);
    box-shadow: var(--bc-shadow-card);
    padding: var(--wp--preset--spacing--40);
}

.contact-line {
    align-items: center;
    display: flex;
    gap: .6rem;
    margin-bottom: .6rem;
}

.contact-line strong {
    color: var(--bc-text-muted);
    font-size: var(--wp--preset--font-size--x-small);
    letter-spacing: .1em;
    min-width: 5.5rem;
    text-transform: uppercase;
}

.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table td,
.wp-block-table th {
    border: 0;
    border-bottom: 1px solid var(--bc-line);
    padding: .65rem .5rem;
}

.wp-block-table th {
    color: var(--bc-text);
    font-weight: 600;
    text-align: left;
}

.wp-block-table tr:last-child td {
    border-bottom: 0;
}

/* Form controls (Contact Form 7, comment form, search) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
    background: var(--bc-surface-2);
    border: 1px solid var(--bc-line-strong);
    border-radius: var(--bc-radius-sm);
    /* width:100% below is the field's *outer* width - without this the padding
       and border are added on top and every control overflows its container to
       the right (visible in the CF7 contact panel). Scoped to form controls
       rather than a global reset: the rest of the theme is sized for
       content-box. */
    box-sizing: border-box;
    color: var(--bc-text);
    font-family: inherit;
    font-size: 1rem;
    padding: .7rem .9rem;
    width: 100%;
}

input::placeholder,
textarea::placeholder {
    color: var(--bc-text-dim);
}

input[type="submit"],
button[type="submit"] {
    background: var(--bc-accent);
    border: 0;
    border-radius: var(--bc-radius-sm);
    color: var(--bc-base);
    cursor: pointer;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    transition: background-color var(--bc-transition);
    width: auto;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background: var(--bc-accent-light);
}

.wpcf7-form label {
    color: var(--bc-text-muted);
    display: block;
    font-size: var(--wp--preset--font-size--small);
    margin-bottom: 1rem;
}

.wpcf7-not-valid-tip {
    color: var(--wp--preset--color--error, #e8483e);
    font-size: var(--wp--preset--font-size--small);
}

.wpcf7 form .wpcf7-response-output {
    border-color: var(--bc-line-strong);
    border-radius: var(--bc-radius-sm);
    color: var(--bc-text-secondary);
    margin: 1rem 0 0;
    padding: .75rem 1rem;
}

/* =============================================================================
   Posts
   ============================================================================= */
.site-main {
    padding-block: var(--wp--preset--spacing--50);
    min-height: 50vh;
}

.wp-block-post-title a {
    color: var(--bc-text);
    text-decoration: none;
}

.wp-block-post-title a:hover {
    color: var(--bc-accent);
}

.wp-block-post-date,
.wp-block-post-terms {
    color: var(--bc-text-dim);
}

.wp-block-post-featured-image img {
    border-radius: var(--bc-radius);
}

.wp-block-query-pagination {
    margin-top: var(--wp--preset--spacing--40);
}

/* =============================================================================
   Footer
   ============================================================================= */
.site-footer {
    background: var(--bc-surface);
    border-top: 1px solid var(--bc-line);
    color: var(--bc-text-muted);
    margin-top: var(--wp--preset--spacing--60);
    padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.site-footer h2,
.site-footer h3 {
    font-size: var(--wp--preset--font-size--x-small);
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bc-text-muted);
}

.site-footer a {
    color: var(--bc-text-secondary);
}

.site-footer a:hover {
    color: var(--bc-accent);
}

.site-footer .wp-block-navigation {
    gap: .35rem;
}

.footer-legal {
    border-top: 1px solid var(--bc-line);
    color: var(--bc-text-dim);
    font-size: var(--wp--preset--font-size--small);
    margin-top: var(--wp--preset--spacing--40);
    padding-top: var(--wp--preset--spacing--20);
}

.footer-legal p {
    margin: 0;
    color: inherit;
}

/* Post content runs full-bleed so hero and band sections can reach the
   viewport edges; the constrained blocks inside it keep the reading width. */
.wp-block-post-content.alignfull > .wp-block-group.is-style-section,
.wp-block-post-content.alignfull > .wp-block-columns {
    padding-inline: var(--wp--preset--spacing--30);
}

/* =============================================================================
   Brand motifs: chevrons, angled joins, texture
   ============================================================================= */

/* Eyebrow labels carry the flyer's chevron.

   Drawn with borders: no glyph, no data URI, no mask. Earlier versions used
   \203A and then an SVG background - both were present and valid in the
   served stylesheet but never painted on this site, so this version depends
   on nothing but the box itself. The tag is included in the selector to beat
   anything matching at plain class specificity. */
p.is-style-eyebrow::before,
.is-style-eyebrow::before,
.eyebrow::before {
    content: "";
    display: inline-block;
    width: .42em;
    height: .42em;
    margin-right: .6em;
    margin-bottom: .08em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
}

/* Stacked-chevron divider between consecutive sections, in place of a rule */
.wp-block-group.is-style-section + .wp-block-group.is-style-section::before,
.wp-block-group.is-style-band + .wp-block-group.is-style-section::before {
    content: "";
    display: block;
    height: 26px;
    margin-bottom: var(--wp--preset--spacing--40);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='26' viewBox='0 0 34 26'%3E%3Cg fill='none' stroke='%2329b6f6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 4l13 8 13-8'/%3E%3Cpath d='M4 14l13 8 13-8'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: .55;
}

/* Sections alternate weight so the page is not one flat sheet */
.wp-block-group.is-style-section:nth-of-type(even) {
    background:
        var(--bc-texture),
        linear-gradient(180deg, rgba(255, 255, 255, .016) 0%, transparent 45%);
    border-top: 0;
}

/* Angled join under the last section before the footer */
.site-footer {
    position: relative;
    clip-path: polygon(0 1.6vw, 100% 0, 100% 100%, 0 100%);
}

/* Contact panel and testimonials get the same panel treatment as cards */
.wp-block-group.is-style-contact-panel,
.wp-block-quote.is-style-testimonial {
    position: relative;
    background:
        var(--bc-texture),
        linear-gradient(155deg, var(--bc-surface) 0%, var(--bc-surface-2) 100%);
    border-radius: 14px;
    overflow: hidden;
}

/* Badges glow rather than sit flat */
.badge {
    box-shadow: 0 0 16px rgba(var(--bc-accent-rgb), .18);
    text-shadow: 0 0 12px rgba(var(--bc-accent-rgb), .5);
}

.badge-muted {
    box-shadow: none;
    text-shadow: none;
}

/* The price itself is the loudest thing on a package card */
.price {
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 30px rgba(var(--bc-accent-rgb), .18);
}

/* Tier top rules become gradients rather than flat bars */
.tier-1 { border-top: 3px solid transparent; border-image: linear-gradient(90deg, transparent, var(--bc-tier-1), transparent) 1; }
.tier-2 { border-top: 3px solid transparent; border-image: linear-gradient(90deg, transparent, var(--bc-tier-2), transparent) 1; }
.tier-3 { border-top: 3px solid transparent; border-image: linear-gradient(90deg, transparent, var(--bc-tier-3), transparent) 1; }

/* =============================================================================
   Scroll reveal

   The hiding class is added by JS, never in the base CSS: with JS off, or
   under prefers-reduced-motion, everything renders normally.
   ============================================================================= */
.bc-reveal {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

.bc-reveal.bc-in {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .7s var(--bc-spring);
}

/* Printing never scrolls, so nothing may be left mid-reveal */
@media print {
    .bc-reveal {
        opacity: 1;
        transform: none;
    }
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 781px) {
    .site-header {
        padding-block: .5rem;
    }

    .site-header-inner {
        gap: .75rem;
    }

    .header-phone {
        display: none;
    }

    .wp-block-group.is-style-hero {
        padding-block: 3rem;
    }

    .trust-strip {
        gap: .75rem 1.5rem;
    }

    .wp-block-group.is-style-contact-panel {
        padding: var(--wp--preset--spacing--30);
    }

    .wp-block-list.is-style-spec-list li {
        flex-direction: column;
        gap: .1rem;
    }
}

/* =============================================================================
   Motion and print
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .wp-block-group.is-style-card:hover,
    .wp-block-group.is-style-price-card:hover,
    .wp-block-group.is-style-price-card-featured:hover,
    .wp-block-button__link:hover,
    .wp-element-button:hover {
        transform: none;
    }

    .wp-block-columns.is-style-gallery-grid figure:hover img {
        transform: none;
    }

    .bc-reveal,
    .bc-reveal.bc-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media print {
    .site-header,
    .site-footer,
    .wp-block-buttons {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }
}