/* header-footer.css — top utility bar, main nav bar, footer columns. */

/* ---- Skip link ---- */
.skip-link {
    position: absolute; top: -40px; left: 0;
    background: var(--brand-primary); color: var(--text-on-dark);
    padding: var(--space-3) var(--space-5);
}
.skip-link:focus { position: static; clip: auto; width: auto; height: auto; }

/* ---- Site header — single grid: full-height logo | center | full-height CTA ---- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    display: grid;
    grid-template-columns: clamp(280px, 22vw, 360px) 1fr auto;
    background: var(--bg-page);
    align-items: stretch;
    /* No bottom border/shadow — header should butt directly against hero
       so the green logo block visually meets the hero image. */
}

/* Left full-height block: logo (covers utility row + nav row, top to bottom) */
.logo-block {
    grid-column: 1; grid-row: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-right: var(--space-10);
    text-decoration: none;
}
.logo-block__bg {
    position: absolute;
    inset: 0;
    background: var(--brand-primary);
    background-image:
        linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    /* TOP edge full to right, BOTTOM edge cut 32px in from right */
    clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 0 100%);
}
.logo-block__img {
    position: relative;
    z-index: 2;
    width: 220px;
    height: auto;
    background: var(--bg-page);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}

/* Center column: utility row above nav row */
.header-center {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column;
    min-width: 0;
}

/* Utility row — Roboto, plain text with FA icon prefix + vertical separators */
.utility-row {
    display: flex; align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    min-height: 46px;
    padding-inline: var(--space-6) var(--space-12);
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--text-strong);
}
.utility-row__item {
    display: inline-flex; align-items: center;
    gap: var(--space-2);
    color: var(--text-strong);
    text-decoration: none;
    padding-inline: var(--space-5);
    border-right: 1px solid var(--border-subtle);
    line-height: 1;
    white-space: nowrap;
}
.utility-row__item:first-child { padding-left: 0; }
.utility-row__item--last,
.utility-row__item:last-child { border-right: 0; padding-right: 0; }

/* Drop utility items progressively as the viewport shrinks so the
   email never gets clipped and the row always fits on one line. */
@media (max-width: 1180px) {
    /* Hide the email (last item) — phone + address are enough */
    .utility-row__item--last { display: none; }
    .utility-row__item:nth-last-child(2) { border-right: 0; padding-right: 0; }
}
@media (max-width: 980px) {
    /* Hide the address too — phone is the priority */
    .utility-row__addr { display: none; }
    .utility-row__item:first-of-type { padding-left: 0; border-right: 0; }
}
.utility-row__item:hover { color: var(--brand-primary); }
.utility-row__icon {
    color: var(--brand-primary);
    font-size: 14px;
}
.utility-row__label { color: var(--text-strong); }
.utility-row__item strong { font-weight: var(--fw-bold); }

/* Nav row — inline nav + hamburger */
.nav-row {
    display: flex; align-items: stretch;
    min-height: 80px;
    padding-left: var(--space-6);
    gap: 0;
    /* Keep flex children from overflowing past the column boundary
       (the hamburger was extending under the CTA's slant). */
    overflow: hidden;
}

.main-nav {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    /* Allow the nav to shrink below content width — without this,
       its min-width: auto forces the row to overflow into the CTA col. */
    min-width: 0;
}
.main-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;             /* never wrap to a second line */
}
.main-nav__link {
    display: inline-block;
    padding: var(--space-3) 14px;   /* compact horizontal so all 6 fit */
    white-space: nowrap;            /* multi-word labels stay on one line */
    color: var(--text-strong);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
}
.main-nav__link:hover,
.main-nav__item.is-current > .main-nav__link { color: var(--brand-primary); }

/* Tighten progressively as the viewport shrinks so the nav stays on
   one line down through tablet portrait widths. */
