/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: optional;
  src: url(/assets/fonts/gf-2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: optional;
  src: url(/assets/fonts/gf-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: optional;
  src: url(/assets/fonts/gf-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(/assets/fonts/gf-2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(/assets/fonts/gf-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(/assets/fonts/gf-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/assets/fonts/gf-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/assets/fonts/gf-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/assets/fonts/gf-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/assets/fonts/gf-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/assets/fonts/gf-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/assets/fonts/gf-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/assets/fonts/gf-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/assets/fonts/gf-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/assets/fonts/gf-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/assets/fonts/gf-7.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/assets/fonts/gf-8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/assets/fonts/gf-9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/assets/fonts/gf-10.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/assets/fonts/gf-7.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/assets/fonts/gf-8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/assets/fonts/gf-9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/assets/fonts/gf-10.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/assets/fonts/gf-7.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/assets/fonts/gf-8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/assets/fonts/gf-9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/assets/fonts/gf-10.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/assets/fonts/gf-7.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/assets/fonts/gf-8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/assets/fonts/gf-9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/assets/fonts/gf-10.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============ GROWUILD REVAMP — shared design system ============ */
:root{
  --bg:#f6f3ec; --surface:#fffdf8; --surface-2:#efeadf;
  --ink:#1a1d16; --ink-soft:#535849; --line:rgba(26,29,22,.13);
  --accent:#1c6b3c; --accent-ink:#fff; --accent-soft:#e7efe6; --nav-hl:#cdeeab;
  --shadow:0 22px 60px -32px rgba(26,40,22,.45);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --wrap:1180px; --radius:14px; --ease:cubic-bezier(.22,.61,.36,1);
}
html{scroll-padding-top:92px; scroll-behavior:smooth; overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html[data-theme="dark"]{
  --bg:#12140e; --surface:#1b1e15; --surface-2:#23271b;
  --ink:#ece8dd; --ink-soft:#a7a99a; --line:rgba(236,232,221,.14);
  --accent:#62c084; --accent-ink:#0c1408; --accent-soft:#1d2a1c; --nav-hl:rgba(98,192,132,.30);
  --shadow:0 26px 70px -34px rgba(0,0,0,.7);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,18px); line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:clip; transition:background .4s var(--ease), color .4s var(--ease)}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,56px)}
section{padding-block:clamp(64px,11vh,140px)}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6.4vw,5.4rem); font-weight:700}
h2{font-size:clamp(2rem,4vw,3.3rem)}
h3{font-size:clamp(1.3rem,2vw,1.7rem)}
em{font-style:italic; color:var(--accent)}
a{color:inherit}
.eyebrow{font-family:var(--font-body); font-size:.8rem; font-weight:700; letter-spacing:.085em; word-spacing:-.04em; text-transform:uppercase; color:var(--accent)}
.lead{font-size:clamp(1.1rem,1.6vw,1.4rem); color:var(--ink-soft); max-width:60ch}
.muted{color:var(--ink-soft)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:1rem;
  padding:.85em 1.5em; border-radius:100px; text-decoration:none; border:1.5px solid transparent;
  transition:transform .5s var(--ease), background .25s, color .25s, border-color .25s; will-change:transform; cursor:pointer}
.btn-primary{background:var(--accent); color:var(--accent-ink); position:relative; overflow:hidden}
.btn-primary:hover{filter:brightness(1.07)}
/* premium gloss sweep (from growuild.com waFreeShine) */
.btn-primary::before{content:""; position:absolute; top:0; left:-160%; width:55%; height:100%; background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg); pointer-events:none; animation:btnShine 4.2s ease-in-out infinite}
@keyframes btnShine{0%,58%{left:-160%}100%{left:160%}}
.btn-primary>*{position:relative}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn svg{width:1.1em;height:1.1em}
.btn[disabled]{opacity:.45; pointer-events:none}

/* header / nav */
header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s}
header.scrolled{border-bottom-color:var(--line)}
/* scroll accent wipe under bar (cydstumpel.nl) */
header::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
header.scrolled::after{transform:scaleX(1)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px}
.brand{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:-.02em; text-decoration:none; color:var(--ink)}
.brand b{color:var(--accent)}
.brand .wm{color:var(--accent)}
.brand-logo{flex:none; display:block}
.nav-links{display:flex; gap:28px; list-style:none}
/* nav link highlighter-marker sweep (cydstumpel.nl) */
.nav-links a{text-decoration:none; color:var(--ink-soft); font-weight:500; font-size:.95rem; padding:3px 6px; margin:0 -3px; border-radius:4px;
  background-image:linear-gradient(var(--nav-hl) 0 0); background-size:100% 0; background-position:bottom; background-repeat:no-repeat;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-size .45s cubic-bezier(.25,1,.5,1), color .25s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink); background-size:100% 100%}
.nav-tools{display:flex; align-items:center; gap:12px}
.icon-btn{display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:var(--accent); color:var(--accent)}
.icon-btn svg{width:18px;height:18px}
.lang-wrap{position:relative}
.lang-menu{position:absolute; right:0; top:52px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:6px; min-width:162px; box-shadow:var(--shadow); display:flex; flex-direction:column; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.96); transform-origin:top right;
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; pointer-events:none}
.lang-menu.open{opacity:1; visibility:visible; transform:none; pointer-events:auto}
.lang-menu a,.lang-menu button{display:block; width:100%; text-align:left; font-family:inherit; background:none; border:0; cursor:pointer;
  padding:9px 12px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:.92rem;
  opacity:0; transform:translateX(7px); transition:opacity .25s var(--ease), transform .25s var(--ease), background .2s, color .2s}
.lang-menu.open a,.lang-menu.open button{opacity:1; transform:none}
.lang-menu.open a:nth-child(1),.lang-menu.open button:nth-child(1){transition-delay:.05s}
.lang-menu.open a:nth-child(2),.lang-menu.open button:nth-child(2){transition-delay:.11s}
.lang-menu a:hover,.lang-menu button:hover{background:var(--surface-2)}
.lang-menu button[aria-current="true"]{color:var(--accent); font-weight:600; background:var(--nav-hl)}
.nav-cta{display:inline-flex}
.menu-toggle{display:none}

/* mobile menu panel */
/* mobile menu — right-panel slide + staggered links (bethebuzz.co) */
.mobile-menu{position:fixed; inset:14px 14px auto auto; max-height:calc(100dvh - 28px); overflow-y:auto; width:min(82%,360px); background:var(--surface); z-index:70;
  transform:translateX(calc(100% + 14px)); transition:transform .8s cubic-bezier(.76,0,.18,1); padding:96px 30px 32px; display:flex; flex-direction:column; gap:2px;
  box-shadow:-26px 0 70px -26px rgba(0,0,0,.55); border:1px solid var(--line); border-radius:26px}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a:not(.btn){text-decoration:none; color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,6.6vw,2.15rem); line-height:1.14; padding:5px 0;
  opacity:0; transform:translateY(-22px); transition:opacity .6s var(--ease), transform .6s var(--ease), color .25s}
