/* Edinburgh Gardening Services · home.css
   Homepage sections, in page order. Tokens and the band notes are in main.css. */

/* Hero ---------------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;min-height:800px;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--brand);color:var(--on-dark);padding-top:88px}
.hero-media,.hero-media img{position:absolute;inset:0;width:100%;height:100%}
.hero-media{z-index:0}
.hero-media img{object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--hero-tint-top) 0%,var(--hero-tint-mid) 40%,var(--hero-tint-bottom) 100%)}
/* Homepage: a touch more tint than the shared default, mostly through the middle where the heading and intro sit */
.hero{--hero-tint-top:rgba(0,30,0,0.59);--hero-tint-mid:rgba(0,36,0,0.47);--hero-tint-bottom:rgba(0,24,0,0.84)}
.hero-body,.hero-bar-wrap{position:relative;z-index:2}
.hero-body{margin-block:auto;padding-block:var(--space-6)}
.hero-title{font-size:var(--step-hero);line-height:var(--lh-hero);letter-spacing:var(--track-display);font-weight:var(--weight-medium)}
.hero-title .hl{display:block}
.hero .lead{display:none;max-width:480px;color:var(--on-dark-muted)}

/* Proof bar */
.hero-bar-wrap{padding-bottom:var(--space-6)}
.hero-bar{border-radius:var(--radius);padding:var(--space-5);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5) var(--space-3)}
.hb-stats{display:contents}
.hb-stat b{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--step-stat);font-weight:var(--weight-bold);letter-spacing:var(--track-display);line-height:1.15}
.hb-stat b svg{width:var(--icon-sm);height:var(--icon-sm);fill:var(--accent)}
.hb-stat > span{display:block;font-size:var(--step--2);color:var(--on-dark-muted)}
/* Preview only: placeholder figures set smaller so the bar keeps the shape it will have with real figures */
.hb-stat .ph{font-size:0.6em;letter-spacing:0;line-height:1.3}
.hb-quote{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-5);border-top:var(--border) solid var(--glass-border)}
.hb-quote p{font-weight:var(--weight-medium);line-height:1.35}
.hb-quote p span{display:block;font-weight:var(--weight-regular);font-size:var(--step--1);color:var(--on-dark-muted)}
.hb-quote .btn{display:flex}
.hb-quote .btn .pill{width:100%;justify-content:center}

/* tablet, laptop and desktop: heading on two lines, intro line shown, bar quote row inline */
@media (min-width:768px) and (max-width:1023px),(min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .hero-title .hl{white-space:nowrap}
  .hero .lead{display:block}
  .hero-bar-wrap{padding-bottom:var(--space-8)}
  .hero-bar{padding:var(--space-6)}
  .hb-stat b svg{width:var(--icon);height:var(--icon)}
  .hb-stat > span{font-size:var(--step--1)}
  .hb-quote{flex-direction:row;align-items:center;justify-content:space-between}
  .hb-quote .btn .pill{width:auto}
}
/* laptop and desktop: hero content steps in from the page edge between the nav edge and the container edge */
@media (min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .hero{padding-top:112px}
  .hero .lead{max-width:480px}
  .hero-bar-wrap{padding-bottom:calc(var(--space-8) + var(--space-4))}
}
/* desktop: proof bar on one row */
@media (min-width:1440px){
  .hero-bar{grid-template-columns:repeat(3,auto) 1fr;gap:0;padding:var(--space-5) var(--space-5) var(--space-5) 0}
  .hb-stat{padding:0 var(--space-7);border-right:var(--border) solid var(--glass-border)}
  .hb-quote{grid-column:auto;border-top:0;padding:0 0 0 var(--space-7);justify-content:flex-end;gap:var(--space-5)}
}
@media (min-width:1440px){
  .hero .lead{max-width:720px}
}

