/* ============================================================================
   LAYOUT WIDE — full-width responsive layout (no forced 480px mobile frame).
   Loaded only when a page sets $full_width_layout = true before header.php.
   Everything here is scoped to body.layout-wide so legacy pages are untouched.
   ============================================================================ */

.layout-wide {
    --wide-dark: #1f2429;
    --wide-dark-2: #2a3138;
    --wide-red: #d71635;
    --wide-red-hover: #b5122c;
    /* Two-colour brand palette: red + charcoal. The legacy "green" and
       "beige" tokens are kept as aliases so existing rules resolve to the
       brand colours instead of introducing extra hues. */
    --wide-green: var(--wide-dark);
    --wide-green-hover: var(--wide-dark-2);
    --wide-beige: var(--wide-red);
    --wide-beige-soft: var(--wide-grey);
    --wide-grey: #f4f4f2;
    --wide-text: #221f21;
    --wide-muted: #5f666d;
    --section-y: clamp(3.25rem, 6.5vw, 6rem);
    --radius-lg: 18px;
    /* Safety net: never allow sideways scrolling from a stray element. */
    overflow-x: clip;
    --radius-md: 12px;
    --shadow-card: 0 14px 40px rgba(20, 24, 28, 0.14);
    --shadow-soft: 0 6px 22px rgba(20, 24, 28, 0.08);
}

.layout-wide,
.layout-wide body {
    background: #ffffff;
}

.layout-wide main > section,
.layout-wide main > div.wide-section {
    scroll-margin-top: 90px;
}

/* ---------- Generic section rhythm ---------- */
.wide-section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

.wide-section--tight {
    padding-top: calc(var(--section-y) * 0.6);
    padding-bottom: calc(var(--section-y) * 0.6);
}

.wide-section--grey {
    background: var(--wide-grey);
}

.wide-section--beige {
    background: var(--wide-beige-soft);
}

.wide-section--dark {
    background: var(--wide-dark);
    color: #fff;
}

/* ---------- Scroll reveal (classes added by assets/js/main.js) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.wide-container {
    max-width: 1240px;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
}

.wide-narrow {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Typography ---------- */
.layout-wide .section-kicker {
    font-family: var(--font-heading);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wide-red);
    margin-bottom: 0.75rem;
}

.layout-wide .section-kicker::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 3px;
    background: var(--wide-red);
    border-radius: 2px;
}

.layout-wide .section-kicker--center {
    justify-content: center;
}

.layout-wide .section-kicker--light {
    color: var(--wide-beige);
}

.layout-wide .section-kicker--light::before {
    background: var(--wide-beige);
}

.layout-wide .section-title {
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--wide-text);
}

.layout-wide .section-title--light {
    color: #fff;
}

.layout-wide .section-lead {
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.65;
    color: var(--wide-muted);
}

.layout-wide .section-lead--light {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Buttons ---------- */
.layout-wide .btn-wide {
    font-family: var(--font-heading);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.6rem;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    border: 2px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.layout-wide .btn-wide:hover,
.layout-wide .btn-wide:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    outline: none;
}

.layout-wide .btn-wide--red {
    background: var(--wide-red);
    color: #fff;
}

.layout-wide .btn-wide--red:hover,
.layout-wide .btn-wide--red:focus-visible {
    background: var(--wide-red-hover);
    color: #fff;
}

.layout-wide .btn-wide--green {
    background: var(--wide-green);
    color: #fff;
}

.layout-wide .btn-wide--green:hover,
.layout-wide .btn-wide--green:focus-visible {
    background: var(--wide-green-hover);
    color: #fff;
}

.layout-wide .btn-wide--dark {
    background: var(--wide-dark);
    color: #fff;
}

.layout-wide .btn-wide--dark:hover,
.layout-wide .btn-wide--dark:focus-visible {
    background: #000;
    color: #fff;
}

.layout-wide .btn-wide--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}

.layout-wide .btn-wide--outline-light:hover,
.layout-wide .btn-wide--outline-light:focus-visible {
    background: #fff;
    color: var(--wide-dark);
}

.layout-wide .btn-wide--outline-dark {
    background: transparent;
    color: var(--wide-dark);
    border-color: var(--wide-dark);
}

