/* Handy Property Care — design system
   Minimal, clean, modern. Warm paper base, deep forest anchors,
   condensed display type carried over from the logo. */

:root{
  --forest:#023604;
  --forest-soft:#0a4a12;
  --green:#018001;
  --green-dark:#016701;
  --green-light:#7ac47c;
  /* Hero town names. Measured against the actual photo behind them:
     the brand #018001 and the original #1f830f both sit under 3:1.
     This clears it on desktop and mobile. */
  --hero-green:#6acf4f;
  --ink:#16211a;
  --muted:#5a665d;
  --paper:#ffffff;
  --sand:#f6f5f1;
  --sand-deep:#eceae2;
  --line:#e4e2da;
  --line-dark:rgba(255,255,255,.18);

  --display:"Saira Condensed",'Arial Narrow',system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --wrap:1700px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --radius:4px;
  --shadow:0 1px 2px rgba(22,33,26,.06),0 8px 24px -12px rgba(22,33,26,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-dark);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--forest)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.005em;margin:0 0 .5em;color:var(--forest)}
h1{font-size:clamp(2.25rem,7.5vw,4.5rem);font-weight:800;text-transform:uppercase;letter-spacing:.005em}
h2{font-size:clamp(2rem,4.6vw,3rem);text-transform:uppercase}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem)}
h4{font-size:1.1rem}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:70ch}
.section{padding-block:clamp(3.5rem,8vw,6rem)}
.section--sand{background:var(--sand)}
.section--forest{background:var(--forest);color:#e9efe9}
.section--forest h2,.section--forest h3{color:#fff}
.section--forest a:not(.btn){color:var(--green-light)}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:#fff;padding:.75rem 1.25rem;z-index:200}
.skip:focus{left:0}

.eyebrow{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;font-size:.9rem;color:var(--green);margin:0 0 .75rem;
  display:flex;align-items:flex-start;gap:.6rem;
}
.eyebrow::before{content:"";width:1.75rem;height:2px;background:var(--green);flex:none;margin-top:.62em}
.section--forest .eyebrow{color:var(--green-light)}
.section--forest .eyebrow::before{background:var(--green-light)}
.lede{font-size:clamp(1.1rem,1.9vw,1.3rem);color:var(--muted);max-width:62ch}
.section--forest .lede{color:#c9d6c9}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:1.0625rem;padding:.85rem 1.6rem;border-radius:var(--radius);
  border:2px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:1.05em;height:1.05em;flex:none;stroke-width:2}
.btn--primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn--primary:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.btn--ghost{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn--ghost:hover{background:var(--forest);color:#fff}
.btn--light{background:#fff;color:#073705;border-color:#fff}
.btn--light:hover{background:transparent;color:#fff;border-color:#fff}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--outline-light:hover{background:#fff;color:var(--forest);border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem}

/* ---------- top bar ---------- */
.topbar{background:var(--forest);color:#cfdccf;font-size:.875rem}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:1.5rem;min-height:2.5rem;flex-wrap:wrap}
.topbar a{color:#cfdccf;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar svg{width:15px;height:15px;flex:none;stroke:var(--green-light)}
@media (max-width:680px){.topbar .topbar__email{display:none}}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header__inner{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
.brand{flex:none;display:block;line-height:0}
.brand img{width:190px;height:59px}
.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav a,.nav button{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:1rem;color:var(--forest);text-decoration:none;padding:.6rem .75rem;border-radius:var(--radius);
  background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;
}
.nav a:hover,.nav button:hover{background:var(--sand);color:var(--green-dark)}
.nav a[aria-current="page"]{color:var(--green);box-shadow:inset 0 -2px 0 var(--green)}
.nav__group{position:relative}
/* transparent strip across the gap so the pointer can travel from the
   button to the menu without the hover dropping out */
.nav__group::after{content:"";position:absolute;left:0;right:0;top:100%;height:.6rem}
.nav__group svg{width:11px;height:11px;transition:transform .2s ease;stroke:currentColor}
.nav__group[data-open="true"] svg{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:calc(100% + .4rem);left:0;min-width:16rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:.4rem;display:none;
}
.nav__group[data-open="true"] .nav__menu{display:block}
.nav__menu a{display:block;font-size:.95rem;padding:.6rem .75rem;letter-spacing:.03em}
.header .btn{margin-left:.5rem;padding:.7rem 1.2rem;font-size:1rem}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--radius);padding:.6rem;cursor:pointer}
.burger svg{width:22px;height:22px;stroke:var(--forest);display:block}
@media (max-width:960px){
  .nav{display:none}
  .header .btn{display:none}
  .burger{display:block}
  .brand img{width:158px;height:49px}
}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:150;display:none}
.drawer[data-open="true"]{display:block}
.drawer__scrim{position:absolute;inset:0;background:rgba(2,54,4,.5)}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(21rem,88vw);background:#fff;
  padding:1.25rem;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;
}
.drawer__close{align-self:flex-end;background:none;border:0;padding:.5rem;cursor:pointer}
.drawer__close svg{width:24px;height:24px;stroke:var(--forest);display:block}
.drawer a{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--forest);text-decoration:none;padding:.75rem .25rem;border-bottom:1px solid var(--line);font-size:1.15rem;
}
.drawer__group{border-bottom:1px solid var(--line)}
.drawer__group summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--forest);padding:.75rem .25rem;font-size:1.15rem;
}
.drawer__group summary::-webkit-details-marker{display:none}
.drawer__group summary svg{width:14px;height:14px;stroke:var(--green);transition:transform .2s ease}
.drawer__group[open] summary{color:var(--green-dark)}
.drawer__group[open] summary svg{transform:rotate(180deg)}
.drawer__sub{display:grid;padding-bottom:.5rem}
.drawer a.is-sub{
  font-size:1rem;padding:.65rem .25rem .65rem 1.1rem;color:var(--muted);
  border-bottom:0;border-left:2px solid var(--line);margin-left:.15rem;
}
.drawer a.is-sub:hover{color:var(--green-dark);border-left-color:var(--green)}
.drawer .btn{margin-top:1.25rem}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--forest);color:#fff;overflow:hidden;
  min-height:min(86vh,840px);display:flex;align-items:flex-end;
}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(2,24,4,.93) 0%,rgba(2,26,5,.78) 22%,rgba(2,28,5,.42) 46%,rgba(2,28,5,.12) 72%,rgba(2,28,5,0) 100%),
    linear-gradient(to right,rgba(2,24,4,.45) 0%,rgba(2,24,4,.08) 45%,rgba(2,24,4,0) 70%);
}
.hero__inner{position:relative;padding-block:clamp(3rem,7vw,5rem);width:100%}
.hero h1{
  color:#fff;margin:0;
  font-size:clamp(2.4rem,6.4vw,5rem);
  text-shadow:0 2px 24px rgba(2,24,4,.5);
}
.hero h1 em{font-style:normal;color:var(--hero-green);display:block}
.hero__lede{
  font-size:clamp(1.05rem,1.7vw,1.35rem);color:#dce7dc;max-width:46ch;margin-bottom:0;
  text-shadow:0 1px 12px rgba(2,24,4,.6);
}
.hero__aside{margin-top:1.5rem}
.hero .btn-row{margin-top:1.5rem}

