/* ---------- CONTACT ---------- */
  .contact{
    position:relative;
    overflow:hidden;
    background:var(--mahogany-glow);
    color:var(--sand);
    padding:var(--space-17) var(--gutter);
    border-top:1px solid rgba(242,236,223,0.08);
  }
  .contact::before,
  .contact::after{ content:none; }
  .contact-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:4.5rem;
    max-width:var(--container-max);
    margin:0 auto;
  }
  .contact-head{margin-bottom:2.4rem;}
  .contact-head .eyebrow{color:var(--gold);}
  .contact-head h2{
    font-family:var(--font-serif);
    font-weight:300;
    text-transform:uppercase;
    font-size:clamp(1.5rem,2.8vw,2.2rem);
    letter-spacing:.05em;
    line-height:1.2;
    margin-top:.9rem;
    color:var(--sand);
  }
  .contact-form{display:flex;flex-direction:column;gap:1.3rem;}
  .field{display:flex;flex-direction:column;gap:.55rem;}
  .field label{
    font-family:var(--font-display);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(242,236,223,0.6);
  }
  .field input,
  .field textarea{
    font-family:var(--font-body);
    font-weight:300;
    font-size:1rem;
    color:var(--sand);
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:14px;
    padding:1rem 1.15rem;
    backdrop-filter:blur(10px) saturate(160%);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    transition:border-color .4s var(--ease-out), background .4s ease, box-shadow .4s ease;
  }
  .field textarea{min-height:150px;resize:vertical;line-height:1.6;}
  .field input::placeholder,
  .field textarea::placeholder{color:rgba(242,236,223,0.32);}
  .field input:focus,
  .field textarea:focus{
    outline:none;
    border-color:var(--gold);
    background:rgba(255,255,255,0.1);
    box-shadow:0 0 0 3px var(--gold-dim);
  }
  .form-error{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;padding:1rem 1.1rem;border-radius:14px;
    border:1px solid rgba(224,161,140,0.35);background:rgba(224,161,140,0.07);}
  .form-error p{margin:0;font-size:.9rem;line-height:1.55;color:#E0A18C;}
  .form-error .btn{font-size:.72rem;}
  .contact-form button.btn{
    align-self:flex-start;
    margin-top:.8rem;
    cursor:pointer;
  }
  .contact-aside{
    position:relative;
    align-self:start;
    padding:2.4rem 2.2rem;
    border-radius:18px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.16);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    box-shadow:0 14px 38px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.2);
  }
  .contact-aside .eyebrow{color:var(--gold);}
  .contact-aside h3{
    font-family:var(--font-serif);
    font-weight:400;
    font-size:1.3rem;
    letter-spacing:-.005em;
    line-height:1.3;
    margin:.9rem 0 1.6rem;
    color:var(--sand);
  }
  .contact-aside .founder-rule{margin:0 0 1.6rem;}
  .contact-aside .footer-col{margin-bottom:1.8rem;}
  .contact-aside .footer-col:last-child{margin-bottom:0;}
  @media (max-width:900px){
    .contact{padding:var(--section-y-sm) var(--gutter-mobile);}
    .contact-grid{grid-template-columns:1fr;gap:3rem;}
  }
  /* ---------- PROJECTS: FILTERS + RICH CARDS ---------- */
  .project-filters{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-bottom:1.6rem;
  }
  /* Filter chips follow the atelier button family: hairline rectangle,
     tracked caps, solid ink when active. */
  .filter-btn{
    font-family:var(--font-display);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.22em;
    text-indent:.22em;
    text-transform:uppercase;
    color:var(--mahogany-70);
    background:transparent;
    border:1px solid rgba(26,20,19,0.22);
    border-radius:2px;
    padding:.75rem 1.4rem;
    cursor:pointer;
    transition:color .35s var(--ease-out), background .35s var(--ease-out), border-color .35s var(--ease-out);
  }
  .filter-btn:hover{color:var(--mahogany);border-color:var(--gold);}
  .filter-btn.is-active{background:var(--mahogany);color:var(--sand);border-color:var(--mahogany);}
  .filter-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  .project-card.is-hidden{display:none;}
  .project-meta{
    display:block;
    font-family:var(--font-display);
    font-size:.66rem;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(242,236,223,0.82);
    margin-top:.55rem;
  }
  .status-badge{
    position:absolute;
    top:1.2rem;left:1.2rem;
    z-index:2;
    font-family:var(--font-display);
    font-size:.6rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--sand);
    padding:.45rem .8rem;
    border-radius:999px;
    background:rgba(26,20,19,0.42);
    border:1px solid rgba(255,255,255,0.28);
    backdrop-filter:blur(10px) saturate(160%);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
  }
  .project-card.feature{
    height:560px;
    margin-bottom:3.2rem;
  }
  .project-card.feature .project-label{left:2.4rem;bottom:2.2rem;}
  .project-card.feature .project-label h3{font-size:2rem;}
  .project-card.feature .project-meta{font-size:.74rem;}
  /* ---------- PROJECT DETAIL PAGE ---------- */
  .project-hero{
    position:relative;
    height:82svh;
    min-height:560px;
    width:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
  }
  .project-hero img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
  }
  .project-hero::after{
    content:"";
    position:absolute;inset:0;
    background:
      linear-gradient(100deg, rgba(26,20,19,0.72) 0%, rgba(26,20,19,0.45) 45%, rgba(26,20,19,0.15) 75%),
      radial-gradient(120% 100% at 30% 60%, rgba(26,20,19,0.25) 0%, rgba(26,20,19,0.7) 100%);
  }
  .project-hero-inner{
    position:relative;
    z-index:1;
    padding:0 var(--gutter);
    max-width:900px;
    color:var(--sand);
  }
  /* About + Custom Homes — title sits lower in the band */
  .project-hero.hero-lower{
    align-items:flex-end;
  }
  .project-hero.hero-lower .project-hero-inner{
    padding:0 var(--gutter) clamp(3rem,7vh,5.5rem);
  }
  .project-hero .eyebrow{color:var(--sand-dim);opacity:.9;}
  .project-hero h1{
    font-family:var(--font-serif);
    font-weight:300;
    text-transform:uppercase;
    font-size:clamp(2rem,5vw,3.4rem);
    letter-spacing:.04em;
    line-height:1.1;
    margin:.7rem 0 1.1rem;
    text-shadow:0 4px 30px rgba(0,0,0,0.4);
  }
  .project-hero .project-meta{
    position:static;
    display:inline-block;
    margin-top:0;
    font-size:.82rem;
    letter-spacing:.14em;
    color:rgba(242,236,223,0.88);
  }
  .spec-bar{
    background:var(--sand);
    color:var(--mahogany);
    border-bottom:1px solid var(--sand-dim);
  }
  .spec-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-4);
    max-width:1100px;
    margin:0 auto;
    padding:3.2rem var(--gutter);
  }
  .spec{display:flex;flex-direction:column;gap:.5rem;}
  .spec dt{
    font-family:var(--font-display);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .spec dd{
    font-family:var(--font-serif);
    font-size:1.15rem;
    font-weight:400;
    color:var(--mahogany);
  }
  .gallery{background:var(--sand);color:var(--mahogany);}
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.6rem;
  }
  .gallery-item{
    position:relative;
    overflow:hidden;
    height:360px;
  }
  .gallery-item img{
    width:100%;height:100%;object-fit:cover;
    transform:scale(1.05);
    transition:transform 1s var(--ease-out);
  }
  .gallery-item:hover img{transform:scale(1);}
  .gallery-item.wide{grid-column:span 2;}
  .cta-band .cta-actions{
    position:relative;
    z-index:1;
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
  }
  @media (max-width:900px){
    .project-card.feature{height:460px;}
    .project-card.feature .project-label h3{font-size:1.6rem;}
    .spec-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem;padding:2.4rem var(--gutter-mobile);}
    .gallery-grid{grid-template-columns:1fr;}
    .gallery-item.wide{grid-column:span 1;}
    .gallery-item{height:280px;}
  }
  /* ---------- SUBDIVISIONS ---------- */
  /* Fallback backdrop so imageless / still-loading cards keep readable labels */
  .projects-grid .project-card{background:var(--mahogany);}
  .status-badge.available{color:#d3e5c6;}
  .status-badge.sold-out{color:rgba(242,236,223,0.72);background:rgba(26,20,19,0.6);}
  /* Gallery loading / empty states */
  .gallery-empty{
    font-family:var(--font-display);
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--mahogany-70);
    padding:2rem 0;
  }
  /* Lot list */
  .lots{background:var(--sand);color:var(--mahogany);}
  /* Same chapter-ledger treatment as .section-head */
  .lots-head{
    max-width:1100px;
    margin:0 auto 2.6rem;
    padding-top:1.5rem;
    border-top:1px solid rgba(26,20,19,0.16);
  }
  .lots-head .eyebrow{
    color:var(--gold);
    display:flex;
    align-items:baseline;
    gap:1.1rem;
  }
  .lots-head .eyebrow::before{
    counter-increment:cg-section;
    content:counter(cg-section, decimal-leading-zero);
    opacity:.58;
  }
  .lots-head h2{
    font-family:var(--font-serif);
    font-weight:300;
    text-transform:uppercase;
    font-size:var(--text-3xl);
    letter-spacing:.04em;
    line-height:1.12;
    margin-top:1rem;
  }
  .lot-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.4rem;
    max-width:1100px;
    margin:0 auto;
  }
  .lot{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    padding:1.8rem 1.8rem;
    border-radius:16px;
    background:var(--card);
    border:1px solid rgba(26,20,19,0.12);
    box-shadow:0 14px 30px rgba(26,20,19,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .lot .lot-name{
    font-family:var(--font-serif);
    font-weight:400;
    font-size:1.25rem;
    color:var(--mahogany);
  }
  .lot .lot-size{
    font-family:var(--font-display);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .lot .lot-status{
    font-family:var(--font-display);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-top:.4rem;
  }
  .lot.available .lot-status{color:var(--green-light);}
  .lot.sold{opacity:.6;}
  .lot.sold .lot-status{color:var(--mahogany-70);}
  .lot .lot-detail{
    font-size:.82rem;
    font-weight:300;
    line-height:1.45;
    color:var(--mahogany-70);
    margin-top:.15rem;
  }
  /* --- Lot map --- */
  .lot-map-wrap{
    max-width:1100px;
    margin:0 auto var(--space-6);
  }
  .lot-map{
    width:100%;
    height:auto;
    display:block;
  }
  .lot-parcel{
    fill:rgba(185,151,91,0.08);
    stroke:var(--gold);
    stroke-width:1.5;
    transition:fill var(--duration-fast) var(--ease-out),
               stroke-width var(--duration-fast) var(--ease-out);
  }
  .lot-parcel-featured{
    fill:rgba(185,151,91,0.16);
    stroke-width:2;
  }
  .lot-parcel-label{
    fill:var(--mahogany);
    font-family:var(--font-serif);
    font-size:16px;
    font-weight:400;
  }
  .lot-parcel-sub{
    fill:var(--gold);
    font-family:var(--font-display);
    font-size:10px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .lot-hotspot{cursor:pointer;outline:none;}
  /* Sold parcels on the site plan: muted fill, dashed edge, dimmed labels. */
  .lot-hotspot-sold .lot-parcel{fill:rgba(26,20,19,0.06);stroke:var(--mahogany-70);stroke-dasharray:5 4;}
  .lot-hotspot-sold .lot-parcel-label{fill:var(--mahogany-70);}
  .lot-hotspot-sold .lot-parcel-sub{fill:var(--mahogany-70);}
  .lot-hotspot-sold:hover .lot-parcel,
  .lot-hotspot-sold.is-active .lot-parcel{fill:rgba(26,20,19,0.12);}
  .lot-hotspot:hover .lot-parcel,
  .lot-hotspot:focus-visible .lot-parcel,
  .lot-hotspot.is-active .lot-parcel{
    fill:rgba(185,151,91,0.22);
    stroke-width:2.5;
  }
  .lot-hotspot:focus-visible .lot-parcel{
    stroke:var(--mahogany);
    stroke-width:3;
  }
  .lot.is-highlighted{
    outline:2px solid var(--gold);
    outline-offset:2px;
    box-shadow:0 14px 30px rgba(26,20,19,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .lot-map-note{
    text-align:center;
    font-size:.72rem;
    font-weight:300;
    color:var(--mahogany-70);
    margin-top:var(--space-2);
  }
  .lot-map-note a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
  @media (prefers-reduced-motion:reduce){
    .lot-parcel{transition:none;}
  }
  /* Hero behind the page title — reuses .project-hero; dark fallback when a
     subdivision has no photos yet (e.g. McLain) */
  .project-hero{background:var(--mahogany-glow);}
  .project-hero .project-meta{margin-top:1.4rem;}
  @media (max-width:900px){
    .lot-grid{grid-template-columns:1fr;}
  }
  /* ---------- Cinematic hero motion ----------
     (The hero image's entrance + gentle parallax now live in the SITE-WIDE
     MOTION block at the end of this file, alongside the other image motion.) */
  .project-hero .eyebrow,
  .project-hero h1,
  .project-hero .project-meta,
  .project-hero .hero-sub,
  .project-hero .hero-actions{
    opacity:0;
    transform:translateY(28px);
    animation:heroRise 1.05s var(--ease-out) forwards;
  }
  .project-hero .eyebrow{animation-delay:.05s;}
  .project-hero h1{animation-delay:.16s;}
  .project-hero .project-meta{animation-delay:.3s;}
  .project-hero .hero-sub{animation-delay:.3s;}
  .project-hero .hero-actions{animation-delay:.46s;}
  @keyframes heroRise{ to{opacity:1;transform:none;} }
  .project-hero .hero-sub{
    display:block;
    max-width:540px;
    margin-top:1.3rem;
    font-size:1.04rem;
    font-weight:300;
    line-height:1.6;
    color:rgba(242,236,223,0.95);
    text-shadow:0 2px 18px rgba(0,0,0,0.45);
  }
  .project-hero .hero-actions{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:2.1rem;
  }
  /* ---------- Stats band ---------- */
  .stats{
    background:var(--sand);
    color:var(--mahogany);
    border-top:1px solid var(--sand-dim);
    border-bottom:1px solid var(--sand-dim);
  }
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    max-width:1150px;
    margin:0 auto;
    padding:4.6rem var(--gutter);
    gap:2.4rem;
  }
  .stat{position:relative;padding-left:1.5rem;}
  .stat::before{
    content:"";
    position:absolute;left:0;top:.35rem;bottom:.9rem;
    width:2px;
    background:var(--gold);
    opacity:.55;
  }
  .stat .stat-value{
    display:block;
    font-family:var(--font-serif);
    font-weight:300;
    font-size:clamp(1.9rem,3.4vw,2.9rem);
    line-height:1;
    letter-spacing:-.01em;
    color:var(--mahogany);
  }
  .stat .stat-label{
    display:block;
    margin-top:.95rem;
    font-family:var(--font-display);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--mahogany-70);
  }
  /* ---------- Timeline (process) ---------- */
  .timeline-section{
    position:relative;
    overflow:hidden;
    background:radial-gradient(120% 140% at 15% 0%, #FBF6EA 0%, var(--sand-dim) 65%);
    color:var(--mahogany);
    padding:var(--section-y) var(--gutter);
  }
  .timeline-section::before{
    content:"";
    position:absolute;
    top:-30%;right:-10%;
    width:55%;height:150%;
    background:radial-gradient(circle, var(--gold-dim) 0%, rgba(185,151,91,0) 70%);
    filter:blur(60px);
    pointer-events:none;
  }
  .timeline-track{
    position:relative;
    z-index:1;
    max-width:860px;
    margin:0 auto;
  }
  .timeline-step{
    position:relative;
    display:grid;
    grid-template-columns:5.5rem 1fr;
    gap:2rem;
    padding:2.6rem 0;
    border-top:1px solid rgba(26,20,19,0.12);
  }
  .timeline-step:first-child{border-top:none;padding-top:0;}
  .timeline-num{
    font-family:var(--font-display);
    font-weight:700;
    font-size:2.7rem;
    line-height:.9;
    color:rgba(26,20,19,0.13);
    transition:color .5s var(--ease-out);
  }
  @media (hover:hover){ .timeline-step:hover .timeline-num{color:var(--gold);} }
  .timeline-body h3{
    font-family:var(--font-serif);
    font-weight:400;
    font-size:1.5rem;
    line-height:1.25;
    color:var(--mahogany);
    margin-bottom:.7rem;
  }
  .timeline-body .step-tag{
    display:inline-block;
    font-family:var(--font-display);
    font-size:.64rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:.7rem;
  }
  .timeline-body p{
    font-size:.99rem;
    color:rgba(26,20,19,0.7);
    max-width:560px;
  }
  /* ---------- Pull quote ---------- */
  .pull-quote{
    position:relative;
    overflow:hidden;
    background:var(--mahogany-glow);
    color:var(--sand);
    text-align:center;
    padding:var(--space-17) var(--gutter);
    border-top:1px solid rgba(242,236,223,0.08);
  }
  .pull-quote::before{
    content:"";
    position:absolute;
    top:-35%;left:50%;
    transform:translateX(-50%);
    width:60%;height:170%;
    background:radial-gradient(circle, var(--gold-dim) 0%, rgba(185,151,91,0) 70%);
    filter:blur(60px);
    pointer-events:none;
  }
  .pull-quote-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;}
  .pull-quote .quote-mark{text-align:center;margin:0 auto -.5rem;}
  .pull-quote blockquote{
    font-family:var(--font-serif);
    font-weight:300;
    font-size:clamp(1.5rem,3vw,2.5rem);
    line-height:1.32;
    letter-spacing:.01em;
    color:var(--sand);
    margin:1rem auto 1.8rem;
  }
  .pull-quote .attribution{
    font-family:var(--font-display);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .pull-quote .attribution span{
    display:block;
    margin-top:.4rem;
    font-weight:400;
    letter-spacing:.14em;
    color:rgba(242,236,223,0.55);
  }
  /* ---------- Locations (about) ---------- */
  .locations{background:var(--sand);color:var(--mahogany);}
  .locations-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0 3rem;
    max-width:1000px;
    margin:0 auto;
  }
  .location{
    position:relative;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    padding:1.35rem .2rem;
    border-bottom:1px solid rgba(26,20,19,0.12);
    font-family:var(--font-serif);
    font-weight:400;
    font-size:1.35rem;
    color:var(--mahogany);
    transition:padding-left .45s var(--ease-out), color .35s ease;
  }
  .location .loc-state{
    font-family:var(--font-display);
    font-size:.64rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .location:hover{padding-left:.7rem;color:var(--gold);}
  /* ---------- Next steps (contact) — icon-led step sequence ---------- */
  /* Vertical rhythm comes from the wrapping .section-inner (var(--section-y));
     the section itself no longer adds a second layer of padding (that doubled
     padding was the large void above the heading). */
  .next-steps{
    position:relative;
    overflow:hidden;
    background:radial-gradient(120% 140% at 85% 0%, #FBF6EA 0%, var(--sand-dim) 65%);
    color:var(--mahogany);
  }
  .next-steps .section-head{margin-bottom:var(--space-4);}
  .step-grid{
    --gap:var(--space-5);      /* column gap + connector reach */
    --badge:60px;              /* icon badge diameter */
    --badge-strip:44px;        /* empty band above cards for badge + connector */
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--gap);
    max-width:1120px;
    margin:0 auto;
  }
  .step-card{
    position:relative;
    margin-top:var(--badge-strip);
    padding:2.4rem 1.9rem 2.2rem;
    border-radius:18px;
    background:var(--card);
    border:1px solid rgba(26,20,19,0.1);
    box-shadow:0 16px 34px rgba(26,20,19,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
    text-align:center;
  }
  /* Card transition (specific enough to extend the shared .r-item reveal
     transition so the hover lift animates too). */
  .next-steps .step-grid .step-card{
    transition:opacity var(--duration-slow) var(--ease-out),
               translate var(--duration-slow) var(--ease-out),
               transform var(--duration-base) var(--ease-out),
               box-shadow var(--duration-base) var(--ease-out);
  }
  /* Icon badge, centered, straddling the top edge of each card. */
  .step-badge{
    position:absolute;
    top:calc(var(--badge-strip) * -1);
    left:50%;
    transform:translateX(-50%);
    width:var(--badge);height:var(--badge);
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--card);
    border:1px solid rgba(185,151,91,0.45);
    color:var(--gold);
    box-shadow:0 8px 20px rgba(26,20,19,0.08);
    z-index:2;
    transition:transform var(--duration-base) var(--ease-out),
               background var(--duration-base) var(--ease-out),
               color var(--duration-base) var(--ease-out),
               border-color var(--duration-base) var(--ease-out);
  }
  .step-badge svg{width:26px;height:26px;display:block;}
  /* Connector between consecutive badges: faint track (::before) + gold fill
     (::after). Horizontal on desktop; length = own card width + the grid gap,
     so it always reaches the next badge regardless of card size. */
  .step-card::before,
  .step-card::after{
    content:"";
    position:absolute;
    top:calc(var(--badge-strip) * -1 + var(--badge) / 2 - 1px);
    left:50%;
    width:calc(100% + var(--gap));
    height:2px;
    z-index:1;
  }
  .step-card::before{background:rgba(26,20,19,0.14);}
  .step-card::after{background:var(--gold);transform-origin:left center;}
  .step-card:last-child::before,
  .step-card:last-child::after{display:none;}
  /* Gold fill draws on reveal (progressive enhancement — full when no JS). */
  .js .step-card::after{transform:scaleX(0);transition:transform var(--duration-slow) var(--ease-out);}
  .js .step-grid.in .step-card::after{transform:scaleX(1);}
  .js .step-grid.in .step-card:nth-child(1)::after{transition-delay:.22s;}
  .js .step-grid.in .step-card:nth-child(2)::after{transition-delay:.42s;}
  /* Badge scale-in on reveal (icon lands, then the connector draws). */
  .js [data-reveal] .step-badge{opacity:0;transform:translateX(-50%) scale(.6);}
  .js [data-reveal].in .step-badge{opacity:1;transform:translateX(-50%) scale(1);
    transition:opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);}
  .js [data-reveal].in .step-card:nth-child(1) .step-badge{transition-delay:.08s;}
  .js [data-reveal].in .step-card:nth-child(2) .step-badge{transition-delay:.22s;}
  .js [data-reveal].in .step-card:nth-child(3) .step-badge{transition-delay:.36s;}
  .step-card .step-num{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:.72rem;
    letter-spacing:.2em;
    color:var(--gold);
    margin-bottom:.9rem;
  }
  .step-card h3{
    font-family:var(--font-serif);
    font-weight:400;
    font-size:1.3rem;
    color:var(--mahogany);
    margin-bottom:.6rem;
  }
  .step-card p{font-size:.95rem;color:rgba(26,20,19,0.68);}
  /* Hover / focus: lift the card and fill its badge (placed after the reveal
     rules so it wins at equal specificity while hovering). */
  .step-grid .step-card:hover,
  .step-grid .step-card:focus-within{
    transform:translateY(-6px);
    box-shadow:0 26px 48px rgba(26,20,19,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .step-grid .step-card:hover .step-badge,
  .step-grid .step-card:focus-within .step-badge{
    transform:translateX(-50%) scale(1.08);
    background:var(--gold);
    border-color:var(--gold);
    color:var(--card);
  }
  /* Reduced motion: keep the composition, drop the animation. Final states
     (badge in, connector drawn) come from .in; here we only kill transitions
     so nothing animates. Defined in pages.css so it wins over the rules above. */
  @media (prefers-reduced-motion: reduce){
    .step-grid .step-card,
    .js .step-card::before,
    .js .step-card::after,
    .js [data-reveal] .step-badge{transition:none;}
  }
  /* ---------- Contact enhancements ---------- */
  .field select{
    font-family:var(--font-body);
    font-weight:300;
    font-size:1rem;
    color:var(--sand);
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:14px;
    padding:1rem 1.15rem;
    backdrop-filter:blur(10px) saturate(160%);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    transition:border-color .4s var(--ease-out), background .4s ease, box-shadow .4s ease;
    cursor:pointer;
  }
  .field select:focus{
    outline:none;
    border-color:var(--gold);
    background:rgba(255,255,255,0.1);
    box-shadow:0 0 0 3px var(--gold-dim);
  }
  .field select option{color:#1A1413;background:#F2ECDF;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;}
  .contact-aside address{
    font-style:normal;
    font-size:.92rem;
    line-height:1.7;
    color:rgba(242,236,223,0.88);
  }
  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:2.6rem var(--space-4);padding:3.4rem var(--gutter-mobile);}
    .timeline-section{padding:var(--space-10) var(--gutter-mobile);}
    .timeline-step{grid-template-columns:3.6rem 1fr;gap:1.2rem;padding:2rem 0;}
    .timeline-num{font-size:2rem;}
    .pull-quote{padding:var(--section-y-sm) var(--gutter-mobile);}
    .locations-grid{grid-template-columns:1fr;gap:0;}
    /* Stacked layout becomes a left-rail stepper: badge + vertical connector
       sit in a left gutter, copy to the right — the line never crosses text. */
    .step-grid{
      grid-template-columns:1fr;
      --gap:var(--space-6);
      --rail:64px;
    }
    .step-card{
      margin-top:0;
      text-align:left;
      padding:1.9rem 1.8rem 1.9rem calc(var(--rail) + .6rem);
    }
    .step-badge{
      top:1.9rem;
      left:calc(var(--rail) / 2);
      transform:translate(-50%,0);
    }
    .step-card::before,
    .step-card::after{
      top:calc(1.9rem + var(--badge) / 2 - 1px);
      left:calc(var(--rail) / 2);
      width:2px;
      height:calc(100% + var(--gap));
      transform:translateX(-50%);
      transform-origin:top center;
    }
    .js .step-card::after{transform:translateX(-50%) scaleY(0);}
    .js .step-grid.in .step-card::after{transform:translateX(-50%) scaleY(1);}
    .field-row{grid-template-columns:1fr;}
  }
  /* ============================================================
     CONTACT PAGE — editorial layout (page-scoped, contact-* names)
     Layered masthead + asymmetric form/aside composition + accent
     band. Built entirely on existing tokens, buttons, and reveals.
     ============================================================ */
  .contact-inner{
    position:relative;
    z-index:1;
    max-width:1180px;
    margin:0 auto;
  }
  /* ---------- Editorial masthead ---------- */
  .contact-masthead{
    display:grid;
    grid-template-columns:1.4fr .85fr;
    gap:3.5rem;
    align-items:end;
    margin-bottom:3.6rem;
    padding-bottom:3rem;
    border-bottom:1px solid rgba(242,236,223,0.12);
  }
  .contact-masthead-lead .eyebrow{color:var(--gold);}
  .contact-masthead-lead h2{
    font-family:var(--font-serif);
    font-weight:300;
    text-transform:uppercase;
    font-size:clamp(2rem,4vw,3.2rem);
    letter-spacing:.03em;
    line-height:1.08;
    margin-top:1rem;
    color:var(--sand);
  }
  .contact-masthead-note{padding-bottom:.4rem;}
  .contact-masthead-index{
    display:block;
    font-family:var(--font-display);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:1rem;
  }
  .contact-masthead-note p{
    font-size:1rem;
    font-weight:300;
    color:rgba(242,236,223,0.72);
    max-width:340px;
  }
  /* ---------- Asymmetric layout ---------- */
  .contact-layout{
    display:grid;
    grid-template-columns:1.4fr .85fr;
    gap:3.5rem;
    align-items:start;
  }
  /* ---------- Form panel (inset, sectioned) ---------- */
  .contact-form-wrap{
    position:relative;
    padding:3rem 3rem 3.2rem;
    border-radius:22px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.14);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    box-shadow:0 24px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.14);
  }
  .contact-form-head{
    display:flex;
    align-items:flex-start;
    gap:1.4rem;
    margin-bottom:2.4rem;
    padding-bottom:2rem;
    border-bottom:1px solid rgba(242,236,223,0.12);
  }
  .contact-step-index{
    font-family:var(--font-display);
    font-weight:700;
    font-size:2.7rem;
    line-height:.8;
    color:rgba(185,151,91,0.38);
  }
  .contact-form-head .eyebrow{color:var(--gold);}
  .contact-form-head h3{
    font-family:var(--font-serif);
    font-weight:400;
    font-size:1.35rem;
    letter-spacing:-.005em;
    color:var(--sand);
    margin-top:.35rem;
  }
  /* Grouped, hairline-divided fieldsets */
  .form-group{
    display:flex;
    flex-direction:column;
    gap:1.1rem;
    padding-top:1.9rem;
    border-top:1px solid rgba(242,236,223,0.1);
  }
  .form-group:first-of-type{padding-top:0;border-top:none;}
  .form-group-label{
    display:flex;
    align-items:center;
    gap:.75rem;
    font-family:var(--font-display);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(242,236,223,0.5);
  }
  .form-group-label span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.7rem;height:1.7rem;
    border-radius:50%;
    border:1px solid rgba(185,151,91,0.5);
    color:var(--gold);
    font-size:.62rem;
    letter-spacing:.04em;
  }
  /* ---------- Aside: sticky, media-topped, indexed rows ---------- */
  .contact-aside{
    position:sticky;
    top:32px;
    padding:0;
    overflow:hidden;
  }
  .contact-aside-media{
    position:relative;
    height:210px;
    overflow:hidden;
  }
  .contact-aside-media img{
    width:100%;height:100%;
    object-fit:cover;
    transform:scale(1.06);
    transition:transform 1.3s var(--ease-out);
  }
  .contact-aside:hover .contact-aside-media img{transform:scale(1);}
  .contact-aside-media::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(26,20,19,0.05) 40%, rgba(26,20,19,0.72) 100%);
  }
  .contact-aside-tag{
    position:absolute;
    left:1.7rem;bottom:1.3rem;
    z-index:1;
    font-family:var(--font-display);
    font-size:.64rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--sand-dim);
  }
  .contact-aside-body{padding:2.3rem 2.2rem 2.4rem;}
  .contact-detail{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:1.1rem;
    align-items:start;
    padding-top:1.5rem;
    margin-top:1.5rem;
    border-top:1px solid rgba(242,236,223,0.1);
  }
  .contact-detail:first-of-type{padding-top:0;margin-top:0;border-top:none;}
  .contact-detail-num{
    font-family:var(--font-display);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.14em;
    color:var(--gold);
    padding-top:.15rem;
  }
  .contact-detail .footer-col{margin-bottom:0;}
  /* ---------- Contact page responsive ---------- */
  @media (max-width:900px){
    .contact-masthead{
      grid-template-columns:1fr;
      gap:1.4rem;
      align-items:start;
      margin-bottom:2.6rem;
      padding-bottom:2.2rem;
    }
    .contact-layout{grid-template-columns:1fr;gap:2.6rem;}
    .contact-form-wrap{padding:2rem 1.6rem 2.2rem;border-radius:18px;}
    .contact-form-head{gap:1.1rem;margin-bottom:1.9rem;padding-bottom:1.6rem;}
    .contact-step-index{font-size:2.2rem;}
    .contact-aside{position:static;}
    .contact-aside-media{height:180px;}
    /* Full-width, easy-to-hit submit on phones */
    .contact-form button.btn{align-self:stretch;width:100%;min-height:52px;}
  }
  /* ---------- Deep charcoal box treatment (contact page) ---------- */
  .contact-form-wrap,
  .contact-aside{
    background:#0E0A09;
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .field input,
  .field textarea,
  .field select{
    background:#0A0706;
    border-color:rgba(255,255,255,0.10);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .field input:focus,
  .field textarea:focus,
  .field select:focus{
    background:#161110;
    border-color:var(--gold);
  }
/* ============================================================
   EXPANDABLE CARDS (Process phases + About differences)
   Tap/click a card to open an enlarged detail sheet.
   ============================================================ */
[data-expand]{cursor:pointer;}
[data-expand]:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px;}
.expand-hint{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:1.1rem;
  font-family:var(--font-display);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  transition:gap .35s var(--ease-expo);
}
.expand-hint i{
  font-style:normal;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;height:20px;
  border:1px solid var(--gold);
  border-radius:50%;
  font-size:.85rem;
  line-height:1;
  transition:transform .35s var(--ease-expo), background .35s ease, color .35s ease;
}
@media (hover:hover){
  [data-expand]:hover .expand-hint{gap:.7rem;}
  [data-expand]:hover .expand-hint i{transform:rotate(90deg);background:var(--gold);color:var(--card);}
}
/* Overlay + sheet */
.expand-overlay{
  position:fixed;inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 4vw;
  background:rgba(14,10,9,0.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-base) var(--ease), visibility var(--dur-base);
}
.expand-overlay.open{opacity:1;visibility:visible;pointer-events:auto;}
.expand-sheet{
  position:relative;
  width:min(720px, 100%);
  max-height:88vh;
  overflow-y:auto;
  background:var(--card);
  color:var(--mahogany);
  border-radius:20px;
  padding:3.2rem 3.4rem 3rem;
  box-shadow:0 40px 90px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
  transform:translateY(26px) scale(.97);
  transition:transform .55s var(--ease-expo);
}
.expand-overlay.open .expand-sheet{transform:none;}
.expand-close{
  position:sticky;
  top:0;
  float:right;
  margin:-1.6rem -1.8rem 0 0;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  background:var(--mahogany);
  color:var(--sand);
  border:none;
  border-radius:50%;
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  z-index:2;
  transition:transform .3s var(--ease-expo), background .3s ease;
}
.expand-close:hover{transform:rotate(90deg);}
.expand-close:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.expand-tag{
  display:block;
  font-family:var(--font-display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.9rem;
}
.expand-content h3{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.2;
  color:var(--mahogany);
  margin-bottom:1.1rem;
  max-width:520px;
}
.expand-rule{width:40px;height:1px;background:var(--gold);margin-bottom:1.6rem;}
.expand-content h4{
  font-family:var(--font-display);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mahogany);
  margin:1.4rem 0 .45rem;
}
.expand-content p{
  font-size:.96rem;
  line-height:1.65;
  color:rgba(26,20,19,0.72);
  max-width:560px;
}
.expand-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem 2rem;
  margin:1.9rem 0 .4rem;
  padding:1.5rem 0 0;
  border-top:1px solid rgba(26,20,19,0.12);
}
.expand-facts > div{display:flex;flex-direction:column;gap:.25rem;}
.expand-facts dt{
  font-family:var(--font-display);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}
