:root{
  /* ---- semantic palette tokens · edit these to recolour the whole site ---- */
  --bg:#FBF6EE; --surface:#FFFFFF; --text:#241E1A; --muted:#7c726a; --line:#EFE6D9;
  --accent:#E5342B; --accent-d:#c4271f; --accent-rgb:229,52,43;
  --soft:#F2EADF; --secondary:#F5A524; --ok:#1A9C5B;
  /* legacy aliases → resolve to the tokens above, so every existing rule re-themes automatically */
  --cream:var(--bg); --card:var(--surface); --ink:var(--text);
  --red:var(--accent); --red-d:var(--accent-d); --mint:var(--soft);
  --amber:var(--secondary); --green:var(--ok);
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,.61,.36,1); --r:24px;
}
/* ---- colour presets (offer these as options; switch with the palette control) ---- */
html[data-theme="blue"]{--bg:#F4F7FB;--surface:#fff;--text:#10233B;--muted:#5b6b7d;--line:#E3EAF2;--accent:#1F6FEB;--accent-d:#1a5fce;--accent-rgb:31,111,235;--soft:#E8F0FB;--secondary:#F5A524;--ok:#1A9C5B;}
html[data-theme="teal"]{--bg:#F1F7F6;--surface:#fff;--text:#0F2E29;--muted:#5c7570;--line:#DBE9E6;--accent:#0E8F86;--accent-d:#0b7a72;--accent-rgb:14,143,134;--soft:#E1F1EE;--secondary:#F0A63A;--ok:#1A9C5B;}
html[data-theme="forest"]{--bg:#F5F6EF;--surface:#fff;--text:#22301C;--muted:#6a7360;--line:#E6E8DA;--accent:#3E7C3A;--accent-d:#336831;--accent-rgb:62,124,58;--soft:#E9F1E4;--secondary:#E0A63A;--ok:#2E8B57;}
html[data-theme="graphite"]{--bg:#F4F4F5;--surface:#fff;--text:#1B1C1E;--muted:#6b6b70;--line:#E6E6E8;--accent:#EA580C;--accent-d:#c9490a;--accent-rgb:234,88,12;--soft:#EEEFF1;--secondary:#F5A524;--ok:#1A9C5B;}
html[data-theme="plum"]{--bg:#F8F5FA;--surface:#fff;--text:#241A2E;--muted:#726a7c;--line:#EBE4F0;--accent:#8B3FA8;--accent-d:#763691;--accent-rgb:139,63,168;--soft:#F0E8F5;--secondary:#E0894A;--ok:#1A9C5B;}
/* mild / muted combinations */
html[data-theme="sand"]{--bg:#F5EFE4;--surface:#FFFDF9;--text:#33291E;--muted:#7d7161;--line:#E7DCC9;--accent:#B26A45;--accent-d:#985732;--accent-rgb:178,106,69;--soft:#EEE4D3;--secondary:#C99A57;--ok:#4E8060;}
html[data-theme="sage"]{--bg:#F0F3EC;--surface:#FDFEFB;--text:#273022;--muted:#6c7566;--line:#DFE6D5;--accent:#5F7E5A;--accent-d:#4d6a49;--accent-rgb:95,126,90;--soft:#E5EDDD;--secondary:#C39A55;--ok:#4E8060;}
html[data-theme="dusty"]{--bg:#F7F1F2;--surface:#FFFDFD;--text:#2E242A;--muted:#7c6d73;--line:#EBDEE2;--accent:#A75F72;--accent-d:#8e4c5f;--accent-rgb:167,95,114;--soft:#F0E6EA;--secondary:#C49468;--ok:#4E8060;}
html[data-theme="slate"]{--bg:#F1F4F7;--surface:#FDFEFF;--text:#222A33;--muted:#66707b;--line:#E0E6EC;--accent:#566B80;--accent-d:#46586b;--accent-rgb:86,107,128;--soft:#E7ECF1;--secondary:#C09257;--ok:#4E8060;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Nunito Sans",system-ui,sans-serif;background:var(--cream);color:var(--ink);font-size:17px;line-height:1.6;overflow-x:hidden}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{font-weight:700;font-size:.8rem;letter-spacing:.04em;color:var(--red);text-transform:uppercase}

/* header floating pill */
header{position:sticky;top:16px;z-index:50;margin:16px 0 0}
.nav{position:relative;display:flex;align-items:center;gap:22px;height:64px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:100px;padding:0 12px 0 22px;box-shadow:0 10px 30px -18px rgba(36,30,26,.4)}
.brand{display:flex;align-items:center;gap:10px;font-family:"Bricolage Grotesque";font-weight:800;font-size:1.12rem;white-space:nowrap;flex:0 0 auto}
.brand .mk{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;letter-spacing:0;line-height:1;white-space:nowrap;flex:0 0 auto}
.brand .mk b{color:var(--red)}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:0;background:none;cursor:pointer;flex:0 0 auto;padding:0}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.links{display:flex;gap:6px;margin-left:auto;font-weight:600;font-size:.94rem}
.links a{padding:8px 14px;border-radius:100px;transition:background .25s,color .25s}
.links a:hover{background:var(--mint)}
.links a.active{background:var(--mint);color:var(--red)}
.lang{display:flex;background:var(--cream);border-radius:100px;padding:3px;position:relative;border:1px solid var(--line)}
.lang button{border:0;background:none;font:inherit;font-weight:700;font-size:.78rem;padding:6px 11px;border-radius:100px;cursor:pointer;color:var(--muted);position:relative;z-index:2;transition:color .3s}
.lang button.on{color:#fff}
.lang .pill{position:absolute;top:3px;bottom:3px;border-radius:100px;background:var(--red);transition:left .45s var(--spring),width .45s var(--spring);z-index:1}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;font-family:"Nunito Sans";font-weight:700;font-size:.96rem;padding:13px 24px;border-radius:100px;border:0;cursor:pointer;transition:transform .3s var(--spring),box-shadow .3s,background .25s;box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.7)}
.btn:hover{transform:translateY(-3px) scale(1.03);background:var(--red-d);box-shadow:0 16px 30px -12px rgba(var(--accent-rgb),.8)}
.btn .arr{transition:transform .3s var(--spring)}
.btn:hover .arr{transform:translateX(4px)}
.btn.light{background:var(--ink)}
.btn.light:hover{background:#000}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--mint);transform:translateY(-3px)}
@media(max-width:880px){
  .burger{display:flex}
  .nav{gap:8px;padding:0 8px 0 16px}
  .brand{font-size:1rem;gap:8px}
  .brand .mk{width:32px;height:32px}
  .lang{margin-left:auto;padding:2px}
  .lang button{padding:6px 8px;font-size:.72rem}
  .nav>.btn{display:none}
  .links{position:absolute;top:calc(100% + 10px);left:0;right:0;margin:0;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:0 22px 44px -20px rgba(36,30,26,.5);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
  .nav.open .links{opacity:1;visibility:visible;transform:none}
  .links a{padding:13px 16px;font-size:1.02rem}
}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .92fr;gap:52px;align-items:center;padding:40px 0 30px}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.2rem);margin:14px 0 18px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lead{font-size:1.16rem;color:var(--muted);max-width:44ch;margin-bottom:26px}
.hero-cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.hero-cta .callnow{font-weight:700;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.hero-cta .callnow b{color:var(--red)}
.hero-media{position:relative}
.hero-media img{width:100%;border-radius:28px;display:block;aspect-ratio:4/5;object-fit:cover;box-shadow:0 34px 60px -34px rgba(36,30,26,.6)}
.float-badge{position:absolute;left:-18px;bottom:28px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px 18px;display:flex;gap:12px;align-items:center;box-shadow:0 18px 40px -20px rgba(36,30,26,.5);animation:floaty 4.5s var(--ease) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.float-badge .seal{width:46px;height:46px;border-radius:50%;border:3px solid var(--red);display:grid;place-items:center;font-family:"Bricolage Grotesque";font-weight:800;color:var(--red);flex:0 0 auto}
.float-badge strong{font-family:"Bricolage Grotesque";display:block;font-size:.98rem}
.float-badge small{color:var(--muted);font-size:.8rem}

/* page hero (subpages) */
.page-hero{padding:40px 0 8px}
.page-hero .inner{max-width:780px}
.page-hero h1{font-size:clamp(2.2rem,4.8vw,3.7rem);margin:14px 0 16px}
.page-hero h1 em{font-style:normal;color:var(--red)}
.page-hero .lead{font-size:1.16rem;color:var(--muted);max-width:60ch}
.crumb{font-size:.85rem;color:var(--muted);font-weight:600}
.crumb a:hover{color:var(--red)}

/* stats — borderless number row with hairline dividers (no boxes) */
.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:22px 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-strip.five{grid-template-columns:repeat(5,1fr)}
.tile{padding:12px 30px;position:relative}
.tile + .tile{border-left:1px solid var(--line)}
.tile .big-num{font-family:"Bricolage Grotesque";font-weight:800;font-size:2.8rem;line-height:1;color:var(--text)}
.stats-strip.five .tile .big-num{font-size:2.2rem}
.tile .big-num .pl{color:var(--accent)}
.tile .lab{color:var(--muted);font-size:.92rem;margin-top:8px}

section.block{padding:64px 0}
.sec-head{text-align:center;max-width:620px;margin:0 auto 40px}
.sec-head h2{font-size:clamp(2rem,4vw,2.9rem);margin-top:10px}
.sec-head p{color:var(--muted);margin-top:12px}

/* services cards (home) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px;cursor:pointer;transition:transform .4s var(--spring),box-shadow .4s;position:relative}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(36,30,26,.5)}
.svc-card .chip{width:52px;height:52px;border-radius:16px;background:rgba(var(--accent-rgb),.1);display:grid;place-items:center;font-size:1.5rem;margin-bottom:18px;transition:transform .4s var(--spring)}
.svc-card:hover .chip{transform:rotate(-8deg) scale(1.12)}
.svc-card h3{font-size:1.22rem;margin-bottom:8px}
.svc-card p{color:var(--muted);font-size:.94rem}

/* services detail (teenused page) — alternating photo + content panels */
.svc-list{display:grid;gap:26px}
.svc-long{background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:.92fr 1.08fr;align-items:stretch;transition:transform .4s var(--spring),box-shadow .4s;scroll-margin-top:100px}
.svc-long:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(36,30,26,.28)}
.svc-media{position:relative;min-height:300px;overflow:hidden}
.svc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.svc-long:hover .svc-media img{transform:scale(1.04)}
.svc-long:nth-child(even) .svc-media{order:2}
.svc-content{padding:38px 40px}
.svc-long .chip{width:56px;height:56px;border-radius:18px;background:rgba(var(--accent-rgb),.1);display:grid;place-items:center;margin-bottom:16px}
.svc-long h3{font-size:1.5rem;margin-bottom:10px}
.svc-long .desc{color:var(--muted);margin-bottom:18px}
.svc-long ul{list-style:none;display:grid;gap:11px;margin-bottom:22px}
.svc-long li{display:flex;gap:11px;align-items:flex-start;font-weight:600}
.svc-long li .ck{flex:0 0 24px;height:24px;border-radius:50%;background:rgba(var(--accent-rgb),.12);color:var(--ok);display:grid;place-items:center;font-size:.78rem;margin-top:2px}

/* about */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.about-grid img{width:100%;border-radius:28px;aspect-ratio:5/4;object-fit:cover;box-shadow:0 30px 56px -34px rgba(36,30,26,.55)}
.about-grid h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:16px}
.checklist{list-style:none;display:grid;gap:14px;margin-top:18px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.checklist li .ck{flex:0 0 28px;height:28px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:.8rem;margin-top:2px}

/* steps */
.steps{background:var(--ink);border-radius:36px;padding:56px 40px;color:#fff;position:relative;overflow:hidden}
.steps .sec-head h2{color:#fff}.steps .sec-head p{color:#b8a89a}.steps .eyebrow{color:var(--amber)}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:28px;transition:transform .4s var(--spring),background .3s}
.step:hover{transform:translateY(-6px);background:rgba(255,255,255,.09)}
.step .n{width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;font-family:"Bricolage Grotesque";font-weight:800;display:grid;place-items:center;font-size:1.2rem;margin-bottom:16px;transition:transform .4s var(--spring)}
.step:hover .n{transform:scale(1.15) rotate(8deg)}
.step h3{font-size:1.2rem;margin-bottom:8px}.step p{color:#b8a89a;font-size:.94rem}

/* cta band */
.cta-band{background:var(--ink);border-radius:36px;padding:50px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;color:#fff;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(229,52,43,.35),transparent 70%)}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.3rem);position:relative;z-index:1}
.cta-band p{color:#b8a89a;margin-top:8px;position:relative;z-index:1}
.cta-band .btn{position:relative;z-index:1}

/* why */
/* why — light feature list (top-rule, no boxes) */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 26px}
.why-card{padding:20px 0 0;border-top:2px solid var(--text)}
.why-card .ic{width:46px;height:46px;border-radius:14px;background:rgba(var(--accent-rgb),.1);color:var(--accent);display:grid;place-items:center;font-size:1.3rem;margin-bottom:14px;transition:transform .4s var(--spring)}
.why-card:hover .ic{transform:scale(1.12) rotate(-6deg)}
.why-card h3{font-size:1.1rem;margin-bottom:6px}.why-card p{color:var(--muted);font-size:.9rem}

/* contact */
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:36px;padding:0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.contact-card .info{padding:46px;background:var(--mint)}
.contact-card .info h2{font-size:2rem;margin:10px 0 16px}
.ci{display:flex;gap:12px;align-items:center;padding:13px 0;font-weight:600}
.ci .ic{width:42px;height:42px;border-radius:14px;background:#fff;display:grid;place-items:center;transition:transform .35s var(--spring)}
.ci:hover .ic{transform:scale(1.1) rotate(-6deg)}
form{padding:46px;display:grid;gap:16px}
.contact-card form{padding:46px}
.field input,.field textarea{width:100%;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:15px;font:inherit;transition:border-color .25s,background .25s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}

/* offices */
/* offices — light directory grid (cells, not floating cards) */
.office-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:18px;overflow:hidden}
.office{background:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:22px 24px;transition:background .3s}
.office:hover{transform:none;box-shadow:none;background:rgba(var(--accent-rgb),.05)}
.office .flag{width:38px;height:38px;border-radius:11px;background:rgba(var(--accent-rgb),.1);display:grid;place-items:center;margin-bottom:12px}
.office .flag svg{width:22px;height:22px;color:var(--accent)}
.office h3{font-size:1.1rem;margin:6px 0 4px}
.office p{color:var(--muted);font-size:.9rem}
.office .person{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.office .person .pname{font-family:"Bricolage Grotesque";font-weight:700;font-size:.98rem}
.office .person .prole{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.office .person a{display:block;color:var(--accent);font-weight:600;font-size:.88rem;line-height:1.7}
.office .person a:hover{text-decoration:underline}

footer{padding:54px 0 36px}
.foot{background:var(--ink);color:#b8a89a;border-radius:32px;padding:40px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.92rem}
.foot b{color:#fff;font-family:"Bricolage Grotesque"}
.foot a:hover{color:#fff}

/* icons */
[data-icon]{display:grid;place-items:center}
[data-icon] svg{display:block}
.svc-card .chip svg{width:28px;height:28px;color:var(--accent)}
.svc-long .chip svg{width:34px;height:34px;color:var(--accent)}
.why-card .ic svg{width:23px;height:23px}
.ci .ic svg{width:20px;height:20px;color:var(--ink)}
.svc-long li .ck svg,.checklist li .ck svg{width:13px;height:13px}

.reveal{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .6s var(--ease),transform .6s var(--spring)}
.reveal.in{opacity:1;transform:none}

/* theme picker — demo control for previewing colour options */
.theme-picker{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:9px;max-width:min(340px,calc(100vw - 36px));background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:11px 15px;box-shadow:0 14px 34px -16px rgba(0,0,0,.35)}
.theme-picker .lbl{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.theme-picker .sw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);transition:transform .25s var(--spring);padding:0}
.theme-picker .sw:hover{transform:scale(1.2)}
.theme-picker .sw.on{box-shadow:0 0 0 2px var(--text)}

@media(max-width:880px){
  .hero,.stats-strip,.stats-strip.five,.svc-grid,.step-grid,.why-grid,.contact-card,.about-grid,.office-grid{grid-template-columns:1fr}
  .hero-media img{aspect-ratio:16/11}
  .float-badge{left:10px}
  .why-grid,.office-grid{grid-template-columns:1fr 1fr}
  .svc-long{grid-template-columns:1fr}
  .svc-long:nth-child(even) .svc-media{order:0}
  .svc-media{min-height:200px}
  .stats-strip .tile + .tile{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:560px){.theme-picker .lbl{display:none}.theme-picker{padding:9px 12px;gap:7px}}
@media(max-width:560px){.why-grid,.office-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}