@media (max-width: 1180px) {
    .main-nav__list { gap: var(--space-1); }
    .main-nav__link { padding: var(--space-3) var(--space-3); font-size: 14px; }
}
@media (max-width: 980px) {
    .main-nav__list { gap: 0; }
    .main-nav__link { padding: var(--space-2) 10px; font-size: 13px; letter-spacing: 0.02em; }
}
/* Below this width, swap to the hamburger drawer. */
@media (max-width: 880px) {
    .main-nav { display: none; }
}

/* Hamburger — right-aligned asymmetric stack: top short, middle widest,
   bottom slightly wider than top. Lines in mid-grey, not pure black.
   The button has a left border that visually extends the utility row's
   underline down through the nav row (item #6 from feedback). */
.nav-toggle {
    display: inline-flex;
    align-self: stretch; /* fills full nav-row height */
    width: 80px;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;        /* right-align the lines */
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-page);
    border-left: 1px solid var(--border-subtle);  /* the grey vertical line */
    padding-inline: var(--space-5) var(--space-6);
    z-index: 110;
    transition: background var(--transition);
}
.nav-toggle:hover {
    background: var(--brand-primary-tint);
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--text-body); /* mid-grey, not pure black */
    border-radius: 1px;
    transition: transform var(--transition), opacity var(--transition),
                width var(--transition), background var(--transition);
    transform-origin: right center;
}
.nav-toggle span:nth-child(1) { width: 18px; } /* top: shortest */
.nav-toggle span:nth-child(2) { width: 32px; } /* middle: widest, extends LEFT */
.nav-toggle span:nth-child(3) { width: 22px; } /* bottom: slightly wider than top */
.nav-toggle[aria-expanded="true"] {
    background: var(--brand-primary);
    border-left-color: var(--brand-primary);
}
.nav-toggle[aria-expanded="true"] span { background: var(--text-on-dark); width: 32px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Right full-height block: CTA (covers utility row + nav row, top to bottom).
   Mirrors logo-block — slanted LEFT edge (TOP-LEFT inset, BOTTOM-LEFT full). */
.header-cta {
    grid-column: 3; grid-row: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding-inline: var(--space-12) var(--space-8);
    color: var(--text-on-dark);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    isolation: isolate;
    flex-shrink: 0;
    transition: color var(--transition);
}
.header-cta__bg {
    position: absolute;
    inset: 0;
    background: var(--brand-primary);
    background-image:
        linear-gradient(225deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    /* TOP-LEFT inset 32px, BOTTOM-LEFT full to left edge of element */
    clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%);
    box-shadow: var(--shadow-md);
    transition: filter var(--transition);
    z-index: -1;
}
.header-cta:hover { color: var(--text-on-dark); }
.header-cta:hover .header-cta__bg { filter: brightness(0.92); }
.header-cta i { font-size: var(--fs-md); }
.header-cta__label { white-space: nowrap; }

/* Hide the CTA panel as soon as the viewport gets remotely narrow —
   on those widths it was overlapping into the utility row's email and
   clipping the right edge of the nav. The hamburger drawer surfaces
   the same call-to-action via its 'Request a Proposal' link inside. */
@media (max-width: 1380px) {
    .header-cta { display: none; }
}

/* ---- Off-canvas drawer ---- */
.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(92vw, 380px);
    background: var(--bg-page);
    transform: translateX(100%);
    transition: transform 320ms ease;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    z-index: 100;
    overscroll-behavior: contain;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__inner {
    padding: var(--space-10) var(--space-6) var(--space-8);
    display: flex; flex-direction: column;
    gap: var(--space-6);
    position: relative;
}

.drawer__logo {
    display: inline-block;
    text-decoration: none;
    margin-bottom: var(--space-2);
}
.drawer__logo img { width: 200px; height: auto; }

.drawer__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-strong);
    border: 1px solid var(--border-subtle);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-md);
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
    z-index: 5;
}
.drawer__close:hover,
.drawer__close:focus-visible {
    background: var(--brand-primary);
    color: var(--text-on-dark);
    border-color: var(--brand-primary);
    transform: rotate(90deg);
    outline: 0;
}

