/* pages.css — About (/ve-chung-toi/), Teacher (/giao-vien/), Contact (/lien-he/). Owned by the pages workstream.
   Mobile-first; tablet ≥768; desktop ≥1200. Tokens from tokens.css only. Shared v2 primitives (.band, .grain,
   .pattern-hairline, .display-type, .tmm-mark, .shape, .img-zoom, [data-reveal="mask|lines"], .stack-cards,
   .card-hover, .row-hover, .hl-swipe) live in base.css §17; this file only places and tunes them.
   Visual system v2 (client, 24 Sep): colour blocking, editorial type, precise print marks, purposeful motion.
   Surface rhythm — About: ink → lime (lip) → cream → olive (cut) · Teacher: cream → warm (lip) → ink → warm / cream
   alternating · Contact: warm band split with a flat olive field + ink hotline card. No glows, doodles, tilts. */

/* =============================== Subpage hero (About + Teacher) =============================== */
.page-hero{padding-block:40px 56px}
.page-hero__inner{display:grid;gap:40px;align-items:center}
.page-hero__copy{position:relative;z-index:1;min-width:0}
.page-hero__title{margin:0;font-size:var(--fs-h1);font-weight:900;line-height:1.15;text-transform:none;text-wrap:balance}
.page-hero__lead{margin-top:20px;max-width:38em;font-size:var(--fs-body);line-height:1.6;text-wrap:pretty}
.page-hero__lead strong{font-weight:700}
.page-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.page-hero .link-arrow:active{opacity:.75}

/* About: ink band. Cream copy, lime accents; the swipe phrase reads as bold lime (a highlighter behind small text on
   ink reads as a smudge). */
.page-hero--about{color:var(--c-cream)}
.page-hero--about .page-hero__title{color:var(--c-cream)}
.page-hero--about .page-hero__lead,.page-hero--about .page-hero__lead strong{color:var(--c-cream)}
.page-hero--about .page-hero__lead .hl-swipe{font-weight:700;padding:0;margin:0;background:none;color:var(--c-lime)}
.page-hero--about .link-arrow{color:var(--c-lime)}
@media (hover:hover){.page-hero--about .link-arrow:hover{color:var(--c-cream)}}
/* Teacher: cream band, ink copy, olive highlight in the heading, lime swipe behind the two claims. */
.page-hero--team .page-hero__title{color:var(--c-ink)}
.page-hero--team .page-hero__lead strong{color:var(--c-ink)}
.page-hero--team .page-hero__lead .hl-swipe{font-weight:700}

/* Photo as a print proof: crop marks sit in the wrapper's padding, outside the photo corners. */
.page-hero__media{position:relative;min-width:0}
.page-hero__print{position:relative;z-index:1}
.page-hero__frame{position:relative;overflow:hidden;border-radius:var(--radius-sm)}
.page-hero__img{display:block;width:100%;height:auto}
/* Cut-outs are shown as supplied (client, 24 Sep): no fill behind the photo; the band's colour field shows through. */
.page-hero__media--about .page-hero__frame{aspect-ratio:1120 / 968}
.page-hero__media--about .page-hero__img{height:100%;object-fit:cover}

/* Oversized brand name, outline, cropped by the band's bottom edge (About). */
.page-hero__display{position:absolute;left:-.04em;bottom:calc(28px - .24em);z-index:0;--dt-size:clamp(76px,19vw,280px);white-space:nowrap;pointer-events:none}
/* Flat colour field behind the photo, bleeding off the band edge. */
.page-hero__field{position:absolute;z-index:0;pointer-events:none;height:auto}
.page-hero--about .page-hero__field{display:none}
/* About: an olive parallelogram slab runs behind the photo, strictly between the top and bottom crop marks, and bleeds
   off the right edge (the band clips it). Its slanted end peeks out in the gap left of the photo. */
.page-hero__media--about .page-hero__field{top:22%;bottom:22%;left:-44px;right:calc(-50vw);width:auto;height:auto;--slab-cut:64px}
.page-hero--team .page-hero__field{width:150vw;left:-20vw;bottom:0}

@media (min-width:768px){
  .page-hero{padding-block:56px 72px}
  .page-hero__lead{margin-top:24px}
  .page-hero__media{max-width:620px;margin-inline:auto;width:100%}
  .page-hero__display{bottom:calc(40px - .24em)}
  .page-hero--team .page-hero__field{width:130vw;left:-15vw}
}
@media (min-width:1200px){
  .page-hero{padding-block:72px 112px}
  .page-hero__inner{grid-template-columns:minmax(0,700px) minmax(0,1fr);gap:48px}
  .page-hero__lead{margin-top:32px;max-width:31em;line-height:1.55}
  .page-hero__actions{margin-top:48px;gap:16px 26px}
  .page-hero__media{max-width:none;margin:0}
  .page-hero--about .page-hero__field{display:block}
  .page-hero--team .page-hero__field{width:min(56vw,900px);left:auto;right:-6vw;bottom:0}
  .page-hero__display{--dt-size:min(12vw,240px)}
}

/* =============================== About · stats ("data as design") =============================== */
.about-stats{padding-block:56px 64px}
/* The hairline pattern reads lighter on lime (review: slightly heavy). */
.about-stats.pattern-hairline::before{opacity:.035;background:repeating-linear-gradient(180deg,var(--band-pattern,currentColor) 0 1px,transparent 1px 12px)}
ul.stat-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px;margin:0;padding:0;list-style:none}
.stat{position:relative;min-width:0;padding-top:20px;color:var(--c-ink)}
.stat__rule{position:absolute;top:0;left:0;right:0}
.stat--lead{grid-column:1 / -1}
.stat__num{display:flex;align-items:flex-start;font-size:clamp(44px,12vw,56px);font-weight:900;line-height:.95;letter-spacing:-.03em;color:var(--c-ink);white-space:nowrap}
.stat--lead .stat__num{font-size:clamp(96px,30vw,132px);letter-spacing:-.045em}
.stat__plus{margin-left:.04em;font-size:.5em;font-weight:800;line-height:1;letter-spacing:0}
.stat__text{margin-top:14px}
/* Phones: the four secondary figures read as report rows (figure | label + note) so the notes get the full width. */
@media (max-width:767.98px){
  ul.stat-board{grid-template-columns:minmax(0,1fr);gap:28px}
  .stat:not(.stat--lead){display:grid;grid-template-columns:clamp(104px,34vw,140px) minmax(0,1fr);gap:0 16px;align-items:start}
  .stat:not(.stat--lead) .stat__text{margin-top:4px}
}
.stat__label{font-size:var(--fs-small);font-weight:900;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink)}
.stat__desc{margin-top:6px;max-width:22em;font-size:var(--fs-small);line-height:1.5;color:var(--c-ink);text-wrap:pretty}
@media (min-width:768px){
  .about-stats{padding-block:72px 80px}
  ul.stat-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}
  .stat--lead{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:0 40px;padding-top:28px}
  .stat--lead .stat__num{font-size:168px}
  .stat--lead .stat__text{margin:0 0 .9em}
  .stat__num{font-size:56px}
}
@media (min-width:1200px){
  .about-stats{padding-block:96px 112px}
  ul.stat-board{grid-template-columns:repeat(12,minmax(0,1fr));gap:64px 32px}
  .stat{grid-column:span 3;padding-top:28px}
  .stat--lead{grid-column:1 / span 6;grid-row:1 / span 2;padding-right:32px;border-right:1px solid var(--band-rule)}
  .stat:nth-child(2),.stat:nth-child(4){grid-column:7 / span 3}
  .stat:nth-child(3),.stat:nth-child(5){grid-column:10 / span 3}
  .stat__num{font-size:68px}
  .stat--lead{display:block}
  .stat--lead .stat__num{font-size:clamp(128px,10vw,156px)}
  .stat--lead .stat__text{margin-top:28px;max-width:24em}
  .stat__label{font-size:var(--fs-small)}
  .stat__desc{font-size:var(--fs-small)}
  .stat--lead .stat__label{font-size:calc(var(--fs-h3) * .8)}
  .stat--lead .stat__desc{font-size:var(--fs-body)}
}
@media (min-width:1200px) and (max-width:1439px){.stat__num{font-size:60px}}

