/* ============================================================
   RAVMASK D-SIGNS — bespoke theme
   Pixel-targeted to ravmaskdsigns.com (Neve customizer)
   Tokens lifted directly from the live site:
     primary  #15419c  (deep blue — buttons, links)
     accent   #5abb3f  (vivid green — hover, accents)
     dark     #0d1821  (header/footer chrome)
     light    #f8f8f8  (alt section bg)
     text     #2c2c2c
     fonts    Gabarito 400/500/600/800
     headings 800 (most), uppercase H1/H2 in hero
     buttons  pill-shaped, deep-blue with green hover
   ============================================================ */

:root {
    --rd-primary:        #15419c;
    --rd-primary-hover:  #0e3174;
    --rd-accent:         #5abb3f;
    --rd-accent-hover:   #4aa030;
    --rd-dark:           #0d1821;
    --rd-dark-2:         #15212c;
    --rd-light-bg:       #f8f8f8;
    --rd-site-bg:        #ffffff;
    --rd-text:           #2c2c2c;
    --rd-text-muted:     #5a5a5a;
    --rd-text-on-dark:   #ffffff;
    --rd-line:           rgba(0, 0, 0, .08);
    --rd-line-dark:      rgba(255, 255, 255, .12);
    --rd-radius:         8px;
    --rd-radius-pill:    999px;
    --rd-radius-card:    10px;
    --rd-shadow-card:    0 2px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.07);
    --rd-shadow-elev:    0 12px 36px rgba(13, 24, 33, .18);
    --rd-container:      1170px;
    --rd-container-wide: 1320px;
    --rd-h-header:       86px;
    --rd-fs-h1:          3.25rem;
    --rd-fs-h2:          2.25rem;
    --rd-fs-h3:          1.35rem;
    --rd-fs-h4:          1.05rem;
    --rd-ff:             "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}
body {
    margin: 0;
    background: var(--rd-site-bg);
    color: var(--rd-text);
    font-family: var(--rd-ff);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--rd-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--rd-accent); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rd-ff);
    color: var(--rd-text);
    margin: 0 0 .6em;
    letter-spacing: 0;
    /* Prevent long single-word headings (RAVMASK D-SIGNS) from blowing past
       viewport edge on phones. */
    overflow-wrap: anywhere;
}
.rd-notification {
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (max-width: 600px) {
    .rd-notification { font-size: .82rem !important; padding: 8px 14px !important; }
}
h1 { font-size: var(--rd-fs-h1); font-weight: 800; line-height: 1.15; }
h2 { font-size: var(--rd-fs-h2); font-weight: 800; line-height: 1.2; }
h3 { font-size: var(--rd-fs-h3); font-weight: 600; line-height: 1.3; }
h4 { font-size: var(--rd-fs-h4); font-weight: 600; line-height: 1.3; }

p { margin: 0 0 1.1em; }
hr { border: 0; border-top: 1px solid var(--rd-line); margin: 2rem 0; }

/* Skip link for accessibility */
.skip-to-content {
    position: absolute; left: -9999px; top: 0;
    background: var(--rd-primary); color: #fff; padding: 10px 16px;
    z-index: 9999; border-radius: 0 0 var(--rd-radius) 0;
}
.skip-to-content:focus { left: 0; }

/* ── Layout primitives ──────────────────────────────────────── */
.rd-container {
    width: 100%;
    max-width: var(--rd-container);
    margin-inline: auto;
    padding-inline: 24px;
}
.rd-container--wide { max-width: var(--rd-container-wide); }
.rd-section          { padding: 80px 0; }
.rd-section--tight   { padding: 48px 0; }
.rd-section--lg      { padding: 112px 0; }
.rd-section--dark    { background: var(--rd-dark); color: var(--rd-text-on-dark); }
.rd-section--dark h1,
.rd-section--dark h2,
.rd-section--dark h3,
.rd-section--dark h4,
.rd-section--dark h5,
.rd-section--dark h6 { color: var(--rd-text-on-dark); }
.rd-section--light   { background: var(--rd-light-bg); }
.rd-section__eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    font-weight: 600;
    color: var(--rd-accent);
    margin: 0 0 .8rem;
}
.rd-section__title {
    text-align: center;
    margin-bottom: 1rem;
}
.rd-section__lead {
    text-align: center;
    color: var(--rd-text-muted);
    max-width: 720px;
    margin: 0 auto 3rem;
    font-size: 1.05rem;
}