@media (max-width:820px){
  .hero{min-height:min(78vh,680px)}
  .hero__media img{object-position:center 58%}
  .hero__media::after{
    background:linear-gradient(to top,rgba(2,24,4,.92) 0%,rgba(2,28,5,.7) 34%,rgba(2,28,5,.3) 64%,rgba(2,28,5,.1) 100%);
  }
}

/* Trust strip now sits below the hero, so the hero stays photograph and CTA. */
.trustbar{background:var(--sand);border-bottom:1px solid var(--line)}
.trustbar ul{
  list-style:none;margin:0;padding:1.15rem 0;display:grid;gap:.8rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.trustbar li{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:var(--muted)}
.trustbar svg{width:20px;height:20px;flex:none;stroke:var(--green)}
.trustbar li:first-child svg{fill:#f5b700;stroke:none}
.trustbar strong{color:var(--forest);font-weight:600}

/* ---------- answer block (AEO) ---------- */
.answer{
  background:var(--sand);border-left:4px solid var(--green);
  padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--radius);
  max-width:75%;margin-bottom:clamp(2rem,4vw,3rem);
}
.answer p{font-size:1.15rem;margin:0 0 .9em}
.answer p:last-child{margin-bottom:0}
@media (max-width:1023px){.answer{max-width:none}}
/* Side by side once the block is wide enough that one measure would be unreadable.
   A grid rather than CSS columns, so a sentence never breaks across the gap. */
@media (min-width:1100px){
  .answer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,3vw,3.5rem);align-items:start}
  .answer p{margin:0}
}
.answer p strong{color:var(--forest)}

/* ---------- generic grids ---------- */
.grid{display:grid;gap:1.25rem}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
@media (min-width:900px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1280px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
.split p,.split .ticks{max-width:60ch}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr}.split--reverse>*:first-child{order:2}}
@media (min-width:1280px){.split{grid-template-columns:1fr 1fr;gap:clamp(3rem,5vw,5.5rem)}}

