/* Academic Tutoring NYC
   The client's own palette (white, soft lavender, orange, deep indigo text) and Montserrat headings,
   minus the old dark purple hero. Bubbles from a test answer sheet are the one recurring mark. */

:root {
  /* Family "One House" palette (Direction A, 2026-11-06): ink + soft paper, purple accent, orange emphasis */
  --paper: #FAF8FC;
  --lav: #F2EEF8;            /* quiet section ground */
  --lav-2: #E8E2F2;
  --ink: #1C1530;
  --ink-2: #4A4462;
  --ink-3: #5E5872;
  --sheet: #4B2D86;          /* purple: the accent (links, rules, icons, italics) */
  --sheet-ink: #4B2D86;
  --sheet-hover: #3A2270;
  --sheet-big: #4B2D86;
  --sheet-tint: #EFEAF7;
  --orange: #F2894A;         /* NY Smart Start orange: emphasis on dark grounds */
  --orange-ink: #B4561C;     /* orange dark enough for text on paper */
  --on-ink: #FAF8FC;
  --on-ink-soft: rgba(250, 248, 252, .74);
  --rule: #E3DEEC;
  --rule-2: #CFC7DF;
  --ok: #2F7E5B;

  --f-display: "EB Garamond", Garamond, Georgia, serif;
  --f-body: "EB Garamond", Garamond, Georgia, serif;
  --f-mono: "EB Garamond", Garamond, Georgia, serif;

  --step-0: 17px;
  --step-1: clamp(1.1rem, 1rem + .3vw, 1.25rem);
  --step-2: clamp(1.35rem, 1.2rem + .6vw, 1.75rem);
  --step-3: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.4rem + 2.3vw, 3.6rem);
  --step-5: clamp(3rem, 1.6rem + 4vw, 5.6rem);

  --sp-3: 1.5rem; --sp-4: 2.25rem; --sp-5: 3.5rem; --sp-6: clamp(5rem, 9vw, 8.5rem);
  --wrap: 1200px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --r: 4px;
  --r-sm: 4px;
  --shadow: 0 1px 1px rgba(28, 21, 48, .04), 0 18px 40px -24px rgba(28, 21, 48, .3);
  --shadow-sm: none;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 200ms;
  --t-ui: 250ms;
  --t-hero: 800ms;
  --header-h: 88px;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 240ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); scroll-behavior: smooth; scrollbar-color: var(--rule-2) var(--lav); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.65 var(--f-body); -webkit-font-smoothing: antialiased; caret-color: var(--sheet); font-size-adjust: var(--fsa, .46); }
::selection { background: var(--sheet); color: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--sheet); }
:focus-visible { outline: 2.5px solid var(--sheet); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; color: var(--ink); font-size-adjust: none; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--ink-3); }
.small { font-size: .9rem; margin-top: 1rem; }
.small a { color: var(--sheet-ink); }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm); }
.skip:focus { top: 1rem; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.narrow > * { max-width: 760px; }
.section { padding-block: var(--sp-6); }
.section--flush-top { padding-top: 0; }
.sec-head { display: grid; gap: .8rem; margin-bottom: var(--sp-5); max-width: 62ch; }
.sec-head--center { text-align: center; margin-inline: auto; justify-items: center; max-width: 920px; }
.sec-head h2 { font-size: var(--step-4); }
.sec-head p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--sheet); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: .8rem 1.5rem;
  background: var(--bg); color: var(--fg); border: 2px solid var(--bg); border-radius: 999px;
  font: 700 .98rem/1 var(--f-display); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(253, 106, 24, .7);
  transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease); font-size-adjust: none; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--t-ui) var(--ease); }
.btn:hover { --bg: var(--sheet-hover); }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: .55rem 1.15rem; font-size: .92rem; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--rule-2); box-shadow: none; }
.btn--ghost svg { color: var(--sheet); }
.btn--ghost:hover { background: var(--lav); border-color: var(--ink-3); }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font: 700 .98rem/1.3 var(--f-display); color: var(--sheet-ink); text-decoration: none; font-size-adjust: none; }
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform var(--t-ui) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- bubbles: the answer-sheet mark ---------- */
.bub {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 1.7rem; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--sheet); color: var(--sheet-ink); background: #fff;
  font: 500 .7rem/1 var(--f-mono); transition: border-color var(--t-fast) var(--ease); font-size-adjust: var(--fsa, .46); font-variant-numeric: lining-nums tabular-nums; }
.bub svg.scribble { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); pointer-events: none; overflow: visible; }
.scribble path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.bub.is-on { background: var(--ink); color: transparent; border-color: var(--ink); }
.js .bub.is-on.has-scribble { background: #fff; }
.bubs { display: inline-flex; gap: .35rem; }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid transparent; transition: border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease); }
.header.is-scrolled { border-bottom-color: var(--rule); box-shadow: 0 8px 24px -20px rgba(36, 30, 69, .35); }
.header.is-hidden { transform: translateY(-100%); }
.header__in { display: flex; align-items: center; gap: var(--sp-3); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.crest { width: 54px; height: 54px; flex: none; }
.brand__name { display: grid; font: 800 1.08rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); font-size-adjust: none; }
.brand__name b { color: var(--sheet-ink); font-weight: 800; }
.brand__name small { font: 500 .74rem/1.3 var(--f-body); color: var(--ink-3); letter-spacing: 0; text-transform: none; margin-top: .2rem; font-size-adjust: var(--fsa, .46); }
.nav { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.nav a, .nav__mega { white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .75rem; border-radius: 999px; font: 600 .93rem/1 var(--f-display); text-decoration: none; background: none; border: 0; cursor: pointer; color: var(--ink); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); font-size-adjust: none; }
.nav a:hover, .nav__mega:hover, .nav__mega[aria-expanded="true"] { background: var(--lav); }
.nav a[aria-current="page"] { color: var(--sheet-ink); }
.nav__mega svg { width: 1rem; height: 1rem; color: var(--sheet); transition: transform var(--t-ui) var(--ease); }
.nav__mega[aria-expanded="true"] svg { transform: rotate(180deg); }
.header__cta { display: flex; align-items: center; gap: 1rem; }
.header__phone { display: inline-flex; align-items: center; gap: .45rem; font: 700 .98rem/1 var(--f-display); text-decoration: none; white-space: nowrap; font-size-adjust: none; }
.header__phone svg { width: 1.05rem; height: 1.05rem; color: var(--sheet); }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--rule-2); background: #fff; place-items: center; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-block: 1px solid var(--rule); box-shadow: 0 30px 60px -30px rgba(36, 30, 69, .3); padding-block: var(--sp-3) var(--sp-4); max-height: calc(100vh - var(--header-h)); overflow: auto; }
.mega:not([hidden]) { animation: drop var(--t-ui) var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.mega__search { position: relative; max-width: 560px; margin-bottom: var(--sp-3); }
.mega__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3) var(--sp-4); }
.mega__col h3 { font-size: .95rem; margin-bottom: .55rem; padding-bottom: .5rem; border-bottom: 2px solid var(--sheet); }
.mega__col h3 a { text-decoration: none; }
.mega__col li a { display: block; padding: .22rem 0; font-size: .93rem; color: var(--ink-2); text-decoration: none; }
.mega__col li a:hover { color: var(--sheet-ink); }
.mega__col .more { display: inline-flex; align-items: center; gap: .3rem; color: var(--sheet-ink); font-weight: 600; }
.mega__col .more svg { width: .95em; height: .95em; }
.mega__foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--rule); }
.mega__foot a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; }
.mega__foot svg { width: 1em; height: 1em; color: var(--sheet); }

.search { position: relative; display: flex; align-items: center; gap: .6rem; background: var(--lav); border: 1.5px solid var(--rule); border-radius: 999px; padding: 0 1rem; min-height: 50px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.search:focus-within { border-color: var(--sheet); background: #fff; }
.search svg { width: 1.15rem; height: 1.15rem; color: var(--sheet); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--ink); padding: .7rem 0; outline: none; }
.search input::placeholder { color: var(--ink-3); }
.search--big { min-height: 58px; font-size: 1.05rem; background: #fff; }
.search__results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + .4rem); background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: .4rem; max-height: 60vh; overflow: auto; }
.search__results--inline { position: static; margin-top: .5rem; box-shadow: none; }
.search__results a { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border-radius: var(--r-sm); text-decoration: none; }
.search__results a:hover, .search__results a.is-active { background: var(--sheet-tint); }
.search__results small { color: var(--ink-3); white-space: nowrap; }
.search__results .none { padding: .7rem .8rem; color: var(--ink-3); }

