/* Design tokens of the new site, approved by the owner 2026-10-02.
   Source of truth for templates; see docs/specs/2026-10-02-second-site-structure-design.md, section 12.4. */
:root {
  /* type */
  --font-text: 'IBM Plex Sans', system-ui, sans-serif;          /* text and headings */
  --font-figure: 'IBM Plex Sans Condensed', system-ui, sans-serif; /* large figures */
  /* colour */
  --ground: #F2F3F5;
  --surface: #FFFFFF;
  --surface-soft: #FBFBFC;
  --ink: #111A24;
  --ink-body: #22303D;
  --ink-soft: #33404D;
  --muted: #4B5563;
  --faint: #6B7684;
  --navy: #12233A;          /* header blocks, panels, form */
  --navy-deep: #0B1726;     /* footer */
  --navy-input: #0D1A2C;
  --mid-blue: #3D6E9E;      /* second segment of money bars */
  --accent: #C2611D;        /* CTA, section labels */
  --accent-figure: #A4500F; /* emphasised figures on light ground */
  --accent-light: #E7B184;  /* figures and labels on navy */
  --link: #1F5AA6;
  --link-hover: #143F78;
  --line: #D5DBE2;
  --line-soft: #E3E7EC;
  --line-input: #C9D1DA;
  --chip: #EDF1F5;
  --callout-bg: #FFF4EA;
  --callout-line: #EDC9A8;
  --on-navy: #DDE4EC;
  --on-navy-muted: #AEBBC9;
  /* shape */
  --radius-s: 4px;          /* buttons, chips, inputs */
  --radius-m: 6px;          /* cards, panels */
  --max-width: 1180px;
  --gutter: 24px;
  /* photo overlay */
  --overlay-hero: linear-gradient(90deg, rgba(9, 18, 31, 0.92) 0%, rgba(9, 18, 31, 0.78) 45%, rgba(9, 18, 31, 0.35) 100%);
}

/* IBM Plex Sans and IBM Plex Sans Condensed (SIL Open Font License 1.1), self-hosted: the audit of 2026-10-08
   moved them off fonts.googleapis.com (a render-blocking request to Google). Subsets: cyrillic and latin. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* components — values come from design/tokens.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-text);line-height:1.5}
a{color:var(--link)}a:hover{color:var(--link-hover)}
img{display:block;max-width:100%;height:auto}
/* the WebP <picture> wrapper (P2) takes no box: the img stays the flex/grid/positioned item the rules below size */
picture{display:contents}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}
.fig{font-family:var(--font-figure);font-weight:700;line-height:1}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.muted{color:var(--muted)}

