/* ==========================================================================
   Gardinus Landscaping & Home Services — From Roots to Roof.
   Premium exterior-property-services design system.
   Palette: forest / bone / charcoal / sage / restrained antique gold.
   ========================================================================== */

:root{
  --forest:#1E2E20;
  --forest-2:#16211800;
  --forest-deep:#152017;
  --sage:#8CA25F;
  --sage-deep:#4F6230;
  --sage-soft:#E7EDE0;
  --bone:#FAF6EE;
  --bone-2:#F2EDE2;
  --white:#FFFFFF;
  --charcoal:#2B2E2A;
  --ink:#21281F;
  --muted:#5A6455;
  --line:#DCD7C9;
  --gold:#7E6228;         /* AA on bone (5.3:1) and on sage-soft (4.8:1) */
  --gold-bright:#C9A44C;  /* large/decorative or on forest only */
  --blush:#F2E3E9;        /* restrained heritage accent */
  --rose-deep:#9A4A6E;

  --r:4px;                /* architectural, near-square corners */
  --r-lg:6px;
  --sh-1:0 1px 2px rgba(30,46,32,.06);
  --sh-2:0 8px 24px rgba(30,46,32,.09);
  --sh-3:0 20px 48px rgba(30,46,32,.15);

  /* Headings: ITC Galliard once the Adobe kit is added; EB Garamond renders until then
     (both descend from Granjon's old-style forms, so the fallback is a true match). */
  --display:"itc-galliard","EB Garamond",Garamond,"Times New Roman",serif;
  /* Body copy */
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  /* Interface text — nav, buttons, labels, chips. Kept sans for clarity. */
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(16px,4vw,28px);
  --sec:clamp(3.5rem,8vw,6.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:1.0425rem;line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sage-deep)}
h1,h2,h3,legend{font-family:var(--display);font-weight:600;line-height:1.12;color:var(--forest);letter-spacing:-.015em;margin:0 0 .5rem}
h1{font-size:clamp(2.15rem,6.2vw,4.1rem);letter-spacing:-.028em}
h2{font-size:clamp(1.7rem,4.2vw,2.85rem)}
h3{font-size:1.18rem;letter-spacing:-.008em}
p{margin:0 0 1rem}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:780px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.section{padding-block:var(--sec)}
.section-bone{background:var(--bone-2)}
.section-dark{background:var(--forest);color:#E8EADF}
.section-dark h2,.section-dark h3{color:#fff}
.section-forest{background:var(--forest-deep);color:#E8EADF}
.section-forest h2{color:#fff}

.eyebrow{
  font-size:.735rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .7rem;font-family:var(--ui);
}
.eyebrow-light{color:var(--gold-bright)}
.section-lede{max-width:64ch;font-size:1.08rem;color:var(--muted)}
.lede-light{color:#CFD6C6}
.note-line{font-size:.88rem;color:var(--muted);max-width:70ch;margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--line)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.78rem 1.55rem;border-radius:var(--r);border:1.5px solid transparent;
  font-family:var(--ui);font-weight:650;font-size:.965rem;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn-lg{min-height:54px;padding:1rem 2rem;font-size:1.02rem}
.btn-sm{min-height:42px;padding:.55rem 1.1rem;font-size:.9rem}
.btn-primary{background:var(--forest);color:#fff}
.btn-primary:hover{background:#2A3C2C}
.btn-gold{background:var(--gold-bright);color:#201A08}
.btn-gold:hover{background:#D8B663}
.btn-outline{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn-outline:hover{background:var(--forest);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--forest-deep);color:#DDE3D5;font-size:.875rem;
  display:flex;align-items:center;justify-content:center;gap:1rem;
  padding:.55rem 46px .55rem var(--pad);position:relative;text-align:center;
}
.topbar p{margin:0}
.topbar a{color:var(--gold-bright);font-weight:650}
.topbar-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;color:#DDE3D5;font-size:1.3rem;line-height:1;min-width:44px;min-height:44px;cursor:pointer}

/* ---------- Header ---------- */

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--forest);min-height:clamp(520px,76vh,760px);display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(21,32,23,.94) 0%,rgba(21,32,23,.88) 48%,rgba(21,32,23,.79) 100%);
}
.hero-in{max-width:1180px;margin:0 auto;padding:clamp(3rem,9vw,5.5rem) var(--pad);width:100%}
.hero-eyebrow{font-size:.735rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#E2C889;margin:0 0 1rem} /* lighter gold: AA over any hero photo */
.hero h1{color:#fff;max-width:16ch;margin-bottom:1.1rem}
.hero-lede{color:#D7DDCD;font-size:clamp(1.02rem,2vw,1.18rem);max-width:56ch;margin-bottom:2rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-call{margin:1.3rem 0 0;font-size:.98rem;color:#DCE3D2}
.hero-call a{color:#fff;font-weight:650}
.hero-slogan{
  font-family:var(--display);font-style:italic;font-size:clamp(1.05rem,2.4vw,1.4rem);
  color:#E2C889;margin:2.2rem 0 0;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.18);display:inline-block;letter-spacing:.01em;
}

/* ---------- Authority strip ---------- */
.authority{background:var(--forest-deep);border-top:1px solid rgba(255,255,255,.1)}
.authority ul{list-style:none;margin:0;padding-block:1.6rem;display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(min(210px, 100%), 1fr))}
.authority li{display:flex;flex-direction:column;gap:.22rem;padding-left:1rem;border-left:2px solid var(--gold-bright)}
.a-k{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright)}
.a-v{color:#E8EADF;font-weight:550;font-size:.965rem;line-height:1.35}

/* ---------- Two paths ---------- */
.paths{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(310px, 100%), 1fr));margin-top:2.2rem}
.path{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem 1.8rem}
.path-primary{border-color:var(--forest);border-top:4px solid var(--gold-bright);box-shadow:var(--sh-2)}
.path h3{font-size:1.42rem;margin-bottom:.6rem}
.path p{color:var(--muted)}
.ticks{list-style:none;padding:0;margin:1.1rem 0 1.6rem;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.5rem;font-size:.955rem}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--gold-bright);transform:rotate(45deg)}
.two-col{grid-template-columns:repeat(auto-fit,minmax(min(220px, 100%), 1fr))}

/* ---------- Outcomes ---------- */
.outcomes{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(280px, 100%), 1fr));margin-top:2.4rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.outcomes article{background:var(--forest);padding:1.7rem 1.5rem}
.outcomes h3{font-size:1.1rem;margin-bottom:.45rem;color:#fff}
.outcomes p{color:#C3CCB8;font-size:.95rem;margin:0}
.dark-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}

/* ---------- Who we serve ---------- */
.serve-grid{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(250px, 100%), 1fr));background:var(--line);border:1px solid var(--line)}
.serve-grid li{background:var(--white);padding:1.6rem 1.4rem}
.serve-grid h3{font-size:1.02rem;margin-bottom:.35rem}
.serve-grid p{margin:0;font-size:.92rem;color:var(--muted)}

/* ---------- Services ---------- */
.svc-cats{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(330px, 100%), 1fr));margin-top:2.2rem}
.svc-cat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem 1.7rem;display:flex;flex-direction:column}
.svc-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.1rem}
.svc-head svg{width:34px;height:34px;flex:none;fill:none;stroke:var(--sage-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc-head h3{font-size:1.24rem;margin-bottom:.3rem}
.svc-head p{margin:0;font-size:.93rem;color:var(--muted)}
.svc-cat ul{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-wrap:wrap;gap:.4rem}
.svc-cat ul li{background:var(--sage-soft);color:var(--ink);font-size:.855rem;font-weight:550;padding:.33rem .8rem;border-radius:var(--r)}
.svc-cat > a{margin-top:auto;font-weight:700;text-decoration:none;font-size:.95rem;color:var(--forest);border-bottom:2px solid var(--gold-bright);align-self:flex-start;padding-bottom:2px}
.svc-cat > a:hover{color:var(--sage-deep)}

/* ---------- Maintenance ---------- */
.pricing-line{background:var(--sage-soft);border-left:3px solid var(--gold);padding:1.1rem 1.3rem;font-size:.95rem;margin:1.6rem 0}
#maintenance .btn{margin-top:.4rem}

/* ---------- Projects ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 .6rem}
.chip{background:transparent;border:1.5px solid var(--forest);color:var(--forest);font-family:var(--ui);font-weight:650;font-size:.885rem;padding:.5rem 1.05rem;border-radius:var(--r);min-height:44px;cursor:pointer}
.chip.is-on{background:var(--forest);color:#fff}
.filter-count{font-size:.88rem;color:var(--muted);min-height:1.4em;margin:0 0 1.4rem}
.proj-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fill,minmax(min(320px, 100%), 1fr))}
.proj{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.proj[hidden]{display:none}
.proj-btn{display:block;width:100%;padding:0;border:0;background:var(--sage-soft);cursor:zoom-in;position:relative;overflow:hidden}
.proj-btn img{width:100%;height:230px;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.proj-btn:hover img{transform:scale(1.04)}
.proj-zoom{position:absolute;right:10px;bottom:10px;background:rgba(21,32,23,.9);color:#fff;font-family:var(--ui);font-size:.75rem;font-weight:650;padding:.3rem .75rem;border-radius:var(--r)}
.proj figcaption{padding:1.3rem 1.4rem 1.5rem}
.proj figcaption h3{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;font-size:1.12rem;margin-bottom:.75rem}
.tag{background:var(--blush);color:#5D2A40;font-family:var(--ui);font-size:.67rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.24rem .6rem;border-radius:var(--r)}
.case{margin:0;display:grid;gap:.55rem}
.case > div{display:grid;gap:.1rem}
.case dt{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.case dd{margin:0;font-size:.93rem;color:var(--charcoal);line-height:1.5}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(15,23,17,.95);display:grid;place-items:center;padding:20px}
.lightbox[hidden]{display:none}
.lightbox-in{max-width:1050px;width:100%;text-align:center;position:relative}
.lightbox img{max-width:100%;max-height:76vh;border-radius:var(--r);margin:0 auto}
.lightbox p{color:#E8EADF;font-weight:600;margin:.9rem 0 0}
.lightbox-x{position:absolute;top:-10px;right:0;transform:translateY(-100%);background:#fff;color:var(--forest);border:0;border-radius:var(--r);width:46px;height:46px;font-size:1.7rem;line-height:1;cursor:pointer}
@media (max-width:660px){.lightbox-x{position:static;transform:none;margin:0 0 .7rem auto;display:block}.proj-btn img{height:200px}}

/* ---------- Pillars ---------- */
.pillars{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(290px, 100%), 1fr));margin-top:2.2rem;background:var(--line);border:1px solid var(--line)}
.pillars article{background:var(--bone);padding:1.8rem 1.6rem}
.pillars h3{font-size:1.1rem;margin-bottom:.4rem}
.pillars p{margin:0;font-size:.945rem;color:var(--muted)}

