@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/karla-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/karla-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/karla-600-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/karla-700-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Petrona';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/petrona-400-i-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Petrona';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/petrona-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Petrona';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/petrona-600-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Petrona';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/petrona-700-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --paper:#F6F3EA;--paper-deep:#EDE8DA;--surface:#FFFFFF;
  --ink:#17251E;--ink-soft:#4A5A50;--ink-faint:#7C8A80;
  --brand:#1D5240;--brand-deep:#102F24;--brand-tint:#E3EBE5;
  --accent:#C4622D;--accent-tint:#F6E6DA;--rule:#DDD6C6;
  --r:10px;--wrap:1180px;
  --s1:8px;--s2:14px;--s3:22px;--s4:34px;--s5:54px;--s6:84px;--s7:120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 "Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* browser surfaces, themed */
::selection{background:var(--accent);color:#fff}
body{caret-color:var(--accent);scrollbar-color:var(--brand) var(--paper-deep)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper-deep)}
::-webkit-scrollbar-thumb{background:var(--brand);border:3px solid var(--paper-deep);border-radius:999px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}

h1,h2,h3{font-family:"Petrona",Georgia,"Times New Roman",serif;font-weight:700;line-height:1.08;
  letter-spacing:-0.025em;margin:0 0 .42em;text-wrap:balance}
h1{font-size:clamp(2.35rem,4.9vw,4.15rem)}
h2{font-size:clamp(1.85rem,3.5vw,2.9rem)}
h3{font-family:"Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:-.01em;line-height:1.35;margin:0 0 .4em}
p{margin:0 0 1.05em}
a{color:var(--brand);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
strong,b{font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.prose{max-width:68ch}
.lede{font-size:clamp(1.1rem,1.6vw,1.32rem);line-height:1.55;color:var(--ink-soft);max-width:56ch}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}

/* ---------- value ribbon ---------- */
.ribbon{background:var(--brand-deep);color:#fff;font-size:.79rem;letter-spacing:.02em;
  font-weight:500;padding:9px 0}
.ribbon .wrap{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.ribbon span[aria-hidden]{opacity:.45}
@media(max-width:760px){
  /* On a phone the four claims wrap into a wall. Keep the two that matter and drop the rest. */
  .ribbon{font-size:.75rem;padding:8px 0}
  .ribbon .wrap span:nth-child(n+4){display:none}
  /* A separator between two claims lands at the end of a wrapped line and reads as a typo.
     The flex gap does the separating instead. */
  .ribbon span[aria-hidden]{display:none}
  .ribbon .wrap{gap:2px 12px}
}
@media(max-width:520px){
  /* Two claims still wrap to two lines and cost 69px above the fold. One reads as a statement. */
  .ribbon .wrap span:nth-child(n+2){display:none}
}

/* ---------- header ---------- */
header.site{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
/* Vertical padding only. A shorthand here would beat .wrap's 24px horizontal gutter on equal
   specificity and zero it, putting the logo flush against the screen edge on any viewport too
   narrow for the max-width to centre the row. */
.bar{display:flex;align-items:center;gap:16px;justify-content:space-between;padding-top:12px;padding-bottom:12px}
.logo{display:inline-block;white-space:nowrap;text-decoration:none;color:var(--ink);
  font-family:"Petrona",Georgia,"Times New Roman",serif;font-weight:700;font-size:clamp(.98rem,3.4vw,1.16rem);letter-spacing:-.02em;line-height:1}
.logo em{font-style:normal;color:var(--brand)}
.barend{display:flex;align-items:center;gap:10px;flex:0 0 auto}
nav.main{display:flex;gap:24px;align-items:center}
nav.main a{color:var(--ink-soft);text-decoration:none;font-size:.92rem;font-weight:500;position:relative;padding:3px 0;white-space:nowrap}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--accent);
  transition:right .28s cubic-bezier(.16,1,.3,1)}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink)}
nav.main a:hover::after,nav.main a[aria-current]::after{right:0}