/* =============================== About · method (sticky stack) =============================== */
.about-method{padding-block:var(--section-y)}
.about-method__head{position:relative;max-width:none;margin-bottom:var(--heading-gap)}
.about-method__mark{display:flex;align-items:flex-end;gap:14px;max-width:420px;margin-bottom:20px;color:var(--c-green)}
.about-method__pilcrow{display:block;flex:none;width:20px;height:27px;color:var(--c-green)}
.about-method__rule{flex:1;margin-bottom:2px}
.about-method__sub{margin-top:14px;max-width:34em;font-size:var(--fs-body);font-weight:700;line-height:1.6;text-wrap:balance}
ol.method-stack{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.method-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;min-width:0;padding:22px 20px 26px;border:1px solid rgba(var(--c-ink-rgb),.08);border-radius:var(--radius-card);color:var(--c-ink)}
.method-card--1{background:var(--c-cream-warm)}
.method-card--2{background:var(--c-lime)}
.method-card--3{background:var(--c-green)}
.method-card--4{background:var(--c-ink);color:var(--c-cream)}
.method-card__num{grid-column:1 / -1;margin-bottom:6px;font-size:44px;font-weight:900;line-height:.9;letter-spacing:-.03em}
.method-card--4 .method-card__num{color:var(--c-lime)}
.method-card__body{min-width:0;padding-top:6px}
.method-card__rule{display:block}
.method-card--4 .method-card__rule{color:var(--c-lime)}
.method-card__title{margin-top:14px;font-size:var(--fs-h3);font-weight:800;line-height:1.265;text-wrap:balance}
.method-card--4 .method-card__title em{color:var(--c-lime)}
.method-card__desc{margin-top:8px;max-width:30em;font-size:var(--fs-small);line-height:1.55;text-wrap:balance}
@media (min-width:768px){
  .method-card{gap:0 32px;padding:32px 36px 36px}
  .method-card__num{grid-column:auto;margin:0}
  .method-card__num{font-size:88px}
  .method-card__desc{font-size:var(--fs-body)}
}
@media (min-width:1200px){
  /* Heading column sticks on the left; the four cards stick and overlap on the right as you scroll. */
  .about-method__layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .about-method__head{position:sticky;top:calc(var(--header-h) + 48px);margin:0}
  .about-method__head .h2 em{display:block}
  .about-method__sub{margin-top:24px;font-size:calc(var(--fs-h3) * .8);line-height:1.5;text-wrap:balance}
  .about-method__sub .br-desktop{display:none}
  ol.method-stack{gap:28px}
  .method-card{min-height:280px;padding:40px 44px 44px;gap:0 36px}
  .method-card__num{font-size:96px}
  .method-card__body{padding-top:14px}
  .method-card__title{margin-top:22px;font-size:var(--fs-h3)}
  .method-card__desc{margin-top:14px}
}
@media (min-width:1200px) and (max-width:1439px){.method-card__num{font-size:84px}.method-card{padding-inline:36px}}

/* =============================== About · closing lead form (olive band) =============================== */
.about-form{max-width:1100px;margin-inline:auto}
.about-form .lead-form__desc{max-width:36em}
@media (min-width:1200px){.about-form{max-width:1200px}.about-form .form{max-width:none}}

