/* ─── Real Deal Builders / Site CSS ───────────────────────────────────────────
   Everything except the 3D hero (that lives in hero.css). Base reset, shared
   type, buttons, the homepage marketing sections, the interior page shell
   (header, breadcrumb, page hero, service and city content), and the footer.
   No border-radius anywhere: the brand is square and industrial. */

/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--rdb-body);
    color: var(--rdb-text);
    background: var(--rdb-light);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
img, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: var(--rdb-accent); text-decoration: none; }
a:hover { color: var(--rdb-accent-hover); }

/* ─── Shared shell and type ───────────────────────────────────────────────────── */
.rdb-section { padding: var(--rdb-pad-y) var(--rdb-pad-x); }
.rdb-wrap { max-width: var(--rdb-col); margin: 0 auto; }

.rdb-eyebrow {
    font: 600 12px/1 var(--rdb-body);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--rdb-accent);
    margin: 0 0 18px;
    display: inline-flex; align-items: center; gap: 12px;
}
.rdb-eyebrow::before {
    content: ""; width: 16px; height: 10px; background: var(--rdb-accent);
    /* roofline peak, pulled from the logo mark */
    clip-path: polygon(50% 0, 100% 100%, 50% 66%, 0 100%);
}
.rdb-h2 {
    margin: 0;
    font-family: var(--rdb-serif);
    font-weight: 800;
    font-size: clamp(38px, 4.8vw, 68px);
    line-height: 1.0;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--rdb-dark);
}
.rdb-h3 {
    margin: 0;
    font-family: var(--rdb-display);
    font-weight: 700;
    font-size: 27px;
    line-height: 1.15;
    text-transform: uppercase;
    color: inherit;
}
.rdb-lead {
    font-size: clamp(17px, 1.7vw, 20px);
    color: var(--rdb-text);
    max-width: 60ch;
}
.rdb-p { margin: 0 0 1em; max-width: 68ch; }
.rdb-p:last-child { margin-bottom: 0; }

