/* Home page only: map, solution picker, lab, services, verification, cases, journal, about, prices. */
/* ===== HERO / MAP ===== */
.hero{padding:clamp(24px,3.2vw,56px) 0 clamp(56px,6vw,96px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,4.2vw,84px);align-items:start}
.hero-txt{padding-top:clamp(8px,2.2vw,44px);display:flex;flex-direction:column;gap:26px}
.hero-txt .h1 span{color:var(--cobalt)}
/* One muted line under the H1: what we build and where the team is (owner, 24.09). Sits closer to the
   H1 than the column gap; on phones it stays within two lines above the Solomiia field. */
.hero-txt .hero-lead{margin-top:-14px;max-width:56ch;font-size:clamp(16px,1.25vw,18px);text-wrap:pretty}
@media (max-width:760px){.hero .hero-txt .hero-lead{font-size:13px;line-height:1.45;letter-spacing:-.005em;margin-top:-8px}}
.wave-ico{display:inline-flex;gap:2px;align-items:center;height:18px}
.wave-ico i{width:3px;border-radius:2px;background:var(--lilac);box-shadow:inset 0 0 0 1px #8f76f0}
.doors{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:20px;border-top:1px solid var(--line)}
.doors a{font:500 15px/1.3 var(--f-b);text-decoration:none;color:var(--ink-2);display:inline-flex;gap:6px;align-items:center}
.doors a:hover{color:var(--ink)}
.doors a svg{width:14px;height:14px}

.map{position:relative;background:var(--sheet);border:1px solid var(--line);border-radius:26px;padding:18px 20px 16px;box-shadow:var(--sh-2)}
.map::before{content:"";position:absolute;inset:14px -12px -12px 14px;border-radius:26px;background:var(--paper-2);border:1px solid var(--line);z-index:-1}
.map-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:2px 2px 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.map-title{font:600 16px/1 var(--f-d);letter-spacing:-.01em}
.map-legend{display:flex;gap:14px;margin-left:auto;font:500 13px/1 var(--f-b);color:var(--ink-2)}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.lg-dot{width:9px;height:9px;border-radius:50%;background:var(--ink)}
.lg-amb{width:11px;height:11px;border-radius:3px;background:var(--amber)}
.map-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr) minmax(0,1fr);column-gap:clamp(30px,3vw,52px);z-index:1}
.map-col{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.col-lab{font:500 12.5px/1 var(--f-b);color:var(--ink-3);padding:2px 2px 2px}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.wires path{fill:none;stroke:var(--line-2);stroke-width:1.5}
.wires path.on{stroke:var(--ink);stroke-width:2}
.wires .ev{stroke:var(--sheet);stroke-width:2.5}

.mod{position:relative;background:var(--c);color:var(--c-on);border-radius:16px;padding:12px 13px 13px;min-height:clamp(150px,11.2vw,196px);display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--sh-1)}
.mod[data-d="integr"]{background:var(--sheet);box-shadow:inset 0 0 0 2px var(--ink),var(--sh-1)}
.mod.is-on{transform:translateY(-3px);box-shadow:0 0 0 3px var(--sheet),0 0 0 5px var(--ink),var(--sh-2)}
.mod-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mod-dept{font:600 15px/1.1 var(--f-d);letter-spacing:-.01em}
.mod-name{font:500 12px/1.1 var(--f-b);opacity:.82;white-space:nowrap}
.mod-hit{position:absolute;inset:0;border:0;background:transparent;border-radius:16px;cursor:pointer;z-index:3}
.mod-hit:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.mod-o{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-width:0}