/* ── Buttons ────────────────────────────────────────────────── */
.rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: 14px 28px;
    font-family: var(--rd-ff);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: var(--rd-radius-pill);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    text-align: center;
    white-space: nowrap;
}
.rd-btn:active { transform: translateY(1px); }
.rd-btn--primary {
    background: var(--rd-primary);
    color: #fff;
}
.rd-btn--primary:hover { background: var(--rd-accent); color: #fff; }
.rd-btn--accent {
    background: var(--rd-accent);
    color: #fff;
}
.rd-btn--accent:hover { background: var(--rd-accent-hover); color: #fff; }
.rd-btn--outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.5);
}
.rd-btn--outline:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.rd-btn--ghost {
    background: transparent;
    color: var(--rd-primary);
    border-color: var(--rd-primary);
}
.rd-btn--ghost:hover { background: var(--rd-primary); color: #fff; }
.rd-btn__icon {
    width: 1em; height: 1em;
    fill: currentColor;
}

/* ── Header ─────────────────────────────────────────────────── */
/* Dark "billboard" header — the logo is intentionally taller than the bar
   and overflows the bottom so its slanted edge hangs over the next section. */
.rd-header {
    position: sticky;
    top: 0;
    background: var(--rd-dark);
    z-index: 100;
    border-bottom: 3px solid var(--rd-accent);
    /* IMPORTANT: no overflow:hidden — the logo must escape downward. */
    overflow: visible;
}
.rd-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--rd-h-header);
    /* Container must also allow the logo to overflow downward. */
    overflow: visible;
    position: relative;
}
.rd-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* Hanging-logo trick: take the logo out of vertical flow and pin its top
       to the header's top, then let it grow taller than the header. The next
       sibling section starts immediately under the header — the logo's
       slanted bottom hangs over that section's first chunk. */
    position: relative;
    align-self: stretch;
    z-index: 2;
}
.rd-logo img {
    /* Make the logo significantly taller than the header so ~35-40% of it
       hangs below the header's bottom edge, exposing the slanted asset. */
    height: calc(var(--rd-h-header) * 1.55);
    width: auto;
    object-fit: contain;
    display: block;
    /* Pin top to header top; the rest spills below. */
    position: absolute;
    top: 8px;
    left: 0;
    /* Keep the slant in front of the hero / first section. */
    z-index: 10;
    /* Subtle drop-shadow gives the hanging tab depth without competing with
       the asset's own slant geometry. */
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
    pointer-events: auto;
}
.rd-logo--text {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--rd-text-on-dark);
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* Reserve horizontal space for the absolute-positioned logo so nav + CTA
   don't slide underneath it. The logo is rendered at (header height × 1.55)
   tall — 86 × 1.55 ≈ 133px — and the asset is ~2.247:1, so the on-screen
   width is ~300px. Values below match that footprint and step down on smaller
   screens. The mobile breakpoint also reduces the height multiplier. */
.rd-logo { width: 305px; }
@media (max-width: 1100px) { .rd-logo { width: 250px; } .rd-logo img { height: calc(var(--rd-h-header) * 1.4); } }
@media (max-width: 900px)  { .rd-logo { width: 200px; } .rd-logo img { height: calc(var(--rd-h-header) * 1.25); top: 12px; } }
@media (max-width: 600px)  { .rd-logo { width: 170px; } .rd-logo img { height: calc(var(--rd-h-header) * 1.1); top: 14px; filter: none; } }

.rd-nav {
    display: none;
}
@media (min-width: 992px) {
    .rd-nav { display: flex; align-items: center; gap: 28px; }
}
.rd-nav__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}
.rd-nav__menu > li { position: relative; }
.rd-nav__menu > li > a,
.rd-nav__menu > li > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    color: rgba(255, 255, 255, .92);
    font-weight: 500;
    font-size: .95rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .82rem;
}
.rd-nav__menu > li > a:hover,
.rd-nav__menu > li:hover > span { color: var(--rd-accent); }

.rd-nav__submenu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow-card);
    min-width: 220px;
    padding: 8px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 200;
}
.rd-nav__menu > li:hover > .rd-nav__submenu,
.rd-nav__menu > li:focus-within > .rd-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.rd-nav__submenu li a {
    display: block;
    padding: 8px 18px;
    font-size: .9rem;
    color: var(--rd-text);
}
.rd-nav__submenu li a:hover {
    color: var(--rd-primary);
    background: var(--rd-light-bg);
}

.rd-header__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
/* Call button on the dark header — use the green accent for a billboard pop. */
.rd-header__cta .rd-btn {
    padding: 11px 22px;
    font-size: .9rem;
    background: var(--rd-accent);
    color: #fff;
}
.rd-header__cta .rd-btn:hover {
    background: #fff;
    color: var(--rd-dark);
}