/* ─── Buttons ─────────────────────────────────────────────────────────────────── */
.rdb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 26px;
    font: 700 13px/1 var(--rdb-body);
    letter-spacing: .16em; text-transform: uppercase;
    border: 2px solid transparent; cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.rdb-btn--accent { background: var(--rdb-accent); color: #fff; }
.rdb-btn--accent:hover { background: var(--rdb-accent-hover); color: #fff; }
.rdb-btn--dark { background: var(--rdb-dark); color: #fff; }
.rdb-btn--dark:hover { background: #fff; color: var(--rdb-dark); }
.rdb-btn--outline { border-color: currentColor; color: inherit; background: transparent; }
.rdb-btn--outline:hover { background: currentColor; }
.rdb-btn--outline:hover span { color: var(--rdb-dark); }

/* Visible focus for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--rdb-accent); outline-offset: 3px;
}

/* Skip link */
.rdb-skip {
    position: absolute; left: -9999px; top: 0; z-index: 10000;
    padding: 14px 22px; background: var(--rdb-accent); color: #fff;
    font: 700 13px/1 var(--rdb-body); letter-spacing: .16em; text-transform: uppercase;
}
.rdb-skip:focus { left: 0; }

/* ─── Interior page header (solid sticky nav; home uses the hero header) ───────── */
.site-header {
    position: sticky; top: 0; z-index: 900;
    background: var(--rdb-ink);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header__inner {
    max-width: var(--rdb-col); margin: 0 auto;
    padding: 14px var(--rdb-pad-x);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.site-header__brand {
    font-family: var(--rdb-display); font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; font-size: 22px; color: #fff;
}
.site-header__brand:hover { color: #fff; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.site-nav a {
    font: 600 13px/1 var(--rdb-body); letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.72);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--rdb-accent); }
.site-nav__phone {
    background: var(--rdb-accent); color: #fff !important;
    padding: 11px 16px; letter-spacing: .1em !important;
}
.site-nav__phone:hover { background: var(--rdb-accent-hover); }

/* Dropdown groups (Services, Locations). Pure CSS: reveal on hover or
   focus-within. The top-level anchor still navigates to the hub, so mobile
   users tap through to the hub page directly, no JS required. */
.site-nav__group { position: relative; display: inline-flex; align-items: center; }
.site-nav__caret { font-size: 10px; opacity: .5; margin-left: 4px; transition: transform .15s ease; }
.site-nav__group:hover .site-nav__caret,
.site-nav__group:focus-within .site-nav__caret { opacity: 1; transform: rotate(-180deg); }
.site-nav__panel {
    position: absolute;
    top: 100%;
    left: -14px;
    min-width: 260px;
    background: var(--rdb-ink);
    border-top: 3px solid var(--rdb-accent);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    z-index: 40;
}
.site-nav__group:hover .site-nav__panel,
.site-nav__group:focus-within .site-nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site-nav__panel a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 20px;
    color: rgba(255,255,255,.72) !important;
    font: 600 13px/1.3 var(--rdb-body) !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    white-space: nowrap;
}
.site-nav__panel a:hover { background: var(--rdb-dark); color: var(--rdb-accent) !important; }
.site-nav__panel-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: 0 0 22px;
    color: var(--rdb-accent);
    opacity: .78;
    transition: opacity .15s ease, transform .15s ease;
}
.site-nav__panel-ico svg { width: 22px; height: 22px; stroke-width: 1.7; }
.site-nav__panel a:hover .site-nav__panel-ico { opacity: 1; transform: translateX(1px); }
.site-nav__count { margin-left: auto; color: rgba(255,255,255,.4); font-size: 11px; }
/* The catch-all link closes the panel rather than opening it, so it reads as an
   escape hatch after the real choices instead of intercepting the first row. */
.site-nav__panel-all {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 6px;
    padding-top: 14px !important;
    color: var(--rdb-accent) !important;
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
.site-nav__panel-all:hover { color: #fff !important; background: transparent !important; }

/* Hamburger: three lines that morph into an X on aria-expanded. Includes a
   press animation so the tap has real tactile feedback. */
.site-header__menu {
    display: none;
    background: transparent; border: 0;
    color: #fff; padding: 8px; margin-left: 8px;
    cursor: pointer;
    align-items: center; justify-content: center;
    transition: transform .15s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.site-header__menu:hover { color: var(--rdb-accent); }
.site-header__menu:active { transform: scale(.9); }
/* Constantly spinning gear that transforms to an X on tap. Both the gear
   teeth and the X are separate <svg> elements stacked in the same square.
   The gear spins in idle; on aria-expanded=true it fades out while the X
   fades in. SVG-on-<svg> transforms are reliable across browsers (whereas
   CSS transforms on <g> children have inconsistent transform-box behavior). */
.rdb-hamb {
    position: relative;
    display: inline-flex;
    width: 26px; height: 26px;
    color: inherit;
}
.rdb-hamb__teeth,
.rdb-hamb__x {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    transform-origin: 50% 50%;
    transition: opacity .3s ease, transform .35s cubic-bezier(.5, 0, .2, 1.3);
}
.rdb-hamb__teeth {
    opacity: 1;
    animation: rdbGearSpin 6s linear infinite;
}
@keyframes rdbGearSpin { to { transform: rotate(360deg); } }
.rdb-hamb__x {
    opacity: 0;
    transform: scale(.3) rotate(-90deg);
}
[aria-expanded="true"] .rdb-hamb__teeth {
    opacity: 0;
    animation: none;
    transform: scale(.4);
}
[aria-expanded="true"] .rdb-hamb__x {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: .1s;
}
@media (prefers-reduced-motion: reduce) {
    .rdb-hamb__teeth { animation: none; }
}

/* Hero header hamburger: hidden by default (desktop), turned on inside the
   mobile media query below. Defined before the @media block so the mobile
   override wins on specificity/order. */
.rdb-hero__menu { display: none; }

@media (max-width: 720px) {
    .site-header__menu { display: inline-flex; }
    .site-nav__group { display: none; }
    /* Hide all nav items on mobile including the phone. The sticky bottom bar
       and the drawer both provide the call action, so this one is redundant. */
    .site-nav a { display: none; }
    .site-nav { display: none; }
    .site-header__inner { justify-content: space-between; }

    /* Homepage hero: hide its own nav + phone on mobile, and float the
       hamburger as a fixed top-right pill so the menu is always accessible
       regardless of scroll position (the site-header takes over on internal
       pages, but the hero header only exists inside the hero section). */
    .rdb-hero__nav { display: none !important; }
    .rdb-hero .rdb-hero__phone { display: none !important; }
    .rdb-hero__menu {
        position: fixed !important;
        top: 14px;
        right: 14px;
        z-index: 80;
        display: inline-flex !important;
        width: 44px; height: 44px;
        padding: 0;
        margin: 0;
        background: rgba(43, 35, 28, 0.88);
        border: 2px solid rgba(192, 106, 68, .5);
        border-radius: 999px;
        color: #fff;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(192, 106, 68, .5);
        animation: rdbHambPulse 2.4s ease-in-out infinite;
    }
    /* Terracotta aura pulse: draws the eye without being loud. Stops as soon
       as the menu is open, since the aura is no longer needed. */
    @keyframes rdbHambPulse {
        0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 0 0 rgba(192, 106, 68, .55); }
        50%      { box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 0 12px rgba(192, 106, 68, 0); }
    }
    .rdb-hero__menu[aria-expanded="true"] { animation: none; border-color: transparent; }
    .rdb-hero__menu:hover { background: var(--rdb-accent); color: #fff; border-color: transparent; animation: none; }
    .rdb-hero__menu:active { transform: scale(.9); }
    @media (prefers-reduced-motion: reduce) {
        .rdb-hero__menu { animation: none; }
    }
    /* Slightly smaller icon inside the floating hero pill so the gear fits
       the smaller 44px circle without touching the edge. */
    .rdb-hero__menu .rdb-hamb { width: 22px; height: 22px; }
}

/* ─── Mobile drawer menu (opened by the hamburger) ──────────────────────────
   The drawer stays in the DOM at all times on mobile but is hidden with
   visibility + pointer-events so both open AND close can transition. The
   nav items stagger in with per-index transition delays, then reverse
   quickly on close. */
.rdb-drawer { display: none; }
@media (max-width: 720px) {
    .rdb-drawer {
        display: block;
        position: fixed; inset: 0;
        z-index: 90;
        pointer-events: none;
    }
    .rdb-drawer[data-open] { pointer-events: auto; }
}
.rdb-drawer__scrim {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.rdb-drawer[data-open] .rdb-drawer__scrim { opacity: 1; pointer-events: auto; }
.rdb-drawer__panel {
    position: absolute; top: 0; bottom: 0; right: 0;
    width: min(320px, 88vw);
    background: var(--rdb-ink);
    color: rgba(255,255,255,.72);
    display: flex; flex-direction: column;
    box-shadow: -4px 0 32px rgba(0,0,0,.5);
    transform: translate3d(100%, 0, 0);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
}
.rdb-drawer[data-open] .rdb-drawer__panel { transform: translate3d(0, 0, 0); }
.rdb-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease .1s, transform .3s ease .1s;
}
.rdb-drawer[data-open] .rdb-drawer__head { opacity: 1; transform: translateY(0); }
.rdb-drawer__brand {
    font-family: var(--rdb-display); font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    font-size: 14px; color: #fff;
}
.rdb-drawer__close {
    background: transparent; border: 0; color: #fff;
    cursor: pointer; padding: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.rdb-drawer__close:hover { color: var(--rdb-accent); }
.rdb-drawer__close:active { transform: scale(.9) rotate(90deg); }
.rdb-drawer__nav { flex: 1; padding: 8px 0; }
.rdb-drawer__link,
.rdb-drawer__group > summary {
    display: block;
    padding: 16px 22px;
    color: #fff;
    font-family: var(--rdb-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: color .18s ease, background .18s ease, padding-left .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.rdb-drawer__link:hover,
.rdb-drawer__group > summary:hover { color: var(--rdb-accent); padding-right: 26px; }
.rdb-drawer__link:active,
.rdb-drawer__group > summary:active { background: rgba(192,106,68,.14); }
.rdb-drawer__group > summary::-webkit-details-marker { display: none; }
.rdb-drawer__group > summary::after {
    content: "+"; position: absolute; right: 22px; top: 50%;
    transform: translateY(-50%);
    color: var(--rdb-accent); font-weight: 400; font-size: 22px;
    transition: transform .25s ease;
    line-height: 1;
}
.rdb-drawer__group[open] > summary::after { content: "\2212"; transform: translateY(-50%) rotate(180deg); }
.rdb-drawer__sub { background: rgba(0,0,0,.24); padding: 4px 0 12px; }
.rdb-drawer__sub a {
    display: flex; justify-content: flex-start; align-items: center;
    gap: 14px;
    padding: 12px 22px;
    color: rgba(255,255,255,.72);
    font-family: var(--rdb-body);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: none;
    text-decoration: none;
    transition: color .18s ease, background .18s ease, padding-left .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.rdb-drawer__sub a:hover { color: var(--rdb-accent); background: rgba(255,255,255,.04); padding-left: 30px; }
.rdb-drawer__sub a:active { background: rgba(192,106,68,.16); }
.rdb-drawer__sub a span { color: inherit; font-size: inherit; }
.rdb-drawer__sub a span.rdb-drawer__sub-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: none;
    color: var(--rdb-accent);
}
.rdb-drawer__sub-ico svg {
    width: 22px !important; height: 22px !important;
    color: var(--rdb-accent);
}
/* Region rows (no icon) show a small count on the right */
.rdb-drawer__sub a:not(:has(.rdb-drawer__sub-ico)) { justify-content: space-between; }
.rdb-drawer__sub a:not(:has(.rdb-drawer__sub-ico)) span:not(.rdb-drawer__sub-lead) { color: rgba(255,255,255,.34); font-size: 11px; }
.rdb-drawer__sub-lead {
    color: var(--rdb-accent) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: .16em !important;
    padding-top: 14px !important;
}
.rdb-drawer__call {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 20px;
    background: var(--rdb-accent);
    color: #fff !important;
    font-family: var(--rdb-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 14px;
    text-decoration: none;
    margin-top: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease .35s, transform .3s ease .35s, background .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.rdb-drawer[data-open] .rdb-drawer__call { opacity: 1; transform: translateY(0); }
.rdb-drawer__call:hover { background: var(--rdb-accent-hover); }
.rdb-drawer__call:active { background: var(--rdb-accent-hover); transform: translateY(0) scale(.98); }

/* Staggered item entrance. Each nav row eases in with a per-index delay so
   the menu unfurls rather than snapping in as a block. */
.rdb-drawer__nav > * {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .28s ease, transform .32s cubic-bezier(.4,0,.2,1);
}
.rdb-drawer[data-open] .rdb-drawer__nav > * { opacity: 1; transform: translateX(0); }
.rdb-drawer[data-open] .rdb-drawer__nav > *:nth-child(1) { transition-delay: .12s; }
.rdb-drawer[data-open] .rdb-drawer__nav > *:nth-child(2) { transition-delay: .18s; }
.rdb-drawer[data-open] .rdb-drawer__nav > *:nth-child(3) { transition-delay: .24s; }
.rdb-drawer[data-open] .rdb-drawer__nav > *:nth-child(4) { transition-delay: .30s; }
.rdb-drawer[data-open] .rdb-drawer__nav > *:nth-child(5) { transition-delay: .36s; }

body[data-menu-open] { overflow: hidden; }
@media (min-width: 721px) { .rdb-drawer { display: none !important; } }

/* Respect the user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .rdb-drawer__panel,
    .rdb-drawer__scrim,
    .rdb-drawer__head,
    .rdb-drawer__nav > *,
    .rdb-drawer__call,
    .rdb-hamb__teeth,
    .rdb-hamb__x { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ─── Breadcrumb ───────────────────────────────────────────────────────────────── */
.rdb-crumbs {
    max-width: var(--rdb-col); margin: 0 auto;
    padding: 18px var(--rdb-pad-x) 0;
    font: 500 12px/1.4 var(--rdb-body); letter-spacing: .08em; text-transform: uppercase;
    color: var(--rdb-muted);
}
.rdb-crumbs a { color: var(--rdb-muted); }
.rdb-crumbs a:hover { color: var(--rdb-accent); }
.rdb-crumbs span { margin: 0 8px; opacity: .5; }

/* ─── Interior page hero ───────────────────────────────────────────────────────── */
.page-hero { background: var(--rdb-light); padding: clamp(32px,4.5vw,60px) var(--rdb-pad-x) clamp(28px,3.5vw,44px); }
.page-hero__inner { max-width: var(--rdb-col); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: end; }
.page-hero__l { min-width: 0; }
.page-hero h1 {
    margin: 0 0 20px; font-family: var(--rdb-serif); font-weight: 800;
    font-size: clamp(34px, 5vw, 74px); line-height: .98; letter-spacing: -.01em;
    text-transform: uppercase; color: var(--rdb-dark); max-width: 22ch;
}
@media (min-width: 900px) {
    .page-hero__inner { grid-template-columns: minmax(0,1.35fr) minmax(280px, 1fr); column-gap: 60px; }
    .page-hero__meta { align-self: end; }
}
/* Service hero photo. On wide screens the text sits left and the photo sits
   right; the meta strip drops full width below. */
.rdb-hphoto { margin: 0; min-width: 0; }
.rdb-hphoto img {
    display: block; width: 100%; height: 100%; max-height: 420px;
    object-fit: cover; aspect-ratio: 16 / 10;
    border: 1px solid var(--rdb-divider);
    box-shadow: 0 10px 30px rgba(18,34,54,.14);
}
/* Service hero: text left, photo right, then a tight horizontal stats strip
   full width below (not a tall floating box). */
.page-hero--photo .page-hero__meta {
    max-width: var(--rdb-col); margin: 34px auto 0;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .page-hero--photo .page-hero__meta { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
    .page-hero--photo .page-hero__inner { grid-template-columns: minmax(0,1fr) minmax(340px,1.05fr); align-items: center; }
    .page-hero--photo .page-hero__meta { grid-template-columns: repeat(4, 1fr); }
}
.page-hero--photo .page-hero__stat { padding: 16px 20px; }

.page-hero__meta { display: grid; gap: 1px; background: var(--rdb-divider); border: 1px solid var(--rdb-divider); }
.page-hero__stat { background: var(--rdb-warm); padding: 20px 24px; }
.page-hero__stat dt { font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--rdb-muted); margin: 0 0 8px; }
.page-hero__stat dd { font-family: var(--rdb-body); font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--rdb-dark); margin: 0; letter-spacing: normal; }
.page-hero__stat--big dd { font-family: var(--rdb-display); font-weight: 700; font-size: clamp(48px, 7vw, 82px); line-height: 1; color: var(--rdb-accent); letter-spacing: -.02em; }

/* ─── Homepage: Why ────────────────────────────────────────────────────────────── */
.rdb-why { background: var(--rdb-light); }
.rdb-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: clamp(30px,5vw,64px); align-items: start; }
.rdb-steps { display: grid; gap: 2px; background: var(--rdb-divider); }
.rdb-step { background: #fff; padding: 26px; display: flex; gap: 22px; align-items: flex-start; }
.rdb-step__n { font-family: var(--rdb-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--rdb-accent); }
.rdb-step__t { font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; font-size: 21px; color: var(--rdb-dark); margin: 0 0 6px; }
.rdb-step__d { margin: 0; font-size: 15px; }

/* ─── Homepage: Services (dark) ────────────────────────────────────────────────── */
.rdb-services { background: var(--rdb-dark); color: #fff; }
.rdb-services .rdb-h2 { color: #fff; }
.rdb-services__head { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-end; margin-bottom: 46px; }
.rdb-services__link { color: var(--rdb-accent); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.rdb-grid-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.13); }
@media (min-width: 720px) { .rdb-grid-tiles { grid-template-columns: repeat(3, 1fr); } }
.rdb-tile { background: var(--rdb-dark); padding: 34px 30px; transition: background .18s ease; display: block; color: inherit; }
a.rdb-tile:hover { background: var(--rdb-dark-hover); color: inherit; }
.rdb-tile__i { font-family: var(--rdb-display); font-weight: 700; font-size: 15px; color: rgba(255,255,255,.4); letter-spacing: .1em; }
.rdb-tile__t { margin: 14px 0 10px; font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; font-size: 23px; color: #fff; }
.rdb-tile__d { margin: 0; font-size: 15px; color: rgba(255,255,255,.62); }
.rdb-tile__more { display: inline-block; margin-top: 16px; color: var(--rdb-accent); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* ─── Homepage: Recent work ────────────────────────────────────────────────────── */
.rdb-work { background: var(--rdb-light); }
.rdb-work__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; margin-top: 40px; }
.rdb-work__img { aspect-ratio: 4/3; background: var(--rdb-divider); object-fit: cover; width: 100%; }
.rdb-work__ph {
    aspect-ratio: 4/3;
    background: repeating-linear-gradient(45deg, var(--rdb-divider), var(--rdb-divider) 12px, #e9e0d2 12px, #e9e0d2 24px);
    display: flex; align-items: flex-end; justify-content: flex-start;
    position: relative;
    overflow: hidden;
}
.rdb-work__ph span {
    display: inline-block;
    margin: 14px;
    padding: 6px 10px;
    background: var(--rdb-ink);
    color: rgba(255,255,255,.62);
    font: 700 10px/1 var(--rdb-body);
    letter-spacing: .16em;
    text-transform: uppercase;
}
.rdb-work__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 14px; }
.rdb-work__t { font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; font-size: 21px; color: var(--rdb-dark); }
.rdb-work__city { color: var(--rdb-muted); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* ─── Diagrams (inline SVG on service pages) ─────────────────────────────────
   On desktop the SVG scales to the container. On narrow screens the SVG
   would shrink to the point where its internal labels become unreadable, so
   the figure scrolls horizontally instead and a subtle "scroll to see more"
   hint appears on mobile. */
.rdb-diagram { margin: 48px 0 40px; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rdb-diagram svg { display: block; width: 100%; height: auto; min-width: 720px; background: var(--rdb-light); border: 1px solid var(--rdb-divider); }
.rdb-diagram figcaption { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--rdb-text-soft); }
.rdb-diagram figcaption strong { color: var(--rdb-dark); font-weight: 700; }
@media (max-width: 720px) {
    .rdb-diagram figcaption::before {
        content: "Swipe to see the full diagram. ";
        display: inline-block;
        color: var(--rdb-accent);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 11px;
        margin-right: 6px;
    }
}
/* Below the threshold where scrolling is comfortable, let the diagram shrink
   with the viewport. Text inside will be smaller but everything stays in
   frame without a full-page horizontal scroll. */
@media (max-width: 480px) {
    .rdb-diagram svg { min-width: 0; }
    .rdb-diagram figcaption::before { content: ""; margin-right: 0; }
}

/* ─── Process bar: horizontal 4-step "how we work" pattern ─────────────────── */
.rdb-process { background: #fff; }
.rdb-process__grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 0; margin: 40px 0 0; list-style: none; }
@media (min-width: 640px) { .rdb-process__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 40px; } }
@media (min-width: 960px) { .rdb-process__grid { grid-template-columns: repeat(4, 1fr); gap: 40px; } }
.rdb-process__step {
    padding-top: 24px;
    border-top: 3px solid var(--rdb-divider);
    position: relative;
    transition: border-top-color .25s ease, transform .25s ease;
}
.rdb-process__step:hover { border-top-color: var(--rdb-accent); transform: translateY(-3px); }
.rdb-process__step:hover .rdb-process__n { color: var(--rdb-accent-deep, var(--rdb-accent)); }
.rdb-process__n {
    font-family: var(--rdb-display); font-weight: 700;
    font-size: 42px; line-height: 1;
    color: var(--rdb-accent); letter-spacing: -.02em;
    display: block; margin-bottom: 14px;
    transition: color .25s ease;
}
.rdb-process__t {
    font-family: var(--rdb-display); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    font-size: 18px; line-height: 1.2;
    color: var(--rdb-dark); margin: 0 0 10px;
}
.rdb-process__d {
    margin: 0; font-size: 14px; line-height: 1.6;
    color: var(--rdb-text);
}

/* ─── Contact form ────────────────────────────────────────────────────────────
   Two-column on desktop (intro/CTA on left, form on right), stacked on
   mobile. Wired to Netlify Forms via data-netlify attribute + a hidden
   form-name field, plus a honeypot for spam. Redirects to /thank-you/ on
   success (native form action, no JS needed). */
.rdb-form { background: var(--rdb-warm); }
.rdb-form__wrap {
    max-width: var(--rdb-col);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}
@media (min-width: 900px) {
    .rdb-form__wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 60px; }
}
.rdb-form__intro { position: sticky; top: 100px; }
@media (max-width: 899px) { .rdb-form__intro { position: static; } }
.rdb-form__lead {
    color: var(--rdb-text);
    font-size: 16px;
    line-height: 1.6;
    max-width: 44ch;
    margin: 0 0 32px;
}
.rdb-form__aside {
    padding: 20px 22px;
    background: #fff;
    border-left: 4px solid var(--rdb-accent);
    display: inline-flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.rdb-form__aside-lbl {
    margin: 0;
    font: 700 11px/1 var(--rdb-display);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rdb-muted);
}
.rdb-form__box {
    background: #fff;
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-top: 4px solid var(--rdb-accent);
}
.rdb-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 560px) {
    .rdb-form__row { grid-template-columns: 1fr 1fr; }
}
.rdb-form__field { display: flex; flex-direction: column; gap: 6px; }
.rdb-form__lbl {
    font: 700 12px/1 var(--rdb-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rdb-dark);
}
.rdb-form__lbl em { font-style: normal; color: var(--rdb-accent); }
.rdb-form__field input,
.rdb-form__field select,
.rdb-form__field textarea {
    background: var(--rdb-light);
    border: 1px solid var(--rdb-divider);
    padding: 12px 14px;
    font: 400 15px/1.5 var(--rdb-body);
    color: var(--rdb-ink);
    border-radius: 2px;
    transition: border-color .18s ease, background .18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.rdb-form__field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1 L6 7 L11 1' stroke='%235F5449' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.rdb-form__field textarea { resize: vertical; min-height: 110px; font-family: var(--rdb-body); }
.rdb-form__field input:focus,
.rdb-form__field select:focus,
.rdb-form__field textarea:focus {
    outline: none;
    border-color: var(--rdb-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(192, 106, 68, .15);
}
.rdb-form__field input::placeholder,
.rdb-form__field textarea::placeholder { color: var(--rdb-muted); }
.rdb-form__hp { display: none; }
.rdb-form__submit {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--rdb-divider);
}
@media (min-width: 560px) {
    .rdb-form__submit { flex-direction: row; align-items: center; gap: 20px; }
}
.rdb-form__submit .rdb-btn { align-self: flex-start; }
.rdb-form__legal {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--rdb-text-soft);
}
.rdb-form__legal a { color: var(--rdb-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ─── Nearby areas section (city page tail) ─────────────────────────────────── */
.rdb-nearby { background: #fff; }

/* ─── Pillars: dark editorial spread with oversized ambient numbers ─────────
   The two pillars sit on a dark ground rather than in white cards. Each
   pillar's number becomes a large ghosted design element behind the copy,
   which adds depth and typographic drama without noisy decoration. Used on
   the services hub "why hire us" block and on city page section 3. */
.rdb-pillars { background: var(--rdb-ink); color: rgba(255,255,255,.72); }
.rdb-pillars .rdb-eyebrow { color: var(--rdb-accent); }
.rdb-pillars .rdb-h2 { color: #fff; }
.rdb-pillars__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    background: transparent;
    border: none;
    margin-top: 44px;
}
@media (min-width: 900px) {
    .rdb-pillars__grid { grid-template-columns: repeat(2, 1fr); column-gap: 72px; }
}
.rdb-pillar {
    background: transparent;
    padding: 44px 0 0;
    display: block;
    position: relative;
    border-top: 2px solid rgba(255,255,255,.14);
    overflow: hidden;
}
.rdb-pillar__n {
    position: absolute;
    top: 26px;
    right: -8px;
    font-family: var(--rdb-display);
    font-weight: 700;
    font-size: 148px;
    line-height: .82;
    color: rgba(255,255,255,.06);
    letter-spacing: -.04em;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
.rdb-pillar__head {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 0 22px;
}
.rdb-pillar .rdb-pillar__label {
    font-family: var(--rdb-serif);
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.15;
    color: #fff;
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
    letter-spacing: normal;
}
.rdb-pillar p:not(.rdb-pillar__label) {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,.66);
    max-width: 46ch;
}
.rdb-pillar p:not(.rdb-pillar__label):last-child { margin-bottom: 0; }
.rdb-pillar:hover { border-top-color: var(--rdb-accent); }
.rdb-pillar:hover .rdb-pillar__n { color: rgba(192,106,68,.16); transition: color .3s ease; }
.rdb-pillar__n { transition: color .3s ease; }
@media (max-width: 899px) {
    .rdb-pillar { padding-top: 32px; }
    .rdb-pillar__n { font-size: 82px; top: 20px; right: -4px; }
    .rdb-pillar .rdb-pillar__label { max-width: calc(100% - 70px); }
}
@media (max-width: 480px) {
    .rdb-pillar__n { font-size: 64px; top: 24px; }
    .rdb-pillar .rdb-pillar__label { max-width: calc(100% - 56px); font-size: 22px; }
}

/* ─── Sticky mobile action bar (Call, Free Quote) ────────────────────────────
   Fixed to the bottom of the viewport on mobile only. Two big tap targets,
   phone on the left, primary CTA on the right in terracotta. Bar has safe
   area inset padding so it sits above the iOS home indicator. */
.rdb-mbar { display: none; }
@media (max-width: 720px) {
    .rdb-mbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--rdb-ink);
        border-top: 1px solid rgba(255,255,255,.12);
        padding: 0 0 env(safe-area-inset-bottom, 0);
        box-shadow: 0 -6px 24px rgba(0,0,0,.24);
    }
    .rdb-mbar__btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 60px;
        padding: 14px 12px;
        color: #fff !important;
        font-family: var(--rdb-body);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 13px;
        text-decoration: none;
    }
    .rdb-mbar__btn--call { background: transparent; }
    .rdb-mbar__btn--call:active { background: rgba(255,255,255,.06); }
    .rdb-mbar__btn--quote { background: var(--rdb-accent); }
    .rdb-mbar__btn--quote:active { background: var(--rdb-accent-hover); }
    .rdb-mbar__ico { width: 20px; height: 20px; flex: none; }
    /* Push page content up so the fixed bar does not cover the CTA or footer */
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }
}

/* ─── Notice pages (404, thank-you) ───────────────────────────────────────────── */
.rdb-notice { background: var(--rdb-light); padding: clamp(72px, 12vw, 160px) var(--rdb-pad-x); }
.rdb-notice--ok { background: var(--rdb-warm); }
.rdb-notice__inner { max-width: var(--rdb-col); margin: 0 auto; text-align: center; }
.rdb-notice__code { font-family: var(--rdb-display); font-weight: 800; font-size: clamp(90px, 18vw, 220px); line-height: 1; letter-spacing: -.02em; color: var(--rdb-accent); margin: 0 0 12px; }
.rdb-notice--ok .rdb-notice__code { color: var(--rdb-success); }
.rdb-notice__t { font-family: var(--rdb-serif); font-weight: 700; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.05; color: var(--rdb-dark); margin: 0 auto 20px; max-width: 20ch; }
.rdb-notice__d { max-width: 62ch; margin: 0 auto 40px; font-size: 18px; line-height: 1.6; color: var(--rdb-text); }
.rdb-notice__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 auto 60px; }
.rdb-notice__sub { font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--rdb-accent); margin: 0 0 22px; }
.rdb-notice__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rdb-divider); border: 1px solid var(--rdb-divider); text-align: left; max-width: 940px; margin: 0 auto; }
@media (min-width: 640px) { .rdb-notice__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rdb-notice__grid { grid-template-columns: repeat(4, 1fr); } .rdb-notice--ok .rdb-notice__grid { grid-template-columns: repeat(2, 1fr); } }
.rdb-notice__card { background: #fff; padding: 26px 24px; color: inherit; transition: background .18s ease; display: block; }
.rdb-notice__card:hover { background: var(--rdb-warm); color: inherit; }
.rdb-notice--ok .rdb-notice__card:hover { background: var(--rdb-light); }
.rdb-notice__card h3 { font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 17px; color: var(--rdb-dark); margin: 0 0 8px; }
.rdb-notice__card p { margin: 0; font-size: 14px; color: var(--rdb-text-soft); line-height: 1.5; }

/* ─── Locations hub: regions grouped ──────────────────────────────────────────── */
.rdb-regions .rdb-wrap { display: grid; gap: 56px; }
.rdb-region__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--rdb-dark); margin-bottom: 22px; }
.rdb-region__t { margin: 0; font-family: var(--rdb-serif); font-weight: 700; font-size: clamp(24px, 3vw, 34px); color: var(--rdb-dark); line-height: 1.15; }
.rdb-region__c { margin: 0; font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--rdb-accent); }
.rdb-region__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rdb-divider); border: 1px solid var(--rdb-divider); }
@media (min-width: 640px) { .rdb-region__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .rdb-region__grid { grid-template-columns: repeat(4, 1fr); } }