.expand-facts dd{
  font-family:var(--font-serif);
  font-size:1.02rem;
  color:var(--mahogany);
}
.expand-content .btn{margin-top:1.8rem;}
/* Phones: each phase is a two-pane card (pages.js). "More detail" or a
   right-to-left swipe slides the detail in; the pager is a native
   scroll-snap strip, and --p (0 summary .. 1 detail) drives the fade. */
@media (max-width:767px){
  /* min-width:0 keeps the two-pane strip from widening the text column
     past the screen (a grid item otherwise sizes to fit both panes). */
  .timeline-body{min-width:0;}
  /* Chrome's scroll anchoring would drag the page while a card grows or
     shrinks; the reader's place is kept by the card itself. */
  .timeline-section{overflow-anchor:none;}
  .phase-pager{
    width:100%;
    min-width:0;
    display:flex;
    align-items:flex-start;
    gap:2rem;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .phase-pager::-webkit-scrollbar{display:none;}
  .phase-pager.is-sliding{scroll-snap-type:none;}
  .phase-pane{
    flex:0 0 100%;
    min-width:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .phase-summary{
    opacity:calc(1 - var(--p,0) * .75);
    transform:translateX(calc(var(--p,0) * 6%));
  }
  .phase-detail{opacity:calc(.25 + var(--p,0) * .75);}
  .phase-detail.expand-content{padding:0;}
  .phase-detail .expand-tag{margin-bottom:0;}
  .phase-detail h3,
  .phase-detail .expand-rule{display:none;}
  .phase-detail h4{font-size:.64rem;margin:1.15rem 0 .35rem;}
  .phase-detail p{font-size:.92rem;line-height:1.6;}
  .phase-detail .expand-facts{
    display:block;
    margin:1.3rem 0 0;
    padding:0;
    border-top:1px solid rgba(26,20,19,0.12);
  }
  .phase-detail .expand-facts > div{
    flex-direction:row;
    justify-content:space-between;
    align-items:baseline;
    gap:1rem;
    padding:.65rem 0;
    border-bottom:1px solid rgba(26,20,19,0.08);
  }
  .phase-detail .expand-facts dt{font-size:.58rem;flex:none;}
  .phase-detail .expand-facts dd{font-size:.95rem;text-align:right;}
  .phase-detail .btn{display:block;width:100%;text-align:center;margin-top:1.3rem;padding-left:1rem;padding-right:1rem;letter-spacing:.14em;white-space:nowrap;}
  /* "Back" mirrors "More detail" */
  .phase-back{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    margin:0 0 1rem;
    padding:0;
    background:none;
    border:0;
    font-family:var(--font-display);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold);
    cursor:pointer;
  }
  .phase-back i,
  .phase-summary .expand-hint i{
    display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:20px;
    border:1px solid var(--gold);
    border-radius:50%;
    font-style:normal;
  }
  .phase-back i svg{transform:scaleX(-1);}
  .phase-back:focus-visible,
  .phase-summary .expand-hint:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px;}
  .phase-summary .expand-hint{margin-top:1.1rem;}
  /* Two-page indicator */
  .phase-dots{display:flex;gap:6px;margin-top:1.2rem;}
  .phase-dots span{
    width:14px;height:2px;border-radius:2px;
    background:rgba(26,20,19,0.16);
    transition:width .45s var(--ease-expo), background .45s ease;
  }
  .timeline-step:not(.is-open) .phase-dots span:first-child,
  .timeline-step.is-open .phase-dots span:last-child{width:28px;background:var(--gold);}
  .timeline-step.is-open .timeline-num{color:var(--gold);}
}
@media (max-width:767px) and (prefers-reduced-motion: reduce){
  .phase-summary{transform:none;}
  .phase-dots span{transition:none;}
}
/* ============================================================
   LOCATIONS MAP (About) — stylized tri-state map in the site
   palette; towns light up a gold pulsing marker when touched.
   ============================================================ */
