/* ============================================================
   TOKENS — derived from Island Landscape Services' live brand:
   green #36B349 · teal #014C68 · blue-teal #3786A5 · orange #F36825
   ============================================================ */
:root{
  --ground:#f4f7f5;
  --surface:#ffffff;
  --surface-deep:#e6eeea;
  --ink:#0d2027;
  --ink-soft:#4b5d63;
  --ink-faint:#5a686d;   /* AA-safe on both page backgrounds: 5.36:1 on --ground, 5.78:1 on --surface. The old #5f7075 sat at 4.38:1 and failed AA for the 10-12px text that uses it. */
  --line:#d3e0da;

  --green:#36B349;          /* their exact brand green — fills, icons, dark surfaces */
  --green-deep:#1B7A35;     /* darkened for AA text/button contrast on light */
  --green-wash:#e2f3e6;
  --teal:#014C68;           /* their exact brand teal */
  --teal-deep:#01374b;
  --cyan:#3786A5;
  --orange:#F36825;         /* their exact brand orange — borders/large fills only */
  --orange-text:#b34509;    /* darkened for AA on light ground (star ratings, small text) */
  --orange-wash:#fdeade;
  --gold:#9a7420;

  --focus:#3786A5;
  --shadow:0 1px 2px rgba(13,32,39,.05), 0 10px 28px -14px rgba(13,32,39,.2);
  --on-brand:#ffffff;

  /* Client-specified type system */
  --font-head:"STIX Two Text", Georgia, "Times New Roman", serif;
  --font-body:"SN Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;

  /* This is a client website, not a theme-aware app: it stays light in every context.
     color-scheme:light also stops the browser rendering selects/inputs/scrollbars dark
     when the viewer's OS or browser is set to dark mode. */
  color-scheme: light;
}
html{background:var(--ground);}
*{box-sizing:border-box;}
::selection{background:var(--green-wash);color:var(--ink);}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;}

h1,h2,h3{
  font-family:var(--font-head);
  font-weight:600;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
  letter-spacing:-.008em;
}
.container{max-width:1180px;margin:0 auto;padding:0 1.5rem;}

/* ---- placeholder artwork ---- */
img.ph,svg.ph{width:100%;height:100%;display:block;object-fit:cover;}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.92rem;padding:.85rem 1.45rem;border-radius:6px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap;
  transition:transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.btn-primary{background:var(--green-deep);color:var(--on-brand);box-shadow:var(--shadow);}
.btn-primary:hover{background:color-mix(in srgb, var(--green-deep) 85%, black);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--green-deep);color:var(--green-deep);}
.btn-onDark{background:var(--green);color:#082010;}
.btn-onDark:hover{background:color-mix(in srgb, var(--green) 86%, white);}
.btn-sm{padding:.58rem 1rem;font-size:.82rem;}


/* ============================================================
   MOTION — one idea, applied everywhere: things GROW.
   They emerge anchored to a base and extend, rather than fading
   in place. Stems draw upward, leaves unfurl in sequence, panels
   rise from their footing. Every timing below shares two curves so
   the whole site moves like one organism.
   ============================================================ */
:root{
  --ease-grow:cubic-bezier(.22,1.14,.34,1);  /* springs slightly past, then settles */
  --ease-out:cubic-bezier(.33,1,.68,1);
}

@keyframes growStem{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes unfurl{from{stroke-dashoffset:1;opacity:0;}to{stroke-dashoffset:0;opacity:1;}}
@keyframes rootUp{from{transform:scaleY(0);opacity:0;}to{transform:scaleY(1);opacity:1;}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes mediaGrow{from{transform:scale(1.05);opacity:.35;}to{transform:scale(1);opacity:1;}}

/* Hero: the signature moment. Trunks draw upward, then fronds open one
   by one, then the ground planting rises. Runs once, on load. */
.hero-art .g-stem{stroke-dasharray:1;stroke-dashoffset:1;animation:growStem 1.15s var(--ease-out) .25s forwards;}
.hero-art .g-stem:nth-child(2){animation-delay:.45s;}
.hero-art .g-frond{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:unfurl .75s var(--ease-out) forwards;}
.hero-art .g-frond:nth-child(1){animation-delay:1.05s;}
.hero-art .g-frond:nth-child(2){animation-delay:1.18s;}
.hero-art .g-frond:nth-child(3){animation-delay:1.31s;}
.hero-art .g-frond:nth-child(4){animation-delay:1.44s;}
.hero-art .g-frond:nth-child(5){animation-delay:1.30s;}
.hero-art .g-frond:nth-child(6){animation-delay:1.43s;}
.hero-art .g-frond:nth-child(7){animation-delay:1.56s;}
.hero-art .g-frond:nth-child(8){animation-delay:1.69s;}
.hero-art .g-bush{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(0);opacity:0;animation:rootUp .8s var(--ease-grow) forwards;}
.hero-art .g-bush:nth-child(1){animation-delay:.7s;}
.hero-art .g-bush:nth-child(2){animation-delay:.85s;}
.hero-art .g-bush:nth-child(3){animation-delay:1s;}

/* Staggered "sprouting" for any grid of cards */
.sprout{opacity:0;transform:translateY(20px) scale(.985);transform-origin:center bottom;
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-grow);}
.sprout-group.is-visible .sprout{opacity:1;transform:none;}
.sprout-group.is-visible .sprout:nth-child(1){transition-delay:.04s;}
.sprout-group.is-visible .sprout:nth-child(2){transition-delay:.12s;}
.sprout-group.is-visible .sprout:nth-child(3){transition-delay:.2s;}
.sprout-group.is-visible .sprout:nth-child(4){transition-delay:.28s;}
.sprout-group.is-visible .sprout:nth-child(5){transition-delay:.36s;}
.sprout-group.is-visible .sprout:nth-child(6){transition-delay:.44s;}

/* Nav: the underline creeps out from the left like a runner */
nav.main-nav a{position:relative;border-bottom:none !important;}
nav.main-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ease-grow);
}
nav.main-nav a:hover::after,nav.main-nav a:focus-visible::after{transform:scaleX(1);}
nav.main-nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--orange);}

/* Logo and buttons lift a little on hover, as though reaching */
.brand-mark{transition:transform .45s var(--ease-grow);}
.brand:hover .brand-mark{transform:scale(1.07);}
.btn{transition:transform .28s var(--ease-grow), background .16s ease, border-color .16s ease, color .16s ease, box-shadow .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

/* Service cards: the artwork keeps growing while you hover */
.svc-card-media svg,.svc-card-media img{transition:transform .8s var(--ease-out);transform-origin:center bottom;}
.svc-card:hover .svc-card-media svg,.svc-card:hover .svc-card-media img{transform:scale(1.07);}
.svc-card-cta{position:relative;border-bottom-color:transparent !important;}
.svc-card-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--green-deep);
  transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease-grow);
}
.svc-card:hover .svc-card-cta::after{transform:scaleX(1);}

/* Switching a service tab replays the growth on that panel */
.svc-panel.is-active .svc-panel-media{animation:mediaGrow .7s var(--ease-out);}
.svc-panel.is-active .svc-panel-copy > *{animation:riseIn .5s var(--ease-out) backwards;}
.svc-panel.is-active .svc-panel-copy > *:nth-child(1){animation-delay:.08s;}
.svc-panel.is-active .svc-panel-copy > *:nth-child(2){animation-delay:.15s;}
.svc-panel.is-active .svc-panel-copy > *:nth-child(3){animation-delay:.22s;}
.svc-panel.is-active .svc-panel-copy > *:nth-child(4){animation-delay:.29s;}
.svc-panel.is-active .svc-panel-copy > *:nth-child(5){animation-delay:.36s;}
.svc-panel.is-active .svc-panel-copy > *:nth-child(6){animation-delay:.43s;}
.svc-tab-icon{transition:transform .4s var(--ease-grow), background .22s ease, color .22s ease, border-color .22s ease;}
.svc-tab:hover .svc-tab-icon{transform:translateY(-2px) scale(1.06);}

/* The FAQ marker opens like a bud */
.faq-plus::before,.faq-plus::after{transition:transform .4s var(--ease-grow);}
.faq-plus::after{transform-origin:center;}
details[open] .faq-plus::before{transform:scaleX(1.15);}

/* Review cards and gallery tiles reach up slightly */

/* Anyone who asks for less motion gets the finished state, not a blank one */
@media (prefers-reduced-motion: reduce){
  .hero-art .g-stem,.hero-art .g-frond{stroke-dashoffset:0 !important;opacity:1 !important;animation:none !important;}
  .hero-art .g-bush{transform:none !important;opacity:1 !important;animation:none !important;}
  .sprout{opacity:1 !important;transform:none !important;}
  .svc-panel.is-active .svc-panel-media,.svc-panel.is-active .svc-panel-copy > *{animation:none !important;}
  nav.main-nav a::after{transition:none !important;}
}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-block:.85rem;   /* NOT the padding shorthand — it would clobber .container side padding */
}
.header-bar{display:flex;align-items:center;gap:1.75rem;}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:0 1 auto;min-width:0;}
.brand-mark{
  /* Island Landscape Services logo, 232x428 source cropped to its artwork. Height-driven so
     the tall mark never gets squashed; defined once here rather than inlined twice. */
  height:42px;aspect-ratio:232/428;width:auto;flex:none;
  background:url("data:image/png;base64,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") center/contain no-repeat;
}
.brand-word{
  font-family:var(--font-head);font-weight:600;font-size:1.12rem;
  line-height:1.1;color:var(--ink);
}
.brand-word span{
  display:block;font-family:var(--font-body);font-size:.61rem;font-weight:600;
  letter-spacing:.11em;color:var(--ink-faint);text-transform:uppercase;margin-top:.2rem;
}

nav.main-nav{display:flex;align-items:center;gap:1.75rem;}
nav.main-nav a{
  font-size:.9rem;font-weight:600;text-decoration:none;color:var(--ink-soft);
  padding:.4rem 0;border-bottom:2px solid transparent;
}
nav.main-nav a:hover{color:var(--ink);}
nav.main-nav a[aria-current="page"]{color:var(--green-deep);border-color:var(--orange);}

.header-actions{display:flex;align-items:center;justify-content:center;gap:.7rem;}
.header-phone{
  display:flex;align-items:center;gap:.4rem;font-weight:700;font-size:.88rem;
  color:var(--teal);text-decoration:none;white-space:nowrap;
}
.header-phone:hover{color:var(--green-deep);}
.header-phone svg{width:15px;height:15px;flex:none;}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:.5rem;color:var(--ink);}
.mobile-nav{display:none;flex-direction:column;align-items:center;text-align:center;gap:.15rem;padding-block:.5rem 1rem;border-top:1px solid var(--line);}
.mobile-nav a{padding:.6rem .2rem;font-weight:600;color:var(--ink-soft);text-decoration:none;}
.mobile-nav a[aria-current="page"]{color:var(--green-deep);}
.mobile-nav.is-open{display:flex;}
@media (max-width:980px){
  nav.main-nav{display:none;}
  .header-phone{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-row{gap:1rem;}
}
@media (max-width:430px){
  .brand-mark{height:34px;}
  .brand-word{font-size:.9rem;}
  .brand-word span{font-size:.54rem;letter-spacing:.09em;}
  .header-actions{gap:.45rem;}
  .header-actions .btn-sm{padding:.55rem .7rem;font-size:.75rem;}
  .header-row{gap:.6rem;}
  .header-cta-long{display:none;}
}
.header-cta-short{display:none;}
@media (max-width:430px){.header-cta-short{display:inline;}}

/* ============ PAGE / SECTION SHELL ============ */
.page-section{display:none;}
.page-section.is-active{display:block;animation:fadein .3s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}

section.band{padding:5rem 0;}
section.band.tight{padding:3.5rem 0;}
.band-deep{background:var(--surface-deep);}
.band-raised{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

.section-head{max-width:640px;margin:0 auto 2.6rem;text-align:center;}
.section-head h2{font-size:clamp(1.85rem,3.4vw,2.5rem);line-height:1.2;}
/* A page's lead heading becomes its H1 (see _build/make-pages.py); same size. */
.section-head h1{font-size:clamp(1.85rem,3.4vw,2.5rem);line-height:1.2;}
.section-head p{color:var(--ink-soft);font-size:1.02rem;margin:.75rem auto 0;max-width:58ch;}
.section-head-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;margin-bottom:2.6rem;}

.reveal{opacity:0;transform:translateY(22px) scaleY(.985);transform-origin:center bottom;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-grow);}
.reveal.is-visible{opacity:1;transform:none;}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;padding:4.5rem 0 4rem;}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2.6rem;}
.hero h1,.hero .hero-title{font-size:clamp(2.2rem,4.8vw,3.5rem);line-height:1.14;max-width:16ch;margin:0 auto;
  font-family:var(--font-head);font-weight:700;color:var(--ink);}
.hero h1 em,.hero .hero-title em{font-style:italic;color:var(--green-deep);}
/* Slogan. Set as three separate words so each can grow in on its own beat,
   which is the site's motion language rather than one block fading in. */
.hero-tag{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.55rem .9rem;margin:0 0 1.15rem;
  font-family:var(--font-body);font-weight:600;font-size:.84rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--teal);
}
.hero-tag b{font-weight:600;display:inline-block;}
.hero-tag .sep{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--green);align-self:center;
}
@media (max-width:520px){
  .hero-tag{gap:.4rem .55rem;font-size:.7rem;letter-spacing:.2em;}
  .hero-tag .sep{width:5px;height:5px;}
}
.hero-sub{font-size:1.06rem;color:var(--ink-soft);max-width:56ch;margin:1.1rem auto 1.9rem;}
/* Locations as a bullet strip, using the same green dot as the slogan so it
   reads as part of the system rather than a list bolted under the copy. */
.hero-places{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.5rem .75rem;margin:0 0 1.6rem;
  font-family:var(--font-body);font-weight:600;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}
.hero-places i{width:4px;height:4px;flex:none;border-radius:50%;background:var(--green);align-self:center;}
@media (max-width:560px){
  .hero-places{font-size:.63rem;letter-spacing:.12em;gap:.35rem .5rem;}
}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;}
/* The frame follows the photo, not the other way round. --ar is set per image
   from its real dimensions; 21/9 is only the fallback for the illustrated
   scene. A phone photo is often near-square or portrait, and forcing one into
   a fixed banner threw away more than half the picture. max-height keeps a
   tall photo from taking the whole screen; object-fit:contain means the worst
   case is a little breathing room at the sides, never a crop. */
.hero-art{
  position:relative;width:100%;aspect-ratio:var(--ar, 21/9);
  max-height:76vh;border-radius:12px;overflow:hidden;
  background:var(--surface-deep);box-shadow:var(--shadow);
}
.hero-art img.ph{object-fit:cover;}
/* Set when the photo is not banner-shaped. The frame stops spanning the
   column and takes the photo's own width instead, so there is no crop AND no
   empty bar. */
.hero-art.is-upright{max-width:min(620px, 100%);margin-inline:auto;max-height:none;}
@media (max-width:760px){.hero-art.is-upright{max-width:100%;}}
.hero-art svg{width:100%;height:100%;}

@media (max-width:760px){.hero-art{max-height:58vh;}}

/* Closes the hero band off from the section beneath it. Matches the rule above
   the trust bar so the two read as a pair rather than a stray line. */
.hero-rule{
  width:100%;max-width:1132px;height:0;border:0;border-top:1px solid var(--line);
  margin:3.2rem auto 0;
}
@media (max-width:760px){.hero-rule{margin-top:2.2rem;}}
/* Tighter hand-off from the hero image to the first section (22 Sep). The rule
   closes the hero; the next band starts close beneath it. */
.hero{padding-bottom:0;}
.hero-rule{margin-top:0;}   /* .hero-inner's grid gap already spaces it from the image */
.hero + .band{padding-top:3.5rem;}
@media (max-width:760px){.hero-rule{margin-top:0;} .hero + .band{padding-top:2.75rem;}}

.trust-bar{display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem;align-items:center;justify-content:center;margin:3rem auto 0;padding-top:2.2rem;border-top:1px solid var(--line);max-width:760px;width:100%;}
.trust-item{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--ink-soft);}
.trust-item svg{width:17px;height:17px;color:var(--green-deep);flex:none;}
.trust-link{text-decoration:none;color:inherit;border-radius:8px;padding:.15rem .4rem;margin:-.15rem -.4rem;
  transition:background .2s ease,color .2s ease;}
.trust-link:hover{background:var(--green-wash);color:var(--green-deep);}
.trust-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.trust-item strong{color:var(--ink);font-weight:700;}
.stars{color:var(--orange-text);letter-spacing:1.5px;font-size:.92rem;}

/* ============ HOME SERVICES — image cards, nothing hidden ============ */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;
  margin-top:.5rem;
  grid-auto-rows:1fr;   /* every card the same height, across rows too */
  align-items:stretch;
}
@media (max-width:940px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.svc-grid{grid-template-columns:minmax(0,1fr);}}

/* Mobile: the six services become an endless swipe. Built on NATIVE scroll-snap rather than
   a hand-rolled pointer drag — the browser supplies real momentum, never fights vertical
   scrolling, and cannot have its gesture cancelled out from under it. Clones at both ends
   make the loop seamless: land on one and we jump to its real twin with scrolling instant. */
.svc-carousel{overflow:visible;}
.svc-dots{display:none;}
@media (max-width:620px){
  .svc-grid.is-carousel{
    display:flex;gap:.75rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .svc-grid.is-carousel::-webkit-scrollbar{display:none;}
  .svc-grid.is-carousel{align-items:stretch;}
  /* 86% wide, snapped to the left edge: the next card always shows at the right,
     which says "there is more" before anyone reads a word. */
  .svc-grid.is-carousel .svc-card{flex:0 0 86%;min-width:0;scroll-snap-align:start;height:auto;}
  .svc-dots{display:flex;justify-content:center;align-items:center;gap:.4rem;margin-top:1.5rem;}
}
/* The marker grows sideways when active — the same growth idea as everything else */
.svc-dot{
  width:8px;height:8px;padding:0;border:none;border-radius:99px;cursor:pointer;
  background:var(--line);
  transition:width .5s var(--ease-grow), background .3s ease;
}
.svc-dot:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
.svc-dot.is-on{width:28px;background:var(--green-deep);}

.svc-card{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.svc-card:hover{box-shadow:var(--shadow);border-color:var(--green);transform:translateY(-2px);}
.svc-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.svc-card-media{width:100%;aspect-ratio:4/3;overflow:hidden;}
.svc-card-body{
  padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:.6rem;flex:1;
}
/* Pinned to the bottom so the call to action lines up across every card
   regardless of how long that service's description runs. */
.svc-card-cta{margin-top:auto;padding-top:.3rem;}
.svc-card-name{font-family:var(--font-head);font-weight:600;font-size:1.12rem;line-height:1.25;}
.svc-card-desc{color:var(--ink-soft);font-size:.88rem;margin:0;flex:1;}
.svc-card-cta{
  font-size:.82rem;font-weight:700;color:var(--green-deep);
  border-bottom:1px solid color-mix(in srgb, var(--green-deep) 40%, transparent);
  padding-bottom:2px;margin-top:.2rem;
}
.svc-card:hover .svc-card-cta{border-bottom-color:var(--green-deep);}

/* ============ TIMELINE ============ */
.timeline{position:relative;max-width:760px;margin:0 auto;padding:0;list-style:none;display:flex;flex-direction:column;align-items:center;}


.tl-step{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:2.5rem;max-width:46ch;opacity:.38;transition:opacity .35s ease;
}
.tl-step:first-child{padding-top:0;}
.tl-step::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:2px;height:2.5rem;background:var(--green);
  transform:translateX(-50%) scaleY(0);transform-origin:top center;
  transition:transform .55s var(--ease-out);
}
.tl-step:first-child::before{display:none;}
.tl-step.is-active::before{transform:translateX(-50%) scaleY(1);}

.tl-step.is-active{opacity:1;}
.tl-dot{
  width:19px;height:19px;border-radius:50%;flex:none;margin-bottom:.85rem;
  background:var(--ground);border:2px solid var(--line);
  transform:scale(.72);
  transition:border-color .35s ease, background .35s ease, transform .5s var(--ease-grow);
}
.tl-step.is-active .tl-dot{border-color:var(--green);background:var(--green);transform:scale(1);}
.tl-num{font-family:var(--font-body);font-size:.68rem;font-weight:600;color:var(--ink-faint);letter-spacing:.08em;}
.tl-step h3{font-size:1.05rem;margin-top:.15rem;}
.tl-step p{color:var(--ink-soft);font-size:.9rem;margin:.35rem 0 0;}

/* ============ TESTIMONIALS — draggable review carousel + proof bar ============ */
.tst-sub{font-family:var(--font-head);font-style:italic;font-size:1.08rem;}
.tst-wrap{position:relative;max-width:1180px;margin:0 auto;}
.tst-viewport{overflow:visible;}
/* Same engine as the mobile service rail: native scroll-snap. On desktop that also means a
   two-finger trackpad swipe works with no extra code, alongside the arrow buttons. */
.tst-track{
  display:flex;gap:1.4rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-block:4px 14px;      /* room for the card shadow inside the scroll box */
}
.tst-track::-webkit-scrollbar{display:none;}
.tst-slide{flex:0 0 88%;min-width:0;scroll-snap-align:start;}
@media (max-width:900px){.tst-slide{flex:0 0 86%;}}   /* next review peeks in */
@media (max-width:900px){.tst-track{gap:.9rem;}}

.tst-card{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);
  min-height:380px;height:100%;
}
/* Every slide the same height, so the track never changes size mid-scroll. */
.tst-slide{display:flex;}
.tst-slide > .tst-card{flex:1;}
@media (max-width:820px){.tst-card{grid-template-columns:1fr;}}
/* The photo must not decide how tall a review card is. Left in normal flow, a
   portrait shot pushed one card to ~1000px, and because the slides share a row
   the whole carousel grew with it and the quotes floated in white space. Taking
   the image out of flow makes the QUOTE drive the height: every card is then
   the same height and nothing shifts as you scroll.
   The min-height covers the stacked mobile layout, where the media has no
   sibling to inherit a height from. */
.tst-media{position:relative;overflow:hidden;min-height:220px;}
.tst-media img.ph,.tst-media svg.ph{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* A scrim, not just a text-shadow. White caption text sat directly on the
   photo, so legibility depended entirely on how bright that photo happened to
   be. The gradient guarantees a dark base under the text whatever is behind. */
.tst-media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top, rgba(4,20,14,.78), rgba(4,20,14,.35) 45%, transparent);
  pointer-events:none;
}
.tst-media-cap{
  position:absolute;left:1.3rem;bottom:1.2rem;color:#fff;z-index:1;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.tst-media-cap strong{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.tst-media-cap span{font-size:.82rem;opacity:.85;}

.tst-quote{
  padding:2.1rem 2.2rem;display:flex;flex-direction:column;justify-content:center;gap:1rem;
}
@media (max-width:820px){.tst-quote{padding:1.7rem 1.5rem;}}
.tst-mark{width:30px;height:30px;color:var(--green);flex:none;}
.tst-quote p{
  margin:0;color:var(--ink);font-size:1rem;line-height:1.65;max-width:44ch;
}
.tst-rule{width:52px;height:2px;background:var(--green);margin-top:.3rem;}
.tst-name{
  font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--green-deep);
}
.tst-meta{
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);line-height:1.7;
}

.tst-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.tst-arrow:hover:not(:disabled){background:var(--green-deep);color:#fff;border-color:var(--green-deep);}

.tst-arrow:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.tst-arrow svg{width:17px;height:17px;}
.tst-prev{left:-14px;} .tst-next{right:-14px;}
@media (max-width:520px){.tst-prev{left:2px;} .tst-next{right:2px;}}

.tst-hint{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:1.8rem auto 0;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-deep);
}
.tst-hint::before,.tst-hint::after{content:"";height:1px;width:70px;background:var(--line);}
.tst-hint span{color:var(--ink-faint);}

/* ---------- swipe cue (mobile rails) ----------
   When a rail scrolls into view, every slide slides left a little and back, and
   the chevron beside "Swipe" moves with it. It replays each time the rail comes
   back into view, until the visitor swipes it once; after that they know.
   Animates `translate`, not `transform`, so it never fights the sprout entrance. */
@keyframes rail-nudge{0%,100%{translate:0 0;}40%,58%{translate:-16% 0;}}
@keyframes rail-chev{0%,100%{translate:0 0;}40%,58%{translate:6px 0;}}
.svc-grid.is-carousel.is-nudging > .svc-card,
.tst-track.is-nudging > .tst-slide{animation:rail-nudge 1.5s cubic-bezier(.45,0,.2,1) both;}
.rail-cue{display:inline-flex;align-items:center;gap:.35rem;}
.rail-cue svg{width:14px;height:14px;flex:none;transition:opacity .4s ease;}
.is-nudging .rail-cue svg{animation:rail-chev 1.5s cubic-bezier(.45,0,.2,1) both;}
.is-learned .rail-cue svg{opacity:.45;}
.rail-hint{
  display:none;align-items:center;justify-content:center;gap:.9rem;
  margin:1rem 0 0;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-deep);font-variant-numeric:tabular-nums;
}
.rail-count{color:var(--ink-faint);letter-spacing:.08em;}
@media (max-width:620px){ .rail-hint{display:flex;} }
.rail-cue{white-space:nowrap;}
/* On a phone the review hint is one short line: the cue, no trailing clause. */
@media (max-width:520px){
  .tst-hint > span:not(.rail-cue){display:none;}
  .tst-hint::before,.tst-hint::after{width:44px;}
}
@media (prefers-reduced-motion:reduce){
  .svc-grid.is-carousel.is-nudging > .svc-card,
  .tst-track.is-nudging > .tst-slide,
  .is-nudging .rail-cue svg{animation:none;}
}

.tst-all{text-align:center;margin:.9rem 0 0;font-size:.86rem;}
.tst-all a{color:var(--green-deep);font-weight:700;text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--green-deep) 40%, transparent);padding-bottom:2px;}
.tst-all a:hover{border-bottom-color:var(--green-deep);}
.tst-progress{
  display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem;
  font-size:.78rem;font-weight:600;color:var(--ink-faint);font-variant-numeric:tabular-nums;
}
.tst-bar{
  position:relative;width:min(420px,52vw);height:2px;background:var(--line);
  cursor:pointer;border-radius:2px;
}
.tst-bar:focus-visible{outline:2px solid var(--focus);outline-offset:6px;}
.tst-knob{
  position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--green-deep);transform:translate(-50%,-50%);
  transition:left .45s cubic-bezier(.4,0,.2,1);
}

.proof-bar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:2.6rem auto 0;max-width:1000px;background:var(--surface);
}
@media (max-width:760px){.proof-bar{grid-template-columns:repeat(2,minmax(0,1fr));}}
.proof-cell{
  display:flex;align-items:center;justify-content:center;gap:.85rem;
  padding:1.5rem 1rem;border-right:1px solid var(--line);
}
.proof-cell:last-child{border-right:none;}
@media (max-width:760px){
  .proof-cell:nth-child(2n){border-right:none;}
  .proof-cell:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
.proof-cell svg{width:24px;height:24px;color:var(--green-deep);flex:none;}
.proof-n{font-family:var(--font-head);font-size:1.45rem;font-weight:600;line-height:1;}
.proof-l{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:.3rem;}

/* ============ FAQ ============ */
.faq-list{border-top:1px solid var(--line);max-width:720px;margin:.5rem auto 0;}
.faq-list details{border-bottom:1px solid var(--line);}
.faq-list summary{
  list-style:none;cursor:pointer;padding:1.35rem .2rem;display:flex;
  justify-content:center;align-items:center;gap:.7rem;font-weight:700;font-size:.98rem;
  text-align:center;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
.faq-plus{width:20px;height:20px;flex:none;position:relative;}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--green-deep);border-radius:2px;}
.faq-plus::before{left:2px;right:2px;top:9px;height:2px;}
.faq-plus::after{top:2px;bottom:2px;left:9px;width:2px;transition:transform .2s ease;}
details[open] .faq-plus::after{transform:rotate(90deg);}
.faq-a{padding:.15rem .2rem 1.5rem;color:var(--ink-soft);font-size:.92rem;max-width:58ch;margin:0 auto;text-align:center;}

/* ============ SERVICES — folder tabs over one big card ============ */
.svc-tabs{max-width:980px;margin:1.5rem auto 0;}

.svc-tablist{
  display:flex;gap:3px;position:relative;z-index:2;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.svc-tablist::-webkit-scrollbar{display:none;}

.svc-tab{
  flex:1 1 0;min-width:0;scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.5rem;   /* top-aligned: icons share one line whatever the name length */
  padding:.85rem .6rem 1rem;
  background:var(--surface-deep);
  border:1px solid var(--line);border-bottom:none;
  border-radius:9px 9px 0 0;
  margin-bottom:-1px;                 /* sit over the card's top border */
  transform:translateY(7px);          /* inactive tabs sit lower, like folder tabs behind */
  cursor:pointer;font-family:inherit;color:var(--ink-faint);
  transition:transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.svc-tab:hover{color:var(--ink-soft);background:color-mix(in srgb, var(--surface) 55%, var(--surface-deep));transform:translateY(4px);}
.svc-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-3px;}
.svc-tab[aria-selected="true"]{
  background:var(--surface);color:var(--ink);
  transform:translateY(0);
  padding-top:calc(.85rem + 7px);     /* offsets the 7px lift so its icon lines up with the rest */
  padding-bottom:1.15rem;
  border-color:var(--line);
  z-index:3;
}
.svc-tab-icon{
  width:30px;height:30px;border-radius:7px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-faint);
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.svc-tab-icon svg{width:17px;height:17px;}
.svc-tab[aria-selected="true"] .svc-tab-icon{
  background:linear-gradient(155deg,var(--teal-deep),var(--teal));
  border-color:transparent;color:#fff;
}
.svc-tab-name{
  font-family:var(--font-body);font-size:.76rem;font-weight:700;line-height:1.25;
  text-align:center;letter-spacing:.005em;
}

/* Panels share one grid cell. Only the active panel sets the card's height. */
.svc-panels{
  display:grid;position:relative;z-index:1;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:0 0 12px 12px;
  overflow:hidden;
}
.svc-panel{
  /* Inactive panels collapse to zero height. Photo sets now range from 1 to 28
     photos, so sizing the card to the tallest service left a large blank area
     under the short ones. visibility:hidden keeps inactive panels out of the
     accessibility tree and focus order. */
  grid-area:1/1;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease;
}
.svc-panel.is-active{opacity:1;visibility:visible;pointer-events:auto;}
.svc-panel:not(.is-active){max-height:0;overflow:hidden;}

/* Same rule as the hero: 16/6 is only the fallback for the illustration. */
.svc-panel-media{
  /* One fixed landscape frame for every service (client request, 22 Sep), so the
     panels read as a set. Photos fill it with object-fit:cover. */
  width:100%;aspect-ratio:16/9;max-height:520px;
  overflow:hidden;background:var(--surface-deep);
}
.svc-panel-media img.ph{object-fit:cover;}


.svc-panel-copy{
  padding:1.9rem 2rem 2.2rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem;
}
.svc-panel-copy h3{font-size:1.35rem;}
.svc-desc{color:var(--ink-soft);font-size:.95rem;margin:0;max-width:56ch;}
/* A planting schedule, not UI pills. Landscape plans list their contents as a ruled
   spec: a bullet, the item, a hairline between. Reads as drawn-up rather than tagged. */
.svc-schedule{
  list-style:none;margin:0;padding:0;width:100%;max-width:600px;
  display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem;text-align:left;
}
@media (max-width:640px){.svc-schedule{grid-template-columns:1fr;gap:0;}}
.svc-schedule li{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.75rem 0;border-top:1px solid var(--line);
  font-size:.88rem;line-height:1.45;color:var(--ink-soft);
}
.svc-schedule .bullet{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;margin-top:calc(.725em - 3px);}

.schedule-h{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .2rem;
}


@media (max-width:820px){
  .svc-tab{flex:0 0 auto;min-width:132px;}   /* strip scrolls horizontally instead of squashing */
  /* fade the trailing edge so it reads as scrollable rather than cut off */
  .svc-tablist{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  }
  .svc-panel-copy{padding:1.6rem 1.3rem 1.9rem;}
}
@media (max-width:520px){
  .svc-tab{min-width:118px;padding:.75rem .5rem .9rem;}
  .svc-tab[aria-selected="true"]{padding-top:calc(.75rem + 7px);}
  .svc-tab-name{font-size:.72rem;}
  .svc-panel-media{max-height:42vh;}
  }

.quote-module{margin:2.8rem auto 0;padding:2.2rem 2rem;border-radius:12px;background:var(--surface);border:1px solid var(--line);text-align:center;max-width:980px;}
.quote-module h3{font-size:1.25rem;margin:0 0 .7rem;}
.quote-module p{color:var(--ink-soft);font-size:.92rem;max-width:58ch;margin:0 auto;}
.quote-factors{margin-top:1.4rem;display:flex;justify-content:center;}

/* ============ ABOUT ============ */
.about-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2.5rem;max-width:760px;margin:0 auto;}

.about-grid p{color:var(--ink-soft);max-width:60ch;margin-inline:auto;}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem;border-radius:8px;overflow:hidden;width:100%;text-align:center;}
@media (max-width:700px){.stat-row{grid-template-columns:repeat(2,1fr);}}
.stat-cell{background:var(--surface);padding:1.2rem;}
.stat-cell .n{font-family:var(--font-body);font-size:1.6rem;color:var(--green-deep);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.stat-cell .l{font-size:.78rem;color:var(--ink-soft);margin-top:.4rem;}

/* The crew is shown as a mosaic rather than named cards. Two reasons: the
   photos that arrived are people at work, not portraits, and only Jonathan's
   name and role are confirmed. A wall of real work needs no captions. */
.team-grid{column-count:3;column-gap:.7rem;margin-top:1.4rem;max-width:860px;margin-inline:auto;}
@media (max-width:820px){.team-grid{column-count:2;}}
@media (max-width:460px){.team-grid{column-count:2;column-gap:.5rem;}}
.team-shot{
  display:block;width:100%;padding:0;border:0;background:none;
  break-inside:avoid;margin:0 0 .7rem;border-radius:9px;overflow:hidden;
  cursor:zoom-in;line-height:0;
  transition:transform .4s var(--ease-grow),box-shadow .25s ease;
}
@media (max-width:460px){.team-shot{margin-bottom:.5rem;}}
.team-shot img{width:100%;height:auto;display:block;border-radius:9px;}
.team-shot:hover{transform:translateY(-3px);box-shadow:0 12px 26px -12px rgba(1,76,104,.42);}
.team-shot:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
.team-card{text-align:center;}
.team-card h3{font-size:.96rem;}

.award-row{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:1rem;width:100%;max-width:520px;margin-inline:auto;}
.award{
  display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;width:100%;
  background:var(--green-wash);border:1px solid color-mix(in srgb, var(--green) 40%, transparent);
  border-radius:10px;text-align:left;
}
.award svg{width:26px;height:26px;color:var(--green-deep);flex:none;}
.award-n{font-family:var(--font-head);font-weight:600;font-size:1.02rem;line-height:1.2;}
.award-d{font-size:.8rem;color:var(--ink-soft);margin-top:.15rem;}
.badge-row{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:1rem;width:100%;max-width:520px;margin-inline:auto;}
.badge{
  display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.8rem .95rem;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  font-size:.86rem;font-weight:600;flex-wrap:wrap;text-align:center;width:100%;
}
.badge svg{width:16px;height:16px;color:var(--green-deep);flex:none;}
.spec-list{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.5rem 0;margin-top:1rem;max-width:520px;margin-inline:auto;
}
.spec-list span{
  font-size:.84rem;color:var(--ink-soft);padding:0 .9rem;
  border-right:1px solid var(--line);line-height:1.3;
}
.spec-list span:last-child{border-right:none;}

/* ============ GALLERY ============ */

/* ============ GALLERY WALL ============
   CSS columns, not grid. Grid would need every tile forced into a row track,
   which means cropping. Columns let each photo keep its native ratio, which is
   the whole point of the mosaic. Reading order runs down each column rather
   than across rows, which is how photo walls read anyway. */
.wall{
  column-count:4;column-gap:10px;margin-top:2rem;
}
@media (max-width:1100px){.wall{column-count:3;}}
@media (max-width:760px){.wall{column-count:2;column-gap:8px;}}
@media (max-width:420px){.wall{column-count:2;column-gap:6px;}}

.wall-item{
  break-inside:avoid;margin:0 0 10px;padding:0;border:0;background:none;
  display:block;width:100%;cursor:zoom-in;border-radius:8px;overflow:hidden;
  position:relative;line-height:0;
  transition:transform .45s var(--ease-grow), box-shadow .25s ease;
}
@media (max-width:760px){.wall-item{margin-bottom:8px;}}
.wall-item img{width:100%;height:auto;display:block;border-radius:8px;}
.wall-item:hover{transform:translateY(-3px);box-shadow:0 12px 28px -12px rgba(1,76,104,.4);}
.wall-item:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
/* Grows in as it scrolls into view, one beat per tile. */
.wall-item{opacity:0;transform:translateY(14px) scale(.985);}
.wall.is-visible .wall-item{opacity:1;transform:none;}
.wall.is-visible .wall-item:hover{transform:translateY(-3px);}

/* ============ SERVICE MOSAIC ============
   Same column masonry as the gallery wall, narrower. Square thumbnails were
   throwing away 44% of every portrait photo; this keeps each one whole. */
.svc-strip{
  column-count:3;column-gap:.6rem;width:100%;max-width:760px;
}
@media (max-width:900px){.svc-strip{column-count:3;}}
@media (max-width:560px){.svc-strip{column-count:2;column-gap:.45rem;}}
.svc-shot{
  display:block;width:100%;padding:0;border:0;background:none;
  break-inside:avoid;margin:0 0 .6rem;
  border-radius:8px;overflow:hidden;cursor:zoom-in;line-height:0;
  transition:transform .4s var(--ease-grow),box-shadow .25s ease;
}
@media (max-width:560px){.svc-shot{margin-bottom:.45rem;}}
.svc-shot img{width:100%;height:auto;display:block;border-radius:8px;}
.svc-shot:hover{transform:translateY(-3px);box-shadow:0 12px 26px -12px rgba(1,76,104,.42);}
.svc-shot:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
.svc-more{
  font-size:.78rem;color:var(--ink-faint);margin:.55rem 0 0;width:100%;max-width:620px;text-align:center;
}

/* ============ LIGHTBOX ============ */
dialog#lightbox{
  border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100%;height:100%;overflow:hidden;
}
dialog#lightbox::backdrop{background:rgba(6,16,20,.92);}
.lb-stage{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:3.5rem 3.5rem 4.2rem;box-sizing:border-box;
}
.lb-stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border-radius:6px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.lb-btn{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .35s var(--ease-grow);
}
.lb-btn:hover{background:rgba(255,255,255,.22);transform:scale(1.08);}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.lb-btn svg{width:20px;height:20px;}
.lb-close{top:1rem;right:1rem;}
.lb-prev{left:1rem;top:50%;margin-top:-23px;}
.lb-next{right:1rem;top:50%;margin-top:-23px;}
.lb-count{
  position:absolute;left:0;right:0;bottom:1.25rem;text-align:center;
  color:rgba(255,255,255,.72);font-size:.8rem;letter-spacing:.12em;
}
@media (max-width:620px){
  .lb-stage{padding:3.2rem .6rem 3.6rem;}
  .lb-btn{width:40px;height:40px;}
  .lb-prev{left:.4rem;} .lb-next{right:.4rem;}
}
@media (prefers-reduced-motion: reduce){
  .wall-item{opacity:1 !important;transform:none !important;}
}

/* ============ CONTACT ============ */
.contact-grid{
  display:flex;flex-direction:column;align-items:center;gap:2.4rem;
  max-width:640px;margin:0 auto;width:100%;
}

/* Call block — the primary action for a local service, so it leads and is unboxed */
.contact-lead{text-align:center;}
.contact-lead-label{
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .5rem;
}
.contact-phone-big{
  font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.9rem,4.2vw,2.5rem);line-height:1;
  color:var(--teal);text-decoration:none;display:inline-block;
  transition:color .18s ease;
}
.contact-phone-big:hover{color:var(--green-deep);}
.contact-lead-note{
  color:var(--ink-soft);font-size:.92rem;margin:.9rem auto 0;max-width:46ch;
}

/* Form sits in one contained card instead of floating on the page */
.contact-card{
  width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:2rem 2rem 1.9rem;box-shadow:var(--shadow);
}
@media (max-width:560px){.contact-card{padding:1.5rem 1.25rem 1.4rem;}}
.contact-card-h{
  text-align:center;font-size:1.15rem;margin:0 0 .4rem;
}
.contact-card-sub{
  text-align:center;color:var(--ink-soft);font-size:.88rem;margin:0 0 1.6rem;
}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}
@media (max-width:560px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem;min-width:0;}
.field.full{grid-column:1/-1;}
.field label{font-size:.8rem;font-weight:700;color:var(--ink-soft);}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.95rem;padding:.8rem .9rem;border-radius:8px;
  border:1px solid var(--line);background:var(--ground);color:var(--ink);
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  transition:border-color .16s ease, background .16s ease;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:color-mix(in srgb, var(--green-deep) 45%, var(--line));}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--focus);outline-offset:1px;background:var(--surface);
}
.field textarea{resize:vertical;min-height:110px;}
.form-actions{display:flex;justify-content:center;margin-top:.3rem;}
.form-note{font-size:.76rem;color:var(--ink-faint);margin:.9rem auto 0;text-align:center;max-width:40ch;}
.form-success{
  display:none;padding:2rem 1.6rem;background:var(--green-wash);color:var(--green-deep);
  border:1px solid color-mix(in srgb, var(--green) 40%, transparent);
  border-radius:14px;font-weight:700;text-align:center;width:100%;
}
.form-success.is-visible{display:block;}
#contactForm.is-hidden{display:none;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-error{margin:.6rem 0 0;font-size:.85rem;color:#b3261e;min-height:1.1em;}
#formSubmit[disabled]{opacity:.65;cursor:progress;}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#b3261e;}

/* ============ CTA BAND + FOOTER ============ */
/* The same colour the header shows on screen. The header is --hdr-bg at 94% over
   the page, which renders as #18261f, not the raw #0c1a14; mixing the same way
   keeps the two identical if either colour ever changes. Chosen 24 Aug. */