/* Mobile menu toggle */
.rd-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    /* Solid contrast pill on the dark header so the burger is unmissable. */
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    transition: background-color .15s ease;
}
.rd-burger:hover, .rd-burger:focus-visible { background: var(--rd-accent); border-color: var(--rd-accent); }
.rd-burger svg { width: 24px; height: 24px; }
@media (min-width: 992px) {
    .rd-burger { display: none; }
}

/* Mobile menu drawer */
.rd-mobile-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: 320px;
    max-width: 85vw;
    background: #fff;
    box-shadow: -8px 0 24px rgba(0,0,0,.15);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}
.rd-mobile-menu.is-open { transform: translateX(0); }
.rd-mobile-menu__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--rd-line);
}
.rd-mobile-menu__close {
    background: transparent; border: 0; cursor: pointer; font-size: 1.8rem;
    line-height: 1; color: var(--rd-text);
}
.rd-mobile-menu__list {
    list-style: none; margin: 0; padding: 8px 0;
    overflow-y: auto; flex: 1;
}
.rd-mobile-menu__list li a,
.rd-mobile-menu__list li > span {
    display: block;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--rd-text);
    border-bottom: 1px solid var(--rd-line);
}
.rd-mobile-menu__list li a:hover { color: var(--rd-primary); }
.rd-mobile-menu__list .rd-mobile-submenu {
    list-style: none;
    background: var(--rd-light-bg);
    padding: 0;
    margin: 0;
}
.rd-mobile-menu__list .rd-mobile-submenu li a {
    padding-left: 36px;
    font-size: .92rem;
    font-weight: 400;
}
.rd-mobile-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 999;
}
.rd-mobile-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ── Hero ───────────────────────────────────────────────────── */
/* Pure-CSS hero: blue diagonal slant cut + parallel green/yellow accent
   stripes (no PNG background — all geometry is clip-path + linear-gradient).
   Layered stack (bottom → top):
     1. .rd-hero        white base
     2. .rd-hero__bg    blue gradient, clip-pathed to the upper triangle
     3. .rd-hero__stripe--yellow1, --green, --yellow2  parallel diagonals
     4. .rd-hero__inner content grid (copy + photo)
   The slant edge runs from (0%, 83%) → (100%, 58%) — mirrors the live site. */
:root {
    --rd-slant-left:  83%;
    --rd-slant-right: 58%;
    --rd-hero-blue-1: #0a2178;
    --rd-hero-blue-2: #0061c6;
    --rd-stripe-green:  #5abb3f;
    --rd-stripe-yellow: #ffd900;
}
.rd-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
    color: var(--rd-text-on-dark);
    /* min-height + top clearance for the hanging logo so the eyebrow text
       never crowds the logo overhang. */
    min-height: 720px;
    padding-top: 110px;
    padding-bottom: 180px;
}
.rd-hero__bg {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, var(--rd-hero-blue-1) 0%, var(--rd-hero-blue-2) 100%);
    /* Diagonal cut — bottom edge drops from 58% on the right to 83% on the left. */
    clip-path: polygon(0 0, 100% 0, 100% var(--rd-slant-right), 0 var(--rd-slant-left));
}
/* Three accent stripes — each is a thin parallelogram running along the slant.
   Each subsequent stripe offsets downward by 3-4 percentage points so they
   stack visually beneath the main slant line. */
.rd-hero__stripe {
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
}
.rd-hero__stripe--yellow1 {
    background: var(--rd-stripe-yellow);
    clip-path: polygon(
        0 calc(var(--rd-slant-left) + 0%),
        100% calc(var(--rd-slant-right) + 0%),
        100% calc(var(--rd-slant-right) + 1.2%),
        0 calc(var(--rd-slant-left) + 1.2%)
    );
}
.rd-hero__stripe--green {
    background: var(--rd-stripe-green);
    clip-path: polygon(
        0 calc(var(--rd-slant-left) + 1.5%),
        100% calc(var(--rd-slant-right) + 1.5%),
        100% calc(var(--rd-slant-right) + 4%),
        0 calc(var(--rd-slant-left) + 4%)
    );
}
.rd-hero__stripe--yellow2 {
    background: var(--rd-stripe-yellow);
    clip-path: polygon(
        0 calc(var(--rd-slant-left) + 4.5%),
        100% calc(var(--rd-slant-right) + 4.5%),
        100% calc(var(--rd-slant-right) + 5.5%),
        0 calc(var(--rd-slant-left) + 5.5%)
    );
}

