/* ---------------------------------------------------------------
   1. TOKENS — LOCKED to BRAND.md. Monochromatic green + copper.
   ONE green family, ONE copper accent, one warm green-cream tint
   in EVERY surface (no pure white, no black, no blue, no charcoal
   family). Variable names kept from earlier builds so all rules
   resolve; only values changed. Fewer colors = the expensive feel.
--------------------------------------------------------------- */
:root{
  /* the one green family */
  --green-deep: #232B1E;   /* darkest — dark sections, footer, overlays */
  --green:      #3A4230;   /* dominant mid green — large surfaces, bands */
  --green-soft: #4C543F;   /* lighter green — gradients, hovers */
  --sage:       #6E7458;   /* muted sage — small rules, muted accents */

  /* the one accent */
  --copper:     #A56A34;   /* THE accent — eyebrows, buttons, details */
  --copper-hi:  #BC8149;   /* copper hover */
  --copper-lite:#DDA96E;   /* copper for TEXT on dark green — the darker coppers fail contrast there */

  /* warm green-tinted neutrals (in everything) */
  --paper:      #F4EFE3;   /* page background — warm cream, green cast */
  --paper-2:    #ECE6D6;   /* alternate section background */
  --card:       #F7F3E9;   /* cards — never pure white */
  --ink:        #232B1E;   /* text = green deep, not black */
  --ink-soft:   #555A47;   /* muted text — green-grey */

  /* ---- legacy aliases so existing rules keep working ---- */
  --navy:       #232B1E;   /* was charcoal -> now green deep */
  --forest:     #556040;   /* primary accent on light -> a readable green */
  --forest-lit: #6E7458;
  --forest-deep:#232B1E;
  --forest-mid: #3A4230;
  --slate:      #A56A34;   /* legacy alias -> copper */
  --slate-deep: #8A5628;   /* legacy alias -> copper hover */
  --water:      #556040;   /* accent alias -> green */
  --soil:       #3A4230;   /* -> green */
  --soil-deep:  #232B1E;   /* -> green deep */
  --bark:       #4C543F;
  --sand:       #ECE6D6;   /* -> cream tint */
  --glint:      #C9BC9E;   /* warm highlight */
  --mist:       #ECE6D6;   /* light section bg -> cream tint */
  --dim:        rgba(35,43,30,.66);
  --dim-inv:    rgba(244,239,227,.76);
  --line:       rgba(35,43,30,.16);
  --line-inv:   rgba(244,239,227,.18);

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --util: "Barlow Condensed", "Arial Narrow", sans-serif;

  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 56px);
  --sec: clamp(80px, 10vw, 144px);
  --r: 3px;
  --shadow-soft: 0 10px 30px rgba(35,43,30,.1);
  --shadow-lift: 0 26px 60px rgba(35,43,30,.2);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
html{ overflow-x:clip; }
/* (root background removed: a painted root can flip which element iOS
   Safari treats as the scroll surface, which set the sticky nav adrift.
   Chrome tinting rides on the theme-color meta alone.) */
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:0;
  margin:0;
  color:var(--navy);
}
h1{ font-size:clamp(2.9rem,6.8vw,5.8rem); font-weight:600; }
h2{ font-size:clamp(2.2rem,4.4vw,3.6rem); }
h3{ font-size:clamp(1.28rem,1.8vw,1.55rem); letter-spacing:0; font-weight:600; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--copper); color:var(--paper); padding:12px 20px; font-weight:600; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--water); outline-offset:3px; }

.eyebrow{
  font-family:var(--util);
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--water);
  display:flex; align-items:center; gap:14px;
  margin:0 0 22px;
}
.eyebrow::before{
  content:""; width:7px; height:10px; flex:none;
  background:currentColor;
  clip-path:path("M3.5 0C3.5 3 0 5 0 7a3.5 3.5 0 007 0C7 5 3.5 3 3.5 0Z");
}
.eyebrow::after{ content:""; height:1px; flex:1; max-width:80px; background:var(--forest); opacity:.5; }
.on-dark .eyebrow{ color:var(--glint); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:var(--paper); }

.lede{ font-size:clamp(1.06rem,1.35vw,1.24rem); color:var(--dim); max-width:60ch; }
.on-dark .lede{ color:var(--dim-inv); }

/* ---------------------------------------------------------------
   2. BUTTONS
--------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--util); font-size:1.06rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  padding:17px 32px; border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.btn-primary{ background:var(--copper); color:var(--paper); box-shadow:0 12px 28px rgba(165,106,52,.3); }
.btn-primary:hover{ background:var(--copper-hi); transform:translateY(-2px); box-shadow:0 16px 36px rgba(165,106,52,.36); }
.btn-copper{ background:var(--copper); color:var(--paper); box-shadow:0 12px 28px rgba(165,106,52,.3); }
.btn-copper:hover{ background:var(--copper-hi); transform:translateY(-2px); }
.btn-ghost{ border-color:rgba(35,43,30,.28); color:var(--green); background:rgba(247,243,233,.55); }
.btn-ghost:hover{ border-color:var(--green); background:var(--card); }
.on-dark .btn-ghost{ border-color:var(--line-inv); color:#fff; background:rgba(255,255,255,.06); }
.on-dark .btn-ghost:hover{ border-color:var(--glint); color:var(--glint); background:rgba(255,255,255,.1); }

/* ---------------------------------------------------------------
   3. HEADER
--------------------------------------------------------------- */
.topbar{
  background:var(--navy);
  font-family:var(--util); font-size:.92rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim-inv);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px; }
.topbar a{ color:var(--glint); text-decoration:none; }
.topbar a:hover{ color:#fff; }
.topbar .tb-left{ display:flex; gap:26px; }
@media (max-width:820px){ .topbar .tb-left span+span{ display:none; } }
/* the topbar wraps the phone number in half on phones — gone entirely there */
@media (max-width:700px){ .topbar{ display:none; } }

.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(248,244,236,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.nav.stuck{ box-shadow:0 14px 40px rgba(35,43,30,.1); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.mark{ width:44px; height:44px; flex:none; }
.brand-type{ display:flex; flex-direction:column; line-height:1; }
.brand-type b{ font-family:var(--display); font-size:1.5rem; font-weight:600; letter-spacing:.01em; text-transform:none; color:var(--navy); }
.brand-type small{ font-family:var(--util); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--water); margin-top:5px; }

.menu{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); list-style:none; margin:0; padding:0; }
.menu > li > a{ white-space:nowrap; }   /* the logo tightened the row; labels must not wrap */
.nav-cta .btn{ white-space:nowrap; padding-inline:26px; }   /* Get a Quote stays on one line */
.menu a{
  font-family:var(--util); font-size:1rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; color:var(--navy); padding:6px 0;
  border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.menu a:hover{ color:var(--water); border-color:var(--water); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-phone{ font-family:var(--util); font-size:1.36rem; font-weight:700; letter-spacing:.05em; text-decoration:none; color:var(--water); white-space:nowrap; }
.nav-phone:hover{ color:var(--navy); }
.burger{ display:none; background:none; border:1px solid var(--line); border-radius:var(--r); padding:11px; cursor:pointer; }
.burger span{ display:block; width:22px; height:2px; background:var(--navy); margin:4px 0; transition:transform .25s ease, opacity .25s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1020px){
  .menu, .nav-cta .btn{ display:none; }
  .burger{ display:block; }
  .menu.open{
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:10px var(--gut) calc(26px + env(safe-area-inset-bottom, 0px));
    max-height:calc(100dvh - 96px);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .menu.open > li{ width:100%; border-bottom:1px solid var(--line); }
  .menu.open > li:last-child{ border-bottom:0; }
  .menu.open a{ display:block; padding:14px 0; border-bottom:0; font-size:1.1rem; }
  .menu.open .has-sub{ display:flex; flex-wrap:wrap; align-items:center; }
  .menu.open .has-sub > a{ flex:1; }
}

/* ---------------------------------------------------------------
   4. HERO — light, airy, water at the shoreline
--------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 70% at 82% 0%, rgba(205,190,170,.4), transparent 55%),
    radial-gradient(70% 60% at 6% 18%, rgba(205,190,170,.3), transparent 55%),
    var(--paper);
}
.hero .wrap{ position:relative; z-index:3; padding-top:clamp(76px,10vw,136px); padding-bottom:clamp(150px,17vw,210px); }
.hero-grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(30px,5vw,80px); align-items:end; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; align-items:start; } }

.hero h1{ text-transform:none; letter-spacing:-.01em; }
.hero h1 .blue{
  background:linear-gradient(100deg, var(--forest) 0%, var(--forest-lit) 60%, var(--sage) 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .thin{ display:block; font-size:.4em; letter-spacing:.22em; color:var(--forest); margin-top:26px; font-weight:500; }
.hero h1 .thin em{ font-style:italic; color:var(--forest-lit); }
.hero-lede{ margin-top:28px; max-width:52ch; font-size:clamp(1.08rem,1.4vw,1.25rem); color:var(--dim); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }

.hero-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:28px 28px 24px;
  box-shadow:var(--shadow-lift);
  position:relative;
}
.hero-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:6px 6px 0 0;
  background:linear-gradient(90deg, var(--forest), var(--sage));
}
.hero-card h2{ font-size:1rem; font-family:var(--util); letter-spacing:.22em; text-transform:uppercase; color:var(--water); }
.hero-card ul{ list-style:none; margin:18px 0 0; padding:0; }
.hero-card li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:.98rem; }
.hero-card li:first-child{ border-top:0; }
.hero-card li::before{
  content:""; width:7px; height:10px; flex:none;
  background:var(--water);
  clip-path:path("M3.5 0C3.5 3 0 5 0 7a3.5 3.5 0 007 0C7 5 3.5 3 3.5 0Z");
}
.hero-card li b{ font-weight:600; color:var(--navy); }

/* the grade line — a single restrained copper hairline divider,
   a restrained divider, no illustration */
.grade{
  position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--copper) 20%, var(--copper) 80%, transparent);
  opacity:.55;
}

/* ---------------------------------------------------------------
   5. TRUST BAR — white, clean
--------------------------------------------------------------- */
.trust{ background:var(--card); border-bottom:1px solid var(--line); }
.trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item{ padding:30px 18px; text-align:center; border-left:1px solid var(--line); }
.trust-item:first-child{ border-left:0; }
.trust-item b{ display:block; font-family:var(--display); font-size:1.04rem; letter-spacing:.05em; text-transform:uppercase; color:var(--navy); }
.trust-item span{ font-family:var(--util); font-size:.86rem; letter-spacing:.2em; text-transform:uppercase; color:var(--water); }
/* superseded by the canonical trust block near the end of this file */

/* ---------------------------------------------------------------
   6. SECTION SHELLS
--------------------------------------------------------------- */
.section{ padding-block:var(--sec); position:relative; }
.on-mist{ background:var(--mist); }
.on-sandy{ background:var(--paper-2); }
.on-dark{ background:linear-gradient(175deg, var(--forest-deep) 0%, var(--forest-mid) 55%, var(--forest-deep) 100%); color:var(--dim-inv); }
.sec-head{ max-width:72ch; margin-bottom:clamp(40px,5vw,66px); }
.sec-head h2 .accent{ color:var(--water); }
.on-dark .sec-head h2 .accent{ color:var(--glint); }

/* ---------------------------------------------------------------
   7. SERVICES — white cards on pale water
--------------------------------------------------------------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); }
@media (max-width:940px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .svc-grid{ grid-template-columns:1fr; } }
.svc{
  background:var(--card);
  border:1px solid rgba(35,43,30,.14);
  border-radius:10px;
  padding:38px 34px 32px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden;
  box-shadow:0 1px 2px rgba(35,43,30,.04);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
/* a fine copper top rule that draws in on hover — replaces the heavy bottom bar */
.svc::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--copper), var(--copper-hi));
  transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.svc:hover{
  transform:translateY(-4px);
  border-color:rgba(165,106,52,.4);
  box-shadow:0 18px 40px -18px rgba(35,43,30,.28);
}
.svc:hover::before{ transform:scaleX(1); }
.svc-ico{
  width:56px; height:56px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper-2);
  border:1px solid rgba(35,43,30,.12);
  color:var(--green);
  transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.svc:hover .svc-ico{ background:var(--green); color:var(--paper); border-color:transparent; transform:scale(1.05); }