/* Where We Build — editorial two-column: intro + list + CTA on the left,
   the interactive map on the right; tighter vertical rhythm, no dead space. */
.locations .section-inner{padding:5.5rem var(--gutter);}
.locations-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,5vw,5.5rem);
  align-items:center;
  max-width:var(--container-wide);
  margin:0 auto;
}
.locations-intro{max-width:540px;}
.locations-intro .eyebrow{display:inline-block;margin-bottom:1.1rem;color:var(--gold);}
.locations-intro h2{
  font-family:var(--font-serif);
  font-weight:300;
  text-transform:uppercase;
  font-size:clamp(1.75rem,3vw,2.6rem);
  letter-spacing:.04em;
  line-height:1.14;
  color:var(--mahogany);
}
.locations-intro .lede{
  margin-top:1.15rem;
  max-width:440px;
  font-size:1.02rem;
  font-weight:300;
  color:var(--mahogany-70);
}
.locations-wrap .locations-grid{
  grid-template-columns:1fr;
  gap:0;
  max-width:none;
  margin:2.4rem 0 0;
  border-top:1px solid rgba(26,20,19,0.12);
}
.locations-cta{display:inline-flex;width:auto;margin-top:2rem;}
.location[data-town]{cursor:pointer;}
.location[data-town]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.location.active{padding-left:.7rem;color:var(--gold);}
.location.active .loc-state{color:var(--mahogany-70);}
.loc-map{
  position:relative;
  background:var(--card);
  border:1px solid rgba(26,20,19,0.1);
  border-radius:18px;
  padding:1.1rem;
  box-shadow:0 20px 44px rgba(26,20,19,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  overflow:hidden;
}
.loc-map svg{display:block;width:100%;height:auto;border-radius:10px;background:#FBF6EA;}
.map-water{fill:var(--sand-dim);}
.map-land{fill:#FBF6EA;}
.map-coast{fill:none;stroke:rgba(26,20,19,0.28);stroke-width:1.3;}
.map-grid line{stroke:rgba(26,20,19,0.05);stroke-width:1;}
.map-border{stroke:rgba(26,20,19,0.3);stroke-width:1;stroke-dasharray:3 5;}
.map-label{
  font-family:var(--font-display);
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  fill:rgba(26,20,19,0.34);
}
.map-label-water{fill:rgba(26,20,19,0.26);}
[data-region-for]{
  fill:rgba(185,151,91,0.10);
  stroke:var(--gold);
  stroke-width:1.2;
  stroke-dasharray:5 6;
  opacity:0;
  transition:opacity var(--dur-base) var(--ease);
  pointer-events:none;
}
[data-region-for].active{opacity:1;}
.map-marker .dot{
  fill:rgba(26,20,19,0.3);
  transition:fill var(--dur-base) var(--ease);
}
.map-marker .ring{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.4;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.map-marker text{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  fill:var(--mahogany);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease);
}
.map-marker.active .dot{fill:var(--gold);}
.map-marker.active .ring{opacity:1;animation:mapPulse 2s var(--ease-expo) infinite;}
.map-marker.active text{opacity:1;}
@keyframes mapPulse{
  0%{transform:scale(.45);opacity:.9;}
  100%{transform:scale(2.3);opacity:0;}
}
@media (max-width:900px){
  .locations .section-inner{padding:4.2rem var(--gutter-mobile);}
  .locations-wrap{grid-template-columns:1fr;gap:2.4rem;align-items:start;}
  .locations-intro{max-width:none;}
  .locations-intro .lede{max-width:none;}
  /* Map first on phones so it's visible while tapping the town list below */
  .locations-wrap .loc-map{order:-1;}
  .locations-cta{margin-top:1.6rem;}
}
/* Muted, non-interactive context features on the locations map */
.map-river{fill:var(--sand-dim);}
.map-ref-dot{fill:rgba(26,20,19,0.22);}
.map-ref-label{
  font-family:var(--font-display);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  fill:rgba(26,20,19,0.38);
}

.map-sea{fill:var(--sand-dim);}

/* ============================================================
   PROCESS TIMELINE VISUALS — per-phase photography plus an
   animated gold spine that fills as you scroll the journey.
   ============================================================ */
.timeline-track{position:relative;padding-left:2.4rem;}
.timeline-spine{
  position:absolute;
  left:.55rem;
  top:.6rem;
  bottom:.6rem;
  width:2px;
  background:rgba(26,20,19,0.1);
  border-radius:2px;
  overflow:hidden;
}
.timeline-spine i{
  display:block;
  width:100%;
  height:var(--spine, 0%);
  background:linear-gradient(180deg, var(--gold) 0%, rgba(185,151,91,0.35) 100%);
}
.timeline-step{position:relative;grid-template-columns:5.5rem 1fr 220px;align-items:center;}
.timeline-step::before{
  content:"";
  position:absolute;
  left:-1.95rem;
  top:3.15rem;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--sand-dim);
  border:1.5px solid rgba(26,20,19,0.3);
  transition:background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.timeline-step:first-child::before{top:.6rem;}
[data-reveal].in .timeline-step::before{
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(185,151,91,0.18);
}
.timeline-photo{
  height:158px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 16px 34px rgba(26,20,19,0.12), inset 0 1px 0 rgba(255,255,255,0.4);
}
.timeline-photo img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  transition:transform 1s var(--ease-out);
}
@media (hover:hover){ .timeline-step:hover .timeline-photo img{transform:scale(1);} }
@media (max-width:900px){
  .timeline-track{padding-left:1.6rem;}
  .timeline-spine{left:.15rem;}
  .timeline-step{grid-template-columns:3.6rem 1fr;align-items:start;}
  .timeline-step::before{left:-1.45rem;top:2.55rem;}
  .timeline-step:first-child::before{top:.55rem;}
  /* Phones: text-first timeline — the phase photos are desktop-only
     (display:none also stops the lazy images from ever downloading). */
  .timeline-photo{display:none;}
}
/* ============================================================
   ABOUT MOVEMENT — self-drawing house emblem + growing stat bars
   ============================================================ */
.draw-emblem{
  display:block;
  width:112px;
  height:auto;
  margin:0 auto 1.8rem;
}
.draw-emblem path{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s var(--ease-expo);
}
.in .draw-emblem path{stroke-dashoffset:0;}
.in .draw-emblem path:nth-child(2){transition-delay:.25s;}
.in .draw-emblem path:nth-child(3){transition-delay:.5s;}
.in .draw-emblem path:nth-child(4){transition-delay:.85s;}
.in .draw-emblem path:nth-child(5){transition-delay:1.05s;}
.in .draw-emblem path:nth-child(6){transition-delay:1.3s;}
/* Stats band: the gold bars grow in as the band reveals */
[data-reveal] .stat::before{
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .9s var(--ease-expo);
}
[data-reveal].in .stat::before{transform:scaleY(1);}
[data-reveal].in .stat:nth-child(2)::before{transition-delay:.15s;}
[data-reveal].in .stat:nth-child(3)::before{transition-delay:.3s;}
[data-reveal].in .stat:nth-child(4)::before{transition-delay:.45s;}
/* ============================================================
   INTERIOR RENDERINGS SLIDESHOW — cinematic crossfade gallery
   with slow drift, captions, arrows and a thumbnail rail.
   ============================================================ */
.rend-slider{max-width:1500px;margin:0 auto;}
/* Ledger header aligns to the slider's edges, not the narrower container */
.gallery .section-head{max-width:1500px;}
.rend-stage{
  position:relative;
  height:min(80vh, 880px);
  border-radius:18px;
  overflow:hidden;
  background:var(--mahogany);
  box-shadow:0 26px 54px rgba(26,20,19,0.16), inset 0 1px 0 rgba(255,255,255,0.4);
}
.rend-slide{
  position:absolute;inset:0;
  margin:0;
  opacity:0;
  transition:opacity 1.1s var(--ease-expo);
  pointer-events:none;
}
.rend-slide.is-active{opacity:1;pointer-events:auto;z-index:1;}
.rend-slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.07);
  transition:transform 7.5s linear;
}
.rend-slide.is-active img{transform:scale(1);}
.rend-slide::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(26,20,19,0) 62%, rgba(26,20,19,0.55) 100%);
}
.rend-slide figcaption{
  position:absolute;
  left:1.9rem;bottom:1.5rem;
  z-index:1;
  font-family:var(--font-serif);
  font-size:1.25rem;
  color:var(--sand);
  text-shadow:0 2px 14px rgba(0,0,0,0.4);
}
.rend-count{
  position:absolute;
  top:1.2rem;right:1.4rem;
  z-index:2;
  font-family:var(--font-display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  color:rgba(242,236,223,0.85);
}
.rend-count b{color:var(--gold);font-weight:700;}
.rend-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.3);
  background:rgba(26,20,19,0.4);
  color:var(--sand);
  cursor:pointer;
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  transition:background .35s ease, border-color .35s ease, transform .35s var(--ease-expo);
}
.rend-arrow i{font-style:normal;font-size:1.5rem;line-height:1;transform:translateY(-1px);}
.rend-prev{left:1.1rem;}
.rend-next{right:1.1rem;}
.rend-arrow:hover{background:rgba(26,20,19,0.7);border-color:var(--gold);transform:translateY(-50%) scale(1.07);}
.rend-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.rend-thumbs{
  display:flex;
  gap:.7rem;
  margin-top:1rem;
  overflow-x:auto;
  padding:4px 2px 8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(26,20,19,0.3) transparent;
}
.rend-thumb{
  flex:0 0 116px;
  height:76px;
  padding:0;
  border:none;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  opacity:.5;
  outline:2px solid transparent;
  outline-offset:2px;
  transition:opacity .35s ease, outline-color .35s ease, transform .35s var(--ease-expo);
}
.rend-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.rend-thumb:hover{opacity:.85;transform:translateY(-2px);}
.rend-thumb.is-active{opacity:1;outline-color:var(--gold);}
.rend-thumb:focus-visible{outline-color:var(--gold);opacity:1;}
@media (max-width:640px){
  .rend-stage{height:62vh;border-radius:14px;}
  .rend-slide figcaption{left:1.2rem;bottom:1.1rem;font-size:1.05rem;max-width:74%;}
  .rend-arrow{width:42px;height:42px;}
  .rend-thumb{flex:0 0 88px;height:58px;}
}
/* ============================================================
   PROCESS PAGE — wider timeline, denser layout
   ============================================================ */