/* =============================== Teacher · commitments (editorial index on warm) =============================== */
.teacher-strengths{padding-block:48px 56px}
ul.strength-index{display:grid;gap:32px;margin:0;padding:0;list-style:none}
.strength{position:relative;min-width:0;padding-top:20px;color:var(--c-ink)}
.strength__rule{position:absolute;top:0;left:0;right:0}
.strength__title{font-size:var(--fs-h3);font-weight:800;line-height:1.265;color:var(--c-ink);text-wrap:balance}
.strength__desc{margin-top:8px;max-width:26em;font-size:var(--fs-small);line-height:1.55;color:var(--c-ink);text-wrap:pretty}
@media (min-width:768px){
  .teacher-strengths{padding-block:64px 72px}
  .strength__desc{font-size:var(--fs-body)}
}
@media (min-width:768px) and (max-width:1199.98px){
  /* Tablet: one commitment per row, title and note side by side on a shared column line. */
  .strength{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 32px;align-items:baseline}
  .strength__desc{margin-top:0}
}
@media (min-width:1200px){
  .teacher-strengths{padding-block:88px 104px}
  ul.strength-index{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
  .strength{padding-top:32px}
  .strength__title{font-size:var(--fs-h3)}
  .strength__desc{margin-top:14px;line-height:1.6}
}
@media (min-width:1200px) and (max-width:1439px){.strength__title{font-size:calc(var(--fs-h3) * .84)}}

/* =============================== Teacher · profiles (one band per teacher) =============================== */
.teacher-list{position:relative}
ul.teacher-bands{margin:0;padding:0;list-style:none}
.teacher-band{padding-block:48px 56px;scroll-margin-top:var(--header-h)}
.teacher-panel{display:grid;gap:28px;min-width:0}
.teacher-panel__media{position:relative;min-width:0}
.teacher-panel__print{position:relative;margin:0;max-width:440px}
/* Client, 24 Sep: background-removed cut-outs shown as supplied — no colour tile, no blend — on a hairline baseline. */
.teacher-panel__photo{position:relative;overflow:hidden;aspect-ratio:4 / 5;border-bottom:1px solid var(--band-rule,rgba(var(--c-ink-rgb),.2))}
.teacher-panel__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.teacher-panel__body{min-width:0}
.teacher-panel__name{margin:0;font-size:calc(var(--fs-h2) * .9);font-weight:900;line-height:1.15}
.teacher-panel__rule{display:block;margin-top:16px;max-width:320px}
.teacher-panel__role{margin-top:14px;font-size:var(--fs-small);font-weight:700;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
ul.teacher-panel__specs{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid rgba(var(--c-ink-rgb),.2);font-size:var(--fs-small);line-height:1.55}
.teacher-panel__specs li{position:relative;padding:12px 8px 12px 22px;border-bottom:1px solid rgba(var(--c-ink-rgb),.2);text-wrap:balance}
.teacher-panel__specs li::before{content:"";position:absolute;left:4px;top:calc(12px + .62em);width:8px;height:1.5px;background:var(--c-green)}
.teacher-band--ink .teacher-panel__role{color:var(--c-lime)}
.teacher-band--ink ul.teacher-panel__specs,.teacher-band--ink .teacher-panel__specs li{border-color:rgba(255,250,243,.2)}
.teacher-band--ink .teacher-panel__specs li::before{background:var(--c-lime)}
@media (max-width:399.98px){.teacher-panel__specs li{font-size:13.5px}}
@media (min-width:768px){
  .teacher-band{padding-block:64px 72px}
  .teacher-panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
  .teacher-panel__name{font-size:calc(var(--fs-h2) * .8)}
  .teacher-band--photo-right .teacher-panel{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .teacher-band--photo-right .teacher-panel__media{order:2}
}
@media (min-width:1200px){
  .teacher-band{padding-block:96px 104px}
  .teacher-panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;max-width:1180px;margin-inline:auto}
  .teacher-band--photo-right .teacher-panel{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  /* The photo stays in view while the credentials scroll past it. */
  .teacher-panel__media{position:sticky;top:calc(var(--header-h) + 24px)}
  .teacher-panel__body{padding-top:24px}
  .teacher-panel__name{font-size:calc(var(--fs-h2) * .84)}
  .teacher-panel__rule{margin-top:22px}
  .teacher-panel__role{margin-top:18px;font-size:var(--fs-small)}
  ul.teacher-panel__specs{margin-top:32px;font-size:var(--fs-body);line-height:1.5}
  .teacher-panel__specs li{padding:16px 12px 16px 30px}
  .teacher-panel__specs li::before{left:6px;top:calc(16px + .72em);width:12px}
}

@media (min-width:1200px) and (max-width:1439px){.teacher-panel__name{font-size:calc(var(--fs-h2) * .76)}}

/* Teacher · image-led interlude (ink band): the team photo as a wide ink/olive duotone print with a lime hairline
   frame offset down-right. Decorative repeat of the hero photo (aria-hidden). */
.teacher-interlude{padding-block:48px 56px}
.teacher-interlude__frame{--frame-color:var(--c-lime);max-width:1180px;margin-inline:auto}
.teacher-interlude__photo{aspect-ratio:4 / 3;border-radius:var(--radius-card)}
.teacher-interlude__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 10%}
@media (min-width:768px){.teacher-interlude{padding-block:64px 72px}.teacher-interlude__photo{aspect-ratio:16 / 9}}
@media (min-width:1200px){.teacher-interlude{padding-block:96px 104px}.teacher-interlude__photo{aspect-ratio:2 / 1}.teacher-interlude__img{object-position:50% 8%}}

/* Teacher · closing CTA: the canonical lime tile on the olive cut band, same width as the course pages. */
.teacher-cta__form{max-width:1080px;margin-inline:auto}

/* =============================== Contact · split hero =============================== */
.contact-hero{padding-block:40px 0}
.contact-hero__grid{display:grid;gap:0;align-items:start}
.contact-hero__intro{position:relative;min-width:0;padding-bottom:48px}
.contact-hero__title{margin:0;font-size:var(--fs-h1);font-weight:900;color:var(--c-ink);text-transform:none}
.contact-hero__brand{white-space:nowrap;color:var(--c-green)}
.contact-hero__lead{margin-top:16px;max-width:34em;font-size:var(--fs-body);line-height:1.6;text-wrap:pretty}
.contact-hero__lead .hl-swipe{font-weight:700}
.contact-hero__lead strong{font-weight:700;color:var(--c-ink)}
.contact-hero__display{display:none;position:absolute;left:-.04em;top:-.42em;z-index:0;--dt-size:clamp(88px,24vw,300px);white-space:nowrap;pointer-events:none}
.contact-hero__card-wrap{position:relative;margin-top:32px}
/* Premium ink hotline card: hairline index rule, lime number, response-time notes on hairlines. */
.hotline-card{position:relative;padding:24px 20px;border-radius:var(--radius-card);background:var(--c-ink);color:var(--c-cream)}
.hotline-card__rule{display:block;margin-bottom:20px;color:var(--c-lime)}
.hotline-card__top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid rgba(255,250,243,.2)}
.hotline-card__icon{display:inline-grid;place-items:center;flex:none;width:52px;height:52px;border:1px solid var(--c-lime);border-radius:var(--radius-sm);color:var(--c-lime)}
.hotline-card__icon .icon{width:24px;height:24px}
.hotline-card__title{margin:0;font-size:var(--fs-h3);font-weight:700;line-height:1.265;color:var(--c-cream)}
.hotline-card__number{display:inline-flex;align-items:center;min-height:44px;font-size:calc(var(--fs-h3) * 1.2);font-weight:900;line-height:1.2;letter-spacing:.01em;color:var(--c-lime);text-decoration:none;white-space:nowrap;background:linear-gradient(var(--c-lime),var(--c-lime)) 0 calc(100% - 4px)/0 2px no-repeat;transition:background-size .35s var(--ease)}
@media (hover:hover){.hotline-card__number:hover{background-size:100% 2px}}
.hotline-card__number:focus-visible{background-size:100% 2px}
.hotline-card__number:active{opacity:.75}
.hotline-card__number:focus-visible,.hotline-card__note a:focus-visible{outline:3px solid var(--c-cream);outline-offset:3px;border-radius:var(--radius-sm)}
.hotline-card__note{font-size:var(--fs-small);line-height:1.55;color:var(--c-cream);text-wrap:pretty}
.hotline-card__note + .hotline-card__note{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,250,243,.2)}
.hotline-card .nowrap{white-space:nowrap}
.hotline-card__note a{color:var(--c-lime);font-weight:700;text-decoration:underline;text-decoration-color:var(--c-lime);text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover){.hotline-card__note a:hover{text-decoration-thickness:2px;color:var(--c-cream)}}
.hotline-card__note a:active{opacity:.75}
/* Form on the olive field. Mobile/tablet: the field runs full-bleed under the form (gutter to gutter) with a rounded
   top edge; desktop: it bleeds off the right edge behind the form column. */
