/* EDEN — CONCEPT 2 "THE GARDEN ROOM"
   Light editorial. Warm linen, botanical serif, gallery-like air.
   Forest used as accent ink, gold hairlines, big photography. */

:root{
  --paper:#f6f2e9;
  --paper-2:#efe9db;
  --forest:#13231a;
  --forest-deep:#0c1410;
  --leaf:#7e9c2f;
  --leaf-bright:#a8c92f;
  --gold:#a07a1e;
  --ink:#1d2a20;
  --ink-soft:#3a4a35;
  --ink-faint:#5f6658;
  --hair:rgba(29,42,32,.14);
  --rad:26px;
  --shadow:0 30px 70px -30px rgba(19,35,26,.35);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{max-width:100%; overflow-x:hidden; overscroll-behavior-x:none}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif; background:var(--paper); color:var(--ink);
  font-size:16.5px; line-height:1.7; -webkit-font-smoothing:antialiased; touch-action:pan-y}
img{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--leaf-bright); color:var(--forest-deep)}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:430; line-height:1.1; letter-spacing:-.012em}
h1 em,h2 em{font-style:italic; color:var(--leaf); font-weight:420}
.kicker{font-size:.68rem; font-weight:650; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-bottom:18px}

.js-anim .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1)}
.js-anim .reveal.in{opacity:1; transform:none}
.js-anim .reveal[data-d="1"]{transition-delay:.1s}
.js-anim .reveal[data-d="2"]{transition-delay:.2s}
.js-anim .reveal[data-d="3"]{transition-delay:.3s}