/* mini objects */
.bb{font:500 12.5px/1.3 var(--f-b);padding:7px 10px;border-radius:12px;max-width:92%;width:fit-content}
.bb-in{background:#5468FF;color:#fff;border-bottom-left-radius:4px}
.bb-out{background:var(--obj);color:#16140F;border-bottom-right-radius:4px;align-self:flex-end;box-shadow:0 6px 14px -8px rgba(10,20,120,.7)}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--f-b);padding:6px 8px;border-radius:8px;background:var(--obj);color:#16140F;width:fit-content;white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:2px;background:var(--c)}
.amb{background:var(--amber);color:#16140F}
.amb-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block;box-shadow:0 0 0 2px #fff}
.card-o{background:var(--obj);color:#16140F;border-radius:12px;padding:9px 10px;box-shadow:0 8px 18px -10px rgba(22,20,15,.55)}
.dz{display:grid;grid-template-columns:28px 1fr;gap:3px 8px;align-items:center}
.dz .av{grid-row:span 2;width:28px;height:28px;border-radius:8px;background:var(--tomato-t);color:#b3321a;font:700 11px/28px var(--f-d);text-align:center}
.dz b{font:600 12.5px/1.15 var(--f-d)}
.dz small{font:500 11px/1.2 var(--f-b);color:#6c675c}
.dz-l{margin-top:7px;padding-top:7px;border-top:1px dashed #D9D6CB;display:flex;justify-content:space-between;align-items:center;gap:6px;font:500 11.5px/1.2 var(--f-b)}
.stamp{font:700 10.5px/1 var(--f-b);padding:4px 6px;border-radius:6px;background:var(--amber);color:#16140F;white-space:nowrap}
.wave{display:flex;align-items:center;gap:3px;height:46px}
.wave i{flex:1;max-width:5px;border-radius:3px;background:#16140F;height:var(--h,40%);transform-origin:center;animation:wv 1.2s ease-in-out infinite;animation-delay:calc(var(--k,0)*-90ms)}
@keyframes wv{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.call{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--f-b)}
.rec{width:8px;height:8px;border-radius:50%;background:#16140F;animation:bl 1.4s steps(2) infinite}
@keyframes bl{50%{opacity:.25}}
.chart{width:100%;height:auto}
.win{background:var(--obj);color:#16140F;border-radius:10px;overflow:hidden;box-shadow:0 8px 18px -10px rgba(22,20,15,.55)}
.win-t{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid #ECEAE2;font:600 10.5px/1 var(--f-b);color:#6c675c}
.win-t i{width:6px;height:6px;border-radius:50%;background:#D9D6CB}
.win-t span{margin-left:6px}
.win-b{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:8px}
.win-side{display:flex;flex-direction:column;gap:5px}
.win-side i{height:5px;border-radius:3px;background:#E6E3D9}
.win-side i:first-child{background:var(--sun)}
.win-main{display:flex;flex-direction:column;gap:5px}
.row{display:flex;justify-content:space-between;align-items:center;font:500 10.5px/1.2 var(--f-b);padding:4px 6px;border-radius:6px;background:#F5F4EF}
.row b{font-weight:700}
.pay{align-self:flex-end;font:700 10.5px/1 var(--f-b);padding:5px 8px;border-radius:6px;background:#16140F;color:#fff}
.nodes{width:100%;height:auto}
.nodes text{font:600 8.6px var(--f-b);fill:var(--ink)}
.nodes rect{fill:var(--sheet);stroke:var(--ink);stroke-width:1.3}
.nodes line{stroke:var(--ink);stroke-width:1.1;stroke-dasharray:2 3}
.nodes .pulse{fill:var(--ink)}

/* core + human */
.core{position:relative;background:var(--ink);color:var(--paper);border-radius:18px;padding:14px 14px 12px;flex:1;display:flex;flex-direction:column;gap:10px;min-height:0;box-shadow:var(--sh-2)}
.core-h{display:flex;flex-direction:column;gap:4px}
.core-h b{font:700 clamp(19px,1.5vw,26px)/1 var(--f-d);letter-spacing:-.025em}
.core-h small{font:500 12px/1.2 var(--f-b);color:var(--night-dim)}
.log{display:flex;flex-direction:column;gap:6px;overflow:hidden}
.log li{display:grid;grid-template-columns:8px 1fr;gap:8px;align-items:start;font:500 12px/1.3 var(--f-b);color:var(--paper);padding:7px 8px;border-radius:9px;background:rgba(243,242,236,.08)}
:root[data-theme="dark"] .log li{background:rgba(20,18,11,.07)}
.log li i{width:8px;height:8px;border-radius:2px;margin-top:4px;background:var(--c)}
.log li[data-d="integr"] i{background:var(--paper);}
.log li.new{animation:inlog .45s ease}
@keyframes inlog{from{opacity:0;transform:translateY(-6px)}}
.core-f{margin-top:auto;display:flex;align-items:center;gap:8px;font:500 12px/1.3 var(--f-b);color:var(--night-dim);padding-top:10px;border-top:1px solid rgba(243,242,236,.14)}
.core-f svg{width:14px;height:14px;flex:none;color:var(--paper)}
.xl{display:none!important}
@media (min-width:1600px){.xl{display:flex!important}}
.human{position:relative;background:var(--amber);color:#16140F;border-radius:16px;padding:11px 12px;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;box-shadow:var(--sh-1)}
.human .ok{width:30px;height:30px;border-radius:50%;border:2px solid #16140F;display:grid;place-items:center;font:800 10px/1 var(--f-d)}
.human b{font:600 14px/1.1 var(--f-d);display:block}
.human small{font:500 12px/1.2 var(--f-b)}
.human.ping{animation:ping .8s ease}
@keyframes ping{40%{box-shadow:0 0 0 6px var(--sheet),0 0 0 8px var(--amber)}}
.money{border:1.5px dashed var(--line-2);border-radius:14px;padding:9px 12px;font:500 12px/1.3 var(--f-b);color:var(--ink-2)}
.money b{display:block;font:600 13.5px/1.1 var(--f-d);color:var(--ink);margin-bottom:2px}
.hand{position:absolute;font:600 22px/1 var(--f-h);color:var(--ink);transform:rotate(-4deg);white-space:nowrap;pointer-events:none;z-index:4}
.hand::after{content:"";display:block;height:3px;margin-top:2px;border-radius:3px;background:var(--amber)}
.readout{margin-top:46px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.ro-sw{width:34px;height:34px;border-radius:10px;background:var(--c)}
.readout[data-d="integr"] .ro-sw{background:var(--sheet);box-shadow:inset 0 0 0 2px var(--ink)}
.ro-t{font:500 14px/1.4 var(--f-b);color:var(--ink-2)}
.ro-t b{font:600 15px/1.2 var(--f-d);color:var(--ink)}
.ro-st{display:inline-block;margin-left:4px;color:var(--ink)}
.map-note{margin-top:8px;font:500 12px/1.3 var(--f-b);color:var(--ink-3)}

/* ===== PIDBIR (solution picker) ===== */
.pk{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3vw,48px);align-items:start}
.pk-form{display:flex;flex-direction:column;gap:22px;background:var(--sheet);border:1px solid var(--line);border-radius:24px;padding:clamp(18px,2.2vw,32px);box-shadow:var(--sh-1)}
.q{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.q legend{font:600 17px/1.2 var(--f-d);letter-spacing:-.01em;padding:0;margin-bottom:10px;display:flex;gap:10px;align-items:baseline}
.q legend em{font:600 13px/1 var(--f-b);font-style:normal;color:var(--ink-3)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 13px;border-radius:11px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line-2);font:500 14.5px/1.2 var(--f-b);cursor:pointer;transition:box-shadow .15s,background .15s}
.opt span i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.opt[data-d="integr"] span i{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.opt input:hover+span{box-shadow:inset 0 0 0 1.5px var(--ink)}
.opt input:checked+span{background:var(--ink);color:var(--paper);box-shadow:none}
.opt input:focus-visible+span{outline:3px solid var(--cobalt);outline-offset:2px}
.opt.pain input:checked+span{background:var(--c);color:var(--c-on)}
.opt.pain[data-d="integr"] input:checked+span{background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.opt.pain[data-d="agent"] input:checked+span i{background:#fff}
.opt.pain input:checked+span i{background:var(--c-on)}
.pk-res{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.res{background:var(--c);color:var(--c-on);border-radius:24px;padding:clamp(20px,2.3vw,34px);display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-2);transition:background .35s ease,color .35s ease;min-height:330px}
.res[data-d="integr"],.res[data-d="none"]{background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),var(--sh-2)}
.res-k{font:500 14px/1 var(--f-b);opacity:.85}
.res-n{font:700 clamp(32px,3vw,50px)/1 var(--f-d);letter-spacing:-.035em}
.res-plus{display:flex;flex-wrap:wrap;gap:8px}
.res-plus .chip{font-size:13px;padding:8px 10px}
.res-why{font:500 16px/1.45 var(--f-b);max-width:46ch}
.res-step{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;background:var(--obj);color:#16140F}
.res-step small{display:block;font:500 12.5px/1.2 var(--f-b);color:#6c675c}
.res-step b{font:600 18px/1.2 var(--f-d)}
.res-note{font:500 13.5px/1.35 var(--f-b);padding:8px 10px;border-radius:10px;background:var(--obj);color:#16140F;display:none}
.res-note.on{display:block}
.rules{background:var(--sheet);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.rules-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font:600 14px/1.2 var(--f-d);margin-bottom:8px}
.rules-h em{font:500 12px/1.2 var(--f-b);font-style:normal;padding:4px 7px;border-radius:6px;background:var(--paper-2);color:var(--ink-2)}
.rules li{display:grid;grid-template-columns:22px 1fr;gap:6px;font:500 13.5px/1.4 var(--f-b);color:var(--ink-3);padding:4px 0}
.rules li b{font:700 12px/1.6 var(--f-d)}
.rules li.on{color:var(--ink)}
.rules li.on b{color:var(--link)}

/* ===== LAB (the one dark section) ===== */
.lab{background:var(--night);color:var(--night-ink)}
.lab .lead{color:var(--night-dim)}
.lab .kick{color:var(--night-dim)}
.lab-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px}
.con{background:var(--night-2);border:1px solid var(--night-line);border-radius:24px;padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:16px;min-width:0}
.con-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.con-h .h3{color:var(--night-ink)}
.con-tag{font:600 12px/1 var(--f-b);padding:6px 8px;border-radius:8px;background:var(--c);color:var(--c-on);white-space:nowrap}
.con p{color:var(--night-dim);font-size:15px;line-height:1.5}
.con .lnk{color:var(--night-ink);margin-top:auto;width:fit-content}
.v-stage{flex:1;background:var(--lilac);border-radius:18px;padding:18px;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;color:#16140F}
.v-stage .wave{height:clamp(92px,9vw,150px);gap:4px;margin-bottom:auto}
.v-stage .wave i{max-width:7px}
.v-line{font:500 14px/1.4 var(--f-b);background:var(--obj);padding:9px 12px;border-radius:12px;width:fit-content;max-width:90%}
.v-line.me{align-self:flex-end;background:#16140F;color:#fff}
.v-bar{display:flex;align-items:center;gap:10px}
.mic{width:48px;height:48px;border-radius:50%;background:#16140F;color:#fff;display:grid;place-items:center;flex:none}
.mic svg{width:20px;height:20px}
.v-bar span{font:600 14px/1.2 var(--f-d)}
.b-list{display:flex;flex-direction:column;gap:8px}
.tg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:var(--night-3);font:500 14.5px/1.2 var(--f-b);cursor:pointer}
.tg input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:11px;background:var(--night-line);position:relative;cursor:pointer;flex:none;margin:0;transition:background .2s}
.tg input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--night-ink);transition:transform .2s}
.tg input:checked{background:var(--cobalt)}
.tg input:checked::after{transform:translateX(16px)}
.tg input:disabled{opacity:.45}
.tg em{font-style:normal;font-size:12px;color:var(--night-dim);margin-left:6px}
.tg.fixed{background:var(--amber);color:#16140F}
.tg.fixed input{background:#16140F}
.tg.fixed input::after{background:var(--amber)}
.b-out{font:500 13.5px/1.45 var(--f-b);color:var(--night-dim);padding:10px 12px;border-radius:12px;border:1px dashed var(--night-line)}
.b-out b{color:var(--night-ink)}
.calc{display:flex;flex-direction:column;gap:12px}
.rng{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font:500 14px/1.2 var(--f-b);color:var(--night-dim)}
.rng output{font:600 14px/1.2 var(--f-d);color:var(--night-ink)}
.rng input{grid-column:1/-1;width:100%;accent-color:var(--cobalt);margin:4px 0 0}
.c-out{background:var(--cobalt);color:#fff;border-radius:16px;padding:14px 16px}
.c-out small{display:block;font:500 13px/1.3 var(--f-b);opacity:.85}
.c-out b{display:block;font:700 clamp(30px,2.6vw,42px)/1.05 var(--f-d);letter-spacing:-.03em;margin-top:4px}
.c-f{font:500 12.5px/1.4 var(--f-b);color:var(--night-dim)}

/* ===== SERVICES (colour fields) ===== */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{position:relative;background:var(--c);color:var(--c-on);border-radius:26px;padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;gap:14px;overflow:hidden;min-height:clamp(470px,34vw,580px);transition:transform .25s ease,box-shadow .25s}
.tile[data-d="integr"]{background:var(--sheet);box-shadow:inset 0 0 0 2px var(--ink)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.tile[data-d="integr"]:hover{box-shadow:inset 0 0 0 2px var(--ink),var(--sh-3)}
.t-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.t-dept{font:500 14px/1 var(--f-b);opacity:.85}
.t-st{font:600 12.5px/1.25 var(--f-b);padding:6px 9px;border-radius:9px;background:var(--obj);color:#16140F;text-align:right;max-width:62%}
.t-name{font:700 clamp(28px,2.35vw,42px)/1 var(--f-d);letter-spacing:-.035em}
.t-prob{font:500 17px/1.4 var(--f-b)}
.t-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font:500 14.5px/1.4 var(--f-b);padding-top:12px;border-top:1.5px solid currentColor;border-top-color:color-mix(in srgb,currentColor 25%,transparent)}
.t-dl dt{font:600 13px/1.5 var(--f-d);opacity:.92}
.t-obj{order:2;margin-top:auto;margin-bottom:calc(-1*clamp(20px,2vw,30px) - 26px);padding-bottom:26px;transform:translateY(0);transition:transform .3s ease}
.tile:hover .t-obj{transform:translateY(-8px)}
.t-more{order:1;margin-top:2px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--f-d);padding:10px 12px;border-radius:11px;background:#16140F;color:#fff;text-decoration:none}
.tile[data-d="integr"] .t-more{background:var(--ink);color:var(--paper)}
.t-more svg{width:14px;height:14px}
.big-o{background:var(--obj);color:#16140F;border-radius:16px 16px 0 0;padding:14px 14px 40px;box-shadow:0 -1px 0 rgba(22,20,15,.04),0 16px 34px -14px rgba(22,20,15,.55)}
.tile[data-d="integr"] .big-o{box-shadow:inset 0 0 0 1.5px var(--ink)}
.bo-h{display:flex;justify-content:space-between;align-items:center;font:600 12.5px/1 var(--f-b);color:#6c675c;margin-bottom:10px}
.bo-l{display:flex;justify-content:space-between;gap:10px;font:500 13.5px/1.3 var(--f-b);padding:7px 0;border-bottom:1px solid #EFEDE6}
.bo-l b{font:600 13.5px/1.3 var(--f-d)}
.bo-tag{display:inline-flex;gap:6px;align-items:center;font:600 12px/1 var(--f-b);padding:6px 8px;border-radius:8px;background:var(--c-t);color:#16140F}
.tile[data-d="agent"] .bo-tag{background:var(--cobalt-t);color:#1d2fbf}

/* ===== VERIFY (cobalt field) ===== */
.ver{background:var(--cobalt);color:#fff}
.ver .kick,.ver .lead{color:#DDE2FF}
.ver .kick i{background:#fff}
.ver-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,3vw,56px);align-items:start}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0}
.fact{padding:22px 22px 22px 0;border-top:1.5px solid rgba(255,255,255,.35);display:flex;flex-direction:column;gap:8px}
.fact:nth-child(odd){padding-right:28px}
.fact b{font:700 clamp(44px,4.6vw,84px)/.95 var(--f-d);letter-spacing:-.045em}
.fact b small{font-size:.42em;letter-spacing:-.02em;font-weight:600}
.fact p{font:500 15.5px/1.45 var(--f-b);color:#E6E9FF;max-width:34ch}
.fact em{font:500 12.5px/1 var(--f-b);font-style:normal;color:#B9C2FF}
.fact.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}
.fact.wide p{max-width:none;flex:1;min-width:220px}
.stampbig{font:700 15px/1 var(--f-d);padding:10px 14px;border-radius:12px;background:var(--amber);color:#16140F;transform:rotate(-2deg);white-space:nowrap}
.exam{background:var(--obj);color:#16140F;border-radius:22px;padding:clamp(18px,2vw,28px);box-shadow:0 30px 60px -30px rgba(8,14,90,.8);display:flex;flex-direction:column;gap:16px}
.exam-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.exam-h b{font:700 22px/1.1 var(--f-d);letter-spacing:-.02em}
.exam-h span{font:500 13px/1 var(--f-b);color:#6c675c}
/* the verification process as a checklist: no internal numbers on the site (owner decision 23.09.2026) */
.facts-words .fact b{font-size:clamp(30px,2.7vw,48px);letter-spacing:-.035em}
.chk{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.chk li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#F5F4EF;font:600 16px/1.25 var(--f-d);letter-spacing:-.01em}
.chk i{position:relative;flex:none;width:24px;height:24px;border-radius:7px;background:var(--cobalt)}
.chk i::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.chk li.h{background:var(--amber-t)}
.chk li.h i{background:var(--amber)}
.chk li.h i::after{border-color:#16140F}
:root[data-theme="dark"] .chk li.h{background:#FFEFC9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chk li.h{background:#FFEFC9}}
.replay{border-top:1px dashed #D9D6CB;padding-top:14px;display:flex;flex-direction:column;gap:8px}
.rp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rp div{font:500 13px/1.35 var(--f-b);padding:8px 10px;border-radius:10px;background:#F5F4EF}
.rp div small{display:block;font:600 12px/1.2 var(--f-b);color:#5E5A50;margin-bottom:3px}
.rp div.ag{background:var(--cobalt-t)}
:root[data-theme="dark"] .rp div.ag{background:#DFE3FF}
.cost{display:flex;justify-content:space-between;align-items:center;gap:10px;font:500 13px/1.3 var(--f-b);padding:10px 12px;border-radius:10px;background:#16140F;color:#fff}
.cost b{font:600 13px/1 var(--f-d)}

/* ===== CASES ===== */
.cases{display:flex;flex-direction:column;border-top:1.5px solid var(--ink)}
.case{display:grid;grid-template-columns:clamp(220px,22vw,340px) minmax(0,1fr) auto;gap:clamp(18px,2.6vw,44px);align-items:center;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s}
.case:hover{background:var(--c-t)}
.case-v{position:relative;height:clamp(150px,11vw,190px);border-radius:18px;background:var(--c);overflow:hidden;padding:14px;display:flex;flex-direction:column;justify-content:space-between;color:var(--c-on)}
.case-v .ctag{font:600 13px/1 var(--f-d);display:inline-flex;gap:6px;align-items:center}
.case-v .card-o{max-width:86%;transform:rotate(-2deg);transform-origin:left bottom;transition:transform .3s}
.case:hover .case-v .card-o{transform:rotate(0) translateY(-4px)}
.case-b{display:flex;flex-direction:column;gap:10px}
.case-b .h3{font-size:clamp(22px,2vw,34px)}
.case-meta{display:flex;flex-wrap:wrap;gap:8px}
.case .lnk{white-space:nowrap}
.inwork{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:12px;align-items:stretch}
.inwork h3{font:600 16px/1.2 var(--f-d);align-self:center;padding-right:12px}
.iw{background:var(--sheet);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.iw b{font:700 20px/1 var(--f-d);letter-spacing:-.02em}
.iw p{font:500 14.5px/1.4 var(--f-b);color:var(--ink-2)}
.iw .case-meta{margin-top:auto}
.iw .tag{font-size:12px;padding:6px 8px}

/* ===== JOURNAL ===== */
.jr{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.art{display:grid;grid-template-rows:auto 1fr;border-radius:24px;overflow:hidden;background:var(--sheet);border:1px solid var(--line);text-decoration:none;transition:transform .25s,box-shadow .25s}
.art:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.art-b{padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:10px}
.art-b .h3{font-size:clamp(20px,1.6vw,28px)}
.art-k{font:500 13.5px/1 var(--f-b);color:var(--ink-2)}
.art .lnk{margin-top:auto;width:fit-content}
.cv-num{position:absolute;left:24px;bottom:-18px;font:800 clamp(160px,17vw,280px)/.8 var(--f-d);letter-spacing:-.06em}
.cv-papers{position:absolute;right:24px;top:28px;width:48%;display:flex;flex-direction:column;gap:8px}
.cv-papers div{background:var(--obj);color:#16140F;border-radius:10px;padding:9px 11px;font:500 12.5px/1.3 var(--f-b);box-shadow:0 10px 20px -12px rgba(10,20,120,.8);display:flex;justify-content:space-between;gap:8px}
.cv-papers div:nth-child(2){transform:translateX(-14px) rotate(-1.5deg)}
.cv-papers div:nth-child(3){transform:translateX(6px) rotate(1deg)}
.cv-papers s{color:#b3321a;text-decoration-thickness:2px}
.cv-papers b{font-weight:700}
.cv-bars{position:absolute;inset:auto 16px 16px 16px;display:flex;align-items:flex-end;gap:3px;height:60%}
.cv-bars i{flex:1;background:var(--bar,#16140F);border-radius:3px 3px 0 0;opacity:.18}
.cv-bars i.hl{opacity:1;background:#fff}
.cv-meta{position:absolute;inset:16px 16px auto 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cv-meta .chip{font-size:12px}

/* ===== ABOUT ===== */
.ab{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,72px);align-items:center}
.pf{position:relative;margin:0 30px 30px 0;max-width:460px}
.pf::before,.pf::after{content:"";position:absolute;border-radius:24px}
.pf::before{inset:16px -16px -16px 16px;background:var(--cobalt)}
.pf::after{inset:32px -32px -32px 32px;background:transparent;box-shadow:inset 0 0 0 2px var(--ink);z-index:-1}
.pf img{position:relative;width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;border-radius:24px;box-shadow:var(--sh-2)}
.pf figcaption{position:absolute;left:16px;bottom:16px;right:16px;background:var(--obj);color:#16140F;border-radius:14px;padding:12px 14px;font:500 14px/1.35 var(--f-b);box-shadow:var(--sh-1);z-index:2}
.pf figcaption b{font:600 15px/1.2 var(--f-d)}
.ab-facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}
.ab-facts span{font:500 14px/1 var(--f-b);padding:9px 12px;border-radius:10px;background:var(--sheet);border:1px solid var(--line)}
.pr{display:flex;flex-direction:column;border-top:1.5px solid var(--ink)}
.pr li{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.pr li b{font:700 15px/1 var(--f-d);color:var(--ink-3)}
.pr li span{font:600 clamp(20px,1.9vw,30px)/1.15 var(--f-d);letter-spacing:-.025em}
.pr .stamp{font-size:12px;padding:6px 8px;transform:rotate(-3deg)}

/* ===== PRICES ===== */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:34px}
.steps::before{content:"";position:absolute;left:12px;right:12px;top:12px;height:2px;background:var(--ink)}
.st{position:relative;background:var(--sheet);border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px;min-height:210px}
.st::before{content:"";position:absolute;top:-30px;left:22px;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}
.st-n{font:500 13.5px/1 var(--f-b);color:var(--ink-3)}
.st-p{font:700 clamp(30px,2.6vw,46px)/1 var(--f-d);letter-spacing:-.035em}
.st-p small{font-size:max(12px,.45em);font-weight:600;letter-spacing:-.01em}
.st h3{font:600 19px/1.15 var(--f-d)}
.st p{font:500 14.5px/1.45 var(--f-b);color:var(--ink-2)}
.st.hot{background:var(--cobalt);color:#fff;border-color:var(--cobalt);box-shadow:var(--sh-2)}
.st.hot::before{background:var(--cobalt);box-shadow:0 0 0 4px var(--paper)}
.st.hot .st-n,.st.hot p{color:#DDE2FF}
.st-mark{position:absolute;right:16px;top:16px;font:600 12px/1 var(--f-b);padding:6px 8px;border-radius:8px;background:#fff;color:#1d2fbf}
.pr-more{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pm{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:18px;border:1.5px dashed var(--line-2);font:500 15px/1.45 var(--f-b);color:var(--ink-2)}
.pm b{color:var(--ink);font-family:var(--f-d);font-weight:600}
.pm .tag{flex:none}

/* ===== responsive ===== */
@media (max-width:1320px){
  .nav a{padding:9px 8px;font-size:14.5px}
  .ibtn kbd{display:none}
}
@media (max-width:1180px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-txt{max-width:760px;padding-top:0}
  .pk{grid-template-columns:minmax(0,1fr)}
  .pk-res{position:static}
  .lab-grid{grid-template-columns:1fr 1fr}
  .lab-grid .con:first-child{grid-column:1/-1}
  .svc{grid-template-columns:1fr 1fr}
  .ver-grid{grid-template-columns:1fr}
  .inwork{grid-template-columns:1fr 1fr 1fr}
  .inwork h3{grid-column:1/-1}
  .jr{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps::before{display:none}
  .st::before{display:none}
  .ct{grid-template-columns:minmax(0,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .hdr .wrap{height:62px;gap:8px}
  .hdr .btn,.ibtn .lbl,.hdr .en{display:none}
  .ibtn{height:44px;min-width:44px;padding:0 10px}
  .hero{padding-top:18px}
  .hero-txt{gap:18px}
  .hero-cta .btn{width:100%;justify-content:center}
  .sec-head{grid-template-columns:1fr;gap:14px}
  .map{padding:14px 12px 12px;border-radius:22px}
  .map::before{inset:10px -6px -8px 10px;border-radius:22px}
  .map-legend{margin-left:0;width:100%}
  .map-grid{grid-template-columns:1fr 1fr;gap:10px}
  .map-col{display:contents}
  .col-lab{display:none}
  .wires{display:none}
  .mod{min-height:0;padding:10px 10px 11px;gap:8px}
  .mod-h{flex-direction:column;gap:3px}
  .mod-dept{font-size:14px}
  .mod-name{font-size:11px}
  .map-col--c > *{grid-column:1/-1}
  .core{order:10;margin-top:4px}
  .human{order:11}
  .money{order:12}
  .hand{display:none}
  .readout{grid-template-columns:auto 1fr;gap:10px 12px;margin-top:12px}
  .readout .lnk{grid-column:1/-1}
  .ro-sw{width:26px;height:26px}
  .bb{font-size:11.5px;padding:6px 8px}
  .chip{font-size:10.5px}
  .wave{height:34px}
  .dz{grid-template-columns:1fr}.dz .av{display:none}
  .pk-form{padding:16px;gap:18px;border-radius:20px}
  .opt span{min-height:44px;padding:6px 12px;font-size:13.5px}
  .res{min-height:0;border-radius:20px}
  .lab-grid{grid-template-columns:1fr}
  .v-stage .wave{height:60px}
  .svc{grid-template-columns:1fr;gap:12px}
  .tile{min-height:0;border-radius:22px;gap:10px}
  .t-prob{font-size:16px}
  .t-dl{font-size:14px}
  .t-obj{display:none}
  .t-more{position:static;margin-top:6px;width:fit-content}
  .facts{grid-template-columns:1fr}
  .fact{padding:16px 0}
  .fact:nth-child(odd){padding-right:0}
  .case{grid-template-columns:1fr;gap:14px;padding:18px 0}
  .case-v{height:120px}
  .inwork{grid-template-columns:1fr}
  .ab{grid-template-columns:minmax(0,1fr)}
  .pf{max-width:300px}
  .pr li{grid-template-columns:36px 1fr;padding:14px 0}
  .pr li .stamp{grid-column:2;width:fit-content}
  .steps{grid-template-columns:1fr;gap:10px;padding-top:0}
  .st{min-height:0;padding:18px}
  .pr-more{grid-template-columns:1fr;gap:10px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:22px}
  .ft-grid > div:first-child{grid-column:1/-1}
}
/* ===== phone: keep the page under ~9 500 px ===== */
@media (max-width:760px){
  :root{--sec:34px}
  .hero-txt > .kick{display:none}
  .hero-cta .btn{min-height:48px}
  .map-legend{width:auto;margin-left:auto;gap:10px;font-size:12px}
  .human small{display:none}
  .res-why{font-size:14.5px}
  .st p{display:none}
  .st-mark{grid-row:2}
  .case .lnk{display:none}
  .hero{padding-bottom:38px}
  .doors{border-top:0;padding-top:4px}
  .v-stage{justify-content:flex-start;padding:14px;gap:10px}
  .v-stage .wave{height:54px}
  .v-line{font-size:13px}
  .rules li:not(.on){display:none}
  .rules-h{margin-bottom:4px}
  .res-step{flex-wrap:nowrap}
  .res-step .btn{min-height:44px!important;padding:0 14px;font-size:14px}
  .res-step b{font-size:16px}
  .cv-num{font-size:120px!important;bottom:-12px}
  .ft-grid > div:first-child p{display:none}
  .ft-grid > div:last-child ul{display:flex;flex-wrap:wrap;gap:4px 16px}
  .form-msg{display:none}
  .form-msg.on{display:block}
  .ct-main p{display:none}
  .fact.wide p{font-size:13px}
  .sec-head{margin-bottom:22px}
  .h2{font-size:29px;line-height:1.04}
  .m-hide{display:none}
  .hero .lead{font-size:16px}
  .hero-cta{gap:10px}
  .doors{gap:6px 18px;padding-top:14px}
  .doors a{font-size:14px}
  .map-head{padding-bottom:10px;margin-bottom:10px}
  .mod{border-radius:14px}
  .money{display:none}
  .human{padding:9px 10px}
  .core{padding:12px}
  .core-f{display:none}
  .map-note{display:none}
  .readout{padding:10px 12px}
  .ro-t{font-size:13px}
  /* picker: options wrap into rows (as on /laboratoriya/), nothing is cut off */
  .pk-form .opts{gap:6px}
  .pk-form .q legend{margin-bottom:6px;font-size:15.5px}
  .res{padding:18px;gap:10px}
  .res-why{font-size:15px}
  .res-step{padding:12px}
  .rules{padding:12px}
  .rules li{font-size:12.5px;padding:2px 0}
  /* lab: swipe between consoles */
  .lab-grid{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .lab-grid::-webkit-scrollbar{display:none}
  .lab-grid .con{flex:0 0 86%;scroll-snap-align:start;padding:16px;gap:12px}
  .tg{min-height:44px;padding:8px 10px;font-size:13.5px}
  .rng{font-size:13px}
  .rng input{height:44px;margin:-10px 0 -14px}
  .lab .lab-swipe{display:block}
  /* services: accordion of colour bands */
  .svc{gap:8px}
  .tile{padding:16px;gap:8px}
  .t-top{flex-direction:row-reverse;justify-content:flex-end;flex-wrap:wrap;gap:6px 8px;padding-right:44px}
  .t-dept{font-size:12.5px}
  .t-st{font-size:12px;padding:4px 7px;max-width:none;text-align:left}
  .t-name{font-size:26px}
  .tile:hover{transform:none}
  /* verify */
  .facts{grid-template-columns:1fr 1fr;column-gap:16px}
  .fact{padding:12px 0}
  .fact b{font-size:36px}
  .fact p{font-size:13px}
  .fact.wide{flex-direction:column;align-items:flex-start;gap:8px}
  .fact.wide p{min-width:0}
  .exam{padding:16px;gap:12px;border-radius:18px}
  .exam .replay,.exam .cost{display:none}
  /* cases */
  .case{grid-template-columns:64px 1fr;gap:12px;align-items:start;padding:14px 0}
  .case-v{height:64px;border-radius:14px;padding:0}
  .case-v > *{display:none}
  .case .lnk{grid-column:2;width:fit-content;font-size:14px}
  .case-b{gap:8px}
  .case-b .h3{font-size:19px}
  .tag{font-size:12px;padding:5px 7px}
  .inwork{gap:8px;margin-top:20px}
  .iw{padding:10px 12px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px}
  .iw b{font-size:17px}
  .iw p{font-size:13.5px;flex:1 1 60%}
  .iw .case-meta{margin-top:0}
  /* journal */
  .jr{gap:10px}
  .cv-num{font-size:150px}
  .cv-papers{width:58%;top:14px;right:14px}
  .cv-papers div{font-size:11px;padding:6px 8px}
  .art-b{padding:14px 16px;gap:6px}
  .art-b .h3{font-size:18px}
  .jr .art .cover b{white-space:nowrap}
  /* about */
  .ab{gap:18px}
  .pf{max-width:none;margin:0;display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:end}
  .pf::before,.pf::after{display:none}
  .pf img{aspect-ratio:1;border-radius:18px;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--cobalt)}
  .pf figcaption{position:static;box-shadow:none;background:transparent;padding:0;font-size:14px;color:var(--ink)}
  .ab-facts{margin:14px 0 16px;gap:6px}
  .ab-facts span{font-size:12.5px;padding:7px 9px}
  .pr li{padding:10px 0;gap:4px 10px}
  .pr li span{font-size:19px}
  /* prices */
  .steps{gap:8px}
  .st{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 16px;border-radius:16px}
  .st-n{display:none}
  .st h3{grid-row:1;grid-column:1;font-size:17px}
  .st-p{grid-row:1/3;grid-column:2;font-size:26px;align-self:center}
  .st p{grid-column:1;font-size:13px}
  .st-mark{position:static;grid-column:1;width:fit-content;margin-top:4px}
  .pm{padding:10px 12px;font-size:13.5px;border-radius:14px}
  /* contact + footer */
  .ct-main{padding:20px;gap:14px;border-radius:22px}
  .ct-main p{font-size:15px}
  .ct-row .btn{width:100%;justify-content:center}
  .form{padding:18px;gap:10px;border-radius:22px}
  .form .q{display:none}
  .ftr{padding:40px 0 20px;margin-top:50px}
  .ft-grid{gap:16px}
  .ft-grid li{padding:2px 0}
  .ft-grid a{font-size:14px}
  .ft-legal{font-size:12px}
}
.lab-swipe{display:none;font:500 13px/1 var(--f-b);color:var(--night-dim);margin-top:12px}
/* lab carousel on phones: position counter + dots in each demo's colour above the cards (site.js, [data-pager]); cards keep their own height */
.pager{display:none}
@media (max-width:760px){
  .lab .pager{display:flex;align-items:center;margin:-8px 0 4px}
  .lab .pager ~ .lab-swipe{display:none}
  .pager-n{min-width:44px;font:600 13px/1 var(--f-d);color:var(--night-dim);font-variant-numeric:tabular-nums}
  .pager button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
  .pager button::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--night-dim);opacity:.5;transition:width .2s ease,opacity .2s ease}
  .pager button[aria-current="true"]::before{width:26px;opacity:1;background:var(--c,var(--night-ink))}
}


/* ===== production edits (owner's review of variant A) ===== */
/* dark centre of the map: the event log fills the block; home.js hides lines that do not fit */
.core .log{flex:1;min-height:0}
.log li.off{display:none}
.mod-name .lockup .logo{height:.8em}
.t-name .lockup{gap:.22em}

/* services: on desktop the six colour fields stack on top of each other while scrolling */
.dir-tabs{display:none}
@media (min-width:1181px){
  .svc{grid-template-columns:minmax(0,1fr);gap:24px}
  .tile{position:sticky;top:calc(92px + var(--i,0) * 14px);min-height:min(540px,calc(100vh - 170px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);grid-template-rows:auto auto auto auto 1fr;column-gap:clamp(32px,4vw,72px);row-gap:16px;align-content:start;padding:clamp(28px,3vw,52px);box-shadow:0 -1px 0 rgba(22,20,15,.06),0 -24px 50px -30px rgba(22,20,15,.35)}
  .tile[data-d="integr"]{box-shadow:inset 0 0 0 2px var(--ink),0 -24px 50px -30px rgba(22,20,15,.35)}
  .tile:hover,.tile[data-d="integr"]:hover{transform:none}
  .tile > :not(.t-obj){grid-column:1;min-width:0}
  .t-more{justify-self:start}
  .t-obj{grid-column:2;grid-row:1/6;align-self:end;margin:0 0 calc(-1 * clamp(28px,3vw,52px));padding-bottom:0;order:0}
  .tile:hover .t-obj{transform:translateY(-8px)}
  .t-name{font-size:clamp(40px,3.5vw,64px)}
  .t-prob{font-size:clamp(19px,1.35vw,24px);max-width:32ch}
  .t-dl{font-size:16px;max-width:54ch}
  .t-more{order:0;margin-top:6px}
  .big-o{padding:18px 18px 64px}
}

/* journal: typographic covers with one big number */
.jr{grid-template-columns:repeat(2,minmax(0,1fr))}
.jr .cover{aspect-ratio:16/9}
.art .cover{border-radius:0}

/* phones: shorter map with a self-advancing panel, swipeable services */
.ro-dots{display:none}
@media (max-width:760px){
  .map-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mod{padding:9px 9px 10px;border-radius:12px;gap:4px}
  .mod-o{display:none}
  .mod-dept{font-size:13px}
  .mod-name{white-space:normal;line-height:1.15}
  .core{padding:11px 12px;gap:8px}
  .core-h b{font-size:18px}
  .core .log{flex:none}
  .readout{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px;padding:14px;border:0;background:var(--c);color:var(--c-on);min-height:150px;align-content:start;touch-action:pan-y}
  .readout[data-d="integr"]{background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
  .readout .ro-sw{display:none}
  .readout .ro-t,.readout .ro-t b,.readout .ro-st{color:inherit}
  .readout .lnk{color:inherit;grid-column:1;margin-top:auto}
  .ro-dots{display:flex;gap:6px}
  .ro-dots i{flex:1;max-width:28px;height:4px;border-radius:2px;background:currentColor;opacity:.28}
  .ro-dots i.on{opacity:1}
  .dir-tabs{display:flex;gap:6px;overflow-x:auto;margin:0 calc(var(--g) * -1) 10px;padding:0 var(--g) 4px;scrollbar-width:none}
  .dir-tabs button{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--sheet);font:500 13.5px/1 var(--f-b);cursor:pointer;color:var(--ink)}
  .dir-tabs button i{width:9px;height:9px;border-radius:3px;background:var(--c)}
  .dir-tabs button[data-d="integr"] i{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
  .dir-tabs button[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .svc{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 calc(var(--g) * -1);padding:0 var(--g) 6px;scrollbar-width:none;overscroll-behavior-x:contain}
  .svc::-webkit-scrollbar,.dir-tabs::-webkit-scrollbar{display:none}
  .tile{flex:0 0 86%;scroll-snap-align:center;min-height:0}
  .case-v .ctag{display:none}
  .jr{grid-template-columns:minmax(0,1fr);gap:10px}
  .art{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto}
  .art .cover{aspect-ratio:auto;min-height:96px;padding:10px}
  .art .cover span{display:none}
  .art .cover b{font-size:28px;line-height:.9;margin-top:auto}
}

/* ===== phones: motion (owner-approved concept 23.09.2026) =====
   A. the map assembles around the centre, events run into it, the amber "ok" is stamped on the way to money;
   B. a live carousel of the six directions replaces the self-advancing panel;
   C. scroll motion: services deal in as a stack, the verification stamp lands, a number counts up.
   Only transform/opacity (plus SVG strokes); everything is visible and assembled without JS or with reduced motion. */
.h-money,.ags,.map-note.mn-touch{display:none}
/* touch screens cannot hover: the map note names the tap only (the desktop note stays byte-identical) */
@media (hover:none){.map-note.mn-hover{display:none}.map-note.mn-touch{display:block}}
@media (max-width:760px){
  .map-grid{row-gap:30px;column-gap:8px}
  .map-grid .mod,.core,.human{z-index:2}
  .map-col--r .mod{order:7}
  .core{order:5;margin-top:0;border-radius:18px 18px 0 0;padding-bottom:10px}
  .human{order:6;margin-top:-30px;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:10px 12px 12px;border-radius:0 0 18px 18px;background:var(--ink);color:var(--paper);box-shadow:var(--sh-2);border-top:1px solid color-mix(in srgb,var(--paper) 14%,transparent)}
  .human b{font-size:13px}
  .human .ok{position:relative;z-index:0;width:34px;height:34px;border:0;color:#16140F;font-size:10.5px;transition:color .2s}
  .human .ok::before{content:"";position:absolute;inset:0;z-index:-1;margin:-1.5px;border-radius:50%;background:var(--amber);box-shadow:inset 0 0 0 2px #16140F;transform:rotate(-10deg);transition:opacity .4s}
  .h-money{display:block;position:relative;font:600 12px/1 var(--f-b);padding:8px 10px;border-radius:9px;background:var(--paper);color:var(--ink);white-space:nowrap}
  .h-money::after{content:attr(data-t);position:absolute;inset:0;padding:inherit;border-radius:inherit;background:var(--paper);color:var(--ink);opacity:0;transition:opacity .35s}
  .map-note{display:block;margin-top:10px}
  .wires{display:block}
  .wires .slot{fill:none;stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:4 4;transition:opacity .3s .9s}
  .map-grid.is-built .slot{opacity:0}
  .wires .sk{fill:var(--sheet);stroke:var(--line-2);stroke-width:1.5;transition:opacity .3s .6s}
  .wires path.mw.on{stroke:var(--ink);stroke-width:1.5}
  /* motion mode (set by home.js): the stamp waits in a dashed ring, the money pill waits dimmed */
  .map-grid.mm .human .ok{color:color-mix(in srgb,var(--paper) 55%,transparent);border:1.5px dashed color-mix(in srgb,var(--paper) 40%,transparent)}
  .map-grid.mm .human .ok::before{opacity:0}
  .map-grid.mm .human.is-ok .ok{color:#16140F;border-color:transparent}
  .map-grid.mm .human.is-ok .ok::before{opacity:1;animation:mm-stamp .45s cubic-bezier(.3,1.5,.55,1)}
  .map-grid.mm .human.is-ok .ok::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--amber);opacity:0;animation:mm-ring .7s ease-out .2s}
  .map-grid.mm .h-money{background:transparent;color:color-mix(in srgb,var(--paper) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 30%,transparent)}
  .map-grid.mm .human.is-pay .h-money::after{opacity:1}
  .tok{position:absolute;left:0;top:0;z-index:1;display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--f-b);padding:5px 8px;border-radius:7px;background:var(--obj);color:#16140F;box-shadow:0 6px 14px -6px rgba(22,20,15,.55);pointer-events:none;white-space:nowrap;opacity:0}
  .tok i{width:7px;height:7px;border-radius:2px;background:var(--c)}
  .tok[data-d="integr"] i{background:#16140F}
  .mod.is-src{animation:mm-src .5s ease}

  /* B. live carousel */
  .readout{display:none}
  .ags{display:block;margin-top:-10px}
  .ag-track{position:relative;display:flex;gap:var(--g);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--g) * -1);padding:2px var(--g) 4px;scroll-padding-inline:var(--g);scrollbar-width:none;overscroll-behavior-x:contain}
  .ag-track::-webkit-scrollbar{display:none}
  .ag-s{flex:0 0 84%;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:14px 14px 16px;border-radius:22px;background:var(--c);color:var(--c-on)}
  .ag-s[data-d="integr"]{background:var(--sheet);box-shadow:inset 0 0 0 2px var(--ink)}
  .ag-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .ag-dept{font:500 12.5px/1.2 var(--f-b);opacity:.85;padding-top:3px}
  .ag-st{font:600 11px/1.25 var(--f-b);padding:4px 7px;border-radius:7px;background:var(--obj);color:#16140F;max-width:62%;text-align:right}
  .ag-s[data-d="integr"] .ag-st{box-shadow:inset 0 0 0 1.5px #16140F}
  .ag-n{display:block;margin-top:-4px;font:700 24px/1.05 var(--f-d);letter-spacing:-.03em}
  .ag-n .lockup .logo{height:.8em}
  .ag-o{position:relative;height:124px;padding:10px 12px;border-radius:14px;background:var(--obj);color:#16140F;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden}
  .ag-t{font:500 13.5px/1.4 var(--f-b)}
  .ag-go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:11px;background:#16140F;color:#fff;font:600 14px/1 var(--f-d);text-decoration:none}
  .ag-s[data-d="integr"] .ag-go{background:var(--ink);color:var(--paper)}
  .ag-go svg{width:14px;height:14px}
  .ag-dots{display:flex;justify-content:center;margin-top:4px}
  .ag-dots button{position:relative;display:grid;place-items:center;width:30px;height:28px;padding:0;border:0;background:transparent;cursor:pointer}
  .ag-dots button::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .ag-dots i{position:relative;display:block;width:20px;height:4px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--ink) 18%,transparent)}
  .ag-dots i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
  .ag-dots [aria-current="true"] i::after{transform:none}
  /* objects: the static look is the finished story */
  .ag-o .bb{font-size:13px;padding:7px 10px}
  .ag-o .bb-out{background:#F1F0EA;box-shadow:none}
  .ag-o .chip{font-size:11.5px;background:#F1F0EA}
  .o-agent .chip{background:#DFE3FF;color:#1d2fbf}
  .o-agent .chip i{background:#2F48FF}
  .o-out .flip{display:grid}
  .o-out .flip > *{grid-area:1/1}
  .o-out .card-o{box-shadow:0 0 0 1px #E6E3D9,0 8px 18px -12px rgba(22,20,15,.5)}
  .o-out .dz{grid-template-columns:30px 1fr}
  .o-out .dz .av{display:block;width:30px;height:30px;line-height:30px}
  .o-out .f-front{opacity:0}
  .o-out .f-back{display:flex;flex-direction:column;gap:4px;font:500 11.5px/1.2 var(--f-b);color:#6c675c}
  .o-out .f-back b{font:600 15px/1.15 var(--f-d);color:#16140F}
  .o-voice .wave{height:40px}
  .o-voice .call{font-size:12.5px}
  .o-voice .bb{align-self:flex-start}
  .o-fc{padding:8px 10px}
  .o-cover{fill:var(--obj);transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0)}
  .ag-o svg .o-pop,.o-int .nd{transform-box:fill-box;transform-origin:50% 50%}
  .o-dev{padding:10px 10px 0;justify-content:flex-start}
  .o-dev .win{border-radius:10px 10px 0 0;box-shadow:0 0 0 1px #E6E3D9;flex:1}
  .o-dev .win-b{grid-template-columns:30px 1fr}
  .o-dev .row{font-size:11.5px;padding:5px 7px;gap:8px;white-space:nowrap}
  .o-dev .row + .row{display:none}
  .o-dev .pay{font-size:11px}
  .o-sw{display:inline-grid}
  .o-sw > span{grid-area:1/1;text-align:right}
  .o-wait{opacity:0}
  .o-paid{padding:2px 5px;border-radius:5px;background:var(--sun)}
  .o-int{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink);justify-content:center}
  .o-int .o-links line{stroke-width:1.8;stroke-dasharray:none;transform-box:view-box;transform-origin:100px 39px}
  .o-int .o-ring{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:50% 50%}

  /* bottom sheet opened by a tap on a map module */
  .sh{position:fixed;inset:0;z-index:80}
  .sh[hidden]{display:none}
  .sh-bg{position:absolute;inset:0;background:rgba(22,20,15,.5);opacity:0;transition:opacity .3s}
  .sh-p{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;overscroll-behavior:contain;padding:10px 12px calc(14px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:var(--paper);transform:translateY(102%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .sh.on .sh-bg{opacity:1}
  .sh.on .sh-p{transform:none}
  .sh-grab{display:block;width:40px;height:4px;margin:0 auto 12px;border-radius:2px;background:var(--line-2)}
  .sh-x{position:absolute;right:10px;top:4px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer}
  .sh-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .sh .ag-s{min-height:0}
  html.sh-open{overflow:hidden}
  /* mobile audit 23.09: #2 every direction tab fully visible (wrapped, no gradient masks), #3 service cards snap to the gutter,
     #9 the paper stack behind the map stays inside the gutters, #10 hero links get 44 px touch targets */
  .dir-tabs{flex-wrap:wrap;gap:10px 5px;overflow:visible;margin:0 0 12px;padding:0}
  .dir-tabs button{position:relative;height:34px;gap:6px;padding:0 9px}
  .dir-tabs button::after{content:"";position:absolute;inset:-5px 0;min-height:44px}
  .svc{gap:var(--g);scroll-padding-inline:var(--g)}
  .tile{scroll-snap-align:start}
  .map::before{inset:10px 8px -8px 8px}
  .doors{gap:0 22px;padding-top:4px}
  .doors a{min-height:44px}
}

@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  /* A. before the map is first seen the modules wait off their slots (only once JS is on; a failsafe lands them anyway);
     they come in from the sides, close to their slots, so none flies over the legend or the caption */
  .map .mod[data-d="agent"]{--fx:-40px;--fy:-8px;--fr:-6deg;--k:0}
  .map .mod[data-d="forecast"]{--fx:-40px;--fy:-10px;--fr:5deg;--k:1}
  .map .mod[data-d="outreach"]{--fx:0px;--fy:-12px;--fr:4deg;--k:2}
  .map .mod[data-d="dev"]{--fx:0px;--fy:-36px;--fr:-4deg;--k:3}
  .map .mod[data-d="voice"]{--fx:40px;--fy:-6px;--fr:6deg;--k:4}
  .map .mod[data-d="integr"]{--fx:40px;--fy:-10px;--fr:-5deg;--k:5}
  .js .map-grid:not(.is-built) .mod{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.8)}
  .js .map-grid:not(.is-built) .mw,.js .map-grid:not(.is-built) .sk{opacity:0}
  .js .map-grid:not(.is-built):not(.mm) .mod{animation:mm-safe .5s ease 2.5s forwards}
  .map-grid.is-built:not(.mm-done) .mod{transition:opacity .45s ease,transform .9s cubic-bezier(.18,.9,.28,1.08);transition-delay:calc(var(--k) * 70ms)}
  .map-grid.is-built:not(.mm-done) .mw{stroke-dasharray:1;animation:mm-wire .4s ease backwards;animation-delay:calc(.55s + var(--k) * 70ms)}
  /* B. the live slide plays its story; the others wait at its first frame */
  .ags.m .ag-s:not(.is-live) .o-pop,.ags.m .ag-s:not(.is-live) .o-type span,.ags.m .ag-s:not(.is-live) .o-agent .bb-out{opacity:0}
  .ags.m .ag-s:not(.is-live) .f-front{opacity:1}
  .ags.m .ag-s:not(.is-live) .f-back{transform:scaleX(0)}
  .ags.m .ag-s:not(.is-live) .o-cover{transform:none}
  .ags.m .ag-s:not(.is-live) .o-wait{opacity:1}
  .ags.m .ag-s:not(.is-live) .o-paid{opacity:0}
  .ags.m .ag-s:not(.is-live) .o-links line{transform:scale(0)}
  .ag-s:not(.is-live) .wave i,.ag-s:not(.is-live) .rec{animation-play-state:paused}
  .ags.is-auto .ag-dots [aria-current="true"] i::after{animation:mm-prog 3.5s linear both}
  .is-live .o-pop{animation:mm-pop .4s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--at,1.7s)}
  .is-live .o-agent .bb-in{animation:mm-pop .35s ease .1s both}
  .is-live .o-agent .bb-out{animation:mm-pop .3s ease .5s both}
  .is-live .o-type span{animation:mm-ch 1ms linear both;animation-delay:calc(.7s + var(--n) * 32ms)}
  .is-live .o-agent .o-pop{--at:1.85s}
  .is-live .f-front{animation:mm-flip-a 1.25s ease-in both}
  .is-live .f-back{animation:mm-flip-b .25s ease-out 1.25s both}
  .is-live .o-cover{animation:mm-cover 1.3s cubic-bezier(.45,0,.25,1) .3s both}
  .is-live .o-fc .o-pop{--at:1.55s}
  .is-live .o-dev .pay{animation:mm-press .35s ease .7s}
  .is-live .o-wait{animation:mm-out .3s ease 1s both}
  .is-live .o-paid{animation:mm-pop .4s cubic-bezier(.3,1.4,.5,1) 1.15s both}
  .is-live .o-links line{animation:mm-grow .35s ease-out both;animation-delay:calc(.2s + var(--n) * .28s)}
  .is-live .o-int .nd{animation:mm-node .35s ease both;animation-delay:calc(.45s + var(--n) * .28s)}
  .is-live .o-int .o-ring{animation:mm-ring .8s ease-out 2.1s}
  /* C. scroll motion (classes set by home.js only for blocks still below the fold) */
  .svc.mm-pre .tile,.svc.mm-in .tile{z-index:calc(6 - var(--i))}
  .svc.mm-pre .tile{opacity:0;transform:translateX(calc(var(--i) * (14px - 100% - var(--g)))) scale(calc(1 - var(--i) * .04))}
  .svc.mm-pre .tile:first-child{transform:scale(.94)}
  .svc.mm-in .tile{transition:opacity .45s ease,transform .95s cubic-bezier(.2,.85,.25,1);transition-delay:calc(var(--i) * 90ms)}
  .stampbig.mm-pre{opacity:0}
  .stampbig.mm-stamp{position:relative;animation:mm-stamp-big .6s cubic-bezier(.3,1.4,.5,1) backwards}
  .stampbig.mm-stamp::after{content:"";position:absolute;inset:-3px;border-radius:14px;box-shadow:0 0 0 2px var(--amber);opacity:0;animation:mm-ring .7s ease-out .35s}
}
@keyframes mm-safe{to{opacity:1;transform:none}}
@keyframes mm-wire{from{stroke-dashoffset:1}}
@keyframes mm-stamp{0%{opacity:0;transform:scale(2.1) rotate(-26deg)}60%{opacity:1;transform:scale(.9) rotate(-8deg)}100%{opacity:1;transform:rotate(-10deg)}}
@keyframes mm-stamp-big{0%{opacity:0;transform:scale(1.9) rotate(-14deg)}60%{opacity:1;transform:scale(.95) rotate(-1deg)}100%{transform:rotate(-2deg)}}
@keyframes mm-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}
@keyframes mm-src{40%{transform:scale(1.06)}}
@keyframes mm-prog{from{transform:scaleX(0)}}
@keyframes mm-pop{from{opacity:0;transform:scale(.6) translateY(6px)}}
@keyframes mm-ch{from{opacity:0}}
@keyframes mm-flip-a{0%,80%{transform:none;opacity:1}100%{transform:scaleX(0);opacity:1}}
@keyframes mm-flip-b{from{transform:scaleX(0)}}
@keyframes mm-cover{from{transform:none}}
@keyframes mm-press{50%{transform:scale(.88)}}
@keyframes mm-out{from{opacity:1}to{opacity:0;transform:translateY(-6px)}}
@keyframes mm-grow{from{transform:scale(0)}}
@keyframes mm-node{50%{transform:scale(1.12)}}

/* ===== phones: readability and touch tail (mobile audit follow-up) =====
   map labels and the "ok" stamp reach 12 px (a lockup may wrap on very narrow screens instead of spilling out of its module),
   the service buttons get an invisible 44 px hit area, the "Як/Що" labels reach 4.5:1 on every colour field,
   the two hero links keep 44 px targets with an 8 px gap between the rows. */
@media (max-width:760px){
  .mod-name{font-size:12px}
  .mod-name .lockup{flex-wrap:wrap}
  .human .ok{font-size:12px}
  .t-more{position:relative}
  .t-more::after{content:"";position:absolute;inset:-5px 0}
  .t-dl dt{opacity:.92}
  .doors{row-gap:8px}
}
/* phones: the live carousel under the map keeps its status tags and chips at 12 px;
   the chip loses 1 px of vertical padding so the bottom-aligned chat still fits its 124 px panel */
@media (max-width:760px){
  .ag-st{font-size:12px}
  .ag-o .chip{font-size:12px;padding:5px 8px}
}

/* ---------- Solomiia on the first screen (prototype A): the field is the main action, the chips start
   a conversation, the map lights the department that fits while the visitor types (sol-hero.js).
   Without JS there is no chat, so the field and the chips stay hidden and the links remain. ---------- */
.ask{position:relative;background:var(--card);border-radius:24px;padding:16px 16px 14px 20px;box-shadow:inset 0 0 0 1.5px var(--ink),var(--sh-2);transition:box-shadow .2s,transform .2s}
.ask:has(textarea:focus){box-shadow:inset 0 0 0 2px var(--cobalt),var(--sh-3)}
.ask.has-guess{transform:translateY(-2px)}
.ask-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ask-who{display:flex;flex-direction:column;gap:2px}
.ask-who b{font:600 15px/1.1 var(--f-d);letter-spacing:-.01em}
.ask-who small{font:500 12.5px/1.1 var(--f-b);color:var(--ink-3)}
.ask-on{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--f-b);color:var(--ink-2);padding:6px 10px;border-radius:999px;background:var(--paper)}
.ask-on i{width:8px;height:8px;border-radius:50%;background:var(--cobalt);animation:ask-on 2.4s ease-out infinite}
.ask-f{position:relative}
.ask-f textarea{display:block;width:100%;border:0;background:transparent;resize:none;outline:none;font:500 clamp(19px,1.5vw,25px)/1.3 var(--f-d);letter-spacing:-.018em;min-height:3.6em;max-height:220px;padding:2px 0;margin:0;color:var(--ink);position:relative;z-index:1}
.ask-f textarea::placeholder{color:transparent}
.ask-ph{position:absolute;inset:2px 0 auto 0;pointer-events:none;display:flex;flex-direction:column;gap:8px}
.ask-f textarea:not(:placeholder-shown) + .ask-ph{display:none}
.ask-ph1{font:500 clamp(19px,1.5vw,25px)/1.3 var(--f-d);letter-spacing:-.018em;color:var(--ink-3)}
.ask-ex{font:500 15px/1.3 var(--f-b);color:var(--ink-3)}
.ask-t{color:var(--ink-2)}
.ask-rest{color:transparent}
/* the caret is an empty inline with an out-of-flow bar: no box of its own, so it never adds a line break
   opportunity inside a word and the example wraps exactly like its full text */
.ask-caret{position:relative}
.ask-caret::after{content:"";position:absolute;left:0;top:.08em;width:2px;height:1em;background:var(--cobalt);animation:bl 1s steps(2) infinite}
.ask-bot{display:flex;align-items:center;gap:10px;margin-top:12px;min-height:46px}
.ask-hint{font:500 12.5px/1.3 var(--f-b);color:var(--ink-3);margin-right:auto}
.ask-hint kbd{font:600 12px/1 var(--f-b);padding:3px 6px;border-radius:6px;background:var(--paper-2);color:var(--ink-2)}
.ask.has-guess .ask-hint{display:none}
.ask-guess{margin-right:auto;min-width:0;display:inline-flex;align-items:center;gap:8px;font:500 13px/1.25 var(--f-b);color:var(--ink-2);padding:7px 10px 7px 8px;border-radius:10px;background:var(--c-t,var(--paper-2));animation:ask-pop .25s ease}
.ask-guess:empty{display:none}
.ask-guess i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.ask-guess[data-d="integr"] i,.ask-guess[data-d="none"] i,.ask-start[data-d="none"] i{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.ask-guess b{color:var(--ink);font-weight:600}
.ask-bot .ask-send{margin-left:auto}
.ask:has(textarea:placeholder-shown) .ask-send{background:var(--paper-2);color:var(--ink-3);box-shadow:none}
.ask + .ask-starts{margin-top:-8px}
.ask-starts{display:flex;flex-wrap:wrap;gap:8px}
.ask-start{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--sheet);font:500 14.5px/1.2 var(--f-b);cursor:pointer;color:var(--ink);white-space:nowrap;transition:transform .15s,border-color .15s}
.ask-start i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.ask-start:hover{border-color:var(--ink);transform:translateY(-1px)}
.ask-s{display:none}
.ask-note{flex-basis:100%;font:500 12.5px/1.3 var(--f-b);color:var(--ink-3)}
html:not(.js) .ask,html:not(.js) .ask-starts,html:not(.js) .ask-note{display:none}
@keyframes ask-on{0%{box-shadow:0 0 0 0 rgba(47,72,255,.45)}70%,100%{box-shadow:0 0 0 7px rgba(47,72,255,0)}}
@keyframes ask-pop{from{opacity:0;transform:translateY(4px) scale(.96)}}
/* the map answers while the visitor types */
.map.has-guess .mod{transition:transform .2s ease,box-shadow .2s ease,opacity .25s ease}
.map.has-guess .mod:not(.is-guess){opacity:.42}
.mod.is-guess{transform:translateY(-3px);box-shadow:0 0 0 3px var(--sheet),0 0 0 5px var(--ink),var(--sh-2)}
.mod-say{position:absolute;left:10px;top:-20px;z-index:5;display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border-radius:10px;background:var(--card);color:var(--ink);font:600 12.5px/1.1 var(--f-d);letter-spacing:0;box-shadow:var(--sh-2),inset 0 0 0 1px var(--line);white-space:nowrap;animation:ask-pop .3s ease}
.mod-say .ask-av{width:20px;height:20px;border-radius:6px;font-size:11px}
/* "Обговорити з Соломією": the map readout (desktop) and the department sheet (phones) */
.ro-act{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ro-sol{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 6px;border-radius:11px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font:600 13.5px/1 var(--f-d);cursor:pointer;white-space:nowrap}
.ro-sol:hover{background:var(--cobalt-t)}
.ro-sol .ask-av{width:26px;height:26px;border-radius:8px;font-size:12px}
.sh .ro-sol{width:100%;justify-content:center;min-height:46px;margin-top:2px;border-color:#16140F;background:#fff;color:#16140F;font-size:15px}
/* quiz result: the five answers continue in the chat as a brief */
.res-sol{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px 12px 12px;border:0;border-radius:16px;background:var(--obj);color:#16140F;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1.5px #16140F;transition:transform .15s}
.res-sol:hover{transform:translateY(-2px)}
.res-sol .ask-av{width:34px;height:34px;border-radius:11px;font-size:16px}
.res-sol-t{display:flex;flex-direction:column;gap:3px;margin-right:auto;min-width:0}
.res-sol-t b{font:600 17px/1.15 var(--f-d);letter-spacing:-.01em}
.res-sol-t small{font:500 12.5px/1.25 var(--f-b);color:#5E5A50}
.res-sol svg{width:18px;height:18px;flex:none}
html:not(.js) .ro-sol,html:not(.js) .res-sol{display:none}
@media (max-width:1180px){
  .readout .ro-act{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px 18px}
}
@media (max-width:760px){
  .ask{padding:14px 12px 12px 14px;border-radius:22px}
  .ask-f textarea,.ask-ph1{font-size:19px}
  .ask-f textarea{min-height:4.4em}
  .ask-ex{font-size:14px}
  .ask-top{margin-bottom:8px}
  .ask-who small{display:none}
  /* phones: the four starts sit in two rows, fully visible; long ones switch to a short label (same meaning) */
  .ask + .ask-starts{margin-top:-4px}
  .ask-starts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ask-start{min-height:48px;padding:6px 10px;gap:8px;white-space:normal;text-align:left;font-size:14px;line-height:1.2}
  .ask-start .ask-s{display:inline}
  .ask-start .ask-s + .ask-l{display:none}
  .res-sol-t b{font-size:16px}
}

/* ---------- Desktop first screen fits the window (owner, 24.09). On the two-column layout the H1 size also
   follows the window height and the gaps between the kicker, H1, lead and the Solomiia field are tighter,
   so the field with its four starts is visible without scrolling on common windows from 1280x720 to
   1920x950 (tests/hero-fold.test.mjs). The map on the right may be cut by the fold. Phones and tablets
   (the single column up to 1180 px) keep the rules above untouched. ---------- */
@media (min-width:1181px){
  .hero{padding-top:clamp(8px,calc(7vh - 36px),56px)}
  .hero-txt{padding-top:clamp(0px,calc(3vh - 12px),44px);gap:clamp(14px,2.3vh,24px)}
  .hero-txt .h1{font-size:clamp(36px,min(3.75vw,6.4vh),74px)}
  .hero-txt .hero-lead{margin-top:calc(clamp(4px,.9vh,10px) * -1)}
}
/* laptop-height windows: a more compact field and starts */
@media (min-width:1181px) and (max-height:820px){
  .ask{padding:12px 14px 10px 18px}
  .ask-top{margin-bottom:6px}
  .ask-bot{margin-top:6px}
  .ask-starts{gap:6px}
  .ask-start{min-height:38px;padding:0 12px;font-size:14px}
}
/* low windows: the H1 takes four lines instead of five, the starts are smaller and the long ones use
   their short label (same meaning, as on phones) so the four fit in two rows */
@media (min-width:1181px) and (max-height:760px){
  .hero-txt .h1{font-size:clamp(34px,min(3.05vw,6vh),60px)}
  .ask-start{min-height:36px;padding:0 10px;font-size:13.5px}
  .ask-start .ask-s{display:inline}
  .ask-start .ask-s + .ask-l{display:none}
}