/* ==========================================================================
   DRN Health & Wellness — Design System
   Brand: sage green #5a7760 (sampled from logo mark)
   ========================================================================== */

:root{
  /* Brand */
  --green:        #5a7760;
  --green-600:    #4c6753;
  --green-700:    #3d5443;
  --green-800:    #2b3d31;
  --green-900:    #1d2b22;
  --green-tint:   #eef2ec;
  --green-tint-2: #e2e9e1;

  /* Neutrals */
  --ink:          #16211a;
  --body:         #55605a;
  --muted:        #7d8880;
  --line:         #e4e2db;
  --cream:        #faf8f4;
  --sand:         #f2eee6;
  --white:        #ffffff;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --wrap:      1200px;
  --wrap-slim: 820px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(22,33,26,.05), 0 2px 8px rgba(22,33,26,.04);
  --shadow:    0 4px 12px rgba(22,33,26,.06), 0 18px 40px -12px rgba(22,33,26,.12);
  --shadow-lg: 0 8px 24px rgba(22,33,26,.08), 0 40px 80px -20px rgba(22,33,26,.20);

  --ease: cubic-bezier(.22,.61,.36,1);

  --header-h: 96px;
  --topbar-h: 40px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,picture,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:4px}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.5rem)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--body);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden}

/* ---------- Typography ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.015em;
  font-variation-settings:"SOFT" 0,"WONK" 0;
  text-wrap:balance;
}
h1,.h1{font-size:clamp(2.5rem,1.4rem + 4.4vw,4.5rem)}
h2,.h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem)}
h3,.h3{font-size:clamp(1.375rem,1.15rem + .9vw,1.875rem);line-height:1.2}
h4,.h4{font-size:1.125rem;line-height:1.35;letter-spacing:-.005em}
p{text-wrap:pretty}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);
  font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-600);margin-bottom:1.25rem;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--green);opacity:.55}
.eyebrow--center{justify-content:center}
.eyebrow--light{color:#b9cbbc}
.eyebrow--light::before{background:#b9cbbc}

.lead{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.65;color:var(--body)}
.serif-accent{font-style:italic;font-variation-settings:"SOFT" 40,"WONK" 1;color:var(--green-600)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--slim{max-width:var(--wrap-slim)}
.section{padding-block:clamp(4rem,2rem + 7vw,7.5rem)}
.section--tight{padding-block:clamp(3rem,2rem + 4vw,5rem)}
.section--sand{background:var(--sand)}
.section--tint{background:var(--green-tint)}
.section--dark{background:var(--green-900);color:#cdd6cf}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--white)}

.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,2rem + 2vw,4rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{margin-top:1.125rem}

.grid{display:grid;gap:clamp(1.25rem,1rem + 1.4vw,2rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}

.grid--center{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.25rem,1rem + 1.4vw,2rem);
}
.grid--center>*{
  flex:0 1 calc((100% - 2 * clamp(1.25rem,1rem + 1.4vw,2rem)) / 3);
  min-width:min(100%,17.5rem);
}

.split{display:grid;gap:clamp(2rem,1.5rem + 3vw,4.5rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.split--top{align-items:start}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--green);--btn-fg:#fff;--btn-bd:var(--green);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9375rem 1.75rem;
  font-family:var(--font-body);font-size:.9375rem;font-weight:600;letter-spacing:.005em;
  line-height:1.2;
  color:var(--btn-fg);background:var(--btn-bg);
  border:1.5px solid var(--btn-bd);border-radius:var(--radius-pill);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .25s,color .25s,border-color .25s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(90,119,96,.55)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn--dark{--btn-bg:var(--green-900);--btn-bd:var(--green-900)}
.btn--dark:hover{box-shadow:0 10px 26px -8px rgba(29,43,34,.5)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:rgba(22,33,26,.22)}
.btn--outline:hover{--btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink);box-shadow:0 10px 26px -8px rgba(22,33,26,.4)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--green-900);--btn-bd:#fff}
.btn--ghost-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4)}
.btn--ghost-light:hover{--btn-bg:#fff;--btn-fg:var(--green-900);--btn-bd:#fff}
.btn--sm{padding:.6875rem 1.25rem;font-size:.875rem}
.btn--lg{padding:1.0625rem 2.125rem;font-size:1rem}

.btn-row{display:flex;flex-wrap:wrap;gap:.875rem;align-items:center}
.btn-row--center{justify-content:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9375rem;font-weight:600;color:var(--green-600);
}
.link-arrow svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{
  background:var(--green-900);color:#b6c4b9;
  font-size:.8125rem;line-height:var(--topbar-h);height:var(--topbar-h);
  overflow:hidden;
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.topbar a{display:inline-flex;align-items:center;gap:.5rem;transition:color .2s;white-space:nowrap;min-width:0}
.topbar a:hover{color:#fff}
.topbar svg{width:.9375rem;height:.9375rem;flex:none;opacity:.7}
.topbar__socials{display:flex;gap:1rem;align-items:center}
@media (max-width:1080px){
  /* NB: must out-specify `.topbar a` (0,1,1) — media queries add no specificity */
  .topbar a.topbar__addr{display:none}
}
@media (max-width:520px){
  .topbar__socials{display:none}
  .topbar__inner{justify-content:center}
}

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,248,244,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),background-color .3s;
}
.site-header.is-stuck{box-shadow:0 6px 24px -12px rgba(22,33,26,.18)}
.site-header__inner{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:68px;width:auto}