.layout-wide .btn-wide--outline-dark:hover,
.layout-wide .btn-wide--outline-dark:focus-visible {
    background: var(--wide-dark);
    color: #fff;
}

.layout-wide .btn-wide--lg {
    padding: 1.05rem 2rem;
    font-size: 1.05rem;
}

.layout-wide .btn-wide--block {
    width: 100%;
}

/* ============================================================================
   HERO
   ============================================================================ */
.home-hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    background: var(--wide-dark);
}

/* Background media wrapper: fills the whole hero on desktop; on phones it is
   capped to a sensible height (see the < 992px block further down) so the
   video/photo is not stretched into a tall, unrecognisable portrait crop. */
.home-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.home-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    z-index: 0;
}

video.home-hero__img {
    pointer-events: none;
}

/* Still photo standing in for a hero video. Zoomed 20% so the extra width
   is exactly the room for a 20% left-to-right pan (–10% to +10%). Translate
   is listed before scale so that shift is not enlarged by the zoom. */
.home-hero__img--motion {
    animation: home-hero-drift 15s ease-in-out infinite alternate;
    will-change: transform;
}

/* Five photos: each pans left to right for 15s, then crossfades (~1s) into
   the next. Fade keyframes are 5 × 15s = 75s, so the percentages are fixed
   to that count. */
.home-hero__media--slides .home-hero__img--motion {
    opacity: 0;
    animation-duration: 15s, 75s;
    animation-timing-function: ease-in-out, linear;
    animation-iteration-count: infinite, infinite;
    animation-fill-mode: both, both;
    will-change: transform, opacity;
}

.home-hero__media--slides .home-hero__img--motion:nth-child(1) {
    animation-name: home-hero-drift, home-hero-fade-1;
    animation-delay: 0s, 0s;
}

.home-hero__media--slides .home-hero__img--motion:nth-child(2) {
    animation-name: home-hero-drift, home-hero-fade-2;
    animation-delay: 15s, 0s;
}

.home-hero__media--slides .home-hero__img--motion:nth-child(3) {
    animation-name: home-hero-drift, home-hero-fade-3;
    animation-delay: 30s, 0s;
}

.home-hero__media--slides .home-hero__img--motion:nth-child(4) {
    animation-name: home-hero-drift, home-hero-fade-4;
    animation-delay: 45s, 0s;
}

.home-hero__media--slides .home-hero__img--motion:nth-child(5) {
    animation-name: home-hero-drift, home-hero-fade-5;
    animation-delay: 60s, 0s;
}

@keyframes home-hero-drift {
    from {
        transform: translate3d(-10%, 0, 0) scale(1.2);
    }
    to {
        transform: translate3d(10%, 0, 0) scale(1.2);
    }
}

@keyframes home-hero-fade-1 {
    0%, 18.46% { opacity: 1; }
    20%, 98.46% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes home-hero-fade-2 {
    0%, 18.46% { opacity: 0; }
    20%, 38.46% { opacity: 1; }
    40%, 100% { opacity: 0; }
}

@keyframes home-hero-fade-3 {
    0%, 38.46% { opacity: 0; }
    40%, 58.46% { opacity: 1; }
    60%, 100% { opacity: 0; }
}

@keyframes home-hero-fade-4 {
    0%, 58.46% { opacity: 0; }
    60%, 78.46% { opacity: 1; }
    80%, 100% { opacity: 0; }
}

@keyframes home-hero-fade-5 {
    0%, 78.46% { opacity: 0; }
    80%, 98.46% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__img--motion {
        animation: none;
        transform: none;
        opacity: 0;
        will-change: auto;
    }

    .home-hero__img--motion:first-child {
        opacity: 1;
    }
}

.home-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(20, 24, 28, 0.72) 0%, rgba(20, 24, 28, 0.5) 45%, rgba(20, 24, 28, 0.08) 100%),
        linear-gradient(180deg, rgba(20, 24, 28, 0.05) 0%, rgba(20, 24, 28, 0.4) 100%);
}

.home-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: clamp(2.75rem, 6vw, 5.5rem);
    padding-bottom: clamp(2.75rem, 6vw, 5.5rem);
}

