:root { --ink:#0e1411; --green:#20db67; --green-dark:#087d40; --mist:#eef4ef; --line:#dce5de; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f7f9f7; color:var(--ink); font-family:Inter,"Segoe UI",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:86px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; gap:32px; background:white; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.brand img,.footer-brand img { display:block; width:188px; height:auto; }
nav { display:flex; gap:34px; font-size:14px; font-weight:650; }
nav a { transition:color .2s ease; }
nav a:hover { color:var(--green-dark); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; background:var(--green); color:#07120b; border:1px solid var(--green); padding:16px 22px; border-radius:6px; font-size:14px; font-weight:760; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); background:#31e878; }
.button-small { padding:11px 17px; }
.hero { min-height:670px; margin:0 clamp(16px,2.6vw,40px); background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 78%,var(--green) 78%,var(--green) 100%); color:white; overflow:hidden; position:relative; }
.hero::before,.hero::after { content:""; position:absolute; border:1px solid rgba(32,219,103,.16); border-radius:50%; pointer-events:none; }
.hero::before { width:520px; height:520px; right:6%; top:-24%; }.hero::after { width:310px; height:310px; right:13%; top:-5%; }
.hero-copy { min-height:670px; max-width:1040px; padding:clamp(72px,9vw,122px) clamp(34px,7vw,112px) 54px; display:flex; flex-direction:column; align-items:flex-start; position:relative; z-index:2; }
.hero-zon { position:absolute; z-index:1; width:min(31vw,446px); right:-1%; bottom:0; pointer-events:none; }
.hero-zon img { display:block; width:100%; height:auto; filter:drop-shadow(0 30px 28px rgba(0,0,0,.3)); }
.eyebrow { margin:0 0 22px; text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:780; color:var(--green-dark); }
.hero .eyebrow,.contact-section .eyebrow { color:var(--green); }
h1 { max-width:790px; margin:0; font-size:clamp(48px,6.4vw,92px); line-height:.96; letter-spacing:-.065em; font-weight:770; }
h1 span { color:var(--green); }
.hero-intro { max-width:620px; margin:32px 0 0; color:#c5d0c8; font-size:clamp(17px,1.5vw,21px); line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:36px; }
.text-link { border-bottom:1px solid #506057; padding:14px 0 10px; font-size:14px; font-weight:680; }
.pillars { margin-top:auto; padding-top:52px; display:flex; gap:26px; color:#a8b4ac; font-size:11px; font-weight:760; letter-spacing:.12em; text-transform:uppercase; }
.pillars span:not(:last-child)::after { content:""; display:inline-block; width:1px; height:13px; margin-left:26px; background:#536158; vertical-align:middle; }
.section { padding:112px clamp(24px,7vw,104px); }
h2 { margin:0; font-size:clamp(40px,5vw,72px); line-height:1.02; letter-spacing:-.058em; }
.large-copy { font-size:clamp(22px,2.2vw,32px); line-height:1.3; letter-spacing:-.025em; color:var(--ink); }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:clamp(60px,10vw,160px); background:white; }
.intro-copy>p:not(.large-copy) { color:#627067; font-size:17px; line-height:1.7; }
.stat-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:46px; }
.stat-row div { display:flex; flex-direction:column; min-height:135px; background:var(--mist); padding:22px; }
.stat-row strong { font:760 42px var(--font-geist-mono); color:var(--green-dark); }.stat-row span { margin-top:auto; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.solutions-section { background:#f5f8f5; }
.split-heading { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.6fr); align-items:end; gap:80px; }
.split-heading>p { color:#657169; line-height:1.7; margin:0 0 4px; }
.solution-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:66px; }
.solution-card { min-height:390px; padding:24px; border:1px solid var(--line); background:white; display:flex; flex-direction:column; transition:transform .2s,border-color .2s; }
.solution-card:hover { transform:translateY(-5px); border-color:var(--green); }
.count { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--green); font:700 11px var(--font-geist-mono); }
.solution-card h3 { margin:70px 0 12px; font-size:25px; letter-spacing:-.04em; }.solution-card>p { color:#5f6d64; font-size:14px; line-height:1.55; min-height:66px; }
.solution-card ul { list-style:none; padding:18px 0 0; margin:auto 0 0; border-top:1px solid var(--line); }.solution-card li { padding:6px 0; color:#3f4b44; font-size:13px; }.solution-card li::before { content:"+"; color:var(--green-dark); font-weight:800; margin-right:9px; }
.offer-band { display:flex; justify-content:center; flex-wrap:wrap; margin-top:30px; background:var(--green); padding:13px 20px; border-radius:5px; }
.offer-band span { font-size:11px; font-weight:780; text-transform:uppercase; letter-spacing:.09em; }.offer-band span:not(:last-child)::after { content:"·"; margin:0 20px; }
.zon-section { position:relative; display:grid; grid-template-columns:minmax(250px,1fr) minmax(330px,.9fr) minmax(250px,1fr); align-items:center; gap:clamp(24px,4vw,70px); min-height:760px; padding:82px clamp(32px,6vw,96px) 0; background:linear-gradient(125deg,#0e1411 0%,#14231a 52%,#0e1411 100%); color:white; overflow:hidden; }
.zon-image { position:relative; align-self:end; min-height:680px; z-index:2; }.zon-image::before { content:""; position:absolute; width:118%; aspect-ratio:1; left:50%; top:44%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(32,219,103,.22) 0%,rgba(32,219,103,.07) 43%,transparent 70%); }.zon-image img { position:absolute; max-height:690px; max-width:100%; width:auto; height:auto; left:50%; transform:translateX(-50%); bottom:0; z-index:2; filter:drop-shadow(0 28px 26px rgba(0,0,0,.32)); }.zon-outline { position:absolute; left:50%; top:5%; transform:translateX(-50%); font-size:clamp(150px,20vw,330px); font-weight:850; letter-spacing:-.09em; color:transparent; -webkit-text-stroke:1px rgba(32,219,103,.14); white-space:nowrap; }
.zon-copy { position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; padding:34px 0 94px; }.zon-copy .eyebrow { color:var(--green); }.zon-copy .large-copy { color:white; margin-top:36px; }.zon-copy>p:not(.eyebrow):not(.large-copy) { color:#b8c4bc; line-height:1.75; font-size:17px; }.zon-detail { align-self:end; padding-bottom:130px; }
.zon-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }.zon-tags span { border:1px solid #435048; border-radius:30px; padding:10px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.process-section { background:white; }.process-section .section-heading { max-width:860px; }.process-line { display:grid; grid-template-columns:repeat(5,1fr); margin-top:76px; position:relative; }.process-line::before { content:""; height:2px; background:var(--green); position:absolute; top:23px; left:8%; right:8%; }
.process-step { position:relative; text-align:center; padding:0 14px; }.process-dot { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; margin:0 auto 28px; position:relative; z-index:2; background:var(--green); font:750 11px var(--font-geist-mono); }.process-dot.dark { color:white; background:var(--ink); }.process-step h3 { text-transform:uppercase; font-size:13px; letter-spacing:.08em; }.process-step p { color:#6a766e; font-size:12px; line-height:1.55; }
.process-promise { max-width:780px; margin:52px auto 0; padding:26px 24px 0; border-top:1px solid var(--line); color:#69756d; text-align:center; font-size:16px; line-height:1.6; }.process-promise span { color:var(--green-dark); font-weight:780; }
.values-section { display:grid; grid-template-columns:.78fr 1.22fr; gap:90px; background:var(--mist); }.values-intro>p:last-child { color:#667269; line-height:1.7; max-width:480px; margin-top:30px; }.values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.values-grid article { min-height:190px; padding:22px; border-left:4px solid var(--green); background:white; }.values-grid span { color:var(--green-dark); font:700 11px var(--font-geist-mono); }.values-grid h3 { font-size:20px; margin:30px 0 10px; }.values-grid p { color:#667269; font-size:13px; line-height:1.55; }
.contact-section { margin:0 clamp(16px,2.6vw,40px); padding:clamp(54px,8vw,110px); background:var(--ink); color:white; position:relative; overflow:hidden; }.contact-section::after { content:""; position:absolute; right:-80px; bottom:-190px; width:430px; height:430px; border:1px solid rgba(32,219,103,.22); border-radius:50%; }.contact-copy { position:relative; z-index:2; }.contact-copy h2 { max-width:880px; }.contact-copy>p:not(.eyebrow) { color:#b2bdb5; font-size:18px; line-height:1.6; max-width:680px; }.button-light { margin-top:20px; }
.contact-headphones { position:absolute; z-index:1; width:clamp(190px,22vw,320px); height:clamp(135px,16vw,230px); right:clamp(35px,8vw,125px); top:50%; transform:translateY(-55%); border:clamp(12px,1.3vw,19px) solid var(--green); border-bottom:0; border-radius:190px 190px 0 0; opacity:.44; }
.contact-headphones::before,.contact-headphones::after { content:""; position:absolute; bottom:clamp(-72px,-5vw,-52px); width:clamp(38px,4vw,58px); height:clamp(78px,7vw,108px); background:var(--green); border-radius:18px 18px 24px 24px; }
.contact-headphones::before { left:clamp(-19px,-1.3vw,-12px); }.contact-headphones::after { right:clamp(-19px,-1.3vw,-12px); }
.contact-mic { position:absolute; right:clamp(-7px,-.45vw,-3px); bottom:clamp(-93px,-6.2vw,-67px); width:62%; height:46%; border-bottom:clamp(7px,.75vw,11px) solid var(--green); border-radius:0 0 0 130px; transform:rotate(3deg); transform-origin:right center; }.contact-mic::before { content:""; position:absolute; right:0; top:-32%; width:clamp(7px,.75vw,11px); height:48%; background:var(--green); border-radius:999px; }.contact-mic::after { content:""; position:absolute; left:clamp(-24px,-1.7vw,-14px); bottom:clamp(-11px,-.7vw,-7px); width:clamp(31px,3vw,44px); height:clamp(17px,1.6vw,24px); background:var(--green); border-radius:999px; transform:rotate(-7deg); }
.contact-back { font-size:13px; font-weight:720; color:var(--green-dark); }
.contact-hero { min-height:500px; margin:0 clamp(16px,2.6vw,40px); padding:clamp(70px,8vw,112px) clamp(32px,7vw,108px); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); align-items:center; background:linear-gradient(115deg,var(--ink) 0%,#14231a 72%,var(--green) 72%,var(--green) 100%); color:white; position:relative; overflow:hidden; }
.contact-hero::before { content:""; position:absolute; width:450px; height:450px; right:2%; top:-42%; border:1px solid rgba(32,219,103,.18); border-radius:50%; }
.contact-title { position:relative; z-index:2; max-width:820px; }.contact-title .eyebrow { color:var(--green); }.contact-title h1 { font-size:clamp(54px,7vw,94px); }.contact-title>p:last-child { max-width:650px; margin:28px 0 0; color:#bdc8c0; font-size:19px; line-height:1.6; }
.contact-zon { align-self:end; height:430px; position:relative; z-index:2; }.contact-zon img { position:absolute; bottom:clamp(-112px,-8vw,-76px); left:50%; transform:translateX(-50%); max-height:540px; max-width:130%; width:auto; filter:drop-shadow(0 26px 28px rgba(0,0,0,.34)); }
.contact-form-section { padding:clamp(82px,9vw,128px) clamp(24px,7vw,104px); display:grid; grid-template-columns:minmax(280px,.72fr) minmax(500px,1.28fr); gap:clamp(60px,8vw,130px); background:#f5f8f5; }
.form-intro h2 { font-size:clamp(38px,4.2vw,64px); }.form-intro>p:not(.eyebrow) { max-width:470px; color:#667269; font-size:16px; line-height:1.7; margin-top:28px; }
.form-promise { display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }.form-promise span { padding:9px 13px; border:1px solid #cdd9d0; border-radius:99px; text-transform:uppercase; font-size:10px; font-weight:760; letter-spacing:.09em; color:var(--green-dark); background:white; }
.enquiry-form { padding:clamp(24px,3vw,42px); border-top:5px solid var(--green); background:white; box-shadow:0 20px 55px rgba(15,35,22,.08); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px 18px; }
.form-field { display:flex; flex-direction:column; gap:9px; }.form-field>span { font-size:12px; font-weight:760; letter-spacing:.045em; }.form-field input,.form-field select,.form-field textarea { width:100%; border:1px solid #cfd9d1; border-radius:5px; background:#fbfdfb; color:var(--ink); font:500 15px Inter,"Segoe UI",Arial,sans-serif; outline:none; transition:border-color .2s,box-shadow .2s; }.form-field input,.form-field select { height:50px; padding:0 14px; }.form-field textarea { min-height:170px; padding:14px; resize:vertical; line-height:1.55; }.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:var(--green-dark); box-shadow:0 0 0 3px rgba(32,219,103,.13); }.form-field-wide { margin-top:24px; }
.form-submit-row { display:flex; align-items:center; gap:24px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }.form-submit-row button { font-family:inherit; cursor:pointer; white-space:nowrap; }.form-submit-row p { margin:0; color:#6c786f; font-size:11px; line-height:1.55; }.form-submit-row strong { color:#344039; }
.form-submit-row button:disabled { cursor:wait; opacity:.65; transform:none; }
.turnstile-wrap { margin-top:24px; min-height:66px; }
.form-status { display:none; margin:20px 0 0; padding:14px 16px; border-radius:5px; font-size:13px; line-height:1.55; }
.form-status.is-visible { display:block; }
.form-status.is-success { color:#075d31; background:#e1f7e9; border:1px solid #a9dfbc; }
.form-status.is-error { color:#8b2020; background:#fff0f0; border:1px solid #efb8b8; }
.hp-field { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.contact-footer { grid-template-columns:1fr 1fr auto; }.contact-footer>p { text-align:center; }.contact-footer>span { text-align:right; }
footer { padding:60px clamp(24px,7vw,104px) 34px; display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:end; background:white; }.footer-brand img { width:210px; }.footer-brand+p { margin:0; text-align:right; text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:750; color:var(--green-dark); }.footer-brand~div { display:flex; gap:24px; font-size:13px; }.footer-brand~span { text-align:right; color:#768178; font-size:12px; }
@media(max-width:1050px){ nav{display:none}.hero-copy{min-height:650px;max-width:74%;padding-right:20px}.hero-zon{display:block;width:clamp(240px,35vw,365px);right:-2%;bottom:0}.solution-grid{grid-template-columns:repeat(2,1fr)}.split-heading,.intro,.values-section{grid-template-columns:1fr;gap:56px}.zon-section{grid-template-columns:1fr 1fr;padding:80px clamp(28px,6vw,70px) 0}.zon-intro{padding:0 0 50px}.zon-image{grid-column:2;grid-row:1 / span 2;min-height:660px}.zon-detail{padding:0 0 90px}.process-line{grid-template-columns:repeat(5,minmax(130px,1fr));overflow-x:auto;padding-bottom:18px}.values-grid{grid-template-columns:repeat(3,1fr)}.contact-form-section{grid-template-columns:1fr;gap:50px}.form-intro{max-width:700px} }
@media(max-width:650px){ .site-header{height:74px;padding:0 18px}.brand img{width:150px}.button-small{font-size:12px;padding:10px 12px}.hero{margin:0;min-height:790px;background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 86%,var(--green) 86%,var(--green) 100%)}.hero-copy{padding:62px 24px 300px;min-height:790px;max-width:100%}.hero-zon{display:block;width:230px;right:-10px;bottom:0}.hero-actions{align-items:flex-start;flex-direction:column;gap:10px}.pillars{margin-top:38px;gap:10px}.pillars span:not(:last-child)::after{margin-left:10px}.section{padding:80px 20px}.solution-grid,.values-grid{grid-template-columns:1fr}.solution-card{min-height:350px}.offer-band{align-items:flex-start;flex-direction:column;gap:8px}.offer-band span:not(:last-child)::after{display:none}.zon-section{grid-template-columns:1fr;padding:72px 24px 0}.zon-intro{padding:0}.zon-image{grid-column:1;grid-row:auto;min-height:520px;margin-top:20px}.zon-image img{max-height:540px}.zon-detail{padding:38px 0 72px}.values-grid article{min-height:170px}.contact-section{margin:0;padding:70px 22px}.contact-headphones{right:-70px;top:56%;opacity:.18}.contact-mic{width:66%}.contact-hero{margin:0;min-height:690px;padding:60px 24px 270px;display:block;background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 88%,var(--green) 88%,var(--green) 100%)}.contact-title>p:last-child{font-size:16px}.contact-zon{position:absolute;right:-4px;bottom:0;width:230px;height:290px}.contact-zon img{bottom:-52px;max-height:355px;max-width:135%}.contact-form-section{padding:74px 20px}.enquiry-form{padding:24px 18px}.field-grid{grid-template-columns:1fr;gap:20px}.form-submit-row{align-items:flex-start;flex-direction:column}.contact-footer{grid-template-columns:1fr}.contact-footer>p,.contact-footer>span{text-align:left}footer{grid-template-columns:1fr}.footer-brand+p,.footer-brand~span{text-align:left} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.solution-card{transition:none}}