/* ==========================================================================
   Uptown Concrete Repair NY - Design System
   --------------------------------------------------------------------------
   Style direction : Flat Design + Accessible & Ethical
   Landing pattern : Trust & Authority + Conversion
   Brand           : sampled directly from logo.png. The logo is teal #2C8391
                     with a #212121 wordmark and #444444 base, so those are the
                     only hues here. No colour is used that is not in the mark.
   Typography      : Barlow Condensed (headings) + Inter (body), self hosted.

   Every foreground/background pair below was measured. Values marked AA are
   4.5:1 or better for body text; AAA pairs are 7:1 or better. The mid teal
   (#2C8391) is only 4.41:1 on white, so it is used for large text, icons,
   borders and fills, never for body copy. Darker teals carry the text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Barlow Condensed";
    src: url("../font/barlow-condensed-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("../font/barlow-condensed-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Inter ships as one variable file covering every weight the design uses. */
@font-face {
    font-family: "Inter";
    src: url("../font/inter-var.woff2") format("woff2-variations"),
         url("../font/inter-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* ---- Brand teal, sampled from logo.png. teal-600 is the exact logo value. ---- */
    --teal-900: #123840;
    --teal-800: #1A5561;   /* text links, 8.35:1 on white */
    --teal-700: #226975;   /* solid buttons, 6.28:1 with white text */
    --teal-600: #2C8391;   /* LOGO EXACT: fills, icons, rules, large text */
    --teal-500: #4E9EAA;
    --teal-300: #8EBDC4;   /* also present in the logo, 7.84:1 on ink */
    --teal-100: #C7DEE2;   /* also present in the logo */
    --teal-50:  #F1F7F8;   /* also present in the logo */

    /* ---- Neutrals, sampled from the logo wordmark and base ---- */
    --ink:      #171717;   /* charcoal, 17.93:1 on white */
    --grey-700: #50565A;   /* body copy, 7.45:1 on white, 6.85:1 on light bg */
    --grey-600: #5B6165;   /* muted copy, 6.3:1 on white */
    --grey-400: #B6BBBE;   /* muted copy on charcoal, 9.25:1 */
    --surface-2: #F3F6F6;  /* light section background */
    --white:    #FFFFFF;
    --border:   #DCE4E5;
    --border-strong: #BCCACC;

    /* ---- Semantic ---- */
    --surface:      var(--white);
    --surface-alt:  var(--surface-2);
    --surface-tint: var(--teal-50);
    --surface-dark: var(--ink);
    --text:         var(--grey-700);
    --text-muted:   var(--grey-600);
    --heading:      var(--ink);
    --link:         var(--teal-800);
    --link-hover:   var(--teal-600);
    --focus:        var(--teal-700);
    --success:      #15803D;
    --danger:       #B3261E;

    /* Spacing scale, marketing-page density */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Radii, kept small in keeping with a flat system */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Elevation: borders do most of the work, shadows stay faint */
    --shadow-sm: 0 1px 2px rgba(23, 23, 23, .05);
    --shadow:    0 4px 16px rgba(23, 23, 23, .07);
    --shadow-lg: 0 12px 32px rgba(23, 23, 23, .10);

    /* Motion: one short duration for state, one for entrances */
    --t-fast: 150ms;
    --t-base: 200ms;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Layout */
    --container: 1200px;
    --header-h: 76px;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
    background-color: var(--surface);
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Anchors such as /#services must clear the sticky header. */
[id] {
    scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    color: var(--heading);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 1.8rem + 4vw, 4.75rem); }
h2 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.35rem); }
h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); font-weight: 600; }
h4 { font-size: 1.5rem; font-weight: 600; }
h5 { font-size: 1.3rem; font-weight: 600; }
h6 { font-size: 1.15rem; font-weight: 600; }

p {
    margin: 0 0 var(--space-4);
    text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

a {
    color: var(--link);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

a:hover { color: var(--link-hover); }

strong { font-weight: 600; color: var(--heading); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.35em; }
li { margin-bottom: var(--space-2); }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-6) 0;
}

