/* ============================================================
   BARTEL CONSTRUCTION — shared stylesheet (all pages)
   IDENTITY: "CHARCOAL & EMBER"
   charcoal #17181A · ember #EF5E1E · brass #C39A5A · bone #F2ECE1
   (base coastal-craftsman structure below; identity layer appended last)
   ============================================================ */

/* ============================================================
   BARTEL CONSTRUCTION — "PNW Coastal Craftsman"
   fog #F4F0E6 · pine #1E3B2E · pine-deep #16291F
   cedar #B08D57 · sand #D9C49C · ink #2B2620
   ============================================================ */

:root{
  --fog:        #f4f0e6;
  --fog-deep:   #ece6d7;
  --pine:       #1e3b2e;
  --pine-mid:   #2c5240;
  --pine-deep:  #16291f;
  --cedar:      #b08d57;
  --cedar-deep: #8a6a3e;   /* text-safe cedar on fog */
  --sand:       #d9c49c;
  --ink:        #2b2620;
  --ink-soft:   #5b5347;
  --line:       #d8cfba;
  --text-on-dark:     #d9d3c4;  /* body text on the dark (pine-deep) surfaces */
  --text-on-dark-dim: #b9ae95;  /* muted/small text on dark surfaces */
  --alert:            #9d4e2b;  /* errors + "look at it soon" urgency */
  --map-land:         #e9e2d0;  /* coverage-map island landmass fill */
  --radius:     14px;
  --measure:    62ch;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:  "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--fog);
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }

a{ color:var(--pine); }
a:focus-visible,
button:focus-visible{
  outline:3px solid var(--cedar);
  outline-offset:3px;
  border-radius:4px;
}

::selection{ background:var(--sand); color:var(--pine-deep); }

/* ---------- type ---------- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:560;
  line-height:1.12;
  color:var(--pine-deep);
  letter-spacing:-0.01em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem, 5.6vw + 1rem, 4.4rem); font-variation-settings:"opsz" 100; }
h2{ font-size:clamp(1.85rem, 2.6vw + 1rem, 2.8rem); font-variation-settings:"opsz" 60; }
h3{ font-size:1.28rem; font-weight:600; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cedar-deep);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";
  width:2.1rem; height:2px;
  background:var(--cedar);
  border-radius:2px;
}

.lede{
  font-size:clamp(1.1rem, 1vw + .9rem, 1.3rem);
  color:var(--ink-soft);
  max-width:var(--measure);
}

/* ---------- layout ---------- */
.wrap{
  width:min(1120px, calc(100% - 2.5rem));
  margin-inline:auto;
}
section{ padding-block:clamp(4rem, 9vw, 7rem); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  padding:.85rem 1.6rem;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background:var(--pine);
  color:var(--fog);
  box-shadow:0 2px 0 color-mix(in srgb, var(--pine-deep) 25%, transparent);
}
.btn-primary:hover{ background:var(--pine-mid); transform:translateY(-2px); box-shadow:0 6px 16px color-mix(in srgb, var(--pine-deep) 22%, transparent); }
.btn-ghost{
  background:transparent;
  color:var(--pine);
  border-color:var(--pine);
}
.btn-ghost:hover{ background:var(--pine); color:var(--fog); }
.btn svg{ flex:none; }
@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover{ transition:none; transform:none; }
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--fog) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding-block:.85rem;
}
.wordmark{
  display:inline-flex; align-items:center; gap:.8rem;
  text-decoration:none;
  line-height:1.05;
}
.wordmark .mark{ height:48px; width:auto; flex:none; color:var(--pine-deep); }
.wordmark .wm-text{ display:inline-flex; flex-direction:column; line-height:1.05; }
.wordmark .name{
  font-family:var(--font-display);
  font-weight:640;
  font-size:1.28rem;
  color:var(--pine-deep);
  letter-spacing:.005em;
}
.wordmark .tick{ margin-top:2px; width:118px; height:7px; color:var(--cedar); }
.wordmark .locale{
  font-size:.67rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--cedar-deep);
  margin-top:.3rem;
}
.nav-links{
  display:flex; align-items:center; gap:1.6rem;
  list-style:none;
}
.nav-links a:not(.btn){
  font-size:.95rem; font-weight:600;
  text-decoration:none;
  color:var(--ink);
  padding-block:.35rem;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.nav-links a:not(.btn):hover{ color:var(--pine); border-bottom-color:var(--cedar); }
.nav-links .btn{ padding:.55rem 1.2rem; font-size:.92rem; }
.nav-toggle{
  display:none;
  background:none; border:0;
  padding:.5rem;
  color:var(--pine-deep);
  cursor:pointer;
}
.nav-toggle svg{ width:26px; height:26px; }
.nav-toggle .icon-close{ display:none; }

@media (max-width: 760px){
  .wordmark{ gap:.65rem; }
  .wordmark .mark{ height:42px; }
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--fog);
    border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1.25rem;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ border-bottom:1px solid var(--line); }
  .nav-links li:last-child{ border-bottom:0; padding-top:.9rem; }
  .nav-links a:not(.btn){ display:block; padding:.85rem 0; border-bottom:0; }
  .nav-links .btn{ width:100%; justify-content:center; }
  .nav-open .icon-menu{ display:none; }
  .nav-open .icon-close{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
}
.hero .wrap{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(0, .66fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:center;
}
.hero h1 em{
  font-style:italic;
  font-variation-settings:"opsz" 130;
  color:var(--cedar-deep);
}
.hero .lede{ margin-top:1.4rem; }
.hero-cta{
  margin-top:2.2rem;
  display:flex; flex-wrap:wrap; gap:.9rem; align-items:center;
}
.hero-note{
  margin-top:1.6rem;
  display:flex; align-items:center; gap:.6rem;
  font-size:.92rem;
  color:var(--ink-soft);
}
.hero-note svg{ flex:none; color:var(--cedar-deep); }

.hero-map{
  position:relative;
  max-width:360px;
  margin-inline:auto;
  width:100%;
}
.hero-map svg{ width:100%; height:auto; display:block; }
.map-caption{
  margin-top:.9rem;
  text-align:center;
  font-size:.8rem;
  font-style:italic;
  font-family:var(--font-display);
  color:var(--ink-soft);
}

@media (max-width: 880px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-map{ max-width:330px; margin-top:.5rem; }
}

/* map internals — real Whidbey coastline, viewBox 780×1120 */
.map-island{ fill:var(--map-land); stroke:var(--pine); stroke-width:4.5; stroke-linejoin:round; }
.map-contour{ fill:none; stroke:var(--cedar); stroke-width:2.2; opacity:.4; }
.map-route{ fill:none; stroke:var(--pine-mid); stroke-width:3.4; stroke-dasharray:5 12; stroke-linecap:round; }
.map-node{ fill:var(--fog); stroke:var(--pine); stroke-width:4; }
.map-hub{ fill:var(--cedar); stroke:var(--pine-deep); stroke-width:4.5; }
.map-label{
  font-family:var(--font-display);
  font-style:italic;
  font-size:23px;
  fill:var(--ink-soft);
}
.map-town{
  font-family:var(--font-body);
  font-weight:700;
  font-size:19px;
  letter-spacing:.06em;
  fill:var(--cedar-deep);
  text-transform:uppercase;
}
.map-hub-label{
  font-family:var(--font-body);
  font-weight:800;
  font-size:22px;
  letter-spacing:.14em;
  fill:var(--pine-deep);
}
.map-water-label{
  font-family:var(--font-display);
  font-style:italic;
  font-size:24px;
  fill:var(--cedar-deep);
  opacity:.7;
  letter-spacing:.14em;
}

/* routes draw themselves in on load */
@media (prefers-reduced-motion: no-preference){
  .map-route{
    stroke-dashoffset:340;
    stroke-dasharray:5 12;
    animation:route-in 1.8s ease-out forwards;
  }
  .map-routes .map-route:nth-child(2){ animation-delay:.25s; }
  .map-routes .map-route:nth-child(3){ animation-delay:.5s; }
  .map-routes .map-route:nth-child(4){ animation-delay:.75s; }
  .map-routes .map-route:nth-child(5){ animation-delay:1s; }
  @keyframes route-in{ to{ stroke-dashoffset:0; } }
}

/* ---------- shoreline divider ---------- */
.shoreline{
  display:block;
  width:100%;
  height:34px;
  color:var(--cedar);
}
.shoreline.on-dark{ color:var(--sand); }

/* ---------- sections ---------- */
.section-head{ max-width:var(--measure); }
.section-head .lede{ margin-top:1rem; }

/* The Isaac difference */
.difference{ background:var(--fog-deep); }
.difference-grid{
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.4rem;
}
.diff-card{
  background:var(--fog);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.8rem 1.7rem;
}
.diff-card h3{ margin-bottom:.55rem; display:flex; align-items:center; gap:.7rem; }
.diff-card h3 svg{ flex:none; color:var(--cedar-deep); }
.diff-card p{ color:var(--ink-soft); }
.pull-line{
  margin-top:3rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.3rem, 2vw + .8rem, 1.8rem);
  color:var(--pine);
  max-width:34ch;
  line-height:1.35;
  border-left:3px solid var(--cedar);
  padding-left:1.3rem;
}
@media (max-width: 700px){
  .difference-grid{ grid-template-columns:1fr; }
}