.svc-ico svg{ width:26px; height:26px; }
.svc h3{ font-size:1.32rem; letter-spacing:-.01em; }
.svc p{ font-size:.98rem; line-height:1.6; color:var(--dim); margin:0; }
.svc-list{ list-style:none; margin:6px 0 0; padding:0; font-family:var(--util); font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.svc-list li{ padding:9px 0; border-top:1px solid rgba(35,43,30,.1); display:flex; align-items:center; gap:10px; }
.svc-list li:first-child{ border-top:none; padding-top:2px; }
.svc-list li::before{ content:""; width:5px; height:8px; flex:none; background:var(--copper); clip-path:path("M2.5 0C2.5 2.2 0 3.6 0 5a2.5 2.5 0 005 0C5 3.6 2.5 2.2 2.5 0Z"); opacity:.85; }
.svc-more{ font-family:var(--util); font-size:.92rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--copper); margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:8px; transition:gap .25s ease; }
.svc-more::after{ content:"\2192"; transition:transform .25s ease; }
.svc:hover .svc-more{ gap:12px; }

/* ---------------------------------------------------------------
   8. SPLIT — whole system, the one dark section
--------------------------------------------------------------- */
.on-dark::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 55% at 74% 45%, rgba(138,144,104,.16), transparent 65%);
  pointer-events:none;
}
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; position:relative; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.split-visual{ position:relative; max-width:480px; width:100%; margin-inline:auto; }
.exp-card{
  background:linear-gradient(165deg, rgba(248,244,236,.08), rgba(248,244,236,.02));
  border:1px solid rgba(201,183,154,.28);
  border-radius:10px;
  padding:clamp(30px,3.4vw,44px);
  display:flex; flex-direction:column; gap:6px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
}
.exp-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--forest), var(--sage));
}
.exp-eyebrow{ font-family:var(--util); font-size:.84rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--glint); }
.exp-num{
  font-family:var(--display); font-weight:700; line-height:1;
  font-size:clamp(4.6rem,8vw,7rem); color:var(--paper); margin-top:10px;
}
.exp-num i{ font-style:normal; color:var(--copper-hi); }
.exp-label{ font-size:1.02rem; color:var(--dim-inv); max-width:30ch; margin-top:2px; }
.exp-list{ list-style:none; margin:26px 0 0; padding:0; }
.exp-list li{ padding:14px 0; border-top:1px solid rgba(201,183,154,.2); display:flex; flex-direction:column; gap:2px; }
.exp-list b{ color:var(--paper); font-weight:600; font-size:1rem; }
.exp-list span{ font-family:var(--util); font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; color:var(--glint); }
.split p{ color:var(--dim-inv); }
.stat-row{ display:flex; flex-wrap:wrap; gap:38px; margin-top:34px; }
.stat b{ display:block; font-family:var(--display); font-size:2.5rem; color:var(--glint); line-height:1; }
.stat span{ font-family:var(--util); font-size:.86rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim-inv); }

/* ---------------------------------------------------------------
   9. PROCESS — sandy warm
--------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,36px); counter-reset:step; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ padding-top:26px; border-top:1px solid rgba(35,43,30,.16); position:relative; }
.step::after{
  content:""; position:absolute; top:-1px; left:0; width:44px; height:2px;
  background:var(--forest);
}
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--util); font-size:.9rem; font-weight:700; letter-spacing:.22em;
  color:var(--forest); display:block; margin-bottom:14px;
}
.step h3{ font-size:1.16rem; margin-bottom:10px; }
.step p{ font-size:.96rem; color:var(--dim); margin:0; }

/* ---------------------------------------------------------------
   10. SERVICE AREA — water blue panel with drifting waves
--------------------------------------------------------------- */
.area{
  background:var(--paper-2);
  position:relative; overflow:hidden; color:var(--ink);
}
.area h2{ color:var(--ink); }
.area-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:start; position:relative; z-index:2; }
@media (max-width:900px){ .area-grid{ grid-template-columns:1fr; } }
.town-list{ list-style:none; margin:0; padding:0; columns:2; column-gap:44px; }
@media (max-width:520px){ .town-list{ columns:1; } }
.town-list li{ break-inside:avoid; }
.town-list a{
  text-decoration:none; font-family:var(--util); font-size:1.12rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); display:flex; align-items:baseline; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--line);
  transition:color .2s ease, padding-left .2s ease, border-color .2s ease;
}
.town-list a::before{
  content:""; width:6px; height:9px; flex:none; align-self:center;
  background:var(--copper);
  clip-path:path("M3 0C3 2.6 0 4.2 0 6a3 3 0 006 0C6 4.2 3 2.6 3 0Z");
  opacity:0; transition:opacity .2s ease;
}
.town-list a:hover{ color:var(--copper); padding-left:8px; border-color:var(--copper); }
.town-list a:hover::before{ opacity:1; }
.town-list a span{ margin-left:auto; color:var(--ink-soft); font-size:.85rem; letter-spacing:.14em; }
.area .eyebrow{ color:var(--copper); }
.area .lede{ color:var(--dim); }

/* ---------------------------------------------------------------
   11. REVIEWS — white cards, light
--------------------------------------------------------------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,30px); }
@media (max-width:900px){ .quotes{ grid-template-columns:1fr; } }
.quote{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:32px 30px;
  position:relative;
  box-shadow:var(--shadow-soft);
}
.quote::before{
  content:"\201C"; position:absolute; top:8px; right:22px;
  font-family:var(--display); font-size:5rem; line-height:1;
  color:rgba(74,62,38,.12);
}
.quote blockquote{ margin:0 0 20px; font-size:1.05rem; line-height:1.62; position:relative; }
.quote cite{ font-style:normal; font-family:var(--util); font-size:.92rem; letter-spacing:.17em; text-transform:uppercase; color:var(--water); }
.stars{ color:var(--forest-lit); letter-spacing:.2em; font-size:.95rem; margin-bottom:16px; }

/* ---------------------------------------------------------------
   12. FAQ
--------------------------------------------------------------- */
.faq{ max-width:900px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:25px 46px 25px 0; position:relative;
  font-family:var(--display); font-size:clamp(1.05rem,1.5vw,1.24rem); font-weight:600;
  color:var(--navy);
  transition:color .2s ease;
}
.faq summary:hover{ color:var(--water); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:12px; height:12px;
  border-right:2px solid var(--water); border-bottom:2px solid var(--water);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease, border-color .25s ease;
}
.faq details[open] summary{ color:var(--water); }
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); border-color:var(--forest); }
.faq .answer{ padding:0 40px 28px 0; color:var(--dim); }
.faq .answer a{ color:var(--water); }

/* ---------------------------------------------------------------
   13. CTA BAND — copper warmth against the cool page
--------------------------------------------------------------- */
.band{
  background:var(--card);
  border-block:1px solid var(--copper);
  color:var(--ink); padding-block:clamp(54px,7vw,84px);
  position:relative; overflow:hidden;
}
.band::after{
  content:""; position:absolute; right:-6%; top:-60%; width:44%; aspect-ratio:1;
  border:1px solid rgba(35,43,30,.08); border-radius:50%;
}
.band::before{
  content:""; position:absolute; right:2%; top:-40%; width:30%; aspect-ratio:1;
  border:1px solid rgba(35,43,30,.05); border-radius:50%;
}
.band .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; position:relative; }
.band h2{ font-size:clamp(1.75rem,3.1vw,2.6rem); max-width:24ch; color:var(--ink); }
.band .btn-primary{ background:var(--copper); color:var(--paper); box-shadow:0 14px 36px rgba(165,106,52,.42); }
.band .btn-primary:hover{ background:var(--copper-hi); }