.timeline-track{max-width:1240px;}
.timeline-step{grid-template-columns:5.5rem 1fr 280px;gap:2.4rem;}
.timeline-body p{max-width:none;}
.timeline-photo{height:220px;border-radius:10px;}
.pull-quote-inner{max-width:1020px;}
.stats-grid{max-width:1200px;}
/* About + Custom Homes stats: widen copy columns so long labels read cleanly */
.stats-grid.stats-grid-wide{
  max-width:1320px;
  margin:0 auto;
  grid-template-columns:repeat(3,minmax(0,1fr));
  justify-content:center;
  gap:3.2rem;
}
@media (max-width:900px){
  .stats-grid.stats-grid-wide{
    grid-template-columns:1fr;
    gap:1.6rem;
    padding:3rem var(--gutter-mobile);
  }
}

@media (max-width:900px){
  .timeline-step{grid-template-columns:3.6rem 1fr;}
}
/* Phones: the number sits above the text so the copy takes the full
   measure instead of a ~200px column beside it. The spine dot moves up
   to sit beside the number. */
@media (max-width:767px){
  .timeline-step{grid-template-columns:1fr;gap:.55rem;padding:1.8rem 0;}
  .timeline-num{font-size:1.7rem;line-height:1;}
  .timeline-step::before{top:2.15rem;}
  .timeline-step:first-child::before{top:.35rem;}
  .timeline-body h3{font-size:1.4rem;}
}
/* ============================================================
   ABOUT PAGE — wider founder, richer history
   ============================================================ */
