/* ==========================================================================
   Tricky Trees LTD — Site stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink:        #12261E;  /* deep forest */
  --bark:       #3A2A1E;  /* warm bark */
  --canopy:     #2F6B4F;  /* canopy green */
  --canopy-dk:  #234f3b;
  --gold:       #C8A24B;  /* sap gold accent */
  --gold-dk:    #a9863a;
  --birch:      #F5F2EB;  /* off-white */
  --stone:      #8B948E;  /* muted grey */
  --stone-dk:   #5a635d;
  --white:      #ffffff;

  --shadow-sm: 0 1px 3px rgba(18,38,30,.10), 0 1px 2px rgba(18,38,30,.06);
  --shadow-md: 0 8px 24px rgba(18,38,30,.12);
  --shadow-lg: 0 20px 48px rgba(18,38,30,.18);

  --maxw: 1180px;
  --radius: 4px;
  --radius-lg: 10px;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--birch);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--canopy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--canopy-dk); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
p  { margin: 0 0 1.1em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(56px, 8vw, 110px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold-dk);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px; background: var(--gold);
  display: inline-block;
}
.lead { font-size: 1.18rem; color: var(--stone-dk); max-width: 62ch; }

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white); padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 15px 28px; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gold { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: var(--gold-dk); color: var(--ink); box-shadow: var(--shadow-md); }
.btn--forest { background: var(--canopy); color: var(--white); }
.btn--forest:hover { background: var(--canopy-dk); color: var(--white); }
.btn--outline { background: transparent; border-color: currentColor; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--birch); border-color: var(--ink); }
.btn--light { background: var(--birch); color: var(--ink); }
.btn--light:hover { background: var(--white); color: var(--ink); }
.btn--ghost-light { background: transparent; border-color: rgba(245,242,235,.5); color: var(--birch); }
.btn--ghost-light:hover { background: rgba(245,242,235,.12); color: var(--white); border-color: var(--birch); }

/* Visible focus for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Top call bar ---------- */
.callbar {
  background: var(--ink); color: var(--birch);
  font-size: .9rem; text-align: center;
}
.callbar .container { display: flex; align-items: center; justify-content: center; gap: 8px 24px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; }
.callbar a { color: var(--gold); font-weight: 600; text-decoration: none; }
.callbar a:hover { color: var(--white); text-decoration: underline; }
.callbar .dot { color: var(--stone); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,242,235,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(18,38,30,.08);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: var(--maxw); margin: 0 auto; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand__mark { flex: 0 0 auto; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.01em; line-height: 1; }
.brand__sub { display: block; font-family: var(--font-body); font-size: .62rem; text-transform: uppercase; letter-spacing: .22em; color: var(--stone-dk); font-weight: 600; margin-top: 3px; }

.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: .94rem;
  padding: 9px 11px; border-radius: var(--radius); white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease);
}
.nav__links a:hover { background: rgba(47,107,79,.10); color: var(--canopy-dk); }
.nav__links a[aria-current="page"] { color: var(--canopy-dk); font-weight: 600; }
.nav__cta { margin-left: 8px; }

.nav__toggle {
  display: none; background: none; border: 2px solid rgba(18,38,30,.15);
  border-radius: var(--radius); padding: 8px 10px; cursor: pointer; color: var(--ink);
}
.nav__toggle svg { display: block; }

@media (max-width: 1050px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--birch); border-bottom: 1px solid rgba(18,38,30,.1);
    padding: 12px 16px 20px; box-shadow: var(--shadow-md);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px; font-size: 1.05rem; }
  .nav__cta { margin: 6px 0 0; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; color: var(--birch); overflow: hidden;
  background: linear-gradient(180deg, rgba(18,38,30,.62), rgba(18,38,30,.82)), var(--ink);
  background-size: cover; background-position: center;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.hero__bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(18,38,30,.55), rgba(18,38,30,.86)); }
