/* =========================================================================
   CleanCut Garden Specialists — "Groundwork" green design system
   ========================================================================= */

:root {
  /* GREEN palette — committed sage surface, forest ink, chartreuse pop --- */
  --soil: #17291c;         /* near-black forest — ink + dark drench    */
  --bark: #234130;         /* deep pine — alt dark surface             */
  --clay: #3c6a44;         /* mid moss green — text accents & green CTA */
  --clay-deep: #2f5537;    /* pressed / hover moss                     */
  --ember: #4f8a58;        /* lighter fern green for depth             */
  --sand: #ffffff;         /* body surface — clean white               */
  --sand-2: #eef3e2;       /* light sage band for section rhythm       */
  --oat: #f6f9ef;          /* raised card / form surface (faint green) */
  --lime: #c7e63f;         /* chartreuse — THE bright pop              */
  --lime-deep: #a9cc2f;    /* pressed / hover chartreuse               */
  --taupe: #55684d;        /* muted supporting text on white           */
  --line-earth: #e1e7d3;   /* hairline on white                        */

  /* Semantic aliases — components resolve through these, so the whole
     system recolours from the green palette above. */
  --ink: var(--soil);
  --forest: var(--bark);
  --moss: var(--clay);     /* mid green for links / headline accents  */
  --fern: var(--ember);
  --sage: var(--taupe);
  /* --lime / --lime-deep are the chartreuse pop (defined above) */
  --paper: var(--sand);
  --paper-2: var(--sand-2);
  --cream: var(--oat);
  --line: var(--line-earth);
  --line-dark: rgba(255,255,255,.14);

  /* Typography — Bricolage Grotesque display + Hanken Grotesk text -------- */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* Rhythm ----------------------------------------------------------------- */
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 1px 2px rgba(18,34,23,.08), 0 18px 40px -24px rgba(18,34,23,.44);
  --shadow-lg: 0 44px 90px -50px rgba(18,34,23,.68);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: clamp(16px, 1.05vw, 18px);
  letter-spacing: -0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; }

/* Grain overlay ----------------------------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* Layout helpers ---------------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-wide { width: min(1400px, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 130px) 0; }
.section-tight { padding: clamp(48px, 6vw, 84px) 0; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 10000;
  background: var(--ink); color: var(--lime); padding: 10px 16px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* Typography -------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; font-optical-sizing: auto; }
.display {
  font-size: clamp(2.9rem, 8.5vw, 6.6rem);
  line-height: .96; letter-spacing: -0.035em; font-weight: 500;
}
.h1 { font-size: clamp(2.4rem, 5.5vw, 4.3rem); }
.h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
em, .italic { font-style: italic; }
.serif { font-family: var(--display); }
/* Bricolage has no true italic — headline accents use terracotta, not slant */
h1 em, h2 em, h3 em, .display em, .h1 em, .h2 em, .h3 em,
.hero-title em, .page-hero-title em, .foot-cta-title em {
  font-style: normal; color: var(--clay); font-weight: 600;
}
.marquee span, .tl-year, .svc-num, .foot-tag, .quote-card blockquote { font-style: normal; }

/* Kicker: a terracotta brand chip, not a tracked-uppercase scaffold.
   Used once per page (hero) — never as a per-section label. */