/* mobile menu: <details> so it needs no JavaScript */
.mobnav{display:none;position:relative}
.mobnav summary{list-style:none;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;
  border-radius:10px;border:1px solid var(--rule);background:var(--surface)}
.mobnav summary::-webkit-details-marker{display:none}
.bars{display:grid;gap:4px;width:18px}
.bars i{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.mobnav[open] summary .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobnav[open] summary .bars i:nth-child(2){opacity:0}
.mobnav[open] summary .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobpanel{position:absolute;right:0;top:calc(100% + 10px);width:min(78vw,290px);background:var(--surface);
  border:1px solid var(--rule);border-radius:calc(var(--r) + 4px);padding:10px;z-index:60;display:grid;
  box-shadow:0 8px 16px rgba(0,0,0,.08),0 28px 56px -20px rgba(0,0,0,.34)}
.mobpanel a{padding:13px 14px;text-decoration:none;color:var(--ink);font-weight:500;border-radius:10px;font-size:1rem}
.mobpanel a:hover,.mobpanel a[aria-current]{background:var(--brand-tint);color:var(--brand-deep)}
.mobpanel .mobcta{margin-top:8px;text-align:center;color:#fff;font-weight:600}
.mobpanel .mobcta:hover{color:#fff}
@media(max-width:1040px){nav.main{display:none}.mobnav{display:block}}
@media(max-width:420px){.cta-head{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;cursor:pointer;
  font:600 .97rem/1 "Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:15px 26px;border-radius:calc(var(--r) + 2px);text-decoration:none;
  transition:background .18s ease,color .18s ease,box-shadow .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1)}
.btn--solid{background:var(--accent);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.10),0 10px 24px -10px color-mix(in srgb,var(--accent) 62%,transparent)}
.btn--solid:hover{background:var(--ink);color:#fff;transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,.12),0 18px 34px -12px rgba(0,0,0,.30)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand)}
.btn--sm{padding:11px 17px;font-size:.88rem}
@media(max-width:520px){.btn{width:100%}}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% 40% 40% -25%;background:
  radial-gradient(closest-side,color-mix(in srgb,var(--brand) 11%,transparent),transparent);pointer-events:none}
.hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center;position:relative}
.hero h1{margin-bottom:.3em}
.hero h1 .mark{position:relative;white-space:nowrap;color:var(--brand)}
.hero h1 .mark svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.34em;overflow:visible}
.hero h1 .mark svg path{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s4)}
.trust{margin:var(--s4) 0 0;padding:0;display:flex;gap:9px;flex-wrap:wrap;font-size:.9rem}
.trust span{display:inline-flex;align-items:center;gap:.5em;background:var(--surface);
  border:1px solid var(--rule);border-radius:999px;padding:9px 15px;color:var(--ink);font-weight:500;
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.trust svg{flex:0 0 auto;color:var(--brand);width:17px;height:17px}
@media(max-width:400px){.trust{font-size:.85rem}.trust span{padding:8px 13px}}

/* photo frames */
.shot{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-deep);
  box-shadow:0 2px 6px rgba(0,0,0,.07),0 26px 50px -24px rgba(0,0,0,.42)}
/* <picture> is inline by default, so a percentage height on the img inside resolves against
   nothing and the image collapses to zero. It has to be a block that fills the frame. */
.shot picture{display:block;width:100%;height:100%}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
/* Two tilted, overlapping frames rather than one flat rectangle. The tilt is tiny (about 1.5deg)
   and opposed between the two, which reads as a pair of photographs set down on the page rather
   than as a stock image dropped into a box. */
.hero .stack{position:relative;padding:6px 0 34px}
.hero .shot{aspect-ratio:3/2;border:7px solid var(--surface);border-radius:calc(var(--r) + 2px);
  transform:rotate(-1.4deg);transition:transform .5s cubic-bezier(.16,1,.3,1);
  box-shadow:0 3px 8px rgba(0,0,0,.10),0 30px 56px -26px rgba(0,0,0,.45)}