.drawer__heading {
    font-size: var(--fs-md);
    color: var(--text-strong);
    margin-bottom: var(--space-3);
    position: relative;
    padding-bottom: var(--space-2);
}
.drawer__heading::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 36px; height: 2px;
    background: var(--brand-primary);
}

.drawer__text { color: var(--text-body); font-size: var(--fs-sm); line-height: var(--lh-body); }

.drawer__contact { display: flex; flex-direction: column; gap: var(--space-3); }
.drawer__contact li {
    display: flex; gap: var(--space-3); align-items: flex-start;
    color: var(--text-body); font-size: var(--fs-sm);
}
.drawer__contact i {
    color: var(--brand-primary);
    width: 18px;
    margin-top: 4px;
    text-align: center;
    flex-shrink: 0;
}
.drawer__contact a { color: var(--text-body); }
.drawer__contact a:hover { color: var(--brand-primary); }

.drawer__social { display: flex; gap: var(--space-2); }
.drawer__social a {
    width: 40px; height: 40px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand-primary);
    transition: background var(--transition), color var(--transition);
}
.drawer__social a:hover {
    background: var(--brand-primary);
    color: var(--text-on-dark);
}

/* Drawer-internal nav — hidden on desktop (inline .main-nav handles it). */
.drawer__nav { display: none; }
.drawer__nav ul { display: flex; flex-direction: column; gap: 0; }
.drawer__nav a {
    display: block;
    padding: var(--space-4);
    color: var(--text-strong);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
}
.drawer__nav a:hover, .drawer__nav a.is-current { color: var(--brand-primary); }
.drawer__nav-cta { margin-top: var(--space-4); }
.drawer__nav-cta a.btn { display: block; text-align: center; padding: var(--space-4); border-bottom: 0; }

@media (max-width: 880px) {
    .drawer__nav { display: block; }
}

/* Backdrop (created by main.js when the drawer first opens) */
.drawer-backdrop,
.nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,16,17,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition);
    z-index: 90;
}
.drawer-backdrop[data-open="true"],
.nav-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ---- Tablet (880px – 1080px): tighter logo/nav ---- */
@media (max-width: 1080px) {
    .site-header { grid-template-columns: 240px 1fr auto; }
    .logo-block__img { width: 180px; }
    .main-nav__link { padding: var(--space-3); font-size: var(--fs-sm); }
    .nav-row { padding-inline: var(--space-4); }
    .utility-row { padding-inline: var(--space-4); font-size: var(--fs-xs); }
}

/* ---- Mobile (≤ 880px) ---- */
@media (max-width: 880px) {
    .site-header {
        grid-template-columns: auto 1fr;
        align-items: center;
    }
    .logo-block {
        position: relative;
        padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
        height: 76px;
    }
    .logo-block__img { width: 150px; }
    .header-center { grid-column: 2; }
    .utility-row { display: none; }
    .nav-row { min-height: 76px; justify-content: flex-end; padding-inline: var(--space-4); }
}

/* ---- Footer styles live in this file too (Task 5 will append) ---- */

/* ---- Quote CTA banner — full-bleed photo + angled green panel on left ----
   The banner is intentionally pulled up via negative margin so it
   straddles the boundary between the section above and the section
   below (Roofix-style "billboard between sections" pattern). The
   adjacent sections compensate via additional padding-top below. */
.cta-banner {
    position: relative;
    z-index: 5;
    overflow: hidden;
    min-height: 260px;
    /* Was: margin-bottom: -80px (overlap into next section). Removed
       because it was overlapping the footer logo on inner pages. */
    color: var(--text-on-dark);
    isolation: isolate;
}
.cta-banner__photo {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    left: 55%;            /* photo only covers the right portion that's actually visible */
    z-index: 0;
}
.cta-banner__photo picture {
    display: block;
    width: 100%; height: 100%;
}
.cta-banner__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cta-banner__photo::after {
    /* Subtle dark gradient on the right edge so the photo doesn't compete
       with the green panel's right tail */
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(15,16,17,0.15) 0%, rgba(15,16,17,0.25) 100%);
}
.cta-banner__inner {
    position: relative;
    z-index: 2;
    min-height: 260px;
    display: flex; align-items: stretch;
}
.cta-banner__panel {
    position: relative;
    width: 68%;
    max-width: 880px;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-16) var(--space-6) 0;
    color: var(--text-on-dark);
    isolation: isolate;
}
.cta-banner__panel::before {
    /* Green parallelogram with a slanted right edge that bleeds OFF the
       container to the left so it touches the viewport edge cleanly. */
    content: '';
    position: absolute;
    inset: 0;
    left: calc(-1 * (100vw - 100%) / 2 - 1px);
    background: var(--brand-primary);
    background-image:
        linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
    box-shadow: var(--shadow-md);
    z-index: -1;
}