address { font-style: normal; }

::selection {
    background: var(--teal-600);
    color: var(--white);
}

/* --------------------------------------------------------------------------
   4. Accessibility primitives
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* On dark ground the teal ring disappears, so brighten it. */
.section--dark :where(a, button, summary):focus-visible,
.hero :where(a, button):focus-visible {
    outline-color: var(--teal-300);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
}

.skip-link:focus {
    left: var(--space-4);
    top: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--white);
    color: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

.section {
    padding-block: var(--space-9);
}

.section--tight { padding-block: var(--space-8); }

.section--alt  { background-color: var(--surface-alt); }
.section--tint { background-color: var(--surface-tint); }

.section--dark {
    background-color: var(--surface-dark);
    color: var(--grey-400);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--white); }

.section--dark a { color: var(--teal-300); }
.section--dark a:hover { color: var(--white); }

.section__head {
    max-width: 720px;
    margin-bottom: var(--space-7);
}

.section__head--center {
    margin-inline: auto;
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal-800);
}

.eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--teal-600);
}

.section--dark .eyebrow { color: var(--teal-300); }

.lede {
    font-size: 1.15rem;
    color: var(--text);
}

.section--dark .lede { color: var(--grey-400); }

/* Simple responsive grid used by every card section. */
.grid {
    display: grid;
    gap: var(--space-5);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

@media (max-width: 639.98px) {
    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    align-items: center;
}

@media (max-width: 991.98px) {
    .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* --------------------------------------------------------------------------
   6. Buttons
   Orange is reserved for the primary conversion action so it never competes
   with itself. Every button clears the 44px touch target.
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3) var(--space-6);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease),
                transform var(--t-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--cta {
    background-color: var(--teal-700);
    border-color: var(--teal-700);
    color: var(--white);
}

.btn--cta:hover,
.btn--cta:focus {
    background-color: var(--teal-800);
    border-color: var(--teal-800);
    color: var(--white);
}

.btn--primary {
    background-color: var(--teal-700);
    border-color: var(--teal-700);
    color: var(--white);
}

.btn--primary:hover,
.btn--primary:focus {
    background-color: var(--teal-800);
    border-color: var(--teal-800);
    color: var(--white);
}

.btn--outline {
    background-color: transparent;
    border-color: var(--border-strong);
    color: var(--teal-800);
}

.btn--outline:hover,
.btn--outline:focus {
    border-color: var(--teal-700);
    background-color: var(--teal-50);
    color: var(--teal-800);
}

/* On photography and dark panels. */
.btn--ghost {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: var(--white);
}

.btn--ghost:hover,
.btn--ghost:focus {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--ink);
}

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

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Text link that reads as an action. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 600;
    color: var(--teal-800);
}

.link-arrow::after {
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--t-base) var(--ease);
}

.link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--white);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: var(--header-h);
}

.site-header__logo img {
    width: auto;
    height: 46px;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--radius);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .975rem;
    font-weight: 500;
    color: var(--grey-700);
}

.nav__link:hover {
    background-color: var(--teal-50);
    color: var(--teal-800);
}

.nav__link[aria-current="page"] {
    color: var(--teal-800);
    font-weight: 600;
    background-color: var(--teal-50);
}

.header-call {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-pill);
    background-color: var(--teal-700);
    color: var(--white);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--t-base) var(--ease);
}

.header-call:hover,
.header-call:focus { background-color: var(--teal-800); color: var(--white); }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--ink);
    transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before,
.nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 991.98px) {
    .nav-toggle { display: inline-flex; }

    .site-header__nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        display: block;
        max-height: 0;
        overflow: hidden;
        background-color: var(--white);
        border-bottom: 1px solid var(--border);
        transition: max-height var(--t-base) var(--ease);
    }

    .site-header__nav[data-open="true"] {
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }

    .nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-3) var(--space-5) var(--space-5);
    }

    .nav__link {
        /* inline-flex would shrink the divider to the width of the label */
        display: flex;
        min-height: 52px;
        padding-inline: var(--space-3);
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    .nav__cta { margin-top: var(--space-4); }
    .nav__cta .btn { width: 100%; }

    .header-call { display: none; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(78vh, 680px);
    padding-block: var(--space-9);
    background-color: var(--ink);
    background-size: cover;
    background-position: center;
    color: var(--white);
    isolation: isolate;
}

/* A left-weighted scrim keeps the headline readable without flattening the
   whole photograph. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        rgba(12, 21, 22, .92) 0%,
        rgba(12, 21, 22, .82) 38%,
        rgba(12, 21, 22, .55) 70%,
        rgba(12, 21, 22, .45) 100%);
}

.hero__inner { max-width: 660px; }

.hero h1 { color: var(--white); margin-bottom: var(--space-4); }

.hero__lede {
    font-size: 1.2rem;
    color: var(--grey-400);
    margin-bottom: var(--space-6);
}

.hero .eyebrow { color: var(--teal-300); }

.hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, .18);
    list-style: none;
    padding-left: 0;
}

.hero__proof li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .95rem;
    font-weight: 500;
    color: var(--white);
}

.hero__proof svg { flex: 0 0 auto; color: var(--teal-300); }

/* Compact banner for interior pages. */
.page-banner {
    position: relative;
    padding-block: var(--space-8);
    background-color: var(--ink);
    background-size: cover;
    background-position: center;
    color: var(--white);
    isolation: isolate;
}

.page-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(12, 21, 22, .93), rgba(12, 21, 22, .72));
}

.page-banner h1 { color: var(--white); margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   9. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
}

.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: "/"; opacity: .5; }
.breadcrumb [aria-current="page"] { opacity: .8; }

.page-banner .breadcrumb { color: var(--grey-400); }
.page-banner .breadcrumb a { color: var(--teal-300); }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-6);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                transform var(--t-base) var(--ease);
}

.card:hover {
    border-color: var(--teal-600);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--text); }

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-5);
    border-radius: var(--radius);
    background-color: var(--teal-50);
    color: var(--teal-700);
}

.card__icon svg { width: 26px; height: 26px; }

.section--dark .card {
    background-color: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
}

.section--dark .card:hover {
    border-color: var(--teal-300);
    background-color: rgba(255, 255, 255, .07);
}

.section--dark .card p { color: var(--grey-400); }

.section--dark .card__icon {
    background-color: rgba(94, 198, 214, .12);
    color: var(--teal-300);
}

/* Service card carries a photograph. */
.card--media { padding: 0; overflow: hidden; }

.card--media .card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--teal-50);
}

.card--media .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--ease);
}

.card--media:hover .card__media img { transform: scale(1.04); }

.card--media .card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.card--media .card__body .link-arrow { margin-top: auto; }

/* Numbered process card. */
.card__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-pill);
    background-color: var(--teal-700);
    color: var(--white);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.section--dark .card__step { background-color: var(--teal-300); color: var(--ink); }

/* --------------------------------------------------------------------------
   11. Service areas
   -------------------------------------------------------------------------- */
.area-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-6);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--teal-600);
    border-radius: var(--radius);
    transition: border-left-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.area-card:hover {
    border-left-color: var(--teal-800);
    box-shadow: var(--shadow);
}

.area-card h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}

.area-card h3 svg { color: var(--teal-600); flex: 0 0 auto; }

.area-card p { font-size: .975rem; margin-bottom: var(--space-4); }

.area-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    color: var(--grey-600);
}

.area-card li {
    position: relative;
    margin-bottom: var(--space-1);
    padding-left: 18px;
}

.area-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--teal-600);
}

