/* Base theme. build_site.py substitutes the __TOKEN__ values from site.json theme settings.
   Everything visual routes through custom properties so a network of sites can look
   genuinely different without touching layout code. */

:root {
  --brand:        #2E3A49;
  --brand-dark:   #1B242F;
  --accent:       #C9A227;
  --accent-dark:  #9C7D16;
  --ink:          #1B242F;
  --ink-soft:     #5A6675;
  --bg:           #FFFFFF;
  --bg-alt:       #F7F5F0;
  --line:         #E3DED2;

  --font-head: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Source Sans Pro", "Segoe UI", Tahoma, sans-serif;

  --radius: 6px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(16,24,40,.12);
  --shadow-lg: 0 2px 4px rgba(16,24,40,.04), 0 20px 48px -12px rgba(16,24,40,.18);
  --wrap: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin-top: 1.6em; }
p  { margin: 0 0 1.1em; }
a  { color: var(--brand-dark); text-underline-offset: 2px; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

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

.topbar { background: var(--brand-dark); color: #fff; font-size: .85rem; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; line-height: 1.15; }
.logo-mark { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: grid; place-items: center; font-size: .95rem; letter-spacing: .02em; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { list-style: none; position: relative; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav-link { display: block; padding: 10px 13px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: .95rem; white-space: nowrap; background: none; border: 0; font-family: inherit; cursor: pointer; }
.nav-link:hover { background: var(--bg-alt); }

.dropdown { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; display: none; }
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown { display: grid; }
.dropdown.cols-2 { grid-template-columns: repeat(2, minmax(210px, 1fr)); width: max-content; max-width: 92vw; }
.dropdown.cols-3 { grid-template-columns: repeat(3, minmax(200px, 1fr)); width: max-content; max-width: 92vw; }
.dropdown a { display: block; padding: 8px 11px; border-radius: 7px; text-decoration: none; color: var(--ink); font-size: .92rem; }
.dropdown a:hover { background: var(--bg-alt); color: var(--brand-dark); }
.dropdown .group-label { grid-column: 1/-1; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); padding: 8px 11px 4px; font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: var(--radius); font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font-family: var(--font-body); font-size: 1rem; line-height: 1.2; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.btn-call { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.btn-call:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-lg { padding: 16px 30px; font-size: 1.06rem; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

/* ---------- hero ---------- */

.hero { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: clamp(38px, 6vw, 76px) 0; }
.hero h1 { margin-bottom: .35em; }
.hero-sub { font-size: clamp(1.03rem, 1.7vw, 1.2rem); color: var(--ink-soft); max-width: 60ch; margin-bottom: 1.6em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-split { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero-center { text-align: center; }
.hero-center .hero-sub { margin-left: auto; margin-right: auto; }
.hero-center .hero-actions { justify-content: center; }
.hero-stack .hero-media { margin-top: 34px; }

.trustbar { background: #fff; border-bottom: 1px solid var(--line); padding: 18px 0; }
.trustbar ul { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 0; padding: 0; list-style: none; justify-content: center; }
.trustbar li { display: flex; align-items: center; gap: 9px; font-size: .93rem; color: var(--ink-soft); font-weight: 500; margin: 0; }
.trustbar svg { flex: 0 0 18px; color: var(--brand); }

/* ---------- content ---------- */

main { padding: clamp(32px, 5vw, 60px) 0 0; }
.content { max-width: 74ch; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }

.callout { background: var(--bg-alt); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; margin: 1.8em 0; }
.callout p:last-child { margin-bottom: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 1.6em 0 2em; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.card h3 { margin-top: 0; font-size: 1.08rem; }
.card p:last-child { margin-bottom: 0; }
.card img { margin-bottom: 14px; }

table { width: 100%; border-collapse: collapse; margin: 1.4em 0 1.8em; font-size: .95rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { background: var(--bg-alt); font-family: var(--font-head); font-weight: 700; font-size: .88rem; letter-spacing: .01em; }
tbody tr:hover { background: var(--bg-alt); }
.table-note { font-size: .85rem; color: var(--ink-soft); margin-top: -1.2em; }

details.faq { border-bottom: 1px solid var(--line); padding: 4px 0; }
details.faq summary { cursor: pointer; padding: 15px 30px 15px 0; font-family: var(--font-head); font-weight: 700; font-size: 1.03rem; list-style: none; position: relative; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--brand); font-weight: 400; }
details.faq[open] summary::after { content: "\2013"; }
details.faq .faq-body { padding: 0 0 15px; color: var(--ink-soft); }

/* ---------- form ---------- */

.form-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: var(--shadow-lg); }
.form-card.sticky { position: sticky; top: 96px; }
.form-card h2, .form-card h3 { margin-top: 0; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: .97rem; background: #fff; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.field textarea { min-height: 92px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .8rem; color: var(--ink-soft); margin: 10px 0 0; }
.form-card .btn { width: 100%; }

.cta-band { background: var(--brand-dark); color: #fff; border-radius: 16px; padding: clamp(28px, 4vw, 44px); margin: 3em 0; text-align: center; }
.cta-band h2 { color: #fff; margin-top: 0; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 56ch; margin: 0 auto 1.4em; }

/* ---------- footer ---------- */

.site-footer { background: var(--ink); color: rgba(255,255,255,.72); margin-top: clamp(48px, 7vw, 88px); padding: clamp(34px, 5vw, 54px) 0 26px; font-size: .93rem; }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.site-footer strong { color: #fff; font-family: var(--font-head); display: block; margin-bottom: 8px; font-size: 1.02rem; }
.site-footer a { color: #fff; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 30px; padding-top: 18px; font-size: .84rem; color: rgba(255,255,255,.55); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 8px; }

/* Fixed tap-to-call bar. Most of this traffic is mobile and most of it converts
   by phone, so the number stays reachable without scrolling. Hidden on desktop,
   where the header CTA covers it. */
.mobile-cta { display: none; }
@media (max-width: 820px) {
  .mobile-cta {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(16,24,40,.10);
  }
  .mobile-cta .btn { width: 100%; padding: 14px 12px; font-size: 1rem; }
  body { padding-bottom: 78px; }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .form-card.sticky { position: static; }
  .hero-split { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px; gap: 2px; max-height: 74vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
  .nav.open { display: flex; }
  .site-header { position: sticky; }
  .header-inner { position: relative; flex-wrap: wrap; }
  .dropdown { position: static; display: grid !important; grid-template-columns: 1fr !important; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 2px 0 8px 12px; padding: 2px 0; width: auto; max-width: none; }
  .header-cta { display: none; }
  .topbar { font-size: .8rem; }
  body { font-size: 16px; }
}

@media (max-width: 520px) {
  .hero-actions .btn { width: 100%; }
}

@media print {
  .site-header, .topbar, .cta-band, .form-card { display: none; }
}


/* ---------- footer social + logo (added post-build) ---------- */
.footer-social { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.footer-social strong { display: block; margin-bottom: 10px; }
.footer-social ul { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 0; padding: 0; }
.footer-social li { margin: 0; }
.footer-social a {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .84rem;
  text-decoration: none; border: 1px solid rgba(255,255,255,.22); color: inherit; opacity: .85;
}
.footer-social a:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
img.logo-mark { background: none; object-fit: contain; padding: 0; }
.footer-logo {
  width: 100%; max-width: 340px; height: auto; margin: 14px 0 16px;
  background: #fff; border-radius: 8px; padding: 12px 14px;
}


/* ============================================================================
   Luxury layer. Appended after the generated site.css, so everything here wins.
   Target: a Beverly Hills homeowner comparing three contractors, two of whom
   have architect-designed sites. The base theme reads competent-contractor;
   this layer moves it to design-studio without touching any markup.

   The levers, in order of effect:
     1. A titling serif at regular weight instead of bold. Bold serif reads
        contractor; light serif at large sizes reads architecture practice.
     2. Air. Roughly 40% more vertical rhythm everywhere.
     3. Flat. Shadows and rounded cards are 2015 SaaS. Hairlines and square
        corners are editorial.
     4. A darker, warmer palette with the gold pulled back to antique brass.
   ========================================================================== */

:root {
  --brand:       #232B36;
  --brand-dark:  #131920;
  --accent:      #A98B4B;   /* antique brass, not the brighter #C9A227 */
  --accent-dark: #8A6F36;
  --ink:         #131920;
  --ink-soft:    #5D6673;
  --bg:          #FFFFFF;
  --bg-alt:      #F5F2EC;   /* warm paper, not grey */
  --line:        #E5E0D6;
  --radius:      2px;
  --wrap:        1200px;

  --font-head: "Marcellus", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shadow:    none;
  --shadow-lg: 0 24px 60px -30px rgba(19,25,32,.28);
}

body { font-size: 17.5px; line-height: 1.72; letter-spacing: -.001em; }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-weight: 400;          /* the single biggest change on the page */
  letter-spacing: -.015em;
  line-height: 1.14;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); margin-top: 2.9em; margin-bottom: .7em; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin-top: 2em; margin-bottom: .5em; }

/* A hairline of brass above every H2. Cheap, and it does most of the work of
   making long pages feel sectioned rather than scrolled. */
main h2::before {
  content: ""; display: block; width: 38px; height: 2px;
  background: var(--accent); margin-bottom: .85em;
}
main h2:first-child::before { margin-top: 0; }
.cta-band h2::before, .form-card h2::before, .form-card h3::before { display: none; }

p { margin: 0 0 1.35em; }
.content { max-width: 68ch; }
li { margin-bottom: .6em; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: var(--accent); transition: color .2s ease; }
a:hover { color: var(--accent-dark); }

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

.topbar { background: var(--ink); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.topbar .wrap { min-height: 42px; }
.topbar a { letter-spacing: .06em; }

.site-header { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 88px; }
.logo { font-size: 1.15rem; letter-spacing: .02em; gap: 13px; }
img.logo-mark { width: 44px; height: 44px; flex: 0 0 44px; }

.nav-link { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
            font-weight: 500; padding: 11px 14px; border-radius: 0; }
.nav-link:hover { background: none; color: var(--accent-dark); }
.dropdown { border-radius: 0; border-color: var(--line); padding: 18px; box-shadow: var(--shadow-lg); }
.dropdown a { border-radius: 0; font-size: .9rem; padding: 9px 12px; text-decoration: none; }
.dropdown .group-label { font-size: .68rem; letter-spacing: .14em; color: var(--accent-dark); }

.btn { border-radius: 0; font-size: .82rem; letter-spacing: .11em; text-transform: uppercase;
       font-weight: 600; padding: 16px 30px; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn-call { background: var(--accent); }
.btn-call:hover { background: var(--accent-dark); transform: none; }
.btn-ghost { background: transparent; border: 1px solid currentColor; }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-lg { padding: 19px 38px; font-size: .86rem; }
.header-cta { padding: 14px 24px; }

/* ---------- hero: dark, editorial, full-height image ---------- */

.hero {
  background: var(--ink); color: #fff; border-bottom: 0;
  padding: clamp(52px, 7vw, 104px) 0;
  position: relative; overflow: hidden;
}
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero-sub { color: rgba(255,255,255,.74); font-size: clamp(1.05rem, 1.6vw, 1.22rem);
            max-width: 54ch; margin-bottom: 2.2em; line-height: 1.6; }
.hero-split { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 68px); }
.hero-media img { border-radius: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero .btn-ghost { color: #fff; }
.hero .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

.trustbar { border-bottom: 1px solid var(--line); padding: 26px 0; background: var(--bg-alt); }
.trustbar ul { gap: 14px 48px; }
.trustbar li { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
               color: var(--ink); font-weight: 500; }
.trustbar svg { color: var(--accent); flex-basis: 15px; }

/* ---------- content blocks ---------- */

main { padding-top: clamp(44px, 6vw, 84px); }

.cards { gap: 34px 30px; margin: 2.2em 0 2.8em;
         grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.card { border: 0; border-top: 1px solid var(--line); border-radius: 0;
        padding: 22px 0 0; box-shadow: none; background: none; }
.card img { border-radius: 0; margin-bottom: 20px; aspect-ratio: 4 / 3; object-fit: cover;
            transition: opacity .4s ease; }
.card:hover img { opacity: .88; }
.card h3 { margin-top: 0; font-size: 1.2rem; }
.card p { color: var(--ink-soft); font-size: .96rem; line-height: 1.65; }

/* Pull the card grid out past the prose measure so it reads as a gallery band
   rather than an indented list inside an article. */
.content .cards { max-width: none; }

figure, main > .content img, .content > img { border-radius: 0; }
main img { border-radius: 0; }
.content img { margin: 2.2em 0; width: 100%; }

.callout {
  background: none; border-left: 0; border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 26px 0 24px; margin: 2.6em 0;
  font-family: var(--font-head); font-size: 1.22rem; line-height: 1.5; color: var(--ink);
}

table { font-size: .93rem; margin: 2em 0 2.4em; }
th, td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--line); }
th { background: none; font-family: var(--font-body); font-weight: 600;
     font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
     color: var(--ink-soft); border-bottom: 1px solid var(--ink); }
tbody tr:hover { background: var(--bg-alt); }
.table-note { font-size: .82rem; margin-top: -1.6em; }

details.faq { border-bottom: 1px solid var(--line); padding: 6px 0; }
details.faq summary { font-weight: 400; font-size: 1.16rem; padding: 22px 40px 22px 0; }
details.faq summary::after { color: var(--accent); font-size: 1.5rem; }
details.faq .faq-body { padding-bottom: 22px; max-width: 68ch; }

/* ---------- form + CTA ---------- */

.form-card { border-radius: 0; border-color: var(--line); padding: 32px; box-shadow: none;
             background: var(--bg-alt); }
.form-card.sticky { top: 112px; }
.field label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
               color: var(--ink-soft); margin-bottom: 8px; }
.field input, .field select, .field textarea { border-radius: 0; padding: 14px 14px; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline-color: var(--accent); border-color: var(--accent); }

.cta-band { background: var(--ink); border-radius: 0; padding: clamp(44px, 6vw, 76px) clamp(24px, 4vw, 56px);
            margin: 4.5em 0; }
.cta-band h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.cta-band p { color: rgba(255,255,255,.7); font-size: 1.05rem; margin-bottom: 2em; }

/* ---------- footer ---------- */

.site-footer { background: var(--ink); padding: clamp(56px, 7vw, 84px) 0 30px; font-size: .92rem; }
.footer-inner { gap: 40px; }
.site-footer strong { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
                      color: rgba(255,255,255,.5); font-family: var(--font-body);
                      font-weight: 600; margin-bottom: 14px; }
.footer-legal { margin-top: 40px; padding-top: 24px; font-size: .8rem; }
.footer-logo { max-width: 300px; padding: 14px 16px; border-radius: 2px; }
.footer-social a { border-radius: 0; letter-spacing: .06em; font-size: .78rem; padding: 6px 13px; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-media { margin-top: 8px; }
}
@media (max-width: 820px) {
  body { font-size: 16.5px; }
  .header-inner { min-height: 70px; }
  .nav-link { text-transform: none; letter-spacing: .02em; font-size: .95rem; }
  .dropdown .group-label { letter-spacing: .1em; }
  h2 { margin-top: 2.2em; }
  .trustbar ul { justify-content: flex-start; gap: 10px 26px; }
}

/* The five-step process diagram is 2.5:1. Squeezed into the 68ch prose measure
   its labels drop to about 10px, so let it use the full content column. */
.content img[src*="process-five-steps"] { max-width: none; width: 100%; margin: 2.6em 0; }

/* ============================================================================
   Image weight pass. Brief: photographs bigger and more present, text stays.
   Levers, largest effect first:
     1. Body images stop obeying the 68ch reading measure. Prose wants a short
        line; a photograph does not. This alone is about +50% on every inline image.
     2. A wider page shell, so the column those images fill is wider again.
     3. Two cards per row instead of three, which roughly doubles each card photo.
     4. The hero photograph runs off the right edge of the screen on desktop.
   ========================================================================== */

:root { --wrap: 1320px; }

/* 1 + 2. Photographs are not prose. Let them have the whole column. */
.content img { max-width: none; width: 100%; margin: 3.4em 0; }
.content .cards img { margin: 0 0 22px; }

/* 3. Fewer, larger cards. */
.cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 52px 40px; }
/* Pin to exactly two per row on desktop. auto-fit with a large minmax dropped to
   a single column on a 750px content area, which made a ten-card section endless. */
@media (min-width: 981px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card img { aspect-ratio: 4 / 3; }
.card h3 { font-size: 1.34rem; }
.card p  { font-size: 1rem; line-height: 1.7; }

/* A slow, small brightness shift is enough to make a photograph feel live
   without a clipping wrapper to zoom inside. */
.card img, .content img { transition: filter .5s ease; }
.card:hover img { opacity: 1; filter: brightness(1.05); }

/* 4. Hero: the photograph takes the larger half and bleeds off the right edge.
   Below 981px the split collapses to one column and this is switched off. */
/* Scoped to desktop. Unscoped, this sat after the mobile single-column override
   in the cascade and beat it, collapsing the hero photo to ~118px on a phone. */
@media (min-width: 981px) {
  .hero-split { grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
}
.hero-media img { aspect-ratio: 5 / 4; }

@media (min-width: 981px) {
  .hero .wrap {
    max-width: none;
    padding-left: max(20px, calc((100vw - var(--wrap)) / 2 + 20px));
    padding-right: 0;
  }
  .hero-media img { aspect-ratio: 16 / 11; }
}

/* The sticky quote form no longer needs to be as wide as the photographs.
   Scoped to desktop: unscoped it sat after the base mobile override and kept a
   320px sidebar inside a 375px screen, collapsing .content to zero width. */
@media (min-width: 981px) {
  .layout { grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 4vw, 64px); }
}

/* The 68ch cap belongs on prose, not on the container. Capping .content itself
   held every photograph to the text measure. Cap the text elements instead and
   let images, card grids, tables and the CTA band use the whole grid column. */
.content { max-width: none; }
.content > p,
.content > ul,
.content > ol,
.content > h2,
.content > h3,
.content > h4,
.content > .callout,
.content > .table-note,
.content > details.faq { max-width: 62ch; }
/* 62ch rather than 68. Shorter lines read better at this size, and the wider
   gap between a text block and a full-column photograph makes the photograph
   read as the dominant element, which is the point of this pass. */

.content > img,
.content > .cards,
.content > table,
.content > .cta-band { max-width: none; width: 100%; }

/* ---------- nav fixes: centering, dropdown caret, hover persistence ---------- */
/* The generated base gives lists document margins (ul { margin: 0 0 1.2em },
   li { margin-bottom: .45em }); inside the header they pushed the nav links
   above the vertical center that the logo and call button sit on. */
.nav { margin: 0; padding: 0; }
.nav li { margin: 0; }

/* Caret so visitors can tell "Services" and "Areas We Serve" open a menu. */
.has-drop > .nav-link { display: inline-flex; align-items: center; gap: 7px; }
.has-drop > .nav-link::after {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .55;
  transition: transform .15s ease, opacity .15s ease;
}
.has-drop:hover > .nav-link::after,
.has-drop:focus-within > .nav-link::after { transform: rotate(180deg); opacity: 1; }

/* The dropdown floats 6px below its trigger. Crossing that gap left :hover on
   the way to the menu, which closed it before a link could be clicked. An
   invisible bridge over the gap keeps the hover chain unbroken. */
.dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}

@media (max-width: 820px) {
  /* The mobile drawer keeps the menu permanently expanded: no caret, no bridge. */
  .has-drop > .nav-link::after { content: none; }
  .dropdown::before { content: none; }
}

/* ---------- projects: portfolio grid + lightbox ---------- */
.projects-outro { max-width: 68ch; margin: clamp(30px, 4vw, 54px) 0 clamp(34px, 4vw, 56px); }

/* The desktop .hero .wrap rule kills max-width and zeroes the right padding so a
   split hero's photograph can bleed off the edge. A centred hero inherits that
   and lands off-centre, so it needs the normal wrap back. */
.hero-plain .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.hero-center { text-align: center; }
.hero-center .hero-sub { margin-left: auto; margin-right: auto; }
.hero-center .hero-actions { justify-content: center; }

.project { padding: clamp(34px, 4.5vw, 64px) 0; border-top: 1px solid rgba(169, 139, 75, .5); }
.project:first-of-type { margin-top: clamp(34px, 4.5vw, 60px); }
.project-head { max-width: 68ch; margin-bottom: clamp(22px, 3vw, 36px); }
.project-head h2 { margin: 0 0 .55em; }
.project-head h2::before { display: none; }
.project-head p:last-child { margin-bottom: 0; }
.project-eyebrow {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-dark); font-weight: 600; margin: 0 0 .9em;
}

/* Fixed column counts rather than auto-fill: with a 2x2 lead frame, an
   auto-fill track count of 5 leaves a hole punched in the second row. */
.project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; grid-auto-flow: dense; }
@media (max-width: 1100px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
.project-grid figure { margin: 0; }
/* The opening frame runs large so each project leads with one photograph
   instead of a wall of equal tiles. */
.project-grid figure:first-child { grid-column: span 2; grid-row: span 2; }
.project-grid .shot {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; overflow: hidden; line-height: 0;
}
.project-grid img {
  width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 0; margin: 0; background: var(--bg-alt);
  transition: transform .5s cubic-bezier(.2,.6,.2,1), filter .35s ease;
}
.project-grid .shot:hover img, .project-grid .shot:focus-visible img { transform: scale(1.035); filter: brightness(1.04); }
.project-grid .shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.projects-form { max-width: 560px; margin: 0 0 clamp(40px, 6vw, 84px); }
.projects-form .form-card.sticky { position: static; }

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; gap: clamp(4px, 2vw, 22px);
  background: rgba(10,13,17,.94); padding: clamp(12px, 3vw, 40px);
}
.lightbox[hidden] { display: none; }
.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.lb-stage img {
  max-width: min(92vw, 820px); max-height: 78vh; width: auto; height: auto;
  border-radius: 0; object-fit: contain;
}
.lb-stage figcaption { color: rgba(255,255,255,.8); font-size: .88rem; text-align: center; max-width: 60ch; }
.lb-stage figcaption span + span { color: rgba(255,255,255,.5); }
.lightbox button {
  background: none; border: 0; color: #fff; cursor: pointer; line-height: 1;
  padding: 10px 14px; border-radius: 0; opacity: .72; transition: opacity .15s ease;
}
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; }
.lightbox button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-prev, .lb-next { font-size: clamp(2.2rem, 5vw, 3.2rem); flex: none; }
.lb-close { position: absolute; top: clamp(6px, 2vw, 18px); right: clamp(6px, 2vw, 22px); font-size: 2.4rem; }

@media (max-width: 820px) {
  /* The strip above the navbar eats scarce vertical space on a phone and the
     same number sits in the header, so it is desktop-only. */
  .topbar { display: none; }

  .project-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .project-grid figure:first-child { grid-column: 1 / -1; grid-row: auto; }
  .lb-prev, .lb-next { position: absolute; bottom: 12px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb-stage img { max-height: 68vh; }
}