.founder-copy{max-width:none;}
.founder-copy p.bio{max-width:none;}
.founder-copy blockquote{max-width:540px;}
.statement-inner{max-width:840px;}
.statement-inner p{max-width:620px;}
/* History section runs wider on About only (scoped so the shared .statement
   band on the homepage and 404 keeps its original narrower measure). */
.statement.history .statement-inner{max-width:var(--container-max);}
/* About history: body copy fills the same measure as the heading so their left/
   right edges align, with a larger gap detaching the copy from the title. */
.statement.history .statement-inner p{max-width:var(--container-max);}
.statement.history .statement-title{margin-bottom:clamp(1.9rem,3.2vw,3.2rem);}
.statement.history .statement-inner > p:last-child{margin-bottom:0;}
@media (max-width:560px){
  .statement.history .statement-inner > p:not(.eyebrow){text-align:left;}
  /* Short centered intros justify badly (rivers) at phone widths — keep the
     desktop justify but fall back to left-align on very narrow screens. */
  .section-head p,
  .why-head p{text-align:left;}
}
/* ============================================================
   PROJECTS PAGE — Carbon-style project grid
   Replicates carboncustombuilders.com/projects:
   3-col grid (2-col tablet, 1-col mobile), 1rem gaps, cards with
   cover image + dark overlay, title/location bottom-left, and a
   pill "View project" affordance bottom-right that expands on hover.
   ============================================================ */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}