/* How it works */
.steps{
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
  counter-reset:step;
  list-style:none;
}
.step{
  position:relative;
  background:var(--fog-deep);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem 1.7rem 1.8rem;
}
.step-icon{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--pine);
  color:var(--sand);
  margin-bottom:1.2rem;
}
.step::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  position:absolute;
  top:1.4rem; right:1.5rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--cedar-deep);
}
.step h3{ margin-bottom:.5rem; }
.step p{ color:var(--ink-soft); font-size:1rem; }
.step-arrow{
  display:none;
}
@media (max-width: 820px){
  .steps{ grid-template-columns:1fr; max-width:480px; }
}

/* What Isaac does */
.lanes-section{ background:var(--fog-deep); }
.lanes{
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
  list-style:none;
}
.lane{
  background:var(--fog);
  border:1px solid var(--line);
  border-top:4px solid var(--cedar);
  border-radius:var(--radius);
  padding:1.9rem 1.7rem;
  display:flex; flex-direction:column;
}
.lane h3{ margin-bottom:.55rem; }
.lane .lane-tag{
  font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cedar-deep);
  margin-bottom:1rem;
}
.lane p{ color:var(--ink-soft); font-size:1rem; }
.lanes-note{
  margin-top:2.2rem;
  display:flex; gap:.8rem; align-items:flex-start;
  max-width:var(--measure);
  color:var(--ink-soft);
  font-size:1rem;
}
.lanes-note svg{ flex:none; color:var(--cedar-deep); margin-top:.2rem; }
@media (max-width: 820px){
  .lanes{ grid-template-columns:1fr; }
}

/* photo placeholders */
.photos{
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
.photo-slot{
  position:relative;
  aspect-ratio:4 / 3;
  border-radius:var(--radius);
  overflow:hidden;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--cedar) 16%, transparent), color-mix(in srgb, var(--pine) 10%, transparent)),
    var(--fog-deep);
  border:1px solid var(--line);
  display:flex;
  align-items:flex-end;
}
.photo-slot .contours{
  position:absolute; inset:0;
  width:100%; height:100%;
  color:var(--cedar-deep);
  opacity:.5;
}
.photo-slot .corner{
  position:absolute;
  width:22px; height:22px;
  border:2px solid var(--cedar-deep);
  opacity:.7;
}
.photo-slot .corner.tl{ top:12px; left:12px; border-right:0; border-bottom:0; border-radius:4px 0 0 0; }
.photo-slot .corner.br{ bottom:12px; right:12px; border-left:0; border-top:0; border-radius:0 0 4px 0; }
.photo-slot figcaption{
  position:relative;
  width:100%;
  padding:.8rem 1.1rem .9rem;
  font-size:.83rem;
  font-style:italic;
  font-family:var(--font-display);
  color:var(--ink-soft);
  background:linear-gradient(to top, color-mix(in srgb, var(--fog) 94%, transparent), color-mix(in srgb, var(--fog) 0%, transparent));
}
.photo-slot figcaption strong{
  display:block;
  font-family:var(--font-body);
  font-style:normal;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cedar-deep);
  margin-bottom:.15rem;
}
@media (max-width: 820px){
  .photos{ grid-template-columns:1fr; }
  .photo-slot{ aspect-ratio:16 / 9; }
}

