:root{
  --slate:#161D19; --slate-2:#232C27; --titanium:#AEB7C2; --mist:#EDF0F3; --paper:#F8F9FA;
  --ink:#17202A; --ink-soft:#56616E; --line:#D5DAE0;
  --green:#00A858; --green-deep:#007A40; --green-dark:#00613A;
  --font:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1180px; --r:10px;
  --fs-sm:.9rem; --fs-base:1.0625rem; --fs-lg:1.375rem; --fs-xl:clamp(1.7rem,3vw,2.3rem); --fs-hero:clamp(2.5rem,6vw,4.6rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:1.6;color:var(--ink);background:var(--paper)}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--green-deep);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
h1,h2,h3{font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0}
h2{font-size:var(--fs-xl)}
.btn{display:inline-block;font:600 1rem var(--font);padding:.85rem 1.4rem;border-radius:var(--r);background:var(--green-deep);color:#fff;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--green-dark)}
.hero .btn:not(.ghost),.contact .btn{background:var(--green);color:#06210F}
.hero .btn:not(.ghost):hover,.contact .btn:hover{background:#17C070}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px var(--titanium)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}

/* Header */
.top{background:var(--slate);color:#fff}
.top .wrap{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-top:.9rem;padding-bottom:.9rem}
.brand{display:block;line-height:0}
.brand img{height:50px;width:auto}
.call .short{display:none}
.top nav{display:flex;gap:1.4rem;flex-wrap:wrap;margin-left:auto}
.top nav a{text-decoration:none;font-size:var(--fs-sm);color:#D9DFE6}
.top nav a:hover{color:#fff;text-decoration:underline}
.call{font-weight:600;text-decoration:none;font-size:var(--fs-sm);padding:.5rem .9rem;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--green);color:#fff}

/* Hero: brushed-titanium texture */
.hero{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
  linear-gradient(160deg,var(--slate-2),var(--slate) 60%);
  color:#fff;padding:4rem 0 4.5rem}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero h1{font-size:var(--fs-hero)}
.hero p.lead{font-size:var(--fs-lg);color:#C8D0D9;max-width:34rem;margin:1.25rem 0 2rem}
.hero .acts{display:flex;gap:.8rem;flex-wrap:wrap}
.calc{background:var(--paper);color:var(--ink);border-radius:14px;padding:1.6rem;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.calc h2{font-size:1.3rem;margin-bottom:.3rem}
.calc small{color:var(--ink-soft);display:block;margin-bottom:1.1rem}
.calc label{display:flex;justify-content:space-between;font-size:var(--fs-sm);font-weight:600;margin-top:1rem}
.calc input[type=number]{width:100%;font:600 1.1rem var(--font);padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:8px;margin-top:.35rem;background:#fff}
.calc input[type=range]{width:100%;accent-color:var(--green-deep);margin-top:.35rem}
.result{margin-top:1.3rem;padding:1.1rem;border-radius:10px;background:var(--mist)}
.result b{display:block;font-size:2rem;letter-spacing:-.02em;line-height:1.1}
.result span{font-size:var(--fs-sm);color:var(--ink-soft)}
.calc .btn{width:100%;text-align:center;margin-top:1rem}

/* Sections */
section{padding:4.5rem 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.head p{margin:.5rem 0 0;color:var(--ink-soft);max-width:36rem}
.head a{font-weight:600;color:var(--green-deep)}

.cities{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink)}
.cities a{padding:1.6rem 1.2rem 1.6rem 0;text-decoration:none;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.cities a small{display:block;font-size:var(--fs-sm);font-weight:400;color:var(--ink-soft);letter-spacing:0;margin-top:.3rem}
.cities a:hover{color:var(--green-deep)}

.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.5rem}
.proj{text-decoration:none;display:flex;flex-direction:column}
.ph{aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:#eef1ef;display:grid;place-items:center;color:var(--ink-soft);font-size:var(--fs-sm)}.ph img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.proj h3{font-size:var(--fs-lg);margin:1rem 0 .3rem}
.proj p{margin:0;color:var(--ink-soft);font-size:var(--fs-sm)}
.proj:hover h3{color:var(--green-deep)}

.steps-bg{background:var(--mist)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--green-deep);padding-top:1rem}
.steps li::before{content:counter(s);font-weight:800;font-size:1.6rem;color:var(--green-deep)}
.steps h3{font-size:1.15rem;margin:.3rem 0 .4rem}
.steps p{margin:0;color:var(--ink-soft);font-size:var(--fs-sm)}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.post{text-decoration:none}
.post time{font-size:var(--fs-sm);color:var(--ink-soft)}
.post h3{font-size:1.2rem;margin:.4rem 0}
.post:hover h3{color:var(--green-deep)}

/* Homepage latest blog cards: featured images use the same 681:486 frame as the blog archive. */
#blog .post--featured{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid rgba(213,218,224,.92);border-radius:16px;background:#fff;box-shadow:0 5px 20px rgba(20,50,30,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
#blog .post--featured:hover{transform:translateY(-2px);border-color:rgba(0,122,64,.35);box-shadow:0 12px 28px rgba(20,50,30,.08)}
#blog .post-image{position:relative;display:block;width:100%;aspect-ratio:681 / 486;overflow:hidden;background:#eef3ef}
#blog .post-image img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
#blog .post-image-label{position:absolute;left:18px;bottom:15px;z-index:1;color:#fff;font-size:9px;font-weight:700;letter-spacing:2px;text-shadow:0 1px 4px #0008}
#blog .post-content{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:1.1rem 1.2rem 1.25rem}
#blog .post-content time{font-size:10px;color:#819084;margin-bottom:12px}
#blog .post-content h3{font-size:1.15rem;line-height:1.32;margin:0 0 .85rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#blog .post-content h3 a{color:inherit;text-decoration:none}
#blog .post-content h3 a:hover{text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px}
#blog .post-read{margin-top:auto;padding-top:.2rem;color:var(--green-deep);font-size:.9rem;font-weight:750;text-decoration:none}
#blog .post-read:hover{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){#blog .post--featured{transition:none}#blog .post--featured:hover{transform:none}}


.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact-item{display:flex;align-items:center;gap:15px;min-width:0}
.fact-icon{display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;border-radius:17px;background:rgba(0,168,88,.07);border:1px solid rgba(0,122,64,.1);color:var(--green-deep)}
.fact-icon svg{display:block}
.fact-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.facts b{display:block;color:var(--ink);font-size:clamp(1.4rem,2.1vw,1.85rem);font-weight:800;line-height:1.15;letter-spacing:-.03em}
.fact-copy>span{color:var(--ink-soft);font-size:12px;line-height:1.5}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}}
@media(max-width:480px){.facts{gap:24px 16px;padding:26px 0}.fact-item{align-items:flex-start;flex-direction:column;gap:12px}.fact-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px}.fact-icon svg{width:23px;height:23px}.facts b{font-size:1.5rem}.fact-copy>span{font-size:11px}}

.contact{background:var(--slate);color:#fff}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact p{color:#C8D0D9}
.contact form{display:grid;gap:1rem}
.contact label{font-size:var(--fs-sm);font-weight:600;display:grid;gap:.35rem}
.contact input,.contact select{min-height:44px;font:inherit;padding:.8rem;border-radius:8px;border:1.5px solid #3C4A5A;background:#fff;color:var(--ink)}

footer{background:#0F1411;color:#AEB7C2;padding:2.5rem 0;font-size:var(--fs-sm)}
footer .wrap{display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap}
footer a{color:#D9DFE6}
.foot-logo{height:40px;width:auto;display:block;margin-bottom:.8rem}

/* Page hero (inner pages) */
.page-hero{background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(160deg,var(--slate-2),var(--slate) 60%);color:#fff;padding:3rem 0}
.page-hero h1{font-size:clamp(2rem,4.5vw,3.2rem)}
.page-hero p{color:#C8D0D9;max-width:38rem;margin:.9rem 0 0;font-size:var(--fs-lg)}
.top nav a[aria-current="page"]{color:#fff;box-shadow:0 2px 0 var(--green)}

/* Filters */
.filters{display:grid;gap:1.1rem;padding:1.5rem 0 2rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.fgroup{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.fgroup>span{font-weight:600;font-size:var(--fs-sm);min-width:4.5rem}
.chip{font:600 var(--fs-sm) var(--font);padding:.55rem 1rem;min-height:44px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--green-deep)}
.chip[aria-pressed="true"]{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.search{font:inherit;padding:.7rem .9rem;min-height:44px;border:1.5px solid var(--line);border-radius:8px;width:100%;max-width:22rem;background:#fff}
.count{margin:0;color:var(--ink-soft);font-size:var(--fs-sm)}
.proj[hidden]{display:none}
.tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.tags span{font-size:.8rem;padding:.2rem .6rem;border-radius:999px;background:var(--mist);color:var(--ink-soft)}
.empty{padding:2rem;border-radius:var(--r);background:var(--mist);text-align:center}
.empty p{margin:0 0 1rem}
.cta-band{background:var(--mist);padding:3rem 0}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}

@media (max-width:900px){
  .hero .wrap,.contact .wrap{grid-template-columns:1fr}
  .projects,.posts,.steps,.cities{grid-template-columns:1fr}
  .top .wrap{gap:.75rem;justify-content:space-between}
  .brand img{height:42px}
  .call .full{display:none}
  .call .short{display:inline}
  .top nav{margin-left:0;width:100%;order:3;gap:1rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (min-width:600px) and (max-width:900px){.projects{grid-template-columns:repeat(2,1fr)}}

/* Shared desktop and mobile navigation */
.menu-toggle{display:none}
@media(max-width:1100px){
 .top .wrap{gap:.75rem;justify-content:space-between}
 .top .brand{margin-right:auto}
 .top .brand img{height:42px;max-width:48vw;object-fit:contain}
 .top .call{order:1}
 .menu-toggle{display:flex;order:2;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;border:1px solid #64816f;border-radius:8px;background:transparent;color:#fff;cursor:pointer}
 .menu-toggle span{display:block;width:22px;height:2px;background:currentColor;transition:transform .18s,opacity .18s}
 .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
 .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .top nav{display:none;order:3;flex:0 0 100%;width:100%;margin:0;padding:.75rem 0;border-top:1px solid #ffffff26;flex-direction:column;gap:0}
 .top nav.is-open{display:flex}
 .top nav a{padding:.8rem .5rem;min-height:44px}
 .top nav a[aria-current="page"]{box-shadow:none;border-left:3px solid var(--green);background:#ffffff0a}
 .call .full{display:none}
 .call .short{display:inline}
}
.menu-toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.menu-toggle span{transition:none}}

/* Mobile header: logo and menu, followed by a full-width call action. */
@media(max-width:1100px){
 .top .brand{order:0}
 .top .menu-toggle{order:1;flex-shrink:0}
 .top .call{order:2;flex:0 0 100%;width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--green-deep);box-shadow:none}
 .top .call .full{display:inline}
 .top .call .short{display:none}
 .top nav{order:3}
}

.form-status{margin:.2rem 0 0;font-size:.95rem;color:#C8D0D9}
.notfound{text-align:center;padding:5rem 0}
.notfound .big{font-size:clamp(4rem,12vw,8rem);font-weight:800;letter-spacing:-.04em;color:var(--green-deep);line-height:1}
.notfound .acts{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}

/* Icon-only floating WhatsApp control, shared by every page. */
.wa-float{position:fixed;z-index:50;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom,0px));display:grid;place-items:center;box-sizing:border-box;width:56px;height:56px;min-width:56px;min-height:56px;padding:0;border:0;border-radius:50%;background:#25D366;color:#06210F;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.28);transition:background .18s ease,transform .18s ease}
.wa-float:hover{background:#3BE077;transform:translateY(-2px)}
.wa-float svg{display:block;width:32px;height:32px;flex:none}
/* Keep the link accessible through its aria-label while showing only the icon. */
.wa-float span{display:none}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}}
@media print{.wa-float{display:none}}

/* Homepage scroll-to-top control; same horizontal alignment, separate from WhatsApp. */
.scroll-top{position:fixed;z-index:49;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 68px);display:grid;place-items:center;width:56px;height:56px;padding:0;border:1.5px solid rgba(255,255,255,.9);border-radius:50%;background:var(--green-deep);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.25);cursor:pointer;transition:background .18s ease,transform .18s ease}
.scroll-top:hover{background:var(--green-dark);transform:translateY(-2px)}
.scroll-top svg{display:block;width:24px;height:24px}
.scroll-top:focus-visible{outline:3px solid #fff;outline-offset:3px}
.scroll-top[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.scroll-top{transition:none}}
@media print{.scroll-top{display:none!important}}

/* Shared header actions: keep the primary account link beside the phone action. */
.header-actions{display:flex;align-items:center;gap:.55rem;flex:none}
.header-bank-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem .85rem;border:1px solid var(--green);border-radius:var(--r);background:var(--green);color:#06210F;text-decoration:none;font:600 var(--fs-sm) var(--font);white-space:nowrap}
.header-bank-button:hover{background:#17C070;border-color:#17C070}
.header-bank-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(min-width:1101px){.top nav{gap:.65rem}}
@media(max-width:1100px){
 .top .header-actions{order:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;width:100%;flex:0 0 100%}
 .top .header-actions>.call{order:0;display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;flex:none;background:var(--green-deep);box-shadow:none}
 .top .header-actions>.call .full{display:none}
 .top .header-actions>.call .short{display:inline}
 .top .header-actions>.header-bank-button{order:1;width:100%;min-height:44px}
}

/* Second compact header row: ticker and Bank Accounts share existing ticker height. */
.news-ticker .news-row{display:flex;align-items:center;gap:.65rem;box-sizing:border-box}
.news-ticker .news-row .news-inner{flex:1;min-width:0;width:auto;max-width:none}
.news-ticker .news-row>.header-bank-button{flex:none;min-height:36px;padding:.35rem .7rem;font-size:.85rem}
@media(max-width:1100px){
 .top .header-actions{display:none}
 .news-ticker .news-row>.header-bank-button{display:none}
}