/* --------------------------------------------------------------------------
   12. Stats and credential strip
   -------------------------------------------------------------------------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    padding: var(--space-6);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.stat {
    text-align: center;
    padding-inline: var(--space-2);
}

.stat + .stat { border-left: 1px solid var(--border); }

.stat__value {
    display: block;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--teal-800);
}

.stat__label {
    display: block;
    margin-top: var(--space-1);
    font-size: .9rem;
    color: var(--grey-600);
}

@media (max-width: 767.98px) {
    .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
    .stat:nth-child(odd) { border-left: 0; }
    .stat:nth-child(3) { border-left: 0; }
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */
.quote {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: var(--space-6);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.quote__mark {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 3rem;
    line-height: .8;
    color: var(--teal-100);
    margin-bottom: var(--space-3);
}

.quote h3 { font-size: 1.1rem; margin-bottom: var(--space-3); }

.quote p { flex: 1; color: var(--text); }

.quote footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.quote footer img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.quote cite {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-style: normal;
    font-weight: 600;
    color: var(--heading);
}

.quote__meta {
    display: block;
    font-size: .875rem;
    color: var(--grey-600);
}

/* --------------------------------------------------------------------------
   14. FAQ, native details so it needs no JavaScript
   -------------------------------------------------------------------------- */
.faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 860px;
}

.faq__item {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.faq__item[open] {
    border-color: var(--teal-600);
    box-shadow: var(--shadow-sm);
}

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 56px;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--heading);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__q::after {
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--teal-700);
    border-bottom: 2px solid var(--teal-700);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--t-base) var(--ease);
}

.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq__a {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--text);
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form-card {
    padding: var(--space-7);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.field { margin-bottom: var(--space-5); }

.field__label {
    display: block;
    margin-bottom: var(--space-2);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .9rem;
    font-weight: 600;
    color: var(--heading);
}

.field__label .req { color: var(--danger); }

.input,
.select,
.textarea {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: var(--space-3) var(--space-4);
    background-color: var(--white);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: inherit;
    /* 16px stops iOS Safari zooming the viewport on focus. */
    font-size: 16px;
    line-height: 1.5;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder { color: #6E7676; }

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--teal-700);
    box-shadow: 0 0 0 3px rgba(31, 100, 112, .16);
    outline: none;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--danger);
}

.textarea { min-height: 140px; resize: vertical; }

.select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231F6470'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 14px;
    cursor: pointer;
}

.field__error {
    display: block;
    margin-top: var(--space-2);
    font-size: .875rem;
    font-weight: 600;
    color: var(--danger);
}

.field__hint {
    display: block;
    margin-top: var(--space-2);
    font-size: .875rem;
    color: var(--grey-600);
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 575.98px) {
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .form-card { padding: var(--space-5); }
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    font-size: .975rem;
}

.checkbox input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: var(--teal-700);
}

/* Honeypot: off screen rather than display:none, which bots detect. */
.hp-field {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alert {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    border: 1px solid;
    border-radius: var(--radius);
    font-size: .975rem;
}

.alert--success {
    background-color: #F0FDF4;
    border-color: #BBF7D0;
    color: #14532D;
}

.alert--error {
    background-color: #FEF2F2;
    border-color: #FECACA;
    color: #7F1D1D;
}

.alert a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. Contact details block
   -------------------------------------------------------------------------- */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-list li {
    display: flex;
    gap: var(--space-4);
    margin: 0;
}

.contact-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background-color: var(--teal-50);
    color: var(--teal-700);
}

.contact-list__label {
    display: block;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grey-600);
}

.contact-list__value {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--heading);
}

a.contact-list__value:hover { color: var(--teal-700); }

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-7);
    align-items: center;
    padding: var(--space-8);
    background: linear-gradient(120deg, var(--teal-900), var(--teal-800));
    border-radius: var(--radius-lg);
    color: var(--white);
}

.cta-band h2 { color: var(--white); margin-bottom: var(--space-3); }
.cta-band p { color: var(--teal-100); }

@media (max-width: 991.98px) {
    .cta-band { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); }
}

/* --------------------------------------------------------------------------
   18. Blog
   -------------------------------------------------------------------------- */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: .9rem;
    color: var(--grey-600);
}

.post-body {
    font-size: 1.05rem;
}

.post-body h2 { margin-top: var(--space-7); }
.post-body h3 { margin-top: var(--space-6); }
.post-body img { border-radius: var(--radius); margin-block: var(--space-5); }
.post-body a { text-decoration: underline; }