.rd-hero__inner {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}
@media (min-width: 900px) {
    .rd-hero__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: 56px;
    }
}
.rd-hero__copy {
    max-width: 640px;
    /* Photo must not cover the decorative bars — both columns clamp their
       content well above the slant zone via the section's bottom padding. */
}
.rd-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    /* Live site: h2 inside cover block renders at ~28px; we match. */
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 .35rem;
    text-align: left;
}
.rd-hero__title {
    /* Live site h1: 3.5rem desktop. Match. */
    font-size: clamp(2.6rem, 5.5vw, 3.75rem);
    line-height: 1.05;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0 0 1.75rem;
}
.rd-hero__title strong { display: block; color: var(--rd-accent); }
.rd-hero__lead {
    /* Live site explicit inline style font-size:17px — match. */
    font-size: 17px;
    line-height: 1.65;
    color: #fff;
    margin: 0 0 2rem;
    max-width: 560px;
}
.rd-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
/* Photo column — locked to the upper "blue" half of the hero so it never
   bleeds over the green/yellow stripes. The max-height + aspect-ratio
   constrain growth; object-fit ensures content scales rather than the
   photo growing tall enough to reach the slant. */
.rd-hero__photo {
    position: relative;
    /* Keep the photo block inside the safe zone above the slant. */
    max-width: 560px;
    margin-left: auto;
}
.rd-hero__photo img {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 360px;
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow-elev);
    object-fit: cover;
    object-position: center;
}
.rd-hero__photo::before {
    content: '';
    position: absolute;
    inset: -14px -14px auto auto;
    width: 60%;
    height: 60%;
    border: 2px solid var(--rd-accent);
    border-radius: var(--rd-radius-card);
    z-index: -1;
    pointer-events: none;
}

/* Visibility split: desktop photo lives in the right grid column, mobile photo
   slots between H1 and the lead paragraph inside .rd-hero__copy. */
.rd-hero__photo--mobile  { display: none; }
.rd-hero__photo--desktop { display: block; }

/* ── Services grid ──────────────────────────────────────────── */
.rd-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.rd-service-card {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-card);
    padding: 36px 28px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.rd-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rd-shadow-card);
    border-color: var(--rd-primary);
}
.rd-service-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(21, 65, 156, .1);
    color: var(--rd-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background-color .15s ease, color .15s ease;
}
.rd-service-card:hover .rd-service-card__icon {
    background: var(--rd-primary);
    color: #fff;
}
.rd-service-card__icon svg { width: 26px; height: 26px; fill: currentColor; }
.rd-service-card__title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 .7rem;
    color: var(--rd-text);
}
.rd-service-card__desc {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--rd-text-muted);
    margin: 0 0 1.5rem;
    flex: 1;
}
.rd-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    color: var(--rd-primary);
    font-weight: 600;
    font-size: .92rem;
    align-self: flex-start;
}
.rd-service-card__link::after {
    content: '→';
    transition: transform .15s ease;
}
.rd-service-card__link:hover { color: var(--rd-accent); }
.rd-service-card__link:hover::after { transform: translateX(4px); }

/* ── Featured projects (Projects mendol) ────────────────────── */
.rd-projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.rd-project-card {
    position: relative;
    border-radius: var(--rd-radius-card);
    overflow: hidden;
    background: var(--rd-light-bg);
}
.rd-project-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.rd-project-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.rd-project-card:hover .rd-project-card__media img { transform: scale(1.05); }
.rd-project-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 24, 33, .88) 0%, rgba(13, 24, 33, .25) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 22px;
    color: #fff;
}
.rd-project-card__overlay h3 {
    color: #fff;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}
.rd-project-card__tag {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    background: var(--rd-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: var(--rd-radius-pill);
    align-self: flex-start;
}

/* ── Portfolio group layout ─────────────────────────────────── */
/* Used on /portfolio when featured_projects has count=0 (show all).
   Renders pill-filter nav + per-division groups instead of one flat grid. */
.rd-portfolio-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto 48px;
}
.rd-portfolio-filter__pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: #fff;
    color: var(--rd-text);
    border: 2px solid var(--rd-line);
    border-radius: var(--rd-radius-pill);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rd-portfolio-filter__pill:hover,
.rd-portfolio-filter__pill.is-active {
    background: var(--rd-primary);
    color: #fff;
    border-color: var(--rd-primary);
}

.rd-portfolio-group {
    margin: 0 0 64px;
    scroll-margin-top: 110px; /* leave room under the sticky header on anchor jumps */
}
.rd-portfolio-group:last-child { margin-bottom: 0; }
.rd-portfolio-group__heading {
    display: inline-flex;
    align-items: baseline;
    gap: .35em;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--rd-text);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 22px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--rd-accent);
}
.rd-portfolio-group__count {
    font-size: .9rem;
    font-weight: 500;
    color: var(--rd-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Featured posts ─────────────────────────────────────────── */
.rd-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.rd-post-card {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-card);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
}
.rd-post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--rd-shadow-card);
}
.rd-post-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--rd-light-bg);
}
.rd-post-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.rd-post-card:hover .rd-post-card__media img { transform: scale(1.06); }
.rd-post-card__body {
    padding: 22px 24px 26px;
    display: flex; flex-direction: column;
    flex: 1;
}
.rd-post-card__tag {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .7rem;
    font-weight: 600;
    color: var(--rd-accent);
    margin: 0 0 .6rem;
}
.rd-post-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 .7rem;
    line-height: 1.3;
    color: var(--rd-text);
}
.rd-post-card__title a { color: inherit; }
.rd-post-card__title a:hover { color: var(--rd-primary); }
.rd-post-card__excerpt {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--rd-text-muted);
    margin: 0 0 1rem;
    flex: 1;
}
.rd-post-card__more {
    font-size: .85rem; font-weight: 600;
    color: var(--rd-primary);
}
.rd-post-card__more:hover { color: var(--rd-accent); }