/* Island grown (dark) */
.island-grown{
  background:var(--pine-deep);
  color:var(--fog);
  position:relative;
  overflow:hidden;
}
.island-grown .bg-island{
  position:absolute;
  right:-6%; top:50%;
  transform:translateY(-50%) rotate(8deg);
  width:min(46vw, 520px);
  color:var(--sand);
  opacity:.07;
  pointer-events:none;
}
.island-grown .wrap{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem, 5vw, 5rem);
  align-items:center;
}
.island-grown h2{ color:var(--fog); margin-bottom:1.3rem; }
.island-grown .eyebrow{ color:var(--sand); }
.island-grown .eyebrow::before{ background:var(--sand); }
.island-grown p{ color:var(--text-on-dark); max-width:58ch; }
.island-grown p + p{ margin-top:1.1rem; }
.island-grown .signoff{
  margin-top:1.8rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.25rem;
  color:var(--sand);
}
.island-grown .signoff small{
  display:block;
  font-family:var(--font-body);
  font-style:normal;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-on-dark-dim);
  margin-top:.4rem;
}
.portrait-slot{
  position:relative;
  aspect-ratio:4 / 5;
  max-width:400px;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(155deg, color-mix(in srgb, var(--sand) 14%, transparent), color-mix(in srgb, var(--cedar) 8%, transparent)), var(--pine);
  border:1px solid color-mix(in srgb, var(--sand) 30%, transparent);
  display:flex; align-items:flex-end;
}
.portrait-slot .contours{
  position:absolute; inset:0;
  width:100%; height:100%;
  color:var(--sand);
  opacity:.3;
}
.portrait-slot .corner{
  position:absolute;
  width:22px; height:22px;
  border:2px solid var(--sand);
  opacity:.75;
}
.portrait-slot .corner.tl{ top:12px; left:12px; border-right:0; border-bottom:0; border-radius:4px 0 0 0; }
.portrait-slot .corner.br{ bottom:12px; right:12px; border-left:0; border-top:0; border-radius:0 0 4px 0; }
.portrait-slot figcaption{
  position:relative;
  width:100%;
  padding:.9rem 1.2rem 1rem;
  font-size:.85rem;
  font-style:italic;
  font-family:var(--font-display);
  color:var(--text-on-dark);
  background:linear-gradient(to top, color-mix(in srgb, var(--pine-deep) 92%, transparent), color-mix(in srgb, var(--pine-deep) 0%, transparent));
}
@media (max-width: 880px){
  .island-grown .wrap{ grid-template-columns:1fr; }
  .portrait-slot{ margin-inline:auto; }
}

/* Talk to Isaac */
.contact{ text-align:center; }
.contact .section-head{ margin-inline:auto; }
.contact .lede{ margin-inline:auto; }
.contact-actions{
  margin-top:2.4rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
}
.contact-actions .btn{ font-size:1.05rem; padding:1rem 2rem; }
.contact-fineprint{
  margin-top:1.6rem;
  font-size:.9rem;
  color:var(--ink-soft);
}
.contact-fineprint em{ font-family:var(--font-display); }

/* footer */
.site-footer{
  background:var(--pine-deep);
  color:var(--text-on-dark-dim);
  padding-block:2.6rem;
  font-size:.92rem;
}
.footer-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem;
}
.footer-mark{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.1rem;
  color:var(--fog);
}
.footer-brand{ display:flex; align-items:center; gap:1rem; }
.footer-brand .footer-logo{ height:62px; width:auto; flex:none; color:var(--fog); }
.footer-mark .tick{ width:96px; height:6px; color:var(--cedar); margin-top:2px; }
.footer-meta{ text-align:right; line-height:1.9; }
.footer-meta a{ color:var(--sand); }
@media (max-width: 620px){
  .footer-row{ flex-direction:column; align-items:flex-start; }
  .footer-meta{ text-align:left; }
}

/* ---------- scroll reveal ---------- */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in{ opacity:1; transform:none; }
}

/* ============================================================
   AI FEATURES — chat · vision (dream/diagnose) · lead form
   ============================================================ */

/* shared */
.btn[disabled], .btn.is-busy{ opacity:.6; cursor:not-allowed; }
.spinner{
  width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--fog) 40%, transparent); border-top-color:var(--fog);
  animation:spin .7s linear infinite;
}
.btn-ghost .spinner{ border-color:color-mix(in srgb, var(--pine) 28%, transparent); border-top-color:var(--pine); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.field-error{ margin-top:.7rem; font-size:.9rem; color:var(--alert); }
@media (prefers-reduced-motion: reduce){ .spinner{ animation:none; } }

/* ---------- Vision section ---------- */
.vision{ background:var(--fog); }
.vision .section-head{ margin-inline:auto; text-align:center; }
.vision .section-head .eyebrow{ justify-content:center; }
.vision .section-head .lede{ margin-inline:auto; }
.vision-shell{ text-align:center; }

.vision-toggle{
  margin:2.4rem auto 0; display:inline-flex; gap:4px; padding:5px;
  background:var(--fog-deep); border:1px solid var(--line); border-radius:999px;
}
.vseg{
  appearance:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:.98rem; color:var(--ink-soft);
  padding:.6rem 1.6rem; border-radius:999px; background:transparent;
  transition:background-color .2s ease, color .2s ease;
}
.vseg[aria-selected="true"]{ background:var(--pine); color:var(--fog); }
.vseg:not([aria-selected="true"]):hover{ color:var(--pine); }

.vision-card{
  margin:2.2rem auto 0; max-width:880px; text-align:left;
  background:var(--fog-deep); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1.5rem, 3vw, 2.4rem);
}
.vision-mode[hidden]{ display:none; }

.dropzone{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; min-height:150px; padding:1.4rem; text-align:center;
  border:2px dashed var(--cedar); border-radius:12px; background:color-mix(in srgb, var(--cedar) 6%, transparent);
  color:var(--ink-soft); cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}
.dropzone:hover, .dropzone.drag{ background:color-mix(in srgb, var(--cedar) 12%, transparent); border-color:var(--cedar-deep); }
.dropzone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.dropzone svg{ color:var(--cedar-deep); }
.dropzone .dz-strong{ font-weight:600; color:var(--pine); }
.dropzone .dz-hint{ font-size:.82rem; }
.dropzone .dz-thumb{ max-height:190px; border-radius:8px; display:none; }
.dropzone.has-image{ padding:.6rem; border-style:solid; }
.dropzone.has-image .dz-thumb{ display:block; }
.dropzone.has-image .dz-prompt{ display:none; }

.vlabel{ display:block; font-weight:600; font-size:.88rem; color:var(--pine-deep); margin:1.1rem 0 .4rem; }
.vinput, .lead-form input, .lead-form textarea, .lead-form select{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--fog); border:1px solid var(--line); border-radius:10px; padding:.8rem .9rem;
}
.vinput:focus-visible, .lead-form input:focus-visible, .lead-form textarea:focus-visible, .lead-form select:focus-visible, .chat-input:focus-visible{
  outline:2px solid var(--cedar); outline-offset:1px; border-color:var(--cedar);
}
textarea.vinput, .lead-form textarea{ resize:vertical; min-height:92px; }

