@font-face{font-family:"Geist";src:url(/fonts/geist-latin-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --surface:#E2ECED; --surface-2:#F3F7F7; --ink:#0E201E; --muted:#3E5452; --line:rgba(14,32,30,.14);
  --accent:#0D684D; --accent-hover:#0A5640; --accent-soft:#D3E6DF; --on-dark:#E8F0EF; --on-dark-muted:#AFC3C0;
  --hh:68px; --pad:clamp(20px,5vw,56px); --max:1200px; --r-btn:8px; --r-img:12px;
  --shadow:0 1px 2px rgba(30,60,58,.08),0 8px 24px rgba(30,60,58,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 12px)}
body{margin:0;background:var(--surface);color:var(--ink);font:400 17px/1.6 "Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
p{margin:0}
.icon{width:22px;height:22px;flex:none;stroke-width:1.75}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-btn);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-btn);font:600 16px/1 "Geist",system-ui,sans-serif;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:rgba(14,32,30,.06)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--on-dark)}
.btn-ghost-light{border-color:var(--on-dark);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.08)}
.btn .icon{width:20px;height:20px}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:1.5px solid transparent}
.link:hover{border-bottom-color:currentColor}
.link .icon{width:18px;height:18px}

/* Header: transparent over the hero surface, solid only after scroll */
.site-header{position:sticky;top:0;z-index:50;height:var(--hh);background:transparent;transition:background-color .2s ease,box-shadow .2s ease}
.site-header.scrolled,.no-js .site-header{background:rgba(226,236,237,.94);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav{height:100%;max-width:1440px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{width:101px;height:40px}
.nav-links{display:flex;gap:36px;list-style:none;margin:0;padding:0;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{font-weight:500;font-size:15px;text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav-links a:hover{border-bottom-color:var(--line)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--accent)}
.nav-cta{min-height:40px;font-size:15px;padding:0 18px}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ink);border-radius:var(--r-btn);cursor:pointer;margin-right:-10px}
.menu-btn .icon{width:26px;height:26px}
.menu-btn .i-close{display:none}
.menu-open .menu-btn .i-open{display:none}
.menu-open .menu-btn .i-close{display:block}

/* Hero: header + hero = one viewport. Text on top, art in its own region that scales (contain), never cropped */
.hero{height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,4.5svh,44px);padding:clamp(8px,2.5svh,32px) var(--pad) clamp(12px,3.5svh,40px);overflow:hidden}
.hero-text{flex:none;text-align:center;max-width:900px;margin:0 auto}
.hero h1{font-size:clamp(34px,1.6vw + 28px,56px);line-height:1.08}
.hero .lead{text-wrap:balance;margin:clamp(12px,2svh,18px) auto 0;max-width:600px;font-size:clamp(16px,.3vw + 15px,19px);line-height:1.5;color:var(--muted)}
.hero .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3.2svh,30px)}
.hero-art{flex:0 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.hero-art picture{display:contents}
.hero-art img{width:auto;height:auto;max-width:100%;max-height:100%;min-height:0}
.hero-art.w-home img{max-width:min(100%,1440px)}
@media (max-height:700px) and (min-width:700px){
  .hero h1{font-size:clamp(34px,1.2vw + 26px,46px)}
  .hero .lead{font-size:17px;margin-top:10px}
  .hero .actions{margin-top:18px}
}
@media (max-width:640px){
  :root{--hh:60px}
  .brand img{width:86px;height:34px}
  .hero{text-align:left;gap:clamp(14px,3.5svh,32px)}
  .hero-text{text-align:left;margin:0}
  .hero .lead{margin-left:0}
  .hero .actions{justify-content:flex-start}
  .hero-art{margin:0 calc(-1 * var(--pad))}
}
@media (max-width:640px) and (min-height:800px){.hero h1{font-size:clamp(36px,9.4vw,42px)}.hero .lead{font-size:17.5px}}
@media (max-width:360px){.hero .actions .btn{padding:0 16px}}

/* Sections */
section{padding:clamp(64px,9vw,120px) 0}
.band-2{background:var(--surface-2)}
.sec-head{max-width:640px;margin-bottom:clamp(32px,4vw,56px)}
.sec-head h2,.h2{font-size:clamp(28px,1.4vw + 20px,40px)}
.sec-head p,.lede{margin-top:16px;color:var(--muted);font-size:18px;max-width:62ch}
.muted{color:var(--muted)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.checks .icon{width:20px;height:20px;color:var(--accent);margin-top:2px}
.checks.two{grid-template-columns:1fr 1fr;column-gap:28px}
@media (max-width:640px){.checks.two{grid-template-columns:1fr}}

/* Home: service index (8 tiles, top rules, no cards) */
.svc-index{display:grid;grid-template-columns:repeat(4,1fr);column-gap:32px;row-gap:40px}
.svc-index a{display:block;text-decoration:none;border-top:1.5px solid var(--ink);padding-top:18px}
.svc-index a:hover h3{color:var(--accent)}
.svc-index .icon{color:var(--accent);width:26px;height:26px}
.svc-index h3{font-size:19px;margin:14px 0 8px}
.svc-index p{color:var(--muted);font-size:16px;line-height:1.5}
.svc-index-foot{margin-top:44px}
@media (max-width:1000px){.svc-index{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.svc-index{grid-template-columns:1fr;row-gap:28px}}

/* Media split (image + text) */
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split.rev{grid-template-columns:1fr 1.15fr}
.split.rev .split-media{order:2}
.split-media img{width:100%}
.split-text h2{font-size:clamp(28px,1.4vw + 20px,40px)}
.split-text .lede{margin-top:16px}
.split-text .checks{margin-top:24px}
.split-text .row{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:28px;align-items:center}
.figcap{margin-top:10px;font-size:14px;color:var(--muted)}
@media (max-width:900px){.split,.split.rev{grid-template-columns:1fr}.split.rev .split-media{order:0}}

.mini-products{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin-top:28px}
.mini-products a{text-decoration:none;display:block}
.mini-products b{display:flex;align-items:center;gap:8px;font-weight:600}
.mini-products b .icon{color:var(--accent);width:20px;height:20px}
.mini-products span{display:block;color:var(--muted);font-size:15px;line-height:1.45;margin-top:4px}
.mini-products a:hover b{color:var(--accent)}
@media (max-width:480px){.mini-products{grid-template-columns:1fr}}

/* Asymmetric split list */
.aside-list{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows>li{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:24px 0;border-bottom:1px solid var(--line)}
.rows>li>.icon{grid-row:span 3;color:var(--accent);width:26px;height:26px;margin-top:2px}
.rows h3{font-size:20px}
.rows p{color:var(--muted)}
.rows .link{margin-top:6px;justify-self:start}
@media (max-width:900px){.aside-list{grid-template-columns:1fr}}

/* Centred band with art + approach strip */
.center-band{text-align:center}
.center-band h2{font-size:clamp(28px,1.6vw + 20px,44px);max-width:760px;margin:0 auto}
.center-band .lede{margin:16px auto 0}
.center-band .band-art{max-width:760px;margin:clamp(24px,4vw,40px) auto 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:clamp(32px,4vw,56px);text-align:left}
.steps>div{border-left:2px solid var(--accent);padding-left:18px}
.steps h3{font-size:18px;margin-bottom:6px}
.steps p{color:var(--muted);font-size:16px;line-height:1.5}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Dark CTA */
.cta-dark{background:var(--ink);color:#fff;text-align:center}
.cta-dark h2{font-size:clamp(28px,1.6vw + 20px,44px);max-width:760px;margin:0 auto}
.cta-dark p{color:var(--on-dark-muted);margin:16px auto 0;max-width:56ch}
.cta-dark .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}
.cta-dark .small{margin-top:20px;font-size:15px}
.cta-dark .small a{color:#fff}

/* Services page */
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:5fr 6fr;gap:24px clamp(32px,5vw,80px);padding:clamp(32px,4vw,48px) 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hh) + 12px)}
.svc-head{display:flex;gap:16px;align-items:flex-start}
.svc-head .icon{width:30px;height:30px;color:var(--accent);margin-top:2px}
.svc h2{font-size:clamp(24px,1vw + 18px,30px)}
.svc p{color:var(--muted);margin-top:10px}
.svc h3{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:12px}
@media (max-width:860px){.svc{grid-template-columns:1fr}}

/* Products page */
.jump{display:flex;flex-wrap:wrap;gap:8px 28px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jump a{font-weight:600;text-decoration:none}
.jump a:hover{color:var(--accent)}
.featured{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,80px)}
.featured h2{font-size:clamp(30px,1.6vw + 22px,46px)}
.featured .tag{font-size:19px;color:var(--ink);margin-top:12px;font-weight:500}
.featured .body p{color:var(--muted);margin-top:16px;max-width:62ch}
.featured aside{background:#fff;border-radius:var(--r-img);padding:28px;box-shadow:var(--shadow);align-self:start}
.featured aside h3{font-size:17px;margin-bottom:16px}
.featured aside .btn{margin-top:24px;width:100%}
@media (max-width:900px){.featured{grid-template-columns:1fr}}
.group{scroll-margin-top:calc(var(--hh) + 12px)}
.group+.group{margin-top:clamp(56px,7vw,96px)}
.group-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.group-head .icon{width:28px;height:28px;color:var(--accent)}
.group-head h2{font-size:clamp(26px,1.2vw + 18px,34px)}
.group>p{color:var(--muted);max-width:62ch}
.prod{display:grid;grid-template-columns:5fr 6fr;gap:20px clamp(32px,5vw,80px);padding:32px 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hh) + 12px)}
.prod:first-of-type{border-top:1px solid var(--line);margin-top:28px}
.prod h3{font-size:22px}
.prod .tagline{font-weight:500;margin-top:6px}
.prod .desc{color:var(--muted);margin-top:10px}
.prod .row{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:18px}
.prod .note{font-size:15px;color:var(--muted);margin-top:14px}
.prod-logo{width:96px;height:auto;margin-bottom:16px}
@media (max-width:860px){.prod{grid-template-columns:1fr}}

/* About */
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts span{color:var(--muted)}
.facts b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.grid-2x2{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.grid-2x2>div{padding:32px 32px 32px 0;border-bottom:1px solid var(--line)}
.grid-2x2>div:nth-child(odd){border-right:1px solid var(--line)}
.grid-2x2>div:nth-child(even){padding-left:32px;padding-right:0}
.grid-2x2 .icon{color:var(--accent);width:26px;height:26px}
.grid-2x2 h3{font-size:20px;margin:12px 0 8px}
.grid-2x2 p{color:var(--muted)}
@media (max-width:700px){.grid-2x2{grid-template-columns:1fr}.grid-2x2>div,.grid-2x2>div:nth-child(even){padding:28px 0;border-right:0}.grid-2x2>div:nth-child(odd){border-right:0}}
.lead-person{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.lead-person img{border-radius:var(--r-img);width:100%;box-shadow:var(--shadow)}
.lead-person h3{font-size:clamp(26px,1.2vw + 18px,34px)}
.role{color:var(--accent);font-weight:600;margin-top:6px}
.lead-person p.bio{color:var(--muted);margin-top:14px;max-width:60ch}
@media (max-width:760px){.lead-person{grid-template-columns:1fr}.lead-person img{max-width:300px}}
.people{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,80px);border-top:1px solid var(--line)}
.people li{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.people li.no-photo{grid-template-columns:1fr}
.people img{width:96px;height:auto;border-radius:var(--r-img)}
.people h3{font-size:19px}
.people .role{font-size:15px;margin-top:2px}
.people p.bio{color:var(--muted);font-size:16px;margin-top:8px;line-height:1.5}
@media (max-width:760px){.people{grid-template-columns:1fr}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,80px);align-items:start}
.methods{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.methods li{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;padding:20px 0;border-bottom:1px solid var(--line)}
.methods .icon{grid-row:span 2;color:var(--accent);width:24px;height:24px;margin-top:2px}
.methods span{color:var(--muted);font-size:15px}
.methods a,.methods b{font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.methods a:hover{color:var(--accent);text-decoration:underline}
.form{background:#fff;border-radius:var(--r-img);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow)}
.form h2{font-size:26px}
.form>p{color:var(--muted);margin-top:8px}
.field{display:grid;gap:6px;margin-top:18px}
.field label{font-weight:600;font-size:15px}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #6B807E;border-radius:var(--r-btn);padding:12px 14px;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.form .hint{font-size:14px;color:var(--muted);margin-top:14px}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){.two-fields{grid-template-columns:1fr}.form .actions .btn{width:100%}}

/* Footer */
/* ===== Footer: pen-and-ink vignettes on the site paper (sibling of the dreyv / ANAXO footer B, 24 Oct 2026) =====
   School with laptop, hall keys, market kiosk with POS till, tro-tro, microfinance desk, polling hall, office team, palms,
   joined by a dotted path. Drawings are white-paper ink (gen/footer_ink.py) multiplied onto --surface, so no seam.
   Desktop: one wide drawing, links centred in its clear middle. 1100px and below: own stacked layout
   (top vignette, repeating dotted path tile, bottom vignettes). */
.site-footer{--fi-paper:var(--surface);--fi-paper-2:#D5E2E3;position:relative;overflow:hidden;isolation:isolate;color:var(--ink);
  background:radial-gradient(70% 60% at 50% 0%,rgba(243,247,247,.7),rgba(243,247,247,0) 70%),var(--fi-paper)}
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.fi-art{pointer-events:none;mix-blend-mode:multiply;user-select:none;display:block;width:100%;max-width:none;height:auto}
.fi-stage{position:relative;min-height:41vw}
.fi-d{position:absolute;left:0;bottom:0}
.fi-body{position:relative;z-index:1;width:min(560px,32vw);margin:0 auto;padding:clamp(40px,3.6vw,64px) 0 13.5vw;text-align:center}
.site-footer .fi-name{display:inline-block;font-weight:650;font-size:22px;line-height:1.2;color:var(--ink)}
.fi-tag{margin:10px auto 0;font-size:16px;line-height:1.5;color:var(--muted);max-width:36ch;text-wrap:balance}
.fi-cols{display:grid;grid-template-columns:auto auto;justify-content:space-around;gap:28px 32px;text-align:left;margin-top:clamp(28px,2.6vw,44px)}
.site-footer h2{font-size:16px;font-weight:600;color:var(--accent);margin:0 0 10px;letter-spacing:0}
.fi-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.site-footer .fi-col a,.fi-col li span{display:inline-block;font-size:16px;line-height:1.4;padding:3px 0;color:var(--ink)}
.fi-col li span{color:var(--muted)}
.fi-legal{position:relative;z-index:1;background:var(--fi-paper-2);border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.5;
  padding:16px var(--pad);display:flex;justify-content:center;text-align:center;gap:6px 28px;flex-wrap:wrap}
.fi-legal p{margin:0}
.fi-legal .num{font-variant-numeric:tabular-nums}
.fi-m{display:none}
@media (max-width:1100px){
  .fi-d{display:none}
  .fi-m{display:block}
  .fi-stage{min-height:0;max-width:600px;margin:0 auto}
  .fi-mid{position:relative}
  .fi-mid::before{content:"";position:absolute;inset:0;pointer-events:none;background:url(/img/fi-m-mid.webp) 0 0/100% auto repeat-y;background-repeat:round;mix-blend-mode:multiply}
  .fi-body{width:auto;padding:4px 20px 12px calc(8% + 26px);text-align:left}
  .fi-tag{margin-left:0}
  .fi-cols{grid-template-columns:1fr;justify-content:start;gap:24px;margin-top:28px}
  .site-footer .fi-col a{min-height:44px;display:inline-flex;align-items:center;padding:0}
  .fi-col ul{gap:0}
  .fi-col[aria-label="Pages"] ul{grid-template-columns:repeat(2,minmax(0,max-content));column-gap:40px}
  .fi-legal{justify-content:space-between;text-align:left}
}
@media (min-width:480px) and (max-width:1100px){.fi-cols{grid-template-columns:auto auto;justify-content:start;gap:24px 48px}}

/* Mobile nav */
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:inline-flex}
  .menu-open .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:var(--hh);transform:none;background:var(--surface-2);padding:8px var(--pad) 20px;box-shadow:0 12px 24px rgba(30,60,58,.12)}
  .menu-open .nav-links a{display:block;padding:14px 0;font-size:18px;border-bottom:1px solid var(--line)}
  .menu-open .site-header{background:var(--surface-2)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ===== Phone layouts (<=768px), designed for phones, 24 Oct 2026. Desktop untouched. ===== */
.m-only,.svc-index .chev{display:none}
details.feat summary,details.more summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-weight:600;color:var(--ink)}
details summary::-webkit-details-marker{display:none}
details .chev{width:20px;height:20px;color:var(--accent);flex:none;transition:transform .2s ease}
details[open] .chev{transform:rotate(180deg)}
@media (max-width:768px){
  .m-only{display:block}
  .d-only{display:none!important}
  section{padding:56px 0}
  .sec-head{margin-bottom:28px}
  .sec-head p,.lede{font-size:17px}
  .figcap,.mini-products span,.methods span,.people .role,.cta-dark .small,.prod .note,.form .hint,.field label,.svc h3{font-size:16px}
  .link{min-height:44px}
  /* Hero: centred text, equal buttons, art anchored to the bottom edge */
  .hero{justify-content:space-between;gap:16px;padding-bottom:0;text-align:center}
  .hero-text{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;text-align:center;margin:0 auto;max-width:520px;width:100%}
  .hero .lead{margin-left:auto;margin-right:auto;max-width:34ch}
  .hero .actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;justify-content:stretch;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
  .hero .actions .btn{width:100%;padding:0 12px}
  .hero-art{flex:0 1 auto;align-items:flex-end;margin:0 calc(-1 * var(--pad))}
  .hero-art img{width:auto;max-width:100%}
  /* Media sections: art full width, steady spacing */
  .split,.split.rev{gap:24px}
  .split-media{margin:0 calc(-1 * var(--pad))}
  .split-media img{width:100%;border-radius:0}
  .center-band .band-art{margin:24px calc(-1 * var(--pad)) 0;max-width:none}
  .center-band .band-art img{width:100%}
  .split-text .row{gap:8px 20px}
  .cta-dark .actions{display:grid;grid-template-columns:1fr;max-width:360px;margin-left:auto;margin-right:auto}
  .cta-dark .actions .btn{width:100%}
  /* Home: services as compact tap rows */
  .svc-index{grid-template-columns:1fr;row-gap:0;column-gap:0;border-bottom:1px solid var(--line)}
  .svc-index a{display:grid;grid-template-columns:28px 1fr 20px;column-gap:14px;align-items:center;border-top:1px solid var(--line);padding:14px 0;min-height:64px}
  .svc-index a>.icon:first-child{grid-row:span 2;width:24px;height:24px}
  .svc-index h3{margin:0;font-size:17px;line-height:1.3}
  .svc-index p{grid-column:2;font-size:16px;line-height:1.4;margin-top:2px}
  .svc-index .chev{display:block;grid-column:3;grid-row:1/span 2;width:20px;height:20px;color:var(--muted)}
  .svc-index-foot{margin-top:24px}
  .mini-products{gap:16px}
  .steps{gap:20px}
  /* Collapsible feature lists */
  details.feat{margin-top:6px}
  details.feat summary{justify-content:flex-start;gap:6px;color:var(--accent);min-height:44px}
  details.feat[open] summary{margin-bottom:8px}
  details.feat .desc{color:var(--muted);margin:0 0 14px}
  details.feat .checks{padding-bottom:12px}
  details.more{margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  details.more p{color:var(--muted);margin:0 0 14px}
  /* Services page */
  .svc{gap:0;padding:22px 0 8px}
  .svc-head{display:block}
  .svc-head .icon{float:left;width:26px;height:26px;margin:2px 12px 0 0}
  .svc h2{font-size:22px;line-height:1.3}
  .svc-head p{clear:left;margin-top:10px}
  /* Products page: sticky chip bar, compact product blocks */
  .chipbar{position:sticky;top:var(--hh);z-index:40;background:rgba(243,247,247,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .chips{display:flex;gap:8px;overflow-x:auto;padding:10px var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad)}
  .chips::-webkit-scrollbar{display:none}
  .chips a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:16px;text-decoration:none;color:var(--ink);white-space:nowrap;scroll-snap-align:start}
  .chips a[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
  #edunex-pro,.group,.prod{scroll-margin-top:60px!important}
  .featured{gap:24px}
  .featured h2{font-size:32px}
  .featured .tag{font-size:18px}
  .featured aside{padding:22px}
  .group+.group{margin-top:48px}
  .group-head h2{font-size:26px}
  .prod{gap:0;padding:20px 0 6px}
  .prod:first-of-type{margin-top:20px}
  .prod h3{font-size:20px;line-height:1.3}
  .prod .row{margin-top:14px;gap:4px 20px;align-items:center}
  .prod .row .btn{min-height:44px}
  .prod-logo{width:80px;margin-bottom:12px}
  /* About */
  .lead-person img{max-width:220px}
  .facts li{align-items:center}
  .facts .link{min-height:44px}
  .people li{grid-template-columns:72px 1fr;gap:16px;padding:22px 0}
  .people img{width:72px}
  .grid-2x2>div,.grid-2x2>div:nth-child(even){padding:22px 0}
  /* Contact */
  .methods li{padding:12px 0}
  .methods a{display:inline-flex;align-items:center;min-height:44px}
  .site-footer .fi-name{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:640px){
  .hero .lead{font-size:17px}
}
@media (max-width:360px){
  .hero .actions{grid-template-columns:1fr}
}