/* ── CTA strip ──────────────────────────────────────────────── */
.rd-cta-strip {
    background: var(--rd-primary);
    color: #fff;
    padding: 56px 0;
    text-align: center;
}
.rd-cta-strip h2 {
    color: #fff;
    font-size: 2rem;
    margin: 0 0 .6rem;
}
.rd-cta-strip p {
    color: rgba(255,255,255,.9);
    margin: 0 0 1.6rem;
    font-size: 1.05rem;
}
.rd-cta-strip__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ── Footer ─────────────────────────────────────────────────── */
.rd-footer {
    background: var(--rd-dark);
    color: rgba(255,255,255,.78);
    padding: 64px 0 24px;
    font-size: .92rem;
}
.rd-footer a { color: rgba(255,255,255,.85); }
.rd-footer a:hover { color: var(--rd-accent); }
.rd-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 768px) {
    .rd-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.rd-footer__brand img {
    height: 60px;
    width: auto;
    margin-bottom: 1rem;
    filter: brightness(1.1);
}
.rd-footer__brand p {
    color: rgba(255,255,255,.7);
    font-size: .9rem;
    line-height: 1.6;
    max-width: 360px;
}
.rd-footer__col h4 {
    font-size: .85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #fff;
    margin: 0 0 1rem;
}
.rd-footer__col ul {
    list-style: none; padding: 0; margin: 0;
}
.rd-footer__col li { margin-bottom: .55rem; }
.rd-footer__contact {
    display: flex; flex-direction: column; gap: .5rem;
}
.rd-footer__contact a { display: inline-flex; align-items: center; gap: .55em; }
.rd-footer__contact svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.rd-footer__bottom {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--rd-line-dark);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .82rem;
    color: rgba(255,255,255,.6);
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 900px) {
    .rd-hero { min-height: 620px; padding-top: 90px; padding-bottom: 200px; }
    .rd-hero__photo { max-width: 100%; }
    .rd-hero__photo img { max-height: 280px; }
}
@media (max-width: 600px) {
    .rd-section { padding: 64px 0; }
    /* Phone-tier hero: shallower slant so the stripes don't eat
       the bottom-third of the viewport, tighter padding so the eyebrow
       starts well below the hanging-logo overhang. */
    .rd-hero {
        --rd-slant-left:  88%;
        --rd-slant-right: 75%;
        min-height: 480px;
        padding-top: 64px;
        padding-bottom: 130px;
    }
    .rd-hero__eyebrow { font-size: 1.05rem; letter-spacing: .1em; margin-bottom: .25rem; }
    /* Tighten the title aggressively for 320–414 widths. 14ch fits the
       longest two-word headline ("RAVMASK D-SIGNS") inside 320px usable. */
    .rd-hero__title {
        font-size: clamp(1.65rem, 7.5vw, 2.4rem);
        line-height: 1.1;
        overflow-wrap: anywhere;
        word-break: normal;
        margin-bottom: 1.25rem;
    }
    .rd-hero__lead { font-size: 15px; }
    .rd-hero__actions { gap: 10px; }
    .rd-hero__actions .rd-btn { padding: 12px 18px; font-size: .85rem; }
    /* Mobile photo: shown between H1 and lead paragraph; desktop column hides. */
    .rd-hero__photo--desktop { display: none; }
    .rd-hero__photo--mobile  {
        display: block;
        max-width: 100%;
        margin: 0 auto 1.5rem;
    }
    .rd-hero__photo--mobile img {
        aspect-ratio: 16 / 10;
        max-height: 220px;
        border-radius: var(--rd-radius-card);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    }
    /* Suppress the accent corner-ring overlay on mobile — only used on desktop */
    .rd-hero__photo--mobile::before { content: none; }
    h2 { font-size: 1.55rem; overflow-wrap: anywhere; }
    .rd-cta-strip h2 { font-size: 1.4rem; }
    /* Container side-padding tighter so headlines have more usable width */
    .rd-container { padding-inline: 18px; }
}
@media (max-width: 380px) {
    /* Tightest tier — 320px viewports */
    .rd-hero__title { font-size: 1.55rem; }
    .rd-hero__eyebrow { font-size: .95rem; }
    .rd-container { padding-inline: 14px; }
}