/* header */
.hdr{background:var(--surface);border-bottom:1px solid var(--line)}
.hdr__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.brand__mark{width:28px;height:28px;border-radius:var(--radius-s);background:var(--navy);display:flex;align-items:center;justify-content:center}
.brand__mark span{width:10px;height:10px;background:var(--accent)}
.hdr__phone{white-space:nowrap;font-weight:600;color:var(--ink);text-decoration:none}
/* the menu: in place of .nav below the width where the whole row fits on one line (developer TZ COMMON-07) */
.menu{display:none;position:relative;margin-left:auto;flex-shrink:0}
.menu summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line-input);border-radius:var(--radius-s);font-weight:600;font-size:15px;cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--navy)}
.menu__icon{stroke:currentColor;stroke-width:2;fill:none}
.menu__list{position:absolute;right:0;top:calc(100% + 6px);z-index:10;min-width:220px;display:flex;flex-direction:column;padding:6px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m)}
.menu__list a,.menu__list span{display:flex;align-items:center;min-height:44px;padding:0 16px;color:var(--ink);text-decoration:none;font-size:16px}
.menu__list span{color:var(--muted)}.menu__list [aria-current]{font-weight:600}
.city-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-s);border:1px solid var(--line-input);font-size:14px}
.nav{display:flex;gap:16px;margin-left:auto;font-size:15px}
.hdr__cta{padding:10px 14px}
.nav a{color:var(--ink);text-decoration:none}.nav span{color:var(--muted)}
.nav [aria-current]{text-decoration:underline;text-underline-offset:6px;font-weight:600}
.btn{display:inline-block;padding:12px 18px;border-radius:var(--radius-s);font-weight:600;text-decoration:none;font-size:15px;border:1px solid transparent;text-align:center}
.btn--navy{background:var(--navy);color:#fff}.btn--accent{background:var(--accent);color:#fff}
.btn--ghost{border-color:var(--on-navy-muted);color:#fff;font-weight:500}
.btn--line{border-color:var(--navy);color:var(--navy)}
.btn--navy:hover,.btn--accent:hover,.btn--ghost:hover{color:#fff}.btn--line:hover{color:var(--navy)}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:var(--navy)}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;background:var(--overlay-hero)}
.hero__inner{position:relative;padding-top:22px;padding-bottom:40px;display:flex;flex-direction:column;gap:28px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end}
.hero__text{display:flex;flex-direction:column;gap:18px;padding-top:40px}
.hero h1{margin:0;font-size:44px;line-height:1.12;font-weight:700}
.hero__lead{margin:0;font-size:18px;color:var(--on-navy);max-width:560px}
.crumbs{font-size:13px;display:flex;gap:8px;flex-wrap:wrap}
.hero .crumbs,.hero .crumbs a{color:#C5D0DC}
.hero .crumbs span:last-child{color:#fff}
.hero .credit{font-size:12px;color:var(--on-navy-muted)}
/* the city's coat of arms beside its name, small: the official image, only scaled (tools/import_heraldry.py) */
.hero__city{display:flex;align-items:center;gap:10px}
.city-coat{height:28px;width:auto;flex:none}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* total card */
.total{background:var(--surface);color:var(--ink);border-radius:var(--radius-m);padding:24px;display:flex;flex-direction:column;gap:14px}
.total__fig{font-size:50px}
.bar{display:flex;height:8px;border-radius:2px;overflow:hidden;background:var(--line-soft)}
.bar span{display:block}
.legend{display:flex;flex-direction:column;gap:9px;font-size:15px}
.legend div{display:flex;gap:10px;align-items:center}.legend div span:nth-child(2){flex-grow:1}
.legend i{width:10px;height:10px;flex-shrink:0}
.total__note{border-top:1px solid var(--line-soft);padding-top:12px;font-size:14px;color:var(--muted)}
.total__out{font-size:14px;color:var(--ink-soft)}
.c-fed{background:var(--navy)}.c-reg{background:var(--mid-blue)}.c-city{background:var(--accent)}

/* path bar and contents */
.path{background:var(--surface);border-bottom:1px solid var(--line)}
.path ol{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.path li>a,.path li>span{display:flex;flex-direction:column;gap:4px;padding:18px 16px;text-decoration:none;color:var(--ink);border-left:1px solid var(--line-soft);height:100%}
.path li:last-child>*{border-right:1px solid var(--line-soft)}
.path__n{font-size:13px;color:var(--faint);font-weight:600}
.progress{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;list-style:none;margin:0;padding:0}
.progress span.seg{display:block;height:6px;border-radius:3px;background:#33557E}
.progress .is-done span.seg{background:#8FB0D3}.progress .is-current span.seg{background:var(--accent)}
.toc{position:sticky;top:0;z-index:5;background:rgba(242,243,245,.97);border-bottom:1px solid var(--line)}
.toc .wrap{padding-top:9px;padding-bottom:9px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:14px}
.chip{padding:6px 10px;border-radius:var(--radius-s);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px}
.chip--strong{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip--soft{background:var(--chip);border:0}
.chip--off{color:var(--muted)}  /* a city whose mini-site this build does not write: plain text */

/* sections and cards */
.main{display:flex;flex-direction:column;gap:56px;padding-top:8px;padding-bottom:40px}
.sec{display:flex;flex-direction:column;gap:20px}
h2.blk-h,.sec h2.blk-h{margin:0 0 10px;font-size:21px;line-height:1.3}
.prose{max-width:780px}.prose h3{margin:0 0 10px;font-size:21px;line-height:1.3}.prose p{margin:0 0 12px;font-size:17px;line-height:1.6;color:var(--ink-body)}.prose p:last-child{margin-bottom:0}
.sec__head{display:flex;flex-direction:column;gap:8px;max-width:780px}
.sec h2{margin:0;font-size:32px;line-height:1.2;font-weight:700}
.sec__lead{margin:0;font-size:17px;color:var(--ink-soft)}
.grid{display:grid;gap:16px}.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px;display:flex;flex-direction:column;gap:8px;color:var(--ink);text-decoration:none}
.card--media{padding:0;overflow:hidden}.card--media .card__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex-grow:1}
.card--top{border-top:4px solid var(--navy)}
.card__label{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.card__fig{font-size:32px}.card__fig--accent{color:var(--accent-figure)}
.card__text{font-size:14px;color:var(--ink-soft)}
.card__act{font-size:12.5px;color:var(--muted);margin-top:auto;border-top:1px solid var(--line-soft);padding-top:8px}
.media{width:100%;height:150px;object-fit:cover}
.media--icon{height:150px;background:var(--navy);display:flex;align-items:center;justify-content:center}
.credit{font-size:11.5px;color:var(--faint)}
.estimate{background:var(--navy);color:#fff;border-radius:var(--radius-m);padding:22px;display:flex;flex-direction:column;gap:6px}
.callout{background:var(--callout-bg);border:1px solid var(--callout-line);border-left:4px solid var(--accent);border-radius:var(--radius-m);padding:18px;display:flex;flex-direction:column;gap:6px}
.docs{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.scans{display:flex;gap:10px}.scans img{width:50%;height:230px;object-fit:cover;object-position:top;border:1px solid var(--line-input);border-radius:var(--radius-s);background:#fff}
.scans:has(>:only-child) img{width:min(100%,420px);height:300px}  /* one act alone: wide enough to read its head */
.addr{font-family:var(--font-figure);font-weight:700;font-size:21px}
.photo-strip{width:100%;height:220px;object-fit:cover;border-radius:var(--radius-m)}
.role{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
.role__panel{background:var(--navy);border-radius:var(--radius-m);height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--on-navy-muted);font-size:12.5px;font-weight:600;letter-spacing:.08em}
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:16px}
.ticks li{display:flex;gap:10px}
.tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m)}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.tbl th{background:var(--chip);text-align:left;padding:12px 16px}.tbl td{padding:12px 16px;border-top:1px solid var(--line-soft)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:16px 18px}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:17px}.faq summary::-webkit-details-marker{display:none}
.faq p{margin:10px 0 0;font-size:15px;color:var(--ink-soft)}

/* lead form and footer */
.lead-form{background:var(--navy);color:#fff;border-radius:var(--radius-m);padding:30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.lead-form h2{margin:0;font-size:28px}.lead-form p{margin:0;color:var(--on-navy)}
.lead-form .lead-form__note{font-size:14px;color:var(--on-navy-muted)}
.lead-form__text{display:flex;flex-direction:column;gap:12px}
/* the consent: the box and one sentence with its links beside it, wrapping as text (developer TZ COMMON-04) */
.lead-form .lead-form__consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:13px}
.lead-form__consent input{width:18px;height:18px;margin:1px 0 0}
.lead-form form{display:flex;flex-direction:column;gap:10px}
.lead-form label{font-size:14px;color:var(--on-navy)}
.lead-form input[type=text],.lead-form input[type=tel],.lead-form select{padding:11px 12px;border-radius:var(--radius-s);border:1px solid #4E6680;background:var(--navy-input);color:#fff;font:inherit}
.lead-form button{padding:13px;border-radius:var(--radius-s);border:0;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.lead-form button:disabled{opacity:.55;cursor:not-allowed}
.lead-form [aria-invalid=true]{border-color:#E8775A}
.lead-form a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lead-form .lead-form__hint{font-size:12px;color:var(--on-navy-muted)}
.lead-form .lead-form__ok{font-size:17px;font-weight:600;color:#fff}
.lead-form__topic{margin:0;font-size:14px;color:var(--on-navy);background:#1B3150;border-radius:var(--radius-s);padding:8px 10px}
.lead-form__topic[hidden]{display:none}
.lead-form__topic b{color:var(--accent-light)}
.lead-form .lead-form__topic-x{padding:0;border:0;background:none;color:var(--on-navy-muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.lead-form .lead-form__req{font-size:13px;color:var(--on-navy-muted)}
.lead-form__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ftr{background:var(--navy-deep);color:var(--on-navy-muted);padding:32px 0;font-size:14px}
.ftr__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ftr__col{display:flex;flex-direction:column;gap:8px}.ftr__col b{color:#fff}.ftr a{color:var(--on-navy-muted)}

/* article */
.art{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.art__body{display:flex;flex-direction:column;gap:22px;min-width:0}
.art__body p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-body)}
.art__body h2{margin:0;font-size:28px;line-height:1.25}
.side{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
.bars{display:flex;flex-direction:column;gap:10px;font-size:14px}
.bars div{display:grid;grid-template-columns:170px minmax(0,1fr) 120px;gap:12px;align-items:center}
.bars i{display:block;height:14px;border-radius:2px;background:var(--accent-light)}.bars i.is-extra{background:#8FB0D3}
.sources{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:14px}

/* city home */
.path .muted{font-size:14px}
.sec--first{padding-top:36px}
.sec__top{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:16px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start}
.card__title{font-size:17px}
.card__fig--s{font-size:22px}
.card__note{font-size:14px;color:var(--muted)}
.card--top .card__label{color:var(--navy)}
.estimate .card__label{color:var(--on-navy-muted)}.estimate .card__fig{font-size:36px}.estimate .card__text{color:var(--on-navy)}
.callout b,.callout p{font-size:15px}.callout p{margin:0;color:var(--ink-soft)}
.cta__btn{align-self:flex-start;margin-top:6px}
.figure{margin:0;display:flex;flex-direction:column;gap:8px}.figure figcaption{font-size:13px;color:var(--muted)}
.doc-link{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center}
.doc-link img{width:200px;height:120px;object-fit:cover}

/* city vacancies */
.hero--solid .hero__overlay{background:linear-gradient(180deg,color-mix(in srgb,var(--navy-deep) 88%,transparent) 0%,color-mix(in srgb,var(--navy-deep) 80%,transparent) 60%,color-mix(in srgb,var(--navy-deep) 92%,transparent) 100%)}
.hero__head{display:flex;flex-direction:column;gap:14px;max-width:860px}
.hero__head .hero__lead{max-width:none}
.progress a,.progress li>span{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--on-navy-muted);text-decoration:none}
.progress .is-current>span{color:var(--surface);font-weight:600}
.keyfig{background:color-mix(in srgb,var(--surface) 8%,transparent);border:1px solid color-mix(in srgb,var(--surface) 18%,transparent);border-radius:var(--radius-m);padding:18px;display:flex;flex-direction:column;gap:6px}
.keyfig .fig{font-size:30px}.keyfig .fig--light{color:var(--accent-light)}
.keyfig__text{font-size:14px;line-height:1.4;color:var(--on-navy)}
.chip--callout{background:var(--callout-bg);border-color:var(--callout-line)}
.role__body{display:flex;flex-direction:column;gap:14px;min-width:0}
.role__head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.role h2{margin:0;font-size:32px;line-height:1.2}
.role__panel span{text-transform:uppercase}
.ticks svg{flex-shrink:0;margin-top:2px;stroke:var(--link)}
.money{flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px}
.money__main{display:flex;flex-direction:column;gap:4px;flex-grow:1}
.money .card__fig{font-size:28px}
.money__cond{font-size:12.5px;color:var(--muted)}
.btn--blue,.btn--blue:hover{background:var(--link);color:var(--surface)}
.card--tier{border:0;border-top:5px solid var(--accent);gap:4px}.card--tier .card__fig{font-size:26px}
.role__doc{display:flex;gap:16px;align-items:flex-start}
.role__doc img{width:96px;height:132px;object-fit:cover;object-position:top;border:1px solid var(--line-input);border-radius:var(--radius-s);background:var(--surface);flex-shrink:0}
.role__doc p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.card__label--link{color:var(--link)}
.sec__note{margin:0;font-size:14px;color:var(--muted)}
.tbl td:first-child{font-weight:600}.tbl .is-accent{color:var(--accent-figure);font-weight:700}
.tbl__act{color:var(--muted);font-size:13px}
.steps{list-style:none;margin:0;padding:0}.steps .card{padding:20px}
.steps__n{font-size:26px;color:var(--accent)}
.sec>.btn{align-self:flex-start}
/* step cards of the city home: one per step whose page is built, as many columns as there are cards */
.stepcards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stepcard{border-top:4px solid var(--navy)}
.stepcard .arrow{margin-top:auto;align-self:flex-end;font-size:20px;line-height:1}

/* site home */
.hero--home .hero__inner{padding-top:48px;padding-bottom:52px}
.hero--home .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
.hero--home .hero__text{padding-top:0}
.hero__facts{display:flex;flex-direction:column;gap:10px;font-size:16px}
.hero__facts div{display:flex;gap:12px;align-items:baseline}
.hero__facts .fig{color:var(--accent-light);min-width:112px}
.acts{position:relative;height:360px}
.acts img{position:absolute;width:46%;height:300px;object-fit:cover;object-position:top;border-radius:var(--radius-s);background:var(--surface);box-shadow:0 10px 24px color-mix(in srgb,var(--navy-deep) 45%,transparent)}
.acts>:nth-child(1),.acts>:nth-child(1)>img{left:0;top:34px;transform:rotate(-4deg)}
.acts>:nth-child(2),.acts>:nth-child(2)>img{left:27%;top:0}
.acts>:nth-child(3),.acts>:nth-child(3)>img{right:0;top:40px;transform:rotate(4deg)}
.hero .figure figcaption{color:var(--on-navy-muted)}
.summary{background:var(--surface);border-bottom:1px solid var(--line)}
.summary .wrap{padding-top:22px;padding-bottom:22px}
.summary__item{display:flex;flex-direction:column;gap:4px;padding-left:14px;border-left:3px solid var(--navy)}
.summary__item--reg{border-left-color:var(--mid-blue)}
.summary__item--month{border-left-color:var(--accent)}
.summary__item--when{border-left-color:color-mix(in srgb,var(--mid-blue) 58%,var(--surface))}
.summary .fig{font-size:28px}
.summary__note{font-size:13px;color:var(--muted)}
.nowrap{white-space:nowrap}
@media (min-width:961px){.summary__item--reg .fig{font-size:24px}}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden}
.calc__in{padding:24px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--line-soft)}
.calc__in label{font-size:14px;font-weight:600;color:var(--muted)}
.calc select{padding:12px;border-radius:var(--radius-s);border:1px solid var(--line-input);background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.calc__hint{font-size:13px;color:var(--muted)}
.calc__res{padding:24px;background:var(--surface-soft)}
.calc__out,.calc__empty{display:flex;flex-direction:column;gap:12px}
.calc__out[hidden],.calc__out:not([hidden])~.calc__empty{display:none}
.calc__line{font-size:14px;color:var(--muted)}
.calc__total{font-size:46px}
.calc__term{font-size:14px;color:var(--ink-soft)}
.calc__spec{margin-top:4px;background:var(--navy);color:var(--on-navy);border-radius:var(--radius-m);padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;align-items:center}
.calc__spec-h{grid-column:1;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-light)}
.calc__spec-t{grid-column:1;font-size:14px;color:var(--on-navy)}
.calc__spec-btn{grid-column:2;grid-row:1/3;background:var(--accent);color:#fff;white-space:nowrap}
.calc__spec--none{background:var(--surface);border:1px dashed var(--line-input);color:var(--ink-soft)}
.calc__spec--none .calc__spec-h{color:var(--ink)}
.calc__spec--none .calc__spec-t{color:var(--ink-soft)}
.calc__spec--none .calc__spec-btn{background:transparent;border-color:var(--navy);color:var(--navy)}
@media (max-width:600px){.calc__spec{grid-template-columns:minmax(0,1fr)}.calc__spec-btn{grid-column:1;grid-row:auto;margin-top:8px}}
.spec-strip{background:var(--navy);color:var(--on-navy);border-radius:var(--radius-m);border-bottom:3px solid var(--accent);padding:14px 18px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.spec-strip div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 320px}
.spec-strip b{color:#fff}.spec-strip span{font-size:14px;color:var(--on-navy-muted)}
.tbl__spec{font-size:13.5px;min-width:180px}
.tag{display:inline-block;padding:1px 7px;border-radius:var(--radius-s);background:var(--callout-bg);border:1px solid var(--callout-line);color:var(--accent-figure);font-weight:600;font-size:12.5px}
.total__spec{font-size:14px;color:var(--ink-soft);border-top:1px solid var(--line-soft);padding-top:10px}
.calc__act{font-size:13px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:10px}
.path--box{border:1px solid var(--line);border-radius:var(--radius-m)}
.path--box li:first-child>*{border-left:0}
.path--box li:last-child>*{border-right:0}
.path--box .path__n{color:var(--accent);font-weight:700}
.grid--6{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);padding:12px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.tbl .fig{font-size:18px}
.card--link{flex-direction:row;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;font-weight:600}
.card--link__t{display:flex;flex-direction:column;gap:2px}
.card--link .card__note{font-weight:400}
.arrow{color:var(--accent)}
.more{align-self:flex-start;font-weight:600}

/* main-domain article */
.art-page{display:flex;flex-direction:column;gap:22px;padding-top:22px;padding-bottom:48px}
.art-page>.crumbs,.art-page>.crumbs a{color:var(--muted)}
.art-page>.crumbs span:last-child{color:var(--ink)}
.art__head{display:flex;flex-direction:column;gap:14px}
.art__head h1{margin:0;font-size:40px;line-height:1.15}
.art__body .art__lead{font-size:19px;line-height:1.55;color:var(--ink-soft)}
.art__meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}
.art__brief{padding:20px 22px;gap:12px}
.art__brief-h{font-size:15px;letter-spacing:.04em;color:var(--navy);text-transform:uppercase}
.art__fact{display:flex;flex-direction:column;gap:2px}
.art__fact .fig{font-size:26px}
.chart{margin:0;background:var(--navy);color:var(--surface);border-radius:var(--radius-m);padding:24px;display:flex;flex-direction:column;gap:14px}
.chart>b{font-size:17px}
.chart figcaption{font-size:13px;color:var(--on-navy-muted)}
.bars b{text-align:right}
.art__body .sec{gap:14px}
.art__body .h--s{font-size:20px}
.art__sources{border-top:1px solid var(--line);padding-top:18px}
.sources{color:var(--ink-soft)}
sup.fn{font-size:.68em;line-height:0;margin-left:1px}.fn a{text-decoration:none}
.act-ex{flex-direction:row;align-items:center;gap:16px;padding:12px}
.act-ex img{width:110px;height:150px;object-fit:cover;object-position:top;border:1px solid var(--line-input);border-radius:var(--radius-s);flex-shrink:0}
.art__body .act-ex p{font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.art__body .faq p{margin-top:10px;font-size:15px;line-height:1.55}
.faq{display:flex;flex-direction:column;gap:10px}
.card--row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0;padding:0;overflow:hidden}
.card--row img{width:120px;height:100%;min-height:84px;object-fit:cover}
.card--row .card__body{padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.side__toc{gap:8px;font-size:14.5px}
/* «Ваш случай»: a reader's situation, its short answer, the way to the section (templates/pages/page.html) */
.cases{display:flex;flex-direction:column;gap:12px}
.case{gap:6px;font-size:15px}
.case b{color:var(--navy)}
.case .more{margin-top:auto;font-size:14px}
/* the folded contents of a phone (blocks/main.html toc_m); the side column shows them on a wide screen */
.toc-m{display:none;padding:0}
.toc-m summary{padding:12px 16px;font-weight:600;cursor:pointer}
.toc-m nav{display:flex;flex-direction:column;gap:10px;padding:0 16px 14px;font-size:15px}
.toc-m a{text-decoration:none}
.side__toc a{text-decoration:none}
.side__max{background:var(--navy);color:var(--on-navy);border-radius:var(--radius-m);padding:18px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.side__max .fig{font-size:30px;color:var(--surface)}
.side__label{color:var(--on-navy-muted)}
.side__max .btn{margin-top:6px}
@media (max-width:960px){
  .hero--home .hero__grid,.calc{grid-template-columns:minmax(0,1fr)}
  .calc__in{border-right:0;border-bottom:1px solid var(--line-soft)}
  .grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acts{height:280px}.acts img{height:230px}
  .art__head h1{font-size:30px}
  .bars div{grid-template-columns:96px minmax(0,1fr) 96px}
}

/* «Спецконтракт» under the header (templates/blocks/spec_banner.html, owner 2026-10-15) */
.spec{background:var(--navy);color:var(--on-navy);border-bottom:3px solid var(--accent)}
.spec[hidden]{display:none}
.spec__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:36px;align-items:start;padding-top:26px;padding-bottom:28px;padding-right:calc(var(--gutter) + 36px)}  /* the close button sits clear of the card */
.spec__main{display:flex;flex-direction:column;gap:16px}
.spec__eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--accent-light);border-radius:var(--radius-s);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-light)}
.spec__dot{width:8px;height:8px;border-radius:50%;background:var(--accent-light)}
.spec__title{margin:0;font-size:32px;line-height:1.15;color:#fff}
.spec__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #2E4560}
.spec__fact{padding:14px 16px 0;display:flex;flex-direction:column;gap:6px;border-left:1px solid #2E4560}
.spec__fact:first-child{padding-left:0;border-left:0}
.spec__fig{font-family:var(--font-figure);font-weight:700;font-size:28px;line-height:1;color:var(--accent-light)}
.spec__note{font-size:13px;color:var(--on-navy-muted)}
.spec__short{display:none}
.spec__card{background:var(--surface);color:var(--ink);border-radius:var(--radius-m);padding:22px;display:flex;flex-direction:column;gap:12px}
.spec__card-h{font-size:19px;line-height:1.3}
.spec__card p{margin:0;font-size:15px;color:var(--ink-soft)}
.spec__btn{display:block;padding:14px 16px;font-size:16px}
.spec__after--wide{border-top:1px solid var(--line-soft);padding-top:10px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.spec__after--wide b{color:var(--ink)}
.spec__after--fold{display:none}
.spec__close{position:absolute;top:12px;right:calc(var(--gutter) - 14px);width:40px;height:40px;border:0;background:transparent;color:var(--on-navy-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.spec__close svg{stroke:currentColor;stroke-width:1.8;fill:none}
.spec__close:hover{color:#fff}
@media (max-width:960px){
  .spec__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .spec__facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .spec__fact:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:600px){
  .spec__grid{padding-top:18px;padding-bottom:20px;padding-right:var(--gutter);gap:14px}
  .spec__title{font-size:23px;line-height:1.2;padding-right:28px}
  .spec__long{display:none}.spec__short{display:inline}
  .spec__eyebrow{font-size:12px}
  .spec__facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spec__fact{padding:10px 8px 0}
  .spec__fact:nth-child(3){padding-left:8px;border-left:1px solid #2E4560}
  .spec__fact--wide{display:none}
  .spec__fig{font-size:21px}
  .spec__note{font-size:12px;line-height:1.35}
  /* the card dissolves: its button full width on navy, «после года» folded */
  .spec__card{background:transparent;color:var(--on-navy);padding:0;gap:12px}
  .spec__card-h,.spec__card>p,.spec__after--wide{display:none}
  .spec__after--fold{display:block;border-top:1px solid #2E4560;padding-top:8px}
  .spec__after--fold summary{cursor:pointer;font-size:14px;font-weight:600;min-height:32px;display:flex;align-items:center}
  .spec__after--fold p{margin:6px 0 0;font-size:13px;color:var(--on-navy-muted)}
  .spec__close{top:8px;right:4px}
}

/* the header row: brand, nav, phone and button fit one line from 1180px (main 1120px of 1132); narrower, the nav
   folds into the menu before anything wraps, then the phone moves into the menu too */
@media (max-width:1179px){.nav{display:none}.menu{display:block}}
@media (max-width:800px){.hdr__phone{display:none}}

/* phones and tablets */
@media (max-width:960px){
  .grid--3,.hero__grid,.docs,.role,.art{grid-template-columns:minmax(0,1fr)}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path ol{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .toc-m{display:block}.side__toc{display:none}
  /* a city page's sticky contents stay one line, scrolled sideways inside, so they never cover the text (GEO-03) */
  .toc .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .toc .wrap::-webkit-scrollbar{display:none}
  .toc .chip--strong{order:-1}.toc .muted{display:none}  /* «Заявка» first: the row's end is off screen */
  html:has(.toc){scroll-padding-top:64px}
}
@media (min-width:961px){html:has(.toc){scroll-padding-top:104px}}
@media (max-width:600px){
  .grid--2,.grid--4,.lead-form,.ftr__grid{grid-template-columns:minmax(0,1fr)}
  .doc-link{grid-template-columns:minmax(0,1fr)}
  .doc-link img{width:100%;height:160px;object-fit:cover}
  .nav,.hdr__cta,.hdr__phone{display:none}
  .menu{display:block}
  .hdr__row{flex-wrap:nowrap;gap:12px}
  .brand{min-width:0}
  .hero h1{font-size:32px}
  .progress__label{display:none}
}

/* the close of a city page: editor, dates, then its sources (blocks/city_sources.html) */
/* sources: folded, no outside links (owner 2026-10-15) — blocks/main.html sources_list, blocks/city_sources.html */
.sources-fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.sources-fold>summary::-webkit-details-marker{display:none}
.sources-fold>summary::after,.city-src__all>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);margin-left:4px}
.sources-fold[open]>summary::after,.city-src__all[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.sources-fold>summary h2{margin:0}
.city-src{margin:10px 0 0;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
.city-src__basis{margin:0}
.city-src__basis b{color:var(--ink)}
.city-src__all>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;color:var(--link)}
.city-src__all>summary::-webkit-details-marker{display:none}
.city-src__all .sources{margin:8px 0 0}
.city-meta{font-size:13.5px;margin:32px 0 0;border-top:1px solid var(--line);padding-top:12px}
.role-status{margin:0;font-size:14px;color:var(--on-navy-muted);max-width:640px}