:root{--forest:#245b2b;--forest2:#17452b;--ink:#123638;--cream:#f7f7f0;--sage:#edf1e7;--line:#e2e7dd;--muted:#5a6b6b;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.58}a{color:inherit}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;line-height:1.06;letter-spacing:-.035em;margin:0 0 16px;color:var(--ink)}h1{font-size:clamp(2.7rem,5.4vw,5rem)}h2{font-size:clamp(2rem,3.5vw,3.35rem)}h3{font-size:1.4rem}p{margin:0 0 15px}.wrap{width:min(1240px,92%);margin:auto}.eyebrow{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--forest);margin-bottom:14px}.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:.92rem;font-weight:700;background:var(--forest);color:#fff;border-radius:9px;padding:13px 20px;transition:transform .2s,background .2s}.btn:hover{background:var(--forest2);transform:translateY(-1px)}.btn.outline{background:transparent;color:var(--ink);border:1px solid #9aab9b}.btn.light{background:#fff;color:var(--ink)}.sitehead{background:rgba(255,255,255,.96);border-bottom:1px solid #edf0ea;position:sticky;top:0;z-index:9;backdrop-filter:blur(10px)}.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;text-decoration:none;gap:10px;font-family:Georgia,serif;font-size:2rem;font-weight:bold;color:var(--forest)}.brand img{width:122px;height:auto;display:block}.navlinks{display:flex;align-items:center;gap:24px}.navlinks a{text-decoration:none;font-size:.88rem;font-weight:700}.navlinks a:hover{color:var(--forest)}.hero{background:var(--cream);overflow:hidden}.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:36px;align-items:center;min-height:560px;padding:50px 0}.hero-copy{padding:18px 0;max-width:610px}.hero-copy p{font-size:1.07rem;max-width:560px;color:#425758}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 25px}.hero-note{font-size:.8rem!important;color:var(--muted)!important}.hero-image{height:480px;position:relative;overflow:hidden;border-radius:24px 0 0 24px;margin-right:calc((100vw - min(1240px,92vw))/ -2)}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-image:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cream) 0%,rgba(247,247,240,.08) 20%,transparent 44%);z-index:1;pointer-events:none}.proof{background:#fff;border-bottom:1px solid var(--line)}.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:22px 0}.proof-item{display:flex;align-items:flex-start;gap:12px;font-size:.9rem}.icon{width:34px;height:34px;border-radius:50%;background:var(--sage);display:grid;place-items:center;color:var(--forest);font-weight:bold;flex:0 0 34px}.proof-item small{display:block;font-size:.8rem;color:var(--muted);line-height:1.4;margin-top:3px}.section{padding:84px 0}.section.soft{background:#fbfcf8}.sectionhead{max-width:780px;margin-bottom:34px}.sectionhead p{font-size:1.03rem;color:var(--muted)}.services{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service{border:1px solid var(--line);border-radius:16px;background:#fff;padding:22px;display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(18,54,56,.035)}.service-top{display:flex;align-items:center;gap:12px;margin-bottom:15px}.service-icon{width:48px;height:48px;border-radius:50%;background:var(--sage);display:grid;place-items:center;color:var(--forest);font-size:1.35rem;flex:0 0 48px}.service h3{font-size:1.32rem;margin-bottom:7px}.price{font-family:Georgia,serif;font-size:2rem;font-weight:bold;margin:8px 0 2px}.price small{font:normal .82rem Arial;color:var(--muted)}.service .caption{color:var(--muted);font-size:.82rem;min-height:42px}.service img{width:100%;height:138px;object-fit:cover;border-radius:9px;margin:10px 0 14px}.service p{font-size:.9rem;color:#47595a}.checklist{padding:0;list-style:none;margin:0 0 22px}.checklist li{font-size:.85rem;margin:9px 0;color:#34494a}.checklist li:before{content:'✓';display:inline-grid;place-items:center;background:var(--forest);color:white;border-radius:50%;width:16px;height:16px;font-size:.7rem;font-weight:bold;margin-right:8px}.service .btn{margin-top:auto;justify-content:center;padding:12px 14px}.service.featured{border:2px solid var(--forest);box-shadow:0 14px 34px rgba(36,91,43,.1)}.tag{display:inline-block;background:var(--sage);color:var(--forest);border-radius:100px;padding:5px 9px;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800;margin-bottom:10px}.benefitbar{background:#f0f3e9}.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:24px 0}.benefit{display:flex;gap:12px;font-size:.9rem}.benefit strong{display:block}.benefit small{display:block;color:var(--muted);font-size:.82rem;line-height:1.4}.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.landscape{width:100%;height:420px;object-fit:cover;border-radius:0 18px 18px 0;margin-left:calc((100vw - min(1240px,92vw))/ -2);max-width:calc(100% + (100vw - min(1240px,92vw))/2)}.split-copy{padding:20px 0}.featurelist{padding:0;list-style:none;margin:22px 0}.featurelist li{padding:11px 0;border-bottom:1px solid var(--line)}.featurelist li:before{content:'✓';color:var(--forest);font-weight:bold;margin-right:10px}.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:white}.project-thumb{height:185px;background:linear-gradient(135deg,#e8eee3,#d4e1d0);display:flex;align-items:center;justify-content:center;padding:20px}.browser{background:white;border:1px solid #dce3d8;border-radius:7px;width:100%;height:143px;padding:9px;box-shadow:0 8px 20px #12363814}.browserbar{height:9px;background:#edf1e8;border-radius:5px;margin-bottom:10px}.browserhero{height:82px;border-radius:4px;background:linear-gradient(120deg,#d9e8d4,#f1e4d0);display:flex;align-items:center;justify-content:center;text-align:center;font-family:Georgia,serif;color:var(--forest2);font-size:1.2rem}.project-body{padding:22px}.project-body p{color:var(--muted);font-size:.92rem}.textlink{color:var(--forest);font-weight:bold;text-decoration:none}.textlink:hover{text-decoration:underline}.faq{max-width:850px}.faq details{padding:19px 0;border-bottom:1px solid var(--line)}.faq summary{font-weight:700;cursor:pointer}.faq p{color:var(--muted);padding-top:12px}.cta{padding:52px;border-radius:20px;background:var(--ink);color:#fff}.cta h2{color:white}.cta p{color:#d9e3dd;max-width:720px}.footer{background:#f1f3ec;padding:36px 0;color:var(--muted);font-size:.88rem}.footgrid{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.footlinks{display:flex;gap:20px;flex-wrap:wrap}.footlinks a{color:var(--ink);text-decoration:none}.footlinks a:hover{color:var(--forest)}
@media(max-width:1000px){.services{grid-template-columns:repeat(2,1fr)}.hero-grid{gap:22px}.hero-image{height:430px}.benefits{grid-template-columns:repeat(2,1fr)}.navlinks{gap:13px}}
@media(max-width:760px){.nav{padding:14px 0;align-items:flex-start;flex-direction:column}.navlinks{flex-wrap:wrap}.nav>.btn{display:none}.hero-grid,.split{grid-template-columns:1fr}.hero-grid{padding:40px 0 0}.hero-copy{padding-bottom:12px}.hero-image{height:300px;margin:0;border-radius:16px 16px 0 0}.hero-image:before{background:linear-gradient(180deg,var(--cream) 0%,transparent 28%)}.proof-grid,.services,.portfolio{grid-template-columns:1fr}.proof-grid{gap:18px}.section{padding:58px 0}.benefits{grid-template-columns:1fr 1fr}.landscape{height:280px;margin:0;max-width:100%;border-radius:16px}.cta{padding:30px 22px}}
@media(max-width:460px){.benefits{grid-template-columns:1fr}.navlinks{gap:11px}.navlinks a{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* Modern motion layer */
:root{scroll-padding-top:92px}
body{overflow-x:hidden}
.btn,.service,.project,.icon,.browser,.brand img{will-change:transform}
.btn{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,background-color .25s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(36,91,43,.18)}
.btn:active{transform:translateY(-1px) scale(.99)}
.service,.project{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s ease}
.service:hover,.project:hover{transform:translateY(-7px);box-shadow:0 18px 42px rgba(18,54,56,.10);border-color:#bdcdbb}
.service img,.project-thumb,.browserhero{transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s ease}
.service:hover img{transform:scale(1.025);filter:saturate(1.05)}
.project:hover .browser{transform:translateY(-3px) scale(1.015)}
.icon{transition:transform .3s ease,background-color .3s ease}
.proof-item:hover .icon,.benefit:hover .icon{transform:rotate(-7deg) scale(1.08);background:#dce8d6}
.hero-copy .eyebrow{animation:fadeUp .65s .05s both}
.hero-copy h1{animation:fadeUp .8s .12s both}
.hero-copy>p{animation:fadeUp .8s .22s both}
.hero-actions{animation:fadeUp .8s .3s both}
.hero-image img{transform:scale(1.025);animation:heroSettle 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroSettle{from{opacity:.55;transform:scale(1.08)}to{opacity:1;transform:scale(1.025)}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.08s}.reveal-delay-2{transition-delay:.16s}.reveal-delay-3{transition-delay:.24s}
.navlinks a{position:relative}
.navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--forest);transition:right .25s ease}
.navlinks a:hover:after{right:0}
details summary{transition:color .2s ease}
details summary:hover{color:var(--forest)}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .reveal{opacity:1;transform:none}
}

.sitehead{transition:box-shadow .25s ease,background-color .25s ease}.sitehead.is-scrolled{box-shadow:0 8px 28px rgba(18,54,56,.07);background:rgba(255,255,255,.98)}

/* V6: synchronised image crops and more visible, cohesive motion */
.hero-image{height:480px;overflow:hidden;border-radius:24px 0 0 24px;background:#e9eee4}
.hero-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.01);animation:heroReveal 1.15s cubic-bezier(.16,1,.3,1) both}
.service img{display:block;width:100%;height:160px;object-fit:cover;object-position:center;border-radius:10px;margin:12px 0 15px;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.service:hover img{transform:scale(1.06);filter:saturate(1.1)}
.landscape{display:block;width:100%;height:420px;object-fit:cover;object-position:center;border-radius:18px;max-width:100%;margin:0}
.project-thumb{height:200px;overflow:hidden}
.browser{transform-origin:center;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.project:hover .browser{transform:translateY(-4px) scale(1.035);box-shadow:0 14px 30px rgba(18,54,56,.1)}
@keyframes heroReveal{0%{opacity:0;transform:translateY(20px) scale(1.04);clip-path:inset(5% 5% 5% 5% round 24px)}100%{opacity:1;transform:translateY(0) scale(1.01);clip-path:inset(0 0 0 0 round 24px)}}
.reveal{opacity:0;transform:translateY(32px) scale(.985);filter:blur(3px);transition:opacity .75s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease}
.reveal.is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.reveal-delay-1{transition-delay:.04s}.reveal-delay-2{transition-delay:.14s}.reveal-delay-3{transition-delay:.24s}
.service:hover,.project:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(18,54,56,.13)}
.sitehead.is-scrolled{box-shadow:0 8px 30px rgba(18,54,56,.09)}
@media(max-width:760px){.hero-image{height:300px;border-radius:16px 16px 0 0}.landscape{height:280px;border-radius:16px}.service img{height:180px}.project-thumb{height:190px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none}.hero-image img{animation:none;transform:none}}

/* Accessible light/dark themes */
:root{color-scheme:light;--page-bg:#ffffff;--surface:#fbfcf8;--hero-bg:#f7f7f0;--text-main:#123638;--text-muted:#4a5d5e;--border-main:#d7e0d5;--header-bg:rgba(255,255,255,.96);--footer-bg:#f1f3ec;--button-bg:#245b2b;--button-text:#ffffff;--focus-ring:#005fcc}
html[data-theme="dark"]{color-scheme:dark;--page-bg:#111916;--surface:#18231e;--hero-bg:#1c2821;--text-main:#f2f6f1;--text-muted:#c1cec5;--border-main:#3b4b41;--header-bg:rgba(17,25,22,.96);--footer-bg:#18231e;--button-bg:#9bd18e;--button-text:#102015;--focus-ring:#ffda70}
body{background:var(--page-bg);color:var(--text-main);transition:background-color .25s ease,color .25s ease}
h1,h2,h3{color:var(--text-main)}
.sitehead{background:var(--header-bg);border-color:var(--border-main)}
.hero{background:var(--hero-bg)}
.proof{background:var(--page-bg);border-color:var(--border-main)}
.section.soft{background:var(--surface)}
.benefitbar{background:var(--surface)}
.service,.project,.card{background:var(--page-bg);border-color:var(--border-main)}
.service p,.sectionhead p,.muted,.project-body p,.faq p,.hero-copy p,.hero-note,.proof-item small,.benefit small{color:var(--text-muted)}
.service .caption{color:var(--text-muted)}
.featurelist li,.faq details{border-color:var(--border-main)}
.btn{background:var(--button-bg);color:var(--button-text)}
.btn:hover{filter:brightness(1.04)}
.btn.outline{background:transparent;color:var(--text-main);border-color:var(--border-main)}
.btn.light{background:var(--page-bg);color:var(--text-main)}
.icon,.service-icon,.tag{background:var(--surface);color:var(--text-main)}
.footer{background:var(--footer-bg);color:var(--text-muted)}
.footer .footlinks a,.navlinks a,.textlink{color:var(--text-main)}
.browser{background:var(--page-bg);border-color:var(--border-main)}
.browserbar{background:var(--surface)}
.cta{background:#123638}
html[data-theme="dark"] .cta{background:#263c32;border:1px solid #50675a}
html[data-theme="dark"] .cta p{color:#e0eae2}
html[data-theme="dark"] .hero-image:before{background:linear-gradient(90deg,var(--hero-bg) 0%,rgba(28,40,33,.08) 20%,transparent 44%)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:5px}
button{font:inherit}
.theme-toggle{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border:1px solid var(--border-main);border-radius:10px;background:var(--page-bg);color:var(--text-main);font-weight:700;cursor:pointer}
.theme-toggle:hover{border-color:var(--forest)}
.theme-toggle .theme-icon{font-size:1.1rem}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;padding:12px 16px;background:var(--page-bg);color:var(--text-main);border:2px solid var(--focus-ring);border-radius:8px}
.skip-link:focus{top:12px}
@media(forced-colors:active){.btn,.theme-toggle{border:1px solid ButtonText}.icon{border:1px solid ButtonText}}
@media(prefers-contrast:more){body{line-height:1.7}.btn,.theme-toggle{border:2px solid currentColor}}

/* V8: readable, scalable typography */
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:1rem;line-height:1.7}
p,li,summary{line-height:1.7}
p{max-width:72ch}
h1{font-size:clamp(2.35rem,4.6vw,4.35rem);line-height:1.08}
h2{font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.14}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.25}
.navlinks a{font-size:.95rem;line-height:1.4}
.hero-copy p{font-size:1.1rem;line-height:1.75}
.sectionhead p{font-size:1.05rem;line-height:1.75}
.service p,.project-body p,.faq p,.featurelist li{font-size:.98rem;line-height:1.7}
.service .caption,.proof-item small,.benefit small{font-size:.9rem;line-height:1.55}
.checklist li{font-size:.93rem;line-height:1.6}
.btn{font-size:.98rem;line-height:1.4;min-height:46px}
.theme-toggle{font-size:.95rem;line-height:1.3;min-height:46px}
.hero-note{font-size:.9rem!important}
@media(max-width:760px){
 body{font-size:1rem;line-height:1.7}
 h1{font-size:clamp(2.25rem,8vw,3.35rem)}
 h2{font-size:clamp(1.8rem,6vw,2.4rem)}
 h3{font-size:1.25rem}
 .navlinks a{font-size:.95rem}
 .hero-copy p{font-size:1.05rem}
 .service p,.project-body p,.faq p,.featurelist li{font-size:1rem}
 .btn,.theme-toggle{font-size:1rem}
}
@media(min-width:1600px){body{font-size:1.0625rem}}


/* V9 refinements: clearer controls, stronger contrast, larger icons and consistent alignment */
:root{--font-scale:1;--forest:#244b35;--forest2:#1d3d2b;--text-main:#1b2924;--text-muted:#4b5d54;--sage:#e5eee2;--line:#dbe3d8}
body{font-size:calc(1rem * var(--font-scale));color:var(--text-main)}
p,li,summary,.navlinks a,.btn,.theme-toggle,.font-control{font-size:calc(1em * var(--font-scale))}
h1{font-size:calc(clamp(2.35rem,4.6vw,4.35rem) * var(--font-scale))}
h2{font-size:calc(clamp(1.9rem,3.2vw,2.9rem) * var(--font-scale))}
h3{font-size:calc(clamp(1.15rem,1.7vw,1.4rem) * var(--font-scale))}
.access-controls{display:flex;align-items:center;gap:5px;flex-shrink:0}
.font-control{min-width:42px;min-height:44px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#203b2b;font-weight:800;cursor:pointer}
.font-control:disabled{opacity:.4;cursor:not-allowed}
.font-control:hover:not(:disabled){background:#e5eee2}
.service-icon{width:58px;height:58px;flex-basis:58px;font-size:1.8rem;line-height:1}
.icon{width:44px;height:44px;flex-basis:44px;font-size:1.3rem}
.services{align-items:stretch}
.service{height:100%;min-width:0}
.service-top{align-items:flex-start;min-height:88px}
.service-top>div{min-width:0}
.service h3{margin-top:3px;min-height:2.4em}
.service .tag{align-self:flex-start;min-height:31px}
.service img{height:160px;flex-shrink:0}
.service p{min-height:5.1em}
.checklist{flex:1}
.service .btn{width:100%;white-space:normal;text-align:center}
html[data-theme="dark"]{--forest:#b8e2ac;--forest2:#d0efc6;--sage:#293b30;--line:#3d5044;--text-main:#f2f6f1;--text-muted:#cbd7ce;--border-main:#3d5044;--button-bg:#b8e2ac;--button-text:#102015}
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .textlink,html[data-theme="dark"] .featurelist li:before,html[data-theme="dark"] .navlinks a:hover{color:#c7edb9}
html[data-theme="dark"] .tag{background:#2a3d31;color:#d4f1c9}
html[data-theme="dark"] .service-icon,html[data-theme="dark"] .icon{background:#2b3e32;color:#d4f1c9}
html[data-theme="dark"] .font-control{background:#18231e;color:#f2f6f1;border-color:#50675a}
html[data-theme="dark"] .font-control:hover:not(:disabled){background:#293b30}
html[data-theme="dark"] .hero-copy p,html[data-theme="dark"] .service p,html[data-theme="dark"] .checklist li{color:var(--text-muted)}
html[data-theme="dark"] .hero-image:before{background:linear-gradient(90deg,var(--hero-bg) 0%,rgba(28,40,33,.08) 20%,transparent 44%)}
.nav{gap:14px}
@media(max-width:1100px){.nav{gap:10px}.navlinks{gap:12px}.brand img{width:105px}.theme-toggle{padding:8px}.theme-toggle .theme-label{display:none}}
@media(max-width:760px){.nav{align-items:stretch}.nav> .brand{align-self:flex-start}.access-controls{align-self:flex-start}.theme-toggle{align-self:flex-start}.service-top{min-height:0}.service h3{min-height:0}.service p{min-height:0}.service img{height:190px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Text-size control feedback */
.access-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.font-control{min-width:42px;min-height:44px;padding:8px 10px;border:1px solid var(--border-main);border-radius:9px;background:var(--page-bg);color:var(--text-main);font:700 1rem Arial,sans-serif;cursor:pointer}
.font-control:hover{border-color:var(--forest);background:var(--surface)}
.font-control:disabled{opacity:.45;cursor:not-allowed}
html[data-theme="dark"] .font-control:hover{border-color:#9bd18e}
@media(max-width:760px){.access-controls{order:2}.theme-toggle{order:3}}




/* V12: one font scaling mechanism only.
   motion.js scales the root font size. Avoid multiplying individual text sizes
   a second time; let rem/em-based typography and spacing reflow naturally. */
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{line-height:1.65}
h1{font-size:clamp(2.25rem,4.6vw,4.1rem);line-height:1.12;overflow-wrap:break-word}
h2{font-size:clamp(1.85rem,3.2vw,2.75rem);line-height:1.18;overflow-wrap:break-word}
h3{font-size:clamp(1.12rem,1.7vw,1.35rem);line-height:1.3;overflow-wrap:break-word}
p,li,summary{line-height:1.65}
.service h3{min-height:0}
.service-top{min-height:0;align-items:flex-start}
.service p,.service .caption{min-height:0}
.checklist{flex:initial}
.service .btn{margin-top:auto;white-space:normal;text-align:center}
.service,.project,.proof-item,.benefit,.sectionhead,.split-copy{min-width:0}
.services{align-items:stretch}
.service{height:auto}
.nav{flex-wrap:wrap}
.navlinks{flex-wrap:wrap;row-gap:10px}
.access-controls{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}
.font-control{min-width:42px;min-height:44px;padding:8px 10px;border:1px solid var(--border-main);border-radius:9px;background:var(--page-bg);color:var(--text-main);font:700 1rem Arial,sans-serif;cursor:pointer}
.font-control:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:1000px){
 .nav{align-items:center}
 .navlinks{flex:1 1 100%;order:3}
 .access-controls{margin-left:auto}
 .services{grid-template-columns:repeat(2,minmax(0,1fr))}
 .service{padding:20px}
}
@media(max-width:760px){
 .nav{align-items:flex-start}
 .navlinks{width:100%;gap:12px}
 .services,.portfolio,.proof-grid{grid-template-columns:minmax(0,1fr)}
 .service-top{gap:12px}
 .service-icon{width:52px;height:52px;flex-basis:52px}
 .service img{height:auto;aspect-ratio:16/9}
 .hero-grid{grid-template-columns:minmax(0,1fr)}
 .hero-copy,.sectionhead,.split-copy{min-width:0}
 .hero-copy h1{max-width:100%}
 .hero-actions{align-items:stretch}
 .hero-actions .btn{justify-content:center}
 .cta{padding:28px 20px}
}
@media(max-width:420px){
 .access-controls{gap:5px}
 .font-control{min-width:40px;padding:7px}
 .theme-toggle{padding:8px}
 .navlinks a{font-size:.9rem}
 .service{padding:18px}
}


/* V13: premium motion layer — polished, restrained, accessible */
:root{--motion-ease:cubic-bezier(.2,.75,.25,1);--motion-fast:220ms;--motion-med:500ms}
html{scroll-behavior:smooth}
body{overflow-x:clip}
::selection{background:#d5e8cd;color:#163625}
.sitehead{transition:background-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
.sitehead.is-scrolled{box-shadow:0 12px 36px rgba(18,54,56,.10)}
.brand img{transition:transform .45s var(--motion-ease),filter .35s ease}
.brand:hover img{transform:translateY(-2px) scale(1.025)}
.navlinks a{transition:color .25s ease}
.navlinks a:after{transform-origin:left center;transition:right .3s var(--motion-ease),height .3s ease}
.navlinks a:hover:after{height:3px}
.hero{position:relative;isolation:isolate}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 80% 15%,rgba(188,211,173,.22),transparent 40%)}
.hero-copy .eyebrow{animation:plFadeUp .7s .05s both}
.hero-copy h1{animation:plFadeUp .85s .12s both}
.hero-copy>p{animation:plFadeUp .85s .22s both}
.hero-actions{animation:plFadeUp .85s .32s both}
.hero-note{animation:plFadeUp .8s .42s both}
.hero-image{box-shadow:0 22px 60px rgba(18,54,56,.10)}
.hero-image img{transition:transform 1s var(--motion-ease),filter .7s ease}
.hero-image:hover img{transform:scale(1.045);filter:saturate(1.08)}
@keyframes plFadeUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes plFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes plGlow{0%,100%{box-shadow:0 10px 28px rgba(18,54,56,.05)}50%{box-shadow:0 16px 38px rgba(36,91,43,.12)}}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .28s var(--motion-ease),box-shadow .28s ease,background-color .25s ease,filter .25s ease}
.btn:before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%) skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transition:transform .65s var(--motion-ease)}
.btn:hover:before{transform:translateX(120%) skewX(-18deg)}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(36,91,43,.2)}
.btn:active{transform:translateY(-1px) scale(.99)}
.service,.project{position:relative;isolation:isolate;transition:transform .42s var(--motion-ease),box-shadow .42s ease,border-color .35s ease}
.service:before,.project:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;background:radial-gradient(circle at 20% 0%,rgba(194,220,183,.25),transparent 58%);transition:opacity .35s ease}
.service:hover:before,.project:hover:before{opacity:1}
.service:hover,.project:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(18,54,56,.12);border-color:#b7cbb2}
.service-icon{transition:transform .42s var(--motion-ease),background-color .3s ease,box-shadow .3s ease}
.service:hover .service-icon{transform:rotate(-5deg) scale(1.08);box-shadow:0 8px 18px rgba(36,91,43,.12)}
.service img{transition:transform .75s var(--motion-ease),filter .55s ease}
.service:hover img{transform:scale(1.045);filter:saturate(1.08)}
.project-thumb{transition:background .4s ease}
.project:hover .project-thumb{background:linear-gradient(135deg,#e1ebdc,#f1e4d0)}
.browser{transition:transform .5s var(--motion-ease),box-shadow .5s ease}
.project:hover .browser{transform:translateY(-5px) scale(1.025);box-shadow:0 18px 32px rgba(18,54,56,.12)}
.proof-item .icon,.benefit .icon{transition:transform .35s var(--motion-ease),background-color .3s ease}
.proof-item:hover .icon,.benefit:hover .icon{transform:translateY(-3px) rotate(-6deg) scale(1.08)}
.textlink{display:inline-block;transition:transform .25s var(--motion-ease),color .25s ease}
.textlink:hover{transform:translateX(4px)}
.faq details{transition:padding .3s ease,background-color .3s ease}
.faq details[open]{padding:20px 16px;background:var(--surface);border-radius:12px}
.faq summary::marker{color:var(--forest)}
.landscape{transition:transform .8s var(--motion-ease),filter .5s ease}
.landscape:hover{transform:scale(1.012);filter:saturate(1.06)}
.cta{position:relative;isolation:isolate;overflow:hidden}
.cta:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-100px;top:-170px;background:radial-gradient(circle,rgba(190,220,177,.2),transparent 70%);pointer-events:none;z-index:-1}
.cta .btn{box-shadow:0 8px 25px rgba(0,0,0,.12)}
.footer a{transition:color .25s ease,transform .25s ease}
.footer a:hover{transform:translateY(-1px)}
/* Reveal animation starts only when JavaScript observes a section. */
.reveal{opacity:0;transform:translateY(24px) scale(.99);filter:blur(2px);transition:opacity .75s ease,transform .8s var(--motion-ease),filter .8s ease}
.reveal.is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.reveal-delay-1{transition-delay:.06s}.reveal-delay-2{transition-delay:.13s}.reveal-delay-3{transition-delay:.2s}
@media(hover:none){.service:hover,.project:hover,.landscape:hover{transform:none}.service:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .reveal{opacity:1;transform:none;filter:none}
}


/* V14: full-bleed, premium layout system */
:root{
 --page-gutter:clamp(22px,5.2vw,88px);
 --content-max:1600px;
 --premium-ink:#172b22;
 --premium-forest:#203f2e;
 --premium-sage:#dce8d7;
}
.wrap{width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-max));max-width:none;margin-inline:auto}
.sitehead{width:100%;position:sticky;top:0}
.nav{width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-max));margin-inline:auto;min-height:86px;gap:clamp(16px,2vw,34px)}
.brand img{width:clamp(118px,10vw,158px)}
.navlinks{gap:clamp(15px,2vw,30px)}
.navlinks a{font-size:.94rem}
.hero{width:100%;position:relative;overflow:hidden;background:linear-gradient(110deg,var(--hero-bg) 0%,var(--hero-bg) 48%,#e9eee5 100%)}
.hero-grid{width:100%;max-width:none;min-height:min(740px,calc(100vh - 86px));grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(32px,5vw,92px);padding:clamp(58px,7vw,112px) var(--page-gutter)}
.hero-copy{max-width:760px;padding:0}
.hero-copy .eyebrow{font-size:.78rem;letter-spacing:.2em}
.hero-copy h1{font-size:clamp(3rem,5.2vw,6.2rem);line-height:1.01;letter-spacing:-.045em;max-width:12ch;margin:0 0 26px}
.hero-copy>p{font-size:clamp(1.1rem,1.35vw,1.35rem);max-width:54ch;line-height:1.75}
.hero-actions{gap:14px;margin:34px 0 28px}
.hero-actions .btn{min-height:54px;padding:16px 24px;border-radius:6px}
.hero-image{height:clamp(420px,48vw,680px);margin:0;border-radius:4px 4px 4px 90px;overflow:hidden;box-shadow:0 34px 90px rgba(20,48,33,.18);transform:translateZ(0)}
.hero-image:before{background:linear-gradient(90deg,rgba(247,247,240,.1),transparent 25%)}
.hero-image img{object-position:center;transform:scale(1.02)}
.proof{width:100%;border-bottom:1px solid var(--border-main)}
.proof-grid{width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-max));margin:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,4vw,64px);padding:30px 0}
.section{width:100%;padding:clamp(78px,8vw,132px) 0}
.section.soft{width:100%}
.sectionhead{max-width:850px;margin-bottom:clamp(36px,4vw,60px)}
.sectionhead .eyebrow{margin-bottom:18px}
.sectionhead h2{font-size:clamp(2.5rem,4vw,4.3rem);letter-spacing:-.035em;line-height:1.06;max-width:18ch}
.sectionhead p{font-size:1.12rem;max-width:62ch;line-height:1.8}
.services{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.service{padding:clamp(22px,2.2vw,36px);border-radius:5px;box-shadow:0 8px 30px rgba(18,54,56,.045)}
.service-icon{width:64px;height:64px;flex-basis:64px;font-size:1.9rem;border-radius:4px}
.service-top{gap:16px;margin-bottom:22px}
.service h3{font-size:clamp(1.3rem,1.55vw,1.7rem);line-height:1.16}
.service img{height:clamp(150px,13vw,220px);border-radius:3px;margin:18px 0 20px}
.service p{font-size:1rem;line-height:1.75}
.service .btn{border-radius:4px;min-height:50px}
.benefitbar{width:100%}
.benefits{width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-max));margin:auto;gap:clamp(20px,3vw,46px);padding:38px 0}
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,7vw,120px)}
.landscape{height:clamp(360px,40vw,620px);border-radius:3px}
.split-copy h2{font-size:clamp(2.5rem,4vw,4.2rem);letter-spacing:-.035em}
.featurelist li{padding:16px 0}
.portfolio{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px)}
.project{border-radius:4px;box-shadow:0 8px 32px rgba(18,54,56,.05)}
.project-thumb{height:clamp(190px,18vw,280px)}
.browser{height:100%;min-height:150px;padding:12px}
.browserhero{height:calc(100% - 22px);min-height:95px;font-size:1.4rem}
.project-body{padding:clamp(22px,2.2vw,34px)}
.faq{max-width:1000px}
.faq details{padding:24px 0}
.cta{width:100%;padding:clamp(42px,5vw,76px);border-radius:4px}
.cta h2{font-size:clamp(2.4rem,4vw,4.1rem);max-width:16ch;letter-spacing:-.03em}
.cta p{font-size:1.1rem;line-height:1.8}
.footer{width:100%;padding:48px 0}
.footgrid{width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-max));margin:auto}
.btn{border-radius:4px;letter-spacing:.01em}
.btn.outline{border-radius:4px}
html[data-theme="dark"] .hero{background:linear-gradient(110deg,var(--hero-bg) 0%,var(--hero-bg) 48%,#202f26 100%)}
html[data-theme="dark"] .hero-image{box-shadow:0 34px 90px rgba(0,0,0,.35)}
html[data-theme="dark"] .service,html[data-theme="dark"] .project{box-shadow:0 12px 36px rgba(0,0,0,.16)}
@media(max-width:1200px){
 .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px}
 .hero-copy h1{font-size:clamp(2.7rem,5vw,4.8rem)}
 .services{grid-template-columns:repeat(2,minmax(0,1fr))}
 .service img{height:clamp(170px,20vw,260px)}
}
@media(max-width:760px){
 :root{--page-gutter:22px}
 .nav{min-height:0;padding:16px 0;gap:14px}
 .hero-grid{min-height:0;grid-template-columns:minmax(0,1fr);padding:54px var(--page-gutter) 0;gap:34px}
 .hero-copy h1{font-size:clamp(2.7rem,10vw,4.3rem);max-width:13ch}
 .hero-copy>p{font-size:1.08rem}
 .hero-image{height:clamp(280px,75vw,460px);border-radius:4px 4px 4px 44px}
 .proof-grid{grid-template-columns:minmax(0,1fr);gap:20px;padding:26px 0}
 .section{padding:68px 0}
 .sectionhead h2,.split-copy h2{font-size:clamp(2.25rem,8vw,3.3rem)}
 .services,.portfolio{grid-template-columns:minmax(0,1fr)}
 .service{padding:24px}
 .service img{height:auto;aspect-ratio:16/9}
 .benefits{grid-template-columns:minmax(0,1fr);padding:30px 0}
 .split{grid-template-columns:minmax(0,1fr);gap:32px}
 .landscape{height:clamp(260px,72vw,400px)}
 .project-thumb{height:230px}
 .cta{padding:34px 24px}
}
@media(min-width:1800px){
 .hero-copy h1{font-size:6.5rem}
 .hero-grid{padding-inline:max(var(--page-gutter),calc((100vw - 1720px)/2))}
}


/* V15 contact details: clear, high-contrast and responsive */
.contact-ribbon{width:100%;background:var(--premium-forest,#203f2e);color:#f5f7f1;font-size:.88rem;position:relative;z-index:11}
.contact-ribbon-inner{width:min(calc(100% - (var(--page-gutter,5vw)*2)),var(--content-max,1600px));min-height:42px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px}
.contact-ribbon-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.contact-ribbon a{color:#f5f7f1;text-decoration:none;display:inline-flex;align-items:center;gap:7px;font-weight:700;transition:opacity .2s ease}
.contact-ribbon a:hover{opacity:.78}
.contact-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px;max-width:980px}
.contact-quick{display:flex;align-items:center;gap:14px;min-width:0;padding:16px 18px;border:1px solid rgba(224,239,226,.22);background:rgba(255,255,255,.055);color:#fff;text-decoration:none;border-radius:4px;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.contact-quick:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);border-color:rgba(224,239,226,.5)}
.contact-quick-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:3px;background:rgba(220,232,215,.14);color:#d8e9d0;font-size:1.25rem}
.contact-quick small,.contact-quick strong,.contact-quick em{display:block}
.contact-quick small{color:#cad8ce;font-size:.8rem;margin-bottom:4px}
.contact-quick strong{color:#fff;font-size:1rem;overflow-wrap:anywhere}
.contact-quick em{color:#cad8ce;font-size:.78rem;font-style:normal;margin-top:3px}
.footer-contact{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;flex-basis:100%;padding-top:20px;border-top:1px solid var(--border-main)}
.footer-contact a{color:var(--text-main);text-decoration:none;font-size:.92rem}
.footer-contact a:hover{text-decoration:underline}
html[data-theme="dark"] .contact-ribbon{background:#0d1711}
html[data-theme="dark"] .contact-quick{border-color:#45594a;background:rgba(255,255,255,.035)}
@media(max-width:760px){
 .contact-ribbon-inner{align-items:flex-start;flex-direction:column;padding:10px 0;gap:8px}
 .contact-ribbon-links{width:100%;flex-wrap:wrap;gap:8px 16px}
 .contact-ribbon-links a{font-size:.82rem}
 .contact-ribbon-links a span{overflow-wrap:anywhere}
 .contact-quick-grid{grid-template-columns:minmax(0,1fr);margin-top:24px}
 .footer-contact{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:420px){
 .contact-ribbon-inner{width:calc(100% - 32px)}
 .contact-ribbon-links{gap:8px 12px}
 .contact-ribbon-links a{font-size:.78rem}
}


/* V16: make the contact bar unmistakable and tighten the overall rhythm */
.contact-ribbon{position:sticky;top:0;z-index:30;background:#173b28!important;color:#fff!important;border-bottom:3px solid #b9cf9b;box-shadow:0 3px 12px rgba(15,35,23,.14);font-size:.92rem}
.contact-ribbon-inner{min-height:48px;padding:6px 0;gap:18px}
.contact-ribbon-inner>span{font-weight:800;letter-spacing:.015em}
.contact-ribbon-links{gap:clamp(14px,2.2vw,32px)}
.contact-ribbon a{color:#fff!important;font-weight:800;text-decoration:none;padding:5px 0}
.contact-ribbon a span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
.sitehead{top:48px!important}
:root{scroll-padding-top:145px}
.hero-grid{min-height:clamp(480px,61vh,630px);padding-top:clamp(38px,4.2vw,66px);padding-bottom:clamp(38px,4.2vw,66px);gap:clamp(28px,4vw,64px)}
.hero-image{height:clamp(380px,39vw,560px)}
.hero-copy h1{margin-bottom:20px}
.hero-copy>p{line-height:1.62}
.hero-actions{margin:24px 0 20px}
.proof-grid{padding:22px 0}
.section{padding:clamp(52px,5.3vw,82px) 0}
.sectionhead{margin-bottom:clamp(26px,3vw,42px)}
.sectionhead .eyebrow{margin-bottom:12px}
.sectionhead h2{margin-bottom:12px}
.services{gap:18px}
.service{padding:clamp(20px,1.8vw,28px)}
.service-top{margin-bottom:14px}
.service img{margin:12px 0 14px}
.benefits{padding:26px 0}
.split{gap:clamp(32px,5vw,72px)}
.landscape{height:clamp(320px,33vw,500px)}
.featurelist{margin:16px 0}
.featurelist li{padding:11px 0}
.project-thumb{height:clamp(170px,15vw,230px)}
.project-body{padding:22px}
.faq details{padding:18px 0}
.cta{padding:clamp(34px,4vw,56px)}
.cta p{line-height:1.65}
.footer{padding:32px 0}
@media(max-width:760px){
 .contact-ribbon-inner{align-items:flex-start;flex-direction:column;gap:4px;padding:8px 0}
 .contact-ribbon-links{display:flex;width:100%;flex-wrap:wrap;gap:4px 16px}
 .contact-ribbon-links a{font-size:.83rem}
 .sitehead{top:74px!important}
 :root{scroll-padding-top:170px;--page-gutter:20px}
 .hero-grid{min-height:0;padding:34px var(--page-gutter) 0;gap:24px}
 .hero-image{height:clamp(250px,66vw,380px)}
 .section{padding:44px 0}
 .sectionhead{margin-bottom:24px}
 .proof-grid{padding:20px 0;gap:14px}
 .benefits{padding:22px 0}
 .split{gap:24px}
 .landscape{height:clamp(240px,64vw,340px)}
 .project-thumb{height:205px}
 .cta{padding:28px 20px}
 .footer{padding:28px 0}
}
@media(max-width:460px){
 .contact-ribbon-inner>span{font-size:.82rem}
 .contact-ribbon-links{gap:3px 12px}
 .contact-ribbon-links a{font-size:.76rem}
 .sitehead{top:82px!important}
}
@media(prefers-reduced-motion:reduce){.contact-ribbon a{transition:none}}

/* V18 services dropdown and services-page layout */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: .35rem; }
.nav-dropdown-menu { display: none; position: absolute; z-index: 1000; top: 100%; left: -.8rem; min-width: 255px; padding: .55rem; border: 1px solid var(--line, #deded5); border-radius: 14px; background: var(--surface, #fffdf7); box-shadow: 0 16px 40px rgba(20,40,25,.16); }
.nav-dropdown-menu a { display: block; padding: .7rem .85rem; border-radius: 8px; white-space: nowrap; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { background: var(--soft, #f0f2e9); }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { display: block; }
.service-page-hero { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--soft, #f0f2e9); }
.service-page-hero .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; }
.service-page-hero h1 { max-width: 850px; margin: .7rem 0 1rem; }
.service-page-hero p { max-width: 760px; font-size: 1.12rem; line-height: 1.7; }
.service-page-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; margin-top: 2rem; }
.service-page-card { padding: 1.5rem; border: 1px solid var(--line, #deded5); border-radius: 18px; background: var(--surface, #fffdf7); }
.service-page-card h2, .service-page-card h3 { margin-top: 0; }
.service-page-card p { line-height: 1.65; }
.service-page-card a { font-weight: 700; }
.service-page-content { padding: clamp(2.5rem,5vw,4rem) 0; }
.service-page-content h2 { margin-top: 0; }
.service-page-content ul { padding-left: 1.3rem; line-height: 1.9; }
.service-cta { margin-top: 2rem; padding: 2rem; border-radius: 18px; background: var(--soft, #f0f2e9); }
@media (max-width: 900px) { .service-page-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .service-page-grid { grid-template-columns: 1fr; } .nav-dropdown-menu { position: static; box-shadow: none; min-width: 0; } .nav-dropdown { align-items: flex-start; flex-direction: column; } .nav-dropdown-menu a { white-space: normal; } }