.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-5);
}

.post-body th,
.post-body td {
    padding: var(--space-3);
    border: 1px solid var(--border);
    text-align: left;
}

.sidebar-card {
    padding: var(--space-6);
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.sidebar-card + .sidebar-card { margin-top: var(--space-5); }

.recent-post {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--space-3);
    align-items: start;
    padding-block: var(--space-4);
    border-top: 1px solid var(--border);
}

.recent-post img {
    width: 84px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.recent-post__title {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--heading);
}

.recent-post__title:hover { color: var(--teal-700); }

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination li { margin: 0; }

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    padding-inline: var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--teal-800);
    font-weight: 600;
}

.pagination a:hover { background-color: var(--teal-50); border-color: var(--teal-700); }
.pagination .is-active span { background-color: var(--teal-700); border-color: var(--teal-700); color: var(--white); }
.pagination .is-disabled span { opacity: .45; }

/* --------------------------------------------------------------------------
   19. Legal pages
   -------------------------------------------------------------------------- */
.prose { max-width: 76ch; }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose li { margin-bottom: var(--space-2); }
.prose a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--ink);
    color: var(--grey-400);
    padding-top: var(--space-8);
}

.site-footer h2 {
    font-size: 1.05rem;
    color: var(--white);
    margin-bottom: var(--space-4);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--space-7);
    padding-bottom: var(--space-8);
}

@media (max-width: 991.98px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

@media (max-width: 575.98px) {
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

.site-footer__logo {
    height: 44px;
    width: auto;
    margin-bottom: var(--space-4);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li { margin: 0; }

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--grey-400);
    font-size: .975rem;
}

.footer-links a:hover { color: var(--teal-300); }

.site-footer__bottom {
    padding-block: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .9rem;
}

.site-footer__bottom a { color: var(--grey-400); }
.site-footer__bottom a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   21. Map
   -------------------------------------------------------------------------- */
.map { width: 100%; height: 420px; border: 0; }

@media (max-width: 767.98px) { .map { height: 300px; } }

/* --------------------------------------------------------------------------
   22. Reveal on scroll
   The class only hides content once JavaScript has confirmed it can reveal it
   again, so the page is never blank when scripting fails.
   -------------------------------------------------------------------------- */
.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

.js .reveal[data-delay="1"] { transition-delay: 80ms; }
.js .reveal[data-delay="2"] { transition-delay: 160ms; }
.js .reveal[data-delay="3"] { transition-delay: 240ms; }

/* --------------------------------------------------------------------------
   23. Motion preference and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .js .reveal { opacity: 1; transform: none; }
}

@media print {
    .site-header,
    .site-footer,
    .cta-band,
    .map,
    .nav-toggle { display: none !important; }

    body { color: #000; background: #fff; font-size: 12pt; }
    .hero, .page-banner { background: none; color: #000; }
    .hero::after, .page-banner::after { display: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}

/* --------------------------------------------------------------------------
   24. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.media-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--teal-50);
}

.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.media-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.media-stack .media-frame:first-child { aspect-ratio: 3 / 4; }
.media-stack .media-frame:last-child { aspect-ratio: 3 / 4; margin-top: var(--space-7); }

@media (max-width: 575.98px) {
    .media-stack .media-frame:last-child { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   25. Icons
   -------------------------------------------------------------------------- */
.icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    vertical-align: middle;
}

.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 26px; height: 26px; }
.icon--xl { width: 32px; height: 32px; }

.social-links {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--teal-800);
    transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.social-links a:hover {
    background-color: var(--teal-700);
    border-color: var(--teal-700);
    color: var(--white);
}


/* --------------------------------------------------------------------------
   26. Header actions
   The phone number appears twice in the markup: as a pill beside the logo on
   desktop, and as a full-width button inside the menu on mobile. Exactly one
   is ever visible.
   -------------------------------------------------------------------------- */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nav__cta { display: none; }

@media (max-width: 991.98px) {
    .nav__cta { display: block; }
}