.hero .container { position: relative; z-index: 1; padding-top: clamp(70px, 10vw, 130px); padding-bottom: clamp(70px, 10vw, 130px); }
.hero__inner { max-width: 780px; }
.hero h1 { color: var(--white); margin-bottom: 20px; }
.hero__lead { font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(245,242,235,.9); max-width: 56ch; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__trust { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: .92rem; color: rgba(245,242,235,.82); }
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { flex: 0 0 auto; color: var(--gold); }

/* page hero (inner pages) */
.pagehero { background: var(--ink); color: var(--birch); position: relative; overflow: hidden; }
.pagehero::before {
  content:""; position:absolute; right:-60px; top:-60px; width: 320px; height: 320px;
  border-radius: 50%; border: 1px solid rgba(200,162,75,.18);
  box-shadow: 0 0 0 30px rgba(200,162,75,.05), 0 0 0 70px rgba(200,162,75,.04);
}
.pagehero .container { position: relative; padding-top: clamp(48px,7vw,86px); padding-bottom: clamp(48px,7vw,86px); }
.pagehero h1 { color: var(--white); }
.pagehero .lead { color: rgba(245,242,235,.85); }
.crumbs { font-size: .85rem; color: rgba(245,242,235,.6); margin-bottom: 18px; }
.crumbs a { color: var(--gold); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Growth-ring signature divider ---------- */
.rings { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.rings span { display: block; height: 8px; border-radius: 50%; border: 1.5px solid var(--gold); }
.rings span:nth-child(1){ width:8px }
.rings span:nth-child(2){ width:14px; height:14px }
.rings span:nth-child(3){ width:20px; height:20px }

/* ---------- Feature/values row ---------- */
.grid { display: grid; gap: 28px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid--3, .grid--4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr;} }

.value {
  background: var(--white); border: 1px solid rgba(18,38,30,.08); border-radius: var(--radius-lg);
  padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value__icon {
  width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(47,107,79,.12); color: var(--canopy-dk); margin-bottom: 16px;
}
.value h3 { margin-bottom: 8px; font-size: 1.25rem; }
.value p { margin: 0; color: var(--stone-dk); font-size: .98rem; }

/* ---------- Service cards ---------- */
.service {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid rgba(18,38,30,.08); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service__media { aspect-ratio: 16/10; background: var(--ink); position: relative; }
.service__media svg { position:absolute; inset:0; width:100%; height:100%; }
.service__body { padding: 24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.service__body h3 { font-size: 1.3rem; }
.service__tag { font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--gold-dk); margin-bottom:10px; display:inline-block;}
.service__body p { color: var(--stone-dk); font-size: .97rem; flex:1; }
.service__link { margin-top: 14px; font-weight: 600; text-decoration: none; color: var(--canopy-dk); display:inline-flex; align-items:center; gap:6px; }
.service__link:hover { gap: 10px; }

/* Featured (tree removal) */
.service--feature { grid-column: span 2; }
@media (max-width: 620px){ .service--feature { grid-column: span 1; } }
.badge-star {
  position:absolute; top:14px; left:14px; z-index:2; background: var(--gold); color: var(--ink);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:6px 12px; border-radius: 999px;
}

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; gap: 34px; } }
.split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; background: var(--ink); }
.split__media svg { width:100%; height:100%; display:block; }
.checklist { list-style: none; margin: 20px 0 28px; padding: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist svg { flex: 0 0 auto; margin-top: 3px; color: var(--canopy); }

/* ---------- Dark band ---------- */
.band { background: var(--ink); color: var(--birch); }
.band h2 { color: var(--white); }
.band .lead { color: rgba(245,242,235,.82); }
.band--bark { background: var(--bark); }

/* ---------- Stats ---------- */
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; color: var(--gold); line-height: 1; }
.stat__label { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: rgba(245,242,235,.8); margin-top: 10px; }

/* ---------- Area / location grid ---------- */
.area {
  display:block; text-decoration: none; color: var(--ink);
  background: var(--white); border:1px solid rgba(18,38,30,.08); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.area:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(47,107,79,.4); color: var(--ink); }
.area h3 { font-size: 1.25rem; margin-bottom: 6px; }
.area p { margin: 0; color: var(--stone-dk); font-size: .93rem; }
.area__pin { color: var(--canopy); margin-bottom: 12px; }

/* ---------- Testimonials ---------- */
.quote {
  background: var(--white); border-radius: var(--radius-lg); padding: 32px 30px;
  border: 1px solid rgba(18,38,30,.08); box-shadow: var(--shadow-sm);
}
.quote__stars { color: var(--gold); margin-bottom: 14px; letter-spacing: 2px; }
.quote p { font-family: var(--font-display); font-size: 1.18rem; font-style: italic; color: var(--ink); line-height: 1.5; }
.quote__who { font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: .95rem; color: var(--stone-dk); margin-top: 8px; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--canopy-dk), var(--ink)); color: var(--birch); text-align: center; }
.cta-band h2 { color: var(--white); }
.cta-band .lead { color: rgba(245,242,235,.88); margin: 0 auto 28px; }
.cta-band .hero__actions { justify-content: center; }
.cta-phone { font-family: var(--font-display); font-size: clamp(1.6rem,4vw,2.4rem); color: var(--white); text-decoration:none; display:inline-block; margin-top: 8px; }
.cta-phone:hover { color: var(--gold); }