/* Service-page variant: red kicker above the availability pill */
.home-hero__kicker {
    margin-bottom: 0.9rem;
}

.home-hero__kicker + .home-hero__availability {
    display: flex;
    width: max-content;
    max-width: 100%;
}

/* Reassurance line under the Call / Book buttons:
   "Available NOW – Real people to advise & assist." (lines open) or
   "Lines open again tomorrow at 7:30am – Real people to advise & assist." */
.home-hero__reassure {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: -0.5rem 0 1.5rem;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}

.home-hero__reassure i {
    color: var(--wide-red);
    font-size: 1.1rem;
    line-height: 1.3;
    flex: 0 0 auto;
}

.home-hero__reassure strong {
    color: #fff;
    font-weight: 800;
}

.home-hero__reassure--closed i {
    color: rgba(255, 255, 255, 0.7);
}

.home-hero__availability {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem 0.45rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.home-hero__availability .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wide-red);
    box-shadow: 0 0 0 4px rgba(215, 22, 53, 0.3);
}

.home-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.3rem);
    line-height: 1.08;
    margin-bottom: 1rem;
    color: #fff;
    max-width: 18ch;
    font-weight: 800;
}

/* Accent words in hero titles: white text on a charcoal "marker" highlight
   so they stay legible over busy / red photography (van, uniforms).
   Toggle with ?hero=invert → white background + black text. */
.home-hero__title span,
.page-hero__title .text-brand-accent {
    display: inline;
    color: #fff;
    background: var(--wide-dark);
    padding: 0.05em 0.3em;
    border-radius: 6px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.25;
}

.hero-invert .home-hero__title span,
.hero-invert .page-hero__title .text-brand-accent {
    color: var(--wide-dark);
    background: #fff;
}

.home-hero__title span {
    margin-left: -0.3em;
}

/* Service headlines are longer than the home one ("Open Your Garage Without
   Lifting a Finger") so give them a little more room before wrapping. */
.home-hero--service .home-hero__title {
    max-width: 22ch;
}

.home-hero__lead {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.55;
    max-width: 44rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.75rem;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.home-hero__actions .btn-wide {
    min-width: 230px;
}

.home-hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
}

.home-hero__points li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.home-hero__points i {
    color: var(--wide-red);
}

.home-hero__trust {
    display: block;
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 10px;
    padding: 0.35rem 0.75rem;
    overflow: visible;
}

.home-hero__trust .trustpilot-widget,
.home-hero__trust .trustpilot-widget iframe {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px;
}