/* ── Inner page hero (Mendols/Pages show.blade.php) ─────────── */
/* Override the generic .inner-hero / .inner-hero-banner / .inner-hero-overlay
   classes so individual pages get the same dark-blue / slant treatment as
   the homepage hero, without needing per-page templates. */
.inner-page-wrapper { background: #fff; }

.inner-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 260px;
    background: linear-gradient(90deg, var(--rd-hero-blue-1) 0%, var(--rd-hero-blue-2) 100%);
    color: var(--rd-text-on-dark);
    padding: 110px 0 80px;
}
/* When a banner image is present, the hero is taller and gets the full
   brand stripe treatment (matches the homepage hero geometry). */
.inner-hero:has(.inner-hero-banner img) {
    min-height: 360px;
    padding: 130px 0 100px;
}
/* Default ::after = clean white slant cut. No stripes — the stripes are a
   "billboard finish" that only makes sense paired with an image. */
.inner-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 50px;
    background: linear-gradient(104deg, transparent calc(100% - 50px), #fff calc(100% - 50px));
    z-index: 4;
    pointer-events: none;
}
/* With a banner image, layer the yellow → green → yellow accent stripes
   on top of the slant cut. */
.inner-hero:has(.inner-hero-banner img)::after {
    height: 60px;
    background:
        /* lower yellow stripe */
        linear-gradient(104deg, transparent calc(100% - 22px), var(--rd-stripe-yellow) calc(100% - 22px), var(--rd-stripe-yellow) calc(100% - 16px), transparent calc(100% - 16px)),
        /* green accent stripe */
        linear-gradient(104deg, transparent calc(100% - 36px), var(--rd-stripe-green) calc(100% - 36px), var(--rd-stripe-green) calc(100% - 24px), transparent calc(100% - 24px)),
        /* white wedge (the actual slant cut to expose the page below) */
        linear-gradient(104deg, transparent calc(100% - 60px), #fff calc(100% - 60px));
}
.inner-hero-banner {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .35;
}
.inner-hero-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.inner-hero-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}
.inner-hero h1 {
    color: #fff !important;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
}
.inner-hero-overlay p {
    color: rgba(255,255,255,.85) !important;
    font-size: 1.05rem !important;
    margin-top: 14px !important;
    max-width: 720px;
    margin-inline: auto;
}
.inner-hero-content {
    text-align: center;
    max-width: 820px;
    padding: 0 24px;
    margin: 0 auto;
}
.inner-hero-lead {
    color: rgba(255,255,255,.88);
    font-size: 1.05rem;
    line-height: 1.65;
    margin-top: 14px;
    max-width: 720px;
    margin-inline: auto;
}
.inner-hero-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ── Inner page content (.page-content) ─────────────────────── */
/* The imported WordPress markup leans on Gutenberg block classes
   (wp-block-heading, wp-block-list, wp-block-media-text, wp-block-columns,
   wp-block-image, wp-block-video). The Neve theme styled all of these on
   the live site; since we don't load Neve, we have to style them ourselves
   so imported pages look intentional. */
.inner-content {
    max-width: 1170px;
    margin-inline: auto;
    padding: 64px 24px;
    color: var(--rd-text);
    font-size: 1rem;
    line-height: 1.75;
}
.page-content { font-family: var(--rd-ff); }

.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 {
    font-family: var(--rd-ff);
    color: var(--rd-text);
    font-weight: 800;
    margin: 2em 0 .65em;
    line-height: 1.2;
}
.page-content h1:first-child,
.page-content h2:first-child,
.page-content h3:first-child { margin-top: 0; }