/* ---------------------------------------------------------------
   14. QUOTE FORM — light, card on mist
--------------------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:start; }
@media (max-width:900px){ .form-grid{ grid-template-columns:1fr; } }
form{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:clamp(24px,3vw,38px);
  box-shadow:var(--shadow-lift);
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1/-1; }
label{ font-family:var(--util); font-size:.9rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--water); }
input,select,textarea{
  font-family:var(--body); font-size:1rem; color:var(--navy);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px; width:100%;
}
input:focus,select:focus,textarea:focus{ border-color:var(--green); background:var(--card); outline:none; box-shadow:0 0 0 3px rgba(58,66,48,.16); }
textarea{ min-height:130px; resize:vertical; }
.form-note{ grid-column:1/-1; font-size:.88rem; color:var(--dim); }
.hp{ position:absolute; left:-9999px; }

.contact-block{ display:grid; gap:22px; }
.contact-row{ border-top:1px solid var(--line); padding-top:18px; }
.contact-row b{ font-family:var(--util); font-size:.88rem; letter-spacing:.22em; text-transform:uppercase; color:var(--water); display:block; margin-bottom:6px; }
.contact-row a{ text-decoration:none; font-size:1.12rem; color:var(--navy); }
.contact-row a:hover{ color:var(--water); }

/* ---------------------------------------------------------------
   15. FOOTER — navy anchor
--------------------------------------------------------------- */
.footer{ background:var(--navy); color:var(--dim-inv); border-top:3px solid var(--forest); padding-block:clamp(60px,7vw,90px) 0; position:relative; overflow:hidden; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(26px,4vw,48px); position:relative; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
.footer .brand-type b{ color:#fff; }
.footer .brand-type small{ color:var(--glint); }
.foot-grid h3{ font-family:var(--util); font-size:.9rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--glint); margin-bottom:18px; }
.foot-links{ list-style:none; margin:0; padding:0; }
.foot-links li{ padding:6px 0; }
.foot-links a{ text-decoration:none; color:var(--dim-inv); font-size:.98rem; }
.foot-links a:hover{ color:#fff; }
.tag{ font-family:var(--display); font-size:1.08rem; color:var(--sand); margin-top:20px; }
.tag em{ font-style:italic; color:var(--copper-hi); }
.legal{ margin-top:clamp(42px,5vw,66px); border-top:1px solid var(--line-inv); padding-block:24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:.88rem; }
.legal a{ color:var(--dim-inv); text-decoration:none; }
.legal a:hover{ color:#fff; }

/* ---------------------------------------------------------------
   16. STICKY MOBILE BAR
--------------------------------------------------------------- */
/* (sticky mobile bar removed Aug 6 2026 — it fought iOS Safari's chrome
   all day and the site's in-page CTAs carry mobile conversion) */

/* ---------------------------------------------------------------
   17. MOTION
--------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity 1.4s ease, transform 1.4s cubic-bezier(.22,.61,.36,1); } /* slowed + softened per owner: drift in, don't pop */
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }

  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* ---------------------------------------------------------------
   18. VIDEO HERO + SUBPAGE HERO + FORM BANNER (multi-page build)
--------------------------------------------------------------- */
.hero-video-wrap{ background:var(--navy); }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-video{ width:100%; height:100%; object-fit:cover; }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(24,30,20,.80) 0%, rgba(24,30,20,.60) 100%);
}
.hero-video-wrap .wrap{ z-index:3; }
.hero-video-wrap .grade{ z-index:3; }
.hero-video-wrap h1{ color:#fff; }
.hero-video-wrap h1 .blue{ background:linear-gradient(100deg, var(--sand) 0%, var(--glint) 40%, var(--copper-hi) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-video-wrap h1 .thin{ color:#EDE6D5; }
.hero-video-wrap h1 .thin em{ color:var(--copper-lite); }
.hero-video-wrap .eyebrow{ color:#D8C39C; }
.hero-video-wrap .eyebrow::after{ background:#D8C39C; opacity:.6; }
/* keep text readable over any frame of the video */
.hero-video-wrap h1,
.hero-video-wrap .hero-lede,
.hero-video-wrap .eyebrow{ text-shadow:0 1px 20px rgba(20,26,16,.45); }
.hero-video-wrap .hero-lede{ color:rgba(238,243,246,.85); }
.hero-video-wrap .btn-ghost{ border-color:rgba(248,244,236,.5); color:#fff; background:rgba(255,255,255,.06); }
.hero-video-wrap .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.12); color:#fff; }

.page-hero{ background:linear-gradient(170deg, var(--forest-deep) 0%, var(--forest-mid) 72%, var(--forest) 165%); padding-block:clamp(60px,8vw,104px); text-align:center; }
.page-hero h1{ color:#fff; font-size:clamp(2.1rem,4.6vw,3.6rem); }
.page-hero .eyebrow{ justify-content:center; color:var(--glint); }
.page-hero .eyebrow::after{ display:none; }
.page-hero p{ color:rgba(238,243,246,.78); max-width:60ch; margin:16px auto 0; font-size:clamp(1.02rem,1.3vw,1.18rem); }

.form-banner{ max-width:var(--wrap); margin:0 auto clamp(24px,3vw,40px); padding:16px 20px; border-radius:6px; font-weight:500; }
.form-banner.ok{ background:rgba(61,79,58,.12); border:1px solid rgba(61,79,58,.35); color:var(--forest); }
.form-banner.err{ background:rgba(160,89,43,.09); border:1px solid rgba(160,89,43,.35); color:var(--copper); }

/* ---------------------------------------------------------------
   ENGAGEMENT LAYER — hero card links, carousel, timeline, curves,
   photo section, stagger. All motion is slow and subtle (heritage).
--------------------------------------------------------------- */

/* hero card rows are links now */
.hc-links{ list-style:none; margin:0; padding:0; }
.hc-links li + li{ border-top:1px solid var(--line); }
.hc-links a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 2px; text-decoration:none; color:var(--ink);
  transition:padding-left .25s ease, color .25s ease;
}
.hc-links a b{ font-weight:600; }
.hc-links a span{ color:var(--copper); opacity:0; transform:translateX(-6px); transition:all .25s ease; }
.hc-links a:hover{ padding-left:8px; color:var(--copper); }
.hc-links a:hover span{ opacity:1; transform:none; }
.hc-call{
  display:block; margin-top:18px; font-size:.92rem; color:var(--dim);
  text-decoration:none; border-top:1px solid var(--line); padding-top:14px;
  transition:color .25s ease;
}
.hc-call:hover{ color:var(--copper); }

/* services carousel (homepage) */
.svc-carousel{ position:relative; }
.svc-track{
  display:flex; gap:clamp(18px,2.4vw,28px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 4px 22px;
  scroll-padding-left:4px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.svc-track::-webkit-scrollbar{ display:none; }
/* cards sit at ~86% so the next one peeks in, cueing the flip */
.svc-track .svc{
  flex:0 0 86%; width:86%; min-width:0;
  scroll-snap-align:start;
}
@media (min-width:760px){
  /* two and a bit cards visible on tablet */
  .svc-track .svc{ flex-basis:46%; width:46%; }
}
@media (min-width:1100px){
  /* three cards, with a peek of the next: slightly under a third */
  .svc-track .svc{ flex-basis:31.5%; width:31.5%; }
}
.svc-gridwrap{ position:relative; }
.svc-grid-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); }
.svc-grid-inner .svc{ min-width:0; }
@media (max-width:980px){ .svc-grid-inner{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .svc-grid-inner{ grid-template-columns:1fr; } }
.car-btn{
  position:absolute; top:-74px; right:0; z-index:3;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-size:1.1rem; cursor:pointer; transition:all .25s ease;
  display:grid; place-items:center;
}
.car-btn:hover{ background:var(--copper); border-color:var(--copper); color:var(--paper); }
.car-prev{ right:56px; }
@media (max-width:700px){
  /* arrows drop below the track, centered, on mobile. 54px buttons need
     more than 56px of room or they sit flush against the next section and
     collide with the sticky call bar as you scroll past. */
  .svc-carousel{ padding-bottom:74px; }
  .car-btn{ top:auto; bottom:6px; }
  .car-next{ right:calc(50% - 52px); }
  .car-prev{ right:calc(50% + 6px); }
}

/* the timeline — a line that draws itself as you scroll */
.timeline{
  list-style:none; margin:56px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,40px);
  position:relative; counter-reset:tstep;
}
.timeline::before{
  content:""; position:absolute; top:7px; left:0; right:0; height:2px;
  background:var(--line);
}
.timeline::after{
  content:""; position:absolute; top:7px; left:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--copper), var(--copper-hi));
  transform:scaleX(var(--tprog, 0)); transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.33,.9,.36,1);
  box-shadow:0 0 10px rgba(165,106,52,.35);
}
/* bright cap that rides the leading edge of the drawn line */
.timeline .tprogress-cap{
  position:absolute; top:7px; left:0; width:12px; height:12px; margin:-5px 0 0 -6px;
  border-radius:50%; background:var(--copper-hi); z-index:3; pointer-events:none;
  left:calc(var(--tprog,0) * 100%);
  box-shadow:0 0 14px 3px rgba(188,129,73,.5);
  opacity:0; transition:left 1.1s cubic-bezier(.33,.9,.36,1), opacity .4s ease;
}
.timeline.drawing .tprogress-cap{ opacity:1; }
.timeline.complete .tprogress-cap{ opacity:0; }
.tstep{ position:relative; padding-top:34px; }
/* the 01-04 numerals are gone: the drawing line + dots + copper-glow step
   titles already sequence the process, and Katie disliked the numbers in
   both placements tried. Do not reintroduce. */
.tdot{
  position:absolute; top:0; left:0; width:16px; height:16px; border-radius:50%;
  background:var(--paper); border:2px solid var(--sage); z-index:2;
  transform:scale(.5); opacity:.4;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1) .1s, opacity .4s ease .1s, background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.tstep.active .tdot{
  background:var(--copper); border-color:var(--copper);
  transform:scale(1); opacity:1;
  box-shadow:0 0 0 6px rgba(165,106,52,.14);
}
/* the most recently activated dot keeps a soft pulse so the line feels alive */
.tstep.active .tdot{ animation:tpulse 2.6s ease-in-out infinite; }
.tstep.active.settled .tdot{ animation:none; box-shadow:0 0 0 5px rgba(165,106,52,.1); }
@keyframes tpulse{
  0%,100%{ box-shadow:0 0 0 5px rgba(165,106,52,.12); }
  50%{ box-shadow:0 0 0 9px rgba(165,106,52,.05); }
}
.tstep h3{ font-family:var(--body); font-size:1.12rem; font-weight:600; letter-spacing:.01em; position:relative; z-index:1; }
.tstep p{ margin-top:8px; font-size:.95rem; color:var(--dim); position:relative; z-index:1; }
.tstep{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.tstep.active{ opacity:1; transform:none; }
/* the big ghost number drifts up as its step activates */
@media (prefers-reduced-motion: reduce){
  .tstep.active .tdot{ animation:none; }
}
@media (max-width:820px){
  .timeline{ grid-template-columns:1fr; gap:30px; }
  .timeline::before,.timeline::after{ top:0; bottom:0; left:7px; right:auto; width:2px; height:auto; }
  .timeline::after{ transform:scaleY(var(--tprog,0)); transform-origin:top center; height:100%; }
  .timeline .tprogress-cap{ left:7px; top:calc(var(--tprog,0) * 100%); transition:top 1.1s cubic-bezier(.33,.9,.36,1), opacity .4s ease; }
  .tstep{ padding-top:0; padding-left:38px; }
  .tdot{ top:4px; }

}

/* curved section transitions */
/* curve divider CSS removed — markup was deleted; nothing should recreate arcs */
.photo-oak{ padding-block:calc(var(--sec) + clamp(26px,4.5vw,60px)); }

/* the photo overlay section — drop images/section-oak.jpg in and this
   lights up; until then the green gradient carries it */
/* Solid green field. The section-oak.jpg layer is commented out on purpose:
   until a real photograph exists, the grey labelled placeholder shows through
   the green wash and reads as a mistake. Uncomment the url() line once a real
   image is in place. */
.photo-oak{
  position:relative;
  /* trees OVER the green, not instead of it: the green wash stays dominant
     (~90%) and the tree photo ghosts through beneath it. Dial the three
     alpha values up for more green / down for more trees. */
  background:
    linear-gradient(175deg, rgba(35,43,30,.92) 0%, rgba(42,51,37,.88) 55%, rgba(35,43,30,.93) 100%),
    url('../images/section-oak.jpg') center/cover no-repeat,
    linear-gradient(175deg, var(--green-deep) 0%, #2A3325 55%, var(--green-deep) 100%);
}
/* (woodgrain texture removed from the dark section at Katie's request) */
.photo-oak > .wrap{ position:relative; z-index:1; }

/* stagger: children of a revealed group cascade in */
.reveal.in .svc:nth-child(1){ transition-delay:.1s; }
.reveal.in .svc:nth-child(2){ transition-delay:.28s; }
.reveal.in .svc:nth-child(3){ transition-delay:.46s; }
.reveal.in .svc:nth-child(4){ transition-delay:.64s; }
.reveal.in .svc:nth-child(5){ transition-delay:.82s; }
.reveal.in .svc:nth-child(6){ transition-delay:1s; }

/* service + city page building blocks */
.page-body{ padding-block:var(--sec); }
.split{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,5vw,70px); align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.check-list{ list-style:none; margin:18px 0 0; padding:0; }
.check-list li{
  padding:12px 0 12px 30px; border-bottom:1px solid var(--line); position:relative;
  font-size:1rem; color:var(--ink);
}
.check-list li::before{
  content:""; position:absolute; left:2px; top:18px; width:12px; height:7px;
  border-left:2px solid var(--copper); border-bottom:2px solid var(--copper);
  transform:rotate(-45deg);
}
.side-card{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:30px 28px; box-shadow:var(--shadow-soft); position:sticky; top:96px;
}
.side-card h3{ font-family:var(--util); font-size:1rem; letter-spacing:.2em; text-transform:uppercase; color:var(--copper); }
.side-card .num{ font-family:var(--util); font-size:1.7rem; font-weight:700; color:var(--ink); display:block; margin-top:8px; text-decoration:none; }
.side-card p{ font-size:.93rem; color:var(--dim); margin-top:10px; }
.side-card .btn{ width:100%; text-align:center; margin-top:16px; }
.crumbs{ font-family:var(--util); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; }
.crumbs a{ color:rgba(244,239,227,.75); text-decoration:none; }
.crumbs a:hover{ color:var(--paper); }
.crumbs span{ color:rgba(244,239,227,.5); margin-inline:8px; }
.xlink{ margin-top:34px; padding-top:22px; border-top:1px solid var(--line); font-size:.95rem; }
.xlink a{ color:var(--copper); font-weight:500; }

/* ---------------------------------------------------------------
   BLOG — index cards, post body, responsive video, money callout
--------------------------------------------------------------- */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,30px); }
@media (max-width:900px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .post-grid{ grid-template-columns:1fr; } }
.post-card{
  display:flex; flex-direction:column; gap:12px; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:28px 26px; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-soft); transition:transform .3s ease, box-shadow .3s ease;
}
.post-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.post-card-cat{ font-family:var(--util); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--copper); }
.post-card h2{ font-size:1.32rem; line-height:1.2; }
.post-card p{ font-size:.95rem; color:var(--dim); flex:1; }
.post-card-meta{ font-family:var(--util); font-size:.8rem; letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase; }

.post-hero .post-meta{ font-family:var(--util); letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; color:rgba(244,239,227,.72); margin-top:10px; }
.post-body{ padding-block:clamp(44px,6vw,72px); }
.post-body h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin:38px 0 4px; }
.post-body p{ font-size:1.08rem; line-height:1.7; color:var(--ink); margin:16px 0; }
.post-body .check-list{ margin:18px 0; }
.post-body blockquote{
  margin:30px 0; padding:20px 26px; border-left:3px solid var(--copper);
  background:var(--paper-2); border-radius:0 6px 6px 0;
  font-family:var(--display); font-size:1.28rem; line-height:1.4; color:var(--ink);
}