/* Contact card on the right of the hero (Trout-style location card) */
.home-hero__card {
    background: #fff;
    color: var(--wide-text);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.home-hero__card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.home-hero__card .card-sub {
    color: var(--wide-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.home-hero__card .btn-wide {
    margin-bottom: 0.6rem;
}

.home-hero__card .diagnostic {
    margin-top: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px dashed #d9d9d9;
    font-size: 0.92rem;
    line-height: 1.45;
}

.home-hero__card .diagnostic strong {
    display: block;
    font-size: 1rem;
    white-space: nowrap;
}

.home-hero__card .diagnostic__detail {
    display: block;
    margin-top: 0.25rem;
    color: var(--wide-muted);
}

/* Service pages put their own small print here (can be a long sentence) */
.home-hero__card .diagnostic .diagnostic__note {
    white-space: normal;
    font-size: 0.95rem;
    font-weight: 700;
}

.home-hero__card .hours {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--wide-red);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 600;
}

.home-hero__card .hours i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.home-hero__card .hours strong {
    font-weight: 800;
}

/* Lines closed: neutral colour, "Lines open again tomorrow at 7:30am" */
.home-hero__card .hours--closed {
    color: var(--wide-muted);
}

.home-hero__card .hours--closed strong {
    color: var(--wide-text);
}

@media (min-width: 992px) {
    .home-hero__inner {
        min-height: 620px;
        display: flex;
        align-items: center;
    }
}

/* Below desktop the hero buttons already sit directly above the card, so the
   card drops its duplicate Call / Book buttons and keeps the info only. */
@media (max-width: 991.98px) {
    /* ---- Media height cap ----
       The stacked mobile hero (pill, title, lead, buttons, points, strip, card)
       is well over 1000px tall; letting the video cover all of it produced a
       tall portrait crop of a landscape clip. Instead the media only fills a
       landscape-ish band at the top (~3:2 on a phone, capped at 420px) and fades
       into the hero's own charcoal background. The headline sits over the
       video; the lead, buttons, points, trust strip and card flow below it on
       the plain background. */
    .home-hero {
        --hero-media-h: clamp(240px, 68vw, 420px);
    }

    .home-hero__media {
        bottom: auto;
        height: var(--hero-media-h);
    }

    .home-hero__img {
        object-position: center;
    }

    /* The service kicker is red, which disappears on brick and sky. On the
       stacked hero it sits on the photo, so give it the same dark chip as
       the headline and switch the words to white. */
    .home-hero__kicker.section-kicker--light {
        color: #fff;
        background: rgba(20, 24, 28, 0.88);
        padding: 0.4rem 0.7rem;
        border-radius: 8px;
        line-height: 1.35;
        letter-spacing: 0.08em;
        max-width: 100%;
    }

    .home-hero__media::after {
        background:
            linear-gradient(180deg, rgba(31, 36, 41, 0) 45%, rgba(31, 36, 41, 0.75) 78%, var(--wide-dark) 100%),
            linear-gradient(90deg, rgba(20, 24, 28, 0.55) 0%, rgba(20, 24, 28, 0.3) 50%, rgba(20, 24, 28, 0.1) 100%),
            linear-gradient(180deg, rgba(20, 24, 28, 0.25) 0%, rgba(20, 24, 28, 0) 40%);
    }

    /* The value strip used to sit on the video; on the charcoal background it
       needs its own edge to read as a panel. */
    .trust-strip--in-hero {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Phone button is charcoal, same as the hero, so it disappears on the
       stacked layout. White fill and grey text keep the number readable. */
    .home-hero__actions .btn-wide--green {
        background: #fff;
        color: var(--wide-muted);
        border-color: #fff;
    }

    .home-hero__actions .btn-wide--green:hover,
    .home-hero__actions .btn-wide--green:focus-visible {
        background: var(--wide-grey);
        color: var(--wide-text);
    }

    .home-hero__card .btn-wide {
        display: none;
    }

    .home-hero__card .diagnostic {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .home-hero__card .card-sub {
        margin-bottom: 0.75rem;
    }

    .home-hero__card .diagnostic strong {
        white-space: normal;
    }
}

/* ============================================================================
   TRUST STRIP (key messages)
   ============================================================================ */
.trust-strip {
    background: var(--wide-dark);
    color: #fff;
}

.trust-strip--in-hero {
    background: var(--wide-dark);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    margin-top: 0.25rem;
}

.trust-strip--in-hero .trust-strip__list {
    padding: 0;
    gap: 0.75rem 1rem;
}

.trust-strip--in-hero .trust-strip__list li {
    font-size: 0.88rem;
}

.trust-strip__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    list-style: none;
    padding: 1.35rem 0;
    margin: 0;
}

.trust-strip__list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
}

.trust-strip__list i {
    font-size: 1.35rem;
    color: var(--wide-red);
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    .trust-strip__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .trust-strip__list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        justify-items: center;
    }
}

/* ============================================================================
   CTA CARDS (the three dark cards)
   ============================================================================ */
.cta-card {
    background: var(--wide-dark);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.75rem 2rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(20, 24, 28, 0.22);
}

.cta-card__icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 1.25rem;
    position: relative;
}

.cta-card__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 76px;
    margin-bottom: 1.25rem;
}

.cta-card__logos img {
    height: 46px;
    width: auto;
    max-width: 46%;
    object-fit: contain;
    border-radius: 8px;
}

.cta-card__icon i {
    font-size: 2.1rem;
    color: #fff;
}

.cta-card__icon .badge-dot {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wide-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #fff;
    border: 3px solid var(--wide-dark);
}

.cta-card h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.cta-card p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
    max-width: 30ch;
}

.cta-card .btn-wide {
    margin-top: auto;
    width: 100%;
    max-width: 260px;
}

/* ============================================================================
   SERVICES GRID
   ============================================================================ */
.service-tile {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e6e2;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
}