.vision-actions{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

.beforeafter{ margin-top:1.6rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.beforeafter[hidden]{ display:none; }
.beforeafter.single{ grid-template-columns:1fr; max-width:440px; }
.va-figure{ margin:0; }
.va-figure img{ width:100%; border-radius:10px; border:1px solid var(--line); display:block; background:var(--fog); }
.va-cap{ margin-top:.5rem; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cedar-deep); }
@media (max-width:560px){ .beforeafter{ grid-template-columns:1fr; } }

.diagnosis{ margin-top:1.6rem; background:var(--fog); border:1px solid var(--line); border-left:4px solid var(--cedar); border-radius:12px; padding:1.5rem 1.6rem; }
.diagnosis[hidden]{ display:none; }
.dg-top{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.9rem; justify-content:space-between; }
.dg-summary{ font-family:var(--font-display); font-size:1.18rem; color:var(--pine-deep); line-height:1.32; max-width:46ch; }
.urgency{ display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.4rem .8rem; border-radius:999px; white-space:nowrap; }
.urgency::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.u-routine{ background:color-mix(in srgb, var(--pine) 10%, transparent); color:var(--pine); }
.u-worth{ background:color-mix(in srgb, var(--cedar) 22%, transparent); color:var(--cedar-deep); }
.u-soon{ background:color-mix(in srgb, var(--alert) 15%, transparent); color:var(--alert); }
.dg-grid{ margin-top:1.2rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.4rem; }
.dg-item .k{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cedar-deep); margin-bottom:.2rem; }
.dg-item .v{ color:var(--ink); }
.dg-actions{ margin-top:1.3rem; }
@media (max-width:560px){ .dg-grid{ grid-template-columns:1fr; } }

.vision-guard{ margin-top:1.3rem; font-size:.82rem; color:var(--ink-soft); display:flex; gap:.5rem; align-items:flex-start; }
.vision-guard svg{ flex:none; color:var(--cedar-deep); margin-top:.15rem; }

/* ---------- Lead form ---------- */
.lead-form{ margin:2.4rem auto 0; max-width:640px; text-align:left; display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.lead-form .field{ display:flex; flex-direction:column; }
.lead-form .field.full{ grid-column:1 / -1; }
.lead-form label{ font-weight:600; font-size:.85rem; color:var(--pine-deep); margin-bottom:.35rem; }
.lead-form label .opt{ font-weight:400; color:var(--ink-soft); }
.lead-prefill-tag{ grid-column:1/-1; display:none; align-items:center; gap:.5rem; font-size:.86rem; color:var(--cedar-deep); background:color-mix(in srgb, var(--cedar) 12%, transparent); border:1px solid var(--line); border-radius:8px; padding:.65rem .9rem; }
.lead-prefill-tag.show{ display:flex; }
.lead-prefill-tag svg{ flex:none; }
.lead-submit-row{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:center; margin-top:.2rem; }
.lead-error{ grid-column:1/-1; text-align:center; }
.lead-success{ text-align:center; background:color-mix(in srgb, var(--pine) 7%, transparent); border:1px solid var(--line); border-radius:12px; padding:1.8rem; color:var(--pine-deep); font-size:1.08rem; max-width:640px; margin:2.4rem auto 0; }
.lead-success svg{ color:var(--cedar-deep); margin-bottom:.6rem; }
.lead-success strong{ font-family:var(--font-display); }
.contact-alt{ margin-top:2.6rem; }
.contact-alt .divider{ display:flex; align-items:center; gap:1rem; color:var(--ink-soft); font-size:.85rem; max-width:420px; margin:0 auto 1.4rem; }
.contact-alt .divider::before, .contact-alt .divider::after{ content:""; height:1px; flex:1; background:var(--line); }
@media (max-width:560px){ .lead-form{ grid-template-columns:1fr; } }

/* ---------- Ask Isaac chat ---------- */
.chat-launcher{
  position:fixed; z-index:60; right:20px; bottom:20px;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:1rem;
  color:var(--fog); background:var(--pine); border:0; border-radius:999px; padding:.85rem 1.35rem;
  box-shadow:0 6px 20px color-mix(in srgb, var(--pine-deep) 28%, transparent); cursor:pointer;
  transition:transform .2s ease, background-color .2s ease;
}
.chat-launcher:hover{ background:var(--pine-mid); transform:translateY(-2px); }
.chat-launcher svg{ flex:none; }
.chat-launcher[hidden]{ display:none; }

.chat-panel{
  position:fixed; z-index:61; right:20px; bottom:20px;
  width:min(384px, calc(100vw - 32px)); height:min(600px, calc(100vh - 40px));
  display:flex; flex-direction:column; background:var(--fog);
  border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 50px color-mix(in srgb, var(--pine-deep) 32%, transparent);
  overflow:hidden; opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.chat-panel.open{ opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .chat-launcher, .chat-panel{ transition:none; }
  .chat-launcher:hover{ transform:none; }
  .chat-panel{ transform:none; }
}
.chat-header{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; background:var(--pine); color:var(--fog); }
.chat-avatar{ width:38px; height:38px; flex:none; border-radius:50%; overflow:hidden; display:block; }
.chat-avatar svg{ width:100%; height:100%; display:block; }
.chat-htext{ line-height:1.25; flex:1; }
.chat-htext .t{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; }
.chat-htext .s{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); }
.chat-close{ background:transparent; border:0; color:var(--fog); cursor:pointer; padding:.35rem; border-radius:6px; line-height:0; }
.chat-close:hover{ background:color-mix(in srgb, var(--fog) 15%, transparent); }

.chat-log{ flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.7rem; }
.chat-msg{ display:flex; flex-direction:column; }
.chat-msg.from-user{ align-items:flex-end; }
.chat-msg.from-ai{ align-items:flex-start; }
.chat-bubble{ max-width:84%; padding:.7rem .9rem; border-radius:14px; font-size:.95rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.from-ai .chat-bubble{ background:var(--fog-deep); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:4px; }
.from-user .chat-bubble{ background:var(--pine); color:var(--fog); border-bottom-right-radius:4px; }
.chat-cta{ margin-top:.5rem; }
.chat-cta button{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-body); font-weight:600; font-size:.86rem; color:var(--pine);
  background:color-mix(in srgb, var(--cedar) 16%, transparent); border:1px solid var(--cedar); border-radius:999px; padding:.45rem 1rem; cursor:pointer;
}
.chat-cta button:hover{ background:var(--cedar); color:var(--pine-deep); }
.typing{ display:inline-flex; gap:4px; padding:.85rem .9rem; background:var(--fog-deep); border:1px solid var(--line); border-radius:14px; border-bottom-left-radius:4px; }
.typing span{ width:7px; height:7px; border-radius:50%; background:var(--cedar-deep); animation:blink 1.2s infinite both; }
.typing span:nth-child(2){ animation-delay:.2s; }
.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:.9; transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .typing span{ animation:none; opacity:.5; } }

.chat-foot{ border-top:1px solid var(--line); padding:.7rem .8rem .55rem; background:var(--fog); }
.chat-form{ display:flex; gap:.5rem; align-items:flex-end; }
.chat-input{
  flex:1; font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  background:var(--fog); border:1px solid var(--line); border-radius:12px;
  padding:.65rem .8rem; resize:none; max-height:110px; min-height:44px;
}
.chat-send{ flex:none; width:44px; height:44px; border-radius:12px; border:0; background:var(--pine); color:var(--fog); cursor:pointer; display:grid; place-items:center; }
.chat-send:hover{ background:var(--pine-mid); }
.chat-send[disabled]{ opacity:.5; cursor:not-allowed; }
.chat-disclaim{ margin-top:.45rem; font-size:.68rem; color:var(--ink-soft); text-align:center; }