.mobile-menu.open a:not(.btn){opacity:1; transform:none}
.mobile-menu.open a:not(.btn):nth-of-type(1){transition-delay:.30s}
.mobile-menu.open a:not(.btn):nth-of-type(2){transition-delay:.38s}
.mobile-menu.open a:not(.btn):nth-of-type(3){transition-delay:.46s}
.mobile-menu.open a:not(.btn):nth-of-type(4){transition-delay:.54s}
.mobile-menu.open a:not(.btn):nth-of-type(5){transition-delay:.62s}
.mobile-menu.open a:not(.btn):nth-of-type(6){transition-delay:.70s}
.mobile-menu a:not(.btn):hover{color:var(--accent)}
.mobile-menu .btn{margin-top:26px; justify-content:center; opacity:0; transition:opacity .5s ease .78s}
.mobile-menu.open .btn{opacity:1}
.mm-close{position:absolute; top:24px; right:24px}
.scrim{position:fixed; inset:0; background:rgba(15,17,11,.72); z-index:65; opacity:0; pointer-events:none; transition:opacity .85s cubic-bezier(.26,1,.48,1)}
.scrim.open{opacity:1; pointer-events:auto}
/* hamburger collapse-to-dot morph (bethebuzz.co) */
.ham{position:relative; width:18px; height:12px; display:block}
.ham i{position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px; transition:transform .5s cubic-bezier(.25,1,.5,1), opacity .35s}
.ham i:nth-child(1){top:0} .ham i:nth-child(2){top:5px} .ham i:nth-child(3){top:10px}
.menu-toggle.is-open .ham i:nth-child(1){opacity:0; transform:translateY(5px) scale(.2)}
.menu-toggle.is-open .ham i:nth-child(3){opacity:0; transform:translateY(-5px) scale(.2)}
.menu-toggle.is-open .ham i:nth-child(2){transform:rotate(180deg) scaleX(.75)}

/* hero */
.hero{position:relative; padding-top:clamp(40px,8vh,90px); padding-bottom:clamp(56px,10vh,120px)}
.hero::before{content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:linear-gradient(95deg, var(--bg) 32%, color-mix(in srgb, var(--bg) 55%, transparent) 62%, transparent 100%), url(/assets/hero-bg.webp);
  background-size:cover, cover; background-position:center, center right; background-repeat:no-repeat;
  opacity:.92; -webkit-mask-image:linear-gradient(to bottom, #000 76%, transparent); mask-image:linear-gradient(to bottom, #000 76%, transparent)}
[data-theme="dark"] .hero::before{background-image:linear-gradient(95deg, var(--bg) 32%, color-mix(in srgb, var(--bg) 55%, transparent) 62%, transparent 100%), url(/assets/hero-bg-dark.webp); opacity:1}
.hero .wrap{position:relative; z-index:1}
.hero .eyebrow{display:block; margin-bottom:22px}
.hero h1{max-width:16ch}
.hero .lead{margin-top:26px; font-size:clamp(1.15rem,1.8vw,1.5rem)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:36px; align-items:center}
.hero-cta .cta-text{color:var(--ink-soft); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-color .2s}
.hero-cta .cta-text:hover{color:var(--accent); border-color:var(--accent)}
.hero-trust{margin-top:30px; display:flex; gap:28px; flex-wrap:wrap; color:var(--ink-soft); font-size:.95rem}
.hero-trust b{color:var(--ink); font-family:var(--font-display); font-weight:600}
.hero-trust .trust-link{color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s}
.hero-trust .trust-link:hover{border-color:var(--accent)}
.hero-trust .ht-sep{width:1px; height:14px; background:var(--line); display:inline-block; align-self:center; opacity:.85}
.word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em}
.word .inner{display:inline-block; transform:translateY(110%); transition:transform .7s var(--ease)}
.word .inner.show{transform:none}

/* page header (sub-pages) */
.page-head{padding-top:clamp(48px,9vh,110px); padding-bottom:clamp(28px,5vh,56px)}
.page-head h1{font-size:clamp(2.4rem,5.4vw,4.4rem); max-width:18ch}
.page-head .lead{margin-top:20px}

/* marquee */
.marquee{border-block:1px solid var(--line); overflow:hidden; padding-block:18px; background:var(--surface-2)}
.marquee-track{display:flex; gap:48px; width:max-content; animation:scroll 34s linear infinite; will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--ink-soft); white-space:nowrap}
.marquee span::after{content:"✦"; margin-left:48px; color:var(--accent); font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}

/* reveal */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.stagger>*{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--i,0)*70ms)}
.stagger.is-in>*{opacity:1; transform:none}

/* promise */
.promise{position:relative; background:transparent}
.promise::before{content:""; position:absolute; inset:0; z-index:-2; background:var(--accent-soft); transition:background-color .8s var(--ease)}
.promise .big{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.9rem); font-weight:600; line-height:1.18; max-width:18ch; letter-spacing:-.02em}
.promise .lead{margin-top:24px}
.deal-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center}
.deal-copy .feats{margin-bottom:0; max-width:46ch}
.deal-visual{position:relative; display:flex; justify-content:center; align-items:center; padding:14px 6px}
.draft-card{position:relative; width:min(370px,100%); background:var(--bg); border:1px solid var(--line); border-radius:16px; box-shadow:0 26px 64px -30px rgba(0,0,0,.45); overflow:hidden; transform:rotate(-2.5deg); transition:transform .55s var(--ease)}
.deal-visual:hover .draft-card{transform:rotate(0)}
.draft-bar{display:flex; align-items:center; gap:7px; padding:13px 16px; background:var(--surface); border-bottom:1px solid var(--line)}
.draft-bar span{width:9px; height:9px; border-radius:50%; background:var(--line); flex:none}
.draft-bar em{margin-left:8px; font-style:normal; font-size:.72rem; color:var(--ink-soft); background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:4px 12px; flex:1; text-align:center}
.draft-body{padding:22px}
.draft-hero{height:150px; border-radius:11px; overflow:hidden; background:var(--surface); margin-bottom:18px}
.draft-hero img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block}
.draft-line{height:9px; border-radius:5px; background:var(--line); margin-bottom:12px}
.draft-line.w90{width:90%} .draft-line.w70{width:68%} .draft-line.w50{width:46%}
.draft-foot{display:flex; align-items:baseline; gap:9px; margin-top:20px; padding-top:17px; border-top:1px dashed var(--line)}
.draft-foot b{font-family:var(--font-display); font-size:1.8rem; line-height:1; color:var(--accent)}
.draft-foot span{font-size:.86rem; color:var(--ink-soft)}
.draft-ribbon{position:absolute; top:76px; right:0; background:var(--accent); color:var(--accent-ink); font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:6px 13px; border-radius:7px 0 0 7px; box-shadow:0 8px 16px -7px rgba(0,0,0,.45)}
@media (max-width:820px){ .deal-grid{grid-template-columns:1fr; gap:38px} .draft-card{transform:rotate(-1.5deg)} }

/* steps — sticky-stacking cards (mirrors growuild.com/process) */
.steps{display:block; max-width:560px; margin:44px auto 0; list-style:none}
.step{position:sticky; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(22px,3.2vw,32px); box-shadow:0 18px 46px -26px rgba(0,0,0,.5); margin-bottom:20px; min-height:min(42vh,300px); display:flex; flex-direction:column; justify-content:center}
.step:nth-child(1){top:96px} .step:nth-child(2){top:116px} .step:nth-child(3){top:136px} .step:nth-child(4){top:156px}
.step:last-child{margin-bottom:0}
.step-meta{display:flex; align-items:center; gap:14px; margin-bottom:8px}
.step .num{font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--accent); line-height:1}
.step-tag{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:5px 11px; border-radius:999px}
.step h3{margin:7px 0 9px; font-size:clamp(1.2rem,2vw,1.55rem); font-family:var(--font-display)}
.step p{color:var(--ink-soft); font-size:.95rem; line-height:1.56}
.step-list{list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:9px}
.step-list li{position:relative; padding-left:26px; color:var(--ink-soft); font-size:.96rem}
.step-list li::before{content:"\2713"; position:absolute; left:0; color:var(--accent); font-weight:700}
@media (prefers-reduced-motion:reduce){ .step{position:static; min-height:0; box-shadow:0 1px 0 var(--line)} }