.eyebrow {
  font-family: var(--body);
  font-weight: 600; font-size: .82rem; letter-spacing: .005em; text-transform: none;
  display: inline-flex; align-items: center; gap: .5em; color: var(--clay);
  background: color-mix(in srgb, var(--clay) 13%, transparent);
  padding: .5em .95em .55em; border-radius: 100px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.eyebrow-lime { color: var(--ember); background: color-mix(in srgb, var(--ember) 16%, transparent); }
.eyebrow-lime::before { background: var(--ember); }
.eyebrow-center { justify-content: center; }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.muted { color: color-mix(in srgb, var(--ink) 62%, transparent); }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  background: var(--ink); color: var(--paper);
  padding: .95em 1.5em; border-radius: 100px; font-weight: 600; font-size: .95rem;
  letter-spacing: -0.01em; line-height: 1;
  transition: transform .35s var(--ease), background .3s, box-shadow .35s var(--ease), color .3s;
  will-change: transform;
}
.btn .ico { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(14,31,22,.6); }
.btn:hover .ico { transform: translateX(4px); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--lime-deep); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.btn-ghost-light { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-dark); }
.btn-ghost-light:hover { background: var(--paper); color: var(--ink); box-shadow: none; }
.btn-sm { padding: .7em 1.1em; font-size: .85rem; }
.btn-lg { padding: 1.1em 1.9em; font-size: 1rem; }
.textlink {
  display: inline-flex; align-items: center; gap: .45em; font-weight: 600;
  border-bottom: 1.5px solid color-mix(in srgb, var(--moss) 40%, transparent); padding-bottom: 2px;
  transition: gap .3s var(--ease), border-color .3s;
}
.textlink .ico { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.textlink:hover { border-color: var(--moss); }
.textlink:hover .ico { transform: translateX(4px); }

.ico { display: inline-flex; width: 1em; height: 1em; flex: none; }
.ico svg { width: 100%; height: 100%; }

/* =========================================================================
   Header
   ========================================================================= */
.site-head {
  position: sticky; top: 0; z-index: 200;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.head-inner { display: flex; align-items: center; gap: 24px; padding: 18px 0; }
.site-head.scrolled {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
}
.site-head.scrolled .head-inner { padding: 12px 0; }

.brand { display: inline-flex; align-items: center; gap: .6em; font-family: var(--display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.03em; }
.brand-mark { width: 34px; height: 34px; transition: transform .5s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-12deg); }
.brand-name span { color: var(--moss); }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav-link {
  position: relative; padding: .5em .9em; border-radius: 100px; font-weight: 500; font-size: .96rem;
  color: color-mix(in srgb, var(--ink) 78%, transparent); transition: color .25s, background .25s;
}
.nav-link:hover { color: var(--ink); background: color-mix(in srgb, var(--moss) 10%, transparent); }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--lime-deep);
}
.head-cta { display: flex; align-items: center; gap: 14px; }
.phone-pill { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: .9rem; }
.phone-pill .ico { width: 1em; height: 1em; color: var(--moss); }
.phone-pill span { border-bottom: 1.5px solid transparent; transition: border-color .3s; }
.phone-pill:hover span { border-color: var(--moss); }

.burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; flex-direction: column; gap: 4px; padding: 8px var(--gutter) 28px;
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.mobile-nav a { padding: 14px 6px; font-size: 1.3rem; font-family: var(--display); font-weight: 600; border-bottom: 1px solid var(--line); text-align: right; }
.mobile-nav a.btn { font-family: var(--body); font-weight: 600; font-size: 1rem; justify-content: center; border: 0; margin-top: 14px; text-align: center; }

/* =========================================================================
   Hero (home)
   ========================================================================= */
.hero { position: relative; padding: clamp(40px, 6vw, 76px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.hero-glow {
  position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none;
}
.hero-glow.g1 { width: 46vw; height: 46vw; background: radial-gradient(circle, var(--lime) 0%, transparent 70%); top: -14vw; right: -8vw; opacity: .35; }
.hero-glow.g2 { width: 40vw; height: 40vw; background: radial-gradient(circle, var(--fern) 0%, transparent 70%); bottom: -16vw; left: -12vw; opacity: .25; }

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.hero-copy { max-width: 640px; }
.hero-title { margin: .28em 0 .5em; }
.hero-title .stroke { color: transparent; -webkit-text-stroke: 1.4px var(--moss); }
.hero-title em { color: var(--moss); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2em; align-items: center; }
.hero-note { display: inline-flex; align-items: center; gap: .5em; font-size: .9rem; }
.hero-note .stars { display: inline-flex; color: var(--lime-deep); }
.hero-note .stars .ico { width: .95em; height: .95em; }

.hero-visual { position: relative; }
.hero-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/4.6;
  background:
    radial-gradient(120% 90% at 80% 10%, color-mix(in srgb, var(--lime) 40%, transparent) 0%, transparent 42%),
    linear-gradient(160deg, var(--fern) 0%, var(--moss) 45%, var(--forest) 100%);
  box-shadow: var(--shadow-lg);
}
.hero-card .foliage { position: absolute; inset: 0; opacity: .9; }
.hero-badge {
  position: absolute; z-index: 3; background: var(--paper); color: var(--ink);
  border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px;
}
.hero-badge .num { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--moss); }
.hero-badge small { display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); font-weight: 600; }
.hero-badge .badge-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--lime); display: grid; place-items: center; }
.hero-badge .badge-ico .ico { width: 22px; height: 22px; }
.hero-badge.b1 { bottom: 22px; left: -18px; }
.hero-badge.b2 { top: 22px; right: -14px; padding: 12px 16px; }
.hero-badge.b2 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime-deep); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 40%, transparent); }