.nav{display:flex;align-items:center;gap:.25rem}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:.35rem;
  padding:.625rem .875rem;border-radius:10px;
  font-size:.9375rem;font-weight:500;color:var(--ink);
  transition:color .2s,background-color .2s;
}
.nav__link:hover,.nav__item:focus-within>.nav__link{color:var(--green-600);background:var(--green-tint)}
.nav__link[aria-current="page"]{color:var(--green-600);font-weight:600}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:.875rem;right:.875rem;bottom:.25rem;
  height:2px;border-radius:2px;background:var(--green);
}
.nav__caret{width:.75rem;height:.75rem;opacity:.6;transition:transform .3s var(--ease)}
.nav__item{position:relative}
.nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg)}

.nav__panel{
  position:absolute;top:calc(100% + .5rem);left:50%;translate:-50% 0;
  min-width:34rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.125rem;
  padding:.75rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav__panel a{
  display:block;padding:.6875rem .875rem;border-radius:11px;
  font-size:.875rem;font-weight:500;color:var(--ink);line-height:1.35;
  transition:background-color .2s,color .2s;
}
.nav__panel a:hover{background:var(--green-tint);color:var(--green-700)}
.nav__panel a[aria-current="page"]{background:var(--green-tint);color:var(--green-700);font-weight:600}

.header__cta{display:flex;align-items:center;gap:.75rem;flex:none}

.nav-toggle{
  display:none;width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;border-radius:12px;
  border:1.5px solid var(--line);
}
.nav-toggle:hover{background:var(--green-tint);border-color:var(--green-tint-2)}
.nav-toggle span{
  display:block;position:relative;width:19px;height:1.75px;border-radius:2px;
  background:var(--ink);transition:transform .3s var(--ease),opacity .2s;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:19px;height:1.75px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;
  background:var(--cream);
  padding:calc(var(--header-h) + var(--topbar-h) + 1.5rem) var(--gutter) 2.5rem;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-1.25rem);
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s;
}
body.nav-open .drawer{opacity:1;visibility:visible;transform:translateY(0)}
.drawer__list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.drawer__list>li{border-bottom:1px solid var(--line)}
.drawer__list a,.drawer__acc-btn{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:1.0625rem .25rem;
  font-family:var(--font-display);font-size:1.375rem;font-weight:500;color:var(--ink);
  text-align:left;
}
.drawer__list a[aria-current="page"]{color:var(--green-600)}
.drawer__acc-btn svg{width:1.125rem;height:1.125rem;opacity:.5;transition:transform .3s var(--ease);flex:none}
.drawer__acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.drawer__acc-btn[aria-expanded="true"]+.drawer__sub{grid-template-rows:1fr}
.drawer__sub>div{overflow:hidden}
.drawer__sub a{
  font-family:var(--font-body);font-size:1rem;font-weight:500;
  padding:.75rem .25rem .75rem 1.125rem;color:var(--body);
  border-left:2px solid var(--line);margin-left:.125rem;
}
.drawer__sub a:hover,.drawer__sub a[aria-current="page"]{color:var(--green-600);border-left-color:var(--green)}
.drawer__foot{margin-top:2rem;display:grid;gap:.75rem}
.drawer__foot .btn{width:100%}
.drawer__meta{margin-top:2rem;font-size:.875rem;display:grid;gap:.5rem}
.drawer__meta a{font:inherit;padding:0;display:inline-flex;gap:.5rem;color:var(--body)}
.drawer__meta svg{width:1rem;height:1rem;opacity:.55;flex:none;margin-top:.3rem}

@media (max-width:1080px){
  .nav,.header__cta .btn--outline{display:none}
  .nav-toggle{display:inline-flex}
}
@media (max-width:600px){
  .header__cta .btn{display:none}
  /* Shorter bar than desktop — a 96px header costs too much on a phone. */
  :root{--header-h:82px}
  .brand img{height:56px}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;isolation:isolate;background:var(--green-900);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(20,31,24,.72) 0%,rgba(20,31,24,.5) 40%,rgba(20,31,24,.82) 100%),
    linear-gradient(100deg,rgba(29,43,34,.86) 0%,rgba(29,43,34,.35) 58%,transparent 100%);
}
.hero__inner{
  position:relative;
  padding-block:clamp(4.5rem,3rem + 9vw,9rem);
  display:grid;gap:clamp(2rem,1.5rem + 2vw,3rem);
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  align-items:center;
}
@media (max-width:940px){.hero__inner{grid-template-columns:1fr;align-items:start}}

