/* MUST be inherits:true — the divider/handle/clip-path read var(--p) on CHILD elements of .reveal, but the JS sets --p on .reveal itself. With false, every child resolves --p to the 50% initial value forever and the sliders freeze (this was the root cause of "the sliders don't work"). */ @property --p { syntax: ""; inherits: true; initial-value: 50%; } /* ============================================================ THEME TOKENS Two themes, one set of names. [data-theme] lands on before first paint (inline script in the page head — see build/layout.mjs), so there is no flash of the wrong theme, and the site still renders in dark if the script never runs. Names describe the ROLE, not the colour: `--band` is "the contrasting section", not "the black one". That is the whole trick — both themes share every layout rule below, and only these ~40 values change. Deliberately IDENTICAL in both themes, because they are the brand: - the lime accent on fills — buttons, marquee, offer band, slider handle - the icon tiles: a lime glyph on a near-black rounded tile is the logo's own contrast, and it reads on white as well as it does on black - the footer, which stays dark so the lime logo keeps an anchor. It pins its own text tokens (see the footer rule) so its children stay legible. Deliberately DIFFERENT: - `--accent-ink` — the accent used as TEXT. #A7F000 on white is about 1.6:1 and fails WCAG at every size, so light mode uses #4E7300 (5.9:1). Fills are unaffected: lime with carbon text passes either way. - decor and grain opacity. The lightning bolts and splash clusters are drawn for black; at full strength on white they read as dirt, so light mode fades them to a watermark. ============================================================ */ :root, [data-theme="dark"]{ color-scheme:dark; --bg:#0B0B0B; --band:#000000; --band-a:#0B0B0B; --band-b:#000000; --hero-a:#202020; --hero-b:#000000; --surface:#141414; --surface-soft:rgba(255,255,255,.028); --surface-soft-2:rgba(255,255,255,.05); --panel-a:#191919; --panel-b:#131313; --panel-deep:#0E0E0E; --panel-bar-a:#1E1E1E; --panel-bar-b:#151515; --input-bg:#0E0E0E; --tile-a:#161616; --tile-2:#232323; --text:#D8D8D8; --text-mute:#9B9B9B; --heading:#FFFFFF; --line:#3A3A3A80; --line-solid:#2C2C2C; --line-hover:#3F3F3F; --accent-ink:#A7F000; --accent-line:rgba(167,240,0,.42); --chip-fg:#C0C0C0; --chip-bg:rgba(192,192,192,.09); --chip-line:rgba(192,192,192,.32); --err-text:#FF8A5C; --err-bg:rgba(193,68,14,.12); --err-line:rgba(193,68,14,.5); --nav-bg:rgba(11,11,11,.7); --nav-bg-scrolled:rgba(6,6,6,.82); --nav-panel:rgba(0,0,0,.92); --mcta-bg:rgba(0,0,0,.88); --shadow:rgba(0,0,0,.4); --decor:1; --decor-dim:.5; --grain:.35; } [data-theme="light"]{ color-scheme:light; --bg:#F4F4F2; --band:#FFFFFF; --band-a:#FFFFFF; --band-b:#F7F7F4; --hero-a:#FFFFFF; --hero-b:#EDEDE8; --surface:#FFFFFF; --surface-soft:#FAFAF7; --surface-soft-2:#F0F0EC; --panel-a:#FFFFFF; --panel-b:#F7F7F4; --panel-deep:#FFFFFF; --panel-bar-a:#F7F7F4; --panel-bar-b:#EFEFEA; --input-bg:#FFFFFF; /* tiles stay dark on purpose — see the note above */ --tile-a:#161616; --tile-2:#1C1C1C; --text:#3A3A38; --text-mute:#5F5F5C; --heading:#111111; --line:#DEDEDA; --line-solid:#E2E2DE; --line-hover:#C9C9C4; --accent-ink:#4E7300; --accent-line:rgba(78,115,0,.45); --chip-fg:#4A4A47; --chip-bg:#FFFFFF; --chip-line:#DEDEDA; --err-text:#A83A0C; --err-bg:rgba(193,68,14,.08); --err-line:rgba(193,68,14,.35); --nav-bg:rgba(11,11,11,.66); --nav-bg-scrolled:rgba(6,6,6,.8); --nav-panel:rgba(0,0,0,.94); --mcta-bg:rgba(255,255,255,.9); --shadow:rgba(0,0,0,.12); --decor:.24; --decor-dim:.16; --grain:.14; } :root{ /* brand constants — the same in every theme */ --carbon:#0B0B0B; --black:#000000; --green:#A7F000; --green-hot:#E4FF00; --green-600:#4E7300; --rust:#C1440E; --nav-h:74px; --wrap:1180px; --r:14px; } *{box-sizing:border-box} html{scroll-behavior:smooth} ::selection{background:var(--green);color:var(--black)} body{ margin:0; font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.65; overflow-x:clip; } h1,h2,h3{font-family:"Michroma","Arial Black",system-ui,sans-serif;font-weight:400;font-style:italic;text-transform:uppercase;line-height:1.14;letter-spacing:.01em;margin:0} p{margin:0} a{color:inherit;text-decoration:none} img,svg{display:block} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .eyebrow{font-family:"Montserrat",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:26px;height:2px;background:currentColor} .eyebrow--band{color:var(--accent-ink)} .skip{position:absolute;left:-999px;top:0;background:var(--green);color:var(--carbon);padding:10px 16px;font-weight:700;z-index:400} .skip:focus{left:12px;top:12px} /* grain overlay for dark sections */ .grain{position:relative} .grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-weight:700;font-size:15px;letter-spacing:.01em; padding:15px 24px;border-radius:9px;border:2px solid transparent; cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease; white-space:nowrap;position:relative;overflow:hidden; } .btn:focus-visible{outline:3px solid var(--green);outline-offset:3px} .btn--primary{background:linear-gradient(180deg,var(--green-hot) 0%,var(--green) 55%);color:var(--carbon);box-shadow:0 7px 0 var(--green-600),0 14px 30px rgba(167,240,0,.28)} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 9px 0 var(--green-600),0 18px 36px rgba(167,240,0,.34)} .btn--primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--green-600)} .btn--ghost{background:rgba(167,240,0,.08);color:var(--accent-ink);border-color:var(--accent-ink)} .btn--ghost:hover{background:var(--green);color:var(--carbon);transform:translateY(-2px)} .btn svg{width:18px;height:18px;flex-shrink:0} @media (prefers-reduced-motion: no-preference){ .btn:hover{animation:btnwiggle .48s ease} .hero::before{animation:decorpulse 9s ease-in-out infinite} .sec--band::before{animation:decorpulse-dim 11.5s ease-in-out infinite} } @keyframes btnwiggle{0%,100%{transform:translateY(-2px) rotate(0)}30%{transform:translateY(-2px) rotate(-1.4deg)}55%{transform:translateY(-2px) rotate(1.1deg)}80%{transform:translateY(-2px) rotate(-.5deg)}} /* mostly calm, then a quick double-flash — reads as an occasional lightning strike, not a steady pulse */ @keyframes decorpulse{0%,66%,100%{opacity:calc(var(--decor) * .82)}70%{opacity:var(--decor)}72%{opacity:calc(var(--decor) * .66)}75%{opacity:var(--decor)}79%{opacity:calc(var(--decor) * .82)}} @keyframes decorpulse-dim{0%,64%,100%{opacity:calc(var(--decor-dim) * .92)}68%{opacity:var(--decor-dim)}70%{opacity:calc(var(--decor-dim) * .64)}73%{opacity:calc(var(--decor-dim) * .88)}77%{opacity:calc(var(--decor-dim) * .92)}} /* ---------- nav ---------- */ header.nav{ /* Dark glass in BOTH themes. The wordmark is silver-on-transparent and disappears on a light bar, and a dark translucent header over a light page is the look Aaron asked for anyway. Flipping this to a light nav needs a light-mode logo asset first. */ --text:#D8D8D8; --text-mute:#9B9B9B; --heading:#FFFFFF; --accent-ink:var(--green); --line:#3A3A3A80; --line-solid:#2C2C2C; --surface-soft-2:rgba(255,255,255,.06); position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease} header.nav.scrolled{background:var(--nav-bg-scrolled);border-bottom-color:var(--line-solid)} .nav__inner{display:flex;align-items:center;gap:26px;height:var(--nav-h)} .brand{display:flex;align-items:center;flex-shrink:0} /* logo PNG is pre-keyed to transparency (assets rebuilt from the master with the black matte removed) — a mix-blend-mode approach fails here because the nav's backdrop-filter isolates descendants' blending in Chromium */ .brand__img{height:56px;width:auto;display:block;filter:drop-shadow(0 4px 12px rgba(167,240,0,.18))} .nav__links{display:flex;gap:26px;margin-left:auto} .nav__links a{font-size:14px;font-weight:600;color:var(--text);letter-spacing:.02em;position:relative;padding:4px 0} .nav__links a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--green);transition:width .22s ease} .nav__links a:hover{color:var(--heading)} .nav__links a:hover::after{width:100%} .nav__phone{display:inline-flex;align-items:center;gap:7px;font-family:"Montserrat",sans-serif;font-weight:700;font-size:13.5px;color:var(--accent-ink)} .nav__phone svg{width:15px;height:15px} .nav__cta{padding:11px 18px;font-size:14px} .nav__burger{display:none;background:none;border:0;cursor:pointer;padding:6px;margin-left:auto} .nav__burger svg{width:26px;height:26px;stroke:var(--heading)} .mobile{display:none;background:var(--nav-panel);border-bottom:1px solid var(--line-solid);overflow:hidden;max-height:0;visibility:hidden;transition:max-height .3s ease,visibility .3s} .mobile.open{max-height:480px;visibility:visible} .mobile__in{padding:14px 24px 22px;display:flex;flex-direction:column;gap:4px} .mobile a{padding:13px 0;font-weight:600;color:var(--text);border-bottom:1px solid var(--line)} .mobile a:last-of-type{border-bottom:0} .mobile .btn{margin-top:12px;color:var(--carbon);font-weight:700;border-bottom:0} .mobile a.mobile__phone{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--accent-ink);padding:13px 0} /* ---------- hero ---------- */ .hero{background:radial-gradient(1000px 600px at 82% -10%, var(--hero-a) 0%, var(--hero-b) 58%);color:var(--text);position:relative;overflow:hidden} /* brand decor: water-splash droplet cluster (echoes the logo splash) and a lightning streak, reused on the hero and dark sections */ .hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--decor);background: radial-gradient(760px 420px at 86% 4%, rgba(167,240,0,.14), transparent 68%), radial-gradient(500px 300px at 6% 100%, rgba(192,192,192,.07), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='%23A7F000'%3E%3Ccircle cx='58' cy='64' r='30' opacity='.13'/%3E%3Ccircle cx='102' cy='42' r='10' opacity='.32'/%3E%3Ccircle cx='132' cy='72' r='6' opacity='.38'/%3E%3Ccircle cx='40' cy='112' r='8' opacity='.28'/%3E%3Ccircle cx='92' cy='96' r='4' opacity='.48'/%3E%3Ccircle cx='152' cy='40' r='3.5' opacity='.48'/%3E%3Ccircle cx='122' cy='122' r='3' opacity='.42'/%3E%3Ccircle cx='172' cy='92' r='5' opacity='.28'/%3E%3Ccircle cx='76' cy='152' r='4' opacity='.33'/%3E%3Ccircle cx='30' cy='40' r='5' opacity='.38'/%3E%3Ccircle cx='162' cy='142' r='2.5' opacity='.48'/%3E%3Ccircle cx='186' cy='60' r='2' opacity='.52'/%3E%3C/g%3E%3Cg fill='%23E4FF00'%3E%3Ccircle cx='96' cy='66' r='3' opacity='.55'/%3E%3Ccircle cx='56' cy='92' r='2.5' opacity='.5'/%3E%3Ccircle cx='142' cy='102' r='2' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -70px top 26px / 320px auto, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 600'%3E%3Cdefs%3E%3Cfilter id='lg' filterUnits='userSpaceOnUse' x='0' y='0' width='300' height='600'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cfilter id='lm' filterUnits='userSpaceOnUse' x='0' y='0' width='300' height='600'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M170 8 L138 110 L182 128 L120 250 L158 268 L96 420 L140 438 L104 592 M120 250 L64 330 L92 344 L50 440 M158 268 L220 340 L192 352 L240 430 M182 128 L232 190 L210 200 L246 268 M96 420 L60 470 L80 480 L58 540' stroke='%23A7F000' stroke-width='12' opacity='.16' filter='url(%23lg)'/%3E%3Cpath d='M170 8 L138 110 L182 128 L120 250 L158 268 L96 420 L140 438 L104 592 M120 250 L64 330 L92 344 L50 440 M158 268 L220 340 L192 352 L240 430 M182 128 L232 190 L210 200 L246 268 M96 420 L60 470 L80 480 L58 540' stroke='%23A7F000' stroke-width='4.5' opacity='.5' filter='url(%23lm)'/%3E%3Cpath d='M170 8 L138 110 L182 128 L120 250 L158 268 L96 420 L140 438 L104 592 M120 250 L64 330 L92 344 L50 440 M158 268 L220 340 L192 352 L240 430 M182 128 L232 190 L210 200 L246 268 M96 420 L60 470 L80 480 L58 540' stroke='%23E4FF00' stroke-width='2' opacity='.85'/%3E%3Cpath d='M170 8 L138 110 L182 128 L120 250 L158 268 L96 420 L140 438 L104 592' stroke='%23F5FFE0' stroke-width='1' opacity='.92'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -30px top 8% / 190px auto} .hero__grid{display:grid;grid-template-columns:1.02fr 1.12fr;gap:58px;align-items:center;padding:76px 24px 96px;position:relative;z-index:1} .hero__copy>*{opacity:0;transform:translateY(18px);animation:rise .75s cubic-bezier(.2,.7,.2,1) forwards} .hero__copy .hero__badge{animation-delay:.04s} .hero__copy h1{animation-delay:.14s} .hero__copy .hero__sub{animation-delay:.27s} .hero__copy .hero__cta{animation-delay:.4s} .hero__copy .hero__trust{animation-delay:.53s} @keyframes rise{to{opacity:1;transform:none}} .hero__badge{display:inline-flex;align-items:center;gap:9px;font-family:"Montserrat",sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);background:rgba(167,240,0,.09);border:1px solid rgba(167,240,0,.35);border-radius:99px;padding:8px 15px} .hero__badge .dotlive{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(167,240,0,.6);animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(167,240,0,.55)}70%{box-shadow:0 0 0 9px rgba(167,240,0,0)}100%{box-shadow:0 0 0 0 rgba(167,240,0,0)}} .hero h1{font-size:clamp(24px,3.2vw,40px);color:var(--heading);margin:22px 0 0;text-wrap:balance} .hero h1 .hl{color:var(--accent-ink);text-shadow:0 0 34px rgba(167,240,0,.35)} .hero__sub{font-size:clamp(16px,1.6vw,19px);color:var(--text);max-width:30em;margin-top:20px} .hero__sub b{color:var(--heading)} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .hero__trust{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:28px;font-size:13.5px;color:var(--text-mute)} .hero__trust svg{width:15px;height:15px;stroke:var(--accent-ink);fill:none} .titem{display:inline-flex;align-items:center;gap:6px} .dot{width:4px;height:4px;border-radius:50%;background:var(--text-mute);display:inline-block} /* ---------- reveal widget ---------- */ .panel{background:var(--panel-deep);border:1px solid var(--line-solid);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(167,240,0,.06);overflow:hidden} .panel__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 17px;border-bottom:1px solid var(--line-solid);background:linear-gradient(180deg,var(--panel-bar-a),var(--panel-bar-b))} .panel__bar .gauge{font-family:"Montserrat",sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.12em;color:var(--accent-ink);display:flex;align-items:center;gap:9px} .gauge .dotlive{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(167,240,0,.6);animation:pulse 1.8s infinite} .panel__bar .hint{font-family:"Montserrat",sans-serif;font-size:11px;letter-spacing:.1em;color:var(--text-mute);text-transform:uppercase} .reveal{position:relative;width:100%;aspect-ratio:640/470;touch-action:none;cursor:ew-resize;user-select:none;transition:--p 1.35s cubic-bezier(.4,.08,.18,1);background:var(--panel-deep)} .reveal.is-dragging{transition:none} .reveal__layer{position:absolute;inset:0} .reveal__layer svg{width:100%;height:100%} .reveal__layer img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none} .reveal:focus-within{transition-duration:.3s} /* keyboard steps shouldn't float for 1.35s */ .reveal__dirty{clip-path:inset(0 0 0 var(--p))} .reveal__tag{position:absolute;top:13px;font-family:"Montserrat",sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.15em;padding:6px 10px;border-radius:6px;text-transform:uppercase;pointer-events:none;backdrop-filter:blur(3px)} .reveal__tag--clean{left:13px;background:rgba(167,240,0,.93);color:var(--carbon)} /* These two labels sit ON the artwork, not on a page surface, so their contrast pair is fixed in both themes — themed text would put light-mode ink on this deliberately black chip. */ .reveal__tag--dirty{right:13px;background:rgba(0,0,0,.8);color:#D8D8D8;border:1px solid rgba(255,255,255,.12)} .reveal__real{position:absolute;bottom:13px;left:13px;font-family:"Montserrat",sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.15em;padding:6px 10px;border-radius:6px;text-transform:uppercase;pointer-events:none;backdrop-filter:blur(3px);background:rgba(167,240,0,.93);color:var(--carbon)} /* A sample is not a credential, so it does not get the lime badge. */ .reveal__real--sample{background:rgba(0,0,0,.78);color:#E6E6E6;border:1px solid rgba(255,255,255,.18)} .reveal__divider{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:linear-gradient(180deg,var(--green-hot),var(--green));transform:translateX(-50%);box-shadow:0 0 16px rgba(167,240,0,.75),0 0 46px rgba(167,240,0,.3)} .reveal__handle{position:absolute;top:50%;left:var(--p);transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,var(--green-hot),var(--green));border:3px solid var(--black);display:grid;place-items:center;cursor:ew-resize;box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 6px rgba(167,240,0,.14)} .reveal__handle:focus-visible{outline:3px solid #fff;outline-offset:3px} .reveal__handle svg{width:27px;height:27px;stroke:var(--carbon);fill:none} .reveal__cap{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:"Montserrat",sans-serif;font-size:11px;letter-spacing:.08em;color:var(--text-mute);padding:11px 16px;border-top:1px solid var(--line-solid);background:var(--panel-b)} .chip{display:inline-flex;align-items:center;gap:6px;font-family:"Montserrat",sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--chip-fg);background:var(--chip-bg);border:1px solid var(--chip-line);padding:4px 9px;border-radius:99px} /* spray particles */ .spray-drop{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--green));pointer-events:none;z-index:5;animation:sprayfly .55s ease-out forwards;will-change:transform,opacity} @keyframes sprayfly{ 0%{transform:translate(0,0) scale(1);opacity:.95} 100%{transform:translate(var(--sx),var(--sy)) scale(.25);opacity:0} } /* twinkles on the clean layer */ .tw{animation:twinkle 2.6s ease-in-out infinite} .tw.t2{animation-delay:.9s}.tw.t3{animation-delay:1.7s} @keyframes twinkle{0%,100%{opacity:0}45%{opacity:0}55%{opacity:.95}65%{opacity:0}} /* ---------- marquee ---------- */ .marq{background:var(--green);color:var(--carbon);overflow:hidden;padding:13px 0;transform:rotate(-1deg) scale(1.02);margin:-14px 0;position:relative;z-index:2;box-shadow:0 10px 40px rgba(0,0,0,.35)} .marq__track{display:flex;gap:44px;width:max-content;animation:marq 26s linear infinite;font-family:"Michroma",sans-serif;text-transform:uppercase;font-style:italic;font-size:13.5px;letter-spacing:.1em;white-space:nowrap} .marq__track span{display:inline-flex;align-items:center;gap:44px} .marq__track em{font-style:normal;opacity:.55;font-size:13px} @keyframes marq{to{transform:translateX(-50%)}} /* ---------- stats ---------- */ .stats{background:var(--band);border-bottom:1px solid var(--line-solid);padding-top:26px} .stats__in{display:grid;grid-template-columns:repeat(4,1fr);text-align:center} .stat{padding:38px 14px;border-right:1px solid var(--line)} .stat:last-child{border-right:0} .stat__num{font-family:"Michroma",sans-serif;font-style:italic;font-size:clamp(19px,2.5vw,30px);color:var(--accent-ink);line-height:1;text-shadow:0 0 26px rgba(167,240,0,.28)} .stat__lab{font-family:"Montserrat",sans-serif;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--text-mute);margin-top:10px} /* ---------- section scaffolding ---------- */ section{scroll-margin-top:calc(var(--nav-h) + 8px)} .sec{padding:96px 0} .sec--band{background:linear-gradient(180deg,var(--band-a) 0%,var(--band-b) 100%);color:var(--text);position:relative} .sec--band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--decor-dim);background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 600'%3E%3Cdefs%3E%3Cfilter id='lg' filterUnits='userSpaceOnUse' x='0' y='0' width='300' height='600'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cfilter id='lm' filterUnits='userSpaceOnUse' x='0' y='0' width='300' height='600'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M130 8 L162 110 L118 128 L180 250 L142 268 L204 420 L160 438 L196 592 M180 250 L236 330 L208 344 L250 440 M142 268 L80 340 L108 352 L60 430 M118 128 L68 190 L90 200 L54 268 M204 420 L240 470 L220 480 L242 540' stroke='%23A7F000' stroke-width='12' opacity='.16' filter='url(%23lg)'/%3E%3Cpath d='M130 8 L162 110 L118 128 L180 250 L142 268 L204 420 L160 438 L196 592 M180 250 L236 330 L208 344 L250 440 M142 268 L80 340 L108 352 L60 430 M118 128 L68 190 L90 200 L54 268 M204 420 L240 470 L220 480 L242 540' stroke='%23A7F000' stroke-width='4.5' opacity='.5' filter='url(%23lm)'/%3E%3Cpath d='M130 8 L162 110 L118 128 L180 250 L142 268 L204 420 L160 438 L196 592 M180 250 L236 330 L208 344 L250 440 M142 268 L80 340 L108 352 L60 430 M118 128 L68 190 L90 200 L54 268 M204 420 L240 470 L220 480 L242 540' stroke='%23E4FF00' stroke-width='2' opacity='.85'/%3E%3Cpath d='M130 8 L162 110 L118 128 L180 250 L142 268 L204 420 L160 438 L196 592' stroke='%23F5FFE0' stroke-width='1' opacity='.92'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -30px top 6% / 165px auto, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='%23A7F000'%3E%3Ccircle cx='58' cy='64' r='30' opacity='.13'/%3E%3Ccircle cx='102' cy='42' r='10' opacity='.32'/%3E%3Ccircle cx='132' cy='72' r='6' opacity='.38'/%3E%3Ccircle cx='40' cy='112' r='8' opacity='.28'/%3E%3Ccircle cx='92' cy='96' r='4' opacity='.48'/%3E%3Ccircle cx='152' cy='40' r='3.5' opacity='.48'/%3E%3Ccircle cx='122' cy='122' r='3' opacity='.42'/%3E%3Ccircle cx='172' cy='92' r='5' opacity='.28'/%3E%3Ccircle cx='76' cy='152' r='4' opacity='.33'/%3E%3Ccircle cx='30' cy='40' r='5' opacity='.38'/%3E%3Ccircle cx='162' cy='142' r='2.5' opacity='.48'/%3E%3Ccircle cx='186' cy='60' r='2' opacity='.52'/%3E%3C/g%3E%3Cg fill='%23E4FF00'%3E%3Ccircle cx='96' cy='66' r='3' opacity='.55'/%3E%3Ccircle cx='56' cy='92' r='2.5' opacity='.5'/%3E%3Ccircle cx='142' cy='102' r='2' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -80px bottom -60px / 300px auto} .sec__head{max-width:660px;margin-bottom:48px} .sec__head h2{font-size:clamp(21px,3vw,37px);margin-top:14px;color:var(--heading);text-wrap:balance} .sec--band .sec__head h2{color:var(--heading)} .sec__head p{margin-top:16px;color:var(--text-mute);font-size:17px} .sec--band .sec__head p{color:var(--text-mute)} .hl{color:var(--accent-ink)} .sec--band .hl{text-shadow:0 0 30px rgba(167,240,0,.3)} /* ---------- services ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(min-width:981px){ .cards .card:last-child:nth-child(3n+1){grid-column:2} } .card{background:var(--surface);border:1px solid var(--line-solid);border-radius:var(--r);padding:30px 28px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;overflow:hidden} .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--green-hot));transform:scaleX(0);transform-origin:left;transition:transform .25s ease} .card:hover{transform:translateY(-5px);box-shadow:0 20px 44px var(--shadow);border-color:var(--line-hover)} .card:hover::before{transform:scaleX(1)} .card__ic{width:54px;height:54px;border-radius:12px;background:linear-gradient(160deg,var(--tile-a),var(--black));display:grid;place-items:center;margin-bottom:19px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .card__ic svg{width:27px;height:27px;stroke:var(--green);fill:none} .card h3{font-size:16px;color:var(--heading);letter-spacing:.02em} .card p{margin-top:10px;color:var(--text-mute);font-size:15px} .card__psi{margin-top:16px;font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)} /* ---------- work / demo gallery ---------- */ .work{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .work__item .panel{box-shadow:0 16px 40px rgba(0,0,0,.32)} .work__item .reveal{aspect-ratio:4/3} .work__cap{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:15px} .work__cap h3{font-size:14.5px;color:var(--heading);letter-spacing:.02em} .work__cap .mat{font-family:"Montserrat",sans-serif;font-size:10.5px;letter-spacing:.12em;color:var(--text-mute);text-transform:uppercase} .work__note{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.06em;color:var(--text-mute);text-align:center;margin-top:38px} /* ---------- standard (new-company positioning) ---------- */ .std{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .std__card{background:var(--surface-soft);border:1px solid var(--line-solid);border-radius:var(--r);padding:28px 26px;backdrop-filter:blur(4px);transition:border-color .2s ease,background .2s ease} .std__card:hover{border-color:rgba(167,240,0,.4);background:rgba(167,240,0,.03)} .std__n{font-family:"Montserrat",sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--accent-ink)} .std__card h3{font-size:15.5px;color:var(--heading);margin:13px 0 9px;letter-spacing:.02em} .std__card p{color:var(--text-mute);font-size:14.5px} /* ---------- founding offer ---------- */ .offer{background:linear-gradient(120deg,var(--green) 0%,#C9F800 60%,var(--green-hot) 100%);color:var(--carbon);position:relative;overflow:hidden} .offer::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.2 0 0 0 0 0 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} .offer__in{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:center;padding:66px 24px;position:relative;z-index:1} .offer .eyebrow{color:var(--carbon);opacity:.75} .offer h2{font-size:clamp(20px,2.7vw,33px);color:var(--carbon);margin-top:12px} .offer p{font-weight:600;margin-top:14px;max-width:56ch;font-size:16.5px} .offer__cta{display:flex;justify-content:flex-end} .offer .btn{background:var(--carbon);color:var(--green);box-shadow:0 7px 0 #060606,0 16px 34px rgba(0,0,0,.3);font-size:16px;padding:18px 30px} .offer .btn:hover{transform:translateY(-2px);box-shadow:0 9px 0 #060606,0 20px 40px rgba(0,0,0,.35)} .offer .btn:focus-visible{outline-color:var(--carbon)} /* ---------- process ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .step{position:relative;padding:24px 0 0;border-top:2px solid var(--line-solid)} .step::before{content:"";position:absolute;top:-2px;left:0;width:44px;height:2px;background:var(--green)} .step__n{font-family:"Montserrat",sans-serif;font-weight:700;font-size:12.5px;color:var(--accent-ink);letter-spacing:.12em} .step h3{font-size:16px;color:var(--heading);margin:15px 0 9px;letter-spacing:.02em} .step p{color:var(--text-mute);font-size:14.5px} /* ---------- guarantee ---------- */ .guar{background:var(--band);border-top:1px solid var(--line-solid);border-bottom:1px solid var(--line-solid)} .guar__in{display:flex;align-items:center;gap:30px;padding:52px 24px} .guar__ic{flex-shrink:0;width:82px;height:82px;border-radius:50%;background:linear-gradient(180deg,var(--green-hot),var(--green));display:grid;place-items:center;box-shadow:0 0 0 10px rgba(167,240,0,.09),0 0 50px rgba(167,240,0,.25)} .guar__ic svg{width:42px;height:42px;stroke:var(--carbon);fill:none} .guar h2{font-size:clamp(18px,2.2vw,27px);color:var(--heading)} .guar p{color:var(--text-mute);margin-top:10px;max-width:64ch;font-size:15.5px} .guar b{color:var(--accent-ink)} /* ---------- FAQ ---------- */ .faq{max-width:820px} .faq details{border:1px solid var(--line-solid);border-radius:var(--r);background:var(--surface);margin-bottom:14px;overflow:hidden;transition:border-color .2s ease} .faq details[open]{border-color:var(--accent-ink)} .faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:21px 24px;font-weight:700;font-size:16.5px;color:var(--heading)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:"Montserrat",sans-serif;font-size:22px;color:var(--accent-ink);transition:transform .2s ease;line-height:1} .faq details[open] summary::after{transform:rotate(45deg)} .faq .faq__a{padding:0 24px 22px;color:var(--text-mute);font-size:15.5px} .faq .faq__a b{color:var(--heading)} /* ---------- local (city) block ---------- */ .local{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start} .local h3{font-size:17px;color:var(--heading);letter-spacing:.02em;margin-bottom:14px} .local p{color:var(--text-mute);font-size:15.5px;margin-bottom:14px} .local p b{color:var(--heading)} .local__main .hero__cta{margin-top:22px} .local__side{background:var(--surface-soft);border:1px solid var(--line-solid);border-radius:var(--r);padding:24px 22px} .local__side h4{font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin:0 0 14px} .local__list{list-style:none;margin:0;padding:0} .local__list li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)} .local__list li:last-child{border-bottom:0} .local__list a{font-weight:600;font-size:14.5px;color:var(--heading)} .local__list a:hover{color:var(--accent-ink)} .local__list span{flex-shrink:0;font-family:"Montserrat",sans-serif;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);text-align:right} .local__meta{display:flex;gap:11px;margin-top:20px;font-size:13.5px;color:var(--text-mute)} .local__meta svg{width:16px;height:16px;stroke:var(--accent-ink);fill:none;flex-shrink:0;margin-top:4px} /* ---------- local knowledge (chips + census facts) ---------- */ .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .chips li{font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.04em;color:var(--text);background:var(--surface);border:1px solid var(--line-solid);border-radius:99px;padding:7px 13px} .sec--band .chips li{background:var(--surface-soft);border-color:var(--line-solid)} .lfacts__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 36px;padding:0} .lfacts__meta>div{background:var(--surface);border:1px solid var(--line-solid);border-radius:12px;padding:18px 20px} .lfacts__meta dt{font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)} .lfacts__meta dd{margin:7px 0 0;font-weight:700;font-size:15px;color:var(--heading)} .lfacts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start} .lfacts__col h4{display:flex;align-items:center;gap:9px;font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--heading);margin:0 0 15px} .lfacts__col h4 svg{width:16px;height:16px;stroke:var(--accent-ink);fill:none;flex-shrink:0} .lfacts__note{margin-top:28px;color:var(--text-mute);font-size:14.5px} /* ---------- local photography (licence credit is mandatory) ---------- */ .locphotos__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .locphoto{margin:0;background:var(--surface);border:1px solid var(--line-solid);border-radius:var(--r);overflow:hidden} .locphoto img{width:100%;height:216px;object-fit:cover} .locphoto figcaption{padding:15px 17px} .locphoto__cap{display:block;font-size:13.5px;color:var(--text);line-height:1.55} .locphoto__credit{display:block;margin-top:9px;font-family:"Montserrat",sans-serif;font-size:10.5px;letter-spacing:.08em;color:var(--text-mute)} /* ---------- areas ---------- */ .areas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .area{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--surface);border:1px solid var(--line-solid);border-radius:12px;padding:17px 18px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} .area:hover{transform:translateY(-3px);border-color:var(--accent-ink);box-shadow:0 12px 26px rgba(0,0,0,.1)} .area__city{font-weight:700;font-size:15px;color:var(--heading)} .area__sub{font-family:"Montserrat",sans-serif;font-size:10.5px;letter-spacing:.08em;color:var(--text-mute);text-transform:uppercase} .areas span[aria-current]{opacity:.55} /* ---------- areas index (one row per area) ---------- */ .arealist{display:flex;flex-direction:column;gap:18px} .arearow{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line-solid);border-radius:var(--r);padding:26px 28px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .arearow:hover{transform:translateY(-2px);border-color:var(--accent-ink);box-shadow:0 16px 34px rgba(0,0,0,.1)} .arearow__main h3{font-size:16px;color:var(--heading);letter-spacing:.02em} .arearow__main h3 a:hover{color:var(--accent-ink)} .arearow__main p{margin-top:11px;color:var(--text-mute);font-size:15px} .arearow__main .chips{margin-top:15px} /* .btn--ghost is tuned for dark backgrounds — lime on white fails AA, so the light-background variant uses the darkened green. */ .arearow__cta{white-space:nowrap;color:var(--accent-ink);border-color:var(--accent-ink);background:rgba(167,240,0,.1)} .arearow__cta:hover{background:var(--accent-ink);color:#fff} /* ---------- quote / booking ---------- */ .quote__grid{display:grid;grid-template-columns:1.32fr .88fr;gap:42px;align-items:start} .form{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--line-solid);border-radius:18px;padding:32px} /* GHL EMBED SLOT: replace the inner
with your GoHighLevel form iframe. Example: */ .field{margin-bottom:16px} .field label{display:block;font-family:"Montserrat",sans-serif;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:8px} .field label .req{color:var(--accent-ink)} .field input,.field select,.field textarea{ width:100%;background:var(--input-bg);border:1px solid var(--line-solid);border-radius:9px; color:var(--text);font-family:inherit;font-size:15px;padding:13px 15px;transition:border-color .15s ease,box-shadow .15s ease} .field textarea{resize:vertical;min-height:100px} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px rgba(167,240,0,.16)} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23A7F000' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center} .field--error input,.field--error select{border-color:var(--rust);box-shadow:0 0 0 3px rgba(193,68,14,.2)} .field__err{display:none;color:var(--err-text);font-size:12.5px;margin-top:6px;font-family:"Montserrat",sans-serif;letter-spacing:.04em} .field--error .field__err{display:block} /* Honeypot: off-screen rather than display:none, because some bots skip anything that computes to hidden. Never focusable, never announced. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Shown only when the POST to /api/lead failed. It replaces a false promise of contact with the two channels that still work. */ .form__failed{color:var(--err-text);font-size:14px;line-height:1.55;margin:4px 0 12px; padding:12px 14px;border:1px solid var(--rust);border-radius:10px; background:rgba(193,68,14,.08);font-family:"Montserrat",sans-serif} .form__failed a{color:var(--err-text);text-decoration:underline;font-weight:600} .form>.btn[type="submit"]:disabled{opacity:.6;cursor:progress} .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form>.btn[type="submit"]{width:100%;margin-top:6px} /* small print. Light sections by default; dark panels and dark sections override, because this class appears on both. */ .mini{font-family:"Montserrat",sans-serif;font-size:11.5px;letter-spacing:.05em;color:var(--text-mute);margin-top:14px} .mini a{color:var(--accent-ink);font-weight:700} .sec--band .mini,.form .mini,.bk .mini{color:var(--text-mute);text-align:center} .sec--band .mini a,.form .mini a,.bk .mini a{color:var(--accent-ink)} .svc__side .mini{text-align:left;color:var(--text-mute)} .success{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--green);border-radius:18px;padding:42px 30px;text-align:center;display:none} .success.show{display:block;animation:rise .5s ease forwards} .success__ic{width:68px;height:68px;border-radius:50%;background:linear-gradient(180deg,var(--green-hot),var(--green));display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 0 44px rgba(167,240,0,.3)} .success__ic svg{width:34px;height:34px;stroke:var(--carbon);fill:none} .success h3{color:var(--heading);font-size:19px} .success p{color:var(--text);margin-top:10px} .success a{color:var(--accent-ink);font-weight:700;text-decoration:underline} .qside{color:var(--text)} .qside h3{font-family:"Michroma",sans-serif;text-transform:uppercase;color:var(--heading);font-size:17px;letter-spacing:.02em} .qcard{display:flex;gap:15px;align-items:flex-start;padding:19px 0;border-bottom:1px solid var(--line)} .qcard:last-of-type{border-bottom:0} .qcard__ic{flex-shrink:0;width:44px;height:44px;border-radius:11px;background:var(--tile-2);display:grid;place-items:center} .qcard__ic svg{width:21px;height:21px;stroke:var(--green);fill:none} .qcard__t{font-weight:700;color:var(--heading);font-size:15px} .qcard__d{color:var(--text-mute);font-size:14px;margin-top:2px} .qcard__d a{color:var(--accent-ink)} .qcard--mono .qcard__t{font-family:"Montserrat",sans-serif;letter-spacing:.04em} .qoffer{margin-top:22px;background:rgba(167,240,0,.07);border:1px solid rgba(167,240,0,.4);border-radius:14px;padding:20px 22px} .qoffer__t{font-family:"Michroma",sans-serif;text-transform:uppercase;color:var(--accent-ink);font-size:13.5px;letter-spacing:.03em} .qoffer p{color:var(--text);font-size:13.5px;margin-top:8px} /* ---------- inner-page hero + breadcrumbs ---------- */ .crumbs{font-family:"Montserrat",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:26px} .crumbs a:hover{color:var(--accent-ink)} .crumbs span{opacity:.5;margin:0 4px} .crumbs span[aria-current]{opacity:1;color:var(--text);margin:0} .page__hero{padding:56px 0 74px} .page__head{max-width:780px} .page__head h1{font-size:clamp(24px,3.2vw,40px);color:var(--heading);margin:20px 0 0;text-wrap:balance} .page__head .hero__sub{margin-top:20px;max-width:62ch} /* ---------- service detail ---------- */ .svc__hero{padding:56px 0 70px} .svc__head{display:flex;gap:26px;align-items:flex-start} .svc__ic{flex-shrink:0;width:76px;height:76px;border-radius:18px;background:linear-gradient(160deg,var(--tile-a),var(--black));border:1px solid var(--line-solid);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .svc__ic svg{width:36px;height:36px;stroke:var(--green);fill:none} .svc__head h1{font-size:clamp(22px,3vw,36px);color:var(--heading);margin:14px 0 0;text-wrap:balance} .svc__head .hero__sub{margin-top:16px} .svc__hero .hero__cta{margin-top:34px} .svc__body{display:grid;grid-template-columns:1.4fr .78fr;gap:46px;align-items:start} .svc__h2{font-size:clamp(19px,2.4vw,28px);color:var(--heading);text-wrap:balance} .svc__prose p{margin-top:17px;color:var(--text-mute);font-size:16.5px} .svc__side{background:var(--surface);border:1px solid var(--line-solid);border-radius:var(--r);padding:26px 24px;position:sticky;top:calc(var(--nav-h) + 18px)} .svc__side h3{font-size:15px;color:var(--heading);letter-spacing:.02em} .svc__spec{margin:18px 0 22px;padding:0} .svc__spec>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)} .svc__spec dt{font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-mute)} .svc__spec dd{margin:0;font-weight:700;font-size:14px;color:var(--heading);text-align:right} /* ---------- service depth: included / method / price factors ---------- */ /* The method list runs 4–5 steps depending on the surface, so it wraps instead of using the homepage's fixed four columns. */ .steps--flow{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .incl{display:grid;grid-template-columns:1fr 1fr;gap:30px} .incl__col h3{font-size:15px;color:var(--heading);letter-spacing:.02em} .incl__list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px} .incl__list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6} .incl__list svg{flex-shrink:0;width:17px;height:17px;margin-top:4px;fill:none} .incl__list--yes li{color:var(--text)} .incl__list--yes svg{stroke:var(--accent-ink)} /* Exclusions are stated plainly, not hidden — muted, but never illegible. */ .incl__list--no li{color:var(--text-mute)} .incl__list--no svg{stroke:var(--text-mute)} .deps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 30px} .deps li{position:relative;padding-left:19px;font-size:15.5px;color:var(--text);line-height:1.6} .deps li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:var(--accent-ink)} .cadence{margin-top:34px;background:rgba(167,240,0,.07);border:1px solid var(--accent-line);border-radius:var(--r);padding:24px 26px;max-width:75ch} .cadence h3{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--heading);letter-spacing:.02em} .cadence h3 svg{flex-shrink:0;width:19px;height:19px;stroke:var(--accent-ink);fill:none} .cadence p{margin-top:11px;color:var(--text);font-size:15px} /* ---------- about / company ---------- */ .about__hero{padding:60px 0 76px} .about__grid{display:grid;grid-template-columns:1.14fr .86fr;gap:52px;align-items:center} .about__copy h1{font-size:clamp(24px,3.2vw,40px);color:var(--heading);margin:20px 0 0} .about__lede{margin-top:18px;color:var(--text);font-size:16.5px;max-width:52ch} .about__copy .hero__cta{margin-top:30px} /* The company spec panel in the /about hero — the same dl treatment as a service page's "short version", so the two read as one system. */ .about__spec{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--line-solid);border-radius:18px;padding:26px 24px} .about__spec h2{font-family:"Montserrat",sans-serif;font-weight:700;font-style:normal;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--text-mute)} .about__spec .svc__spec{margin:16px 0 20px} .about__spec .svc__spec>div{border-bottom-color:var(--line)} /* Founder block: portrait leads on desktop, copy leads on a phone. */ .about__grid--rev{grid-template-columns:.82fr 1.18fr} .about__grid--rev .portrait{max-width:400px} .portrait{margin:0} .portrait img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line-solid)} /* A monogram, never a stock photo of a stranger presented as the owner. */ .portrait__ph{aspect-ratio:4/5;border-radius:18px;border:1px dashed rgba(167,240,0,.45);background:linear-gradient(180deg,var(--panel-a),var(--panel-deep));display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:24px} .portrait__mono{font-family:"Michroma","Arial Black",sans-serif;font-style:italic;font-size:clamp(38px,5vw,58px);color:var(--accent-ink);text-shadow:0 0 42px rgba(167,240,0,.35);line-height:1} .portrait__note{font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);line-height:1.9} .portrait figcaption{margin-top:15px;font-family:"Montserrat",sans-serif;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-mute);text-align:center} .promise{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px} .promise li{display:flex;gap:14px;align-items:flex-start;background:var(--surface-soft);border:1px solid var(--line-solid);border-radius:12px;padding:20px 22px;color:var(--text);font-size:15px} .promise svg{flex-shrink:0;width:20px;height:20px;stroke:var(--accent-ink);fill:none;margin-top:3px} /* ---------- booking widget (/book) ---------- */ /* .bk and .bk__aside are siblings inside the section's .wrap, so the two-column layout lives on the wrap itself and the heading spans both tracks. */ #booker .wrap{display:grid;grid-template-columns:1.42fr .78fr;gap:38px;align-items:start} #booker .sec__head{grid-column:1/-1} /* colour is set explicitly: these are dark panels sitting inside a LIGHT section, so anything that inherits body's --ink would be dark-on-dark */ .bk__form,.bk__done,.bk__fallback{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--line-solid);border-radius:18px;padding:30px;color:var(--text)} .bk__done{border-color:var(--accent-ink);text-align:center;padding:42px 30px} .bk__done h3{color:var(--heading);font-size:19px} .bk__done p{color:var(--text);margin-top:10px} .bk__doneMeta{margin-top:22px;display:grid;gap:9px;justify-content:center;font-family:"Montserrat",sans-serif;font-size:13px;color:var(--text)} .bk__doneMeta b{color:var(--accent-ink);font-family:"Montserrat",sans-serif} .bk__done .hero__cta{justify-content:center} .bk__fallback h3{color:var(--heading);font-size:17px} .bk__fallback p{color:var(--text-mute);margin-top:12px;font-size:15px} .bk__fallback a{color:var(--accent-ink);font-weight:700} .bk__steps{list-style:none;margin:0;padding:0;counter-reset:bk} .bk__step+.bk__step{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)} .bk__stepHead{display:flex;align-items:center;gap:13px;margin-bottom:17px} .bk__n{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(167,240,0,.12);border:1px solid var(--accent-line);color:var(--accent-ink);display:grid;place-items:center;font-family:"Montserrat",sans-serif;font-weight:700;font-size:12.5px} .bk__stepHead h3{font-size:14.5px;color:var(--heading);letter-spacing:.02em} /* A step the customer can't act on yet reads as dimmed, not as broken. */ .bk__step[data-locked] .bk__body{opacity:.42;pointer-events:none} .bk__step[data-locked] .bk__n{background:var(--surface-soft-2);border-color:var(--line-solid);color:var(--text-mute)} .field__hint{display:block;margin-top:8px;font-family:"Montserrat",sans-serif;font-size:11.5px;letter-spacing:.03em;color:var(--text-mute);line-height:1.6} .bk__calNav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .bk__calMonth{font-family:"Michroma",sans-serif;font-style:italic;text-transform:uppercase;font-size:13px;letter-spacing:.04em;color:var(--heading)} .bk__navBtn{width:38px;height:38px;border-radius:10px;background:var(--surface-soft-2);border:1px solid var(--line-solid);color:var(--text);font-size:16px;line-height:1;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease} .bk__navBtn:hover:not(:disabled){border-color:var(--accent-ink);color:var(--accent-ink)} .bk__navBtn:disabled{opacity:.32;cursor:not-allowed} .bk__navBtn:focus-visible{outline:3px solid var(--green);outline-offset:2px} .bk__cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .bk__dow{font-family:"Montserrat",sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);text-align:center;padding-bottom:4px} .bk__pad{visibility:hidden} .bk__day{aspect-ratio:1;min-height:40px;border-radius:10px;background:var(--surface-soft-2);border:1px solid var(--line-solid);color:var(--text);font-family:"Montserrat",sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease} .bk__day:hover:not(:disabled){border-color:var(--accent-ink);color:var(--heading);transform:translateY(-2px)} .bk__day:focus-visible{outline:3px solid var(--green);outline-offset:2px} .bk__day--open{border-color:var(--accent-line);color:var(--heading)} .bk__day--open::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--green);margin:3px auto 0} .bk__day--sel{background:linear-gradient(180deg,var(--green-hot),var(--green));border-color:var(--green);color:var(--carbon)} .bk__day--sel::after{background:var(--carbon)} .bk__day--today{box-shadow:inset 0 0 0 1px rgba(192,192,192,.45)} .bk__day:disabled{opacity:.3;cursor:not-allowed} .bk__calNote,.bk__slotNote{font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.03em;color:var(--text-mute);margin-top:14px;line-height:1.6} .bk__calNote a,.bk__slotNote a{color:var(--accent-ink);font-weight:700} .bk__slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px} .bk__slot{padding:13px 10px;border-radius:10px;background:var(--surface-soft-2);border:1px solid var(--line-solid);color:var(--text);font-family:"Montserrat",sans-serif;font-weight:600;font-size:13.5px;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease} .bk__slot:hover{border-color:var(--accent-ink);color:var(--heading);transform:translateY(-2px)} .bk__slot:focus-visible{outline:3px solid var(--green);outline-offset:2px} .bk__slot--sel{background:linear-gradient(180deg,var(--green-hot),var(--green));border-color:var(--green);color:var(--carbon)} .bk__summary{margin-top:26px;padding:18px 20px;border-radius:12px;background:rgba(167,240,0,.07);border:1px solid rgba(167,240,0,.35);color:var(--text);font-size:14.5px;display:none} .bk__summary.show{display:block} .bk__summary b{color:var(--accent-ink)} .bk__error{margin-top:18px;padding:15px 18px;border-radius:12px;background:var(--err-bg);border:1px solid var(--err-line);color:var(--err-text);font-size:14px} .bk__error a{color:var(--accent-ink);font-weight:700} .bk__submit{width:100%;margin-top:20px} .bk__submit:disabled{opacity:.45;cursor:not-allowed;box-shadow:0 7px 0 var(--green-600)} .bk__submit:disabled:hover{transform:none;animation:none} .bk__aside{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--line-solid);border-radius:18px;padding:22px;color:var(--text);position:sticky;top:calc(var(--nav-h) + 18px)} .bk__spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(167,240,0,.3);border-top-color:var(--accent-ink);animation:bkspin .7s linear infinite;vertical-align:-2px;margin-right:8px} @keyframes bkspin{to{transform:rotate(360deg)}} /* ---------- footer ---------- */ /* The footer stays dark in BOTH themes — it is where the lime logo lives and it closes the page like the brand's black. It therefore re-pins the text tokens its children inherit, otherwise light mode would put #111 ink on a near-black slab. Redefining the variables here is cheaper and far less error-prone than a parallel set of [data-theme="light"] footer rules. */ footer{ --text:#D8D8D8; --text-mute:#9B9B9B; --heading:#FFFFFF; --accent-ink:var(--green); --line:#3A3A3A80; --line-solid:#2C2C2C; --tile-a:#161616; --tile-2:#232323; background:#060606;color:var(--text-mute);border-top:1px solid var(--line-solid)} .foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:36px;padding:64px 24px 44px} .foot__brand .brand__img{height:68px} .foot__tag{font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.15em;color:var(--green);margin-top:16px;text-transform:uppercase} .foot__soc{display:flex;gap:12px;margin-top:22px} .foot__soc a{width:40px;height:40px;border-radius:10px;background:var(--tile-a);border:1px solid var(--line-solid);display:grid;place-items:center;transition:all .16s ease} .foot__soc a:hover{background:var(--tile-2);border-color:var(--green);transform:translateY(-2px)} .foot__soc svg{width:18px;height:18px;stroke:var(--green);fill:none} .foot h4{font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--text);margin:0 0 17px} .foot ul{list-style:none;margin:0;padding:0} .foot li{margin-bottom:11px;font-size:14px} .foot a:hover{color:var(--green)} .foot__bar{border-top:1px solid var(--line-solid);padding:22px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:"Montserrat",sans-serif;font-size:11.5px;letter-spacing:.06em} /* ---------- mobile CTA bar ---------- */ .mcta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));background:var(--mcta-bg);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border-top:1px solid var(--line-solid)} .mcta .btn{flex:1;padding:13px 10px;font-size:14.5px} /* ---------- 404 ---------- */ .nf{padding:64px 0 84px} .nf__in{max-width:620px;margin:0 auto;text-align:center} .nf__mark{width:min(340px,80%);height:auto;margin:0 auto 30px;filter:drop-shadow(0 6px 24px rgba(167,240,0,.22))} /* The full lockup is silver-on-transparent, so on paper the HYPER half all but disappears. A dark plate restores the contrast the mark was drawn for and reads as deliberate rather than as a broken image. */ [data-theme="light"] .nf__mark{background:var(--tile-a);border-radius:22px;padding:20px 26px;width:min(360px,86%)} .nf h1{font-size:clamp(24px,5vw,42px);color:var(--heading)} .nf p{margin-top:18px;color:var(--text-mute);font-size:16.5px} .nf__cta{justify-content:center;margin-top:30px} .nf .mini{margin-top:26px} /* ---------- theme toggle ---------- */ .themebtn{ flex-shrink:0;width:38px;height:38px;border-radius:11px; background:var(--surface-soft-2);border:1px solid var(--line-solid); color:var(--text);display:grid;place-items:center;cursor:pointer; font-size:15px;line-height:1;padding:0; transition:border-color .16s ease,color .16s ease,background .16s ease,transform .16s ease} .themebtn:hover{border-color:var(--accent-ink);color:var(--accent-ink);transform:translateY(-1px)} .themebtn:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px} /* One button, both glyphs: CSS picks which is shown, so the button needs no JS to render correctly on first paint and cannot flash the wrong icon. */ .themebtn__sun{display:none} [data-theme="light"] .themebtn__sun{display:block} [data-theme="light"] .themebtn__moon{display:none} .mobile .themebtn{width:100%;height:auto;border-radius:9px;padding:13px 0;gap:9px; display:flex;align-items:center;justify-content:center;font-family:"Montserrat",sans-serif; font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase} /* In the nav the button is a 38px square with just a glyph; in the mobile menu it is a full-width row, where a lone glyph reads as a broken button — so the label only shows there. */ .themebtn__label{display:none} .mobile .themebtn__label{display:inline;font-size:12px} /* ---------- light-theme touch-ups ---------- */ /* The select chevron is a data: URI, so its colour can't come from a token — lime on a white input is invisible, hence a second, darker copy. */ [data-theme="light"] .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%234E7300' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E")} /* A white focus ring is invisible on a light panel. */ [data-theme="light"] .reveal__handle:focus-visible{outline-color:var(--heading)} /* The panel shadow is tuned for a black page; on paper it needs to lift, not bruise. */ [data-theme="light"] .panel{box-shadow:0 18px 44px var(--shadow),0 0 0 1px rgba(78,115,0,.08)} [data-theme="light"] .marq{box-shadow:0 8px 26px var(--shadow)} [data-theme="light"] .stat__num{text-shadow:none} [data-theme="light"] .hero h1 .hl,[data-theme="light"] .sec--band .hl{text-shadow:none} [data-theme="light"] .portrait__mono{text-shadow:none} /* ---------- reveal-on-scroll ---------- */ /* Only hidden when .ru-on is on — see the inline head script. Without JS, .ru content is plain visible content. */ .ru-on .ru{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease} .ru-on .ru.in{opacity:1;transform:none} .ru.d1{transition-delay:.08s}.ru.d2{transition-delay:.16s}.ru.d3{transition-delay:.24s}.ru.d4{transition-delay:.32s} /* ---------- responsive ---------- */ @media(max-width:980px){ .hero__grid{grid-template-columns:1fr;gap:40px;padding:48px 24px 64px} .cards,.work,.std,.steps{grid-template-columns:1fr 1fr} .quote__grid,.local{grid-template-columns:1fr;gap:32px} .areas{grid-template-columns:1fr 1fr} .foot{grid-template-columns:1fr 1fr} .offer__in{grid-template-columns:1fr;padding:52px 24px} .offer__cta{justify-content:flex-start} .svc__body,.about__grid,.about__grid--rev{grid-template-columns:1fr;gap:34px} .about__grid--rev .portrait{order:2;max-width:none} .svc__side,.bk__aside{position:static} .lfacts__grid,.locphotos__grid{grid-template-columns:1fr 1fr} .promise,.incl,.deps{grid-template-columns:1fr} .incl{gap:34px} #booker .wrap{grid-template-columns:1fr} .arearow{grid-template-columns:1fr;gap:20px} .arearow__cta{justify-self:start} } @media(max-width:920px){ .nav__links,.nav__phone,.nav__cta{display:none} .nav__burger{display:inline-flex} .mobile{display:block} } @media(max-width:760px){ .nav__inner{gap:12px} .stats__in{grid-template-columns:1fr 1fr} .stat:nth-child(2){border-right:0} .stat{border-bottom:1px solid var(--line)} .stat:nth-child(3),.stat:nth-child(4){border-bottom:0} .cards,.work,.std,.steps,.foot{grid-template-columns:1fr} .guar__in{flex-direction:column;text-align:center;gap:20px} .row2{grid-template-columns:1fr} .lfacts__meta,.lfacts__grid,.locphotos__grid{grid-template-columns:1fr} .svc__head{flex-direction:column;gap:18px} .svc__ic{width:64px;height:64px} .page__hero,.svc__hero,.about__hero{padding:40px 0 54px} .bk__form,.bk__done{padding:22px 18px} .bk__cal{gap:4px} .bk__day{min-height:38px;font-size:13px;border-radius:8px} .bk__slots{grid-template-columns:1fr 1fr} .portrait__ph{aspect-ratio:3/4} .arearow{padding:22px 20px} .sec{padding:68px 0} .mcta{display:flex} body{padding-bottom:74px} .marq{transform:rotate(0) scale(1);margin:0} /* decor bolts/splashes crowd the copy at phone widths — keep just the glows */ .hero::before{background: radial-gradient(760px 420px at 86% 4%, rgba(167,240,0,.14), transparent 68%), radial-gradient(500px 300px at 6% 100%, rgba(192,192,192,.07), transparent 70%)} .sec--band::before{display:none} .brand__img{height:48px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important} /* NOTE: no --p freeze here — reduced motion must only disable the autoplay demo (handled in JS), never the user-driven drag itself. A previous `.reveal{--p:50%!important}` rule froze all sliders for anyone with Windows/OS animations turned off. */ .hero__copy>*{opacity:1;transform:none} .ru,.ru-on .ru{opacity:1;transform:none} .marq__track{animation:none} .tw{animation:none;opacity:.6} }