/* responsive 16:9 video */
.post-video{ margin:8px 0 30px; }
.video-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-soft); background:var(--green-deep); }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.post-video figcaption{ margin-top:10px; font-size:.9rem; color:var(--dim); font-style:italic; text-align:center; }
.video-placeholder .video-frame{
  display:grid; place-items:center; text-align:center; color:rgba(244,239,227,.85);
  background:linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);
  border:1px dashed rgba(244,239,227,.3);
}
.video-placeholder .video-frame span{ font-family:var(--util); letter-spacing:.14em; text-transform:uppercase; font-size:.9rem; line-height:1.9; }
.video-placeholder .video-frame em{ color:var(--copper-hi); font-style:normal; letter-spacing:.04em; text-transform:none; font-size:1rem; }

.post-cta{
  margin:44px 0; padding:30px 30px 34px; border-radius:10px;
  background:var(--card); border:1px solid var(--copper);
}
.post-cta h3{ font-size:1.5rem; margin:4px 0 6px; }
.post-cta p{ color:var(--dim); margin-bottom:18px; font-size:1rem; }

.post-social{ margin:34px 0; padding:18px 0; border-block:1px solid var(--line); text-align:center; }
.post-social p{ color:var(--dim); }
.post-social a{ color:var(--copper); font-weight:500; }

.post-related{ margin-top:40px; }
.post-related ul{ list-style:none; margin:14px 0 0; padding:0; }
.post-related li{ border-top:1px solid var(--line); }
.post-related a{
  display:flex; justify-content:space-between; gap:14px; padding:16px 2px;
  text-decoration:none; color:var(--ink); font-family:var(--display); font-size:1.2rem;
  transition:padding-left .25s ease, color .25s ease;
}
.post-related a span{ color:var(--copper); }
.post-related a:hover{ padding-left:8px; color:var(--copper); }

/* ---------------------------------------------------------------
   CONVERSION PASS — glass help panel, trust icons, card imagery,
   photo frames, work gallery
--------------------------------------------------------------- */

/* Same-day help: dark glass panel over the video */
.hero-card.hero-help{
  background:rgba(20,26,16,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(244,239,227,.16);
  border-radius:10px;
  box-shadow:0 24px 60px -24px rgba(10,14,8,.6);
  padding:26px 26px 22px;
}
.hero-help .hh-eyebrow{
  font-family:var(--util); font-size:.86rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--copper-hi);
  margin:0 0 6px;
}
.hero-help .hc-links li + li{ border-top:1px solid rgba(244,239,227,.12); }
.hero-help .hc-links a{ color:var(--paper); padding:12px 2px; }
.hero-help .hc-links a b{ font-weight:500; }
.hero-help .hc-links a span{ color:var(--copper-lite); }
.hero-help .hc-links a:hover{ color:var(--copper-lite); }
.hero-help .hc-call{
  border-top:1px solid rgba(244,239,227,.14); margin-top:10px; padding-top:16px;
  display:block; text-decoration:none; color:var(--paper);
}
.hero-help .hh-call-label{ display:block; font-family:var(--util); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,227,.6); }
.hero-help .hh-call-num{ display:block; font-family:var(--util); font-size:1.5rem; font-weight:700; letter-spacing:.06em; color:var(--paper); margin-top:2px; transition:color .25s ease; }
.hero-help .hh-call-sub{ display:block; font-size:.85rem; color:rgba(244,239,227,.55); margin-top:2px; }
.hero-help .hc-call:hover .hh-call-num{ color:var(--copper-lite); }

/* trust bar with icons */
/* trust styles consolidated at end of file */

/* service card image tops */
.svc-img{
  display:block; height:150px;
  margin:-38px -34px 4px; border-radius:10px 10px 0 0;
  background-size:cover; background-position:center;
  position:relative;
}
.svc-img::after{
  content:""; position:absolute; inset:0; border-radius:10px 10px 0 0;
  background:linear-gradient(180deg, rgba(35,43,30,0) 55%, rgba(35,43,30,.25) 100%);
}
.svc:hover .svc-img{ filter:saturate(1.06); }

/* dark-section photo frame + credentials */
.photo-frame{ margin:0; }
/* the AI crew photo reads busy against the dark section; pull its
   saturation and contrast down so it sits back as part of the page */
.pf-img{
  filter:saturate(.72) contrast(.92) brightness(.94);

  width:100%; aspect-ratio:4/5; border-radius:12px;
  background-size:cover; background-position:center;
  border:1px solid rgba(244,239,227,.16);
  box-shadow:0 30px 70px -30px rgba(10,14,8,.7);
  position:relative; overflow:hidden;
}
.pf-img::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(244,239,227,.06), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(20,26,16,.35));
}
.cred-badges{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
.cred-badges li{
  display:flex; align-items:center; gap:14px;
  background:rgba(244,239,227,.06);
  border:1px solid rgba(244,239,227,.14);
  border-radius:8px; padding:13px 16px;
}
.cb-ico{ width:36px; height:36px; flex:none; display:grid; place-items:center; color:var(--copper-hi); }
.cb-ico svg{ width:22px; height:22px; }
.cred-badges b{ display:block; font-size:.98rem; color:var(--paper); }
.cred-badges span{ display:block; font-size:.85rem; color:rgba(244,239,227,.6); }

/* work gallery */
.work{ background:var(--paper); }
.work-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,22px); margin-top:44px; }
@media (max-width:1000px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .work-grid{ grid-template-columns:1fr; } }
.work-tile{ margin:0; min-width:0; }
.wt-img{
  aspect-ratio:4/3; border-radius:10px;
  background-size:cover; background-position:center;
  border:1px solid rgba(35,43,30,.12);
  position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.wt-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(20,26,16,.3));
}
.work-tile:hover .wt-img{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(35,43,30,.35); }
.work-tile figcaption{
  margin-top:10px; font-family:var(--util); font-size:.86rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}

/* ===============================================================
   PREMIUM PASS — editorial typography, tactile paper, refined
   materials. Later rules override earlier ones by design.
=============================================================== */

/* more air everywhere */
:root{ --sec: clamp(96px, 12vw, 176px); }

/* paper grain: a whisper of texture on every surface */
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.035; mix-blend-mode:multiply;
}

/* editorial type scale */
h1{ font-size:clamp(3rem,7vw,6.2rem); letter-spacing:-.02em; line-height:1.02; }
h2{ font-size:clamp(2.2rem,4.4vw,3.8rem); letter-spacing:-.018em; line-height:1.06; }
h1 em, h2 em{ font-style:italic; font-weight:500; color:var(--copper); }
.on-dark h2 em, .photo-oak h2 em{ color:var(--copper-lite); }
.hero-video-wrap h1 em{ color:var(--copper-lite); }
.sec-head .lede{ max-width:58ch; }
.eyebrow{ letter-spacing:.3em; font-size:.8rem; }
::selection{ background:var(--copper); color:var(--paper); }

/* refined buttons: squared, letterspaced, confident */
.btn{
  border-radius:6px; padding:17px 34px;
  font-size:.85rem; letter-spacing:.24em;
}
.btn-ghost{
  background:transparent; border:1px solid rgba(35,43,30,.4); color:var(--ink);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn-ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); transform:none; }
.hero-video-wrap .btn-ghost, .on-dark .btn-ghost, .photo-oak .btn-ghost{
  border-color:rgba(244,239,227,.55); color:var(--paper); background:transparent;
}
.hero-video-wrap .btn-ghost:hover, .on-dark .btn-ghost:hover, .photo-oak .btn-ghost:hover{
  background:var(--paper); border-color:var(--paper); color:var(--ink);
}