.cta-banner__copy { display: flex; flex-direction: column; gap: 2px; }
.cta-banner__eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin: 0 0 4px;
    position: relative;
    padding-left: 28px;
}
.cta-banner__eyebrow::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 18px; height: 2px;
    background: var(--text-on-dark);
    transform: translateY(-50%);
}
.cta-banner__title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin: 0;
    color: var(--text-on-dark);
    line-height: 1.15;
}
.cta-banner__subline {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.85);
    margin: 4px 0 0;
}

/* Quick callback form — name + phone + submit, all inline */
.cta-banner__form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.cta-banner__field { position: relative; }
.cta-banner__form input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--bg-page);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    transition: box-shadow 180ms ease;
}
.cta-banner__form input::placeholder { color: var(--text-muted); }
.cta-banner__form input:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.cta-banner__submit {
    height: 48px;
    padding: 0 var(--space-6);
    min-width: 160px;
    background: var(--brand-accent);
    color: var(--text-on-dark);
    border: 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 220ms ease, color 220ms ease,
                transform 220ms ease, box-shadow 220ms ease;
}
.cta-banner__submit:hover,
.cta-banner__submit:focus-visible {
    background: #ffffff;
    color: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}
.cta-banner__submit:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

@media (max-width: 880px) {
    .cta-banner { min-height: auto; }
    .cta-banner__inner { min-height: auto; }
    .cta-banner__panel {
        width: 100%; max-width: none;
        padding: var(--space-8) 0;            /* no internal horizontal padding —
                                                 the container's padding is the
                                                 only horizontal stop, so inputs
                                                 span edge-to-edge like the
                                                 bottom contact strip */
        flex-direction: column; align-items: stretch;
        gap: var(--space-4);
    }
    .cta-banner__panel::before {
        clip-path: none; /* drop the slant on mobile — full-width green panel */
        left: calc(-1 * (100vw - 100%) / 2 - 1px);
        right: calc(-1 * (100vw - 100%) / 2 - 1px);
    }
    .cta-banner__photo { display: none; } /* hide photo on small screens; panel covers full width */
    .cta-banner__form {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .cta-banner__form input,
    .cta-banner__submit { width: 100%; }
}

/* ---- Footer ----
   The logo block sits flush against the top edge of the footer so its
   green angular panel butts up against any green section above it (the
   .home-contact-strip). The other top-row items (phone CTA + social)
   get their own padding-top so they don't touch the dark edge. */
.site-footer {
    background: var(--bg-darker);
    color: var(--text-on-dark);
}
.site-footer a { color: var(--text-on-dark); }
.site-footer a:hover { color: var(--brand-primary-light); }

.site-footer__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;                 /* let the logo cell fill the row height */
    gap: var(--space-8);
    padding-bottom: var(--space-10);
}
.site-footer__call,
.site-footer__social {
    padding-top: var(--space-6);          /* breathing room for non-logo items */
}
/* Footer logo — mirrors the header's angular green panel + white logo card.
   Stretches to fill the full top-row height so the green panel touches
   the (also-green) section above the footer. */
