/* ============================================================
   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;
}
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;
    background: transparent; border: 0; cursor: pointer;
    color: #fff;
}
.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;
}

/* ── 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;
}

/* ── 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; }
    /* Make the slant a touch shallower on phones so the stripes don't eat
       the bottom-third of the viewport. */
    .rd-hero {
        --rd-slant-left:  88%;
        --rd-slant-right: 75%;
        min-height: 560px;
        padding-top: 70px;
        padding-bottom: 160px;
    }
    .rd-hero__eyebrow { font-size: 1.2rem; }
    .rd-hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }
    .rd-hero__photo { display: none; }
    h2 { font-size: 1.7rem; }
    .rd-cta-strip h2 { font-size: 1.5rem; }
}

/* ── 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;
}