/* Edge to edge: the cells run to the sides of the page; their inner padding
   takes the page gutter so the titles still sit on the site's text margin. */
.projects-grid-wrap{
  position:relative;
  padding:0 0 var(--section-y);
}
/* The grid starts flush under the fixed nav, so a soft top scrim keeps the
   logo and links legible over bright photography. */
.projects-grid-wrap::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:10rem;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(14,10,9,0.62) 0%, rgba(14,10,9,0.28) 55%, rgba(14,10,9,0) 100%);
}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:0;
}
.project-cell{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  aspect-ratio:3/4;
  padding:max(1.25rem, var(--gutter));
  overflow:hidden;
  background:var(--mahogany);
  color:var(--sand);
}
.project-cell.is-xlarge{grid-column:span 2;grid-row:span 2; aspect-ratio:3/4;}
/* Rows run 2-3-3-3: the first project spans two columns at 3:2, which is
   exactly the height of the 3:4 tile beside it; every other cell is the same
   3:4 tile in rows of three. */
.project-cell.is-feature{grid-column:span 2; aspect-ratio:3/2;}
.project-cell-media{position:absolute;inset:0;display:block;}
.project-cell-media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) brightness(.96) sepia(.05);
  transition:transform 1.4s var(--ease-out);
}
.project-cell:hover .project-cell-media img,
.project-cell:focus-visible .project-cell-media img{transform:scale(1.04);}
/* Static dark overlay (Carbon: .g_visual_overlay at ~20%), deepens on hover */
/* Feature cell cover video: sits over the still, fades in once it is actually
   playing, and is skipped entirely under reduced motion. */