/* Maintenance plans ------------------------------------------------------- */
.plans-head{margin-bottom:var(--space-8)}
.plans-head .lead{max-width:560px}
.plan-cards{display:grid;gap:var(--space-5)}
.plan{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);padding:var(--space-6)}
.plan.on-dark{background:var(--brand)}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);min-height:40px}
.plan-name{font-size:var(--step-2);line-height:var(--lh-snug);font-weight:var(--weight-bold)}
.plan-tag{white-space:nowrap;font-size:var(--step--2);font-weight:var(--weight-bold);background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-pill);padding:4px 10px}
.plan-price{position:relative;display:flex;flex-direction:column;margin-top:var(--space-5);padding-bottom:var(--space-5)}
/* the divider is a drawn line so FX/DRAW can animate it */
.plan-price::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--border);background:var(--rule);transform-origin:left center}
.plan.on-dark .plan-price::after{background:var(--rule-on-dark)}
.plan-from,.plan-yr{font-size:var(--step--1);color:var(--muted)}
.plan-yr{margin-top:var(--space-1)}
.plan-amt strong{font-size:var(--step-price);line-height:1.1;letter-spacing:var(--track-display);font-weight:var(--weight-bold)}
.plan-amt span{font-weight:var(--weight-medium);color:var(--muted)}
.plan.on-dark .plan-from,.plan.on-dark .plan-yr,.plan.on-dark .plan-amt span{color:var(--on-dark-muted)}
.plan .plan-list{display:grid;gap:var(--space-4);margin-top:var(--space-5)}
.plan-list li{display:flex;gap:var(--space-3);align-items:flex-start;font-weight:var(--weight-medium)}
.tick{width:24px;height:24px;border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.tick svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.plans-foot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-6);margin-top:clamp(48px, 2.5vw + 38px, 64px)}
.plans-perks{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3) var(--space-6);font-weight:var(--weight-medium)}
.plans-perks li{display:flex;align-items:center;gap:var(--space-2)}
.plans-perks .tick{width:20px;height:20px}
.plans-perks .tick svg{width:12px;height:12px}
.btn-wide{display:flex;width:100%;max-width:420px;margin-inline:auto}   /* the link is only as wide as the pill, so hover starts on the button */
.btn-wide .pill{width:100%;justify-content:center;gap:var(--space-3);min-height:calc(var(--btn-h) + var(--space-2));font-size:var(--step-1)}
.plans-note{font-size:var(--step--1)}

/* tablet: roomier cards, still stacked */
@media (min-width:768px) and (max-width:1023px){
  .plan{padding:calc(var(--space-5) + var(--space-4))}
}
/* tablet, laptop and desktop: keep "all year" together */
@media (min-width:768px) and (max-width:1023px),(min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .nw{white-space:nowrap}
}
/* laptop and desktop: three cards in a row. The design waits until 1200; here they
   sit in a row from 1024, with card padding scaling down so lines can wrap cleanly. */
@media (min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .plan-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plan{padding:clamp(24px, 3.6vw - 13px, 40px)}
}

/* Other services ---------------------------------------------------------- */
.svc{padding-top:0}
.svc-head{margin-bottom:var(--space-8)}
.svc-intro{margin-top:var(--space-5)}
.svc-cards{list-style:none;margin:0;padding:0}
.svc-cards > li{display:flex}
.svc-card{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:var(--radius);text-decoration:none;background:var(--brand);color:var(--on-dark);isolation:isolate}
.svc-card picture,.svc-card img{position:absolute;inset:0;width:100%;height:100%}
.svc-card img{object-fit:cover;background:var(--surface-2)}
.svc-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,30,0,.88) 0%,rgba(0,30,0,.35) 50%,rgba(0,30,0,.1) 100%)}
.svc-card-body{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);font-size:var(--step--1)}
.svc-card-title{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-3);font-size:var(--step-2);font-weight:var(--weight-bold);line-height:var(--lh-snug)}
.svc-line{color:var(--on-dark-muted);line-height:1.45}
.svc-card .ar{width:32px;height:32px;border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none;transition:transform var(--dur-fast) var(--ease)}
.svc-card .ar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.svc-card:hover .ar,.svc-card:focus-visible .ar{transform:translate(var(--nudge), calc(var(--nudge) * -1))}
.svc-card:focus-visible{outline-offset:3px}

/* Below 1200px: swipe row, the next card peeking in, dots underneath */
@media (max-width:1199px){
  .svc-cards{--sw-w:82%;--sw-h:400px;display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain}
  .svc-cards::-webkit-scrollbar{display:none}
  .svc-cards > li{flex:0 0 var(--sw-w);height:var(--sw-h);scroll-snap-align:start}
  .sw-dots{display:flex;gap:0;justify-content:center;margin-top:var(--space-3)}
  .sw-dot{width:var(--tap);height:var(--tap);display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--radius-pill)}
  .sw-dot::before{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:var(--rule);transition:width var(--dur-base) var(--ease),background-color var(--dur-base) var(--ease)}
  .sw-dot[aria-current="true"]::before{width:24px;background:var(--brand)}
}
@media (min-width:768px) and (max-width:1023px){
  .svc-cards{--sw-w:42%;--sw-h:440px;gap:var(--space-4)}
}
@media (min-width:1024px) and (max-width:1199px){
  .svc-cards{--sw-w:34%;--sw-h:440px;gap:var(--space-4)}
}
/* Structural exception, 1200px up: the expanding gallery (see main.css).
   Garden Makeovers is open by default; hovering or focusing a card opens it. */
@media (min-width:1200px){
  .sw-dots{display:none}
  /* No gap between the hover areas: each card's spacing is padding on its li,
     so moving across the row never passes over a gap that resets the gallery. */
  .svc-cards{--svc-dur:700ms;--svc-ease:cubic-bezier(0.45, 0, 0.2, 1);display:flex;gap:0;height:520px;margin-inline:calc(var(--space-4) / -2)}
  .svc-cards > li{flex:1 1 0;min-width:0;padding-inline:calc(var(--space-4) / 2);transition:flex-grow var(--svc-dur) var(--svc-ease)}
  .svc-cards > li.big{flex-grow:3}
  .svc-cards:has(li:hover,li:focus-within) > li.big{flex-grow:1}
  .svc-cards:has(li:hover,li:focus-within) > li:is(:hover,:focus-within){flex-grow:3}
  /* The photo keeps one size, centred, and the card reveals more of it as it opens.
     Nothing scales, so there is no zoom. */
  .svc-card img{left:50%;width:max(100%, 560px);max-width:none;transform:translateX(-50%)}
  /* The title grows by scale, not font-size: text is laid out once at full size and only
     the picture of it scales, so it glides instead of re-flowing in 1px steps. */
  .svc-card-title{position:relative;font-size:var(--step-2)}
  .svc-t{display:block;transform:scale(0.8);transform-origin:0 100%;transition:transform var(--svc-dur) var(--svc-ease);backface-visibility:hidden}
  /* Arrow and line fade in place: neither takes or gives up space, so the title never jumps. */
  .svc-card .ar{position:absolute;right:0;bottom:0;opacity:0;pointer-events:none;transition:opacity 300ms var(--ease),transform var(--dur-fast) var(--ease)}
  /* Two sentences at a fixed width (fits the open card at every desktop width), so the text never
     rewraps while a card opens and every card keeps its title at the same height */
  .svc-line{width:360px;max-width:none;opacity:0;transform:translateY(6px);transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
  .svc-cards > li:is(:hover,:focus-within) .svc-line,.svc-cards:not(:has(li:hover,li:focus-within)) > li.big .svc-line{opacity:1;transform:none;transition-delay:300ms}
  .svc-cards > li:is(:hover,:focus-within) .svc-t,.svc-cards:not(:has(li:hover,li:focus-within)) > li.big .svc-t{transform:none}
  .svc-cards > li:is(:hover,:focus-within) .ar,.svc-cards:not(:has(li:hover,li:focus-within)) > li.big .ar{opacity:1;transition-delay:300ms,0s}
}
@media (prefers-reduced-motion:reduce){
  .svc-cards > li,.svc-card img,.svc-line,.svc-card .ar,.svc-card-title,.svc-t{transition:none}
}

/* How a quote works ------------------------------------------------------- */
.how-head{text-align:center;max-width:860px;margin:0 auto var(--space-8);display:flex;flex-direction:column;align-items:center}
.how-head .eyebrow{justify-content:center}
.steps{display:grid;gap:var(--space-4)}
.step{background:var(--brand-stripe);border:var(--border) solid rgba(255,255,255,.1);border-radius:var(--radius);padding:var(--space-4);display:flex;flex-direction:column}
.step-vis{height:200px;border-radius:var(--radius);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-5)}
.step-q{font-weight:var(--weight-bold);margin-bottom:var(--space-1)}
.chip{width:200px;max-width:100%;padding:10px 14px;border-radius:var(--radius);background:var(--surface);border:var(--border) solid var(--rule);font-size:var(--step--1);font-weight:var(--weight-medium)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-dark)}
.photos{display:flex;gap:var(--space-2)}
.photos span{width:64px;height:64px;border-radius:var(--radius-sm);background:var(--surface-2)}
.photos .add{display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.photos .add svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.step-small{font-size:var(--step--1);color:var(--muted)}
.msg{display:flex;align-items:flex-end;gap:var(--space-3)}
.avatar{width:36px;height:36px;border-radius:var(--radius-pill);background:var(--accent);flex:none}
.bubble{background:var(--surface);padding:12px 16px;border-radius:var(--radius) var(--radius) var(--radius) 4px;font-size:var(--step--1);font-weight:var(--weight-medium);max-width:220px}
.step-text{padding:var(--space-5) var(--space-3) var(--space-3)}
.step-label{font-size:var(--step--1);font-weight:var(--weight-bold);color:var(--accent)}
.step-text .h3{margin-top:var(--space-2);font-weight:var(--weight-bold)}
.step-text p{margin-top:var(--space-2)}
.how-cta{display:flex;justify-content:center;margin-top:var(--space-8)}
@media (max-width:767px){
  .how-cta .btn{display:flex;width:100%}
  .how-cta .btn .pill{flex:1;justify-content:center}
}
@media (min-width:768px) and (max-width:1023px){
  .step{display:grid;grid-template-columns:260px 1fr;align-items:center;gap:var(--space-2)}
  .step-text{padding:var(--space-3) var(--space-5)}
}
@media (min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
}

/* Reviews ----------------------------------------------------------------- */
.reviews-top{display:grid;gap:var(--space-6);margin-bottom:var(--space-8)}
.stars{display:inline-flex;gap:2px}
.stars svg{width:18px;height:18px;fill:var(--accent)}
.score{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.score .stars svg{width:22px;height:22px}
.score p{margin-top:var(--space-1);font-size:var(--step--1)}
.review figure{margin:0;height:100%;background:var(--surface);border-radius:var(--radius);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.review blockquote{margin:0;font-size:var(--step-1);line-height:1.5;text-wrap:pretty;hyphens:none}
.review figcaption{font-size:var(--step--1);color:var(--muted);margin-top:auto}
.review figcaption strong{color:var(--ink);font-weight:var(--weight-bold)}
@media (min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .reviews-top{grid-template-columns:1fr 1.4fr;align-items:end;gap:var(--space-10)}
  .score{justify-content:flex-end}
  .score > div{text-align:right}
}

/* About ------------------------------------------------------------------- */
.about{background:var(--cream)}
.about-grid{display:grid;gap:var(--space-7)}
.about-img{border-radius:var(--radius);overflow:hidden;background:var(--surface-2);height:320px}
.about-img picture,.about-img img{width:100%;height:100%}
.about-img img{object-fit:cover}
.about-copy{display:flex;flex-direction:column;justify-content:center}
.about-body{margin-top:var(--space-4)}
.about-btns{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin-top:var(--space-7)}
.about-btns .btn{display:flex}
.about-btns .btn .pill{width:100%;justify-content:space-between;min-height:60px;padding-inline:var(--space-6)}
.about-more{margin-top:var(--space-5);font-size:var(--step--1);color:var(--muted)}
.about-more a,.areas-note a{color:var(--brand-mid);font-weight:var(--weight-bold)}
@media (min-width:768px) and (max-width:1023px),(min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .about-img{height:440px}
  .about-btns{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .about-grid{grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:stretch}
  .about-img{height:auto;min-height:100%}
  .about-copy{padding-block:var(--space-4)}
}

/* Areas ------------------------------------------------------------------- */
.areas{padding-bottom:0}
.areas-inner{text-align:center;max-width:960px;display:flex;flex-direction:column;align-items:center}
.areas-inner .eyebrow{justify-content:center}
.areas-grp{font-size:var(--step--1);font-weight:var(--weight-bold);margin:var(--space-7) 0 var(--space-3)}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
.tags li{padding:10px 16px;border-radius:var(--radius-pill);background:var(--surface);font-weight:var(--weight-medium);font-size:var(--step--1)}
.tags-outline li{background:var(--paper);border:var(--border) solid var(--rule)}
.areas-note{margin-top:var(--space-7);font-size:var(--step--1);color:var(--muted)}

/* Closing call to action -------------------------------------------------- */
.cta-sec{padding-top:var(--section)}
.cta{padding:clamp(96px, 12vw + 51px, 192px) var(--gutter);display:flex;justify-content:center}
.cta-panel{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;text-align:center}
.cta-panel .eyebrow{justify-content:center}
.cta-panel .h2{font-size:clamp(30px, 6.5vw - 6px, 72px)}
.cta-panel p.muted{margin-top:var(--space-5);max-width:520px}
.cta-panel .actions{justify-content:center}
.tel{font-weight:var(--weight-bold);text-underline-offset:4px;color:var(--on-dark);min-height:var(--tap);display:inline-flex;align-items:center}

/* FAQ --------------------------------------------------------------------- */
.faq-inner{max-width:760px;margin-inline:auto}
.faq-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:var(--space-8)}
.faq-head .eyebrow{justify-content:center}
.faq-more{display:flex;justify-content:center;margin-top:var(--space-7)}


/* Reviews carousel ----------------------------------------------------------
   A row of cards inside the content box, so it fades out in line with the heading
   and the Reviews button above it, not at the edge of the screen. Without the script (or with reduced motion) it is a
   row you swipe or scroll, snapping card by card. With the script the list is
   doubled and drifts left on a loop; moving it by one set's width (-50% of the
   track, less half a gap) lands exactly where it started, so the loop is seamless. */
.reviews .wrap{container-type:inline-size}
/* The box reaches one gutter past the content on each side and the fade lives in that
   strip, so the cards inside the content width are fully clear and line up with the
   heading and button above. Cards are sized so exactly three fit the content width on
   desktop, two on tablets and one on phones. */
.review-marquee{--gap:var(--space-5);--fade:var(--gutter);margin-inline:calc(var(--fade) * -1);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:var(--space-1);scroll-padding-inline:var(--fade)}
.review-marquee::-webkit-scrollbar{display:none}
.review-track{list-style:none;margin:0;padding:0 var(--fade);display:flex;gap:var(--gap);width:max-content}
.review{flex:0 0 100cqw;scroll-snap-align:start}
@media (min-width:768px){ .review{flex-basis:calc((100cqw - var(--gap)) / 2)} }
@media (min-width:1024px){ .review{flex-basis:calc((100cqw - 2 * var(--gap)) / 3)} }
.review-marquee:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.review-marquee.is-looping{overflow:hidden;scroll-snap-type:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.review-marquee.is-looping .review-track{padding:0;animation:reviews-loop var(--loop-dur, 90s) linear infinite}
.review-marquee.is-looping:hover .review-track,
.review-marquee.is-looping:focus-within .review-track,
.review-marquee.is-looping:focus-visible .review-track,
.review-marquee.is-paused .review-track{animation-play-state:paused}
@keyframes reviews-loop{to{transform:translateX(calc(-50% - var(--gap) / 2))}}
.marquee-controls{display:flex;justify-content:flex-end;margin-top:var(--space-4)}
.marquee-toggle{width:var(--tap);height:var(--tap);display:grid;place-items:center;padding:0;border:var(--border) solid var(--rule);border-radius:var(--radius-pill);background:var(--paper);color:var(--ink);cursor:pointer;transition:background-color var(--dur-base) var(--ease)}
.marquee-toggle:hover{background:var(--surface)}
.marquee-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.marquee-toggle .i-play{display:none;fill:currentColor;stroke:none}
.marquee-toggle[aria-pressed="true"] .i-pause{display:none}
.marquee-toggle[aria-pressed="true"] .i-play{display:block}
@media (prefers-reduced-motion:reduce){
  .review-marquee.is-looping .review-track{animation:none}
}

/* Section heads on desktop: eyebrow and heading on the left, the description on
   the right, lined up with the bottom of the heading. Phones and tablets keep it below. */
@media (min-width:1024px){
  .plans-head,.svc-head,.how-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-9);align-items:end;text-align:left;max-width:none;margin-inline:0}
  .plans-head .eyebrow,.svc-head .eyebrow,.how-head .eyebrow{grid-column:1;justify-content:flex-start}
  .plans-head .h2,.svc-head .h2,.how-head .h2{grid-column:1;margin:0}
  .plans-head > p:last-child,.svc-head > p:last-child,.how-head > p:last-child{grid-column:2;grid-row:2;margin:0;max-width:520px;justify-self:end;align-self:end;text-align:right}
}

/* Reviews: the real Google rating beside the button (no star row, since the
   rating is 4.9, not 5), and a quote mark on each card instead of stars. */
.score-rating{display:flex;flex-direction:column;gap:2px}
.score-rating b{display:flex;align-items:center;gap:6px;font-size:var(--step-stat);font-weight:var(--weight-bold);letter-spacing:var(--track-display);line-height:1.1;color:var(--ink)}
.score-rating b svg{width:22px;height:22px;fill:var(--accent)}
.score-rating span{font-size:var(--step--1);color:var(--muted)}
@media (min-width:1024px){ .score-rating{align-items:flex-end} }
.quote-mark{width:32px;height:24px;fill:var(--accent)}

/* Our values and Community: one cream band with About above them (no top padding,
   so About, Values and Community run together without a break). */
.values,.community{background:var(--cream);padding-top:0}
.values-head{margin-bottom:var(--space-7)}
.value-grid,.community-grid{list-style:none;margin:0;padding:0;display:grid}
.value-grid{grid-template-columns:1fr;gap:var(--space-3)}
.value-card{background:var(--paper);border-radius:var(--radius);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.value-card h3{margin:var(--space-2) 0 0;font-size:20px;font-weight:var(--weight-bold);line-height:var(--lh-snug)}
.value-card p{margin:0;color:var(--muted)}
.value-ico,.community-ico{display:grid;place-items:center;flex:none;border-radius:var(--radius-pill);background:var(--accent);color:var(--ink)}
.value-ico{width:48px;height:48px}
.community-ico{width:44px;height:44px}
.value-ico svg,.community-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.community-head{text-align:center;display:flex;flex-direction:column;align-items:center;max-width:760px;margin:0 auto var(--space-7)}
.community-head .eyebrow{justify-content:center}
.community-grid{grid-template-columns:1fr;gap:var(--space-3);max-width:1000px;margin-inline:auto}
.community-card{background:var(--paper);border-radius:var(--radius);padding:var(--space-5) var(--space-6);display:flex;align-items:center;gap:var(--space-4);font-weight:var(--weight-bold)}
.community-more{display:flex;justify-content:center;margin-top:var(--space-7)}
.community-more .btn{display:flex;width:100%}
.community-more .btn .pill{flex:1;justify-content:center}
@media (min-width:768px){
  .value-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
  .community-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
  .community-more .btn{display:inline-flex;width:auto}
  .community-more .btn .pill{flex:none}
}
@media (min-width:1024px){
  .value-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Photo crop focus (Claude Design's placement guide), kept out of inline styles for the security policy */
.fp-makeover-after{object-position:50% 50%}
.fp-hedge-trimming-stihl{object-position:45% 50%}
.fp-mowing-pair-walled-garden{object-position:55% 60%}
.fp-lawn-pair-striped{object-position:50% 50%}
.fp-planting-hydrangea-border{object-position:82% 50%}
.fp-team-pair-hedge-trimmers{object-position:50% 40%}