/* Contact list sits on the dark footer as well as on the light contact page,
   so the footer restates the colours it needs. */
.site-footer .contact-list__icon {
    background-color: rgba(94, 198, 214, .12);
    color: var(--teal-300);
}

.site-footer .contact-list__label { color: var(--grey-400); }
.site-footer .contact-list__value { color: var(--white); font-size: 1rem; }
.site-footer a.contact-list__value:hover { color: var(--teal-300); }
.site-footer .social-links a { border-color: rgba(255, 255, 255, .18); color: var(--grey-400); }
.site-footer .social-links a:hover { background-color: var(--teal-300); border-color: var(--teal-300); color: var(--ink); }
.site-footer p { color: var(--grey-400); }

/* --------------------------------------------------------------------------
   27. Article layout
   -------------------------------------------------------------------------- */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-8);
    align-items: start;
}

@media (max-width: 991.98px) {
    .article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}

.article-layout article { max-width: 76ch; }

.share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}

.recent-post:first-of-type { border-top: 0; padding-top: 0; }

/* Legacy class names still present in editor-managed legal copy. */
.fw-bold { font-weight: 700; }
.link-color { color: var(--link); }
.lead-paragraph { font-size: 1.15rem; }

/* --------------------------------------------------------------------------
   28. Calls to action on dark ground
   The palette has no accent hue outside the teal family, so a teal button laid
   on the dark hero or on the teal CTA band would have almost no contrast
   against its own background. On those surfaces the primary action inverts to
   solid white with the logo's charcoal text, which is 16.1:1 and still uses
   nothing that is not in the mark.
   -------------------------------------------------------------------------- */
.hero .btn--cta,
.cta-band .btn--cta,
.section--dark .btn--cta {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--ink);
}

.hero .btn--cta:hover,
.hero .btn--cta:focus,
.cta-band .btn--cta:hover,
.cta-band .btn--cta:focus,
.section--dark .btn--cta:hover,
.section--dark .btn--cta:focus {
    background-color: var(--teal-100);
    border-color: var(--teal-100);
    color: var(--ink);
}

/* Lede paragraph sitting on the dark hero or page banner. */
.lede--on-dark { color: var(--grey-400); }

/* ==========================================================================
   29. Revamp additions
   ========================================================================== */

/* ---- Header: compact sticky bar, logo sized per brief ------------------- */
:root { --header-h: 84px; }

.site-header__inner { min-height: var(--header-h); gap: var(--space-4); }

.site-header__logo img {
    width: 240px;
    height: auto;
    display: block;
}

@media (max-width: 1199.98px) { .site-header__logo img { width: 200px; } }
@media (max-width: 991.98px)  { :root { --header-h: 72px; } .site-header__logo img { width: 170px; } }

.header-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink);
    white-space: nowrap;
}

.header-phone:hover { color: var(--teal-700); }

.header-estimate { min-height: 44px; padding-block: var(--space-2); }

/* Old single-pill call button is replaced by phone text + estimate button. */
.header-call { display: none; }

@media (max-width: 1199.98px) { .header-phone span { display: none; } .header-phone { padding: 0 var(--space-2); } }
@media (max-width: 991.98px)  { .header-phone, .header-estimate { display: none; } }

/* ---- Desktop dropdown menus -------------------------------------------- */
.nav__item--has-menu { position: relative; }

.nav__trigger {
    background: transparent;
    border: 0;
    cursor: pointer;
    gap: var(--space-1);
}

.nav__trigger[aria-current="true"] { color: var(--teal-800); font-weight: 600; }

.nav__chevron { transition: transform var(--t-base) var(--ease); }
.nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1040;
    min-width: 280px;
    padding: var(--space-2);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    /* Enter and exit on opacity/transform only; the hidden attribute is
       toggled by script after the exit transition ends. */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.nav__menu[hidden] { display: none; }
.nav__menu.is-open { opacity: 1; transform: none; }

.nav__menu-list { list-style: none; margin: 0; padding: 0; }
.nav__menu-list li { margin: 0; }