.project-cell-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* colour grade is baked into the file: a CSS filter on playing video stutters in Safari/Firefox */
  opacity:0;transition:opacity .9s var(--ease-out), transform 1.4s var(--ease-out);
  pointer-events:none;
}
.project-cell-video.is-playing{opacity:1;}
.project-cell:hover .project-cell-video,
.project-cell:focus-visible .project-cell-video{transform:scale(1.04);}
@media (prefers-reduced-motion: reduce){.project-cell-video{display:none;}}
.project-cell-media::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(14,10,9,0.24);
  pointer-events:none;
  transition:background .6s var(--ease-out);
}
.project-cell:hover .project-cell-media::after,
.project-cell:focus-visible .project-cell-media::after{background:rgba(14,10,9,0.34);}
.project-cell-info{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  max-width:70%;
}
.project-cell-title{
  margin:0 0 0 -.1rem;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(1.9rem, 1.35rem + 1.5vw, 3.4rem);
  line-height:1.1;
  letter-spacing:-.005em;
  color:var(--sand);
  text-shadow:0 1px 22px rgba(0,0,0,0.25);
}
.project-cell-location{
  font-family:var(--font-display);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.125em;
  text-transform:uppercase;
  color:rgba(242,236,223,0.62);
}
/* Pill affordance: 2rem circle with arrow, expands to reveal "View project" */
.project-cell-view{
  position:absolute;
  right:1.25rem;bottom:1.5rem;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2rem;height:2rem;
  border-radius:100vw;
  background:var(--sand);
  color:var(--mahogany);
  overflow:hidden;
  transition:width .5s var(--ease-out);
}
.project-cell-arrow{
  display:block;
  width:.85rem;height:auto;
  flex:none;
  transition:opacity .25s var(--ease-out);
}
.project-cell-view-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  transition:opacity .3s var(--ease-out) .12s;
}
.project-cell:hover .project-cell-view,
.project-cell:focus-visible .project-cell-view{width:7.5rem;}
.project-cell:hover .project-cell-arrow,
.project-cell:focus-visible .project-cell-arrow{opacity:0;}
.project-cell:hover .project-cell-view-text,
.project-cell:focus-visible .project-cell-view-text{opacity:1;}
.project-cell:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;}
@media (max-width:991px){
  .projects-grid-wrap{padding:0 0 2rem;}
  .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .project-cell{aspect-ratio:4/5;}
  .project-cell.is-feature{grid-column:1 / -1;aspect-ratio:3/2;}
  .project-cell-view{display:none;}
}
@media (max-width:767px){
  .projects-grid-wrap{padding:0 0 1.5rem;}
  .projects-grid{grid-template-columns:minmax(0,1fr);}
  .project-cell{aspect-ratio:3/4;padding:var(--gutter-mobile);}
  .project-cell.is-xlarge{grid-column:auto;grid-row:auto;}
  .project-cell.is-feature{aspect-ratio:3/4;}
  .project-cell-info{max-width:100%;}
}
@media (max-width:479px){
  .project-cell,.project-cell.is-feature{aspect-ratio:4/5;padding:var(--gutter-mobile);}
}
/* ============================================================
   PRESS (About) — editorial feature card
   Light band between the History statement and the CTA. Holds a
   grid/list that currently carries one horizontal feature card
   (cover image + text); more items can be appended and will wrap.
   ============================================================ */