.cta-band{background:#18261f;background:color-mix(in srgb, var(--hdr-bg,#0c1a14) 94%, var(--ground));text-align:center;}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,3vw,2.05rem);}
.cta-band p{color:rgba(255,255,255,.8);margin:.75rem 0 1.7rem;}
.cta-phone{display:block;margin-top:1rem;color:rgba(255,255,255,.85);font-size:.9rem;text-decoration:none;}
.cta-phone strong{color:#fff;}

.site-footer{background:var(--surface-deep);border-top:1px solid var(--line);padding:4.5rem 0 2rem;}

/* The footer is deliberately NOT centred — it is distributed left / middle / right,
   the same carve-out from the centred rule as the header. */
.footer-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr 1.1fr 1.2fr;
  gap:3rem 2.5rem;
  text-align:left;
  align-items:start;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:2.6rem 2rem;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;gap:2.2rem;}}

.footer-brand{max-width:34ch;}
.footer-brand .brand{justify-content:flex-start;margin-bottom:1rem;}
.footer-brand .brand-mark{height:52px;}
/* Slogan carried through to every page via the footer */
.footer-slogan{
  display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .7rem;
  margin:0 0 .75rem;font-family:var(--font-body);font-weight:600;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);
}
.footer-slogan .sep{
  width:5px;height:5px;flex:none;border-radius:50%;
  background:var(--green);align-self:center;
}
.footer-blurb{color:var(--ink-soft);font-size:.88rem;margin:0 0 1.3rem;}

.footer-social{display:flex;gap:.7rem;margin-top:1.5rem;}
.footer-social a{
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--teal);
  text-decoration:none;background:var(--surface);
  transition:border-color .2s ease,color .2s ease,transform .4s var(--ease-grow),background .2s ease;
}
.footer-social a:hover{
  border-color:var(--green-deep);color:var(--green-deep);
  background:var(--green-wash);transform:translateY(-3px) scale(1.06);
}
.footer-social svg{width:22px;height:22px;}

/* ============ AWARD / MEMBERSHIP BADGES ============
   Supplied as transparent PNGs at wildly different shapes, so each sits in a
   fixed-height box and scales inside it. That keeps the row visually even
   without stretching any one badge. */
.badge-wall{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.6rem 1.2rem;margin-top:1.1rem;width:100%;
}
@media (max-width:560px){.badge-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem .9rem;}}
.badge-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;}
.badge-art{
  height:104px;display:flex;align-items:center;justify-content:center;width:100%;
}
.badge-art img{max-height:104px;max-width:100%;width:auto;height:auto;display:block;}
@media (max-width:560px){.badge-art,.badge-art img{height:82px;max-height:82px;}}
.badge-n{font-weight:600;font-size:.88rem;line-height:1.3;color:var(--ink);}
.badge-d{font-size:.76rem;line-height:1.35;color:var(--ink-faint);}

/* ============ FOLLOW BLOCK (About + Contact) ============
   Icons alone give a visitor no reason to click, so each row names what is
   actually posted there. Bordered, not a card, so it reads as part of the
   column rather than another floating panel. */
.follow-block{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.5rem 0;margin-top:2rem;width:100%;
  max-width:560px;margin-inline:auto;text-align:left;
}
.follow-h{
  font-family:var(--font-head);font-weight:600;font-size:1.05rem;
  color:var(--ink);margin:0 0 .25rem;
}
/* .about-grid p sets max-width plus margin-inline:auto, which centred this
   paragraph inside the block and left it indented against the heading. The
   block owns its own text layout, so both are reset here. */
.follow-block .follow-h,.follow-block .follow-sub{max-width:none;margin-inline:0;}
.follow-sub{font-size:.85rem;color:var(--ink-soft);margin:0 0 1.15rem;}
.follow-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem;}
.follow-list a{
  display:flex;align-items:center;gap:.95rem;padding:.7rem 1rem;
  text-decoration:none;color:inherit;border-radius:10px;text-align:left;
  transition:background .25s ease;
}
.follow-list a:hover{background:var(--green-wash);}
.follow-ic{
  width:44px;height:44px;flex:none;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,color .2s ease,transform .4s var(--ease-grow);
}
.follow-list a:hover .follow-ic{
  border-color:var(--green-deep);color:var(--green-deep);transform:scale(1.08);
}
.follow-ic svg{width:22px;height:22px;}
.follow-n{font-weight:600;font-size:.95rem;line-height:1.25;}
.follow-d{font-size:.8rem;color:var(--ink-faint);line-height:1.35;}
.follow-arrow{margin-left:auto;color:var(--ink-faint);flex:none;
  transition:transform .4s var(--ease-grow),color .2s ease;}
.follow-list a:hover .follow-arrow{transform:translateX(4px);color:var(--green-deep);}
.follow-arrow svg{width:16px;height:16px;}

