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

    :root {
      --navy:          #1C2B3A;
      --navy-light:    #243448;
      --navy-dark:     #0f1d28;
      --amber:         #C47B0A;
      --amber-light:   #D4920C;
      --amber-glow:    #F0A830;
      --white:         #FFFFFF;
      --off-white:     #F7F4F0;
      --concrete:      #F2EDE6;
      --concrete-dark: #E4DDD4;
      --text:          #111827;
      --muted:         #6B7280;
      --border:        #E2DDD6;
      --error:         #C0392B;
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', sans-serif; background: var(--white); color: var(--text); }

    /* Anchor-scroll offset for homepage nav targets. nav is position:
       relative (confirmed: no fixed/sticky nav anywhere in this file, any
       breakpoint), so it scrolls away with the page and never overlaps an
       anchor jump's target heading. Offset zeroed out accordingly; restore
       a value matching nav's rendered height if nav is ever made sticky. */
    #services, #adu, #why, #projects, #about, #service-areas {
      scroll-margin-top: 0;
    }

    /* ── WIREFRAME BANNER ── */
    
    /* ── NAV ── */
    nav {
      background: var(--navy);
      padding: 0 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 92px;
      position: relative;
      z-index: 100;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 14px;
      /* The logo is an <a> back to the homepage on interior pages. There is no
         global anchor reset, so without this the whole lockup underlines. */
      text-decoration: none;
    }

    .nav-logo-img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #fff;
      object-fit: contain;
      padding: 2px;
      flex-shrink: 0;
    }

    .nav-logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .nav-logo-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: 26px;
      color: #fff;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .nav-logo-sub {
      font-size: 10px;
      color: rgba(255,255,255,0.42);
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 28px;
      row-gap: 12px;
      list-style: none;
      padding: 12px 0;
    }

    .nav-links a {
      color: rgba(255,255,255,0.68);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: #fff; }

    .nav-cta {
      display: inline-block;
      flex-shrink: 0;
      background: var(--amber);
      color: #fff !important;
      padding: 9px 22px;
      border-radius: 4px;
      font-weight: 600 !important;
      transition: background 0.2s !important;
    }

    .nav-cta:hover { background: var(--amber-light) !important; }

    /* ── HERO ── */
    .hero {
      position: relative;
      height: 640px;
      background: var(--navy);
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center 40%;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        rgba(12,24,34,0.93) 0%,
        rgba(12,24,34,0.75) 50%,
        rgba(12,24,34,0.22) 100%
      );
    }

    .hero-content {
      position: relative;
      z-index: 10;
      padding: 0 64px;
      max-width: 700px;
    }

    .hero-subline {
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      font-weight: 400;
      color: rgba(255,255,255,0.86);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      line-height: 1.3;
      margin-bottom: 28px;
    }

    .hero-headline {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 58px;
      font-weight: 800;
      color: #fff;
      line-height: 1.12;
      letter-spacing: -0.005em;
      max-width: 640px;
      margin-bottom: 20px;
    }

    .hero-headline span { color: var(--amber); }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn-primary {
      background: var(--amber);
      color: #fff;
      padding: 15px 30px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: background 0.2s;
      display: inline-block;
    }

    .btn-primary:hover { background: var(--amber-light); }

    .btn-secondary {
      background: transparent;
      color: #fff;
      padding: 15px 30px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      border: 1.5px solid rgba(255,255,255,0.3);
      transition: border-color 0.2s;
      display: inline-block;
    }

    .btn-secondary:hover { border-color: rgba(255,255,255,0.65); }

    /* Credential strip */
    .hero-credential-strip {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
      background: rgba(196,123,10,0.97);
      backdrop-filter: blur(4px);
      padding: 13px 64px;
      display: flex;
      align-items: center;
    }

    .credential-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 30px;
      border-right: 1px solid rgba(255,255,255,0.26);
    }

    .credential-item:first-child { padding-left: 0; }
    .credential-item:last-child { border-right: none; }

    .credential-icon { font-size: 18px; opacity: 0.88; }

    .credential-text { display: flex; flex-direction: column; line-height: 1.2; }

    .credential-value {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.02em;
    }

    .credential-label {
      font-size: 10px;
      color: rgba(255,255,255,0.7);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* ── SOCIAL PROOF BAR ── */
    .social-proof-bar {
      background: var(--off-white);
      border-bottom: 1px solid var(--border);
      border-top: 1px solid var(--border);
      padding: 28px 40px 26px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    .proof-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-align: center;
    }

    .proof-items {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      flex-wrap: wrap;
      row-gap: 20px;
    }

    .proof-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 0 24px;
      border-right: 1px solid var(--border);
    }

    .proof-item:last-child { border-right: none; }

    .proof-platform-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: 0.02em;
      line-height: 1;
    }

    .proof-stars {
      color: #C47B0A;
      font-size: 15px;
      letter-spacing: 2px;
      line-height: 1;
    }

    .proof-score-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .proof-score {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 18px;
      font-weight: 800;
      color: var(--navy);
    }

    .proof-count {
      font-size: 11px;
      color: var(--muted);
    }

    .proof-badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 0 24px;
      border-right: 1px solid var(--border);
    }

    .proof-badge-item:last-child { border-right: none; }

    .proof-badge-icon {
      font-size: 19px;
      line-height: 1;
    }

    .proof-badge-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      text-align: center;
      line-height: 1.2;
    }

    .proof-badge-sub {
      font-size: 10.5px;
      color: var(--muted);
      text-align: center;
      letter-spacing: 0.02em;
    }

    .proof-sub-line {
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.02em;
      margin-top: -2px;
    }

    /* ── SHARED SECTION ── */
    section { padding: 88px 64px; }

    .section-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--amber);
      margin-bottom: 10px;
    }

    .section-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 48px;
      font-weight: 800;
      color: var(--navy);
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 16px;
    }

    .section-subtitle {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.72;
      max-width: 560px;
    }

    /* Consecutive .section-subtitle paragraphs (e.g. multi-paragraph
       value-prop copy) rendered with zero gap: the global reset zeroes
       margin on every element and this class never added one back. Also
       affects bathroom-remodeling.html's two-paragraph value-prop, not
       just this page. Adjacent-sibling so a single standalone
       .section-subtitle is unaffected. */
    .section-subtitle + .section-subtitle { margin-top: 16px; }

    .section-header { margin-bottom: 52px; }

    /* ── SERVICES ── */
    .services-section { background: var(--white); }

    .services-grid {
      display: flex;
      flex-direction: column;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }

    .services-row {
      display: grid;
      gap: 1px;
      background: var(--border);
    }

    .services-row-top { grid-template-columns: repeat(3, 1fr); }

    .services-row-feature { grid-template-columns: 1fr; }

    .services-row-trade { grid-template-columns: repeat(3, 1fr); }

    .services-row-cta { grid-template-columns: 1fr; }

    .service-card {
      background: var(--white);
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: background 0.2s;
      text-decoration: none;
      overflow: hidden;
    }

    .service-card:hover { background: var(--off-white); }

    /* Cards with no page to link to yet are plain divs, not anchors (see
       index.html comments). This cancels the shared .service-card pointer
       cursor and hover tint so they don't look clickable. Remove this
       modifier from a card the same moment its <a href> is restored. */
    .service-card-static { cursor: default; }
    .service-card-static:hover { background: var(--white); }

    .service-photo {
      width: 100%;
      height: 340px;
      background: var(--concrete-dark);
      background-size: cover;
      background-position: center;
      object-fit: cover;
      object-position: center;
      display: block;
      flex-shrink: 0;
    }

    .service-photo-sm {
      width: 100%;
      height: 160px;
      background: var(--concrete-dark);
      background-size: cover;
      background-position: center;
      flex-shrink: 0;
    }

    .service-feature-photos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--border);
    }

    .service-feature-photo {
      height: 260px;
      width: 100%;
      background: var(--concrete-dark);
      background-size: cover;
      background-position: center;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .service-body {
      padding: 20px 22px 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .service-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 20px;
      font-weight: 700;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .service-desc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.62;
      flex: 1;
    }

    .service-arrow {
      font-size: 12px;
      color: var(--amber);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .service-card-cta {
      background: var(--navy) !important;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 32px 24px;
      gap: 12px;
    }

    .service-card-cta:hover { background: var(--navy-light) !important; }

    /* ── ADU SPOTLIGHT ── */
    .adu-section {
      background: var(--navy);
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 480px;
    }

    .adu-photo {
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .adu-photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 60%, rgba(28,43,58,0.6) 100%);
    }

    .adu-content {
      padding: 72px 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .adu-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(196,123,10,0.18);
      border: 1px solid rgba(196,123,10,0.4);
      border-radius: 2px;
      padding: 5px 12px;
      font-size: 10px;
      font-weight: 700;
      color: var(--amber-glow);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 20px;
      width: fit-content;
    }

    .adu-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 52px;
      font-weight: 800;
      color: #fff;
      text-transform: uppercase;
      line-height: 0.95;
      margin-bottom: 20px;
    }

    .adu-title span { color: var(--amber); }

    .adu-sub {
      font-size: 15px;
      color: rgba(255,255,255,0.65);
      line-height: 1.72;
      margin-bottom: 32px;
      max-width: 420px;
    }

    /* ── PORTFOLIO ── */
    .portfolio-section {
      background: var(--navy);
      padding: 88px 64px;
    }

    .portfolio-section .section-title { color: #fff; }
    .portfolio-section .section-subtitle { color: rgba(255,255,255,0.52); }

    .portfolio-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 260px 260px;
      gap: 8px;
      margin-bottom: 36px;
    }

    .portfolio-item {
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      background: var(--navy-light);
      background-size: cover;
      background-position: center;
    }

    .portfolio-item:first-child { grid-row: 1 / 3; }

    .portfolio-item-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(12,24,34,0.78) 0%, transparent 55%);
      transition: opacity 0.2s;
    }

    .portfolio-item:hover .portfolio-item-overlay { opacity: 0.55; }

    .portfolio-item-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px;
    }

    .portfolio-item-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .portfolio-item-tag {
      display: inline-block;
      background: rgba(12,24,34,0.75);
      color: rgba(255,255,255,0.8);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 2px;
    }

    .portfolio-cta { text-align: center; }

    /* ── WHY TEN EIGHT ── */
    .why-section { background: var(--off-white); }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }

    .why-card {
      background: var(--white);
      padding: 36px 28px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .why-number {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 36px;
      font-weight: 700;
      color: var(--amber);
      opacity: 0.45;
      letter-spacing: 0.02em;
      line-height: 1;
    }

    .why-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px;
      font-weight: 800;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 0.02em;
      line-height: 1.1;
    }

    .why-desc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.68;
      flex: 1;
    }

    .why-detail {
      font-size: 11px;
      font-weight: 600;
      color: var(--amber);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    /* ── ABOUT ── */
    .about-section {
      background: var(--white);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 88px;
      align-items: center;
    }

    .about-photo {
      border-radius: 4px;
      height: 500px;
      overflow: hidden;
      position: relative;
    }

    .about-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .about-license-badge {
      position: absolute;
      bottom: -16px;
      right: -16px;
      background: var(--amber);
      color: #fff;
      padding: 16px 22px;
      border-radius: 4px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.2);
    }

    .badge-value {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
    }

    .badge-label {
      font-size: 10px;
      color: rgba(255,255,255,0.72);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-top: 4px;
    }

    .about-body { padding-right: 16px; }

    .about-quote {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 26px;
      font-weight: 600;
      color: var(--navy);
      line-height: 1.32;
      font-style: italic;
      border-left: 3px solid var(--amber);
      padding-left: 22px;
      margin: 24px 0;
    }

    .about-text {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.88;
      margin-bottom: 16px;
    }

    .about-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin: 32px 0;
    }

    .about-stat {
      text-align: center;
      padding: 16px;
      background: var(--off-white);
      border-radius: 4px;
      border: 1px solid var(--border);
    }

    .stat-value {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 32px;
      font-weight: 800;
      color: var(--navy);
      line-height: 1;
    }

    .stat-label {
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-top: 5px;
    }

    /* ── TESTIMONIALS ── */
    .testimonials-section { background: var(--off-white); }

    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .testimonial-card {
      background: var(--white);
      border-radius: 6px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      border: 1px solid var(--border);
    }

    .testimonial-stars {
      color: var(--amber);
      font-size: 14px;
      letter-spacing: 2px;
    }

    .testimonial-quote {
      font-size: 14px;
      color: var(--text);
      line-height: 1.72;
      font-style: italic;
      flex: 1;
    }

    .testimonial-source {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    .testimonial-avatar {
      width: 38px;
      height: 38px;
      background: var(--navy);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    .testimonial-name { font-size: 13px; font-weight: 600; color: var(--navy); }
    .testimonial-platform { font-size: 11px; color: var(--muted); }

    .testimonials-footer { text-align: center; margin-top: 40px; }

    .review-badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 12px 24px;
      font-size: 13px;
      font-weight: 500;
      color: var(--navy);
      text-decoration: none;
    }

    .review-badge-stars { color: #d32323; font-size: 15px; }

    /* ── SERVICE AREAS ── */
    .areas-section {
      background: var(--white);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 88px;
      align-items: center;
    }

    /* Stacks earlier than the shared 768px breakpoint so the map is never
       squeezed into a narrow 2-column tablet slot (was rendering smaller at
       769-1024px than it does stacked on mobile). Section-scoped, does not
       touch the existing @media (max-width: 768px) block below. */
    @media (max-width: 1024px) {
      .areas-section { grid-template-columns: 1fr; gap: 40px; }
      .areas-map { max-width: 600px; margin-left: auto; margin-right: auto; }
    }

    .areas-map {
      background: var(--off-white);
      border-radius: 4px;
      aspect-ratio: 1200 / 898;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      overflow: hidden;
    }

    .areas-map img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .areas-map-label {
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .areas-list {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 32px;
      margin-top: 26px;
    }

    .area-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      color: var(--text);
      padding: 4px 0;
    }

    .area-dot {
      width: 5px;
      height: 5px;
      background: var(--amber);
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* ── CTA BAND ── */
    .cta-band {
      background: var(--navy);
      padding: 88px 64px;
      position: relative;
      overflow: hidden;
    }

    .cta-band::before {
      content: '10×8';
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 220px;
      font-weight: 800;
      color: rgba(255,255,255,0.03);
      letter-spacing: -0.05em;
      line-height: 1;
      user-select: none;
    }

    .cta-band-inner { max-width: 720px; position: relative; z-index: 1; }

    .cta-band-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 58px;
      font-weight: 800;
      color: #fff;
      text-transform: uppercase;
      line-height: 0.95;
      margin-bottom: 18px;
    }

    .cta-band-sub {
      font-size: 15px;
      color: rgba(255,255,255,0.58);
      margin-bottom: 42px;
      line-height: 1.68;
      max-width: 560px;
    }

    .cta-band-actions {
      display: flex;
      gap: 18px;
      align-items: center;
      flex-wrap: wrap;
    }

    .cta-phone {
      color: rgba(255,255,255,0.68);
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }

    .cta-phone-number {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 24px;
      font-weight: 700;
      color: #fff;
    }

    /* ── FOOTER ── */
    footer { background: var(--navy-dark); padding: 56px 64px 28px; }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 52px;
      margin-bottom: 44px;
    }

    .footer-brand { display: flex; flex-direction: column; gap: 14px; }

    .footer-logo { display: flex; align-items: center; gap: 12px; }

    .footer-logo-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      object-fit: contain;
      padding: 2px;
    }

    .footer-logo-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 15px;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .footer-desc { font-size: 13px; color: rgba(255,255,255,0.36); line-height: 1.72; }
    /* Separates the two clocks: 20+ years is the owner's trade experience,
       2020 is the incorporation date. Sits between .footer-desc and
       .footer-license in the existing hierarchy so it reads as a credential
       line, not body copy. */
    .footer-experience { font-size: 12px; color: rgba(255,255,255,0.42); letter-spacing: 0.04em; line-height: 1.6; }
    /* Deliberately NOT nowrap. At <=768px .footer-grid is two columns (~170px
       each at 375px) and "Serving the South Bay since 2020" is ~180px, so
       nowrap makes it an unbreakable block that forces the grid wider than the
       viewport and overflows the page. Let it wrap, like .footer-desc and
       .footer-license alongside it. */
    .footer-license { font-size: 11px; color: rgba(255,255,255,0.2); letter-spacing: 0.04em; }

    .footer-col-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      color: rgba(255,255,255,0.42);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }

    .footer-links li { font-size: 13px; color: rgba(255,255,255,0.4); }

    .footer-links a {
      font-size: 13px;
      color: rgba(255,255,255,0.4);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-links a:hover { color: rgba(255,255,255,0.78); }

    .footer-cta-box {
      background: rgba(196,123,10,0.12);
      border: 1px solid rgba(196,123,10,0.25);
      border-radius: 4px;
      padding: 18px;
      margin-top: 4px;
    }

    .footer-cta-text {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      line-height: 1.6;
      margin-bottom: 12px;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.07);
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-copy { font-size: 12px; color: rgba(255,255,255,0.2); }

    /* ── ANNOTATION ── */
    .annotation {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(196,123,10,0.09);
      border: 1px dashed var(--amber);
      border-radius: 3px;
      padding: 4px 10px;
      font-size: 10px;
      font-weight: 600;
      color: var(--amber);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    /* ── MOBILE STICKY ──
       Markup is injected by js/sticky-cta.js (shared component).
       Do not hardcode .mobile-sticky markup into any page. */
    .mobile-sticky {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: var(--navy);
      padding: 12px 16px;
      z-index: 999;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
      gap: 8px;
    }

    /* Keep the buttons clear of the iPhone home indicator. Must follow the
       padding shorthand above so it wins. Resolves to plain 12px wherever
       there is no inset (all desktop browsers, non-notched phones).
       NOTE: on iOS these insets only report a non-zero value when the page's
       viewport meta includes viewport-fit=cover. index.html currently ships
       width=device-width, initial-scale=1.0 without it, so this is inert on
       device today. See the sticky-bar note in CLAUDE.md. */
    .mobile-sticky {
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    /* Both children must be exactly half the bar and must never break a
       string mid-word. Notes on the non-obvious bits:
       - min-width: 0 overrides the flex default of min-width: auto, which
         floors an item at its min-content width. Without it the longer
         label ("(310) 220-4011" plus the emoji) claims more than its equal
         share and the two buttons render visibly unequal.
       - white-space: nowrap matches the .nav-cta fix: "FREE ESTIMATE" must
         never wrap into "FREE" / "ESTIMATE" and look clipped.
       - font-size scales with the viewport so the labels keep real headroom
         at 375px (iPhone SE class) and still render at the full 14px from
         ~412px up (Plus class). */
    .mobile-sticky .btn-primary,
    .mobile-sticky .btn-secondary {
      flex: 1 1 0;
      min-width: 0;
      text-align: center;
      padding: 12px 8px;
      font-size: clamp(12px, 3.4vw, 14px);
      letter-spacing: 0.03em;
      white-space: nowrap;
    }

    /* .btn-secondary carries a 1.5px border and .btn-primary declares
       border: none, so with flex-basis: 0 the two items floor at different
       padding+border minimums and land 3px apart. A transparent border of
       the same width equalises the box model. The amber background still
       paints under it (background-clip is border-box), so the button looks
       unchanged. */
    .mobile-sticky .btn-primary {
      border: 1.5px solid transparent;
    }

    /* ── LEAD CAPTURE MODAL ── */
    body.modal-open { overflow: hidden; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15,23,32,0.72);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 2000;
    }

    .modal-backdrop[hidden] { display: none; }

    .modal {
      background: var(--white);
      border-radius: 8px;
      width: 100%;
      max-width: 480px;
      max-height: 90vh;
      overflow-y: auto;
      padding: 40px 36px;
      position: relative;
      box-shadow: 0 24px 64px rgba(0,0,0,0.32);
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 4px;
      font-size: 22px;
      line-height: 1;
      color: var(--muted);
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

    .modal-close:hover { background: var(--off-white); color: var(--navy); }

    .modal-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 30px;
      font-weight: 800;
      color: var(--navy);
      text-transform: uppercase;
      line-height: 1.05;
      margin-bottom: 8px;
      padding-right: 24px;
    }

    .modal-subtitle {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 26px;
    }

    .modal-form {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .modal-form[hidden] { display: none; }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-field label {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: var(--navy);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .form-field input,
    .form-field select {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: var(--text);
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 4px;
      padding: 12px 14px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .form-field input:focus,
    .form-field select:focus {
      outline: none;
      border-color: var(--amber);
      box-shadow: 0 0 0 3px rgba(196,123,10,0.15);
    }

    .form-field input.has-error,
    .form-field select.has-error {
      border-color: var(--error);
    }

    .form-error {
      font-size: 12px;
      color: var(--error);
      line-height: 1.4;
      min-height: 14px;
    }

    .modal-submit {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 17px;
      letter-spacing: 0.05em;
      width: 100%;
      text-align: center;
      margin-top: 6px;
      border: none;
    }

    .modal-success {
      text-align: center;
      padding: 12px 4px 4px;
    }

    .modal-success-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 18px;
      border-radius: 50%;
      background: var(--amber);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 700;
    }

    .modal-success-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 26px;
      font-weight: 800;
      color: var(--navy);
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .modal-success-title:focus { outline: none; }

    .modal-success-text {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      nav { padding: 0 20px; }
      .nav-links { display: none; }
      .hero { height: 540px; }
      .hero-content { padding: 0 24px; }
      .hero-headline { font-size: 36px; }
      .hero-credential-strip { padding: 10px 20px; flex-wrap: wrap; gap: 8px; }
      .social-proof-bar { padding: 14px 24px; gap: 12px; }
      section { padding: 60px 24px; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .adu-section { grid-template-columns: 1fr; }
      .adu-photo { height: 280px; }
      .adu-content { padding: 48px 24px; }
      .portfolio-section { padding: 60px 24px; }
      .portfolio-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
      .portfolio-item { aspect-ratio: 1 / 1; }
      .portfolio-item:first-child { grid-row: auto; }
      .why-grid { grid-template-columns: repeat(2, 1fr); }
      .about-section { grid-template-columns: 1fr; gap: 48px; }
      .about-body { padding-right: 0; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .areas-section { grid-template-columns: 1fr; gap: 40px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      .mobile-sticky { display: flex; }
      /* Matches the sticky bar's own safe-area padding so the last of the
         page content is never hidden behind the bar. */
      body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
      .modal-backdrop { padding: 0; align-items: flex-end; }
      .modal { max-width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; padding: 32px 22px 28px; }
      .modal-title { font-size: 26px; }
    }

    @media (max-width: 480px) {
      .services-row-top { grid-template-columns: 1fr; }
      .services-row-trade { grid-template-columns: 1fr; }
      .service-feature-photos { grid-template-columns: 1fr; }
    }

.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

.portfolio-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

.adu-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }


/* ══════════════════════════════════════════════════════════════
   SERVICE PAGE COMPONENTS
   Introduced with kitchen-remodeling.html (Phase 0.3). Written to be
   trade-agnostic so the remaining four service pages stamp from the
   same rules. Nothing here is kitchen-specific.
   ══════════════════════════════════════════════════════════════ */

/* ── Service hero ── */
.hero-service { height: 600px; }

.hero-service-copy {
  font-size: 16px;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 24px;
}

.hero-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(196,123,10,0.16);
  border: 1px solid rgba(196,123,10,0.45);
  border-radius: 3px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--amber-glow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
  width: fit-content;
}

.hero-phone-line {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.72);
}

.hero-phone-line a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  letter-spacing: 0.01em;
}

/* Value-prop block sits directly on the section padding, no trailing gap. */
.section-header-flush { margin-bottom: 0; }
.section-subtitle-wide { max-width: 760px; }

/* ── Scope of work checklist ── */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.scope-item {
  background: var(--white);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--text);
}

.scope-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* ── Process steps ── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.process-step { display: flex; flex-direction: column; gap: 12px; }

.process-number {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--amber);
  opacity: 0.4;
  line-height: 1;
}

.process-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  line-height: 1.15;
}