.nav__menu-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-weight: 500;
    font-size: .975rem;
}

.nav__menu-link .icon { color: var(--teal-600); }
.nav__menu-link:hover,
.nav__menu-link:focus-visible { background: var(--teal-50); color: var(--teal-800); }
.nav__menu-link[aria-current="page"] { background: var(--teal-50); color: var(--teal-800); font-weight: 600; }

.nav__menu-all { margin-top: var(--space-2) !important; padding-top: var(--space-2); border-top: 1px solid var(--border); }
.nav__menu-all .nav__menu-link { color: var(--teal-800); font-weight: 600; }

/* Mobile: dropdowns become inline accordions inside the panel. */
@media (max-width: 991.98px) {
    .nav__trigger { width: 100%; justify-content: space-between; }

    .nav__menu {
        position: static;
        min-width: 0;
        padding: 0 0 var(--space-2) var(--space-3);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none;
    }

    .nav__menu-link { min-height: 48px; }

    .nav__cta {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin-top: var(--space-4);
    }
}

/* ---- Hero: split layout ------------------------------------------------ */
.hero--split {
    display: block;
    min-height: 0;
    padding-block: var(--space-8);
    background-image: none !important;
    background-color: var(--surface-alt);
    color: var(--ink);
}

.hero--split::after { display: none; }

.hero--split h1 { color: var(--ink); }
.hero--split .eyebrow { color: var(--teal-800); }
.hero--split .hero__lede { color: var(--text); }
.hero--split .hero__proof { border-top-color: var(--border); }
.hero--split .hero__proof li { color: var(--ink); }
.hero--split .hero__proof svg { color: var(--teal-600); }
.hero--split .hero__inner { max-width: none; }

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--space-8);
    align-items: center;
}

.hero__media {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--teal-100);
}

.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Sidewalk-slab grid motif, a nod to the subject without decorative clutter. */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 25% 33.333%;
    pointer-events: none;
    mix-blend-mode: soft-light;
}

/* Light-ground buttons: the CTA reverts to teal, secondary to outline. */
.hero--split .btn--cta { background-color: var(--teal-700); border-color: var(--teal-700); color: var(--white); }
.hero--split .btn--cta:hover,
.hero--split .btn--cta:focus { background-color: var(--teal-800); border-color: var(--teal-800); }
.hero--split .btn--ghost { border-color: var(--border-strong); color: var(--teal-800); }
.hero--split .btn--ghost:hover,
.hero--split .btn--ghost:focus { background-color: var(--white); border-color: var(--teal-700); color: var(--teal-800); }

/* Short entrance for hero copy only; content is visible if JS never runs. */
.js .hero__enter > * {
    opacity: 0;
    transform: translateY(12px);
    animation: hero-in 420ms var(--ease) forwards;
}
.js .hero__enter > :nth-child(1) { animation-delay: 40ms; }
.js .hero__enter > :nth-child(2) { animation-delay: 110ms; }
.js .hero__enter > :nth-child(3) { animation-delay: 180ms; }
.js .hero__enter > :nth-child(4) { animation-delay: 250ms; }
.js .hero__enter > :nth-child(5) { animation-delay: 320ms; }

@keyframes hero-in { to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .hero__media { aspect-ratio: 16 / 10; order: -1; }
}

/* ---- DOT violation band --------------------------------------------------- */
.dot-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
}

.dot-band__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
}

.dot-band__media img { width: 100%; height: 100%; object-fit: cover; }

.dot-band ul { list-style: none; padding: 0; margin: var(--space-5) 0; }
.dot-band li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--grey-400); }
.dot-band li .icon { color: var(--teal-300); margin-top: 3px; }

@media (max-width: 991.98px) { .dot-band { grid-template-columns: minmax(0, 1fr); } }

/* ---- Stats row: compact ------------------------------------------------ */
.stat-strip { padding: var(--space-5) var(--space-6); border-radius: var(--radius); }
.stat__value { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; }
.stat__note { display: block; font-size: .8rem; color: var(--grey-600); margin-top: 2px; }

