/* =============================================================================
   Layout — containers, sections, header, footer, mobile action bar
============================================================================= */

.container {
    width: 100%;
    max-width: 100%;
    max-width: min(var(--container), 100%);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--wide { max-width: min(var(--container-wide), 100%); }
.container--narrow { max-width: min(860px, 100%); }

/* ---------------------------------------------------------------------------
   Sections
   One vertical rhythm token drives every section, so no block ever needs a
   margin override to sit correctly next to another.
--------------------------------------------------------------------------- */

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

.section--warm  { background: var(--bg-warm); }
.section--stone { background: var(--stone-100); }

.section--dark {
    background: var(--bg-dark);
    color: var(--text-on-dark);
}

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

.section--tight { padding-block: calc(var(--section-y) * 0.62); }

/* --- Section header ------------------------------------------------------ */

.section-head { max-width: 62ch; margin-bottom: var(--space-8); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--copper-700);
}

.on-dark .eyebrow,
.section--dark .eyebrow { color: var(--copper-300); }

.section-head--center .eyebrow { justify-content: center; }

.section-head p { margin-top: var(--space-4); }

/* ---------------------------------------------------------------------------
   The truss rule — the signature mark

   A hairline that rises to an apex, the way a drawn rafter does. It sits
   beside every eyebrow, and it is the only ornament on the site. Everything
   else earns its place by carrying information.
--------------------------------------------------------------------------- */

.truss-rule {
    flex: 0 0 3.75rem;
    width: 3.75rem;
    height: 0.625rem;
    color: var(--copper-600);
    overflow: visible;
}

.on-dark .truss-rule,
.section--dark .truss-rule { color: var(--copper-300); }

.truss-rule--wide { flex-basis: 7.5rem; width: 7.5rem; }

/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgb(245 244 240 / 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
                box-shadow 0.3s var(--ease);
}

/* Over the hero the header is glass on the photograph; it solidifies on scroll.
   The scrim keeps the logo readable whatever the photograph turns out to be —
   a light sky behind white text is otherwise unreadable. */
.site-header--over-hero {
    background: linear-gradient(to bottom, rgb(14 24 34 / 0.78), rgb(14 24 34 / 0.15));
    backdrop-filter: none;
    border-bottom-color: transparent;
    color: var(--white);
}

.site-header--over-hero.is-scrolled {
    background: rgb(22 34 46 / 0.95);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--border-dark);
    box-shadow: var(--shadow);
}

.site-header:not(.site-header--over-hero).is-scrolled { box-shadow: var(--shadow-sm); }

.site-header .container {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    max-width: var(--container-wide);
}

/* --- Logo ---------------------------------------------------------------- */

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-right: auto;
    text-decoration: none;
    color: inherit;
}

.logo__mark {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--copper-600);
}

.site-header--over-hero:not(.is-scrolled) .logo__mark { color: var(--copper-300); }

.logo__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }

/* A placeholder sitting in the logo must not push the two lines apart. */
.logo__name .placeholder {
    padding: 0;
    border: 0;
    font-size: 0.82em;
    line-height: inherit;
    background: none;
}

.logo__name {
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* A long company name needs the whole bar on a phone. The trade line is
   dropped rather than squeezed — the hero repeats it two lines below. */
@media (max-width: 560px) {
    .logo__name { font-size: 0.95rem; }
    .logo__role { display: none; }
}

.logo__role {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.site-header--over-hero:not(.is-scrolled) .logo__role,
.site-header--over-hero.is-scrolled .logo__role,
.on-dark .logo__role { color: var(--stone-400); }

/* --- Desktop navigation --------------------------------------------------- */

.nav { display: none; }

@media (min-width: 1000px) {
    .nav {
        display: flex;
        align-items: center;
        gap: var(--space-6);
    }
}

.nav__link {
    position: relative;
    padding-block: var(--space-2);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

/* The active page is marked with the apex of the truss, not a plain bar. */
.nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.15rem;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 1.5px solid var(--copper-600);
    border-right: 1.5px solid var(--copper-600);
    transform: translateX(-50%) rotate(-45deg);
}

.site-header--over-hero:not(.is-scrolled) .nav__link[aria-current="page"]::after,
.site-header--over-hero.is-scrolled .nav__link[aria-current="page"]::after {
    border-color: var(--copper-300);
}

.nav__link:hover { color: var(--copper-700); }

.site-header--over-hero:not(.is-scrolled) .nav__link:hover,
.site-header--over-hero.is-scrolled .nav__link:hover { color: var(--copper-300); }

/* --- Header actions ------------------------------------------------------ */

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.header-actions .btn--quote { display: none; }

@media (min-width: 1000px) {
    .header-actions .btn--quote { display: inline-flex; }
}

/* --- Hamburger ------------------------------------------------------------ */

.nav-toggle {
    position: relative;   /* the bars below are absolutely positioned against this */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
}

.site-header--over-hero:not(.is-scrolled) .nav-toggle,
.site-header--over-hero.is-scrolled .nav-toggle { border-color: var(--border-dark); }

@media (min-width: 1000px) { .nav-toggle { display: none; } }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 1.15rem;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; }
.nav-toggle__bars::before { transform: translateY(-0.36rem); }
.nav-toggle__bars::after  { transform: translateY(0.36rem); }

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

/* --- Mobile drawer -------------------------------------------------------- */

.mobile-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--gutter) var(--space-10);
    background: var(--slate-900);
    color: var(--white);
    overflow-y: auto;
    transform: translateY(-0.75rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }

@media (min-width: 1000px) { .mobile-nav { display: none; } }

.mobile-nav__link {
    display: block;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-dark);
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    text-decoration: none;
}

.mobile-nav__link[aria-current="page"] { color: var(--copper-300); }

.mobile-nav__actions {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-7);
}

.mobile-nav__phone {
    margin-top: var(--space-6);
    font-size: var(--step--1);
    color: var(--stone-300);
}

/* Body scroll lock while the drawer is open. */
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   Page body offset for the fixed header
--------------------------------------------------------------------------- */

.site-main {
    padding-top: var(--header-h);
    background: var(--bg);
}

.site-main--hero { padding-top: 0; }

/* Set on pages that open with the dark hero. */
body.has-hero { background: var(--slate-950); }

/* ---------------------------------------------------------------------------
   Mobile action bar

   Two things a homeowner on a phone ever wants: call, or send the job. It
   stays within thumb reach at all times and disappears on desktop.
--------------------------------------------------------------------------- */

.mobile-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 0;
    background: var(--border-dark);
    border-top: 1px solid var(--slate-700);
    padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 1000px) { .mobile-bar { display: none; } }

.mobile-bar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 3.5rem;
    background: var(--slate-900);
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.mobile-bar__item--accent { background: var(--copper-600); }
.mobile-bar__item svg { width: 1.1rem; height: 1.1rem; flex: none; }

body { padding-bottom: 3.5rem; }
@media (min-width: 1000px) { body { padding-bottom: 0; } }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */

.site-footer {
    background: var(--slate-950);
    color: var(--stone-300);
    padding-block: var(--space-10) var(--space-6);
}

.site-footer h3 {
    margin-bottom: var(--space-4);
    color: var(--white);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.footer-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 700px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-7); } }

.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--copper-300); }

.footer-links { list-style: none; padding: 0; }
.footer-links li + li { margin-top: var(--space-3); }
.footer-links a { font-size: 0.94rem; }

.footer-cities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
}

.footer-cities li + li { margin-top: 0; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-9);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-dark);
    font-size: 0.85rem;
    color: var(--stone-400);   /* 4.4:1 was just short of AA on slate-950 */
}

.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }