@layer brand{
/* pps.03 · СибирьТрансСтрой · Safety Control */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--c-bg)}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--c-accent) 9%,transparent),transparent 32%),radial-gradient(circle at 82% 9%,color-mix(in srgb,var(--c-text) 4%,transparent),transparent 24%)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
h1,h2,h3,p,blockquote{margin:0}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px}
.shell{width:min(100%,1440px);margin-inline:auto;padding-inline:clamp(20px,5vw,80px)}
.index{display:inline-flex;align-items:center;gap:12px;min-height:24px;color:var(--c-muted);font-family:var(--font-head);font-size:11px;line-height:1;letter-spacing:.16em;text-transform:uppercase}
.index::before{content:"";width:8px;height:8px;border:1px solid var(--c-accent);border-radius:50%;box-shadow:0 0 14px color-mix(in srgb,var(--c-accent) 70%,transparent)}
.section{padding-block:clamp(88px,11vw,168px)}
.pulse{display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;background:var(--c-ok);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-ok) 12%,transparent),0 0 18px var(--c-ok)}
.pulse--wait{background:var(--c-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-accent) 12%,transparent),0 0 18px var(--c-accent)}

/* topbar */
.topbar{position:fixed;inset:0 0 auto;z-index:60;border-bottom:1px solid color-mix(in srgb,var(--c-line-strong) 76%,transparent);background:color-mix(in srgb,var(--c-bg) 82%,transparent);backdrop-filter:blur(18px)}
.topbar__in{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;font-weight:730;letter-spacing:-.02em}
.brand img{width:42px;height:42px;object-fit:contain}
.brand span{display:block;line-height:1.05}
.brand small{display:block;margin-top:5px;color:var(--c-muted);font-family:var(--font-head);font-size:9px;font-weight:450;letter-spacing:.08em;text-transform:uppercase}
.nav{display:none;align-items:center;gap:4px}
.nav a,.phone{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding-inline:14px;color:var(--c-ink-soft);font-size:13px}
.nav a:hover,.phone:hover{color:var(--c-text)}
.topbar__contact{display:flex;align-items:center;gap:8px}
.phone{display:none;font-family:var(--font-head)}
.micro-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:46px;padding-inline:18px;border:1px solid var(--c-line-strong);border-radius:999px;background:color-mix(in srgb,var(--c-bg-elev) 78%,transparent);font-size:12px;font-weight:700;transition:background .25s,border-color .25s,color .25s}
.messenger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--c-line-strong);border-radius:50%;color:var(--c-accent-ink);font-family:var(--font-head);font-size:10px;font-weight:700}
.micro-cta b{color:var(--c-accent-ink);font-size:16px}
.micro-cta:hover{background:var(--c-accent-btn);border-color:var(--c-accent-btn);color:var(--c-on-accent)}
.micro-cta:hover b{color:inherit}

/* hero: a control field, not a split-screen */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:120px 0 42px;overflow:hidden;border-bottom:1px solid var(--c-line)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c-line) 36%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--c-line) 30%,transparent) 1px,transparent 1px);background-size:clamp(72px,8vw,128px) clamp(72px,8vw,128px);mask-image:linear-gradient(to bottom,transparent 4%,currentColor 38%,transparent 96%);opacity:.55}
.hero__field{position:absolute;inset:0;pointer-events:none}
.hero__ring{position:absolute;left:58%;top:47%;border:1px solid color-mix(in srgb,var(--c-accent) 40%,var(--c-line));border-radius:50%;translate:-50% -50%}
.hero__ring--a{width:min(86vw,980px);aspect-ratio:1}
.hero__ring--b{width:min(60vw,690px);aspect-ratio:1;border-style:dashed;animation:spin 32s linear infinite}
.hero__ring--c{width:min(34vw,390px);aspect-ratio:1;box-shadow:inset 0 0 80px color-mix(in srgb,var(--c-accent) 8%,transparent),0 0 100px color-mix(in srgb,var(--c-accent) 5%,transparent)}
.hero__sweep{position:absolute;left:58%;top:47%;width:min(60vw,690px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 78%,color-mix(in srgb,var(--c-accent) 24%,transparent) 88%,transparent 94%);animation:spin 9s linear infinite}
.hero__content{position:relative;z-index:2;display:grid;gap:clamp(28px,4vh,50px)}
.hero__line{display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--c-muted);font-family:var(--font-head);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.signal{display:inline-flex;align-items:center;gap:12px}
.signal::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c-ok);box-shadow:0 0 18px var(--c-ok);animation:blink 2.8s ease-in-out infinite}
.hero__coord{display:none}
.hero h1{position:relative;max-width:18ch;font-size:clamp(48px,6.6vw,100px);font-weight:610;line-height:.9;letter-spacing:-.065em;text-wrap:balance}
.hero__slogan{max-width:60ch;color:var(--c-accent-ink);font-family:var(--font-head);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.hero h1 i,.hero h1 em{font-style:normal;color:var(--c-accent-ink)}
.hero__lower{display:grid;grid-template-columns:1fr;gap:28px;align-items:end}
.hero__lower>p{max-width:42ch;color:var(--c-ink-soft);font-size:clamp(17px,1.45vw,21px);line-height:1.55}
.hero__console{position:relative;display:grid;align-content:space-between;min-height:132px;padding:18px;border:1px solid var(--c-line-strong);border-radius:var(--r-lg);background:color-mix(in srgb,var(--c-bg-elev) 70%,transparent);box-shadow:inset 0 1px color-mix(in srgb,var(--c-text) 7%,transparent),0 28px 80px color-mix(in srgb,var(--c-shadow) 34%,transparent);backdrop-filter:blur(12px)}
.hero__console::before,.hero__console::after{content:"";position:absolute;width:16px;height:16px;border-color:var(--c-accent)}
.hero__console::before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid}
.hero__console::after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}
.hero__console-label{color:var(--c-muted);font-family:var(--font-head);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.hero__console strong{font-family:var(--font-head);font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:.04em}
.hero__console .pulse{position:absolute;right:18px;bottom:20px}
.hero__actions{display:grid;grid-template-columns:1fr;gap:10px}
.action{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding-block:14px;padding-inline:22px;text-wrap:balance;border:1px solid var(--c-line-strong);border-radius:999px;font-size:13px;font-weight:700;transition:background .25s,color .25s,border-color .25s,transform .25s}
.action b{font-size:18px;color:var(--c-accent-ink)}
.action:hover{transform:translateY(-2px);border-color:var(--c-accent)}
.action--primary{background:var(--c-accent-btn);border-color:var(--c-accent-btn);color:var(--c-on-accent)}
.action--primary b{color:inherit}
.hero__edge{position:absolute;right:12px;top:50%;display:none;align-items:center;gap:22px;writing-mode:vertical-rl;color:var(--c-muted);font-family:var(--font-head);font-size:9px;letter-spacing:.18em;transform:translateY(-50%)}
.hero__edge span:last-child{color:var(--c-accent-ink)}
.hero__proof{max-width:62ch;color:var(--c-muted);font-size:13px}

/* metrics */
.metric-rail{position:relative;z-index:3;border-bottom:1px solid var(--c-line);background:var(--c-bg-elev)}
.metric-rail__grid{display:grid;grid-template-columns:1fr 1fr;padding-block:1px}
.metric{min-height:150px;display:flex;flex-direction:column;justify-content:space-between;padding:24px 18px;border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.metric:nth-child(2n){border-right:0}
.metric strong{font-family:var(--font-head);font-size:clamp(30px,4vw,58px);font-weight:450;line-height:1;color:var(--c-accent-ink);letter-spacing:-.04em}
.metric span{max-width:17ch;color:var(--c-muted);font-size:12px;line-height:1.35}
.metric-rail__note{padding-block:14px;color:var(--c-muted);font-size:11px}

/* object scope */
.object-scope{position:relative;overflow:hidden;background:var(--c-bg)}
.object-scope::before{content:"";position:absolute;right:-14vw;top:3%;width:min(58vw,820px);aspect-ratio:1;border:1px solid var(--c-line);border-radius:50%;box-shadow:0 0 0 9vw color-mix(in srgb,var(--c-accent) 2%,transparent),0 0 0 18vw color-mix(in srgb,var(--c-accent) 1%,transparent)}
.section__head--wide{grid-template-columns:1fr}
.scope-grid{position:relative;display:grid;grid-template-columns:1fr;border-top:1px solid var(--c-line-strong);border-left:1px solid var(--c-line-strong)}
.scope-card{display:grid;align-content:space-between;min-height:260px;padding:26px;border-right:1px solid var(--c-line-strong);border-bottom:1px solid var(--c-line-strong);background:color-mix(in srgb,var(--c-bg-elev) 74%,transparent);transition:background .25s,transform .25s}
.scope-card:hover{background:color-mix(in srgb,var(--c-accent) 8%,var(--c-bg-elev));transform:translateY(-3px)}
.scope-card>span{color:var(--c-accent-ink);font-family:var(--font-head);font-size:10px;letter-spacing:.16em}
.scope-card h3{max-width:15ch;margin-top:28px;font-size:clamp(24px,3vw,40px);font-weight:540;line-height:1.02;letter-spacing:-.04em}
.scope-card p{margin-top:22px;color:var(--c-muted);font-size:13px}
.scope-card a{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-top:28px;border-top:1px solid var(--c-line);padding-top:12px;font-size:12px;font-weight:700}
.scope-card a b{color:var(--c-accent-ink);font-size:18px}

/* section headings */
.section__head{display:grid;grid-template-columns:1fr;gap:28px;margin-bottom:clamp(50px,8vw,104px)}
.section__head h2,.route__title h2,.projects__head h2,.request__head h2{font-size:clamp(40px,6.2vw,88px);font-weight:560;line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.section__head h2 i,.section__head h2 em,.route__title h2 i,.route__title h2 em,.projects__head h2 i,.projects__head h2 em,.request__head h2 i,.request__head h2 em,.guarantee__title h2 i,.guarantee__title h2 em,.faq__title h2 i,.faq__title h2 em{font-style:normal;color:var(--c-accent-ink)}
.section__head>p{max-width:42ch;align-self:end;color:var(--c-ink-soft);font-size:18px}

/* services as full-width instrument rows */
.system{background:linear-gradient(180deg,var(--c-bg),var(--c-bg-elev))}
.service-lines{border-top:1px solid var(--c-line-strong)}
.service-line{position:relative;display:grid;grid-template-columns:52px 1fr;gap:18px;padding:28px 0;border-bottom:1px solid var(--c-line);transition:padding .3s,background .3s}
.service-line::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:var(--c-accent-btn);transform:scaleY(0);transform-origin:bottom;transition:transform .28s}
.service-line:hover::before{transform:scaleY(1)}
.service-line:hover{color:var(--c-on-accent);padding-inline:18px}
.service-line:hover p,.service-line:hover .service-line__code,.service-line:hover .service-line__mark{color:var(--c-on-accent)}
.service-line__code{font-family:var(--font-head);font-size:11px;color:var(--c-muted)}
.service-line h3{font-size:clamp(25px,3.3vw,46px);font-weight:530;line-height:1;letter-spacing:-.035em}
.service-line p{grid-column:2;max-width:54ch;color:var(--c-muted);font-size:14px}
.service-line__mark{position:absolute;right:0;top:18px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--c-accent-ink);font-size:24px}

/* route */
.route{border-block:1px solid var(--c-line);background:var(--c-bg-elev)}
.route__title{display:grid;gap:28px;margin-bottom:clamp(64px,9vw,120px)}
.route__track{position:relative;display:grid;grid-template-columns:1fr;gap:0;list-style:none;padding:0;margin:0;counter-reset:route}
.route__track::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--c-accent),var(--c-line-strong))}
.route__track li{position:relative;min-height:150px;padding:0 0 38px 48px;counter-increment:route}
.route__node{position:absolute;left:0;top:2px;width:15px;height:15px;border:3px solid var(--c-bg-elev);border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent),0 0 22px color-mix(in srgb,var(--c-accent) 52%,transparent)}
.route__track b::before{content:"0" counter(route);display:block;margin-bottom:20px;color:var(--c-muted);font-family:var(--font-head);font-size:10px;font-weight:450;letter-spacing:.12em}
.route__track h3{font-size:20px;font-weight:590;letter-spacing:-.02em}
.route__track p{max-width:28ch;margin-top:8px;color:var(--c-muted);font-size:13px}
.route__seal{display:grid;grid-template-columns:1fr;gap:14px;margin-top:42px;padding-top:28px;border-top:1px solid var(--c-line-strong);font-family:var(--font-head);text-transform:uppercase}
.route__seal span{color:var(--c-muted);font-size:10px;letter-spacing:.13em}
.route__seal strong{font-size:clamp(22px,3vw,40px);font-weight:500;letter-spacing:-.04em}

/* projects control board */
.projects{background:var(--c-bg)}
.projects__head{display:grid;grid-template-columns:1fr;gap:30px;align-items:end;margin-bottom:58px}
.projects__head>div:first-child{display:grid;gap:24px}
.live{display:flex;align-items:center;gap:12px;color:var(--c-muted);font-family:var(--font-head);font-size:10px;letter-spacing:.12em}
.board{border:1px solid var(--c-line-strong);border-radius:var(--r-lg);overflow:hidden;background:color-mix(in srgb,var(--c-bg-elev) 82%,transparent);box-shadow:0 50px 120px color-mix(in srgb,var(--c-shadow) 30%,transparent)}
.board__head,.board__row{display:grid;grid-template-columns:minmax(0,1fr) 74px 74px;gap:14px;align-items:center}
.board__head{padding:14px 18px;border-bottom:1px solid var(--c-line-strong);color:var(--c-muted);font-family:var(--font-head);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.board__head span:not(:first-child){text-align:center}
.board__row{min-height:92px;padding:16px 18px;border-bottom:1px solid var(--c-line);transition:background .25s}
.board__row:last-child{border-bottom:0}
.board__row:hover{background:color-mix(in srgb,var(--c-accent) 7%,transparent)}
.board__row>div{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;align-items:center;min-width:0}
.board__row .pulse{grid-row:1/3}
.board__row strong{overflow:hidden;font-size:14px;font-weight:590;text-overflow:ellipsis;white-space:nowrap}
.board__row small{color:var(--c-muted);font-size:11px}
.board__row>b{color:var(--c-ok);font-family:var(--font-head);font-size:9px;font-weight:500;letter-spacing:.08em;text-align:center}
.board__row--next{background:color-mix(in srgb,var(--c-accent) 4%,transparent)}
.board__row--next>b{color:var(--c-accent-ink)}

/* real cases */
.case-grid{display:grid;grid-template-columns:1fr;gap:18px}
.case-card{position:relative;min-width:0;overflow:hidden;border:1px solid var(--c-line-strong);border-radius:var(--r-lg);background:var(--c-bg-elev)}
.case-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--c-bg-elev)}
.case-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--c-bg) 74%,transparent));pointer-events:none}
.case-card__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.06);transition:transform .6s,filter .6s}
.case-card:hover .case-card__media img{transform:scale(1.035);filter:saturate(1) contrast(1.04)}
.case-card__body{display:grid;gap:10px;padding:24px}
.case-card__body>span{color:var(--c-accent-ink);font-family:var(--font-head);font-size:9px;letter-spacing:.15em}
.case-card__body h3{font-size:clamp(24px,3vw,42px);font-weight:540;line-height:1;letter-spacing:-.04em}
.case-card__body p{color:var(--c-ink-soft);font-size:14px}
.case-card__body small{padding-top:16px;border-top:1px solid var(--c-line);color:var(--c-muted);font-size:12px}
.project-cta{display:flex;align-items:center;justify-content:space-between;min-height:64px;margin-top:22px;padding-inline:24px;border:1px solid var(--c-line-strong);border-radius:999px;font-weight:700}
.project-cta b{color:var(--c-accent-ink);font-size:20px}

/* trust vault */
.trust{border-top:1px solid var(--c-line);background:var(--c-bg-elev)}
.trust-console{display:grid;grid-template-columns:1fr;gap:18px}
.document-stack{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.document-card{display:grid;gap:12px;min-width:0;padding:12px;border:1px solid var(--c-line-strong);border-radius:var(--r-lg);background:var(--c-bg)}
.document-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--r-lg) - 8px);filter:grayscale(1);transition:filter .25s}
.document-card:hover img{filter:none}
.document-card span{display:flex;align-items:center;min-height:44px;color:var(--c-ink-soft);font-size:11px}
.trust-list{border:1px solid var(--c-line-strong);border-radius:var(--r-lg);overflow:hidden}
.trust-list article{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:22px;border-bottom:1px solid var(--c-line)}
.trust-list article:last-child{border-bottom:0}
.trust-list h3{font-size:17px;font-weight:600}
.trust-list p{margin-top:5px;color:var(--c-muted);font-size:13px}
.trust-list .pulse{margin-top:7px}
.engineer-card{position:relative;min-height:360px;overflow:hidden;border:1px solid var(--c-line-strong);border-radius:var(--r-lg);background:var(--c-bg)}
.engineer-card img{width:100%;height:100%;min-height:360px;object-fit:cover;filter:grayscale(.8) contrast(1.08)}
.engineer-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--c-bg) 94%,transparent))}
.engineer-card p{position:absolute;inset:auto 24px 24px;z-index:1;font-size:17px;font-weight:600}

/* price: typographic event */
.price-stage{position:relative;padding-block:clamp(90px,13vw,190px);overflow:hidden;border-block:1px solid var(--c-line-strong);background:var(--c-accent-btn);color:var(--c-on-accent)}
.price-stage::before{content:"100";position:absolute;right:-.08em;bottom:-.34em;color:color-mix(in srgb,var(--c-on-accent) 8%,transparent);font-family:var(--font-head);font-size:min(52vw,700px);font-weight:700;line-height:1;letter-spacing:-.12em}
.price-stage .index{color:color-mix(in srgb,var(--c-on-accent) 64%,transparent)}
.price-stage .index::before{border-color:var(--c-on-accent);box-shadow:none}
.price-stage__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:42px}
.price-stage__main>span{font-family:var(--font-head);font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.price-stage__main strong{display:block;margin-top:12px;font-family:var(--font-head);font-size:clamp(62px,12vw,176px);font-weight:570;line-height:.82;letter-spacing:-.085em}
.price-stage__main p{max-width:56ch;margin-top:34px;font-size:16px}
.price-stage__main small{display:block;max-width:68ch;margin-top:16px;opacity:.72;font-size:12px}
.price-stage__cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;margin-top:28px;padding-inline:22px;border:1px solid color-mix(in srgb,var(--c-on-accent) 60%,transparent);border-radius:999px;font-weight:750}
.price-stage__offers{display:grid;gap:16px;justify-items:center}
.price-stage__badge{width:min(100%,260px);aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:30px;border:1px solid color-mix(in srgb,var(--c-on-accent) 48%,transparent);border-radius:50%;text-align:center;rotate:7deg}
.price-stage__badge strong{font-family:var(--font-head);font-size:52px;font-weight:560;line-height:1}
.price-stage__badge span{font-size:12px;line-height:1.35}
.promo-card{width:min(100%,300px);display:grid;gap:7px;padding:22px;border:1px solid color-mix(in srgb,var(--c-on-accent) 48%,transparent);border-radius:var(--r-lg);background:color-mix(in srgb,var(--c-on-accent) 7%,transparent)}
.promo-card>span{font-family:var(--font-head);font-size:9px;letter-spacing:.16em}
.promo-card strong{font-family:var(--font-head);font-size:clamp(24px,3vw,40px);line-height:1;letter-spacing:.02em}
.promo-card b{font-family:var(--font-head);font-size:28px}
.promo-card small{font-size:11px;line-height:1.4;opacity:.75}

/* guarantee */
.guarantee{background:var(--c-bg)}
.guarantee__grid,.faq__grid{display:grid;grid-template-columns:1fr;gap:50px}
.guarantee__title,.faq__title{display:grid;gap:26px;align-content:start}
.guarantee__title h2,.faq__title h2{font-size:clamp(40px,6vw,82px);font-weight:560;line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.guarantee__list{display:grid;list-style:none;padding:0;margin:0;border-top:1px solid var(--c-line-strong)}
.guarantee__list li{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:16px;min-height:96px;border-bottom:1px solid var(--c-line);font-size:16px}
.guarantee__list li span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--c-accent);border-radius:50%;color:var(--c-accent-ink);font-family:var(--font-head)}
.guarantee__list strong{font-weight:560}

/* manifesto */
.manifesto{padding-block:clamp(100px,14vw,210px);background:var(--c-bg-elev)}
.manifesto__in{position:relative;display:grid;justify-items:center;text-align:center}
.manifesto__quote{position:absolute;top:-.45em;color:color-mix(in srgb,var(--c-accent) 24%,transparent);font-family:var(--font-head);font-size:clamp(140px,22vw,320px);line-height:1}
.manifesto blockquote{position:relative;max-width:23ch;font-size:clamp(34px,5.2vw,74px);font-weight:520;line-height:1.06;letter-spacing:-.05em;text-wrap:balance}
.manifesto cite{margin-top:38px;color:var(--c-muted);font-family:var(--font-head);font-size:10px;font-style:normal;letter-spacing:.13em;text-transform:uppercase}

/* faq */
.faq{border-top:1px solid var(--c-line);background:var(--c-bg-elev)}
.faq__list{border-top:1px solid var(--c-line-strong)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{display:grid;grid-template-columns:1fr 44px;align-items:center;gap:16px;min-height:86px;padding-block:18px;font-size:18px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--c-line-strong);border-radius:50%;color:var(--c-accent-ink);font-family:var(--font-head);font-size:20px;transition:rotate .25s}
.faq details[open] summary span{rotate:45deg}
.faq details p{max-width:64ch;padding:0 60px 28px 0;color:var(--c-muted);font-size:15px}

/* request terminal */
.request{position:relative;background:var(--c-bg)}
.request::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 14%,color-mix(in srgb,var(--c-accent) 12%,transparent),transparent 32%);pointer-events:none}
.request__in{position:relative}
.request__head{display:grid;justify-items:center;text-align:center}
.request__head h2{max-width:14ch;margin-top:28px}
.request__head p{max-width:52ch;margin-top:26px;color:var(--c-ink-soft);font-size:18px}
.request__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;margin-top:34px;color:var(--c-muted);font-family:var(--font-head);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.request__meta a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-text)}
.request__meta span{display:inline-flex;align-items:center;min-height:44px}
.request__form{margin-top:clamp(48px,7vw,88px)}
.request__note{max-width:58ch;margin:22px auto 0;color:var(--c-muted);font-size:13px;text-align:center}
.form-sample{position:relative;padding:clamp(22px,4vw,48px);border:1px solid var(--c-line-strong);border-radius:var(--r-lg);background:color-mix(in srgb,var(--c-bg-elev) 86%,transparent);box-shadow:0 50px 120px color-mix(in srgb,var(--c-shadow) 32%,transparent)}
.form-sample::before{content:"REQUEST / NEW OBJECT";display:block;margin-bottom:28px;color:var(--c-accent-ink);font-family:var(--font-head);font-size:9px;letter-spacing:.14em}
.form-sample [data-form-fields]{grid-template-columns:1fr}
.form-sample .modal__sub{color:var(--c-ink-soft);font-size:14px}
.input-shell{display:grid;gap:7px}
.input-label{color:var(--c-muted);font-family:var(--font-head);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.input{width:100%;min-height:58px;padding:0 16px;border:0;border-bottom:1px solid var(--c-line-strong);border-radius:0;background:transparent;color:var(--c-text)}
textarea.input{min-height:128px;padding-block:16px;resize:vertical}
.input:focus{border-color:var(--c-accent);outline:0}
.input-help{min-height:0;color:var(--c-bad-ink);font-size:11px}
.radios{display:grid;grid-template-columns:1fr;gap:8px}
.radio{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 14px;border:1px solid var(--c-line-strong);border-radius:999px;cursor:pointer}
.radio__input{position:absolute;opacity:0;width:1px;height:1px}
.radio__dot{width:16px;height:16px;flex:none;border:1px solid var(--c-line-strong);border-radius:50%;box-shadow:inset 0 0 0 4px var(--c-bg-elev)}
.radio__input:checked+.radio__dot{background:var(--c-accent-btn);border-color:var(--c-accent-btn)}
.radio:has(.radio__input:checked){border-color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 8%,transparent)}
.radio__label{font-size:13px}
.checkbox{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--c-muted);font-size:12px;cursor:pointer}
.checkbox__input{position:absolute;opacity:0;width:1px;height:1px}
.checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;border:1px solid var(--c-line-strong);border-radius:4px;color:var(--c-on-accent)}
.checkbox__box svg{width:13px;height:13px;opacity:0}
.checkbox__input:checked+.checkbox__box{background:var(--c-accent-btn);border-color:var(--c-accent-btn)}
.checkbox__input:checked+.checkbox__box svg{opacity:1}
.checkbox a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
.form-sample .btn{min-height:62px;padding-inline:24px;border:1px solid var(--c-accent-btn);border-radius:999px;background:var(--c-accent-btn);color:var(--c-on-accent);font-weight:750;cursor:pointer}
.form-sample .btn:hover{background:var(--c-text);border-color:var(--c-text)}

/* footer */
.footer{border-top:1px solid var(--c-line);background:var(--c-bg-elev)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:30px;padding-block:42px}
.footer__nap,.footer__links{display:grid;align-content:start;gap:2px;color:var(--c-muted);font-size:12px}
.footer__nap a,.footer__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-text)}
.footer__copy{display:grid;align-self:end;gap:8px;color:var(--c-muted);font-family:var(--font-head);font-size:10px;letter-spacing:.08em;text-transform:uppercase}

/* mobile action rail */
.mobile-actions{position:fixed;z-index:70;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:.8fr 1.2fr;gap:8px;padding:8px;border:1px solid var(--c-line-strong);border-radius:999px;background:color-mix(in srgb,var(--c-bg) 90%,transparent);box-shadow:0 20px 60px color-mix(in srgb,var(--c-shadow) 50%,transparent);backdrop-filter:blur(18px)}
.mobile-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;padding-inline:14px;border-radius:999px;font-size:12px;font-weight:750}
.mobile-actions a:first-child{border:1px solid var(--c-line-strong)}
.mobile-actions a:last-child{background:var(--c-accent-btn);color:var(--c-on-accent)}

/* motion */
@keyframes spin{to{rotate:1turn}}
@keyframes blink{0%,84%,100%{opacity:1}90%{opacity:.28}}
/* Начальная непрозрачность НЕ опускается ниже читаемой: при .35 светлый текст на
   тёмном даёт контраст 2.9 при норме 4.5, и держится он, пока посетитель не прокрутит
   часть блока — выглядит как «чёрным по серому». Движение остаётся, нечитаемого
   состояния нет. Та же правка была в приёмке 20.09. */
@keyframes rise{from{opacity:.75;transform:translateY(22px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  .reveal{animation:rise both linear;animation-timeline:view();animation-range:entry 5% cover 32%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero__ring--b,.hero__sweep,.signal::before{animation:none}.reveal{animation:none}}

/* responsive composition */
@media (min-width:620px){
  .hero__actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__actions .action{justify-content:space-between}
  .metric-rail__grid{grid-template-columns:repeat(4,1fr)}
  .metric{border-bottom:0}
  .metric:nth-child(2n){border-right:1px solid var(--c-line)}
  .metric:last-child{border-right:0}
  .board__head,.board__row{grid-template-columns:minmax(0,1fr) 110px 110px}
  .radios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-card--wide{grid-column:1/-1;display:grid;grid-template-columns:1.35fr .65fr}
  .case-card--wide .case-card__media{aspect-ratio:auto;min-height:420px}
}
@media (min-width:900px){
  .nav{display:flex}
  .phone{display:inline-flex}
  .hero__coord{display:block}
  .hero__lower{grid-template-columns:minmax(260px,.8fr) minmax(210px,.45fr) minmax(300px,.7fr)}
  .hero__actions{grid-template-columns:1fr}
  .hero__edge{display:flex}
  .section__head{grid-template-columns:.48fr 1.2fr .72fr;align-items:start}
  .section__head--wide{grid-template-columns:.48fr 1.92fr}
  .section__head .index{margin-top:12px}
  .service-line{grid-template-columns:90px minmax(260px,.8fr) minmax(300px,1fr) 32px;align-items:center;min-height:126px}
  .service-line p{grid-column:auto}
  .service-line__mark{position:static;justify-self:end}
  .route__title{grid-template-columns:.48fr 1.92fr;align-items:start}
  .route__title .index{margin-top:12px}
  .route__track{grid-template-columns:repeat(5,1fr);gap:0}
  .route__track::before{left:0;right:0;top:7px;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,var(--c-accent),var(--c-line-strong))}
  .route__track li{min-height:220px;padding:44px 26px 0 0}
  .route__node{left:0;top:0}
  .route__seal{grid-template-columns:1fr auto 1fr;align-items:center;text-align:center}
  .route__seal span:last-child{text-align:right}
  .projects__head{grid-template-columns:1fr auto}
  .live{justify-self:end}
  .scope-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust-console{grid-template-columns:.72fr 1.1fr .72fr;align-items:stretch}
  .price-stage__grid{grid-template-columns:.36fr 1.3fr .72fr;align-items:end}
  .price-stage__offers{justify-items:end}
  .price-stage__badge{justify-self:end}
  .guarantee__grid,.faq__grid{grid-template-columns:.8fr 1.2fr;gap:clamp(60px,8vw,130px)}
  .form-sample [data-form-fields]{grid-template-columns:repeat(12,minmax(0,1fr))}
  .form-sample .modal__sub{grid-column:1/13}
  .form-sample .input-shell{grid-column:span 4}
  .form-sample .input-shell:has(textarea){grid-column:span 8}
  .form-sample .input-shell[role="radiogroup"]{grid-column:span 4}
  .form-sample .checkbox{grid-column:1/8}
  .form-sample .btn{grid-column:9/13}
  .footer__grid{grid-template-columns:1.3fr .8fr .6fr auto}
  .mobile-actions{display:none}
}
@media (min-width:1220px){
  .hero h1{max-width:18ch}
  .service-line:hover{padding-inline:28px}
}
@media (max-width:619px){
  body{padding-bottom:76px}
  .topbar__in{min-height:68px}
  .brand img{width:36px;height:36px}
  .brand span{font-size:14px}
  .micro-cta{width:46px;padding:0;justify-content:center}
  .micro-cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hero{min-height:100svh;padding:92px 0 28px}
  .hero__content{gap:22px}
  .hero__lower{gap:18px}
  .hero__ring{left:74%;top:36%}
  .hero__ring--a{width:118vw}
  .hero__ring--b{width:82vw}
  .hero__ring--c{width:48vw}
  .hero__sweep{left:74%;top:36%;width:82vw}
  .hero h1{font-size:clamp(38px,11.4vw,54px);line-height:.94;letter-spacing:-.055em}
  .hero__lower>p{font-size:16px;line-height:1.45}
  .hero__console{display:none}
  .hero__proof{font-size:11px;line-height:1.45}
  .metric{min-height:132px}
  .board{margin-inline:-12px;border-radius:0}
  .board__row{min-height:84px;padding-inline:14px}
  .board__row strong{font-size:12px}
  .board__row small{font-size:9px}
  .price-stage__badge{justify-self:center}
  .document-stack{grid-template-columns:1fr}
  .document-card img{aspect-ratio:16/10}
}

/* ── Правки приёмки 21.09 (замер стендом theme:mobile) ───────────────────────
   Всё ниже — следствие ЗАМЕРА, а не вкуса: каждое правило снимает названное стендом
   нарушение, и после него прогон даёт ноль. */

@media (max-width: 380px) {
  /* Шапка на 320 px уезжала на 18 px: телефон и круглая кнопка не помещаются рядом с
     логотипом. Телефон на таком экране всё равно набирают из карточки контактов, а
     кнопка остаётся — она ведёт к форме. */
  .topbar__contact .phone { display: none; }
  /* Круглая кнопка + логотип всё ещё дают 4 px выноса: ужимаем её и снимаем запрет
     переноса у названия, чтобы шапка укладывалась в 320 px целиком. */
  /* 44 px — минимальная тап-цель; меньше делать нельзя даже ради узкого экрана.
     Вынос шапки на 320 снимается скрытым телефоном и сжатием названия, а не кнопкой. */
  .micro-cta { width: 44px; min-height: 44px; }
  .brand span { min-width: 0; overflow-wrap: anywhere; }
  .topbar__in { gap: 10px; }
  .topbar__contact { flex: 0 0 auto; min-width: 0; }
}

/* Слово «административные» (231 px) не влезало в колонку 229 px на ВСЕХ ширинах —
   перенос разрывал его посередине. Кегль подзаголовков карточек уменьшен ровно
   настолько, чтобы самое длинное слово помещалось; ниже этого не опускаем. */
/* Слово «административные» (231 px при кегле 24) не влезало в колонку 15ch = 229 px на
   ВСЕХ ширинах — перенос разрывал его посередине. Текст приходит из поля темы, то есть
   владелец вправе написать и длиннее: поэтому лечим не текст, а колонку и кегль. */
.scope-card h3 { font-size: clamp(19px, 3vw, 40px); max-width: 18ch; overflow-wrap: break-word; }

/* Контейнеры лежат в гридах, где у элемента min-width:auto: трек считается по самому
   длинному слову заголовка, и секция становится шире экрана (на 320 это давало 18 px
   прокрутки). min-width:0 разрывает круг — трек равен экрану, и перенос срабатывает.
   Правка была в приёмке 20.09; в этой версии макета её нет, поэтому возвращена. */
.shell, .hero__content, .hero__content > *, .hero__lower, .hero__lower > *, .section__head, .section__head > * { min-width: 0; }

/* Кегли заголовков подобраны так, чтобы САМОЕ ДЛИННОЕ слово помещалось в строку на
   320-414 px. Пока секции уезжали за экран (см. min-width выше), этого не было видно:
   трек раздувался под слово, и перенос «не требовался». Сначала лечится вынос, потом
   кегль — иначе второе прячется за первым.
   Замер: «Проектирование» 338 px при 48 px кегля и доступных 280 px. */
@media (max-width: 460px) {
  .hero h1 { font-size: clamp(30px, 8.6vw, 44px); }
  /* Целимся в ТЕ ЖЕ селекторы, что задают кегль в теме: голый `h2` их не перебивает —
     специфичность ниже, и правило молча не действует (поймано замером, а не чтением). */
  .section__head h2, .route__title h2, .projects__head h2, .request__head h2,
  .guarantee__title h2, .faq__title h2 { font-size: clamp(21px, 6.4vw, 40px); }
}

/* ── Форма: раскладка под УЗКУЮ карточку ─────────────────────────────────────
   Тема раскладывает поля по двенадцатой сетке (`span 4`), но карточка формы шириной
   ~420 px: колонка получается 140 px, и в неё не помещаются ни пара переключателей
   («Только проект» рвётся на «Тол/про»), ни кнопка, ни подпись «ТИП ОБЪЕКТА».
   Поля — по половине, всё длинное — во всю ширину. Замер после правки: перекрытий нет,
   срезанного текста нет. */
.form-sample .input-shell { grid-column: span 6; }
.form-sample .input-shell[role="radiogroup"],
.form-sample .input-shell:has(select),
.form-sample .input-shell:has(textarea),
.form-sample .checkbox,
.form-sample .modal__sub,
.form-sample .btn { grid-column: 1 / 13; }
.form-sample .btn { width: 100%; justify-self: stretch; white-space: normal; border-radius: 999px; }
.form-sample .radios { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.form-sample .radio { display: inline-flex; align-items: center; gap: 10px; width: auto; min-width: 0; white-space: normal; }
@media (max-width: 560px) {
  .form-sample .input-shell { grid-column: 1 / 13; }
}
/* Поля — элементы сетки, и у них min-width:auto: колонка не сжимается меньше самого
   длинного содержимого (подписи «ТИП ОБЪЕКТА*»), и форма вылезала за экран на 320.
   Тот же круг, что у секций выше, поэтому и лечится так же. */
.form-sample, .form-sample [data-form-fields], .form-sample [data-form-fields] > * { min-width: 0; }
.form-sample .input, .form-sample input, .form-sample select, .form-sample textarea { max-width: 100%; }

/* ── Строка услуги: нечитаемых кадров быть не должно ────────────────────────
   Замер на бою по кадрам: цвет текста менялся МГНОВЕННО, а заливка `::before` выезжала
   0.28 с — 40 мс: заливка 13%, 90 мс: 62%, 150 мс: 84%, и всё это время тёмный текст
   висел на тёмном фоне. При движении мыши по списку это мелькание «чёрным по тёмному»;
   владелец поймал его скриншотом дважды.
   Промежуточные кадры лечить подбором задержек бессмысленно: один цвет текста не может
   быть читаемым и на тёмном фоне, и на золотом одновременно. Поэтому заливка становится
   МГНОВЕННОЙ — вместе со сменой цвета. Эффект наведения остаётся, нечитаемого состояния
   не существует ни в одном кадре.
   Цвета дочерним задаются ЯВНО: у заголовка и описания свой цвет, и наследование от
   строки их не касается — иначе описание остаётся приглушённым на золотом фоне. */
.service-line, .service-line::before { transition: none; }
.service-line:hover h3,
.service-line:hover p,
.service-line:hover .service-line__code,
.service-line:hover .service-line__mark { color: var(--c-on-accent); }

/* ── Блок заявки: форма и карточка контактов в двух колонках ─────────────────
   Собрано по макету 21.09. Контакты берутся из настроек носителя, а не из разметки:
   тот же телефон и почта уходят в подвал и в микроразметку, и зашитые здесь значения
   разошлись бы с ними молча. Цвета — только токены: иначе автокоррекция контраста
   перестанет дотягиваться до этой карточки. */
.request__cols { display: grid; gap: clamp(18px, 2.2vw, 28px); align-items: stretch; }
/* Колонки начинаются от ОДНОЙ линии и тянутся на одну высоту. С `align-items:start`
   карточки висели на разных уровнях (замер: верх формы 12161, верх контактов 12073 —
   расхождение 88 px) и обрывались на разной высоте, потому что содержимого в них разное
   по объёму. Выравнивание по сетке, а не подбором отступов. */
.request__cols > * { margin: 0; align-self: stretch; }
.request__form { display: grid; }
.request__form .form-sample { max-width: none; height: 100%; }
.contact-card { display: flex; flex-direction: column; }
/* Плашка охвата прижимается к низу карточки: иначе при короткой колонке под ней
   остаётся пустое поле, а при длинной она болтается посередине. */
.contact-card__region { margin-top: auto; }
@media (min-width: 900px) { .request__cols { grid-template-columns: 1fr 1fr; } }

.contact-card {
  min-width: 0;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-bg-elev) 86%, transparent);
}
.contact-card__title { margin: 14px 0 6px; font-size: clamp(22px, 2.4vw, 34px); font-weight: 560; letter-spacing: -.02em; text-transform: uppercase; }
.contact-card__lead { margin: 0 0 22px; color: var(--c-ink-soft); }

.contact-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-card__list li { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Тап-цель ссылки — не меньше 44 px: сам текст даёт 23 px, и на телефоне в него надо
   попадать прицельно. Тянем ссылку на всю высоту строки, а не увеличиваем кегль. */
.contact-card__list a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-card__list a { font-size: clamp(15px, 1.3vw, 19px); overflow-wrap: anywhere; }
/* Круглая иконка: 44px — минимальная тап-цель, и она же задаёт ритм строк. */
.contact-card__ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--c-line-strong); color: var(--c-accent);
}
.contact-card__ico svg { width: 20px; height: 20px; }
.contact-card__ico--plain { width: 28px; height: 28px; border: 0; }
.contact-card__ico--plain svg { width: 16px; height: 16px; }

.contact-card__steps {
  list-style: none; margin: 26px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--c-line); display: grid; gap: 16px; counter-reset: шаг;
}
.contact-card__steps li { display: flex; align-items: center; gap: 14px; min-width: 0; }
.contact-card__num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--c-accent);
  color: var(--c-accent); font-family: var(--font-head); font-size: 12px;
  counter-increment: шаг;
}
/* Номер рисуется счётчиком: в разметке его нет, и при добавлении шага владельцем
   нумерация не съедет — иначе пришлось бы править шаблон ради четвёртой строки. */
.contact-card__num::before { content: counter(шаг, decimal-leading-zero); }

.contact-card__region {
  display: flex; align-items: center; gap: 10px; margin: 26px 0 0; padding-top: 22px;
  border-top: 1px solid var(--c-line);
  color: var(--c-muted); font-family: var(--font-head); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}

}