/* ==========================================================================
   DA design system.
   Translated from the four approved mockups. Values are taken from the
   mockups verbatim; nothing here is an improvement on the design.
   ========================================================================== */

:root{
  /* DomesticAide palette, sampled from the approved mockups. Token NAMES are
     inherited from the shared LLS component CSS; only the values are ours. */
  --forest:#1F3D30;
  --forest-deep:#12251C;
  --forest-panel:#2C5443;
  --leaf:#8BC53F;
  --leaf-deep:#6FA02D;
  /* #6FA02D only reaches 3.1:1 on white, so it is used for icons, borders and
     hovers only. Small green TEXT on a light ground uses --leaf-text, which
     clears 4.5:1 on white, cream and wash. */
  --leaf-text:#476F1B;
  --clay:#E8895A;
  --tan:#C9A876;
  --tan-deep:#A3814C;

  --charcoal:#12251C;      /* topbar ground */
  --sage:#8BC53F;          /* == leaf */
  --sage-dark:#6FA02D;     /* == leaf-deep */
  --moss:#1F3D30;          /* == forest */
  --moss-dark:#12251C;
  --lightsage:#EDF6E1;     /* == wash */
  --wash:#EDF6E1;
  --gray:#bebebe;
  --heading:#1B2A22;
  --body:#57665C;
  --muted:#57665C;   /* was #8C9A90, which failed 4.5:1 on cream */
  --cream:#F2E8D8;
  --cream2:#F7F1E6;
  --white:#ffffff;
  --line:#E1E8E3;
  --shadow:0 24px 55px -24px rgba(18,37,28,.35);
  --shadow-sm:0 12px 30px -16px rgba(18,37,28,.3);
  --radius:16px;
}

/* --- reset / base ------------------------------------------------------ */
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--body);background:var(--white);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body h1,body h2,body h3,body h4{font-family:'Fraunces',Georgia,serif;color:var(--heading);font-weight:600;line-height:1.14;letter-spacing:-.01em}
body a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1180px,92%);margin-inline:auto}
.sec-pad{padding:100px 0}
.eyebrow{font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-dark);display:block}

/* skip link */
.da-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--moss);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 8px 0}
.da-skip:focus{left:0}

/* --- buttons ------------------------------------------------------------
   Written at (0,2,1) via a.btn so the Elementor kit's .elementor-kit-N a
   rule (0,1,1) cannot win. Same trap as the Diamond Dental build.        */