.process-desc { font-size: 13px; color: var(--muted); line-height: 1.65; }

/* ── Gallery ── */
.gallery-section { background: var(--white); }
.gallery-section .section-title { color: var(--navy); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: start;
}

.gallery-item {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--concrete-dark);
  cursor: pointer;
}

.gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item:hover img { transform: scale(1.04); }

.gallery-item-large {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

/* ── Gallery lightbox ── */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12,24,34,0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay.active { display: flex; }

.lightbox-image {
  max-width: 88vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  font-size: 26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-arrow:hover { background: rgba(255,255,255,0.16); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

/* ── Before/after spotlight ── */
.spotlight-section { background: var(--off-white); }

.spotlight-narrative {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 760px;
  margin-bottom: 48px;
}

.spotlight-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.spotlight-img-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  height: 380px;
}

.spotlight-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spotlight-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(12,24,34,0.82);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 3px;
  z-index: 2;
}

.spotlight-testimonial {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 36px 40px;
  max-width: 760px;
}

.spotlight-testimonial .testimonial-stars { margin-bottom: 14px; }
.spotlight-testimonial .testimonial-quote { margin-bottom: 16px; }

/* ── Local service-area band ── */
.local-band {
  background: var(--navy);
  padding: 40px 64px;
  text-align: center;
}

.local-band p {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── FAQ ── */
.faq-section { background: var(--white); }

.faq-list {
  max-width: 820px;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 26px 0;
}

.faq-question {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.faq-answer {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 700px;
}

/* ── Service page CTA band sizing ── */
.cta-band-actions .btn-primary-lg { font-size: 15px; padding: 16px 36px; }

/* Two parallel text columns (no image), added for the ADU "What We Build"
   section. No existing grid pairs plain text columns without an image
   (.about-section) or without 4 items (.why-grid), so this is new. */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.two-col-item { display: flex; flex-direction: column; gap: 12px; }

.two-col-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.two-col-body { font-size: 14px; color: var(--muted); line-height: 1.7; }

@media (max-width: 768px) {
  .scope-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item-large { grid-column: span 1; }
  .spotlight-images { grid-template-columns: 1fr; }
  .spotlight-img-wrap { height: 280px; }
  .local-band { padding: 32px 24px; }
  .lightbox-close { top: 14px; right: 18px; font-size: 32px; }
  .lightbox-arrow { width: 42px; height: 42px; font-size: 20px; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
  .two-col-grid { grid-template-columns: 1fr; gap: 28px; }
}