/* ---------- Reviews ---------- */
.stars{color:var(--gold-bright);font-size:1.02rem;letter-spacing:.14em;margin:0 0 .8rem}
.rev-feature{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(330px, 100%), 1fr));margin-top:2.2rem}
.rev-feature blockquote{margin:0;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold-bright);border-radius:var(--r-lg);padding:2rem 1.8rem}
.rev-feature p:not(.stars){font-family:var(--display);font-size:1.115rem;line-height:1.55;color:var(--ink)}
.rev-grid{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(250px, 100%), 1fr))}
.rev-grid blockquote{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.3rem;height:100%}
.rev-grid p:not(.stars){font-size:.95rem;color:var(--charcoal)}
.rev-norating{font-style:italic;color:var(--muted)}
blockquote footer{display:flex;flex-direction:column;gap:.1rem;margin-top:.9rem}
.rev-name{font-weight:700;color:var(--forest)}
.rev-src{font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.rev-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ---------- About ---------- */
.about-wrap{display:grid;gap:2.6rem;grid-template-columns:1.15fr .85fr;align-items:start}
@media (max-width:860px){.about-wrap{grid-template-columns:1fr}}
.about-slogan{font-family:var(--display);font-style:italic;font-size:1.28rem;color:var(--gold);margin:1.6rem 0}
.about-btns{display:flex;flex-wrap:wrap;gap:.8rem}
.about-fig{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}

/* ---------- Service area ---------- */
.area-cards{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(320px, 100%), 1fr));margin-top:2.2rem}
.area-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem 1.6rem}
.area-card h3{font-size:1.25rem}
.area-card > p{color:var(--muted);font-size:.95rem}
.places{list-style:none;display:flex;flex-wrap:wrap;gap:.42rem;padding:0;margin:1.1rem 0 0}
.places li{background:var(--sage-soft);color:var(--ink);font-size:.875rem;font-weight:550;padding:.36rem .85rem;border-radius:var(--r);min-height:32px;display:flex;align-items:center}
.checker{background:var(--forest);color:#E8EADF;border-radius:var(--r-lg);padding:1.9rem 1.7rem;margin-top:1.5rem}
.checker h3{color:#fff;font-size:1.25rem}
.checker label{display:block;font-weight:600;margin-bottom:.5rem;font-size:.95rem;color:#D7DDCD}
.checker-row{display:flex;gap:.6rem;flex-wrap:wrap}
.checker-row input{flex:1 1 230px;min-height:48px;padding:.8rem 1rem;font:inherit;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.07);color:#fff}
.checker-row input::placeholder{color:#9FAB93}
.checker-result{font-weight:650;margin:.9rem 0 0;min-height:1.4em;color:#fff}
.checker-result.ok{color:var(--gold-bright)}
.checker-note{font-size:.885rem;color:#AEB9A2;margin:.8rem 0 0}

/* ---------- Big CTA ---------- */
.bigcta{background:var(--forest-deep);color:#E8EADF;padding-block:var(--sec);
  background-image:linear-gradient(180deg,rgba(21,32,23,.97),rgba(21,32,23,.97)),url("images/projects/landscape-hedge-borders.webp");
  background-size:cover;background-position:center}
.bigcta h2{color:#fff;max-width:22ch;font-size:clamp(1.65rem,4vw,2.7rem)}
.bigcta p{color:#C3CCB8;max-width:60ch}
.bigcta-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ---------- Forms ---------- */
form{margin-top:1.8rem}
.hp{position:absolute;left:-9999px;width:0;height:0}
fieldset{border:0;padding:0;margin:0 0 2rem}
legend{font-size:1.28rem;padding:0;margin-bottom:1rem}
.section-forest legend{color:#fff}
.row{display:grid;gap:0 1rem;grid-template-columns:1fr 1fr}
@media (max-width:600px){.row{grid-template-columns:1fr}}
.f{margin-bottom:1rem}
.f label,.label{display:block;font-weight:650;font-size:.9rem;margin-bottom:.35rem}
.section-forest .f label,.section-forest .label{color:#DDE3D5}
.opt{font-weight:400;color:var(--muted)}
.section-forest .opt{color:#A8B39C}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{
  width:100%;min-height:48px;padding:.78rem .9rem;font:inherit;
  border-radius:var(--r);border:1.5px solid var(--line);background:var(--white);color:var(--ink);
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--sage-deep);outline:none}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:#A3231B;border-width:2.5px;background:#FFF6F5}
.radios{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(min(230px, 100%), 1fr))}
.radios label,.chk{
  display:flex;align-items:center;gap:.65rem;min-height:48px;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);
  padding:.7rem .95rem;cursor:pointer;font-weight:550;font-size:.955rem;color:var(--ink);
}
.checks{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(min(250px, 100%), 1fr));margin-bottom:1.2rem}
.radios label:has(input:checked),.chk:has(input:checked){border-color:var(--sage-deep);background:var(--sage-soft)}
.radios input,.chk input{width:1.15rem;height:1.15rem;accent-color:var(--sage-deep);flex:none}
.chk{margin-top:.5rem;align-items:flex-start}
.chk input{margin-top:.2rem}
.chk-urgent{border-color:var(--rose-deep)}
.privacy-note{font-size:.855rem;color:var(--muted);margin-top:.8rem}
.section-forest .privacy-note{color:#A8B39C}
.section-forest .privacy-note a{color:var(--gold-bright)}

.prog-label{font-size:.83rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright);margin:0 0 1.5rem}

.drop{display:block;border:1.5px dashed var(--line);border-radius:var(--r);padding:1.5rem;text-align:center;cursor:pointer;background:var(--white);font-weight:650}
.drop small{display:block;font-weight:400;margin-top:.3rem;color:var(--muted)}
.filelist{list-style:none;padding:0;margin:.6rem 0 0;font-size:.92rem;color:#DDE3D5}
.fallback{background:rgba(255,255,255,.07);border-left:3px solid var(--gold-bright);padding:1.1rem 1.2rem;margin:0;color:#DDE3D5}
.fallback a{color:var(--gold-bright)}

.form-nav,.form-actions{display:flex;gap:.7rem;justify-content:flex-end;margin-top:1.4rem;flex-wrap:wrap}
.status{font-weight:650;min-height:1.4em;margin:.8rem 0 0}
.status.err{color:#FFB4A8}
.section:not(.section-forest) .status.err{color:#A3231B}
.status.err::before{content:"⚠ "}
.review{margin:0;display:grid}
.review > div{display:flex;justify-content:space-between;gap:1rem;padding:.62rem .1rem;border-bottom:1px solid rgba(255,255,255,.16)}
.review dt{font-size:.82rem;font-weight:700;color:#A8B39C;letter-spacing:.03em}
.review dd{margin:0;text-align:right;font-weight:550;color:#fff}
.review-lede{color:#C3CCB8;margin-top:-.4rem}
.pricing-note{background:rgba(255,255,255,.07);border-left:3px solid var(--gold-bright);padding:1.1rem 1.2rem;font-size:.93rem;margin-top:1.3rem;color:#DDE3D5}
.rfp-note{background:var(--sage-soft);border-left:3px solid var(--gold);padding:1.1rem 1.3rem;font-size:.95rem}
.done{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:2.2rem 1.9rem;text-align:center;margin-top:1.8rem}
.section-forest .done{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#E8EADF}
.section-forest .done h3{color:#fff}
.section-forest .done a{color:var(--gold-bright)}

/* ---------- Contact cards ---------- */
.contact-cards{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(230px, 100%), 1fr));margin-top:1.8rem}
.ccard{display:block;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);padding:1.2rem 1.3rem;text-decoration:none;color:#DDE3D5}
.ccard:hover{background:rgba(255,255,255,.12)}
.cc-k{display:block;font-family:var(--display);font-size:1.1rem;color:#fff;font-weight:600}
.ccard strong{display:block;margin:.25rem 0 .35rem;color:var(--gold-bright);font-size:1.05rem}
.cc-n{display:block;font-size:.875rem;color:#AEB9A2}

/* ---------- FAQ ---------- */
.faq{background:var(--white);border:1px solid var(--line);border-radius:var(--r);margin-top:.7rem}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--forest);padding:1.05rem 3rem 1.05rem 1.3rem;list-style:none;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;top:.92rem;color:var(--gold);font-size:1.45rem;font-family:var(--ui)}
.faq[open] summary::after{content:"–"}
.faq p{padding:0 1.3rem 1.2rem;margin:0;color:var(--charcoal)}

/* ---------- Footer ---------- */
.ftr{background:var(--forest-deep);color:#C3CCB8;padding-top:clamp(2.8rem,6vw,4.2rem)}

.ftr h3{color:var(--gold-bright);font-family:var(--ui);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.55rem;font-size:.93rem}
.ftr a{color:#D6DDCB;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr-name{font-family:var(--display);font-size:1.35rem;color:#fff;margin:.9rem 0 0;display:flex;flex-direction:column;line-height:1.15}
.ftr-name span{font-family:var(--ui);font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#A8B39C;margin-top:.3rem}
.ftr-slogan{font-family:var(--display);font-style:italic;color:var(--gold-bright);margin-top:.7rem}
.ftr-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:2.6rem;padding-block:1.6rem;font-size:.845rem;color:#9FAB93;line-height:1.6}
.ftr-legal a{color:var(--gold-bright)}

/* ---------- Mobile action bar ---------- */
.mobar{position:fixed;bottom:0;left:0;right:0;z-index:70;display:grid;grid-template-columns:1fr 1fr 1.35fr;background:var(--bone);border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(21,32,23,.14)}
.mobar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:60px;padding:.5rem .3rem;text-decoration:none;font-size:.8rem;font-weight:650;color:var(--forest)}
.mobar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mobar .mb-main{background:var(--forest);color:#fff}
@media (min-width:901px){.mobar{display:none}body{padding-bottom:0}}

/* ==========================================================================
   ACCESSIBILITY — WCAG 2.1 AA
   ========================================================================== */
.skip-link{position:absolute;left:8px;top:-64px;z-index:400;background:var(--forest);color:#fff;font-weight:700;padding:.85rem 1.3rem;border-radius:0 0 var(--r) var(--r);text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--r)}
.hero :focus-visible,.section-dark :focus-visible,.section-forest :focus-visible,.bigcta :focus-visible,.ftr :focus-visible,.topbar :focus-visible,.checker :focus-visible{outline-color:var(--gold-bright)}
#main:focus{outline:none}
.chip[aria-pressed=true]::before{content:"✓ "}

/* Content is visible by default; JS opts in to animating. A script failure,blocked JS or slow load can never leave the page blank. */
[data-reveal]>.wrap{opacity:1;transform:none}
.js-anim [data-reveal]>.wrap{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.js-anim [data-reveal].seen>.wrap{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-anim [data-reveal]>.wrap{opacity:1!important;transform:none!important}
  .proj-btn:hover img{transform:none}
}
@media (forced-colors:active){
  .btn,.chip,.path,.area-card,.faq,.proj,.ccard{border:1px solid ButtonText}
  .hero-bg{display:none}
}
@media (max-width:380px){
  .hero-btns .btn,.bigcta-btns .btn,.dark-cta .btn{width:100%}
}

/* =========================================================================
   REVISION: header balance,hero layout,home services
   ========================================================================= */

/* ---------- Header: nothing wraps,earlier hamburger ---------- */

.hdr-cta .btn{white-space:nowrap}

/* Switch to the hamburger while the desktop bar is still comfortable,
   rather than waiting for the nav to crush. */

/* ---------- Hero: wide copy column,controlled headline ---------- */
.hero-in{display:block}
.hero-copy{max-width:min(58ch,56%)}
@media (max-width:1100px){.hero-copy{max-width:none}}
.hero h1{
  max-width:19ch;
  font-size:clamp(2.05rem,4.6vw,3.7rem);
  text-wrap:balance;
  margin-bottom:1rem;
}
.hero-lede{max-width:58ch;margin-bottom:.85rem}
.hero-sub{color:#BFC9B4;font-size:clamp(.94rem,1.35vw,1.02rem);max-width:60ch;margin-bottom:1.9rem}
.hero-eyebrow span{opacity:.6;margin-inline:.35rem}
.hero-slogan{margin-top:1.9rem;padding-top:1.2rem}

/* ---------- Home Services ---------- */
.home-wrap{display:grid;gap:clamp(1.8rem,4vw,3.2rem);grid-template-columns:.82fr 1.18fr;align-items:start}
@media (max-width:940px){.home-wrap{grid-template-columns:1fr}}
.home-fig{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);position:sticky;top:96px}
@media (max-width:940px){.home-fig{position:static}}
.home-copy h2{max-width:18ch}
.home-list{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.home-list li{background:var(--white);padding:1.3rem 1.4rem}
.home-list h3{font-size:1.06rem;margin-bottom:.3rem}
.home-list p{margin:0 0 .6rem;font-size:.94rem;color:var(--muted)}
.home-list a{font-weight:700;font-size:.92rem;text-decoration:none;color:var(--forest);border-bottom:2px solid var(--gold-bright);padding-bottom:1px}
.home-list a:hover{color:var(--sage-deep)}
.home-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.home-note{font-size:.87rem;color:var(--muted);margin-top:1rem}
.svc-cat-home{border-top:3px solid var(--gold-bright)}

/* ---------- Sticky-header anchor offset ---------- */

/* ---------- Overflow guard ---------- */
html,body{max-width:100%}
img,svg,video,table{max-width:100%}

/* =========================================================================
   HEADER REVISION — two-tier utility + main navigation
   Overrides the earlier single-row header. Scoped to the header only.
   ========================================================================= */

/* ---------- Tier 1: utility bar ---------- */

/* Utility bar folds away once the visitor scrolls; main nav stays sticky. */

/* ---------- Tier 2: main navigation ---------- */

/* Brand: the authentic logo asset,never re-typed in CSS */

/* Navigation: right-aligned,single line,quiet and scannable */

/* ---------- Breakpoints ---------- */

@media (max-width:1180px){
                   /* mobile: logo + Menu only */
  
  
  
  
  
}

/* ---------- Relocated scheduling strip (was the top announcement bar) ---------- */
.sched-strip{background:var(--sage-soft);border-bottom:1px solid var(--line)}
.sched-strip p{
  margin:0;padding-block:.8rem;font-size:.9rem;color:var(--ink);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.sched-dot{width:8px;height:8px;border-radius:50%;background:var(--sage-deep);flex:none}
.sched-strip a{font-weight:700;color:var(--forest)}

/* ---------- Anchor offset under the sticky header ---------- */

/* =========================================================================
   REORGANIZATION — condensed paths,merged commercial,regions,tabs
   ========================================================================= */

/* Paths become navigation choices,not service lists */
.path{display:flex;flex-direction:column}
.path p{flex:1}
.path .btn{align-self:flex-start;margin-top:.4rem}

/* Merged commercial section */
.com-grid{display:grid;gap:clamp(1.6rem,3.5vw,3rem);grid-template-columns:1.25fr .75fr;margin-top:2.2rem;align-items:start}
@media (max-width:900px){.com-grid{grid-template-columns:1fr}}
.com-h{font-size:1.2rem;color:#fff;margin-bottom:.4rem}
.com-p{color:#C3CCB8;font-size:.96rem}
.com-grid .ticks li{color:#DDE3D5}
.com-note{background:rgba(255,255,255,.07);border-left:3px solid var(--gold-bright);padding:.95rem 1.1rem;font-size:.9rem;color:#DDE3D5;margin:1.4rem 0}
.com-side{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:1.5rem 1.4rem}
.market-tiles{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.4rem}
.market-tiles li{background:rgba(255,255,255,.07);color:#E8EADF;font-size:.89rem;font-weight:550;padding:.55rem .85rem;border-radius:var(--r)}
.com-fine{font-size:.8rem;color:#A8B39C;margin:1rem 0 0;line-height:1.5}

/* Reviews: featured three + progressive disclosure */
.rev-toggle{margin-top:1.6rem}
.rev-grid[hidden]{display:none}
.rev-grid{margin-top:1.2rem}

/* Service area regions */
.region-grid{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(240px, 100%), 1fr));background:var(--line);border:1px solid var(--line)}
.region-grid li{background:var(--white);padding:1.3rem 1.3rem}
.region-grid h3{font-size:1.02rem;margin-bottom:.25rem}
.region-grid p{margin:0;font-size:.9rem;color:var(--muted)}
#area .checker{margin-top:1.6rem}

/* About + trust merged */
.trust-list{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.trust-list li{background:var(--white);padding:1.25rem 1.35rem}
.trust-list h3{font-size:1.02rem;margin-bottom:.25rem}
.trust-list p{margin:0;font-size:.92rem;color:var(--muted)}

/* Final CTA */
.bigcta-links{margin-top:1.4rem;font-size:.95rem;color:#C3CCB8}
.bigcta-links a{color:var(--gold-bright);font-weight:650}

/* Request centre tabs */
.tabs{display:flex;gap:.5rem;margin:1.8rem 0 0;flex-wrap:wrap}
.tab{
  flex:1 1 240px;min-height:52px;padding:.85rem 1.2rem;cursor:pointer;
  font-family:var(--ui);font-weight:650;font-size:.98rem;
  background:rgba(255,255,255,.07);color:#DDE3D5;
  border:1.5px solid rgba(255,255,255,.22);border-radius:var(--r);
}
.tab:hover{background:rgba(255,255,255,.13)}
.tab[aria-selected="true"]{background:var(--gold-bright);color:#201A08;border-color:var(--gold-bright)}
.tabpanel[hidden]{display:none}
.tabpanel{padding-top:.4rem}
.tab-lede{color:#C3CCB8;font-size:.95rem;margin:1.4rem 0 0}
.tab-lede a{color:var(--gold-bright)}
#request .rfp-note{background:rgba(255,255,255,.07);border-left-color:var(--gold-bright);color:#DDE3D5}
#request .rfp-note a{color:var(--gold-bright)}
#request legend,#request .f label,#request .label{color:#DDE3D5}
#request legend{color:#fff}
#request .done{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#E8EADF}
#request .done h3{color:#fff}
#request .done a{color:var(--gold-bright)}
#request .opt{color:#A8B39C}
#request .rfp-note strong{color:#fff}

/* Condensed footer */

.ftr-text{font-size:.82rem;color:#A8B39C!important}
.ftr-legal p{max-width:92ch;font-size:.79rem;line-height:1.55;margin:0 0 .5rem}
.ftr-copy{color:#8C9882}

/* Slightly tighter vertical rhythm overall */
.section{padding-block:clamp(3rem,6.5vw,5.2rem)}

/* =========================================================================
   REVISION — full-width In-Home Services,lead service card,footer contact
   ========================================================================= */

/* In-Home Services is now a full-width content section (image removed) */
.wrap-mid{max-width:980px;margin:0 auto;padding-inline:var(--pad)}
#home-services .home-list{
  margin-top:2rem;grid-template-columns:repeat(auto-fit,minmax(min(240px, 100%), 1fr));
  border-radius:var(--r-lg);
}
#home-services .section-lede{max-width:74ch}

/* Commercial leads the services grid without breaking the visual rhythm */
.svc-cat-lead{border-top:3px solid var(--gold-bright)}
.svc-cat-home{border-top:3px solid var(--sage-deep)}

/* Footer contact: label under each link,no parenthetical wording */
.ftr-contact li{margin-bottom:.85rem;line-height:1.35}
.ftr-contact a{display:block}
.ftr-contact span{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#8C9882;margin-top:.15rem;
}

/* =========================================================================
   MULTI-PAGE — page headers,previews,region tiles,travel note
   ========================================================================= */

/* Interior page header (replaces the full hero on non-home pages) */
.pagehead{background:var(--bone-2);border-bottom:1px solid var(--line);padding-block:clamp(2.6rem,6vw,4.4rem)}
.pagehead h1{font-size:clamp(1.95rem,5vw,3.2rem);max-width:20ch;margin-bottom:.7rem}
.pagehead-lede{max-width:68ch;font-size:1.06rem;color:var(--muted);margin:0}
.pagehead-dark{background:var(--forest);border-bottom-color:rgba(255,255,255,.14)}
.pagehead-dark h1{color:#fff}
.pagehead-dark .pagehead-lede{color:#C3CCB8}

/* Homepage preview cards: no bullet lists,shorter cards */
.svc-preview .svc-cat{padding-bottom:1.5rem}
.svc-preview .svc-cat ul{display:none}
.section-more{margin:2.2rem 0 0}
.center-block{text-align:center}
.center-block .section-lede{margin-inline:auto}

/* Current page marker in the nav */

/* Service-area region tiles — 8 tiles,balanced grid */
.region-grid{grid-template-columns:repeat(auto-fit,minmax(min(235px, 100%), 1fr))}
.region-extended{background:var(--sage-soft)!important}
.region-extended h3{color:var(--sage-deep)}
.travel-note{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-lg);padding:1.6rem 1.6rem;margin-top:1.8rem;
}
.travel-note h3{font-size:1.1rem;margin-bottom:.5rem}
.travel-note p{margin:0 0 .8rem;color:var(--charcoal);font-size:.96rem}
.travel-note p:last-child{margin-bottom:0}
.checker-intro{color:#C3CCB8;font-size:.95rem;margin:0 0 .9rem}

/* About page slogan treatment */
.about-slogan-lg{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.6rem,4vw,2.6rem);color:var(--gold-bright);margin:0 0 .8rem;
}

/* =========================================================================
   BRANDING REVISION — logo is the wordmark; no typed company name
   The logo asset is a stacked lockup (360×214,ratio 1.68:1),so its width is
   governed by the bar height. Heights below are the largest that keep the
   header comfortable and the nav on one line.
   ========================================================================= */

/* ---------- Header ---------- */

/* Sticky-header offsets follow the taller bar */
.ftr-slogan{
  font-family:var(--display);font-style:italic;font-size:1.12rem;
  color:var(--gold-bright);margin:1rem 0 0;
}

/* ---------- Services page: project-work tiers ---------- */
.proj-svcs{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(300px, 100%), 1fr));
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:2rem}
.proj-svc{background:var(--white);padding:1.7rem 1.6rem;display:flex;flex-direction:column}
.section-bone .proj-svc{background:var(--bone)}
.proj-svc h3{font-size:1.14rem;margin-bottom:.4rem}
.proj-svc > p{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.proj-svc ul{list-style:none;padding:0;margin:0 0 1.3rem;display:flex;flex-wrap:wrap;gap:.4rem}
.proj-svc ul li{background:var(--sage-soft);color:var(--ink);font-size:.845rem;font-weight:550;padding:.32rem .78rem;border-radius:var(--r)}
.section-bone .proj-svc ul li{background:var(--white)}
.proj-svc > a{margin-top:auto;align-self:flex-start;font-weight:700;font-size:.93rem;text-decoration:none;
  color:var(--forest);border-bottom:2px solid var(--gold-bright);padding-bottom:2px}
.proj-svc > a:hover{color:var(--sage-deep)}

/* =========================================================================
   BRAND LOCKUP — the official logo asset is the wordmark on its own.
   No HTML text recreates the company name in either header or footer.
   ========================================================================= */

/* ---------- Header ---------- */

/* taller main bar to hold the larger lockup without cropping it */

@media (max-width:1180px){
     /* leaves room for Menu */
}

/* anchors clear the collapsed sticky header */
.ftr-slogan{
  font-family:var(--display);font-style:italic;
  font-size:1.12rem;color:var(--gold-bright);
  margin:1rem 0 0;letter-spacing:.01em;
}

/* ---------- Services page: project-work rows ---------- */
.svc-rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:2rem}
.svc-row{background:var(--white);display:grid;grid-template-columns:.9fr 1.1fr;gap:1.4rem;padding:1.7rem 1.6rem}
@media (max-width:820px){.svc-row{grid-template-columns:1fr;gap:.9rem}}
.svc-row-head h3{font-size:1.16rem;margin-bottom:.4rem}
.svc-row-head p{margin:0;font-size:.95rem;color:var(--muted)}
.svc-row-body ul{list-style:none;padding:0;margin:0 0 1.1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.svc-row-body ul li{background:var(--sage-soft);color:var(--ink);font-size:.85rem;font-weight:550;padding:.32rem .8rem;border-radius:var(--r)}
.svc-row-body a{font-weight:700;font-size:.93rem;text-decoration:none;color:var(--forest);border-bottom:2px solid var(--gold-bright);padding-bottom:1px}
.svc-row-body a:hover{color:var(--sage-deep)}
.section-bone .svc-row{background:var(--white)}

/* =========================================================================
   BRANDING PATCH — larger header/footer logos,restored lockup
   ========================================================================= */

/* ---------- Header brand lockup ---------- */

/* taller bar so the bigger lockup is never cropped; collapses on scroll */

@media (max-width:1180px){
       /* logo alone; room for Menu */
}

/* anchors clear the collapsed sticky header */

/* ---------- Utility bar copy ---------- */

/* ---------- Footer brand ---------- */

/* ---------- Footer Google profile: name + secondary label ---------- */
.ftr-google{margin-bottom:.2rem}
.ftr-google a{display:block;line-height:1.35}
.ftr-google span{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#8C9882;margin-top:.15rem;
}

/* =========================================================================
   REVISION — logo alone in the header,compact service summary,multi-select
   ========================================================================= */

/* ---------- CHANGE 3: authentic logo is the only header branding ---------- */


/* ---------- CHANGE 1: compact selected-services summary ---------- */
.selected-services-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-size:.85rem;margin:0 0 .75rem;
}
.selected-services-summary[hidden]{display:none}
.sss-label{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#A8B39C;margin-right:.15rem;
}
.sss-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);
  color:#E8EADF;font-family:var(--ui);font-size:.8rem;font-weight:600;
  padding:.26rem .6rem;border-radius:var(--r);cursor:pointer;line-height:1.3;
  min-height:0;                     /* stays compact, unlike .btn */
}
.sss-chip:hover{background:rgba(255,255,255,.16);color:#fff}
.sss-chip span{opacity:.7;font-size:.95rem}

.svc-hint{font-size:.88rem;color:#A8B39C;margin:-.4rem 0 .9rem}

/* ---------- CHANGE 2: checkbox service cards ---------- */
.checks-grid label{align-items:center}
.checks-grid input[type=checkbox]{
  width:1.2rem;height:1.2rem;flex:none;accent-color:var(--sage-deep);margin-top:0;
}
.checks-grid label:has(input:checked){
  border-color:var(--sage-deep);background:var(--sage-soft);
  box-shadow:inset 0 0 0 1px var(--sage-deep);
}

/* ---------- step transition: subtle,no page jump ---------- */
.step-in{animation:stepIn .19s ease-out both}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .step-in{animation:none!important}
}

/* =========================================================================
   REVISION — type system,mobile CTA group,return-to-top
   ========================================================================= */

/* ---------- Interface text stays sans for clarity (per brief) ---------- */
input,select,textarea,button,.f label,.label,.opt,.svc-hint,.chk,.radios label,.eyebrow,.a-k,.prog-label,.sss-label,.sss-chip,.tab,.places li,.market-tiles li,.svc-cat ul li,.svc-row-body ul li,.case dt,.rev-src,.ftr-contact span,.ftr-google span,.ftr-copy,.mobar a,.filter-count,.checker label,.review dt{
  font-family:var(--ui);
}
/* Body copy,descriptions,answers and legal stay in Source Serif 4 */
p,li,dd,blockquote,.section-lede,.pagehead-lede,.faq p,.ftr-legal p,.home-list p,.svc-row-head p,.svc-head p,.region-grid p,.trust-list p,.com-p,.com-note,.com-fine,.tab-lede,.cc-n,.rev-feature p:not(.stars),.rev-grid p:not(.stars),.pricing-note,.rfp-note,.privacy-note,.note-line,.travel-note p,.checker-note,.checker-intro,.fallback,.bigcta p{
  font-family:var(--body);
}
/* Headings keep the display face */
h1,h2,h3,legend,.cc-k,.ftr-name,.about-slogan,.about-slogan-lg,.faq summary,.hero-slogan,.ftr-slogan{font-family:var(--display)}

/* Source Serif 4 and EB Garamond run larger than Inter/Fraunces at the same
   px size — nudge the base down slightly so line length and rhythm hold. */
body{font-size:1.015rem;line-height:1.62}
h1,h2,h3,legend{letter-spacing:-.008em}
.faq summary{font-size:1.1rem}

/* ---------- REVISION 1: unified mobile menu CTA group ---------- */

/* ---------- REVISION 3: return-to-top ---------- */
.to-top{
  position:fixed;right:16px;bottom:84px;z-index:65;   /* clears the mobile action bar */
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;padding:.6rem .95rem;
  background:var(--forest);color:var(--bone);
  border:1px solid rgba(250,246,238,.18);border-radius:999px;
  font-family:var(--ui);font-weight:650;font-size:.85rem;letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(21,32,23,.28);cursor:pointer;
  opacity:0;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,background .16s ease;
}
.to-top[hidden]{display:none}
.to-top.is-visible{opacity:1;transform:none}
.to-top:hover{background:#2A3C2C}
.to-top:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}
.to-top svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:901px){.to-top{bottom:24px;right:24px}}
@media (prefers-reduced-motion:reduce){
  .to-top{transition:none;opacity:1;transform:none}
}

/* =========================================================================
   BRAND LOGO — single authoritative system.
   All earlier .brand-logo / .ftr-logo / .brand-rule / .brand-sub rules were
   removed; this block is the only place the logo is sized.
   Asset: images/logo/gardinus-logo-transparent.webp — true alpha, tightly
   cropped (1200×728, aspect 1.648), so no white plate and no dead canvas.
   ========================================================================= */

/* ---------- Header ---------- */

@media (max-width:1180px){                 /* tablet — hamburger takes over */
  
  
}
@media (max-width:640px){                  /* mobile */
  
  
}
@media (max-width:400px){                  /* narrow phones — Menu still fits */
  
  
}

/* anchors clear the collapsed sticky header */

/* ---------- Footer ---------- */
/* No background plate, no filter tricks — the asset's own transparency lets the
   forest green show through. */

/* =========================================================================
   HEADER SYSTEM — single authoritative responsive block.
   All earlier header/nav/brand/burger/CTA rules were removed; nothing below
   overrides anything above. Breakpoint: 1180px.
   Logo aspect is 1.648:1, so every header height below = logo height + ~19px.
   ========================================================================= */

/* ---------- Shell ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(250,246,238,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr-main{background:var(--bone)}

/* ---------- Utility bar (desktop only, folds away on scroll) ---------- */
.utility{
  background:var(--bone);border-bottom:1px solid var(--line);
  overflow:hidden;max-height:38px;opacity:1;
  transition:max-height .28s ease,opacity .2s ease;
}
.utility-in{
  max-width:1180px;margin:0 auto;padding:0 var(--pad);
  height:37px;display:flex;align-items:center;gap:1rem;
}
.utility-area{
  margin:0;font-family:var(--ui);font-size:.735rem;font-weight:600;
  letter-spacing:.07em;color:var(--muted);white-space:nowrap;
}
.utility-links{margin-left:auto;display:flex;align-items:center;gap:.85rem;white-space:nowrap}
.utility-links a{
  font-family:var(--ui);font-size:.795rem;font-weight:600;letter-spacing:.03em;
  color:var(--forest);text-decoration:none;padding:.15rem 0;border-bottom:1px solid transparent;
}
.utility-links a:hover{color:var(--sage-deep);border-bottom-color:var(--sage-deep)}
.u-sep{color:var(--line);font-size:.8rem;user-select:none}
.u-cta{color:var(--gold)!important;font-weight:700!important}
.u-cta:hover{border-bottom-color:var(--gold)!important}
.hdr.is-scrolled .utility{max-height:0;opacity:0;border-bottom-color:transparent}

/* ---------- Brand: authentic transparent logo, no HTML text ---------- */

/* ---------- Desktop navigation ---------- */
.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:clamp(1rem,1.9vw,1.85rem);list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav ul li{white-space:nowrap}
.nav a{
  display:inline-block;white-space:nowrap;text-decoration:none;font-family:var(--ui);
  font-size:clamp(.855rem,1.02vw,.95rem);font-weight:550;color:var(--charcoal);
  padding:.4rem 0;border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.nav a:hover{color:var(--forest);border-bottom-color:var(--gold-bright)}
.nav a[aria-current="page"]{color:var(--forest);border-bottom-color:var(--gold-bright)}

/* ---------- Burger ---------- */
.burger{
  display:none;margin-left:auto;align-items:center;gap:.5rem;
  background:var(--forest);color:#fff;border:0;border-radius:var(--r);
  padding:.6rem 1rem;min-height:44px;cursor:pointer;
  font-family:var(--ui);font-weight:650;font-size:.92rem;
}
.burger-bars{display:grid;gap:3px}
.burger-bars span{display:block;width:17px;height:2px;background:#fff;border-radius:2px}

/* ---------- Mobile CTA group: HIDDEN BY DEFAULT (the desktop bug) ---------- */
.mobile-cta-group{display:none}
.mcta{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;padding:.85rem 1.2rem;
  border-radius:var(--r);
  font-family:var(--ui);font-weight:650;font-size:1rem;letter-spacing:.005em;
  text-align:center;text-decoration:none;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .1s ease;
}
.mcta-secondary{background:var(--sage-soft);color:var(--forest);border:1px solid var(--sage-deep)}
.mcta-secondary:hover{background:var(--bone-2)}
.mcta-primary{background:var(--gold-bright);color:#201A08;border:1px solid var(--gold)}
.mcta-primary:hover{background:#D8B663}
.mcta:active{transform:translateY(1px)}
.mcta:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- Desktop lock: CTA group can never appear beside the nav ---------- */
@media (min-width:1181px){
  .burger{display:none!important}
  .mobile-cta-group{display:none!important}
}

/* ---------- Tablet / mobile ---------- */
@media (max-width:1180px){
  .utility{display:none}
  
  
  .burger{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;margin:0;background:var(--bone);
    border-bottom:1px solid var(--line);box-shadow:var(--sh-2);display:none;
    max-height:calc(100vh - 118px);overflow-y:auto;
  }
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:.4rem var(--pad) .6rem;flex-wrap:wrap}
  .nav li{border-bottom:1px solid var(--line)}
  .nav a{display:block;padding:.95rem 0;font-size:1rem;border-bottom:0}
  .nav a[aria-current="page"]{color:var(--gold);border-bottom:0}
  /* only inside an OPENED mobile menu */
  .nav.open .mobile-cta-group{
    display:grid;gap:.6rem;
    margin-top:.4rem;padding:1.1rem var(--pad) 1.4rem;
    border-top:1px solid var(--line);
  }
}
@media (max-width:640px){
  
  
  .nav{max-height:calc(100vh - 106px)}
}
@media (max-width:400px){
  
  
  .nav{max-height:calc(100vh - 100px)}
}

/* ---------- Sticky-header anchor offsets ---------- */

@media (prefers-reduced-motion:reduce){
  .utility,.mcta{transition:none!important}
  .mcta:active{transform:none}
}

/* =========================================================================
   BUG FIX — footer logo + form progress indicator
   Root causes removed, not overridden:
   · `.ftr-brand img{background:#fff;padding:9px;width:130px}` deleted — it
     outranked `.ftr-logo` (0-0-1-1 vs 0-0-1-0), producing the white plate.
   · Progress segments no longer use `.done` / `.now`. `.done` is the
     form-success panel (padding 2.2rem, border, margin) and the thin spans
     were inheriting it, which is what drew the giant empty boxes.
   ========================================================================= */

/* ---------- Footer logo: the only rule that sizes it ---------- */

/* the brand column needs room for the larger mark without squeezing Contact */

/* ---------- Form progress: scoped state classes, immune to `.done` ---------- */
.prog{
  display:flex;align-items:center;gap:.4rem;
  width:100%;margin:.45rem 0 .65rem;
}
.prog span{
  display:block;flex:1 1 0;min-width:0;
  height:4px;
  padding:0;margin:0;border:0;border-radius:999px;
  background:rgba(255,255,255,.22);
  text-align:left;box-shadow:none;
}
.prog span.is-complete{background:var(--sage)}
.prog span.is-current{background:var(--gold-bright)}

/* =========================================================================
   BRANDING — one authoritative system for both logos.
   Asset: images/logo/gardinus-logo-clean.webp, exported from the ORIGINAL
   finalLogo.PNG (genuine RGBA; anti-aliased edges are pink, not white, so
   there is no matte to decontaminate). 900×542, aspect 1.6605.
   No background, padding plate, blend mode or filter anywhere — the alpha
   channel does the work. Header height = logo height + ~11px.
   ========================================================================= */

/* ---------- Header logo ---------- */
.brand{display:flex;align-items:center;gap:0;flex:none;text-decoration:none}
.brand-logo{
  display:block;
  width:clamp(170px,15.5vw,190px);
  height:auto;max-width:100%;object-fit:contain;
  background:none;padding:0;border:0;border-radius:0;box-shadow:none;
  transition:width .28s ease;
}
.hdr.is-scrolled .brand-logo{width:clamp(142px,12.5vw,155px)}

.hdr-in{
  max-width:1180px;margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;
  gap:clamp(1rem,2.5vw,2.5rem);
  min-height:126px;
}
.hdr.is-scrolled .hdr-in{min-height:106px}
@media (max-width:1180px){
  .hdr-in,.hdr.is-scrolled .hdr-in{min-height:118px}
  .brand-logo,.hdr.is-scrolled .brand-logo{width:178px}
}
@media (max-width:640px){
  .hdr-in,.hdr.is-scrolled .hdr-in{min-height:106px}
  .brand-logo,.hdr.is-scrolled .brand-logo{width:158px}
}
@media (max-width:400px){
  .hdr-in,.hdr.is-scrolled .hdr-in{min-height:100px}
  .brand-logo,.hdr.is-scrolled .brand-logo{width:148px}
}

/* ---------- Footer-aware sticky header ---------- */
.hdr{transition:transform .22s ease,box-shadow .22s ease}
.hdr.footer-in-view{transform:translateY(-100%);box-shadow:none}
/* never slide away from a keyboard user working inside it */
.hdr:focus-within{transform:none!important}

/* ---------- Footer logo ---------- */
.ftr-logo{
  display:block;
  width:clamp(200px,17vw,235px);
  max-width:100%;height:auto;object-fit:contain;
  background:transparent;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;
}
@media (max-width:980px){.ftr-logo{width:clamp(185px,26vw,215px)}}
@media (max-width:640px){.ftr-logo{width:clamp(170px,50vw,200px)}}

/* ---------- Footer grid: balanced, top-aligned ---------- */
.ftr-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1.2fr;
  gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;
}
.ftr-brand{min-width:0;padding-top:.1rem}
@media (max-width:980px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ftr-grid{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- Sticky-header anchor offsets ---------- */

@media (prefers-reduced-motion:reduce){
  .hdr,.brand-logo{transition:none!important}
}


/* =========================================================================
   ANCHOR OFFSET — single authoritative declaration.
   Eight copies of this rule had accumulated across revisions with different
   values; only the last one ever applied. article[id] is included because the
   services jump-nav targets individual <article> rows.
   ========================================================================= */
section[id],div[id],footer[id],main[id],article[id]{scroll-margin-top:118px}
@media (max-width:1180px){section[id],div[id],footer[id],main[id],article[id]{scroll-margin-top:130px}}
@media (max-width:640px){section[id],div[id],footer[id],main[id],article[id]{scroll-margin-top:118px}}

/* =========================================================================
   SAFE-AREA INSETS — iPhone home-indicator / gesture bar.
   Without these the sticky action bar sits under the indicator and its bottom
   row of tap targets is partially unreachable.
   ========================================================================= */
body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
.mobar{padding-bottom:env(safe-area-inset-bottom,0px)}
.mobar a{min-height:56px}
@media (min-width:901px){body{padding-bottom:0}}
.to-top{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media (min-width:901px){.to-top{bottom:24px}}

/* =========================================================================
   SERVICES — jump-to-service navigation
   ========================================================================= */
.svc-jump{background:var(--bone-2);border-block:1px solid var(--line);padding:1.15rem 0}
.svc-jump-h{font-family:var(--ui);font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.svc-jump-list{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0}
.svc-jump-list a{display:inline-block;font-family:var(--ui);font-size:.855rem;font-weight:600;
  text-decoration:none;color:var(--forest);background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;
  min-height:44px;display:inline-flex;align-items:center;
  transition:background .15s ease,border-color .15s ease}
.svc-jump-list a:hover{background:var(--sage-soft);border-color:var(--sage)}
.svc-jump-list a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:640px){
  .svc-jump{padding:.9rem 0}
  .svc-jump-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;
    padding-bottom:.35rem;-webkit-overflow-scrolling:touch}
  .svc-jump-list li{flex:none}
}

/* =========================================================================
   COMMERCIAL — built for managed properties
   ========================================================================= */
.mgd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(265px, 100%), 1fr));
  gap:1.15rem;margin-top:1.8rem}
.mgd{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem 1.4rem}
.mgd h3{font-size:1.08rem;margin-bottom:.45rem}
.mgd p{margin:0;font-size:.93rem;color:var(--muted);line-height:1.6}
.mgd a{color:var(--gold);font-weight:600}
.mgd-cta{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.mgd-cta p{flex:1 1 320px;margin:0;color:var(--muted);font-size:.95rem}

/* Commercial proof cards — render only when COMMERCIAL_PROOF has entries */
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(285px, 100%), 1fr));
  gap:1.15rem;margin-top:1.7rem}
.proof{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.4rem}
.proof h3{font-size:1.1rem;margin-bottom:.8rem}
.proof-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:0 0 .9rem;font-size:.9rem}
.proof-meta dt{font-family:var(--ui);font-size:.74rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.proof-meta dd{margin:0;color:var(--ink)}
.proof-result{margin:0;font-size:.93rem;color:var(--muted)}
.proof-quote{margin:1rem 0 0;padding-left:1rem;border-left:3px solid var(--sage)}
.proof-quote p{font-size:.93rem;font-style:italic;margin:0 0 .4rem}
.proof-quote footer{font-family:var(--ui);font-size:.8rem;color:var(--muted)}

/* =========================================================================
   HOME SERVICES — what to expect
   ========================================================================= */
.expect-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(255px, 100%), 1fr));
  gap:1.1rem;margin-top:1.7rem}
.expect{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.3rem}
.expect h3{font-size:1.04rem;margin-bottom:.4rem}
.expect p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.6}
.expect a{color:var(--gold);font-weight:600}
.policy-block{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.policy-list{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.1rem;margin:.9rem 0 0;font-size:.93rem}
.policy-list dt{font-weight:700;color:var(--ink)}
.policy-list dd{margin:0;color:var(--muted)}

/* Testimonial cards (registry-driven) */
.tst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(265px, 100%), 1fr));gap:1.1rem;margin-top:1.6rem}
.tst{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem 1.4rem;margin:0}
.tst p{font-size:.95rem;line-height:1.65;margin:0 0 .8rem}
.tst footer{display:flex;flex-direction:column;gap:.1rem}

/* =========================================================================
   ABOUT — how we work, crew, credentials
   ========================================================================= */
.how-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(235px, 100%), 1fr));gap:1.1rem;margin-top:1.7rem}
.how{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.3rem}
.how h3{font-size:1rem;margin-bottom:.4rem;color:var(--sage-deep)}
.how p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.6}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(215px, 100%), 1fr));gap:1.3rem;margin-top:1.7rem}
.team-member img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--r-lg);margin-bottom:.8rem}
.team-member h3{font-size:1.05rem;margin-bottom:.15rem}
.team-role{font-family:var(--ui);font-size:.8rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.badge-list{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(215px, 100%), 1fr));gap:.9rem}
.badge-list li{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.2rem}
.badge-list strong{font-size:.98rem}
.badge-list span{font-size:.87rem;color:var(--muted)}

/* =========================================================================
   404
   ========================================================================= */
.err-wrap{padding-block:1rem}
.err-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 2.6rem}
.err-h2{font-size:1.15rem;margin-bottom:1rem}
.err-links{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(255px, 100%), 1fr));gap:.55rem}
.err-links li{border-bottom:1px solid var(--line);padding:.75rem 0;display:flex;
  flex-direction:column;gap:.1rem}
.err-links a{font-weight:700;text-decoration:none;color:var(--forest);min-height:24px}
.err-links a:hover{text-decoration:underline}
.err-links span{font-size:.87rem;color:var(--muted)}

/* Reduced motion: the jump nav and anchors must not animate */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .svc-jump-list a{transition:none}
}


/* =========================================================================
   TAP TARGETS — WCAG 2.2 SC 2.5.8 (Target Size, Minimum, AA) is 24x24 CSS px;
   these go to 44px on touch widths, which is the comfortable thumb target.
   Applied only at <=900px so desktop line-heights and rhythm are untouched.
   The exception in 2.5.8 for links inline in a sentence is why prose links
   and the dense footer legal paragraph are deliberately not included.
   ========================================================================= */
@media (max-width:900px){
  .ftr ul li a,
  .ftr-contact li a,
  .ftr-google a,
  .svc-cat > a,
  .home-list a,
  .svc-row-body a,
  .mgd a,
  .expect a,
  .err-links a,
  .section-more a,
  .proj-svcs a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  /* Footer columns: keep the rows visually tight while the hit area grows. */
  .ftr ul li{margin-bottom:.1rem}
  .ftr-contact li{align-items:center}
}

/* A checkbox/radio is small by nature; its label is the real target, so give
   the label the height rather than inflating the control itself. */
.chk,.radios label,.opt-box{min-height:44px;display:flex;align-items:center;gap:.6rem}
@media (max-width:900px){
  .f label{min-height:24px;display:flex;align-items:center}
}

/* Standalone CTA link row — separate targets, so 2.5.8 applies (not inline prose). */
@media (max-width:900px){
  .bigcta-links a{min-height:44px;display:inline-flex;align-items:center}
  .bigcta-links{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:center;justify-content:center}
}

/* Button styled as a link, used to hop between intake paths. */
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--gold);
  font-weight:650;text-decoration:underline;cursor:pointer;min-height:44px}
.linklike:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}