.contact-hero__form{position:relative;min-width:0;padding-block:40px var(--section-y)}
.contact-hero__field{position:absolute;z-index:-1;top:0;bottom:0;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));border-radius:40px 40px 0 0;background:var(--c-green);pointer-events:none}
.contact-form{position:relative;scroll-margin-top:calc(var(--header-h) + 16px)}
.contact-form .lead-form__title{font-weight:900}
@media (max-width:767px){
  .contact-form .form__actions .btn,.about-form .form__actions .btn{width:100%;padding-inline:14px;gap:8px;font-size:15px}
  .contact-form.lead-form--card{padding-inline:18px}
}
@media (min-width:768px){
  .contact-hero{padding-top:64px}
  .contact-hero__intro{padding-bottom:64px}
  .hotline-card{padding:32px 36px}
  .contact-hero__form{padding-block:56px var(--section-y)}
  .contact-hero__field{border-radius:48px 48px 0 0}
}
@media (min-width:1200px){
  .contact-hero{padding-block:80px 96px}
  .contact-hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:64px;align-items:end}
  .contact-hero__intro{padding-bottom:0}
  .contact-hero__lead{margin-top:28px;max-width:27em;line-height:1.5}
  /* Desktop only: cropped by the band's bottom edge, clear of the hotline card above it. */
  .contact-hero__display{display:block;top:auto;bottom:-.46em;--dt-size:min(13vw,240px)}
  .contact-hero__card-wrap{margin-top:56px}
  .hotline-card{padding:40px 44px}
  .hotline-card__rule{margin-bottom:28px}
  .hotline-card__title{font-size:var(--fs-h3)}
  .hotline-card__number{font-size:calc(var(--fs-h3) * 1.2)}
  .hotline-card__note{font-size:var(--fs-body);line-height:1.5}
  .hotline-card__note + .hotline-card__note{margin-top:20px;padding-top:20px}
  .contact-hero__form{padding:0}
  .contact-hero__field{top:-2000px;bottom:-96px;left:104px;right:-50vw;border-radius:0 0 0 64px}
  .contact-form .lead-form__title{font-size:calc(var(--fs-h2) * .67)}
  .contact-form.lead-form--card{padding:44px}
}
@media (min-width:1200px) and (max-width:1439px){
  .contact-form .lead-form__title{font-size:calc(var(--fs-h2) * .55)}
}

/* =============================== Reduced motion =============================== */
@media (prefers-reduced-motion:reduce){
  .hotline-card__number{transition:none}
}


/* =============================== Round 4: swipe rails on phones/tablets (base.css §18.2) =============================== */
@media (max-width:1023.98px){
  ol.method-stack.rail{--rail-w:min(86%,340px)}
  ol.method-stack.rail .method-card{grid-template-columns:minmax(0,1fr)}
  ol.method-stack.rail .method-card__num{grid-column:auto;margin:0 0 6px;font-size:56px}
  ol.method-stack.rail .method-card{min-height:100%}
  ul.strength-index.rail > .strength{padding:24px 20px;border:1px solid rgba(var(--c-ink-rgb),.08);border-radius:var(--radius-card);background:var(--c-cream)}
  ul.strength-index.rail .strength__rule{position:relative;top:auto;margin-bottom:16px}
  ul.strength-index.rail{--rail-w:min(86%,340px)}
  ul.strength-index.rail > .strength{display:block}
  ul.strength-index.rail .strength__desc{margin-top:8px}
}

