/* ==========================================================================
   Whiterock Landscaping Supplies — Design System
   Palette: #73B611 green + #2c3691 ink · Poppins · natureplant-matched
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — GREEN LED. Whiterock leaf green is the primary voice of the site. */
  --leaf-900: #365608;
  --leaf-800: #48720b;
  --leaf-700: #5a8f0d;
  --leaf-600: #67a40f;
  --leaf:     #73b611;   /* reference green — primary */
  --leaf-400: #92c747;
  --leaf-300: #aed675;
  --leaf-200: #cae5a3;
  --leaf-100: #e2f2d0;
  --leaf-50:  #f1f8e8;

  /* Indigo — demoted to a supporting accent (footer, deep panels) */
  --indigo-900: #14163f;
  --indigo-800: #1a1d5e;
  --indigo:     #202474;
  --indigo-600: #2d329a;
  --indigo-400: #5b60c4;
  --indigo-200: #b9bbe6;
  --indigo-50:  #eeeff9;

  /* Neutrals — Natureplant ink/body/cream */
  --ink:    #2c3691;   /* was #1e1e1e — headings, nav, dark UI */
  --ink-2:  #232b74;
  --body:   #70717b;
  --muted:  #8b8c9b;
  --line:   #e8e6e1;
  --surface:#ffffff;
  --canvas: #ffffff;
  --canvas-2: #f8f5f0;   /* cream */
  --cream:  #f8f5f0;

  --success: #4f9d4f;
  --warn:    #d99a2b;
  --danger:  #cc4444;
  --star:    #f2b705;

  /* Gradients — green first */
  --grad-brand:  var(--leaf);
  --grad-leaf:   var(--leaf);
  --grad-deep:   linear-gradient(160deg, var(--leaf-900) 0%, var(--leaf-800) 60%, var(--leaf-700) 100%);
  --grad-mesh:   none;
  --grad-sheen:  linear-gradient(115deg, transparent 20%, rgba(255,255,255,.4) 48%, transparent 76%);

  --glass:        rgba(255,255,255,.9);
  --glass-strong: rgba(255,255,255,.97);
  --glass-dark:   rgba(30,30,30,.6);
  --glass-line:   rgba(0,0,0,.06);
  --blur: saturate(120%) blur(10px);

  /* Radii — Natureplant is sharp: 4px is the house corner */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 4px;
  --r-lg: 5px;
  --r-xl: 6px;
  --r-2xl: 8px;
  --r-pill: 999px;   /* reserved for dots/badges only */

  /* Shadows — softer, less glossy */
  --sh-xs: 0 1px 2px rgba(30,30,30,.05);
  --sh-sm: 0 2px 8px rgba(30,30,30,.06);
  --sh-md: 0 6px 20px rgba(30,30,30,.08);
  --sh-lg: 0 14px 38px rgba(30,30,30,.1);
  --sh-xl: 0 24px 60px rgba(30,30,30,.13);
  --sh-leaf: 0 10px 26px rgba(115,182,17,.34);
  --sh-indigo: 0 10px 26px rgba(115,182,17,.34);

  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 40px;  --s-6: 48px;  --s-7: 56px;  --s-8: 64px;
  --s-10: 80px; --s-12: 96px; --s-14: 120px; --s-16: 128px; --s-20: 160px;

  --wrap: 1344px;      /* Natureplant container */
  --wrap-wide: 1440px;
  --gutter: 24px;
  --nav-h: 88px;

  --e-out:  cubic-bezier(.22,1,.36,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --e-back: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .18s var(--e-soft);
  --t-med:  .38s var(--e-out);
  --t-slow: .68s var(--e-out);

  --f: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-head: 'Inter Tight', 'Poppins', system-ui, sans-serif;
  /* Reference type scale, measured from natureplant:
     banner h3 65/600/71.5 · section h3 36/600/46.8 · h6 20/600/26
     body 16/400/24 · btn 16/600 · eyebrow 16/600/24 */
  --fs-display: clamp(2.5rem, 4.6vw, 4.0625rem);  /* 65px */
  --fs-h1: clamp(2rem, 3.2vw, 2.25rem);           /* 36px */
  --fs-h2: clamp(1.75rem, 2.6vw, 2.25rem);        /* 36px */
  --fs-h3: 1.25rem;                                /* 20px */
  --fs-h4: 1.25rem;                                /* 20px */
  --fs-lg: 1.25rem; --fs-base: 1rem; --fs-sm: .875rem;
  --fs-xs: .75rem; --fs-2xs: .6875rem;
  --lh-body: 1.5;      /* 24/16 */
  --lh-head: 1.3;      /* 46.8/36 */
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f); font-size: var(--fs-base); line-height: 1.5;
  color: var(--body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { color: var(--ink); font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: capitalize; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); }
::selection { background: var(--leaf); color: #fff; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: var(--r-xs); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--canvas-2); }
::-webkit-scrollbar-thumb { background: var(--leaf-300); border-radius: var(--r-pill); border: 3px solid var(--canvas-2); }
::-webkit-scrollbar-thumb:hover { background: var(--leaf); }
.skip-link {
  position: absolute; top: -100px; left: var(--s-2); z-index: 9999;
  background: var(--leaf); color: #fff; padding: var(--s-1) var(--s-3);
  border-radius: var(--r-sm); transition: top var(--t-fast);
}
.skip-link:focus { top: var(--s-2); }

/* ---------- 3. Layout ---------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - (var(--gutter) * 2), var(--wrap-wide)); margin-inline: auto; }
.section { position: relative; padding-block: var(--s-14); }
/* equal vertical rhythm between every section */
.section-sm { padding-block: var(--s-14); }
.grid { display: grid; gap: var(--s-4); }
.between { display: flex; align-items: center; justify-content: space-between; }
.text-center { text-align: center; }
.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}
.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}
.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- 4. Backgrounds ---------- */
.bg-canvas-2 { background: var(--cream); }
.bg-leaf-50 { background: var(--leaf-50); }
.bg-deep { background: var(--grad-deep); color: rgba(255,255,255,.82); }
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4 { color: #fff; }
/* Rounded inset panel — the .faq-section treatment, reusable.
   Same inset, radius and green as the FAQ block so the page reads as one system. */
:root { --curve-bg: #f1f8f2; }
.section--curve {
  position: relative; overflow: hidden;
  margin-inline: clamp(16px, 3vw, 40px);
  border-radius: 30px;
  background: var(--curve-bg);
}
.bg-mesh { background: var(--cream); }
.bg-mesh::before { content: none; }
.bg-mesh > * { position: relative; z-index: 1; }
.blob { display: none; }
.blob-leaf { background: var(--leaf); }
.blob-indigo { display: none; }
@keyframes blobDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(28px,-36px,0) scale(1.14); }
  100% { transform: translate3d(-22px,24px,0) scale(.94); }
}

/* ---------- 5. Headings ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-base); font-weight: 600; letter-spacing: normal;
  text-transform: capitalize; color: var(--leaf);
  padding: 0; border: 0; background: none; border-radius: 0;
}
.eyebrow::after {
  content: ''; width: 18px; height: 18px; flex: none;
  background: var(--leaf); opacity: .9;
  -webkit-mask: var(--leaf-mask) center/contain no-repeat;
  mask: var(--leaf-mask) center/contain no-repeat;
}
.eyebrow::before { content: none; }
:root { --leaf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 20A7 7 0 0 1 4 13c0-7 8-11 17-11 0 9-4 17-11 17Z' fill='%23000'/%3E%3C/svg%3E"); }
.bg-deep .eyebrow, .page-hero .eyebrow { background: none; border: 0; color: var(--leaf-300); }
.bg-deep .eyebrow::after, .page-hero .eyebrow::after { background: var(--leaf-300); }
.sec-head { max-width: 720px; margin-bottom: var(--s-8); }
.sec-head.center-head { margin-inline: auto; text-align: center; }
.sec-head h2 { margin-top: var(--s-2); }
.sec-head p { margin-top: var(--s-2); font-size: var(--fs-base); line-height: 1.5; color: var(--body); }
.bg-deep .sec-head p { color: rgba(255,255,255,.66); }
.title-accent { color: var(--leaf); font-style: normal; font-weight: 600; }

/* ---------- 6. Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 16px 38px; border-radius: var(--r-sm);
  font-size: var(--fs-base); font-weight: 600; text-transform: capitalize; cursor: pointer; overflow: hidden; white-space: nowrap;
  transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-med), color var(--t-med), border-color var(--t-med);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn { z-index: 1; }
/* Reference mechanism: two panels sit at ∓100% and slide to ∓50% on hover */
.btn::before, .btn::after {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0;
  width: 132%; background: rgba(19,23,43,.16);
  transition: transform .3s var(--e-soft);
}
.btn::before { left: 0; transform: translateX(-100%); }
.btn::after  { right: 0; transform: translateX(100%); }
.btn:hover::before { transform: translateX(-50%); }
.btn:hover::after  { transform: translateX(50%); }
.btn:active { transform: none; }
.btn-primary { background: var(--leaf); color: #fff; box-shadow: var(--sh-leaf); }
.btn-primary:hover { background: var(--leaf); }
.btn-leaf { background: var(--leaf); color: #fff; box-shadow: var(--sh-leaf); }
.btn-leaf:hover { background: var(--leaf); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--leaf); color: var(--leaf); background: var(--leaf-50); }
.btn-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-light:hover { background: #fff; box-shadow: var(--sh-md); }
.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--leaf); box-shadow: var(--sh-leaf); }
.btn-lg { padding: 19px 44px; font-size: var(--fs-base); }
.btn-sm { padding: 10px 22px; font-size: var(--fs-sm); }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: .45; pointer-events: none; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; font-size: var(--fs-sm); color: var(--leaf-700); transition: gap var(--t-fast), color var(--t-fast); }
.link-arrow svg { width: 16px; transition: transform var(--t-fast); }
.link-arrow:hover { gap: 12px; color: var(--leaf); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- 7. HEADER — LawnShaper structure ----------
   Cream page · topbar: location left / promo pill centre / socials + search right
   · floating white nav card + separate phone card */
/* Inset "framed" top chrome (topbar + header float together), matching the ref.
   No overflow:hidden here — that would clip the nav dropdowns; corners are
   rounded on the topbar/header themselves instead. */
.chrome { --frame: clamp(14px, 2vw, 30px); margin: var(--frame) var(--frame) 0; border-radius: 18px; box-shadow: var(--sh-md); position: relative; z-index: 55; }

/* Green utility bar */
.topbar { background: var(--leaf); color: #fff; font-size: var(--fs-sm); position: relative; z-index: 60; border-radius: 18px 18px 0 0; }
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 46px; background: transparent; border: 0; flex-wrap: wrap;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.topbar a, .topbar span { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 500; transition: opacity var(--t-fast); }
.topbar a:hover { opacity: .82; color: #fff; }
.topbar svg { width: 15px; height: 15px; flex: none; }
.tb-social { gap: 13px; }
.tb-social a { padding: 0; }
.tb-social svg { width: 16px; height: 16px; }
.tb-quote { font-weight: 700; padding-left: var(--s-4); border-left: 1px solid rgba(255,255,255,.28); }

/* Flat white header: logo left · centred nav · actions right */
.site-header { position: relative; z-index: 50; background: #fff; box-shadow: none; margin-bottom: 0; border-radius: 0 0 18px 18px; }
.site-header.solid, .site-header.always-solid { background: #fff; box-shadow: none; backdrop-filter: none; }
.site-header .wrap { background: transparent; border: 0; }
.nav { display: flex; align-items: center; gap: var(--s-3); height: 110px; padding: 0; }
.logo { flex: none; display: block; }
.logo img { height:100px; width: auto; }
.site-header.solid .logo img { height: 60px; }

.nav-menu { display: flex; align-items: center; justify-content: center; flex: 1; gap: 2px; margin: 0; }
.nav-item { position: relative; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 12px 15px; border-radius: 0;
  font-size: var(--fs-base); font-weight: 600; color: var(--ink);
  text-transform: none; letter-spacing: 0; transition: color var(--t-med);
}
.nav-link::before { content: none; }
.nav-link .chev { display: none; }
.nav-link.has-sub::after {
  content: ''; margin-left: 5px; width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; transition: transform var(--t-med);
}
.nav-item:hover .nav-link.has-sub::after { transform: rotate(180deg); }
.nav-link:hover { color: var(--leaf); }
.nav-item.active > .nav-link { color: var(--leaf); }

.dropdown {
  position: absolute; top: 100%; left: 0; transform: translateY(10px);
  min-width: 250px; padding: var(--s-1) 0;
  background: #fff; border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; pointer-events: none; transition: all var(--t-med);
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.dropdown a { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; border-radius: 0; font-size: var(--fs-sm); color: var(--ink); transition: color var(--t-med), padding var(--t-med); }
.dropdown a .count { font-size: var(--fs-xs); color: var(--muted); }
.dropdown a:hover { background: none; color: var(--leaf); padding-left: 28px; }
.dropdown a:hover .count { color: var(--leaf); }
.dropdown.mega { left: auto; right: 0; min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: var(--s-1) 0; }
.nav-item:hover .dropdown.mega, .nav-item:focus-within .dropdown.mega { transform: translateY(0); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--cream); border: 0; transition: all var(--t-med); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--leaf); color: #fff; transform: none; box-shadow: none; }
.icon-btn .badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--leaf); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.icon-btn .badge.pop { animation: badgePop .45s var(--e-back); }
@keyframes badgePop { 0%{transform:scale(1)} 45%{transform:scale(1.35)} 100%{transform:scale(1)} }
.cart-total { display: none; }

/* Green "Let's Talk" pill */
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  background: var(--leaf); color: #fff; font-weight: 700; font-size: var(--fs-base);
  transition: all var(--t-med);
}
.nav-cta svg { width: 16px; height: 16px; }
.nav-cta:hover { background: var(--ink); color: #fff; }
.nav-phone { display: none; }
.burger { display: none; }

/* ---------- 8. Search ---------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 200; background: var(--glass-dark); backdrop-filter: blur(24px);
  display: grid; place-items: start center; padding-top: 14vh;
  opacity: 0; visibility: hidden; transition: all var(--t-med);
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-panel { width: min(100% - 48px, 760px); transform: translateY(-24px) scale(.97); transition: transform var(--t-slow); }
.search-overlay.open .search-panel { transform: translateY(0) scale(1); }
.search-field { display: flex; align-items: center; gap: var(--s-2); background: #fff; border-radius: var(--r-xl); padding: var(--s-2) var(--s-3); box-shadow: var(--sh-xl); }
.search-field > svg { width: 24px; height: 24px; color: var(--muted); flex: none; }
.search-field input { flex: 1; border: 0; outline: 0; background: none; font-size: 1.25rem; font-weight: 500; color: var(--ink); padding: var(--s-1) 0; min-width: 0; }
.search-field input::placeholder { color: var(--muted); font-weight: 400; }
.search-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas-2); color: var(--body); transition: all var(--t-fast); flex: none; }
.search-close svg { width: 16px; }
.search-close:hover { background: var(--leaf); color: #fff; }
.search-hint { margin-top: var(--s-3); text-align: center; color: rgba(255,255,255,.6); font-size: var(--fs-sm); }
.search-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); justify-content: center; margin-top: var(--s-2); }
.search-tags button { padding: 7px 16px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); transition: all var(--t-fast); }
.search-tags button:hover { background: var(--leaf); color: #fff; border-color: var(--leaf); }
.search-results { margin-top: var(--s-3); max-height: 46vh; overflow-y: auto; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-xl); padding: var(--s-1); }
.search-results:empty { display: none; }
.search-result { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); border-radius: var(--r-md); transition: background var(--t-fast); }
.search-result:hover { background: var(--leaf-50); }
.search-result img { width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.search-result .sr-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.search-result .sr-cat { font-size: var(--fs-xs); color: var(--muted); }
.search-result .sr-price { margin-left: auto; font-weight: 700; color: var(--leaf-700); }
.search-empty { padding: var(--s-4); text-align: center; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- 9. Drawer ---------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); z-index: 210;
  background: #fff; box-shadow: var(--sh-xl); transform: translateX(100%);
  transition: transform var(--t-slow), visibility var(--t-slow);
  display: flex; flex-direction: column;
  visibility: hidden;   /* keeps the closed drawer out of scrollWidth + the a11y tree */
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3); border-bottom: 1px solid var(--line); }
.drawer-head img { height: 42px; }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-3) var(--s-6); }
.drawer-foot { padding: var(--s-3); border-top: 1px solid var(--line); background: var(--canvas-2); }
.m-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); width: 100%; font-weight: 500; color: var(--ink); text-align: left; }
.m-link svg { width: 16px; transition: transform var(--t-fast); color: var(--muted); }
.m-toggle.open svg { transform: rotate(180deg); }
.m-sub { max-height: 0; overflow: hidden; transition: max-height var(--t-med); }
.m-sub a { display: block; padding: 11px 0 11px var(--s-2); font-size: var(--fs-sm); color: var(--body); border-bottom: 1px solid var(--line); }
.m-sub a:hover { color: var(--leaf); }
.scrim { position: fixed; inset: 0; z-index: 205; background: rgba(20,22,63,.5); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: all var(--t-med); }
.scrim.open { opacity: 1; visibility: visible; }