.service-tile__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}

.service-tile__media img,
.service-tile__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-tile__media img {
    transition: transform 0.35s ease;
}

.service-tile:hover .service-tile__media img {
    transform: scale(1.05);
}

.service-tile__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.12);
    transition: background 0.25s ease;
}

.service-tile__play .play-button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(31, 36, 41, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

.service-tile:hover .service-tile__play .play-button {
    transform: scale(1.08);
    background: var(--wide-red);
}

.service-tile__pause {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(31, 36, 41, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
}

.service-tile__body {
    padding: 1.5rem 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-tile__body h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--wide-text);
}

.service-tile__body p {
    color: var(--wide-muted);
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 1.1rem;
    flex-grow: 1;
}

.service-tile__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wide-red);
    text-decoration: none;
}

.service-tile__link:hover {
    color: var(--wide-red-hover);
}

.service-tile__link i {
    transition: transform 0.15s ease;
}

.service-tile__link:hover i {
    transform: translateX(3px);
}

/* ============================================================================
   BENEFITS / IMAGE + TEXT
   ============================================================================ */
.feature-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    aspect-ratio: 16 / 9;
    background: #000;
}

.feature-media img,
.feature-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feature-media__badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    background: #fff;
    color: var(--wide-text);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100% - 2rem);
}

.feature-media__badge strong {
    display: block;
    font-size: 1.35rem;
    line-height: 1;
}

.feature-media__badge span {
    font-size: 0.85rem;
    color: var(--wide-muted);
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 1.75rem;
    display: grid;
    gap: 0.8rem;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1.05rem;
    line-height: 1.45;
}

.check-list li i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wide-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-top: 0.1rem;
}

.check-list--light li {
    color: #fff;
}

.check-list--light li i {
    background: var(--wide-red);
    color: #fff;
}

.check-list--two-col {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .check-list--two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================================
   BRANDS / TRUST BAND
   ============================================================================ */
.brand-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 3rem;
}

.brand-band img {
    max-height: 48px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.brand-band img:hover {
    filter: none;
    opacity: 1;
}

.brand-band img[alt="Cardale"] {
    max-height: 80px;
    max-width: 200px;
}

.trust-badge-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid #e6e6e2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.trust-badge-card__row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.trust-badge-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--wide-beige-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--wide-dark);
    flex: 0 0 auto;
}

.trust-badge-card h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    margin: 0;
}