/* nav: quiet luxury */
.nav{
  background:rgba(244,239,227,.86);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(35,43,30,.1);
}
.menu a{
  font-family:var(--util); font-size:.92rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  position:relative; padding-block:6px;
}
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--copper); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.menu a:hover::after{ transform:scaleX(1); }
.topbar{ border-bottom:1px solid rgba(35,43,30,.08); }
.topbar .wrap{ font-family:var(--util); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; }
.topbar a{ color:var(--copper); }

/* stats: serif numerals with hairline dividers */
.stat-row{ gap:0; }
.stat{ border-left:1px solid rgba(244,239,227,.2); padding-left:clamp(18px,2.4vw,30px); padding-right:clamp(18px,2.4vw,30px); }
.stat:first-child{ border-left:none; padding-left:0; }
.stat b{ font-size:clamp(2.6rem,4vw,3.8rem); color:var(--paper); font-weight:600; }
.stat span{ font-family:var(--util); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,239,227,.6); }

/* reviews: editorial pull quotes, not boxes */
.quotes{ gap:0; }
.quote{
  background:transparent; border:none; box-shadow:none; border-radius:0;
  border-left:1px solid var(--line);
  padding:14px clamp(24px,3vw,44px);
}
.quote:first-child{ border-left:none; padding-left:0; }
.quote::before{
  content:"\201C"; position:static; display:block;
  font-family:var(--display); font-size:4.4rem; line-height:.6;
  color:var(--copper); opacity:.4; margin-bottom:14px;
}
.quote blockquote{
  font-family:var(--display); font-size:1.34rem; line-height:1.5;
  color:var(--ink); margin:0;
}
.quote .stars{ color:var(--copper); font-size:.8rem; letter-spacing:.32em; margin:18px 0 8px; }
.quote cite{
  font-style:normal; font-family:var(--util); font-size:.82rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
@media (max-width:900px){
  .quote{ border-left:none; border-top:1px solid var(--line); padding:26px 0; }
  .quote:first-child{ border-top:none; padding-top:0; }
}

/* faq: hairlines and serif, no boxes */
.faq details{
  background:transparent; border:none; border-radius:0;
  border-bottom:1px solid var(--line);
  padding:0; margin:0; box-shadow:none;
}
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
  font-family:var(--display); font-size:clamp(1.2rem,2vw,1.45rem); font-weight:600;
  padding:24px 44px 24px 0; cursor:pointer; position:relative; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; border:none; width:auto; height:auto;
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:var(--body); font-size:1.7rem; font-weight:300; color:var(--copper);
  transition:transform .3s ease;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); border:none; }
.faq .answer{ padding:0 0 26px; }
.faq .answer p{ max-width:64ch; color:var(--dim); font-size:1.02rem; line-height:1.7; }

/* the CTA band: a centered statement */
.band{ padding-block:clamp(80px,10vw,130px); }
.band .wrap{ flex-direction:column; text-align:center; gap:30px; }
.band h2{ max-width:24ch; margin-inline:auto; font-size:clamp(2rem,3.8vw,3.1rem); }
.band::before,.band::after{ display:none; }

/* footer: spacious */
.footer{ padding-block:clamp(84px,9vw,124px) 0; }
.footer a{ transition:color .25s ease; }
.footer a:hover{ color:var(--copper-hi); }

/* hero copy rhythm */
.hero-lede{ font-size:1.1rem; line-height:1.75; max-width:56ch; }

/* service card images get more presence */
.svc-img{ height:172px; }

/* ===============================================================
   MOTION + TRUST LAYER
=============================================================== */

/* slow keyword ribbon — elegant, pauses on hover */
.ribbon{
  overflow:hidden; border-block:1px solid rgba(35,43,30,.1);
  background:var(--paper); padding-block:16px;
}
.ribbon-track{
  display:flex; white-space:nowrap; width:max-content;
  animation:ribbon-slide 46s linear infinite;
}
.ribbon:hover .ribbon-track{ animation-play-state:paused; }
.ribbon-track span{
  font-family:var(--util); font-size:.86rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft);
  padding-right:8px;
}
.ribbon-track span span{ color:var(--copper); font-size:.5rem; vertical-align:middle; padding:0 14px; }
@keyframes ribbon-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ribbon-track{ animation:none; } }

/* hero scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:4;
  text-decoration:none;
}
.sc-line{ width:1px; height:44px; background:linear-gradient(180deg, transparent, rgba(244,239,227,.7)); }
.sc-drop{
  width:8px; height:11px; background:var(--copper-hi);
  clip-path:path("M4 0C4 3 8 5 8 7.5a4 4 0 01-8 0C0 5 4 3 4 0Z");
  animation:cue-drip 2.4s ease-in-out infinite;
}
@keyframes cue-drip{
  0%,100%{ transform:translateY(0); opacity:1; }
  50%{ transform:translateY(7px); opacity:.6; }
}
@media (prefers-reduced-motion: reduce){ .sc-drop{ animation:none; } }
@media (max-width:700px){ .scroll-cue{ display:none; } }

/* nav tightens when stuck */
.nav.stuck{
  background:rgba(244,239,227,.95);
  box-shadow:0 1px 0 rgba(35,43,30,.12), 0 12px 30px -18px rgba(35,43,30,.18);
}

/* button sheen sweep on primary */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; width:40%;
  left:-60%; transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,248,238,.28), transparent);
  transition:left .6s ease;
}
.btn-primary:hover::after{ left:130%; }

/* gallery tiles get a slow zoom */
.work-tile:hover .wt-img{ transform:translateY(-4px) scale(1.02); }
.wt-img{ transition:transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease; }

/* sec-head elements cascade in */
.sec-head.reveal .eyebrow{ transition-delay:0s; }
.sec-head.reveal h2{ opacity:0; transform:translateY(10px); transition:opacity 1.2s ease .2s, transform 1.2s cubic-bezier(.22,.61,.36,1) .2s; }
.sec-head.reveal .lede{ opacity:0; transform:translateY(8px); transition:opacity 1.2s ease .45s, transform 1.2s cubic-bezier(.22,.61,.36,1) .45s; }
.sec-head.reveal.in h2, .sec-head.reveal.in .lede{ opacity:1; transform:none; }

/* owner's note — the letter */
.owner-note{ background:var(--paper-2); }
.on-grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,54px); align-items:start; }
@media (max-width:700px){ .on-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; } }
.on-portrait{
  width:clamp(120px,14vw,168px); aspect-ratio:1; border-radius:50%;
  background-size:cover; background-position:center;
  border:1px solid rgba(35,43,30,.16);
  box-shadow:0 16px 40px -16px rgba(35,43,30,.3);
}
.on-letter .on-body{
  font-family:var(--display); font-size:clamp(1.2rem,2vw,1.45rem);
  line-height:1.55; color:var(--ink); margin-top:18px;
}
.on-sig{
  margin-top:26px; font-family:var(--display); font-style:italic;
  font-size:1.5rem; color:var(--ink);
}
.on-sig span{
  display:block; font-family:var(--util); font-style:normal; font-size:.8rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px;
}

/* ===============================================================
   KATIE'S HOMEPAGE EDIT PASS
=============================================================== */

/* wave separators */

/* Need help today: back to a solid readable card (glass failed on video) */
.hero-card.hero-help{
  background:var(--card);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid rgba(35,43,30,.16);
  border-top:2px solid var(--copper);
  box-shadow:0 30px 70px -28px rgba(10,14,8,.55);
}
.hero-help .hh-eyebrow{ color:var(--copper); }
.hero-help .hc-links li + li{ border-top:1px solid var(--line); }
.hero-help .hc-links a{ color:var(--ink); }
.hero-help .hc-links a span{ color:var(--copper); }
.hero-help .hc-links a:hover{ color:var(--copper); }
.hero-help .hc-call{ border-top:1px solid var(--line); color:var(--ink); }
.hero-help .hh-call-label{ color:var(--ink-soft); }
.hero-help .hh-call-num{ color:var(--ink); }
.hero-help .hh-call-sub{ color:var(--dim); }
.hero-help .hc-call:hover .hh-call-num{ color:var(--copper); }

/* trust bar: icon on top, centered, balanced grid at every width */
/* trust styles consolidated at end of file */

/* carousel: obvious affordance — edge fade + stronger arrows */
.svc-carousel::after{
  content:""; position:absolute; top:0; bottom:22px; right:-2px; width:110px;
  background:linear-gradient(90deg, rgba(236,230,214,0), #ECE6D6 88%);
  pointer-events:none; z-index:2;
}
@media (max-width:700px){ .svc-carousel::after{ width:64px; } }
.car-btn{
  width:54px; height:54px; font-size:1.25rem;
  border:1px solid var(--copper); color:var(--copper); background:var(--card);
  z-index:3;
}
.car-btn:hover{ background:var(--copper); color:var(--paper); }

/* stats: real differentiators, never 2+1 wrap */
.stat-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:34px;
}
.stat{ border-left:1px solid rgba(244,239,227,.2); padding:4px clamp(18px,2.4vw,30px); }
.stat:first-child{ border-left:none; padding-left:0; }
.stat b{ display:block; font-size:clamp(2rem,3.2vw,2.9rem); line-height:1.1; }
.stat span{ display:block; margin-top:8px; max-width:24ch; }
@media (max-width:760px){
  .stat-row{ grid-template-columns:1fr; gap:18px; }
  .stat{ border-left:none; border-top:1px solid rgba(244,239,227,.2); padding:18px 0 0; }
  .stat:first-child{ border-top:none; padding-top:0; }
}

/* timeline: walk-through feel — future steps wait dim, the current step
   glows copper until the next one takes over */
.tstep{ opacity:0; }
.tstep h3{ transition:color .5s ease, transform .5s ease; }
.tstep.active:not(.settled) h3{ color:var(--copper); }
.tstep.active:not(.settled) .tdot{ box-shadow:0 0 0 8px rgba(165,106,52,.18); }
.tstep.active.settled h3{ color:var(--ink); }

/* spacing: close the oversized gap between process and recent work */
#process{ padding-bottom:clamp(64px,7vw,100px); }
.work{ padding-top:clamp(64px,7vw,100px); }

/* owner's note goes deep green — the dark moment in the lower page */
.owner-note{
  background:linear-gradient(170deg, #232B1E 0%, #2C3424 60%, #232B1E 100%);
}
.owner-note .eyebrow{ color:var(--copper-hi); }
.owner-note .on-body{ color:var(--paper); }
.owner-note .on-sig{ color:var(--paper); }
.owner-note .on-sig span{ color:rgba(244,239,227,.6); }
.on-portrait{ border-color:rgba(244,239,227,.25); }

/* ===============================================================
   EDIT PASS 3 — brighter paper, brand-board colors with jobs,
   canonical trust bar, grid services w/ mobile swipe, compact
   differentiators, ornament dividers
=============================================================== */

/* brighter, whiter paper (was too beige) + deep blue enters as the
   water-only accent from the brand board */
:root{
  --paper:   #FAF8F2;   /* page ground — bright warm white */
  --paper-2: #F2EFE7;   /* alternate sections */
  --card:    #FFFEFB;   /* cards — bright, a warm hair off pure white */
  --mist:    #F2EFE7;
  --charcoal:#23262B;   /* brand-board charcoal — the second dark */
  --blue:    #23425C;   /* brand-board deep blue — WATER moments only */
}
body{ background:var(--paper); }
.trust{ background:var(--card); }
.work{ background:var(--paper); }
.owner-note{ /* stays deep green */ }
.footer{ background:var(--charcoal); }   /* charcoal dark ≠ green dark */

/* blue where water lives */
.sc-drop{ background:var(--blue); }
.eyebrow::before{ background:var(--blue); }
.ribbon-track span span{ color:var(--blue); }

/* trust bar — ONE canonical block, icons dead-center, icon on top */
.trust .wrap{
  display:grid !important; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,3vw,36px); padding-block:36px; align-items:start;
}
@media (max-width:860px){ .trust .wrap{ grid-template-columns:repeat(2,1fr); row-gap:30px; } }
.trust-item{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:13px; border:none; padding:0;
}
/* refined marks: no filled bubble, finer stroke, larger optical size,
   a short copper hairline seats each icon */