.drawer { position: fixed; inset: 0; z-index: 80; background: #fff; padding: 1rem var(--gutter) 2rem; overflow: auto; display: grid; align-content: start; gap: 1.2rem; }
.drawer:not([hidden]) { animation: drawer var(--t-ui) var(--ease); }
@keyframes drawer { from { opacity: 0; transform: translateY(-10px); } }
.drawer__top { display: flex; justify-content: space-between; align-items: center; }
.drawer__top .menu-btn { display: grid; }
.drawer__nav { display: grid; }
.drawer__nav a { font: 800 1.45rem/1.2 var(--f-display); padding: .45rem 0; text-decoration: none; border-bottom: 1px solid var(--rule); font-size-adjust: none; }
.drawer__h { font-weight: 700; color: var(--ink-3); font-size: .9rem; margin-bottom: .3rem; }
.drawer__groups details { border-bottom: 1px solid var(--rule); }
.drawer__groups summary { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.drawer__groups summary::-webkit-details-marker { display: none; }
.drawer__groups summary svg { width: 1.1rem; height: 1.1rem; color: var(--sheet); transition: transform var(--t-ui) var(--ease); }
.drawer__groups details[open] summary svg { transform: rotate(180deg); }
.drawer__groups ul { padding-bottom: .8rem; columns: 2; }
.drawer__groups li a { display: block; padding: .3rem 0; color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.drawer__groups .more { color: var(--sheet-ink); font-weight: 600; }
.drawer__foot { display: grid; gap: 1rem; justify-items: start; }
.drawer .search__results { position: static; box-shadow: none; }
body.menu-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: clamp(1.8rem, 1rem + 3vw, 3.5rem); background: linear-gradient(180deg, #fff 0%, var(--lav) 100%); }
.hero::before { content: ""; position: absolute; right: 0; top: 0; width: 40vw; height: 40vw; background: radial-gradient(circle at 70% 20%, rgba(253, 106, 24, .10), transparent 60%); pointer-events: none; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; position: relative; }
.hero__t { font-size: var(--step-5); line-height: 1.06; letter-spacing: -.03em; margin-bottom: var(--sp-3); }
.js .hero__copy > * { animation: rise var(--t-hero) var(--ease) both; }
.js .hero__copy > :nth-child(2) { animation-delay: 80ms; }
.js .hero__copy > :nth-child(3) { animation-delay: 160ms; }
.js .hero__copy > :nth-child(4) { animation-delay: 240ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.hero__lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--sp-4); }
.hero__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: var(--sp-4); color: var(--ink-2); font-size: .95rem; font-weight: 600; }
.hero__facts li { display: inline-flex; align-items: center; gap: .5rem; }
.hero__facts svg { width: 1.15rem; height: 1.15rem; color: var(--sheet); }
.hero__media { position: relative; padding-bottom: 2.5rem; }
.ph { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--lav-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--hero-main { aspect-ratio: 5 / 4; box-shadow: var(--shadow); border-radius: 24px; }
.js .ph--hero-main { animation: photo-in 900ms var(--ease) both 120ms; }
@keyframes photo-in { from { opacity: 0; transform: scale(.97); } }
.hero__badge { position: absolute; left: -1.5rem; bottom: 0; display: flex; gap: .9rem; align-items: center; max-width: 340px; background: #fff; border-radius: var(--r); padding: 1rem 1.2rem; box-shadow: var(--shadow); }
.js .hero__badge { animation: rise var(--t-hero) var(--ease) both 450ms; }
.hero__badge > svg { width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: 12px; background: var(--sheet-tint); color: var(--sheet); flex: none; }
.hero__badge b { display: block; font: 800 1rem/1.25 var(--f-display); font-size-adjust: none; }
.hero__badge span { font-size: .9rem; color: var(--ink-2); line-height: 1.4; display: block; margin-top: .15rem; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-radius: var(--r); box-shadow: var(--shadow-sm); margin-top: var(--sp-5); position: relative; top: 2.5rem; border: 1px solid var(--rule); }
.section .stats { top: 0; margin-top: 0; }
.stat { padding: 1.4rem 1.4rem 1.3rem; display: grid; gap: .3rem; align-content: start; }
.stat + .stat { border-left: 1px solid var(--rule); }
.stat__n { font: 800 clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem)/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; font-size-adjust: none; }
.stat__n i { font-style: normal; color: var(--sheet); }
.stat__l { color: var(--ink-2); font-size: .93rem; line-height: 1.35; }
.hero + .section { padding-top: calc(var(--sp-6) + 2.5rem); }

/* ---------- services: the original's eight photo boxes ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.svc { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; transition: box-shadow var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); }
.svc:hover { box-shadow: var(--shadow); }
.svc__pic { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--lav-2); }
.svc__pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 600ms var(--ease); }
.svc:hover .svc__pic img { transform: scale(1.08); }
.svc__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(36, 30, 69, .78)); }
.svc__t { position: absolute; left: 1.1rem; right: 1rem; bottom: .9rem; z-index: 1; color: #fff; font: 800 1.15rem/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); font-size-adjust: none; }
.svc__body { display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem 1.2rem 1.3rem; }
.svc__from { font-size: .88rem; font-weight: 700; color: var(--sheet-ink); }
.svc__list { display: grid; gap: .05rem; align-content: start; }
.svc__list a { display: block; padding: .2rem 0 .2rem .95rem; position: relative; font-size: .93rem; color: var(--ink-2); text-decoration: none; }
.svc__list a::before { content: ""; position: absolute; left: 0; top: .74em; width: .42rem; height: .42rem; border-radius: 50%; border: 1.5px solid var(--sheet); }
.svc__list a:hover { color: var(--ink); }
.svc__list a:hover::before { background: var(--sheet); }
.svc__all { align-self: center; margin-top: auto; }
.svc__list { margin-bottom: .6rem; }
.svc-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-top: var(--sp-4); }
.svc-more > span { font-weight: 600; color: var(--ink-2); margin-right: .3rem; }
.svc-more a { padding: .5rem 1rem; border-radius: 999px; background: var(--lav); font-weight: 600; font-size: .93rem; text-decoration: none; transition: background var(--t-fast) var(--ease); }
.svc-more a:hover { background: var(--lav-2); }
.svc-more .svc-more__all { background: none; color: var(--sheet-ink); display: inline-flex; align-items: center; gap: .35rem; }
.svc-more__all svg { width: 1em; height: 1em; }

/* ---------- finder ---------- */
.finder-sec { background: var(--lav); }
.finder-sec__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.finder-sec__copy h2 { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.finder-sec__copy p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; margin-bottom: var(--sp-4); }
.sheet { position: relative; background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 1.6rem 1.8rem 1.5rem; border: 1px solid var(--rule); }
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-bottom: .9rem; margin-bottom: .4rem; border-bottom: 2px solid var(--sheet); }
.sheet__head h2 { font-size: var(--step-1); }
.sheet__hint { font-size: .85rem; color: var(--ink-3); font-weight: 600; }
.sheet__row { border: 0; margin: 0; padding: .9rem 0; border-bottom: 1px dashed var(--rule-2); min-width: 0; }
.sheet__row legend { float: left; width: 100%; padding: 0; margin-bottom: .6rem; font: 700 .95rem/1.3 var(--f-display); font-size-adjust: none; }
.sheet__row legend .num { color: var(--sheet-ink); margin-right: .15rem; }
.opts { clear: both; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.opt { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem .3rem .3rem; border-radius: 999px; border: 1px solid var(--rule); cursor: pointer; font-size: .93rem; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.opt:hover { background: var(--sheet-tint); border-color: #FFD2B6; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt input:focus-visible + .bub { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.opt:has(input:checked) { border-color: var(--ink); background: #fff; }
.opt input:checked ~ .opt__t { font-weight: 700; }
.sheet__out { min-height: 8rem; padding-top: 1rem; }
.sheet__idle { color: var(--ink-3); font-size: .95rem; padding: .4rem 0; }
.sheet__idle a { color: var(--sheet-ink); }
.sheet__res-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font: 700 .95rem/1.3 var(--f-display); margin-bottom: .5rem; font-size-adjust: none; }
.sheet__res-h a { font-weight: 700; font-size: .88rem; color: var(--sheet-ink); text-decoration: none; white-space: nowrap; }
.res { display: grid; gap: .1rem; }
.res a { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .6rem .75rem; border-radius: var(--r-sm); text-decoration: none; animation: res-in var(--t-ui) var(--ease) both; }
.res a:hover { background: var(--lav); }
.res b { font-weight: 700; }
.res small { color: var(--ink-3); grid-column: 1 / -1; font-size: .85rem; line-height: 1.4; }
.res .p { font-weight: 700; font-size: .88rem; color: var(--sheet-ink); white-space: nowrap; }
@keyframes res-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- about ---------- */
.services { padding-bottom: var(--sp-5); }
.services + .about { padding-top: var(--sp-4); }
.about__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; }
.about__media { position: relative; padding: 0 12% 14% 0; }
.ph--about { aspect-ratio: 4 / 3; }
.ph--about2 { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 1; border: 6px solid #fff; border-radius: 22px; box-shadow: var(--shadow); }
.about h2 { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.checks { display: grid; gap: .8rem; margin: var(--sp-4) 0; }
.checks li { display: flex; gap: .8rem; align-items: start; font-weight: 500; }
.checks svg { width: 1.45rem; height: 1.45rem; color: var(--sheet); flex: none; margin-top: .1rem; }

/* ---------- mission (the original's "Our mission" block) ---------- */
.mission { background: var(--lav); }
.mission__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; }
.ph--mission { aspect-ratio: 4 / 5; box-shadow: var(--shadow); border-radius: 22px; }
.mission h2 { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.mcards { display: grid; gap: 1rem; margin-top: var(--sp-4); }
.mcard { display: flex; gap: 1rem; align-items: start; background: #fff; border-radius: var(--r); padding: 1.2rem 1.4rem; box-shadow: var(--shadow-sm); border: 1px solid var(--rule); }
.mcard svg { width: 1.7rem; height: 1.7rem; color: var(--sheet); flex: none; }
.mcard p { color: var(--ink-2); }

/* ---------- steps ---------- */
.steps__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; }
.steps__media { position: relative; padding-bottom: 18%; }
.ph--tall { aspect-ratio: 4 / 5; width: 82%; }
.ph--small { position: absolute; right: 0; bottom: 0; width: 48%; aspect-ratio: 1; border: 6px solid #fff; border-radius: 22px; box-shadow: var(--shadow); }
.steps h2 { font-size: var(--step-4); margin-bottom: var(--sp-4); }
.steps__list { display: grid; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding: 1.3rem 0; border-top: 1px solid var(--rule); }
.step:last-child { border-bottom: 1px solid var(--rule); }
.step h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.step p { color: var(--ink-2); max-width: 52ch; }
.step__bub { width: 2.6rem; aspect-ratio: 1; border-radius: 50%; background: var(--sheet); color: #fff; display: grid; place-items: center; font: 800 1.05rem/1 var(--f-display); font-size-adjust: none; }
.steps__note { margin-top: var(--sp-3); font-weight: 700; display: flex; align-items: center; gap: .6rem; }
.steps__note::before { content: ""; width: 1.4rem; height: 2px; background: var(--sheet); }

/* ---------- tests by stage ---------- */
.tests { background: var(--lav); }
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.stage { background: #fff; border-radius: var(--r); padding: 1.5rem 1.4rem 1rem; border: 1px solid var(--rule); }
.stage h3 { font-size: var(--step-1); }
.stage > p { color: var(--ink-3); font-size: .9rem; margin: .2rem 0 .9rem; }
.stage li a { display: grid; grid-template-columns: 1fr auto; gap: 0 .6rem; padding: .7rem 0; border-top: 1px solid var(--rule); text-decoration: none; }
.tst__n { font-weight: 700; }
.tst__w { grid-row: 2; color: var(--ink-3); font-size: .84rem; }
.tst__p { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .84rem; font-weight: 700; color: var(--sheet-ink); white-space: nowrap; }
.stage li a:hover .tst__n { color: var(--sheet-ink); }
.callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.callout { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: start; background: #fff; border: 1px solid var(--rule); border-left: 0; border-radius: var(--r); padding: 1.5rem 1.6rem; box-shadow: inset 4px 0 0 var(--sheet); }
.callout > svg { width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: 12px; background: var(--sheet-tint); color: var(--sheet); }
.callout h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.callout p { color: var(--ink-2); }
.callout .link-arrow { grid-column: 2; margin-top: .4rem; }

/* ---------- beyond ---------- */
.bcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.bcard { display: grid; gap: .5rem; align-content: start; text-decoration: none; }
.bcard figure { margin: 0 0 .5rem; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--lav-2); }
.bcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.bcard:hover img { transform: scale(1.04); }
.bcard h3 { font-size: var(--step-1); display: flex; align-items: center; gap: .4rem; }
.bcard h3 svg { width: 1.05em; height: 1.05em; color: var(--sheet); transition: transform var(--t-ui) var(--ease); }
.bcard:hover h3 svg { transform: translateX(4px); }
.bcard p { color: var(--ink-2); font-size: .95rem; }

/* ---------- teachers ---------- */
.teachers__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4); align-items: end; margin-bottom: var(--sp-4); }
.teachers__head h2 { font-size: var(--step-4); }
.teachers__head p { color: var(--ink-2); }
.teachers__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-4) var(--sp-3); }
.teachers__grid--rail { display: flex; overflow-x: auto; gap: var(--sp-3); scroll-snap-type: x proximity; padding-bottom: .8rem; scrollbar-width: thin; }
.teachers__grid--rail .tch { width: 190px; flex: none; scroll-snap-align: start; }
.tch figure { margin: 0 0 .8rem; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--lav-2); }
.tch img { width: 100%; height: 100%; object-fit: cover; }
.tch__n { font: 700 1rem/1.3 var(--f-display); font-size-adjust: none; }
.tch__r { color: var(--ink-3); font-size: .9rem; }

/* ---------- prices ---------- */
.prices__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.prices h2 { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.prices p { color: var(--ink-2); max-width: 44ch; margin-bottom: var(--sp-3); }
.prices p a { color: var(--sheet-ink); }
.receipt { margin: 0; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 1.2rem 1.6rem; border: 1px solid var(--rule); }
.receipt div { display: flex; align-items: baseline; gap: .8rem; padding: .9rem 0; border-bottom: 1px dashed var(--rule-2); }
.receipt div:last-child { border-bottom: 0; }
.receipt dt { flex: 1; }
.receipt dd { margin: 0; font: 800 .98rem/1.2 var(--f-display); color: var(--ink); white-space: nowrap; font-size-adjust: none; }

/* ---------- FAQ ---------- */
.faq { background: var(--lav); }
.faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
.faq__head h2 { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.faq__head p { color: var(--ink-2); }
.faq__head a { color: var(--sheet-ink); }
.faq__list { background: #fff; border-radius: var(--r); padding: .4rem 1.5rem; border: 1px solid var(--rule); }
.qa + .qa { border-top: 1px solid var(--rule); }
.qa summary { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.15rem 0; cursor: pointer; list-style: none; font: 700 1rem/1.4 var(--f-display); font-size-adjust: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa__n { font: 700 .82rem/1 var(--f-display); color: var(--sheet-ink); font-size-adjust: none; }
.bubs--qa .bub { width: 1.5rem; font-size: .72rem; }
.qa[open] .bubs--qa .bub:first-child { background: var(--ink); color: transparent; border-color: var(--ink); }
.js .qa[open] .bubs--qa .bub.has-scribble:first-child { background: #fff; }
.qa__a { padding: 0 3rem 1.3rem 2.2rem; color: var(--ink-2); max-width: 64ch; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--lav); padding-block: var(--sp-5); border-top: 1px solid var(--rule); }
.cta-band__in { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.cta-band h2 { font-size: var(--step-3); margin-bottom: .5rem; }
.cta-band p { max-width: 54ch; color: var(--ink-2); }
.cta-band__btns { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- contact ---------- */
.contact-sec { background: linear-gradient(180deg, #fff, var(--lav)); }
.contact { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.contact-sec__h { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.contact__info { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.page-hero + .section .contact__info { margin-top: 0; margin-bottom: var(--sp-3); }
.info h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin-bottom: .45rem; }
.info h3 svg { width: 1.1rem; height: 1.1rem; color: var(--sheet); }
.info a { color: var(--ink); }
.info .big { font: 800 var(--step-2)/1.1 var(--f-display); text-decoration: none; font-size-adjust: none; }
.hours { display: grid; gap: .25rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 280px; }
.sheet--form .sheet__row { border-bottom: 0; padding-bottom: 0; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; margin: 1.2rem 0; }
.field { display: grid; gap: .35rem; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font: 700 .88rem/1.3 var(--f-display); font-size-adjust: none; }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--lav); border: 1.5px solid var(--rule); border-radius: var(--r-sm); padding: .75rem .9rem; min-height: 50px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sheet); background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field.has-err input { border-color: #B3261E; background: #FCEDEC; }
.err { color: #9E2219; font-size: .85rem; font-weight: 600; }
.err:empty { display: none; }
.consent { display: flex; gap: .7rem; align-items: start; font-size: .92rem; color: var(--ink-2); margin-bottom: .6rem; }
.consent input { width: 1.2rem; height: 1.2rem; accent-color: var(--sheet); margin-top: .15rem; flex: none; }
.consent a { color: var(--sheet-ink); }
.err--consent { margin-bottom: .8rem; }
.form__done { margin-top: 1.2rem; padding: 1.1rem 1.2rem; background: var(--sheet-tint); border-radius: var(--r-sm); }
.form__done h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.form__done a { color: var(--sheet-ink); }
.form__done:focus { outline: none; }
.form__fail { margin-top: .9rem; color: var(--sheet-ink); font-weight: 600; }
.form__fail a { color: inherit; }
.sheet--form button[disabled] { opacity: .6; cursor: progress; }
.map { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); aspect-ratio: 4 / 3; background: var(--lav); }
.map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- inner pages ---------- */
.page-hero { padding-block: clamp(2rem, 1rem + 3vw, 3.8rem) var(--sp-5); background: linear-gradient(180deg, #fff, var(--lav)); margin-bottom: var(--sp-5); }
.page-hero h1 { font-size: var(--step-5); letter-spacing: -.03em; line-height: 1.06; max-width: 20ch; margin-top: var(--sp-3); }
.page-hero__lede { font-size: var(--step-1); color: var(--ink-2); max-width: 58ch; margin-top: var(--sp-3); line-height: 1.55; }
.page-hero--split h1 { font-size: var(--step-4); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.ph--hero { aspect-ratio: 5 / 4; box-shadow: var(--shadow); border-radius: 22px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .88rem; color: var(--ink-3); }
.crumbs li + li::before { content: "›"; margin-right: .35rem; color: var(--sheet); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--sheet-ink); }
.ticks { display: grid; gap: .6rem; margin-top: var(--sp-3); }
.ticks li { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.bubs--tick .bub { width: 1.4rem; font-size: .72rem; }

.subj-hero { padding-block: clamp(2rem, 1rem + 3vw, 3.8rem) var(--sp-5); background: linear-gradient(180deg, #fff, var(--lav)); }
.subj-hero h1 { font-size: var(--step-5); letter-spacing: -.03em; line-height: 1.06; margin-top: var(--sp-3); max-width: 18ch; }
.subj-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-3); }
.subj-hero__meta li { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; font-weight: 600; font-size: .93rem; background: #fff; border: 1px solid var(--rule); }
.subj-hero__meta svg { width: 1rem; height: 1rem; color: var(--sheet); }
.subj { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(2rem, 1rem + 4vw, 5.5rem); padding-block: var(--sp-5) var(--sp-6); align-items: start; }
.subj__side { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: var(--sp-3); }
.pricecard { background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 1.5rem; display: grid; gap: .8rem; border: 1px solid var(--rule); }
.pricecard .sheet__marks { display: none; }
.pricecard h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sheet-ink); border-bottom: 2px solid var(--sheet); padding-bottom: .6rem; }
.price__big { font: 800 var(--step-2)/1.15 var(--f-display); font-size-adjust: none; }
.pricecard__detail { font-size: .93rem; color: var(--ink-2); display: grid; gap: .5rem; }
.pricecard__detail ul { display: grid; gap: .2rem; }
.pricecard__detail li { padding-left: 1rem; position: relative; }
.pricecard__detail li::before { content: ""; position: absolute; left: 0; top: .62em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--sheet); }
.pricecard__detail strong { color: var(--ink); }
.pricecard__fine { font-size: .85rem; color: var(--ink-3); }
.flyer { margin: 0; }
.flyer img { border-radius: var(--r-sm); border: 1px solid var(--rule); }
.flyer figcaption { font-size: .84rem; color: var(--ink-3); margin-top: .4rem; }
.more h2 { font-size: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--ink); }
.more ul { margin-bottom: .8rem; }
.more li a { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: .95rem; }
.more li a:hover .ix__name { color: var(--sheet-ink); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.gallery figure { margin: 0; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.6rem; }
.prose h3 { font-size: var(--step-1); margin-top: 2rem; }
.prose h2 + *, .prose h3 + * { margin-top: .75rem; }
.prose > :first-child { margin-top: 0; }
.prose a { color: var(--sheet-ink); }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { display: grid; gap: .35rem; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before { content: ""; position: absolute; left: .1rem; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sheet); }
.prose ol { counter-reset: o; }
.prose ol li { counter-increment: o; position: relative; padding-left: 2rem; }
.prose ol li::before { content: counter(o); position: absolute; left: 0; top: .15em; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--sheet-tint); display: grid; place-items: center; font: 700 .75rem/1 var(--f-display); color: var(--sheet-ink); font-size-adjust: none; }
.prose--lg { font-size: var(--step-1); line-height: 1.6; }
.prose .note { padding: 1rem 1.2rem; background: var(--sheet-tint); border-radius: var(--r-sm); font-weight: 600; }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; }
.prose table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.prose td, .prose th { padding: .7rem .9rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose tr:first-child td { background: var(--lav); font-weight: 700; }

.hubrows { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.hubrows li + li a { border-top: 1px solid var(--rule); }
.hubrows a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto auto; gap: 1.5rem; align-items: center; padding: 1.15rem 1.4rem; text-decoration: none; transition: background var(--t-fast) var(--ease); }
.hubrows a:hover { background: var(--lav); }
.hubrow__n { font: 800 var(--step-1)/1.2 var(--f-display); font-size-adjust: none; }
.hubrow__d { color: var(--ink-2); font-size: .95rem; }
.hubrow__p { font-weight: 700; font-size: .9rem; color: var(--sheet-ink); white-space: nowrap; }
.hubrow__go svg { width: 1.2rem; height: 1.2rem; color: var(--sheet); transition: transform var(--t-ui) var(--ease); }
.hubrows a:hover .hubrow__go svg { transform: translateX(4px); }

/* program index */
.ix__tools { display: grid; gap: 1rem; margin-bottom: var(--sp-4); }
.ix__tools .search { max-width: 640px; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { min-height: 40px; padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--rule-2); background: #fff; cursor: pointer; font-weight: 600; font-size: .92rem; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.chip:hover { border-color: var(--sheet); }
.chip.is-on { background: var(--sheet); border-color: var(--sheet); color: #fff; }
.ix__cols { columns: 3 300px; column-gap: var(--sp-5); }
.ix__group { break-inside: avoid; margin-bottom: var(--sp-4); }
.ix__group h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--step-1); padding-bottom: .5rem; border-bottom: 2px solid var(--sheet); margin-bottom: .2rem; }
.ix__group h3 a { text-decoration: none; }
.ix__group h3 .num { font-size: .8rem; color: var(--ink-3); }
.ix__group li a { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; text-decoration: none; border-bottom: 1px solid var(--rule); }
.ix__name { font-weight: 500; }
.ix__grp { font-size: .8rem; color: var(--ink-3); }
.ix__dots { flex: 1; min-width: 1rem; border-bottom: 1.5px dotted var(--rule-2); transform: translateY(-.3em); }
.ix__price { font-weight: 700; font-size: .86rem; color: var(--sheet-ink); white-space: nowrap; }
.ix__group li a:hover .ix__name { color: var(--sheet-ink); }
.ix__empty { color: var(--ink-2); }
mark { background: #FFE0CC; color: inherit; border-radius: 2px; padding: 0 .05em; }

/* timetable */
.tt { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem 1rem 1rem .4rem; }
.tt__hours { position: relative; margin-top: 2.2rem; height: 430px; }
.tt__hours span { position: absolute; top: var(--top); right: .5rem; font-size: .72rem; color: var(--ink-3); transform: translateY(-50%); }
.tt__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.tt__day h3 { font: 700 .78rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); text-align: center; height: 2.2rem; display: grid; place-items: center; font-size-adjust: none; }
.tt__col { position: relative; height: 430px; border-radius: var(--r-sm); background: var(--lav); }
.tt__ev { position: absolute; left: 3px; right: 3px; top: var(--top); height: calc(var(--h) - 4px); margin-top: 2px; border-radius: 8px; padding: .4rem .5rem; background: var(--sheet-tint); border-left: 3px solid var(--sheet); text-decoration: none; overflow: hidden; display: grid; align-content: start; gap: .1rem; font-size: .76rem; line-height: 1.25; transition: filter var(--t-fast) var(--ease); }
.tt__ev b { font-weight: 700; font-size: .8rem; }
.tt__ev span { color: var(--ink-2); }
.tt__ev .num { color: var(--sheet-ink); font-weight: 600; }
.tt__ev:hover { filter: brightness(.96); }
.tt__ev--art-school { background: #ECE6FB; border-color: #7A5CD6; }
.tt__ev--art-school .num { color: #5B3DB8; }
.tt__ev--math-club, .tt__ev--stem-club { background: #E3F4EC; border-color: var(--ok); }
.tt__ev--math-club .num, .tt__ev--stem-club .num { color: #1F7A50; }
.strip { display: flex; gap: 1rem; overflow-x: auto; padding: var(--sp-5) var(--gutter) var(--sp-6); scroll-snap-type: x proximity; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip figure { margin: 0; flex: none; width: clamp(220px, 24vw, 320px); aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; scroll-snap-align: center; }
.strip img { width: 100%; height: 100%; object-fit: cover; }

.weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.wk { padding: 1.4rem 1.4rem 1.5rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); display: grid; gap: .45rem; align-content: start; }
.wk__n { font: 700 .8rem/1 var(--f-display); color: var(--sheet-ink); text-transform: uppercase; letter-spacing: .06em; font-size-adjust: none; }
.wk h3 { font-size: var(--step-2); }
.wk p { color: var(--ink-2); }
.wk__trip { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink) !important; font-size: .93rem; }
.wk__trip svg { width: 1rem; height: 1rem; color: var(--sheet); }

.nf .search { max-width: 560px; margin-top: var(--sp-4); }
.nf__sheet { display: grid; gap: .5rem; margin-top: var(--sp-5); justify-content: start; }

/* ---------- footer ---------- */
.footer { background: var(--lav); border-top: 1px solid var(--rule); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-4); padding-block: var(--sp-5); }
.footer__brand p { color: var(--ink-2); margin-top: 1rem; max-width: 36ch; }
.footer h2 { font: 800 .82rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: var(--sheet-ink); margin-bottom: 1rem; font-size-adjust: none; }
.footer ul { display: grid; gap: .45rem; }
.footer ul a { text-decoration: none; color: var(--ink-2); }
.footer ul a:hover { color: var(--sheet-ink); }
.footer .hours { margin-top: 1rem; color: var(--ink-2); font-size: .92rem; }
.socials { display: flex; gap: .5rem; margin-top: 1.2rem; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); border: 1px solid var(--rule); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.socials a:hover { background: var(--sheet); color: #fff; }
.socials svg { width: 18px; height: 18px; }
.footer__base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.4rem 2rem; border-top: 1px solid var(--rule-2); color: var(--ink-3); font-size: .88rem; }


/* ---------- tuition & policies ---------- */
.svc__ic { width: 3rem; height: 3rem; border-radius: 14px; background: var(--sheet-tint); color: var(--sheet); display: grid; place-items: center; flex: none; }
.svc__ic svg { width: 1.45rem; height: 1.45rem; }
.glance h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sheet-ink); margin-bottom: .7rem; }
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.pcol { display: grid; gap: 1.25rem; }
.pc__v span.solo { width: auto; }
.pcard { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 1.5rem 1.6rem 1rem; }
.pcard header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.pcard h3 { font-size: var(--step-2); }
.pcard header p { color: var(--ink-3); font-size: .92rem; }
.pc__head { display: flex; justify-content: flex-end; gap: 0; font: 700 .74rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding-bottom: .5rem; border-bottom: 2px solid var(--sheet); font-size-adjust: none; }
.pc__head span, .pc__v span { width: 6.2rem; text-align: right; }
.pc__v--1 span { width: auto; }
.pc__rows li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.pc__rows li:last-child { border-bottom: 0; }
.pc__n { font: 700 .98rem/1.3 var(--f-display); font-size-adjust: none; }
.pc__n small { display: block; font: 400 .85rem/1.35 var(--f-body); color: var(--ink-3); margin-top: .1rem; font-size-adjust: var(--fsa, .46); }
.pc__v { display: flex; flex: none; }
.pc__v span { font: 800 1rem/1 var(--f-display); color: var(--ink); white-space: nowrap; font-size-adjust: none; }
.pc__v--1 span { color: var(--sheet-ink); }
.rules-sec { background: var(--lav); }
.rules-sec .sec-head a, .pol-contact a { color: var(--sheet-ink); font-weight: 600; }
.pols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pol { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 1.6rem; display: grid; gap: .6rem; align-content: start; }
.pol h3 { font-size: var(--step-1); margin-top: .4rem; }
.pol p { color: var(--ink-2); }
.pol-contact { text-align: center; color: var(--ink-2); margin-top: var(--sp-4); }
@media (max-width: 1020px) { .pcards, .pols { grid-template-columns: minmax(0, 1fr); } }
.pcol, .pcard, .pc__n { min-width: 0; }
@media (max-width: 400px) {
  .pcard { padding-inline: .9rem; }
  .pc__rows li { gap: .6rem; }
  .pc__head span, .pc__v span, .pc__head .pc__v span { width: 4.6rem; }
}
@media (max-width: 700px) {
  .pcard { padding: 1.2rem 1.1rem .6rem; }
  .pc__head span, .pc__v span { width: 5.4rem; }
  .pc__head { font-size: .66rem; letter-spacing: .02em; gap: .3rem; }
  .pc__v { gap: .3rem; }
  .pc__v--1 span { width: auto; }
  .pc__v span { font-size: .93rem; }
}

/* ---------- responsive ---------- */
@media (max-width: 1360px) {
  .nav a[href="/registration-lesson-policies/"] { display: none; }
}
@media (max-width: 1180px) {
  .header__phone .num { display: none; }
  .mega__grid { grid-template-columns: repeat(4, 1fr); }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .nav, .header__phone { display: none; }
  .menu-btn { display: grid; }
  .header__in { justify-content: space-between; }
  .hero__in, .finder-sec__in, .mission__in, .about__in, .steps__in, .prices__in, .faq__in, .contact, .page-hero__grid { grid-template-columns: 1fr; }
  .hero__badge { left: 1rem; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-left: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-cols { grid-template-columns: 1fr; }
  .bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callouts { grid-template-columns: 1fr; }
  .subj { grid-template-columns: 1fr; }
  .subj__side { position: static; }
  .teachers__head { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  :root { --header-h: 66px; }
  .header__cta .btn { display: none; }
  .btn { white-space: normal; text-align: center; }
  .brand__name { font-size: .95rem; }
  .crest { width: 46px; height: 46px; }
  .sec-head h2 { font-size: var(--step-3); }
  .hero__btns .btn { flex: 1 1 auto; }
  .hero__badge { position: relative; left: 0; margin: -2rem 1rem 0; max-width: none; }
  .hero__media { padding-bottom: 0; }
  .stats { grid-template-columns: 1fr 1fr; top: 1.5rem; }
  .stat, .stat + .stat { border-left: 0; border-top: 1px solid var(--rule); padding: 1rem 1.1rem; }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--rule); }
  .stat:last-child { grid-column: 1 / -1; }
  .svc-grid, .stages, .bcards { grid-template-columns: 1fr; }
  .svc__pic { aspect-ratio: 16 / 9; }
  .svc__list { grid-template-columns: 1fr 1fr; column-gap: .8rem; }
  .bcard figure { aspect-ratio: 16 / 10; }
  .sheet { padding: 1.2rem 1.1rem; }
  .fields { grid-template-columns: 1fr; }
  .hubrows a { grid-template-columns: 1fr auto; gap: .3rem 1rem; }
  .hubrow__d { grid-column: 1 / -1; grid-row: 2; }
  .hubrow__go { display: none; }
  .tt { overflow-x: auto; }
  .tt__days { min-width: 560px; }
  .ix__cols { columns: 1; }
  .footer__grid { grid-template-columns: 1fr; }
  .qa__a { padding: 0 0 1.2rem 0; }
  .qa summary { grid-template-columns: auto 1fr; }
  .bubs--qa { display: none; }
  .faq__list { padding: .2rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Compact home hero + shorter homepage (2026-11-05, after Nicky's review) */
.hero--compact { padding-top: clamp(1.4rem, .8rem + 2vw, 2.5rem); }
.hero--compact .hero__t { font-size: var(--step-4); line-height: 1.08; }
.hero--compact .hero__lede { font-size: 1.1rem; }
.hero--compact .hero__btns, .hero--compact .hero__facts { margin-top: var(--sp-3); }
.hero--compact .ph--hero-main { aspect-ratio: 16 / 11; }
.hero--compact .stats { margin-top: var(--sp-4); }
.svc-grid--compact .svc__body { gap: .7rem; padding: 1rem 1.1rem 1.1rem; }
.svc-grid--compact .svc__pic { aspect-ratio: 16 / 9; }
.svc-grid--compact .svc__all { align-self: flex-start; }
.stages__note { margin-top: var(--sp-3); font-size: .9rem; color: var(--ink-2); }

/* ---------- Top strip: sister-school code tabs + phone (build.py page(), family_bar.strip()) ----------
   A thin deep-indigo line (the one place indigo is used as a band), 36px at every width. The current school
   (AT NYC) is a white tab with an orange top edge that runs into the white header; the other codes are quiet.
   First code lines up with the logo; the phone lines up with the header's right edge. */
.tstrip { background: var(--ink); color: #CFC9E8; font: 700 11.5px/1 var(--f-display); font-size-adjust: none; }
.tstrip__in { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; height: 36px; }
.tstrip .fstrip { display: flex; flex: none; }
.tstrip .fstrip ul { display: flex; align-items: stretch; list-style: none; margin: 0 0 0 -12px; padding: 0; }
.tstrip .fstrip li { display: flex; }
.tstrip .fstrip a { display: flex; align-items: center; height: 32px; margin-top: 4px; padding: 2px 12px 0; border-radius: 7px 7px 0 0; color: #CFC9E8; text-decoration: none; letter-spacing: .09em; white-space: nowrap; transition: color var(--t-ui, .2s) ease, background-color var(--t-ui, .2s) ease; }
.tstrip .fstrip a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.tstrip .fstrip a[aria-current] { background: #fff; color: var(--ink); box-shadow: inset 0 2px 0 var(--sheet); }
.tstrip .fstrip a:focus-visible { outline: 2px solid var(--sheet); outline-offset: -2px; }
.tstrip .fstrip a[aria-current]:focus-visible { outline: 2px solid var(--sheet-ink); outline-offset: -5px; }
.fstrip__vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tstrip__util { display: flex; align-items: center; padding-top: 6px; }
.tstrip__util a { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; margin-right: -8px; border-radius: 5px; color: #fff; text-decoration: none; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; }
.tstrip__util a:hover { background: rgba(255, 255, 255, .08); }
.tstrip__util a:focus-visible { outline: 2px solid var(--sheet); outline-offset: -2px; }
.tstrip__util svg { width: 15px; height: 15px; color: var(--sheet); }
@media (max-width: 600px) {
  .tstrip__util a { width: 32px; height: 32px; padding: 0; justify-content: center; margin-right: -6px; }
  .tstrip__util a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 420px) {
  .tstrip__in { gap: 8px; }
  .tstrip .fstrip ul { margin-left: -9px; }
  .tstrip .fstrip a { padding: 2px 9px 0; letter-spacing: .06em; }
}
@media print { .tstrip { display: none; } }
/* Desktop: the hero fills the first screen so the numbers strip sits at its bottom edge.
   171px = 115px header + 40px strip overhang (.stats top) + 16px breathing room. */
@media (min-width: 1021px) {
  .hero--compact { display: flex; flex-direction: column; min-height: calc(100svh - 171px); }
  .hero--compact > .hero__in { flex: 1 0 auto; }
}


/* =====================================================================
   Family "One House" layer (Direction A, 2026-11-06)
   Same header, family strip, footer, spacing and motion rules as the BK Excellence build:
   one serif (EB Garamond) with a quiet sans, ink + paper, purple used sparingly, orange for emphasis,
   flat 4px corners, hairline rules instead of boxes, fade-up only. The answer-sheet bubbles are quieted.
   ===================================================================== */
body { background: var(--paper); font: 400 17px/1.7 var(--f-body); font-size-adjust: var(--fsa, .46); }
::selection { background: var(--sheet); color: #fff; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; letter-spacing: -.015em; line-height: 1.06; font-size-adjust: none; }
h3 { line-height: 1.18; letter-spacing: -.005em; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--sheet); }
:focus-visible { outline: 2px solid var(--sheet); outline-offset: 3px; border-radius: 2px; }
a:hover { text-decoration-color: var(--sheet); }

/* buttons: flat ink, like bselearning.com */
.btn { --bg: var(--ink); --fg: var(--on-ink); min-height: 50px; padding: 15px 24px; border-radius: var(--r); border: 1px solid var(--bg);
  font: 600 15px/1 var(--f-body); box-shadow: none; font-size-adjust: var(--fsa, .46); }
.btn:hover { --bg: var(--sheet); }
.btn:active { transform: none; }
.btn--sm { min-height: 44px; padding: 12px 20px; font-size: 14.5px; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn--ghost svg { color: var(--sheet); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); }
.btn--light { --bg: var(--on-ink); --fg: var(--ink); }
.btn--light:hover { --bg: var(--orange); --fg: var(--ink); }
.btn--outline { background: transparent; color: var(--on-ink); border-color: rgba(250, 248, 252, .42); }
.btn--outline svg { color: var(--orange); }
.btn--outline:hover { background: rgba(250, 248, 252, .08); border-color: var(--on-ink); }
.link-arrow { font: 600 15px/1.3 var(--f-body); color: var(--sheet); font-size-adjust: var(--fsa, .46); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* the answer-sheet mark, quieted: thin rings, no pencil scribbles */
.bub { width: 1.35rem; border-width: 1px; border-color: var(--rule-2); color: var(--ink-3); background: transparent; font: 600 .72rem/1 var(--f-body); font-size-adjust: var(--fsa, .46); }
.bub svg.scribble { display: none; }
.bub.is-on, .js .bub.is-on.has-scribble { background: var(--sheet); border-color: var(--sheet); color: #fff; }
.bubs--qa, .nf__sheet, .sheet__marks { display: none !important; }

/* family strip: dark ink, current tab runs into the header (identical to BK) */
.tstrip { background: var(--ink); color: var(--on-ink-soft); font: 600 11.5px/1 var(--f-body); font-size-adjust: var(--fsa, .46); }
.tstrip__in { height: 38px; }
.tstrip .fstrip ul { margin-left: -14px; }
.tstrip .fstrip a { height: 31px; margin-top: 7px; padding: 1px 14px 0; border-radius: 4px 4px 0 0; color: var(--on-ink-soft); letter-spacing: .09em; box-shadow: none; }
.tstrip .fstrip a:hover { color: var(--on-ink); background: rgba(255, 255, 255, .08); }
.tstrip .fstrip a[aria-current] { background: var(--paper); color: var(--ink); box-shadow: none; }
.tstrip .fstrip a:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.tstrip__util { padding-top: 4px; }
.tstrip__util a { font: 500 13px/1 var(--f-body); letter-spacing: .02em; color: var(--on-ink); border-radius: var(--r); font-size-adjust: var(--fsa, .46); }
.tstrip__util a:hover { background: rgba(255, 255, 255, .08); }
.tstrip__util svg { width: 14px; height: 14px; color: var(--orange); }

/* header */
.header { background: var(--paper); border-bottom: 0; }
.header.is-scrolled { border-bottom: 0; box-shadow: 0 1px 0 var(--rule); }
.header.is-hidden { transform: none; }
.header__in { height: 88px; gap: 2rem; }
.crest { width: 44px; height: 44px; }
.brand { gap: .8rem; }
.brand__name { display: block; font: 500 25px/1.05 var(--f-display); letter-spacing: -.01em; text-transform: none; color: var(--ink); font-size-adjust: none; }
.brand__name small { display: block; margin-top: 4px; font: 500 12.5px/1.3 var(--f-body); letter-spacing: .02em; color: var(--ink-3); font-size-adjust: var(--fsa, .46); }
.nav { gap: 1.75rem; }
.nav a, .nav__mega { position: relative; padding: .4rem 0; border-radius: 0; font: 500 15px/1 var(--f-body); background: none; font-size-adjust: var(--fsa, .46); }
.nav a:hover, .nav__mega:hover, .nav__mega[aria-expanded="true"] { background: none; }
.nav a::after, .nav__mega::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--sheet); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav__mega:hover::after, .nav__mega[aria-expanded="true"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav__mega svg { color: var(--ink-3); }
.menu-btn { border-radius: var(--r); border: 1px solid var(--rule-2); background: transparent; }
.mega { background: var(--paper); border-block: 1px solid var(--rule); box-shadow: 0 30px 60px -40px rgba(28, 21, 48, .35); }
.mega__col h3 { font: 500 1.2rem/1.2 var(--f-display); border-bottom: 1px solid var(--ink); font-size-adjust: none; }
.mega__col li a:hover, .mega__col .more { color: var(--sheet); }
.search { border-radius: var(--r); background: #fff; border: 1px solid var(--rule-2); }
.search:focus-within { border-color: var(--sheet); }
.search svg { color: var(--ink-3); }
.search__results { border-radius: var(--r); }
.search__results a:hover, .search__results a.is-active { background: var(--sheet-tint); }
.drawer { background: var(--paper); }
.drawer__nav a { font: 400 1.9rem/1.2 var(--f-display); font-size-adjust: none; }

/* home hero: full-bleed photo with a dark wash, as on bselearning.com */
.hero--a { position: relative; padding: 0; min-height: min(780px, calc(100vh - 126px)); display: flex; align-items: flex-end; background: var(--ink); color: var(--on-ink); overflow: hidden; }
.hero--a::before { display: none; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.hero--a::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 85% at 10% 72%, rgba(18, 12, 32, .5), transparent 70%),
    linear-gradient(90deg, rgba(18, 12, 32, .9) 0%, rgba(18, 12, 32, .7) 42%, rgba(18, 12, 32, .16) 78%), linear-gradient(0deg, rgba(18, 12, 32, .6), transparent 55%); }
.hero--a .hero__in { display: block; position: relative; z-index: 1; padding-block: 75px 64px; }
.hero--a .hero__copy { max-width: 760px; }
.hero--a .hero__t { font-size: var(--step-5); line-height: .98; letter-spacing: -.022em; max-width: 12ch; color: var(--on-ink); margin: 0; }
.hero--a .hero__t em { color: var(--orange); display: block; }
.hero--a .hero__lede { margin-top: 1.75rem; color: var(--on-ink-soft); max-width: 52ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; }
.hero--a .hero__btns { margin-top: 2.25rem; gap: .9rem; }
.hero--a .hero__facts { margin-top: 2.75rem; padding-top: 1.3rem; border-top: 1px solid rgba(250, 248, 252, .22); color: var(--on-ink-soft); font-size: 14px; font-weight: 500; gap: .5rem 2rem; }
.hero--a .hero__facts svg { color: var(--orange); width: 1rem; height: 1rem; }
.hero__note { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; font-size: 14px; color: var(--on-ink-soft); max-width: 60ch; }
.hero__note svg { width: 1rem; height: 1rem; color: var(--orange); flex: none; margin-top: 3px; }
.hero__note b { color: var(--on-ink); font-weight: 600; }
.js .hero--a .hero__copy > * { animation: rise 800ms var(--ease) both; }
.stats-sec { padding-top: clamp(3rem, 5vw, 4.5rem); }
.stats { top: 0; margin-top: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule-2); }
.stat { padding: 1.6rem 1.4rem 1.5rem 0; }
.stat + .stat { padding-left: 1.4rem; border-left: 1px solid var(--rule-2); }
.stat__n { font: 500 clamp(2rem, 1.5rem + 1.4vw, 2.8rem)/1 var(--f-display); letter-spacing: -.015em; font-size-adjust: none; }
.stat__n i { color: var(--orange-ink); }
.stat__l { color: var(--ink-3); font-size: 14.5px; }
.hero + .section, .stats-sec + .section { padding-top: var(--sp-6); }

/* section heads */
.sec-head { margin-bottom: var(--sp-5); max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: end; }
.sec-head > :only-child { grid-column: 1 / -1; }
.sec-head h2 { font-size: var(--step-4); }
.sec-head p { color: var(--ink-3); font-size: var(--step-1); max-width: 44ch; }
.sec-head--center { text-align: left; justify-items: stretch; max-width: none; margin-inline: 0; }

/* cards and panels: flat, hairlines, 4px */
.svc, .bcard, .pcard, .callout, .mcard, .pricecard, .sheet, .stage, .info, .pol, .hubrows a, .contact__info { border-radius: var(--r); box-shadow: none; }
.svc { background: transparent; border: 0; border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.svc:hover { transform: none; box-shadow: none; }
.svc__pic { border-radius: var(--r); }
.svc__pic::after { background: linear-gradient(0deg, rgba(18, 12, 32, .72), transparent 60%); }
.svc__t { font: 500 1.6rem/1.1 var(--f-display); letter-spacing: -.01em; font-size-adjust: none; }
.svc__from { color: var(--ink-3); font-size: 14.5px; }
.svc__all { background: transparent; color: var(--sheet); border: 0; padding: 0; min-height: 0; font-size: 15px; }
.svc__all:hover { --bg: transparent; text-decoration: underline; text-underline-offset: 4px; }
.svc-more { border-top: 1px solid var(--rule-2); border-radius: 0; background: transparent; }
.svc-more a { border-radius: var(--r); }
.svc-more .svc-more__all { color: var(--sheet); }
.step__bub { border-radius: 50%; background: transparent; border: 1px solid var(--sheet); color: var(--sheet); font: 500 1.05rem/1 var(--f-display); font-size-adjust: none; }
.steps__list .step { border-color: var(--rule-2); }
.step h3 { font-size: 1.5rem; }
.stage { background: transparent; border: 0; border-top: 1px solid var(--ink); padding: 1.2rem 0 0; }
.stage h3 { font-size: 1.6rem; }
.tst__p { color: var(--ink-2); }
.callout { background: var(--lav); border: 0; }
.callout > svg { color: var(--sheet); background: transparent; }
.checks svg, .mcard svg, .info h3 svg, .hero__facts svg, .subj-hero__meta svg, .wk__trip svg { color: var(--sheet); }
.ph { border-radius: var(--r); }
.ph--hero-main, .ph--hero { box-shadow: none; border-radius: var(--r); }
.tch figure { border-radius: var(--r); }
.tch__n { font: 500 1.2rem/1.2 var(--f-display); font-size-adjust: none; }
.receipt { border-radius: var(--r); background: #fff; border: 1px solid var(--rule); box-shadow: none; }
.receipt dd { color: var(--ink); font-weight: 600; }
.faq__list { border-top: 1px solid var(--ink); }
.qa summary { font: 500 1.3rem/1.3 var(--f-display); font-size-adjust: none; }
.qa__n { color: var(--sheet); font: 400 1rem/1.4 var(--f-display); font-size-adjust: none; }
.cta-band { background: var(--ink); color: var(--on-ink); border-radius: 0; }
.cta-band h2 { color: var(--on-ink); font-size: var(--step-3); }
.cta-band p { color: var(--on-ink-soft); }
.cta-band .btn { --bg: var(--on-ink); --fg: var(--ink); }
.cta-band .btn:hover { --bg: var(--orange); }
.cta-band .btn--ghost { background: transparent; color: var(--on-ink); border-color: rgba(250, 248, 252, .42); }
.cta-band .btn--ghost svg { color: var(--orange); }
.sheet { background: #fff; border: 1px solid var(--rule); }
.sheet__head h2 { font-size: var(--step-3); }
.opt { border-radius: var(--r); border: 1px solid var(--rule-2); }
.opt:has(input:checked) { border-color: var(--sheet); background: var(--sheet-tint); }
.field input, .field select, .field textarea { border-radius: var(--r); border: 1px solid var(--rule-2); background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sheet); box-shadow: 0 0 0 3px rgba(75, 45, 134, .15); }
.chip { border-radius: var(--r); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ix__group h3 { font: 500 1.4rem/1.2 var(--f-display); border-bottom-color: var(--ink); font-size-adjust: none; }
.ix__price, .hubrow__p { color: var(--ink-2); }
.hubrows a:hover { background: var(--lav); }
.hubrow__n { font: 500 1.35rem/1.2 var(--f-display); font-size-adjust: none; }
.hubrow__go svg { color: var(--sheet); }
.price__big { font: 500 2.2rem/1.1 var(--f-display); color: var(--ink); font-size-adjust: none; }
.pricecard { background: #fff; border: 1px solid var(--rule); }
.pcard { border: 1px solid var(--rule); background: #fff; }
.svc__ic { background: var(--sheet-tint); color: var(--sheet); border-radius: var(--r); }
.tt__ev { border-radius: var(--r); }
.wk__n { color: var(--orange-ink); }
.page-hero, .subj-hero { background: transparent; }
.page-hero h1, .subj-hero h1 { font-size: clamp(2.8rem, 1.6rem + 3.4vw, 4.8rem); line-height: 1.02; letter-spacing: -.02em; }
.page-hero__lede { color: var(--ink-2); }
.crumbs a:hover { color: var(--sheet); }
.prose h2 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); line-height: 1.18; text-wrap: pretty; }
.prose h3 { font-size: 1.5rem; line-height: 1.25; text-wrap: pretty; }
.prose a { color: var(--sheet); }
.prose ul li::before { background: var(--sheet); }
.prose ol li::before { color: var(--sheet); }
.map { border-radius: var(--r); }
.map iframe { filter: grayscale(.85) contrast(1.05); }

/* footer: ink, like BK */
.footer { background: var(--ink); color: var(--on-ink-soft); border-top: 0; }
.footer .brand__name { color: var(--on-ink); }
.footer .brand__name small { color: rgba(250, 248, 252, .55); }
.footer h2 { font: 600 13px/1.3 var(--f-body); color: var(--on-ink); letter-spacing: .03em; font-size-adjust: var(--fsa, .46); }
.footer ul a { color: var(--on-ink-soft); }
.footer ul a:hover { color: var(--on-ink); }
.footer__base { color: rgba(250, 248, 252, .5); border-top-color: rgba(255, 255, 255, .14); }
.socials a { border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: var(--on-ink); }

/* fade-up only */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

/* no all-caps labels in the family look; small labels use the sans */
.svc__t { text-transform: none; font: 500 1.65rem/1.1 var(--f-display); font-size-adjust: none; }
.footer h2, .pricecard h2, .glance h2, .pc__head, .tt__day h3, .wk__n { text-transform: none; letter-spacing: .02em; font-family: var(--f-body); font-size-adjust: var(--fsa, .46); }
.pricecard h2, .glance h2 { font: 600 14px/1.3 var(--f-body); color: var(--ink-2); border-bottom: 1px solid var(--ink); font-size-adjust: var(--fsa, .46); }
.pc__head { font: 600 12.5px/1.2 var(--f-body); border-bottom: 1px solid var(--ink); font-size-adjust: var(--fsa, .46); }
.tt__day h3 { font: 600 13px/1 var(--f-body); font-size-adjust: var(--fsa, .46); }
.wk__n { font: 600 13px/1 var(--f-body); color: var(--orange-ink); font-size-adjust: var(--fsa, .46); }
.field label, .sheet__row legend { font: 600 14px/1.3 var(--f-body); color: var(--ink); font-size-adjust: var(--fsa, .46); }
.receipt dd { font: 600 15px/1.3 var(--f-body); font-size-adjust: var(--fsa, .46); }
.footer__brand p, .footer .hours { color: var(--on-ink-soft); }
.svc-more a { background: transparent; border: 1px solid var(--rule-2); }
.svc-more a:hover { border-color: var(--ink); background: transparent; }
.pc__n { font-family: var(--f-body); font-weight: 600; font-size: 14.5px; font-size-adjust: var(--fsa, .46); }
.subj-hero__meta li { border-radius: var(--r); }
.tt__ev--math-club, .tt__ev--stem-club { background: #FCEBDF; border-color: var(--orange); }
.tt__ev--math-club .num, .tt__ev--stem-club .num { color: var(--orange-ink); }

/* QA round 1 (2026-11-06) */
.tt__ev--math-club .num, .tt__ev--stem-club .num { color: #8A3E0E; }
.svc__pic::after { background: linear-gradient(0deg, rgba(18, 12, 32, .88) 0%, rgba(18, 12, 32, .55) 38%, transparent 70%); }
.svc__t { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hubrows a { grid-template-columns: 300px minmax(0, 1fr) 170px 24px; }
.hubrow__p { text-align: right; }
.teachers__grid--rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
.teachers__grid--rail .tch { width: auto; }
.ticks li svg { width: 18px; height: 18px; color: var(--sheet); flex: none; margin-top: 4px; }
:root { --sp-6: clamp(4.5rem, 7vw, 6.5rem); }

/* ===== Tablet + phone touch fixes (2026-11-09) ===== */
/* stats on phones: even padding in both columns (the base .stat rules above override the 700px block) */
@media (max-width: 700px) {
  .stat, .stat + .stat { padding: 1.1rem 0; }
  .stat:nth-child(even) { padding-left: 1.1rem; }
  .stat:nth-child(odd):not(:first-child) { border-left: 0; }
}
/* landscape tablets (touch, wider than 900px): same 44px tap areas as phones */
@media (pointer: coarse) and (min-width: 901px) {
  .tstrip .fstrip a, .tstrip__util a { position: relative; }
  .tstrip .fstrip a::after { content: ""; position: absolute; inset: -7px 0 -6px; }
  .tstrip__util a::after { content: ""; position: absolute; inset: -7px; }
  .nav a, .nav__mega { min-height: 44px; }
  .svc__all, .link-arrow, .svc-more a, .svc-more__all, .crumbs a, .hubrows a, .ix__group li a, .footer a { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { min-height: 44px; }
}

/* ===== Phone QA fixes (2026-11-07) ===== */
/* header: the brand may shrink so the menu button always fits */
.header .brand { flex: 1 1 auto; min-width: 0; }
.brand__name small { white-space: normal; }
@media (max-width: 900px) {
  /* bigger tap areas, same look (as on BK) */
  .tstrip .fstrip li, .tstrip__util a { position: relative; }
  .tstrip .fstrip a { position: relative; }
  .tstrip .fstrip a::after { content: ""; position: absolute; inset: -7px 0 -6px; }
  .tstrip__util a::after { content: ""; position: absolute; inset: -7px; }
  .drawer__groups li a, .mega__col li a, .drawer__groups .more { min-height: 44px; display: flex; align-items: center; padding-block: .3rem; }
  .drawer__groups summary { min-height: 48px; }
  .drawer__nav a { min-height: 48px; display: flex; align-items: center; }
  .svc__all, .link-arrow, .svc-more a, .svc-more__all, .crumbs a, .hubrows a, .ix__group li a { min-height: 44px; display: inline-flex; align-items: center; }
  .ix__group li a { display: flex; }
  .chip { min-height: 44px; }
  /* readable sizes */
  .ix__price, .hubrow__p, .tst__p { font-size: 16px; }
  .field label, .sheet__row legend, .opt__t, .opt { font-size: 16px; }
  .tch__r, .svc__from, .stat__l, .chip, .ix__name, .hubrow__d, .tst__w { font-size: 15px; }
  /* club timetable: one day under the other, no sideways scroll */
  .tt { overflow: visible; }
  .tt__hours { display: none; }
  .tt__days { min-width: 0; grid-template-columns: 1fr; gap: 1.2rem; }
  .tt__day h3 { text-align: left; height: auto; padding-bottom: .5rem; font-size: 15px; display: block; }
  .tt__col { height: auto; background: none; display: grid; gap: .5rem; }
  .tt__ev { position: static; height: auto; margin: 0; padding: .7rem .8rem; }
  .tt__ev b { font-size: 16px; }
  .tt__ev span { font-size: 15px; }
  .tt__day:has(.tt__col:empty) { display: none; }
}
@media (max-width: 400px) {
  .brand__name { font-size: 19px; }
  .brand__name small { font-size: 11.5px; }
  .crest { width: 38px; height: 38px; }
  .header__in { gap: .75rem; }
}
@media (max-width: 400px) { .header .brand__loc { display: none; } }
@media (max-width: 900px) { .ix__group h3 a, .info p a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (max-width: 900px) { .tt { display: block; } .tt__days { width: 100%; } .tt__ev { width: auto; } }
@media (max-width: 400px) { .brand__loc { display: none; } }

/* ---------- Dark header (Ben, 2026-11-07): solid deep purple from the top and while scrolling, like bselearning.com.
   Desktop mega menu stays a light panel (as on bselearning.com); the phone drawer is dark. ---------- */
:root { --hdr-bg: #2E1A5C; --hdr-line: rgba(250, 248, 252, .16); }
.header { background: var(--hdr-bg); color: var(--on-ink); }
.header.is-scrolled { box-shadow: 0 10px 28px -18px rgba(28, 21, 48, .6); }
.header .brand__name, .drawer .brand__name { color: var(--on-ink); }
.header .brand__name small, .drawer .brand__name small { color: var(--on-ink-soft); }
.header .nav a, .header .nav__mega { color: var(--on-ink); }
.header .nav a::after, .header .nav__mega::after { background: var(--orange); height: 2px; }
.header .nav a[aria-current="page"] { color: var(--orange); }
.header .nav__mega svg { color: var(--on-ink-soft); }
.header .header__phone { color: var(--on-ink); }
.header .header__phone svg { color: var(--orange); }
.header .header__cta .btn { --bg: var(--orange); --fg: var(--ink); }
.header .header__cta .btn:hover { --bg: var(--on-ink); --fg: var(--ink); }
.header .menu-btn, .drawer .menu-btn { color: var(--on-ink); border-color: rgba(250, 248, 252, .38); background: transparent; }
.header .menu-btn:hover, .drawer .menu-btn:hover { border-color: var(--on-ink); background: rgba(250, 248, 252, .08); }
.header > .wrap :focus-visible, .drawer :focus-visible { outline-color: var(--orange); }
.header .mega { color: var(--ink); }
.drawer { background: var(--hdr-bg); color: var(--on-ink); }
.drawer__nav a { color: var(--on-ink); border-bottom-color: var(--hdr-line); }
.drawer__nav a[aria-current="page"] { color: var(--orange); }
.drawer__h { color: var(--on-ink-soft); }
.drawer__groups details { border-bottom-color: var(--hdr-line); }
.drawer__groups summary { color: var(--on-ink); }
.drawer__groups summary svg { color: var(--orange); }
.drawer__groups li a { color: var(--on-ink-soft); }
.drawer__groups li a:hover { color: var(--on-ink); }
.drawer__groups .more { color: var(--orange); }
.drawer .search { background: rgba(250, 248, 252, .08); border-color: rgba(250, 248, 252, .24); }
.drawer .search:focus-within { background: rgba(250, 248, 252, .12); border-color: var(--orange); }
.drawer .search svg { color: var(--orange); }
.drawer .search input { color: var(--on-ink); }
.drawer .search input::placeholder { color: var(--on-ink-soft); }
.drawer .search__results { color: var(--ink); }
.drawer__foot .btn { --bg: var(--orange); --fg: var(--ink); }
.drawer__foot .btn:hover { --bg: var(--on-ink); --fg: var(--ink); }
.drawer__foot .header__phone { color: var(--on-ink); }
.drawer__foot .header__phone svg { color: var(--orange); }
/* Crest marks in NY Smart Start orange (tuned a touch lighter, #F59A5F, so it reads at 44px) on a purple shield (Ben, 2026-11-08). */
.header .crest, .drawer .crest, .footer .crest { --sheet: #5A3A9E; --sheet-hover: #46297F; --crest-mark: #F59A5F; }
/* phone drawer search (QA 2026-11-07): rows never shrink, results scroll inside, light clear button on the dark field */
.drawer { grid-auto-rows: max-content; }
.drawer .search__results { max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; }
.drawer .search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF8FC' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ---------- Header over the photo hero (Ben, 2026-11-07, like bselearning.com). site.js adds .hdr-over and --hdr-over-h only on
   pages that open with a photo hero, and .is-solid after 40px of scroll. The hero slides up under the header by exactly the
   header's height and pads its top by the same amount, so the hero text and photo framing stay where Ben approved them. ---------- */
.hdr-over-ready .header { transition: background-color var(--hdr-over-t, .3s) ease, box-shadow var(--hdr-over-t, .3s) ease; }
.hdr-over-ready .header::after { transition: opacity var(--hdr-over-t, .3s) ease; }
.hdr-over .header::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 56px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 12, 34, .62) 0%, rgba(18, 12, 34, .38) 55%, rgba(18, 12, 34, 0) 100%); opacity: 1; }
.hdr-over .header:not(.is-solid) { background-color: transparent; box-shadow: none; }
.hdr-over .header.is-solid::after { opacity: 0; }
.hdr-over main > .hero--a:first-child { margin-top: calc(-1 * var(--hdr-over-h, 0px)); padding-top: var(--hdr-over-h, 0px); }
.hdr-over main > .hero--a:first-child { min-height: calc(min(780px, 100vh - 126px) + var(--hdr-over-h, 0px)); }
.hdr-over .header:has(.mega:not([hidden])), .hdr-over .header:has(.menu-btn[aria-expanded="true"]) { background-color: var(--hdr-bg); }
.hdr-over .header:has(.mega:not([hidden]))::after { opacity: 0; }
.hdr-over .header:not(.is-solid) .brand__name small { color: rgba(250, 248, 252, .9); }
/* first-paint height of the header (site.js then keeps it exact), so the hero is pulled up before any script runs */
.hdr-over { --hdr-over-h: 88px; }
/* light focus rings on the dark family strip and the skip link (QA 2026-11-07) */
.skip:focus-visible, .tstrip .fstrip a:focus-visible, .tstrip .fstrip a[aria-current]:focus-visible, .tstrip__util a:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; }
.tstrip .fstrip a[aria-current]:focus-visible { outline-color: var(--orange); }

/* =====================================================================
   Inner pages (Ben, 2026-11-07): the bselearning.com rhythm in this site's own look.
   Photo hero under the transparent header, a fact bar that overlaps it, then words / picture / words:
   alternating image bands, check-list panels, rows of boxes, big-number price boxes. build.py "Inner-page kit".
   ===================================================================== */
.hero--page { min-height: min(620px, calc(100vh - 160px)); }
.hdr-over main > .hero--page:first-child { min-height: calc(min(620px, 100vh - 160px) + var(--hdr-over-h, 0px)); }
.hero--page .hero__in { padding-block: 56px 132px; }
.hero--page .hero__copy { max-width: 820px; }
.hero--page .hero__t { font-size: clamp(2.7rem, 1.5rem + 3.6vw, 5.1rem); max-width: 16ch; margin-top: 1.4rem; }
.hero--page .hero__lede { margin-top: 1.4rem; }
.hero--page .hero__btns { margin-top: 2rem; }
.hero--page .crumbs ol { color: var(--on-ink-soft); }
.hero--page .crumbs a { color: var(--on-ink-soft); }
.hero--page .crumbs a:hover { color: var(--on-ink); }
.hero--page .crumbs li + li::before { color: var(--orange); }
.hero--page .crumbs [aria-current] { color: var(--on-ink); }

.facts-wrap { position: relative; z-index: 2; margin-top: -72px; }
.facts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 24px 50px -30px rgba(28, 21, 48, .45); }
.facts--3 { --n: 3; } .facts--4 { --n: 4; }
.facts__c { padding: 1.35rem 1.6rem 1.45rem; display: grid; gap: .35rem; align-content: start; }
.facts__c + .facts__c { border-left: 1px solid var(--rule); }
.facts__k { font: 600 13.5px/1.3 var(--f-body); color: var(--ink-3); letter-spacing: .02em; }
.facts__v { font: 500 1.4rem/1.25 var(--f-display); color: var(--ink); font-size-adjust: none; }
.facts__v .link-arrow { font: 500 1.3rem/1.25 var(--f-display); font-size-adjust: none; }

.band-sec { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.subj-body > .band-sec:first-child { padding-top: clamp(4rem, 7vw, 6rem); }
.band-sec--lav { background: var(--lav); }
.band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: center; }
.band--flip .band__ph { order: -1; }
.band__copy h2, .split__copy h2, .row2 > h2, .band__head h2 { font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.8rem); line-height: 1.1; margin-bottom: 1.2rem; text-wrap: balance; }
.band__copy .prose, .split__copy .prose, .row2 .prose { max-width: 62ch; }
.band__ph { aspect-ratio: 4 / 3; margin: 0; }
.band__ph--tall { aspect-ratio: 4 / 5; max-width: 470px; justify-self: center; width: 100%; }
.band__head { max-width: 70ch; margin-bottom: var(--sp-4); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); border-top: 1px solid var(--ink); padding-top: 2rem; }
.row2 > h2 { margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.split__panels { display: grid; gap: 1.25rem; }
.panel { background: #fff; border: 1px solid var(--rule); border-top: 2px solid var(--sheet); border-radius: var(--r); padding: 1.5rem 1.6rem 1.6rem; }
.band-sec--lav .panel, .band-sec--lav .box { background: #fff; }
.panel__label { font: 500 1.35rem/1.25 var(--f-display); color: var(--ink); margin-bottom: 1rem; font-size-adjust: none; }
.panel__label strong { font-weight: 500; }
.panel__label a { color: var(--sheet); }
.checklist { display: grid; gap: .55rem; }
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.6rem; }
.checklist li { display: flex; gap: .65rem; align-items: flex-start; line-height: 1.45; }
.checklist li > svg { width: 17px; height: 17px; flex: none; margin-top: .22em; color: var(--sheet); }
.checklist a { color: var(--sheet); }
.checklist__n { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--sheet); color: var(--sheet); display: grid; place-items: center; font: 500 .95rem/1 var(--f-display); margin-top: -.05em; font-size-adjust: none; }
.boxes { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1.25rem; }
.boxes--2 { --n: 2; } .boxes--3 { --n: 3; } .boxes--4 { --n: 4; }
.box { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 1.6rem 1.6rem 1.7rem; display: grid; gap: .7rem; align-content: start; }
.box h3 { font-size: 1.45rem; line-height: 1.2; }
.box p { color: var(--ink-2); }
.box a { color: var(--sheet); }
.split__panels .boxes { --n: 1; }

.tuition { background: var(--hdr-bg); color: var(--on-ink); }
.tuition .sec-head { margin-bottom: var(--sp-4); }
.tuition .sec-head h2 { color: var(--on-ink); }
.tuition .sec-head p, .tuition__lead p { color: var(--on-ink-soft); font-size: var(--step-1); line-height: 1.5; }
.tuition__lead strong { color: var(--on-ink); font-weight: 600; }
.tuition__lead .fine-list { margin-top: .6rem; display: grid; gap: .3rem; color: var(--on-ink-soft); }
.tuition__lead .fine-list li { position: relative; padding-left: 1.1rem; }
.tuition__lead .fine-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--orange); }
.tuition__in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.tiers { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1.25rem; max-width: 1000px; }
.tiers--1 { --n: 1; max-width: 420px; } .tiers--2 { --n: 2; max-width: 820px; } .tiers--3 { --n: 3; }
.tier { background: #fff; color: var(--ink); border-radius: var(--r); padding: 1.6rem 1.7rem 1.7rem; border-top: 3px solid var(--orange); display: grid; gap: .5rem; align-content: start; }
.tier__label { font: 600 15px/1.3 var(--f-body); color: var(--ink-2); font-size-adjust: var(--fsa, .46); }
.tier__amt { font: 500 clamp(2.6rem, 2rem + 1.6vw, 3.4rem)/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); font-size-adjust: none; }
.tier__amt small { font: 500 1.1rem/1 var(--f-display); margin-right: .35rem; color: var(--ink-3); letter-spacing: 0; }
.tier__amt span { font: 500 1.1rem/1 var(--f-display); margin-left: .4rem; color: var(--ink-3); letter-spacing: 0; }
.tier__note { color: var(--ink-3); font-size: 15px; border-top: 1px solid var(--rule); padding-top: .7rem; margin-top: .3rem; }
.rates { display: grid; margin: .2rem 0 0; }
.rates div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--rule); }
.rates dt { color: var(--ink-2); }
.rates dd { margin: 0; font: 500 1.6rem/1 var(--f-display); color: var(--ink); font-size-adjust: none; }
.tuition__foot { margin-top: var(--sp-4); display: grid; gap: 1.2rem; }
.tuition__foot > p { color: var(--on-ink-soft); }
.tuition__foot .hero__btns { margin-top: 0; }
.tuition .btn { --bg: var(--on-ink); --fg: var(--ink); }
.tuition .btn:hover { --bg: var(--orange); }
.tuition .btn--ghost { background: transparent; color: var(--on-ink); border-color: rgba(250, 248, 252, .42); }
.tuition .btn--ghost svg { color: var(--orange); }
.tuition .flyer figcaption { color: var(--on-ink-soft); }
.tuition .flyer img { border: 0; }
.tuition :focus-visible { outline-color: var(--orange); }

.more-sec .sec-head p { align-self: end; }
.mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
.mcards a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: 1.05rem 0; border-top: 1px solid var(--rule-2); text-decoration: none; }
.mcards li:nth-child(-n+3) a { border-top-color: var(--ink); }
.mc__n { font: 500 1.3rem/1.2 var(--f-display); font-size-adjust: none; }
.mc__p { color: var(--ink-3); font-size: 15px; }
.mcards svg { width: 1.05rem; height: 1.05rem; color: var(--sheet); transition: transform var(--t-ui) var(--ease); }
.mcards a:hover .mc__n { color: var(--sheet); }
.mcards a:hover svg { transform: translateX(4px); }
.subj-body + .tuition, .more-sec + .faq { margin-top: 0; }

@media (max-width: 1020px) {
  .band, .split, .row2, .tuition__in { grid-template-columns: 1fr; }
  .band--flip .band__ph { order: 0; }
  .band__ph { max-width: 640px; }
  .facts--4 { --n: 2; }
  .facts--4 .facts__c:nth-child(3) { border-left: 0; }
  .facts--4 .facts__c:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .boxes--3, .boxes--4, .tiers--3 { --n: 2; }
  .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcards li:nth-child(3) a { border-top-color: var(--rule-2); }
  .tuition .flyer { max-width: 320px; }
}
@media (max-width: 700px) {
  .hero--page { min-height: 0; }
  .hdr-over main > .hero--page:first-child { min-height: 0; }
  .hero--page .hero__in { padding-block: 40px 104px; }
  .hero--page .hero__t { font-size: clamp(2.3rem, 1.6rem + 3.4vw, 3rem); }
  .facts-wrap { margin-top: -64px; }
  .facts--4, .facts--3 { --n: 1; }
  .facts__c + .facts__c { border-left: 0; border-top: 1px solid var(--rule); }
  .facts__c { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: .8rem; padding: .9rem 1.1rem; }
  .facts__v, .facts__v .link-arrow { font-size: 1.15rem; }
  .boxes--2, .boxes--3, .boxes--4, .tiers--2, .tiers--3, .checklist--2 { --n: 1; grid-template-columns: 1fr; }
  .mcards { grid-template-columns: 1fr; }
  .mcards li:nth-child(n+2) a { border-top-color: var(--rule-2); }
  .panel, .box, .tier { padding: 1.25rem 1.2rem 1.35rem; }
}
.stack { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.split__panels .stack { margin-bottom: 0; }
.tiers__eyebrow { font: 600 15px/1.3 var(--f-body); color: var(--orange); letter-spacing: .02em; margin-bottom: 1rem; font-size-adjust: var(--fsa, .46); }
.tiers--3 { max-width: none; }
.more-sec .sec-head p { justify-self: end; }
.pics-sec { padding-block: 0 var(--sp-6); }
.pics { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1rem; }
.pics--2 { --n: 2; } .pics--3 { --n: 3; } .pics--4 { --n: 4; }
.pics figure { margin: 0; aspect-ratio: 4 / 5; }
.tuition + .pics-sec { padding-top: var(--sp-6); }
@media (max-width: 700px) { .pics, .pics--3 { --n: 2; } .pics--3 figure:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; } }
/* stage / interest boxes: photo on top, then a short priced list (Test prep, Clubs) */
.sboxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.sbox { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.sbox__ph { aspect-ratio: 4 / 3; border-radius: 0; margin: 0; }
.sbox__body { padding: 1.3rem 1.4rem 1rem; }
.sbox h3 { font-size: 1.55rem; }
.sbox__body > p { color: var(--ink-3); font-size: 15px; margin: .25rem 0 .6rem; }
.sbox h3 + ul { margin-top: .7rem; }
.sbox li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .8rem; padding: .7rem 0; border-top: 1px solid var(--rule); text-decoration: none; align-items: baseline; }
.sbox .tst__n { font-weight: 600; }
.sbox .tst__w { grid-column: 1; grid-row: 2; color: var(--ink-3); font-size: 14.5px; }
.sbox .tst__p { grid-column: 2; grid-row: 1; color: var(--ink-2); font-size: 15px; white-space: nowrap; }
.sbox li a:hover .tst__n { color: var(--sheet); }
/* crash-course boxes */
.cboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.cbox { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.cbox__ph { margin: 0; border-radius: 0; min-height: 100%; }
.cbox__body { padding: 1.7rem 1.8rem; display: grid; gap: .7rem; align-content: start; border-top: 3px solid var(--orange); }
.cbox h3 { font-size: 1.6rem; }
.cbox p { color: var(--ink-2); }
.cbox .tier__amt { color: var(--ink); }
/* numbered rows (how it works) */
.nrows { display: grid; gap: 0; margin-top: .4rem; counter-reset: none; }
.nrow { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.1rem; padding: 1.2rem 0; border-top: 1px solid var(--rule-2); }
.nrow:last-child { border-bottom: 1px solid var(--rule-2); }
.nrow__n { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--sheet); color: var(--sheet); display: grid; place-items: center; font: 500 1.2rem/1 var(--f-display); font-size-adjust: none; }
.nrow h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.nrow p { color: var(--ink-2); }
.steps__note { margin-top: 1.2rem; color: var(--ink-3); }
@media (max-width: 1180px) { .sboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1020px) { .cboxes { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .sboxes { grid-template-columns: 1fr; }
  .sbox__ph { aspect-ratio: 16 / 9; }
  .cbox { grid-template-columns: 1fr; }
  .cbox__ph { aspect-ratio: 16 / 9; min-height: 0; }
  .cbox__body { padding: 1.3rem 1.2rem; }
  .nrow { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem; }
}
.hero--page .crumbs ol { align-items: baseline; }

/* ===== Phase 2 inner pages (2026-11-08): category pages, about, policies, contact, camp, quiet pages ===== */
.facts--5 { --n: 5; }
.facts--5 .facts__v { font-size: 1.6rem; }
/* course boxes on category pages */
.ccards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ccard { height: 100%; display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--rule); border-top: 2px solid var(--sheet); border-radius: var(--r); overflow: hidden; text-decoration: none; transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease); }
.ccards--pics .ccard { border-top-width: 1px; }
.ccard:hover { border-color: var(--rule-2); box-shadow: 0 18px 40px -30px rgba(28, 21, 48, .45); }
.ccard__ph { margin: 0; aspect-ratio: 4 / 3; border-radius: 0; }
.ccard__ph img { transition: transform 600ms var(--ease); }
.ccard:hover .ccard__ph img { transform: scale(1.03); }
.ccard__b { display: grid; grid-template-rows: auto 1fr auto; gap: .55rem; padding: 1.35rem 1.45rem 1.25rem; }
.ccard__n { font: 500 1.45rem/1.2 var(--f-display); color: var(--ink); font-size-adjust: none; }
.ccard:hover .ccard__n { color: var(--sheet); }
.ccard__d { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.ccard__p { display: flex; justify-content: space-between; align-items: center; padding-top: .8rem; margin-top: .3rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-weight: 600; font-size: 15px; }
.ccard__p svg { width: 1.05rem; height: 1.05rem; color: var(--sheet); transition: transform var(--t-ui) var(--ease); }
.ccard:hover .ccard__p svg { transform: translateX(4px); }
.subj-body--alt > .band-sec:nth-child(odd) { background: var(--lav); }
.subj-body--alt > .band-sec:nth-child(even) { background: transparent; }
/* numbered policy boxes */
.nboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.nbox { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 1.6rem 1.6rem 1.7rem; display: grid; gap: .7rem; align-content: start; }
.nbox h3 { font-size: 1.5rem; }
.nbox p { color: var(--ink-2); }
.band__copy .receipt { margin-top: 1.4rem; box-shadow: none; }
.band__copy .lead { margin-top: -.4rem; }
/* contact page form section */
.band-sec .contact { align-items: start; }
/* quiet pages (privacy, 404, thank you): same dark brand ground as the photo heroes, no photo */
.page-hero { background: var(--hdr-bg); color: var(--on-ink); margin-bottom: 0; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.page-hero h1 { color: var(--on-ink); }
.page-hero .page-hero__lede { color: var(--on-ink-soft); }
.page-hero .page-hero__lede a { color: var(--on-ink); }
.page-hero .crumbs ol, .page-hero .crumbs a { color: var(--on-ink-soft); }
.page-hero .crumbs [aria-current] { color: var(--on-ink); }
.page-hero .btn { --bg: var(--on-ink); --fg: var(--ink); }
.page-hero .btn:hover { --bg: var(--orange); }
.page-hero .btn--ghost { background: transparent; color: var(--on-ink); border-color: rgba(250, 248, 252, .42); }
.page-hero :focus-visible { outline-color: var(--orange); }
.page-hero + .section { padding-top: var(--sp-5); }
@media (max-width: 1020px) {
  .ccards, .nboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts--5 { --n: 3; }
  .facts--5 .facts__c:nth-child(4) { border-left: 0; }
  .facts--5 .facts__c:nth-child(n+4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 700px) {
  .ccards, .nboxes { grid-template-columns: 1fr; }
  .facts--5 { --n: 1; }
  .facts--5 .facts__v { font-size: 1.15rem; }
}
.facts__v a:not(.link-arrow) { text-decoration: none; color: inherit; }
.facts__v a:not(.link-arrow):hover { color: var(--sheet); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) { .sec-head { grid-template-columns: 1fr; gap: .9rem; } .more-sec .sec-head p { justify-self: start; } }
@media (max-width: 1020px) { .band, .split, .row2, .tuition__in { grid-template-columns: minmax(0, 1fr); } }
.table-wrap { overflow-x: auto; max-width: 100%; }

/* ===== QA round (2026-11-08) ===== */
/* header always readable over a photo: stronger top scrim */
.hdr-over .header::after { background: linear-gradient(180deg, rgba(18, 12, 34, .88) 0%, rgba(18, 12, 34, .68) 55%, rgba(18, 12, 34, 0) 100%); height: calc(100% + 80px); }
/* inner-page photo heroes: the photo is never stretched past its own pixels; it sits right and fades into the ink ground */
.hero--page { background: #140d24; }
.hero--page .hero__bg { left: auto; right: 0; width: min(100%, var(--pw, 100%)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.hero--page::after { background: linear-gradient(90deg, rgba(20, 13, 36, .96) 0%, rgba(20, 13, 36, .86) 45%, rgba(20, 13, 36, .3) 82%), linear-gradient(0deg, rgba(20, 13, 36, .7), transparent 50%); }
/* phones and tablets: the photo shows as a clear picture at the top and fades into the ink ground; the text sits below it */
@media (max-width: 1020px) {
  .hero--page { --ph-h: calc(var(--hdr-over-h, 88px) + 380px); }
  .hero--page .hero__bg { width: 100%; bottom: auto; height: var(--ph-h); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  .hero--page .hero__bg img { object-position: 60% 35%; }
  .hero--page::after { background: linear-gradient(180deg, rgba(20, 13, 36, .35) 0, rgba(20, 13, 36, .05) calc(var(--hdr-over-h, 88px) + 60px), rgba(20, 13, 36, .55) calc(var(--ph-h) - 150px), rgba(20, 13, 36, .96) calc(var(--ph-h) - 40px), #140d24 var(--ph-h)); }
  .hero--page .hero__in { padding-top: 250px; }
  .hero--page .hero__t, .hero--page .crumbs { text-shadow: 0 1px 14px rgba(20, 13, 36, .7); }
}
@media (max-width: 700px) {
  .hero--page { --ph-h: calc(var(--hdr-over-h, 66px) + 280px); }
  .hero--page .hero__in { padding-top: 170px; }
}
/* small photos never shown bigger than they are */
.hero--page ~ .teachers .tch figure { max-width: 270px; }
.band__ph { justify-self: center; width: 100%; }
/* top strip: 44px tap areas on touch screens, strip itself unchanged */
@media (max-width: 900px) {
  .tstrip { position: relative; z-index: 31; }
  .tstrip .fstrip a::after { inset: -7px 0 -7px; }
  .tstrip .fstrip a, .tstrip__util a { position: relative; }
  .tstrip__util a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}

/* New class photos (Oct 24 2026, added 2026-11-08): keep every face in frame when the hero crops */
.hero__bg img[src*="class-sat-table"] { object-position: 50% 12%; }
.hero__bg img[src*="class-sat-remote-wide"] { object-position: 60% 30%; }
.hero__bg img[src*="chess-dsc03554"] { object-position: 60% 25%; }
/* chess hero on desktop: the photo sits in the right 60% so both boys are clear of the dark side behind the headline */
@media (min-width: 1021px) {
  .hero--page:has(img[src*="chess-dsc03554"]) .hero__bg { width: 60%; }
  .hero--page:has(img[src*="chess-dsc03554"]) .hero__bg img { object-position: 50% 30%; }
  .hero--page:has(img[src*="chess-dsc03554"])::after { background: linear-gradient(90deg, rgba(20, 13, 36, .96) 0%, rgba(20, 13, 36, .9) 36%, rgba(20, 13, 36, .2) 62%, rgba(20, 13, 36, .1) 100%), linear-gradient(0deg, rgba(20, 13, 36, .7), transparent 45%); }
}
/* The "Cogito Ergo Sum" lettering is ~4px tall at header/footer size and reads as a smudge, so the ribbon shows plain there.
   The full motto stays on the large app icons. (QA 2026-11-08) */
.crest .crest__motto { display: none; }
@media (max-width: 700px) {
  .hero__bg img[src*="class-sat-table"] { object-position: 80% 8%; }
  .hero__bg img[src*="class-sat-remote-wide"] { object-position: 82% 30%; }
}

/* ---------- Five programs overview (Nicky, 2026-11-09): homepage top + /after-school/. build.py programs_block() ---------- */
.hero__progs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; margin-top: 2.75rem; padding-top: 1.3rem; border-top: 1px solid rgba(250, 248, 252, .22); font-size: 15px; }
.hero__progs > span { color: var(--orange); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.hero__progs ul { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.hero__progs a { display: inline-block; padding-block: .45rem; color: var(--on-ink); text-decoration: underline; text-decoration-color: rgba(250, 248, 252, .3); text-underline-offset: 5px; transition: text-decoration-color var(--t-fast) var(--ease); }
.hero__progs a:hover { text-decoration-color: var(--orange); }
.hero__progs + .hero__note { margin-top: 1.1rem; }
.progs__list { display: grid; border-bottom: 1px solid var(--rule-2); }
.prog { display: grid; grid-template-columns: 240px minmax(0, 1fr) 17.5rem; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding-block: 1.75rem; border-top: 1px solid var(--rule-2); scroll-margin-top: calc(var(--header-h) + 1rem); }
.prog:first-child { border-top-color: var(--ink); }
.prog__ph { display: block; aspect-ratio: 3 / 2; }
.prog__ph img { transition: transform 600ms var(--ease); }
.prog__ph img[src*="art-club-5"] { object-position: 50% 15%; }
.progs + .stats-sec { padding-top: 0; }
.hero--a .hero__t--wide { max-width: 16ch; }
.prog__ph:hover img { transform: scale(1.04); }
.prog__copy { display: grid; gap: .45rem; max-width: 62ch; }
.prog__n { color: var(--orange-ink); font-size: 14px; letter-spacing: .06em; }
.prog h3 { font: 500 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--f-display); letter-spacing: -.01em; font-size-adjust: none; }
.prog p { color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
.prog__act { display: grid; justify-items: start; gap: .9rem; }
.prog__act .btn { white-space: nowrap; width: 100%; }
@media (max-width: 1020px) {
  .prog { grid-template-columns: 200px minmax(0, 1fr); }
  .prog__act { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; }
  .prog__act .btn { width: auto; }
}
@media (max-width: 700px) {
  /* thumbnail beside the number + name; description and buttons run full width below */
  .prog { grid-template-columns: 80px minmax(0, 1fr); gap: .35rem 1.1rem; align-items: end; padding-block: 1.5rem 1.6rem; }
  .prog__ph { aspect-ratio: 1 / 1; grid-row: 1 / 3; align-self: start; }
  .prog__copy { display: contents; }
  .prog__n { grid-column: 2; grid-row: 1; }
  .prog h3 { grid-column: 2; grid-row: 2; font-size: 1.45rem; }
  .prog p { grid-column: 1 / -1; margin-top: .75rem; }
  .prog__act { grid-column: 1 / -1; margin-top: .6rem; }
  .prog__act .btn { white-space: normal; }
  .hero__progs { margin-top: 2rem; }
}

/* ---------- Family strip v2 + bigger logo (Nicky, 2026-11-09) ----------
   Taller strip; each school's crest (family_bar.py LOGOS) next to its code. Phones: crests only (codes stay for screen readers). */
.tstrip__in { height: 48px; }
.tstrip .fstrip ul { margin-left: -12px; }
/* each tab fills the full 48px strip (44px+ tap target); the visible tab is drawn 6px down by ::before */
.tstrip .fstrip a { position: relative; isolation: isolate; gap: 9px; height: 48px; margin-top: 0; padding: 6px 15px 0 11px; border-radius: 0; font-size: 12.5px; letter-spacing: .08em; }
.tstrip .fstrip a, .tstrip .fstrip a:hover, .tstrip .fstrip a[aria-current], .tstrip .fstrip a[aria-current]:hover { background: none; }
.tstrip .fstrip a::before { content: ""; position: absolute; inset: 6px 0 0; z-index: -1; border-radius: 6px 6px 0 0; background: var(--fs-tab, transparent); transition: background-color .2s ease; }
.tstrip .fstrip a:hover { --fs-tab: rgba(255, 255, 255, .08); }
.tstrip .fstrip a[aria-current] { --fs-tab: var(--paper); }
.fstrip__logo { display: block; flex: none; width: auto; height: 28px; }
.tstrip__util { padding-top: 4px; }
.tstrip__util a { height: 44px; min-width: 44px; justify-content: center; }
@media (max-width: 700px) {
  .tstrip .fstrip ul { margin-left: -10px; }
  .tstrip .fstrip a { padding: 6px 10px 0; gap: 0; }
  .fstrip__code { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 600px) { .tstrip__util a { width: 44px; height: 44px; margin-right: -10px; } }
/* header crest: larger */
.header .crest { width: 56px; height: 56px; }
.header .brand { gap: .9rem; }
.header .brand__name { font-size: 27px; }
@media (max-width: 700px) { .header .crest { width: 48px; height: 48px; } .header .brand__name { font-size: 1.05rem; } }
@media (max-width: 400px) { .header .crest { width: 44px; height: 44px; } .header .brand__name { font-size: 20px; } }