/* ---------- Form ---------- */
.formcard {
  background: var(--white); border-radius: var(--radius-lg); padding: clamp(26px,4vw,44px);
  box-shadow: var(--shadow-md); border: 1px solid rgba(18,38,30,.08);
}
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 7px; }
.field .req { color: var(--canopy-dk); }
.field .opt { color: var(--stone); font-weight: 400; font-size: .85rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; font-family: var(--font-body); font-size: 1rem;
  border: 1.5px solid rgba(18,38,30,.18); border-radius: var(--radius); background: var(--birch); color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--canopy); background: var(--white); outline: 3px solid rgba(200,162,75,.35); outline-offset: 0; }
.field textarea { resize: vertical; min-height: 120px; }
.field .hint { font-size: .82rem; color: var(--stone-dk); margin: 6px 0 0; }
.form-status { padding: 16px 18px; border-radius: var(--radius); margin-top: 8px; font-weight: 500; }
.form-status--ok { background: rgba(47,107,79,.12); color: var(--canopy-dk); border: 1px solid rgba(47,107,79,.3); }
.form-error { color: #a3341f; font-size: .85rem; margin-top: 6px; display:none; }
.field.invalid input, .field.invalid textarea { border-color: #a3341f; }
.field.invalid .form-error { display: block; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid rgba(18,38,30,.12); }
.faq details { border-bottom: 1px solid rgba(18,38,30,.12); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--canopy); font-family: var(--font-body); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 22px; margin: 0; color: var(--stone-dk); max-width: 72ch; }

/* ---------- Content prose (legal/service pages) ---------- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5em; }
.prose table { width:100%; border-collapse: collapse; margin: 1em 0 1.5em; }
.prose th, .prose td { text-align:left; padding: 10px 12px; border-bottom: 1px solid rgba(18,38,30,.12); font-size: .95rem; }
.prose th { background: rgba(47,107,79,.08); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(245,242,235,.78); font-size: .95rem; }
.site-footer a { color: rgba(245,242,235,.85); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding: 64px 0 40px; }
@media (max-width: 860px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); margin-bottom: 16px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-brand .brand__name { color: var(--white); }
.footer-brand p { color: rgba(245,242,235,.65); max-width: 34ch; font-size: .92rem; }
.footer-contact strong { color: var(--white); display: block; font-weight: 600; }
.footer-bottom { border-top: 1px solid rgba(245,242,235,.14); padding: 22px 0; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .85rem; color: rgba(245,242,235,.6); }
.footer-bottom a { color: rgba(245,242,235,.7); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; } }

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mx-auto { margin-left:auto; margin-right:auto; }
.mt-0 { margin-top: 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left:auto; margin-right:auto; }
.visually-hidden { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* ---------- Single-page additions ---------- */
:root { --header-offset: 128px; }
@media (max-width: 1050px){ :root { --header-offset: 118px; } }
section[id] { scroll-margin-top: var(--header-offset); }

/* legal accordion */
.legal { border-top: 1px solid rgba(18,38,30,.12); max-width: 820px; }
.legal details { border-bottom: 1px solid rgba(18,38,30,.12); }
.legal summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink);
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::after {
  content: "+"; position: absolute; right: 6px; top: 22px;
  font-size: 1.6rem; color: var(--canopy); font-family: var(--font-body); line-height: 1; transition: transform .2s var(--ease);
}
.legal details[open] summary::after { content: "\2013"; }
.legal .legal__body { padding: 0 0 24px; color: var(--stone-dk); }
.legal .legal__body h4 { font-family: var(--font-body); font-size: .95rem; text-transform: uppercase; letter-spacing:.06em; color: var(--ink); margin: 1.4em 0 .5em; }
.legal .legal__body p, .legal .legal__body li { font-size: .96rem; }
.legal .legal__body ul { padding-left: 1.2em; }

