/* Innovative Centre's landing from their own picture (INW (d)), set by D's patterns
   (engine ops/engineer-d/proposals/2026-10-25-innovative-landing.md). A proposal: never shipped by DEPLOY.md's line. */

/* Manrope, self-hosted (SIL Open Font License 1.1, fonts/OFL.txt): one variable file per script, 400–800. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/manrope-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/manrope-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; }
/* Arial sized to Manrope's width and line box, so nothing moves when Manrope swaps in (measured from the woff2's own metrics). */
@font-face { font-family: 'Manrope Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 101.04%; ascent-override: 105.5%; descent-override: 29.69%; line-gap-override: 0%; }
:root {
  --brand: #0056b3;
  --brand-deep: #0b2a5b;
  --ink: #0f1d33;
  --muted: #5b6678;
  --line: #e3e8f0;
  --tint: #f3f6fb;
  --radius: 14px;
  --wrap: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Manrope', 'Manrope Fallback', sans-serif; color: var(--ink); font-size: 17px; line-height: 1.55; background: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
section { padding: 104px 0; }
.tint { background: var(--tint); }

/* buttons: one action colour */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px; border-radius: 10px;
  font: 700 15px/1 'Manrope', 'Manrope Fallback', sans-serif; text-decoration: none; cursor: pointer; border: 2px solid var(--brand); transition: background .15s, color .15s; }
.btn-solid { background: var(--brand); color: #fff; }
.btn-solid:hover { background: #004494; border-color: #004494; }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover { background: rgba(0, 86, 179, .06); }
.btn-light { background: #fff; color: var(--brand-deep); border-color: #fff; }

/* section head */
.head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 12px; }
h2 { font-size: 40px; line-height: 1.15; margin: 0 0 14px; letter-spacing: -.01em; }
.head p { color: var(--muted); margin: 0; }
.more { display: block; text-align: center; margin-top: 32px; color: var(--brand); font-weight: 700; text-decoration: none; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 32px; height: 72px; }
.bar img { height: 46px; width: auto; }
.bar .links { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.bar nav { display: flex; gap: 28px; }
.bar .menu { display: none; }
.bar .call { display: none; }
.bar nav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink); }
.bar nav a:hover { color: var(--brand); }
.bar .login { font-weight: 600; font-size: 15px; color: var(--muted); text-decoration: none; }
/* the number before «Вход» on a laptop and wider (D's 10-30 08:3x (5)); below that the phone's call icon */
.bar .tel { font-weight: 700; font-size: 15px; color: var(--brand); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1120px) { .bar .tel { display: none; } }

/* 1 hero */
.hero { padding: 0; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; min-height: 600px; }
.hero .kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.hero h1 { font-size: 56px; line-height: 1.06; margin: 0 0 20px; letter-spacing: -.02em; }
.hero .lead { font-size: 19px; color: var(--muted); margin: 0 0 32px; max-width: 480px; }
.hero .calls { display: flex; flex-wrap: wrap; gap: 12px; }
/* round 5 (1): the result and the credential each a row of its own, not one «·» line */
.hero .facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; font-size: 15px; color: var(--muted); }
.hero .facts b { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--brand-deep); letter-spacing: -.01em; }
/* round 7 (2): the figure once per screen: from a tablet's width up the band below says it in view. Round 8 (1): on the phone too,
   the band now standing right under the calls */
.hero .facts { display: none; }
.hero .where { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
/* round 6 (6): what follows the tap, one line under the main call; hidden while the centre has not said it */
.hero .next { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.hero .next:empty { display: none; }
.hero .where a { color: inherit; }
.hero .proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 36px; font-size: 14px; font-weight: 600; color: var(--muted); }
/* round 5 (6): each a chip that looks pressable (an outline), not text underlined like a sentence's link */
.hero .proof a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; white-space: nowrap; }
.hero .proof a:hover { color: var(--brand); border-color: var(--brand); }
/* round 8 (3): each pill a real link to its programme's tile, so it looks pressed by the keyboard as by the mouse */
.hero .proof a:focus-visible { color: var(--brand); border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px; }
.hero .photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.hero .photo img { width: 100%; height: 100%; object-fit: cover; }

/* 2 the visit (D's 10-30 08:3x (3)): a slim strip on its own tint until a photo is in the frame; then the wide frame, its date line
   and the whole text, the heading balanced */
/* round 5 (2): no photo yet, an editorial block in the page's own spacing (the eyebrow and its date, the heading, one line, the
   link), on the page's white under a hairline, not an announcement bar */
.visit { padding: 104px 0 0; }
/* round 6 (3): the news after the visit its own section: its full spacing above it, the visit's block closed by its hairline */
.visit + .news { padding-top: 104px; }
.visit .wrap > .text { border-top: 1px solid var(--line); padding-top: 40px; text-align: center; }
/* round 6 (3): centred like every section head and its filled state, the hairline the column's width, the eyebrow grey (the
   heads' `.head p` greys theirs; this one stood blue) */
.visit .wrap > .text > * { max-width: 720px; margin-inline: auto; }
.visit .eyebrow { color: var(--muted); }
.visit .frame { display: none; margin: 0; }
.visit .eyebrow { margin: 0 0 12px; }
.visit .when:not(:empty)::before { content: ' · '; }
.visit h2 { margin: 0 0 8px; text-wrap: balance; }
.visit .sub { margin: 0; font-size: 19px; color: var(--muted); }
.visit .body { display: none; }
.visit .link { display: inline-block; margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--brand); text-decoration: none; }
.visit:not(:has(.frame img)) .wrap > .text { border-bottom: 1px solid var(--line); padding-bottom: 40px; }
/* round 7 (4): with no photo yet a compact block, smaller than a section (~380 px between its hairlines at 1440): the eyebrow, the
   heading a size down, the one line and its link on one line, tighter padding; the full section returns with the photo */
.visit:not(:has(.frame img)) { padding-top: 72px; }
.visit:not(:has(.frame img)) .wrap > .text { padding-block: 28px; }
.visit:not(:has(.frame img)) h2 { font-size: 26px; line-height: 1.25; margin-bottom: 6px; }
.visit:not(:has(.frame img)) .sub { font-size: 16px; display: inline; }
.visit:not(:has(.frame img)) .link { margin: 0 0 0 10px; display: inline; }
/* round 8 (6): the same space below its hairlines as above them (72, was 72 / 104 to the news' eyebrow at 1440) */
.visit:not(:has(.frame img)) + .news { padding-top: 72px; }
/* the news after the filled visit keeps its full section spacing (round 6 (3)) */
.visit:has(.frame img) { padding: 80px 0; }
.visit:has(.frame img) .wrap { max-width: 1100px; padding-block: 0; text-align: center; }
.visit:has(.frame img) .frame { display: block; margin-bottom: 32px; }
.visit .frame img { width: 100%; aspect-ratio: 1100 / 520; object-fit: cover; border-radius: var(--radius); }
/* round 7 (4): the filled date centred under the centred head */
.visit .frame figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
.visit:has(.frame img) .wrap > .text { border-top: 0; padding-top: 0; max-width: 820px; margin: 0 auto; }
.visit:has(.frame img) .eyebrow { margin-bottom: 12px; }
.visit:has(.frame img) h2 { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin-bottom: 8px; }
.visit:has(.frame img) .sub { font-size: 20px; font-weight: 700; color: var(--brand-deep); margin-bottom: 16px; }
.visit:has(.frame img) .body { display: block; color: var(--muted); margin: 0; }
.visit:has(.frame img) .link { display: inline-block; margin-top: 16px; }