/* ---------- 10. BANNER — LawnShaper structure ----------
   Inset rounded card · diagonal dark panel left over a photo right
   · mixed-weight headline · white pill CTA · review card · vertical arrows */
.hero { position: relative; padding: var(--s-5) clamp(14px, 2vw, 30px) 0; }
.hero::before { content: none; }
.hero-blob-1, .hero-blob-2 { display: none; }

.hero > .wrap { width: 100%; max-width: none; margin: 0; }
.hero-card {
  position: relative; overflow: hidden; border-radius: 30px;   /* dark rounded card (matches ref) */
  background:linear-gradient(100deg, rgb(6 10 46) 0%, rgb(20 26 82) 50%, rgb(10 22 129 / 67%) 100%); isolation: isolate;
}
/* subtle wavy texture over the dark card (original SVG, mirrors the ref pattern) */
.hero-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='46'%3E%3Cpath d='M0 23 Q85 3 170 23 T340 23' fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1'/%3E%3C/svg%3E") repeat;
  background-size: 340px 46px;
}
.hero-inner {
  position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: var(--s-6);
  padding: clamp(28px, 4vw, 60px);
  /* Left-align the banner text with the header logo. The logo sits on .wrap's
     left edge; inside the card that is `50% - wrap/2` (the card's own inset
     cancels out of the arithmetic). Falls back to the normal card padding on
     viewports too narrow for the 1344px container. */
  padding-left: max(clamp(28px, 4vw, 60px), calc(50% - (var(--wrap) / 2)));
}
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--leaf); font-weight: 600; text-transform: capitalize; }
.hero-eyebrow svg { width: 18px; height: 18px; }

.hero .hero-title {
  font-family: var(--f-head);
  font-size: clamp(2.25rem, 4.2vw,3.90rem);
  font-weight: 600; line-height: 1.12;
  letter-spacing: -.01em; color: #fff; margin: var(--s-2) 0 0;
}
.hero .hero-title .lt { font-weight: 300; color: #fff; }
.hero .hero-title em { font-style: normal; font-weight: 600; color: var(--leaf); }
.hero-copy { margin-top: var(--s-3); font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 500px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.hero-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; transition: color var(--t-med); }
.hero-link svg { width: 16px; height: 16px; }
.hero-link:hover { color: var(--leaf); }

/* Right side: two columns of images auto-scrolling vertically (matches ref) */
.hero-gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  height: min(560px, 72vh); overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.hero-col { display: flex; flex-direction: column; gap: 16px; will-change: transform; }
.hero-col.up   { animation: heroScroll 28s linear infinite; }
.hero-col.down { animation: heroScroll 28s linear infinite reverse; }
.hero-gallery:hover .hero-col { animation-play-state: paused; }
.hero-col figure { margin: 0; flex: none; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; }
.hero-col img { width: 100%; height: 100%; object-fit: cover; }
/* content is duplicated in each column, so -50% is exactly one set → seamless loop */
@keyframes heroScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-col { animation: none; } }

/* ---------- 11. PAGE BANNER — mirrors the reference inner-page banner ----------
   Full-bleed photo below the header (header sits on the cream page, not over it)
   · left-aligned title with the breadcrumb beneath (current crumb in green) */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: 96px; padding-bottom: 96px;
  background: var(--ink); text-align: left; color: #fff;
  /* Same treatment as the home banner: inset from the page edges with rounded
     corners. `.wrap` inside still caps at 1344px and centres, so the h1 keeps
     lining up with the header logo wherever that cap binds. */
  margin: var(--s-5) clamp(14px, 2vw, 30px) 0;
  border-radius: 30px;
}
.page-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; filter: brightness(1.05) saturate(1.1);
}
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,20,20,.6) 0%, rgba(20,20,20,.32) 55%, rgba(20,20,20,.22) 100%); }
.page-hero::after { content: none; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: 2.5rem; font-weight: 600; line-height: 1.3; margin: 0; }
.page-hero p { display: none; }             /* the reference banner is title + crumb only */
.page-hero-blob { display: none; }
.crumbs {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  margin-top: var(--s-2); font-size: var(--fs-base); font-weight: 600; color: #fff; flex-wrap: wrap;
}
.crumbs a { color: #fff; }
.crumbs a:hover { color: var(--leaf); }
.crumbs svg { display: none; }
/* reference uses a chevron separator (›) rather than a slash */
.crumbs .sep { color: rgba(255,255,255,.6); font-weight: 400; font-size: 0; }
.crumbs .sep::after { content: '\203A'; font-size: var(--fs-base); }
.crumbs .now { color: var(--leaf); font-weight: 600; }

/* ---------- 11a. IMGHOVER — the reference's white cross-flash ----------
   Two white bars grow from the centre and fade out. 0.9s linear. No zoom. */
.imghover, .prod-media, .cat-card, .blog-media, .case-media, .proj-item, .footer-photo a,
.split-img-main, .split-img-float, .plybtn-media, .insta-cell, .promo, .pdp-main {
  position: relative; overflow: hidden;
}
.imghover::before, .imghover::after,
.prod-media::before, .cat-card::before, .blog-media::before, .case-media::before, .proj-item::before, .footer-photo a::before,
.split-img-main::before, .plybtn-media::before, .promo::before,
.imghover::after, .blog-media::after, .case-media::after, .footer-photo a::after, .split-img-main::after, .plybtn-media::after {
  content: ''; position: absolute; z-index: 3; pointer-events: none;
  opacity: 1; transition: all .9s linear;
}
.imghover::before, .prod-media::before, .cat-card::before, .blog-media::before, .case-media::before, .proj-item::before,
.footer-photo a::before, .split-img-main::before, .plybtn-media::before {
  top: 0; bottom: 0; left: 50%; right: 50%; background: rgba(255,255,255,.2);
}
.imghover::after, .blog-media::after, .case-media::after, .footer-photo a::after, .split-img-main::after, .plybtn-media::after {
  left: 0; right: 0; top: 50%; bottom: 50%; background: rgba(255,255,255,.3);
}
.imghover:hover::before, .prod-card:hover .prod-media::before, .cat-card:hover::before,
.blog-card:hover .blog-media::before, .case-card:hover .case-media::before, .proj-item:hover::before, .footer-photo a:hover::before,
.split-media:hover .split-img-main::before, .plybtn:hover .plybtn-media::before {
  left: 0; right: 0; opacity: 0;
}
.imghover:hover::after, .blog-card:hover .blog-media::after, .case-card:hover .case-media::after, .footer-photo a:hover::after,
.split-media:hover .split-img-main::after, .plybtn:hover .plybtn-media::after {
  top: 0; bottom: 0; opacity: 0;
}

/* ---------- 11b. Imagery — reference photography is bright and saturated ---------- */
.prod-media img, .cat-card img, .blog-media img, .case-media img, .split-img-main img, .split-img-float img,
.hero-cut-inner img, .insta-cell img, .promo img, .pdp-main img, .pdp-thumb img,
.side-post img, .testi-user img, .proj-item img, .qv-media img, .cart-row img {
  filter: brightness(1.07) saturate(1.14) contrast(1.02);
  transition: filter var(--t-med), transform 1s var(--e-out);
}


/* ---------- 12. Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); }

.card-pad { padding: var(--s-4); }
.glass-card { background: var(--glass); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); border-radius: var(--r-lg); box-shadow: var(--sh-md); }

/* ---------- 13. Category cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.cat-grid.feature { grid-template-columns: repeat(4, 1fr); }
.cat-grid.feature > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.cat-grid.feature > :nth-child(1) .cat-card { min-height: 100%; }

.cat-card { position: relative; display: block; overflow: hidden; border-radius: var(--r-lg); min-height: 260px; box-shadow: var(--sh-sm); transition: transform var(--t-med), box-shadow var(--t-med); isolation: isolate; }
.cat-card:hover { box-shadow: var(--sh-sm); }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-out); z-index: -2; }

.cat-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30,30,30,.05) 0%, rgba(30,30,30,.45) 52%, rgba(30,30,30,.88) 100%); transition: background var(--t-med); }
.cat-card:hover::after { background: linear-gradient(180deg, rgba(90,143,13,.25) 0%, rgba(90,143,13,.66) 50%, rgba(54,86,8,.94) 100%); }
.cat-body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-3); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); }
.cat-body h3 { color: #fff; font-size: var(--fs-h4); transition: transform var(--t-med); }

.cat-body .cat-count { display: inline-block; margin-top: 4px; font-size: var(--fs-xs); color: var(--leaf-300); font-weight: 500; }
.cat-go { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.28); color: #fff; transform: translateY(8px) rotate(-30deg); opacity: 0; transition: all var(--t-med); }
.cat-go svg { width: 18px; }
.cat-card:hover .cat-go { transform: translateY(0) rotate(0); opacity: 1; background: var(--leaf); color: #fff; border-color: var(--leaf); }
.cat-tag { position: absolute; top: var(--s-2); left: var(--s-2); z-index: 2; padding: 6px 14px; border-radius: var(--r-sm); background: var(--leaf); color: #fff; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- 14. Product cards ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s-3); }
.prod-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); }
.prod-card:hover { border-color: var(--line); }
.prod-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); padding: 1.5px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--t-med); pointer-events: none; z-index: 3;
}
.prod-card:hover::before { opacity: 0; }
.prod-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--canvas-2); }
.prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--e-out); }

.prod-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(30,30,30,.32) 100%); opacity: 0; transition: opacity var(--t-med); }

.prod-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pbadge { padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pbadge.new { background: var(--leaf); color: #fff; }
.pbadge.best { background: var(--ink); color: #fff; }
.pbadge.sale { background: var(--danger); color: #fff; }
.pbadge.soon { background: var(--muted); color: #fff; }
.prod-tools { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.ptool { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: var(--sh-sm); opacity: 0; transform: translateX(14px); transition: all var(--t-med); }
.ptool svg { width: 16px; height: 16px; }
.prod-card:hover .ptool { opacity: 1; transform: translateX(0); }
.prod-card:hover .ptool:nth-child(1) { transition-delay: .04s; }
.prod-card:hover .ptool:nth-child(2) { transition-delay: .1s; }
.ptool:hover { background: var(--leaf); color: #fff; border-color: var(--leaf); }
.ptool.on { background: var(--leaf); color: #fff; border-color: var(--leaf); opacity: 1; transform: translateX(0); }
.ptool.on svg { fill: currentColor; }
.prod-quick { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; opacity: 0; transform: translateY(14px); transition: all var(--t-med) .06s; }
.prod-card:hover .prod-quick { opacity: 1; transform: translateY(0); }
.prod-body { padding: var(--s-2) var(--s-3) var(--s-3); display: flex; flex-direction: column; flex: 1; }
.prod-cat { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf-700); }
.prod-name { margin-top: 6px; font-size: var(--fs-base); font-weight: 600; color: var(--ink); line-height: 1.4; transition: color var(--t-fast); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-card:hover .prod-name { color: var(--leaf); }
.prod-rate { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.stars { display: flex; gap: 2px; }
.stars svg { width: 13px; height: 13px; color: var(--star); fill: currentColor; }
.stars svg.off { color: var(--line); }
.prod-rate span { font-size: var(--fs-xs); color: var(--muted); }
.prod-foot { margin-top: auto; padding-top: var(--s-2); display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); }
.prod-price { font-size: 1.25rem; font-weight: 700; color: var(--leaf-700); letter-spacing: -.02em; }
.prod-price .unit { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.prod-add { width: 42px; height: 42px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--leaf-50); color: var(--leaf-700); transition: all var(--t-med); }
.prod-add svg { width: 18px; height: 18px; }
.prod-add:hover { background: var(--leaf); color: #fff; }
.prod-add.done { background: var(--leaf-700); color: #fff; }
.prod-grid.list-view { grid-template-columns: 1fr; }
.prod-grid.list-view .prod-card { flex-direction: row; }
.prod-grid.list-view .prod-media { width: 280px; flex: none; aspect-ratio: 1/1; }
.prod-grid.list-view .prod-body { padding: var(--s-3) var(--s-4); }
.prod-grid.list-view .prod-name { font-size: var(--fs-h4); -webkit-line-clamp: 1; }
.prod-grid.list-view .prod-desc { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--muted); }
.prod-desc { display: none; }

/* ---------- 15. Filters / toolbar ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 10px 20px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--body); background: #fff; border: 1.5px solid var(--line); transition: all var(--t-med); }
.chip:hover { border-color: var(--leaf); color: var(--leaf); }
.chip.active { background: var(--leaf); color: #fff; border-color: var(--leaf); box-shadow: var(--sh-leaf); }
.chip .n { opacity: .6; font-size: var(--fs-xs); margin-left: 4px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-2) var(--s-3); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-xs); margin-bottom: var(--s-4); }
.toolbar-count { font-size: var(--fs-sm); color: var(--muted); }
.toolbar-count b { color: var(--ink); }
.toolbar-right { display: flex; align-items: center; gap: var(--s-2); }
.select-wrap { position: relative; }
.select-wrap svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 14px; color: var(--muted); pointer-events: none; }
select.sel { appearance: none; padding: 10px 38px 10px var(--s-2); border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: border-color var(--t-fast); }
select.sel:hover, select.sel:focus { border-color: var(--leaf); outline: none; }
.view-toggle { display: flex; gap: 4px; padding: 4px; background: var(--canvas-2); border-radius: var(--r-sm); }
.view-toggle button { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); transition: all var(--t-fast); }
.view-toggle button svg { width: 16px; }
.view-toggle button.active { background: #fff; color: var(--leaf-700); box-shadow: var(--sh-xs); }
.shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-5); align-items: start; }
.filters { position: sticky; top: 110px; display: grid; gap: var(--s-2); }
.filter-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-xs); }
.filter-box h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin-bottom: var(--s-2); }
.filter-list li + li { margin-top: 4px; }
.filter-list a, .filter-list button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--body); transition: all var(--t-fast); text-align: left; }
.filter-list a:hover, .filter-list button:hover { background: var(--leaf-50); color: var(--leaf); padding-left: 16px; }
.filter-list .active { background: var(--leaf-50); color: var(--leaf-700); font-weight: 600; }
.filter-list .n { font-size: var(--fs-xs); color: var(--muted); }
.range-row { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); }
.range-row input[type=number] { width: 100%; min-width: 0; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); outline: none; transition: border-color var(--t-fast); }
.range-row input:focus { border-color: var(--leaf); }
input[type=range] { width: 100%; accent-color: var(--leaf-600); margin-top: var(--s-2); }
.check { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: var(--fs-sm); cursor: pointer; transition: color var(--t-fast); }
.check:hover { color: var(--leaf); }
.check input { display: none; }
.check i { width: 19px; height: 19px; border-radius: 5px; border: 1.5px solid var(--line); flex: none; display: grid; place-items: center; transition: all var(--t-fast); }
.check i::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); transition: transform var(--t-fast); }
.check input:checked + i { background: var(--leaf); border-color: var(--leaf); }
.check input:checked + i::after { transform: rotate(-45deg) scale(1); }
.check .n { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 16. Counters ---------- */
.counter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.counter { position: relative; text-align: center; padding: var(--s-4) var(--s-2); border-radius: var(--r-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); transition: transform var(--t-med), background var(--t-med); }
.counter:hover { background: rgba(255,255,255,.11); }
.counter-icon { width: 58px; height: 58px; margin: 0 auto var(--s-2); border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; }
.counter-icon svg { width: 26px; height: 26px; }
.counter b { display: block; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1; }
.counter b .suffix { color: var(--leaf-300); }
.counter span { display: block; margin-top: 8px; font-size: var(--fs-sm); color: rgba(255,255,255,.62); }

/* ---------- 17. Why-us / features ---------- */
/* Split layout: image left, heading + 2x2 boxes right. */
.why-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-8); align-items: stretch; }
.why-media { position: relative; min-height: 100%; }
.why-media .split-img-main { height: 100%; aspect-ratio: auto; }
.why-content { display: flex; flex-direction: column; justify-content: center; }
.why-content .sec-head { text-align: left; margin-bottom: var(--s-4); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.why-content .why-grid { flex: 1 1 auto; align-content: center; }
.why-card { position: relative; padding: var(--s-5) var(--s-3) var(--s-4); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); overflow: hidden; transition: transform var(--t-med), box-shadow var(--t-med); }
.why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-leaf); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med); }

.why-card:hover::before { transform: scaleX(1); }
.why-num { position: absolute; top: var(--s-2); right: var(--s-3); font-size: 3.5rem; font-weight: 800; color: var(--canvas-2); line-height: 1; letter-spacing: -.05em; transition: color var(--t-med); }
.why-card:hover .why-num { color: var(--leaf-50); }
.why-icon { width: 64px; height: 64px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--leaf-50); color: var(--leaf); transition: all var(--t-med); position: relative; z-index: 1; }
.why-icon svg { width: 30px; height: 30px; }
.why-card:hover .why-icon { width: 64px; height: 64px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--leaf-50); color: var(--leaf); transition: all var(--t-med); position: relative; z-index: 1; }
.why-card h3 { font-size: var(--fs-h4); margin-top: var(--s-3); position: relative; z-index: 1; }
.why-card p { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--muted); position: relative; z-index: 1; }
.feat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--sh-md); }
.feat-item { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); border-right: 1px solid var(--line); transition: background var(--t-med); }
.feat-item:last-child { border-right: 0; }
.feat-item:hover { background: var(--leaf-50); }
.feat-item-icon { width: 48px; height: 48px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--leaf-50); color: var(--leaf-700); transition: all var(--t-med); }
.feat-item:hover .feat-item-icon { background: var(--leaf); color: #fff; }
.feat-item-icon svg { width: 22px; height: 22px; }
.feat-item strong { display: block; font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.feat-item span { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 18. Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.split.reverse .split-media { order: 2; }
/* About-page variant.
   `.split` is an even 1fr/1fr with centred columns. With six paragraphs of
   prose beside a 4:3 photo that left the text tall and narrow and the image
   oversized. The text column now takes the larger share and the image the
   smaller, which shortens the prose and shrinks the photo at the same time.
   Stretching the media to the row height keeps the two columns ending
   together, so there is no dead band above or below the image either. */
.split--fill { grid-template-columns: 1.45fr 0.85fr; align-items: stretch; }
.split--fill .split-media { display: flex; flex-direction: column; }
.split--fill .split-img-main { flex: 1 1 auto; aspect-ratio: auto; min-height: 320px; }
/* The floating inset and the dot grid are sized off the media column, which is
   now narrower — pull them in so they do not overhang the text. */
.split--fill .split-img-float { width: 52%; right: -14px; bottom: -22px; }
.split--fill .split-dots { width: 104px; height: 104px; top: -20px; left: -20px; }
@media (max-width: 1024px) {
  .split--fill { grid-template-columns: 1fr; }
  .split--fill .split-img-main { min-height: 0; aspect-ratio: 4/3; }
}
.split-media { position: relative; }
.split-img-main { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xl); aspect-ratio: 4/3; }
.split-img-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-out); }

.split-img-float { position: absolute; bottom: -32px; right: -24px; width: 46%; border-radius: var(--r-lg); overflow: hidden; border: 6px solid #fff; box-shadow: var(--sh-xl); animation: float 8s var(--e-soft) infinite alternate; }
.split-img-float img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.split-dots { position: absolute; top: -28px; left: -28px; width: 130px; height: 130px; z-index: -1; background-image: radial-gradient(var(--leaf) 1.6px, transparent 1.6px); background-size: 14px 14px; opacity: .45; }
.split-body h2 { margin-top: var(--s-2); }
.split-body > p { margin-top: var(--s-3); color: var(--body); }
.tick-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px var(--s-3); margin-top: var(--s-4); }
.tick-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--body); }
.tick-list li svg { width: 20px; height: 20px; flex: none; color: var(--leaf-600); margin-top: 2px; }
.stat-inline { display: flex; gap: var(--s-5); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.stat-inline div b { display: block; font-size: 2rem; font-weight: 700; color: var(--leaf); letter-spacing: -.03em; }
.stat-inline div span { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 19. FEEDBACK — mirrors natureplant .feedback ----------
   Left: full-bleed image to the viewport edge with a pale play button
   Right: cream, header + white cards (thumb | name/role | stars right) */
.feedback { position: relative; overflow: hidden; background: var(--curve-bg); padding-block: 0; }
/* curved variant: the section is now an inset panel, so the right column's
   padding can no longer be derived from the viewport edge */
.feedback.section--curve .feedback-right { padding: clamp(56px, 6vw, 104px) clamp(28px, 4vw, 72px); }
.feedback-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; }
.plybtn { position: relative; display: grid; place-items: center; min-height: 700px; }
.plybtn-media { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; overflow: hidden; }
.plybtn-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.05) saturate(1.1); }
.plybtn-media::after { content: none; }
.play {
  position: relative; z-index: 2; width: 70px; height: 70px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.8); color: var(--leaf);
  box-shadow: none; transition: background var(--t-med), color var(--t-med);
}
.play svg { width: 22px; height: 22px; margin-left: 3px; }
.play::before, .play::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6); animation: ripple 2.6s var(--e-soft) infinite;
}
.play::after { animation-delay: 1.3s; }
@keyframes ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }
.play:hover { background: var(--leaf); color: #fff; }
.feedback-right { padding: 120px max(24px, calc((100vw - var(--wrap)) / 2)) 120px 80px; }
.feedback-track {
  /* exactly two cards tall, then it scrolls vertically */
  --fb-h: 236px;
  display: grid; gap: var(--s-3);
  max-height: calc(var(--fb-h) * 2 + var(--s-3));
  overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: none; padding-right: 2px;
}
.feedback-track::-webkit-scrollbar { display: none; }
.feedback__inner { scroll-snap-align: start; }
.feedback-nav { display: flex; gap: 10px; margin-top: var(--s-3); }
.feedback-nav > button {          /* direct children only — not the dots */
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink); transition: all var(--t-med);
}
.feedback-nav > button svg { width: 18px; height: 18px; }
.feedback-nav > button:hover { background: var(--leaf); color: #fff; border-color: var(--leaf); }
.feedback-dots { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.feedback-dots .feedback-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--leaf-200); transition: all var(--t-med); }
.feedback-dots .feedback-dot.active { width: 26px; border-radius: var(--r-pill); background: var(--leaf); }
.feedback__inner {
  background: #fff; border-radius: 5px; padding: 42px; box-shadow: none; border: 0;
}
.fb-top { display: flex; align-items: center; gap: var(--s-3); }
.fb-thumb { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; flex: none; background: #fff; }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fb-name { flex: 1; }
.fb-name h3 { font-size: 1.25rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.fb-name span { font-size: var(--fs-base); color: var(--body); line-height: 1.5; }
.fb-star { display: flex; gap: 3px; margin-left: auto; flex: none; }
.fb-star svg { width: 15px; height: 15px; color: var(--leaf); fill: currentColor; }
.fb-bottom { margin-top: var(--s-3); }
.fb-bottom p { font-size: var(--fs-base); line-height: 1.5; color: var(--body); }
.feedback-shape { position: absolute; pointer-events: none; z-index: 1; }
.fbs-1 { top: 4%; right: 1.5%; width: 92px; color: var(--leaf); opacity: .8; animation: float 10s var(--e-soft) infinite alternate; }
.fbs-2 { bottom: 3%; right: 2%; width: 120px; color: var(--leaf-600); opacity: .6; animation: float 13s var(--e-soft) infinite alternate; animation-delay: -4s; }

/* ---------- 20. Brands marquee ---------- */
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: var(--s-6); width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-logo { height: 96px; width: 190px; display: grid; place-items: center; flex: none; padding: var(--s-2); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: all var(--t-med); }
.brand-logo img { max-height: 52px; width: auto; object-fit: contain; filter: none; opacity: 1; transition: all var(--t-med); }
.brand-logo:hover { border-color: var(--leaf); }


/* ---------- 21. Promos ---------- */
.promo-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-3); }
.promo { position: relative; overflow: hidden; border-radius: var(--r-xl); min-height: 320px; display: flex; align-items: center; padding: var(--s-6); isolation: isolate; box-shadow: var(--sh-md); transition: box-shadow var(--t-med); }
.promo:hover { box-shadow: var(--sh-xl); }
.promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--e-out); }

.promo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(30,30,30,.88) 0%, rgba(30,30,30,.6) 48%, rgba(30,30,30,.1) 100%); }
.promo.leaf::after { background: linear-gradient(100deg, rgba(30,37,100,.92) 0%, rgba(44,54,145,.68) 50%, rgba(115,182,17,.16) 100%); }
.promo-body { position: relative; max-width: 380px; }
.promo-body .eyebrow { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); color: #fff; }
.promo-body .eyebrow::before { background: var(--leaf-400); }
.promo-body h3 { color: #fff; font-size: var(--fs-h3); margin-top: var(--s-2); }
.promo-body p { color: rgba(255,255,255,.76); margin-top: var(--s-1); font-size: var(--fs-sm); }
.promo-body .btn { margin-top: var(--s-3); }
.promo-tag { position: absolute; top: var(--s-3); right: var(--s-3); width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--leaf); color: #fff; box-shadow: var(--sh-leaf); animation: float 5s var(--e-soft) infinite alternate; }
.promo-tag b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.promo-tag span { font-size: var(--fs-2xs); font-weight: 600; }
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-2xl); padding: var(--s-12) var(--s-8); text-align: center; background: var(--grad-deep); isolation: isolate; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 100% at 80% 20%, rgba(255,255,255,.08) 0%, transparent 60%); z-index: -1; }
.cta-band img.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; z-index: -2; }
.cta-band h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta-band p { color: rgba(255,255,255,.7); max-width: 56ch; margin: var(--s-2) auto 0; font-size: var(--fs-lg); }
.cta-band .hero-cta { justify-content: center; }

/* ---------- 22. Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-3); }
.blog-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--sh-xs); transition: all var(--t-med); }
.blog-card:hover { border-color: var(--line); }
.blog-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-out); }

.blog-date { position: absolute; bottom: 12px; left: 12px; padding: 8px 14px; border-radius: var(--r-sm); text-align: center; background: var(--glass-strong); backdrop-filter: blur(8px); box-shadow: var(--sh-sm); }
.blog-date b { display: block; font-size: var(--fs-lg); font-weight: 700; color: var(--leaf-700); line-height: 1; }
.blog-date span { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.blog-body { padding: var(--s-3) var(--s-3) var(--s-3); display: flex; flex-direction: column; flex: 1; }
.blog-meta { display: flex; gap: var(--s-2); font-size: var(--fs-base); color: #555; flex-wrap: wrap; }
.blog-meta span { display: flex; align-items: center; gap: 5px; }
.blog-meta svg { width: 13px; color: var(--leaf); }
.blog-body h2, .blog-body h3 { margin-top: 10px; font-size: 1.25rem; font-weight: 600; line-height: 1.3; transition: color var(--t-fast); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card:hover .blog-body h2, .blog-card:hover .blog-body h3 { color: var(--leaf); }
.blog-body p { margin-top: 10px; font-size: var(--fs-base); line-height: 1.5; color: var(--body); }
.blog-body .blogbtn { margin-top: auto; padding-top: var(--s-3); }
.blog-body .blogbtn .btn { width: 100%; }

/* ---------- 22a. CASE RAIL (Greenola "Best Cases") ----------
   Pill eyebrow + heading left, circular arrows right; a horizontal rail that
   starts on the container's left edge and bleeds off the right of the viewport.
   Each card is a rounded photo with a pale-green caption panel notched into its
   bottom-left corner. Deliberately rounder than the 4px house corner — the
   radii live on --case-r/--case-notch, scoped to this component only. */
.case-sec { --case-r: 20px; --case-notch: 36px; --case-w: 590px; --case-gap: 42px; }
.case-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.case-head h2 { margin-top: 18px; }
.case-head-r { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.case-pill {
  position: relative; display: inline-flex; align-items: center;
  padding: 9px 22px; border-radius: var(--r-pill);
  background: var(--leaf-800); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.case-pill i { position: absolute; right: -13px; top: -15px; width: 26px; color: var(--leaf); }
.case-pill i svg { width: 100%; height: auto; }

.case-nav { display: flex; gap: 12px; }
.case-arrow {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--leaf-200); background: transparent; color: var(--leaf-800);
  transition: background var(--t-med), color var(--t-med), border-color var(--t-med), opacity var(--t-med);
}
.case-arrow svg { width: 20px; height: 20px; }
.case-arrow:hover { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.case-arrow:disabled { opacity: .35; cursor: default; }
.case-arrow:disabled:hover { background: transparent; border-color: var(--leaf-200); color: var(--leaf-800); }

.case-rail {
  margin-top: var(--s-6); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  /* The rail BOX starts at the container's left edge (margin, not padding) so
     scrolled-out cards are clipped there instead of running into the gutter,
     and it runs to the viewport's right edge so the track bleeds off-screen.
     Percentages resolve against the section's content width — the viewport
     minus the scrollbar — which is exactly .wrap's offset. */
  margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  /* last card ends flush with .wrap's right edge */
  padding-right: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  /* headroom so the per-card reveal translate isn't clipped by overflow-y */
  padding-bottom: 44px; margin-bottom: -44px;
}
.case-rail::-webkit-scrollbar { display: none; }
.case-track { display: flex; gap: var(--case-gap); width: max-content; }

.case-card { flex: 0 0 var(--case-w); position: relative; }
/* Snap only where swiping is the primary gesture — CSS snap on this container
   cancels the arrows' scroll animation on desktop Chrome. */
@media (hover: none) and (pointer: coarse) {
  .case-rail { scroll-snap-type: x proximity; }
  .case-card { scroll-snap-align: start; }
}
.case-card > a { display: block; }
.case-media { border-radius: var(--case-r); aspect-ratio: 4 / 3; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-panel {
  position: absolute; left: 0; bottom: 0; z-index: 4; width: 74%; min-height: 45%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  padding: 26px 34px 30px;
  background: var(--leaf-100);
  border-radius: 0 var(--case-notch) 0 var(--case-r);
}
.case-panel-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.case-tag {
  display: inline-flex; padding: 6px 16px; border-radius: var(--r-pill);
  background: var(--leaf-800); color: #fff;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.case-date { font-size: var(--fs-xs); font-weight: 600; color: var(--leaf-800); }
/* Deliberately off the --ink token: this panel is a green monochrome, and
   indigo on pale green fights it. Stays inside the site's own green scale. */
.case-title {
  font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 600; line-height: 1.28;
  color: var(--leaf-900); text-transform: none; transition: color var(--t-fast);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.case-card:hover .case-title { color: var(--leaf); }

@media (max-width: 1100px) { .case-sec { --case-w: 62vw; --case-gap: 28px; } }
@media (max-width: 768px) {
  .case-sec { --case-w: 78vw; --case-notch: 28px; }
  .case-head-r { gap: 12px; }
  .case-arrow { width: 48px; height: 48px; }
  /* a 4:3 crop leaves only a sliver of photo above the panel at this width */
  .case-media { aspect-ratio: 1 / 1; }
  .case-panel { width: 82%; min-height: 0; padding: 20px 24px 24px; }
}
@media (max-width: 480px) {
  .case-sec { --case-w: 86vw; }
  .case-head-r .btn { padding: 14px 24px; }
  .case-panel { width: 88%; }
}

.article { max-width: 100%; }
.article h2 { font-size: var(--fs-h3); margin-top: var(--s-6); }
.article h3 { font-size: var(--fs-h4); margin-top: var(--s-4); }
.article p { margin-top: var(--s-2); color: var(--body); line-height: 1.9; }
.article ul { margin-top: var(--s-2); display: grid; gap: 10px; }
.article ul li { display: flex; gap: 10px; align-items: flex-start; color: var(--body); }
.article ul li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--leaf); margin-top: 11px; }
.article > img { border-radius: var(--r-lg); margin-top: var(--s-4); box-shadow: var(--sh-md); width: 100%; aspect-ratio: 16 / 9; max-height: 440px; object-fit: cover; object-position: center; }
.article blockquote { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-left: 4px solid var(--leaf); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--leaf-50); font-size: var(--fs-lg); font-style: italic; color: var(--leaf-900); }
.side-widget { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3); box-shadow: var(--sh-xs); }
.side-widget + .side-widget { margin-top: var(--s-3); }
.side-widget h2 { font-size: var(--fs-base); margin-bottom: var(--s-2); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.side-post { display: flex; gap: 12px; padding: 10px 0; transition: all var(--t-fast); }

.side-post img { width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.side-post strong { font-size: var(--fs-sm); color: var(--ink); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-post:hover strong { color: var(--leaf); }
.side-post span { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 23. FAQ ---------- */
/* FAQ (Landspire): centered single-column accordion, dark-green open item */
.faq-list { display: grid; gap: var(--s-2); }
.faq-center { max-width: 1040px; margin-inline: auto; margin-top: var(--s-8); }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: all var(--t-med); }
.faq-item:hover { border-color: var(--leaf-200); box-shadow: var(--sh-sm); }
.faq-item.open { background: #10551f; border-color: #10551f; box-shadow: var(--sh-md); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; padding: 24px 30px; text-align: left; font-size: var(--fs-lg); font-weight: 600; color: var(--ink); transition: color var(--t-fast); }
.faq-q:hover { color: var(--leaf); }
/* The question text. Takes the free space in the space-between row so it sits
   hard left against the number chip instead of being centred between the chip
   and the chevron. */
.faq-qt { flex: 1 1 auto; text-align: left; }
.faq-item.open .faq-q, .faq-item.open .faq-q:hover { color: #fff; }
.faq-ico { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--cream); color: var(--leaf-700); transition: all var(--t-med); }
.faq-ico svg { width: 16px; transition: transform var(--t-med); }
.faq-item.open .faq-ico { background: rgba(255,255,255,.18); color: #fff; }
.faq-item.open .faq-ico svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t-med); }
.faq-a-inner { padding: 0 30px 30px; color: rgba(255,255,255,.85); }

/* FAQ footer: help line + button, centered */
.faq-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); }
.faq-more { display: inline-flex; align-items: center; gap: 10px; color: var(--body); font-weight: 500; }
.faq-more svg { width: 20px; height: 20px; color: var(--leaf); }
.faq-more b { color: var(--ink); }
.faq-more:hover { color: var(--leaf); }

/* ---------- 24. NEWSLETTER — mirrors natureplant .newslatter ----------
   White section · bg-image panel r:5px · h3 36px white centred
   · joined input(cream, r 4 0 0 4) + button(green, r 0 4 4 0) */
.newslatter { background: #fff; padding-block: var(--s-14); }
.news-band {
  position: relative; overflow: hidden; border-radius: 24px;
  padding: 92px var(--s-6); text-align: center; isolation: isolate;
  box-shadow: 0 26px 60px rgba(20,40,10,.22);
}
/* modern gradient replaces the old blurry photo */
.news-band img.news-bg { display: none; }
.news-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 360px at 85% 6%, rgba(146,199,71,.42), transparent 60%),
    radial-gradient(560px 300px at 6% 104%, rgba(115,182,17,.20), transparent 62%),
    linear-gradient(125deg, #10280a 0%, #2c520c 55%, #40690b 100%);
}
.news-band h2 { font-size: 2.25rem; font-weight: 600; line-height: 1.3; color: #fff; }
.news-form {
  display: flex; gap: 0; max-width: 714px; margin: var(--s-4) auto 0;
  background: none; border-radius: 0; padding: 0; box-shadow: none;
}
.news-form input {
  flex: 1; min-width: 0; height: 56px; padding: 0 var(--s-3);
  border: 1px solid rgba(255,255,255,.1); border-right: 0;
  border-radius: 4px 0 0 4px; background: var(--cream);
  font-size: var(--fs-base); color: var(--ink); outline: 0;
}
.news-form input::placeholder { color: var(--muted); }
.news-form input:focus { box-shadow: none; }
.news-form .btn {
  width: 200px; height: 56px; flex: none; border-radius: 0 4px 4px 0;
  padding: 0; box-shadow: none;
}
.news-form .btn:hover { transform: none; }
.news-note { margin-top: var(--s-2); font-size: var(--fs-sm); color: rgba(255,255,255,.7); }
.news-note svg { width: 13px; display: inline; vertical-align: -2px; margin-right: 4px; }

/* ---------- 25. Instagram ---------- */
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.insta-cell { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--r-md); isolation: isolate; }
.insta-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--e-out); }
.insta-cell::after { content: ''; position: absolute; inset: 0; background: var(--leaf); opacity: 0; transition: opacity var(--t-med); }
.insta-cell i { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; opacity: 0; transform: scale(.6); transition: all var(--t-med); }
.insta-cell i svg { width: 26px; height: 26px; }

.insta-cell:hover::after { opacity: .82; }
.insta-cell:hover i { opacity: 1; transform: scale(1); }

/* ---------- 25b. PROJECT (Leafix "Our Project"): header row · carousel of
   alternating-width cards · category+title bottom-left · square arrow top-right */
.project { position: relative; overflow: hidden; background: var(--cream); }
.proj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.proj-head .sec-head { text-align: left; margin-inline: 0; max-width: 640px; }
.proj-head .sec-head .eyebrow { margin-inline: 0; }
.proj-viewall { flex: none; }
.proj-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 clamp(14px, 2vw, 30px) var(--s-1); margin-top: var(--s-6); scrollbar-width: none;
}
.proj-track::-webkit-scrollbar { display: none; }
/* Leafix cards: uniform 462 x 552, 20px radius */
.proj-item {
  position: relative; flex: 0 0 clamp(300px, 32vw, 462px); height: 552px; scroll-snap-align: center;
  border-radius: 20px; overflow: hidden; isolation: isolate;
}
.proj-media { position: absolute; inset: 0; }
/* Leafix two-image crossfade: main slides out left, alt slides in from right,
   both with scaleX(2) stretch + blur, 500ms */
.proj-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: 500ms ease-in-out; }
.proj-img-alt { transform: translate(50%) scaleX(2); opacity: 0; filter: blur(10px); }
.proj-item:hover .proj-img-main { transform: translateX(-50%) scaleX(2); opacity: 0; filter: blur(10px); }
.proj-item:hover .proj-img-alt { transform: translate(0) scaleX(1); opacity: 1; filter: blur(0); }
/* image-only cards: no overlay, caption, or arrow — just the two-image crossfade */

/* ---------- 25c. About Us (Landspire: content left | image right, big inline
   counter, two features in a cream card overlapping the image) ---------- */
.about2 { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(15px, 5vw,20px); align-items: center; position: relative; }
.about2-tag { display: inline-flex; align-items: center; gap: 9px; background: var(--leaf-50); color: var(--leaf-700); font-weight: 600; font-size: var(--fs-sm); padding: 8px 18px; border-radius: var(--r-pill); }
.about2-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); flex: none; }
.about2-body h2 { font-size: clamp(2rem, 3.6vw, 50px); line-height: 1.2; }
.about2-lead { display: flex; gap: var(--s-4); align-items: flex-start; margin-top: var(--s-4); }
.about2-count { flex: none; }
/* giant number, matched to Landspire (their counter is 120px / weight 500).
   min-width reserves space for the final value so the count-up can't shift the
   paragraph beside it (ch scales with the font, so it stays responsive). */
.about2-count b { display: block; font-family: var(--f-head); font-size: clamp(3.6rem, 7vw,89px); font-weight: 600; color: var(--leaf); line-height: .95; white-space: nowrap; min-width: 3ch; }
.about2-count > span { display: block; margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); max-width: 130px; }
.about2-lead p { color: var(--body); font-size:16px; line-height:27px; max-width: 500px; }
/* pill button, matched to Landspire (56px tall, 40px radius) */
.about2-btn { margin-top: var(--s-5); height: 56px; border-radius: 40px; padding-inline: 30px; }
.about2-media { position: relative; }
.about2-img { border-radius: 26px 26px 26px 90px; overflow: hidden; aspect-ratio: 4 / 4.3; box-shadow: var(--sh-xl); }
.about2-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-out); }
.about2-img:hover img { transform: scale(1.05); }
/* Matched to Landspire: card is ~106% of the image width, extends ~42% left of
   the image and overlaps ~64% onto it (percentages of the image column). */
.about2-card { position: absolute; left: -42%; bottom: 26px; width: 106%; background: #f7f8ed; border-radius: 14px; box-shadow: var(--sh-lg); padding: 38px 40px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.about2-feat { display: flex; gap: 14px; }
.about2-feat-ic { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--leaf); box-shadow: var(--sh-xs); transition: background var(--t-med), color var(--t-med); }
.about2-feat-ic svg { width: 24px; height: 24px; }
.about2-feat:hover .about2-feat-ic { background: var(--leaf); color: #fff; }
.about2-feat h3 { font-size: var(--fs-lg); }
.about2-feat p { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* ---------- 25f. CATEGORY TILES (Cleanify "Service Area") ----------
   Centred header, then a grid of tall cards: category name, a quatrefoil-masked
   photo, and the product count under it. The first card carries the reference's
   lime "featured" fill; any card takes the same lime on hover. No icons.
   Rounded like the other reference-derived components; radii scoped here. */
:root {
  /* The reference's clover/quatrefoil photo mask: four corner lobes over a
     central square. The square matters — four circles alone leave a diamond
     hole at the centre, because (100,100) is further from each centre than r. */
  --quatrefoil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23000'%3E%3Crect x='62' y='62' width='76' height='76'/%3E%3Ccircle cx='62' cy='62' r='46'/%3E%3Ccircle cx='138' cy='62' r='46'/%3E%3Ccircle cx='62' cy='138' r='46'/%3E%3Ccircle cx='138' cy='138' r='46'/%3E%3C/g%3E%3C/svg%3E");
}
.cat2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat2-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 20px; padding: 40px 22px 36px;
  background: var(--cream); border-radius: 22px;
  transition: background var(--t-med);
}
.cat2-card.is-featured, .cat2-card:hover { background: var(--leaf-300); }
.cat2-title {
  font-size: 1.3rem; font-weight: 600; line-height: 1.35;
  color: var(--leaf-900); text-transform: none;
}
.cat2-shape {
  display: block; width: 84%; aspect-ratio: 1; flex: none;
  -webkit-mask: var(--quatrefoil) center / contain no-repeat;
  mask: var(--quatrefoil) center / contain no-repeat;
}
.cat2-shape img { width: 100%; height: 100%; object-fit: cover; }
/* product count, under the photo and pinned to the card foot so it lines up
   across a row whatever the title wraps to */
.cat2-n {
  margin-top: auto; padding-top: 4px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--leaf-800);
}
.cat2-card.is-featured .cat2-n, .cat2-card:hover .cat2-n { color: var(--leaf-900); }

@media (max-width: 1200px) { .cat2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .cat2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .cat2-grid { gap: 14px; }
  .cat2-card { padding: 26px 14px 24px; gap: 14px; border-radius: 18px; }
  .cat2-title { font-size: var(--fs-base); }
  .cat2-n { font-size: var(--fs-xs); }
}

/* ---------- 25d. Pre-footer callout: image | delivery notice (floats over the footer top) ---------- */
.prefooter { padding: 0 clamp(14px, 3vw, 60px); margin-top: var(--s-12); margin-bottom: -70px; position: relative; z-index: 2; }
.prefooter-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 70px rgba(20,30,12,.28); }
.prefooter-media { position: relative; min-height: 280px; }
.prefooter-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prefooter-note { background: var(--ink); color: #fff; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); }
.prefooter-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--leaf-300); font-weight: 600; text-transform: capitalize; }
.prefooter-eyebrow svg { width: 20px; height: 20px; }
.prefooter-note p { font-size: 1.375rem; font-weight: 600; line-height: 1.45; color: #fff; }
.prefooter-note .btn-light { align-self: flex-start; background: #fff; color: var(--ink); border: 0; border-radius: var(--r-pill); padding: 0 24px; height: 50px; font-weight: 600; }
.prefooter-note .btn-light svg { color: var(--leaf); }
.prefooter-note .btn-light:hover { background: var(--leaf); color: #fff; }
.prefooter-note .btn-light:hover svg { color: #fff; }

/* ---------- 25e. Section backgrounds (give sections a designed backdrop) ---------- */
/* About: soft green glow behind the content + faint leaf watermark */
.about-section { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--canvas-2) 100%); }
.about-section::before {
  content: ''; position: absolute; z-index: 0; right: -120px; top: -80px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(115,182,17,.14) 0%, transparent 68%); pointer-events: none;
}
.about-section .wrap { position: relative; z-index: 1; }

/* Gallery: light green band with a subtle wavy texture */
.project.section--band { background: var(--canvas-2); position: relative; }
.project.section--band::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='48'%3E%3Cpath d='M0 24 Q90 4 180 24 T360 24' fill='none' stroke='%2373b611' stroke-opacity='0.07' stroke-width='1.4'/%3E%3C/svg%3E") repeat;
}
.project.section--band .wrap, .project.section--band .proj-track { position: relative; z-index: 1; }

/* FAQ (Landspire): rounded panel · light-green bg (#f1f8f2) · inset from the page
   edges (left/right spacing) · faint plant watermark behind the heading · leaf
   line-art in the bottom corners with a slow sway. */
.faq-section {
  position: relative; overflow: hidden;
  margin-inline: clamp(16px, 3vw, 40px);
  border-radius: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='220' fill='none' stroke='%2373b611' stroke-opacity='0.12' stroke-width='1.6'%3E%3Cpath d='M200 220 L200 30'/%3E%3Cpath d='M200 186 C168 176 144 184 132 206 C164 214 188 208 200 186Z'/%3E%3Cpath d='M200 186 C232 176 256 184 268 206 C236 214 212 208 200 186Z'/%3E%3Cpath d='M200 142 C170 132 148 140 136 160 C166 170 190 162 200 142Z'/%3E%3Cpath d='M200 142 C230 132 252 140 264 160 C234 170 210 162 200 142Z'/%3E%3Cpath d='M200 100 C174 90 154 98 144 116 C170 126 192 118 200 100Z'/%3E%3Cpath d='M200 100 C226 90 246 98 256 116 C230 126 208 118 200 100Z'/%3E%3Cpath d='M200 62 C182 44 184 22 198 12 C214 26 216 48 200 62Z'/%3E%3C/svg%3E") center 14px / 380px auto no-repeat, #f1f8f2;
}
.faq-section::before {
  content: ''; position: absolute; z-index: 0; left: 0; bottom: 40px; width: 230px; height: 270px;
  opacity: .55; pointer-events: none; transform-origin: bottom center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='270' fill='none' stroke='%2373b611' stroke-width='1.6'%3E%3Cpath d='M82 268 C88 206 88 138 68 80'/%3E%3Cpath d='M78 206 C104 196 126 200 140 220 C114 232 92 227 78 206Z'/%3E%3Cpath d='M74 158 C48 148 28 155 16 176 C42 188 60 181 74 158Z'/%3E%3Cpath d='M76 114 C100 100 124 100 138 120 C112 134 90 129 76 114Z'/%3E%3Cpath d='M80 74 C66 52 68 28 82 16 C100 32 102 60 80 74Z'/%3E%3C/svg%3E") no-repeat bottom left / contain;
  animation: faqLeafSway 8s ease-in-out infinite;
}
.faq-section::after {
  content: ''; position: absolute; z-index: 0; right: 0; bottom: 40px; width: 260px; height: 330px;
  opacity: .55; pointer-events: none; transform-origin: bottom center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='330' fill='none' stroke='%2373b611' stroke-width='1.6'%3E%3Cpath d='M130 328 C122 258 122 192 144 128 C155 92 178 62 208 42'/%3E%3Cpath d='M130 264 C104 258 82 266 68 288 C96 296 118 287 130 264Z'/%3E%3Cpath d='M138 214 C164 202 188 206 204 226 C176 240 152 233 138 214Z'/%3E%3Cpath d='M128 170 C102 160 80 168 66 190 C94 202 116 193 128 170Z'/%3E%3Cpath d='M144 126 C170 112 194 114 210 134 C182 150 158 143 144 126Z'/%3E%3Cpath d='M138 86 C120 66 120 40 132 22 C152 36 160 66 138 86Z'/%3E%3C/svg%3E") no-repeat bottom right / contain;
  animation: faqLeafSway 9s ease-in-out infinite reverse;
}
@media (max-width: 1200px) { .faq-section::before, .faq-section::after { display: none; } }
@keyframes faqLeafSway { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }

/* two floating botanicals at the top (top-left + top-right), gentle up-down float */
.faq-float { position: absolute; z-index: 0; pointer-events: none; animation: faqFloat 3s ease-in-out infinite; }
.faq-float svg { width: 100%; height: 100%; display: block; }
.faq-float-tl { top: 40px; left: 3%; width: 108px; height: 126px; color: var(--leaf-300); opacity: .5; animation-duration: 3.6s; }
.faq-float-tr { top: 20px; right: 3%; width: 150px; height: 196px; color: var(--leaf); opacity: .4; animation-duration: 3.1s; }
@keyframes faqFloat { 0%,100% { transform: translateY(0); } 65% { transform: translateY(15px); } }
@media (max-width: 1100px) { .faq-float { display: none; } }
.faq-section .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .faq-section::before, .faq-section::after { animation: none; } }

/* ---------- 26. Trust ---------- */
.trust-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.trust-pill { display: flex; align-items: center; gap: 10px; padding: 12px var(--s-2); border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 500; color: var(--body); box-shadow: var(--sh-xs); transition: all var(--t-med); }
.trust-pill:hover { border-color: var(--leaf); }
.trust-pill svg { width: 18px; height: 18px; color: var(--leaf); flex: none; }

/* ---------- 27. Product detail ---------- */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-8); align-items: start; }
.pdp-gallery { position: sticky; top: 110px; }
.pdp-main { position: relative; aspect-ratio: 1/1; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); background: var(--canvas-2); cursor: zoom-in; }
.pdp-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--e-out); }
.pdp-main.zoom img { transform: scale(1.9); }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.pdp-thumb { aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; border: 2px solid transparent; transition: all var(--t-fast); opacity: .6; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover, .pdp-thumb.active { border-color: var(--leaf); opacity: 1; }
.pdp-info h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: var(--s-2); }
.pdp-price-row { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.pdp-price { font-size: 2.5rem; font-weight: 700; color: var(--leaf-700); letter-spacing: -.03em; }
.pdp-price small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.pdp-stock { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--leaf-50); border: 1px solid var(--leaf-200); font-size: var(--fs-xs); font-weight: 600; color: var(--leaf-700); }
.pdp-stock i { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf-600); box-shadow: 0 0 0 3px rgba(79,157,79,.2); }
.pdp-desc { margin-top: var(--s-3); color: var(--body); }
.pdp-specs { display: grid; gap: 10px; margin-top: var(--s-4); padding: var(--s-3); background: var(--canvas-2); border-radius: var(--r-md); }
.pdp-specs > div { display: flex; justify-content: space-between; font-size: var(--fs-sm); gap: var(--s-2); }
.pdp-specs dt { color: var(--muted); }
.pdp-specs dd { color: var(--ink); font-weight: 600; text-align: right; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: #fff; }
.qty button { width: 46px; height: 52px; display: grid; place-items: center; color: var(--leaf-700); transition: background var(--t-fast); }
.qty button:hover { background: var(--leaf-50); }
.qty button svg { width: 15px; }
.qty input { width: 52px; height: 52px; text-align: center; border: 0; outline: 0; font-weight: 700; color: var(--ink); }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input[type=number] { -moz-appearance: textfield; }
.pdp-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); align-items: center; }
.pdp-meta { display: grid; gap: 8px; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.pdp-meta b { color: var(--ink); font-weight: 600; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { position: relative; padding: var(--s-2) var(--s-3); white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); transition: color var(--t-fast); }
.tab::after { content: ''; position: absolute; left: var(--s-2); right: var(--s-2); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad-leaf); transform: scaleX(0); transition: transform var(--t-med); }
.tab:hover { color: var(--leaf); }
.tab.active { color: var(--leaf-700); }
.tab.active::after { transform: scaleX(1); }
.tab-panel { display: none; padding-top: var(--s-4); animation: fadeUp .5s var(--e-out); }
.tab-panel.active { display: block; }
/* Home "Our Products" category tabs — larger hit area than the PDP tabs */
.prod-tabs { gap: var(--s-1); margin-bottom: var(--s-2); scrollbar-width: none; }
.prod-tabs::-webkit-scrollbar { display: none; }
.prod-tabs .tab { padding: var(--s-2) var(--s-3) var(--s-3); font-size: var(--fs-base); }
/* Tab icons. `inline-flex` on the button so the glyph sits on the label's
   baseline row; the icon inherits `currentColor`, so it picks up the muted /
   hover / active colours above without needing its own states. */
.prod-tabs .tab { display: inline-flex; align-items: center; gap: 8px; }
.tab-ico { width: 18px; height: 18px; flex: none; }
@media (max-width: 640px) { .tab-ico { display: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 28. Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: var(--s-3); background: var(--glass-dark); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: all var(--t-med); }
.modal.open { opacity: 1; visibility: visible; }
.modal-box { position: relative; width: min(100%, 940px); max-height: 88vh; overflow-y: auto; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-xl); transform: translateY(28px) scale(.96); transition: transform var(--t-slow); }
.modal.open .modal-box { transform: none; }
.modal-x { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 5; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: var(--sh-md); transition: all var(--t-fast); }
.modal-x svg { width: 18px; }
.modal-x:hover { background: var(--leaf); color: #fff; }
.qv-grid { display: grid; grid-template-columns: 1fr 1fr; }
.qv-media { position: relative; aspect-ratio: 1/1; background: var(--canvas-2); }
.qv-media img { width: 100%; height: 100%; object-fit: cover; }
.qv-body { padding: var(--s-5); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp-table th, .cmp-table td { padding: var(--s-2); border: 1px solid var(--line); font-size: var(--fs-sm); text-align: left; }
.cmp-table th { background: var(--canvas-2); font-weight: 700; color: var(--ink); white-space: nowrap; }
.cmp-table img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-sm); }

/* ---------- 29. Cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-5); align-items: start; }
.cart-list { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.cart-row { display: grid; grid-template-columns: 96px 1fr auto auto auto; gap: var(--s-2); align-items: center; padding: var(--s-3); border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.cart-row:last-child { border-bottom: 0; }
.cart-row:hover { background: var(--canvas); }
.cart-row img { width: 96px; height: 96px; border-radius: var(--r-md); object-fit: cover; }
.cart-row .cr-name { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.cart-row .cr-cat { font-size: var(--fs-xs); color: var(--muted); }
.cart-row .cr-price { font-weight: 600; color: var(--body); min-width: 80px; text-align: right; }
.cart-row .cr-total { font-weight: 700; color: var(--leaf-700); min-width: 90px; text-align: right; }
.cr-del { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: all var(--t-fast); }
.cr-del svg { width: 16px; }
.cr-del:hover { background: #fdecec; color: var(--danger); }
.qty.sm button { width: 34px; height: 38px; }
.qty.sm input { width: 40px; height: 38px; font-size: var(--fs-sm); }
.summary { position: sticky; top: 110px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-md); }
.summary h3 { font-size: var(--fs-h4); }
.sum-row { display: flex; justify-content: space-between; padding: 11px 0; font-size: var(--fs-sm); color: var(--body); gap: var(--s-2); }
.sum-row + .sum-row { border-top: 1px solid var(--line); }
.sum-row.total { border-top: 2px solid var(--line); margin-top: 6px; padding-top: var(--s-2); font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.sum-row.total b { color: var(--leaf-700); font-size: 1.5rem; }
.promo-row { display: flex; gap: 8px; margin-top: var(--s-3); }
.promo-row input { flex: 1; padding: 12px var(--s-2); border: 1.5px solid var(--line); min-width: 0; border-radius: var(--r-sm); font-size: var(--fs-sm); outline: none; transition: border-color var(--t-fast); }
.promo-row input:focus { border-color: var(--leaf); }
.empty { text-align: center; padding: var(--s-12) var(--s-3); background: #fff; border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty-icon { width: 96px; height: 96px; margin: 0 auto var(--s-3); border-radius: 50%; display: grid; place-items: center; background: var(--leaf-50); color: var(--leaf); }
.empty-icon svg { width: 44px; height: 44px; }

/* ---------- 30. Checkout ---------- */
.steps { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-5); }
.step { display: flex; align-items: center; gap: 10px; }
.step-n { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--canvas-2); color: var(--muted); font-weight: 700; font-size: var(--fs-sm); border: 2px solid var(--line); transition: all var(--t-med); }
.step.active .step-n { background: var(--leaf); color: #fff; border-color: var(--leaf); box-shadow: var(--sh-leaf); }
.step.done .step-n { background: var(--leaf-700); color: #fff; border-color: transparent; }
.step-n svg { width: 18px; }
.step-t { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.step.active .step-t, .step.done .step-t { color: var(--ink); }
.step-line { flex: 1; height: 2px; background: var(--line); border-radius: 2px; position: relative; overflow: hidden; }
.step-line i { position: absolute; inset: 0; background: var(--grad-leaf); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow); }
.step-line.fill i { transform: scaleX(1); }
.co-panel { display: none; animation: fadeUp .5s var(--e-out); }
.co-panel.active { display: block; }
.panel-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-sm); }
.panel-box + .panel-box { margin-top: var(--s-3); }
.panel-box h2, .panel-box h3 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }

/* Checkout steps.
   `.co-hint` and `.is-waiting` were both referenced by the step components but
   never had any CSS, so a step you had not reached yet rendered as a plain
   white box the same weight as the active one — which read as broken rather
   than pending. A waiting step is now visibly muted and flat, and its hint
   line is styled like the secondary text it is. */
.co-hint { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.panel-box.is-waiting { background: var(--cream); box-shadow: none; }
.panel-box.is-waiting .co-head h3 { color: var(--muted); }
.panel-box.is-waiting .co-head { margin-bottom: 6px; }
.panel-box.is-waiting h2, .panel-box.is-waiting h3 { margin-bottom: 6px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.field label .req { color: var(--danger); }
.field input, .field select, .field textarea { padding: 13px var(--s-2); border: 1.5px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); outline: none; background: #fff; width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--leaf); box-shadow: 0 0 0 4px var(--leaf-50); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field .err { font-size: var(--fs-xs); color: var(--danger); display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.field.invalid .err { display: block; }
.pay-opts { display: grid; gap: 10px; }
.pay-opt { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-fast); }
.pay-opt:hover { border-color: var(--leaf); background: var(--leaf-50); }
.pay-opt input { display: none; }
.pay-opt .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; transition: all var(--t-fast); }
.pay-opt .dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); transform: scale(0); transition: transform var(--t-fast); }
.pay-opt input:checked ~ .dot { border-color: var(--leaf); }
.pay-opt input:checked ~ .dot::after { transform: scale(1); }
.pay-opt strong { font-size: var(--fs-sm); color: var(--ink); }
.pay-opt em { font-size: var(--fs-xs); color: var(--muted); display: block; font-style: normal; }
.co-done { text-align: center; padding: var(--s-8) var(--s-3); }
.co-done-ico { width: 96px; height: 96px; margin: 0 auto var(--s-3); border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: #fff; box-shadow: var(--sh-leaf); animation: popIn .6s var(--e-back); }
.co-done-ico svg { width: 44px; }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- 31. Account ---------- */
.acct-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-4); align-items: start; }
.acct-side { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-2); box-shadow: var(--sh-sm); position: sticky; top: 110px; }
.acct-user { display: flex; align-items: center; gap: 12px; padding: var(--s-2); margin-bottom: var(--s-1); }
.acct-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--leaf); color: #fff; font-weight: 700; }
.acct-user strong { display: block; font-size: var(--fs-sm); color: var(--ink); }
.acct-user span { font-size: var(--fs-xs); color: var(--muted); }
.acct-nav button { display: flex; align-items: center; gap: 12px; padding: 12px var(--s-2); width: 100%; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--body); transition: all var(--t-fast); text-align: left; }
.acct-nav button svg { width: 18px; height: 18px; color: var(--muted); transition: color var(--t-fast); flex: none; }
.acct-nav button:hover { background: var(--leaf-50); color: var(--leaf); }
.acct-nav button:hover svg { color: var(--leaf-700); }
.acct-nav button.active { background: var(--leaf); color: #fff; box-shadow: var(--sh-leaf); }
.acct-nav button.active svg { color: #fff; }
.acct-nav button .n { margin-left: auto; font-size: var(--fs-xs); }
.acct-panel { display: none; animation: fadeUp .5s var(--e-out); }
.acct-panel.active { display: block; }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.stat-card { padding: var(--s-3); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-xs); transition: all var(--t-med); }

.stat-card .si { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--leaf-50); color: var(--leaf); margin-bottom: var(--s-2); }
.stat-card .si svg { width: 19px; }
.stat-card b { font-size: 1.75rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; }
.stat-card span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: auto; box-shadow: var(--sh-sm); }
table.data { width: 100%; border-collapse: collapse; min-width: 620px; }
table.data th { text-align: left; padding: var(--s-2) var(--s-3); background: var(--canvas-2); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
table.data td { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
table.data tbody tr { transition: background var(--t-fast); }
table.data tbody tr:hover { background: var(--canvas); }
.tag { display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tag.ok { background: var(--leaf-50); color: var(--leaf-700); }
.tag.pend { background: #fdf4e3; color: var(--warn); }
.tag.ship { background: var(--leaf-50); color: var(--leaf-700); }
.tag.can { background: #fdecec; color: var(--danger); }

/* ---------- 32. Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-5); align-items: start; }
.info-card { display: flex; gap: var(--s-2); padding: var(--s-3); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-xs); transition: all var(--t-med); }

.info-icon { width: 48px; height: 48px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--leaf-50); color: var(--leaf); transition: all var(--t-med); }
.info-card:hover .info-icon { background: var(--leaf); color: #fff; }
.info-icon svg { width: 22px; height: 22px; }
.info-card h2, .info-card h3 { font-size: var(--fs-sm); }
.info-card a, .info-card p { display: block; font-size: var(--fs-sm); color: var(--muted); transition: color var(--t-fast); }
.info-card a:hover { color: var(--leaf); }
.map-frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); border: 1px solid var(--line); }
.map-frame iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }
.hours-card {
  background: var(--leaf); border-radius: 5px; padding: 0; overflow: hidden;
  color: rgba(255,255,255,.8);
}
.hours-card h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 20px var(--s-3); color: #fff;
  font-size: 1.25rem; font-weight: 600;
  background: rgba(0,0,0,.16);
}
.hours-card h2 svg { width: 20px; height: 20px; flex: none; }
.hours-card .hours-body { padding: var(--s-1) var(--s-3) var(--s-3); }
.hours-card h2 { color: #fff; margin-bottom: var(--s-2); }
.hours-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); padding: 14px 0; font-size: var(--fs-base);
}
.hours-row + .hours-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); padding: 14px 0; font-size: var(--fs-base);
}
.hours-card .hours-row span { color: rgba(255,255,255,.82); }
.hours-card .hours-row b { color: #fff; font-weight: 600; white-space: nowrap; }
.hours-row b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.hours-note {
  display: flex; align-items: center; gap: 10px; margin-top: var(--s-2);
  padding-top: var(--s-2); border-top: 1px solid rgba(255,255,255,.16);
  font-size: var(--fs-sm); color: rgba(255,255,255,.82);
}
.hours-note svg { width: 16px; flex: none; }
.hours-row.now b { color: var(--leaf-300); }

/* ---------- 33. Calculator ---------- */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.calc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-sm); transition: all var(--t-med); }

.calc-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.calc-icon { width: 52px; height: 52px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--leaf); color: #fff; }
.calc-icon svg { width: 24px; }
.calc-out { margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r-sm); background: var(--leaf-900); color: rgba(255,255,255,.72); text-align: center; }
.calc-out b { display: block; font-size: 2.5rem; font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1.1; }
.calc-out b .u { font-size: 1rem; color: var(--leaf-300); font-weight: 500; }
.calc-out span { font-size: var(--fs-xs); }

/* ---------- 34. Policy ---------- */
.policy-list { display: grid; gap: var(--s-2); }
.policy-item { display: flex; gap: var(--s-2); padding: var(--s-3); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-xs); transition: all var(--t-med); }
.policy-item:hover { border-color: var(--leaf); }
.policy-ico { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--leaf-50); color: var(--leaf-700); }
.policy-ico svg { width: 19px; }
.policy-item p { font-size: var(--fs-sm); color: var(--body); }
.policy-item b { color: var(--ink); }

/* ---------- 35. Notice ---------- */
.notice { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px var(--s-3); border-radius: var(--r-md); background: var(--leaf-50); border: 1px solid var(--leaf-200); font-size: var(--fs-sm); color: var(--leaf-700); font-weight: 500; text-align: center; }
.notice svg { width: 18px; flex: none; }
.notice b { color: var(--leaf-800); }

/* ---------- 36. FOOTER — mirrors natureplant .footer ----------
   LIGHT footer on a bg image · dark h6 20/600 · body #70717b
   · 4 columns (about / links / recent news / photo gallery)
   · bottom bar 30px, border-top rgba(0,0,0,.11), centred copyright */
/* Footer sits on the same pale green as the FAQ / curve panels; the photo is
   desaturated and multiplied into it so it tints green instead of reading as a
   separate warm image. */
.site-footer {
  position: relative; overflow: hidden; background: var(--curve-bg); color: var(--body);
  /* same inset + corners as the banners, with a matching gap at the page foot */
  margin: 0 clamp(14px, 2vw, 30px) clamp(14px, 2vw, 30px);
  border-radius: 30px;
}
.site-footer::before { content: none; }
.footer-bgimg {
  /* Identical to `web/assets/css/style.css` — same file, same opacity, same
     filter and blend. Kept in lockstep with the HTML build deliberately. */
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity:0.1; z-index: 0;
  filter: grayscale(.85) brightness(1.2) contrast(.9);
  mix-blend-mode: multiply;
}
.site-footer .wrap-wide { position: relative; z-index: 1; }
.footer-blob { display: none; }
.footer-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); padding-block: var(--s-14) 30px; }
.footer-logo { height:110px; width: auto; margin-bottom: var(--s-3); filter: none; }
.footer-about { font-size: var(--fs-base); line-height: 1.5; color: var(--body); }
.footer-social { display: flex; gap: 10px; margin-top: var(--s-3); }
.footer-social a {
  width: 35px; height: 35px; border-radius: 20px; display: grid; place-items: center;
  background: var(--ink); color: #fff; border: 0; transition: all var(--t-med);
}
.footer-social a svg { width: 15px; height: 15px; }
.footer-social a:hover { background: var(--leaf); color: #fff; }
.footer-col h3 {
  font-size: 1.25rem; font-weight: 600; color: var(--ink); text-transform: capitalize;
  letter-spacing: 0; margin-bottom: var(--s-3); position: relative; padding-bottom: 0;
}
.footer-col h3::after { content: none; }
.footer-links li + li { margin-top: 12px; }
.footer-links a { font-size: var(--fs-base); color: var(--ink); transition: all var(--t-fast); display: inline-flex; align-items: center; gap: 8px; }
.footer-links a::before { content: ''; width: 0; height: 1.5px; background: var(--leaf); transition: width var(--t-fast); }
.footer-links a:hover { color: var(--leaf); }
.footer-links a:hover::before { width: 12px; }
.footer-contact li { display: flex; gap: 12px; font-size: var(--fs-base); margin-bottom: 12px; color: var(--body); }
.footer-contact svg { width: 16px; height: 16px; color: var(--leaf); flex: none; margin-top: 4px; }
.footer-contact a { color: var(--ink); }
.footer-contact a:hover { color: var(--leaf); }
/* The icon column. `.footer-contact svg` above already sizes and colours the
   glyph — this just keeps the wrapper from stretching in the flex row. */
.fc-ico { display: flex; flex: none; }
.fc-label { color: var(--muted); }

/* Business-hours column (replaced the Recent News column) */
.footer-hours-note {
  display: flex; gap: 10px; margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid rgba(0,0,0,.11);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--body);
}
.footer-hours-note svg { width: 18px; height: 18px; flex: none; color: var(--leaf); margin-top: 2px; }

/* Photo gallery column */
.footer-photo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.footer-photo a { position: relative; aspect-ratio: 1/1; border-radius: 4px; overflow: hidden; isolation: isolate; }
.footer-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); filter: brightness(1.07) saturate(1.14); }
.footer-photo a::after { content: ''; position: absolute; inset: 0; background: var(--leaf); opacity: 0; transition: opacity var(--t-med); }

.footer-photo a:hover::after { opacity: .55; }