.marquee-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; margin-top: clamp(40px, 5vw, 70px); overflow: hidden; }
.marquee { display: flex; gap: 3.5rem; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.6rem); color: color-mix(in srgb, var(--ink) 40%, transparent); display: inline-flex; align-items: center; gap: 3.5rem; }
.marquee span::after { content: "✳"; color: var(--lime-deep); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================================
   Generic page hero (interior pages)
   ========================================================================= */
.page-hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 4vw, 56px); }
.page-hero .eyebrow { margin-bottom: 20px; }
.page-hero-title { max-width: 15ch; }
.page-hero-sub { max-width: 54ch; margin-top: 24px; }
.crumbs { display: flex; align-items: center; gap: .55em; font-size: .85rem; margin-bottom: 26px; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.crumbs a:hover { color: var(--moss); }
.crumbs .sep { opacity: .5; }

/* =========================================================================
   Stats
   ========================================================================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--paper); padding: clamp(24px, 3vw, 40px); }
.stat .value { font-family: var(--display); font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--moss); }
.stat .label { margin-top: 10px; font-size: .92rem; color: color-mix(in srgb, var(--ink) 62%, transparent); }

/* =========================================================================
   Services grid
   ========================================================================= */
/* Auto-fit keeps every service grid responsive without breakpoint juggling:
   columns only exist while they can hold ≥280px. */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.svc-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-media {
  position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center;
  background-color: var(--moss);
}
.svc-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,31,22,.05) 0%, rgba(14,31,22,.5) 100%);
  transition: opacity .5s;
}
.svc-card:hover .svc-media { }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc-card:hover .svc-media img { transform: scale(1.05); }
.svc-num { position: absolute; z-index: 2; top: 18px; right: 22px; font-family: var(--display); font-style: italic; font-size: 1.2rem; color: var(--paper); text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.svc-ico {
  position: absolute; z-index: 3; left: 26px; bottom: -26px;
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: var(--lime); color: var(--ink); box-shadow: var(--shadow);
  transition: transform .5s var(--ease), background .4s, color .4s;
}
.svc-ico .ico { width: 26px; height: 26px; }
.svc-card:hover .svc-ico { transform: rotate(-8deg) scale(1.06); }
.svc-body { padding: 42px clamp(24px, 3vw, 34px) clamp(26px, 3vw, 34px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.svc-card h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.svc-tag { font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--moss); }
.svc-card p { color: color-mix(in srgb, var(--ink) 68%, transparent); }
.svc-card .textlink { margin-top: auto; padding-top: 4px; }

/* Feature split ----------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-copy .eyebrow { margin-bottom: 18px; }
.split-media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5/4.4; box-shadow: var(--shadow-lg);
  background: linear-gradient(155deg, var(--fern), var(--forest));
}
.split-media.alt { background: linear-gradient(155deg, var(--moss), var(--ink)); }
.check-list { display: grid; gap: 14px; margin: 26px 0 30px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; }
.check-list .ico { flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--lime) 55%, transparent); color: var(--forest); display: grid; place-items: center; margin-top: 2px; }
.check-list .ico svg { width: 14px; height: 14px; }

/* =========================================================================
   Timeline
   ========================================================================= */
.timeline { position: relative; display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 130px 1fr; gap: clamp(20px, 4vw, 48px); padding: clamp(24px, 3vw, 38px) 0; border-top: 1px solid var(--line); transition: background .4s; }
.tl-item:hover { background: color-mix(in srgb, var(--cream) 60%, transparent); }
.tl-year { font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.8rem); color: var(--moss); font-style: italic; }
.tl-body h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 8px; }
.tl-body p { color: color-mix(in srgb, var(--ink) 66%, transparent); max-width: 52ch; }

/* =========================================================================
   Testimonials
   ========================================================================= */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.quote-card {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; gap: 20px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.quote-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.quote-card .qmark { width: 42px; height: 42px; color: var(--lime-deep); }
.quote-card blockquote { font-family: var(--display); font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.4; letter-spacing: -0.01em; }
.quote-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-card .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, var(--fern), var(--forest)); color: var(--lime); display: grid; place-items: center; font-family: var(--display); font-size: 1rem; }
.quote-card .who b { font-weight: 600; }
.quote-card .who span { display: block; font-size: .84rem; color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* =========================================================================
   Dark band (clients / CTA)
   ========================================================================= */
.band-dark { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.band-dark .eyebrow { color: var(--lime); }
.band-dark .muted { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.band-dark .sprig-deco { position: absolute; color: color-mix(in srgb, var(--lime) 26%, transparent); }

.clients-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2vw, 22px); }
.clients-row .client-logo {
  background: var(--oat); border-radius: 16px; padding: 20px 26px;
  display: grid; place-items: center; min-width: 150px; height: 84px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.clients-row .client-logo:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(0,0,0,.6); }
.clients-row .client-logo img { height: 44px; width: auto; object-fit: contain; mix-blend-mode: multiply; }

/* Areas chips ------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: .55em 1.05em; border-radius: 100px; font-size: .9rem; font-weight: 500; background: var(--cream); border: 1px solid var(--line); transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s; }
.chip:hover { transform: translateY(-2px); background: var(--ink); color: var(--paper); border-color: var(--ink); }
.band-dark .chip { background: rgba(255,255,255,.05); border-color: var(--line-dark); color: var(--paper); }
.band-dark .chip:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }

/* =========================================================================
   Blog
   ========================================================================= */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.post-card {
  display: flex; flex-direction: column; background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.post-thumb { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.post-thumb .foliage { position: absolute; inset: 0; }
.post-thumb .cat { position: absolute; left: 16px; top: 16px; z-index: 2; background: var(--paper); color: var(--ink); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .5em .9em; border-radius: 100px; }
.post-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-meta { font-size: .82rem; color: color-mix(in srgb, var(--ink) 52%, transparent); display: flex; gap: 10px; align-items: center; }
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.post-card h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.08; }
.post-card p { color: color-mix(in srgb, var(--ink) 66%, transparent); font-size: .96rem; }
.post-card .textlink { margin-top: auto; }
.post-card.feature { grid-column: span 3; }
@media (min-width: 900px) {
  .post-card.feature { display: grid; grid-template-columns: 1.15fr 1fr; }
  .post-card.feature .post-thumb { aspect-ratio: auto; height: 100%; min-height: 340px; }
  .post-card.feature .post-body { padding: clamp(30px, 4vw, 54px); justify-content: center; }
  .post-card.feature h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
  .post-card.feature .post-lead { font-size: 1.1rem; }
}

/* Article ----------------------------------------------------------------- */
.article { max-width: 720px; margin-inline: auto; }
.article .article-hero-thumb { border-radius: var(--radius-lg); aspect-ratio: 16/8; overflow: hidden; margin-bottom: 44px; position: relative; box-shadow: var(--shadow-lg); }
.prose > * + * { margin-top: 1.35em; }
.prose p { font-size: 1.12rem; line-height: 1.72; color: color-mix(in srgb, var(--ink) 84%, transparent); }
.prose p strong { color: var(--ink); font-weight: 700; }
.prose h2 { font-size: 1.9rem; margin-top: 1.8em; }
.prose a { color: var(--moss); border-bottom: 1.5px solid; }
.prose .drop::first-letter { font-family: var(--display); font-size: 3.6em; float: left; line-height: .72; margin: .06em .12em 0 0; color: var(--moss); font-weight: 500; }

/* =========================================================================
   Contact
   ========================================================================= */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.contact-cards { display: grid; gap: 14px; }
.contact-card { display: flex; gap: 16px; align-items: flex-start; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; transition: transform .4s var(--ease), box-shadow .4s; }
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.contact-card .ci { flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--ink); color: var(--lime); display: grid; place-items: center; }
.contact-card .ci .ico { width: 22px; height: 22px; }
.contact-card h4 { font-family: var(--body); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); margin-bottom: 6px; }
.contact-card a, .contact-card p { font-size: 1.08rem; font-weight: 500; }
.contact-card .sub { display: block; margin-top: 4px; font-size: .88rem; font-weight: 400; line-height: 1.4; color: color-mix(in srgb, var(--ink) 58%, transparent); }

.form-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 3.5vw, 44px); box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 60%, transparent); margin-bottom: 8px; }
.field label .req { color: var(--clay); }
.input, .textarea, .select {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; transition: border-color .25s, box-shadow .25s, background .25s;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 30%, transparent); background: var(--cream); }
.textarea { resize: vertical; min-height: 140px; }
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--ink) 52%, transparent); opacity: 1; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: .82rem; color: color-mix(in srgb, var(--ink) 52%, transparent); margin-top: 14px; }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; filter: grayscale(.2) contrast(1.02); }

/* Thank you --------------------------------------------------------------- */
.thanks { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: clamp(60px, 10vw, 130px) 0; }
.thanks .tick { width: 96px; height: 96px; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; margin: 0 auto 30px; box-shadow: var(--shadow-lg); animation: pop .6s var(--ease) both; }
.thanks .tick svg { width: 44px; height: 44px; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* =========================================================================
   CTA footer band
   ========================================================================= */
.site-foot { background: var(--ink); color: var(--paper); margin-top: clamp(40px, 6vw, 90px); }
.foot-cta {
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: end;
  padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line-dark);
}
.foot-cta-title { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1; }
.foot-cta-title em { color: var(--lime); }
.foot-cta-sub { color: color-mix(in srgb, var(--paper) 62%, transparent); max-width: 46ch; margin-top: 22px; }
.foot-cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.foot-cta-actions .btn { width: 100%; justify-content: center; }

.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; padding: clamp(48px, 6vw, 76px) 0; }
.foot-brand .brand { font-size: 1.5rem; margin-bottom: 18px; }
.foot-brand .brand-name span { color: var(--lime); }
.foot-tag { color: color-mix(in srgb, var(--paper) 60%, transparent); max-width: 30ch; margin-bottom: 22px; font-family: var(--display); font-style: italic; font-size: 1.05rem; }
.foot-social { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); transition: background .3s, color .3s, transform .3s var(--ease); }
.foot-social .ico { width: 18px; height: 18px; }
.foot-social:hover { background: var(--lime); color: var(--ink); transform: translateY(-3px); }
.foot-col h3 { font-family: var(--body); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin-bottom: 18px; }
.foot-col a, .foot-contact p { display: flex; align-items: center; gap: .5em; padding: 7px 0; color: color-mix(in srgb, var(--paper) 74%, transparent); transition: color .25s; font-size: .96rem; }
.foot-col a:hover { color: var(--paper); }
.foot-contact .ico { width: 1em; height: 1em; color: var(--lime); flex: none; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 26px 0 34px; border-top: 1px solid var(--line-dark); font-size: .86rem; color: color-mix(in srgb, var(--paper) 50%, transparent); }

/* =========================================================================
   Reveal animations
   ========================================================================= */
/* Reveals ENHANCE an already-visible default: the hidden state is applied only
   when JS is present (html.js, set inline in <head>). Without JS — or if the
   script fails — content renders fully visible instead of a blank page. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }

/* Section header ---------------------------------------------------------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(34px, 4vw, 56px); }
.sec-head.center { flex-direction: column; align-items: center; text-align: center; }
.sec-head h2 { max-width: 20ch; }
.sec-head .sec-intro { max-width: 40ch; padding-bottom: .4em; }
.sec-title-lg { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 16ch; }

/* Clients band — headline + logos, no eyebrow */
.clients-band { display: grid; gap: clamp(30px, 4vw, 46px); }
.clients-title { max-width: 26ch; color: var(--paper); }

/* Pill list --------------------------------------------------------------- */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mini { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.mini .ico { width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--lime) 34%, transparent); color: var(--forest); display: grid; place-items: center; margin-bottom: 14px; }
.mini .ico svg { width: 20px; height: 20px; }
.mini h4 { font-family: var(--display); font-size: 1.2rem; margin-bottom: 6px; }
.mini p { font-size: .92rem; color: color-mix(in srgb, var(--ink) 64%, transparent); }

/* Packages ---------------------------------------------------------------- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pkg { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; background: var(--cream); position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.pkg:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pkg .tick { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--lime); display: grid; place-items: center; margin-bottom: 18px; }
.pkg .tick svg { width: 18px; height: 18px; }
.pkg h4 { font-size: 1.6rem; margin-bottom: 8px; }
.pkg p { color: color-mix(in srgb, var(--ink) 64%, transparent); }

/* Foliage svg pattern helper (used in gradient panels) -------------------- */
.foliage-svg { width: 100%; height: 100%; }

/* =========================================================================
   Home — editorial hero (full-bleed image bleeding off the right edge)
   ========================================================================= */
.hero2 { position: relative; overflow: hidden; background: var(--sand); }
.hero2-media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 48%; z-index: 1;
  background-size: cover; background-position: center;
}
.hero2-media::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--sand) 0%, rgba(255,255,255,0) 34%);
}
.hero2-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(23,41,28,.20), rgba(23,41,28,0) 40%);
}
.hero2 .wrap { position: relative; z-index: 2; }
.hero2-copy { max-width: 620px; padding: clamp(44px, 8vh, 104px) 0; }
.hero2-meta {
  display: inline-flex; align-items: center; gap: .6em; font-weight: 600;
  font-size: .9rem; color: var(--moss); margin-bottom: clamp(20px, 3vw, 30px);
}
.hero2-meta::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 34%, transparent); }
.hero2-title {
  font-size: clamp(2.9rem, 6.4vw, 5.4rem); line-height: .98; letter-spacing: -0.035em;
  margin: 0 0 clamp(20px, 3vw, 30px); text-wrap: balance;
}
.hero2-title em { color: var(--moss); font-style: normal; }
.hero2-lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); max-width: 42ch; color: color-mix(in srgb, var(--ink) 76%, transparent); }
.hero2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(28px, 4vw, 40px); }
.hero2-actions .phone-cta { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: 1.02rem; }
.hero2-actions .phone-cta .ico { width: 1.1em; height: 1.1em; color: var(--moss); }
.hero2-actions .phone-cta span { border-bottom: 2px solid color-mix(in srgb, var(--moss) 40%, transparent); padding-bottom: 2px; transition: border-color .3s; }
.hero2-actions .phone-cta:hover span { border-color: var(--moss); }
.hero2-proof {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
  margin-top: clamp(40px, 6vw, 68px); padding-top: 26px;
  border-top: 1px solid var(--line); max-width: 620px;
}
.hero2-proof .pf { display: inline-flex; align-items: baseline; gap: .5em; }
.hero2-proof .pf b { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; }
.hero2-proof .pf span { font-size: .86rem; color: color-mix(in srgb, var(--ink) 58%, transparent); }
.hero2-proof .pf-brands { font-size: .88rem; color: color-mix(in srgb, var(--ink) 58%, transparent); }
.hero2-proof .pf-brands em { font-style: normal; color: var(--ink); font-weight: 600; }