.page-content h2 { font-size: 1.85rem; color: var(--rd-primary); }
.page-content h3 { font-size: 1.35rem; font-weight: 700; }
.page-content h4 { font-size: 1.15rem; font-weight: 600; }
.page-content h5,
.page-content h6 { font-size: 1rem; font-weight: 600; }

.page-content p {
    margin: 0 0 1.25em;
    color: var(--rd-text);
    font-size: 1.025rem;
}
.page-content p:last-child { margin-bottom: 0; }

.page-content a {
    color: var(--rd-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(21, 65, 156, .35);
    transition: color .15s ease, text-decoration-color .15s ease;
}
.page-content a:hover {
    color: var(--rd-accent);
    text-decoration-color: var(--rd-accent);
}

.page-content ul, .page-content ol {
    margin: 0 0 1.5em;
    padding-left: 1.5em;
}
.page-content li {
    margin-bottom: .55em;
    line-height: 1.65;
}
.page-content ul li::marker { color: var(--rd-accent); }
.page-content ol li::marker { color: var(--rd-primary); font-weight: 700; }

.page-content blockquote {
    margin: 1.75em 0;
    padding: 1.2em 1.5em;
    border-left: 4px solid var(--rd-accent);
    background: var(--rd-light-bg);
    font-style: italic;
    color: var(--rd-text-muted);
    font-size: 1.1rem;
}
.page-content blockquote p:last-child { margin-bottom: 0; }

.page-content hr {
    border: 0;
    border-top: 2px solid var(--rd-line);
    margin: 2.5em 0;
}

.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rd-radius-card);
    margin: 1.5em 0;
}
.page-content figure {
    margin: 1.75em 0;
    padding: 0;
}
.page-content figure img { margin: 0; }
.page-content figcaption {
    font-size: .85rem;
    color: var(--rd-text-muted);
    text-align: center;
    margin-top: .6em;
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75em 0;
    font-size: .95rem;
}
.page-content th, .page-content td {
    padding: .7em 1em;
    border: 1px solid var(--rd-line);
    text-align: left;
}
.page-content th {
    background: var(--rd-light-bg);
    font-weight: 700;
    color: var(--rd-text);
}

/* ── Service-page subsections (imported pages with multiple H2 sections) ── */
/* Each rd-subsection wraps an H2 + its content. They stack vertically and
   alternate background tones for visual rhythm; the first H2 in each block
   carries the brand-blue color and an accent stripe underline. */
.page-content .rd-subsection {
    position: relative;
    padding: 56px 36px;
    margin: 0 -36px;
    border-radius: var(--rd-radius-card);
    /* scroll-margin-top so anchor jumps (e.g. /vehicle-wraps#van) clear the
       sticky header rather than hiding the heading behind it. */
    scroll-margin-top: 120px;
}
.page-content .rd-subsection + .rd-subsection { margin-top: 24px; }
.page-content .rd-subsection:nth-child(even of .rd-subsection) {
    background: var(--rd-light-bg);
}
.page-content .rd-subsection > h2:first-child,
.page-content .rd-subsection > h2.wp-block-heading {
    /* H2 inside the subsection acts as the section title — bigger, blue,
       with a green accent underline. */
    margin-top: 0;
    font-size: 1.75rem;
    color: var(--rd-primary);
    text-align: left;
    padding-bottom: .55em;
    border-bottom: 3px solid var(--rd-accent);
    display: inline-block;
    max-width: 100%;
}
/* WP outputs centered headings — keep them centered when authored that way. */
.page-content .rd-subsection > h2.has-text-align-center {
    display: block;
    text-align: center;
    border-bottom: none;
    position: relative;
    padding-bottom: 0;
    margin-bottom: 1.25em;
}
.page-content .rd-subsection > h2.has-text-align-center::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    background: var(--rd-accent);
    margin: 14px auto 0;
    border-radius: 2px;
}
/* The first .rd-subsection on a page sits flush below the inner-hero's
   slant cut — give it a little extra top padding so the heading breathes. */
.page-content .rd-subsection:first-child { padding-top: 48px; }

@media (max-width: 768px) {
    .page-content .rd-subsection {
        padding: 40px 20px;
        margin: 0 -20px;
    }
}

/* ── Gutenberg block classes (imported from WordPress) ──────── */
/* wp-block-heading — already covered by .page-content h2/h3 etc. */
.page-content .wp-block-heading.has-text-align-center { text-align: center; }
.page-content .has-text-align-left   { text-align: left; }
.page-content .has-text-align-right  { text-align: right; }