.ti-ico{
  width:auto; height:auto; flex:none; line-height:0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--green-deep); background:none; border:0; border-radius:0;
}
.ti-ico::after{ content:""; width:26px; height:1px; background:var(--copper); opacity:.7; }
.ti-ico svg{ width:44px; height:44px; display:block; margin:0; }
.trust-item > div{ display:flex; flex-direction:column; gap:2px; }
.trust-item b{ font-size:1.22rem; line-height:1.08; }
.trust-item span{ font-size:.85rem; color:var(--ink-soft); }

/* services: all six visible in a grid on desktop; swipe w/ edge
   fades on mobile only */
@media (min-width:861px){
  .svc-track{
    display:grid; grid-template-columns:repeat(3,1fr);
    overflow:visible; padding:6px 0 0; gap:clamp(18px,2.4vw,28px);
  }
  .svc-track .svc{ width:auto; flex:none; max-width:none; }
  .car-btn{ display:none; }
  .svc-carousel::after, .svc-carousel::before{ display:none; }
  .svc-carousel{ padding-bottom:0; }
}
@media (max-width:860px){
  .svc-carousel::before{
    content:""; position:absolute; top:0; bottom:22px; left:-2px; width:56px;
    background:linear-gradient(270deg, rgba(242,239,231,0), var(--paper-2) 88%);
    pointer-events:none; z-index:2;
  }
  .svc-carousel::after{
    background:linear-gradient(90deg, rgba(242,239,231,0), var(--paper-2) 88%);
    width:56px; bottom:22px;
  }
}

/* differentiators: compact icon badges, minimal text */
.diff-row{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,26px); margin-top:36px;
}
/* mobile: each credential is a horizontal row (icon left, text right)
   instead of three tall skinny columns */
@media (max-width:760px){
  .diff-row{ grid-template-columns:1fr; gap:10px; }
  .diff{
    display:grid; grid-template-columns:auto 1fr;
    column-gap:16px; align-items:center;
    text-align:left; padding:14px 18px;
  }
  .d-ico{ grid-row:span 2; width:46px; height:46px; }
  .d-ico svg{ width:23px; height:23px; }
  .diff b{ margin-top:0; font-size:1.24rem; }
  .diff .d-sub{ margin-top:2px; font-size:.7rem; letter-spacing:.11em; }
}
/* stacked, centered credential tiles: icon over number over label.
   The old icon-beside-text row kept mis-aligning; centering the whole
   stack removes the failure mode instead of patching it. */
.diff{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:0;
  background:rgba(250,248,242,.07);
  border:1px solid rgba(250,248,242,.16);
  border-radius:8px; padding:24px 16px 20px;
}
.d-ico{
  width:58px; height:58px; flex:none;
  display:grid; place-items:center; line-height:0;
  color:var(--copper-lite);
  background:rgba(250,248,242,.08);
  border:1px solid rgba(250,248,242,.18);
  border-radius:50%;
}
.d-ico svg{ width:28px; height:28px; display:block; }
.diff b{
  display:block; margin-top:14px;
  font-family:var(--display); font-size:1.5rem; font-weight:600;
  letter-spacing:.01em; color:var(--paper); line-height:1.1;
}
.diff .d-sub{
  display:block; margin-top:5px;
  font-family:var(--util); font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(250,248,242,.66); line-height:1.4;
}

/* quiet ornament divider (hairline — drop — hairline) */
.orn{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding-block:6px; background:transparent;
}
.orn span{ height:1px; width:min(120px,26vw); background:rgba(35,43,30,.16); }
.orn i{
  width:8px; height:11px; flex:none; background:var(--blue); opacity:.75;
  clip-path:path("M4 0C4 3 8 5 8 7.5a4 4 0 01-8 0C0 5 4 3 4 0Z");
}

/* ---------------------------------------------------------------
   CITY FACTS TABLE / SPINDLE CHIPS / REALTOR BLOCK
   Added with the SEO brief build. Hairline definition, no soft
   drop shadows, copper reserved for accents only.
--------------------------------------------------------------- */
.facts{
  margin:38px 0 8px;
  border:1px solid var(--line);
  border-top:2px solid var(--copper);
  background:var(--card);
  border-radius:var(--r);
  padding:26px 26px 8px;
}
.facts-title{
  margin:0 0 4px;
  font-family:var(--display);
  font-size:clamp(1.3rem,2.1vw,1.62rem);
  font-weight:500;
  letter-spacing:.01em;
}
.facts-list{ margin:0; }
.facts-row{
  display:grid;
  grid-template-columns:minmax(150px,26%) 1fr;
  gap:8px 26px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.facts-row:last-child{ border-bottom:0; }
.facts-row dt{
  font-family:var(--util);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.86rem;
  color:var(--dim);
  padding-top:2px;
}
.facts-row dd{ margin:0; font-size:.99rem; line-height:1.62; color:var(--ink); }
@media (max-width:640px){
  .facts{ padding:22px 20px 6px; }
  .facts-row{ grid-template-columns:1fr; gap:2px; padding:12px 0; }
}

.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.chip{
  display:inline-block;
  padding:8px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
  color:var(--ink);
  text-decoration:none;
  font-family:var(--util);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.84rem;
  line-height:1.25;
  transition:border-color .22s ease, color .22s ease, background .22s ease;
}
.chip:hover{ border-color:var(--copper); color:var(--copper); background:var(--paper-2, var(--mist)); }

.realtor-block{
  margin:44px 0 0;
  padding:30px 28px;
  background:var(--mist);
  border-left:2px solid var(--copper);
  border-radius:var(--r);
}
.realtor-block h2{ margin-top:0; }
.realtor-block p{ font-size:1.02rem; }
.realtor-block .check-list li strong{ font-weight:600; }
@media (max-width:640px){ .realtor-block{ padding:24px 20px; } }

/* Legal pages (privacy, terms) */
.legal-copy h2{
  margin:38px 0 10px;
  font-family:var(--display);
  font-size:clamp(1.28rem,2vw,1.56rem);
  font-weight:500;
}
.legal-copy h2:first-of-type{ margin-top:26px; }
.legal-copy p{ margin:0 0 16px; font-size:1.02rem; line-height:1.72; }
.legal-copy .check-list{ margin-bottom:16px; }

/* ---------------------------------------------------------------
   MOBILE REFINEMENTS (Aug 2026 review pass)
   Trust bar, services carousel. Kept at the end so these win.
--------------------------------------------------------------- */

/* --- trust bar: 2 x 2, bigger type, divider that isn't glued to the icons --- */
@media (max-width:860px){
  .trust .wrap{
    grid-template-columns:repeat(2,1fr);
    gap:0;                 /* zero column gap so the row divider reads as one line */
    padding-block:30px;
  }
  .trust-item{ padding:4px 10px 4px; gap:14px; }
  .trust-item:nth-child(n+3){ padding-top:20px; }
  .trust-item b{ font-size:1.3rem; line-height:1.08; letter-spacing:.04em; }
  .ti-ico svg{ width:38px; height:38px; }
}
@media (max-width:380px){
  .trust-item b{ font-size:1.02rem; }
  .trust-item{ padding-inline:4px; }
}

/* --- services carousel: the left edge fade was sitting on top of the first
       card and reading as a crop. Right fade alone cues the swipe. --- */
@media (max-width:860px){
  .svc-carousel::before{ content:none; display:none; }
  .svc-track{
    padding:6px 0 20px;
    scroll-padding-left:0;
  }
  .svc-track .svc{ flex-basis:88%; width:88%; }
  /* shorter cards: smaller image band and tighter padding, now that the
     body paragraph is gone */
  .svc{ padding:24px 22px 20px; gap:12px; border-radius:8px; }
  .svc-img{ height:132px; }
  .svc h3{ font-size:1.2rem; }
  .svc-list li{ padding:7px 0; }
  .svc-more{ padding-top:14px; font-size:.86rem; }
}

/* ---------------------------------------------------------------
   HOMEPAGE SERVICES: checkerboard tiles + copy column
   Structure borrowed from the pattern Katie flagged; colour stays
   inside the one-green-family rule, copper held to icon + hairline.
--------------------------------------------------------------- */
.svc-split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,4.5vw,68px);
  align-items:center;
}
.svc-split .svc-tiles{ order:1; }
.svc-split .svc-aside{ order:2; }

.svc-tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,1.4vw,16px);
}

.tile{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  min-height:clamp(168px,16vw,216px);
  padding:26px 18px;
  border-radius:8px;
  text-decoration:none;
  color:var(--paper);
  background-color:var(--green-deep);
  background-size:cover; background-position:center;
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
/* dark green overlay over the photo; eases back on hover so the image
   comes forward without ever dropping text contrast */
.tile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(26,31,21,.78), rgba(26,31,21,.84));
  transition:background .34s ease;
}
.tile:hover::after, .tile:focus-visible::after{
  background:linear-gradient(180deg, rgba(26,31,21,.6), rgba(26,31,21,.72));
}
/* the copper hairline sweeps in across the top on hover */
.tile::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--copper-hi);
  transform:scaleX(0); transform-origin:left;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.tile:hover::before,
.tile:focus-visible::before{ transform:scaleX(1); }

/* tile colour lives on .tile itself now (photo bg + green overlay) */

.tile:hover, .tile:focus-visible{ transform:translateY(-3px); }
.tile:hover .tile-sub, .tile:focus-visible .tile-sub{ color:rgba(244,239,227,.78); }

/* tile icons removed by request — photo + overlay carries the tile */
.tile-name{
  display:block;
  font-family:var(--display); font-size:clamp(1.12rem,1.5vw,1.3rem);
  font-weight:600; letter-spacing:.01em; line-height:1.2;
}
.tile-sub{
  display:block; margin-top:6px; color:rgba(244,239,227,.62);
  font-family:var(--util); font-size:.78rem;
  letter-spacing:.11em; text-transform:uppercase; line-height:1.35;
  transition:color .34s ease;
}

.svc-aside h2{ margin-top:6px; }
.svc-aside .lede{ margin-top:18px; }
.svc-proof{ list-style:none; margin:24px 0 0; padding:0; }
.svc-proof li{
  position:relative; padding:11px 0 11px 26px;
  border-top:1px solid var(--line);
  font-size:1rem; color:var(--ink);
}
.svc-proof li:first-child{ border-top:none; }
.svc-proof li::before{
  content:""; position:absolute; left:0; top:17px;
  width:7px; height:10px; background:var(--copper);
  clip-path:path("M3.5 0C3.5 3 0 5 0 7a3.5 3.5 0 007 0C7 5 3.5 3 3.5 0Z");
}

.svc-call{
  display:inline-flex; align-items:center; gap:15px;
  margin-top:28px; text-decoration:none; color:var(--ink);
}
.svc-call-ico{
  width:50px; height:50px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--copper); border-radius:50%;
  color:var(--copper);
  transition:background .25s ease, color .25s ease;
}
.svc-call-ico svg{ width:23px; height:23px; }
.svc-call:hover .svc-call-ico{ background:var(--copper); color:var(--paper); }
.svc-call-label{
  display:block; font-family:var(--util); font-size:.76rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.svc-call-num{
  display:block; font-family:var(--util); font-size:1.62rem;
  font-weight:700; letter-spacing:.04em; color:var(--ink); margin-top:2px;
  transition:color .25s ease;
}
.svc-call:hover .svc-call-num{ color:var(--copper); }

.svc-all{ margin-top:clamp(30px,3.4vw,44px); }
.svc-all a{
  font-family:var(--util); font-size:.9rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--copper); text-decoration:none;
}
.svc-all a:hover{ color:var(--green); }

@media (max-width:900px){
  .svc-split{ grid-template-columns:1fr; gap:34px; align-items:start; }
  /* copy reads first on a narrow screen, tiles follow */
  .svc-split .svc-aside{ order:1; }
  .svc-split .svc-tiles{ order:2; }
  .svc-call{ margin-top:24px; }
}
@media (max-width:420px){
  .tile{ min-height:138px; padding:18px 16px 16px; }
  .tile-name{ font-size:1.04rem; }
  .tile-sub{ font-size:.72rem; letter-spacing:.09em; }
}

/* (old list+map locations CSS removed — superseded by the pr-* regional cards) */

/* ---------------------------------------------------------------
   NAV DROPDOWNS + EMERGENCY PAGE BLOCKS
--------------------------------------------------------------- */
#menu > li.has-sub, .menu .has-sub{
  position:relative;
  display:flex; align-items:center; gap:1px;   /* label and arrow share one line: the arrow button was wrapping below and doubling the nav height */
}
.sub-toggle{
  background:none; border:0; padding:6px 8px; margin:0;
  cursor:pointer; color:inherit; line-height:0;
}
.menu .caret{
  display:inline-block; width:7px; height:7px; margin-left:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .25s ease;
}
.menu .has-sub:hover .caret,
.menu .has-sub:focus-within .caret,
.menu .has-sub.open .caret{ transform:rotate(225deg) translateY(-1px); }
.menu .sub{
  position:absolute; top:calc(100% + 6px); left:0; min-width:250px;
  list-style:none; margin:0; padding:12px 0;
  background:var(--card); border:1px solid var(--line);
  border-top:2px solid var(--copper); border-radius:0 0 8px 8px;
  box-shadow:0 22px 44px -20px rgba(35,43,30,.3);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  z-index:60;
}
.menu .has-sub.open > .sub,
.menu .has-sub:hover > .sub,
.menu .has-sub:focus-within > .sub{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .22s ease, transform .22s ease;
}
.menu .sub li{ width:100%; }
.menu .sub a{
  display:block; padding:9px 20px;
  font-size:.84rem; letter-spacing:.1em; text-transform:none;
  border:0; white-space:nowrap;
}
.menu .sub a:hover{ color:var(--copper); }
.menu .sub a::after{ content:none; }
.menu .sub .sub-all a{ color:var(--copper); font-weight:600; margin-top:4px; }

/* mobile: submenus render inline inside the burger panel */
@media (max-width:1020px){
  /* accordion: main links only until the arrow is tapped */
  .menu .sub{
    display:none;
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; width:100%; padding:0 0 10px 16px;
    background:transparent; border:0; box-shadow:none;
    transition:none;
  }
  .menu .has-sub.open > .sub{ display:block; }
  .menu .sub a{ padding:9px 0; border-bottom:0; font-size:.98rem; }
  .sub-toggle{ padding:14px 8px 14px 26px; }
  .menu .caret{ width:9px; height:9px; margin-left:0; }
}

/* emergency page: while-you-wait cards */
.er-now{ margin-top:44px; }
.er-now-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.8vw,20px); margin-top:18px;
}
@media (max-width:700px){ .er-now-grid{ grid-template-columns:1fr; } }
.er-card{
  background:var(--card); border:1px solid var(--line);
  border-left:2px solid var(--copper);
  border-radius:8px; padding:20px 22px;
}
.er-card h3{ margin:0 0 8px; font-family:var(--body); font-weight:600; font-size:1.05rem; }
.er-card p{ margin:0; font-size:.97rem; line-height:1.65; color:var(--ink-soft); }

/* (footer grain removed with the dark-section grain — texture-grain.svg is no longer referenced anywhere) */

/* ---------------------------------------------------------------
   REFERENCE-SITE PASS (Katie's earthy reference, Aug 2026):
   pop-out trust card, leaf ornaments, drawn map, clearer section tints
--------------------------------------------------------------- */

/* --- trust bar as a floating card overlapping the hero's bottom edge --- */
.trust{
  /* The card must straddle the seam EVENLY: top half over hero green,
     bottom half over the cream of the next section. A solid background
     here rides up with the negative margin and buries the green (that
     was the bug), so the section paints its own lower half only —
     transparent above the midline, cream below. Height-independent:
     the seam is always at 50% of the card. */
  background:linear-gradient(180deg, transparent 50%, var(--mist) 50%);
  border:0; position:relative; z-index:5;
  margin-top:calc(-1 * clamp(110px, 13vw, 170px));
  pointer-events:none;
}
.trust .wrap{
  pointer-events:auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 50px -28px rgba(35,43,30,.35);
  padding-block:clamp(26px,3vw,38px) !important;
}
@media (max-width:860px){
  .trust{ margin-top:-84px; }
  .trust .wrap{ border-radius:12px; }
}

/* --- section tint steps: same family, one visible step apart --- */
/* cream, not beige: cooler cream one visible step below paper */
:root{
  --mist:#EFEBDF;
  --paper-2:#EFEBDF;
}
.section.work{ background:var(--paper); }
.section.area{ background:var(--mist); }
#process{ background:var(--paper); }
#reviews{ background:var(--mist); }
.owner-note + * { }

/* --- leaf sprig ornament under section headings --- */
/* sec-head ornament slot: Katie is supplying her own leaf artwork.
   When it lands (images/leaf-accent.png) reintroduce here at ~64px wide. */

/* --- CTA band leaf branch --- */
.band{ position:relative; overflow:hidden; }
.band-leaf{
  position:absolute; left:clamp(-40px,-2vw,0px); bottom:-36px;
  width:clamp(140px,16vw,220px); height:auto;
  opacity:.5; pointer-events:none;
}
.band .wrap{ position:relative; }
@media (max-width:700px){ .band-leaf{ width:120px; opacity:.32; } }

/* --- drawn Alabama map --- */
/* the drawn map bleeds straight into the section: no card, no border,
   no background — just the artwork, larger */
.loc-map-drawn{
  aspect-ratio:auto;
  filter:none;
  background:transparent;
  border:0; border-radius:0;
  display:grid; place-items:center;
  padding:0;
  min-height:0;
}
.loc-map-drawn img{
  position:static; width:100%; max-width:780px; height:auto; display:block;
  margin-inline:auto;
}
@media (max-width:900px){
  .loc-map-drawn img{ max-width:520px; }
}


/* tighter seam between the pop-out trust card and What we do */
#services{ padding-top:clamp(44px,5vw,72px); }

/* 9. close the gap between locations and reviews (tightened again Aug 5:
   Katie wants less air under the map/banner row) */
.section.area{ padding-bottom:clamp(10px,1.4vw,22px); }
#reviews{ padding-top:clamp(36px,4vw,56px); }


/* all 18 cities, one list, one size */
.loc-all a{ font-size:1.05rem; padding:10px 2px; }
.loc-all .loc-star{ font-size:.85rem; }
@media (min-width:561px){
  .loc-all li:nth-child(-n+2){ border-top:none; }
}

/* map slot placeholder while Katie's artwork is pending */
.loc-map-await{
  display:grid; place-items:center; text-align:center;
  min-height:320px; width:100%;
  color:var(--ink-soft); font-family:var(--util);
  letter-spacing:.14em; text-transform:uppercase; font-size:.85rem;
  border:1px dashed var(--line); border-radius:8px;
}
.loc-map-await small{ letter-spacing:.06em; text-transform:none; margin-top:6px; }

/* what-we-do call button */
.svc-call-btn{ margin-top:26px; }

/* reviews: cards */
.rev-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,24px);
}
@media (max-width:900px){ .rev-grid{ grid-template-columns:1fr; } }
.rev-card{
  background:var(--card); border:1px solid var(--line);
  border-top:2px solid var(--copper);
  border-radius:10px; padding:24px 24px 22px;
}
.rev-top{ display:flex; align-items:center; gap:12px; }
.rev-avatar{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  background:var(--green); color:var(--paper);
  border-radius:50%;
  font-family:var(--display); font-size:1.1rem; font-weight:600;
}
.rev-who b{ display:block; font-size:1rem; }
.rev-who em{ display:block; font-style:normal; font-family:var(--util); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px; }
.rev-stars{ color:var(--copper); font-size:.9rem; letter-spacing:.28em; margin:14px 0 10px; }
.rev-text{ margin:0; font-size:.99rem; line-height:1.66; color:var(--ink); }
.rev-cta{
  margin-top:clamp(26px,3vw,38px);
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.rev-cta span{ color:var(--ink-soft); font-size:.98rem; }
.rev-cta a{
  font-family:var(--util); font-size:.88rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--copper); text-decoration:none;
}
.rev-cta a:hover{ color:var(--green); }

/* (interactive + ghost map CSS removed — the section uses Katie's static artwork) */

/* ---------------------------------------------------------------
   WHERE WE WORK — regional cards redesign (Katie's mock, Aug 2026)
--------------------------------------------------------------- */
.pr-head{ text-align:center; max-width:640px; margin:0 auto clamp(36px,4.5vw,56px); }
.pr-leaf{ width:34px; height:auto; margin:0 auto 12px; display:block; opacity:.85; }
.pr-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0 0 14px;
  font-family:var(--util); font-size:.8rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--copper);
}
.pr-eyebrow span{ font-size:.55rem; opacity:.8; }
.pr-head h2{ margin:0; line-height:1.14; }
.pr-head h2 em{ font-style:italic; color:var(--copper); }
.pr-sub{ margin:16px auto 0; max-width:46ch; font-size:1.02rem; line-height:1.7; color:var(--ink-soft); }