/* ============================================================
   MULTI-PAGE ADDITIONS — inner-page heroes, active nav,
   service grid, gallery, testimonials, CTA bands, area chips
   ============================================================ */

/* active page in the nav */
.nav-links a:not(.btn)[aria-current="page"]{
  color:var(--pine);
  border-bottom-color:var(--cedar);
}
@media (max-width: 760px){
  .nav-links a:not(.btn)[aria-current="page"]{ color:var(--cedar-deep); }
}

/* inner-page hero (compact) */
.page-hero{ padding-block:clamp(3.2rem, 7vw, 5.2rem) clamp(2.8rem, 5vw, 4rem); }
.page-hero h1{ font-size:clamp(2.3rem, 3.8vw + 1rem, 3.6rem); max-width:24ch; }
.page-hero .lede{ margin-top:1.3rem; }
.contact-title{ font-size:clamp(2.3rem, 3.8vw + 1rem, 3.6rem); }

/* home services teaser */
.teaser .lane{ background:var(--fog-deep); }
.teaser-more{ margin-top:2.4rem; }

/* dark CTA / concierge band */
.cta-band{
  background:var(--pine-deep);
  color:var(--fog);
  text-align:center;
}
.cta-band h2{ color:var(--fog); }
.cta-band .eyebrow{ color:var(--sand); justify-content:center; }
.cta-band .eyebrow::before{ background:var(--sand); }
.cta-band .section-head{ margin-inline:auto; }
.cta-band .lede{ color:var(--text-on-dark); margin-inline:auto; margin-top:1.1rem; }
.cta-actions{ margin-top:2.2rem; display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.btn-cedar{ background:var(--cedar); color:var(--pine-deep); box-shadow:0 2px 0 rgba(0,0,0,.18); }
.btn-cedar:hover{ background:var(--sand); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.25); }
.cta-band .btn-ghost{ color:var(--fog); border-color:color-mix(in srgb, var(--fog) 60%, transparent); }
.cta-band .btn-ghost:hover{ background:var(--fog); color:var(--pine-deep); }

/* services — the six-card grid */
.svc-grid{
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
  list-style:none;
}
.svc-card{
  background:var(--fog-deep);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.8rem 1.7rem;
  display:flex; flex-direction:column;
}
.svc-icon{
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:12px;
  background:color-mix(in srgb, var(--cedar) 16%, transparent);
  color:var(--cedar-deep);
  margin-bottom:1.1rem;
}
.svc-card h3{ margin-bottom:.5rem; }
.svc-card p{ color:var(--ink-soft); font-size:1rem; }
.svc-tag{
  margin-top:1rem; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cedar-deep);
  background:color-mix(in srgb, var(--cedar) 14%, transparent);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.3rem .75rem;
}
@media (max-width: 940px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .svc-grid{ grid-template-columns:1fr; } }