.footer-h{
  font-family:var(--font-body);font-size:.71rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:var(--ink-faint);margin:0 0 1rem;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.footer-col a{
  font-size:.89rem;color:var(--ink-soft);text-decoration:none;
  transition:color .18s ease;
}
.footer-col a:hover{color:var(--green-deep);}
.footer-contact{display:flex;flex-direction:column;gap:.9rem;}
.footer-contact-item{display:flex;gap:.6rem;align-items:flex-start;font-size:.89rem;color:var(--ink-soft);}
.footer-contact-item svg{width:16px;height:16px;color:var(--green-deep);flex:none;margin-top:.15rem;}
.footer-contact-item a{color:var(--ink-soft);text-decoration:none;}
.footer-contact-item a:hover{color:var(--green-deep);}
.stat-link{text-decoration:none;color:inherit;display:block;}
.stat-link:hover .l{color:var(--green-deep);text-decoration:underline;}
.tst-meta a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.footer-phone{font-weight:700;color:var(--teal) !important;font-size:.98rem !important;}

.footer-bottom{
  margin-top:3.4rem;padding-top:1.7rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.7rem;
  font-size:.78rem;color:var(--ink-faint);text-align:left;
}
.footer-legal{display:flex;gap:1.3rem;flex-wrap:wrap;}
.footer-legal a{color:var(--ink-faint);text-decoration:none;}
.footer-legal a:hover{color:var(--green-deep);}
@media (max-width:640px){.footer-bottom{justify-content:flex-start;}}

/* ===== LOGO OPTION B: badge breaking the header ===== */
.site-header{overflow:visible;}
.header-row{padding-block:.95rem;position:relative;}
.brand{gap:1rem;position:relative;}
.brand-plate{
  position:relative;flex:none;
  width:104px;height:104px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 10px 26px -14px rgba(1,76,104,.42);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:-40px;        /* hangs below the bar and overlaps the page */
  transition:transform .5s var(--ease-grow), box-shadow .3s ease;
  z-index:3;
}
.brand:hover .brand-plate{transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 34px -14px rgba(1,76,104,.5);}
.brand-plate .brand-mark{height:74px;margin:0;}
.brand:hover .brand-mark{transform:none;}   /* the plate does the moving now */
.brand-word{font-size:1.2rem;}
.brand-word span{font-size:.63rem;letter-spacing:.13em;margin-top:.24rem;}

/* Footer keeps the plate idea, larger and centred on its own column */
.footer-brand .brand{flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:1.2rem;}
.footer-brand .brand-plate{width:132px;height:132px;margin-bottom:0;}
.footer-brand .brand-plate .brand-mark{height:94px;}
.footer-brand .brand-word{font-size:1.28rem;}

@media (max-width:760px){
  .brand-plate{width:84px;height:84px;margin-bottom:-30px;}
  .brand-plate .brand-mark{height:58px;}
  .brand-word{font-size:1rem;}
}
/* Below 480px the header row is plate + wordmark + Quote + menu. After the
   button and the toggle take their space there are ~80px left, which is not
   enough for "Island Landscape Services" on one line at any readable size —
   it wrapped to two lines and made the header top-heavy. The badge IS the
   brand mark in this treatment, so the wordmark steps aside and the plate
   grows to carry it. The link keeps its accessible name either way. */
@media (max-width:480px){
  .site-header .brand-word{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .brand-plate{width:78px;height:78px;margin-bottom:-26px;}
  .brand-plate .brand-mark{height:55px;}
  .header-row{gap:.5rem;}
}
@media (max-width:430px){
  .footer-brand .brand-plate{width:108px;height:108px;}
  .footer-brand .brand-plate .brand-mark{height:76px;}
}

/* ================== DARK HEADER ==================
   Chosen 16 Sep. Sits last so it overrides the light header rules above rather
   than replacing them, which keeps the light version one deletion away.
   EVERY RULE IS SCOPED TO .site-header: the brand lockup also appears in the
   footer on a light background, and an unscoped rule once turned the footer
   wordmark white on cream. */
:root{ --hdr-ink:#f4f7f5; --hdr-bg:#0c1a14; }

.site-header{
  background:color-mix(in srgb, var(--hdr-bg) 94%, transparent);
  border-bottom:1px solid rgba(255,255,255,.12);
}
/* SCOPE EVERY RULE TO .site-header. The brand lockup also appears in the
   footer, which sits on a light background: an unscoped .brand-word rule turned
   the footer wordmark white on cream and made it unreadable. */
.site-header .brand-plate{
  background:#fff;border-color:rgba(255,255,255,.22);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.75);
}
.site-header .brand-word{color:var(--hdr-ink);}
.site-header .brand-word span{color:rgba(244,247,245,.62);}

nav.main-nav a{color:rgba(244,247,245,.82);}
nav.main-nav a:hover{color:#fff;}
nav.main-nav a[aria-current="page"]{color:#fff;}
/* The green underline reads brighter than --green on a dark bar. */
nav.main-nav a::after{background:#5fd479;}

.header-phone{color:var(--hdr-ink);}
.header-phone:hover{color:#5fd479;}

.nav-toggle{border-color:rgba(255,255,255,.3);color:var(--hdr-ink);}
.nav-toggle:hover{background:rgba(255,255,255,.08);}

.mobile-nav{border-top-color:rgba(255,255,255,.12);}
.mobile-nav a{color:rgba(244,247,245,.82);}
.mobile-nav a[aria-current="page"]{color:#fff;}

/* The quote button already carries the brand green and needs no change, but it
   wants a touch more presence against black. */
.site-header .btn-primary{box-shadow:0 8px 22px -10px rgba(27,122,53,.9);}

/* Masonry without CSS columns. Chrome and Safari fail to repaint a transformed
   child of a multi-column container, so the hover lift blanked photos out.
   JS (layoutMasonry) deals items into flex columns, shortest column first,
   using each photo's known ratio. Column counts mirror the old breakpoints. */
.wall,.svc-strip,.team-grid{column-count:auto !important;display:flex;align-items:flex-start;}
.wall{gap:10px;}
@media (max-width:760px){.wall{gap:8px;}}
@media (max-width:420px){.wall{gap:6px;}}
.svc-strip{gap:.6rem;}
@media (max-width:560px){.svc-strip{gap:.45rem;}}
.team-grid{gap:.7rem;}
@media (max-width:460px){.team-grid{gap:.5rem;}}
.mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;}

/* ONE vertical rhythm for the whole site (22 Sep). Every section boundary uses
   --section-y above and below, so any two blocks sit the same distance apart
   whether or not the section has a background. The hero follows the same rule:
   image, rule and next heading are spaced by --section-y too. */
:root{--section-y:3.75rem;}
@media (max-width:760px){:root{--section-y:3.25rem;}}
section.band, section.band.tight{padding:var(--section-y) 0;}
.hero{padding-top:var(--section-y);padding-bottom:0;}
.hero-rule{margin-top:calc(var(--section-y) - 2.6rem);}   /* .hero-inner gap is 2.6rem */
.hero + .band{padding-top:var(--section-y);}
.site-footer{padding-top:var(--section-y);}


/* ================= MOBILE FOOTER =================
   The single-column stack below 520px ran ~1450px tall on a 390px phone, more
   than a full screen of scrolling past the end of the content. Explore and
   Services are short lists that sit side by side comfortably at this width, so
   the grid stays two columns and only the brand block and Get in touch span
   the full row. Everything else here is spacing, not structure. Nothing above
   520px is touched. */
@media (max-width:520px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:1.9rem 1.25rem;
  }
  .footer-brand{grid-column:1 / -1; max-width:none;}
  .footer-grid > .footer-col:last-of-type{grid-column:1 / -1;}

  /* brand block: the plate is the mark, so it can give back some height */
  .footer-brand .brand{gap:.7rem;margin-bottom:.9rem;}
  .footer-brand .brand-plate{width:92px;height:92px;}
  .footer-brand .brand-plate .brand-mark{height:66px;}
  .footer-brand .brand-word{font-size:1.15rem;}
  .footer-slogan{font-size:.68rem;letter-spacing:.2em;margin-bottom:.6rem;}
  .footer-blurb{font-size:.85rem;line-height:1.55;margin-bottom:1rem;}
  .footer-social{margin-top:1.1rem;gap:.6rem;}
  .footer-social a{width:42px;height:42px;}
  .footer-social svg{width:19px;height:19px;}

  /* the two link lists */
  .footer-h{margin-bottom:.65rem;}
  /* gap, not margin, so a wrapped item like "Irrigation & Landscape Lighting"
     stays visually one entry instead of reading as two */
  .footer-col ul{gap:.55rem;}
  .footer-col a{font-size:.86rem;line-height:1.25;display:inline-block;}

  /* Get in touch spans the row, so its items can sit two across. The address
     block is the only one that needs the full width to stay readable. */
  .footer-contact{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.75rem 1.1rem;
  }
  .footer-contact-item{font-size:.85rem;}
  .footer-contact-item:nth-child(3){grid-column:1 / -1;}

  .site-footer{padding-top:2.6rem;padding-bottom:1.4rem;}
  .footer-bottom{margin-top:2rem;padding-top:1.1rem;gap:.45rem;font-size:.76rem;}
  .footer-legal{gap:1rem;}
}

/* Below 400px two link columns still fit, but the Get in touch pairs do not:
   "Request a quote online" wraps to three lines against the phone number. */
@media (max-width:400px){
  .footer-contact{grid-template-columns:1fr;gap:.7rem;}
  .footer-contact-item:nth-child(3){grid-column:auto;}
}