.pr-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,22px);
  align-items:start;
}
.pr-card{
  background:var(--card);
  border:1px solid var(--line); border-radius:10px;
  padding:26px 24px 22px;
}
.pr-ico{ display:block; line-height:0; color:var(--copper); margin-bottom:14px; }
.pr-ico svg{ width:40px; height:40px; display:block; }
.pr-card-eyebrow{
  margin:0; font-family:var(--util); font-size:.74rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
}
.pr-card h3{
  margin:2px 0 0; font-family:var(--display);
  font-size:clamp(1.4rem,1.8vw,1.7rem); font-weight:600; line-height:1.15;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.pr-cities{ list-style:none; margin:12px 0 0; padding:0; }
.pr-cities a{
  display:flex; align-items:baseline; gap:9px;
  padding:3px 0; text-decoration:none;
  font-family:var(--display); font-size:1.02rem; color:var(--ink);
  transition:color .18s ease, padding-left .2s ease;
}
.pr-cities a:hover{ color:var(--copper); padding-left:5px; }
.pr-cities a span{ color:var(--copper); font-size:.72rem; flex:none; }
.pr-more{
  display:inline-block; margin-top:12px;
  font-family:var(--util); font-size:.78rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--copper); text-decoration:none;
}
.pr-more:hover{ color:var(--green); }
.pr-note-copy{ margin:14px 0 0; font-size:.99rem; line-height:1.7; color:var(--ink-soft); }

.pr-bottom{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(18px,2.6vw,34px);
  align-items:center;
  margin-top:clamp(8px,1.2vw,18px);
}
.pr-banner{
  --ov: clamp(90px, 11vw, 170px);   /* how far the banner runs behind the map */
  display:flex; align-items:center; gap:clamp(18px,2.6vw,34px);
  background:var(--green-deep); border-radius:10px;
  padding:clamp(22px,2.6vw,32px) clamp(22px,3vw,38px);
  /* extend right under the map; keep content out of the buried zone */
  margin-right:calc(-1 * var(--ov));
  padding-right:calc(clamp(22px,3vw,38px) + var(--ov));
  position:relative; z-index:1;
  text-decoration:none;
}
.pr-banner-copy b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(1.24rem,1.8vw,1.55rem); color:var(--paper); line-height:1.2;
}
.pr-banner-copy b em{ font-style:italic; color:var(--copper-lite); }
.pr-banner-copy > span{ display:block; margin-top:7px; font-size:.96rem; color:rgba(244,239,227,.68); }
.pr-banner-div{ width:1px; align-self:stretch; background:rgba(244,239,227,.2); flex:none; }
.pr-banner-call{ display:flex; align-items:center; gap:14px; flex:none; }
.pr-call-ico{
  width:50px; height:50px; flex:none;
  display:grid; place-items:center; line-height:0;
  border:1px solid var(--copper-lite); border-radius:50%;
  color:var(--copper-lite);
  transition:background .22s ease, color .22s ease;
}
.pr-call-ico svg{ width:22px; height:22px; }
.pr-banner:hover .pr-call-ico{ background:var(--copper); border-color:var(--copper); color:var(--paper); }
.pr-call-label{
  display:block; font-family:var(--util); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--copper-lite);
}
.pr-call-num{
  display:block; margin-top:3px;
  font-family:var(--util); font-size:clamp(1.3rem,1.8vw,1.6rem); font-weight:700;
  letter-spacing:.03em; color:var(--paper);
}

.pr-map{
  position:relative; z-index:2;
  /* asymmetric: barely pull up (the state was overlapping the third card),
     keep collapsing the dead air below */
  margin-top:calc(-1 * clamp(6px, 1vw, 14px));
  margin-bottom:0; /* new map export is trimmed tight; the old negative margin (for baked-in bottom padding) was cropping the coast */
}
.pr-map img{ width:100%; max-width:470px; height:auto; display:block; margin-inline:auto; }
.pr-map-chip{
  position:absolute; right:9%; bottom:17%;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:12px 16px;
  box-shadow:0 18px 36px -22px rgba(35,43,30,.3);
}
.pr-map-chip b{
  display:block; font-family:var(--util); font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
.pr-map-chip em{
  display:block; margin-top:3px; font-style:normal;
  font-size:.8rem; color:var(--ink-soft);
}

@media (max-width:960px){
  .pr-grid{ grid-template-columns:1fr; }
  /* short cards on mobile: the five towns run in two columns */
  .pr-cities{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:16px;
  }
  .pr-cities a{ font-size:.98rem; }
}
@media (max-width:700px){
  .pr-bottom{ grid-template-columns:1fr; }
  .pr-banner{
    flex-direction:column; align-items:flex-start; gap:16px;
    margin-right:0; padding-right:clamp(22px,3vw,38px);
  }
  .pr-banner-div{ width:100%; height:1px; align-self:auto; }
  /* the map doesn't earn its space on a phone: hidden once the bottom
     row stacks; the banner carries the section's close on mobile */
  .pr-map{ display:none; }
}

/* logo images (header dark version, footer light version) */
/* Sized by BOTH axes with aspect free: the browser scales to whichever
   limit bites first. Cannot distort (no fixed dimension) and cannot
   overflow (hard width cap in viewport units), whatever the PNG's
   proportions are. flex:none stops container squeeze. */
.brand-img{
  display:block; width:auto; height:auto;
  max-height:46px; max-width:min(40vw, 260px);
  flex:none;
}
.footer .brand-img{ max-height:88px; max-width:260px; height:auto; }
@media (max-width:760px){
  /* the mobile nav row is logo + phone + burger; their widths must SUM
     under the viewport. Logo yields first, phone shrinks a step. */
  .brand-img{ max-height:34px; max-width:min(34vw, 140px); }
  .nav-phone{ font-size:1.08rem; letter-spacing:.03em; }
  .nav .wrap{ gap:12px; }
}
@media (max-width:400px){
  .brand-img{ max-width:min(30vw, 118px); }
  .nav-phone{ font-size:1rem; }
}

/* (body scroll-lock removed: a stuck nav-open state froze the body at
   screen height and set the sticky nav adrift — the menu panel scrolls
   itself, which is the part that matters) */

/* mobile: video plays on phones too (owner request, Sept 2026).
   The old rule here hid the element and painted the poster as a
   background — removed so the inline-source video shows and plays. */

/* ===============================================================
   CINEMATIC HERO PASS (owner request): full-screen video, headline
   dead-center, nav transparent over the film until first scroll.
=============================================================== */
:root{ --navh: 89px; } /* nav min-height 88 + its 1px border */

/* the hero fills the first screen and slides up under the nav */
:root{ --tc-ov: clamp(110px, 13vw, 170px); } /* trust-card overlap depth */
.hero-video-wrap{
  /* one full screen of pure film PLUS the trust-card overlap, so the card
     starts below the fold and the first frame is only video + headline */
  min-height:calc(100vh + var(--tc-ov));
  min-height:calc(100svh + var(--tc-ov));
  margin-top:calc(var(--navh) * -1);
  display:flex; align-items:center; justify-content:center;
}
.hero-video-wrap .wrap{
  /* padding mirrors nav on top and nav+overlap below, so the headline
     centers in the VISIBLE first screen, not the taller section */
  padding-top:calc(var(--navh) + 24px);
  padding-bottom:calc(var(--navh) + 24px + var(--tc-ov));
  width:100%;
}
/* the scroll cue belongs inside the first screen, not below the fold */
.hero-video-wrap .scroll-cue{ bottom:calc(var(--tc-ov) + 26px); }
@media (max-width:700px){
  .hero-video-wrap .scroll-cue{ bottom:calc(var(--tc-ov) + env(safe-area-inset-bottom, 0px) + 18px); }
}
.hero-center{ max-width:840px; margin-inline:auto; text-align:center; }
.hero-center .eyebrow{ justify-content:center; }
.hero-center .eyebrow::after{ display:none; }   /* the trailing rule reads off-balance centered */
.hero-center .hero-lede{ margin-inline:auto; }
.hero-center .hero-actions{ justify-content:center; }

/* nav: invisible over the film, materializes on first scroll.
   HOMEPAGE ONLY (.nav-over) — inner pages keep the solid cream nav. */
.nav.nav-over{
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.nav.nav-over:not(.stuck){
  background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom-color:transparent;
}
.nav.nav-over:not(.stuck) .brand-img{ filter:brightness(0) invert(1); } /* dark lockup -> white over video */
.nav.nav-over:not(.stuck) .menu > li > a{ color:var(--paper); }
.nav.nav-over:not(.stuck) .menu > li > a:hover{ color:var(--copper-lite); }
.nav.nav-over:not(.stuck) .menu a::after{ background:var(--copper-lite); }
.nav.nav-over:not(.stuck) .nav-phone{ color:var(--paper); }
.nav.nav-over:not(.stuck) .nav-phone:hover{ color:var(--copper-lite); }
.nav.nav-over:not(.stuck) .sub-toggle .caret{ border-color:var(--paper); }
.nav.nav-over:not(.stuck) .burger{ border-color:rgba(244,239,227,.4); }
.nav.nav-over:not(.stuck) .burger span{ background:var(--paper); }
/* dropdown panels stay solid cream in every state — readability first */

/* mobile: the open menu panel needs its solid paper back even when the
   bar itself is transparent */
@media (max-width:1020px){
  .nav.nav-over:not(.stuck) .menu.open{ background:var(--paper); }
  .nav.nav-over:not(.stuck) .menu.open a{ color:var(--navy); }
}

/* scroll cue earns its place on a full-screen hero — visible on phones too */
@media (max-width:700px){
  .scroll-cue{ display:flex; bottom:calc(env(safe-area-inset-bottom, 0px) + 18px); }
}

/* (help card removed entirely at owner request, Aug 11) */



.hero-media{ background:#232B1E; }
.hero-video{ opacity:0; transition:opacity .8s ease; }
.hero-video.is-playing{ opacity:1; }


/* iOS status-bar cover — active only while the nav is stuck, so it
   never overlaps or frosts the topbar at the top of the page. */
.nav.stuck::before{
  content:""; position:absolute; left:0; right:0; top:-100px; height:100px;
  background:inherit;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  pointer-events:none;
}

/* trim the nav height */
.nav .wrap{ min-height:74px; }
@media (max-width:760px){ .nav .wrap{ min-height:64px; } }

.hero-video-wrap .eyebrow::before{ display:none; }


/* hero copy sizing for the SEO headline */
.hero-video-wrap h1{ font-size:clamp(2.4rem, 4.8vw, 4.5rem); }
.hero-video-wrap h1 .thin{ font-size:.26em; letter-spacing:.16em; margin-top:16px; }
@media (min-width:761px){
  .hero-video-wrap h1 .thin{ white-space:nowrap; }
}

/* topbar: taller, no clipped text */
.topbar .wrap{ min-height:52px; padding-block:6px; }