/* ---- Process: large numerals ------------------------------------------ */
.process-step { position: relative; padding-top: var(--space-4); }
.process-step__n {
    display: block;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--teal-300);
    margin-bottom: var(--space-3);
}
.process-step .card__icon { margin-bottom: var(--space-3); }

/* ---- FAQ: animated height via script; still works without it ---------- */
.faq__a { overflow: hidden; }
.js .faq__item .faq__a { transition: height var(--t-base) var(--ease); }

/* ---- Chips (neighborhood lists) ---------------------------------------- */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.chip-list li {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-size: .875rem;
    color: var(--grey-700);
    background: var(--white);
}
.chip-list--lg li { font-size: .95rem; padding: 6px 14px; }
.chip-list__more { background: var(--teal-50) !important; color: var(--teal-800) !important; border-color: var(--teal-100) !important; }

/* Mobile: long lists collapse behind a toggle. */
.chip-list[data-collapsed="true"] li:nth-child(n+7) { display: none; }
.chip-toggle {
    margin-top: var(--space-3);
    background: transparent;
    border: 0;
    padding: var(--space-2) 0;
    min-height: 44px;
    color: var(--teal-800);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
@media (min-width: 768px) { .chip-list[data-collapsed="true"] li:nth-child(n+7) { display: inline-flex; } .chip-toggle { display: none; } }

/* ---- Service tile (on borough pages) ----------------------------------- */
.service-tile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--white);
    transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.service-tile:hover { border-color: var(--teal-600); transform: translateY(-2px); color: var(--teal-800); }
.service-tile .card__icon { margin: 0; width: 44px; height: 44px; }
.service-tile__title { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1.15rem; font-weight: 600; }

/* ---- Footer: white logo panel, compact contact list, 4 columns -------- */
.site-footer__logo-panel {
    display: inline-block;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--white);
    border-radius: var(--radius-sm);
}
.site-footer__logo-panel img { width: 200px; height: auto; display: block; }

.site-footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr; }
@media (max-width: 991.98px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

.contact-list--compact { gap: var(--space-3); }
.contact-list--compact li { align-items: center; }
.contact-list--compact .contact-list__icon { width: 36px; height: 36px; }
.contact-list--compact .contact-list__value { font-size: .95rem; font-family: "Inter", sans-serif; font-weight: 500; line-height: 1.5; }

.site-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); }

.footer-links--dark-text a { color: var(--teal-800); min-height: 40px; }
.footer-links--dark-text a:hover { color: var(--teal-600); }

/* ---- Mobile action bar ------------------------------------------------- */
.action-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1020;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border-strong);
    border-top: 1px solid var(--border-strong);
    /* Pad for the home indicator on notched phones. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.action-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 56px;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.action-bar__btn--call { background: var(--white); color: var(--ink); }
.action-bar__btn--estimate { background: var(--teal-700); color: var(--white); }
.action-bar__btn--estimate:hover { background: var(--teal-800); color: var(--white); }

@media (max-width: 991.98px) {
    .action-bar { display: grid; }
    /* Room so the bar never covers footer links, form fields or the last CTA. */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
}

@media print { .action-bar { display: none !important; } }

/* ---- Restrained radii and squarer buttons to suit condensed type ------- */
.card, .quote, .form-card, .sidebar-card, .cta-band, .faq__item { border-radius: var(--radius); }
.btn, .header-estimate { border-radius: 6px; }

/* Button label with an inline icon: fix "quotefor" style run-ons by never
   letting a visually-hidden span collapse the space before it. */
.visually-hidden { white-space: normal; }

/* ---- Inline links: never colour alone (WCAG 1.4.1) ------------------------ */
p a:not(.btn):not(.link-arrow):not(.contact-list__value),
li:not(.nav li):not(.footer-links li):not(.chip-list li):not(.hero__proof li) > a:not(.btn):not(.link-arrow):not(.nav__menu-link):not(.recent-post__title):not(.service-tile),
.prose a:not(.btn):not(.link-arrow),
.faq__a a,
.post-body a,
.alert a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}