:root {
      color-scheme: light dark;
      --paper: #FAF6F0;
      --paper-deep: #EFF1E8;
      --ink: #1D241C;
      --muted: #50584F;
      --line: #C8CDBF;
      --forest: #2F3B2A;
      --sage: #5C6E4E;
      --sage-hover: #4A5A3E;
      --sage-label: #6B7A5E;
      --sage-pale: #EDF0E6;
      --gold: #B08D57;
      --blue: #476B7B;
      --blue-deep: #3A5A67;
      --white: #FFFFFF;
      --shadow: 0 24px 70px rgba(31, 45, 28, .12);
      --serif: "Cormorant Garamond", Georgia, serif;
      --sans: "Manrope", "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.65;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid var(--sage); outline-offset: 4px; }
    .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 50; background: var(--ink); color: var(--paper); padding: .75rem 1rem; }
    .skip-link:focus { top: 1rem; }

    .nav-shell {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--paper) 92%, transparent);
      backdrop-filter: blur(14px);
    }
    .nav {
      width: min(1180px, calc(100% - 40px));
      min-height: 136px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }
    .nav-mark {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      flex: 0 0 auto;
    }
    .nav-logo { width: auto; height: 120px; object-fit: contain; }
    .nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.25rem); }
    .nav-links a { text-decoration: none; color: var(--ink); font-size: 1.1rem; font-weight: 700; padding: 0 1.25rem; border-left: 1px solid var(--line); }
    .nav-links a:first-child { border-left: none; padding-left: 0; }
    .nav-links a:hover { color: var(--sage-hover); }
    .menu-button { display: none; border: 0; background: transparent; color: var(--ink); font: 600 .88rem var(--sans); padding: .65rem; }

    main { display: block; }
    .hero {
      width: min(1260px, calc(100% - 40px));
      margin: 0 auto;
      padding: clamp(3.5rem, 7vw, 7.5rem) 0 clamp(4.5rem, 8vw, 8.5rem);
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
      align-items: start;
      gap: clamp(3rem, 7vw, 7rem);
    }
    .hero-copy { padding-top: clamp(.35rem, 1.2vw, 1.1rem); }
    .eyebrow { margin: 0 0 1.75rem; color: var(--blue); font-size: .95rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      max-width: 680px;
      margin-bottom: 1.4rem;
      font-family: var(--serif);
      font-size: clamp(3.55rem, 7.5vw, 7.4rem);
      font-weight: 500;
      letter-spacing: -.055em;
      line-height: .84;
      text-wrap: balance;
    }
    .hero-copy > p:not(.eyebrow) { max-width: 610px; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.18rem); }
    .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
    .button, .button:link, .button:visited {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .65rem;
      padding: .78rem 1.15rem;
      border: 1px solid var(--sage);
      border-radius: 3px;
      background: var(--sage);
      color: #FFFFFF;
      text-decoration: none;
      font-size: .95rem;
      font-weight: 700;
    }
    .button.alt { background: transparent; color: var(--sage); }
    .button:hover { background: var(--sage-hover); border-color: var(--sage-hover); color: #FFFFFF; }
    .button.alt:hover { background: var(--sage-hover); border-color: var(--sage-hover); color: #FFFFFF; }
    .hero-art, .hero-art *, .hero-caption { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
    .hero-art { position: relative; }
    .hero-art img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
    /* About hero: full artwork, no crop — matches the mobile presentation */
    .hero-full { align-items: start; }
    .hero-full .hero-art img { aspect-ratio: auto; max-height: 520px; width: auto; max-width: 100%; margin-inline-start: auto; }
    /* Compact heroes (Services, Estimate): artwork scaled down */
    .hero-compact { grid-template-columns: 1fr .85fr; align-items: stretch; }
    .hero-compact .hero-art { display: flex; }
    .hero-compact .hero-art img { width: 100%; height: 100%; object-fit: cover; max-width: 540px; margin-inline-start: auto; }
    .hero-caption { width: 78%; margin: 1rem 0 0 auto; color: var(--muted); font-size: .77rem; border: none; outline: none; }

    .trust-strip { border-block: 1px solid var(--line); background: var(--paper-deep); }
    .trust-strip div {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
      padding: .95rem 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      align-items: center;
      text-align: center;
      color: var(--muted);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .trust-strip span + span { border-left: 1px solid var(--line); }

    .section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: clamp(5rem, 9vw, 9rem) 0; }
    .section-tight-top { padding-top: clamp(3rem, 6vw, 5.5rem); }
    .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: clamp(2.2rem, 5vw, 4.5rem); }
    .section-head.stacked { display: block; }
    .section-head.stacked .eyebrow { margin-bottom: 1rem; }
    .section-head.stacked h2 { margin-bottom: 1.25rem; }
    .section-head h2 { margin-bottom: 0; font: 500 clamp(2.8rem, 5.8vw, 5.4rem)/.93 var(--serif); letter-spacing: -.045em; }
    .section-head p { max-width: 560px; margin: 0; color: var(--muted); }

    .path-list { border-top: 1px solid var(--line); }
    .path {
      min-height: 0;
      display: grid;
      grid-template-columns: .5fr 1.5fr;
      gap: clamp(2rem, 6vw, 6rem);
      align-items: center;
      padding: clamp(2.2rem, 4.5vw, 4rem) 0;
    }
    .path:nth-child(even) { grid-template-columns: 1.5fr .5fr; }
    .path { border-bottom: 1px solid var(--line); }
    .path:nth-child(even) .path-image { order: 2; }
    .path-image { overflow: hidden; aspect-ratio: 1; width: 280px; height: 280px; flex: none; }
    /* About page: uniform (non-alternating) Meet sections with larger artwork */
    .about-paths .path { grid-template-columns: 340px 1fr; }
    .about-paths .path:nth-child(even) { grid-template-columns: 340px 1fr; }
    .about-paths .path:nth-child(even) .path-image { order: 0; }
    .about-paths .path-image { width: 340px; height: 340px; }
    .path-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
    .path:hover .path-image img { transform: scale(1.025); }
    .path-number { color: var(--blue); font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
    .path h3 { margin: .6rem 0 1.2rem; font: 500 clamp(2.6rem, 5vw, 4.8rem)/.95 var(--serif); letter-spacing: -.035em; }
    .path .eyebrow { font-size: 1.15rem; margin-bottom: 1.25rem; }
    .path p { max-width: 510px; color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.65; }
    /* About Meet sections: let the text fill the wider column (no dead space on the right) */
    .about-paths .path p { max-width: 640px; }
    .text-link { display: inline-flex; align-items: center; gap: .55rem; margin-top: .8rem; border-bottom: 1px solid var(--blue); color: var(--blue); text-decoration: none; font-size: .84rem; font-weight: 700; }
    .text-link:hover { color: var(--sage-hover); border-color: var(--sage-hover); }
    .text-link::after { content: "→"; transition: transform .2s ease; }
    .text-link:hover::after { transform: translateX(4px); }

    .services-wrap { background: var(--forest); color: #F8F7F2; }
    .services-wrap .section-head p { color: #DCE4D7; }
    .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.24); }
    .horizon-section .services-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0; }
    .horizon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: 1.25rem; }
    /* Design consultations page: three equal-height cards */
    .consult-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; margin-top: 2rem; }
    .consult-card { background: var(--cream); border: 1px solid var(--sand); padding: clamp(1.5rem, 3vw, 2.2rem); display: flex; flex-direction: column; }
    .consult-card small { display: block; margin-bottom: 1rem; color: var(--sage); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
    .consult-card h3 { font: 500 1.6rem/1.1 var(--serif); margin-bottom: .8rem; color: var(--ink); }
    .consult-card p { color: var(--muted); flex-grow: 1; }
    .consult-card p:last-child { flex-grow: 0; margin-top: 1.2rem; margin-bottom: 0; }
    .consult-card a { color: var(--navy); font-weight: 600; }
    .horizon-image { overflow: hidden; align-self: center; }
    .horizon-image img { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; }
    .service { background: var(--forest); padding: clamp(1.5rem, 3vw, 2.6rem); }
    .service small { display: block; margin-bottom: 1.6rem; color: #B8C6AC; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .service h3 { font: 500 2rem/1 var(--serif); }
    .service p { color: #DCE4D7; }
    .service ul { margin: 1.4rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid rgba(255,255,255,.24); list-style: none; color: #F8F7F2; font-size: .86rem; }
    .service li + li { margin-top: .5rem; }
    .service li::before { content: "— "; color: #B8C6AC; }
    .service-note { margin-top: 1.5rem; color: #DCE4D7; font-size: .82rem; }
    .service-note a { color: #D5E0CE; text-underline-offset: 3px; }

    #texas-made { position: relative; isolation: isolate; }
    #texas-made::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--paper-deep); }
    .maker-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: 3rem; }
    .maker-intro h2 { margin-bottom: 0; font: 500 clamp(3rem, 6vw, 6rem)/.88 var(--serif); letter-spacing: -.05em; }
    .maker-intro p { color: var(--muted); }
    .maker-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; }
    .maker-card { position: relative; min-height: 500px; overflow: hidden; background: var(--paper-deep); color: #fff; }
    .maker-card:nth-child(1) { grid-column: span 4; }
    .maker-card:nth-child(2) { grid-column: span 4; transform: translateY(2.2rem); }
    .maker-card:nth-child(3) { grid-column: span 4; }
    .maker-card img { width: 100%; height: 100%; object-fit: cover; }
    .maker-card:nth-child(1) img { object-position: center 25%; }
    .maker-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(12,15,11,.88)); }
    .maker-content { position: absolute; z-index: 2; inset: auto 0 0; padding: 1.45rem; }
    .maker-content .location { margin-bottom: .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #CFDBC6; }
    .maker-content h3 { margin-bottom: .55rem; font: 500 2rem/1 var(--serif); }
    .maker-content p { margin-bottom: .85rem; font-size: .84rem; color: #e7e7df; }
    .maker-content a { display: inline-flex; min-height: 42px; align-items: center; color: #fff; font-size: .8rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .maker-caveat { margin: 4.7rem 0 0; padding: 1rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }

    .event-callout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; align-items: center; background: var(--forest); color: #F8F7F2; padding: clamp(1.6rem, 4vw, 3.4rem); }
    .event-callout .eyebrow { color: #B8C6AC; }
    .event-callout .date { font: 500 clamp(2.4rem, 5vw, 4.8rem)/.88 var(--serif); letter-spacing: -.04em; }
    .event-callout p { margin-bottom: .8rem; color: #DCE4D7; }
    .event-callout a { display: inline-flex; align-items: center; min-height: 44px; padding: .68rem .9rem; background: var(--sage); color: #FFFFFF; font-size: .82rem; font-weight: 700; text-decoration: none; }
    .event-callout a:hover { background: var(--sage-hover); }

    .disclosure { margin-top: 4rem; border: 1px solid var(--line); background: var(--paper-deep); padding: 1.2rem 1.35rem; color: var(--muted); font-size: .82rem; }
    .disclosure strong { color: var(--ink); }

    .guides { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
    .guide { display: grid; grid-template-columns: 120px 1fr; gap: 1.4rem; align-items: center; border-top: 1px solid var(--line); padding: 1.5rem 0; }
    .guide img { width: 120px; height: 120px; aspect-ratio: auto; object-fit: cover; flex: none; }
    .guide h3 { margin-bottom: .45rem; font: 500 1.75rem/1.05 var(--serif); }
    .guide p { margin-bottom: .6rem; color: var(--muted); font-size: .87rem; }
    .status { display: inline-flex; align-items: center; gap: .45rem; color: var(--blue); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
    .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

    .cta-wrap { background: var(--paper-deep); border-top: 1px solid var(--line); }
    .cta { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 0; text-align: center; }
    .cta h2 { margin-bottom: 1.2rem; font: 500 clamp(3.2rem, 7vw, 6.5rem)/.88 var(--serif); letter-spacing: -.05em; }
    .cta p { max-width: 650px; margin: 0 auto; color: var(--muted); }
    .cta .actions { justify-content: center; }

    footer { border-top: 1px solid var(--line); }
    .footer-inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 2rem 0 3rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
    .footer-brand { display: flex; align-items: flex-end; gap: 1.25rem; }
    .footer-logo { width: 132px; height: auto; flex: 0 0 auto; }
    footer p { margin: 0; color: var(--muted); font-size: .78rem; }
    footer a { color: var(--blue); font-weight: 700; }
    footer a:hover { color: var(--sage-hover); }

    @media (max-width: 900px) {
      .nav { width: min(100% - 28px, 720px); position: relative; }
      .menu-button { display: inline-flex; }
      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: -14px;
        right: -14px;
        padding: 1.2rem 20px 1.4rem;
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 16px 30px rgba(0,0,0,.08);
      }
      .nav-links.open { display: flex; }
      .nav-links a { min-height: 44px; display: flex; align-items: center; }
      .hero { grid-template-columns: 1fr; width: min(100% - 32px, 720px); gap: 3rem; padding-top: 3.2rem; }
      .hero-compact { grid-template-columns: 1fr; }
      .hero-copy { max-width: 680px; }
      .section { width: min(100% - 32px, 720px); }
      .section-head, .maker-intro { grid-template-columns: 1fr; gap: 1.4rem; }
      .path, .path:nth-child(even),
      .about-paths .path, .about-paths .path:nth-child(even) { grid-template-columns: 1fr; gap: 1.6rem; }
      .path-image, .about-paths .path-image { width: 100%; height: auto; }
      .path:nth-child(even) .path-image, .about-paths .path:nth-child(even) .path-image { order: 0; }
      .services-grid { grid-template-columns: 1fr; }
      .maker-grid { grid-template-columns: repeat(2, 1fr); }
      .maker-card, .maker-card:nth-child(1), .maker-card:nth-child(2), .maker-card:nth-child(3) { grid-column: auto; transform: none; min-height: 450px; }
      .maker-card:nth-child(3) { grid-column: 1 / -1; min-height: 420px; }
      .maker-caveat { margin-top: 2rem; }
      .event-callout { grid-template-columns: 1fr; }
      .guides { grid-template-columns: 1fr; }
    }

    @media (max-width: 600px) {
      body { font-size: 15px; }
      .nav-logo { height: 64px; }
      .nav { min-height: 84px; }
      .hero, .section, .footer-inner, .trust-strip div, .cta { width: min(100% - 28px, 520px); }
      .hero { padding-top: 2.4rem; padding-bottom: 4.5rem; }
      h1 { font-size: clamp(2.8rem, 15vw, 4rem); line-height: .9; }
      .actions { display: grid; grid-template-columns: 1fr; }
      .button { width: 100%; }
      .hero-caption { width: 100%; }
      /* Mobile: keep artwork compact — fixed height so images don't dominate the viewport */
      .hero-art img,
      .path-image img {
        width: 100% !important;
        height: 260px !important;
        aspect-ratio: auto !important;
        max-height: none !important;
        object-fit: cover !important;
      }
      /* Stacked path images: container matches the 260px image cap (no empty space) */
      .path-image, .about-paths .path-image { aspect-ratio: auto !important; height: 260px; }
      /* Guide thumbnails: force square on mobile */
      .guide img {
        width: 104px !important;
        height: 104px !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
      }
      .trust-strip div { grid-template-columns: 1fr; gap: .65rem; padding: 1rem 0; }
      .trust-strip span + span { border-left: 0; }
      .section { padding-block: 4.5rem; }
      .section-tight-top { padding-top: 2rem; }
      .section-head.stacked h2 { margin-bottom: 1.75rem; }
      .section-head.stacked p { margin-top: 0; }
      #guides .section-head { margin-bottom: 1.5rem; }
      .section-head h2, .maker-intro h2 { font-size: clamp(2.85rem, 14vw, 4rem); }
      .path { padding-block: 2.5rem; }
      .path h3 { font-size: 2.45rem; }
      .path-image img { aspect-ratio: 1; }
      .maker-grid { grid-template-columns: 1fr; gap: 1rem; }
      .maker-card, .maker-card:nth-child(1), .maker-card:nth-child(2), .maker-card:nth-child(3) { grid-column: auto; min-height: 440px; }
      .event-callout { padding: 1.5rem; }
      .guide { grid-template-columns: 104px 1fr; gap: 1rem; }
      .guide img { width: 104px; }
      .horizon-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      .consult-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      .guide h3 { font-size: 1.4rem; }
      .footer-inner { align-items: flex-start; flex-direction: column; gap: 1rem; }
      .footer-brand { align-items: center; gap: 1rem; }
      .footer-logo { width: 104px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }
  
    /* ---------- estimate form (in prototype voice) ---------- */
    .form-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
    .form-card { background: var(--white); border: 1px solid var(--line); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--shadow); }
    .form-card h3 { font: 500 1.6rem/1.1 var(--serif); margin-bottom: 1.25rem; }
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .field { margin-bottom: 1.3rem; }
    .field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .45rem; }
    .field .hint { font-weight: 400; font-size: .82rem; color: var(--muted); }
    .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select {
      width: 100%; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 3px;
      font-family: var(--sans); font-size: .95rem; background: var(--paper); color: var(--ink);
    }
    .field textarea { min-height: 130px; resize: vertical; }
    .field input:focus, .field textarea:focus { outline: 3px solid var(--sage); outline-offset: 2px; border-color: var(--sage); }
    .checks, .radios { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin-top: .5rem; }
    .checks label, .radios label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; font-size: .92rem; margin: 0; }
    .checks input, .radios input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; -webkit-appearance: none; appearance: none; background: #FFFFFF; border: 2px solid var(--line); border-radius: 3px; cursor: pointer; }
    .radios input { border-radius: 50%; }
    .checks input:checked, .radios input:checked { background: var(--sage); border-color: var(--sage); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2.5' d='M4 8.5l3 3 5-6'/%3E%3C/svg%3E"); background-size: 70%; background-position: center; background-repeat: no-repeat; }
    .radios input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23FFFFFF'/%3E%3C/svg%3E"); }
    .privacy { font-size: .82rem; color: var(--muted); margin: 1.25rem 0; }
    .form-sidebar { background: var(--forest); color: #F8F7F2; padding: clamp(1.75rem, 4vw, 2.5rem); }
    .form-sidebar h3 { color: #F8F7F2; font: 500 1.8rem/1.05 var(--serif); margin-bottom: 1.1rem; }
    .form-sidebar ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
    .form-sidebar li { margin-bottom: .8rem; color: #DCE4D7; }
    .form-sidebar li strong { color: #F8F7F2; }
    .form-sidebar .sidebar-note { font-size: .85rem; color: #B8C6AC; border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.1rem; }
    .form-sidebar a { color: #F8F7F2; font-weight: 700; }

    /* ---------- footer nav (multi-page) ---------- */
    .footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .footer-nav a { text-decoration: none; font-size: .85rem; font-weight: 600; }

    @media (max-width: 900px) {
      .form-grid { grid-template-columns: 1fr; }
      .two-col { grid-template-columns: 1fr; }
    }

    /* ---------- shop: maker tiles, spotlight, local finds ---------- */
    .maker-grid.tiles { grid-template-columns: repeat(3, 1fr); }
    .maker-grid.tiles .maker-card { grid-column: auto; transform: none; min-height: 440px; }
    .maker-ph { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 1.5rem; background: linear-gradient(160deg, var(--sage-pale), var(--paper-deep)); font: 500 4rem/1 var(--serif); color: var(--blue); opacity: 0.25; }
    .maker-card.alt .maker-ph { background: linear-gradient(160deg, #DCE7EC, #C2D4DD); color: var(--blue-deep); }
    .path-ph { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--blue), var(--blue-deep)); color: #F8F7F2; font: 500 5.5rem/1 var(--serif); letter-spacing: -.02em; }
    .finds-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
    .finds-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
    .find-name { display: block; font: 600 1.3rem/1.25 var(--serif); letter-spacing: -.01em; }
    .find-what { display: block; margin-top: .3rem; color: var(--muted); font-size: .92rem; }
    .find-what a { color: var(--blue); font-weight: 700; }
    .find-city { flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
    @media (max-width: 900px) {
      .maker-grid.tiles { grid-template-columns: repeat(2, 1fr); }
      .maker-grid.tiles .maker-card { min-height: 420px; }
    }
    @media (max-width: 600px) {
      .maker-grid.tiles { grid-template-columns: 1fr; }
      .path-ph { aspect-ratio: 1; }
      .finds-list li { flex-direction: column; gap: .35rem; }
    }


    /* ================================================================
       About (homepage) — refinements folded in from the staged About
       update, approved 2026-10-19. Formerly a page-scoped <style>
       block in index.html; lives here for production.
       ================================================================ */
    /* About update (staged 2026-10-19): page-scoped additions only.
       The site's existing components, palette, and typography are unchanged.
       Fold these into css/styles.css when this page is approved for deploy. */

    /* Eyebrow fix (this page): the base stylesheet caps every <p> inside a
       section head at 560px wide starting at the left edge, which dragged
       centered eyebrows off-center on desktop. Release the cap here. */
    .section-head .eyebrow { max-width: none; }

    /* Opening headline: generous, not oversized */
    .about-hero h1 { font-size: clamp(2.9rem, 5.6vw, 5.2rem); line-height: .96; letter-spacing: -.04em; }
    .about-hero { align-items: center; }

    /* Our Story: comfortable reading width, short paragraphs — the reading
       column is centered on the page so the section sits balanced */
    .story-section .section-head.stacked { text-align: center; }
    .story-section .section-head.stacked .eyebrow { text-align: center; }
    .story-prose { max-width: 780px; margin-inline: auto; }
    .story-prose p { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.7; margin-bottom: 1.4rem; }
    .story-prose p:last-child { margin-bottom: 0; }
    .story-lede { color: var(--ink) !important; font-size: clamp(1.2rem, 2vw, 1.45rem) !important; }
    .shared-line {
      margin-top: 2.1rem; margin-inline: auto; padding-top: 1.9rem; border-top: 1px solid var(--line);
      font: 500 clamp(1.55rem, 3vw, 2.4rem)/1.22 var(--serif); letter-spacing: -.02em; color: var(--ink);
      max-width: 780px; text-wrap: balance; text-align: center;
    }
    .shared-line span { color: var(--sage); }

    /* Final-review refinements (ChatGPT review, 2026-10-19): wider, calmer
       Our Story column on large screens, 20-30% less vertical padding,
       and the philosophy line widened to match so it stays connected */
    @media (min-width: 1100px) {
      .story-prose { max-width: 940px; }
      .shared-line { max-width: 940px; }
      .section.story-section { padding-top: 5rem; padding-bottom: 2.5rem; }
      .story-prose p { margin-bottom: 1.15rem; }
    }

    /* Story → Meet transition: the two sections share one gap instead of
       stacking both sections' full padding (mobile is the reference) */
    .section.story-section { padding-bottom: clamp(1.8rem, 4vw, 3rem); }
    .section.meet-section { padding-top: clamp(1.2rem, 3vw, 2.4rem); }
    .meet-section .section-head { margin-bottom: clamp(1.2rem, 3vw, 2.4rem); }
    /* First biography sits closer to the section heading; rows breathe less */
    .meet-section .path { padding-block: clamp(1.9rem, 4vw, 3.2rem); }
    .meet-section .path:first-child { padding-top: clamp(0.6rem, 1.5vw, 1.2rem); }
    /* What We Do cards: equal footing, links aligned along the bottom */
    .what-grid .service { display: flex; flex-direction: column; }
    .what-grid .service .card-link { margin-top: auto; padding-top: 1.1rem; }
    /* Phones/tablets: Our Story body is justified so the narrow column has
       even edges under its centered heading. Leah's decision, 2026-10-19 —
       she reviewed both looks and chose justified on mobile, overruling
       the review fallback. Desktop keeps left-aligned paragraphs. */
    @media (max-width: 900px) {
      .story-prose p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
    }
    /* Phones: Meet photos keep their full 3:2 composition instead of the
       site-wide fixed 260px crop (final review, 2026-10-19) */
    @media (max-width: 600px) {
      .about-alt .path-image { height: auto !important; aspect-ratio: 3/2 !important; }
      .about-alt .path-image img { height: 100% !important; }
    }

    /* Meet Leah / Meet Brian: alternating on desktop (image left for Leah,
       image right for Brian), stacked image-above-text on mobile */
    /* Meet photos are fluid at every width: full 3:2 frame, never distorted —
       wide slot on desktop, full-width on tablet, 3:2 crop height on phones */
    .about-alt .path-image { aspect-ratio: 3/2; }
    @media (min-width: 901px) {
      /* Modest prominence increase on larger screens (final cleanup,
         2026-10-19): 480px -> 520px wide, height follows the 3:2 ratio */
      .about-alt .path { grid-template-columns: 520px 1fr; }
      .about-alt .path:nth-child(even) { grid-template-columns: 1fr 520px; }
      .about-alt .path:nth-child(even) .path-image { order: 2; }
      .about-alt .path-image { width: 520px; height: auto; }
    }
    .together-line {
      padding: clamp(2.4rem, 4.5vw, 3.6rem) 0 0; text-align: center;
      font: 500 clamp(1.6rem, 3vw, 2.3rem)/1.25 var(--serif); letter-spacing: -.02em;
      max-width: 880px; margin: 0 auto; color: var(--ink);
    }

    /* What We Do: four cards, two columns on desktop, one on mobile */
    .what-grid { grid-template-columns: repeat(2, 1fr); }
    @media (max-width: 900px) { .what-grid { grid-template-columns: 1fr; } }
    .service .card-link {
      display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem;
      border-bottom: 1px solid #B8C6AC; color: #F8F7F2; text-decoration: none;
      font-size: .84rem; font-weight: 700;
    }
    .service .card-link::after { content: "→"; transition: transform .2s ease; }
    .service .card-link:hover { color: #D5E0CE; border-color: #D5E0CE; }
    .service .card-link:hover::after { transform: translateX(4px); }
    .service .status { color: #B8C6AC; margin-bottom: .9rem; }

    /* ——— Services page refinements (Oct 19, 2026 review) ———
       Scoped to the Services page (.svc-main / .svc-paths) so the About and
       Shop path rows keep their approved layouts. */
    /* Hero photo keeps its full 3:2 composition, centered against the copy */
    .svc-main .hero-compact .hero-art { align-items: center; }
    .svc-main .hero-compact .hero-art img { height: auto; aspect-ratio: 3 / 2; }
    /* Tighter section rhythm on this page (~22% less vertical padding) */
    .svc-main .section { padding-block: clamp(3.9rem, 7vw, 7rem); }
    .svc-main .section-tight-top { padding-top: clamp(2.3rem, 4.7vw, 4.3rem); }
    /* Service rows: ~42% photo / ~58% text; photos keep their full 3:2 */
    .svc-paths .path {
      grid-template-columns: 42fr 58fr;
      gap: clamp(2.5rem, 5vw, 4.5rem);
      padding-block: clamp(1.9rem, 3.5vw, 3.1rem);
      align-items: center;
    }
    .svc-paths .path:nth-child(even) { grid-template-columns: 58fr 42fr; }
    .svc-paths .path-image { width: 100%; height: auto; aspect-ratio: 3 / 2; }
    .svc-paths .path-image img { width: 100%; height: 100%; object-fit: cover; }
    @media (max-width: 900px) {
      .svc-paths .path, .svc-paths .path:nth-child(even) { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      /* Phones: service photos keep their 3:2 composition — no 260px crop */
      .svc-paths .path-image { aspect-ratio: 3 / 2 !important; height: auto !important; }
      .svc-paths .path-image img { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; max-height: none !important; }
      /* Phones: the Services hero photo also keeps its full 3:2 (the shared
         260px hero cap does not apply on this page) */
      .svc-main .hero-art img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important; max-height: none !important; }
    }

    /* ——— Estimate page refinements (Oct 19, 2026 review) ———
       Scoped to the Estimate page (.est-main); the form components themselves
       are the site's shared ones. */
    /* Hero photo keeps its full 3:2 composition, centered against the copy */
    .est-main .hero-compact .hero-art { align-items: center; }
    .est-main .hero-compact .hero-art img { height: auto; aspect-ratio: 3 / 2; }
    @media (max-width: 600px) {
      /* Phones: the Estimate hero photo also keeps its full 3:2 */
      .est-main .hero-art img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important; max-height: none !important; }
    }
    /* Form stands alone now (sidebar retired): one centered column */
    .est-main .form-grid { grid-template-columns: 1fr; max-width: 840px; margin-inline: auto; }
    .est-main .form-card h3 { margin-top: 2.25rem; }
    .est-main .form-card h3:first-of-type { margin-top: 0; }
    /* Generous project-description area */
    .est-main .field textarea { min-height: 180px; }
    /* Contact-method radios use a real fieldset/legend; reset its defaults
       so it matches the other field labels exactly */
    .est-main .field fieldset { border: 0; margin: 0; padding: 0; }
    .est-main .field legend { font-weight: 700; font-size: .88rem; padding: 0; margin-bottom: .45rem; }
    /* Photo upload slots: Netlify takes one file per field, so five labeled
       single-file slots sit in one tidy stack */
    .est-main .photo-slots { display: grid; gap: .55rem; margin-top: .35rem; }
    .est-main .photo-slot { display: flex; align-items: center; gap: .9rem; margin: 0; font-weight: 400; font-size: .92rem; }
    .est-main .photo-slot > span { flex: 0 0 3.8rem; font-weight: 600; color: var(--muted); }
    .est-main #photo-error { color: color-mix(in srgb, var(--gold) 62%, #000); font-weight: 600; font-size: .88rem; }
    /* Steps row on cream: hairline gaps in the site's line color, cream headings */
    .est-steps { background: var(--line); border-color: var(--line); }
    .est-steps .service h3 { color: #F8F7F2; }
    /* Quieter closing band on this page */
    .est-main .cta { padding-block: clamp(3.5rem, 7vw, 6rem); }
    .est-main .cta h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }