*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --paper:      #f4efe1;
      --paper-deep: #ebe1cb;
      --ink:        #1c1811;
      --ink-soft:   #55503f;
      --moss-dark:  #1e3229;
      --moss:       #3d5f43;
      --moss-mid:   #6a8570;
      --sage:       #a9bcac;
      --clay:       #b0592c;
      --clay-dark:  #8a4320;
      --line:       rgba(28,24,17,.16);
      --line-soft:  rgba(28,24,17,.09);
      --shadow:     0 10px 30px rgba(20,18,10,.14);
      --wa:         #25d366;
      --wa-dark:    #1fb457;
      --terracotta-deep: #3a1d12;
      --terracotta-line: rgba(244,239,225,.2);
      --radius-tag: 14px;
      --font-brand: 'Bricolage Grotesque', sans-serif;
    }

    /* Smooth in-page scrolling is handled by the eased JS animation in animations.js;
       native `scroll-behavior: smooth` here would fight it frame-by-frame. */
    body {
      font-family: 'Work Sans', sans-serif; color: var(--ink); background: var(--paper);
      overflow-x: hidden; font-size: 16px; line-height: 1.6;
    }

    /* ── SCROLLBAR — the plant-tag palette in the chrome itself, flat like every other edge in the system ── */
    html { scrollbar-width: thin; scrollbar-color: var(--clay) var(--paper-deep); }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--paper-deep); }
    ::-webkit-scrollbar-thumb { background: var(--clay); border: 2px solid var(--paper-deep); }
    ::-webkit-scrollbar-thumb:hover { background: var(--clay-dark); }
    ::-webkit-scrollbar-corner { background: var(--paper-deep); }
    h1, h2, h3, h4 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; }
    a { color: inherit; }

    /* icon sprite <use> refs — replaces Font Awesome's font-glyph sizing box */
    .fas, .fab { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; }

    /* WhatsApp call-to-action: quiet ring pulse + periodic icon nudge, not constant jitter */
    @keyframes waRing {
      0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
      50%      { box-shadow: 0 0 0 9px rgba(37,211,102,0); }
    }
    @keyframes waNudge {
      0%, 80%, 100% { transform: rotate(0deg); }
      84% { transform: rotate(-14deg); }
      88% { transform: rotate(11deg); }
      92% { transform: rotate(-7deg); }
      96% { transform: rotate(0deg); }
    }
    .wa-live { animation: waRing 2.6s ease-out infinite; }
    .wa-live .fa-whatsapp { display: inline-block; animation: waNudge 4.8s ease-in-out infinite; transform-origin: 60% 60%; }

    /* ── NAVBAR ─────────────────────────────────────────────────── */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      height: 76px; padding: 0 2rem;
      display: flex; align-items: center; justify-content: space-between;
      background: var(--moss-dark);
      border-bottom: 1px solid rgba(255,255,255,.06);
      transition: box-shadow .3s;
    }
    .navbar.scrolled { box-shadow: 0 8px 28px rgba(0,0,0,.28); }

    .navbar-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
    .mower-logo { width: 68px; height: 44px; display: block; }
    .mower-logo.footer-logo { width: 40px; height: 26px; }
    .wheel-l { transform-origin: 30px 44px; animation: wspin .7s linear infinite; }
    .wheel-r { transform-origin: 52px 44px; animation: wspin .7s linear infinite; }
    @keyframes wspin { to { transform: rotate(360deg); } }
    .clip1 { animation: clipFly 1.1s ease-out infinite; }
    .clip2 { animation: clipFly 1.1s ease-out .35s infinite; }
    .clip3 { animation: clipFly 1.1s ease-out .7s infinite; }
    @keyframes clipFly {
      0%   { opacity: 1; transform: translate(0,0) rotate(0deg); }
      100% { opacity: 0; transform: translate(-12px,-14px) rotate(-40deg); }
    }

    .brand-text { color: var(--paper); }
    .brand-text .b-main { display: block; font-family: var(--font-brand); font-size: 1.28rem; font-weight: 400; letter-spacing: .01em; line-height: 1.15; }
    .brand-text .b-sub  { display: block; font-size: .62rem; font-weight: 500; color: var(--sage); letter-spacing: 1.4px; text-transform: uppercase; }

    .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
    .nav-links a {
      color: rgba(244,239,225,.78); text-decoration: none; font-size: .9rem; font-weight: 500;
      position: relative; transition: color .25s;
    }
    .nav-links a::after {
      content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px;
      background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform .25s;
    }
    .nav-links a:hover { color: var(--paper); }
    .nav-links a:hover::after { transform: scaleX(1); }

    .nav-cta {
      background: var(--wa) !important; color: var(--paper) !important;
      padding: 10px 22px; font-weight: 500 !important; font-size: .85rem !important;
      transition: background .25s, transform .25s !important; text-decoration: none;
    }
    .nav-cta::after { display: none !important; }
    .nav-cta:hover { background: var(--wa-dark) !important; transform: translateY(-2px); }

    .lang-toggle {
      display: flex; align-items: center; gap: 6px;
      background: transparent; border: 1px solid rgba(244,239,225,.28);
      color: rgba(244,239,225,.8); padding: 6px 14px;
      font-size: .78rem; font-weight: 600; cursor: pointer;
      transition: all .25s; font-family: 'Work Sans', sans-serif; letter-spacing: .3px;
    }
    .lang-toggle:hover { border-color: var(--paper); color: var(--paper); }

    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 5px; }
    .hamburger span { display: block; width: 24px; height: 2px; background: var(--paper); transition: all .3s; }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-nav {
      display: none; position: fixed; top: 76px; left: 0; right: 0; z-index: 999;
      background: var(--moss-dark); padding: 1.2rem 2rem 2rem;
      border-top: 1px solid rgba(255,255,255,.08);
      transform: translateY(-110%); opacity: 0; transition: all .35s cubic-bezier(.4,0,.2,1);
    }
    .mobile-nav.open { transform: translateY(0); opacity: 1; }
    .mobile-nav ul { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
    .mobile-nav a {
      display: block; padding: .6rem 0; color: rgba(244,239,225,.85); text-decoration: none;
      font-size: .95rem; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.08); transition: color .2s;
    }
    .mobile-nav a:hover { color: var(--sage); }
    .lang-toggle-mobile {
      background: transparent; border: 1px solid rgba(244,239,225,.28);
      color: rgba(244,239,225,.8); padding: 7px 16px;
      font-size: .82rem; font-weight: 600; cursor: pointer; font-family: 'Work Sans', sans-serif;
      transition: all .25s; display: inline-flex; align-items: center; gap: 6px;
    }
    .lang-toggle-mobile:hover { border-color: var(--paper); color: var(--paper); }

    /* ── HERO ────────────────────────────────────────────────────── */
    .hero {
      min-height: 100vh; position: relative;
      display: flex; align-items: center;
      background: var(--moss-dark); overflow: hidden; padding-top: 76px;
    }
    .hero::before {
      content: ''; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; pointer-events: none;
      background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');
    }
    .hero-glow {
      position: absolute; top: -20%; right: -10%; width: 55%; aspect-ratio: 1;
      background: radial-gradient(circle, rgba(169,188,172,.14) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

    .hero-grid {
      position: relative; z-index: 5; max-width: 1180px; margin: 0 auto; width: 100%;
      padding: 3rem 2rem 6rem; display: grid; grid-template-columns: 1.5fr .8fr; gap: 3rem; align-items: end;
    }

    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      border: 1px solid rgba(176,89,44,.5); background: rgba(176,89,44,.12);
      color: #d78a5c; padding: 6px 18px;
      font-size: .76rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
      margin-bottom: 1.8rem; animation: fadeDown .8s ease both;
    }

    .hero h1 {
      font-family: var(--font-brand); font-size: clamp(2.4rem,6vw,5.1rem); font-weight: 400; color: var(--paper); line-height: 1.2;
      letter-spacing: 0; margin-bottom: 1.6rem; max-width: 15ch;
      animation: fadeDown .8s .15s ease both;
    }
    /* underline is a solid bar cut with the same asymmetric corner as the buttons
       (--radius-tag), not native text-decoration — lets it carry the cut shape and glow */
    .hero h1 em {
      font-style: normal; font-weight: 400; color: var(--clay);
      background-image: linear-gradient(var(--clay), var(--clay));
      background-repeat: no-repeat;
      background-position: 0 100%;
      background-size: 0% 4px;
      border-radius: 0 var(--radius-tag) 0 var(--radius-tag);
      padding-bottom: 4px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      animation: emReveal .7s 1.05s cubic-bezier(.16,1,.3,1) forwards,
                 emGlow 2.6s ease-in-out 1.85s infinite;
    }
    /* one-shot stamped-ledger reveal: the bar lays itself down after the headline lands */
    @keyframes emReveal { to { background-size: 100% 4px; } }
    /* constant soft glow, like ink that never quite dries — kept tight so it can't bleed into the tightly-set line below */
    @keyframes emGlow {
      0%, 100% { filter: drop-shadow(0 0 2px rgba(176,89,44,.4)); }
      50%      { filter: drop-shadow(0 0 5px rgba(176,89,44,.65)); }
    }

    .hero p {
      font-size: 1.05rem; color: rgba(244,239,225,.72); line-height: 1.75; margin-bottom: 2.4rem; max-width: 46ch;
      animation: fadeDown .8s .3s ease both;
    }

    .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeDown .8s .45s ease both; }

    /* Signature button shape: two corners rounded (top-right, bottom-left), two left
       square — a single deliberate cut instead of a uniform pill on every element. */
    .btn-p, .btn-s, .c-submit, .reviews-cta a, .nav-cta, .wa-cta {
      border-radius: 0 var(--radius-tag) 0 var(--radius-tag);
    }

    .btn-p, .btn-s, .c-submit, .reviews-cta a {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 15px 30px; font-size: .92rem; font-weight: 500; text-decoration: none;
      transition: all .25s; border: none; cursor: pointer; font-family: 'Work Sans', sans-serif;
    }
    .btn-p { background: var(--wa); color: var(--paper); }
    .btn-p:hover { background: var(--wa-dark); transform: translateY(-2px); }
    .btn-s { background: transparent; color: var(--paper); border: 1px solid rgba(244,239,225,.35); }
    .btn-s:hover { border-color: var(--paper); background: rgba(244,239,225,.06); transform: translateY(-2px); }

    /* Side panel: asymmetric counterweight to the headline */
    .hero-panel {
      border: 1px solid rgba(244,239,225,.18); background: rgba(244,239,225,.04);
      padding: 2rem 1.8rem; animation: fadeDown .8s .55s ease both;
    }
    .hero-panel-num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 3.4rem; font-weight: 700; color: var(--sage); line-height: 1; }
    .hero-panel-lbl { font-size: .78rem; color: rgba(244,239,225,.6); margin-top: .4rem; line-height: 1.5; }
    .hero-panel hr { border: none; border-top: 1px solid rgba(244,239,225,.14); margin: 1.3rem 0; }

    .scroll-cue {
      position: absolute; bottom: 34px; left: 2rem; z-index: 5;
      display: flex; align-items: center; gap: 10px;
      color: rgba(244,239,225,.5); font-size: .72rem; letter-spacing: 1.6px; text-transform: uppercase;
      animation: fadeIn 1s 1s ease both;
    }
    .scroll-cue svg { animation: dotBounce 1.6s ease infinite; }
    @keyframes dotBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

    /* Grass-edge divider — echoes the mower logo motif instead of a generic wave */
    .grass-edge { position: absolute; bottom: 0; left: 0; right: 0; height: 30px; z-index: 4; display: flex; align-items: flex-end; overflow: hidden; }
    .grass-edge i {
      width: 1.4%; background: var(--paper); margin-right: .15%;
      transform: rotate(var(--bend, 0deg)); transform-origin: bottom center;
      transition: transform .5s cubic-bezier(.25,1,.5,1);
    }

    /* ── STATS ───────────────────────────────────────────────────── */
    .stats-bar { position: relative; z-index: 6; }
    .stats-inner {
      max-width: 1000px; margin: -54px auto 0; background: var(--paper);
      border: 1px solid var(--line); box-shadow: var(--shadow);
      display: grid; grid-template-columns: repeat(3,1fr);
    }
    .stat-cell { padding: 2rem 2rem; border-left: 1px solid var(--line); }
    .stat-cell:first-child { border-left: none; }
    .stat-n { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.6rem; font-weight: 700; color: var(--moss); line-height: 1; }
    .stat-l { font-size: .8rem; color: var(--ink-soft); margin-top: 6px; font-weight: 500; }

    /* ── SHARED SECTION STYLES ───────────────────────────────────── */
    section { padding: 6.5rem 2rem; }
    .container { max-width: 1180px; margin: 0 auto; }
    .bg-deep { background: var(--paper-deep); }
    .bg-moss { background: var(--moss-dark); color: var(--paper); }
    .bg-terracotta { background: var(--terracotta-deep); color: var(--paper); position: relative; overflow: hidden; }
    .bg-terracotta::before {
      content: ''; position: absolute; inset: 0; opacity: .1; mix-blend-mode: overlay; pointer-events: none; z-index: 0;
      background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');
    }
    #contact .container { position: relative; z-index: 1; }

    /* Services: a garden-planning blueprint, faintly traced in the background */
    .bg-blueprint { position: relative; overflow: hidden; }
    .blueprint-lines {
      position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
    }
    .blueprint-lines path {
      fill: none; stroke: var(--moss); stroke-width: 1.4; opacity: .08;
      stroke-dasharray: 14 10; animation: blueprintDraw 34s linear infinite;
    }
    .blueprint-lines path:nth-child(2) { animation-duration: 41s; animation-direction: reverse; opacity: .06; }
    .blueprint-lines path:nth-child(3) { animation-duration: 27s; opacity: .07; }
    @keyframes blueprintDraw { to { stroke-dashoffset: -480; } }
    #services .container { position: relative; z-index: 1; }

    /* Reviews: a corkboard of pinned notes — grain texture + a drifting leaf or two */
    .bg-cork { position: relative; overflow: hidden; }
    .bg-cork::before {
      content: ''; position: absolute; inset: 0; opacity: .05; mix-blend-mode: multiply; pointer-events: none; z-index: 0;
      background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');
    }
    #reviews .container { position: relative; z-index: 1; }
    .leaf-drift { position: absolute; width: 34px; height: 34px; opacity: .18; pointer-events: none; z-index: 0; }
    .leaf-drift--a { top: 12%; left: 6%; animation: leafDrift1 22s ease-in-out infinite; }
    .leaf-drift--b { bottom: 10%; right: 8%; width: 26px; height: 26px; animation: leafDrift2 27s ease-in-out infinite; }
    @keyframes leafDrift1 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(18px,-14px) rotate(18deg); } }
    @keyframes leafDrift2 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-16px,12px) rotate(-14deg); } }

    /* ── ARTIFACT TAGS ── each section borrows a different physical object, not a repeated eyebrow ── */
    .sec-tag {
      display: inline-block; font-family: 'Courier Prime', monospace; font-weight: 700;
      font-size: .74rem; letter-spacing: .04em; margin-bottom: 1.1rem; line-height: 1.3;
    }

    /* Services: a die-cut catalogue tab, solid fill, torn top-right corner */
    .tag--services {
      background: var(--moss); color: var(--paper); padding: 7px 16px 7px 13px;
      clip-path: polygon(0 0, 100% 0, 100% 65%, calc(100% - 10px) 100%, 0 100%);
      transform: rotate(-1deg); text-transform: uppercase;
    }

    /* Why-Us: a rubber-stamp, dashed ring, ink-tilted */
    .tag--why {
      color: var(--moss); border: 2px dashed var(--moss-mid); border-radius: 50%;
      width: 108px; height: 108px; display: flex; align-items: center; justify-content: center;
      text-align: center; transform: rotate(-8deg); font-size: .68rem; text-transform: uppercase;
      padding: 0 .6rem;
    }

    /* Process: a torn ticket stub, perforated edge */
    .tag--process {
      color: var(--sage); background: rgba(244,239,225,.06);
      border: 1px solid rgba(244,239,225,.22); border-left: none;
      padding: 6px 16px 6px 12px; position: relative; text-transform: uppercase;
    }
    .tag--process::before {
      content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
      background-image: repeating-linear-gradient(rgba(244,239,225,.4) 0 4px, transparent 4px 9px);
    }

    /* Reviews: redundant with the Google score badge — kept for i18n/a11y, visually hidden */
    .tag--reviews {
      position: absolute; width: 1px; height: 1px; overflow: hidden; margin: 0;
      clip: rect(0,0,0,0); white-space: nowrap;
    }

    /* Contact: a mailing label, dashed border, stamped angle */
    .tag--contact {
      color: var(--paper); border: 1px dashed var(--terracotta-line);
      padding: 6px 14px; transform: rotate(2deg); text-transform: uppercase;
    }

    .sec-title { font-size: clamp(1.9rem,4vw,3rem); font-weight: 600; line-height: 1.15; margin-bottom: 1rem; text-wrap: balance; }
    .bg-moss .sec-title, .bg-terracotta .sec-title { color: var(--paper); }
    .sec-desc  { color: var(--ink-soft); font-size: .98rem; line-height: 1.75; max-width: 560px; text-wrap: pretty; }
    .bg-moss .sec-desc, .bg-terracotta .sec-desc { color: rgba(244,239,225,.68); }

    /* ── SERVICES — editorial index, not a card grid ────────────── */
    .services-head { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: end; margin-bottom: 3rem; }

    .srow {
      display: grid; grid-template-columns: 90px 1fr; gap: 2rem;
      padding: 2.2rem 0; border-top: 1px solid var(--line);
    }
    .services-list .srow:last-child { border-bottom: 1px solid var(--line); }
    .srow-idx { font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 1rem; color: var(--sage); padding-top: .2rem; }
    .srow-body { display: grid; grid-template-columns: 56px 1fr; gap: 1.4rem; }
    .srow-ic {
      width: 52px; height: 52px; border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.15rem; color: var(--moss); flex-shrink: 0;
    }
    .srow h3 { font-size: 1.2rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
    .srow p  { font-size: .92rem; color: var(--ink-soft); line-height: 1.7; max-width: 62ch; }
    .srow-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .9rem; }
    .srow-tags span { font-size: .72rem; font-weight: 600; color: var(--moss); border: 1px solid var(--line); padding: 3px 11px; }

    /* Odd rows nudge right — deliberate asymmetry, not a uniform stack */
    .srow:nth-child(even) .srow-body { margin-left: 2.4rem; }

    /* ── WHY US ──────────────────────────────────────────────────── */
    .why-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4.5rem; align-items: center; }

    .why-panel {
      background: var(--moss-dark); color: var(--paper); padding: 3rem 2.2rem;
      position: relative; overflow: hidden;
    }
    .why-panel::before {
      content: ''; position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; pointer-events: none;
      background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');
    }
    .why-panel-n { font-family: 'Bricolage Grotesque', sans-serif; font-size: 5rem; font-weight: 700; color: var(--sage); line-height: 1; position: relative; }
    .why-panel-l { font-size: .92rem; color: rgba(244,239,225,.7); margin-top: .8rem; line-height: 1.6; max-width: 26ch; position: relative; }

    /* Why-Us panel: looking into the shed at dusk — a grass silhouette sways along the base */
    .why-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: flex-end; overflow: hidden; opacity: .55; }
    .why-grass i { width: 2%; background: var(--sage); margin-right: .2%; transform-origin: bottom center; animation: whySway 3.6s ease-in-out infinite; }
    @keyframes whySway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }

    .feat-list { list-style: none; display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.2rem; }
    .feat-item { display: flex; gap: 1.2rem; align-items: flex-start; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
    .feat-item:last-child { border-bottom: none; padding-bottom: 0; }
    .feat-ic {
      width: 42px; height: 42px; min-width: 42px; border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--moss);
    }
    .feat-txt h4 { font-size: .96rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
    .feat-txt p  { font-size: .86rem; color: var(--ink-soft); line-height: 1.6; }

    /* ── PROCESS — a stepped path, not a repeated card grid ───────── */
    .proc-list { max-width: 720px; position: relative; }
    .proc-list::before { content: ''; position: absolute; left: 27px; top: 14px; bottom: 14px; width: 1px; background: rgba(244,239,225,.16); }
    /* the taut string, pulled from stake to stake as the row is scrolled into view */
    .proc-list::after {
      content: ''; position: absolute; left: 26.5px; top: 14px; bottom: 14px; width: 2px; background: var(--clay);
      transform-origin: top; transform: scaleY(0); transition: transform 1.7s cubic-bezier(.16,1,.3,1);
    }
    .proc-list.strung::after { transform: scaleY(1); }
    .proc-row { display: grid; grid-template-columns: 56px 1fr; gap: 1.6rem; padding-bottom: 2.6rem; position: relative; }
    .proc-row:last-child { padding-bottom: 0; }
    .proc-num {
      width: 56px; height: 56px; border-radius: 50%; background: var(--clay); color: var(--paper);
      font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.35rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
      backface-visibility: hidden;
    }
    /* Number stakes never fade — opacity dipping mid-reveal would let the string (.proc-list::after)
       bleed through the circle and blur the digit. Scale-in only, always fully opaque. */
    .proc-num.reveal { opacity: 1; transform: scale(.55); transition: transform .5s cubic-bezier(.16,1,.3,1); }
    .proc-num.reveal.in { transform: scale(1); }
    .proc-row:nth-child(even) { margin-left: 2.6rem; }
    .proc-row h3 { font-size: 1.08rem; font-weight: 600; color: var(--paper); margin-bottom: .5rem; padding-top: .6rem; }
    .proc-row p  { font-size: .88rem; color: rgba(244,239,225,.65); line-height: 1.7; max-width: 48ch; }

    /* ── CONTACT ─────────────────────────────────────────────────── */
    .contact-inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4rem; align-items: start; }

    .c-card {
      border: 1px solid var(--line); padding: 1.5rem;
      display: flex; gap: 1.1rem; align-items: flex-start; text-decoration: none;
      transition: border-color .25s, transform .25s;
    }
    .c-card-ic {
      width: 46px; height: 46px; min-width: 46px; border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--moss);
    }
    .c-card-body h4 { font-size: .78rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }
    .c-card-body p, .c-card-body a { font-size: .98rem; color: var(--ink); font-weight: 600; text-decoration: none; }
    .c-card-body .c-card-phone { font-size: .98rem; color: var(--ink); font-weight: 600; }
    .c-card--tel, .c-card--map { cursor: pointer; position: relative; }
    .c-card--tel:hover, .c-card--map:hover { border-color: var(--moss); transform: translate(3px,-3px); }
    .c-card-call-icon { margin-left: auto; color: var(--clay); font-size: .85rem; opacity: 0; transition: opacity .25s; }
    .c-card--tel:hover .c-card-call-icon, .c-card--map:hover .c-card-call-icon { opacity: 1; }

    /* Contact cards sit directly on the terracotta-deep ground, not a paper panel — light-on-dark variant */
    .bg-terracotta .c-card { border-color: var(--terracotta-line); }
    .bg-terracotta .c-card-ic { border-color: var(--terracotta-line); color: var(--sage); }
    .bg-terracotta .c-card-body h4 { color: rgba(244,239,225,.6); }
    .bg-terracotta .c-card-body p, .bg-terracotta .c-card-body a, .bg-terracotta .c-card-body .c-card-phone { color: var(--paper); }
    .bg-terracotta .c-card--tel:hover, .bg-terracotta .c-card--map:hover { border-color: var(--sage); }
    .bg-terracotta .c-card-call-icon { color: var(--sage); }

    .wa-cta {
      display: flex; align-items: center; gap: 1rem;
      background: var(--wa); border: 1px solid var(--wa);
      padding: 1.3rem 1.7rem; color: var(--paper); text-decoration: none;
      transition: transform .25s, background .25s;
    }
    .wa-cta:hover { background: var(--wa-dark); transform: translateY(-2px); }
    .wa-cta-icon { font-size: 2.2rem; }
    .wa-cta-txt strong { display: block; font-size: 1rem; font-weight: 600; }
    .wa-cta-txt span   { font-size: .82rem; opacity: .88; }
    .wa-arrow { margin-left: auto; font-size: 1rem; }

    .c-form { background: var(--paper-deep); border: 1px solid var(--line); padding: 2.4rem; position: relative; overflow: hidden; }

    /* the order slip gets stamped, periodically, like a real ledger entry */
    .ink-stamp {
      position: absolute; top: 1.6rem; right: 1.8rem; width: 54px; height: 54px;
      border: 3px solid var(--clay); border-radius: 50%; opacity: 0;
      transform: scale(1.6) rotate(-18deg);
      animation: inkStamp 6s ease-in-out infinite;
    }
    .ink-stamp::before, .ink-stamp::after {
      content: ''; position: absolute; background: var(--clay);
    }
    .ink-stamp::before { left: 14px; right: 14px; top: 50%; height: 2px; transform: translateY(-50%); }
    .ink-stamp::after  { top: 14px; bottom: 14px; left: 50%; width: 2px; transform: translateX(-50%); }
    @keyframes inkStamp {
      0%, 8% { opacity: 0; transform: scale(1.6) rotate(-18deg); }
      12%    { opacity: .5; transform: scale(1) rotate(-18deg); }
      18%, 82% { opacity: .22; transform: scale(1) rotate(-18deg); }
      92%, 100% { opacity: 0; transform: scale(1.6) rotate(-18deg); }
    }
    .c-form h3 { font-size: 1.3rem; font-weight: 600; color: var(--ink); margin-bottom: 1.6rem; }
    .fg { margin-bottom: 1.2rem; }
    .fg label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
    .fg input, .fg textarea, .fg select {
      width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: var(--paper);
      font-family: 'Work Sans', sans-serif; font-size: .9rem; color: var(--ink); outline: none;
      transition: border-color .25s;
    }
    .fg input:focus, .fg textarea:focus, .fg select:focus { border-color: var(--moss); }
    .fg textarea { min-height: 95px; resize: vertical; }
    .c-submit { width: 100%; background: var(--clay); color: var(--paper); justify-content: center; }
    .c-submit:hover { background: var(--clay-dark); transform: translateY(-2px); }

    /* ── QUOTE MODAL — a stepped wizard echoing the process section's staked string ── */
    .qm-overlay {
      position: fixed; inset: 0; z-index: 9500; background: rgba(28,24,17,.72);
      display: flex; align-items: center; justify-content: center; padding: 1.6rem;
      opacity: 0; pointer-events: none; transition: opacity .3s ease;
    }
    .qm-overlay.open { opacity: 1; pointer-events: all; }
    .qm-panel {
      width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
      background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
      padding: 2.2rem 2.2rem 2rem; position: relative;
      transform: translateY(24px) scale(.97); transition: transform .35s cubic-bezier(.16,1,.3,1);
    }
    .qm-overlay.open .qm-panel { transform: translateY(0) scale(1); }
    .qm-close {
      position: absolute; top: 1.3rem; right: 1.3rem; width: 34px; height: 34px;
      border-radius: 0 10px 0 10px;
      background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: .85rem; transition: border-color .2s, color .2s;
    }
    .qm-close:hover { border-color: var(--clay); color: var(--clay); }
    .qm-eyebrow {
      font-family: 'Courier Prime', monospace; font-weight: 700; font-size: .72rem;
      letter-spacing: .06em; color: var(--clay); text-transform: uppercase; margin-bottom: .5rem;
    }
    .qm-title { font-family: var(--font-brand); font-size: 1.5rem; font-weight: 600; color: var(--ink); padding-right: 2rem; }

    .qm-steps { display: flex; align-items: center; margin: 1.5rem 0 1.8rem; }
    .qm-step-dot {
      width: 30px; height: 30px; min-width: 30px; border-radius: 50%; background: var(--paper-deep);
      border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-brand);
      font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center;
      transition: background .3s, border-color .3s, color .3s;
    }
    .qm-step-dot.active, .qm-step-dot.done { background: var(--clay); border-color: var(--clay); color: var(--paper); }
    .qm-step-line { flex: 1; height: 2px; background: var(--line); position: relative; }
    .qm-step-line::after {
      content: ''; position: absolute; inset: 0; background: var(--clay);
      transform-origin: left; transform: scaleX(0); transition: transform .4s cubic-bezier(.16,1,.3,1);
    }
    .qm-step-line.filled::after { transform: scaleX(1); }

    .qm-step { display: none; }
    .qm-step.active { display: block; animation: qmStepIn .4s cubic-bezier(.16,1,.3,1); }
    @keyframes qmStepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
    .qm-q { font-family: var(--font-brand); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 1.1rem; }

    .qm-chip-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
    .qm-chip {
      padding: 10px 16px; border: 1px solid var(--line); background: var(--paper);
      color: var(--ink); font-family: 'Work Sans', sans-serif; font-size: .85rem;
      cursor: pointer; border-radius: 0 10px 0 10px; transition: all .2s; text-align: left;
    }
    .qm-chip:hover { border-color: var(--moss); }
    .qm-chip.selected { background: var(--moss); border-color: var(--moss); color: var(--paper); }

    .qm-summary { background: var(--paper-deep); border: 1px solid var(--line); padding: 1rem 1.2rem; margin-top: 1.2rem; font-size: .85rem; line-height: 1.8; color: var(--ink-soft); }
    .qm-summary strong { color: var(--ink); }

    .qm-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
    .qm-back {
      background: transparent; border: none; color: var(--ink-soft); font-family: 'Work Sans', sans-serif;
      font-size: .85rem; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: color .2s;
    }
    .qm-back:hover { color: var(--ink); }
    .qm-btn-next {
      margin-left: auto; background: var(--clay); color: var(--paper); border: none;
      padding: 13px 26px; font-size: .9rem; font-weight: 500; font-family: 'Work Sans', sans-serif;
      cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
      border-radius: 0 var(--radius-tag) 0 var(--radius-tag); transition: all .25s;
    }
    .qm-btn-next:hover { background: var(--clay-dark); transform: translateY(-2px); }
    .qm-btn-next:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
    .qm-btn-submit:hover { background: var(--clay-dark); }

    @media (max-width: 480px) {
      .qm-panel { padding: 1.8rem 1.4rem 1.6rem; }
      .qm-title { font-size: 1.3rem; }
      .qm-step-dot { width: 26px; height: 26px; min-width: 26px; font-size: .76rem; }
    }

    /* ── REVIEWS — clipped index cards, deliberate tilt not a uniform grid ── */
    .reviews-head { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; margin-bottom: 3rem; }
    .google-summary {
      display: inline-flex; align-items: center; gap: 12px;
      border: 1px solid var(--line); padding: 10px 20px;
    }
    .g-score { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--ink); line-height: 1; }
    .g-stars { color: var(--clay); font-size: 1rem; letter-spacing: 2px; line-height: 1; }
    .g-label { font-size: .78rem; color: var(--ink-soft); font-weight: 500; line-height: 1.4; }

    .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.8rem 1.6rem; margin-bottom: 2.8rem; }
    .rcard {
      background: var(--paper); border: 1px solid var(--line); padding: 1.7rem;
      transition: transform .25s;
    }
    .rcard:nth-child(odd)  { transform: rotate(-.4deg); }
    .rcard:nth-child(even) { transform: rotate(.4deg); }
    .rcard:hover { transform: rotate(0deg) translateY(-3px); border-color: var(--moss); }
    .rcard-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
    .r-avatar {
      width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: var(--paper); font-family: 'Bricolage Grotesque', sans-serif; font-size: .85rem; font-weight: 700;
      background: var(--moss);
    }
    .r-name { font-size: .9rem; font-weight: 600; color: var(--ink); }
    .r-stars { color: var(--clay); font-size: .9rem; letter-spacing: 1px; margin-bottom: .8rem; }
    .r-text { font-size: .87rem; color: var(--ink-soft); line-height: 1.65; }
    .r-google { display: inline-flex; align-items: center; gap: 5px; margin-top: 1rem; font-size: .72rem; color: var(--ink-soft); font-weight: 500; }

    .reviews-cta a { background: transparent; border: 1px solid var(--line); color: var(--ink); }
    .reviews-cta a:hover { border-color: var(--moss); color: var(--moss); transform: translateY(-2px); }

    /* Reviews on mobile: a swipeable card row, not a squeezed single column — the corkboard notes fan out sideways */
    .reviews-swipe-hint { display: none; }
    @media (max-width: 760px) {
      .reviews-head { grid-template-columns: 1fr; align-items: start; gap: 1.4rem; }
      .google-summary { width: fit-content; }
      .reviews-grid {
        display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; gap: 1.1rem; scrollbar-width: none;
        margin: 0 -2rem 1.2rem; padding: .2rem 2rem 1.6rem;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
      }
      .reviews-grid::-webkit-scrollbar { display: none; }
      .rcard { flex: 0 0 82%; scroll-snap-align: center; }
      .rcard:nth-child(odd), .rcard:nth-child(even) { transform: none; }
      .rcard:hover { transform: none; }
      .reviews-swipe-hint {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        font-size: .72rem; color: var(--ink-soft); letter-spacing: .3px; margin: -.6rem 0 1.8rem;
      }
      .reviews-swipe-hint svg { color: var(--sage); animation: swipeNudge 1.7s ease-in-out infinite; }
      .reviews-swipe-hint svg.fa-chevron-left { animation-direction: reverse; }
    }
    @keyframes swipeNudge { 0%,100% { transform: translateX(0); opacity: .45; } 50% { transform: translateX(5px); opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .reviews-swipe-hint svg { animation: none !important; }
    }

    /* ── FOOTER ──────────────────────────────────────────────────── */
    .footer { background: var(--moss-dark); color: rgba(244,239,225,.65); padding: 4rem 2rem 1.6rem; }
    .footer-grid {
      max-width: 1180px; margin: 0 auto; position: relative;
      display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem;
      padding-bottom: 2.2rem;
    }
    /* a hand-stitched seam closes out the page, instead of a plain rule */
    .footer-grid::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background-image: repeating-linear-gradient(90deg, rgba(244,239,225,.35) 0 10px, transparent 10px 18px);
      animation: stitchMarch 7s linear infinite;
    }
    @keyframes stitchMarch { to { background-position: 28px 0; } }
    .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
    .footer-brand-txt strong { display: block; font-family: var(--font-brand); font-size: 1.1rem; font-weight: 400; color: var(--paper); }
    .footer-brand-txt span   { font-size: .7rem; color: var(--sage); letter-spacing: .5px; }
    .footer-desc { font-size: .85rem; line-height: 1.75; max-width: 280px; }
    .footer-col h4 { font-size: .87rem; font-weight: 600; color: var(--paper); margin-bottom: 1rem; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
    .footer-col ul a {
      color: rgba(244,239,225,.58); text-decoration: none; font-size: .84rem;
      position: relative; display: inline-block; transition: color .2s;
    }
    .footer-col ul a::after {
      content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px;
      background: var(--sage); transform: scaleX(0); transform-origin: left; transition: transform .25s;
    }
    .footer-col ul a:hover { color: var(--paper); }
    .footer-col ul a:hover::after { transform: scaleX(1); }
    .footer-addr { margin-top: 1rem; font-size: .8rem; line-height: 1.7; }
    .footer-bottom {
      max-width: 1180px; margin: 1.6rem auto 0;
      display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
      text-align: left;
      font-size: .78rem; flex-wrap: wrap; gap: .6rem;
    }
    .footer-bottom .webeyah-credit a {
      color: var(--sage); font-weight: 600; text-decoration: none;
      border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
    }
    .footer-bottom .webeyah-credit a:hover { color: var(--paper); border-color: currentColor; }

    /* ── FLOATING BUTTONS — small plant tags, not generic circular FABs ──
       Same rounded-corner shape language as the rest of the site's buttons
       (top-right + bottom-left only), scaled down. ── */
    .floating { position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity .3s ease; }
    .floating.near-text { opacity: .45; }
    .floating.near-text:hover { opacity: 1; }
    .btn-top, .btn-wa, .btn-tel {
      border-radius: 0 10px 0 10px;
      transition: transform .25s, background .25s;
    }
    .btn-top {
      width: 44px; height: 44px; background: var(--moss); color: var(--paper); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center; font-size: .95rem;
      box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none;
      animation: tagSway 6s ease-in-out .3s infinite;
    }
    .btn-top.show { opacity: 1; transform: translateY(0); pointer-events: all; }
    .btn-top:hover { background: var(--moss-dark); transform: translateY(-3px); rotate: 0deg; animation-play-state: paused; }
    .btn-wa {
      width: 56px; height: 56px; background: var(--wa); color: var(--paper); text-decoration: none;
      display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
      box-shadow: 0 5px 20px rgba(37,211,102,.5);
    }
    .btn-wa:hover { transform: translateY(-3px); animation-play-state: paused; }
    .btn-tel {
      width: 48px; height: 48px; background: var(--moss); color: var(--paper); text-decoration: none;
      display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
      box-shadow: var(--shadow);
      animation: tagSway 6s ease-in-out 1.1s infinite;
    }
    .btn-tel:hover { background: var(--moss-dark); transform: translateY(-3px); rotate: 0deg; animation-play-state: paused; }
    /* a tag hanging off a hook, swaying very slightly in the breeze — idle, not attention-grabbing.
       Uses the standalone `rotate` property (not `transform`) so it composes cleanly with the
       translateY show/hide transition and the hover lift instead of fighting them for the same property. */
    @keyframes tagSway { 0%,100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }

    /* ── SCROLL REVEAL ───────────────────────────────────────────── */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.in { opacity: 1; transform: translateY(0); }

    @keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeIn   { from{opacity:0} to{opacity:1} }

    /* ── LANG LOADER ────────────────────────────────────────────── */
    .lang-loader {
      position: fixed; inset: 0; z-index: 9999; background: rgba(30,50,41,.94);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 1.4rem; opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    .lang-loader.active { opacity: 1; pointer-events: all; }
    .loader-mower { width: 100px; height: 64px; }
    .loader-label { color: var(--sage); font-size: .8rem; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; }
    .loader-dots { display: flex; gap: 9px; }
    .loader-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); animation: loaderBounce .85s ease-in-out infinite; }
    .loader-dot:nth-child(2) { animation-delay: .17s; }
    .loader-dot:nth-child(3) { animation-delay: .34s; }
    @keyframes loaderBounce { 0%,100% { opacity: .25; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.15); } }

    /* ── CUSTOM CURSOR — dibber by default, shears close into a real snip over anything clickable ── */
    @media (hover: hover) and (pointer: fine) {
      body, a, button, input, textarea, select, .srow, .rcard, .c-card { cursor: none; }
      .cursor-dibber, .cursor-shears {
        position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; will-change: transform;
      }
      .cursor-dibber { width: 22px; height: 22px; transition: opacity .15s; }
      .cursor-dibber svg, .cursor-shears svg { display: block; width: 100%; height: 100%; overflow: visible; }
      .cursor-dibber.hide { opacity: 0; }
      .cursor-dibber.as-caret svg { transform: rotate(90deg) scale(.7); }
      .cursor-shears { width: 28px; height: 28px; opacity: 0; transition: opacity .18s; }
      .cursor-shears.active { opacity: 1; }
      /* squeeze on the whole tool + decisive per-blade close — expo-out, no bounce/elastic overshoot */
      .cursor-shears svg { transform-origin: 50% 78%; transition: transform .34s cubic-bezier(.16,1,.3,1); }
      .cursor-shears .blade { transition: transform .12s cubic-bezier(.16,1,.3,1); transform-origin: 7px 21px; }
      .cursor-shears.snip svg { transform: scale(.88); transition-duration: .1s; }
      .cursor-shears.snip .blade-a { transform: rotate(34deg); }
      .cursor-shears.snip .blade-b { transform: rotate(-34deg); }
      /* release eases back open slower than it snapped shut, like real spring-loaded shears */
      .cursor-shears:not(.snip) svg { transition-duration: .36s; }
      .cursor-shears:not(.snip) .blade { transition-duration: .36s; }
    }
    @media (hover: none), (pointer: coarse) {
      .cursor-dibber, .cursor-shears { display: none; }
    }

    /* Grass-clipping flecks scattered by the shears on every snip / mobile tap — diegetic click feedback, not a generic ripple */
    .snip-fleck {
      position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
      width: 9px; height: 2px; border-radius: 1px; background: var(--clay);
      animation: snipFleckFly .5s cubic-bezier(.16,1,.3,1) forwards;
    }
    @keyframes snipFleckFly {
      0%   { opacity: 1; transform: translate(var(--fx0,0px), var(--fy0,0px)) rotate(var(--fr0,0deg)); }
      100% { opacity: 0; transform: translate(var(--fx1,0px), var(--fy1,0px)) rotate(var(--fr1,60deg)); }
    }

    /* ── MOBILE TAP FEEDBACK — the cursor's touch counterpart: a soil ripple at rest, a clay ripple over anything interactive ── */
    @media (hover: none), (pointer: coarse) {
      .tap-ripple {
        position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none;
        width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--moss-mid);
        background: radial-gradient(circle, rgba(169,188,172,.22), transparent 70%);
        transform: translate(-50%,-50%) scale(.3); opacity: .85;
        animation: tapRipple .55s cubic-bezier(.16,1,.3,1) forwards;
      }
      .tap-ripple--action { border-color: var(--clay); background: radial-gradient(circle, rgba(176,89,44,.26), transparent 70%); }
    }
    @keyframes tapRipple { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

    /* ── REDUCED MOTION — every new animated element gets an honest fallback ── */
    @media (prefers-reduced-motion: reduce) {
      .cursor-dibber, .cursor-shears, .cursor-shears .blade { transition: none !important; }
      .btn-top, .btn-tel { animation: none !important; rotate: 0deg !important; }
      .blueprint-lines path { animation: none !important; }
      .why-grass i { animation: none !important; }
      .proc-list::after { transition: none !important; transform: scaleY(1) !important; }
      .leaf-drift { animation: none !important; }
      .ink-stamp { animation: none !important; opacity: .22 !important; transform: scale(1) rotate(-18deg) !important; }
      .footer-grid::after { animation: none !important; }
      .hero h1 em { animation: none !important; background-size: 100% 4px !important; filter: drop-shadow(0 0 3px rgba(176,89,44,.4)) !important; }
      .grass-edge i { transition: none !important; }
      .hero-glow { transition: none !important; }
      .wa-live, .wa-live .fa-whatsapp { animation: none !important; }
      .loader-dot { animation: none !important; opacity: 1 !important; }
      .qm-panel, .qm-step-line::after, .qm-step-dot { transition: none !important; }
      .qm-step.active { animation: none !important; }
    }

    /* ── RESPONSIVE ──────────────────────────────────────────────── */
    @media (max-width: 1180px) {
      .nav-links { gap: 1.1rem; }
      .brand-text .b-sub { display: none; }
      .nav-cta { padding: 9px 16px; }
      .lang-toggle { padding: 6px 10px; }
    }
    @media (max-width: 1010px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .mobile-nav { display: block; }
    }
    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 1fr; }
      .hero-panel { max-width: 340px; }
      .services-head { grid-template-columns: 1fr; }
      .why-inner { grid-template-columns: 1fr; }
      .why-panel { max-width: 360px; }
      .contact-inner { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
      .srow:nth-child(even) .srow-body, .proc-row:nth-child(even) { margin-left: 0; }
      .footer-bottom { padding-left: 20%; }
    }
    @media (max-width: 768px) {
      .stats-inner { grid-template-columns: 1fr; margin-top: -30px; }
      .stat-cell { border-left: none; border-top: 1px solid var(--line); }
      .stat-cell:first-child { border-top: none; }
    }
    @media (max-width: 500px) {
      .srow, .srow-body { grid-template-columns: 1fr; }
      .srow-idx { display: none; }
    }

    /* Page content stays left-anchored with a reserved right gutter so the fixed
       WhatsApp/call/scroll-top stack (.floating, ~85px footprint off the right edge)
       never sits over text or CTAs on narrow viewports. */
    @media (max-width: 760px) {
      section, .hero-grid, .footer { padding-right: 6rem; }
    }