/* heads its own column now, so no top rule/offset */
.footer-hours { margin-top: 0; padding-top: 0; border-top: 0; }
.footer-hours .hours-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); padding: 6px 0; font-size: var(--fs-base);
}
.footer-hours .hours-row b { color: var(--ink); }
.footer-bottom {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  flex-wrap: wrap; padding-block: 30px; text-align: center;
  border-top: 1px solid rgba(0,0,0,.11); font-size: var(--fs-base); color: var(--body);
}
.footer-bottom a { color: var(--ink); }
.footer-bottom a:hover { color: var(--leaf); }
.pay-icons { display: flex; gap: 8px; align-items: center; }
.pay-icons span {
  display: grid; place-items: center; width: 42px; height: 27px; border-radius: 4px;
  background: rgba(30,30,30,.06); border: 1px solid rgba(0,0,0,.08);
  font-size: 9px; font-weight: 700; color: var(--body); transition: all var(--t-fast);
}
.pay-icons span:hover { background: var(--leaf); color: #fff; border-color: var(--leaf); }

/* ---------- 37. Floating UI ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--leaf); color: #fff; box-shadow: var(--sh-leaf);
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity var(--t-med), visibility var(--t-med), transform var(--t-med), background var(--t-med);
}
.to-top .ico { display: grid; place-items: center; position: relative; z-index: 2; }
.to-top .ico svg { width: 20px; height: 20px; stroke: currentColor; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }

.to-top .ring { position: absolute; top: -4px; left: -4px; width: 60px; height: 60px; transform: rotate(-90deg); z-index: 1; pointer-events: none; }
.to-top .ring circle { fill: none; stroke-width: 2.5; }
.to-top .ring .bg { stroke: rgba(255,255,255,.16); }
.to-top .ring .fg { stroke: var(--leaf); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.toast-wrap { position: fixed; right: 24px; bottom: 92px; z-index: 240; display: grid; gap: 10px; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px var(--s-2); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--leaf); border-radius: var(--r-md); box-shadow: var(--sh-lg); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); animation: toastIn .45s var(--e-back); min-width: 260px; }
.toast.out { animation: toastOut .35s var(--e-soft) forwards; }
.toast svg { width: 20px; color: var(--leaf-700); flex: none; }
@keyframes toastIn { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(50px); } }

/* ---------- 38. Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: var(--canvas); transition: opacity .6s var(--e-out), visibility .6s; }
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { display: grid; place-items: center; gap: var(--s-3); }
.loader img { height: 62px; animation: pulse 1.6s var(--e-soft) infinite; }
@keyframes pulse { 0%,100% { opacity: .45; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
.loader-bar { width: 200px; height: 3px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 40%; border-radius: var(--r-pill); background: var(--grad-leaf); animation: loadRun 1.1s var(--e-soft) infinite; }
@keyframes loadRun { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ---------- 39. Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(38px); transition: opacity .85s var(--e-out), transform .85s var(--e-out); will-change: opacity, transform; }
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="zoom"]  { transform: scale(.9); }
[data-reveal="mask"]  { clip-path: inset(0 100% 0 0); opacity: 1; transform: none; transition: clip-path 1.1s var(--e-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="mask"].in { clip-path: inset(0 0 0 0); }
.parallax { will-change: transform; }

/* ---------- 40. Responsive ---------- */
@media (max-width: 1200px) {
  .cat-grid.feature { grid-template-columns: repeat(2, 1fr); }
  .cat-grid.feature > :nth-child(1) { grid-column: span 2; grid-row: auto; }
  
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid, .counter-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-strip { grid-template-columns: repeat(2, 1fr); }
  .feat-item:nth-child(2) { border-right: 0; }
  .feat-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 1024px) {
  :root { --nav-h: 76px; }
  .nav-menu { display: none; }
  .burger { display: grid; }
  .shop-layout, .cart-layout, .acct-layout, .contact-grid, .pdp { grid-template-columns: 1fr; }
  .filters, .summary, .acct-side, .pdp-gallery { position: static; }
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .split.reverse .split-media { order: 0; }
  .why-split { grid-template-columns: 1fr; gap: var(--s-6); }
  .why-content .sec-head { text-align: center; }
  .why-media .split-img-main { height: auto; aspect-ratio: 16/10; }
  .promo-grid { grid-template-columns: 1fr; }

  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .qv-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .prod-grid.list-view .prod-media { width: 200px; }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; --s-14: 80px; --s-20: 96px; }
  .topbar-info > *:not(.tb-phone) { display: none !important; }
  .section { padding-block: var(--s-10); }
  .why-grid, .counter-grid, .calc-grid, .form-grid { grid-template-columns: 1fr; }
  .tick-list { grid-template-columns: 1fr; }
  .cat-grid.feature { grid-template-columns: 1fr; }
  .cat-grid.feature > :nth-child(n) { grid-column: auto; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  .prod-grid.list-view .prod-card { flex-direction: column; }
  .prod-grid.list-view .prod-media { width: 100%; aspect-ratio: 4/3; }
  .cart-row { grid-template-columns: 72px 1fr; gap: 12px; position: relative; padding-right: var(--s-6); }
  .cart-row img { width: 72px; height: 72px; }
  .cart-row .cr-price { display: none; }
  .cart-row .qty { grid-column: 2; justify-self: start; }
  .cart-row .cr-total { grid-column: 2; text-align: left; }
  .cart-row .cr-del { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
  .cta-band { padding: var(--s-8) var(--s-3); border-radius: var(--r-xl); }
  .news-band { padding: var(--s-5) var(--s-3); border-radius: var(--r-xl); }
  .news-form { flex-direction: column; border-radius: var(--r-lg); padding: 10px; }
  .news-form input { padding: 12px var(--s-2); }
  .promo { padding: var(--s-4); min-height: 280px; }
  .promo-tag { position: absolute; top: var(--s-3); right: var(--s-3); width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--leaf); color: #fff; box-shadow: var(--sh-leaf); animation: float 5s var(--e-soft) infinite alternate; }
  .footer-top { grid-template-columns: 1fr; padding-block: var(--s-8) var(--s-5); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .steps { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .step-line { display: none; }
  .stat-inline { flex-wrap: wrap; gap: var(--s-3); }
  .feat-strip { grid-template-columns: 1fr; }
  .feat-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .split-img-float { right: 0; bottom: -20px; width: 40%; }

  .to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--leaf); color: #fff; box-shadow: var(--sh-leaf);
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity var(--t-med), visibility var(--t-med), transform var(--t-med), background var(--t-med);
}
  .toast-wrap { right: 16px; left: 16px; bottom: 80px; }
  .faq-a-inner { padding-left: var(--s-3); }
  .stat-cards { grid-template-columns: 1fr; }
  .sec-head { margin-bottom: var(--s-5); }
}
@media (max-width: 480px) {
  .prod-grid { grid-template-columns: 1fr; }

  .pdp-actions { flex-direction: column; align-items: stretch; }
  .pdp-actions .qty { width: 100%; justify-content: center; }
}

/* ---------- 41. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero-slide .eyebrow, .hero-slide .hero-title, .hero-slide .hero-copy,
  .hero-slide .hero-cta, .hero-slide .hero-meta { opacity: 1; transform: none; }
}

/* ---------- 42. Print ---------- */
@media print {
  .site-header, .site-footer, .topbar, .to-top, .toast-wrap, .hero-nav, .scroll-cue { display: none !important; }
  body { background: #fff; }
}


/* ==========================================================================
   43. Responsive for the natureplant-matched header, banner & feedback
   ========================================================================== */
@media (max-width: 1200px) {
  .feedback-right { padding: 96px max(24px, calc((100vw - var(--wrap)) / 2)) 96px 48px; }
  .nav-link { padding: 15px 18px; }
}

@media (max-width: 1024px) {
  /* Header: burger takes over, CTA moves into the drawer */
  .nav-menu { display: none; }
  .burger { display: grid; }
  .nav-cta { display: none; }
  .nav { gap: var(--s-2); padding-inline: 16px; }
  .topbar-info > *:nth-child(n+3) { display: none; }



  /* Feedback stacks; the image is no longer full-bleed */
  .feedback-grid { grid-template-columns: 1fr; }
  .plybtn { min-height: 320px; }
  .feedback-right { padding: var(--s-8) var(--gutter); }

  /* Shapes: keep only the two corner accents, scaled down */
  .hs-4, .hs-5, .hs-6 { display: none; }
  .hs-1 { width: 70px; height: 120px; opacity: .5; }
  .hs-2 { width: 58px; height: 68px; opacity: .5; }
  .hs-3 { width: 78px; height: 104px; opacity: .45; }

  .page-hero { padding-top: 64px; padding-bottom: 64px; border-radius: 20px; }
  .page-hero h1 { font-size: 2rem; }
  .site-footer { border-radius: 20px; }

  .about2 { grid-template-columns: 1fr; gap: 40px; }
  .about2-media { max-width: 560px; margin-bottom: 40px; }
  .about2-img { aspect-ratio: 16 / 11; border-radius: 22px 22px 22px 60px; }
  .about2-card { position: static; width: 100%; left: auto; bottom: auto; max-width: none; margin-top: -60px; margin-inline: auto; }
}

@media (max-width: 768px) {
  .topbar-info > * { padding-inline: 14px; }
  .topbar-social { padding-inline: 14px; gap: 4px; }
  .topbar-social a { width: 30px; height: 30px; }

  .feedback__inner { padding: var(--s-3); }
  .fb-top { flex-wrap: wrap; gap: var(--s-2); }
  .fb-star { margin-left: 0; width: 100%; }
  .proj-item { flex: 0 0 300px; height: 440px; }
  .prefooter-grid { grid-template-columns: 1fr; }
  .prefooter-media { min-height: 220px; }
  .footer-top { grid-template-columns: 1fr; padding-block: var(--s-8) var(--s-5); }
  .page-hero { padding-top: 48px; padding-bottom: 48px; }
}

@media (max-width: 480px) {
  .proj-item { flex: 0 0 260px; height: 380px; }
  .about2-img2 { right: 0; }
}


/* ==========================================================================
   44. Delivery in Surrounding Areas (replaces the counters block)
   ========================================================================== */
.delivery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.delivery-card {
  padding: var(--s-4) var(--s-3); border-radius: 5px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  transition: background var(--t-med), border-color var(--t-med);
}
.delivery-card:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }
.delivery-icon {
  width: 56px; height: 56px; border-radius: 5px; display: grid; place-items: center;
  background: #fff; color: var(--leaf); margin-bottom: var(--s-3);
}
.delivery-icon svg { width: 26px; height: 26px; }
.delivery-card h3 { font-size: 1.25rem; font-weight: 600; color: #fff; line-height: 1.3; }
.delivery-card p { margin-top: 10px; font-size: var(--fs-base); line-height: 1.5; color: rgba(255,255,255,.72); }

/* ====== Delivery section — modern split: crisp photo panel + content ======
   Light band · image on the left · elevated white cards + CTA on the right    */
.delivery-sec {
  background:
    radial-gradient(900px 400px at 80% -6%, rgba(115,182,17,.10), transparent 70%),
    var(--cream);
}
.delivery-sec .wrap {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  grid-template-rows: auto auto auto;
  column-gap: var(--s-8);
  align-items: stretch;
}
/* photo panel (left) */
.delivery-media {
  grid-column: 1; grid-row: 1 / 4;
  min-height: 480px;
  border-radius: 24px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20,30,12,0) 45%, rgba(20,30,12,.45) 100%),
    url("../media/sites/default/files/2024-11/big%20loader.jpg") 50% 42% / cover no-repeat;
  box-shadow: 0 24px 54px rgba(20,30,12,.16);
}
/* content column (right) */
.delivery-sec .sec-head { grid-column: 2; grid-row: 1; text-align: left; margin: 0; max-width: none; }
.delivery-sec .sec-head .eyebrow { margin-inline: 0; }
.delivery-sec .sec-head p { color: var(--body); margin-inline: 0; max-width: 46ch; }
.delivery-sec .delivery-grid {
  grid-column: 2; grid-row: 2;
  grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-5);
}
.delivery-sec .text-center { grid-column: 2; grid-row: 3; text-align: left; margin-top: var(--s-5); }

/* cards */
.delivery-sec .delivery-card {
  padding: var(--s-4) var(--s-3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20,30,12,.04), 0 12px 30px rgba(20,30,12,.06);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.delivery-sec .delivery-card:hover {
  transform: translateY(-6px);
  border-color: var(--leaf-200);
  box-shadow: 0 20px 44px rgba(20,30,12,.12);
}
.delivery-sec .delivery-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, var(--leaf) 0%, var(--leaf-700) 100%);
  color: #fff; box-shadow: 0 8px 18px rgba(115,182,17,.30); margin-bottom: var(--s-2);
}
.delivery-sec .delivery-card:hover .delivery-icon { box-shadow: 0 10px 22px rgba(115,182,17,.42); }
.delivery-sec .delivery-card h3 { color: var(--ink); font-size: 1.125rem; }
.delivery-sec .delivery-card p { color: var(--body); }

/* responsive: stack photo on top */
@media (max-width: 900px) {
  .delivery-sec .wrap { grid-template-columns: 1fr; }
  .delivery-media { grid-row: auto; min-height: 240px; margin-bottom: var(--s-5); }
  .delivery-sec .sec-head, .delivery-sec .delivery-grid, .delivery-sec .text-center { grid-column: 1; grid-row: auto; }
  .delivery-sec .sec-head, .delivery-sec .text-center { text-align: center; }
  .delivery-sec .sec-head p { max-width: none; margin-inline: auto; }
}
@media (max-width: 560px) {
  .delivery-sec .delivery-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   45. Section rhythm — alternate full-bleed bands with contained ones
   ========================================================================== */
.section--band { background: var(--cream); }
.section--plain { background: #fff; }
.section--contained { background: var(--cream); padding-block: var(--s-14); }
.section--contained > .wrap { background: transparent; border-radius: 0; padding: 0; }
@media (max-width: 768px) {
  .delivery-grid { grid-template-columns: 1fr; }

}


/* ==========================================================================
   46. Responsive — LawnShaper banner (photo fills the card, panel overlays it)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-content { max-width: none; }
  .hero-gallery { max-width: 520px; margin-inline: auto; width: 100%; height: 420px; }
  .hero .hero-title { font-size: clamp(2rem, 6vw, 2.9rem); }
}
@media (max-width: 768px) {
  .hero { padding-top: var(--s-3); }
  .hero-card { border-radius: 20px; }
  .hero-inner { padding: var(--s-5); }
  .hero-cta { gap: 10px; }
  .nav { height: 72px; }
  .logo img { height: 48px; }
  .nav-cta { display: none; }   /* main CTA lives in the mobile drawer */
  .topbar .wrap { justify-content: center; gap: 8px 16px; padding-block: 8px; }
  .tb-left, .tb-right { gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
  .tb-quote { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-gallery figure:nth-child(2), .hero-gallery figure:nth-child(4) { margin-top: 0; }
  .topbar .tb-right a[href^="mailto"] { display: none; }
}