/* =============================== Teacher · Round 4: portrait grid + profile sheets =============================== */
ul.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px;margin:0;padding:0;list-style:none}
.tcard{min-width:0;scroll-margin-top:calc(var(--header-h) + 24px)}
.tcard--lead{grid-column:1 / -1}
.tcard__open{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:0;text-align:left;color:var(--c-ink);cursor:pointer}
.tcard__photo{position:relative;display:block;overflow:hidden;aspect-ratio:4 / 5;border-bottom:1px solid rgba(var(--c-ink-rgb),.2)}
.tcard__photo.has-crop-marks{overflow:visible;padding:0}
.tcard__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .8s var(--ease)}
.tcard__crop{--crop:14px;inset:-14px}
.tcard__body{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 48px 0 0}
.tcard__name{font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.tcard__role{font-size:14px;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:rgba(var(--c-ink-rgb),.78);text-wrap:balance}
/* "+" button: an ink circle that turns lime and rotates on hover/focus (the card's only affordance). */
.tcard__plus{position:absolute;right:0;top:14px;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-pill);background:var(--c-ink);color:var(--c-lime);transition:transform .45s var(--ease),background-color .25s var(--ease),color .25s var(--ease)}
.tcard__plus::before,.tcard__plus::after{content:"";position:absolute;width:14px;height:1.5px;background:currentColor}
.tcard__plus::after{transform:rotate(90deg)}
@media (hover:hover){.tcard__open:hover .tcard__plus{transform:rotate(90deg);background:var(--c-lime);color:var(--c-ink)}}
.tcard__open:focus-visible{outline:3px solid var(--c-ink);outline-offset:6px;border-radius:var(--radius-sm)}
.tcard__open:focus-visible .tcard__plus{background:var(--c-lime);color:var(--c-ink)}
.tcard__open:active{transform:scale(.98)}
.tcard--lead .tcard__name{font-size:26px;font-weight:900}
@media (min-width:768px){
  ul.tgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
  .tcard--lead{grid-column:span 2;grid-row:span 2}
  .tcard__name{font-size:20px}
}
@media (min-width:1200px){
  ul.tgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 28px}
  .tcard--lead .tcard__photo{aspect-ratio:auto;height:calc(100% - 96px)}
  .tcard--lead .tcard__open{height:100%}
  .tcard--lead .tcard__name{font-size:32px}
  .tcard__name{font-size:21px}
}
/* Profile sheet: native <dialog>. Desktop: a side sheet from the right; phones: a bottom sheet. No blur (banned). */
.tprofile{padding:0;border:0;color:var(--c-ink);background:var(--c-cream);max-width:none;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.tprofile::backdrop{background:rgba(var(--c-ink-rgb),.5)}
html:has(.tprofile[open]){overflow:hidden}
.tprofile[open]{position:fixed;inset:auto 0 0 0;width:100%;max-height:92dvh;margin:0;border-radius:24px 24px 0 0;animation:tp-up .45s var(--ease)}
.tprofile[open]::backdrop{animation:tp-fade .3s var(--ease)}
@keyframes tp-up{from{transform:translateY(40px);opacity:0}}
@keyframes tp-side{from{transform:translateX(48px);opacity:0}}
@keyframes tp-fade{from{opacity:0}}
.tprofile__inner{position:relative;padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.tprofile__bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:0 -20px 8px;padding:10px 20px;background:var(--c-cream)}
.tprofile__count{font-size:13px;font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:rgba(var(--c-ink-rgb),.72)}
.tprofile__close{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--c-ink);color:var(--c-cream);transition:transform .3s var(--ease),background-color .2s}
.tprofile__close::before,.tprofile__close::after{content:"";position:absolute;width:16px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.tprofile__close::after{transform:rotate(-45deg)}
@media (hover:hover){.tprofile__close:hover{transform:rotate(90deg);background:var(--c-green);color:var(--c-ink)}}
.tprofile__close:focus-visible,.tprofile__step:focus-visible{outline:3px solid var(--c-ink);outline-offset:3px}
.tprofile__head{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:end}
.tprofile__photo{overflow:hidden;aspect-ratio:4 / 5;border-bottom:1px solid rgba(var(--c-ink-rgb),.2)}
.tprofile__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.tprofile__name{margin:0;font-size:26px;font-weight:900;line-height:1.15;letter-spacing:-.02em}
.tprofile__role{margin-top:8px;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0;color:rgba(var(--c-ink-rgb),.78);text-wrap:balance}
.tprofile__rule{margin:22px 0 4px}
ul.tprofile__specs{margin:0;padding:0;list-style:none;counter-reset:spec}
.tprofile__specs li{position:relative;counter-increment:spec;padding:14px 0 14px 40px;border-bottom:1px solid rgba(var(--c-ink-rgb),.14);font-size:15px;line-height:1.55;text-wrap:pretty}
.tprofile__specs li::before{content:counter(spec,decimal-leading-zero);position:absolute;left:0;top:15px;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--c-green)}
.tprofile__nav{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.tprofile__step{display:inline-grid;place-items:center;width:48px;height:48px;border:1px solid var(--c-ink);border-radius:var(--radius-pill);color:var(--c-ink);transition:background-color .2s var(--ease),color .2s var(--ease),transform .15s}
.tprofile__step .icon{width:20px;height:20px}
@media (hover:hover){.tprofile__step:hover{background:var(--c-ink);color:var(--c-lime)}}
.tprofile__step:active{transform:scale(.94)}
@media (min-width:768px){
  .tprofile[open]{inset:0 0 0 auto;width:min(600px,92vw);height:100dvh;max-height:none;border-radius:28px 0 0 28px;animation:tp-side .5s var(--ease)}
  .tprofile__inner{padding:16px 40px 40px}
  .tprofile__bar{margin:0 -40px 12px;padding:14px 40px}
  .tprofile__head{grid-template-columns:168px minmax(0,1fr);gap:28px}
  .tprofile__name{font-size:34px}
  .tprofile__specs li{font-size:16px;padding-block:16px}
}
@media (prefers-reduced-motion:reduce){.tprofile[open],.tprofile[open]::backdrop{animation:none}.tcard__plus,.tcard__img,.tprofile__close{transition:none}}
/* Without JS: profiles show inline under their cards. */
html:not(.js) .tprofile{display:block;position:static;margin-top:16px;border-radius:var(--radius-card)}
html:not(.js) .tprofile__bar,html:not(.js) .tprofile__nav,html:not(.js) .tcard__plus{display:none}
/* Phones: two narrow columns — the "+" sits on the portrait's bottom-right corner, names stay on one line (sized to the
   card), crop marks only from 768 (they would stick out of the container). */
.tcard__body{container-type:inline-size}
.tcard__name{white-space:nowrap}
@media (max-width:767.98px){
  .tcard__body{padding-right:0}
  .tcard__plus{top:-46px;right:8px;width:34px;height:34px}
  .tcard__name{font-size:min(17px,100cqi / 7.9)}
  .tcard--lead .tcard__name{font-size:min(26px,100cqi / 7.9)}
  .tcard__role{font-size:13px}
  .tcard__crop{display:none}
}
.tcard__crop{inset:0}
/* The "+" sits on the portrait's bottom-right corner at every width, so names and roles get the full card width. */
.tcard__body{padding-right:0}
.tcard__plus{top:-50px;right:10px}
.tcard--lead .tcard__plus{top:-58px;right:14px;width:44px;height:44px}
@media (max-width:767.98px){.tcard__plus{top:-46px;right:8px}}

/* =============================== About · Round 5 (client, 24 Sep: "xấu hơn Figma") ===============================
   Same Figma structure and copy, re-composed: a large cut-out hero standing on the ink band's lower edge, a bento stat
   board, and the four-step model as a horizontal process with a timeline rail; cards take their colour on hover. */
/* Hero: the photo is the anchor — larger, no crop marks, sitting on the band's bottom edge over the olive slab. */
.page-hero--about .page-hero__crop{display:none}
.page-hero__media--about .page-hero__print{padding:0}
.page-hero--about{padding-bottom:0}
.page-hero--about .page-hero__copy{padding-bottom:8px}
.page-hero__media--about .page-hero__field{top:34%;bottom:0;left:-24px;right:calc(-50vw);--slab-cut:72px}
@media (min-width:1024px){
  .page-hero--about .page-hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:end;gap:40px}
  .page-hero--about .page-hero__copy{align-self:center;padding-bottom:calc(var(--section-y) + 40px)}
  .page-hero__media--about{align-self:end;max-width:none;margin:0}
  .page-hero--about .page-hero__field{display:block}
}
@media (max-width:1023.98px){.page-hero__media--about{margin-top:12px;max-width:560px}}

/* Stats: bento board on the warm band — the lead figure is a large ink tile; the others are lime, cream, olive, cream. */
ul.stat-board.stat-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat-board .stat{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:168px;padding:20px 20px 22px;border:1px solid rgba(var(--c-ink-rgb),.08);border-radius:var(--radius-card);background:var(--c-cream);grid-column:auto;grid-row:auto}
.stat-board .stat__rule{position:relative;top:auto}
.stat-board .stat__text{margin:0}
.stat-board .stat--lead{grid-column:1 / -1;background:var(--c-ink);border-color:var(--c-ink);color:var(--c-cream);--band-accent:var(--c-lime);--band-rule:rgba(255,250,243,.2)}
.stat-board .stat--lead :is(.stat__num,.stat__label,.stat__desc){color:var(--c-cream)}
.stat-board .stat--lead .stat__num{color:var(--c-lime)}
.stat-board .stat:nth-child(2){background:var(--c-lime);border-color:var(--c-lime);--band-accent:var(--c-ink)}
.stat-board .stat:nth-child(4){background:var(--c-green);border-color:var(--c-green);--band-accent:var(--c-ink);--band-rule:rgba(var(--c-ink-rgb),.25)}
.stat-board .stat .tmm-mark--rule-index{color:var(--band-accent,var(--c-green))}
@media (max-width:767.98px){.stat-board .stat:not(.stat--lead){display:flex}.stat-board .stat__num{font-size:clamp(36px,10vw,48px)}}
@media (min-width:1024px){
  ul.stat-board.stat-board{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:16px}
  .stat-board .stat{padding:26px 26px 28px}
  .stat-board .stat--lead{grid-column:1 / span 2;grid-row:1 / span 2;padding:32px 34px 36px;border-right:0}
  .stat-board .stat:nth-child(2),.stat-board .stat:nth-child(3),.stat-board .stat:nth-child(4),.stat-board .stat:nth-child(5){grid-column:auto}
  .stat-board .stat__num{font-size:56px}
  .stat-board .stat--lead .stat__num{font-size:clamp(120px,10vw,150px)}
}
@media (hover:hover) and (min-width:1024px){.stat-board .stat{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}.stat-board .stat:hover{transform:translateY(-4px);box-shadow:0 28px 56px -34px rgba(var(--c-ink-rgb),.45)}}

/* Model: heading on top, then four steps in a row on a timeline rail (≥1024). Cards are cream; each takes its own
   accent (warm · lime · olive · ink) on hover / focus. Phones keep the coloured swipe rail. */