/* ================= Real-asset overrides ================= */
/* Brand palette shift toward logo green (#0b6b2e) */
:root {
  --canopy: #0b6b2e;
  --canopy-dk: #084f22;
  --gold: #C8A24B;
  --gold-dk: #a9863a;
}

/* Logo lockup in header/footer */
.brand__logo { height: 40px; width: auto; display: block; }
@media (max-width: 480px){ .brand__logo { height: 32px; } }
.footer-logo { height: 40px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .92; }

/* Hero real photo */
.hero { background: var(--ink); }
.hero__bg {
  background-image: linear-gradient(180deg, rgba(18,38,30,.50), rgba(18,38,30,.70)), url('img/hero-canopy.jpg');
  background-size: cover; background-position: center 30%;
}

/* Service cards: photos fill media; icon services get centered icon on tinted panel */
.service__media { aspect-ratio: 16/10; background: var(--ink); position: relative; overflow: hidden; }
.service__media img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.service__iconwrap {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 40%, #0e7d37, #0b6b2e 70%);
}
.service__iconwrap img { position: static; width: 42%; height: auto; }

/* Split media images */
.split__media img { width:100%; height:100%; object-fit: cover; display:block; }
.split__media--icon { background: radial-gradient(circle at 50% 45%, #0e7d37, #0b6b2e 72%); display:flex; align-items:center; justify-content:center; aspect-ratio: 4/3; }
.split__media--icon img { width: 44%; height:auto; object-fit: contain; }
.split__media--icon svg { width: 34%; height: auto; color: #eef2ec; }

/* Testimonial cards upgraded */
.quote { position: relative; display:flex; flex-direction:column; }
.quote__mark { color: rgba(11,107,46,.16); position:absolute; top:18px; right:20px; }
.quote blockquote { margin:0; }
.quote blockquote p { font-family: var(--font-display); font-size: 1.02rem; font-style: normal; line-height:1.55; color: var(--ink); }
.quote__who { margin-top: 16px; display:flex; flex-direction:column; }
.quote__who strong { font-family: var(--font-body); font-weight:700; color: var(--ink); font-size:.98rem; }
.quote__who span { color: var(--stone-dk); font-size:.85rem; margin-top:2px; }
@media (max-width: 900px){ .quote blockquote p { font-size: 1rem; } }

/* ---------- Work gallery (masonry columns — fills with no grid gaps) ---------- */
.gallery { column-count: 3; column-gap: 14px; }
.gallery a {
  display:block; position:relative; overflow:hidden; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); background: var(--ink);
  margin: 0 0 14px; break-inside: avoid; width: 100%;
}
.gallery img { width:100%; height:auto; display:block; transition: transform .5s var(--ease); }
.gallery a:hover img { transform: scale(1.05); }
@media (max-width: 900px){ .gallery { column-count: 2; } }
@media (max-width: 520px){ .gallery { column-count: 2; column-gap: 10px; } .gallery a { margin-bottom: 10px; } }

/* ============================================================
   TREE THEME LAYER — canopy, rings, bark, branch dividers
   ============================================================ */

/* --- Hero: realistic photographic treatment (no drawn art) --- */
.hero { position: relative; }
.hero .container { position: relative; z-index: 2; }
/* Gentle darkening toward the bottom for depth and text legibility — no
   fade-to-cream (that produced a harsh grey band). The hero ends on its own
   dark tone and the next section starts cleanly. */
.hero__bg::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(18,38,30,0) 55%, rgba(18,38,30,.35) 100%);
}
/* faint sun-through-canopy glow, top-right — subtle, photographic */
.hero::after {
  content:""; position:absolute; z-index:1; top:-8%; right:-5%;
  width: 55vw; height: 55vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, rgba(216,180,92,.16), rgba(216,180,92,0) 62%);
  pointer-events:none;
}