/* pricing */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:36px; display:flex; flex-direction:column; box-shadow:var(--shadow); position:relative}
.card.featured{border-color:var(--accent); border-width:2px; position:relative; box-shadow:0 20px 54px -22px rgba(28,107,60,.38)}
.badge{position:absolute; top:-13px; left:36px; background:var(--accent); color:var(--accent-ink); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:100px}
.badge-pop{background:linear-gradient(135deg,#ffce4d,#f3a526); color:#4a3408; box-shadow:0 8px 22px -8px rgba(243,165,38,.8)}
.badge-rec{background:linear-gradient(135deg,#33b277,#1c6b3c); color:#fff; box-shadow:0 8px 22px -8px rgba(28,107,60,.55)}
@keyframes gw-badgefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.badge-pop, .badge-rec{animation:gw-badgefloat 2.8s var(--ease) infinite; will-change:transform}
@media (prefers-reduced-motion:reduce){.badge-pop, .badge-rec{animation:none}}
.mini{position:relative}
.mini .badge{left:24px; top:-12px}
.feats li.feat-hook{font-weight:700; color:var(--ink); background:color-mix(in srgb, var(--accent) 14%, transparent); border-radius:9px; padding:6px 8px; margin-inline:-8px; box-shadow:inset 3px 0 0 var(--accent)}
.feats li.feat-key{font-weight:600; color:var(--ink)}
.feats li.feat-hook::before, .feats li.feat-key::before{background-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); box-shadow:0 3px 9px -2px color-mix(in srgb, var(--accent) 65%, transparent)}
html[data-theme="dark"] .feats li.feat-hook::before, html[data-theme="dark"] .feats li.feat-key::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1408' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.best-for{font-size:.9rem; line-height:1.5; color:var(--ink-soft); margin:10px 0 16px; max-width:42ch}
.best-for b{color:var(--accent)}
.feats li small{grid-column:2; margin:2px 0 0; color:var(--ink-soft); opacity:.85; font-size:.82em; line-height:1.4}
.card h3{font-size:1.6rem}
.price{font-family:var(--font-display); font-size:2.8rem; font-weight:700; margin:10px 0 4px}
.price small{font-family:var(--font-body); font-size:.9rem; font-weight:500; color:var(--ink-soft)}
.card>p{color:var(--ink-soft); margin-bottom:20px}
.feats{list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; flex:1}
.feats li{display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:10px; align-items:start; font-size:.95rem}
.feats li::before{content:""; grid-column:1; width:18px; height:18px; margin-top:3px; border-radius:50%;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6b3c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}
.feats li>span{min-width:0}
.pkg-ic{color:var(--accent); display:block; margin-bottom:12px}
.pkg-ic .ic{width:42px; height:42px; display:block}
.mini .pkg-ic{margin-bottom:10px}
.mini .pkg-ic .ic{width:38px; height:38px}
/* package cards: hover lift + icon nudge (tasteful, motion-gated) */
@media (hover:hover) and (pointer:fine){
  .card, .mini{transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)}
  .card:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow:0 30px 64px -30px rgba(0,0,0,.42)}
  .card.featured:hover{box-shadow:0 34px 72px -26px rgba(28,107,60,.5)}
  .mini:hover{transform:translateY(-5px); border-color:color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow:0 26px 54px -28px rgba(0,0,0,.36)}
  .pkg-ic{transition:transform .45s var(--ease)}
  .card:hover .pkg-ic, .mini:hover .pkg-ic{transform:scale(1.07) rotate(-4deg)}
}
@media (prefers-reduced-motion:reduce){
  .card, .mini, .pkg-ic, .card:hover, .mini:hover, .card:hover .pkg-ic, .mini:hover .pkg-ic{transition:none; transform:none}
}
/* benefits + complimentary services */
.value{padding-block:clamp(40px,7vh,84px)}
.val-h2{font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:600; margin-top:12px; max-width:22ch; letter-spacing:-.01em}
.value-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); margin-top:38px; align-items:start}
.val-sub{font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); margin-bottom:18px}
.benefits{list-style:none; display:flex; flex-direction:column; gap:10px}
.benefits li{display:flex; gap:13px; align-items:center; padding:13px 16px; background:var(--surface); border:1px solid var(--line); border-radius:14px; font-size:1rem; line-height:1.4}
.bf-ic{flex:none; color:var(--accent); display:grid; place-items:center}
.bf-ic .ic{width:28px; height:28px; display:block}
.bf-t{flex:1 1 0; min-width:0}
@media (hover:hover) and (pointer:fine){
  .benefits li{transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease)}
  .benefits li:hover{transform:translateX(4px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:0 12px 28px -20px rgba(0,0,0,.45)}
  .bf-ic{transition:transform .35s var(--ease)}
  .benefits li:hover .bf-ic{transform:scale(1.12) rotate(-5deg)}
}
.comp-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3vw,30px)}
/* tighten value -> "lock in price" CTA -> why; comp heading now sits above the card so both columns align */
.value{padding-bottom:clamp(24px,4vh,44px)}
.value + .cta-band{padding-top:0; padding-bottom:clamp(8px,1.6vh,22px)}
.cta-band + #why{padding-top:clamp(16px,3vh,40px)}
.comp-list{list-style:none; display:flex; flex-direction:column; gap:18px}
.comp-list li{display:flex; gap:14px; align-items:flex-start}
.comp-ic{flex:none; color:var(--accent); display:grid; place-items:center; margin-top:2px}
.comp-ic .ic{width:34px; height:34px; display:block}
.comp-txt{display:flex; flex-direction:column; gap:2px}
.comp-txt b{font-size:1.02rem}
.comp-txt span{color:var(--ink-soft); font-size:.92rem; line-height:1.45}
.comp-link{color:var(--accent); font-weight:600; white-space:nowrap}
.comp-note{margin-top:18px; font-size:.8rem; color:var(--ink-soft)}
@media (max-width:820px){ .value-grid{grid-template-columns:1fr; gap:30px} }
/* footer keyboard */
.kb-foot{background:var(--surface-2); padding:clamp(40px,6vh,72px) 0 clamp(104px,16vh,184px); border-top:1px solid var(--line)}
.kb-hint{text-align:center; color:var(--ink-soft); font-size:.9rem; margin-bottom:22px}
.keyboard{max-width:780px; margin:0 auto; background:linear-gradient(180deg,#1a5234,#0c2c1c); border:1px solid #08190f; border-radius:18px; padding:clamp(14px,2.4vw,22px); box-shadow:0 34px 60px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.09)}
.kb-brand{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px; position:relative}
.kb-brandmark{display:inline-flex; align-items:center; gap:9px}
.kb-logo{width:34px; height:34px}
.kb-wm{font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:#f0f6ea; letter-spacing:-.01em}
.kb-wm b{color:#9fe3b8}
.kb-mute{position:absolute; right:2px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:grid; place-items:center; background:#2c3122; border:1px solid #0a0b07; border-radius:9px; color:#aeb3a1; cursor:pointer; box-shadow:0 3px 0 #0a0b07}
.kb-mute:active{transform:translateY(calc(-50% + 2px)); box-shadow:0 1px 0 #0a0b07}
.kb-mute svg{width:18px; height:18px}
.kb-mute .kb-snd-off{display:none}
.kb-mute.is-muted .kb-snd-on{display:none}
.kb-mute.is-muted .kb-snd-off{display:block}
.kb-mute.is-muted{color:#d98c8c}
.kb-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:8px}
.kb-row:last-child{margin-bottom:0}
.kc{display:inline-flex; align-items:center; justify-content:center; min-height:55px; padding:0 17px; border-radius:9px; background:linear-gradient(180deg,#3c4131,#2b3022); color:#d9dccc; font-family:var(--font-body); font-size:1rem; font-weight:600; border:1px solid #14160e; box-shadow:0 4px 0 #14160e, 0 6px 9px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07); text-decoration:none; cursor:pointer; user-select:none; -webkit-user-select:none; transition:transform .07s var(--ease), box-shadow .07s var(--ease), background .15s; text-align:center; line-height:1.05; touch-action:manipulation}
.kc:hover{filter:brightness(1.07)}
.kc.kc-down, .kc:active{transform:translateY(3px); box-shadow:0 1px 0 #14160e, 0 2px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05)}
.kc-sq{width:50px; min-width:50px; padding:0}
.kc-sq svg{width:30px; height:30px}
.kc-ig svg{width:34px; height:34px}
.kc-mod, .kc-fill{min-width:54px; color:#8f9580; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700}
.kc-fill{cursor:default}
.kc-space{flex:1 1 200px; min-width:200px; font-size:1.02rem; letter-spacing:.01em}
.kc-accent{background:linear-gradient(180deg,#34b06a,#1c6b3c); color:#fff; border-color:#0e3a20; box-shadow:0 4px 0 #0e3a20, 0 6px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18)}
.kc-accent:hover{background:linear-gradient(180deg,#3cc176,#21794a); color:#fff}
.kc-accent.kc-down, .kc-accent:active{box-shadow:0 1px 0 #0e3a20, 0 2px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12)}
.kb-foot .foot-meta{margin-top:24px; text-align:center; color:var(--ink-soft); font-size:.85rem; display:flex; flex-direction:column; gap:4px; align-items:center}
@media (max-width:560px){ .kc{min-height:50px; padding:0 13px; font-size:.92rem} .kb-wm{font-size:1.38rem} .kb-hint{font-size:.9rem} }
/* keyboard: fill the deck (keys grow), wide growuild.org key, colour-coded socials */
.kb-row{gap:7px}
.kb-row .kc{flex:1 1 auto}
.kb-row .kc-sq{flex:1 1 auto; min-width:46px; padding:0}
.kb-row .kc-mod, .kb-row .kc-fill{flex:.65 1 auto; min-width:44px}
.kb-row .kc-nav{flex:1.5 1 auto}
.kb-row .kc-space{flex:7 1 170px}
.kb-row .kc-wide{flex:2.4 1 auto; gap:7px; color:#cdeeab; font-weight:700}
.kc-wide svg{width:16px; height:16px; flex:none}
.kc-ig{background:linear-gradient(140deg,#8a3ab9,#e1306c 55%,#fdb44b); border-color:#561a66; box-shadow:0 4px 0 #561a66,0 6px 10px rgba(0,0,0,.4); color:#fff}
.kc-x{background:linear-gradient(180deg,#2b2b2b,#050505); border-color:#000; color:#fff}
.kc-carousell{background:#ffffff; border-color:#dfe3df; box-shadow:0 4px 0 #cdd2cd,0 6px 10px rgba(0,0,0,.4)}
.kc-carousell img{width:34px; height:34px; display:block}
.kc-dribbble{background:linear-gradient(180deg,#f06ba0,#d62e74); border-color:#811647; box-shadow:0 4px 0 #811647,0 6px 10px rgba(0,0,0,.4); color:#fff}
.kc-behance{background:linear-gradient(180deg,#3b7bff,#0057f0); border-color:#003db0; box-shadow:0 4px 0 #003db0,0 6px 10px rgba(0,0,0,.4); color:#fff}
.kc-facebook{background:linear-gradient(180deg,#3b80f0,#1457c2); border-color:#0c3880; box-shadow:0 4px 0 #0c3880,0 6px 10px rgba(0,0,0,.4); color:#fff}
.kc-linkedin{background:linear-gradient(180deg,#1a86d0,#0a5599); border-color:#063a6b; box-shadow:0 4px 0 #063a6b,0 6px 10px rgba(0,0,0,.4); color:#fff}
.kc-ig:hover,.kc-x:hover,.kc-carousell:hover,.kc-dribbble:hover,.kc-behance:hover,.kc-facebook:hover,.kc-linkedin:hover{filter:brightness(1.12); color:#fff}
.kc-ig.kc-down,.kc-x.kc-down,.kc-carousell.kc-down,.kc-dribbble.kc-down,.kc-behance.kc-down,.kc-facebook.kc-down,.kc-linkedin.kc-down{box-shadow:0 1px 0 rgba(0,0,0,.55),0 2px 5px rgba(0,0,0,.4)}
/* blog card topical watermark (per category, line-icon, no stock photos) */
.bc-thumb::before{content:""; position:absolute; z-index:0; width:46%; aspect-ratio:1; right:-3%; top:20%; background:var(--bc-ico) center/contain no-repeat; opacity:.2; pointer-events:none}
.cat-price{--bc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E")}
.cat-design{--bc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='9' y1='21' x2='9' y2='9'/%3E%3C/svg%3E")}
.cat-seo{--bc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")}
.cat-tips{--bc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7 4 4 0 0 1 1 2.3h6a4 4 0 0 1 1-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E")}
.cat-ecom{--bc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E")}
/* legal pages (terms / privacy) */
.legal{padding:clamp(40px,7vh,90px) 0 clamp(50px,8vh,100px)}
.legal>.wrap{max-width:860px}
.legal h1{font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3rem); font-weight:700; margin:12px 0 4px; letter-spacing:-.02em}
.legal-meta{color:var(--ink-soft); font-size:.9rem; margin-bottom:26px}
.legal-lead{font-size:1.15rem; line-height:1.6; color:var(--ink); max-width:64ch; margin-bottom:6px}
.legal h2{font-family:var(--font-display); font-size:1.32rem; font-weight:600; margin:34px 0 8px}
.legal p{max-width:68ch; line-height:1.7; color:var(--ink-soft); margin-bottom:6px}
.legal p a{color:var(--accent); font-weight:600}
.legal strong{color:var(--ink)}
.legal-foot-note{margin-top:42px; font-size:1.05rem}
.legal-foot{border-top:1px solid var(--line); padding:28px 0; margin-top:10px}
.legal-foot>.wrap{max-width:860px}
.legal-foot .foot-meta{display:flex; flex-direction:column; gap:9px; color:var(--ink-soft); font-size:.9rem; text-align:left; align-items:flex-start}
.legal-foot .brand{font-size:1.05rem}
.legal-foot a{color:var(--ink-soft)}
.legal-foot a:hover{color:var(--accent)}
/* Grow Panel demo (?edit=1) */
.gw-edit .gw-editable{cursor:pointer; outline:2px dashed transparent; outline-offset:5px; border-radius:5px; transition:outline-color .15s, background .15s; position:relative}
.gw-edit .gw-editable:hover, .gw-edit .gw-editable:focus-visible{outline-color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent)}
.gw-edit .gw-editable::after{content:"Edit"; position:absolute; top:-12px; left:-4px; background:var(--accent); color:var(--accent-ink); font-family:var(--font-body); font-size:.58rem; font-weight:700; padding:2px 8px; border-radius:20px; opacity:0; transition:opacity .15s; pointer-events:none; text-transform:uppercase; letter-spacing:.05em; line-height:1.5}
.gw-edit .gw-editable:hover::after, .gw-edit .gw-editable:focus-visible::after{opacity:1}
.gw-editbar{position:fixed; top:0; left:0; right:0; z-index:200; background:#12140e; color:#edeee3; display:flex; align-items:center; gap:10px; padding:9px 18px; font-family:var(--font-body); font-size:.88rem; box-shadow:0 2px 16px rgba(0,0,0,.35)}
.gw-editbar b{color:#62c084; flex:none}
.gw-editbar-dot{width:8px; height:8px; border-radius:50%; background:#62c084; box-shadow:0 0 0 4px rgba(98,192,132,.22); flex:none}
.gw-editbar-txt{color:#a7a99a; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gw-exit{flex:none; background:#2c3122; color:#edeee3; border:1px solid #000; border-radius:8px; padding:6px 14px; font-weight:600; cursor:pointer; font-family:var(--font-body)}
.gw-exit:hover{background:#363d2a}
.gw-has-editbar{padding-top:42px}
.gw-has-editbar header{top:42px}
.gw-pop{position:fixed; inset:0; z-index:220; background:rgba(8,10,6,.55); display:none; align-items:center; justify-content:center; padding:20px}
.gw-pop.open{display:flex}
.gw-pop-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; width:min(440px,100%); padding:22px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
.gw-pop-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:13px}
.gw-pop-head b{font-size:1.05rem}
.gw-pop-x{background:none; border:none; font-size:1.6rem; line-height:1; color:var(--ink-soft); cursor:pointer; padding:0 4px}
.gw-pop-ta{width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; font-family:var(--font-body); font-size:1rem; color:var(--ink); background:var(--bg); resize:vertical; line-height:1.5; box-sizing:border-box}
.gw-pop-ta:focus{outline:2px solid var(--accent); outline-offset:1px}
.gw-pop-foot{display:flex; align-items:center; justify-content:space-between; margin-top:15px; gap:12px; flex-wrap:wrap}
.gw-pop-hint{color:var(--ink-soft); font-size:.85rem}
.gw-pop-btns{display:flex; gap:8px}
.gw-pop-cancel{background:none; border:1px solid var(--line); border-radius:9px; padding:9px 16px; font-weight:600; color:var(--ink); cursor:pointer; font-family:var(--font-body)}
.gw-pop-pub{background:var(--accent); color:var(--accent-ink); border:none; border-radius:9px; padding:9px 20px; font-weight:700; cursor:pointer; font-family:var(--font-body)}
.gw-pop-pub:hover{filter:brightness(1.06)}
.gw-toast{position:fixed; bottom:26px; left:50%; transform:translate(-50%,18px); z-index:240; background:#12140e; color:#edeee3; padding:12px 22px; border-radius:30px; font-size:.9rem; font-weight:600; box-shadow:0 14px 34px rgba(0,0,0,.4); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none}
.gw-toast.show{opacity:1; transform:translate(-50%,0)}
.price-sub{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px}
.mini{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px}
.mini h3{font-size:1.25rem} .mini .price{font-size:1.9rem; margin:6px 0}
.mini p{color:var(--ink-soft); font-size:.92rem; margin:8px 0 16px}
/* pricing blocks — Build / Maintain / Grow */
.price-block{margin-top:44px}
.price-block-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:28px}
.price-block-num{font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.04em}
.price-block-title{font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,3.2vw,1.7rem); margin:0; line-height:1.1}
.price-block-tag{margin-left:auto; font-size:.78rem; font-weight:600; color:var(--ink-soft); background:var(--surface-2); padding:5px 12px; border-radius:999px; white-space:nowrap}
.price-block .price-grid, .price-block .price-sub{margin-top:0}

/* === case-study deck (proof) — AskPhill-style scatter + growuild.com preview hover === */
.case-deck{display:flex; justify-content:center; align-items:flex-start; margin-top:44px; padding:24px 0 34px}
.case-card{position:relative; flex:0 0 clamp(224px,20vw,278px); display:flex; flex-direction:column; text-decoration:none;
  --rot:0deg; --fx:0px; --cbg:#eee; --ctext:#1a1a1a;
  background:var(--cbg); color:var(--ctext); border-radius:18px; overflow:hidden;
  box-shadow:0 14px 36px -18px rgba(0,0,0,.4);
  opacity:0; transform:translateX(var(--fx)) translateY(42px) rotate(0deg) scale(.9);
  transition:opacity .6s var(--ease), transform .7s var(--ease), box-shadow .4s var(--ease); will-change:transform,opacity}
.case-card:not(:first-child){margin-left:-40px}
.case-card:nth-child(even){margin-top:48px}
.case-card[data-tone="ink"]{--cbg:#e8e6e0; --ctext:#1b1a17}
.case-card[data-tone="chili"]{--cbg:#f9e3d8; --ctext:#a7241f}
.case-card[data-tone="teal"]{--cbg:#d8eae8; --ctext:#155f5e}
.case-card[data-tone="sand"]{--cbg:#ece1d0; --ctext:#6c4f27}
.case-card[data-tone="indigo"]{--cbg:#e3e4f6; --ctext:#3a4aa8}
.case-card:nth-child(1){--rot:-5deg; --fx:155px; z-index:1} .case-card:nth-child(2){--rot:3deg; --fx:78px; z-index:2}
.case-card:nth-child(3){--rot:-2.5deg; --fx:0px; z-index:3} .case-card:nth-child(4){--rot:4deg; --fx:-78px; z-index:4}
.case-card:nth-child(5){--rot:-3.5deg; --fx:-155px; z-index:5}
.case-deck.is-in .case-card{opacity:1; transform:translateX(0) rotate(var(--rot)) scale(1)}
.case-deck.is-in .case-card:nth-child(1){transition-delay:.04s} .case-deck.is-in .case-card:nth-child(2){transition-delay:.12s}
.case-deck.is-in .case-card:nth-child(3){transition-delay:.20s} .case-deck.is-in .case-card:nth-child(4){transition-delay:.28s}
.case-deck.is-in .case-card:nth-child(5){transition-delay:.36s}
.case-deck.is-in .case-card:hover{transform:rotate(0deg) translateY(-16px) scale(1.035); z-index:20; transition-delay:0s; box-shadow:0 28px 64px -22px rgba(0,0,0,.5)}
.case-body{padding:22px 21px 16px}
.case-type{font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.78}
.case-name{font-family:var(--font-display); font-size:1.5rem; font-weight:600; line-height:1.1; margin:8px 0 17px}
.case-meta{display:flex; flex-direction:column; gap:11px; margin:0}
.case-meta>div{display:flex; flex-direction:column; gap:2px}
.case-meta dt{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.55}
.case-meta dd{margin:0; font-size:.98rem; font-weight:600}
.case-meta dd small{display:block; margin-top:3px; font-size:.76rem; font-weight:500; line-height:1.4; opacity:.78}
.case-preview{position:relative; margin:auto 14px 14px; aspect-ratio:16/11; overflow:hidden; border-radius:13px; background:rgba(0,0,0,.06)}
.case-preview img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .45s var(--ease)}
.case-card:hover .case-preview img{transform:scale(1.06)}
.case-view{position:absolute; left:11px; bottom:11px; background:rgba(20,20,20,.78); color:#fff; font-size:.73rem; font-weight:600;
  padding:5px 12px; border-radius:100px; opacity:0; transform:translateY(7px); transition:opacity .3s var(--ease), transform .3s var(--ease); backdrop-filter:blur(4px)}
.case-card:hover .case-view{opacity:1; transform:none}
@media (max-width:900px){
  .case-deck{flex-direction:column; align-items:stretch; gap:18px; padding:8px 0 10px}
  .case-card{flex:auto; margin:0!important; --rot:0deg; --fx:0px}
  .case-deck.is-in .case-card{transform:none}
  .case-deck.is-in .case-card:hover{transform:translateY(-6px)}
  .case-preview{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .case-card,.case-deck.is-in .case-card{transition-duration:.01ms; transform:translateX(0) rotate(var(--rot)) scale(1); opacity:1}
}

/* add-on teaser grid (home) */
.addon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:36px 0 28px}
.addon{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px 22px; font-weight:500}
.addon span{display:block; color:var(--ink-soft); font-size:.85rem; margin-top:4px}

/* proof */
.quote{font-family:var(--font-display); font-style:italic; font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.3; max-width:24ch; font-weight:500}
.quote-by{margin-top:18px; font-weight:600; color:var(--ink-soft); font-style:normal; font-family:var(--font-body); font-size:1rem}
.client-list{list-style:none; display:flex; flex-wrap:wrap; gap:14px; margin-top:40px}
.client-list a{text-decoration:none; border:1px solid var(--line); border-radius:100px; padding:10px 20px; font-weight:600; transition:border-color .2s,color .2s}
.client-list a:hover{border-color:var(--accent); color:var(--accent)}
.client-list span{display:block; font-weight:400; font-size:.8rem; color:var(--ink-soft)}

/* work / why */
.work-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:40px 0}
.work-card{aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface-2); display:grid; place-items:center; color:var(--ink-soft); text-decoration:none; font-family:var(--font-display); font-size:1.3rem; position:relative}
.work-card img{width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease)}
.work-card:hover img{transform:scale(1.04)}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:48px}
.why-item{padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.why-item h3{font-size:1.2rem; margin-bottom:8px}
.why-item p{color:var(--ink-soft); font-size:.95rem}

/* faq */
.faq-list{margin-top:40px; max-width:780px}
details{border-bottom:1px solid var(--line)}
summary{font-family:var(--font-display); font-size:1.15rem; font-weight:600; padding:22px 36px 22px 0; cursor:pointer; list-style:none; position:relative; transition:color .2s}
summary:hover{color:var(--accent)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:4px; top:18px; font-size:1.6rem; color:var(--accent); transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 24px; color:var(--ink-soft); max-width:68ch}

/* final cta */
.final{text-align:center; position:relative; background:transparent}
.final::before{content:""; position:absolute; inset:0; z-index:-2; background:var(--accent-soft); transition:background-color .8s var(--ease)}
.final h2{max-width:18ch; margin-inline:auto}
.final .lead{margin:22px auto 32px; text-align:center}

/* footer */
footer{background:var(--surface-2); border-top:1px solid var(--line); padding-block:56px 40px}
.foot-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px}
.foot-links{list-style:none; display:flex; flex-wrap:wrap; gap:22px}
.foot-links a{text-decoration:none; color:var(--ink-soft); font-size:.9rem}
.foot-links a:hover{color:var(--ink)}
.foot-meta{margin-top:32px; color:var(--ink-soft); font-size:.85rem; display:flex; flex-direction:column; gap:4px}

/* sticky whatsapp */
.wa-fab{position:fixed; right:24px; bottom:24px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:13px}
.wa-bubble{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:16px 16px 4px 16px;
  padding:13px 18px; max-width:250px; font-size:.92rem; opacity:0; transform:translateY(10px) scale(.96);
  transition:opacity .4s var(--ease),transform .4s var(--ease); pointer-events:none}
.wa-bubble.show{opacity:1; transform:none}
.wa-bubble b{display:block; font-family:var(--font-display); font-size:1.04rem; line-height:1.2}
/* PC expand-on-hover WhatsApp pill — growuild.com .wa-float-btn, sized up for legibility */
.wa-float-btn{display:flex; align-items:center; gap:0; background:#25d366; color:#fff; padding:18px; border-radius:50px; text-decoration:none;
  box-shadow:0 6px 22px rgba(37,211,102,.45); overflow:hidden; max-width:64px; height:64px;
  transition:max-width .45s cubic-bezier(.25,.46,.45,.94), gap .45s cubic-bezier(.25,.46,.45,.94), padding .45s cubic-bezier(.25,.46,.45,.94), box-shadow .4s var(--ease)}
.wa-float-btn:hover{max-width:240px; gap:11px; padding:18px 26px 18px 18px; box-shadow:0 10px 30px rgba(37,211,102,.6)}
.wa-float-btn .wa-icon{display:flex; flex:none}
.wa-float-btn .wa-icon svg{width:28px; height:28px}
.wa-text{font-weight:700; font-size:1rem; white-space:nowrap; opacity:0; transform:translateX(-10px); transition:opacity .3s ease .1s, transform .3s ease .1s}
.wa-float-btn:hover .wa-text{opacity:1; transform:none}

/* cursor */
.cursor{position:fixed; top:0; left:0; width:30px; height:30px; border:1.5px solid var(--accent); border-radius:50%; pointer-events:none; z-index:90; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .25s,height .25s,background .25s; display:none!important}
.cursor.grow{width:54px; height:54px; background:rgba(98,192,132,.18)}
.cur-enter{position:fixed; top:0; left:0; z-index:91; pointer-events:none; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(165deg,#46d588,#2aa45f 45%,#1c6b3c); color:#fff; font-size:17px; font-weight:800; line-height:1; border:1px solid rgba(8,25,15,.55); box-shadow:0 5px 0 #0e3a20, 0 15px 24px -8px rgba(20,80,46,.7), inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(8,25,15,.32); text-shadow:0 1px 1px rgba(8,25,15,.4); opacity:0; transition:opacity .18s ease}
.cur-enter.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.hl{color:var(--accent); font-weight:700; font-style:normal}

/* ============ ADD-ONS CATALOGUE + CART ============ */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 8px}
.chip{border:1.5px solid var(--line); background:transparent; color:var(--ink-soft); padding:9px 18px; border-radius:100px; font-weight:600; font-size:.9rem; cursor:pointer; transition:all .2s}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px}
.cat-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:6px; transition:border-color .2s, transform .2s}
.cat-card.in-cart{border-color:var(--accent)}
.cat-card .name{font-family:var(--font-display); font-size:1.2rem; font-weight:600}
.cat-card .desc{color:var(--ink-soft); font-size:.9rem; flex:1}
.cat-card .row{display:flex; align-items:center; justify-content:space-between; margin-top:14px}
.cat-card .amt{font-family:var(--font-display); font-weight:700; font-size:1.3rem}
.add-btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1.5px solid var(--accent); color:var(--accent); background:transparent; border-radius:100px; padding:8px 18px; font-weight:600; font-size:.9rem; cursor:pointer; transition:all .2s}
.add-btn:hover{background:var(--accent-soft)}
.add-btn.added{background:var(--accent); color:var(--accent-ink)}
.bundle-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px}
.bundle{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.bundle h3{font-size:1.25rem} .bundle .amt{font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--accent); margin:6px 0}
.bundle ul{list-style:none; margin:12px 0 18px; display:flex; flex-direction:column; gap:6px; font-size:.88rem; color:var(--ink-soft)}

/* cart bar */
.cart-bar{position:fixed; left:0; right:0; bottom:0; z-index:62; background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -18px 50px -28px rgba(0,0,0,.55); transform:translateY(120%); transition:transform .42s var(--ease)}
.cart-bar::before{content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.55}
.cart-bar.show{transform:none}
.cart-inner{max-width:var(--wrap); margin-inline:auto; padding:13px clamp(20px,5vw,56px); display:flex; align-items:center; gap:14px}
.cart-info{display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto}
.cart-count{display:inline-flex; align-items:center; gap:6px; flex:none; background:var(--accent-soft); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); border-radius:100px; padding:6px 13px 6px 10px; font-weight:700; font-size:.82rem; white-space:nowrap}
.cart-ico{width:15px; height:15px; flex:none}
.cart-meta{display:flex; flex-direction:column; min-width:0; line-height:1.12}
.cart-total{font-family:var(--font-display); font-weight:700; font-size:1.4rem; display:inline-block; transform-origin:left center}
.cart-total.bump{animation:cartBump .42s var(--ease)}
@keyframes cartBump{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}
.cart-items{font-size:.8rem; color:var(--ink-soft); max-width:38ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cart-actions{display:flex; gap:10px; align-items:center; flex:none}
.cart-clear{background:transparent; border:1px solid var(--line); color:var(--ink-soft); border-radius:100px; padding:9px 16px; font-size:.8rem; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s}
.cart-clear:hover{border-color:var(--ink-soft); color:var(--ink)}
.cart-review{display:inline-flex; align-items:center; gap:7px}
.cart-review::after{content:""; width:15px; height:15px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .2s var(--ease)}
.cart-review:hover::after{transform:translateX(3px)}
@media (max-width:560px){
  .cart-inner{flex-wrap:wrap; padding:10px clamp(20px,5vw,56px) 12px; gap:9px}
  .cart-info{flex:1 1 100%; gap:11px}
  .cart-total{font-size:1.2rem}
  .cart-items{display:none}
  .cart-count{padding:5px 12px 5px 9px; font-size:.78rem; gap:5px}
  .cart-ico{width:14px; height:14px}
  .cart-actions{flex:1 1 100%; justify-content:flex-end; gap:10px}
  .cart-clear{padding:9px 15px; font-size:.8rem}
  .cart-review{flex:0 0 auto; padding:11px 18px}
}

/* a11y / focus */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-999px; top:8px; background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px; z-index:100}
.skip:focus{left:8px}

/* responsive */
@media(max-width:880px){
  .nav-links{display:none}
  .menu-toggle{display:grid}
  .price-grid,.price-sub,.why-grid{grid-template-columns:1fr}
  .addon-grid,.work-cards,.cat-grid{grid-template-columns:1fr 1fr}
  .bundle-row{grid-template-columns:1fr 1fr}
  .nav-cta{display:none}
}
@media(max-width:520px){
  .addon-grid,.work-cards,.cat-grid,.bundle-row{grid-template-columns:1fr}
  .hero-trust{gap:18px}
  .cart-items{display:none}
}

/* theme wipe (copied from growuild.com criss-cross clip-path) — sits BEHIND content so it never covers text/elements */
/* theme wipe — 1:1 with growuild.com: fixed full-viewport overlay ABOVE content (z-index 5),
   painted with the NEW theme bg, revealed by an expanding clip-path circle. Sweeps the whole site. */
.theme-wipe{position:fixed; inset:0; z-index:-1; pointer-events:none; clip-path:circle(0% at 100% 0%)}
.theme-wipe.wipe-to-light{background:#f6f3ec; clip-path:circle(0% at 100% 0%); transition:clip-path 1s var(--ease)}
.theme-wipe.wipe-to-light.active{clip-path:circle(150% at 100% 0%)}
.theme-wipe.wipe-to-dark{background:#12140e; clip-path:circle(0% at 0% 0%); transition:clip-path 1s var(--ease)}
.theme-wipe.wipe-to-dark.active{clip-path:circle(150% at 0% 0%)}
/* opaque surfaces cross-fade their background in sync with the wipe */
.promise, .faq-chat, footer{transition:background-color .8s var(--ease), border-color .8s var(--ease)}
@media (prefers-reduced-motion: reduce){ .promise, .faq-chat, footer{transition:none} }
#themeBtn svg{transition:transform .6s var(--ease)}
#themeBtn.spin svg{transform:rotate(360deg)}

/* rotating WhatsApp notification (copied from growuild.com) */
.wa-rotating{position:relative; height:18px; overflow:hidden; margin-top:3px}
.wa-rot{position:absolute; inset:0; font-size:.76rem; color:var(--ink-soft); white-space:nowrap; opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.wa-rot.active{opacity:1; transform:none}

/* trust strip (after hero) */
.trust-strip{border-bottom:1px solid var(--line); background:var(--surface)}
.trust-strip .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; padding-block:15px; font-size:.9rem; color:var(--ink-soft)}
.trust-strip b{color:var(--ink); font-family:var(--font-display); font-weight:700}
.trust-strip .ts-clients{font-weight:600; color:var(--ink)}
.trust-strip .ts-sep{width:1px; height:15px; background:var(--line); display:inline-block}

/* repeated CTA band */
.cta-band{text-align:center; padding-block:clamp(18px,3vh,34px)}
#proof{padding-bottom:clamp(16px,3vh,30px)}
#proof + .cta-band{padding-top:0}
.cta-band p{font-family:var(--font-display); font-size:clamp(1.3rem,2.7vw,2rem); font-weight:600; margin-bottom:18px; color:var(--ink); max-width:24ch; margin-inline:auto}
.cta-band-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* === mobile sticky bar — growuild.com .wa-mobile-bar (glass bar + pulse/shine pill) === */
.wa-mobile-bar{display:none; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:60;
  align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg, rgba(255,253,248,.95), rgba(244,247,242,.92)); backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border:1px solid rgba(28,107,60,.26); box-shadow:0 12px 34px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.6); transition:opacity .4s ease, transform .55s cubic-bezier(.34,0,.2,1)}
.wa-mobile-bar.is-scrolling{opacity:0; transform:translateY(160%); pointer-events:none}
[data-theme="dark"] .wa-mobile-bar{background:linear-gradient(135deg, rgba(27,30,21,.96), rgba(35,39,27,.93)); border-color:rgba(98,192,132,.3)}
.wa-mobile-content{min-width:0; flex:1}
.wa-mobile-headline b{display:block; font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.16; color:var(--ink)}
.wa-mobile-rotating{height:18px; margin-top:2px}
.wa-mobile-rotating .wa-rot{font-size:.78rem}
.wa-mobile-cta{position:relative; flex:none; display:flex; align-items:center; gap:7px; height:46px; padding:0 17px; border-radius:24px; text-decoration:none; color:#fff;
  font-weight:700; font-size:.86rem; white-space:nowrap; overflow:hidden; background:linear-gradient(135deg,#2cdb6f,#25d366 55%,#1fb755); box-shadow:0 3px 12px rgba(37,211,102,.45); animation:waCtaPulse 2.4s ease-in-out infinite}
.wa-mobile-cta svg{width:18px; height:18px; flex:none}
.wa-mobile-cta>*{position:relative; z-index:1}
.wa-mobile-cta::after{content:""; position:absolute; top:0; left:-80%; width:50%; height:100%; transform:skewX(-20deg); pointer-events:none;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.45) 50%, transparent); animation:waCtaShine 3.6s ease-in-out infinite}
.wa-mobile-cta:active{transform:scale(.96)}
@keyframes waBarBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes waCtaPulse{0%,100%{box-shadow:0 2px 10px rgba(37,211,102,.4),0 0 0 0 rgba(37,211,102,.35)}50%{box-shadow:0 4px 16px rgba(37,211,102,.55),0 0 0 7px rgba(37,211,102,0)}}
@keyframes waCtaShine{0%,70%{left:-80%}85%{left:120%}100%{left:120%}}
/* desktop shows the float pill, mobile shows the bar */
@media(max-width:768px){ .wa-fab{display:none} .wa-mobile-bar{display:flex} body{padding-bottom:88px} }

/* 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}
  .word .inner{transform:none!important}
  .reveal,.stagger>*{opacity:1!important; transform:none!important}
  .marquee-track{animation:none!important}
}

/* ── image skeleton (shimmer cover that lifts on image load) + scroll-progress bar ── */
.img-skel{position:relative; overflow:hidden}
.img-skel::after{content:""; position:absolute; inset:0; z-index:4; pointer-events:none; background-color:var(--surface);
  background-image:linear-gradient(100deg, transparent 18%, color-mix(in srgb,var(--ink) 9%, transparent) 48%, transparent 78%);
  background-size:220% 100%; animation:skelShim 1.4s linear infinite}
.img-skel.is-loaded::after{opacity:0; animation:none; transition:opacity .45s ease}
@keyframes skelShim{0%{background-position:130% 0}100%{background-position:-130% 0}}
.scroll-prog{position:fixed; top:0; left:0; height:3px; width:0; z-index:200; pointer-events:none;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 50%, #fff));
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 55%, transparent); transition:width .12s linear}

/* ── FAQ: SMS-style chat thread ───────────────────────── */
#faq .faq-chat{max-width:760px;margin:34px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 34px 70px -46px rgba(0,0,0,.5)}
.faq-chat-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.faq-chat-head .ava{width:42px;height:42px;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.faq-chat-head .ava img{width:24px;height:24px}
.faq-chat-id b{font-family:var(--font-display);font-size:1.06rem;color:var(--ink);line-height:1.15;display:block}
.faq-chat-id small{color:var(--ink-soft);font-size:.8rem}
.faq-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.faq-tab{font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.faq-tab:hover{color:var(--ink)}
.faq-tab.is-active{background:#1c6b3c;color:#fff;border-color:#1c6b3c}
.faq-threads{padding:22px 20px}
.faq-thread{display:none;flex-direction:column;gap:16px}
.faq-thread.is-active{display:flex;animation:faqIn .45s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.faq-qa{display:flex;flex-direction:column;gap:0}
.faq-ask{align-self:flex-end;max-width:84%;text-align:left;font:inherit;font-weight:600;font-size:.97rem;line-height:1.35;color:#fff;background:#1c6b3c;border:none;border-radius:19px 19px 6px 19px;padding:12px 16px;cursor:pointer;box-shadow:0 8px 20px -12px rgba(28,107,60,.9);transition:transform .14s ease,filter .14s ease}
.faq-ask:hover{filter:brightness(1.06);transform:translateY(-1px)}
.faq-ask:active{transform:translateY(0)}
.faq-reply{align-self:flex-start;max-width:86%;display:flex;align-items:flex-end;gap:9px}
.faq-reply[hidden]{display:none}
/* SMS-style fluid open/close — JS wraps each reply in .faq-collapse */
.faq-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.faq-collapse.is-open{grid-template-rows:1fr}
.faq-collapse>.faq-reply{align-self:stretch;justify-self:start;overflow:hidden;min-height:0;opacity:0;transform:translateY(6px);transition:opacity .3s ease .05s,transform .36s var(--ease) .05s}
.faq-collapse.is-open>.faq-reply{opacity:1;transform:none}
.faq-collapse>.faq-reply>.ava,.faq-collapse>.faq-reply>.bub{margin-top:10px}
@media (prefers-reduced-motion:reduce){.faq-collapse{transition:none}.faq-collapse>.faq-reply{transition:none;transform:none}}
.faq-reply .ava{width:30px;height:30px;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;flex:none;margin-bottom:2px}
.faq-reply .ava img{width:17px;height:17px}
.faq-reply .bub{margin:0;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:6px 19px 19px 19px;padding:12px 16px;font-size:.95rem;line-height:1.55}
.faq-typing{display:inline-flex;gap:5px;padding:3px 2px}
.faq-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);opacity:.45;animation:faqType 1s infinite ease-in-out}
.faq-typing i:nth-child(2){animation-delay:.16s}
.faq-typing i:nth-child(3){animation-delay:.32s}
@keyframes faqType{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:.95}}
@media (max-width:560px){#faq .faq-chat{border-radius:22px}.faq-ask,.faq-reply{max-width:92%}.faq-threads{padding:18px 14px}}

/* ===== Phase D — motion core ===== */
.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}
/* vertical text-roll on buttons + nav links (label rolls up, identical copy rolls in) */
.btn-flip{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.btn-flip>span{display:block;transition:transform .42s cubic-bezier(.66,0,.34,1)}
.btn-flip>span:nth-child(2){position:absolute;top:100%;left:0;width:100%;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .btn:hover .btn-flip>span,.nav-links a:hover .btn-flip>span{transform:translateY(-100%)}
}
/* WhatsApp card — vibrancy (accent ring/glow) + drawn confirmation tick */
.wa-tick{display:inline-block;width:17px;height:17px;vertical-align:-2px;margin-right:7px}
.wa-tick path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .55s var(--ease) .25s}
.wa-bubble.show .wa-tick path,.wa-mobile-bar.show .wa-tick path{stroke-dashoffset:0}
.wa-bubble{border-color:color-mix(in srgb,var(--accent) 32%,var(--line));box-shadow:var(--shadow),0 10px 28px -14px color-mix(in srgb,var(--accent) 55%,transparent)}
.wa-mobile-bar{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
/* footer email key — click-to-copy feedback */
.kc-copied{background:linear-gradient(180deg,#3cc176,#21794a)!important;color:#fff!important}
/* keyboard footer — mobile cleanup: hide decorative fillers, email becomes its own full-width row */
@media (max-width:600px){
  .kc-mod,.kc-fill{display:none}
  .kc-space{flex:1 1 100%;min-width:0}
  .kb-row{gap:6px}
  .kc-sq{width:46px;min-width:46px}
}

/* ===== Phase E — add-ons: premium cards + receipt checkout ===== */
@media (hover:hover) and (pointer:fine){
  .cat-card,.bundle{transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)}
  .cat-card:hover,.bundle:hover{transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); box-shadow:0 18px 40px -26px rgba(0,0,0,.4)}
  .add-btn{transition:background .2s, color .2s, transform .15s}
  .add-btn:active{transform:scale(.95)}
}
.cat-card.in-cart{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.add-btn.added{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.cart-bar{box-shadow:0 -14px 40px -24px rgba(0,0,0,.4)}
/* receipt checkout modal */
.receipt-modal{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(10,14,9,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease)}
.receipt-modal.open{opacity:1; pointer-events:auto}
.receipt-sheet{position:relative; width:min(450px,100%); max-height:88vh; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:20px; box-shadow:0 40px 90px -28px rgba(0,0,0,.6); padding:clamp(22px,4vw,30px); transform:translateY(18px) scale(.98); transition:transform .3s var(--ease)}
.receipt-modal.open .receipt-sheet{transform:none}
.receipt-x{position:absolute; top:13px; right:13px; width:34px; height:34px; display:grid; place-items:center; border:none; background:var(--surface-2); color:var(--ink-soft); border-radius:50%; font-size:1.4rem; line-height:1; cursor:pointer; transition:background .2s,color .2s}
.receipt-x:hover{background:var(--line); color:var(--ink)}
.receipt-head{display:flex; gap:12px; align-items:center; margin-bottom:16px; padding-right:34px}
.receipt-brandmark{flex:none; width:42px; height:42px; border-radius:12px; background:var(--accent-soft); display:grid; place-items:center}
.receipt-title{font-family:var(--font-display); font-size:1.35rem; font-weight:600; line-height:1.1; margin:0}
.receipt-count{display:inline-flex; align-items:center; margin-top:6px; background:var(--accent-soft); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); border-radius:100px; padding:3px 11px; font-size:.76rem; font-weight:700}
.receipt-items{display:flex; flex-direction:column}
.receipt-row{display:grid; grid-template-columns:24px 1fr auto; gap:10px; align-items:center; padding:12px 0; border-bottom:1px dashed var(--line)}
.r-remove{width:22px; height:22px; display:grid; place-items:center; border:none; background:transparent; color:var(--ink-soft); border-radius:50%; font-size:1.2rem; line-height:1; cursor:pointer; transition:background .2s,color .2s}
.r-remove:hover{background:color-mix(in srgb,#c0392b 14%,transparent); color:#c0392b}
.r-name{font-size:.96rem; line-height:1.3}
.r-price{font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.receipt-total-row{display:flex; justify-content:space-between; align-items:baseline; padding-top:15px; margin-top:4px; border-top:2px solid var(--ink)}
.receipt-total-row>span:first-child{font-weight:600; font-size:.95rem}
.receipt-total{font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--accent); display:inline-block; transform-origin:right center}
.receipt-total.bump{animation:cartBump .42s var(--ease)}
.receipt-note{font-size:.8rem; color:var(--ink-soft); margin:12px 0 16px; line-height:1.5}
.receipt-send{width:100%; justify-content:center; gap:8px}
.receipt-send::after{content:""; width:16px; height:16px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .2s var(--ease)}
.receipt-send:hover::after{transform:translateX(3px)}
.receipt-actions{display:flex; justify-content:center; gap:10px; margin-top:14px}
.receipt-clear,.receipt-keep{background:transparent; border:1px solid var(--line); color:var(--ink-soft); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; border-radius:100px; padding:8px 16px; transition:border-color .15s,color .15s,background .15s}
.receipt-clear:hover{border-color:#c0392b; color:#c0392b}
.receipt-keep{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.receipt-keep:hover{border-color:var(--accent); background:var(--accent-soft)}
@media (max-width:500px){
  .receipt-modal{align-items:flex-end; padding:0}
  .receipt-sheet{width:100%; max-height:90vh; border-radius:20px 20px 0 0; transform:translateY(100%)}
  .receipt-modal.open .receipt-sheet{transform:none}
}