@media (min-width:1024px){
  .about-method__layout{display:block}
  .about-method__head{position:relative;top:auto;max-width:none;margin-bottom:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
  .about-method__mark{grid-column:1 / -1;margin-bottom:0}
  .about-method__head .h2 em{display:block}
  .about-method__sub{margin:0;justify-self:end;max-width:30em}
  ol.method-stack{position:relative;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:34px}
  ol.method-stack::before{content:"";position:absolute;top:8px;left:0;right:0;height:1px;background:rgba(var(--c-ink-rgb),.2)}
  .method-card,.method-card--1,.method-card--2,.method-card--3,.method-card--4{position:relative;display:flex;flex-direction:column;gap:0;min-height:320px;padding:28px 26px 30px;border:1px solid rgba(var(--c-ink-rgb),.1);background:var(--c-cream);color:var(--c-ink);transition:background-color .4s var(--ease),color .4s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
  .method-card::before{content:"";position:absolute;top:-30px;left:26px;width:9px;height:9px;background:var(--c-cream);border:1.5px solid var(--c-green);transition:background-color .3s var(--ease)}
  .method-card__num,.method-card--4 .method-card__num{margin:0 0 auto;font-size:72px;color:var(--c-ink);transition:color .4s var(--ease)}
  .method-card__body{padding-top:28px}
  .method-card__title{font-size:var(--fs-h3)}
  .method-card--4 .method-card__title em{color:inherit}
  .method-card--4 .method-card__rule{color:var(--c-green)}
  .method-card:hover,.method-card:focus-within{transform:translateY(-6px);box-shadow:0 30px 60px -36px rgba(var(--c-ink-rgb),.5)}
  .method-card:hover::before{background:var(--c-green)}
  .method-card--1:hover{background:var(--c-cream-warm)}
  .method-card--2:hover{background:var(--c-lime)}
  .method-card--3:hover{background:var(--c-green)}
  .method-card--4:hover{background:var(--c-ink);color:var(--c-cream)}
  .method-card--4:hover .method-card__num{color:var(--c-lime)}
  .method-card--4:hover .method-card__title em{color:var(--c-lime)}
}
@media (min-width:1024px) and (max-width:1199.98px){.method-card__num,.method-card--4 .method-card__num{font-size:56px}.method-card{min-height:280px}}
@media (prefers-reduced-motion:reduce){.method-card,.stat-board .stat{transition:none}}
/* About fixes (24 Sep): the hero photo stands on the band edge (only the next lip's overlap remains below it); the
   lead figure reads from the left; no index rules inside the bento tiles; lime replaces yellow, so the tile and step
   colours are re-dealt: tiles ink · deep green · cream · olive · cream; steps lime · deep green · olive · ink. */
.pg-about .page-hero--about.page-hero--about{padding-bottom:40px}
@media (max-width:767.98px){.pg-about .page-hero--about.page-hero--about{padding-bottom:28px}}
.stat-board .stat__rule{display:none}
.stat-board .stat:nth-child(2){background:var(--c-green-deep);border-color:var(--c-green-deep);color:#fff}
.stat-board .stat:nth-child(2) :is(.stat__num,.stat__label,.stat__desc){color:#fff}
.stat-board .stat:nth-child(3),.stat-board .stat:nth-child(5){background:var(--c-cream)}
.method-card--1{background:var(--c-lime)}
.method-card--2{background:var(--c-green-deep);color:#fff}
.method-card--2 .method-card__rule{color:var(--c-lime)}
@media (min-width:1024px){
  .method-card--2{color:var(--c-ink)}
  .method-card--1:hover{background:var(--c-lime)}
  .method-card--2:hover{background:var(--c-green-deep);color:#fff}
  .method-card--2:hover .method-card__num{color:var(--c-lime)}
}
/* Less deep green (24 Sep): tile 2 is cream; steps are lime · cream · olive · ink on phones, and take lime · olive ·
   ink · lime on hover on desktop. Phones: the four secondary tiles stack one per row below 480px (long notes). */
.stat-board .stat:nth-child(2){background:var(--c-cream);border-color:rgba(var(--c-ink-rgb),.08);color:var(--c-ink)}
.stat-board .stat:nth-child(2) :is(.stat__num,.stat__label,.stat__desc){color:var(--c-ink)}
.method-card--2{background:var(--c-cream);color:var(--c-ink);border:1px solid rgba(var(--c-ink-rgb),.1)}
.method-card--2 .method-card__rule{color:var(--c-green)}
@media (min-width:1024px){
  .method-card--2:hover{background:var(--c-green);color:var(--c-ink)}
  .method-card--2:hover .method-card__num{color:var(--c-ink)}
  .method-card--3:hover{background:var(--c-ink);color:var(--c-cream)}
  .method-card--3:hover .method-card__num{color:var(--c-lime)}
  .method-card--4:hover{background:var(--c-lime);color:var(--c-ink)}
  .method-card--4:hover .method-card__num,.method-card--4:hover .method-card__title em{color:var(--c-ink)}
}
@media (max-width:479.98px){ul.stat-board.stat-board{grid-template-columns:minmax(0,1fr)}.stat-board .stat{min-height:0}}
@media (max-width:1023.98px){ol.method-stack.rail .method-card__title{font-size:20px}ol.method-stack.rail{--rail-w:min(88%,360px)}}

/* Stats (client, 24 Sep): five equal tiles in one row on desktop (no lead tile); a swipe rail below 1024px. */
.stat-board .stat,.stat-board .stat--lead{grid-column:auto;grid-row:auto;min-height:0}
.stat-board .stat--lead .stat__num,.stat-board .stat__num{font-size:clamp(40px,4vw,54px);letter-spacing:-.03em}
.stat-board .stat--lead .stat__text{max-width:none}
.stat-board .stat--lead .stat__label{font-size:var(--fs-small)}
.stat-board .stat--lead .stat__desc{font-size:var(--fs-small)}
@media (max-width:1023.98px){ul.stat-board.stat-board.rail{--rail-w:min(62%,240px)}.stat-board .stat{min-height:200px}}
@media (min-width:1024px){
  ul.stat-board.stat-board{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:auto;gap:14px}
  .stat-board .stat,.stat-board .stat--lead{min-height:230px;padding:24px 22px 26px}
}
@media (max-width:420px){ol.method-stack.rail .method-card__title{font-size:18px}}

/* Hero images larger and consistent across pages (client, 24 Sep: "to hơn … tăng trust"). */
@media (min-width:1200px){
  .page-hero__inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}
  .page-hero__media{margin-right:calc(var(--gutter) * -.5)}
}
@media (min-width:768px) and (max-width:1199.98px){.page-hero__media{max-width:720px}}
.page-hero__media--team .page-hero__img{width:100%}
/* About step titles: never a lone last word in narrow rail cards. */
.method-card__title{text-wrap:balance}
@media (max-width:1023.98px){ol.method-stack.rail{--rail-w:min(90%,380px)}}
/* Widths 1024–1279: the four steps sit 2 × 2 and the stats 3 + 2; one row each from 1280. Titles/notes sized so no
   glued unit breaks; hero copy and photo share the row evenly so "Đội ngũ đồng hành" keeps its line. */
@media (min-width:1200px){.page-hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1024px) and (max-width:1279.98px){
  ol.method-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  ol.method-stack::before{display:none}
  .method-card::before{display:none}
  ul.stat-board.stat-board{grid-template-columns:repeat(6,minmax(0,1fr))}
  .stat-board .stat{grid-column:span 2}
  .stat-board .stat:nth-child(4),.stat-board .stat:nth-child(5){grid-column:span 3}
}
@media (min-width:1280px){.stat-board .stat,.stat-board .stat--lead{padding:22px 18px 24px}.stat-board .stat__desc,.stat-board .stat--lead .stat__desc{font-size:14px}.method-card__title{font-size:21px}}
@media (min-width:1024px) and (max-width:1279.98px){
  ul.stat-board.stat-board > .stat{grid-column:span 2}
  ul.stat-board.stat-board > .stat:nth-child(4),ul.stat-board.stat-board > .stat:nth-child(5){grid-column:span 3}
}
/* Client, 24 Sep: no colour field behind the cut-out hero photos (About slab, Teacher field). */
.page-hero__field,.page-hero--about .page-hero__field{display:none!important}

/* =============================== Contact · Round 5 =============================== */
.contact-v2{padding-block:40px var(--section-y)}
.contact-v2__grid{display:grid;gap:40px;align-items:start}
.contact-v2 .contact-hero__lead{max-width:36em}
ul.contact-ch{display:grid;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.contact-ch__row{display:flex;align-items:center;gap:16px;min-height:76px;padding:14px 18px 14px 14px;border:1px solid rgba(var(--c-ink-rgb),.12);border-radius:var(--radius-card);background:var(--c-cream);color:var(--c-ink);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.contact-ch__row--ink{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-cream)}
.contact-ch__row--lime{background:var(--c-cream-warm);border-color:transparent}
.contact-ch__icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:var(--c-lime);color:var(--c-ink)}
.contact-ch__icon .icon{width:22px;height:22px}
.contact-ch__icon--txt{font-size:14px;font-weight:800}
.contact-ch__row--lime .contact-ch__icon{background:var(--c-cream)}
.contact-ch__text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.contact-ch__label{font-size:13px;font-weight:600;letter-spacing:.02em;opacity:.75}
.contact-ch__value{font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.contact-ch__row--ink .contact-ch__value{color:var(--c-lime)}
.contact-ch__value--sm{font-size:16px;overflow-wrap:anywhere}
.contact-ch__go{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:999px;border:1px solid currentColor;opacity:.5;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.contact-ch__go .icon{width:16px;height:16px}
@media (hover:hover){.contact-ch__row:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(var(--c-ink-rgb),.5);border-color:rgba(var(--c-green-rgb),.7)}.contact-ch__row:hover .contact-ch__go{opacity:1;transform:translateX(4px)}}
.contact-ch__row:focus-visible{outline:3px solid var(--c-ink);outline-offset:3px}
.contact-ch__row:active{transform:scale(.98)}
.contact-v2__notes{margin-top:20px;padding-left:14px;border-left:2px solid var(--c-green);font-size:var(--fs-small);line-height:1.55;color:rgba(var(--c-ink-rgb),.8)}
.contact-v2__notes p + p{margin-top:6px}
@media (min-width:768px){.contact-v2{padding-top:64px}.contact-ch__row{min-height:84px;padding:16px 22px 16px 16px}.contact-ch__value{font-size:22px}}
@media (min-width:1024px){
  .contact-v2__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .contact-v2__form{position:sticky;top:calc(var(--header-h) + 24px)}
}
@media (min-width:1200px){.contact-v2{padding-block:88px 112px}}
@media (prefers-reduced-motion:reduce){.contact-ch__row,.contact-ch__go{transition:none}}
.contact-v2__intro,.contact-v2__form{min-width:0}
.contact-v2__notes p{text-wrap:pretty}

/* =============================== Round 6 (QA + research, 24 Sep evening) ===============================
   About: hero cut-out fades into the ink band on its cropped left edge; stats read left-aligned; step cards
   top-anchored. Teachers: normalised portraits, founder card spans exactly two rows, sentence-case roles, bottom
   sheet with its own scroll area + grab handle. Contact: one channel-card family; two columns from 768. */

/* ---- About · hero: the supplied cut-out is hard-cropped on its left edge (through the laptop) and at the bottom;
   the left edge is masked into the band and the bottom sits on the band edge under the next band's lip. ---- */
.page-hero__media--about .page-hero__frame{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
@media (min-width:1024px){
  .pg-about .page-hero--about.page-hero--about{padding-bottom:0}
  .page-hero--about .page-hero__inner{align-items:end;grid-template-columns:minmax(440px,1fr) minmax(0,1.08fr)}
  .page-hero__media--about{margin-right:calc(var(--gutter) * -1);margin-bottom:-1px}
  .page-hero__media--about .page-hero__frame{border-radius:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
}
/* The h1 keeps two lines ("Tiếng Anh giao tiếp / cho người lớn" ≈ 550px at 56px). */
@media (min-width:1200px){.page-hero--about .page-hero__inner{grid-template-columns:minmax(0,564px) minmax(0,1fr)}}
@media (max-width:1023.98px){
  .pg-about .page-hero--about.page-hero--about{padding-bottom:0}
  .page-hero__media--about{margin-inline:auto calc(var(--gutter) * -1)}
  .page-hero__media--about .page-hero__frame{border-radius:0}
}

/* ---- About · stats: numbers start on the same left line as the labels; no reserved width before "+". ---- */
.stat-board .stat__num{justify-content:flex-start;font-variant-numeric:tabular-nums}
.stat-board .stat__count{text-align:left;min-width:0!important}
.stat-board .stat__plus{margin-left:.02em}
.stat-board .stat,.stat-board .stat--lead{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0}
.stat-board .stat__text{margin-top:auto;padding-top:28px}

/* ---- About · method: fixed number block, body directly under it, so the index rules share one line; every rule
   olive (ink on the olive hover card, where olive would vanish). ---- */
.method-card__rule,.method-card--2 .method-card__rule,.method-card--3 .method-card__rule{color:var(--c-green)}
.method-card--4 .method-card__rule{color:var(--c-lime)}
@media (min-width:1024px){
  .method-card,.method-card--1,.method-card--2,.method-card--3,.method-card--4{justify-content:flex-start;background:var(--c-cream);color:var(--c-ink)}
  .method-card__num,.method-card--4 .method-card__num{display:flex;align-items:flex-start;height:1em;margin:0;line-height:.9}
  .method-card__body{padding-top:40px}
  .method-card--4 .method-card__rule{color:var(--c-green)}
  .method-card--2:hover .method-card__rule{color:var(--c-ink)}
  .method-card--3:hover .method-card__rule{color:var(--c-lime)}
  .method-card--1:hover{background:var(--c-lime)}
}

/* ---- Teachers · portraits: per-teacher scale / offset (--ps / --pdy set inline from teacher-list.php). ---- */
ul.tgrid .tcard__photo img.tcard__img,.tprofile__photo img.tprofile__img{transform-origin:50% 0;transform:translateY(var(--pdy,0%)) scale(var(--ps,1))}
@media (hover:hover){ul.tgrid .tcard__open:hover img.tcard__img{transform:translateY(var(--pdy,0%)) scale(calc(var(--ps,1) * 1.04))}}
ul.tgrid .tcard__open:focus-visible img.tcard__img{transform:translateY(var(--pdy,0%)) scale(calc(var(--ps,1) * 1.04))}
.tprofile__photo{position:relative}

/* ---- Teachers · grid: each card is photo row + name row (subgrid), so the founder card spans exactly two
   neighbour cards: its portrait fills photo · name · photo, its name shares the second name row. The portrait is
   capped (640px at 1440) and stands on the shared hairline; being a cut-out, the space above it is just cream. ---- */
html.js ul.tgrid{row-gap:0}
html.js .tcard{display:grid;grid-row:span 2;grid-template-rows:subgrid}
html.js .tcard__open{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;height:auto}
html.js .tcard__body{padding-bottom:32px}
@media (min-width:768px){
  html.js .tcard--lead{grid-column:span 2;grid-row:span 4}
  html.js .tcard--lead .tcard__photo{grid-row:1 / span 3;align-self:end;aspect-ratio:auto;height:min(100%,640px);width:100%}
  html.js .tcard--lead .tcard__body{grid-row:4}
  html.js .tcard__body{padding-bottom:44px}
  .tcard--lead .tcard__img{object-position:50% 0}
}
@media (min-width:1200px){html.js .tcard__body{padding-bottom:52px}}

/* ---- Teachers · roles: sentence case, 13–14px. ---- */
.tcard__role{font-size:14px;letter-spacing:0;text-transform:none}
@media (max-width:767.98px){.tcard__role{font-size:13px}}

/* ---- Teachers · profile sheet: the bar sits above its own scroll area (never over the portrait); phones get a
   grab handle (drag to close, inline script in teacher-list.php); desktop side sheet springs in (@starting-style). ---- */
.tprofile{overflow:hidden}
.tprofile[open]{display:flex;flex-direction:column}
.tprofile__inner{display:flex;flex-direction:column;flex:1;min-height:0;padding:0}
.tprofile__bar{position:relative;flex:none;margin:0;padding:22px 20px 12px;border-bottom:1px solid rgba(var(--c-ink-rgb),.1);touch-action:none;cursor:grab}
.tprofile.is-dragging .tprofile__bar{cursor:grabbing}
.tprofile__grab{position:absolute;top:8px;left:50%;width:44px;height:5px;border-radius:3px;background:rgba(var(--c-ink-rgb),.28);transform:translateX(-50%)}
.tprofile__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px))}
@media (min-width:768px){
  .tprofile__bar{padding:16px 40px;cursor:auto;touch-action:auto}
  .tprofile__grab{display:none}
  .tprofile__scroll{padding:24px 40px 40px}
  .tprofile[open]{animation:none;transition:transform .7s var(--spring,var(--ease)),opacity .3s var(--ease)}
  @starting-style{.tprofile[open]{transform:translateX(72px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){.tprofile[open]{transition:none}}
html:not(.js) .tprofile__scroll{overflow:visible;padding:16px 20px 24px}

/* ---- Contact · channel cards: one structure and one value size for all three (colours kept); a container query
   stacks icon/arrow over the text when the column is narrow, so the email never shrinks below 14px. ---- */
ul.contact-ch{container-type:inline-size}
.contact-ch__text{container-type:inline-size;min-width:0}
.contact-ch__row,.contact-ch__row--ink,.contact-ch__row--lime{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;min-height:84px;padding:16px 18px 16px 16px}
.contact-ch__value,.contact-ch__value--sm{font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow-wrap:normal}
.contact-ch__value--sm{font-size:max(14px,min(20px,100cqi / 15.5))}
@container (max-width:459.98px){
  .contact-ch__row,.contact-ch__row--ink,.contact-ch__row--lime{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon go" "text text";gap:14px 16px;align-items:start;padding:16px 18px 18px}
  .contact-ch__icon{grid-area:icon}
  .contact-ch__go{grid-area:go;justify-self:end}
  .contact-ch__text{grid-area:text}
}
.contact-ch__value--sm{font-size:max(14px,min(20px,100cqi / 17))}
/* ≥768: the title runs across both columns (the brand name never wraps or overflows), then channels | form. */
@media (min-width:768px){
  .contact-v2__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title title" "lead form" "ch form" "notes form";grid-template-rows:auto auto auto 1fr;gap:0 32px}
  .contact-v2__intro{display:grid;grid-column:1 / -1;grid-row:1 / -1;grid-template-columns:subgrid;grid-template-rows:subgrid}
  .contact-v2 .contact-hero__title{grid-area:title;margin-bottom:24px}
  .contact-v2 .contact-hero__lead{grid-area:lead;margin-top:0}
  .contact-v2 ul.contact-ch{grid-area:ch}
  .contact-v2 .contact-v2__notes{grid-area:notes;align-self:start}
  .contact-v2 .contact-hero__title,.contact-v2 .contact-hero__lead,.contact-v2 ul.contact-ch,.contact-v2 .contact-v2__notes{grid-column:1 / 2}
  .contact-v2 .contact-hero__title{grid-column:1 / -1;grid-row:1}
  .contact-v2 .contact-hero__lead{grid-row:2}
  .contact-v2 ul.contact-ch{grid-row:3}
  .contact-v2 .contact-v2__notes{grid-row:4}
  .contact-v2__form{grid-column:2;grid-row:2 / 5;align-self:start;position:sticky;top:calc(var(--header-h) + 24px);z-index:1}
}
@media (min-width:1024px){.contact-v2__grid{column-gap:56px}.contact-v2 .contact-hero__title{margin-bottom:32px}}
/* The form card follows the shared form style (foundation); only its sticky placement is local. */

/* About form (QA P2-26): at 390 the glued brand name now fits on line 1 after "…liên hệ," (16px card gutter, a hair of
   negative tracking), so the note no longer reads like a forced break after the comma. The title's break is tablet+ only (.br-tablet). */
@media (max-width:767.98px){.about-form.lead-form{padding-inline:16px}.about-form .lead-form__desc{letter-spacing:-.01em;text-wrap:pretty}}

/* Phones: the one h1 style, capped by the column so each designed line holds (About "Tiếng Anh giao tiếp" ≈ 9.8em,
   Teachers "Đội ngũ đồng hành" ≈ 9.3em, Contact "The Metaphoric Mind" ≈ 10.7em); never below the h2 size. */
@media (max-width:767.98px){
  .page-hero__title{font-size:max(var(--fs-h2),min(var(--fs-h1),calc((100vw - 2 * var(--gutter)) / 10)))}
  .contact-hero__title{font-size:max(var(--fs-h2),min(var(--fs-h1),calc((100vw - 2 * var(--gutter)) / 10.9)))}
}