/* round 6 (1): the counted proof at display size in the band's slot: the figure, its words, the three faces (round portraits) */
.numbers .counted { display: flex; align-items: center; justify-content: center; gap: 8px 20px; flex-wrap: wrap; text-decoration: none; color: var(--ink); }
/* round 7 (1): the faces right after the words (no gap between them), the group a visible link in the stories' own words */
.numbers .counted > span:not(.faces):not(.go) + .faces { margin-left: -6px; }
.numbers .counted .go { font-size: 15px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.numbers .counted:hover .go { text-decoration: underline; text-underline-offset: 3px; }
.numbers .counted b { font-size: 64px; font-weight: 800; line-height: 1; color: var(--brand-deep); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numbers .counted > span:not(.faces):not(.go) { font-size: 22px; font-weight: 700; max-width: 12ch; line-height: 1.2; }
/* round 8 (2): the faces the two results, not avatars: 60 px, side by side, each its story's «9.0» on its lower edge */
.numbers .counted .faces { display: flex; gap: 10px; }
.numbers .counted .face { position: relative; display: block; }
.numbers .counted .faces img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.numbers .counted .mark { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: 11px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--brand); border: 2px solid var(--tint); border-radius: 999px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.numbers .counted:hover b { color: var(--brand); }

/* 3 the numbers */
.numbers { padding: 72px 0; background: var(--tint); border-block: 1px solid var(--line); }
.numbers ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.numbers li { text-align: center; padding: 0 12px; }
.numbers li + li { border-left: 1px solid var(--line); }
.numbers b { display: block; font-size: 60px; font-weight: 400; line-height: 1.1; color: var(--brand-deep); letter-spacing: -.02em; }
.numbers span { font-size: 15px; color: var(--muted); }
.numbers .source { text-align: center; font-size: 13px; color: var(--muted); margin: 28px 0 0; }
.numbers:not(:has(.basis:empty)) .counted { margin-bottom: 48px; }
.numbers .basis:not(:empty)::before { content: ' · '; }
/* round 5 (1): while nothing says what a number counts (.basis empty), no big numerals: the three one small line of text, the
   source after them, so the counted proof (the hero's, the stories') leads; given a basis, the band as drawn above */
.numbers:has(.basis:empty) { padding: 40px 0 24px; }
.numbers:has(.basis:empty) .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.numbers:has(.basis:empty) .counted { flex-basis: 100%; margin-bottom: 20px; }
.numbers:has(.basis:empty) ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.numbers:has(.basis:empty) li { padding: 0; text-align: left; border: 0; }
.numbers:has(.basis:empty) li + li::before { content: '·'; margin: 0 10px; }
/* round 8 (6): the figure and its words one weight, as a sentence («50 000+ Довольных студентов»); the centre's own capitals kept */
.numbers:has(.basis:empty) ul b { display: inline; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: inherit; color: var(--ink); margin-right: 4px; }
.numbers:has(.basis:empty) ul span { font-size: 14px; }
.numbers:has(.basis:empty) .source { margin: 0; font-size: 13px; }
.numbers:has(.basis:empty) .source::before { content: '— '; }

/* 3a programmes */
.programs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.programs li { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; scroll-margin-top: 96px; }
.programs h3 { font-size: 22px; margin: 0 0 8px; }
.programs p { color: var(--muted); font-size: 15px; margin: 0 0 20px; flex: 1; }
.programs a { color: var(--brand); font-weight: 700; text-decoration: none; margin-top: auto; }
/* round 5 (4): a card whose rows are all empty a compact row: no empty line held open, the call level with the others' at the foot */
.programs li:not(:has(dd:not(:empty))) { padding: 22px 22px 20px; }
.programs li:not(:has(dd:not(:empty))) p { flex: 0 0 auto; margin-bottom: 16px; }
.programs p:empty { display: none; }
/* the fixed rows (who / level / length / next start), each only when given (D's 10-30 08:3x (6)) */
.programs dl { margin: 0 0 20px; display: grid; gap: 6px; font-size: 14px; }
.programs dl div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 6px; }
.programs dt { color: var(--muted); }
.programs dd { margin: 0; font-weight: 600; text-align: right; }
.programs dl div:has(dd:empty), .programs dl:not(:has(dd:not(:empty))) { display: none; }
.programs li:target { border-color: var(--brand); }
/* round 6 (4): while every card's rows are empty (the centre has sent none), tiles of the title and the call, one line each, the
   calls level (an empty card held ~200 px of nothing at 1440); the cards' own shape back when rows come */
.programs ul:not(:has(dd:not(:empty))) li { padding: 20px 22px; gap: 6px; }
.programs ul:not(:has(dd:not(:empty))) h3 { margin: 0; white-space: nowrap; }
/* round 7 (3): a card's own line kept in a tile («Бесплатный IELTS Mock каждое воскресенье»); only the empty rows go */
.programs ul:not(:has(dd:not(:empty))) p { margin: 0 0 6px; font-size: 14px; }

/* 4 stories */
.stories ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* round 8 (6): a shorter crop at a desk (was 1 / 1), so each card's band is in the section's first view with its heading; each
   picture's object-position keeps its student */
.story img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story .body { padding: 20px 22px 24px; }
.story .tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--brand); background: rgba(0, 86, 179, .08); padding: 4px 10px; border-radius: 999px; }
.story .from { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; line-height: 1; }
/* round 5 (3): the start band at half the final's size, a darker grey, the gain beside the final («+2.5», from the two numbers) */
.story .start { font-size: 24px; font-weight: 700; color: #3d4a5e; }
.story .start::after { content: '→'; margin-left: 10px; font-size: 18px; color: var(--muted); }
.story .gain { font-size: 14px; font-weight: 700; color: #1d7a46; background: rgba(29, 122, 70, .1); padding: 3px 8px; border-radius: 999px; align-self: center; }
.story .gain:empty { display: none; }
.story .start:empty { display: none; }
.story .band { font-size: 44px; font-weight: 800; color: var(--brand); }
.story q { quotes: none; display: block; margin-top: 12px; color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story .year { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.story .year:empty { display: none; }
.story q:empty { display: none; }
.story .name { font-weight: 700; margin: 0; }

/* 5 news: text cards (no partner logos as pictures, D's 10-30 08:3x (4)) */
.news ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news li a { display: block; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); height: 100%; }
.news li a:hover { border-color: var(--brand); }
.news .body { padding: 28px 26px 30px; }
/* round 5 (5): newest first, the date plain (the year as written, no accent colour) */
.news time { font-size: 14px; font-weight: 500; color: var(--muted); }
.news h3 { font-size: 20px; line-height: 1.3; margin: 8px 0 10px; }
.news p { margin: 0; color: var(--muted); font-size: 15px; }

/* 6 team */
.team ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.team h3 { font-size: 18px; margin: 14px 0 2px; }
.team li { display: flex; flex-direction: column; }
.team p { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
/* one badge row for all four, at the card's foot; an empty badge keeps its row (D's 10-30 08:3x (6)) */
.team .badge { align-self: flex-start; margin-top: auto; font-size: 12px; font-weight: 700; color: var(--brand-deep); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.team .badge:empty { visibility: hidden; }
.team .badge:empty::before { content: '\200b'; }

/* 7 partners */
.partners ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 64px; }
.partners img { width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
/* round 7 (6): the marks one visual height (each its own --h held the same ink area, so wide marks stood short) */
.partners img { height: 34px; }
.partners img:hover { filter: none; opacity: 1; }
.partners:not(:has([data-kind="university"])) .unis { display: none; }

/* 8 closing band */
.closing { padding: 0 0 104px; }
/* round 5 (6): a hairline round the panel, so the photo's light top-right corner keeps the radius's line on the white page */
.closing .panel { display: grid; grid-template-columns: 7fr 5fr; border-radius: 22px; overflow: hidden; background: var(--brand-deep); color: #fff;
  box-shadow: 0 0 0 1px var(--line); }
.closing .text { padding: 56px; }
.closing h2 { color: #fff; }
.closing p { color: #c7d3e6; margin: 0 0 28px; }
.closing .calls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
/* round 5 (6): the phone a visible outline button beside the solid one */
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.closing .tel { font-variant-numeric: tabular-nums; }
.closing .pic picture, .closing .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 9 footer */
footer { background: var(--tint); color: var(--muted); border-top: 1px solid var(--line); padding: 56px 0 28px; font-size: 15px; }
footer .top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; }
footer img { height: 40px; width: auto; margin-bottom: 14px; }
footer h4 { color: var(--ink); font-size: 15px; margin: 0 0 12px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--brand); }
/* round 6 (5): the contacts that are links in the action colour, the labels grey */
footer .contacts a { color: var(--brand); font-weight: 600; }
footer .contacts li > span + a { margin-left: 4px; }
/* round 7 (6): «на карте» never alone on a line: the street, its number and the link kept together */
footer .contacts .keep { white-space: nowrap; }
footer .legal { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; font-size: 13px; }

/* the consultation dialog: posts to the CRM (D-010) */
dialog { border: 0; border-radius: 18px; padding: 32px; width: min(440px, 92vw); }
dialog::backdrop { background: rgba(10, 23, 48, .55); }
dialog h3 { font-size: 24px; margin: 0 0 8px; }
dialog p { color: var(--muted); margin: 0 0 20px; }
dialog input { width: 100%; height: 50px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font: 16px 'Manrope', 'Manrope Fallback', sans-serif; margin-bottom: 12px; }
dialog .btn { width: 100%; }
dialog .x { position: absolute; top: 12px; right: 16px; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--muted); }

/* the phone's bar */
.phonebar { display: none; }

@media (max-width: 900px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  h2 { font-size: 30px; }
  .head { margin-bottom: 32px; }
  .bar .call { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line);
    border-radius: 10px; color: var(--brand); }
  .bar .call + .menu { margin-left: 0; }
  .bar .menu { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 16px; border: 1px solid var(--line);
    border-radius: 10px; background: #fff; font: 600 15px/1 'Manrope', 'Manrope Fallback', sans-serif; color: var(--ink); cursor: pointer; }
  .bar .links { display: none; }
  .menu-open .bar .links { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 8px 24px 16px; }
  .menu-open .bar nav { flex-direction: column; gap: 0; }
  .menu-open .bar nav a, .menu-open .bar .login { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .menu-open .bar .login { border-bottom: 0; color: var(--brand); }
  .bar .wrap { height: 60px; }
  .bar img { height: 34px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding-top: 32px; padding-bottom: 8px; }
  /* round 8 (1): proof at display size on the first screen: the band (the 9+, its words, the two faces, «Все результаты →»)
     right under the calls and the address line, the building after it as a wide crop; the sections keep their order after them */
  main { display: flex; flex-direction: column; }
  .hero, .hero > .wrap { display: contents; }
  .hero .wrap > div:first-child { order: 0; padding: 32px 24px 28px; }
  .numbers { order: 1; }
  .hero .photo { order: 2; margin: 24px 24px 0; aspect-ratio: 16 / 9; }
  main > section:not(.hero):not(.numbers) { order: 3; }
  .hero h1 { font-size: 36px; }
  .hero .lead { font-size: 17px; margin-bottom: 24px; }
  .hero .calls .btn { width: 100%; }
  .hero .proof { margin-top: 20px; display: grid; grid-template-columns: repeat(2, max-content); }
  .visit { padding-top: 64px; }
  .visit .wrap > .text { padding-top: 28px; }
  .visit .sub { font-size: 17px; }
  .hero .proof a { min-height: 44px; }
  .programs ul { grid-template-columns: 1fr 1fr; gap: 12px; }
  .programs li { padding: 20px 16px; }
  .hero .facts { font-size: 14px; }
  .programs h3 { font-size: 18px; }
  .numbers { padding: 48px 0; }
  /* round 7 (1): one centred row like the other heads (the figure, its words, the faces), the link under it */
  .numbers .counted { justify-content: center; gap: 8px 12px; }
  .numbers .counted b { font-size: 48px; }
  .numbers .counted > span:not(.faces):not(.go) { font-size: 17px; max-width: 11ch; }
  .numbers .counted .faces img { width: 56px; height: 56px; }
  .numbers .counted .faces { gap: 8px; }
  .numbers .counted .go { flex-basis: 100%; text-align: center; }
  .numbers:has(.basis:empty) .counted { margin-bottom: 16px; }
  .visit + .news { padding-top: 64px; }
  .visit:not(:has(.frame img)) { padding-top: 64px; }
  .visit:not(:has(.frame img)) + .news { padding-top: 64px; }
  /* the small line on a phone: one figure a line, its label beside it (no lone «15+» row, no three-line labels) */
  .numbers:has(.basis:empty) .wrap, .numbers:has(.basis:empty) ul { display: grid; grid-template-columns: 1fr; justify-content: start; gap: 2px; }
  .numbers:has(.basis:empty) li + li::before { content: none; }
  .numbers:has(.basis:empty) .source { margin-top: 6px; text-align: left; }
  .numbers:has(.basis:empty) .source::before { content: none; }
  .numbers ul { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .numbers li + li { border-left: 0; }
  .numbers li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .numbers b { font-size: 38px; white-space: nowrap; }
  /* the three results one under another, each a row (D's 16:3x (4): one 9.0 in view read as one result) */
  .stories ul { grid-template-columns: 1fr; gap: 12px; }
  .story { display: grid; grid-template-columns: 112px 1fr; }
  /* round 7 (5): each picture cropped to its student (--phone-x, the student's place in the picture), not the frame's edge */
  .story img { height: 100%; aspect-ratio: auto; min-height: 132px; object-position: var(--phone-x, 50%) 30% !important; }
  .story .body { padding: 14px 16px; }
  .story .from { margin: 8px 0 4px; }
  .story .band { font-size: 34px; }
  .story q { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* the news a dated list on a phone: the date, a two-line title */
  .news ul { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .news li a { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  /* round 5 (5): the date above the title, the title whole on its lines (no «…») */
  .news .body { display: grid; gap: 4px; padding: 14px 0; }
  .news time { font-size: 13px; }
  .news h3 { font-size: 16px; margin: 0; }
  .news li p { display: none; }
  /* round 7 (5): the team a card row each, like the stories: the picture left, the name, role and badge whole beside it */
  .team ul { grid-template-columns: 1fr; gap: 12px; }
  .team li { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; align-items: start; }
  .team img { grid-row: 1 / 4; aspect-ratio: 1 / 1; }
  .team h3 { margin: 4px 0 2px; font-size: 17px; }
  .team p { margin: 0 0 6px; font-size: 14px; }
  .team .badge { margin-top: 0; justify-self: start; }
  .team .badge:empty { display: none; }
  .partners ul { gap: 28px 40px; }
  .partners img { height: 28px; }
  .closing { padding-bottom: 64px; }
  .closing .panel { grid-template-columns: 1fr; }
  .closing .pic { order: -1; aspect-ratio: 16 / 9; }
  .closing .text { padding: 32px 24px; }
  footer .top { grid-template-columns: 1fr 1fr; }
  footer .top > :first-child, footer .top > :last-child { grid-column: 1 / -1; }
  /* round 8 (5): the contacts sooner: first under the logo line, then the navigation and the programmes */
  footer .top > :first-child { order: -2; }
  footer .top > .contacts { order: -1; }
  footer { padding-bottom: 96px; }
  /* the contact lines are tap targets: 44 px each */
  footer .contacts ul { gap: 0; }
  footer .contacts li { display: flex; align-items: center; gap: 6px; min-height: 44px; }
  footer .contacts a { display: inline-flex; align-items: center; min-height: 44px; }
  /* round 5 (6): the navigation's and programmes' links 44 px too (~31) */
  footer .top ul { gap: 0; }
  footer .top ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .closing .calls .btn { width: 100%; }
  .calls-gone:not(.closing-calls) .phonebar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  .phonebar .btn { min-height: 48px; padding: 0 12px; }
}

/* the programme tiles one per row on a phone (D's 16:3x (6): «Английский / язык» broke in two columns) */
@media (max-width: 600px) {
  .programs ul { grid-template-columns: 1fr; }
  /* round 6 (5): no chips under 600 px: two rows of pills repeated the programmes list a scroll down and pushed the photo out of the fold */
  .hero .proof { display: none; }
}

/* Round 9 (lane D's eighth judging, A− 9.0 / A− 9.1: the polish) */
/* (1) the stats scan as proof without competing with the 9+: each figure a step heavier than its words, the source on its own
   line under them (the 1440 line had the three and the source on one row) */
.numbers:has(.basis:empty) ul b { font-weight: 600; }
.numbers:has(.basis:empty) .source { flex-basis: 100%; text-align: center; margin-top: 6px; }
.numbers:has(.basis:empty) .source::before { content: none; }
/* (2) the Cambridge line by the 9+, small, in the band */
.numbers .credential { flex-basis: 100%; text-align: center; margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--brand-deep); }
.numbers:not(:has(.basis:empty)) .credential { margin-top: -28px; margin-bottom: 40px; }
/* (3) nothing pressable looks like a tag: the hero's pills (links to their programmes) a tinted fill and an arrow, which the team's
   credential chips (outlined, white) have not */
.hero .proof a { background: var(--tint); border-color: transparent; color: var(--brand-deep); }
.hero .proof a::after { content: '→' / ''; margin-left: 6px; }
.hero .proof a:hover, .hero .proof a:focus-visible { background: #fff; }

@media (max-width: 900px) {
  /* (5) a clean header when scrolled: opaque white with its hairline (the translucent blur let a shape show behind the logo) */
  .bar { background: #fff; backdrop-filter: none; }
  .numbers .credential { margin-bottom: 14px; }
  .numbers:has(.basis:empty) .source { text-align: left; margin-top: 6px; }
}

/* (4) the phone reaches the stories sooner: under 600 px each programme a compact row, the same structure each: its name, its one
   line (the English card's empty line keeps its slot), «Записаться» at the right as a 44 px target; the four destinations kept */
@media (max-width: 600px) {
  .programs ul, .programs ul:not(:has(dd:not(:empty))) { gap: 0; border-top: 1px solid var(--line); }
  .programs li, .programs ul:not(:has(dd:not(:empty))) li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px;
    padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .programs h3, .programs ul:not(:has(dd:not(:empty))) h3 { grid-column: 1; margin: 0; white-space: normal; }
  .programs p, .programs ul:not(:has(dd:not(:empty))) p { grid-column: 1; margin: 2px 0 0; font-size: 14px; }
  .programs p:empty { display: block; min-height: 1.5em; }
  .programs dl { grid-column: 1; }
  .programs a { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
}

/* Round 10 (lane D's ninth judging, A− 9.0 / A− 9.2, «yes, narrowly» vs EF ×2, no cap: the polish; four of five round 9's own
   side effects) */
/* (3) the header opaque at every width when scrolled (1440 had rgba(255,255,255,.96) + blur: text and photos ghosted behind it) */
.bar { background: #fff; backdrop-filter: none; }
/* (4) pressable vs not: the hero's pills an edge you can see at rest (a brand hairline over the tint, ~1.1:1 before), the arrow and
   round 8's focus kept; the stories' «IELTS» a label in text, not a tinted round shape that reads as a button */
.hero .proof a { border-color: rgba(0, 86, 179, .32); }
.hero .proof a:hover, .hero .proof a:focus-visible { border-color: var(--brand); }
.story .tag { background: none; padding: 0; border-radius: 0; }
/* (1) the band two rows at a desk: the 9+ row with the Cambridge line beside it (two short lines after a hairline), then the
   three figures with the source at the line's end (the Cambridge line two balanced lines, «…центр / Cambridge English»); a zero-height break between the rows (order), so neither row joins the other */
@media (min-width: 901px) {
  .numbers:has(.basis:empty) .wrap { row-gap: 22px; }
  .numbers:has(.basis:empty) .wrap::before { content: ''; flex-basis: 100%; height: 0; order: 1; }
  .numbers:has(.basis:empty) .counted { flex-basis: auto; margin-bottom: 0; order: 0; }
  .numbers:has(.basis:empty) .credential { flex-basis: auto; order: 0; align-self: center; max-width: 270px; margin: 0 0 0 16px;
    padding-left: 28px; border-left: 1px solid var(--line); text-align: left; line-height: 1.35; text-wrap: balance; }
  .numbers:has(.basis:empty) ul { order: 2; }
  .numbers:has(.basis:empty) .source { order: 2; flex-basis: auto; margin: 0; text-align: left; }
  .numbers:has(.basis:empty) .source::before { content: '·'; margin: 0 10px 0 -2px; }
}
/* (2) one axis in the phone's band: every row from the left edge (the 9+ row, «Все результаты →», the Cambridge line, the figures,
   the source), the Cambridge line balanced and the figures' lines pretty, so no word stands alone on its line */
@media (max-width: 900px) {
  .numbers:has(.basis:empty) .wrap { justify-content: flex-start; }
  .numbers .counted { justify-content: flex-start; }
  .numbers .counted .go { text-align: left; }
  .numbers .credential { text-align: left; text-wrap: balance; }
  .numbers:has(.basis:empty) li { text-wrap: pretty; }
}
/* (5) the phone's end: the bar's room under «© 2026…» only while the bar can show (it is off over the footer's contacts) */
@media (max-width: 900px) {
  footer { padding-bottom: 28px; }
  .calls-gone:not(.closing-calls) footer { padding-bottom: 96px; }
}

/* Round 11 (lane D's tenth judging, A− 9.0 / A− 9.2, «yes, narrowly» vs EF ×2, no cap: the polish) */
/* (1) a credential is a label, not a pill: the stories' tags' face (12 px, 700, the brand's ink) after a check, under its role;
   the hero's pressable pills the only rounded shapes left with an edge */
.team .badge { border: 0; border-radius: 0; padding: 0; color: var(--brand); letter-spacing: .02em; }
.team .badge:not(:empty)::before { content: '✓' / ''; margin-right: 6px; }
@media (min-width: 901px) {
  /* (3) the band's two rows on one width: both from the hero's left column (the wrap's left edge), not centred to two widths */
  .numbers:has(.basis:empty) .wrap { justify-content: flex-start; }
  /* (2) the source set apart from the figures: a size and a tone quieter, 32 px of space before it, no «·» of the figures' run */
  .numbers:has(.basis:empty) .source { margin-left: 32px; font-size: 12px; color: #8a93a3; }
  .numbers:has(.basis:empty) .source::before { content: none; }
}
@media (max-width: 900px) {
  .numbers:has(.basis:empty) .source { font-size: 12px; color: #8a93a3; margin-top: 10px; }
  /* (4) the phone's faces beside the 9+ claim, on its axis: right after its words (the words' box as wide as their longest line,
     not 11ch), overlapping as one group at round 8's 56 px, not at the band's right edge */
  .numbers .counted { gap: 8px 10px; }
  .numbers .counted > span:not(.faces):not(.go) { max-width: none; width: min-content; }
  .numbers .counted .faces { gap: 0; margin-left: 2px; }
  .numbers .counted .face + .face { margin-left: -10px; }
}
/* (5) the four programmes' one-line slot one height (an empty one, the English card's, holds its room as content to come):
   the cards' rows a subgrid from 601 px, the name, the line, the call each on one level */
@media (min-width: 601px) {
  .programs ul:not(:has(dd:not(:empty))) { grid-template-rows: auto auto auto; }
  .programs ul:not(:has(dd:not(:empty))) li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
  .programs ul:not(:has(dd:not(:empty))) p:empty { display: block; }
}

/* Round 12 (lane D's eleventh judging, A− 8.9 / A− 9.1, «yes, narrowly» vs EF ×2, no cap: three of round 11's asks one step too far) */
/* (1) the source legible: the page's own --muted (AA on the band's tint), kept quieter by its 12 px and 400 alone */
.numbers:has(.basis:empty) .source { color: var(--muted); font-weight: 400; }
/* (2) a credential reads as a fact, not a link: its words in the headline ink, only the check in the action blue */
.team .badge { color: var(--brand-deep); }
.team .badge:not(:empty)::before { color: var(--brand); }

/* D-010: what the live home adds to the judged design */
.bar .langs { display: inline-flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.bar .langs button { border: 0; background: none; font: 600 13px 'Manrope', 'Manrope Fallback', sans-serif; color: var(--muted); padding: 6px 9px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.bar .langs button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.hero .next a { color: var(--brand); font-weight: 600; text-decoration: none; }
dialog .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--muted); margin: 4px 0 16px; text-align: left; }
dialog .consent input { width: 20px; height: 20px; margin: 0; flex: none; }
dialog .err { color: #b42318; font-size: 14px; margin: 0 0 12px; }

/* Round 14 (lane D's thirteenth judging, B+ 8.3 / A− 8.7: the six it ranked) */
/* (1) the phone's proof label at most two lines in every language: the words the row's whole width beside 9+, the faces on their
   own row under it with «All results →» after them (9+ in ink, the chips kept) */
@media (max-width: 900px) {
  .numbers .counted { flex-wrap: wrap; row-gap: 8px; }
  .numbers .counted > span:not(.faces):not(.go) { width: auto; flex: 1 1 calc(100% - 80px); min-width: 0; }
  .numbers .counted .go { flex-basis: auto; margin-left: 6px; }
  .numbers .counted > span:not(.faces):not(.go) + .faces { margin-left: 0; }
  .numbers .counted .faces img { width: 48px; height: 48px; }
}
/* (2) the level-test line: the sentence in the page's grey, only its verb and arrow in the action's blue, the whole line one tap
   (the link's box stretched over it); the hero's rhythm on the phone tightened so the band's three figures end inside 844 px */
.hero .next { position: relative; }
.hero .next a::after { content: ''; position: absolute; inset: -8px 0; }
.hero .next a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 900px) {
  .hero .wrap > div:first-child { padding: 24px 24px 20px; }
  .hero .kicker { margin-bottom: 12px; }
  .hero h1 { margin-bottom: 12px; }
  .hero .lead { margin-bottom: 20px; }
  .hero .calls { gap: 10px; }
  .numbers { padding: 20px 0 32px; }
  .numbers:has(.basis:empty) .counted { margin-bottom: 12px; }
  .numbers .credential { margin-bottom: 10px; }
}
/* (3) the phone menu a sheet over a dimmed page: the dim under the bar, its button the «close» word while open (Escape and a tap
   on the dim close it, js/home.js); the hairline rows, ink labels and the language pill as they were */
.bar .menu .when-open, .bar .menu[aria-expanded="true"] .when-shut { display: none; }
.bar .menu[aria-expanded="true"] .when-open { display: inline; }
@media (max-width: 900px) {
  .menu-open::after { content: ''; position: fixed; inset: 0; z-index: 19; background: rgba(10, 23, 48, .45); }
  .menu-open .bar .links { box-shadow: 0 12px 24px rgba(10, 23, 48, .12); }
  .bar .menu[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
}
/* (4) the form's errors: each failing field and the unticked box outlined in the error red, its short reason under it; red only
   for errors; the summary's number a tap-to-call link */
dialog input[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 1px #b42318; }
dialog input[aria-invalid="true"]:focus-visible { outline: 2px solid #b42318; outline-offset: 1px; }
dialog .why { color: #b42318; font-size: 13px; line-height: 1.4; margin: -6px 0 12px; text-align: left; }
dialog .consent:has(input[aria-invalid="true"]) input { outline: 2px solid #b42318; outline-offset: 1px; }
dialog .consent + .why { margin-top: -10px; }
dialog .err a { color: inherit; font-weight: 700; white-space: nowrap; }
/* (6) the programmes' English row on the phone (no line yet): its call level with its title, as the other three's; at a desk the
   band's three figures up into its empty middle, one row between the 9+ claim and the credential (the source under, in the grey) */
@media (max-width: 600px) {
  .programs li:has(p:empty) p:empty { display: none; }
  .programs li:has(p:empty) a { grid-row: 1; }
}

/* Round 15 (lane D's fourteenth judging, B+ 8.5 / A− 8.7: the six it ranked) */
/* (1) at a desk the hero is the centre's students in class (the closing band's photograph, until the centre shoots one), in the
   right column's frame, radius and top alignment; the phone's first screen keeps the building (index.html's <picture>) */
@media (min-width: 901px) { .hero .photo img { object-position: 30% 50%; } }
/* (2) the phone's primary call one line in every language (the dialog's own title); the dialog's title in the headings' ink and
   line height (a <dialog> takes the browser's black otherwise) */
.hero .calls .at-phone { display: none; }
@media (max-width: 900px) {
  .hero .calls .at-desk { display: none; }
  .hero .calls .at-phone { display: inline; }
}
dialog { color: var(--ink); }
dialog h3 { line-height: 1.2; color: var(--ink); letter-spacing: -.01em; }
/* (4) blue only for what is pressable: the stories' label and bands and the faces' badges in the headline ink */
.story .tag { color: var(--brand-deep); }
.story .band { color: var(--brand-deep); }
.numbers .counted .mark { background: var(--brand-deep); }
/* (6) the phone menu's button one width (both words stacked in one cell, the hidden one keeping its room), so the call icon
   stays; the language pill as wide as its three items; the sheet ending on the consultation call */
.bar .sheet-call { display: none; }
@media (max-width: 900px) {
  .bar .menu { display: inline-grid; justify-items: center; }
  .bar .menu > span { grid-area: 1 / 1; }
  .bar .menu .when-open, .bar .menu[aria-expanded="true"] .when-shut { display: inline; visibility: hidden; }
  .bar .menu[aria-expanded="true"] .when-open { visibility: visible; }
  .menu-open .bar .langs { align-self: flex-start; margin: 12px 0 4px; }
  .menu-open .bar .sheet-call { display: inline-flex; margin-top: 12px; }
}
/* the form: a small label over each field; the consent box's own edge is what turns red (no second square round it) */
dialog .lbl { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); text-align: left; }
dialog input:not([type="checkbox"]) { margin-bottom: 14px; }
dialog .consent input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; border: 2px solid #8a93a3; border-radius: 5px;
  background: #fff; cursor: pointer; }
dialog .consent input::before { content: ''; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
dialog .consent input:checked { background: var(--brand); border-color: var(--brand); }
dialog .consent input:checked::before { opacity: 1; }
dialog .consent input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
dialog .consent:has(input[aria-invalid="true"]) input { outline: 0; border-color: #b42318; }
/* the level-test line's verb never alone on a line (RU's lead shortened to fit 390 px); the band's source at its own 12 px (the
   band's `.numbers span` 15 px reached its inner span) */
.hero .next a { white-space: nowrap; }
.numbers .source span { font-size: inherit; }
dialog .consent input { padding: 0; }
/* (5) the programmes: every card its title, one line and its call (the English card's line now given); on the phone in Russian,
   whose call and lines are the longest, the call under the description rather than squeezed beside it */
@media (max-width: 600px) {
  html[lang="ru"] .programs li { grid-template-columns: minmax(0, 1fr); padding: 14px 0 6px; }
  html[lang="ru"] .programs a { grid-column: 1; grid-row: auto; justify-self: start; }
}
/* (6) the visit's link one word-space after its line at a desk (was a space plus 10 px); on the phone its own line under the
   balanced sub-line (in uz «tashrifi» stood alone before a wide gap) */
.visit:not(:has(.frame img)) .link { margin-left: 4px; }
@media (max-width: 900px) {
  .visit:not(:has(.frame img)) .sub { display: block; text-wrap: balance; }
  .visit:not(:has(.frame img)) .link { display: inline-block; margin: 8px 0 0; }
}

/* Round 16 (lane D's fifteenth judging, A− 8.7 / A− 8.8: the six it ranked) */
/* (1) the closing band's picture at a desk is the building (index.html's <picture>); the panel, calls and radius unchanged */
/* (2) the 1440 band's three figures spread to the grid's right edge (each its own hairline before it, the room between them
   shared), the source under all three, and a muted slot after the 95 %'s caption for its basis once the centre gives it */
.numbers .n-basis { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.numbers .n-basis:empty { display: none; }
/* (3) the claim's score in the headline ink (the figure navy, the joining words grey): home.js marks «IELTS 9.0» in each language */
.numbers .counted .score { font-style: normal; color: var(--ink); }
/* (4) the phone's people strip, a short wide crop at the hero's radius, faces in its middle */
.hero .people { display: none; margin: 0; }
@media (max-width: 900px) {
  .hero .people { display: block; margin-top: 18px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 342 / 112; }
  .hero .people img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
}
/* (5) one eyebrow for every section: the programmes', news' and team's 15 px (their sections' `p` rules had reached it) now
   also the stories', the visit's and the partners' (13 px), the same tracking and grey; the visit's frame at the hero's radius */
main section .eyebrow { font-size: 15px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.visit .frame img { border-radius: var(--radius); }
/* (6) the hero's lede never leaves one word on its last line (RU's «пути.» at 1440); a focused field that failed keeps the
   same red ring as the others (no second outline); on the phone the per-field reasons speak and the summary stays away (it still says a failed send) */
.hero .lead { text-wrap: pretty; }
dialog input[aria-invalid="true"]:focus-visible { outline: 0; }
@media (max-width: 600px) {
  dialog form:has(.why:not([hidden])) .err { display: none; }
}

/* Round 17 (lane D's sixteenth judging, A− 8.6 / A− 8.6: the six it ranked) */
/* (1) each photo once per page: the closing band's picture is the building at every width (index.html); panel, calls, radius kept */
/* (2) the phone's strip: its own 684 × 224 crop (index.html), the cards' hairline round it so the radius reads on white, and the
   first screen's preload and priority (the building lost both: it is under the numbers band on the phone) */
@media (max-width: 900px) {
  .hero .people { border: 1px solid var(--line); }
  .hero .people img { object-position: 50% 50%; }
}
/* (4) the programmes: on the phone one layout in every language (each row its name, its line, the call under them: where the
   longest language, Russian, needed it); at a desk the whole card presses its call, and two muted spec rows wait (hidden while
   empty) for the centre's level/age, length and next start */
@media (max-width: 600px) {
  .programs li, .programs ul:not(:has(dd:not(:empty))) li { grid-template-columns: minmax(0, 1fr); padding: 14px 0 6px; }
  .programs a { grid-column: 1; grid-row: auto; justify-self: start; }
  .programs li:has(p:empty) a { grid-row: auto; }
}
.programs dt, .programs dd { color: var(--muted); font-weight: 400; }
@media (min-width: 601px) {
  .programs li { position: relative; transition: border-color .15s; }
  .programs a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .programs li:hover, .programs li:has(a:focus-visible) { border-color: var(--brand); }
  .programs a:focus-visible { outline: 0; }
  .programs li:has(a:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
}
/* (5) the team: the credential row's height held on every card (a missing one keeps its room, unseen), so the badges share a
   baseline at a desk and every phone row is one height */
.team .badge:empty { display: block; visibility: hidden; }
/* (6) the visit: today its link on its own line under the sub-line; once the centre's photo and date are in, a split (the picture
   beside the words, weighted like the results cards) */
.visit:not(:has(.frame img)) .link { display: table; margin: 8px auto 0; }

/* Round 18 (lane D's seventeenth judging, A− 8.7 / A− 8.5: the six it ranked) */
/* (1) each photo once on the phone too: the hero photo is the desk's only (its picture an inline placeholder there, index.html); the
   strip is the phone's photo up top, the building closes the page */
@media (max-width: 900px) { .hero .photo { display: none; } }
/* (2) the visit's words left-aligned between the hairlines (r19 (1): one column until the centre's photo; the split comes with it) */
.visit:not(:has(.frame img)) .wrap > .text { text-align: left; border: 0; padding: 0; }
.visit:not(:has(.frame img)) .wrap > .text > * { max-width: none; margin-inline: 0; }
.visit:not(:has(.frame img)) h2 { font-size: 32px; line-height: 1.2; margin-bottom: 8px; text-wrap: balance; }
.visit:not(:has(.frame img)) .sub { display: block; font-size: 18px; }
.visit:not(:has(.frame img)) .link { display: table; margin: 14px 0 0; }
.visit:not(:has(.frame img)) .wrap { display: grid; gap: 24px; padding-block: 32px; border-block: 1px solid var(--line);
  max-width: none; margin-inline: max(24px, calc((100% - var(--wrap)) / 2 + 24px)); padding-inline: 0; }
@media (min-width: 901px) {
  .visit:not(:has(.frame img)) .wrap { padding-block: 40px; }
}
@media (max-width: 900px) {
  .visit:not(:has(.frame img)) h2 { font-size: 24px; }
  .visit:not(:has(.frame img)) .sub { font-size: 16px; }
}
/* (3) the phone's strip a shorter 4:1 crop on the middle faces (684 × 171, index.html); hairline, radius and place kept */
@media (max-width: 900px) { .hero .people { aspect-ratio: 4 / 1; } }
/* (4) the 1440 programmes size to their content while the spec rows are hidden (no reserved empty height) */
@media (min-width: 601px) {
  .programs ul:not(:has(dd:not(:empty))) { grid-template-rows: none; align-items: start; }
  .programs ul:not(:has(dd:not(:empty))) li { display: flex; flex-direction: column; grid-row: auto; gap: 6px; }
  .programs ul:not(:has(dd:not(:empty))) p { margin-bottom: 10px; }
}
/* (6) RU's phone lede in three lines as EN (words unchanged): a touch smaller and tighter there only */
@media (max-width: 600px) {
  html[lang="ru"] .hero .lead { font-size: 16px; letter-spacing: -.005em; }
}
/* (5) the 1440 hero: one result pinned to the photo's lower corner (the band's face and the results cards' score) */
.hero .photo { position: relative; }
.hero .chip { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px;
  background: #fff; border-radius: 999px; box-shadow: 0 6px 24px rgba(15, 29, 51, .18); text-decoration: none; color: var(--ink); }
.hero .chip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.hero .chip > span { display: grid; line-height: 1.2; }
.hero .chip b { font-size: 16px; font-weight: 800; color: var(--ink); }
.hero .chip b + span { font-size: 13px; color: var(--muted); }
.hero .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* (6) the closing render's muted address caption on its corner; the white under the closing band at a desk closed */
.closing .pic { position: relative; }
.closing .caption { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: rgba(255, 255, 255, .92); }

/* Round 19 (lane D's eighteenth judging, A− 8.6 / A− 8.4: the six it ranked) */
/* (1) the visit one finished column while there is no photo: eyebrow, ink headline, hairlines; the words a reading measure at a desk,
   the phone's the column's full width */
@media (min-width: 901px) {
  .visit:not(:has(.frame img)) .wrap > .text > * { max-width: 760px; }
}
/* (2) at a desk the programme cards take the row's height and «Enrol →» sits on one baseline at their foot (spec rows still hidden) */
@media (min-width: 601px) {
  .programs ul:not(:has(dd:not(:empty))) { align-items: stretch; }
  .programs ul:not(:has(dd:not(:empty))) li { height: 100%; }
  .programs ul:not(:has(dd:not(:empty))) li > a { margin-top: auto; }
}
/* (3) the hero chip: the page's blue arrow, so it reads pressable; while it shows (a desk), the band drops its avatars, so the same
   student is never twice on one screen */
.hero .chip .arr { font-style: normal; font-weight: 700; font-size: 18px; color: var(--brand); margin-left: 2px; }
/* (4) the phone's Menu/Close button one width in every language (the longest label, «Закрыть», fits), so the call icon stands still */
@media (max-width: 900px) { .bar .menu { width: 104px; padding: 0; } }
/* (5) the results photos are crops toward the student (index.html); a picture element now wraps each */
.story picture { display: contents; }
.story picture source { display: none; }
/* (6) the consultation sheet's × a 44 px tap area, the glyph where it was; a muted line under each result's name for the start band
   and the time taken, hidden while empty */
dialog .x { top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; line-height: 1; }
.story .path { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.story .path:not(:has(span:not(:empty))) { display: none; }
.story .path span:empty { display: none; }
.story .path span:not(:empty) + span:not(:empty)::before { content: ' · '; }
/* (2) the visit's headline at the section heads' display size, so it reads as a milestone */
.visit:not(:has(.frame img)) h2 { font-size: 40px; line-height: 1.15; }
@media (max-width: 900px) {
  .visit:not(:has(.frame img)) h2 { font-size: 30px; }
  /* (3) the phone's strip taller (342 × 240) and aimed at the faces (students-tall-684) */
  .hero .people { aspect-ratio: 57 / 40; }
  .hero .people img { object-position: 50% 50%; }
  /* (5) the phone's three figures a 2×2 grid as the desk band (the 9+ line above stays) */
  .numbers:has(.basis:empty) ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 4px; }
  .numbers:has(.basis:empty) li { padding: 0; border: 0; }
  .numbers:has(.basis:empty) li + li::before { content: none; }
  .numbers:has(.basis:empty) ul b { display: block; font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--brand-deep); margin: 0 0 2px; letter-spacing: -.01em; }
  .numbers:has(.basis:empty) ul span { display: block; font-size: 13px; line-height: 1.35; color: var(--muted); }
}

/* Round 21 (lane D's twentieth judging, B+ 8.2 / A− 8.4: the six it ranked) */
/* (1) the phone's first screen ends on the whole 9+ line and its avatars (inside 844 px): the eyebrow one line by size and tracking,
   a shorter strip (342 × ~186) on the same faces, less room round it and atop the band */
@media (max-width: 600px) {
  .hero .kicker { font-size: 11px; letter-spacing: .05em; white-space: nowrap; }
  html[lang="ru"] .hero .kicker { font-size: 10px; letter-spacing: .02em; }
}
@media (max-width: 900px) {
  .hero .people { aspect-ratio: 342 / 186; margin-top: 14px; }
  .hero .people img { object-position: 50% 18%; }
  .hero > .wrap { padding-bottom: 12px; }
  .numbers:has(.basis:empty) { padding-top: 24px; }
}
/* (2) the visit: the President's visit the headline (the markup's swap), the landmark line muted under it; at a desk the block
   narrowed to its text and centred like every section head, so no empty right half (the frame comes with the centre's photo) */
.visit:not(:has(.frame img)) .sub { color: var(--muted); font-weight: 400; }
@media (min-width: 901px) {
  .visit:not(:has(.frame img)) .wrap { max-width: 760px; margin-inline: auto; justify-items: center; }
  .visit:not(:has(.frame img)) .wrap > .text { text-align: center; }
  .visit:not(:has(.frame img)) .wrap > .text > * { margin-inline: auto; }
  .visit:not(:has(.frame img)) .link { margin-inline: auto; }
}
/* (3) the phone figures: the source note in the grid's fourth cell beside 15+ (the list's items and the note one grid, no hole) */
@media (max-width: 900px) {
  .numbers:has(.basis:empty) .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .numbers:has(.basis:empty) .counted, .numbers:has(.basis:empty) .credential { grid-column: 1 / -1; }
  .numbers:has(.basis:empty) ul { display: contents; }
  .numbers:has(.basis:empty) li { margin-top: 14px; grid-column: auto; }
  .numbers:has(.basis:empty) .source { align-self: end; margin: 0; font-size: 12px; font-style: italic; }
}
/* (4) partners: each mark one optical area (height from its own width over height; AP's and the qualifications' solid blocks a step down, the
   Cambridge crest and the thin Linguaskill word a step up; the values on each mark's --h in index.html), greyscale and the spread kept */
@media (max-width: 900px) { .partners img { height: calc(var(--h, 34) * .82px); } }
/* (6) the news cards are not links to anywhere yet (#news): no card border or hover, so nothing looks pressable that is not */
.news li a { border-color: transparent; background: none; cursor: default; }
.news li a:hover { border-color: transparent; }

/* Round 22 (lane D's twenty-first judging, A− 8.5 / A− 8.6, «the bar met»: the polish it ranked) */
/* (2) the phone hero's eyebrow back to the eyebrow rule: tracked caps at 11 px like every section head; ru may wrap before the city */
@media (max-width: 600px) {
  .hero .kicker, html[lang="ru"] .hero .kicker { font-size: 11px; letter-spacing: .1em; white-space: normal; text-wrap: balance; }
}
/* (3) the source note one style: roman at both widths; on the phone on the 15+ cell's label line (its size, its foot) */
.numbers .source { font-style: normal; }
@media (max-width: 900px) {
  .numbers:has(.basis:empty) .source { font-style: normal; font-size: 13px; line-height: 1.35; }
  /* (1) the phone's fold ends in the band's empty grey: the band's top a step less, the room under the 9+ claim a step more, so
     the Cambridge line starts under 844 px (en, ru) or ends above it (uz), never sliced; the 9+ line, avatars and «All results» stay on */
  .numbers:has(.basis:empty) { padding-top: 18px; }
  .numbers:has(.basis:empty) .counted { margin-bottom: 26px; }
  /* (4) the phone's news rows: the hairline between rows the programmes list uses (no card, no hover) */
  .news li a, .news li a:hover { border-bottom-color: var(--line); }
}
/* (6) the phone's visit block centred as at 1440, its heading a step under the section heads (26 against 30) */
@media (max-width: 900px) {
  .visit:not(:has(.frame img)) .wrap > .text { text-align: center; }
  .visit:not(:has(.frame img)) .wrap > .text > * { margin-inline: auto; }
  .visit:not(:has(.frame img)) h2 { font-size: 26px; }
}
/* (6) the footer logo's check on the content line, as the bar's (the picture's own 9 px of air pulled back) */
footer img { margin-left: -9px; }
/* (6) the closing call says the dialog's own title on a phone, as the hero's does, so it is one line in every language */
.closing .calls .at-phone { display: none; }
@media (max-width: 900px) {
  .closing .calls .at-desk { display: none; }
  .closing .calls .at-phone { display: inline; }
}
/* (6) the partner marks one grey: each mark's opacity (--o in index.html) set from its own ink so all five read at one tone */
.partners img { opacity: var(--o, .75); }
.partners img:hover { opacity: 1; }
/* (6) the team pictures: a picture element now wraps Timur's (a card-size webp) */
.team picture { display: contents; }
/* r23 (0): with the picture `display: contents`, its <source> joined the phone card's grid as a block and took a cell, so Timur's
   badge fell under his photo; the source is never drawn */
.team picture source { display: none; }

/* Round 23 (lane D's r22 judging, A− 8.5 / A− 8.6: the bar holds; to-e 2026-11-09 21:5x) */
/* (4) the closing headline balanced: ru's «путь» never alone on its line, uz within three */
.closing h2 { text-wrap: balance; }
@media (max-width: 600px) { html[lang="uz"] .closing h2 { font-size: 27px; } }
/* (5) the visit without its photo stands on the proof sections' pale ground, not bare text
   (a panel of it, as the section above is pale too: the panel keeps it its own block) */
.visit:not(:has(.frame img)) .wrap > .text { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 32px; }
.visit:not(:has(.frame img)) .wrap { border-block: 0; padding-block: 0; }
@media (max-width: 900px) {
  .visit:not(:has(.frame img)) .wrap > .text { padding: 28px 20px; }
  /* (6) the phone's source note out of the 2 × 2 figures: a full-width line under them */
  .numbers:has(.basis:empty) .source { grid-column: 1 / -1; align-self: start; margin-top: 14px; }
}

/* Round 24 (lane D's r23 judging, A− 8.6 / A− 8.6: the bar holds; to-e 2026-11-10 16:0x) */
/* (1) the first screen as the results. At a desk the hero's right half is the three result portraits (the stories' own photos), each
   its score and name, the first the largest (r18 (5)'s chip folded into it); the band then shows figures only, so no face twice on
   the first two screens. On the phone the class strip carries the result chip, and the band drops the chip's student. */
.hero .wins { display: grid; grid-template-columns: 1.18fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; border-radius: 0; overflow: visible; }
/* the desk's only: r18 (1)'s phone hide of .hero .photo stands (this rule had overridden it, so the phone drew the empty grid; our own bug) */
@media (max-width: 900px) { .hero .photo.wins { display: none; } }
.hero .win { position: relative; display: block; overflow: hidden; border-radius: var(--radius); color: #fff; text-decoration: none; background: var(--tint); }
.hero .win:first-child { grid-row: 1 / -1; }
.hero .win picture { display: contents; }
.hero .win picture source { display: none; }
.hero .win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) 30%; transition: transform .4s ease; }
.hero .win:hover img { transform: scale(1.03); }
.hero .win::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(10, 24, 46, .82), rgba(10, 24, 46, 0)); }
.hero .win .cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: grid; justify-items: start; line-height: 1.1; }
.hero .win .tag { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.hero .win b { font-size: 40px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0 2px; }
.hero .win:first-child b { font-size: 64px; }
.hero .win .name { font-size: 14px; font-weight: 700; }
.hero .win:first-child .name { font-size: 16px; }
.hero .win:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 900px) {
  .hero .people { position: relative; }
  .hero .people .chip { left: 10px; bottom: 10px; gap: 10px; padding: 4px 14px 4px 4px; }
  .hero .people .chip img { width: 36px; height: 36px; }
  .hero .people .chip b { font-size: 14px; }
  .hero .people .chip b + span { font-size: 12px; }
  .numbers .counted .face:first-child { display: none; }
  .numbers .counted .face:first-child + .face { margin-left: 0; }
  /* (3) the phone figures: no empty cell beside «15+»; it takes the row, its words on the numeral's line; the source line under it */
  .numbers:has(.basis:empty) li:last-child { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
  .numbers:has(.basis:empty) li:last-child b { margin: 0; }
}

.hero .kicker .sep-br { display: none; }
/* (6) the ru phone eyebrow breaks at its first dot without the dot: two lines, «Английский язык» and the rest, no line ending in «·» */
@media (max-width: 600px) {
  html[lang="ru"] .hero .kicker .sep:first-of-type { display: none; }
  html[lang="ru"] .hero .kicker .sep-br { display: initial; }
}
/* (5) the programme cards: a card whose line is a first step says it as its call (the line above it then not repeated), the arrow the
   page's; a small exam mark (the partners' own, greyscale) or a level chip in the lower half; on the phone the marks stay off */
.programs li:has(> a.step) > p { display: none; }
.programs li > a.step { text-wrap: balance; }
.programs li > a.step, .programs ul:not(:has(dd:not(:empty))) li > a.step { display: block; }
.programs .mark { display: none; }
/* (6) the closing render's address chip off the building's lit sign: the picture's top-left corner, over the sky */
.closing .caption { top: 16px; bottom: auto; }

/* Round 25 (lane D's r24 judging, A− 8.7 / A− 8.8: the bar lifts; to-e 2026-11-10 20:2x) */
/* (2) the hero portraits one set: one crop rule (each picture scaled so its head is the same share of the frame, its eye line on the
   frame's 22 % line; --x and --eye on each img are the face's place in its own photo), one colour grade, and the score and name in one
   place on a clean dark foot under the picture, so nothing covers the certificate a student holds. (1) the phone strip is that set's first. */
.hero .win { display: flex; flex-direction: column; background: var(--brand-deep); }
.hero .win::after { content: none; }
.hero .win picture { display: block; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; container-type: size; }
.hero .win picture img { --h: max(112cqh, 75cqw); position: absolute; inset: auto; width: calc(var(--h) * 4 / 3); height: var(--h); max-width: none;
  top: clamp(calc(100cqh - var(--h)), calc(22cqh - var(--eye, .2) * var(--h)), 0px);
  left: clamp(calc(100cqw - var(--h) * 4 / 3), calc(50cqw - var(--x, .5) * var(--h) * 4 / 3), 0px);
  object-fit: fill; filter: saturate(.92) contrast(1.04) brightness(1.02); }
.hero .win .cap { position: static; flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--brand-deep); line-height: 1.15; }
.hero .win .cap b { margin: 0; font-size: 32px; }
.hero .win .cap > span { display: grid; min-width: 0; }
.hero .win .cap .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .win:first-child .cap b { font-size: 44px; }
@media (max-width: 900px) {
  /* (1) the phone's first screen: the portrait in the strip, its score large lower-left, the name beside it; the band figures only */
  /* the portrait a step taller than the class strip was (186 → 210 at 390), so the Cambridge line falls wholly under 844 px (en, ru) or ends above it (uz) */
  .hero .people { overflow: hidden; aspect-ratio: 342 / 210; }
  .hero .people .win { height: 100%; border-radius: 0; }
  .hero .people .win .cap b { font-size: 34px; }
  .hero .people .win .cap { padding: 6px 12px; }
  .numbers .counted .faces { display: none; }
}
/* (3) the programme cards one shape: title, one line, one mark row, the first step, each on a row the four cards share (subgrid) */
.programs li:has(> a.step) > p { display: block; }
.programs .mark, .programs .mark.level { padding: 4px 10px; border-radius: 6px; background: var(--tint); font-size: 12px; font-weight: 800;
  letter-spacing: .04em; color: var(--brand-deep); line-height: 1.4; }
/* (4) the hero holds the portraits (three at a desk, the first on the phone), so the results section does not repeat them: a compact roll
   (exam, score, name) in the card style, «All results →» under it; at both widths, so each photograph stays once per page (r18 (1)) */
.stories .story { display: block; }
.stories .story picture, .stories .story img { display: none; }
.stories .story .body { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'band tag' 'band name' 'band path'; column-gap: 18px; align-items: center; padding: 18px 22px; }
.stories .story .tag { grid-area: tag; justify-self: start; align-self: end; }
.stories .story .from { grid-area: band; margin: 0; }
.stories .story .name { grid-area: name; align-self: start; }
.stories .story .path { grid-area: path; }
.stories .story q, .stories .story .year { grid-column: 1 / -1; }
@media (max-width: 900px) { .stories .story .body { padding: 14px 18px; } }
/* (5) the visit panel's picture: the class photo, until the centre's own visit photos come (the pale panel and «More on Instagram →» kept) */
.visit .room { margin: 0 0 20px; }
.visit .room img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.visit:has(.frame img) .room { display: none; }
@media (min-width: 901px) {
  .visit:not(:has(.frame img)) .wrap > .text { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; align-content: center; text-align: left; }
  .visit:not(:has(.frame img)) .wrap > .text > * { grid-column: 2; max-width: none; margin-inline: 0; }
  .visit:not(:has(.frame img)) .wrap > .text > .room { grid-column: 1; grid-row: 1 / span 6; margin: 0; align-self: center; }
  .visit:not(:has(.frame img)) .sub, .visit:not(:has(.frame img)) .link { display: block; }
  .visit:not(:has(.frame img)) .link { margin: 14px 0 0; }
  .visit:not(:has(.frame img)) h2 { font-size: 30px; }
}
/* (6) the phone figures one label pattern: 15+ its label under the numeral as 50 000+ and 95 % (its own row kept) */
@media (max-width: 900px) {
  .numbers:has(.basis:empty) li:last-child { display: block; }
}
/* (6) news over ~6 months old (home.js marks .aged): the date no longer leads the card; it follows the text, muted */
.news.aged .body { display: flex; flex-direction: column; }
.news.aged time { order: 3; margin-top: 8px; font-size: 13px; }
.news.aged h3 { margin-top: 0; }

/* Round 26 (lane D's r25 judging, A− 8.8 / A− 8.6: the bar holds; to-e 2026-11-10 21:1x) */
.hero .win picture img { filter: saturate(.62) contrast(1.06) brightness(.98); }
.hero .win picture::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(13, 43, 82, .55), rgba(13, 43, 82, .12) 38%, rgba(13, 43, 82, 0) 60%); }
/* (2) the phone strip: the photo on the right from the student's shoulder (the tree out of frame), the whole height so the crown and the
   IELTS booklet are both inside; the score large lower-left on the navy beside it, the name under it */
@media (max-width: 900px) {
  .hero .people .win { flex-direction: row-reverse; }
  .hero .people .win picture { flex: none; height: 100%; aspect-ratio: 290 / 348; }
  .hero .people .win picture img { --h: 100cqh; top: 0; left: calc(-.395 * 133.34cqh); }
  .hero .people .win .cap { flex: 1 1 auto; display: grid; align-content: end; gap: 4px; padding: 14px 16px 16px; }
  .hero .people .win .cap b { font-size: 44px; line-height: 1; }
  .hero .people .win .cap .name { white-space: normal; font-size: 15px; }
  .hero .people .win .cap > span { order: -1; }
}
/* (1) the results a story, not a list. The phone: Bobirjon (not in the phone's hero) leads as a card, his photo with the form, the score
   large, the name, the start band → result slot kept (empty until the centre gives it); then the roll, a small round face beside each
   score. 1440 (the hero holds all three, and the section begins on screen 2): no faces, the roll set slim beside the section's head. */
.stories .story .face { display: none; }
@media (max-width: 900px) {
  .stories ul { display: flex; flex-direction: column; }
  .stories .story.feature { order: -1; }
  .stories .story:not(.feature) { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; padding-left: 18px; }
  .stories .story:not(.feature) .face { display: block; width: 44px; height: 44px; min-height: 0; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
  .stories .story:not(.feature) .body { padding-left: 14px; }
  .stories .story.feature { overflow: hidden; }
  .stories .story.feature picture { display: block; }
  .stories .story.feature picture img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 54% 30%; filter: saturate(.62) contrast(1.06) brightness(.98); }
  .stories .story.feature .body { grid-template-columns: 1fr; grid-template-areas: 'tag' 'band' 'name' 'path'; row-gap: 2px; padding: 16px 18px 18px; }
  .stories .story.feature .from { display: flex; align-items: baseline; gap: 8px; }
  .stories .story.feature .band { font-size: 56px; line-height: 1; }
  .stories .story.feature .start:not(:empty)::after { content: ' →'; }
}
/* (3) the visit panel honest: a slot for the visit's own photo (r27 (3): not drawn until the photo comes, below); r27 (5): the class
   photo is off the team's head (students under «Professionals who inspire»), so its grid here is gone too */
/* (4) news when .aged: no dates at all (the titles and lines stand on their own) */
.news.aged time { display: none; }
/* (5) the phone figures: 15+ inline again on its own full row (figure and words on one line, as r24), so no empty cell; «All results →»
   on the content edge with 9+ and the Cambridge line */
@media (max-width: 900px) {
  .numbers:has(.basis:empty) li:last-child { display: flex; align-items: baseline; gap: 8px; }
  .numbers .counted .go { margin-left: 0; }
}
/* (6) the phone programmes: one gap from the line to the action on all four (each call a 44 px block, its text 10 px in) */
@media (max-width: 600px) {
  .programs li > a, .programs ul:not(:has(dd:not(:empty))) li > a, .programs li > a.step { display: block; min-height: 0; padding: 10px 0; line-height: 24px; }
}
/* Round 27 (lane D's r26 judging, B+ 8.5 capped / A− 8.8; to-e 2026-11-10 21:4x) */
/* (3) the visit: no empty frame while there is no photo (the slot's markup kept; without «slot» the photo shows) */
.visit .room.slot { display: none; }
/* the pale panel then one centred column of words (r23's), not r25's two columns with the left one empty */
@media (min-width: 901px) {
  .visit:not(:has(.frame img)) .wrap > .text:has(> .room.slot) { display: block; justify-self: stretch; text-align: center; }
  .visit:not(:has(.frame img)) .wrap > .text:has(> .room.slot) > * { margin-inline: auto; }
}
/* (4) the phone hero card: the photo from the shoulder (38.5 % in) to the card's right edge and corner, no navy sliver; the seam a navy
   fade so the score lower-left sits on it */
@media (max-width: 900px) {
  .hero .people .win picture { aspect-ratio: .82; }
  .hero .people .win picture img { left: calc(-.385 * 133.34cqh); }
  .hero .people .win picture::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 28%; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, var(--brand-deep), transparent); }
}
/* (6) a chip names what its card's title does not: none under IELTS nor SAT / AP; the row kept at a desk so the cards keep one shape */
.programs .mark:empty { visibility: hidden; }
@media (max-width: 900px) { .programs .mark:empty { display: none; } }

/* Round 28 (lane D's r27 judging, A− 8.7 / A− 8.8; to-e 2026-11-10 22:2x) */
/* (1) the team's photos at their shown size (index.html: 4:5 at a desk, 1:1 on the phone, a picture each) */
/* (3) the class photo where its words are true: beside the programmes head at a desk (the head stays centred on the page), above
   the programme rows on the phone; lazily, at its shown size */
.programs .lesson { margin: 0 0 20px; }
.programs .lesson img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
/* (6) the phone hero card: a narrower fade at the seam (the tree a margin, not haze); the navy half's top holds the eyebrow, the
   score and name at its foot */
@media (max-width: 900px) {
  .hero .people .win picture::before { width: 12%; }
  .hero .people .win .cap { grid-template-rows: auto 1fr auto auto; align-content: stretch; }
  .hero .people .win .cap > span { display: contents; }
  .hero .people .win .cap .tag { grid-row: 1; align-self: start; }
  .hero .people .win .cap .name { grid-row: 3; }
  .hero .people .win .cap b { grid-row: 4; }
}

/* Round 29 (lane D's r28 judging, A− 8.9 / A− 8.9; to-e 2026-11-10 23:4x) */
/* (1) speed: the logo a 296 × 80 webp at its 148 × 40 (index.html); the class photo at a low fetch priority */
/* (3) the phone hero card: the navy middle closed (the card ~35 px shorter, the score larger), the photo's seam past the tree, on the
   student's shoulder and the plain wall; «IELTS» at the top, the name and score at the foot */
@media (max-width: 900px) {
  .hero .people { aspect-ratio: 342 / 176; }
  .hero .people .win picture { aspect-ratio: .74; }
  .hero .people .win picture img { left: calc(-.44 * 133.34cqh); }
  .hero .people .win .cap b { font-size: 60px; }
}
@media (max-width: 900px) {
  .numbers:has(.basis:empty) li:last-child { display: block; grid-column: auto; }
  /* the hero card ~35 px shorter raises the band, so r22 (1)'s rule (the fold never slices the Cambridge line) is kept the other way:
     the line now ends above 844 px in every language, close under «All results →» as its mark (the desk's pairing) */
  .numbers:has(.basis:empty) { padding-top: 10px; }
  .numbers:has(.basis:empty) .counted { margin-bottom: 10px; }
}
/* (6) the team: measured, the credential row is already reserved when empty (a desk: the four end on one line; the phone: each row
   keeps it); test/home-r29 (6) guards it. The acting director's own credential is the centre's to give */

/* Round 30 (lane D's r29 judging, A− 9.0 / A− 9.0; to-e 2026-11-11 00:2x) */
/* (1) the phone hero card: the photo at least half the card again, the whole head and the IELTS booklet in frame (the full height of the
   portrait, from 41 % in, the booklet's edge: the seam past the tree, its last ornament under the navy fade); «IELTS», the name and the 60 px score one
   group at the navy foot, so no navy between them */
@media (max-width: 900px) {
  .hero .people { aspect-ratio: 342 / 220; }
  .hero .people .win picture { aspect-ratio: .7867; }
  .hero .people .win picture img { left: calc(-.41 * 133.34cqh); }
  .hero .people .win picture::before { width: 14%; }
  .hero .people .win .cap { grid-template-rows: 1fr auto auto auto; row-gap: 4px; }
  .hero .people .win .cap .tag { grid-row: 2; align-self: end; }
  .hero .people .win .cap .name { grid-row: 3; }
  .hero .people .win .cap b { grid-row: 4; }
}
/* (3) the h1 and every h2 balanced: no one-word last line in en/ru/uz */
h1, h2 { text-wrap: balance; }
/* (4) the visit, while it has no photo: a short line, not a large empty panel. The headline, its landmark line and «More on Instagram →»
   centred in one or two short lines, no panel, no eyebrow (the panel comes back with the photo) */
.visit:not(:has(.frame img)) .wrap > .text:has(> .room.slot) { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 10px; row-gap: 6px; text-align: center; max-width: none; }
.visit:not(:has(.frame img)) .wrap > .text:has(> .room.slot) > * { margin: 0; }
.visit:not(:has(.frame img)) .wrap > .text:has(> .room.slot) > .eyebrow { display: none; }
.visit:not(:has(.frame img)) .wrap > .text:has(> .room.slot) > h2 { flex: 0 0 100%; font-size: 22px; line-height: 1.3; }
.visit:not(:has(.frame img)) .wrap > .text:has(> .room.slot) > .sub { font-size: 16px; }
@media (max-width: 900px) {
  .visit:not(:has(.frame img)) .wrap > .text:has(> .room.slot) > h2 { font-size: 19px; }
  .visit:not(:has(.frame img)) .wrap > .text:has(> .room.slot) > .sub { font-size: 15px; }
}
/* (6) the phone figures band: 50 000+ and 15+ an even pair, 95 % (the long line) its own full row under them; «According to Innovative
   Centre» under the whole group */
@media (max-width: 900px) {
  .numbers:has(.basis:empty) .wrap { grid-auto-flow: row dense; }
  .numbers:has(.basis:empty) li:nth-child(1), .numbers:has(.basis:empty) li:nth-child(3) { grid-column: auto; }
  .numbers:has(.basis:empty) li:nth-child(2) { grid-column: 1 / -1; }
}
/* (1)'s taller card moves the band 44 px down, so r22 (1)'s rule (the fold never slices the Cambridge line) is kept the first way again:
   the line wholly under 844 px (24 px under «All results →», which stays on the first screen with the 9+ line in en/ru/uz) */
@media (max-width: 900px) { .numbers:has(.basis:empty) .counted { margin-bottom: 24px; } }
/* (3) the closing call's heading: one step smaller, so its balance has room for no one-word last line (en/ru/uz, phone and desk) */
@media (max-width: 600px) { .closing h2, html[lang="uz"] .closing h2 { font-size: 24px; } }

/* Round 31 (lane D's r30 judging, A− 9.1 / A− 9.1; to-e 2026-11-11 01:3x) */
/* (1) phone speed: the hero card's photo its own file cut to the drawn crop (home/img/hero-card-sukhrob.*, 274 × 348 from 41 % of the
   result portrait, 10 KB webp / 8 KB avif against 32 KB), preloaded for the phone alone (index.html); the half card and the portrait's
   whole height as r30 */
@media (max-width: 900px) {
  .hero .people .win picture img { --h: 100cqh; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
}
/* (2) the phone hero seam: the tree's red ornaments at the photo's left edge (its upper three quarters) under a solid navy edge that
   fades out; the lower quarter, the booklet's edge, as r30 */
@media (max-width: 900px) {
  .hero .people .win picture::before { width: 26%; background: linear-gradient(to right, var(--brand-deep) 0 38%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 0 62%, transparent 80%); mask-image: linear-gradient(to bottom, #000 0 62%, transparent 80%); }
}
/* (5) the visit anchored: its small heading back above the short line, and on the phone no empty air above it (40 px, not 64) */
.visit:not(:has(.frame img)) .wrap > .text:has(> .room.slot) > .eyebrow { display: block; flex: 0 0 100%; }
@media (max-width: 900px) { .visit:not(:has(.frame img)) { padding-top: 40px; } }
/* (6) phone news: each row's one line under its title, as the desk's rows */
@media (max-width: 900px) {
  .news li p { display: block; font-size: 14px; line-height: 1.45; }
}
/* (6) with it, the phone figures' pair on the same baselines: 15+ (the last) kept an older no-gap numeral, so its label sat 2 px higher */
@media (max-width: 900px) { .numbers:has(.basis:empty) li:last-child b { margin: 0 0 2px; } }

/* Round 32 (lane D's r31 judging, A− 9.2 / A− 9.1; to-e 2026-11-11 02:4x) */
/* (1) the phone hero card's seam: one fade, the full height, clear of the face; the tree out by the crop's position (home/img/
   hero-card-sukhrob.*, from 46 % of result-sukhrob, its whole width to the right edge), so no partial mask and no step */
@media (max-width: 900px) {
  .hero .people .win picture::before { width: 9%; background: linear-gradient(to right, var(--brand-deep), transparent);
    -webkit-mask-image: none; mask-image: none; }
}
/* (4) the ru phone eyebrow on one line, with its separator, as en and uz: its caps a step smaller (10 px, narrower phones in proportion) and tighter for ru alone
   (r22 (6)'s break after «Английский язык» retired) */
@media (max-width: 600px) {
  html[lang="ru"] .hero .kicker { white-space: nowrap; letter-spacing: .01em; font-size: min(10px, calc((100vw - 48px) / 34)); }
  html[lang="ru"] .hero .kicker .sep:first-of-type { display: initial; }
  html[lang="ru"] .hero .kicker .sep-br { display: none; }
  /* the line it saves would put the band's Cambridge line across 844 px (r22 (1)): ru's eyebrow keeps 8 px of it under itself */
  html[lang="ru"] .hero .kicker { margin-bottom: 20px; }
}
/* (6) the header's logo without its ≈7 px tagline (home/img/logo-mark-*: the same wordmark, trimmed to it); the tagline kept whole in
   the footer, its logo 240 px wide so the line reads at ≈11 px */
footer .top > div:first-child img { height: 61px; margin-left: 0; }

/* Round 33 (lane D's r32 judging; to-e 2026-11-11 04:5x). The desk-only rules live in home-desk.css (2) */
/* (5) the footer's logo 180 px wide (was 240, which outweighed the phone number); its tagline still whole, ≈8 px */
footer .top > div:first-child img { height: 45px; width: auto; }
/* (6) the ru phone eyebrow in the others' size and tracking (11 px, .1em; r32 (4)'s 10 px / .01em read denser): it wraps at its first
   separator, without the dot, into «Английский язык» / «Международные экзамены · Самарканд» (r22 (6)'s break back), so it never
   shrinks. r22 (1) holds: the band's Cambridge line wholly under 844 px. Pulling it inside 844 in en and ru as well (the parent's
   ask) would take the room from the fold's other lines, so this round keeps the eyebrow (D: «one of the two if they fight») */
@media (max-width: 600px) {
  html[lang="ru"] .hero .kicker { white-space: normal; font-size: 11px; letter-spacing: .1em; margin-bottom: 12px; }
  html[lang="ru"] .hero .kicker .sep:first-of-type { display: none; }
  html[lang="ru"] .hero .kicker .sep-br { display: initial; }
}

/* Round 34 (lane D's r33 judging; to-e 2026-11-11 05:5x) */
/* (3) 360 px, en: the band's Cambridge line straddled 844 (826–846); 4 px less under the 9+ line on phones under 375 px brings it
   wholly above (822–842); ru stays wholly under, uz above; the 390 layout (r22 (1)) is not touched */
@media (max-width: 374px) {
  .numbers:has(.basis:empty) .counted { margin-bottom: 20px; }
}

/* Round 35 (lane D's r34 judging; to-e 2026-11-11 06:2x) */
/* (1) the Cambridge line on the phone's first screen in en and uz (390 en was 845–865): tight under its claim, the gap from
   «All results →» 26 → 10 px and the claim's rows 4 px closer; beside «All results →» it cannot sit (257 + 91 px in 342). ru keeps
   r33 (6)'s two-line eyebrow, so its line stays wholly under 844 (r22 (1)): pulling it above would take ≈ 55 px from the fold */
@media (max-width: 600px) {
  html:not([lang="ru"]) .numbers:has(.basis:empty) .counted { row-gap: 4px; margin-bottom: 8px; }
  html:not([lang="ru"]) .numbers .counted .go { line-height: 18px; }
}

/* The phone's Cambridge seal in the 9.0 card's navy column (r36–r38; ru's «экзаменационный центр» held by js/home.js). r39 (1): one
   seal in every language: the tick on the first line, the lines after it aligned to the text, the last line 13 px from the card's foot
   at every width. --seal lifts the 9.0 6 px above it: two lines 47, three 60 (ru; uz to 369, which breaks at 360–361: errs to air),
   taken from the air above «IELTS»; ru 10 px so «экзаменационный центр» fits the text column at 360 */
.hero .people .seal { display: none; }
@media (max-width: 600px) {
  .hero .people { --seal: 47px; }
  html[lang="ru"] .hero .people { --seal: 60px; }
  .hero .people .seal { position: absolute; left: 0; right: 50.61%; bottom: 0; z-index: 2; display: flex; align-items: flex-start; gap: 4px;
    box-sizing: border-box; padding: 7px 0 13px 12px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .92);
    font-size: 11px; font-weight: 700; line-height: 13px; letter-spacing: .01em; text-wrap: balance; pointer-events: none; }
  .hero .people .seal::before { content: '✓'; flex: none; width: 14px; height: 14px; margin-top: -.5px; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--brand-deep); font: 900 9px/14px system-ui, sans-serif; text-align: center; }
  .hero .people .win .cap { padding: 14px 12px calc(var(--seal) + 6px); }
  .numbers .credential { display: none; }
  html[lang="ru"] .hero .people .seal { font-size: 10px; letter-spacing: -.01em; }
}
@media (max-width: 369px) { html[lang="uz"] .hero .people { --seal: 60px; } }
/* r40: no lone word under a news title or a card's line; (3) tick, name and 9.0 on one 12 px edge */
.news h3, .programs li > p { text-wrap: balance; }
/* r39 (3): an eyebrow that does not fit one line breaks at its first dot and drops it (js/home.js sets .wrapped), as ru on the phone */
.hero .kicker.wrapped .sep:first-of-type { display: none; }
.hero .kicker.wrapped .sep-br { display: initial; }
/* r37 (1): the team section laid out (its portraits fetched) only near the screen, out of the phone's first load */
@media (max-width: 900px) { .team { content-visibility: auto; contain-intrinsic-size: auto 630px; } }