/* =========================================================================
   Services — numbered editorial index (replaces the card grid on home)
   ========================================================================= */
.svc-index { border-top: 1px solid var(--line); }
.svc-row + .svc-row { border-top: 1px solid var(--line); }
.svc-row a {
  display: grid; grid-template-columns: auto 1fr auto 132px auto; align-items: center;
  gap: clamp(18px, 3vw, 44px); padding: clamp(22px, 3vw, 34px) 8px;
  transition: padding-left .45s var(--ease), background .4s;
}
.svc-row a:hover { padding-left: 22px; background: linear-gradient(90deg, color-mix(in srgb, var(--lime) 14%, transparent), transparent 60%); }
.svc-row-n { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--moss); }
.svc-row-main h3 { font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1; letter-spacing: -0.03em; transition: color .3s; }
.svc-row a:hover .svc-row-main h3 { color: var(--moss); }
.svc-row-main p { margin-top: 8px; color: color-mix(in srgb, var(--ink) 60%, transparent); max-width: 46ch; font-size: .96rem; }
.svc-row-tag { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--moss); white-space: nowrap; }
.svc-row-thumb {
  height: 84px; border-radius: 12px; background-size: cover; background-position: center;
  filter: grayscale(.15); transform: scale(.96); opacity: .85;
  transition: transform .5s var(--ease), opacity .4s, filter .4s;
}
.svc-row a:hover .svc-row-thumb { transform: scale(1); opacity: 1; filter: none; }
.svc-row-arrow { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--oat); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background .35s, color .35s, transform .45s var(--ease); }
.svc-row-arrow .ico { width: 20px; height: 20px; }
.svc-row a:hover .svc-row-arrow { background: var(--ink); color: var(--lime); transform: rotate(-45deg); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .hero2 { display: flex; flex-direction: column; }
  .hero2-media { position: relative; width: 100%; height: min(46vh, 340px); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .hero2-media::before { display: none; }
  .hero2-copy { max-width: none; padding: clamp(28px, 5vw, 44px) 0 0; }
  .hero2-proof { max-width: none; margin-top: clamp(28px, 5vw, 40px); }
  .svc-row a { grid-template-columns: auto 1fr auto auto; }
  .svc-row-thumb { display: none; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .quotes { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .post-card.feature { grid-column: span 2; }
  .foot-cta { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .nav, .head-cta { display: none; }
  .burger { display: flex; margin-right: -8px; }
  .head-inner { gap: 12px; }
  .site-head.open .mobile-nav { display: flex; }
  .svc-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .mini-grid, .pkg-grid { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .post-card.feature { grid-column: span 1; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .form-row { grid-template-columns: 1fr; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .tl-item { grid-template-columns: 1fr; gap: 6px; }
  .svc-row a { grid-template-columns: auto 1fr; gap: 6px 16px; padding: 22px 4px; }
  .svc-row a:hover { padding-left: 4px; }
  .svc-row-tag { display: none; }
  .svc-row-arrow { grid-row: 1; align-self: start; width: 40px; height: 40px; }
  .svc-row-arrow .ico { width: 17px; height: 17px; }
  .svc-row-main { grid-column: 1 / -1; }
  .svc-row-main h3 { font-size: 1.9rem; }
  .hero2-proof .pf b { font-size: 1.3rem; }
  /* Touch targets: keep tap areas comfortable (>=44px) on mobile */
  .foot-col a, .foot-contact p { padding: 11px 0; }
  .crumbs { gap: .35em .7em; flex-wrap: wrap; }
  .crumbs a { padding: 6px 0; }
  .textlink, .phone-pill { padding-top: 6px; padding-bottom: 6px; }
  .foot-social { width: 46px; height: 46px; }
  .hero-actions .btn, .foot-cta-actions .btn { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
}