.hero .stack:hover .shot{transform:rotate(-0.6deg)}
.hero .stack .shot:last-child{position:absolute;width:46%;right:-18px;bottom:-16px;aspect-ratio:1/1;
  transform:rotate(3deg);z-index:2}
.hero .stack:hover .shot:last-child{transform:rotate(1.6deg)}
/* A small hand-set badge, the way a sticker sits on a photo. Only rendered when the page passes
   one: every claim true of these sites is already in the ribbon, the trust chips or the facts
   strip, so an unconditional badge could only repeat one of them back at the reader. */
.hero .stack[data-badge]::after{content:attr(data-badge);position:absolute;left:-14px;top:-6px;z-index:3;
  background:var(--accent);color:#fff;font:700 .78rem/1 "Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.01em;
  padding:10px 15px;border-radius:999px;transform:rotate(-4deg);white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,.16)}
@media(max-width:900px){
  .hero .grid{grid-template-columns:1fr}
  .hero .stack .shot:last-child{display:none}
  .hero .shot{transform:none}
  .hero .stack::after{left:auto;right:10px;top:-10px}
}

/* The chat card is 600px tall and opens itself after 3.5s, which on a laptop covered the entire
   hero photograph. Capped to a compact greeting: the message list already scrolls, and the empty
   flex space it was reserving was most of the height. */
@media(min-width:901px){
  #lc-card{max-height:min(410px,62vh)!important}
  #lc-msgs{min-height:0!important;max-height:196px!important}
}

/* one authored moment: the hero settles. Starts VISIBLE, so no-JS and crawlers lose nothing. */
@media(prefers-reduced-motion:no-preference){
  .hero h1,.hero .lede,.hero .acts,.hero .trust,.hero .stack{
    animation:settle .82s cubic-bezier(.16,1,.3,1) both}
  .hero .lede{animation-delay:.06s}.hero .acts{animation-delay:.12s}
  .hero .trust{animation-delay:.18s}.hero .stack{animation-delay:.09s}
}
@keyframes settle{from{transform:translateY(14px) scale(.995);filter:blur(6px)}
  to{transform:none;filter:blur(0)}}

/* ---------- typographic fact line (not a stat-card grid) ---------- */
/* A grid, not a wrapping flex row. The flex version put the number and its label side by side and
   let the label wrap to three ragged lines on a phone, which is what made this block look broken. */
.facts{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--s5) 0;margin:0}
.facts dl{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4) var(--s3)}
.facts div{display:block;min-width:0}
.facts dd{margin:0 0 .3em;font-family:"Petrona",Georgia,"Times New Roman",serif;font-weight:700;font-size:clamp(2.1rem,4.6vw,3rem);
  line-height:.95;letter-spacing:-0.025em;color:var(--brand);font-variant-numeric:tabular-nums}
.facts dt{font-size:.92rem;color:var(--ink-soft);line-height:1.35;max-width:20ch}
@media(max-width:820px){.facts dl{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s4)}}
@media(max-width:400px){.facts dd{font-size:1.9rem}.facts dt{font-size:.86rem}}