.trust-badge-card p {
    margin: 0;
    color: var(--wide-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ============================================================================
   GUARANTEE
   ============================================================================ */
.guarantee-card {
    background: var(--wide-dark);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.guarantee-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: var(--wide-red);
    pointer-events: none;
}

.guarantee-card h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.guarantee-card h3 i {
    color: var(--wide-beige);
    font-size: 1.7rem;
}

.guarantee-card .check-list {
    margin: 0 0 1.5rem;
}

.guarantee-card .check-list li {
    font-size: 1.02rem;
}

.guarantee-seal {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.guarantee-seal i {
    font-size: 1.5rem;
    color: var(--wide-beige);
}

/* ============================================================================
   WARNING SIGNS
   ============================================================================ */
.sign-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    height: 100%;
    border: 1px solid #e6e6e2;
    box-shadow: var(--shadow-soft);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.sign-card__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(215, 22, 53, 0.1);
    color: var(--wide-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.sign-card h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.sign-card p {
    margin: 0;
    color: var(--wide-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ============================================================================
   CTA BAND (dark strip with headline + buttons)
   ============================================================================ */
.cta-band {
    background:
        linear-gradient(90deg, rgba(31, 36, 41, 0.92) 0%, rgba(31, 36, 41, 0.78) 60%, rgba(31, 36, 41, 0.5) 100%),
        url('/assets/image/photos/garage_handle.jpg') center / cover no-repeat;
    color: #fff;
}

.cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
    padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.cta-band__copy {
    flex: 1 1 460px;
    max-width: 680px;
}

.cta-band h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    margin: 0 0 0.35rem;
    color: #fff;
}

.cta-band p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ============================================================================
   SHARED SEGMENT TWEAKS (FAQ / reviews / blog / contact) when wide
   ============================================================================ */
.layout-wide .faq-accordion .accordion-item {
    border-radius: var(--radius-md) !important;
    border: 1px solid #e6e6e2;
    box-shadow: none;
}

.layout-wide .faq-accordion .accordion-button {
    font-weight: 600;
    font-size: 1.05rem;
    padding: 1.15rem 1.4rem;
}

.layout-wide .faq-accordion .accordion-body {
    font-size: 1rem;
    padding: 0 1.4rem 1.4rem;
}

.layout-wide .blog-item {
    padding: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid #e6e6e2;
    box-shadow: var(--shadow-soft);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.layout-wide .blog-image {
    height: 210px;
    border-radius: 0;
    margin-bottom: 0;
}

.layout-wide .blog-title,
.layout-wide .blog-excerpt,
.layout-wide .blog-read-more {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.layout-wide .blog-title {
    margin-top: 1.25rem;
    text-transform: none;
    font-family: var(--font-heading);
    font-size: 1.15rem;
}

.layout-wide .blog-excerpt {
    flex-grow: 1;
    font-size: 0.95rem;
}

.layout-wide .blog-read-more {
    margin-bottom: 1.5rem;
    color: var(--wide-red);
    font-weight: 800;
}

.layout-wide .blog-read-more:hover {
    color: var(--wide-red-hover);
}

/* Contact section: wider form, two columns of fields */
.layout-wide .contact-section-inner {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.layout-wide .contact-form {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.layout-wide .contact-section-title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
}

.layout-wide .contact-section-lead {
    max-width: 40rem;
    font-size: 1.1rem;
}

.layout-wide .btn-contact-send {
    border-radius: 8px;
    letter-spacing: 0.08em;
}

@media (min-width: 768px) {
    .layout-wide #contactSubmitBtn {
        width: auto !important;
        min-width: 240px;
    }
}

/* Trustpilot list widget breathing room */
.layout-wide .reviews-wide .trustpilot-widget {
    margin-top: 1rem;
}

.layout-wide .reviews-wide--early {
    padding-top: clamp(2.25rem, 4.5vw, 3.75rem);
    padding-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
    background: var(--wide-grey);
}

/* ============================================================================
   FOOTER (4 columns on desktop)
   ============================================================================ */
@media (min-width: 992px) {
    .layout-wide .site-footer-grid > .col-12.col-sm-6 {
        flex: 0 0 25%;
        width: 25%;
    }
}

/* ============================================================================
   FLOATING LAUNCHERS — nudge on desktop so they don't crowd content
   ============================================================================ */
@media (min-width: 992px) {
    .layout-wide .whatsapp-float {
        left: auto;
        right: max(18px, env(safe-area-inset-right));
        bottom: 88px;
    }
}

/* ============================================================================
   SMALL SCREENS — keep the wide layout comfortable on phones
   ============================================================================ */
@media (max-width: 575.98px) {
    .layout-wide .wide-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Bootstrap .row negative margins (g-5 = -24px) are wider than the
       container padding on small screens, which let the page scroll
       sideways. Cap horizontal gutters to the container padding. */
    .layout-wide .row.g-5,
    .layout-wide .row.g-4 {
        --bs-gutter-x: 1rem;
    }

    .layout-wide .row.g-3 {
        --bs-gutter-x: 0.75rem;
    }

    /* Nested form rows sit inside an already-guttered column */
    .layout-wide .contact-form .row {
        --bs-gutter-x: 0.5rem;
    }

    .home-hero__actions .btn-wide,
    .page-hero__actions .btn-wide {
        width: 100%;
        min-width: 0;
    }

    .door-section__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .split-block__media--sticky {
        position: static;
    }

    .cta-card {
        padding: 1.75rem 1.25rem 1.5rem;
    }

    .cta-band__inner {
        text-align: center;
        justify-content: center;
    }

    .cta-band__actions {
        width: 100%;
        flex-direction: column;
    }
}

/* ============================================================================
   INNER PAGES — shared components for every non-home page
   ============================================================================ */

/* ---------- Page hero ---------- */
.page-hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    background: var(--wide-dark);
}

.page-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
}

.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(20, 24, 28, 0.74) 0%, rgba(20, 24, 28, 0.55) 50%, rgba(20, 24, 28, 0.12) 100%),
        linear-gradient(180deg, rgba(20, 24, 28, 0.05) 0%, rgba(20, 24, 28, 0.4) 100%);
}

.page-hero--plain::after {
    background: linear-gradient(135deg, var(--wide-dark) 0%, var(--wide-dark-2) 100%);
}

.page-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: clamp(3.5rem, 7vw, 6.5rem);
    padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

.page-hero--compact .page-hero__inner {
    padding-top: clamp(2.5rem, 4.5vw, 4rem);
    padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

.page-hero__copy {
    max-width: 760px;
}

.page-hero__title {
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #fff;
}

.page-hero--compact .page-hero__title {
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    margin-bottom: 0.5rem;
}

.page-hero__lead {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 1.5rem;
    max-width: 640px;
}

.page-hero__points {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 1fr;
}

.page-hero__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
}

.page-hero__points i {
    color: var(--wide-red);
    font-size: 1.15rem;
    line-height: 1.3;
    flex: 0 0 auto;
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.page-hero__note {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 768px) {
    .page-hero__points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Two-column media + copy (services, about, reviews intro) ---------- */
.split-block {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
    grid-template-columns: 1fr;
}

.split-block__media {
    position: relative;
}

.split-block__media--sticky {
    position: sticky;
    top: 100px;
}

.split-block__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: block;
}

.split-block__copy .section-title {
    margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
    .split-block {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .split-block--even {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }

    .split-block--media-right .split-block__media {
        order: 2;
    }
}

/* ---------- Long-form prose (service copy, legal pages, blog body) ---------- */
.wide-prose {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--wide-text);
}

.wide-prose p {
    margin-bottom: 1.15rem;
}

.wide-prose h2,
.wide-prose h3,
.wide-prose h4,
.wide-prose > strong {
    display: block;
    font-weight: 800;
    color: var(--wide-text);
    margin: 1.75rem 0 0.75rem;
    line-height: 1.25;
}

.wide-prose h2 { font-size: 1.5rem; }
.wide-prose h3,
.wide-prose > strong { font-size: 1.2rem; }
.wide-prose h4 { font-size: 1.05rem; }

.wide-prose ul,
.wide-prose ol {
    margin: 0 0 1.25rem;
    padding-left: 1.4rem;
}

.wide-prose li {
    margin-bottom: 0.5rem;
}

.wide-prose li strong {
    color: var(--wide-text);
}

.wide-prose ul {
    list-style: none;
    padding-left: 0;
}

.wide-prose ul li {
    position: relative;
    padding-left: 1.9rem;
}

.wide-prose ul li::before {
    content: '\F26A';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: var(--wide-red);
    font-size: 1.05rem;
}

.wide-prose ol {
    counter-reset: prose-steps;
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: 0.9rem;
}

.wide-prose ol li {
    counter-increment: prose-steps;
    position: relative;
    padding-left: 3rem;
    margin: 0;
}

.wide-prose ol li::before {
    content: counter(prose-steps);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--wide-red);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.wide-prose a {
    color: var(--wide-red);
    font-weight: 600;
}

.wide-prose--narrow {
    max-width: 820px;
}

/* ---------- Sidebar "key facts" card used beside service copy ---------- */
.side-card {
    background: var(--wide-dark);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.6rem;
    box-shadow: var(--shadow-card);
    margin-top: 1.5rem;
}

.side-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #fff;
}

.side-card .check-list {
    margin: 0 0 1.25rem;
    gap: 0.6rem;
}

.side-card .check-list li {
    font-size: 0.98rem;
}

.side-card .btn-wide {
    width: 100%;
}

.side-card .btn-wide + .btn-wide {
    margin-top: 0.6rem;
}

/* ---------- Generic info cards (contact page, steps, tips, areas) ---------- */
.info-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .info-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .info-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .info-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .info-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .info-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.info-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow-soft);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.info-card--left {
    align-items: flex-start;
    text-align: left;
}

.info-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(215, 22, 53, 0.1);
    color: var(--wide-red);
    font-size: 1.75rem;
    margin-bottom: 1.1rem;
}

.info-card__icon--green {
    background: rgba(31, 36, 41, 0.08);
    color: var(--wide-dark);
}

.info-card__icon--dark {
    background: var(--wide-dark);
    color: #fff;
}

.info-card h3,
.info-card h4 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
    color: var(--wide-text);
}