/* --- Growth-ring topographic backdrop (reusable) --- */
.rings-bg { position: relative; overflow: hidden; }
.rings-bg > .container { position: relative; z-index: 1; }
.rings-bg::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  width: 900px; height: 900px; border-radius: 50%;
  top: -420px; left: 50%; transform: translateX(-50%);
  background:
    radial-gradient(circle, transparent 0 78px, rgba(11,107,46,.05) 78px 80px, transparent 80px 128px, rgba(11,107,46,.05) 128px 130px, transparent 130px 188px, rgba(11,107,46,.045) 188px 190px, transparent 190px 258px, rgba(11,107,46,.04) 258px 260px, transparent 260px 338px, rgba(11,107,46,.035) 338px 340px, transparent 340px 428px, rgba(11,107,46,.03) 428px 430px, transparent 430px);
}

/* --- Bark texture for dark bands --- */
.band { position: relative; overflow: hidden; }
.band > .container { position: relative; z-index: 1; }
.band::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 11px);
  background-size: 9px 100%, 12px 100%;
  mix-blend-mode: soft-light;
}
.band::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(ellipse 3px 22px at 14% 30%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(ellipse 3px 30px at 41% 68%, rgba(0,0,0,.30), transparent 60%),
    radial-gradient(ellipse 3px 26px at 73% 22%, rgba(0,0,0,.32), transparent 60%),
    radial-gradient(ellipse 3px 20px at 88% 60%, rgba(0,0,0,.30), transparent 60%);
}

/* --- Branch divider between sections --- */
.branch-divider {
  display:block; width:100%; height: 46px; color: var(--canopy);
  margin: 0; overflow: visible;
}
.branch-divider svg { display:block; width:100%; height:100%; }
.branch-divider--flip svg { transform: scaleX(-1); }

/* --- CTA band: rings glow --- */
.cta-band { position: relative; overflow: hidden; }
.cta-band > .container { position: relative; z-index: 1; }
.cta-band::before {
  content:""; position:absolute; z-index:0; pointer-events:none; inset:0;
  background:
    radial-gradient(circle at 50% 120%, transparent 0 120px, rgba(255,255,255,.05) 120px 122px, transparent 122px 200px, rgba(255,255,255,.04) 200px 202px, transparent 202px 300px, rgba(255,255,255,.035) 300px 302px, transparent 302px 420px, rgba(255,255,255,.03) 420px 422px, transparent 422px);
}

/* --- Leaf bullet accent on checklists --- */
.checklist svg { color: var(--canopy); }

/* --- Section eyebrow gets a tiny leaf --- */
.eyebrow::before { background: var(--gold); }