.press{
  position:relative;
  overflow:hidden;
  background:radial-gradient(120% 140% at 85% 0%, #FBF6EA 0%, var(--sand-dim) 65%);
  color:var(--mahogany);
  padding:var(--section-y) var(--gutter);
}
.press::before{
  content:"";
  position:absolute;
  top:-30%;left:-12%;
  width:55%;height:150%;
  background:radial-gradient(circle, var(--gold-dim) 0%, rgba(185,151,91,0) 70%);
  filter:blur(60px);
  pointer-events:none;
}
.press .section-head{position:relative;z-index:1;}
.press-list{
  position:relative;
  z-index:1;
  max-width:var(--container-max);
  margin:0 auto;
  display:grid;
  gap:var(--space-4);
}
.press-card{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:stretch;
  background:var(--sand);
  border:1px solid var(--sand-dim);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(26,20,19,0.12);
  transition:box-shadow .55s var(--ease-out), transform .55s var(--ease-out);
}
.press-card:hover{
  box-shadow:0 26px 60px rgba(26,20,19,0.20);
  transform:translateY(-3px);
}
.press-cover{
  position:relative;
  display:block;
  overflow:hidden;
  min-height:360px;
}
.press-cover img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.92) brightness(.97) sepia(.04);
  transition:transform 1.4s var(--ease-out);
}
.press-cover::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(105deg, rgba(26,20,19,0) 55%, rgba(26,20,19,0.14) 100%);
  pointer-events:none;
}
.press-card:hover .press-cover img,
.press-cover:focus-visible img{transform:scale(1.045);}
.press-cover:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;}
.press-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:1rem;
  padding:clamp(2.4rem,4vw,3.6rem);
}
.press-pub{
  font-family:var(--font-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.press-title{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:-.005em;
  line-height:1.18;
  color:var(--mahogany);
}
.press-kicker{
  font-family:var(--font-serif);
  font-weight:300;
  font-style:italic;
  font-size:1.05rem;
  line-height:1.4;
  color:var(--mahogany-70);
  margin-top:-.15rem;
}
.press-excerpt{
  font-size:1.02rem;
  font-weight:300;
  line-height:1.64;
  color:var(--mahogany-70);
}
.press-body .btn{margin-top:.6rem;}
@media (max-width:820px){
  .press-card{grid-template-columns:1fr;}
  .press-cover{min-height:300px;}
}
@media (max-width:560px){
  .press{padding:var(--space-10) var(--gutter-mobile);}
  .press-cover{min-height:220px;}
}

/* ============================================================
   SCROLL-MORPH — "First Sketch → Move-In"
   ============================================================ */
.morph{
  background:var(--mahogany);
  padding-top:var(--section-y);
}
/* --- No-JS baseline: static stepped gallery --- */
.morph-scroll{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--gutter);
}
.morph-canvas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
}
.morph-img{
  border-radius:4px;
  overflow:hidden;
  line-height:0;
}
.morph-img img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  aspect-ratio:3/2;
}
.morph-captions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
  padding:var(--space-4) 0 var(--space-8);
}
.morph-cap{
  color:var(--sand);
}
.morph-num{
  display:block;
  font-family:var(--font-display);
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.2em;
  color:var(--gold);
  margin-bottom:.35rem;
}
.morph-label{
  display:block;
  font-family:var(--font-serif);
  font-size:var(--text-base);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:.4rem;
}
.morph-cap p{
  font-size:var(--text-sm);
  font-weight:300;
  color:rgba(242,236,223,0.7);
  line-height:1.55;
  margin:0;
}
.morph-progress{display:none;}
@media (max-width:560px){
  .morph-canvas{grid-template-columns:1fr;}
  .morph-captions{grid-template-columns:1fr;gap:var(--space-4);}
  .morph-scroll{padding:0 var(--gutter-mobile);}
}
/* --- JS-enhanced: sticky pin with cross-dissolve --- */
.js .morph-scroll{
  position:relative;
  height:400vh;
  padding:0;
  max-width:none;
}
.js .morph-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.js .morph-canvas{
  display:block;
  position:relative;
  flex:1 1 auto;
  min-height:0;
}
.js .morph-img{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity var(--duration-slow) var(--ease-out);
  border-radius:0;
  will-change:opacity;
}
.js .morph-img.is-active{opacity:1;}
.js .morph-img img{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:auto;
}
.js .morph-captions{
  display:block;
  position:relative;
  flex:0 0 auto;
  padding:var(--space-5) var(--gutter) var(--space-6);
  background:linear-gradient(to top, var(--mahogany) 60%, transparent);
  z-index:2;
}
.js .morph-cap{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:0 var(--gutter) var(--space-6);
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--duration-base) var(--ease-out),
             transform var(--duration-base) var(--ease-out);
  pointer-events:none;
}
.js .morph-cap.is-active{
  position:relative;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.js .morph-progress{
  display:flex;
  gap:var(--space-2);
  position:absolute;
  bottom:var(--space-3);
  right:var(--gutter);
  z-index:3;
}
.morph-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(242,236,223,0.3);
  transition:background var(--duration-fast) var(--ease-out);
}
.morph-dot.is-active{background:var(--gold);}
@media (prefers-reduced-motion:reduce){
  .js .morph-img{transition:none;}
  .js .morph-cap{transition:none;}
  .morph-dot{transition:none;}
}
@media (max-width:560px){
  .js .morph-captions{padding:var(--space-3) var(--gutter-mobile) var(--space-5);}
  .js .morph-cap{padding:0 var(--gutter-mobile) var(--space-5);}
  .js .morph-progress{right:var(--gutter-mobile);bottom:var(--space-2);}
}

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
.ba-section{
  background:var(--mahogany);
  padding:var(--section-y) var(--gutter);
}
.ba-slider{
  position:relative;
  max-width:var(--container-max);
  margin:0 auto;
  overflow:hidden;
  border-radius:4px;
  line-height:0;
  background:var(--mahogany);
}
.ba-img{
  position:relative;
  width:100%;
}
.ba-img img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.ba-label{
  position:absolute;
  bottom:1.2rem;
  padding:.35rem .85rem;
  font-family:var(--font-display);
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:2px;
  pointer-events:none;
  line-height:1.5;
}
.ba-label-before{
  left:1.2rem;
  background:rgba(26,20,19,0.72);
  color:var(--sand);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.ba-label-after{
  right:1.2rem;
  background:rgba(242,236,223,0.82);
  color:var(--mahogany);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
/* --- JS-enhanced slider layout --- */
.js .ba-slider{
  aspect-ratio:3/2;
  cursor:col-resize;
  user-select:none;
  -webkit-user-select:none;
}
.js .ba-img{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.js .ba-img img{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.js .ba-img-before{
  clip-path:inset(0 50% 0 0);
  z-index:2;
}
.js .ba-img-after{
  z-index:1;
}
.ba-handle{
  position:absolute;
  top:0;bottom:0;
  left:50%;
  z-index:3;
  width:3px;
  transform:translateX(-50%);
  background:var(--sand);
  pointer-events:none;
  box-shadow:0 0 8px rgba(0,0,0,0.35);
}
.ba-handle-grip{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:40px;height:40px;
  border-radius:50%;
  background:var(--sand);
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
  pointer-events:auto;
  cursor:col-resize;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;
}
.ba-handle-grip::before,
.ba-handle-grip::after{
  content:"";
  display:block;
  width:0;height:0;
  border:5px solid transparent;
  position:absolute;
}
.ba-handle-grip::before{
  border-right-color:var(--mahogany);
  left:6px;
}
.ba-handle-grip::after{
  border-left-color:var(--mahogany);
  right:6px;
}
.ba-handle-grip:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
@media (max-width:560px){
  .ba-section{padding:var(--section-y-sm) var(--gutter-mobile);}
  .ba-label{font-size:.6rem;padding:.28rem .65rem;bottom:.8rem;}
  .ba-label-before{left:.8rem;}
  .ba-label-after{right:.8rem;}
  .ba-handle-grip{width:34px;height:34px;}
}

/* Reduced-motion overrides moved to core.css (single consolidated block). */

/* ============================================================
   LEGAL (privacy.html) — one readable column on the dark ground
   ============================================================ */
.legal{
  position:relative;
  background:var(--mahogany-glow);
  color:var(--sand);
  padding:clamp(9rem,16vh,12rem) var(--gutter) var(--section-y);
}
.legal-inner{max-width:720px;margin:0 auto;text-align:left;}
.legal .eyebrow{display:block;margin-bottom:1.2rem;}
.legal h1{
  font-family:var(--font-serif);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(2rem,4.4vw,3.2rem);
  line-height:1.15;
  color:var(--sand);
}
.legal-updated{margin:1rem 0 2.6rem;font-size:.85rem;color:rgba(242,236,223,0.55);}
.legal h2{
  font-family:var(--font-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:2.4rem 0 .7rem;
}
.legal p{font-size:1rem;line-height:1.7;color:rgba(242,236,223,0.78);margin-bottom:1rem;text-align:left;hyphens:manual;}
.legal a{color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(185,151,91,0.6);}
.legal a:hover{border-color:var(--gold);}
@media (max-width:767px){
  .legal{padding:calc(var(--section-y-sm) + 4rem) var(--gutter-mobile) var(--section-y-sm);}
}
/* Field flagged by the enquiry server (contact page) */
.contact-form .is-invalid{border-color:rgba(214,120,96,0.9);}
/* Contact form sits directly on the page (no card): the hairline-divided
   steps carry the structure. The details panel beside it keeps its box. */
.contact-form-wrap{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}