/* about — values + family nod */
.values-grid{
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
@media (max-width: 860px){ .values-grid{ grid-template-columns:1fr; } }
.family-card{
  margin-top:2.4rem;
  max-width:720px;
  background:var(--fog);
  border:1px solid var(--line);
  border-left:4px solid var(--cedar);
  border-radius:var(--radius);
  padding:1.8rem 1.9rem;
}
.family-card p{ color:var(--ink-soft); }
.family-card p + p{ margin-top:.9rem; }

/* work — testimonials */
.quotes{
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
.quote-card{
  position:relative;
  background:var(--fog);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.1rem 1.7rem 1.7rem;
  display:flex; flex-direction:column; gap:1.2rem;
}
.quote-card::before{
  content:"\201C";
  position:absolute; top:.35rem; left:1.15rem;
  font-family:var(--font-display);
  font-size:3.4rem; line-height:1;
  color:var(--cedar); opacity:.55;
}
.quote-card blockquote{
  margin-top:1.2rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.1rem;
  line-height:1.5;
  color:var(--pine-deep);
}
.quote-who{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  font-size:.88rem; color:var(--ink-soft);
}
.quote-who strong{ display:block; font-family:var(--font-body); font-style:normal; color:var(--ink); }
.sample-tag{
  flex:none;
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cedar-deep);
  border:1px dashed var(--cedar);
  border-radius:999px;
  padding:.22rem .6rem;
}
.quotes-note{
  margin-top:2rem;
  display:flex; gap:.55rem; align-items:flex-start;
  max-width:var(--measure);
  font-size:.9rem; color:var(--ink-soft);
}
.quotes-note svg{ flex:none; color:var(--cedar-deep); margin-top:.2rem; }
@media (max-width: 860px){ .quotes{ grid-template-columns:1fr; max-width:560px; } }

/* work — six-slot gallery keeps a 2-up middle step */
@media (max-width: 1020px) and (min-width: 821px){
  .photos.gallery{ grid-template-columns:1fr 1fr; }
}

/* contact — service-area chips */
.service-area{ margin-top:2.8rem; }
.area-strip{
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem .7rem;
  padding:0;
}
.area-strip li{
  font-size:.85rem; font-weight:600;
  color:var(--pine);
  background:var(--fog-deep);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.4rem 1rem;
}
.area-note{
  margin-top:1rem;
  font-size:.88rem; color:var(--ink-soft);
  font-style:italic; font-family:var(--font-display);
}


/* ============================================================
   CHARCOAL & EMBER — committed identity layer (appended last).
   Dominant warm charcoal, glowing ember accents, brass tells,
   bone color-blocks. Redeclares every token, then restyles
   components. Structure/content/JS/endpoints untouched.
   ============================================================ */

:root{
  /* --- new palette --- */
  --char-base:   #17181A;   /* dominant near-black warm charcoal */
  --char-raised: #212228;   /* raised panels / dark sections' cards backdrop */
  --char-card:   #292A30;   /* cards, inputs */
  --char-hair:   #3A3B43;   /* hairline borders on dark */

  --ember:       #EF5E1E;   /* primary accent */
  --ember-light: #F79150;   /* glow / gradient top */
  --ember-deep:  #B84A15;   /* ember text on bone (contrast-safe) */
  --ember-glow:  rgba(239,94,30,.45);
  --ember-glow-soft: rgba(239,94,30,.20);

  --brass:       #C39A5A;   /* metallic tell */
  --brass-lite:  #E9CE93;
  --brass-deep:  #A97C36;

  --bone:        #F2ECE1;   /* light color-block sections */
  --bone-raised: #FBF7EF;   /* cards on bone */
  --bone-deep:   #E7DDCB;   /* borders / subtle fills on bone */
  --bone-ink:    #201E1B;   /* ink on bone */
  --bone-ink-soft:#5A5148;

  --text-on-dark:     #ECE5D8;
  --text-on-dark-dim: #B4AB9B;
  --alert:            #E06A3C;

  /* --- legacy token remap (so any untouched rule stays on-brand) --- */
  --fog:        var(--bone);
  --fog-deep:   var(--bone-deep);
  --pine:       var(--ember);
  --pine-mid:   var(--ember-light);
  --pine-deep:  var(--char-base);
  --cedar:      var(--ember);
  --cedar-deep: var(--ember-deep);
  --sand:       var(--brass);
  --ink:        var(--bone-ink);
  --ink-soft:   var(--bone-ink-soft);
  --line:       var(--bone-deep);
  --map-land:   var(--char-raised);
}

/* ---------- base / page ---------- */
body{ background:var(--char-base); color:var(--text-on-dark); }
::selection{ background:var(--ember); color:#1a0e06; }

/* editorial type push */
h1{ font-variation-settings:"opsz" 130; font-weight:600; letter-spacing:-.018em; }
h2{ font-variation-settings:"opsz" 72;  font-weight:580; letter-spacing:-.014em; }

/* ---------- COLOR-BLOCK tones ---------- */
.sec-char{ background:var(--char-base); color:var(--text-on-dark); }
.sec-bone{ background:var(--bone); color:var(--bone-ink); }

.sec-char h1, .sec-char h2, .sec-char h3{ color:var(--bone); }
.sec-bone h1, .sec-bone h2, .sec-bone h3{ color:var(--bone-ink); }

/* muted body copy per tone (0-specificity :where keeps component colors winning) */
.sec-char :where(p,li,figcaption,.lede,.map-caption,.contact-fineprint,.dz-hint,.chat-disclaim,.area-note,.footer-meta p){ color:var(--text-on-dark-dim); }
.sec-bone :where(p,li,.lede){ color:var(--bone-ink-soft); }

/* eyebrows: brass on charcoal, deep-ember on bone */
.sec-char .eyebrow{ color:var(--brass); }
.sec-char .eyebrow::before{ background:var(--brass); }
.sec-bone .eyebrow{ color:var(--ember-deep); }
.sec-bone .eyebrow::before{ background:var(--ember); }

/* small caps tells (tags, counters, kickers) glow ember on charcoal */
.sec-char :where(.lane-tag,.svc-tag,.va-cap,.dg-item .k,.map-town){ color:var(--ember-light); }
.sec-char .step::before{ color:var(--brass); }

/* links */
a{ color:var(--ember-deep); }
.sec-char a{ color:var(--ember-light); }

/* ---------- BRASS FOIL headings ---------- */
h1.foil, h2.foil,
.page-hero h1, .cta-band h2, .island-grown .wrap h2{
  background:linear-gradient(94deg, var(--brass-lite) 0%, var(--brass) 40%, var(--brass-deep) 68%, var(--brass-lite) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* thin ember hairline rule (recurring divider) */
.shoreline{ color:var(--ember); filter:drop-shadow(0 0 4px var(--ember-glow-soft)); }
.shoreline.on-dark{ color:var(--brass); filter:none; }

/* ---------- HEADER / NAV ---------- */
.site-header{
  background:color-mix(in srgb, var(--char-base) 88%, transparent);
  border-bottom:1px solid var(--char-hair);
}
.wordmark .name{ color:var(--bone); }
.wordmark .locale{ color:var(--brass); }
.wordmark .tick{ color:var(--ember); }
.nav-toggle{ color:var(--bone); }
.nav-links a:not(.btn){ color:var(--text-on-dark); }
.nav-links a:not(.btn):hover{ color:var(--ember-light); border-bottom-color:var(--ember); }
.nav-links a:not(.btn)[aria-current="page"]{ color:var(--ember-light); border-bottom-color:var(--ember); }
@media (max-width: 760px){
  .nav-links{ background:var(--char-raised); border-bottom-color:var(--char-hair); }
  .nav-links li{ border-bottom-color:var(--char-hair); }
  .nav-links a:not(.btn)[aria-current="page"]{ color:var(--ember-light); }
}

/* ---------- BUTTONS (ember glow) ---------- */
.btn-primary, .btn-cedar{
  background:linear-gradient(180deg, var(--ember-light), var(--ember) 60%);
  color:#1c0d04;
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(239,94,30,.35), 0 8px 24px var(--ember-glow);
}
.btn-primary:hover, .btn-cedar:hover{
  background:linear-gradient(180deg, var(--ember-light), var(--ember) 70%);
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(239,94,30,.5), 0 12px 34px var(--ember-glow);
}
.btn-ghost{ color:var(--ember-light); border-color:var(--ember); background:transparent; }
.btn-ghost:hover{ background:var(--ember); color:#1c0d04; }
.sec-bone .btn-ghost{ color:var(--ember-deep); border-color:var(--ember); }
.sec-bone .btn-ghost:hover{ background:var(--ember); color:#1c0d04; }
.nav-links .btn-primary{ color:#1c0d04; }

/* focus ring: ember with glow */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--ember);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--ember-glow-soft);
}

/* ---------- CARDS per tone ---------- */
.sec-char :where(.diff-card,.lane,.svc-card,.step,.quote-card,.family-card){
  background:var(--char-card);
  border-color:var(--char-hair);
}
.sec-bone :where(.diff-card,.lane,.svc-card,.step,.quote-card,.family-card){
  background:var(--bone-raised);
  border-color:var(--bone-deep);
}
/* card accent icons glow ember on charcoal */
.sec-char :where(.diff-card h3 svg,.svc-card .svc-icon){ color:var(--ember-light); }
.svc-icon{ background:var(--ember-glow-soft); color:var(--ember-light); }
.lane{ border-top-color:var(--ember); }
.step-icon{ background:linear-gradient(180deg, var(--ember-light), var(--ember)); color:#1c0d04; box-shadow:0 6px 18px var(--ember-glow); }
.quote-card::before{ color:var(--ember); opacity:.6; }
.sample-tag{ color:var(--ember-deep); border-color:var(--ember); }
.sec-char .sample-tag{ color:var(--ember-light); }
.pull-line{ border-left-color:var(--ember); color:var(--ember-deep); }

/* ---------- HERO: radial ember glow behind headline ---------- */
.hero{ background:var(--char-base); }
.hero::before{
  content:""; position:absolute; z-index:0;
  left:-6%; top:24%; width:min(58vw,640px); aspect-ratio:1;
  background:radial-gradient(circle at 40% 40%, var(--ember-glow) 0%, var(--ember-glow-soft) 34%, transparent 66%);
  filter:blur(6px); pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1; }
.hero h1{ color:var(--bone); }
.hero h1 em{ color:var(--ember-light); font-style:italic;
  text-shadow:0 0 22px var(--ember-glow); -webkit-text-fill-color:currentColor; }
.hero-note svg{ color:var(--ember-light); }
.map-caption{ color:var(--text-on-dark-dim); }

/* ---------- COVERAGE MAP recolor (charcoal land · ember routes/hub) ---------- */
.map-island{ fill:var(--char-raised); stroke:var(--ember); stroke-width:3.5; }
.map-contour{ stroke:var(--brass); opacity:.28; }
.map-route{ stroke:var(--ember); stroke-width:3.6; filter:drop-shadow(0 0 4px var(--ember-glow)); }
.map-node{ fill:var(--char-base); stroke:var(--ember); }
.map-hub{ fill:var(--ember); stroke:#1c0d04; filter:drop-shadow(0 0 8px var(--ember-glow)); }
.map-label{ fill:var(--text-on-dark-dim); }
.map-town{ fill:var(--ember-light); }
.map-hub-label{ fill:var(--brass-lite); }
.map-water-label{ fill:var(--brass); opacity:.55; }

/* ---------- ISLAND GROWN (dark story) ---------- */
.island-grown{ background:var(--char-base); }
.island-grown .bg-island{ color:var(--brass); opacity:.06; }
.island-grown p{ color:var(--text-on-dark-dim); }
.island-grown .eyebrow{ color:var(--brass); }
.island-grown .signoff{ color:var(--brass-lite); }
/* editorial DROP-CAP on the opening story paragraph */
.island-grown .wrap h2 + p::first-letter{
  float:left; font-family:var(--font-display); font-weight:600;
  font-size:3.7em; line-height:.78; margin:.02em .12em 0 0;
  color:var(--ember);
  text-shadow:0 0 18px var(--ember-glow-soft);
}
/* portrait becomes a charcoal↔ember duotone moment */
.portrait-slot{
  background:linear-gradient(150deg, var(--ember-glow) 0%, transparent 46%), var(--char-raised);
  border-color:color-mix(in srgb, var(--brass) 45%, transparent);
}
.portrait-slot .contours{ color:var(--ember-light); opacity:.4; }
.portrait-slot .corner{ border-color:var(--brass); }
.portrait-slot figcaption{ color:var(--text-on-dark-dim);
  background:linear-gradient(to top, rgba(23,24,26,.94), rgba(23,24,26,0)); }

/* ---------- FULL-BLEED DUOTONE MOMENT ---------- */
.moment{ padding-block:0; background:var(--char-base); }
.moment-panel{
  position:relative; overflow:hidden;
  width:100%;
  min-height:clamp(320px, 46vh, 500px);
  display:flex; align-items:flex-end;
  background:
    radial-gradient(120% 90% at 82% 20%, var(--ember-glow) 0%, transparent 52%),
    linear-gradient(135deg, #2a1a12 0%, var(--char-raised) 46%, var(--char-base) 100%);
  border-block:1px solid var(--char-hair);
}
.moment-contours{ position:absolute; inset:0; width:100%; height:100%; color:var(--ember-light); opacity:.5; }
.moment .corner{ position:absolute; width:30px; height:30px; border:2px solid var(--brass); opacity:.8; }
.moment .corner.tl{ top:22px; left:22px; border-right:0; border-bottom:0; border-radius:5px 0 0 0; }
.moment .corner.br{ bottom:22px; right:22px; border-left:0; border-top:0; border-radius:0 0 5px 0; }
.moment-copy{ position:relative; z-index:1; padding:clamp(1.4rem,4vw,2.6rem); max-width:640px; }
.moment-kicker{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ember-light); margin-bottom:.7rem;
  border:1px solid var(--ember); border-radius:999px; padding:.3rem .8rem;
  background:rgba(239,94,30,.10);
}
.moment-cap{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.15rem,1.4vw+.9rem,1.6rem); line-height:1.32;
  color:var(--bone);
}

/* ---------- CTA / concierge band (ember duotone) ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--char-base); }
.cta-band::before{
  content:""; position:absolute; z-index:0; inset:auto -10% -40% -10%;
  height:70%;
  background:radial-gradient(60% 100% at 50% 100%, var(--ember-glow) 0%, transparent 70%);
  pointer-events:none;
}
.cta-band .wrap{ position:relative; z-index:1; }
.cta-band .lede{ color:var(--text-on-dark-dim); }
.cta-band .eyebrow{ color:var(--ember-light); }
.cta-band .eyebrow::before{ background:var(--ember); }

/* ---------- TEASER (bone) lanes keep light cards ---------- */
.teaser .lane{ background:var(--bone-raised); }

/* ---------- VISION (Dream / Diagnose) on charcoal ---------- */
.vision{ background:var(--char-base); }
.vision-toggle{ background:var(--char-card); border-color:var(--char-hair); }
.vseg{ color:var(--text-on-dark-dim); }
.vseg[aria-selected="true"]{ background:linear-gradient(180deg,var(--ember-light),var(--ember)); color:#1c0d04; }
.vseg:not([aria-selected="true"]):hover{ color:var(--ember-light); }
.vision-card{ background:var(--char-raised); border-color:var(--char-hair); }
.vlabel{ color:var(--bone); }
.dropzone{ border-color:var(--ember); background:rgba(239,94,30,.06); color:var(--text-on-dark-dim); }
.dropzone:hover, .dropzone.drag{ background:rgba(239,94,30,.12); border-color:var(--ember-light); }
.dropzone svg{ color:var(--ember-light); }
.dropzone .dz-strong{ color:var(--ember-light); }
.diagnosis{ background:var(--char-card); border-color:var(--char-hair); border-left-color:var(--ember); }
.dg-summary{ color:var(--bone); }
.dg-item .k{ color:var(--ember-light); }
.dg-item .v{ color:var(--text-on-dark); }
.u-routine{ background:rgba(239,94,30,.12); color:var(--ember-light); }
.u-worth{ background:rgba(195,154,90,.2); color:var(--brass-lite); }
.u-soon{ background:rgba(224,106,60,.2); color:var(--alert); }
.va-figure img{ background:var(--char-card); border-color:var(--char-hair); }
.vision-guard{ color:var(--text-on-dark-dim); }
.vision-guard svg{ color:var(--ember-light); }

/* ---------- FORM fields (dark, ember focus) ----------
   fields sit a step lighter than the charcoal section with a
   clearer hairline so they read as obviously fillable on dark. */
.vinput, .lead-form input, .lead-form textarea, .lead-form select, .chat-input{
  background:#30323A; color:var(--text-on-dark); border:1px solid #4A4C57;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.vinput::placeholder, .lead-form input::placeholder, .lead-form textarea::placeholder, .chat-input::placeholder{ color:#8b8477; }
.lead-form label{ color:var(--bone); }
.lead-form label .opt{ color:var(--text-on-dark-dim); }
.vinput:focus-visible, .lead-form input:focus-visible, .lead-form textarea:focus-visible,
.lead-form select:focus-visible, .chat-input:focus-visible{ border-color:var(--ember); }
.lead-prefill-tag{ color:var(--ember-light); background:rgba(239,94,30,.1); border-color:var(--char-hair); }
.lead-success{ background:var(--char-card); border-color:var(--char-hair); color:var(--text-on-dark); }
.lead-success svg{ color:var(--ember-light); }
.contact-alt .divider{ color:var(--text-on-dark-dim); }
.contact-alt .divider::before, .contact-alt .divider::after{ background:var(--char-hair); }
.contact-fineprint{ color:var(--text-on-dark-dim); }

/* service-area chips (dark) */
.area-strip li{ color:var(--ember-light); background:var(--char-card); border-color:var(--char-hair); }
.area-note{ color:var(--text-on-dark-dim); }
.service-area .divider{ color:var(--brass); }

/* ---------- ASK ISAAC CHAT (dark + ember) ---------- */
.chat-launcher{
  background:linear-gradient(180deg, var(--ember-light), var(--ember) 62%); color:#1c0d04;
  box-shadow:0 6px 24px var(--ember-glow);
}
.chat-launcher:hover{ background:linear-gradient(180deg, var(--ember-light), var(--ember) 72%); box-shadow:0 10px 32px var(--ember-glow); }
.chat-panel{ background:var(--char-base); border-color:var(--char-hair); box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 0 1px var(--char-hair); }
.chat-header{ background:linear-gradient(180deg, var(--char-raised), var(--char-card)); color:var(--bone); border-bottom:1px solid var(--char-hair); }
.chat-htext .s{ color:var(--brass); }
.chat-log{ background:var(--char-base); }
.from-ai .chat-bubble{ background:var(--char-card); color:var(--text-on-dark); border-color:var(--char-hair); }
.from-user .chat-bubble{ background:linear-gradient(180deg, var(--ember-light), var(--ember)); color:#1c0d04; }
.chat-cta button{ color:var(--ember-light); background:rgba(239,94,30,.12); border-color:var(--ember); }
.chat-cta button:hover{ background:var(--ember); color:#1c0d04; }
.typing{ background:var(--char-card); border-color:var(--char-hair); }
.typing span{ background:var(--ember-light); }
.chat-foot{ background:var(--char-base); border-top-color:var(--char-hair); }
.chat-input{ background:var(--char-card); }
.chat-send{ background:linear-gradient(180deg, var(--ember-light), var(--ember)); color:#1c0d04; }
.chat-send:hover{ filter:brightness(1.06); }
.chat-disclaim{ color:var(--text-on-dark-dim); }

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--char-base); border-top:1px solid var(--char-hair); color:var(--text-on-dark-dim); }
.footer-mark{ color:var(--bone); }
.footer-mark .tick{ color:var(--ember); }
.footer-meta a{ color:var(--ember-light); }

/* ---------- contrast fixes: component copy that must go light on charcoal
   (these component rules out-specify the low-specificity :where layer) ---------- */
.sec-char .svc-card p,
.sec-char .family-card p,
.sec-char .quotes-note{ color:var(--text-on-dark-dim); }
.sec-char .quote-card blockquote{ color:var(--bone); }
.sec-char .quote-who{ color:var(--text-on-dark-dim); }
.sec-char .quote-who strong{ color:var(--text-on-dark); }
.sec-char .lede{ color:var(--text-on-dark-dim); }

/* ---------- spinner on ember buttons ---------- */
.spinner{ border-color:rgba(28,13,4,.35); border-top-color:#1c0d04; }

/* ============================================================
   REFINEMENTS — client feedback + contrast pass (2026-07-08, Fable)
   1) Squiggle motif RETIRED (client: reads hokey/childish):
      wordmark/footer tick + section shoreline dividers are now
      clean brass / glowing-ember hairline rules.
      EXCEPTION: the literal Whidbey coastline on the coverage map stays.
   2) Filled ember buttons keep dark ink text inside tone sections
      (.sec-char a was washing them out — real contrast bug).
   3) Island Grown gets a raised-charcoal + ember-breath lift.
   4) Contact section becomes the bone color-block; form restyled.
   5) Moment-panel contours softened.
   ============================================================ */

/* --- 1a. wordmark hairline (replaces the hand-drawn tick svg) --- */
.tick{
  display:block;
  width:96px; height:2px;
  border-radius:1px;
  background:linear-gradient(90deg, var(--brass-lite), var(--brass) 55%, transparent 97%);
}
.wordmark .tick{ width:118px; height:2px; margin-top:4px; }

/* --- 1b. section dividers: thin glowing ember hairline --- */
.shoreline, .shoreline.on-dark{
  height:1px;
  color:transparent;
  background:linear-gradient(90deg,
    transparent 2%,
    color-mix(in srgb, var(--ember) 62%, transparent) 22%,
    color-mix(in srgb, var(--ember) 62%, transparent) 78%,
    transparent 98%);
  box-shadow:0 0 10px var(--ember-glow-soft);
  filter:none;
}
.shoreline path{ display:none; }

/* --- 2. filled buttons: ink text always, even under .sec-char a --- */
.sec-char a.btn-primary, .sec-char a.btn-cedar,
.sec-bone a.btn-primary, .sec-bone a.btn-cedar{ color:#1c0d04; }

/* --- 3. island grown: raised charcoal + ember breath --- */
.island-grown{
  background:
    radial-gradient(56rem 32rem at 86% 16%, var(--ember-glow-soft), transparent 62%),
    var(--char-raised);
  border-block:1px solid var(--char-hair);
}

/* --- 4. bone contact block (form + chips on bone) --- */
.sec-bone .lead-form input,
.sec-bone .lead-form textarea,
.sec-bone .lead-form select{
  background:#fdfaf3; color:var(--bone-ink); border-color:var(--bone-deep);
}
.sec-bone .lead-form input::placeholder,
.sec-bone .lead-form textarea::placeholder{ color:#8d8371; }
.sec-bone .lead-form label{ color:var(--bone-ink); }
.sec-bone .lead-form label .opt{ color:var(--bone-ink-soft); }
.sec-bone .lead-prefill-tag{ color:var(--ember-deep); background:rgba(239,94,30,.08); border-color:var(--bone-deep); }
.sec-bone .lead-success{ background:var(--bone-raised); border-color:var(--bone-deep); color:var(--bone-ink); }
.sec-bone .lead-success svg{ color:var(--ember-deep); }
.sec-bone .contact-alt .divider{ color:var(--bone-ink-soft); }
.sec-bone .contact-alt .divider::before,
.sec-bone .contact-alt .divider::after{ background:var(--bone-deep); }
.sec-bone .area-strip li{ color:var(--bone-ink); background:var(--bone-raised); border-color:var(--bone-deep); }
.sec-bone .service-area .divider{ color:var(--brass-deep); }
.sec-bone .area-note,
.sec-bone .contact-fineprint{ color:var(--bone-ink-soft); }
.sec-bone .field-error{ color:#a03325; }

/* --- 5. moment contours: quieter texture --- */
.moment-contours{ opacity:.32; }