.info-card p {
    color: var(--wide-muted);
    line-height: 1.6;
    margin-bottom: 0;
}

.info-card .btn-wide {
    margin-top: auto;
}

.info-card__num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wide-red);
    color: #fff;
    font-weight: 900;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.info-card__link {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wide-text);
    text-decoration: none;
}

.info-card__link:hover {
    color: var(--wide-red);
}

.info-card__meta {
    font-size: 0.85rem;
    color: var(--wide-muted);
}

.hours-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    width: 100%;
    max-width: 260px;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.98rem;
}

.hours-list li:last-child {
    border-bottom: 0;
}

.hours-list span:last-child {
    color: var(--wide-muted);
}

/* ---------- Area cards ---------- */
.area-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.5rem;
    box-shadow: var(--shadow-soft);
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.area-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.area-card__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.area-card__head i {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--wide-red);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.area-card__head h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.area-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 1rem;
}

.area-card li {
    font-size: 0.95rem;
    padding: 0.2rem 0;
    break-inside: avoid;
    color: var(--wide-text);
}

.area-card li i {
    color: var(--wide-red);
    margin-right: 0.4rem;
}

.map-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.map-frame #map {
    height: clamp(320px, 45vw, 520px) !important;
    width: 100%;
}

/* ---------- Door type cards (new garage doors) ---------- */
.door-nav-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem;
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: var(--wide-text);
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.door-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    color: var(--wide-text);
}