/* ─── Homepage: Locations strip ────────────────────────────────────────────────── */
.rdb-locs { background: var(--rdb-light); }
.rdb-locs__head { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-end; }
.rdb-locs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 40px; background: var(--rdb-divider); border: 1px solid var(--rdb-divider); }
@media (min-width: 640px)  { .rdb-locs__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .rdb-locs__grid { grid-template-columns: repeat(4, 1fr); } }
.rdb-loc { background: #fff; padding: 22px 22px; display: flex; flex-direction: column; gap: 4px; color: inherit; transition: background .18s ease; }
.rdb-loc:hover { background: var(--rdb-warm); color: inherit; }
.rdb-loc__n { font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; font-size: 18px; letter-spacing: .04em; color: var(--rdb-dark); }
.rdb-loc__r { font-size: 13px; color: var(--rdb-muted); }

/* ─── Homepage: Promises / trust pillars ───────────────────────────────────────── */
.rdb-promises { background: var(--rdb-ink); color: #fff; }
.rdb-promises .rdb-h2 { color: #fff; }
.rdb-promises__grid { display: grid; grid-template-columns: 1fr; gap: 34px; margin-top: 40px; }
@media (min-width: 480px) { .rdb-promises__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rdb-promises__grid { grid-template-columns: repeat(4, 1fr); } }
.rdb-promise { padding-top: 22px; border-top: 3px solid var(--rdb-accent); position: relative; transition: transform .25s ease, border-top-color .25s ease; }
.rdb-promise:hover { transform: translateY(-3px); }
.rdb-promise__n { display: block; font-family: var(--rdb-display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--rdb-accent); letter-spacing: -.01em; margin-bottom: 12px; }
.rdb-promise__t { margin: 0 0 10px; font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; font-size: 20px; letter-spacing: .04em; color: #fff; }
.rdb-promise__d { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.72); }

/* ─── Homepage: Testimonials ───────────────────────────────────────────────────── */
.rdb-tmls { background: var(--rdb-warm); }
.rdb-tmls__grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
@media (min-width: 640px) { .rdb-tmls__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rdb-tmls__grid { grid-template-columns: repeat(3, 1fr); } }
.rdb-tml {
    background: #fff;
    padding: 30px 26px 26px;
    margin: 0;
    display: flex; flex-direction: column; gap: 16px;
    position: relative;
    border-top: 5px solid var(--rdb-accent);
    transition: transform .18s ease, box-shadow .18s ease;
}
.rdb-tml:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43,35,28,.1); }
.rdb-tml__stars { display: inline-flex; gap: 2px; color: var(--rdb-accent); margin: 2px 0 14px; }
.rdb-tml__stars svg { width: 18px; height: 18px; }
.rdb-tml__q { margin: 0; font-size: 16px; color: var(--rdb-quote); line-height: 1.65; flex: 1; }
.rdb-tml__by {
    display: flex; flex-direction: column; gap: 3px;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px;
    color: var(--rdb-dark); margin-top: 16px;
}
.rdb-tml__src { font-weight: 600; letter-spacing: .1em; font-size: 10px; color: var(--rdb-muted); }
.rdb-tmls__more { margin: 34px 0 0; }
.rdb-tmls__more a { font: 700 12px/1 var(--rdb-body); letter-spacing: .14em; text-transform: uppercase; color: var(--rdb-accent); }
.rdb-tmls__more a:hover { color: var(--rdb-accent-hover); }

/* ─── CTA band ─────────────────────────────────────────────────────────────────── */
.rdb-cta { background: var(--rdb-accent); color: #fff; padding: clamp(48px,7vw,84px) var(--rdb-pad-x); }
.rdb-cta__inner { max-width: var(--rdb-col); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px 48px; justify-content: space-between; align-items: center; }
.rdb-cta__l { flex: 1 1 460px; max-width: 720px; }
.rdb-cta .rdb-h2 { color: #fff; font-size: clamp(30px,3.6vw,44px); line-height: 1.1; }
.rdb-cta__sub { margin: 14px 0 0; color: rgba(255,255,255,.9); font-size: 17px; max-width: 56ch; }
.rdb-cta__btns { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
@media (max-width: 640px) { .rdb-cta__btns { flex-direction: column; width: 100%; } }
.rdb-cta .rdb-btn--outline { color: #fff; }
.rdb-cta .rdb-btn--outline:hover { background: #fff; }
.rdb-cta .rdb-btn--outline:hover span { color: var(--rdb-accent); }

/* ─── Generic content blocks (service and city pages) ──────────────────────────── */
.rdb-prose { background: var(--rdb-light); }
/* Body text stays at a comfortable reading measure, but headings, diagrams,
   and the includes list break out wider so the page uses its horizontal
   space rather than stranding content in a narrow column. */
.rdb-prose__inner { max-width: 1160px; margin: 0 auto; }
.rdb-prose__inner > p { max-width: 820px; }
.rdb-prose h2 { font-family: var(--rdb-serif); font-weight: 700; font-size: clamp(26px,2.8vw,38px); line-height: 1.15; letter-spacing: normal; color: var(--rdb-dark); margin: 64px 0 22px; max-width: 24ch; }
/* Includes list: 2-column grid on wider screens, uses the full container width */
.rdb-prose ul { display: grid; grid-template-columns: 1fr; gap: 0 40px; }
@media (min-width: 720px) { .rdb-prose ul { grid-template-columns: repeat(2, 1fr); } }
.rdb-prose h2:first-child { margin-top: 0; }
.rdb-prose p { margin: 0 0 1.1em; }
.rdb-prose ul { margin: 0 0 1.4em; padding: 0; list-style: none; }
.rdb-prose li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--rdb-divider); }
.rdb-prose li::before { content: ""; position: absolute; left: 0; top: 18px; width: 14px; height: 2px; background: var(--rdb-accent); }

/* Card list (used for "services in city" and "related services") */
.rdb-cards { background: var(--rdb-light); }
.rdb-cards__grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
@media (min-width: 560px) { .rdb-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px) { .rdb-cards__grid { grid-template-columns: repeat(3, 1fr); } }
.rdb-card {
    background: #fff;
    padding: 28px 26px 26px;
    border-top: 5px solid var(--rdb-accent);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 220px;
    position: relative;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
a.rdb-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(43,35,28,.1); color: inherit; }
.rdb-card__no {
    position: absolute; top: 22px; right: 24px;
    font-family: var(--rdb-display); font-weight: 700;
    font-size: 30px; line-height: 1;
    color: var(--rdb-divider);
    letter-spacing: -.02em;
}
.rdb-card__ico { width: 44px; height: 44px; color: var(--rdb-accent); flex: none; }
.rdb-card__t { font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; font-size: 20px; line-height: 1.15; color: var(--rdb-dark); margin: 0; max-width: 15ch; }
.rdb-card__d { margin: 0; font-size: 14px; line-height: 1.55; color: var(--rdb-text); flex: 1; }
.rdb-card__more { margin-top: 8px; color: var(--rdb-accent); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* Chips (nearby cities / quick links) */
.rdb-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rdb-chip {
    border: 1px solid var(--rdb-divider); background: #fff; color: var(--rdb-dark);
    padding: 12px 18px; font: 600 13px/1 var(--rdb-body); letter-spacing: .06em; text-transform: uppercase;
}
.rdb-chip:hover { border-color: var(--rdb-accent); color: var(--rdb-accent); }

/* FAQ */
.rdb-faq { background: var(--rdb-warm); }
.rdb-faq__inner { max-width: 860px; margin: 0 auto; }
.rdb-faq__lead { max-width: 640px; margin: 12px 0 40px; font-size: 17px; line-height: 1.6; color: var(--rdb-text); }
.rdb-faq details { background: #fff; border: 1px solid var(--rdb-divider); border-radius: 2px; margin-bottom: 10px; transition: box-shadow .18s ease, border-color .18s ease; }
.rdb-faq details:hover { border-color: var(--rdb-muted); }
.rdb-faq details[open] { border-color: var(--rdb-accent); box-shadow: 0 2px 12px rgba(43,35,28,.05); }
.rdb-faq summary { cursor: pointer; list-style: none; padding: 22px 24px; font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: .04em; color: var(--rdb-dark); display: flex; justify-content: space-between; align-items: center; gap: 20px; line-height: 1.3; }
.rdb-faq summary::-webkit-details-marker { display: none; }
.rdb-faq summary::after { content: "+"; color: var(--rdb-accent); font-weight: 300; font-size: 26px; line-height: 1; flex: none; transition: transform .2s ease; }
.rdb-faq details[open] summary::after { content: "\2212"; }
.rdb-faq details[open] summary { color: var(--rdb-accent); border-bottom: 1px solid var(--rdb-divider); }
.rdb-faq details > p { margin: 0; padding: 20px 24px 26px; font-size: 16px; line-height: 1.7; color: var(--rdb-text); }
@media (min-width: 720px) {
    .rdb-faq summary { padding: 24px 30px; font-size: 17px; }
    .rdb-faq details > p { padding: 20px 30px 28px; }
}

/* ─── Footer ───────────────────────────────────────────────────────────────────── */
.rdb-footer { background: var(--rdb-ink); color: rgba(255,255,255,.62); padding: clamp(56px,7vw,90px) var(--rdb-pad-x) 30px; }
.rdb-footer__grid { max-width: var(--rdb-col); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 40px; }
.rdb-footer__brand { font-family: var(--rdb-display); font-weight: 800; text-transform: uppercase; font-size: 26px; color: #fff; margin: 0 0 16px; letter-spacing: .04em; }
.rdb-footer__blurb { margin: 0; font-size: 14px; max-width: 30ch; }
.rdb-footer h3 { font: 700 12px/1 var(--rdb-body); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.42); margin: 0 0 18px; }
.rdb-footer ul { list-style: none; margin: 0; padding: 0; }
.rdb-footer li { margin: 0 0 11px; }
.rdb-footer a { color: rgba(255,255,255,.62); font-size: 14px; }
.rdb-footer a:hover { color: var(--rdb-accent); }
.rdb-footer__c { color: rgba(255,255,255,.34); font-size: 12px; margin-left: 4px; }
.rdb-footer__all { color: var(--rdb-accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.rdb-footer__all:hover { color: #fff; }
.rdb-footer__privacy { color: rgba(255,255,255,.62); font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rdb-footer__privacy:hover { color: var(--rdb-accent); }
.rdb-footer__bottom { max-width: var(--rdb-col); margin: 46px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 16px 30px; justify-content: space-between; align-items: center; font-size: 13px; }

/* Built by Kliq, short, and it stands out */
.rdb-kliq {
    display: inline-flex; align-items: center; gap: 9px;
    font: 700 12px/1 var(--rdb-body); letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
}
.rdb-kliq b {
    color: #fff; letter-spacing: .12em;
    background: var(--rdb-accent); padding: 6px 10px;
    transition: background .18s ease;
}
.rdb-kliq:hover { color: rgba(255,255,255,.75); }
.rdb-kliq:hover b { background: var(--rdb-accent-hover); }

/* ─── Reveal on scroll (reveal.js adds .js to <html>, then .is-in per element) ───
   A builder's sections should feel set in place, not faded in. Blocks rise and
   settle with a firm ease; grid children lay in one after another like courses,
   driven by --rdb-stagger set on each child by reveal.js. */
.js [data-rdb-reveal] { opacity: 0; transform: translateY(30px); }
.js [data-rdb-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.16,.84,.28,1);
}

/* Staggered children: cards, tiles, steps, promises build in sequence. */
.js [data-rdb-reveal].is-in > .rdb-cards__grid > *,
.js [data-rdb-reveal].is-in > .rdb-grid-tiles > *,
.js [data-rdb-reveal].is-in > .rdb-locs__grid > *,
.js [data-rdb-reveal].is-in > .rdb-promises__grid > *,
.js [data-rdb-reveal].is-in > .rdb-tmls__grid > *,
.js [data-rdb-reveal].is-in > .rdb-band__grid > *,
.js [data-rdb-reveal].is-in .rdb-process__grid > *,
.js [data-rdb-reveal].is-in .rdb-pillars__grid > * {
    animation: rdbLayIn .55s cubic-bezier(.16,.84,.28,1) both;
    animation-delay: calc(var(--rdb-stagger, 0) * 70ms);
}
@keyframes rdbLayIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto !important; }
    [data-rdb-reveal] { opacity: 1; transform: none; }
}

/* Footer NAP block. Kept visually quiet but present in the markup, because
   name, address, and phone need to be crawlable text that matches the Google
   Business Profile exactly. */
.rdb-footer__nap {
    margin-top: 16px;
    font-style: normal;
    font: 400 13px/1.7 var(--rdb-body);
    color: rgba(255, 255, 255, .52);
}
.rdb-footer__nap a { color: rgba(255, 255, 255, .72); }
.rdb-footer__nap a:hover { color: var(--rdb-accent); }

/* ─── Fast homepage hero ──────────────────────────────────────────────────────
   Text-first banner that replaces the WebGL hero on the homepage. The point is
   Largest Contentful Paint: the H1 is real text, so it paints as soon as the
   CSS parses, with no JavaScript, no canvas, and no hero image in the critical
   path. The blueprint grid is a pure CSS gradient, so it costs no request.
   The WebGL hero engine still exists for pages that can afford it. */
.rdb-fhero {
    position: relative;
    background: var(--rdb-ink);
    padding: clamp(40px, 5.5vw, 72px) var(--rdb-pad-x) clamp(32px, 4vw, 56px);
    overflow: hidden;
    border-bottom: 3px solid var(--rdb-accent);
}
/* Blueprint grid, drawn with gradients so it adds zero bytes over the wire. */
.rdb-fhero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(to right, rgba(255,255,255,.045) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 64px);
    mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
    pointer-events: none;
}
.rdb-fhero__inner { position: relative; max-width: var(--rdb-col); margin: 0 auto; }

.rdb-fhero__eyebrow {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin: 0 0 22px;
    font: 600 12px/1.5 var(--rdb-body);
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.56);
}
.rdb-fhero__eyebrow b { color: var(--rdb-accent); font-weight: 700; }
.rdb-fhero__eyebrow span[aria-hidden] { color: rgba(255,255,255,.28); }

.rdb-fhero__h1 {
    margin: 0;
    font-family: var(--rdb-serif);
    font-weight: 800;
    font-size: clamp(34px, 5vw, 72px);
    line-height: .96;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: #fff;
    text-wrap: balance;
    max-width: 24ch;
}
.rdb-fhero__sub {
    margin: 18px 0 0;
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.6;
    color: rgba(255,255,255,.74);
    max-width: 60ch;
}
/* Google rating line, above the CTA. */
.rdb-fhero__rating {
    display: flex; align-items: center; gap: 10px; margin: 18px 0 0;
    font-size: 15px; color: rgba(255,255,255,.72);
}
.rdb-fhero__rating b { color: #fff; font-weight: 700; }
.rdb-stars { display: inline-flex; gap: 2px; color: var(--rdb-accent); }
.rdb-stars svg { width: 18px; height: 18px; }

.rdb-fhero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.rdb-fhero__cta .rdb-btn--outline { color: #fff; }

/* Credential badges under the CTA. */
.rdb-fhero__trust {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 20px 0 0; padding: 0; list-style: none;
}
.rdb-fhero__trust li, .rdb-fhero__trust a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.18);
    font: 700 11px/1 var(--rdb-body); letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.82); white-space: nowrap;
}
.rdb-fhero__trust a { padding: 0; border: 0; }
.rdb-fhero__trust li:has(a) { padding: 0; border: 0; }
.rdb-fhero__trust svg { width: 16px; height: 16px; color: var(--rdb-accent); }
.rdb-fhero__trust a:hover { color: #fff; }
.rdb-fhero__trust a:hover svg { color: #fff; }

/* Static build-phase strip. Same idea the animated hero communicated, but as
   crawlable text with no runtime cost. */
.rdb-fhero__phases {
    display: flex; flex-wrap: wrap; gap: 8px 0;
    margin: 44px 0 0; padding: 0; list-style: none;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 22px;
}
.rdb-fhero__phases li {
    display: inline-flex; align-items: center; gap: 10px;
    font: 600 11px/1 var(--rdb-body);
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.46);
}
.rdb-fhero__phases li::after {
    content: ""; width: 16px; height: 1px;
    background: rgba(255,255,255,.22); margin: 0 12px;
}
.rdb-fhero__phases li:last-child::after { display: none; }
.rdb-fhero__phases li:first-child { color: var(--rdb-accent); }

.rdb-fhero__stats {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 20px 18px; margin: 30px 0 0;
    border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px;
}
.rdb-fhero__stats > div > dt {
    margin: 0 0 6px;
    font: 600 11px/1 var(--rdb-body);
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.rdb-fhero__stats > div > dd {
    margin: 0;
    font-family: var(--rdb-display); font-weight: 700;
    font-size: clamp(22px, 2.6vw, 32px); line-height: 1;
    text-transform: uppercase; color: #fff;
}
.rdb-fhero__stats > div:first-child > dd { color: var(--rdb-accent); }

@media (min-width: 760px) {
    .rdb-fhero__stats { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
@media (max-width: 520px) {
    .rdb-fhero__cta .rdb-btn { width: 100%; }
    .rdb-fhero__phases li:nth-child(n+7) { display: none; }
}

/* Contractor license line. Required in advertising under California B&P 7030.5,
   and it doubles as a trust signal, so it sits in the footer of every page. */
.rdb-footer__lic {
    margin: 12px 0 0;
    font: 600 12px/1.6 var(--rdb-body);
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .42);
}

/* "See all services" link at the foot of the shortened services dropdown. */
.site-nav__panel-more {
    display: block; margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 12px 20px 4px !important;
    color: var(--rdb-accent) !important;
    font: 700 11px/1 var(--rdb-body) !important;
    letter-spacing: .14em !important; text-transform: uppercase !important;
}
.site-nav__panel-more:hover { color: #fff !important; background: transparent !important; }

/* Recent-work photo band on service pages. Two photos side by side. */
.rdb-band { background: var(--rdb-light); }
.rdb-band__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px){ .rdb-band__grid{ grid-template-columns: 1fr 1fr; } }
.rdb-band__fig { margin: 0; }
.rdb-band__fig img {
    display: block; width: 100%; height: 100%;
    aspect-ratio: 16 / 10; object-fit: cover;
    border: 1px solid var(--rdb-divider);
    box-shadow: 0 8px 22px rgba(18,34,54,.12);
}

/* Branded photo placeholder (used until real job photos land). */
.rdb-hphoto--phold, .rdb-phold {
    aspect-ratio: 16 / 10; width: 100%;
}
.rdb-phold {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center; padding: 24px;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 12px),
        var(--rdb-ink);
    border: 1px solid var(--rdb-dark);
}
.rdb-phold__ico { color: var(--rdb-accent); }
.rdb-phold__ico svg { width: 54px; height: 54px; stroke-width: 1.4; }
.rdb-phold__name {
    font-family: var(--rdb-display); font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; font-size: clamp(18px,2.4vw,26px); color: #fff;
}
.rdb-phold__note {
    font: 600 11px/1 var(--rdb-body); letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}

/* Services are a catalog, not a sequence: drop the numbers on service cards and
   tiles (numbering stays on the real process steps). */
.rdb-card__no, .rdb-tile__i { display: none; }

/* Contact page map. Free keyless Google embed, lazy-loaded, so it costs nothing
   and does not slow the rest of the site. */
.rdb-map__frame {
    border: 1px solid var(--rdb-divider);
    box-shadow: 0 10px 30px rgba(18,34,54,.12);
    line-height: 0;
}
.rdb-map__addr { margin: 18px 0 0; }
.rdb-map__addr a { font: 700 12px/1 var(--rdb-body); letter-spacing: .14em; text-transform: uppercase; color: var(--rdb-accent); }
.rdb-map__addr a:hover { color: var(--rdb-accent-hover); }

/* Gallery variant of the recent-work band (3+ photos). */
.rdb-band__grid--gallery { grid-template-columns: 1fr; }
@media (min-width: 640px){ .rdb-band__grid--gallery{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px){ .rdb-band__grid--gallery{ grid-template-columns: repeat(3, 1fr); } }

/* Single featured photo in the recent-work band (one extra photo). */
.rdb-band__grid--single { grid-template-columns: 1fr; max-width: 900px; }

/* ─── Mobile touch targets ─────────────────────────────────────────────────────
   Every tappable thing needs a comfortable finger-sized hit area on a phone.
   Inline text links in lists and section headers were rendering 14 to 21px tall,
   which is well under the 44px guideline, so they get real padding on small
   screens without changing how they look on desktop. */
@media (max-width: 720px) {
    /* Footer nav lists: one comfortable row per link. */
    .rdb-footer li { margin: 0; }
    .rdb-footer li a {
        display: block;
        padding: 12px 0;
        min-height: 44px;
        box-sizing: border-box;
    }
    .rdb-footer__nap a { display: inline-block; padding: 6px 0; }

    /* Section "see all" links and other inline actions. */
    .rdb-services__link,
    .rdb-tmls__more a,
    .rdb-map__addr a,
    .rdb-fhero__trust a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Hero credential chips: give them room to be tapped and read. */
    .rdb-fhero__trust li { min-height: 44px; }

    /* Nudge the smallest labels up so they stay legible on a phone. */
    .rdb-tml__src { font-size: 11px; }
    .rdb-fhero__trust li,
    .rdb-fhero__trust a { font-size: 12px; }
}

/* Remaining interactive controls brought up to a full finger target. */
@media (max-width: 720px) {
    .site-header__menu { min-width: 44px; min-height: 44px; }
    .rdb-drawer__close { min-width: 44px; min-height: 44px; }
    .rdb-drawer__call { min-height: 48px; }
    .rdb-footer__nap a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Responsive images are wrapped in <picture>, which is inline by default and
   would otherwise leave a baseline gap under every photo. */
picture { display: block; }
.rdb-hphoto picture, .rdb-band__fig picture, .rdb-work__grid picture { height: 100%; }

/* ─── Service cards lead with the work ────────────────────────────────────────
   A remodeler is judged on photos, so each card opens with a real project image
   and the text sits beneath it. Cards without a photo yet fall back to the line
   icon in the same slot, so a mixed grid still lines up. */
.rdb-card { padding: 0 0 26px; overflow: hidden; }
.rdb-card__media {
    display: block; margin: 0 0 4px;
    background: var(--rdb-divider);
}
.rdb-card__media img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 16 / 10; object-fit: cover;
    transition: transform .35s ease;
}
a.rdb-card:hover .rdb-card__media img { transform: scale(1.03); }
.rdb-card__iconwrap {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 10; background: var(--rdb-ink);
    margin: 0 0 4px;
}
.rdb-card__iconwrap svg { width: 54px; height: 54px; color: var(--rdb-accent); }
.rdb-card__t, .rdb-card__d, .rdb-card__more { padding-left: 26px; padding-right: 26px; }
.rdb-card__t { margin-top: 20px; }

/* ─── Homepage hero background ────────────────────────────────────────────────
   Two project photos split by a diagonal seam: home addition on the left,
   kitchen on the right. The headline and buttons sit over the left side, so that
   panel runs under the heaviest part of the scrim while the kitchen stays clear.

   Mobile deliberately drops the split. Two photos either side of a slash is
   unreadable on a phone, so only the kitchen layer is painted, and the addition
   layer never gets a background-image at all so it is never downloaded. */
.rdb-fhero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;   /* fixed jitters badly on iOS Safari */
}

/* Kitchen. The only photo on small screens. */
.rdb-fhero__bg--b {
    background-image: image-set(url("/assets/img/hero-800.webp") type("image/webp"),
                                url("/assets/img/hero-800.jpg") type("image/jpeg"));
    background-image: -webkit-image-set(url("/assets/img/hero-800.webp") type("image/webp"),
                                        url("/assets/img/hero-800.jpg") type("image/jpeg"));
}
/* Addition. No image declared here, so phones never fetch it. */
.rdb-fhero__bg--a { display: none; }

/* Readability scrim. Deepest under the text, easing right so the kitchen shows.
   This is what keeps white type legible over a photograph. */
.rdb-fhero__scrim {
    position: absolute; inset: 0;
    /* Mobile: the headline runs the full width, so the scrim stays heavy all the
       way across. Measured contrast against the kitchen photo is 12.6:1 at its
       weakest, comfortably past the 4.5:1 requirement. */
    background: linear-gradient(100deg,
        rgba(18,34,54,.90) 0%,
        rgba(18,34,54,.80) 100%);
}
@media (min-width: 900px) {
    /* Desktop: the text only occupies the left half, so the scrim can open up
       sharply on the right and let the kitchen actually read as a photograph.
       Measured: 10:1 or better everywhere text sits, dropping to a visible
       mid-tone past the seam. */
    .rdb-fhero__scrim {
        background: linear-gradient(100deg,
            rgba(18,34,54,.92) 0%,
            rgba(18,34,54,.88) 35%,
            rgba(18,34,54,.60) 60%,
            rgba(18,34,54,.32) 100%);
    }
}

@media (min-width: 700px) {
    .rdb-fhero__bg--b {
        background-image: image-set(url("/assets/img/hero-1200.webp") type("image/webp"),
                                    url("/assets/img/hero-1200.jpg") type("image/jpeg"));
        background-image: -webkit-image-set(url("/assets/img/hero-1200.webp") type("image/webp"),
                                            url("/assets/img/hero-1200.jpg") type("image/jpeg"));
    }
}

/* The diagonal only appears once there is width to carry it. */
@media (min-width: 900px) {
    .rdb-fhero__bg--a {
        display: block;
        background-image: image-set(url("/assets/img/hero-addition-1200.webp") type("image/webp"),
                                    url("/assets/img/hero-addition-1200.jpg") type("image/jpeg"));
        background-image: -webkit-image-set(url("/assets/img/hero-addition-1200.webp") type("image/webp"),
                                            url("/assets/img/hero-addition-1200.jpg") type("image/jpeg"));
        clip-path: polygon(0 0, 52% 0, 38% 100%, 0 100%);
    }
    .rdb-fhero__bg--b {
        clip-path: polygon(52% 0, 100% 0, 100% 100%, 38% 100%);
    }
    /* Barn red seam along the join, so the split reads as a deliberate device
       rather than two photos butted together. */
    .rdb-fhero__scrim::after {
        content: "";
        position: absolute; inset: 0;
        background: var(--rdb-accent);
        clip-path: polygon(51.85% 0, 52.15% 0, 38.15% 100%, 37.85% 100%);
    }
}

@media (min-width: 1400px) {
    .rdb-fhero__bg--b {
        background-image: image-set(url("/assets/img/hero.webp") type("image/webp"),
                                    url("/assets/img/hero.jpg") type("image/jpeg"));
        background-image: -webkit-image-set(url("/assets/img/hero.webp") type("image/webp"),
                                            url("/assets/img/hero.jpg") type("image/jpeg"));
    }
    .rdb-fhero__bg--a {
        background-image: image-set(url("/assets/img/hero-addition.webp") type("image/webp"),
                                    url("/assets/img/hero-addition.jpg") type("image/jpeg"));
        background-image: -webkit-image-set(url("/assets/img/hero-addition.webp") type("image/webp"),
                                            url("/assets/img/hero-addition.jpg") type("image/jpeg"));
    }
}

/* Blueprint grid sits above the photos, quieter now that it has competition. */
.rdb-fhero::before { z-index: 1; opacity: .5; }
.rdb-fhero__inner { z-index: 2; }