section{padding:clamp(52px,7vw,var(--s7)) 0}
.band{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dark{background:var(--brand-deep);color:var(--paper)}
.dark h2,.dark h3{color:#fff}
.dark p{color:color-mix(in srgb,var(--paper) 82%,transparent)}
.dark a{color:#fff}
.head{max-width:34ch;margin-bottom:var(--s5)}
.head p{color:var(--ink-soft);margin:.7em 0 0;font-size:1.06rem;max-width:52ch}
.dark .head p{color:color-mix(in srgb,var(--paper) 78%,transparent)}

/* ---------- editorial split (replaces equal-card grids) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.split--wide{grid-template-columns:1.15fr .85fr}
@media(max-width:880px){.split,.split--wide{grid-template-columns:1fr}}

.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.rows li{padding:var(--s4) 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,15ch) 1fr;gap:var(--s3) var(--s4);align-items:start}
.rows h3{margin:0;color:var(--brand)}
.rows p{margin:0;color:var(--ink-soft)}
.dark .rows{border-color:color-mix(in srgb,#fff 20%,transparent)}
.dark .rows li{border-color:color-mix(in srgb,#fff 20%,transparent)}
.dark .rows h3{color:var(--accent)}
@media(max-width:640px){.rows li{grid-template-columns:1fr;gap:var(--s1)}}

/* ordered sequence: the order is the information, so it is numbered. Typographic, not boxed. */
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
ol.steps li:first-child{border-top:1px solid var(--rule)}
ol.steps li::before{content:counter(s,decimal-leading-zero);font-family:"Petrona",Georgia,"Times New Roman",serif;font-weight:700;
  font-size:1.5rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
ol.steps h3{margin:0 0 .3em}
ol.steps p{margin:0;color:var(--ink-soft);max-width:62ch}
.dark ol.steps li,.dark ol.steps li:first-child{border-color:color-mix(in srgb,#fff 20%,transparent)}
.dark ol.steps p{color:color-mix(in srgb,var(--paper) 76%,transparent)}

/* ---------- provider presence ---------- */
.presence{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(24px,3.4vw,40px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 40px -28px rgba(0,0,0,.30)}
.presence h2{font-size:clamp(1.4rem,2.4vw,1.95rem);margin-bottom:.35em}
.presence p{color:var(--ink-soft);margin:0 0 1em;max-width:62ch}
.presence p:last-child{margin-bottom:0}
.near{display:flex;flex-wrap:wrap;gap:9px;margin:var(--s3) 0 0;padding:0;list-style:none}
.near a{display:inline-flex;align-items:baseline;gap:.5em;background:var(--paper);text-decoration:none;
  color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:8px 15px;font-size:.9rem;
  transition:border-color .18s ease,background .18s ease}
.near a:hover{border-color:var(--brand);background:var(--brand-tint)}
.near b{font-weight:600}
.near i{font-style:normal;color:var(--ink-faint);font-size:.83rem;font-variant-numeric:tabular-nums}

/* ---------- named providers ---------- */
ul.provs{list-style:none;margin:var(--s3) 0 0;padding:0;border-top:1px solid var(--rule)}
ul.provs li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  padding:14px 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
ul.provs .nm{font-weight:600;line-height:1.35}
ul.provs a.tel{white-space:nowrap;text-decoration:none;font-variant-numeric:tabular-nums;
  color:var(--brand);border-bottom:1.5px solid color-mix(in srgb,var(--brand) 35%,transparent)}
ul.provs a.tel:hover{color:var(--accent);border-bottom-color:var(--accent)}
.provnote{font-size:.86rem;color:var(--ink-faint);margin:var(--s3) 0 0;max-width:62ch}

/* ---------- town index ---------- */
.towns{columns:4 195px;column-gap:var(--s5);margin:0;padding:0;list-style:none}
.towns li{break-inside:avoid;margin:0 0 2px}
.towns a{display:flex;justify-content:space-between;gap:1em;align-items:baseline;text-decoration:none;
  color:var(--ink);padding:7px 0;border-bottom:1px solid transparent;transition:border-color .16s ease,color .16s ease}
.towns a:hover{color:var(--brand);border-bottom-color:var(--rule)}
.towns i{font-style:normal;color:var(--ink-faint);font-size:.82rem;font-variant-numeric:tabular-nums}
@media(max-width:560px){.towns{columns:2 130px;column-gap:var(--s4)}}

/* ---------- form ---------- */
.formwrap{max-width:760px;margin-inline:auto;background:var(--surface);border:1px solid var(--rule);border-radius:calc(var(--r) + 4px);
  padding:clamp(26px,3.6vw,46px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 30px 60px -34px rgba(0,0,0,.36)}
.formwrap h2{margin-bottom:.28em}
.formwrap .sub{color:var(--ink-soft);margin-bottom:var(--s4);max-width:52ch}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.f{display:flex;flex-direction:column;gap:7px}
.f--full{grid-column:1/-1}
label{font-size:.88rem;font-weight:600;letter-spacing:.005em}
.hint{font-weight:400;color:var(--ink-faint)}
input,select,textarea{font:400 16px/1.4 "Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--rule);border-radius:var(--r);padding:13px 14px;width:100%;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--rule))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#4A5A50 50%),linear-gradient(135deg,#4A5A50 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(1em + 3px),calc(100% - 14px) calc(1em + 3px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
textarea{min-height:96px;resize:vertical}
.hp{display:none!important}
.formnote{font-size:.85rem;color:var(--ink-faint);margin:var(--s3) 0 0;max-width:58ch}
.formmsg{margin-top:var(--s3);padding:13px 16px;border-radius:var(--r);font-size:.94rem;display:none}
.formmsg.ok{display:block;background:var(--brand-tint);color:var(--brand-deep)}
.formmsg.err{display:block;background:var(--accent-tint);color:var(--brand-deep)}
button[disabled]{opacity:.62;cursor:progress}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}}

/* ---------- faq ---------- */
details.faq{border-bottom:1px solid var(--rule)}
details.faq:first-of-type{border-top:1px solid var(--rule)}
details.faq summary{cursor:pointer;padding:var(--s3) 0;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:var(--s3);align-items:center;font-size:1.04rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:hover{color:var(--brand)}
details.faq summary svg{flex:0 0 auto;color:var(--accent);transition:transform .3s cubic-bezier(.16,1,.3,1)}
details.faq[open] summary svg{transform:rotate(180deg)}
details.faq .a{padding:0 0 var(--s3);color:var(--ink-soft);max-width:66ch}
details.faq .a p:last-child{margin-bottom:0}

/* ---------- full-bleed photo band ---------- */
.bleed{position:relative;min-height:clamp(320px,44vw,480px);display:grid;align-items:end;overflow:hidden}
.bleed picture{position:absolute;inset:0;display:block}
.bleed img{width:100%;height:100%;object-fit:cover;display:block}
.bleed .veil{position:absolute;inset:0;background:linear-gradient(180deg,
  color-mix(in srgb,var(--brand-deep) 4%,transparent) 0%,
  color-mix(in srgb,var(--brand-deep) 88%,transparent) 100%)}
.bleed .wrap{position:relative;padding-top:var(--s6);padding-bottom:var(--s5)}
.bleed h2{color:#fff;max-width:19ch}
.bleed p{color:rgba(255,255,255,.9);max-width:52ch;margin-bottom:0}

/* ---------- chat assistant overrides ----------
   widget.js is the shared network component and is deployed byte-identical, so its surface is
   corrected here rather than forked. The composer was the weak part: an oversized bare textarea
   and a washed-out send button that read as disabled even when it was not. */
#lc-in,#lc-peekin{font:400 16px/1.45 "Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;color:var(--ink)!important;
  background:var(--paper)!important;border:1.5px solid var(--rule)!important;
  border-radius:12px!important;padding:12px 14px!important;min-height:46px!important;
  max-height:120px!important;box-shadow:none!important;transition:border-color .16s ease,box-shadow .16s ease}
#lc-in::placeholder,#lc-peekin::placeholder{color:var(--ink-faint)!important}
#lc-in:focus,#lc-peekin:focus{outline:none!important;border-color:var(--brand)!important;
  background:var(--surface)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent)!important}
#lc-send,#lc-peeksend{background:var(--accent)!important;color:#fff!important;border:0!important;
  border-radius:12px!important;font:600 .95rem/1 "Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;padding:12px 18px!important;
  opacity:1!important;box-shadow:0 2px 4px rgba(0,0,0,.10)!important}
#lc-send:hover,#lc-peeksend:hover{background:var(--brand)!important}
#lc-send[disabled],#lc-peeksend[disabled]{background:var(--rule)!important;color:var(--ink-faint)!important;box-shadow:none!important}
#lc-consent{font-size:.78rem!important;line-height:1.4!important;color:var(--ink-faint)!important}

/* ---------- blog index cards ---------- */
ul.postlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
ul.postlist li{margin:0}
.pcard{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(20px,3vw,40px);align-items:center;
  text-decoration:none;color:inherit;padding:var(--s3);margin:calc(var(--s3) * -1);
  border-radius:calc(var(--r) + 6px);transition:background .18s ease}
.pcard:hover{background:var(--surface)}
.pshot{display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--paper-deep);
  box-shadow:0 1px 3px rgba(0,0,0,.07),0 16px 32px -20px rgba(0,0,0,.36)}
.pshot picture{display:block;width:100%;height:100%}
.pshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pcard:hover .pshot img{transform:scale(1.04)}
.pbody{display:block;min-width:0}
.pbody time{display:block;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.55em}
.pbody strong{display:block;font-family:"Petrona",Georgia,"Times New Roman",serif;font-weight:700;font-size:clamp(1.2rem,2.1vw,1.6rem);
  line-height:1.18;letter-spacing:-0.025em;color:var(--ink);margin-bottom:.4em}
.pcard:hover .pbody strong{color:var(--brand)}
.pdesc{display:block;color:var(--ink-soft);font-size:.98rem;line-height:1.5;max-width:56ch}
@media(max-width:760px){.pcard{grid-template-columns:1fr;gap:var(--s3)}}

/* ---------- closing CTA ---------- */
.closer{padding:0 0 clamp(52px,7vw,var(--s7))}
.closerbox{background:var(--brand-deep);color:#fff;border-radius:calc(var(--r) + 10px);
  padding:clamp(34px,5vw,68px) clamp(24px,4vw,64px);text-align:center;position:relative;overflow:hidden}
.closerbox::before{content:"";position:absolute;inset:auto -10% -60% 60%;height:120%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 26%,transparent),transparent);pointer-events:none}
.closerbox h2{color:#fff;max-width:20ch;margin:0 auto .45em;position:relative}
.closerbox p{color:color-mix(in srgb,#fff 82%,transparent);max-width:54ch;margin:0 auto;position:relative}
.closerbox .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}
.btn--onDark{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#fff 45%,transparent)}
.btn--onDark:hover{background:#fff;color:var(--brand-deep);box-shadow:none}

/* ---------- crumb + footer ---------- */
.crumb{font-size:.86rem;color:var(--ink-faint);padding:var(--s3) 0 0}
.crumb a{color:var(--ink-faint);text-decoration:none}
.crumb a:hover{color:var(--brand);text-decoration:underline}
.crumb span[aria-hidden]{padding:0 .45em}

footer.site{background:var(--brand-deep);color:var(--paper);padding:var(--s6) 0 var(--s4);margin-top:0}
footer.site a{color:color-mix(in srgb,var(--paper) 84%,transparent);text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s5)}
footer.site h3{color:#fff;font-size:.83rem;letter-spacing:.09em;text-transform:uppercase;margin:0 0 var(--s3);
  color:color-mix(in srgb,var(--paper) 62%,transparent)}
footer.site ul{list-style:none;padding:0;margin:0;font-size:.95rem;display:grid;gap:9px}
footer.site .tag{color:color-mix(in srgb,var(--paper) 76%,transparent);max-width:42ch;margin:0}
.flogo{font-family:"Petrona",Georgia,"Times New Roman",serif;font-weight:700;font-size:1.2rem;color:#fff;margin:0 0 var(--s2);letter-spacing:-.02em}
.legal{border-top:1px solid color-mix(in srgb,#fff 17%,transparent);margin-top:var(--s5);padding-top:var(--s3);
  font-size:.81rem;color:color-mix(in srgb,var(--paper) 60%,transparent);
  display:flex;gap:var(--s4);flex-wrap:wrap;justify-content:space-between}
@media(max-width:820px){.fcols{grid-template-columns:1fr;gap:var(--s4)}}