.hero__body{max-width:38rem}
.hero h1{color:#fff;margin-bottom:1.5rem}
.hero h1 em{font-style:normal;display:block;color:#c8d8ca;font-variation-settings:"SOFT" 40,"WONK" 1}
.hero__text{color:#d6ded8;font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);max-width:34rem;margin-bottom:2.25rem}

.chips{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:2.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5625rem 1.0625rem;border-radius:var(--radius-pill);
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:#e6ede7;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.chip svg{width:.9375rem;height:.9375rem;opacity:.85;flex:none}

/* Provider card */
.provider-card{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);padding:1.75rem;
  box-shadow:var(--shadow-lg);
  max-width:23rem;margin-left:auto;
}
@media (max-width:940px){.provider-card{margin-left:0}}
.provider-card__top{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.provider-card__photo{
  width:72px;height:72px;flex:none;border-radius:50%;object-fit:cover;object-position:center top;
  border:2.5px solid var(--white);box-shadow:0 4px 14px rgba(22,33,26,.16);
}
.provider-card__name{font-family:var(--font-display);font-size:1.1875rem;font-weight:600;color:var(--ink);line-height:1.2}
.provider-card__role{font-size:.8125rem;color:var(--muted);margin-top:.25rem;line-height:1.4}
.provider-card__badge{
  display:inline-flex;align-items:center;gap:.4375rem;margin-top:.5rem;
  padding:.25rem .625rem;border-radius:var(--radius-pill);
  font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--green-tint);color:var(--green-700);
}
.provider-card__badge svg{width:.8125rem;height:.8125rem}
.provider-card__list{display:grid;gap:.0625rem;border-top:1px solid var(--line);padding-top:.375rem}
.provider-card__list li{
  display:flex;align-items:center;gap:.75rem;
  padding:.6875rem .25rem;font-size:.9375rem;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.provider-card__list li:last-child{border-bottom:0}
.provider-card__list svg{width:1.125rem;height:1.125rem;color:var(--green);flex:none}
.provider-card .btn{width:100%;margin-top:1.25rem}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{position:relative;isolation:isolate;background:var(--green-900);overflow:hidden}
.page-hero__bg{position:absolute;inset:0;z-index:-2}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.page-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,31,24,.8) 0%,rgba(20,31,24,.62) 55%,rgba(20,31,24,.88) 100%);
}
/* Image-free hero: layered brand-green mesh gradient + soft grain.
   The photo scrim on .page-hero__bg::after is replaced with a gentle vignette,
   since there is no photograph to darken. */
.page-hero--gradient .page-hero__bg{
  background:
    radial-gradient(58rem 34rem at 8% 4%,   rgba(138,176,146,.42), transparent 62%),
    radial-gradient(46rem 30rem at 92% 6%,  rgba(90,119,96,.55),   transparent 60%),
    radial-gradient(52rem 34rem at 74% 104%,rgba(61,84,67,.72),    transparent 66%),
    radial-gradient(38rem 26rem at 28% 96%, rgba(45,66,51,.6),     transparent 64%),
    linear-gradient(158deg,#26382c 0%,#1e2d24 42%,#16211a 100%);
}
.page-hero--gradient .page-hero__bg::after{
  background:
    radial-gradient(90% 120% at 50% 0%,transparent 40%,rgba(16,25,19,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:cover,160px 160px;
  mix-blend-mode:soft-light;
  opacity:.9;
}
/* Photo hero with a brand-green wash — keeps the page on-brand and the
   headline legible over a busy image. */
.page-hero--tinted .page-hero__bg::after{
  background:
    linear-gradient(105deg,rgba(22,33,26,.94) 0%,rgba(29,43,34,.78) 42%,rgba(29,43,34,.42) 100%),
    radial-gradient(48rem 30rem at 12% 8%,rgba(122,158,130,.34),transparent 62%),
    linear-gradient(180deg,rgba(20,31,24,.5) 0%,transparent 35%,rgba(20,31,24,.72) 100%);
}
.page-hero--tinted .page-hero__bg img{object-position:center 32%}

/* a soft hairline so the section reads as deliberate, not a missing image */
.page-hero--gradient{border-bottom:1px solid rgba(255,255,255,.07)}

/* The element carries .wrap too. Putting max-width here beat .wrap's 1200px and
   let its margin-inline:auto centre a 736px box in the viewport — pushing every
   interior hero ~230px right of the header logo. Constrain the children instead
   so the container keeps .wrap's width and content edge. */
.page-hero__inner{position:relative;padding-block:clamp(3.5rem,2.5rem + 6vw,6.5rem)}
.page-hero__inner > *{max-width:46rem}
.page-hero h1{color:#fff;margin-left:-.038em}
.page-hero p{color:#d3dcd5;margin-top:1.25rem;font-size:clamp(1rem,.95rem + .3vw,1.125rem);max-width:36rem}

.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8125rem;color:#a8b8ac;margin-bottom:1.5rem}
.breadcrumb a{transition:color .2s}
.breadcrumb a:hover{color:#fff}
.breadcrumb svg{width:.8125rem;height:.8125rem;opacity:.5}
.breadcrumb [aria-current]{color:#e4ece5}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.055)}
.card__body{padding:1.625rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
.card__body h3{font-size:1.25rem}
.card__body p{font-size:.9375rem;line-height:1.65;flex:1}
.card__body .link-arrow{margin-top:.375rem}
.card__tag{
  position:absolute;top:1rem;left:1rem;z-index:1;
  padding:.375rem .75rem;border-radius:var(--radius-pill);
  font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.94);color:var(--green-700);
  backdrop-filter:blur(6px);
}
.card--stretch a.card__link{position:absolute;inset:0;z-index:2}

/* Icon feature card */
.feature{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.75rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.feature__icon{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:var(--green-tint);color:var(--green-700);margin-bottom:1.25rem;
}
.feature__icon svg{width:1.4375rem;height:1.4375rem}
.feature h3{font-size:1.1875rem;margin-bottom:.625rem}
.feature p{font-size:.9375rem;line-height:1.65}
.section--dark .feature{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11)}
.section--dark .feature:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2)}
.section--dark .feature__icon{background:rgba(255,255,255,.1);color:#c5d5c8}
.section--dark .feature p{color:#b3bfb6}

/* Numbered step */
.step{position:relative;padding-left:4.25rem}
.step__num{
  position:absolute;left:0;top:0;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.125rem;font-weight:600;
  background:var(--green);color:#fff;
}
.step h3{font-size:1.1875rem;margin-bottom:.5rem}
.step p{font-size:.9375rem}
.steps{display:grid;gap:2.25rem}
.steps--line .step:not(:last-child)::before{
  content:"";position:absolute;left:24.5px;top:58px;bottom:-2.25rem;width:1.5px;
  background:linear-gradient(var(--green-tint-2),transparent);
}

/* ---------- Stats ---------- */
.stats{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.stat{padding:1.75rem 0;border-top:2px solid rgba(255,255,255,.16)}
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2.75rem,2rem + 3vw,4rem);font-weight:500;line-height:1;
  color:#fff;letter-spacing:-.03em;display:flex;align-items:baseline;
  font-variant-numeric:tabular-nums;
}
.stat__suffix{color:var(--green);font-size:.72em;margin-left:.0625em}
.stat p{margin-top:1rem;font-size:.9375rem;line-height:1.6;color:#aebbb1;max-width:22rem}
.section--sand .stat,.section--tint .stat{border-top-color:var(--green-tint-2)}
.section--sand .stat__num,.section--tint .stat__num{color:var(--ink)}
.section--sand .stat p,.section--tint .stat p{color:var(--body)}

/* ---------- Media / image treatments ---------- */
.media{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--sand)}
.media img{width:100%;height:100%;object-fit:cover}
.media--portrait{aspect-ratio:4/5}
.media--square{aspect-ratio:1/1}
.media--wide{aspect-ratio:3/2}

.media-stack{position:relative;padding-bottom:3.5rem;padding-right:2.5rem}
.media-stack__main{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-lg)}
.media-stack__main img{width:100%;height:100%;object-fit:cover}
.media-stack__badge{
  position:absolute;right:0;bottom:0;
  background:var(--white);border-radius:var(--radius);padding:1.375rem 1.625rem;
  box-shadow:var(--shadow-lg);max-width:15rem;
}
.media-stack__badge strong{
  display:block;font-family:var(--font-display);font-size:2rem;font-weight:500;
  color:var(--green-700);line-height:1;letter-spacing:-.02em;
}
.media-stack__badge span{display:block;font-size:.8125rem;line-height:1.45;color:var(--body);margin-top:.4375rem}
@media (max-width:520px){
  .media-stack{padding-right:0;padding-bottom:0}
  .media-stack__badge{position:static;margin-top:-2rem;margin-left:1rem;margin-right:1rem;max-width:none}
}

/* ---------- Prose (service page body copy) ---------- */
.prose{max-width:42rem}
.prose>*+*{margin-top:1.25rem}
.prose p{font-size:1.0625rem;line-height:1.72}
.prose h2{margin-top:2.75rem}
.prose h3{margin-top:2.25rem;font-size:1.375rem}
.prose strong{color:var(--ink);font-weight:600}

.ticks{display:grid;gap:.8125rem;margin-top:1.5rem}
.ticks li{
  position:relative;padding-left:2.125rem;
  font-size:1.0625rem;line-height:1.6;color:var(--ink);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.3125rem;
  width:1.375rem;height:1.375rem;border-radius:50%;
  background:var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d5443' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.8125rem no-repeat;
}
.ticks li b{font-weight:600;color:var(--ink)}
.ticks--light li{color:#dbe3dd}
/* The base rule bakes a dark-green tick into the background image, which is
   near-invisible on a dark panel — restate the whole shorthand with a light one. */
.ticks--light li::before{
  background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbe8dd' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.8125rem no-repeat;
}
.ticks--light li b{color:#fff}

/* Price flag */
.price-flag{
  display:inline-grid;gap:.1875rem;
  background:var(--green-900);color:#fff;
  border-radius:var(--radius);padding:1.375rem 1.75rem;
}
.price-flag span{font-size:.8125rem;letter-spacing:.05em;text-transform:uppercase;color:#a9bcae;font-weight:600}
.price-flag strong{font-family:var(--font-display);font-size:2.5rem;font-weight:500;line-height:1;letter-spacing:-.02em}
.price-flag strong small{font-size:.45em;font-weight:600;font-family:var(--font-body);color:#b9cbbc}

/* Note / callout */
.callout{
  border-left:3px solid var(--green);background:var(--green-tint);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.375rem 1.625rem;
}
.callout p{font-size:.9375rem;line-height:1.65;color:var(--green-800)}
.callout p+p{margin-top:.625rem}
.callout strong{color:var(--green-900)}

/* ---------- Testimonials ---------- */
.quote{
  display:flex;flex-direction:column;gap:1.25rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.875rem;height:100%;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.quote__stars{display:flex;gap:.1875rem;color:#d9a441}
.quote__stars svg{width:1.0625rem;height:1.0625rem}
.quote blockquote{
  font-family:var(--font-display);font-size:1.0625rem;line-height:1.55;
  color:var(--ink);font-weight:400;flex:1;letter-spacing:-.005em;
}
.quote figcaption{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--line);padding-top:1.125rem}
.quote__avatar{
  width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--green-tint);color:var(--green-700);
  font-family:var(--font-display);font-size:1rem;font-weight:600;
}
.quote__name{font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.3}
.quote__meta{font-size:.75rem;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;font-weight:600;margin-top:.125rem}

/* Before / after */
.results{display:grid;gap:clamp(1.25rem,1rem + 1.5vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.result{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.result:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.result__img{aspect-ratio:1/1;overflow:hidden;background:var(--sand)}
.result__img img{width:100%;height:100%;object-fit:cover}
.result__cap{padding:1.125rem 1.375rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.result__cap span{font-size:.8125rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.result__cap svg{width:1.125rem;height:1.125rem;color:var(--green);flex:none}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  width:100%;padding:1.5rem .25rem;text-align:left;
  font-family:var(--font-display);font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  font-weight:500;color:var(--ink);line-height:1.4;letter-spacing:-.005em;
  transition:color .2s;
}
.faq__q:hover{color:var(--green-600)}
.faq__icon{
  position:relative;flex:none;width:26px;height:26px;margin-top:.125rem;
  border-radius:50%;background:var(--green-tint);transition:background-color .25s,transform .35s var(--ease);
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  background:var(--green-700);border-radius:2px;transition:transform .3s var(--ease),opacity .25s;
}
.faq__icon::before{width:11px;height:1.75px}
.faq__icon::after{width:1.75px;height:11px}
.faq__q[aria-expanded="true"] .faq__icon{background:var(--green);}
.faq__q[aria-expanded="true"] .faq__icon::before,
.faq__q[aria-expanded="true"] .faq__icon::after{background:#fff}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:rotate(90deg);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.faq__q[aria-expanded="true"]+.faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 3rem 1.75rem .25rem;font-size:1rem;line-height:1.7}
.faq__a p+p{padding-top:.875rem;margin-top:-.5rem}

/* ---------- CTA band ---------- */
.cta-band{position:relative;isolation:isolate;background:var(--green-800);overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.13;
  background:radial-gradient(60rem 30rem at 15% 110%,#9fbfa5,transparent 65%),
             radial-gradient(45rem 25rem at 90% -10%,#9fbfa5,transparent 60%);
}
.cta-band__inner{
  padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem);
  display:grid;gap:clamp(2rem,1.5rem + 2vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  align-items:center;
}
.cta-band h2{color:#fff}
.cta-band p{color:#c2cec5;margin-top:1.125rem;font-size:1.0625rem;max-width:32rem}
.cta-band__actions{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
@media (min-width:1024px){.cta-band__actions{align-items:flex-end;text-align:right}}
.cta-band__phone{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--font-display);font-size:clamp(1.5rem,1.25rem + 1vw,2rem);
  font-weight:500;color:#fff;letter-spacing:-.02em;transition:color .2s;
}
.cta-band__phone:hover{color:#c8d8ca}
.cta-band__phone svg{width:1.375rem;height:1.375rem;color:var(--green);flex:none}

/* ---------- Contact strip (service pages) ---------- */
.contact-strip{
  display:grid;gap:clamp(1.75rem,1.5rem + 2vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  align-items:center;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(1.75rem,1.5rem + 1.5vw,3rem);
  box-shadow:var(--shadow-sm);
}
.contact-strip h2{font-size:clamp(1.625rem,1.4rem + 1.2vw,2.25rem)}
.contact-strip p{margin-top:.875rem;font-size:1rem}
.contact-list{display:grid;gap:1rem}
.contact-list a,.contact-list div{
  display:flex;align-items:flex-start;gap:.875rem;
  font-size:.9375rem;line-height:1.55;color:var(--ink);font-weight:500;
  transition:color .2s;
}
.contact-list a:hover{color:var(--green-600)}
.contact-list svg{width:1.25rem;height:1.25rem;color:var(--green);flex:none;margin-top:.1875rem}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.125rem}
.form__row{display:grid;gap:1.125rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.field{display:grid;gap:.4375rem}
.field label{font-size:.8125rem;font-weight:600;color:var(--ink);letter-spacing:.01em}
.field label .req{color:#b4553f}
.field input,.field select,.field textarea{
  width:100%;padding:.8125rem 1rem;
  font-size:.9375rem;line-height:1.5;color:var(--ink);
  background:var(--white);border:1.5px solid var(--line);border-radius:12px;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:8rem;resize:vertical}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8880' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:1.0625rem;padding-right:2.75rem}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3.5px rgba(90,119,96,.14);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.form__note{font-size:.8125rem;color:var(--muted);line-height:1.55}
.form .btn{justify-self:start}
@media (max-width:520px){.form .btn{width:100%}}

.form-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.625rem,1.25rem + 1.5vw,2.75rem);box-shadow:var(--shadow);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--green-900);color:#a7b5ab;padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem) 0}
.footer__top{
  display:grid;gap:clamp(2.25rem,1.75rem + 2.5vw,4rem);
  grid-template-columns:minmax(min(100%,20rem),1.4fr) repeat(auto-fit,minmax(min(100%,9rem),1fr));
  padding-bottom:clamp(2.5rem,2rem + 2vw,3.5rem);
}
.footer__brand img{height:44px;width:auto;margin-bottom:1.375rem;filter:brightness(0) invert(1);opacity:.95}
.footer__brand p{font-size:.9375rem;line-height:1.7;max-width:26rem;color:#a7b5ab}
.footer__socials{display:flex;gap:.625rem;margin-top:1.75rem}
.footer__socials a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);color:#c3cfc6;
  transition:background-color .25s,color .25s,border-color .25s,transform .25s var(--ease);
}
.footer__socials a:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-2px)}
.footer__socials svg{width:1.0625rem;height:1.0625rem}

.footer__col h4{
  font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;margin-bottom:1.25rem;
}
.footer__col ul{display:grid;gap:.75rem}
.footer__col a{font-size:.9375rem;transition:color .2s;display:inline-flex;align-items:flex-start;gap:.5rem}
.footer__col a:hover{color:#fff}
.footer__col address{font-size:.9375rem;line-height:1.7;font-style:normal}
.footer__col svg{width:1rem;height:1rem;flex:none;margin-top:.28rem;opacity:.6}

.footer__bottom{
  border-top:1px solid rgba(255,255,255,.11);
  padding-block:1.75rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  font-size:.8125rem;color:#8a9a90;
}
.footer__bottom nav{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer__bottom a:hover{color:#fff}
.footer__disclaimer{
  border-top:1px solid rgba(255,255,255,.11);
  padding-block:1.5rem 2rem;font-size:.75rem;line-height:1.65;color:#79887e;max-width:60rem;
}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-0{margin-top:0}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.mt-4{margin-top:2rem}
.mt-5{margin-top:2.5rem}
.mt-6{margin-top:3rem}
.maxw-sm{max-width:34rem}
.maxw-md{max-width:42rem}
.order-first{order:-1}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:.75rem;top:.75rem;z-index:200;
  padding:.75rem 1.25rem;border-radius:10px;
  background:var(--green-900);color:#fff;font-size:.875rem;font-weight:600;
  transform:translateY(-200%);transition:transform .2s;
}
.skip-link:focus{transform:translateY(0)}

/* ---------- Scroll reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none}
}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-900);color:#fff;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,visibility .3s,transform .3s var(--ease),background-color .25s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--green)}
.to-top svg{width:1.125rem;height:1.125rem}

/* ---------- Print ---------- */
@media print{
  .site-header,.topbar,.drawer,.to-top,.cta-band,.hero__bg{display:none!important}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   CHAT / CONTACT WIDGET
   ========================================================================== */
.chat{display:none}
.js .chat{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:95;
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;
}

/* --- launcher --- */
.chat__btn{
  position:relative;flex:none;
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green);color:#fff;
  box-shadow:0 6px 20px -4px rgba(90,119,96,.55),0 2px 6px rgba(22,33,26,.18);
  transition:transform .3s var(--ease),background-color .25s,box-shadow .3s var(--ease);
}
.chat__btn:hover{transform:scale(1.06);background:var(--green-600)}
.chat__btn:active{transform:scale(.97)}
/* Both icon spans share one grid cell so they stack centred and cross-fade.
   NB: the grid items are the <span>s, not the <svg>s. */
.chat__ico-chat,.chat__ico-close{
  grid-area:1/1;display:grid;place-items:center;
  transition:opacity .25s var(--ease),transform .3s var(--ease);
}
.chat__btn svg{width:1.625rem;height:1.625rem;display:block}
.chat__ico-close{opacity:0;transform:rotate(-90deg) scale(.6)}
.chat.is-open .chat__ico-chat{opacity:0;transform:rotate(90deg) scale(.6)}
.chat.is-open .chat__ico-close{opacity:1;transform:none}
.chat.is-open .chat__btn{background:var(--green-900)}

/* pulsing rings */
.chat__ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--green);
  animation:chat-pulse 2.4s var(--ease) infinite;
  pointer-events:none;
}
.chat__ring:nth-of-type(2){animation-delay:1.2s}
@keyframes chat-pulse{
  0%  {transform:scale(1);opacity:.65}
  70% {transform:scale(1.75);opacity:0}
  100%{transform:scale(1.75);opacity:0}
}
.chat.is-open .chat__ring{animation-play-state:paused;opacity:0}

/* --- typewriter bubble ---
   Sits to the LEFT of the launcher. The row is right-anchored, so the bubble
   grows leftwards as the text types. No overflow:hidden here — it would clip
   the ::after tail, which sits outside the box. */
.chat__row{display:flex;align-items:center;justify-content:flex-end;gap:.625rem}
.chat__bubble{
  position:relative;flex:0 1 auto;min-width:0;
  max-width:min(16rem,calc(100vw - 7.5rem));
  padding:.625rem .9375rem;
  background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);
  font-size:.875rem;font-weight:600;line-height:1.4;
  white-space:nowrap;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
/* tail pointing right, toward the launcher */
.chat__bubble::after{
  content:"";position:absolute;right:-5px;top:50%;
  width:10px;height:10px;background:var(--white);
  border-right:1px solid var(--line);border-top:1px solid var(--line);
  transform:translateY(-50%) rotate(45deg);
  border-radius:0 3px 0 0;
}
.chat.is-open .chat__bubble,
.chat__bubble[hidden]{opacity:0;transform:translateX(10px) scale(.96);pointer-events:none}
.chat__caret{
  display:inline-block;width:1.5px;height:1em;
  background:var(--green);vertical-align:-.14em;margin-left:1px;
  animation:chat-caret 1s steps(1) infinite;
}
@keyframes chat-caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* --- panel --- */
.chat__panel{
  width:min(19.5rem,calc(100vw - 2.5rem));
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform-origin:bottom right;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px) scale(.94);
}
/* neutralise the UA `[hidden] { display:none }` — JS strips the attribute on boot,
   so this only matters for the split second before it runs */
.chat__panel[hidden]{display:block}
.chat.is-open .chat__panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
.chat__panel-head{
  background:var(--green-900);color:#fff;
  padding:1.125rem 1.25rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
}
.chat__panel-head strong{
  display:block;font-family:var(--font-display);font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;
}
.chat__panel-head p{font-size:.8125rem;color:#a9bcae;margin-top:.25rem;line-height:1.45}
.chat__close{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  color:#c3cfc6;background:rgba(255,255,255,.1);transition:background-color .2s,color .2s;
}
.chat__close:hover{background:rgba(255,255,255,.2);color:#fff}
.chat__close svg{width:.875rem;height:.875rem}

.chat__opts{padding:.625rem}
.chat__opt{
  display:flex;align-items:center;gap:.875rem;
  padding:.8125rem .75rem;border-radius:14px;
  transition:background-color .2s;
}
.chat__opt:hover{background:var(--green-tint)}
.chat__opt-ico{
  flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--green-tint);color:var(--green-700);
}
.chat__opt:hover .chat__opt-ico{background:var(--green);color:#fff}
.chat__opt-ico svg{width:1.125rem;height:1.125rem}
/* Scoped to the text column — a bare `.chat__opt span` would also match the
   icon and arrow wrappers and override their display:grid centring. */
.chat__opt-text{min-width:0}
.chat__opt-text strong{display:block;font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.3}
.chat__opt-text span{display:block;font-size:.8125rem;color:var(--muted);line-height:1.4;margin-top:.125rem}
.chat__opt-arrow{margin-left:auto;flex:none;width:1rem;height:1rem;color:var(--muted);transition:transform .25s var(--ease),color .2s}
.chat__opt:hover .chat__opt-arrow{transform:translateX(3px);color:var(--green-600)}

.chat__panel-foot{
  border-top:1px solid var(--line);padding:.875rem 1.25rem;
  font-size:.75rem;color:var(--muted);line-height:1.5;
}

/* keep the back-to-top button clear of the widget */
.to-top{bottom:6.25rem}

@media (max-width:600px){
  .chat{right:1rem;bottom:1rem}
  .to-top{right:1rem;bottom:6rem;width:42px;height:42px}
  .chat__bubble{max-width:calc(100vw - 6.5rem);font-size:.8125rem}
}

@media (prefers-reduced-motion:reduce){
  .chat__ring{animation:none;opacity:0}
  .chat__caret{animation:none}
}

/* ==========================================================================
   HERO LEAD FORM
   ========================================================================== */

/* Optical alignment: at display sizes Fraunces carries ~4px of left side
   bearing, so the H1 glyphs hang right of the logo and body copy even though
   every box shares the same 160px content edge. em-based so it scales. */
.hero h1{margin-left:-.038em}

.hero-form{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  max-width:34rem;margin-left:auto;width:100%;
  overflow:hidden;
}
@media (max-width:940px){.hero-form{margin-left:0}}

.hero-form__head{padding:1.5rem 1.75rem 1.25rem}
.hero-form__head h2{font-size:1.3125rem;line-height:1.25}
.hero-form__head p{
  font-size:.8125rem;line-height:1.5;color:var(--muted);margin-top:.4375rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .625rem;
}
.hero-form__head p span{display:inline-flex;align-items:center;gap:.3125rem}
.hero-form__head svg{width:.9375rem;height:.9375rem;color:var(--green);flex:none}

.hero-form__body{padding:0 1.75rem 1.5rem}
.hero-form .form{gap:.8125rem}
.hero-form .form__row{gap:.8125rem}
.hero-form .field label{font-size:.75rem}
.hero-form .field input,
.hero-form .field select{padding:.6875rem .875rem;font-size:.875rem;border-radius:11px}
.hero-form .field select{background-position:right .875rem center}
.hero-form .btn{width:100%;margin-top:.1875rem}
.hero-form .form__note{font-size:.6875rem;line-height:1.5}

.hero-form__foot{
  display:flex;align-items:center;gap:.75rem;
  padding:.9375rem 1.75rem;
  background:var(--green-tint);border-top:1px solid var(--green-tint-2);
}
.hero-form__photo{
  width:38px;height:38px;flex:none;border-radius:50%;
  object-fit:cover;object-position:center top;
  border:2px solid var(--white);
}
.hero-form__foot strong{display:block;font-size:.8125rem;font-weight:600;color:var(--ink);line-height:1.3}
.hero-form__foot span{display:block;font-size:.6875rem;color:var(--green-700);line-height:1.35;margin-top:.0625rem}

/* Two-column page hero: copy left, lead form right (service-area pages).
   Overrides the single-column child clamp set on .page-hero__inner > *. */
.page-hero--split .page-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2.5rem,2rem + 3vw,4rem);
  align-items:center;
}
.page-hero--split .page-hero__inner > *{max-width:none}
.page-hero--split .page-hero__body{max-width:38rem}
.page-hero--split .page-hero__body > *{max-width:36rem}
.page-hero--split .page-hero__body h1{max-width:none}
@media (max-width:940px){
  .page-hero--split .page-hero__inner{grid-template-columns:1fr;align-items:start}
}

/* ==========================================================================
   SERVICE AREA HUB
   ========================================================================== */
.area-group + .area-group{margin-top:clamp(2.75rem,2rem + 3vw,4.5rem)}
.area-group__head{max-width:44rem;margin-bottom:1.75rem}
.area-group__head h2{font-size:clamp(1.5rem,1.3rem + 1vw,2rem)}
.area-group__head p{margin-top:.625rem;font-size:.9375rem}

.area-list{
  display:grid;gap:.625rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr));
}
.area-list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  padding:.875rem 1.125rem;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.area-list a:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:transparent}
.area-list strong{font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.3}
.area-list span{
  flex:none;font-size:.75rem;font-weight:600;color:var(--green-600);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   THIRD-PARTY FORM EMBED
   ========================================================================== */
/* Reserve height so the card does not collapse before the async script paints,
   and let the embed size itself rather than inheriting our field styles. */
/* SureForm's inline embed hard-codes the iframe to 600px and never resizes it,
   which leaves the consent box and submit button inside a nested scrollbar.
   min-height wins over the inline height, so the whole form fits on the page. */
/* SureForm hard-codes its iframe to 600px and never resizes, so the page has to
   reserve the room. Height differs per form, so it comes from --embed-h, set
   per instance; the fallbacks cover the long homepage form. Keep headroom for
   the Cloudflare Turnstile widget, which paints late and does not render in
   headless browsers — do not trim to a value that only fits without it. */
.embed{min-height:var(--embed-h,50rem)}
.embed iframe{display:block;width:100%;border:0;min-height:var(--embed-h,50rem)}
.embed > *{max-width:100%}
@media (max-width:600px){
  .embed,.embed iframe{min-height:var(--embed-h-m,var(--embed-h,62rem))}
}

/* A hero carrying the embedded form is ~1180px of card on its own, so the
   generous hero padding is no longer doing any work — trim it back. */
.hero--embed .hero__inner{padding-block:clamp(2.5rem,1.5rem + 3vw,3.5rem)}
.hero--embed .hero__body{align-self:center}

/* Bare hero embed — no card chrome. SureForm renders its own white panel, so a
   wrapper would just double the border. */
.hero-embed{max-width:40rem;margin-left:auto;width:100%}
@media (max-width:940px){.hero-embed{margin-left:0}}

/* A split hero carrying an embedded form needs the width on the form side and
   less vertical padding, same trade as the homepage hero. */
.page-hero--embed .page-hero__inner{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(2rem,1.5rem + 2vw,3rem);
  padding-block:clamp(2.5rem,1.5rem + 3vw,3.5rem);
}
.page-hero--embed .hero-form{max-width:40rem}
@media (max-width:940px){
  .page-hero--embed .page-hero__inner{grid-template-columns:1fr}
}

/* ==========================================================================
   SITEMAP PAGE
   ========================================================================== */
.sitemap{
  display:grid;gap:clamp(2rem,1.5rem + 2vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
}
.sitemap__group h2,
.sitemap__areas h2{font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem)}
.sitemap__list{display:grid;gap:.5rem;margin-top:1.125rem}
.sitemap__list a{
  display:inline-flex;align-items:baseline;gap:.5rem;
  font-size:.9375rem;color:var(--body);
  transition:color .2s,transform .2s var(--ease);
}
.sitemap__list a::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.45;transform:translateY(-.25em)}
.sitemap__list a:hover{color:var(--green-600);transform:translateX(2px)}
.sitemap__list a:hover::before{opacity:1}

.sitemap__areas{
  margin-top:clamp(2.75rem,2rem + 3vw,4.5rem);
  padding-top:clamp(2.25rem,1.75rem + 2vw,3.5rem);
  border-top:1px solid var(--line);
}
.sitemap__subs{
  display:grid;gap:clamp(1.75rem,1.25rem + 1.5vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  margin-top:2rem;
}
.sitemap__sub h3{
  font-family:var(--font-body);font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green-600);
}
.sitemap__sub .sitemap__list{margin-top:.875rem}
/* A group with many cities reads better spanning the row than as one tall column. */
.sitemap__sub--wide{grid-column:1/-1}
.sitemap__sub--wide .sitemap__list{
  columns:4 12rem;column-gap:clamp(1.5rem,1rem + 1.5vw,2.5rem);
  display:block;
}
.sitemap__sub--wide .sitemap__list li{break-inside:avoid;margin-bottom:.5rem}

/* Booking section carrying the embedded form: give the form side the width so
   SureForm lays out in two columns instead of one tall one. */
@media (min-width:940px){
  .split--form{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(2rem,1.5rem + 2vw,3rem);
    align-items:start;
  }
}