/* --- Service split media: organic corner + tag as "ring" --- */
.split__media { border: 1px solid rgba(11,107,46,.15); }

/* --- Value cards: subtle ring watermark on hover --- */
.value { position: relative; overflow: hidden; }
.value::after {
  content:""; position:absolute; right:-40px; bottom:-40px; width:120px; height:120px;
  border-radius:50%; border: 12px solid rgba(11,107,46,.05);
  transition: transform .4s var(--ease); pointer-events:none;
}
.value:hover::after { transform: scale(1.25); }

/* reduce motion: nothing here animates critically, but keep glow static */
@media (prefers-reduced-motion: reduce){ .value:hover::after{ transform:none; } }

/* ============================================================
   LAYOUT FIXES — balanced grids, gallery, hero
   ============================================================ */

/* Reviews: equal-height cards, no orphan gap. Middle short review no longer leaves a hole. */
#reviews .grid--3 { align-items: stretch; }
#reviews .quote { height: 100%; }

/* Service areas: centered flex layout. With 7 tiles this reads as a
   balanced 4 + 3 — both rows centered as a group, so the odd count looks
   intentional and never leaves a single orphaned card. Equal heights. */
#areas .grid--3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
#areas .area {
  flex: 1 1 240px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1040px){ #areas .area { flex-basis: 260px; max-width: 320px; } }
@media (max-width: 680px){ #areas .area { flex-basis: 100%; max-width: 460px; } }

/* ---------- Footer legal (plain sections, revealed on link click via :target) ---------- */
.footer-legal { border-top: 1px solid rgba(245,242,235,.14); padding: 22px 0 4px; }
.footer-legal .legal-docs { display: grid; gap: 0; }
/* Collapsed by default — the footer hyperlinks reveal the relevant policy. */
.legal-doc { max-width: 860px; display: none; padding: 6px 0 20px; }
.legal-doc:target { display: block; }
.legal-doc h3 {
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
  color: var(--gold); margin: 0 0 12px; scroll-margin-top: 110px;
}
.legal-doc .legal__body { color: rgba(245,242,235,.62); }
.legal-doc .legal__body h4 { color: rgba(245,242,235,.85); font-family: var(--font-body); font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; margin: 1.3em 0 .4em; }
.legal-doc .legal__body a { color: var(--gold); }
.legal-doc .legal__body p, .legal-doc .legal__body li { font-size: .85rem; line-height: 1.6; }
.legal-doc .legal__body ul { padding-left: 1.2em; }

/* Footer-bottom legal hyperlinks */
.footer-legal-links a { color: rgba(245,242,235,.75); text-decoration: none; }
.footer-legal-links a:hover { color: var(--gold); text-decoration: underline; }
.footer-legal-links .sep { color: rgba(245,242,235,.35); margin: 0 6px; }



/* ============================================================
   HERO — centered, cinematic (Seastreak-style)
   ============================================================ */
.hero--center { min-height: 88vh; display: flex; align-items: center; }
.hero--center .container {
  padding-top: clamp(90px, 12vw, 150px);
  padding-bottom: clamp(90px, 12vw, 150px);
  width: 100%;
}
.hero--center .hero__inner {
  max-width: 900px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hero__eyebrow {
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: .32em;
  font-size: clamp(.72rem, 1.1vw, .85rem); font-weight: 600;
  color: rgba(245,242,235,.9); margin: 0 0 clamp(20px, 3vw, 34px);
}
.hero__title {
  color: var(--white); margin: 0 0 24px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 1.02;
  text-transform: uppercase; letter-spacing: .01em;
}
.hero__title em {
  font-style: italic; text-transform: none; font-weight: 500;
  color: var(--gold); letter-spacing: 0;
  font-size: 1.04em; /* the italic accent word reads a touch larger, Seastreak-style */
}
.hero--center .hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(245,242,235,.92);
  max-width: 60ch; margin: 0 auto clamp(30px, 4vw, 40px);
}
.hero--center .hero__actions { justify-content: center; }
.hero--center .hero__trust {
  justify-content: center; margin-top: clamp(32px, 5vw, 48px);
  gap: 12px 28px;
}
/* scroll-down indicator */
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(245,242,235,.5); color: var(--birch);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  animation: heroBob 2.4s ease-in-out infinite;
}
.hero__scroll:hover { background: rgba(245,242,235,.12); border-color: var(--birch); color: var(--white); }
@keyframes heroBob { 0%,100%{ transform: translate(-50%, 0);} 50%{ transform: translate(-50%, 7px);} }
@media (prefers-reduced-motion: reduce){ .hero__scroll { animation: none; } }
@media (max-width: 640px){ .hero__scroll { display: none; } }

/* ---------- Accent strip (breaks white space between areas & reviews) ---------- */
.accent-strip { background: linear-gradient(120deg, var(--canopy-dk), var(--ink)); }
.accent-strip__inner {
  display: flex; align-items: center; justify-content: center; gap: 20px 32px;
  flex-wrap: wrap; text-align: center;
}
.accent-strip__pitch {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--white); line-height: 1.3;
}
.accent-strip .btn { flex: 0 0 auto; }