a.btn,button.btn{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;font-family:'Inter',sans-serif;font-weight:600;font-size:.98rem;padding:.92rem 1.9rem;border-radius:8px;transition:.25s ease;cursor:pointer;border:none;line-height:1.2}
a.btn.btn-moss,button.btn.btn-moss{background:var(--moss);color:#fff}
a.btn.btn-moss:hover,button.btn.btn-moss:hover{background:var(--moss-dark);color:#fff;transform:translateY(-2px)}
a.btn.btn-sage,button.btn.btn-sage{background:var(--sage);color:#fff}
a.btn.btn-sage:hover,button.btn.btn-sage:hover{background:var(--sage-dark);color:#fff;transform:translateY(-2px)}
a.btn.btn-link svg{width:18px;height:18px;flex:0 0 18px}
a.btn.btn-link{background:transparent;color:var(--heading);padding-left:.4rem;padding-right:.4rem}
a.btn.btn-link:hover{color:var(--moss)}
a.btn.btn-white,button.btn.btn-white{background:#fff;color:var(--moss)}
a.btn.btn-white:hover{color:var(--moss-dark);transform:translateY(-2px)}
a.btn.btn-outline-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
a.btn.btn-outline-w:hover{background:rgba(255,255,255,.12);color:#fff}

/* --- top bar ----------------------------------------------------------- */
.topbar{background:var(--charcoal);color:#c9ccc4;font-size:.85rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:1rem}
.topbar a{color:#c9ccc4}
.topbar a:hover{color:var(--lightsage)}
.topbar .l{display:flex;gap:1.6rem;align-items:center}
.topbar .r{display:flex;gap:1.2rem;align-items:center}
.topbar svg{width:14px;height:14px;vertical-align:-2px;margin-right:.35rem;stroke:var(--sage);fill:none;display:inline-block}

/* --- header / nav ------------------------------------------------------ */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.brand-logo{height:66px;width:auto;display:block}
.brand .mark{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:var(--moss);display:grid;place-items:center}
.brand .mark svg{width:26px;height:26px;stroke:var(--lightsage);fill:none}
.brand .txt strong{display:block;font-weight:700;color:var(--heading);font-size:1.05rem;letter-spacing:-.01em;line-height:1.05}
.brand .txt span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-dark);font-weight:600}

nav.main ul{list-style:none;display:flex;gap:2.2rem;align-items:center;margin:0;padding:0}
nav.main li{position:relative}
nav.main a{font-weight:500;color:var(--heading);font-size:1rem;display:inline-flex;align-items:center}
nav.main > ul > li > a{padding:.4rem 0}
nav.main a:hover{color:var(--moss)}
nav.main .current-menu-item > a,nav.main .current-menu-ancestor > a{color:var(--moss);font-weight:600}

/* caret is its own button so the parent link still navigates */
nav.main .sub-toggle{background:none;border:none;padding:.2rem .25rem;margin-left:.35rem;cursor:pointer;line-height:0}
nav.main button.sub-toggle::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);vertical-align:2px;transition:.2s}
nav.main li:hover > .sub-toggle::after,nav.main li:focus-within > .sub-toggle::after{border-color:var(--moss);transform:rotate(-135deg)}

nav.main ul ul{position:absolute;top:100%;left:-1rem;display:grid;gap:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.6rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s ease;z-index:60}
nav.main li:hover > ul,nav.main li:focus-within > ul{opacity:1;visibility:visible;transform:translateY(0)}
nav.main ul ul li a{display:block;padding:.5rem .8rem;border-radius:8px;font-size:.95rem;width:100%}
nav.main ul ul li a:hover{background:var(--cream);color:var(--moss)}
/* two column mega panel for long lists */
nav.main li.mega > ul{display:grid;grid-template-columns:1fr 1fr;min-width:520px;left:-6rem}

.nav-r{display:flex;align-items:center;gap:1.1rem;flex:0 0 auto}
.socials-n{display:flex;gap:.6rem}
.socials-n a{width:34px;height:34px;border-radius:8px;background:var(--cream2);display:grid;place-items:center;transition:.2s}
.socials-n a:hover{background:var(--sage)}
.socials-n a:hover svg{stroke:#fff}
.socials-n svg{width:15px;height:15px;stroke:var(--moss);fill:none}

.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;padding:0;place-items:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:20px;height:2px;background:var(--heading);content:"";position:relative;transition:.2s}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* --- hero -------------------------------------------------------------- */
.hero{position:relative;overflow:visible;background:#2c332a}
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.2s ease,transform 6s ease}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(31,37,29,.88) 0%,rgba(31,37,29,.66) 45%,rgba(31,37,29,.3) 100%)}
.hero .wrap{position:relative;z-index:2;padding:130px 0 170px}
.hero-copy{max-width:640px}
.hero .eyebrow{color:var(--lightsage)}
.hero h1{font-size:3.9rem;font-weight:800;margin:1.1rem 0 1.3rem;color:#fff}
.hero h1 em{font-style:normal;color:var(--sage)}
.hero p.lead{font-size:1.15rem;max-width:44ch;margin-bottom:2rem;color:rgba(255,255,255,.85)}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.hero a.btn.btn-link{color:#fff}
.hero a.btn.btn-link:hover{color:var(--lightsage)}
.hero-arrows{position:absolute;z-index:3;bottom:34px;right:34px;display:flex;gap:.6rem}
.hero-arrows button.hero-arrow{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s;backdrop-filter:blur(4px);padding:0}
.hero-arrows button.hero-arrow:hover{background:var(--sage);border-color:var(--sage)}
.hero-arrows svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2}
.hero-dots{position:absolute;z-index:3;bottom:calc(70px + 46px);left:50%;transform:translateX(-50%);display:flex;gap:.6rem}
.hero-dots button.hero-dot{width:11px;height:11px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;transition:.25s;padding:0}
.hero-dots button.hero-dot.active{background:var(--lightsage);width:30px;border-radius:6px}

/* help card overlapping the hero */
.helpcard{position:absolute;left:50%;transform:translateX(-50%);bottom:-70px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:1.7rem 1.9rem;width:min(560px,90%);display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;z-index:5}
.helpcard h2,.helpcard h3{font-size:1.35rem;margin-bottom:.35rem}
.helpcard p{font-size:.92rem;margin:0;color:var(--muted)}
.helpcard .dial{display:flex;align-items:center;gap:.9rem;border-left:1px solid var(--line);padding-left:1.5rem}
.helpcard .dial .ic{width:52px;height:52px;flex:0 0 52px;border-radius:12px;background:var(--moss);display:grid;place-items:center}
.helpcard .dial .ic svg{width:24px;height:24px;stroke:var(--lightsage);fill:none}
.helpcard .dial small{display:block;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.helpcard .dial b{font-family:'Inter';font-size:1.32rem;font-weight:700;color:var(--heading);line-height:1.1}

/* --- pagehead (inner pages) -------------------------------------------- */
.pagehead{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream) 0%,var(--cream2) 100%)}
.pagehead .wrap{position:relative;z-index:2;padding:92px 0}
.pagehead h1{font-size:3.4rem;font-weight:800;margin-bottom:.7rem;color:var(--charcoal)}
.pagehead p.lead{max-width:60ch;margin-top:.9rem}
.crumb{font-size:.92rem;color:var(--muted);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--sage-dark);font-weight:600}
.crumb svg{width:14px;height:14px;stroke:var(--muted);fill:none}

/* --- split (home "why us") --------------------------------------------- */
.split{padding:150px 0 100px}
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split-media{position:relative}
.split-media .photo{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:5/4.4;background-color:#cfd6c8;background-size:cover;background-position:center;border:8px solid #fff}
.split-media .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.statbar{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);background:#fff;border-radius:14px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(3,1fr);width:88%}
.statbar .s{padding:1.3rem .8rem;text-align:center;border-right:1px solid var(--line)}
.statbar .s:last-child{border-right:none}
.statbar .s b{display:block;font-family:'Inter';font-size:1.9rem;font-weight:800;color:var(--moss);line-height:1}
.statbar .s span{font-size:.78rem;color:var(--muted);margin-top:.3rem;display:block}
.split-copy h2{font-size:2.6rem;margin:.8rem 0 1.2rem}
.split-copy p{margin-bottom:1.8rem}

/* --- offer grid -------------------------------------------------------- */
.offer{background:var(--cream);padding:120px 0 100px}
.sec-head{text-align:center;max-width:640px;margin:0 auto 3.4rem}
.sec-head h2{font-size:2.6rem;margin:.7rem 0 1rem}
.sec-head .rule{width:60px;height:3px;background:var(--sage);margin:1rem auto 0;border-radius:2px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card .ph{position:relative;aspect-ratio:16/11;overflow:hidden;background-size:cover;background-position:center;background-color:#dfe3d8}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .body{padding:1.7rem;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.32rem;margin-bottom:.55rem}
.card p{font-size:.95rem;margin-bottom:1.4rem}
.card a.btn{padding:.7rem 1.5rem;font-size:.92rem;margin-top:auto;align-self:flex-start}

/* icon cards: same block as the .feat component on the about page, used where
   a photograph would add nothing (the medical wellness set) */
.card .body > .ic{width:52px;height:52px;flex:0 0 52px;border-radius:12px;background:var(--moss);display:grid;place-items:center;margin-bottom:1.1rem}
.card .body > .ic svg{width:26px;height:26px;stroke:var(--lightsage);fill:none;stroke-width:1.8}
.card:hover .body > .ic{background:var(--sage-dark)}

/* mini cards */
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.8rem}
.mini-card{background:#fff;border-radius:14px;padding:1.5rem 1.4rem;box-shadow:var(--shadow-sm);display:flex;gap:1rem;align-items:flex-start;transition:.25s ease}
.mini-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.mini-card .ic{flex:0 0 44px;width:44px;height:44px;border-radius:10px;background:var(--lightsage);display:grid;place-items:center}
.mini-card .ic svg{width:20px;height:20px;stroke:var(--moss);fill:none;stroke-width:2}
.mini-card h3,.mini-card h4{font-size:1.03rem;margin-bottom:.3rem;color:var(--heading);font-weight:600}
.mini-card p{font-size:.86rem;color:var(--muted);margin:0}

/* --- sessions / checklist ---------------------------------------------- */
.sessions{background:var(--lightsage);padding:110px 0}
.sessions .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:4rem;align-items:center}
.sessions h2{font-size:2.6rem;margin:.7rem 0 1.3rem}
.checklist{list-style:none;display:grid;gap:1.1rem;margin-top:1.6rem;padding:0}
.checklist li{display:flex;gap:1rem;align-items:flex-start}
.checklist li .ck{flex:0 0 30px;width:30px;height:30px;border-radius:8px;background:var(--moss);display:grid;place-items:center;margin-top:2px}
.checklist li .ck svg{width:16px;height:16px;stroke:var(--lightsage);stroke-width:2.5;fill:none}
.checklist li b{color:var(--heading);font-weight:600;display:block;font-size:1.08rem}
.checklist li span.d{font-size:.92rem;color:var(--body)}
.sessions-media{position:relative}
.sessions-media .photo{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:5/4;background-color:#cfd6c8;background-size:cover;background-position:center}
.sessions-media .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quotecard{position:absolute;left:-24px;bottom:-30px;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:1.4rem 1.5rem;max-width:320px}
.quotecard .stars{color:#e0a92e;letter-spacing:2px;margin-bottom:.5rem;font-size:.95rem}
.quotecard p{font-size:.92rem;color:var(--body);font-style:italic;margin-bottom:.7rem}
.quotecard b{font-size:.9rem;color:var(--heading)}

/* --- service page bands ------------------------------------------------ */
.svc{padding:92px 0}
.svc.alt{background:var(--cream)}
.svc .wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.svc.rev .media{order:2}
.svc .media{position:relative}
.svc .media .ph{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:5/4.6;background-size:cover;background-position:center;background-color:#dfe3d8;box-shadow:var(--shadow-sm)}
.svc .media .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc .media .tag{position:absolute;left:-18px;bottom:-18px;background:var(--moss);color:#fff;border-radius:14px;padding:1rem 1.3rem;box-shadow:var(--shadow);display:flex;gap:.7rem;align-items:center;max-width:230px}
.svc .media .tag svg{width:30px;height:30px;stroke:var(--lightsage);fill:none;stroke-width:1.7;flex:0 0 30px}
.svc .media .tag b{font-family:'Inter';font-weight:600;font-size:.98rem;color:#fff;line-height:1.2}
.svc h2{font-size:2.5rem;margin:.7rem 0 1.2rem}
.svc h3{font-size:1.3rem;margin:1.6rem 0 .5rem}
.svc p{margin-bottom:1.1rem}
.svc .cta{margin-top:1.4rem}

/* callout (safety / contraindications) */
.callout{margin-top:1.6rem;background:#fff;border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:12px;padding:1.4rem 1.5rem}
.callout h3,.callout h4{font-size:1.02rem;margin-bottom:.9rem;display:flex;gap:.55rem;align-items:center;color:var(--heading)}
.callout h3 svg,.callout h4 svg{width:20px;height:20px;stroke:var(--sage-dark);fill:none;stroke-width:2;flex:0 0 20px}
.callout ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.55rem;padding:0;margin:0}
.callout li{font-size:.94rem;display:flex;gap:.5rem;align-items:center}
.callout li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);flex:0 0 6px}

/* conditions / chips */
.cond{background:var(--lightsage);padding:92px 0;text-align:center}
.cond .head{max-width:720px;margin:0 auto 2.6rem}
.cond h2{font-size:2.5rem;margin:.7rem 0 1rem}
.chips{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;max-width:820px;margin:0 auto;list-style:none;padding:0}
.chip{background:#fff;border-radius:100px;padding:.75rem 1.6rem;font-weight:600;color:var(--moss);font-size:1rem;box-shadow:var(--shadow-sm);display:flex;gap:.55rem;align-items:center}
.chip svg{width:17px;height:17px;stroke:var(--sage-dark);fill:none;stroke-width:2;flex:0 0 17px}

/* benefits */
.benefits{padding:92px 0}
.benefits .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center}
.benefits .media .ph{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/4.7;background-size:cover;background-position:center;background-color:#dfe3d8;box-shadow:var(--shadow-sm)}
.benefits .media .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.benefits h2{font-size:2.5rem;margin:.7rem 0 1rem}
.benefits .copy > p.lead{margin-bottom:1.8rem}
.bcards{display:grid;gap:1rem}
.bcard{background:var(--cream);border-radius:14px;padding:1.4rem 1.5rem;display:flex;gap:1.1rem;align-items:flex-start}
.bcard .ic{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:var(--moss);display:grid;place-items:center}
.bcard .ic svg{width:23px;height:23px;stroke:var(--lightsage);fill:none;stroke-width:1.8}
.bcard h3{font-size:1.14rem;margin-bottom:.25rem}
.bcard p{font-size:.94rem;margin:0}
.bcard .stat{color:var(--sage-dark);font-weight:700}

/* --- about page -------------------------------------------------------- */
.who{padding:100px 0}
.who .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:start}
.who-media{position:relative}
.who-media .photo{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5.6;background-color:#cfd6c8;background-size:cover;background-position:35% center;box-shadow:var(--shadow-sm)}
.who-media .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% center}
.who-media .qcard{position:absolute;top:34px;right:-26px;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:1.3rem 1.4rem;max-width:230px}
.who-media .qcard p{font-family:'Inter';font-style:italic;color:var(--heading);font-weight:500;font-size:1rem;line-height:1.35;margin-bottom:.6rem}
.who-media .qcard b{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-dark)}
.who h2{font-size:2.6rem;margin:.7rem 0 1.2rem}
.who p.intro{margin-bottom:1.8rem}
.valrow{border-top:1px solid var(--line);padding-top:1.5rem;margin-top:.4rem}
.val{margin-bottom:1.3rem}
.val h3{font-size:1.18rem;margin-bottom:.3rem;color:var(--heading)}
.val p{font-size:.96rem}
/* Centred values band on the About page. Its own full-width section rather
   than a tail on the who band's copy column, so it reads as deliberate rather
   than as text left over beside the photo. Paragraphs keep a readable measure
   even though the band is centred. */
.vals{padding:76px 0 88px;background:var(--cream);text-align:center}
.vals .wrap{max-width:860px}
.vals .valrow{border-top:none;padding-top:0;margin-top:0}
.vals .val{margin-bottom:2.1rem}
.vals .val:last-child{margin-bottom:0}
.vals .val h3{font-size:1.3rem;margin-bottom:.45rem}
.vals .val p{max-width:64ch;margin-inline:auto}
.vals-cta{margin-top:2.6rem}

/* stats strip */
.stats{background:var(--cream);border-block:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:52px 0}
.stats .s{text-align:center;border-right:1px solid var(--line)}
.stats .s:last-child{border-right:none}
.stats .s b{display:block;font-family:'Inter';font-size:2.8rem;font-weight:800;color:var(--sage-dark);line-height:1}
.stats .s span{font-size:.9rem;color:var(--muted);margin-top:.4rem;display:block}

/* feature band */
.band{position:relative;color:#fff;background:#2c332a;padding-bottom:90px}
.band-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,44,36,.82),rgba(38,44,36,.72))}
.band .inner{position:relative;z-index:2;text-align:center;max-width:720px;margin:0 auto;padding:100px 0 150px}
.band .eyebrow{color:var(--lightsage)}
.band h2{color:#fff;font-size:2.5rem;margin:.8rem 0 1.1rem}
.band p{color:rgba(255,255,255,.85);margin-bottom:1.8rem}
.feat-cards{position:relative;z-index:3;margin-top:-80px;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feat{background:#fff;border-radius:var(--radius);padding:1.9rem 1.7rem;box-shadow:var(--shadow-sm)}
.feat .ic{width:52px;height:52px;border-radius:12px;background:var(--moss);display:grid;place-items:center;margin-bottom:1.1rem}
.feat .ic svg{width:26px;height:26px;stroke:var(--lightsage);fill:none;stroke-width:1.8}
.feat h3{font-size:1.2rem;margin-bottom:.5rem;color:var(--heading)}
.feat p{font-size:.94rem;color:var(--body)}

/* team */
.team{padding:110px 0}
.grid-team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.7rem;align-items:start}
.tm{position:relative;transition:.25s ease;--c:var(--moss)}
.tm:nth-child(even){margin-top:52px}
.tm:hover{transform:translateY(-6px)}
.tm .badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--c);color:#fff;font-family:'Inter';font-weight:600;font-size:1.02rem;padding:.5rem 1.5rem;border-radius:10px;white-space:nowrap;z-index:4;box-shadow:var(--shadow-sm)}
.tm .badge::after{content:"";position:absolute;bottom:-6px;left:50%;margin-left:-6px;width:13px;height:13px;background:var(--c);transform:rotate(45deg)}
.tm .frame{border:4px solid var(--c);border-radius:20px;padding:6px;background:#fff}
.tm .frame .ph{position:relative;border-radius:14px;aspect-ratio:1/1.12;background-size:cover;background-position:center 18%;background-color:#dfe3d8;overflow:hidden}
.tm .frame .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.tm .info{background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);margin:-30px 12px 0;position:relative;z-index:3;padding:2.1rem 1.2rem 1.5rem;text-align:center}
.tm .info h3{font-size:1.18rem;margin-bottom:.2rem}
.tm .info .role{font-size:.82rem;color:var(--sage-dark);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1rem}
.tm .info p{font-size:.92rem;text-align:left}

/* --- contact page ------------------------------------------------------ */
.contact{padding:90px 0}
.contact .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:start}
.info h2{font-size:2.3rem;margin:.7rem 0 1rem}
.info > p.lead{margin-bottom:2rem}
.infocards{display:grid;gap:1rem;margin-bottom:2rem}
.icard{display:flex;gap:1rem;align-items:flex-start;background:var(--cream);border-radius:14px;padding:1.25rem 1.4rem}
.icard .ic{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:var(--moss);display:grid;place-items:center}
.icard .ic svg{width:22px;height:22px;stroke:var(--lightsage);fill:none;stroke-width:1.8}
.icard h3{font-size:1.02rem;margin-bottom:.15rem}
.icard p{font-size:.96rem;margin:0}
.icard a{color:var(--moss);font-weight:600}
.da-hours{list-style:none;padding:0;margin:0}
.da-hours li{display:flex;justify-content:space-between;gap:1rem;font-size:.96rem}
.da-hours li b{color:var(--heading);font-weight:600}
.da-hours-note{font-size:.88rem;color:var(--muted);margin-top:.3rem}
.accept{border-top:1px solid var(--line);padding-top:1.5rem}
.accept h3,.accept h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.paychips{display:flex;flex-wrap:wrap;gap:.5rem}
.paychips span{font-size:.82rem;background:var(--cream2);border:1px solid var(--line);border-radius:7px;padding:.3rem .75rem;color:var(--body)}

/* form */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:2.4rem}
.formcard h2{font-size:1.7rem;margin-bottom:.4rem}
.formcard .sub{font-size:.96rem;color:var(--muted);margin-bottom:1.8rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.86rem;font-weight:600;color:var(--heading);margin-bottom:.4rem}
.field label .req{color:var(--sage-dark)}
.field input,.field textarea,.field select{width:100%;font-family:'Inter',sans-serif;font-size:1rem;color:var(--heading);background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:.8rem 1rem;transition:.2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--sage);background:#fff;box-shadow:0 0 0 3px rgba(147,163,132,.18)}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:.76rem;color:var(--muted);margin-top:.3rem}
.formcard button.btn{width:100%;justify-content:center;margin-top:.4rem}
.form-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--body)}
.form-consent input{width:auto;flex:0 0 auto;margin-top:.25rem}
.form-notice{background:var(--lightsage);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.4rem;color:var(--moss);font-weight:600}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* map + areas */
.mapsec{position:relative}
.mapsec iframe{width:100%;height:440px;border:0;display:block;filter:grayscale(.15)}
.areas{background:var(--lightsage);text-align:center;padding:40px 0}
.areas h3,.areas h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-dark);margin-bottom:1rem}
.areachips{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.areachips span{background:#fff;border-radius:100px;padding:.5rem 1.3rem;font-weight:600;color:var(--moss);font-size:.95rem;box-shadow:var(--shadow-sm)}

/* --- CTA band ---------------------------------------------------------- */
.ctaband{background:var(--moss);color:#fff}
.ctaband .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:64px 0;flex-wrap:wrap}
.ctaband h2{color:#fff;font-size:2.3rem;max-width:22ch}
.ctaband p{color:rgba(255,255,255,.85);margin-top:.5rem}
.cta-actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* --- reviews ----------------------------------------------------------- */
.reviews{padding:110px 0}
.reviews.on-sage{background:var(--lightsage)}
.grid-rev{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
figure.rev{background:var(--cream);border-radius:var(--radius);padding:2rem 1.8rem;margin:0}
.reviews.on-sage figure.rev{background:#fff;box-shadow:var(--shadow-sm)}
figure.rev .stars{color:#e0a92e;letter-spacing:2px;font-size:1.05rem;margin-bottom:1rem}
figure.rev blockquote{margin:0}
figure.rev p{font-size:1rem;margin-bottom:1.4rem}
figure.rev .rev-context{font-size:.92rem;color:var(--muted);border-left:3px solid var(--sage);padding-left:.9rem}
figure.rev .who2{display:flex;align-items:center;gap:.8rem}
figure.rev .av{width:44px;height:44px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-weight:600;flex:0 0 44px}
figure.rev .who2 b{display:block;color:var(--heading);font-size:.95rem}
figure.rev .who2 span span,figure.rev .who2 > span > span{font-size:.82rem;color:var(--muted)}

/* --- prose (long form content pages) ----------------------------------- */
.prose{padding:80px 0}
.prose .wrap{max-width:820px}
.prose h2{font-size:2rem;margin:2.4rem 0 1rem}
.prose h3{font-size:1.35rem;margin:1.8rem 0 .6rem}
.prose p{margin-bottom:1.1rem}
.prose ul,.prose ol{margin:0 0 1.4rem 1.2rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--moss);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.disclaimer{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem}
.markers{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.markers li{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:.4rem .9rem;font-size:.9rem}

/* --- bandified prose ---------------------------------------------------
   Long-form pages are split into alternating bands rather than one column of
   text, matching the rhythm the service mockup uses.                      */
.prose.alt{background:var(--cream)}
.prose > .wrap > h2:first-child{margin-top:0}
.featband{padding:90px 0}
.featband.alt{background:var(--cream)}
.featband .sec-head{max-width:720px}
.featband .sec-head p{margin-top:.6rem}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start}
.feat-grid.two{grid-template-columns:repeat(2,1fr)}
.feat-grid .feat h2{font-size:1.2rem;margin-bottom:.5rem;color:var(--heading)}
.feat-grid .feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem 1.7rem;box-shadow:var(--shadow-sm)}
.featband.alt .feat-grid .feat{background:#fff}
.feat-grid .feat p{margin-bottom:.7rem}
.feat-grid .feat p:last-child{margin-bottom:0}

/* the pull band breaks up a run of plain prose */
.pullband{background:var(--lightsage);padding:84px 0}
.pullband .wrap{max-width:760px}
.pullband h2{font-size:2.1rem;margin-bottom:1.1rem;text-align:center}
.pullband p{font-size:1.06rem;margin-bottom:1.1rem}
.pullband p:last-child{margin-bottom:0}
.pullband a{color:var(--moss-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.inlinecta{background:var(--lightsage)}
.inlinecta .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:40px 0;flex-wrap:wrap}
.inlinecta h2{font-size:1.6rem;color:var(--heading)}
.inlinecta p{margin-top:.35rem;color:var(--body);font-size:.96rem}

/* --- FAQ. <details> so every answer ships in the HTML. ----------------- */
.faq{padding:90px 0;background:var(--cream)}
.faq .wrap{max-width:820px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:.9rem;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.2rem 1.5rem;font-weight:600;color:var(--heading);font-size:1.06rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--sage-dark);border-bottom:2px solid var(--sage-dark);transform:rotate(45deg);transition:.2s;flex:0 0 9px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .answer{padding:0 1.5rem 1.4rem}
.faq .answer p{margin-bottom:.8rem}
.faq .answer p:last-child{margin-bottom:0}
/* FAQ runs in two columns on desktop. The heading spans both columns and the
   items align to the top, so opening one answer never stretches the item beside
   it or leaves a gap in the other column. */
@media (min-width:900px){
  .faq .wrap{max-width:1180px;display:grid;grid-template-columns:1fr 1fr;column-gap:1.1rem;row-gap:.9rem;align-items:start}
  .faq .sec-head{grid-column:1 / -1}
  .faq details{margin-bottom:0}
}

/* --- footer ------------------------------------------------------------ */
footer.site{background:var(--charcoal);color:#b7bbb2;padding-top:72px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.5rem;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site h2,footer.site h4{color:#fff;font-size:1.02rem;margin-bottom:1.2rem}
.foot-logo{height:72px;width:auto;display:block;margin-bottom:.4rem}
footer.site .brand .mark{background:var(--sage)}
footer.site .brand .txt strong{color:#fff}
footer.site ul{list-style:none;display:grid;gap:.6rem;padding:0;margin:0}
footer.site ul a{font-size:.94rem;color:#b7bbb2}
footer.site ul a:hover{color:var(--lightsage)}
.foot-contact p{font-size:.94rem;margin-bottom:.7rem;display:flex;gap:.6rem;align-items:flex-start}
.foot-contact svg{width:17px;height:17px;stroke:var(--sage);fill:none;flex:0 0 17px;margin-top:3px}
.foot-intro p{font-size:.94rem;margin:1rem 0 1.4rem;color:#93998f}
.socials{display:flex;gap:.7rem}
.socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.2s}
.socials a:hover{background:var(--sage)}
.socials svg{width:18px;height:18px;stroke:#fff;fill:none}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:.85rem;color:#828a80;flex-wrap:wrap;gap:.6rem}
.foot-bottom a{color:#828a80}
.foot-bottom a:hover{color:var(--lightsage)}

/* ==========================================================================
   Elementor interop.
   The kit's own stylesheet loads after this file, so anything that has to
   beat it is written at matching or higher specificity. See da-kit.php,
   which configures the kit itself so the editor agrees with the front end.
   ========================================================================== */
.elementor-widget.elementor-widget-heading:not(:last-child){margin-block-end:0}
.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%}
.da-page .elementor-widget-html > .elementor-widget-container{overflow:visible}

/* ==========================================================================
   Breakpoints. Mockup values, plus the extra tiers the real header needs.
   ========================================================================== */
@media(max-width:1180px){
  nav.main ul{gap:1.4rem}
  nav.main a{font-size:.95rem}
  .brand-logo{height:56px}
}
@media(max-width:1040px){
  .topbar .l span:nth-child(2){display:none}
  .socials-n{display:none}
}
@media(max-width:960px){
  .hero .wrap,.split .wrap,.sessions .wrap,.svc .wrap,.benefits .wrap,.who .wrap,.contact .wrap{grid-template-columns:1fr;gap:2.6rem}
  .hero .wrap{padding:96px 0 110px}
  .hero h1{font-size:2.7rem}
  .split{padding:110px 0 100px}
  .svc.rev .media{order:0}
  .grid-4,.grid-rev,.mini-grid,.grid-3,.feat-cards,.grid-team,.feat-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:2rem}
  .stats .s:nth-child(2){border-right:none}
  .tm:nth-child(even){margin-top:0}
  .who-media .photo{aspect-ratio:4/4.4}
  .who-media .qcard{right:0}

  /* collapsed nav */
  .nav-toggle{display:grid}
  nav.main{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);display:none;max-height:calc(100vh - 122px);overflow-y:auto}
  nav.main.open{display:block}
  nav.main > ul{display:block;padding:.8rem 4%}
  nav.main > ul > li{border-bottom:1px solid var(--line)}
  nav.main > ul > li:last-child{border-bottom:none}
  nav.main > ul > li > a{padding:.85rem 0;font-size:1.05rem}
  nav.main li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  nav.main ul ul,nav.main li.mega > ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;display:none;width:100%;min-width:0;grid-template-columns:1fr;padding:0 0 .7rem .8rem}
  nav.main li.open > ul{display:grid}
  nav.main li:hover > ul,nav.main li:focus-within > ul{display:none}
  nav.main li.open:hover > ul{display:grid}
  nav.main .sub-toggle{padding:.8rem .6rem}
}
/* below 560 the full lockup (logo + CTA pill + toggle) no longer fits 390px */
@media(max-width:560px){
  .nav-cta .cta-long{display:none}
  a.btn.btn-moss.nav-cta{padding:.7rem 1.05rem;font-size:.9rem}
  header.nav .wrap{gap:.5rem}
  .nav-r{gap:.55rem}
  .brand-logo{height:46px}
  .brand .mark{width:38px;height:38px;flex:0 0 38px;border-radius:10px}
  .brand .mark svg{width:21px;height:21px}
  .brand .txt strong{font-size:.95rem}
  .brand .txt span{font-size:.6rem;letter-spacing:.12em}
  .nav-toggle{width:40px;height:40px}
}
@media(max-width:720px){
  .topbar .l{display:none}
  .topbar .wrap{justify-content:center}
  .helpcard{position:static;transform:none;width:min(1180px,92%);margin:0 auto;margin-top:-40px}
  .hero{padding-bottom:40px}
}
@media(max-width:600px){
  .sec-pad,.reviews,.who,.team,.svc,.benefits,.cond,.offer,.sessions,.contact,.faq,.prose{padding:64px 0}
  .split{padding:80px 0 64px}
  .hero .wrap{padding:72px 0 84px}
  .hero h1{font-size:2.2rem}
  .hero-arrows{display:none}
  .pagehead .wrap{padding:64px 0}
  .pagehead h1{font-size:2.2rem}
  .helpcard{grid-template-columns:1fr;text-align:center}
  .helpcard .dial{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:1rem;justify-content:center}
  .grid-4,.grid-rev,.foot-grid,.mini-grid,.grid-3,.feat-cards,.grid-team,.feat-grid,.stats .wrap{grid-template-columns:1fr}
  .featband,.inlinecta,.pullband{padding:56px 0}
  .pullband h2{font-size:1.7rem}
  .inlinecta .wrap{flex-direction:column;align-items:flex-start}
  .sec-head h2,.split-copy h2,.sessions h2,.svc h2,.cond h2,.benefits h2,.who h2,.band h2,.info h2{font-size:2rem}
  .statbar{position:static;transform:none;width:100%;margin-top:1.5rem}
  .ctaband .wrap{flex-direction:column;align-items:flex-start}
  .callout ul{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .formcard{padding:1.6rem}
  .quotecard{position:static;max-width:none;margin-top:1rem}
  .svc .media .tag{position:static;max-width:none;margin-top:1rem}
  .who-media .qcard{position:static;max-width:none;margin-top:1rem}
  .feat-cards{margin-top:-60px}
  .stats .s{border-right:none;border-bottom:1px solid var(--line);padding-bottom:1.2rem}
  .stats .s:last-child{border-bottom:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-slide{transition:opacity .2s ease}
}

/* DA Medical booking notice (medical service pages) */
.mednotice{background:var(--lightsage)}
.mednotice .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2rem;padding:28px 0;flex-wrap:wrap}
.mednotice .mn-body{display:flex;gap:1rem;align-items:flex-start;flex:1 1 520px}
.mednotice .mn-icon{flex:0 0 44px;height:44px;border-radius:12px;background:var(--moss);color:#fff;display:flex;align-items:center;justify-content:center}
.mednotice .mn-icon svg{width:22px;height:22px}
.mednotice h2{font-size:1.25rem;color:var(--heading);margin:0 0 .3rem}
.mednotice p{margin:0;color:var(--body);font-size:.96rem;max-width:72ch}
.mednotice p a{color:var(--moss);font-weight:600;text-decoration:underline}

/* Halsey: a single provider card centres rather than sitting in a 4-column grid */
.grid-team.one{grid-template-columns:minmax(0,360px);justify-content:center}
@media(max-width:960px){.grid-team.one{grid-template-columns:minmax(0,360px)}}
body.da-page [data-da-slot="clinic-1"]{background-position:center 38%}
.tm .info p.role{text-align:center}

/* Rotating review band. Every review ships in the HTML; JS only changes which
   one is visible, so nothing is interaction-gated. Without JS all cards stack. */
.reviews.rot .rev-rot{position:relative;max-width:720px;margin:0 auto}
.reviews.rot figure.rev{text-align:center;padding:2.4rem 2rem}
.reviews.rot figure.rev + figure.rev{margin-top:1.2rem}
.reviews.rot figure.rev .rev-context{border-left:none;border-top:3px solid var(--sage);padding:.9rem 0 0;margin-top:.6rem}
.reviews.rot figure.rev .who2{justify-content:center}
.da-js .reviews.rot figure.rev{position:absolute;top:0;left:0;right:0;margin:0;opacity:0;visibility:hidden;transition:opacity .5s ease}
.da-js .reviews.rot figure.rev.active{opacity:1;visibility:visible}
.rev-dots{display:flex;gap:.6rem;justify-content:center;margin-top:1.6rem}
.rev-dots button.rev-dot{width:11px;height:11px;border-radius:50%;border:none;background:var(--line);cursor:pointer;transition:.25s;padding:0}
.rev-dots button.rev-dot.active{background:var(--sage);width:30px;border-radius:6px}
.rev-dots button.rev-dot:hover{background:var(--sage-dark)}

/* ---------------------------------------------------------------------------
   Elementor-native bands. Page heads, prose bands, pull bands and the split
   bands are built from real Elementor widgets so the copy, headings, buttons
   and photos are editable in the editor. These rules make Elementor's own
   container and column markup behave exactly like the .wrap markup it replaced.
   --------------------------------------------------------------------------- */
.da-page .elementor-widget:not(:last-child){margin-block-end:0}
.da-page .elementor-section > .elementor-container{width:100%}
.da-page .da-el > .elementor-container{width:min(1180px,92%);margin-inline:auto;display:block}
.da-page .da-el > .elementor-container > .elementor-column{width:100%}
.da-page .da-el .elementor-widget-wrap{padding:0}
.da-page .pagehead.da-el > .elementor-container{padding:92px 0;position:relative;z-index:2}
.da-page .prose.da-el > .elementor-container{width:min(820px,92%)}
.da-page .pullband.da-el > .elementor-container{width:min(760px,92%)}
.da-page .prose.da-el .elementor-widget:first-child h2{margin-top:0}
.da-page .da-el .elementor-widget-text-editor > .elementor-widget-container > *:last-child{margin-bottom:0}

/* two column split band */
.da-page .da-el2 > .elementor-container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.da-page .da-el2 > .elementor-container > .elementor-column{width:auto;position:relative}
.da-page .svc.rev.da-el2 > .elementor-container > .elementor-column:first-child{order:2}
.da-page .svc.da-el .elementor-widget-image img{display:block;width:100%;aspect-ratio:5/4.6;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-sm)}
.da-page .svc.da-el .da-tag{position:absolute;left:-18px;bottom:-18px;background:var(--moss);color:#fff;border-radius:14px;padding:1rem 1.3rem;box-shadow:var(--shadow);display:flex;gap:.7rem;align-items:center;max-width:230px}
.da-page .svc.da-el .da-tag svg{width:30px;height:30px;stroke:var(--lightsage);fill:none;stroke-width:1.7;flex:0 0 30px}
.da-page .svc.da-el .da-tag b{font-family:'Inter';font-weight:600;font-size:.98rem;color:#fff;line-height:1.2}
.da-page .svc.da-el .elementor-widget-html{position:static}

/* buttons rendered by the Elementor button widget */
.da-page .elementor-widget-button .elementor-button{display:inline-flex;align-items:center;gap:.5rem;font-family:'Inter',sans-serif;font-weight:600;font-size:.98rem;padding:.92rem 1.9rem;border-radius:8px;background:var(--moss);color:#fff;transition:.25s ease;border:none;line-height:1.2}
.da-page .elementor-widget-button .elementor-button:hover{background:var(--moss-dark);color:#fff;transform:translateY(-2px)}
.da-page .elementor-widget-button.btn-sage .elementor-button{background:var(--sage)}
.da-page .elementor-widget-button.btn-sage .elementor-button:hover{background:var(--sage-dark)}
.da-page .elementor-widget-button.btn-white .elementor-button{background:#fff;color:var(--moss)}
.da-page .da-el .elementor-widget-button{margin-top:1.4rem}

@media(max-width:960px){
  .da-page .da-el2 > .elementor-container{grid-template-columns:1fr;gap:2.6rem}
  .da-page .svc.rev.da-el2 > .elementor-container > .elementor-column:first-child{order:0}
  .da-page .svc.da-el .da-tag{position:static;max-width:none;margin-top:1rem}
}
@media(max-width:640px){
  .da-page .pagehead.da-el > .elementor-container{padding:64px 0}
}
.da-page .featband.da-el > .elementor-container,.da-page .cond.da-el > .elementor-container{width:min(1180px,92%)}
.da-page .featband.da-el .sec-head,.da-page .cond.da-el .head{max-width:none}
.da-page .featband.da-el .elementor-widget-heading,.da-page .cond.da-el .elementor-widget-heading{max-width:720px}
.da-page .cond.da-el > .elementor-container{text-align:center}
.da-page .cond.da-el .elementor-widget-heading{margin-inline:auto}
.da-page .cond.da-el .elementor-widget-text-editor{max-width:70ch;margin-inline:auto}
.da-page .featband.da-el .elementor-widget-html,.da-page .cond.da-el .elementor-widget-html{margin-top:2.2rem}
/* .feat-grid.two is (0,2,0) and beat the single column rule in the phone
   breakpoint, so a two-up feature band ran off the side at 375px. */
@media(max-width:640px){.feat-grid.two{grid-template-columns:1fr}}

/* ==========================================================================
   DomesticAide additions. Ported from the approved mockups.
   ========================================================================== */

/* --- leaf-green button family (mockup uses pill buttons, not 8px radius) -- */
a.btn,button.btn{border-radius:100px;padding:.95rem 1.7rem;font-weight:600;font-size:.92rem}
a.btn.btn-leaf,button.btn.btn-leaf{background:var(--leaf);color:#132312}
a.btn.btn-leaf:hover,button.btn.btn-leaf:hover{background:var(--leaf-deep);color:#fff;transform:translateY(-2px)}
a.btn.btn-forest,button.btn.btn-forest{background:var(--forest);color:#fff}
a.btn.btn-forest:hover,button.btn.btn-forest:hover{background:var(--forest-deep);color:#fff;transform:translateY(-2px)}
a.btn.btn-tan,button.btn.btn-tan{background:var(--tan);color:#3B2E1A}
a.btn.btn-tan:hover,button.btn.btn-tan:hover{background:var(--tan-deep);color:#fff;transform:translateY(-2px)}
a.btn.btn-ghost{border:2px solid rgba(255,255,255,.5);color:#fff;background:transparent}
a.btn.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
/* inherited aliases so shared component markup keeps working */
a.btn.btn-moss,button.btn.btn-moss{background:var(--forest);color:#fff}
a.btn.btn-moss:hover,button.btn.btn-moss:hover{background:var(--forest-deep);color:#fff}
a.btn.btn-sage,button.btn.btn-sage{background:var(--leaf);color:#132312}
a.btn.btn-sage:hover,button.btn.btn-sage:hover{background:var(--leaf-deep);color:#fff}

/* --- eyebrow with the leaf diamond ------------------------------------- */
.eyebrow{font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--leaf-deep);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.center .eyebrow{justify-content:center}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--leaf);
  display:inline-block;transform:rotate(45deg);flex:0 0 7px}
.dark .eyebrow,.forest .eyebrow{color:var(--leaf)}

/* --- wave dividers ------------------------------------------------------
   The curve is the mockup's own path, verbatim, on its 1440x200 viewBox at
   150px tall. Two layers: the element paints the colour being LEFT and the
   masked overlay paints the colour being ENTERED, because the builder gives
   each divider its own white Elementor wrapper and a single-layer wave would
   be invisible against it.                                                */
.wave{position:relative;display:block;width:100%;height:150px;line-height:0;font-size:0}
.wave::after{content:"";position:absolute;inset:0;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,80C240,160,480,160,720,90C960,20,1200,20,1440,90L1440,200L0,200Z'/></svg>") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,80C240,160,480,160,720,90C960,20,1200,20,1440,90L1440,200L0,200Z'/></svg>") no-repeat center/100% 100%}
.wave.from-white{background:#fff}
.wave.from-wash{background:var(--wash)}
.wave.from-forest{background:var(--forest)}
.wave.from-cream{background:var(--cream)}
.wave.to-white::after{background:#fff}
.wave.to-wash::after{background:var(--wash)}
.wave.to-forest::after{background:var(--forest)}
.wave.to-cream::after{background:var(--cream)}
/* mirror the curve, never the colour order: scaleY would put the colour being
   ENTERED on top, which reads as a gap */
.wave.up{transform:scaleX(-1)}
/* a wave is a divider, not a band: strip the Elementor wrapper's own spacing */
.da-el .elementor-section:has(> .elementor-container .wave) .elementor-element-populated{padding:0}
.da-el .elementor-widget:has(> .wave){margin:0}
@media(max-width:700px){.wave{height:78px}}

/* --- band grounds ------------------------------------------------------- */
section.forest{background:var(--forest);color:#BFD0C6}
section.forest h1,section.forest h2,section.forest h3,section.forest h4{color:#fff}
section.forest .lead,section.forest p{color:#C9D8CE}
section.wash{background:var(--wash)}
section.cream{background:var(--cream)}

/* --- hero --------------------------------------------------------------- */
.da-hero{background:var(--forest);padding:0;position:relative;overflow:hidden}
.da-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2.5rem;padding:76px 0 40px}
.da-hero h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.3rem);margin-bottom:18px}
.da-hero h1 em{font-style:normal;color:var(--leaf)}
.da-hero p.lead{color:#C9D8CE;font-size:1.08rem;max-width:34rem;margin-bottom:30px}
.da-hero .row-btn{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-trust{display:flex;gap:30px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:20px}
.hero-trust div{color:#9FB5A6;font-size:.79rem;line-height:1.5}
.hero-trust b{display:block;font-family:'Fraunces',Georgia,serif;color:#fff;font-size:1rem;font-weight:600;margin-bottom:2px}
/* rotator: images only. Headline and lead are static so nothing is
   interaction-gated and every word ships in the delivered HTML.           */
.hero-rotator{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/3.6;
  box-shadow:0 30px 70px rgba(0,0,0,.32);background:var(--forest-panel)}
.hero-rotator .frame{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero-rotator .frame.active{opacity:1}
.hero-rotator .frame img{width:100%;height:100%;object-fit:cover}
.rotator-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.rotator-dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.rotator-dots button[aria-current="true"]{background:#fff;width:22px;border-radius:4px}
@media(max-width:900px){
  .da-hero .wrap{grid-template-columns:1fr;padding:54px 0 32px}
  .da-hero .hero-copy{order:1}.hero-rotator{order:2;aspect-ratio:4/3}
  .hero-trust div:nth-child(n+3){display:none}
}

/* --- page banner (About / Services / Contact / service pages) -----------
   The photo is painted on the element by the slot filler, so the scrim has to
   sit above it. At .34 the headline was illegible over a busy kitchen shot;
   a .78 forest wash plus a darker foot keeps the photo readable as texture
   while the type stays well clear of 4.5:1.                               */
.da-banner{position:relative;background:var(--forest) center/cover no-repeat;color:#fff;
  padding:92px 0 64px;text-align:center;overflow:hidden}
.da-banner::before{content:"";position:absolute;inset:0;z-index:1;
  /* The last stop MUST be fully opaque --forest, because the wave that follows
     starts from solid --forest. Ending on a translucent colour over a photo left
     a hard horizontal seam where the banner met the wave. */
  background:linear-gradient(180deg,rgba(18,37,28,.72) 0%,rgba(31,61,48,.86) 55%,
    rgba(31,61,48,.97) 88%,rgb(31,61,48) 100%)}
.da-banner .wrap{position:relative;z-index:2}
.da-banner p{color:#DCE8E0}
.da-banner h1{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:.6rem}
.da-banner p{color:#C9D8CE;max-width:44rem;margin-inline:auto}
.da-banner .eyebrow{color:var(--leaf);justify-content:center}

/* --- trust / credential badges (Why Us band) --------------------------- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.1rem;margin-top:2rem}
.cert{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.2rem;text-align:center}
.cert .ico{width:52px;height:52px;border-radius:50%;background:var(--wash);color:var(--leaf-deep);
  display:grid;place-items:center;margin:0 auto .9rem}
.cert .ico svg{width:24px;height:24px}
.cert h3{font-size:1rem;margin-bottom:.3rem}
.cert p{font-size:.86rem;color:var(--body);margin:0}
section.forest .cert{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
section.forest .cert .ico{background:rgba(139,197,63,.18);color:var(--leaf)}
section.forest .cert p{color:#BFD0C6}

/* --- referral partner cards -------------------------------------------- */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2rem}
.ref{background:#fff;border-radius:var(--radius);padding:1.7rem 1.4rem;box-shadow:var(--shadow-sm)}
.ref .ico{width:50px;height:50px;border-radius:50%;background:var(--tan);color:#3B2E1A;
  display:grid;place-items:center;margin-bottom:1rem}
.ref .ico svg{width:22px;height:22px}
.ref h3{font-size:1.02rem;margin-bottom:.4rem}
.ref p{font-size:.9rem;margin:0}

/* --- service-area strip in the footer ---------------------------------- */
.foot-areas{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;
  padding:1.3rem 0;border-top:1px solid rgba(255,255,255,.13);font-size:.88rem}
.foot-areas span{color:#8fa295;font-weight:600;letter-spacing:.04em}
.foot-areas a{color:#C9D8CE}
.foot-areas a:hover{color:var(--leaf)}

/* --- Elementor container behaves like .wrap ----------------------------- */
.da-el .elementor-section>.elementor-container{width:min(1180px,92%);margin-inline:auto;max-width:none}
.da-el .elementor-section{padding:0}

/* card feature lists (home + services cards) */
.card .card-items{list-style:none;margin:.9rem 0 1.1rem;padding:0;display:grid;gap:.45rem}
.card .card-items li{display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;color:var(--body);line-height:1.5}
.card .card-items li svg{width:16px;height:16px;flex:0 0 16px;margin-top:.22rem;color:var(--leaf-deep)}
.card .body a.btn.btn-link{padding-left:0;font-size:.88rem;color:var(--leaf-deep)}
.card .body a.btn.btn-link:hover{color:var(--forest)}

/* unattributed reviews: no avatar disc, so the caption does not read as a
   missing photo. The client's own site publishes these without names. */
figure.rev .who2.no-av{padding-left:0}
figure.rev .who2.no-av b{font-weight:600;color:var(--heading)}
figure.rev .who2 span span{color:var(--muted);font-size:.84rem}

/* --- closing quote band: copy left, live form right ---------------------- */
.cfr{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:start}
.cfr .ref-grid{grid-template-columns:1fr 1fr;margin-top:1.6rem}
.cfr .ref{box-shadow:none;border:1px solid var(--line)}
.cfr .ref .ico{width:40px;height:40px;background:var(--wash);color:var(--leaf-deep)}
.cfr .ref .ico svg{width:18px;height:18px}
.cfr .ref h3{font-size:.95rem}
.cfr .ref p{font-size:.85rem}
@media(max-width:980px){
  .cfr{grid-template-columns:1fr;gap:2rem}
  .cfr .ref-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){ .cfr .ref-grid{grid-template-columns:1fr} }

/* Footer links inherit the kit's forest link colour, which is invisible on the
   forest footer ground. The kit rule is `.elementor-kit-N a` at (0,1,1) and
   loads AFTER this file, so an equal-specificity override loses. Everything
   here is written at (0,2,1) or higher via the attribute selector. */
footer.site a[href]{color:#C9D8CE}
footer.site a[href]:hover{color:var(--leaf)}
footer.site .foot-contact a[href]{color:#fff}
footer.site .foot-contact a[href]:hover{color:var(--leaf)}
footer.site a.btn.btn-tan[href]{color:#3B2E1A}
footer.site a.btn.btn-tan[href]:hover{color:#fff}
footer.site .foot-areas a[href]{color:#C9D8CE}
footer.site .foot-bottom a[href]{color:#9FB5A6}
footer.site .socials a[href]{color:#C9D8CE}


/* --- accessible colour corrections -------------------------------------
   Everything below fixes a measured WCAG failure. The brand look is kept;
   only small text on light grounds moves to the darker green.            */

/* eyebrows: leaf-deep is 3.1:1 on white, leaf-text is 5.9:1 */
.eyebrow{color:var(--leaf-text)}
/* on the forest ground the bright leaf is already 5.7:1, so keep it */
.dark .eyebrow,.forest .eyebrow,section.forest .eyebrow,.da-hero .eyebrow,.da-banner .eyebrow{color:var(--leaf)}

/* card "see more" links */
.card .body a.btn.btn-link[href]{color:var(--leaf-text)}
.card .body a.btn.btn-link[href]:hover{color:var(--forest)}

/* Editorial in-body links. Scoped to <main> rather than .prose, because
   da_bandify() lifts authored prose out of .prose into .featband, .svc and
   .pull bands, so a .prose-only rule missed most of them and they rendered
   as unstyled forest text. Written at (0,2,1) to beat `.elementor-kit-N a`. */
main a[href]:not(.btn):not(.nav-cta):not(.mini-card){
  color:var(--leaf-text);text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:.06em}
main a[href]:not(.btn):not(.nav-cta):not(.mini-card):hover{color:var(--forest)}
/* on the dark bands the bright leaf is the readable one */
main section.forest a[href]:not(.btn),main .da-hero a[href]:not(.btn),
main .da-banner a[href]:not(.btn){color:var(--leaf)}
/* FAQ answers and phone links keep their own treatment */
main .faq a[href]:not(.btn){color:var(--leaf-text)}
main a[href^="tel:"]:not(.btn){text-decoration:none;color:inherit;font-weight:600}

/* review service label and other muted captions */
figure.rev .who2 span span{color:var(--muted)}

/* skip link: the Elementor kit's `a` rule (0,1,1) beat `.da-skip` (0,1,0),
   so the link rendered forest-on-forest. Raised to (0,2,1). */
a.da-skip[href]{background:var(--forest);color:#fff}
a.da-skip[href]:focus{left:0;color:#fff}

/* ==========================================================================
   MOCKUP FIDELITY PASS
   Values below are lifted from the approved mockups verbatim. Where this file
   already had a looser version of a band, these rules win on source order.
   ========================================================================== */

/* --- service cards: photo bleeds, icon tile, diamond bullets ------------ */
.offer,.sec-pad.offer{background:var(--wash)}
.grid-3 .card,.grid-4 .card{background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:0 30px 36px;display:flex;flex-direction:column;overflow:hidden;box-shadow:none;transition:.18s}
.grid-3 .card:hover,.grid-4 .card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(31,61,48,.10)}
.card .ph{width:calc(100% + 60px);margin:0 -30px 22px;height:150px;overflow:hidden;
  position:relative;border-radius:0;aspect-ratio:auto}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:0;display:flex;flex-direction:column;flex:1}
/* The shared component CSS paints these tiles moss with a light-sage glyph
   (`.card .body > .ic svg{stroke:var(--lightsage)}`). The mockup wants the
   reverse: a wash tile with a dark green glyph. Written at (0,3,1) with the
   child combinator so it beats that rule. */
.card .body > .ic{width:56px;height:56px;flex:0 0 56px;border-radius:14px;background:var(--wash);
  display:flex;align-items:center;justify-content:center;margin:0 0 22px;color:var(--leaf-text)}
.card:hover .body > .ic{background:var(--wash)}
.card .body > .ic svg{width:26px;height:26px;stroke:var(--leaf-text);fill:none;stroke-width:1.8}
.card .body h3{font-size:1.31rem;margin-bottom:.5rem}
.card .body p{font-size:.91rem;line-height:1.7;flex:1}
/* leaf diamond bullets, not check ticks */
.card .card-items{list-style:none;margin:1rem 0 0;padding:0;display:block}
.card .card-items li{position:relative;padding-left:20px;font-size:.845rem;line-height:1.6;
  color:var(--body);margin-bottom:7px;display:block}
.card .card-items li svg{display:none}
.card .card-items li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:2px;background:var(--leaf);transform:rotate(45deg)}
.card .body a.btn.btn-link[href]{margin-top:18px;padding:0;font-weight:600;font-size:.845rem;
  align-self:flex-start;text-decoration:none}

/* --- after-hours band: inset dark card, photo left ---------------------- */
.night{padding:92px 0;background:#fff}
.night-card{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--forest);
  border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(31,61,48,.2)}
.night-photo{position:relative;min-height:340px;background:var(--forest-panel) center/cover no-repeat}
.night-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(18,37,28,.2),rgba(18,37,28,.8))}
.night-photo .moon-badge{position:absolute;top:22px;left:22px;z-index:2;width:48px;height:48px;
  border-radius:50%;background:rgba(139,197,63,.92);display:flex;align-items:center;justify-content:center;color:#132312}
.night-photo .moon-badge svg{width:22px;height:22px}
.night-copy{padding:48px 46px;display:flex;flex-direction:column;justify-content:center}
.night-copy .eyebrow{color:var(--leaf)}
.night-copy h2{color:#fff;font-size:1.88rem;margin-bottom:14px}
.night-copy p{color:#C9D8CE;font-size:.97rem;line-height:1.75;margin-bottom:0}
.night-copy .btn{margin-top:24px;justify-content:center;width:100%}
@media(max-width:860px){.night-card{grid-template-columns:1fr}.night-photo{min-height:220px}
  .night-copy{padding:34px 26px}}

/* --- credentials band: copy left, circular badges right ----------------- */
.cert-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;text-align:left}
.cert-split .eyebrow{justify-content:flex-start}
.cert-badges{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.badge{text-align:center;width:114px}
.badge .circle{width:96px;height:96px;border-radius:50%;background:#fff;border:2px solid var(--leaf);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:#4F7A1E}
.badge .circle svg{width:34px;height:34px}
.badge b{display:block;font-family:'Fraunces',Georgia,serif;font-size:.94rem;font-weight:600;
  color:#fff;margin-bottom:4px;line-height:1.25}
.badge span{font-size:.75rem;line-height:1.5;color:#9FB5A6;display:block}
@media(max-width:900px){.cert-split{grid-template-columns:1fr;gap:34px;text-align:center}
  .cert-split .eyebrow{justify-content:center}
  .cert-badges{justify-content:center}.badge{width:96px}.badge .circle{width:82px;height:82px}}

/* --- referral partners: dark photo band, centred white cards ------------ */
.refs{position:relative;padding:92px 0;background:var(--forest-panel) center/cover no-repeat;
  background-attachment:fixed}
.refs .ref-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,37,28,.90),rgba(18,37,28,.78))}
.refs .wrap{position:relative;z-index:2}
.refs h2{color:#fff}
.refs .lead{color:#C9D8CE}
.refs .eyebrow{color:var(--leaf);justify-content:center}
.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.refs .ref{text-align:center;background:#fff;border-radius:var(--radius);padding:30px 22px;
  box-shadow:0 20px 44px rgba(0,0,0,.28);border:none}
.refs .ref .ico{width:60px;height:60px;border-radius:50%;background:var(--cream);color:#3B2E1A;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.refs .ref h3{font-size:.97rem;margin-bottom:6px}
.refs .ref p{font-size:.81rem;line-height:1.55}
@media(max-width:860px){.ref-grid{grid-template-columns:1fr 1fr}
  .refs{background-attachment:scroll}}
@media(max-width:520px){.ref-grid{grid-template-columns:1fr}}

/* --- header: centred nav, mockup topbar ---------------------------------- */
.topbar{background:var(--forest-deep);color:#9FB5A6;font-size:.81rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:1rem;flex-wrap:wrap}
.topbar .l,.topbar .r{display:flex;align-items:center;gap:.7rem}
.topbar a{color:#9FB5A6}
.topbar a b{color:#fff;font-weight:600}
.topbar .sep{opacity:.5}
.topbar svg{display:none}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:84px}
header.nav .brand{flex:0 0 auto}
header.nav .brand-logo{height:56px;width:auto;max-width:220px}
header.nav .nav-r{flex:0 0 auto;display:flex;align-items:center;gap:.9rem}
header.nav a.btn.nav-cta{padding:.94rem 1.7rem;font-size:.9rem}
/* Centring the nav is a DESKTOP-only rule. Below the 960px breakpoint the nav
   becomes the off-canvas panel, and an unscoped `display:flex` here overrode
   its `display:none` and pushed a 1660px menu across every inner page. */
@media(min-width:961px){
  header.nav nav.main{flex:1 1 auto;display:flex;justify-content:center}
  header.nav nav.main > ul{display:flex;gap:26px;list-style:none;font-size:.9rem;
    font-weight:500;color:var(--ink);margin:0;padding:0}
}
@media(min-width:961px) and (max-width:1100px){header.nav nav.main > ul{gap:18px;font-size:.84rem}}

/* The widgetizer lifts headings into their own Elementor Heading widget, which
   drops them out of the .center wrapper. Centre them on the band instead. */
.refs .wrap > .center,.refs h2,.refs .lead,.refs .eyebrow{text-align:center}
.refs h2,.refs .lead{margin-left:auto;margin-right:auto}
.refs .lead{max-width:44rem}
.refs .eyebrow{justify-content:center}
.offer .sec-head,.offer .sec-head h2,.offer .sec-head p{text-align:center}
.offer .sec-head .eyebrow{justify-content:center}

/* --- contact page: quick row, then form left / info right ---------------- */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.quick{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 24px;transition:.18s}
.quick:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(31,61,48,.13)}
.quick .ic{width:46px;height:46px;border-radius:12px;background:var(--wash);color:var(--leaf-text);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.quick .ic svg{width:22px;height:22px}
.quick h3{font-size:1rem;margin-bottom:6px}
.quick p{font-size:.875rem;line-height:1.6;margin:0}
.contact-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.sidecol{display:grid;gap:24px}
.sidecard{background:var(--forest);color:#C9D8CE;border-radius:22px;padding:34px 30px}
.sidecard h2{color:#fff;font-size:1.32rem;margin-bottom:1.1rem}
.sidecard .s-row{display:flex;gap:.8rem;align-items:flex-start;margin:0 0 1rem;font-size:.9rem}
.sidecard .s-row svg{width:20px;height:20px;flex:0 0 20px;margin-top:.2rem;color:var(--leaf)}
.sidecard .s-row b{display:block;color:#fff;font-weight:600;font-size:.82rem;margin-bottom:.15rem}
.sidecard a[href]{color:#fff}
.sidecard a.btn{margin-top:.4rem}
.mapcard{border-radius:22px;overflow:hidden;line-height:0;box-shadow:var(--shadow-sm)}
.mapcard iframe{width:100%;height:300px;border:0;display:block}
@media(max-width:1000px){.contact-wrap{grid-template-columns:1fr;gap:32px}}
@media(max-width:860px){.quick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.quick-grid{grid-template-columns:1fr}}

/* Nav CTA must shrink on small screens or the header row overflows: the brand
   logo (220px) plus a full-width "Schedule a Call" button exceeded 390px and
   pushed the menu toggle off-canvas. */
@media(max-width:600px){
  header.nav a.btn.nav-cta{padding:.7rem 1rem;font-size:.82rem}
  header.nav .brand-logo{height:42px;max-width:150px}
  header.nav .wrap{min-height:66px;gap:.6rem}
  header.nav .nav-r{gap:.5rem}
  header.nav .socials-n{display:none}
}

/* --- dark sidecard: force readable colours -----------------------------
   `main a[href]:not(.btn)` is (0,2,1) and appears later in this file, so the
   earlier `.sidecard a[href]` rule lost. These are written at (0,3,1)+.      */
main .sidecard a[href]:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:.18em}
main .sidecard a[href]:not(.btn):hover{color:var(--leaf)}
main .sidecard a[href^="tel:"]{color:#fff;font-weight:600;text-decoration:none}
.sidecard b,.sidecard strong{color:#fff}
.sidecard p,.sidecard span,.sidecard li{color:#C9D8CE}
.sidecard .da-hours-note,.sidecard p.da-hours-note{color:#9FB5A6}
main .sidecard a.btn.btn-leaf[href]{color:#132312;text-decoration:none}
main .sidecard a.btn.btn-leaf[href]:hover{color:#fff}

/* "optional" field hint: 3.1:1 on white */
.da-form .req,.formcard .req{color:var(--leaf-text)}

/* service-area strip heading sat at 2.8:1 on cream */
.areas h3,.arealist h3,section.cream h3{color:var(--heading)}

/* `.da-hours li b{color:var(--heading)}` is (0,2,1) and wins over `.sidecard b`,
   painting the hours near-black on the forest card. Match its specificity. */
.sidecard .da-hours li b,.sidecard .da-hours li span{color:#fff}
.sidecard .da-hours li span{color:#C9D8CE;font-weight:400}
/* `.field label .req` is (0,2,1); the "optional" hint needs to beat it. */
.formcard .field label .req,.da-form .field label .req{color:var(--leaf-text)}

/* Any link on a dark ground: the leaf-text green is 2:1 there. Covers the
   closing CTA band, which is forest but does not carry the .forest class. */
main .ctaband a[href]:not(.btn),main .sidecard a[href]:not(.btn),
main .night-copy a[href]:not(.btn),main .refs a[href]:not(.btn){color:#fff}
main .ctaband a[href]:not(.btn):hover,main .sidecard a[href]:not(.btn):hover{color:var(--leaf)}
main .ctaband a[href^="tel:"],main .sidecard a[href^="tel:"]{color:#fff;font-weight:600}

/* The nav CTA label is split across two spans so `.cta-long` can drop on small
   screens. The button's flex `gap` plus the span's own &nbsp; rendered a double
   space ("Schedule  a Call"), so the gap is zeroed here. */
header.nav a.btn.nav-cta{gap:0}

/* --- About: "why work with us" value cards ------------------------------ */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.val{background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px 28px;transition:.18s}
.val:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(31,61,48,.13)}
.val .ic{width:52px;height:52px;border-radius:14px;background:var(--wash);color:var(--leaf-text);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.val .ic svg{width:24px;height:24px;stroke:var(--leaf-text);fill:none;stroke-width:1.7}
.val h3{font-size:1.19rem;margin-bottom:9px}
.val p{font-size:.905rem;line-height:1.7;margin:0}
@media(max-width:980px){.val-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.val-grid{grid-template-columns:1fr}}

/* --- About: team band, real group photography --------------------------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.team-grid .mem{margin:0}
.team-grid .mem .ph{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  background:var(--wash)}
.team-grid .mem .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.team-grid .mem figcaption{margin-top:.75rem;font-size:.85rem;line-height:1.55;color:var(--body)}
@media(max-width:860px){.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr}}

/* The widgetizer lifts headings into their own Elementor Heading widget, out of
   the `.center` wrapper the band emitted. Re-centre by targeting the section
   that actually contains the grid. */
.elementor-top-section:has(.val-grid) h2,
.elementor-top-section:has(.val-grid) > .elementor-container > .elementor-column .elementor-widget-text-editor,
.elementor-top-section:has(.team-grid) h2,
.elementor-top-section:has(.team-grid) > .elementor-container > .elementor-column .elementor-widget-text-editor,
.elementor-top-section:has(.ref-grid) h2{text-align:center}
.elementor-top-section:has(.val-grid) .eyebrow,
.elementor-top-section:has(.team-grid) .eyebrow{justify-content:center}
.elementor-top-section:has(.val-grid) .lead,
.elementor-top-section:has(.team-grid) .lead{text-align:center;margin-left:auto;margin-right:auto;max-width:46rem}
/* the grids themselves stay left-aligned inside their cards */
.val-grid,.team-grid{text-align:left}
.team-grid .mem figcaption{text-align:left}