.site-footer__logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: var(--space-6) var(--space-10) var(--space-6) var(--space-4);
    text-decoration: none;
}
.site-footer__logo-bg {
    position: absolute;
    inset: 0;
    background: var(--brand-primary);
    background-image:
        linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    /* TOP edge full to right, BOTTOM edge cut 24px in from right (matches header) */
    clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
}
.site-footer__logo-img {
    position: relative;
    z-index: 2;
    width: 200px;
    height: auto;
    background: var(--bg-page);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    display: block;
}
.site-footer__call {
    display: flex; align-items: center; gap: var(--space-3);
    text-decoration: none;
}
.site-footer__call > i {
    width: 56px; height: 56px;
    background: var(--brand-primary);
    color: var(--text-on-dark);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg);
}
.site-footer__call-label { display: block; font-size: var(--fs-sm); color: var(--gray-300); }
.site-footer__call-number { display: block; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-on-dark); }

.site-footer__social { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.site-footer__social a {
    width: 42px; height: 42px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-md);
    transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.site-footer__social a:hover {
    background: var(--brand-primary);
    color: var(--text-on-dark);
    transform: translateY(-2px);
}

.site-footer__divider {
    border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin-block: 0;
}

.site-footer__cols {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10); padding-block: var(--space-10);
}
.site-footer__heading {
    color: var(--text-on-dark);
    font-size: var(--fs-md);
    margin-bottom: var(--space-4);
    position: relative; padding-bottom: var(--space-3);
}
.site-footer__heading::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 36px; height: 2px; background: var(--brand-primary);
}
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__list i { color: var(--brand-primary-light); margin-right: var(--space-2); }
.site-footer__list--links a { color: var(--gray-300); }
.site-footer__list--links a::before { content: '›  '; color: var(--brand-primary-light); }
.site-footer__note { margin-top: var(--space-4); color: var(--gray-300); font-size: var(--fs-sm); }

.site-footer__bottom { background: rgba(0,0,0,0.4); padding-block: var(--space-5); margin-top: var(--space-8); }
.site-footer__bottom-inner {
    display: flex; justify-content: space-between; flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--gray-300); font-size: var(--fs-sm);
}

@media (max-width: 880px) {
    .site-footer__top { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .site-footer__cols { grid-template-columns: 1fr; gap: var(--space-8); }
    .site-footer__bottom-inner { justify-content: center; text-align: center; }
    /* The angular green panel was anchored left on mobile — re-center it
       so it sits visually balanced with the other top-row items. */
    .site-footer__logo {
        align-self: center;
        justify-self: center;
        padding: var(--space-4) var(--space-10) var(--space-4) var(--space-10);
    }
    .site-footer__logo-bg {
        clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 16px 100%);
    }
}

/* ---- Inner-page hero ---- */
.page-hero {
    background-color: var(--bg-darker);
    color: var(--text-on-dark);
    padding-block: var(--space-20);
    background-image:
        linear-gradient(rgba(15,16,17,0.65), rgba(15,16,17,0.45)),
        url('/assets/img/hero/hero-metal-roof-home.jpg');
    background-size: cover;
    background-position: center;
}
/* Per-page hero variants — drop a different background photo behind a
   particular inner page's hero. Activate by adding a modifier class
   on the .page-hero element itself (e.g., class="page-hero page-hero--about"). */
.page-hero.page-hero--about {
    background-image:
        linear-gradient(rgba(15,16,17,0.55), rgba(15,16,17,0.30)),
        url('/assets/img/products/page-hero-barn-home.jpg');
}
.page-hero__title {
    font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
    color: var(--text-on-dark);
    font-weight: var(--fw-black);
    margin-bottom: var(--space-3);
}
.breadcrumb {
    display: flex; gap: var(--space-2); align-items: center;
    font-size: var(--fs-sm);
    color: rgba(255,255,255,0.85);
}
.breadcrumb a { color: rgba(255,255,255,0.85); }
.breadcrumb a:hover { color: var(--brand-primary-light); }
.breadcrumb__current { color: var(--brand-primary-light); }

/* Sticky main bar gets a shadow on scroll (toggled by main.js) */
.main-bar.main-bar--scrolled { box-shadow: var(--shadow-md); }