/* nav — paper glass */
.nav{position:fixed; inset:16px 16px auto; z-index:60; transition:transform .45s cubic-bezier(.22,1,.36,1)}
.nav.hide{transform:translateY(-140%)}
.nav-inner{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:26px;
  padding:11px 14px 11px 20px; border-radius:999px;
  background:rgba(246,242,233,.7); backdrop-filter:blur(26px) saturate(1.4); -webkit-backdrop-filter:blur(26px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 18px 48px -26px rgba(19,35,26,.45)}
.nav .logo img{height:44px; width:auto}
.nav-links{display:flex; gap:26px; margin-left:auto; font-size:.82rem; font-weight:550; letter-spacing:.04em}
.nav-links a{text-decoration:none; color:rgba(246,242,233,.88); transition:color .25s}
.nav-links a:hover{color:var(--paper)}
@media(max-width:880px){ .nav-links{display:none} .nav .cta{margin-left:auto} }

.btn{display:inline-flex; align-items:center; gap:.55em; padding:.9em 1.9em; border-radius:999px;
  font-weight:600; font-size:.92rem; letter-spacing:.02em; text-decoration:none; border:none; cursor:pointer;
  transition:transform .3s, background .3s, color .3s, box-shadow .3s}
.btn-forest{background:var(--forest); color:var(--paper)}
.btn-forest:hover{transform:translateY(-2px); background:#1c3325}
.btn-paper{background:rgba(255,255,255,.75); color:var(--ink); border:1px solid var(--hair);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.btn-paper:hover{background:#fff}
.btn-emergency{background:rgba(206,46,38,.1); color:#b3251e; border:1px solid rgba(206,46,38,.4);
  padding:.72em 1.4em; font-size:.84rem; animation:emr 3s ease-in-out infinite}
.btn-emergency svg{width:14px; height:14px}
.btn-emergency:hover{background:#ce2e26; color:#fff}
@keyframes emr{50%{box-shadow:0 0 0 7px rgba(206,46,38,.07)}}
@media(max-width:560px){ .nav .btn-emergency span{display:none} .nav .btn-emergency{padding:.72em .95em}
  .nav .cta{padding:.72em 1.2em; font-size:.84rem; white-space:nowrap} .nav-inner{gap:12px} .nav .logo img{height:38px} }

/* hero — editorial split */
.hero{padding:170px 0 90px; background:var(--paper)}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
@media(max-width:880px){ .hero-grid{grid-template-columns:1fr; gap:44px} }
.hero h1{font-size:clamp(2.8rem,5.8vw,4.6rem); max-width:12ch}
.hero .lede{margin:26px 0 36px; max-width:46ch; font-size:1.1rem; color:#2d3a2a; font-weight:380}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap}
.hero-img{position:relative}
.hero-img .main{border-radius:30px 120px 30px 30px; box-shadow:var(--shadow); aspect-ratio:4/5; object-fit:cover; width:100%}
.hero-img .stamp{position:absolute; left:-26px; bottom:34px; background:var(--forest); color:var(--paper);
  border-radius:18px; padding:18px 22px; box-shadow:var(--shadow); max-width:240px}
.hero-img .stamp .n{font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; color:var(--leaf-bright)}
.hero-img .stamp .t{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(246,242,233,.7); margin-top:4px}
@media(max-width:880px){ .hero-img .stamp{left:12px} }
.trustline{display:flex; gap:0; flex-wrap:wrap; margin-top:44px; border-top:1px solid var(--hair); padding-top:22px}
.trust{font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#2d3a2a;
  display:inline-flex; align-items:center; gap:.55em; padding-right:1.6em; margin-right:1.6em; border-right:1px solid var(--hair)}
.trust:last-child{border-right:none}
.trust svg{width:12px; height:12px; color:var(--leaf)}
@media(max-width:680px){ .trust{border-right:none} }

/* areas strip */
.areas{background:var(--paper-2); padding:48px 0 54px; overflow:hidden; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.areas .label{text-align:center; font-size:.66rem; font-weight:650; letter-spacing:.34em; text-transform:uppercase; color:#4a5445; margin-bottom:32px}
.marquee{display:flex; width:max-content; animation:marq 38s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee .set{display:flex; align-items:center; gap:96px; padding-right:96px}
.marquee img{height:48px; width:auto; opacity:.55; filter:grayscale(1) brightness(.4); transition:opacity .3s}
.marquee img:hover{opacity:.9}
@keyframes marq{to{transform:translateX(-50%)}}

/* story — magazine spread */
.section{padding:100px 0}
.story-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:84px; align-items:center}
@media(max-width:880px){ .story-grid{grid-template-columns:1fr; gap:48px} }
.story h2{font-size:clamp(2rem,3.8vw,2.9rem); margin-bottom:26px}
.story p{color:#2d3a2a; margin-bottom:18px; font-weight:380}
.story p strong{color:var(--ink); font-weight:580}
.dropcap::first-letter{font-family:'Fraunces',serif; font-size:3.4em; float:left; line-height:.82; padding:6px 10px 0 0; color:var(--leaf)}
.photo-stack{position:relative}
.photo-stack .main{border-radius:var(--rad); box-shadow:var(--shadow); aspect-ratio:4/5; object-fit:cover; width:100%}
.photo-stack .float{position:absolute; width:46%; left:-9%; bottom:-9%; border-radius:18px;
  border:8px solid var(--paper); box-shadow:var(--shadow); aspect-ratio:1/1.2; object-fit:cover}
@media(max-width:880px){ .photo-stack .float{left:0} }

/* quote band — green room */
.wallquote{position:relative; padding:140px 0; color:var(--paper); text-align:center; overflow:hidden; background:var(--forest-deep)}
.wallquote .bg{position:absolute; inset:0; background:url('img/eden/foliage.webp') center/cover; opacity:.35}
.wallquote .veil{position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(12,20,16,.25), rgba(12,20,16,.85))}
.wallquote blockquote{position:relative; font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.35; max-width:26ch; margin:0 auto}
.wallquote blockquote em{color:var(--leaf-bright)}
.wallquote cite{position:relative; display:block; margin-top:30px; font-style:normal; font-size:.68rem; font-weight:650; letter-spacing:.34em; text-transform:uppercase; color:rgba(246,242,233,.5)}

/* services — index list, editorial */
.svc-list{border-top:1px solid var(--hair)}
.svc-row{display:grid; grid-template-columns:64px 1.1fr 1.6fr auto; gap:28px; align-items:center;
  padding:30px 6px; border-bottom:1px solid var(--hair); transition:background .3s, padding .3s}
.svc-row:hover{background:rgba(255,255,255,.5); padding-left:18px}
.svc-row .num{font-family:'Fraunces',serif; font-style:italic; font-size:1.2rem; color:var(--gold)}
.svc-row h3{font-size:1.4rem; font-weight:460}
.svc-row p{color:#2d3a2a; font-size:.94rem; font-weight:380}
.svc-row .arrow{width:34px; height:34px; border-radius:50%; border:1px solid var(--hair); display:grid; place-items:center; color:#2d3a2a; transition:background .3s,color .3s}
.svc-row:hover .arrow{background:var(--forest); color:var(--paper); border-color:var(--forest)}
.svc-row .arrow svg{width:15px; height:15px}
@media(max-width:760px){ .svc-row{grid-template-columns:44px 1fr; gap:12px} .svc-row p{grid-column:2} .svc-row .arrow{display:none} }
.svc-note{margin-top:44px; display:flex; gap:16px; align-items:flex-start; background:rgba(255,255,255,.6);
  border:1px solid var(--hair); border-radius:var(--rad); padding:28px 32px}
.svc-note .dot{flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--leaf); margin-top:9px; box-shadow:0 0 0 5px rgba(126,156,47,.18); animation:pulse 2.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(126,156,47,.05)}}
.svc-note p{font-size:.95rem; color:#2d3a2a; font-weight:380}
.svc-note strong{color:var(--ink); font-weight:580}
.sec-head{max-width:660px; margin-bottom:56px}
.sec-head h2{font-size:clamp(2rem,3.8vw,2.9rem); margin-bottom:16px}
.sec-head p{color:#2d3a2a; font-weight:380}

/* work — gallery wall */
.work{background:var(--paper-2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.work .ba-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:880px){ .work .ba-grid{grid-template-columns:1fr} }
.ba-card{border-radius:var(--rad); overflow:hidden; box-shadow:var(--shadow); position:relative; background:#fff}
.ba-card img{width:100%; aspect-ratio:587/495; object-fit:cover; transition:transform .7s cubic-bezier(.22,1,.36,1)}
.ba-card:hover img{transform:scale(1.045)}
.ba-card figcaption{position:absolute; left:14px; bottom:14px; font-size:.66rem; font-weight:650; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); background:rgba(246,242,233,.8); border:1px solid rgba(255,255,255,.8);
  padding:.6em 1.2em; border-radius:999px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.work .duo{display:grid; grid-template-columns:1.25fr 1fr; gap:16px; margin-top:16px}
@media(max-width:880px){ .work .duo{grid-template-columns:1fr} }
.work .duo img{border-radius:var(--rad); box-shadow:var(--shadow); width:100%; height:100%; object-fit:cover; aspect-ratio:16/10}

/* why — linen letter */
.why{background:var(--paper)}
.why .letter{max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--hair); border-radius:var(--rad);
  padding:64px 68px; box-shadow:var(--shadow); position:relative}
@media(max-width:680px){ .why .letter{padding:40px 28px} }
.why .letter::before{content:''; position:absolute; inset:10px; border:1px solid rgba(160,122,30,.25); border-radius:18px; pointer-events:none}
.why h2{font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:22px}
.why p{color:#2d3a2a; margin-bottom:16px; font-weight:380}
.why .standard{margin-top:30px; display:flex; gap:10px; flex-wrap:wrap}
.std{font-family:'Fraunces',serif; font-style:italic; font-size:1.02rem; padding:.55em 1.4em; border-radius:999px;
  border:1px solid rgba(160,122,30,.4); color:var(--gold); background:rgba(160,122,30,.05)}

/* faq */
.faq-list{max-width:780px; margin:0 auto}
.faq{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center;
  padding:24px 4px; font-family:'Fraunces',serif; font-size:1.14rem; font-weight:470}
.faq summary::-webkit-details-marker{display:none}
.faq summary .x{flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1px solid var(--hair);
  display:grid; place-items:center; font-size:1rem; font-weight:300; color:#2d3a2a; transition:transform .3s, background .3s, color .3s}
.faq[open] summary .x{transform:rotate(45deg); background:var(--forest); color:var(--paper); border-color:var(--forest)}
.faq .a{padding:0 4px 26px; color:#2d3a2a; max-width:64ch; font-weight:380}

/* quote — forest card on paper */
.quote{background:var(--paper-2); border-top:1px solid var(--hair)}
.quote .qcard{background:var(--forest-deep); color:var(--paper); border-radius:34px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; box-shadow:var(--shadow); position:relative}
@media(max-width:880px){ .quote .qcard{grid-template-columns:1fr} }
.quote .qleft{padding:60px 56px; position:relative}
@media(max-width:680px){ .quote .qleft{padding:40px 28px} }
.quote .qleft .bgleaf{position:absolute; inset:0; background:url('img/eden/leaf.webp') center/cover; opacity:.32}
.quote .qleft > *{position:relative}
.quote h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:16px}
.quote h2 em{color:var(--leaf-bright)}
.quote .sub{color:rgba(246,242,233,.85); font-weight:380}
.quote .kicker{color:var(--leaf-bright)}
.qform{padding:48px 46px; background:rgba(255,255,255,.04); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
@media(max-width:680px){ .qform{padding:36px 26px} }
.qform label{display:block; font-size:.66rem; font-weight:650; letter-spacing:.22em; text-transform:uppercase; color:rgba(246,242,233,.5); margin:0 0 7px}
.qform label .opt,.hv-form label .opt{font-weight:500; letter-spacing:.04em; text-transform:none; opacity:.6}
.qform input,.qform textarea{width:100%; margin-bottom:15px; padding:.8em 1em; border-radius:13px;
  border:1px solid rgba(255,255,255,.16); background:rgba(12,20,16,.5); color:var(--paper); font:inherit; font-size:.94rem}
.qform input::placeholder,.qform textarea::placeholder{color:rgba(246,242,233,.3)}
.qform input:focus,.qform textarea:focus{outline:2px solid var(--leaf-bright); outline-offset:1px}
.seg{display:flex; background:rgba(12,20,16,.5); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:4px; margin-bottom:15px}
.seg button{flex:1; border:none; background:transparent; color:rgba(246,242,233,.6); font:inherit; font-weight:600; font-size:.88rem; padding:.6em; border-radius:999px; cursor:pointer; transition:background .25s,color .25s}
.seg button.sel{background:var(--leaf-bright); color:var(--forest-deep)}
.qform .btn{width:100%; justify-content:center; background:var(--leaf-bright); color:var(--forest-deep)}
.qform .btn:hover{background:#b8d949}
.thanks{text-align:center; padding:30px 6px; color:#fff}
.thanks h3{color:#fff}
.thanks p{color:rgba(255,255,255,.88)}
.thanks .seal{width:54px; height:54px; margin:0 auto 18px; border-radius:50%; background:var(--leaf-bright); color:var(--forest-deep); display:grid; place-items:center}
.thanks .seal svg{width:26px; height:26px}

/* footer */
footer{background:var(--forest-deep); color:rgba(246,242,233,.55); padding:70px 0 48px; font-size:.9rem}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; margin-bottom:46px}
@media(max-width:760px){ footer .cols{grid-template-columns:1fr} }
footer .flogo{height:50px; width:auto; margin-bottom:18px}
footer .blurb{color:rgba(246,242,233,.6); font-weight:380}
footer h4{font-size:.66rem; font-weight:650; letter-spacing:.3em; text-transform:uppercase; color:rgba(246,242,233,.35); margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px; display:flex; align-items:center; gap:.6em}
footer li svg{width:12px; height:12px; color:var(--leaf-bright); flex:0 0 auto}
.foot-base{border-top:1px solid rgba(246,242,233,.12); padding-top:26px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-size:.78rem}
.disclaimer{font-size:.72rem; color:rgba(246,242,233,.28); max-width:64ch; margin-top:20px}
.built-by{display:inline-flex; align-items:center; gap:.55em; font-size:.7rem; font-weight:600; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(246,242,233,.4); text-decoration:none; opacity:.85; transition:opacity .3s}
.built-by b{color:rgba(246,242,233,.72); font-weight:700; letter-spacing:.22em}
.built-by:hover{opacity:1}

/* ============================================================
   v2 feedback additions — team, MVV, accreditations, per-service
   sections (3-step process + FAQs), locations by council,
   education & news, reviews band. Same Garden Room system.
   ============================================================ */

/* services index rows are now anchor links */
a.svc-row{text-decoration:none}

/* team grid */
.team-block{margin-top:96px}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.team-card{background:#fff; border:1px solid var(--hair); border-radius:var(--rad); overflow:hidden;
  box-shadow:0 18px 48px -34px rgba(19,35,26,.35)}
.team-card.wide{grid-column:span 2}
.team-card.full{grid-column:1/-1}
.tphoto{aspect-ratio:4/3; background:var(--paper-2); position:relative; overflow:hidden}
.tphoto.tall{aspect-ratio:21/9}
.tphoto img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.team-card:hover .tphoto img{transform:scale(1.04)}
.tphoto.ph{display:grid; place-items:center; background:
  repeating-linear-gradient(-45deg, rgba(29,42,32,.035) 0 12px, transparent 12px 24px), var(--paper-2)}
.tphoto.ph span{font-size:.68rem; font-weight:650; letter-spacing:.22em; text-transform:uppercase;
  color:#3d4a39; background:rgba(255,255,255,.75); border:1px solid var(--hair);
  border-radius:999px; padding:.7em 1.4em; text-align:center; max-width:85%}
.team-card figcaption{padding:16px 20px 18px}
.team-card figcaption strong{display:block; font-family:'Fraunces',Georgia,serif; font-weight:470; font-size:1.12rem; color:var(--ink)}
.team-card figcaption span{font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
@media(max-width:880px){
  .team-grid{grid-template-columns:1fr 1fr}
  .team-card.wide{grid-column:1/-1}
}
@media(max-width:560px){
  .team-grid{grid-template-columns:1fr}
  .tphoto.tall{aspect-ratio:4/3}
}

/* mission · vision · values */
.mvv-sec{background:var(--paper-2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.mvv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.mvv-card{background:#fff; border:1px solid var(--hair); border-radius:var(--rad); padding:34px 32px;
  box-shadow:0 18px 48px -34px rgba(19,35,26,.3)}
.mvv-tag{display:inline-block; font-family:'Fraunces',serif; font-style:italic; font-size:1.05rem; color:var(--gold);
  border-bottom:1px solid rgba(160,122,30,.4); padding-bottom:6px; margin-bottom:16px}
.mvv-card p{color:#2d3a2a; font-weight:380; font-size:.96rem}
@media(max-width:880px){ .mvv-grid{grid-template-columns:1fr} }

/* why choose eden */
.why-eden{margin-top:64px; display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start;
  background:#fff; border:1px solid var(--hair); border-radius:var(--rad); padding:54px 52px; box-shadow:var(--shadow)}
.why-eden h3{font-size:clamp(1.6rem,3vw,2.1rem); font-weight:450; margin-bottom:14px}
.why-eden h3 em{font-style:italic; color:var(--leaf)}
.we-sub{color:#2d3a2a; font-weight:380; font-size:.95rem}
.we-list{list-style:none}
.we-list li{display:flex; gap:20px; padding:18px 0; border-bottom:1px solid var(--hair)}
.we-list li:last-child{border-bottom:none}
.we-n{font-family:'Fraunces',serif; font-style:italic; font-size:1.1rem; color:var(--gold); flex:0 0 36px}
.we-list strong{display:block; font-family:'Fraunces',serif; font-weight:480; font-size:1.08rem; margin-bottom:4px}
.we-list p{color:#2d3a2a; font-size:.92rem; font-weight:380}
@media(max-width:880px){ .why-eden{grid-template-columns:1fr; gap:24px; padding:38px 28px} }

/* accreditations row */
.accreds{margin-top:56px; text-align:center}
.accreds .label{font-size:.66rem; font-weight:650; letter-spacing:.34em; text-transform:uppercase; color:#4a5445; margin-bottom:24px}
.accred-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center}
.accred.ph{display:inline-flex; align-items:center; justify-content:center; min-width:170px; height:64px;
  border:1px dashed rgba(29,42,32,.25); border-radius:16px; background:rgba(255,255,255,.55);
  font-size:.66rem; font-weight:650; letter-spacing:.22em; text-transform:uppercase; color:#3d4a39}
@media(max-width:560px){ .accred.ph{min-width:46%} }

/* per-service detail sections */
.svc-detail{border-top:1px solid var(--hair)}
.svc-detail.alt{background:var(--paper-2)}
.svcd-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center; margin-bottom:64px}
.svcd-grid h2{font-size:clamp(2rem,3.8vw,2.9rem); margin-bottom:20px}
.svcd-grid p{color:#2d3a2a; font-weight:380; margin-bottom:16px}
.svcd-grid p strong{color:var(--ink); font-weight:580}
.svcd-photo{position:relative}
.svcd-photo img{border-radius:var(--rad); box-shadow:var(--shadow); width:100%; aspect-ratio:4/3; object-fit:cover}
.svcd-photo figcaption{position:absolute; left:14px; bottom:14px; font-size:.66rem; font-weight:650; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); background:rgba(246,242,233,.85); border:1px solid rgba(255,255,255,.8);
  padding:.6em 1.2em; border-radius:999px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
@media(max-width:880px){ .svcd-grid{grid-template-columns:1fr; gap:36px}
  .svcd-grid .svcd-photo{order:2} }

/* numbered 3-step process */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:step; margin-bottom:64px}
/* when .steps is the LAST thing in its section, drop the bottom margin so it doesn't
   stack with the section's 120px bottom padding (was a ~184px empty gap) */
.steps:last-child{margin-bottom:0}
.steps.mtce-why{grid-template-columns:repeat(4,1fr)}
.step{background:rgba(255,255,255,.65); border:1px solid var(--hair); border-radius:var(--rad); padding:30px 28px; position:relative}
.svc-detail.alt .step{background:#fff}
.step-n{display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--forest); color:var(--leaf-bright); font-family:'Fraunces',serif; font-style:italic;
  font-size:1.2rem; margin-bottom:18px}
.step h4{font-family:'Fraunces',serif; font-weight:480; font-size:1.18rem; margin-bottom:10px}
.step p{color:#2d3a2a; font-size:.92rem; font-weight:380}
@media(max-width:880px){ .steps,.steps.mtce-why{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .steps,.steps.mtce-why{grid-template-columns:1fr} }

/* per-service FAQs — reuse .faq pattern, narrower band */
.svc-faqs{max-width:780px}
.svc-faqs .label{font-size:.66rem; font-weight:650; letter-spacing:.34em; text-transform:uppercase; color:#4a5445; margin-bottom:8px}
.svc-faqs .faq summary{font-size:1.05rem}

/* locations by council */
.locations{background:var(--paper-2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.council-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.council-card{background:#fff; border:1px solid var(--hair); border-radius:20px; padding:22px 22px 18px;
  box-shadow:0 14px 38px -30px rgba(19,35,26,.35)}
.council-head{display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--hair)}
.council-logo{height:34px; width:auto; max-width:64px; object-fit:contain; filter:grayscale(1) brightness(.45); opacity:.8}
.council-badge{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(126,156,47,.14); border:1px solid rgba(126,156,47,.4);
  font-size:.66rem; font-weight:700; letter-spacing:.06em; color:var(--leaf)}
.council-head h4{font-family:'Fraunces',serif; font-weight:480; font-size:.98rem; line-height:1.25}
.council-card ul{list-style:none}
.council-card li{display:flex; justify-content:space-between; gap:10px; font-size:.88rem; color:#2d3a2a;
  font-weight:420; padding:4px 0}
.council-card li span{color:#4a5445; font-size:.76rem; letter-spacing:.04em}
@media(max-width:1024px){ .council-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:760px){ .council-grid{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .council-grid{grid-template-columns:1fr} }

/* education & news cards */
.news-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.news-card{background:#fff; border:1px solid var(--hair); border-radius:var(--rad); overflow:hidden;
  box-shadow:0 18px 48px -34px rgba(19,35,26,.3); display:flex; flex-direction:column}
.news-thumb{aspect-ratio:16/10; background-size:cover; background-position:center; position:relative}
.news-thumb::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,35,26,.05), rgba(19,35,26,.35))}
.news-tag{position:absolute; left:12px; top:12px; z-index:1; font-size:.62rem; font-weight:650; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); background:rgba(246,242,233,.88); border:1px solid rgba(255,255,255,.8);
  padding:.55em 1.1em; border-radius:999px}
.news-card h4{font-family:'Fraunces',serif; font-weight:480; font-size:1.12rem; padding:18px 22px 0}
.news-card p{color:#2d3a2a; font-size:.88rem; font-weight:380; padding:8px 22px 0; flex:1}
.news-soon{display:inline-block; margin:16px 22px 22px; align-self:flex-start; font-size:.66rem; font-weight:650;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); border:1px dashed rgba(160,122,30,.45);
  border-radius:999px; padding:.55em 1.2em}
@media(max-width:1024px){ .news-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .news-grid{grid-template-columns:1fr} }

/* reviews band */
.reviews{background:var(--paper)}   /* match the section above (#why) so they blend seamlessly */
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.review-card{background:#fff; border:1px solid var(--hair); border-radius:var(--rad); padding:34px 32px;
  box-shadow:0 18px 48px -34px rgba(19,35,26,.3); display:flex; flex-direction:column}
.review-card .stars{color:var(--gold); letter-spacing:.18em; font-size:.92rem; margin-bottom:16px}
.review-card blockquote{font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:1.06rem;
  line-height:1.5; color:var(--ink); flex:1}
.review-card figcaption{margin-top:22px; padding-top:16px; border-top:1px solid var(--hair)}
.review-card figcaption strong{display:block; font-weight:600; font-size:.92rem}
.review-card figcaption span{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#4a5445}
@media(max-width:880px){ .review-grid{grid-template-columns:1fr} }

/* ============================================================
   v3 old-site infusion — leaf hero, dark leaf council band,
   soil work band, sunset story band, bark divider, footer
   direct-enquiry chips + socials. Same Garden Room system.
   ============================================================ */

/* council band — leaf-droplet image break */
.areas-leaf{position:relative; background:var(--forest-deep); border-top:none; border-bottom:none; padding:34px 0 38px}
.areas-leaf .label{margin-bottom:14px}
.al-bg{position:absolute; inset:0; background:url('img/eden/leaf.webp') center/cover}
.al-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,20,16,.62), rgba(12,20,16,.72))}
.areas-leaf .label{position:relative; color:rgba(246,242,233,.75)}
.areas-leaf .marquee{position:relative}
.areas-leaf .marquee img{filter:brightness(0) invert(1); opacity:.85}
.areas-leaf .marquee img:hover{opacity:1}
@media(max-width:680px){ .areas-leaf{padding:28px 0 30px} .areas-leaf .marquee img{height:38px} .areas-leaf .marquee .set{gap:56px; padding-right:56px} }

/* story — warm sunset image band with framed letter card */
.story-sunset{position:relative; background:var(--forest-deep); overflow:hidden}
.ss-bg{position:absolute; inset:0; background:url('img/eden/sunset.webp') center/cover}
.ss-veil{position:absolute; inset:0; background:linear-gradient(105deg, rgba(12,20,16,.66) 0%, rgba(12,20,16,.34) 55%, rgba(12,20,16,.55) 100%)}
.ss-wrap{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:stretch}
.ss-card{background:rgba(246,242,233,.94); border:1px solid rgba(255,255,255,.7); border-radius:var(--rad);
  padding:56px 54px; box-shadow:var(--shadow); position:relative}
.ss-card::before{content:''; position:absolute; inset:10px; border:1px solid rgba(160,122,30,.3); border-radius:18px; pointer-events:none}
.ss-card h2{font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:24px}
.ss-card p{color:#2d3a2a; margin-bottom:16px; font-weight:380}
.ss-card p:last-child{margin-bottom:0}
.ss-card p strong{color:var(--ink); font-weight:580}
.ss-photo{position:relative; display:flex}
.ss-photo img{border-radius:var(--rad); box-shadow:var(--shadow); width:100%; height:100%; min-height:460px; object-fit:cover;
  border:8px solid rgba(246,242,233,.85)}
.ss-photo figcaption{position:absolute; left:18px; bottom:18px; font-size:.66rem; font-weight:650; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); background:rgba(246,242,233,.88); border:1px solid rgba(255,255,255,.8);
  padding:.6em 1.2em; border-radius:999px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
@media(max-width:880px){ .ss-wrap{grid-template-columns:1fr; gap:40px; align-items:start} .ss-card{padding:40px 28px}
  .ss-photo img{height:auto; min-height:0; aspect-ratio:4/3} }
.team-sec{padding-top:110px}
.team-sec .team-block{margin-top:0}

/* work — soil/mulch dark image break */
.work-soil{position:relative; background:var(--forest-deep); border-top:none; border-bottom:none; overflow:hidden}
.ws-bg{position:absolute; inset:0; background:url('img/eden/soil-2.webp') center/cover}
.ws-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,20,16,.78), rgba(12,20,16,.62) 50%, rgba(12,20,16,.8))}
.ws-wrap{position:relative}
.work-soil .sec-head h2{color:var(--paper)}
.work-soil .sec-head h2 em{color:var(--leaf-bright)}
.work-soil .sec-head p{color:rgba(246,242,233,.7)}
.work-soil .ba-card{box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.work-soil .duo img{box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}

/* bark texture divider band */
.bark-band{position:relative; background:var(--forest-deep); padding:88px 0; overflow:hidden; text-align:center}
.bb-bg{position:absolute; inset:0; background:url('img/eden/tex-bark.webp') center/cover}
.bb-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,20,16,.6), rgba(12,20,16,.72))}
.bark-band .wrap{position:relative}
.bb-line{font-family:'Fraunces',serif; font-size:clamp(1.2rem,2.6vw,1.7rem); font-weight:420;
  letter-spacing:.04em; color:rgba(246,242,233,.85)}
.bb-line em{font-style:italic; color:var(--leaf-bright)}
@media(max-width:680px){ .bark-band{padding:60px 0} }

/* footer — direct enquiries + socials */
.enquiries{border-top:1px solid rgba(246,242,233,.12); padding:34px 0 8px; margin-bottom:30px}
.enq-grid{display:flex; gap:12px; flex-wrap:wrap}
.enq-chip{display:inline-flex; align-items:center; gap:.6em; padding:.7em 1.3em; border-radius:999px;
  border:1px solid rgba(246,242,233,.18); background:rgba(246,242,233,.05); color:rgba(246,242,233,.75);
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-decoration:none;
  transition:background .3s, color .3s, border-color .3s}
.enq-chip:hover{background:rgba(168,201,47,.14); border-color:rgba(168,201,47,.5); color:var(--paper)}
.enq-chip svg{width:14px; height:14px; color:var(--leaf-bright); flex:0 0 auto}
.follow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:24px}
.follow-label{font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,242,233,.45)}
.soc{display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(246,242,233,.18); color:rgba(246,242,233,.65); transition:background .3s, color .3s, border-color .3s}
.soc:hover{background:rgba(168,201,47,.14); border-color:rgba(168,201,47,.5); color:var(--paper)}
.soc svg{width:17px; height:17px}
@media(max-width:560px){ .enq-grid{gap:8px} .enq-chip{padding:.6em 1em; font-size:.74rem} }

/* ============================================================
   v4 polish — accreditations, gallery strip, utility tokens
   ============================================================ */

/* real accreditation logos on linen cards */
.accred-card{display:inline-flex; align-items:center; justify-content:center; min-width:170px; height:84px; padding:0 26px;
  background:#fff; border:1px solid var(--hair); border-radius:16px; box-shadow:0 14px 34px -22px rgba(19,35,26,.25)}
.accred-card img{height:46px; width:auto; max-width:160px; object-fit:contain}
.accred-text{font-size:.74rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:#2d3a2a;
  background:var(--paper-2); text-align:center; line-height:1.5; max-width:220px}
@media(max-width:560px){
  .accred-card{min-width:46%; height:72px; padding:0 16px}
  .accred-card img{height:38px}
  .accred-text{font-size:.66rem}
}

/* editorial gallery strip */
.gal-strip{padding:64px 0; background:var(--paper-2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.gal-strip .label{text-align:center; font-size:.66rem; font-weight:650; letter-spacing:.34em; text-transform:uppercase; color:#4a5445; margin-bottom:30px}
.gal-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch}
.gal-item{position:relative; margin:0}
.gal-item img{width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; border-radius:18px; box-shadow:var(--shadow)}
.gal-item.tall img{aspect-ratio:3/4.6}
.gal-item figcaption{position:absolute; left:12px; bottom:12px; font-size:.62rem; font-weight:650; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper); background:rgba(19,35,26,.55); padding:.45em .9em; border-radius:999px; backdrop-filter:blur(6px)}
@media(max-width:760px){
  .gal-strip{padding:48px 0}
  .gal-row{grid-template-columns:repeat(2,1fr); gap:12px}
  .gal-item img, .gal-item.tall img{aspect-ratio:1/1}
}

/* utility tokens replacing inline styles */
.btn-gap{margin-top:8px}
.section.tight-top{padding-top:0}
.sec-head.center{margin-inline:auto; text-align:center}

/* news thumbnails — texture backgrounds as classes */
.th-linen{background-image:url('img/eden/tex-linen.webp')}
.th-bark{background-image:url('img/eden/tex-bark.webp')}
.th-clay{background-image:url('img/eden/tex-clay.webp')}
.th-mulch{background-image:url('img/eden/tex-mulch.webp')}

/* ============================================================
   V3 — Ed's consolidation brief (15 Jun 2026)
   Built on the eden-2 "Garden Room" light system. Changes:
   • SOLID always-visible nav (never hides, never transparent),
     dark logo enlarged, dropdowns (Services / Company / Blog).
   • Ian-Barker-style ROTATING photo hero + floating quote card.
   • "Why Choose Eden" stats band (2000+ jobs, ~10yrs, 98%, 4.8★).
   • Sticky mobile dock; numbered sliding reviews carousel.
   • Accreditations: HIA removed, VBA Reg. Building Practitioner in.
   ============================================================ */

/* ---- NAV (v4): SPLIT floating nav — logo bubble + menu bubble float apart at top,
       then MERGE into one standard solid bar (like v3) on scroll. ---- */
.nav{position:fixed; inset:0 0 auto; z-index:60}
.nav.hide{transform:none !important}            /* override eden2 hide-on-scroll */
/* At top: .nav-inner is a FULLY TRANSPARENT wrapper with a gap, so its children float apart.
   Reset the eden2-base blur/border/shadow so there's NO wash across the bar — only the
   logo and the menu bubble carry any background. */
.nav-inner{max-width:none; width:100%; margin:0;
  display:flex; align-items:center; gap:16px; flex-wrap:nowrap;
  padding:14px 28px; background:transparent !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:none !important; border-radius:0; box-shadow:none !important;
  transition:padding .8s cubic-bezier(.22,1,.36,1), gap .8s, background .8s}
/* shared bubble look (dark menu background) — menu bubble only now (logo floats bare) */
.nav-bar{background:rgba(12,20,16,.94);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(246,242,233,.12); box-shadow:0 16px 38px -24px rgba(0,0,0,.55);
  transition:background .8s ease, border-color .8s ease, box-shadow .8s ease, border-radius .8s ease, padding .8s cubic-bezier(.22,1,.36,1)}
/* the logo (left, floats on its own — NO background bubble, just the mark) */
.nav .logo{display:flex; align-items:center; flex:0 0 auto;
  background:transparent; border:none; box-shadow:none; backdrop-filter:none;
  border-radius:0; padding:4px 8px;
  transition:padding .8s cubic-bezier(.22,1,.36,1)}
.nav .logo:hover{background:transparent}
.nav .logo img{height:112px; width:auto; transition:height .8s cubic-bezier(.22,1,.36,1); display:block;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.45))}

/* gold + white sheen that sweeps across the logo once on page load.
   The overlay is masked by the logo image itself, so the shine paints only
   on the mark's silhouette (leaves + wordmark), never a rectangle. */
.nav .logo{position:relative; overflow:hidden}
.nav .logo .shine{position:absolute; inset:4px 8px; pointer-events:none; z-index:2;
  -webkit-mask:url(/assets/img/eden/logo-light.png) center/contain no-repeat;
          mask:url(/assets/img/eden/logo-light.png) center/contain no-repeat;
  background:linear-gradient(105deg,
      transparent 30%,
      rgba(245,222,140,.0) 40%,
      rgba(245,222,140,.85) 47%,   /* gold */
      rgba(255,255,255,.95) 50%,   /* white peak */
      rgba(245,222,140,.85) 53%,   /* gold */
      rgba(245,222,140,.0) 60%,
      transparent 70%);
  background-size:260% 100%; background-position:160% 0;
  opacity:0; mix-blend-mode:screen}
.nav .logo .shine.play{animation:logoShine 3.2s cubic-bezier(.5,0,.2,1) .5s both}
@keyframes logoShine{
  0%{background-position:160% 0; opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{background-position:-60% 0; opacity:0}
}
@media(prefers-reduced-motion:reduce){ .nav .logo .shine{display:none} }
/* the menu bubble (right, holds links + CTAs, floats on its own) */
.nav-bar{flex:1 1 auto; display:flex; align-items:center; gap:24px;
  border-radius:22px; padding:10px 16px 10px 26px; min-width:0}

/* ON SCROLL: collapse the gap + side padding, merge backgrounds → one solid bar.
   Top edge is full-bleed solid (square); only the BOTTOM corners are rounded. */
.nav.scrolled .nav-inner{padding:0; gap:0; background:rgba(12,20,16,.98) !important;
  backdrop-filter:blur(18px) saturate(1.3) !important; -webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
  border-radius:0 0 20px 20px;   /* NO overflow:hidden — it clips the dropdowns */
  box-shadow:0 16px 40px -22px rgba(0,0,0,.65) !important; border-bottom:1px solid rgba(246,242,233,.12) !important}
.nav.scrolled .logo{border-radius:0; padding:5px 18px 5px 40px;
  background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none}
.nav.scrolled .logo img{height:76px; filter:none}
.nav.scrolled .nav-bar{border-radius:0; padding:6px 40px 6px 16px;
  background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none}

.nav-links{display:flex; gap:6px; margin-left:auto; align-items:center; font-size:.86rem; font-weight:560; letter-spacing:.02em}
.nav-links > a, .nav-item > a{display:inline-flex; align-items:center; gap:.35em; color:rgba(246,242,233,.90);
  text-decoration:none; transition:color .25s; padding:.55em .8em; border-radius:999px; white-space:nowrap}
.nav-links > a:hover, .nav-item > a:hover{color:var(--paper)}
.nav-links a.active{color:var(--leaf-bright)}
.nav-item{position:relative}
.nav-item > a .chev{width:12px; height:12px; opacity:.55; transition:transform .25s}
.nav-item:hover > a .chev{transform:rotate(180deg)}
/* keep the nav containers from clipping the dropdowns (the merged bar / bubble can't hide them) */
.nav-inner, .nav-bar, .nav-links, .nav-item{overflow:visible}
.dropdown{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px);
  z-index:80;   /* above the nav bar + page */
  min-width:248px; background:#fff; border:1px solid var(--hair); border-radius:18px; padding:10px;
  opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s;
  box-shadow:0 30px 70px -30px rgba(19,35,26,.45)}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.dropdown a{display:flex; flex-direction:column; gap:2px; padding:11px 15px; border-radius:12px;
  color:#4a5a48; transition:background .2s, color .2s}
.dropdown a:hover{background:rgba(126,156,47,.1); color:var(--ink)}
.dropdown a strong{font-weight:600; font-size:.88rem; color:var(--ink); font-family:'Inter',sans-serif}
.dropdown a span{font-size:.74rem; color:#6f7868}
.nav-cta-group{display:flex; align-items:center; gap:9px; flex:0 0 auto; white-space:nowrap}
/* COMPACT nav buttons — keep them from clipping at the right edge of the menu bubble */
.nav-cta-group .btn{padding:.58em 1.15em; font-size:.82rem; font-weight:600; white-space:nowrap}
/* keep the "Get a quote" button readable on the dark bar; bright leaf fill */
.nav .btn-forest{background:var(--leaf-bright); color:var(--forest-deep)}
.nav .btn-forest:hover{background:#b8d949}
/* emergency button on the DARK nav bar — brighter red so it pops & reads */
.nav .btn-emergency{background:rgba(224,53,44,.22); color:#ff8378; border:1px solid rgba(224,53,44,.6); padding:.58em 1.05em}
.nav .btn-emergency:hover{background:#ce2e26; color:#fff}
/* push page content below the now-solid bar */
body{padding-top:0}
.hero, .phero, .article-hero{scroll-margin-top:96px}
@media(max-width:1080px){
  .nav-links{display:none}
  .nav-cta-group{margin-left:auto}
  /* menu bubble shrinks to fit its contents (no wide empty pill) + sits on the right */
  .nav-bar{flex:0 0 auto; margin-left:auto; gap:12px; padding:8px 12px}
  .nav.scrolled .nav-bar{padding:6px 22px 6px 12px}
}
@media(max-width:600px){
  .nav-inner{padding:10px 16px; gap:12px}
  .nav .logo{padding:4px 6px; border-radius:0}
  .nav .logo img{height:72px}
  .nav.scrolled .logo{padding:6px 14px}
  .nav.scrolled .logo img{height:62px}
  .nav-bar{border-radius:16px; padding:6px 8px}
  .nav.scrolled .nav-bar{padding:6px 16px}
  .nav-cta-group .btn{display:none}
}

/* burger + drawer (dark-bar burger, light drawer overlay) */
.burger{display:none; width:44px; height:44px; border-radius:50%; border:1px solid rgba(246,242,233,.25);
  background:rgba(246,242,233,.08); align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto}
.burger svg{width:20px; height:20px; color:var(--paper)}
@media(max-width:1080px){ .burger{display:flex} }
.drawer{position:fixed; inset:0; z-index:70; background:rgba(246,242,233,.99); backdrop-filter:blur(20px);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.22,1,.36,1); padding:90px 28px 40px; overflow-y:auto}
.drawer.open{transform:none}
.drawer-close{position:absolute; top:24px; right:22px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--hair); background:rgba(255,255,255,.7); color:var(--ink); cursor:pointer; display:grid; place-items:center}
.drawer-close svg{width:22px; height:22px}
.drawer a{display:block; padding:14px 6px; font-family:'Fraunces',serif; font-size:1.45rem; border-bottom:1px solid var(--hair); color:var(--ink)}
.drawer a.sub{font-family:'Inter',sans-serif; font-size:.98rem; padding:11px 20px; color:var(--ink-soft); border-bottom:none}
.drawer .grp{font-size:.66rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:22px 0 4px; padding:0 6px}
/* Drawer CTAs match the DESKTOP nav buttons: lime "Get a quote" (dark text),
   compact red Emergency — Inter font (not the drawer's serif), normal weight. */
.drawer .btn{display:flex; align-items:center; width:100%; justify-content:center; text-align:center; margin-top:14px; border-bottom:none;
  font-family:'Inter',sans-serif; font-size:.95rem; font-weight:600; letter-spacing:.01em; padding:.95em 1.4em}
.drawer .btn-forest{background:var(--leaf-bright); color:var(--forest-deep)}
.drawer .btn-forest:hover{background:#b8d949}
.drawer .btn-emergency{background:rgba(206,46,38,.1); color:#b3251e; border:1px solid rgba(206,46,38,.4)}
.drawer .btn-emergency:hover{background:#ce2e26; color:#fff}
/* keep the emergency LABEL visible in the drawer (only the cramped nav bar hides it) */
.drawer .btn-emergency span{display:inline !important}
.drawer .btn-emergency svg{width:15px; height:15px}

/* ---- HERO: rotating photos (Ian Barker), quote card ---- */
.hero-v3{position:relative; min-height:90vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  padding:172px 0 64px; background:var(--forest-deep)}   /* extra top room so the tall quote form clears the floating nav */
.hero-v3 .slides{position:absolute; inset:0}
.hero-v3 .slide{position:absolute; inset:0; background-position:center; background-size:cover;
  opacity:0; transform:scale(1.06); transition:opacity 1.5s ease, transform 7s ease}
.hero-v3 .slide.on{opacity:1; transform:scale(1)}
.hero-v3 .hv-veil{position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(12,20,16,.62) 0%, rgba(12,20,16,.40) 28%, rgba(12,20,16,.12) 52%, rgba(12,20,16,0) 70%),
    linear-gradient(180deg, rgba(12,20,16,.34) 0%, rgba(12,20,16,.12) 40%, rgba(12,20,16,.62) 100%)}
@media(max-width:980px){ .hero-v3 .hv-veil{
  background:
    linear-gradient(90deg, rgba(12,20,16,.55) 0%, rgba(12,20,16,.30) 50%, rgba(12,20,16,.30) 100%),
    linear-gradient(180deg, rgba(12,20,16,.34) 0%, rgba(12,20,16,.12) 40%, rgba(12,20,16,.62) 100%)} }
.hero-v3 .wrap{position:relative; z-index:2; width:100%; display:grid; grid-template-columns:1.25fr .75fr; gap:54px; align-items:center}
@media(max-width:980px){ .hero-v3 .wrap{grid-template-columns:1fr; gap:34px} }
.hv-copy{color:var(--paper)}
.hv-rate{display:inline-flex; align-items:center; gap:.6em; margin-bottom:22px; padding:.5em 1.05em .5em .65em;
  border-radius:999px; background:rgba(246,242,233,.14); border:1px solid rgba(246,242,233,.3); font-size:.8rem; color:var(--paper); backdrop-filter:blur(10px)}
.hv-rate .stars{color:#f0c14b; letter-spacing:.08em}
.hv-rate b{font-weight:700}
.hero-v3 h1{font-size:clamp(2.7rem,6.2vw,5rem); color:var(--paper); max-width:13ch; line-height:1.02}
.hero-v3 h1 em{color:var(--leaf-bright); font-style:italic}
.hero-v3 .lede{margin:22px 0 30px; max-width:46ch; font-size:1.1rem; color:rgba(246,242,233,.84); font-weight:380}
.hv-ctas{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
/* Hero PRIMARY cta = lime accent (highest contrast on the dark photo); the
   secondary "See What We Do" stays the glass/paper button. */
.hv-ctas .btn-forest{background:var(--leaf-bright); color:var(--forest-deep)}
.hv-ctas .btn-forest:hover{background:#b8d949}
.hv-dots{position:absolute; right:40px; bottom:26px; z-index:3; display:flex; gap:9px}
.hv-dots button{width:9px; height:9px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:rgba(246,242,233,.4); transition:background .3s, transform .3s}
.hv-dots button.on{background:var(--leaf-bright); transform:scale(1.25)}
@media(max-width:980px){ .hv-dots{right:20px; bottom:16px} }

/* hero floating quote card (from v2) */
/* GLASSY hero quote form — transparent frosted panel over the photo */
.hv-form{background:rgba(14,22,17,.42); border:1px solid rgba(246,242,233,.22); border-radius:24px;
  padding:28px 28px 30px; box-shadow:0 30px 70px -28px rgba(0,0,0,.6);
  backdrop-filter:blur(22px) saturate(1.25); -webkit-backdrop-filter:blur(22px) saturate(1.25)}
.hv-form .fhead{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--paper); margin-bottom:4px}
.hv-form .fsub{font-size:.85rem; color:rgba(246,242,233,.7); margin-bottom:18px; font-weight:380}
.hv-form label{display:block; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,242,233,.55); margin:0 0 6px}
.hv-form input,.hv-form textarea{width:100%; margin-bottom:13px; padding:.75em 1em; border-radius:12px;
  border:1px solid rgba(246,242,233,.22); background:rgba(255,255,255,.07); color:var(--paper); font:inherit; font-size:.93rem}
.hv-form input::placeholder,.hv-form textarea::placeholder{color:rgba(246,242,233,.4)}
.hv-form input:focus,.hv-form textarea:focus{outline:2px solid var(--leaf-bright); outline-offset:1px; background:rgba(255,255,255,.1)}
.hv-form .seg{display:flex; background:rgba(14,22,17,.4); border:1px solid rgba(246,242,233,.22); border-radius:999px; padding:4px; margin-bottom:13px}
.hv-form .seg button{flex:1; border:none; background:transparent; color:rgba(246,242,233,.7); font:inherit; font-weight:600; font-size:.87rem; padding:.55em; border-radius:999px; cursor:pointer; transition:background .25s,color .25s}
.hv-form .seg button.sel{background:var(--leaf-bright); color:var(--forest-deep)}
.hv-form .btn{width:100%; justify-content:center; background:var(--leaf-bright); color:var(--forest-deep)}
.hv-form .btn:hover{background:#b8d949}
.hv-form .micro{font-size:.72rem; color:rgba(246,242,233,.5); text-align:center; margin-top:10px}

/* ---- WHY CHOOSE EDEN — combined stats + reasons ---- */
.whychoose{background:var(--paper)}
.stat-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-bottom:60px;
  background:#fff; border:1px solid var(--hair); border-radius:var(--rad); overflow:hidden; box-shadow:var(--shadow)}
.stat-cell{padding:34px 22px; text-align:center; border-right:1px solid var(--hair)}
.stat-cell:last-child{border-right:none}
.stat-cell .n{font-family:'Fraunces',serif; font-style:italic; font-size:2.2rem; color:var(--leaf); line-height:1}
.stat-cell .n small{font-size:1.1rem}
.stat-cell .t{font-size:.7rem; font-weight:650; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:8px}
@media(max-width:880px){ .stat-strip{grid-template-columns:repeat(2,1fr)}
  .stat-cell{border-bottom:1px solid var(--hair)} .stat-cell:nth-child(2n){border-right:none}
  .stat-cell:last-child{grid-column:1/-1; border-bottom:none} }

/* ---- services grid (cards w/ Explore, from eden-full, light skin) ---- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:920px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .svc-grid{grid-template-columns:1fr} }
.svc-card{display:block; border-radius:var(--rad); overflow:hidden; background:#fff; border:1px solid var(--hair);
  text-decoration:none; color:inherit; transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .4s, box-shadow .4s;
  box-shadow:0 18px 48px -36px rgba(19,35,26,.35)}
.svc-card:hover{transform:translateY(-5px); border-color:rgba(126,156,47,.5); box-shadow:var(--shadow)}
.svc-card .pic{aspect-ratio:16/11; overflow:hidden}
.svc-card .pic img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1)}
.svc-card:hover .pic img{transform:scale(1.06)}
.svc-card .body{padding:24px 24px 26px}
.svc-card .body h3{font-size:1.32rem; font-weight:470; margin-bottom:8px}
.svc-card .body p{font-size:.9rem; color:var(--ink-soft); font-weight:380; margin-bottom:14px}
.svc-card .more{display:inline-flex; align-items:center; gap:.4em; font-size:.78rem; font-weight:650; color:var(--leaf)}
.svc-card .more svg{width:1em; height:1em; transition:transform .3s}
.svc-card:hover .more svg{transform:translateX(4px)}
/* domestic & commercial split note under services */
.dc-band{margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:760px){ .dc-band{grid-template-columns:1fr} }
.dc-card{position:relative; border-radius:var(--rad); overflow:hidden; min-height:230px; display:flex; align-items:flex-end;
  color:var(--paper); box-shadow:var(--shadow)}
.dc-card .dc-bg{position:absolute; inset:0; background-position:center; background-size:cover; transition:transform .7s}
.dc-card:hover .dc-bg{transform:scale(1.05)}
.dc-card .dc-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,20,16,.15), rgba(12,20,16,.78))}
.dc-card .dc-body{position:relative; padding:28px 30px}
.dc-card h3{font-size:1.5rem; color:var(--paper); margin-bottom:6px}
.dc-card p{font-size:.9rem; color:rgba(246,242,233,.82); font-weight:380}

/* ---- NUMBERED SLIDING REVIEWS CAROUSEL (from v1) ---- */
.rev-carousel{position:relative; overflow:hidden}
.rev-track{display:flex; gap:18px; transition:transform .6s cubic-bezier(.22,1,.36,1); will-change:transform}
.rev-slide{flex:0 0 calc((100% - 36px)/3); min-width:0}
@media(max-width:880px){ .rev-slide{flex:0 0 calc((100% - 18px)/2)} }
@media(max-width:600px){ .rev-slide{flex:0 0 100%} }
.rev-slide .review-card{height:100%}
.rev-nav{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:34px}
.rev-arrows{display:flex; gap:10px}
.rev-arrows button{width:46px; height:46px; border-radius:50%; border:1px solid var(--hair); background:#fff;
  color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:background .3s, color .3s, border-color .3s}
.rev-arrows button:hover{background:var(--forest); color:var(--paper); border-color:var(--forest)}
.rev-arrows button svg{width:18px; height:18px}
.rev-count{font-family:'Fraunces',serif; font-style:italic; font-size:1.05rem; color:var(--ink-soft)}
.rev-count b{color:var(--leaf); font-style:normal; font-weight:600}

/* ---- VBA circular accreditation badge ---- */
.accred-vba-badge{display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:84px; height:84px; border-radius:50%; background:#fff; border:2px solid var(--leaf);
  box-shadow:0 14px 34px -22px rgba(19,35,26,.3); text-align:center; padding:8px}
.accred-vba-badge .vt{font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; color:var(--forest); line-height:1}
.accred-vba-badge .vs{font-size:.5rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; line-height:1.2}

/* ---- v4: Community partnerships row (CFA partnership + SES sponsorship) ---- */
.partners{margin-top:34px; text-align:center}
.partners .label{font-size:.62rem; font-weight:650; letter-spacing:.32em; text-transform:uppercase; color:#4a5445; margin-bottom:18px}
.partner-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; max-width:760px; margin:0 auto}
.partner-card{display:inline-flex; align-items:center; gap:14px; padding:14px 22px; background:#fff;
  border:1px solid var(--hair); border-radius:18px; box-shadow:0 14px 34px -26px rgba(19,35,26,.3);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s}
.partner-card:hover{transform:translateY(-4px); box-shadow:0 22px 44px -24px rgba(19,35,26,.4)}
.partner-card .pmark{width:46px; height:46px; flex:0 0 46px; overflow:hidden}
.partner-card .pmark svg, .partner-card .pmark img{width:100%; height:100%; display:block; object-fit:contain}
.partner-card .ptext{text-align:left}
.partner-card .ptext strong{display:block; font-family:'Fraunces',serif; font-weight:600; font-size:1rem; color:var(--ink); line-height:1.1}
.partner-card .ptext span{display:block; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px}
@media(max-width:560px){ .partner-card{width:100%; justify-content:center} }

/* ---- v4: emergency minimum call-out fee callout ---- */
.emr-fee{display:inline-flex; align-items:baseline; gap:10px; margin:18px 0 4px; padding:12px 20px;
  background:rgba(224,53,44,.12); border:1px solid rgba(224,53,44,.42); border-radius:14px}
.emr-fee .fee-n{font-family:'Fraunces',serif; font-weight:600; font-size:1.5rem; color:#ff8378; line-height:1}
.emr-fee .fee-t{font-size:.82rem; color:rgba(246,242,233,.86); font-weight:500}
.emr-fee.on-light{background:rgba(224,53,44,.08); border-color:rgba(224,53,44,.3)}
.emr-fee.on-light .fee-n{color:#c5342b}
.emr-fee.on-light .fee-t{color:var(--ink-soft)}

/* ---- emergency strip (light page, dark band) ---- */
.emr-strip{background:linear-gradient(100deg, #2a0f0c, #1c0c0a); border-top:1px solid rgba(206,46,38,.35); border-bottom:1px solid rgba(206,46,38,.35); padding:46px 0}
.emr-strip .wrap{display:flex; gap:26px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.emr-strip h3{font-size:clamp(1.3rem,2.6vw,1.85rem); color:var(--paper)}
.emr-strip h3 em{color:#ff7a6e; font-style:italic}
.emr-strip p{color:rgba(246,242,233,.7); font-size:.95rem; max-width:52ch; font-weight:380}
.emr-strip .btn{background:#ce2e26; color:#fff; white-space:nowrap; box-shadow:0 16px 40px -14px rgba(206,46,38,.6)}
.emr-strip .btn:hover{transform:translateY(-2px); background:#e0352c}

/* ---- sticky mobile dock ---- */
.dock{position:fixed; left:10px; right:10px; bottom:10px; z-index:55; display:none; gap:10px; padding:9px;
  border-radius:999px; background:rgba(246,242,233,.97); backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--hair); box-shadow:0 18px 50px -16px rgba(19,35,26,.5);
  transform:translateY(180%); transition:transform .45s cubic-bezier(.22,1,.36,1)}
.dock.show{transform:none}
.dock .btn{flex:1; justify-content:center; padding:.95em; animation:none; font-size:.9rem}
.dock .btn-forest{background:var(--leaf-bright); color:var(--forest-deep)}
.dock .btn-emergency{background:rgba(206,46,38,.12); color:#b3251e; border:1px solid rgba(206,46,38,.4)}
@media(max-width:680px){ .dock{display:flex} body{padding-bottom:88px} }

/* page hero (interior) — light editorial */
.phero{position:relative; padding:170px 0 70px; overflow:hidden; border-bottom:1px solid var(--hair); background:var(--forest-deep)}
.phero .bg{position:absolute; inset:0; background-position:center; background-size:cover; opacity:.9}
.phero .veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,20,16,.5), rgba(12,20,16,.78))}
.phero .wrap{position:relative; max-width:900px}
.phero h1{font-size:clamp(2.2rem,4.8vw,3.5rem); color:var(--paper); margin-bottom:16px}
.phero h1 em{color:var(--leaf-bright); font-style:italic}
.phero p{color:rgba(246,242,233,.82); font-size:1.06rem; max-width:60ch; font-weight:380}
.crumbs{font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,242,233,.55); margin-bottom:18px}
.crumbs a{color:var(--leaf-bright)} .crumbs span{margin:0 .5em; opacity:.5}

/* prose for blog/article pages */
.prose{max-width:760px; margin:0 auto}
.prose p{margin-bottom:18px; color:var(--ink-soft); font-weight:380}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem); margin:42px 0 16px}
.prose h3{font-size:1.3rem; margin:32px 0 12px}
.prose ul,.prose ol{margin:0 0 18px 1.2em; color:var(--ink-soft)}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink)}
.prose a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--leaf); padding:6px 0 6px 22px; margin:24px 0; font-family:'Fraunces',serif; font-style:italic; font-size:1.2rem; color:var(--ink)}
.prose figure{margin:28px 0}
.prose figure img{border-radius:var(--rad); box-shadow:var(--shadow)}
.prose figcaption{font-size:.78rem; color:var(--ink-faint); margin-top:8px; text-align:center}

/* blog card grid (light) */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:900px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .blog-grid{grid-template-columns:1fr} }
.post-card{display:flex; flex-direction:column; border-radius:var(--rad); overflow:hidden; background:#fff;
  border:1px solid var(--hair); text-decoration:none; color:inherit; box-shadow:0 18px 48px -36px rgba(19,35,26,.35);
  transition:transform .4s, border-color .4s, box-shadow .4s}
.post-card:hover{transform:translateY(-5px); border-color:rgba(126,156,47,.5); box-shadow:var(--shadow)}
.post-card .pic{aspect-ratio:16/10; overflow:hidden}
.post-card .pic img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.post-card:hover .pic img{transform:scale(1.06)}
.post-card .body{padding:22px 22px 26px; display:flex; flex-direction:column; flex:1}
.post-card .cat{font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:10px}
.post-card .body h3{font-size:1.18rem; font-weight:470; margin-bottom:8px; line-height:1.25}
.post-card .body p{font-size:.86rem; color:var(--ink-soft); font-weight:380; margin-bottom:14px; flex:1}
.post-card .meta{font-size:.72rem; color:var(--ink-faint)}

/* final CTA on paper */
.final{background:var(--paper-2); border-top:1px solid var(--hair); text-align:center; padding:100px 0}
.final h2{font-size:clamp(2rem,4.2vw,3rem); margin-bottom:16px}
.final h2 em{font-style:italic; color:var(--leaf)}
.final p{color:var(--ink-soft); max-width:52ch; margin:0 auto 30px; font-weight:380}
.svc-cta{margin-top:34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.btn-ghost{background:rgba(255,255,255,.7); color:var(--ink); border:1px solid var(--hair)}
.btn-ghost:hover{background:#fff}

/* chat widget — light skin override (reuse eden-full structure) */
.chat-fab{position:fixed; right:18px; bottom:18px; z-index:80; display:flex; align-items:center; gap:10px;
  padding:12px 18px 12px 14px; border-radius:999px; border:none; cursor:pointer; background:var(--forest); color:var(--paper);
  font:inherit; font-weight:650; font-size:.9rem; box-shadow:0 18px 44px -14px rgba(19,35,26,.5); transition:transform .3s}
.chat-fab:hover{transform:translateY(-2px) scale(1.02)}
.chat-fab svg{width:22px; height:22px}
.chat-fab .pulse{position:absolute; top:-3px; right:-3px; width:14px; height:14px; border-radius:50%; background:var(--leaf-bright); border:2px solid var(--paper); animation:chatpulse 2s ease-in-out infinite}
@keyframes chatpulse{0%,100%{box-shadow:0 0 0 0 rgba(206,46,38,.5)} 50%{box-shadow:0 0 0 7px rgba(206,46,38,0)}}
.chat-panel{position:fixed; right:18px; bottom:18px; z-index:81; width:380px; max-width:calc(100vw - 36px);
  height:560px; max-height:calc(100vh - 36px); border-radius:22px; overflow:hidden; background:var(--paper);
  border:1px solid var(--hair); box-shadow:0 40px 90px -30px rgba(19,35,26,.5); display:flex; flex-direction:column;
  transform:translateY(20px) scale(.98); opacity:0; visibility:hidden; transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .35s, visibility .35s}
.chat-panel.open{transform:none; opacity:1; visibility:visible}
.chat-head{display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--forest); border-bottom:1px solid rgba(255,255,255,.1)}
.chat-head .ava{width:40px; height:40px; border-radius:50%; flex:0 0 auto; background:var(--leaf-bright); color:var(--forest-deep); display:grid; place-items:center; font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:1.1rem}
.chat-head .who strong{display:block; font-size:.92rem; color:var(--paper); font-family:'Fraunces',serif; font-weight:500}
.chat-head .who span{font-size:.72rem; color:var(--leaf-bright); display:flex; align-items:center; gap:5px}
.chat-head .who span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--leaf-bright); display:inline-block}
.chat-head .x{margin-left:auto; width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:var(--paper); cursor:pointer; display:grid; place-items:center}
.chat-head .x svg{width:18px; height:18px}
.chat-log{flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; background:var(--paper)}
.cmsg{display:flex; gap:9px; align-items:flex-end; max-width:88%}
.cmsg.me{align-self:flex-end}
.cmsg.bot{align-self:flex-start}
.cmsg .cava{width:26px; height:26px; border-radius:50%; flex:0 0 auto; background:var(--forest); color:var(--leaf-bright); display:grid; place-items:center; font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:.8rem}
.cbub{padding:10px 14px; border-radius:16px; font-size:.9rem; line-height:1.5}
.cmsg.bot .cbub{background:#fff; border:1px solid var(--hair); color:var(--ink); border-bottom-left-radius:5px}
.cmsg.me .cbub{background:var(--forest); color:var(--paper); font-weight:500; border-bottom-right-radius:5px}
.cbub a{color:inherit}
.cbub a.cbtn{display:inline-flex; align-items:center; gap:.5em; margin-top:2px; padding:.6em 1.2em; border-radius:999px; background:#ce2e26; color:#fff; font-weight:650; font-size:.85rem; text-decoration:none}
.cbub.typing{display:flex; gap:4px; padding:14px}
.cbub.typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:ctype 1.2s infinite}
.cbub.typing i:nth-child(2){animation-delay:.2s} .cbub.typing i:nth-child(3){animation-delay:.4s}
@keyframes ctype{0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}
.cchips{display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:88%}
.cchip{padding:.5em 1em; border-radius:999px; background:rgba(126,156,47,.12); border:1px solid rgba(126,156,47,.4); color:var(--leaf); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; transition:background .2s}
.cchip:hover{background:rgba(126,156,47,.2)}
.chat-input{display:flex; gap:8px; padding:12px; background:var(--paper-2); border-top:1px solid var(--hair)}
.chat-input input{flex:1; padding:.7em 1em; border-radius:999px; border:1px solid var(--hair); background:#fff; color:var(--ink); font:inherit; font-size:.9rem}
.chat-input input:focus{outline:2px solid var(--leaf); outline-offset:1px}
.chat-input button{width:42px; height:42px; flex:0 0 auto; border-radius:50%; border:none; background:var(--forest); color:var(--paper); cursor:pointer; display:grid; place-items:center; transition:background .2s, transform .2s}
.chat-input button:hover{background:#1c3325; transform:scale(1.05)}
.chat-input button svg{width:18px; height:18px}
.chat-head .x svg{width:18px; height:18px}
.chat-fab svg{width:22px; height:22px}
.chat-head .ava{font-size:1.1rem}
@media(max-width:560px){ .chat-fab{right:14px; bottom:14px; padding:12px} .chat-fab .lbl{display:none}
  /* Cap the panel to ~75% of the screen, anchored at the bottom near the fab, so it
     never reaches the notch/status bar and can't clip on tall iOS devices. dvh =
     the real visible height on iOS Safari (excludes the dynamic toolbar). */
  .chat-panel{right:10px; left:10px; bottom:14px; top:auto; width:auto; max-width:none;
    height:75vh; height:75dvh; max-height:75dvh} }
body.dock-on .chat-fab{bottom:84px}
@media(max-width:560px){ body.dock-on .chat-panel{bottom:84px; height:72vh; height:72dvh; max-height:72dvh} }

/* footer accreditation mini-row (light variant in dark footer) */
.facc{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px}
.facc img{height:30px; width:auto; background:rgba(246,242,233,.92); border-radius:8px; padding:4px}
.facc .v{font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--leaf-bright); border:1px solid rgba(168,201,47,.4); border-radius:8px; padding:8px 10px}

/* narrow-phone logo fit — keep "Building & Landscaping" from clipping at the bar edge */
@media(max-width:420px){
  .nav-inner{padding:8px 12px}
  .nav .logo img, .nav.scrolled .logo img{height:64px}
  .burger{width:40px; height:40px}
}

/* ---- dark-band variant of the why-eden card (transparent so the dark section shows) ---- */
.why-eden.on-dark{background:transparent; border:1px solid rgba(246,242,233,.25); box-shadow:none}
.why-eden.on-dark h3{color:var(--paper)}
.why-eden.on-dark h3 em{color:var(--leaf-bright)}
.why-eden.on-dark .we-sub{color:rgba(246,242,233,1)}
.why-eden.on-dark .we-list li{border-bottom-color:rgba(246,242,233,.25)}
.why-eden.on-dark .we-list strong{color:var(--paper)}
.why-eden.on-dark .we-list p{color:rgba(246,242,233,1)}
.why-eden.on-dark .we-n{color:var(--leaf-bright)}

/* light-context enquiry chips (for contact page light sections — footer chips are dark-bg) */
.enq-chip.on-light{border:1px solid var(--hair); background:#fff; color:var(--ink-soft)}
.enq-chip.on-light:hover{background:var(--forest); border-color:var(--forest); color:var(--paper)}
.enq-chip.on-light svg{color:var(--leaf)}

/* ---- contrast polish (from automated audit) ---- */
/* form micro-labels: the .qform.on-light variant (light contexts) bumps to --ink-soft */
.qform label.on-light{color:var(--ink-soft)}
.accreds .label, .areas .label, .gal-strip .label{color:var(--ink-soft)}
/* .qform sits on the DARK forest quote card → cream labels (must win over broad rule). */
.quote .qform label, .qform label{color:rgba(246,242,233,.55)}
/* NB: .hv-form is now a GLASSY dark hero panel — its label/micro colours are set in the .hv-form block above (cream). */
/* heading accent green: darken slightly so the italic <em> clears 3:1 on paper & paper-2 */
:root{--leaf:#6f8a29}
/* keep the brighter leaf for dark bands (those already pass) */
.story-sunset h2 em, .work-soil .sec-head h2 em, .wallquote em, .bark-band em,
.quote h2 em, .hero-v3 h1 em, .phero h1 em, .why-eden.on-dark h3 em{color:var(--leaf-bright)}

/* ---- Triple Zero (000) life-threatening notice on the emergency page ---- */
.triple-zero{background:#2a0f0c; border-bottom:1px solid rgba(224,53,44,.45)}
.tz-inner{display:flex; align-items:center; gap:20px; padding:20px 28px}
.tz-badge{flex:0 0 auto; width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:#ce2e26; color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:1.35rem;
  letter-spacing:.02em; box-shadow:0 0 0 5px rgba(206,46,38,.18)}
.triple-zero p{color:rgba(246,242,233,.82); font-size:.95rem; font-weight:380; line-height:1.55; margin:0}
.triple-zero p strong{color:#ff8378; font-weight:600}
.triple-zero a{color:#ff8378; font-weight:700; text-decoration:underline; text-underline-offset:2px}
@media(max-width:560px){ .tz-inner{flex-direction:column; align-items:flex-start; gap:12px; padding:18px 20px} .tz-badge{width:48px; height:48px; font-size:1.1rem} }

/* ---- contact page: dark quote-card left column (was unstyled → invisible text + giant icons) ---- */
.quote .qleft h3{color:var(--paper); font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:22px}
.quote .qleft .trust-list{list-style:none; display:grid; gap:13px; margin:0}
.quote .qleft .trust-list li{display:flex; align-items:flex-start; gap:.7em; color:rgba(246,242,233,.85); font-size:.95rem; font-weight:380; line-height:1.5}
.quote .qleft .trust-list li svg{width:18px; height:18px; flex:0 0 auto; color:var(--leaf-bright); margin-top:3px}
/* contact form uses .seg-btn (not bare button) — keep selected state readable */
.qform .seg .seg-btn{flex:1; border:none; background:transparent; color:rgba(246,242,233,.65); font:inherit; font-weight:600; font-size:.88rem; padding:.6em; border-radius:999px; cursor:pointer; transition:background .25s,color .25s}
.qform .seg .seg-btn.sel, .qform .seg .seg-btn[aria-pressed="true"]{background:var(--leaf-bright); color:var(--forest-deep)}
.qform .form-group{margin-bottom:2px}

/* about page uses a custom .emr-content layout inside .emr-strip — size its icon + lay it out */
.emr-content{display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between}
.emr-content > svg{width:34px; height:34px; flex:0 0 auto; color:#ff7a6e}
.emr-content > div{flex:1; min-width:220px}
.emr-content h3{color:var(--paper); font-size:clamp(1.3rem,2.4vw,1.7rem); margin-bottom:2px}
.emr-content p{color:rgba(246,242,233,.7); font-size:.95rem; font-weight:380; margin:0}
.emr-content .btn-emergency{background:#ce2e26; color:#fff; border-color:#ce2e26; white-space:nowrap}

/* ---- founder portrait (Eduardo) on About page ---- */
.founder-photo{position:relative; margin:0}
.founder-photo .main{border-radius:var(--rad); box-shadow:var(--shadow); aspect-ratio:4/5; object-fit:cover; object-position:center top; width:100%}
.founder-photo figcaption{position:absolute; left:16px; bottom:16px; font-size:.7rem; font-weight:650; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); background:rgba(246,242,233,.92); border:1px solid rgba(255,255,255,.8);
  padding:.7em 1.3em; border-radius:999px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}

/* ============================================================
   V3 — richer text + hover animation layer (15 Jun)
   Shared across all pages. Respects prefers-reduced-motion.
   ============================================================ */

/* ---- TEXT: word-by-word rise-in for headings (JS wraps words in .w>i) ---- */
.js-anim .anim-words .w{display:inline-block; overflow:hidden; vertical-align:top}
.js-anim .anim-words .w > i{display:inline-block; font-style:inherit; transform:translateY(108%); opacity:0;
  transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .8s cubic-bezier(.22,1,.36,1)}
.js-anim .anim-words.in .w > i{transform:none; opacity:1}
/* stagger each word */
.js-anim .anim-words.in .w:nth-child(1) > i{transition-delay:.02s}
.js-anim .anim-words.in .w:nth-child(2) > i{transition-delay:.08s}
.js-anim .anim-words.in .w:nth-child(3) > i{transition-delay:.14s}
.js-anim .anim-words.in .w:nth-child(4) > i{transition-delay:.20s}
.js-anim .anim-words.in .w:nth-child(5) > i{transition-delay:.26s}
.js-anim .anim-words.in .w:nth-child(6) > i{transition-delay:.32s}
.js-anim .anim-words.in .w:nth-child(7) > i{transition-delay:.38s}
.js-anim .anim-words.in .w:nth-child(8) > i{transition-delay:.44s}
.js-anim .anim-words.in .w:nth-child(n+9) > i{transition-delay:.50s}

/* ---- TEXT: kicker letter-spacing settle on reveal ---- */
.js-anim .kicker.reveal{letter-spacing:.6em; transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), letter-spacing .9s cubic-bezier(.22,1,.36,1)}
.js-anim .kicker.reveal.in{letter-spacing:.34em}

/* ---- TEXT: animated underline sweep on heading <em> accents ---- */
.js-anim h1 em, .js-anim h2 em{background-image:linear-gradient(currentColor,currentColor);
  background-position:0 100%; background-repeat:no-repeat; background-size:0% 2px; padding-bottom:2px;
  transition:background-size 1s cubic-bezier(.22,1,.36,1) .35s}
.js-anim .reveal.in h1 em, .js-anim .reveal.in h2 em,
.js-anim .anim-words.in em, .js-anim h1.in em, .js-anim h2.in em{background-size:100% 2px}
@media(prefers-reduced-motion:reduce){ .js-anim h1 em, .js-anim h2 em{background-size:0 0} }

/* ---- HOVER: nav + footer link underline grow ---- */
.nav-links > a, .nav-item > a{position:relative}
.nav-links > a::after, .nav-item > a::after{content:""; position:absolute; left:.8em; right:.8em; bottom:.28em;
  height:1.5px; background:var(--leaf-bright); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.22,1,.36,1)}
.nav-links > a:hover::after, .nav-item:hover > a::after, .nav-links a.active::after{transform:scaleX(1)}
footer li a{position:relative; transition:color .25s, padding-left .25s}
footer li a:hover{padding-left:6px; color:var(--leaf-bright)}

/* ---- HOVER: buttons get a lift + soft shadow + sheen ---- */
.btn{position:relative; overflow:hidden}
.btn-forest:hover, .qform .btn:hover, .nav .btn-forest:hover{transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(126,156,47,.6)}
.btn-paper:hover, .btn-ghost:hover{transform:translateY(-2px)}
.btn::before{content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); transition:left .6s ease}
.btn:hover::before{left:160%}
@media(prefers-reduced-motion:reduce){ .btn::before{display:none} }

/* ---- HOVER: cards lift more + arrow nudge (extends existing) ---- */
.svc-card, .post-card, .news-card, .sub-card{transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .45s}
.svc-card:hover, .post-card:hover, .news-card:hover{transform:translateY(-7px)}
.svc-card .body h3, .post-card .body h3{transition:color .3s}
.svc-card:hover .body h3, .post-card:hover .body h3{color:var(--leaf)}
.news-card:hover .news-thumb{filter:saturate(1.05)}
.news-card .news-thumb{transition:filter .5s}

/* ---- HOVER: "more / explore / read" arrow links nudge ---- */
.more, .go, .svc-cta a{transition:color .3s}
.more svg, .go svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.svc-card:hover .more svg, a:hover > .go svg, .go:hover svg{transform:translateX(5px)}

/* ---- HOVER: accreditation + review + council cards lift ---- */
.accred-card{transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s}
.accred-card:hover{transform:translateY(-4px); box-shadow:0 22px 44px -24px rgba(19,35,26,.4)}
.accred-vba-badge{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.accred-vba-badge:hover{transform:translateY(-4px) rotate(-2deg)}
.review-card{transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s}
.review-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(126,156,47,.4)}
.council-card{transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s}
.council-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(126,156,47,.4)}
.team-card{transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s}
.team-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}

/* ---- HOVER: FAQ summary + steps ---- */
.faq summary{transition:color .25s, padding-left .25s}
.faq summary:hover{color:var(--leaf); padding-left:6px}
.step{transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s}
.step:hover{transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(19,35,26,.4); border-color:rgba(126,156,47,.35)}
.step:hover .step-n{transform:scale(1.08)}
.step-n{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.we-list li{transition:transform .3s}
.we-list li:hover{transform:translateX(4px)}
.we-list li:hover .we-n{color:var(--leaf)}
.we-n{transition:color .3s}

/* ---- HOVER: standard pills + std tags + dc-cards ---- */
.std{transition:transform .3s, background .3s, color .3s}
.std:hover{transform:translateY(-2px); background:rgba(160,122,30,.14)}
.dc-card{transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s}
.dc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.dc-card .dc-body{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.dc-card:hover .dc-body{transform:translateY(-4px)}

/* ---- HOVER: founder + photo-stack subtle zoom ---- */
.founder-photo .main, .photo-stack .main, .ss-photo img, .svcd-photo img{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.founder-photo:hover .main, .photo-stack:hover .main, .ss-photo:hover img, .svcd-photo:hover img{transform:scale(1.03)}

/* ---- HOVER: hero rating chip + stat cells ---- */
.hv-rate{transition:transform .3s, background .3s}
.hv-rate:hover{transform:translateY(-2px); background:rgba(246,242,233,.2)}
.stat-cell{transition:background .35s}
.stat-cell:hover{background:rgba(126,156,47,.06)}
.stat-cell .n{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.stat-cell:hover .n{transform:scale(1.06)}

/* ---- count-up: hold final value; JS animates textContent ---- */
.counting{font-variant-numeric:tabular-nums}

/* ---- ENHANCED: paragraph text fade-in per word + line animations ---- */
.js-anim p.reveal{transition:opacity .8s cubic-bezier(.22,1,.36,1), color .8s}
.js-anim p.reveal.in{opacity:1}
.js-anim h3.reveal{transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s}
.js-anim h3.reveal.in{opacity:1; transform:none}

/* ---- TEXT: animated gradient text on hover ---- */
.section h2{transition:color .4s cubic-bezier(.22,1,.36,1)}
.section h2:hover, .svc-card:hover .body h3{color:var(--leaf)}

/* ---- ENHANCED: list items stagger animations ---- */
.we-list li{opacity:0; animation:slideIn .7s cubic-bezier(.22,1,.36,1) forwards}
.we-list li:nth-child(1){animation-delay:.1s}
.we-list li:nth-child(2){animation-delay:.2s}
.we-list li:nth-child(3){animation-delay:.3s}
.we-list li:nth-child(4){animation-delay:.4s}
.we-list li:nth-child(5){animation-delay:.5s}
@keyframes slideIn{from{opacity:0; transform:translateX(-12px)}to{opacity:1; transform:none}}

/* ---- ENHANCED: card image parallax + saturation shift ---- */
.svc-card .thumb img, .post-card .thumb img{transition:filter .5s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1)}
.svc-card:hover .thumb img{filter:saturate(1.15); transform:scale(1.06)}
.post-card:hover .thumb img{filter:brightness(1.1)}

/* ---- ENHANCED: emphasize text on hover (kicker, headings) ---- */
.mvv-card .mvv-tag{transition:color .3s, letter-spacing .3s}
.mvv-card:hover .mvv-tag{color:var(--leaf-bright); letter-spacing:.38em}
.mvv-card{transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s}
.mvv-card:hover{transform:translateY(-3px); box-shadow:0 18px 42px -24px rgba(126,156,47,.3)}

/* ---- ENHANCED: link hover pulse effect ---- */
a.go, .more{position:relative; display:inline-flex; align-items:center; gap:.3em}
a.go:hover, .more:hover{color:var(--leaf)}
a.go::before, .more::before{content:""; position:absolute; left:0; top:50%; width:2px; height:0; background:var(--leaf-bright);
  transform:translateY(-50%); transition:height .3s cubic-bezier(.22,1,.36,1); margin-right:6px}
a.go:hover::before, .more:hover::before{height:14px}

/* ---- ENHANCED: form input focus animations ---- */
input, textarea, select{transition:border-color .35s, box-shadow .35s, background .3s}
input:focus, textarea:focus, select:focus{border-color:var(--leaf); box-shadow:0 0 0 3px rgba(126,156,47,.1)}

/* ---- ENHANCED: hero + section headings glow text ---- */
@media(prefers-reduced-motion:no-preference){
  .hero h1, .phero h1{animation:textGlow .3s ease-out 1, fadeInHeading .9s cubic-bezier(.22,1,.36,1)}
}
@keyframes fadeInHeading{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}
@keyframes textGlow{0%{text-shadow:0 0 20px rgba(126,156,47,.4)}100%{text-shadow:none}}

/* ---- ENHANCED: breadcrumb fade-in stagger ---- */
.crumbs a, .crumbs span{opacity:0; animation:crumbFade .5s cubic-bezier(.22,1,.36,1) forwards}
.crumbs a:nth-child(1){animation-delay:.1s}
.crumbs span{animation-delay:.2s}
@keyframes crumbFade{from{opacity:0}to{opacity:1}}

/* ---- ENHANCED: trust badges + stats slide in from left ---- */
.trust{opacity:0; animation:trustSlide .6s cubic-bezier(.22,1,.36,1) forwards}
.trust:nth-child(1){animation-delay:.2s}
.trust:nth-child(2){animation-delay:.35s}
.trust:nth-child(3){animation-delay:.5s}
@keyframes trustSlide{from{opacity:0; transform:translateX(-16px)}to{opacity:1; transform:none}}

/* ---- ENHANCED: accent color gradual fill ---- */
.js-anim .kicker.in{color:var(--gold); animation:colorFade .8s cubic-bezier(.22,1,.36,1)}
@keyframes colorFade{from{color:rgba(160,122,30,.4)}to{color:var(--gold)}}

/* ============================================================
   Hero Google-reviews moving strip (transparent glass cards)
   Sits at the bottom of the hero; auto-scrolls, pauses on hover.
   ============================================================ */
.hero-reviews{position:relative; z-index:2; overflow:hidden; width:100%; margin-top:48px; padding-bottom:34px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)}
.hr-track{display:flex; gap:18px; width:max-content; padding:0 18px; animation:hr-scroll 48s linear infinite}
.hero-reviews:hover .hr-track{animation-play-state:paused}
@keyframes hr-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .hr-track{animation:none} }
.hr-card{flex:0 0 360px; max-width:360px; background:rgba(14,22,17,.4); border:1px solid rgba(246,242,233,.18);
  border-radius:18px; padding:20px 22px; backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  display:flex; flex-direction:column; gap:10px}
.hr-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.hr-stars{display:inline-flex; align-items:center; gap:.5em; font-weight:700; color:var(--paper); font-size:.95rem}
.hr-stars .st{color:#f0c14b; letter-spacing:.08em}
.hr-date{font-size:.74rem; color:rgba(246,242,233,.5)}
.hr-body{font-size:.9rem; line-height:1.55; color:rgba(246,242,233,.85); font-weight:380;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.hr-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:4px}
.hr-name{font-size:.84rem; font-weight:600; color:var(--paper)}
.hr-g{width:20px; height:20px; flex:0 0 auto}
@media(max-width:980px){ .hero-reviews{display:none} }  /* keep the mobile hero clean */
/* reviews strip is now in normal flow at the bottom of the hero column — the .wrap
   grows to fill, content centers above it, the strip sits cleanly below. No overlap. */
.hero-v3.has-reviews .wrap{flex:1; align-content:center}
/* nudge the slideshow dots above the reviews strip so nothing collides */
.hero-v3.has-reviews .hv-dots{bottom:auto; top:118px; right:40px}

/* ============================================================
   Council logos — moving marquee (like the hero reviews), centered,
   every logo normalised to the same cell size.
   ============================================================ */
.council-marquee{position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)}
.cm-track{display:flex; width:max-content; animation:cm-scroll 40s linear infinite}
.council-marquee:hover .cm-track{animation-play-state:paused}
.cm-set{display:flex; align-items:center; flex-shrink:0}
/* fixed, equal cell per logo → all marks read the same visual size.
   Force a uniform render HEIGHT so thin icon-marks scale up to match the
   chunky wordmarks (Yarra Ranges / Whittlesea), capped in width so the
   wide wordmarks don't dominate. */
.cm-logo{display:flex; align-items:center; justify-content:center;
  width:clamp(160px,16vw,210px); height:60px; margin:0 clamp(20px,2.6vw,40px); flex-shrink:0}
.cm-logo img{height:52px; width:auto; max-width:100%; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.85; transition:opacity .3s}
.cm-logo:hover img{opacity:1}
@keyframes cm-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .cm-track{animation:none; width:100%; flex-wrap:wrap; justify-content:center}
  .cm-set:nth-child(2){display:none} }
@media(max-width:680px){ .cm-logo{width:130px; height:48px; margin:0 16px} .cm-logo img{height:42px} }

/* ============================================================
   About — founder story: small face tile beside the text
   (replaces the oversized full-width portrait)
   ============================================================ */
.story-founder{display:grid; grid-template-columns:300px 1fr; gap:48px; align-items:start}
@media(max-width:820px){ .story-founder{grid-template-columns:1fr; gap:28px} }
.founder-tile{margin:0; position:sticky; top:110px}
@media(max-width:820px){ .founder-tile{position:static; max-width:280px} }
.founder-tile img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; border-radius:var(--rad);
  box-shadow:var(--shadow); border:1px solid var(--hair)}
.founder-tile figcaption{margin-top:14px; text-align:left}
.founder-tile figcaption strong{display:block; font-family:'Fraunces',serif; font-weight:500; font-size:1.15rem; color:var(--ink)}
.founder-tile figcaption span{font-size:.72rem; font-weight:650; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.story-body h2{font-size:clamp(2rem,3.6vw,2.7rem); margin-bottom:22px}
.story-body p{color:var(--ink-soft); font-weight:380; margin-bottom:16px}

/* ============================================================
   About page — balance "Why Choose Eden" (2-col) + make the
   accreditation cards clean centered badge tiles (not full rows)
   ============================================================ */
/* Why Choose Eden: 2-column grid of the 4 reasons (was a single lopsided column) */
.why-eden .we-list{display:grid; grid-template-columns:1fr 1fr; gap:8px 48px; max-width:980px; margin:0 auto; list-style:none}
@media(max-width:760px){ .why-eden .we-list{grid-template-columns:1fr; gap:4px} }
.why-eden .we-list li{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--hair)}
.why-eden .we-list li .we-n{font-family:'Fraunces',serif; font-style:italic; font-size:1.2rem; color:var(--gold); flex:0 0 auto}
.why-eden .we-list li strong{display:block; font-family:'Fraunces',serif; font-weight:500; font-size:1.1rem; margin-bottom:6px}
.why-eden .we-list li p{color:var(--ink-soft); font-size:.92rem; font-weight:380; margin:0}

/* Accreditation cards: centered row of compact badge tiles (logo + name + one line) */
.accreds .accred-row{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; max-width:1000px; margin:0 auto}
.accreds .accred-card{flex:0 0 220px; max-width:220px; display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid var(--hair); border-radius:var(--rad); padding:28px 22px 24px; gap:10px;
  box-shadow:0 18px 48px -34px rgba(19,35,26,.3)}
.accreds .accred-card img{height:54px; width:auto; max-width:150px; object-fit:contain; margin:0}
.accreds .accred-card .accred-vba-badge{margin:0}
.accreds .accred-card h4{font-family:'Fraunces',serif; font-weight:500; font-size:1rem; margin:6px 0 0; color:var(--ink)}
.accreds .accred-card p{font-size:.8rem; color:var(--ink-soft); font-weight:380; margin:0; line-height:1.45}
@media(max-width:560px){ .accreds .accred-card{flex:0 0 46%; max-width:46%} }

/* ============================================================
   Blog page used .post-thumb / .post-body (bg-image divs) instead
   of the standard .pic>img / .body — give them matching styling.
   ============================================================ */
.post-card .post-thumb{aspect-ratio:16/10; background-size:cover; background-position:center; overflow:hidden}
/* logo thumbnail variant — real partner/sponsor logo centered on a clean backdrop */
.post-card .post-thumb.logo-thumb{
  background-size:contain; background-repeat:no-repeat; background-position:center;
  background-color:#fbfaf6; padding:0;
  box-shadow:inset 0 0 0 1px var(--hair)}
.post-card .post-body{padding:22px 22px 26px; display:flex; flex-direction:column; flex:1}
.post-card .post-body .cat{font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:10px}
.post-card .post-body h3{font-size:1.18rem; font-weight:470; margin-bottom:8px; line-height:1.25}
.post-card .post-body p{font-size:.86rem; color:var(--ink-soft); font-weight:380; margin-bottom:14px; flex:1}
.post-card .post-body .meta{font-size:.72rem; color:var(--ink-faint)}
.news-card .news-body{padding:0 22px 4px; display:flex; flex-direction:column; flex:1}

/* service-detail photo: some pages use <figure background-image> instead of <img> — give it size */
.svcd-photo figure{margin:0; width:100%; aspect-ratio:4/3; background-size:cover; background-position:center;
  border-radius:var(--rad); box-shadow:var(--shadow); border:1px solid var(--hair); transition:transform .7s cubic-bezier(.22,1,.36,1)}
.svcd-photo:hover figure{transform:scale(1.03)}

/* ============ SUSTAINABILITY & EDUCATION (About page — Idah's vision) ============ */
.sustain{position:relative; overflow:hidden; background:var(--forest-deep); color:var(--paper)}
.sustain .sustain-bg{position:absolute; inset:0; background:url('/assets/img/eden/foliage.webp') center/cover; opacity:.22}
.sustain .sustain-veil{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,20,16,.86) 0%, rgba(12,20,16,.74) 50%, rgba(12,20,16,.9) 100%)}
.sustain .wrap{position:relative; z-index:2}
.sustain .sec-head h2{color:var(--paper)}
.sustain .sec-head h2 em{color:var(--leaf-bright)}
.sustain .sec-head .kicker{color:var(--leaf-bright)}
.sustain .sec-head p{color:rgba(246,242,233,.82)}
.sustain-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:46px}
@media(max-width:980px){ .sustain-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .sustain-grid{grid-template-columns:1fr} }
.sustain-card{background:rgba(246,242,233,.05); border:1px solid rgba(168,201,47,.18); border-radius:18px;
  padding:28px 24px; backdrop-filter:blur(6px); transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .5s, background .5s}
.sustain-card:hover{transform:translateY(-5px); border-color:rgba(168,201,47,.45); background:rgba(246,242,233,.08)}
.sustain-card .sc-ico{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(168,201,47,.14); border:1px solid rgba(168,201,47,.3); margin-bottom:18px}
.sustain-card .sc-ico svg{width:24px; height:24px; color:var(--leaf-bright)}
.sustain-card h3{font-family:'Fraunces',serif; font-size:1.18rem; color:var(--paper); margin-bottom:10px; line-height:1.2}
.sustain-card p{font-size:.92rem; color:rgba(246,242,233,.78); line-height:1.6}
.sustain-cta{margin-top:42px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding:26px 30px; border-radius:18px; background:rgba(168,201,47,.08); border:1px solid rgba(168,201,47,.22)}
.sustain-cta p{margin:0; max-width:60ch; color:rgba(246,242,233,.88); font-size:1rem; line-height:1.6}
.sustain-cta p strong{color:var(--leaf-bright); font-weight:600}
@media(max-width:680px){ .sustain-cta{flex-direction:column; align-items:flex-start} }

/* ============ BNI photo gallery (blog · Partners & Sponsorships) ============ */
.bni-gallery{margin-top:56px; padding-top:48px; border-top:1px solid var(--hair)}
.bni-head{text-align:center; max-width:64ch; margin:0 auto 34px}
.bni-head h3{font-family:'Fraunces',serif; font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.1; margin-bottom:12px; color:var(--ink)}
.bni-head h3 em{font-style:italic; color:var(--leaf)}
.bni-head p{color:#5a5448; font-size:1rem; line-height:1.6}
.bni-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:18px; align-items:stretch}
@media(max-width:820px){ .bni-grid{grid-template-columns:1fr} }
.bni-lead{position:relative; margin:0; border-radius:var(--rad); overflow:hidden; box-shadow:var(--shadow); min-height:340px}
.bni-lead img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.22,1,.36,1)}
.bni-lead:hover img{transform:scale(1.04)}
.bni-lead figcaption{position:absolute; left:16px; bottom:16px; font-size:.66rem; font-weight:650; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); background:rgba(246,242,233,.9); border:1px solid rgba(255,255,255,.8);
  padding:.6em 1.1em; border-radius:999px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.bni-thumbs{display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:18px}
.bni-thumbs figure{margin:0; border-radius:var(--rad); overflow:hidden; box-shadow:var(--shadow); min-height:160px}
.bni-thumbs img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.22,1,.36,1)}
.bni-thumbs figure:hover img{transform:scale(1.05)}
@media(max-width:480px){ .bni-thumbs{grid-template-columns:1fr 1fr} .bni-thumbs figure{min-height:120px} }

/* ============================================================
   VISUAL SWEEP FIXES (16 Jun) — defects found in full-site QA
   ============================================================ */

/* 1. Careers application form sits on a LIGHT section (.qcard-light),
   but .qform is styled for the dark forest quote card → gray inputs +
   invisible cream labels. Re-skin the fields for the light context. */
.qcard-light .qform label{color:var(--ink-soft)}
.qcard-light .qform input,
.qcard-light .qform textarea,
.qcard-light .qform select{
  background:#fff; border:1px solid var(--hair); color:var(--ink)}
.qcard-light .qform input::placeholder,
.qcard-light .qform textarea::placeholder{color:#9a9282}
.qcard-light .qform input:focus,
.qcard-light .qform textarea:focus,
.qcard-light .qform select:focus{outline:2px solid var(--leaf); outline-offset:1px; border-color:var(--leaf)}
.qcard-light .qform select{width:100%; padding:.8em 1em; border-radius:13px; font:inherit; font-size:.94rem; margin-bottom:15px}
.qcard-light .qform .btn{background:var(--forest); color:var(--paper)}
.qcard-light .qform .btn:hover{background:#1d3326}

/* 2. About "Industry Accreditations" cards are column cards (img + h4 + p)
   but inherited the fixed 72-84px pill height → content overlapped on
   mobile. Let the textual accred cards grow to fit. */
.accreds .accred-card{height:auto; min-height:0; padding:26px 22px 24px}
@media(max-width:768px){ .accreds .accred-card{flex:0 0 calc(50% - 8px); max-width:calc(50% - 8px)} }
@media(max-width:560px){ .accreds .accred-card{height:auto; min-height:0; flex:0 0 100%; max-width:100%} }

/* 3. Team grid: the wide featured card (Eduardo) stretched the normal
   cards in its row to full height, leaving a void under Idah. */
.team-grid{align-items:start}

/* 4. Emergency strips on service pages use <strong> (not <h3>); it had no
   light colour → near-black text on the dark maroon band. */
.emr-strip strong{color:var(--paper); font-size:clamp(1.15rem,2.4vw,1.7rem); font-weight:600; line-height:1.2}
.emr-strip .wrap p{color:rgba(246,242,233,.82)}

/* 5. Reviews page: fixed mobile dock overlapped the 4.8 rating row. Give
   the page bottom room so nothing hides behind the dock. */
@media(max-width:680px){ body.dock-on{padding-bottom:78px} }

/* 6. Service "process" steps used <ol> → raw "1. 2. 3." markers leaked
   into the gutter on top of the styled 01/02/03 badges. */
ol.steps{list-style:none; margin:0; padding:0}

/* 7. Footer social icons wrapped (FB dropped to its own line) on mobile.
   Keep the label + both icons together as one row. */
.follow{flex-wrap:nowrap}
.follow .follow-label{flex:0 0 auto}

/* 8. Contact "Direct enquiries" chips: the Office chip (icon + label) was
   spreading icon-left / label-right. Group them, centered, consistent. */
.enq-chip{justify-content:center}

/* 9. Careers "What You'll Be Doing": exactly 4 role cards in a 3-col grid
   left an orphan on row 2. Use a balanced 2x2, and give the emoji-banner
   a tighter height so the icon isn't lost in empty space. */
.roles-grid{grid-template-columns:repeat(2,1fr); max-width:920px; margin-left:auto; margin-right:auto}
@media(max-width:600px){ .roles-grid{grid-template-columns:1fr} }
.roles-grid .svc-card .pic{aspect-ratio:auto}
.roles-grid .svc-card .ph{height:120px; font-size:3.4rem !important}

/* 10. Careers "Why You'll Want to Stay": .why-eden is a 2-col grid built for
   an intro column + list, but the careers card has ONLY the list, so it sat
   in the left ~45%. When the list is the sole child, span the full width. */
.why-eden > .we-list:only-child{grid-column:1 / -1; grid-template-columns:1fr 1fr; gap:14px 56px; max-width:none; width:100%}
@media(max-width:760px){ .why-eden > .we-list:only-child{grid-template-columns:1fr} }

/* 11. Contact card: on mobile the stacked .qform (rgba white overlay) showed
   a tonal seam against the .qleft info block. Blend them into one card. */
@media(max-width:880px){ .quote .qform{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none} }

/* 12. Locations council cards: unify the icon system. The 4 real council
   logos get the same circular frame as the 10 monogram badges so the grid
   reads as one consistent treatment. */
.council-head .council-logo{width:34px; height:34px; max-width:34px; border-radius:50%;
  background:rgba(168,201,47,.12); border:1px solid rgba(19,35,26,.12); padding:5px; box-sizing:border-box;
  filter:grayscale(1) brightness(.4); opacity:.9}

/* ============ QUOTE MODAL (shared popup) ============ */
.qmodal-ov{position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(12,20,16,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.qmodal-ov.show{display:flex}
.qmodal{position:relative; width:100%; max-width:460px; max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--forest); color:var(--paper); border-radius:22px; padding:34px 30px 30px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6); border:1px solid rgba(168,201,47,.22);
  animation:qmodal-in .32s cubic-bezier(.22,1,.36,1)}
@keyframes qmodal-in{from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none}}
.qmodal .fhead{font-family:'Fraunces',serif; font-size:1.65rem; font-weight:500; color:var(--paper); margin:0 0 6px}
.qmodal-sub{margin:0 0 20px; font-size:.92rem; line-height:1.5; color:rgba(246,242,233,.72)}
.qmodal .qform{padding:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none}
.qmodal-x{position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:rgba(246,242,233,.1); border:1px solid rgba(246,242,233,.18); color:var(--paper)}
.qmodal-x:hover{background:rgba(246,242,233,.2)}
.qmodal-x svg{width:18px; height:18px}
.qmodal .thanks{text-align:center; padding:10px 0}
.qmodal .thanks .seal{width:56px; height:56px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--leaf-bright); color:var(--forest-deep)}
.qmodal .thanks .seal svg{width:28px; height:28px}
@media(max-width:680px){ .qmodal{padding:30px 22px 24px; border-radius:20px} .qmodal .fhead{font-size:1.45rem} }

/* ============ Address group + autocomplete (enquiry forms) ============ */
.addr-group{margin-bottom:15px}
.addr-group .addr-row{display:grid; grid-template-columns:1.4fr .7fr .9fr; gap:10px}
@media(max-width:520px){ .addr-group .addr-row{grid-template-columns:1fr 1fr} }
/* inputs inside the group inherit the .qform input look but drop the stacked margin
   (the group manages its own spacing so the row lines up neatly). */
.addr-group input{margin-bottom:10px}
.addr-group .addr-row input{margin-bottom:0}
.addr-group input[data-addr="state"]{text-transform:uppercase}

/* the street field hosts the suggestions dropdown */
.addr-ac-wrap{position:relative}
.addr-ac-list{list-style:none; margin:4px 0 0; padding:5px; position:absolute; left:0; right:0; top:100%;
  z-index:40; background:#0e1712; border:1px solid rgba(255,255,255,.16); border-radius:13px;
  box-shadow:0 18px 40px rgba(0,0,0,.45); max-height:260px; overflow:auto; backdrop-filter:blur(10px)}
.addr-ac-item{padding:.62em .8em; border-radius:9px; color:var(--paper); font-size:.9rem; cursor:pointer;
  line-height:1.35}
.addr-ac-item:hover,.addr-ac-item.active{background:rgba(168,201,47,.16)}
.addr-ac-item.active{outline:1px solid rgba(168,201,47,.4)}

/* ============ Recently-completed jobs ticker (live ServiceM8 feed) ============ */
.rjt{display:flex;align-items:stretch;width:100%;overflow:hidden;background:var(--forest-deep);
  border-top:1px solid rgba(168,201,47,.18);border-bottom:1px solid rgba(168,201,47,.18)}
.rjt-label{flex:none;display:flex;align-items:center;gap:9px;padding:14px 22px;background:var(--forest);
  color:var(--leaf-bright);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;position:relative;z-index:2}
.rjt-live{width:8px;height:8px;border-radius:50%;background:var(--leaf-bright);
  box-shadow:0 0 0 0 rgba(168,201,47,.55);animation:rjtPulse 2s infinite}
@keyframes rjtPulse{0%{box-shadow:0 0 0 0 rgba(168,201,47,.55)}70%{box-shadow:0 0 0 8px rgba(168,201,47,0)}100%{box-shadow:0 0 0 0 rgba(168,201,47,0)}}
.rjt-viewport{position:relative;flex:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rjt-track{display:flex;width:max-content;animation:rjtScroll var(--rjt-dur,40s) linear infinite}
.rjt:hover .rjt-track{animation-play-state:paused}
.rjt-run{display:flex;align-items:center}
@keyframes rjtScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rjt-item{display:inline-flex;align-items:center;gap:7px;padding:14px 26px;white-space:nowrap;
  font-size:.92rem;color:rgba(246,242,233,.9)}
.rjt-dot{width:6px;height:6px;border-radius:50%;background:var(--leaf-bright);opacity:1;flex:none;margin-right:4px;
  box-shadow:0 0 6px rgba(168,201,47,.6)}
.rjt-type{font-weight:650;color:var(--paper)}
.rjt-sub{color:rgba(246,242,233,.78)}
.rjt-when{color:rgba(246,242,233,.5);font-size:.86rem}
@media(max-width:680px){
  .rjt-label{padding:12px 15px;font-size:.64rem;letter-spacing:.1em}
  .rjt-item{padding:12px 18px;font-size:.85rem}
}
@media(prefers-reduced-motion:reduce){ .rjt-track{animation:none} .rjt-viewport{overflow-x:auto} }