.section__head{margin-bottom:clamp(2rem,4vw,3rem);max-width:64ch}
.section__head:has(+ .answer){margin-bottom:clamp(1.5rem,3vw,2rem)}
.section__head p{margin-bottom:0}

/* ---------- service cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.card:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow)}
.card__icon{width:2.5rem;height:2.5rem;stroke:var(--green);stroke-width:1.5;fill:none;margin-bottom:.35rem}
.card h3{margin:0;font-size:1.4rem;text-transform:uppercase}
.card p{color:var(--muted);font-size:.975rem;margin:0}
.card__link{
  margin-top:auto;padding-top:.85rem;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:var(--green-dark);
  text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
}
.card a.card__link::after{content:"";width:.9rem;height:.9rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.card:hover a.card__link::after{transform:rotate(45deg) translate(2px,-2px)}
.card__link--muted{color:var(--muted)}

/* ---------- gallery ---------- */
.gallery{
  display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));
}
@media (min-width:1280px){.gallery{grid-template-columns:repeat(4,1fr);gap:1rem}}
@media (min-width:900px){.gallery--wide{grid-template-columns:repeat(2,1fr);gap:1.25rem}}
@media (min-width:1280px){.gallery--wide{grid-template-columns:repeat(4,1fr)}}
.gallery__item{
  position:relative;margin:0;padding:0;border:0;background:var(--sand-deep);
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);cursor:zoom-in;
}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gallery__item:hover img,.gallery__item:focus-visible img{transform:scale(1.05)}
.gallery__item figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.6rem .85rem .7rem;
  background:linear-gradient(to top,rgba(2,30,4,.85),transparent);
  color:#fff;font-size:.85rem;text-align:left;line-height:1.35;
}
.gallery__more{display:flex;justify-content:center;margin-top:1.5rem}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(2,24,4,.95);display:none;align-items:center;justify-content:center;padding:1.5rem}
.lightbox[data-open="true"]{display:flex}
.lightbox img{max-width:min(92vw,1200px);max-height:82vh;object-fit:contain;border-radius:var(--radius)}
.lightbox__cap{position:absolute;bottom:1.25rem;left:0;right:0;text-align:center;color:#d5e2d5;font-size:.95rem;padding-inline:1.5rem}
.lightbox__btn{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:50%;width:3rem;height:3rem;display:grid;place-items:center;cursor:pointer;color:#fff}
.lightbox__btn:hover{background:rgba(255,255,255,.22)}
.lightbox__btn svg{width:22px;height:22px;stroke:#fff}
.lightbox__close{top:1.25rem;right:1.25rem}
.lightbox__prev{left:1.25rem;top:50%;transform:translateY(-50%)}
.lightbox__next{right:1.25rem;top:50%;transform:translateY(-50%)}

/* ---------- about ---------- */
.about__media{position:relative}
.about__media img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center}
.about__badge{
  position:absolute;right:-.75rem;bottom:-1.25rem;background:var(--green);color:#fff;
  padding:1rem 1.35rem;border-radius:var(--radius);font-family:var(--display);line-height:1.05;text-align:center;
  box-shadow:var(--shadow);
}
.about__badge b{display:block;font-size:2.4rem;font-weight:800}
.about__badge span{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}
/* Match the photo height to the text column instead of letting the 4/3 ratio
   decide it and leave a gap underneath. Only once the columns are even at
   1280px: in the 900-1280 band the text column is narrow enough to run very
   tall, and stretching there crops the photo to a sliver (0.43 at 920px).
   From 1280px the crop stays a clean portrait with Dan centred.
   NB .about__media is also used by the "Ongoing upkeep" section, so this is
   scoped to #about rather than the bare class. */
@media (min-width:1280px){
  #about .about__media{align-self:stretch}
  #about .about__media img{height:100%;aspect-ratio:auto}
}
.ticks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start}
@media (min-width:900px){.ticks--two{grid-template-columns:1fr 1fr;gap:.9rem 2.5rem}}
.ticks svg{width:20px;height:20px;flex:none;margin-top:.22rem;stroke:var(--green)}
.section--forest .ticks svg{stroke:var(--green-light)}

/* ---------- reviews ---------- */
.reviews__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2.5rem}
.rating{display:flex;align-items:center;gap:.9rem}
.rating__score{font-family:var(--display);font-size:3.5rem;font-weight:800;line-height:1;color:#fff}
.stars{display:flex;gap:.15rem}
.stars svg{width:18px;height:18px;fill:#f5b700}
.rating__meta{font-size:.9rem;color:#c9d6c9}
.rating__meta a{color:var(--green-light)}
.reviews{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
@media (min-width:1280px){.reviews{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
/* figure carries a default margin of 1em 40px, which was making these
   80px narrower than their grid column. */
.review{margin:0;background:rgba(255,255,255,.055);border:1px solid var(--line-dark);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:.85rem}
.review blockquote{margin:0;font-size:.975rem;color:#e0e9e0;line-height:1.6}
.review figcaption{display:flex;align-items:center;gap:.7rem;margin-top:auto;font-size:.9rem;color:#c9d6c9}
.review__avatar{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;flex:none}
.review cite{font-style:normal;font-weight:600;color:#fff;display:block}
.review .stars svg{width:14px;height:14px}

/* ---------- areas ---------- */
.areas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.areas li{
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:.5rem 1.1rem;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:var(--forest);
}

/* ---------- FAQ ---------- */
.faq{max-width:56rem;display:grid;gap:.6rem}
.faq-layout{display:grid;gap:clamp(2rem,4vw,4rem)}
@media (min-width:1100px){
  .faq-layout{grid-template-columns:minmax(18rem,26rem) 1fr;align-items:start}
  .faq-layout .section__head{margin-bottom:0;position:sticky;top:7rem}
  .faq{max-width:none}
}
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.faq details[open]{border-color:var(--green)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.1rem 3.25rem 1.1rem 1.35rem;position:relative;
  font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--forest);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--sand)}
.faq summary::after{
  content:"";position:absolute;right:1.35rem;top:1.45rem;width:.7rem;height:.7rem;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.6rem}
.faq .faq__body{padding:0 1.35rem 1.35rem;color:var(--muted)}

/* ---------- contact ---------- */
.contact{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1fr}
@media (min-width:900px){.contact{grid-template-columns:1fr 1fr}}
@media (min-width:1280px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(3rem,6vw,6rem)}}
.form{display:grid;gap:1rem;max-width:42rem}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:var(--forest)}
.field .req{color:var(--green)}
.field input,.field textarea,.field select{
  font:inherit;font-size:1rem;padding:.8rem .9rem;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink);width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green);outline:2px solid rgba(1,128,1,.2);outline-offset:0}
.field textarea{min-height:8rem;resize:vertical}
.form__note{font-size:.85rem;color:var(--muted);margin:0}
.hp{position:absolute;left:-9999px}

.details{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
.details li{display:flex;gap:1.1rem;align-items:flex-start}
.details svg{width:28px;height:28px;flex:none;margin-top:.15rem;stroke:var(--green);stroke-width:1.6}
.details b{
  display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;
  font-size:1rem;color:var(--green-dark);margin-bottom:.15rem;
}
.details a,.details__val{color:var(--ink);text-decoration:none;font-size:1.25rem;line-height:1.4}
.details a:hover{color:var(--green-dark);text-decoration:underline}
.hours{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.5rem;font-size:1.25rem;line-height:1.4}
.hours dt{color:var(--muted)}
.hours dd{margin:0;font-weight:500}

/* ---------- footer ---------- */
.footer{background:var(--forest);color:#b9c9b9;font-size:.95rem;padding-block:clamp(3rem,6vw,4rem) 0}
.footer__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));padding-bottom:3rem}
.footer img{width:200px;height:62px;margin-bottom:1rem}
.footer h2{color:#fff;font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;line-height:1.2}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer a{color:#b9c9b9;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__bar{border-top:1px solid var(--line-dark);padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.875rem}
.social{display:flex;gap:.6rem;margin-top:1.25rem}
.social a{width:2.4rem;height:2.4rem;border:1px solid var(--line-dark);border-radius:var(--radius);display:grid;place-items:center}
.social a:hover{background:var(--green);border-color:var(--green)}
.social svg{width:18px;height:18px;fill:currentColor}

/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- interior page header ---------- */
.pagehead{background:var(--forest);color:#fff;padding-block:clamp(2.5rem,6vw,4.5rem)}
.pagehead h1{color:#fff;font-size:clamp(2.25rem,5.5vw,3.75rem);margin-bottom:.35em}
.pagehead__lede{font-size:clamp(1.05rem,1.8vw,1.25rem);color:#d5e2d5;max-width:54ch;margin:0}
.crumbs{margin-bottom:1.5rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;font-size:.9rem;color:#a8bda8}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:#6d876d}
.crumbs a{color:#a8bda8}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff}

/* ---------- contact page ---------- */
.field-row{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.panel{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem)}
.panel h2{margin-bottom:1.5rem}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
@media (min-width:1100px){.steps{grid-template-columns:repeat(3,1fr);gap:2rem}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.75rem;position:relative}
.step__n{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--green);color:#fff;font-family:var(--display);font-weight:800;font-size:1.3rem;margin-bottom:1rem;
}
.step h3{font-size:1.3rem;text-transform:uppercase;margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.975rem;margin:0}

.tick-badge{
  display:grid;place-items:center;width:4.5rem;height:4.5rem;border-radius:50%;
  background:var(--green);color:#fff;margin:0 auto 1.5rem;
}
.tick-badge svg{width:2.25rem;height:2.25rem;stroke-width:2.5}

/* ---------- 404 ---------- */
.notfound__num{
  font-family:var(--display);font-weight:800;line-height:.82;
  font-size:clamp(5rem,18vw,13rem);color:var(--hero-green);
  margin:0 0 .15em;letter-spacing:-.02em;
}
.notfound h1{font-size:clamp(2rem,5vw,3.5rem)}

/* ---------- blog ---------- */
.postgrid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
@media (min-width:1280px){.postgrid{grid-template-columns:repeat(3,1fr);gap:2rem}}
.postcard{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin:0;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.postcard{position:relative}
.postcard:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow)}
.postcard__title a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.postcard:focus-within{border-color:var(--green)}
.postcard__title a:focus-visible{outline:none}
.postcard:focus-within{outline:3px solid var(--green);outline-offset:3px}
.postcard__media{aspect-ratio:16/10;overflow:hidden;background:var(--sand-deep)}
.postcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.postcard:hover .postcard__media img{transform:scale(1.04)}
.postcard__body{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.postcard__meta{font-size:.85rem;color:var(--muted);margin:0;text-transform:uppercase;letter-spacing:.06em}
.postcard__title{margin:0;font-size:1.35rem;line-height:1.2;text-transform:none;letter-spacing:0}
.postcard__title a{color:var(--forest);text-decoration:none}
.postcard:hover .postcard__title a{color:var(--green-dark)}
.postcard p{color:var(--muted);font-size:.975rem;margin:0}
.postcard .card__link{margin-top:auto;padding-top:.85rem}

/* The post page runs to 1400px so it does not look thin against the rest of
   the site. The reading column itself stays at 46rem, because 1400px of prose
   is roughly 190 characters a line and unreadable. The width goes to a full
   bleed hero and a sticky aside instead. */
.post-layout{max-width:1400px;margin-inline:auto;padding-inline:var(--gut)}
.post-layout__cols{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:1100px){
  .post-layout__cols{grid-template-columns:minmax(0,1fr) 21rem;align-items:start}
  .post__aside{position:sticky;top:7rem;display:grid;gap:1.25rem}
}
.post{max-width:46rem;min-width:0}
.post__meta{font-size:.9rem;color:#a8bda8;margin:1rem 0 0;text-transform:uppercase;letter-spacing:.06em}
.post__hero{margin-bottom:clamp(2rem,4vw,3rem)}
.post__hero img{width:100%;border-radius:var(--radius);aspect-ratio:21/9;object-fit:cover}
@media (max-width:700px){.post__hero img{aspect-ratio:16/10}}
.answer--single{max-width:none}
@media (min-width:1100px){.answer--single{display:block}}
.post__body{margin-top:2rem}
.post__body h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-top:2.25rem}
.post__body h3{font-size:1.25rem;margin-top:1.75rem}
.post__body ul,.post__body ol{padding-left:1.25rem;margin:0 0 1.15em}
.post__body li{margin-bottom:.5rem}
.post__body li::marker{color:var(--green)}
.post__body strong{color:var(--forest)}
.post__body a{color:var(--green-dark);text-decoration:underline}
.post .btn-row{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}

.post__aside .panel{padding:1.75rem}
.post__aside .panel h2{margin-bottom:.75rem}
.post__rel{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.post__rel li{display:flex;align-items:center;gap:.7rem}
.post__rel svg{width:22px;height:22px;flex:none;stroke:var(--green)}
.post__rel a{
  color:var(--forest);text-decoration:none;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:1rem;
}
.post__rel a:hover{color:var(--green-dark);text-decoration:underline}

/* ---------- partner / kit block ---------- */
/* A portrait photo in a half width column towers over the text beside it, so
   crop it squarer. The text column is then pinned, which only has an effect
   at the widths where the image is still the taller of the two. */
.partner__img{border-radius:var(--radius);width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center}
@media (min-width:900px){
  .split--sticky{align-items:start}
  .split--sticky > *:first-child{position:sticky;top:7rem}
}
@media (max-width:899px){
  .partner__img{aspect-ratio:4/3}
}