/* ============================================================
   TESTIMONIAL SLIDER
   ============================================================ */
.slider { position: relative; max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.slider__viewport { overflow: hidden; flex: 1 1 auto; }
.slider__track { display: flex; align-items: stretch; transition: transform .5s var(--ease); }
.slider .slide {
  flex: 0 0 100%; width: 100%; box-sizing: border-box;
  display: flex; /* let the inner card stretch to the tallest slide */
  padding: 6px; /* room for card shadow inside overflow-hidden viewport */
}
/* the quote card fills the slide, generous padding, centered content */
.slider .quote {
  background: var(--white); border: 1px solid rgba(18,38,30,.08);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(32px, 4vw, 52px); min-height: 340px;
  margin: 0;
  flex: 1 1 auto; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.slider .quote__mark { display: none; } /* the offset quote glyph reads odd when centered */
.slider .quote__stars { margin-bottom: 18px; }
.slider .quote blockquote { margin: 0; }
.slider .quote blockquote p { font-size: clamp(1.05rem, 1.8vw, 1.32rem); line-height: 1.6; max-width: 60ch; }
.slider .quote__who { margin-top: 22px !important; align-items: center; }
.slider .quote__who strong { font-size: 1.02rem; }
/* the whole quote group (stars + text + attribution) sits centered as a block */
.slider .quote blockquote { flex: 0 0 auto; }
.slider__btn {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(18,38,30,.18); background: var(--white); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.slider__btn:hover { background: var(--canopy); color: var(--white); border-color: var(--canopy); transform: translateY(-2px); }
.slider__dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.slider__dots button {
  width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(18,38,30,.2); transition: background .2s var(--ease), transform .2s var(--ease);
}
.slider__dots button:hover { background: rgba(18,38,30,.4); }
.slider__dots button[aria-current="true"] { background: var(--canopy); transform: scale(1.25); }
@media (max-width: 640px){
  .slider__btn { width: 40px; height: 40px; }
  .slider { gap: 6px; }
}

/* ---------- Footer "built by" credit ---------- */
.footer-credit { display: inline-flex; align-items: center; }
.footer-credit a {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(245,242,235,.32); font-size: .76rem; letter-spacing: .01em; text-decoration: none;
  transition: color .18s var(--ease), opacity .18s var(--ease);
}
.footer-credit a:hover { color: rgba(245,242,235,.6); }
.footer-credit__logo { height: 12px; width: auto; display: block; opacity: .45; transition: opacity .18s var(--ease); }
.footer-credit a:hover .footer-credit__logo { opacity: .8; }
/* on narrow screens the three items stack; keep the credit centered then */
@media (max-width: 680px){ .footer-credit { order: 3; width: 100%; justify-content: center; margin-top: 4px; } }