.door-nav-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex: 0 0 auto;
}

.door-nav-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 0.2rem;
}

.door-nav-card .door-nav-card__point {
    font-size: 0.85rem;
    color: var(--wide-red);
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.door-nav-card .door-nav-card__link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wide-red);
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .door-nav-card { flex-direction: column; text-align: center; }
    .door-nav-card img { width: 56px; height: 56px; }
}

.door-section {
    scroll-margin-top: 100px;
}

.door-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.door-section__head .section-title {
    margin-bottom: 0;
}

.door-express {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--wide-dark);
    color: #fff;
    border-radius: 999px;
    padding: 0.55rem 0.6rem 0.55rem 1.1rem;
    font-size: 0.9rem;
    line-height: 1.2;
}

.door-express strong {
    color: var(--wide-beige);
    font-style: italic;
    letter-spacing: 0.04em;
    display: block;
    font-size: 0.95rem;
}

.door-express button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: var(--wide-dark);
    font-weight: 900;
    font-family: serif;
}

.door-photo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.door-photo img.door-photo__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.door-photo__price {
    position: absolute;
    top: 1rem;
    left: 1rem;
    max-width: min(220px, 45%);
}

.door-photo__extra {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    max-width: min(180px, 40%);
}

.door-copy h3 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

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

@media (min-width: 576px) { .swatch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .swatch-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.swatch-grid .color-option {
    border-radius: 10px !important;
}

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

@media (min-width: 768px) { .handle-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.handle-grid .handle-box {
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft) !important;
}

/* ---------- Blog article ---------- */
.layout-wide .blog-hero-image {
    height: clamp(260px, 40vw, 480px) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card);
}

/* ---------- Legal / utility content ---------- */
.legal-content {
    max-width: 860px;
}

.legal-content h2,
.legal-content h3 {
    margin-top: 2rem;
    font-weight: 800;
}

/* ---------- Send photos: form on dark photo ---------- */
.layout-wide .sp-step-card {
    height: 100%;
}

/* ---------- Autobook module ---------- */
.layout-wide .autobook-page .booking-summary,
.layout-wide .autobook-page .info-sidebar {
    border-radius: var(--radius-lg);
}

@media (min-width: 992px) {
    .layout-wide .autobook-page .info-sidebar {
        position: sticky;
        top: 100px;
    }
}

/* ---------- Contact form section (already wide-aware) ---------- */
.layout-wide .contact-section-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* ---------- Trustpilot inline strip in a hero ---------- */
.page-hero__trust {
    margin-top: 1.5rem;
}