/* wp-block-list */
.page-content .wp-block-list { padding-left: 1.5em; }

/* wp-block-image */
.page-content .wp-block-image { margin: 1.75em 0; }
.page-content .wp-block-image img {
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow-card);
}
.page-content .wp-block-image.alignfull img,
.page-content .wp-block-image.alignwide img { width: 100%; }

/* wp-block-columns / wp-block-column */
.page-content .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin: 2em 0;
}
.page-content .wp-block-column {
    min-width: 0; /* prevents grid blow-out on flex children */
}

/* wp-block-media-text — image+text side-by-side panel.
   .has-media-on-the-right reverses the image to the right column. */
.page-content .wp-block-media-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
    margin: 2.5em 0;
    background: var(--rd-light-bg);
    border-radius: var(--rd-radius-card);
    overflow: hidden;
}
.page-content .wp-block-media-text.has-media-on-the-right {
    grid-template-areas: "content media";
}
.page-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { grid-area: media; }
.page-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { grid-area: content; }
.page-content .wp-block-media-text__media {
    overflow: hidden;
}
.page-content .wp-block-media-text__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}
.page-content .wp-block-media-text__content {
    padding: 36px 28px;
}
.page-content .wp-block-media-text__content > :first-child { margin-top: 0; }
.page-content .wp-block-media-text__content > :last-child { margin-bottom: 0; }

/* wp-block-video */
.page-content .wp-block-video {
    margin: 2em 0;
}
.page-content .wp-block-video video {
    width: 100%;
    border-radius: var(--rd-radius-card);
}

/* wp-block-buttons / wp-block-button */
.page-content .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 1.5em 0;
}
.page-content .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px;
    background: var(--rd-primary);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    border-radius: var(--rd-radius-pill);
    text-decoration: none;
    transition: background-color .15s ease;
}
.page-content .wp-block-button__link:hover {
    background: var(--rd-accent);
    color: #fff;
    text-decoration: none;
}
.page-content .wp-block-button.is-style-secondary .wp-block-button__link {
    background: transparent;
    color: var(--rd-primary);
    border: 2px solid var(--rd-primary);
}
.page-content .wp-block-button.is-style-secondary .wp-block-button__link:hover {
    background: var(--rd-primary);
    color: #fff;
}

/* wp-block-spacer (WP authoring tool emits empty divs) */
.page-content .wp-block-spacer { display: block; }

/* wp-block-separator */
.page-content .wp-block-separator {
    border: 0;
    border-top: 2px solid var(--rd-line);
    margin: 2em 0;
}

/* Responsive collapse for the wide grids */
@media (max-width: 768px) {
    .page-content .wp-block-media-text,
    .page-content .wp-block-media-text.has-media-on-the-right {
        grid-template-columns: 1fr;
        grid-template-areas: "media" "content";
    }
    .page-content .wp-block-media-text__content { padding: 24px 20px; }
    .page-content .wp-block-columns { grid-template-columns: 1fr; gap: 24px; }
    .inner-hero { padding: 90px 0 60px; min-height: 240px; }
    .inner-hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; overflow-wrap: anywhere; }
    .inner-hero-lead { font-size: .95rem; }
    .inner-content { padding: 48px 20px; }
}
@media (max-width: 600px) {
    .inner-hero h1 { font-size: clamp(1.4rem, 8vw, 1.9rem) !important; }
    .inner-content { padding: 40px 16px; }
    .page-content { font-size: .95rem; }
    .page-content h2 { font-size: 1.45rem; }
    .page-content h3 { font-size: 1.15rem; }
    .page-content .rd-subsection > h2:first-child,
    .page-content .rd-subsection > h2.wp-block-heading { font-size: 1.4rem; }
}
@media (max-width: 380px) {
    .inner-hero h1 { font-size: 1.4rem !important; }
}

/* ── Accessibility widget override ──────────────────────────── */
/* Ravmask brand: white circle with 3px black border, black icon. */
.a11y-toggle {
    background: #ffffff !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18) !important;
}
.a11y-toggle:hover {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .26) !important;
}
.a11y-toggle svg { fill: currentColor; }

/* ── Utility ────────────────────────────────────────────────── */
.rd-text-center { text-align: center; }
.rd-mt-0 { margin-top: 0; }
.rd-mb-0 { margin-bottom: 0; }
.rd-mb-2 { margin-bottom: 1rem; }
.rd-mb-3 { margin-bottom: 1.5rem; }
.rd-mb-4 { margin-bottom: 2rem; }
.rd-flex-center { display: flex; align-items: center; justify-content: center; }
.rd-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}