/* Shared framework, 20261026-final-2. Existing fonts and page art remain authoritative. */
/* Children: an ordinary linked section menu, enhanced only when its controller is ready. */
.framework-intro { padding-block: clamp(28px, 3vw, 42px) 20px; }
.framework-intro > .container, .container.framework-shell, .framework-shell ~ .cta > .container, .framework-cta > .container { width: min(calc(100% - 80px), 1280px); }
.framework-intro h1 { max-width: 1100px; margin-block: 0 14px; font-size: clamp(2.35rem, 4.3vw, 3.7rem); line-height: 1.07; }
.framework-intro .lead { max-width: 940px; margin-block: 0 14px; }
.framework-intro .offer-line { margin-block: 14px 0; }
.framework-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; padding-block: 22px 24px; }
.framework-section-nav { display: grid; gap: 6px; align-content: start; counter-reset: section; }
.framework-section-nav a { display: flex; align-items: center; min-height: 52px; gap: 10px; padding: 13px 12px; border: 0; border-left: 3px solid transparent; border-radius: 7px; background: transparent; color: var(--heading); font-weight: 800; line-height: 1.35; text-decoration: none; }
.framework-section-nav a::before { counter-increment: section; content: counter(section, decimal-leading-zero); color: var(--brand-green); font-weight: 600; font-size: .88rem; }
.framework-section-nav a[aria-current="location"]::before { color: inherit; }
.framework-section-nav a:hover { border-color: var(--brand-green); text-decoration: underline; text-underline-offset: 4px; }
.framework-section-nav a[aria-current="location"] { background: #0b3f51; color: #f0ebe0; border-left-color: #ed7735; }
.framework-panels, .framework-shell [data-content-panel] { min-width: 0; }
.framework-shell [data-content-panel] { padding: 0; scroll-margin-top: calc(var(--sticky-header-height, 95px) + 20px); }
.framework-shell [data-content-panel] + [data-content-panel] { margin-top: 48px; }
.framework-shell[data-enhanced] [data-content-panel] { margin-top: 0; }
.framework-shell [data-content-panel] > :first-child { margin-top: 0; }
.framework-shell .section-head { display: block; margin-bottom: 22px; }
.framework-shell .section-head p { margin: 0; max-width: none; }
.framework-shell .project-story img { display: block; max-width: 100%; height: auto; }
.framework-shell [data-content-panel] h2 { margin-block: 0 12px; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.14; }
.framework-shell [data-content-panel] h3 { color: var(--heading); }
.framework-shell [data-content-panel] p { max-width: 76ch; }
.framework-shell [data-content-panel] a:not(.button) { text-underline-offset: 4px; }
.framework-shell [data-content-panel] h2:focus { outline: none; }
.framework-shell [data-content-panel] h2:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 6px; }
.framework-shell [data-content-panel][hidden],
.framework-project-viewer [data-project-slide][hidden],
.framework-team-viewer [data-profile-slide][hidden] { display: none; }
.framework-section-nav a:focus-visible,
.framework-project-controls button:focus-visible,
.framework-profile-controls button:focus-visible,
[data-project-viewer]:focus-visible,
[data-profile-viewer]:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 4px; }

/* Open narrative and media: no enclosing project card or fixed prose height. */
.framework-project-viewer { min-width: 0; }
.framework-project { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 36px); align-items: center; padding-block: 0 12px; }
.framework-project + .framework-project { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.framework-project-viewer[data-enhanced] .framework-project { margin-top: 0; border-top: 0; padding-top: 0; }
.framework-project-copy, .framework-project-media { min-width: 0; }
.framework-project-copy h3 { margin-block: 0 14px; font-size: clamp(1.4rem, 2.3vw, 1.85rem); line-height: 1.2; }
.framework-project-copy p { margin-block: 0 16px; }
.framework-project-media img,
.framework-project-media video { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 14px; }
.framework-project-media video { background: #0a272c; }
.framework-project-media figure { margin: 0; }
.framework-project-media figcaption { margin-top: 10px; font-size: .88rem; line-height: 1.5; }
.framework-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; width: 100%; aspect-ratio: 16 / 9; padding: 20px; border: 1px dashed var(--line); border-radius: 14px; background: var(--paper-soft); color: var(--ink); text-align: center; }
.framework-placeholder p { margin: 0; }
.framework-placeholder strong { color: var(--heading); }
.framework-project-controls, .framework-profile-controls { display: none; clear: both; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 20px; }
[data-project-viewer][data-enhanced] .framework-project-controls,
[data-profile-viewer][data-enhanced] .framework-profile-controls { display: flex; }
.framework-project-controls button,
.framework-profile-controls button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--heading); font: inherit; font-weight: 800; cursor: pointer; }
.framework-project-controls button:hover { background: var(--teal-soft); }
.framework-project-controls button:disabled,
.framework-profile-controls button:disabled { opacity: .5; cursor: default; }
[data-project-status], [data-profile-status] { min-width: 4.8em; font-size: .88rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
/* Reuse the established galaxy enquiry card, including its original renderer. */
/* Match the homepage enquiry card's measured type, spacing and controls. */
.cta .cta-box { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px; min-height: 0; }
.cta .cta-box > div { min-width: 0; }
.cta .cta-box h2 { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; }
.cta .cta-box p { margin: 5px 0 0; font-size: 1rem; line-height: 1.55; }
.cta .cta-box > .button { flex: 0 0 auto; padding: 14px 20px; font-size: 1rem; }
.living-hero #hero-title { white-space: normal; max-width: 100%; line-height: 1; text-wrap: balance; }
@media (max-width: 899px) {
  .cta .cta-box { flex-direction: column; align-items: stretch; gap: 16px; }
  .cta .cta-box > .button { width: 100%; }
}

.framework-cta { padding-top: 12px; }
.framework-route-grid, .framework-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 24px; }
.framework-route-grid, .framework-benefits { grid-auto-rows: 1fr; }
.framework-route-grid article { display: flex; flex-direction: column; padding: 24px 0; border-top: 1px solid var(--line); }
.framework-route-grid article > a:last-child { margin-top: auto; }
.framework-route-grid h3, .framework-benefits h3 { margin-block: 0 10px; }
.framework-benefits article { padding: 24px; border-radius: 18px; background: var(--paper); }
.framework-benefits article > p:last-child { margin-bottom: 0; }
.framework-benefits article > span { display: block; margin-bottom: 12px; color: var(--orange-text); font-weight: 800; }
.children-page .framework-project-media { justify-self: end; width: 100%; max-width: 530px; }
.children-page .framework-project-controls { padding-top: 0; }
.children-page .project-note { margin: 18px 0 0; font-size: .88rem; color: var(--ink); }

/* Home: retain the marketplace promise beside a manual, naturally sized profile viewer. */
.framework-team-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--section-gap, 24px); align-items: stretch; }
.framework-team-intro { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.framework-team-intro h2 { margin-top: 0; }
.homepage .team-section .framework-team-grid .team-promise { flex: 1; width: 100%; margin: 0; padding: clamp(24px, 3vw, 36px); background: var(--blue); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .homepage .team-section .framework-team-grid .team-promise { background: var(--teal-soft); color: var(--ink); }
}
:root[data-theme="dark"] .homepage .team-section .framework-team-grid .team-promise { background: var(--teal-soft); color: var(--ink); }
.homepage .framework-team-viewer { min-width: 0; width: 100%; max-width: 560px; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); }
.framework-profile-content { display: flow-root; }
.homepage .framework-profile + .framework-profile { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.framework-team-viewer[data-enhanced] .framework-profile { margin-top: 0; padding-top: 0; border-top: 0; }
.homepage #main .team-section .framework-profile h3 { margin-block: 0 8px; color: var(--heading); font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; letter-spacing: -.025em; }
.homepage .framework-profile p { margin-block: 0 12px; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.homepage .framework-profile .framework-profile-role { color: var(--orange-text); font-size: .95rem; font-weight: 800; line-height: 1.5; }
.homepage .framework-profile .framework-profile-role + p { color: var(--heading); font-size: 1.25rem; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.homepage .framework-profile .framework-portrait-frame { width: 135px; height: 200px; margin-left: 22px; margin-bottom: 14px; }
.framework-portrait,
.framework-portrait-frame,
.framework-portrait-placeholder { float: right; width: 125px; height: 185px; margin: 0 0 16px 20px; border-radius: 14px; }
.framework-portrait { display: block; object-fit: cover; object-position: center 30%; }
.framework-portrait-frame { display: block; position: relative; overflow: hidden; background: #0a272c; }
.framework-portrait-frame .framework-portrait { float: none; width: 100%; height: 100%; margin: 0; border-radius: 0; }
/* Frame the supplied screenshots inside their original files, excluding phone UI/letterboxing. */
.framework-portrait-frame--joshua .framework-portrait { position: absolute; max-width: none; width: 220%; height: auto; left: -42%; top: -82%; }
.framework-portrait-frame--aaron .framework-portrait { position: absolute; max-width: none; width: 138.71%; height: 200.47%; left: -17.65%; top: -66.67%; object-fit: fill; }
.framework-portrait-frame--chemi .framework-portrait { position: absolute; max-width: none; width: 108.53%; height: 156.86%; left: -4.41%; top: -28.24%; object-fit: fill; }
.framework-portrait-frame--connor .framework-portrait { position: absolute; max-width: none; width: 110.30%; height: 162.93%; left: -4.48%; top: -31.36%; object-fit: fill; }
/* Temporary supplied photos stay complete and unaltered inside the existing frames. */
.framework-portrait-frame--temporary { background: transparent; }
.framework-portrait-frame--temporary .framework-portrait { width: auto; max-width: 100%; height: 100%; margin-inline: auto; border-radius: 14px; object-fit: contain; object-position: center top; }

.framework-portrait-placeholder { display: grid; place-items: center; width: 88px; height: 116px; background: #f0ebe0; color: #0b3f51; font-size: 1.6rem; font-weight: 800; }
.homepage .framework-profile-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.homepage .framework-profile-link { color: var(--heading); font-weight: 800; line-height: 1.35; text-underline-offset: 4px; }
.homepage .framework-profile-link:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 4px; }
.homepage .framework-team-viewer .framework-profile-controls { margin: 0; padding: 0; }
.homepage .framework-team-viewer .framework-profile-controls button { border-color: var(--line); background: var(--paper); color: var(--heading); }
.homepage .framework-team-viewer .framework-profile-controls button:hover { background: var(--teal-soft); }
.homepage .framework-team-viewer .framework-profile-controls button:focus-visible,
.homepage .framework-team-viewer:focus-visible { outline-color: var(--orange-text); }
.framework-team-cta { grid-column: 2; justify-self: end; }

@media (min-width: 1200px) {
  .homepage .framework-team-grid { grid-template-columns: minmax(0, 1fr) 560px; }
}
@media (max-width: 1100px) {
  .homepage .framework-profile .framework-profile-role + p { font-size: 1.15rem; }
}
@media (max-width: 760px) {
  .homepage .framework-team-viewer { padding: 24px; }
  .homepage .framework-profile .framework-portrait-frame { width: 105px; height: 156px; margin-left: 16px; }
}
@media (max-width: 420px) {
  .homepage .framework-team-viewer { padding: 20px; }
  .homepage .framework-profile-controls { gap: 8px; }
  .homepage [data-profile-status] { min-width: 3.5em; }
  .homepage #main .team-section .framework-profile h3 { font-size: 1.5rem; }
  .homepage .framework-profile .framework-portrait-frame { width: 88px; height: 132px; margin-left: 12px; }
}

@media (max-width: 899px) {
  .framework-team-grid { grid-template-columns: minmax(0, 1fr); }
  .framework-team-cta { grid-column: auto; justify-self: start; }

}
@media (max-width: 1000px) {
  .framework-shell { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 12px 36px; }
  .framework-section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .framework-section-nav a { padding: 12px; }
  /* Owner, 30 Oct: an odd last item spans the row instead of sitting at half width. */
  .framework-section-nav > a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .framework-intro { padding-top: 30px; }
  .framework-project { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .framework-project-controls { justify-content: center; }
  .framework-intro > .container, .container.framework-shell, .framework-shell ~ .cta > .container, .framework-cta > .container { width: calc(100% - 40px); }
  .framework-route-grid, .framework-benefits { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .framework-portrait, .framework-portrait-frame { width: 105px; height: 156px; margin-left: 16px; }
  .framework-portrait-placeholder { width: 72px; height: 96px; margin-left: 16px; }
}
@media (max-width: 360px) {
  .framework-portrait, .framework-portrait-frame { width: 88px; height: 132px; margin-left: 12px; }
}

@media (min-width: 621px) and (max-width: 940px) {
  html { --sticky-header-height: 78px; scroll-padding-top: 90px; }
  :root body > header > .container.nav { width: calc(100% - 40px); height: 77px; min-height: 0; padding: 0; align-items: center; gap: 12px; }
  :root body > header .nav-links { display: contents; }
  :root body > header .nav-links > :not(.theme-toggle) { display: none; }
  :root body > header .theme-toggle { margin-left: auto; }
  :root body > header .mobile-menu { display: block; color: var(--mobile-menu-ink, var(--heading)); font-weight: 700; }
  .mobile-menu summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px; border: 1px solid currentColor; border-radius: 10px; cursor: pointer; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary::marker { content: ''; }
  .mobile-menu nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 8px; max-height: calc(100dvh - 78px); overflow-y: auto; padding: 12px 20px 16px; background: var(--mobile-menu-surface, var(--bg)); border-bottom: 1px solid currentColor; }
  .mobile-menu nav a { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; border-radius: 10px; text-decoration: none; }
  .mobile-menu nav a:hover { text-decoration: underline; }
  .mobile-menu nav .button { width: 100%; transform: none; font: inherit; }
  .mobile-menu .mobile-sub-links { margin: 0; padding: 0 0 0 16px; list-style: none; }
  .mobile-menu .mobile-sub-links a { min-height: 44px; padding: 8px 16px; font-size: .9rem; }
  .mobile-menu .mobile-sub-links .nav-group-label { padding: 10px 16px 2px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

  .mobile-menu summary:focus-visible, .mobile-menu nav a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
}

@media print {
  .framework-section-nav, .framework-project-controls, .framework-profile-controls { display: none !important; }
  .framework-shell, .framework-team-grid, .framework-project { display: block; }
  .framework-shell [data-content-panel][hidden],
  .framework-project-viewer [data-project-slide][hidden],
  .framework-team-viewer [data-profile-slide][hidden] { display: block !important; }
  .framework-shell [data-content-panel], .framework-project, .framework-profile { margin-block: 24px !important; }
  .homepage .framework-team-viewer { background: #fff; color: #10242d; border: 1px solid #aaa; }
  .framework-team-viewer .framework-profile :is(h3, p, a) { color: #10242d !important; }
  .framework-project-media { margin-block: 18px; max-width: 500px; }
  .framework-placeholder, .framework-profile { break-inside: avoid; }
}

.screenshot-gallery [data-screenshot][hidden] { display: none; }
.screenshot-gallery-controls { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .8rem; }
.screenshot-gallery[data-enhanced] .screenshot-gallery-controls { display: flex; }
.screenshot-gallery-controls button { min-height: 44px; flex-shrink: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--heading); font: inherit; font-weight: 700; cursor: pointer; }
.screenshot-gallery-controls button:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 3px; }

/* Overlapping grid tracks reserve the longest item without fixed heights or copies. */
.framework-project-viewer[data-enhanced] > .framework-project-slides,
.framework-team-viewer[data-enhanced] > .framework-profiles { display: grid; }
.framework-project-viewer[data-enhanced] > .framework-project-slides > [data-project-slide],
.framework-team-viewer[data-enhanced] > .framework-profiles > [data-profile-slide] { grid-area: 1 / 1; align-self: stretch; }
.framework-project-viewer[data-enhanced] > .framework-project-slides > [data-project-slide][hidden] { display: grid; visibility: hidden; pointer-events: none; }
.framework-team-viewer[data-enhanced] > .framework-profiles > [data-profile-slide][hidden] { display: block; visibility: hidden; pointer-events: none; }
@media print {
  .screenshot-gallery [data-screenshot][hidden] { display: block; }
  .screenshot-gallery-controls { display: none !important; }
  .framework-project-viewer[data-enhanced] > .framework-project-slides,
  .framework-team-viewer[data-enhanced] > .framework-profiles { display: block; }
  .framework-project-viewer[data-enhanced] > .framework-project-slides > [data-project-slide],
  .framework-team-viewer[data-enhanced] > .framework-profiles > [data-profile-slide] { display: block; visibility: visible; pointer-events: auto; }
}

/* Let the pixel interaction replace the pointer, without hiding navigation targets. */
@media (hover: hover) and (pointer: fine) {
  .cta .cta-sky,
  .homepage-section .reviews-enquiry--interactive,
  .cta .cta-sky .reviews-enquiry-sky,
  .homepage-section .reviews-enquiry--interactive .reviews-enquiry-sky { cursor: none; }
  .cta .cta-sky a,
  .homepage-section .reviews-enquiry--interactive a { cursor: pointer; }
}

/* A slightly quieter menu, with the original logo proportions intact. */
@media (min-width: 941px) {
  :root body > header .nav-links > a:not(.button),
  :root body > header .nav-links > .nav-item > a { font-size: .9375rem; }
}

/* Owner, 1 Nov: SVG flags (flag-icons), not emoji, so every device shows the same flag.
   Whole-pixel size: at 1.3em (20.8px) one edge fell between pixels and the flag looked lopsided;
   21px splits tricolours into three equal 7px stripes. */
.language-flag { display: inline-block; width: 21px; height: 16px; margin-right: 6px; object-fit: cover; border-radius: 3px; vertical-align: -2px; }

/* Seven language options: equal cells, with normal single-column flow on phones. */
.framework-panels #languages > :is(.learning-languages, .adult-language-list) { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 12px 20px; margin-block: 16px; }
.framework-panels #languages > :is(.learning-languages, .adult-language-list) > div { display: block; min-width: 0; padding-block: 12px 0; border-top: 1px solid var(--line); }
.framework-panels #languages > :is(.learning-languages, .adult-language-list) dt { margin: 0 0 6px; color: var(--heading); font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.framework-panels #languages > :is(.learning-languages, .adult-language-list) dd { margin: 0; line-height: 1.45; }
@media (min-width: 760px) {
  .framework-panels #languages > :is(.learning-languages, .adult-language-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .framework-panels #languages > :is(.learning-languages, .adult-language-list) { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; }
  .framework-panels #languages > :is(.learning-languages, .adult-language-list) dd { font-size: .95rem; line-height: 1.4; }
}

/* Supplied tutor photos, already cropped to the frame (20261028). */
.framework-portrait-frame--photo .framework-portrait { float: none; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; object-position: center top; }

/* Tutor availability as chips at the foot of each profile, no divider (owner, 28 Oct 2026). */
.profile-availability { display: flex; flex-wrap: wrap; gap: 6px; clear: both; margin: 12px 0 0; }
.avail-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--heading); font-size: .82rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.avail-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* Chips sit on the card's bottom edge, at the same height on every profile (owner, 28 Oct 2026:
   "the bottom chips need to be aligned with said border ... they're a bit floaty atm"). */
@media (min-width: 900px) {
  .team-deck-enhanced .team-biography .team-card-content { padding-bottom: 44px; }
  .team-deck-enhanced .team-biography .profile-availability { position: absolute; left: 24px; right: 24px; bottom: 18px; margin: 0; }
  .homepage .framework-team-viewer[data-enhanced] .framework-profile { display: flex; flex-direction: column; }
  .homepage .framework-team-viewer[data-enhanced] .framework-profile-content { position: relative; flex: 1 0 auto; padding-bottom: 44px; }
  .homepage .framework-team-viewer[data-enhanced] .framework-profile-content > .profile-availability { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; }
}
/* Home "Our team" landing (owner, 28 Oct 2026): clicking Our team shows the heading, both cells and
   the Book a free trial button on one screen at 100% zoom. */
@media (min-width: 1000px) {
  .homepage .homepage-section.team-section { padding-top: 18px; padding-bottom: 28px; scroll-margin-top: var(--sticky-header-height, 95px); }
  .homepage .team-section .framework-team-intro h2,
  .homepage .team-section h2 { margin-bottom: 14px; }
  .homepage .team-section .framework-team-grid { row-gap: 14px; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .homepage .framework-profile .framework-profile-role + p { font-size: 1.12rem; line-height: 1.38; }
  .homepage .framework-team-viewer { padding-block: 22px; }
}

/* Keep short Arabic phrases on one line inside English quotes. */
bdi[lang="ar"] { white-space: nowrap; }

/* Arabic closing line in a tutor quote: its own line, right-aligned under the photo. */
.quote-arabic { display: block; clear: right; margin-top: .25em; text-align: right; }
/* Our team landing, refit after the seventh profile (Amin's longer quote) made the card taller. */
@media (min-width: 1000px) and (max-height: 820px) {
  .homepage .homepage-section.team-section { padding-top: 6px; }
  .homepage .team-section h2 { margin-bottom: 10px; }
  .homepage .framework-profile .framework-profile-role + p { font-size: 1.05rem; line-height: 1.36; }
  .homepage .framework-team-viewer { padding-block: 18px; }
  .homepage .framework-profile .framework-portrait-frame { width: 120px; height: 178px; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  #main > .homepage-section.team-section { scroll-margin-top: calc(var(--sticky-header-height, 95px) - 22px); }
}
/* Our team landing, second go (owner, 28 Oct 2026): the heading stays tight under the menu and the
   cells grow so Book a free trial sits a few pixels off the bottom of the screen. */
@media (min-width: 1000px) and (max-height: 820px) {
  .homepage #main > .homepage-section.team-section { display: flex; flex-direction: column; min-height: calc(100vh - var(--sticky-header-height, 95px) + 22px + 32px - 10px); }
  .homepage .homepage-section.team-section > .container { flex: 1; display: flex; flex-direction: column; }
  .homepage .team-section .framework-team-grid { flex: 1; grid-template-rows: 1fr auto; }
}

/* Owner mobile polish, 1 Nov. Existing spacing/radius tokens, colours, fonts
   and artwork; every rule in this section is restricted to phone widths. */
@media screen and (max-width: 767px) {
  html body, html body.homepage {
    --page-gutter: 16px;
    --section-space: 32px;
    --section-gap: 12px;
    --section-card-space: 16px;
    --section-heading-size: 1.5rem;
    --card-heading-size: 1.125rem;
    font-size: 16px;
    line-height: 1.5;
  }
  html body #main :is(p, li, dd, dt, label, input, select, textarea) {
    font-size: 1rem !important;
    line-height: 1.5;
  }
  html body #main :is(h1, h2, h3, h4) { text-wrap: balance; overflow-wrap: break-word; }
  html body #main :is(h1, h2) { letter-spacing: -.035em; }
  html body #main :is(img, video, iframe, input, textarea, select) { max-width: 100%; }
  html body #main :is(.container, .framework-panels, [data-content-panel], .subject-card, .picture-cell, .contact-primary, .contact-sidebar) { min-width: 0; }
  html body .container,
  html body.homepage #main .container,
  html body .framework-intro > .container,
  html body .container.framework-shell,
  html body .framework-shell ~ .cta > .container,
  html body .team-page-intro > .container,
  html body.team-page .cta > .container,
  html body .contact-main { width: calc(100% - 2 * var(--page-gutter)); }
  :root body > header > .container.nav { width: calc(100% - 32px); gap: 8px; min-width: 0; }
  :root body > header .logo { min-width: 0; flex-shrink: 1; gap: 6px; }
  :root body > header .brand-toucan { width: 32px; height: 32px; flex-shrink: 0; }
  :root body > header .theme-toggle { width: 44px; height: 44px; flex: 0 0 44px; }
  :root body > header .mobile-menu > summary { min-height: 44px; padding: 8px 10px; }
  :root body > header .phone-book { min-width: 0; padding-inline: 12px; }
  html body #main .button { min-height: 44px; white-space: normal; text-align: center; line-height: 1.35; }
  html body #main :is(.opening-actions, .learning-links, .how-actions, .contact-next-actions, .thanks-actions) { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  html body #main :is(.opening-actions, .learning-links, .how-actions, .contact-next-actions, .thanks-actions) > .button { width: 100%; margin: 0; }
  html body #main :is(.opening-actions, .learning-links) > a:not(.button) { padding-block: 8px; overflow-wrap: anywhere; }
  html body #main .opening-offer { margin-top: 12px; }
  html body #main :is(.opening-proof, .opening-guarantee, .opening-review) { margin-block: 12px; }
  html body #main .opening-actions { margin-top: 12px; }
  html body #main .opening-reviews { font-size: 1rem; line-height: 1.5; }

  /* Openings and section menus share one gutter and a deliberate two-column grid. */
  html body #main > .framework-intro { padding-block: 24px 0; }
  html body #main .framework-intro h1,
  html body #main .contact-hero h1,
  html body.team-page #main .team-page-intro h1 { margin: 0 0 16px; font-size: clamp(1.875rem, 8vw, 2.25rem); line-height: 1.12; }
  html body #main .container.framework-shell { padding-block: 16px 24px; gap: 24px; grid-template-columns: minmax(0, 1fr); }
  html body #main .framework-section-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  html body #main .framework-section-nav a { min-width: 0; min-height: 48px; padding: 10px 12px; gap: 8px; line-height: 1.35; text-wrap: balance; }
  html body #main .framework-section-nav a::before { flex: 0 0 auto; }
  html body.cell-art-page #main .framework-panels { padding: 16px; border-radius: var(--radius-lg); min-height: 0 !important; height: auto; }
  html body #main .framework-panels > [data-content-panel]:not([hidden]) { min-height: 0; flex: none; }
  html body #main [data-section-page] { min-height: 0 !important; }
  html body #main .framework-panels .section-head { margin: 0 0 16px; }
  html body #main .framework-panels .section-head h2 { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.2; }
  html body #main .framework-panels .section-head p { margin: 0; }
  html body #main :is(.framework-page-controls, .showcase-navigation) { flex-wrap: wrap; gap: 8px; }
  html body #main .framework-page-controls button { min-height: 44px; padding: 10px 12px; }
  html body #main .cta { padding-block: 0 24px; }
  html body #main .cta .cta-box { padding: 16px; gap: 16px; border-radius: var(--radius-lg); }
  html body #main .cta .cta-box > .button { width: 100%; }
  html body #main .cta .cta-box :is(h2, h3) { margin: 0; font-size: 1.25rem; line-height: 1.25; }

  /* Home: shorter reading gaps, intrinsic route cards and compact teaching art. */
  html body.homepage #main .living-hero .hero-layout { min-height: 0; }
  html body.homepage #main .living-hero .hero-copy { padding: 24px 0 0; }
  html body.homepage #main .living-hero #hero-title { margin-bottom: 16px; font-size: clamp(2rem, 8.8vw, 2.5rem); line-height: 1.08; white-space: normal; text-wrap: balance; }
  html body.homepage #main .living-hero .hero-description { margin-bottom: 12px; }
  html body.homepage #main .living-hero .hero-actions { display: flex; width: 100%; gap: 12px; }
  html body.homepage #main .living-hero .hero-actions .button { width: 100%; min-height: 48px; }
  html body.homepage #main .living-hero .hero-actions .opening-reviews { padding-block: 4px; }
  html body.homepage #main .living-hero .hero-benefits { padding-top: 12px; margin-block: 12px 0; gap: 8px; }
  html body.homepage #main .living-hero .hero-world { margin: 24px 0 0; padding: 0 0 24px; }
  html body.homepage #main .living-hero .hero-project-caption { min-height: 0; justify-content: flex-start; padding: 12px; margin-bottom: 12px; }
  html body.homepage #main .living-hero .hero-project-caption h2 { font-size: 1.25rem; line-height: 1.25; }
  html body.homepage #main .living-hero .hero-project-caption .project-label { font-size: .75rem !important; }
  html body.homepage #main .living-hero .hero-world-eyebrow { font-size: .75rem; margin-top: 12px; }
  html body.homepage #main > .homepage-section { margin-top: var(--section-space); }
  html body.homepage #main .section-head { margin-bottom: 16px; }
  html body.homepage #main .section-head h2 { font-size: 1.5rem; line-height: 1.2; }
  html body.homepage #main #team .framework-team-grid { gap: 12px; }
  html body.homepage #main #team :is(.team-promise, .framework-profile-content) { padding: 16px; border-radius: var(--radius-lg); }
  html body.homepage #main #team .framework-profiles > [data-profile-slide][hidden] { display: none; }
  html body.homepage #main #team .framework-profile-content h3 { font-size: 1.25rem; }
  html body.homepage #main #team .framework-profile-controls { flex-wrap: wrap; gap: 8px; padding-top: 12px; }
  html body.homepage #main #team .framework-profile-controls button { min-width: 44px; min-height: 44px; }
  html body.homepage #main #support-routes .audience-route-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
  html body.homepage #main #support-routes .audience-route-card { min-height: 0; height: auto; padding: 16px; gap: 12px; border-radius: var(--radius-lg); grid-template-rows: auto auto; }
  html body.homepage #main #support-routes .audience-route-media { max-height: 144px; aspect-ratio: 16 / 9; }
  html body.homepage #main #support-routes .audience-route-copy { justify-content: flex-start; gap: 8px; }
  html body.homepage #main #support-routes .audience-route-copy :is(.eyebrow, h3) { margin: 0; }
  html body.homepage #main #support-routes .audience-route-copy h3 { font-size: 1.25rem; line-height: 1.25; }
  html body.homepage #main #support-routes .audience-button { width: 100%; margin-top: 4px; }
  html body.homepage #main #how-it-works .how-steps { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
  html body.homepage #main #how-it-works .how-steps li { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 12px; padding: 12px; }
  html body.homepage #main #how-it-works .how-step-media { grid-column: 1; grid-row: 1; align-self: center; width: 72px; height: 45px; aspect-ratio: auto; }
  html body.homepage #main #how-it-works .how-step-media img { width: 100%; height: 100%; object-fit: contain; }
  html body.homepage #main #how-it-works .how-number { grid-column: 2; grid-row: 1; align-self: start; width: auto; height: auto; font-size: .875rem; }
  html body.homepage #main #how-it-works .how-steps li > div:not(.how-step-media) { grid-column: 2; grid-row: 1; align-self: center; padding-left: 28px; }
  html body.homepage #main #how-it-works .how-steps h3 { font-size: 1.125rem; line-height: 1.25; }
  html body.homepage #main #how-it-works .how-step-detail { grid-column: 1 / -1; grid-row: 2; opacity: 1; margin: 0; }
  html body.homepage #main #how-it-works .how-follow-up { margin-top: 16px; gap: 12px; }
  html body.homepage #main #how-it-works .how-note { padding: 16px; }
  html body.homepage #main #reviews .reviews-orbit { margin-block: 16px; }
  html body.homepage #main #reviews .review-quote { padding: 16px; border-radius: var(--radius-lg); }
  html body.homepage #main #reviews .review-quote blockquote { padding: 0; }
  html body.homepage #main #reviews .reviews-enhanced .reviews-grid { height: auto !important; }
  html body.homepage #main #reviews .reviews-enhanced .review-quote { height: auto !important; }
  html body.homepage #main #reviews .reviews-enhanced .review-quote.is-current { position: relative; inset: auto; }
  html body.homepage #main #reviews .reviews-enquiry { min-height: 0; padding: 16px; margin-top: 24px; gap: 16px; border-radius: var(--radius-lg); }
  html body.homepage #main #reviews .reviews-enquiry > .button { width: 100%; }

  /* Illustration cells: small art by the heading, full-width explanations. */
  html body.cell-art-page #main :is(#getting-started, #steps-to-success, #our-lessons, #english-for-work, #send-support) .picture-cell:not(.photo-cell) {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto;
    gap: 8px 12px; align-items: start; padding: 12px; border-radius: var(--radius-md);
  }
  html body.cell-art-page #main :is(#getting-started, #steps-to-success, #our-lessons, #english-for-work, #send-support) .picture-cell:not(.photo-cell) .picture-cell-media {
    grid-column: 1; grid-row: 1; align-self: center; width: 72px; height: 45px;
    min-height: 0; aspect-ratio: auto; margin: 0; border-radius: 10px;
  }
  html body.cell-art-page #main :is(#getting-started, #steps-to-success, #our-lessons, #english-for-work, #send-support) .picture-cell:not(.photo-cell) .picture-cell-media > img { width: 100%; height: 100%; margin: 0; object-fit: contain; }
  html body.cell-art-page #main :is(#getting-started, #steps-to-success, #our-lessons, #english-for-work, #send-support) .picture-cell:not(.photo-cell) .picture-cell-copy { display: contents; }
  html body.cell-art-page #main :is(#getting-started, #steps-to-success, #our-lessons, #english-for-work, #send-support) .picture-cell:not(.photo-cell) .picture-cell-copy > :is(h3, h4) { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 1.125rem; line-height: 1.3; }
  html body.cell-art-page #main :is(#getting-started, #steps-to-success, #our-lessons, #english-for-work, #send-support) .picture-cell:not(.photo-cell) .picture-cell-copy > p { grid-column: 1 / -1; margin: 0; }
  html body.cell-art-page #main :is(.learning-steps, .lesson-stage-grid, .send-points, .adult-topics--work) { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; margin-block: 16px; }
  html body.cell-art-page #main .framework-panels :is(.qualification-art, .ielts-art) { float: right; width: 88px; height: 55px; max-height: 55px; margin: 0 0 12px 12px; object-fit: contain; }
  html body.cell-art-page #main .qualification-cards > article { display: flow-root; padding: 16px; }
  html body.cell-art-page #main .qualification-cards > article > :is(h3, p, a) { margin-inline: 0; }
  html body.cell-art-page #main .framework-panels :is(.lesson-example-head, #weekly-reports .section-head) { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 8px 12px; align-items: start; }
  html body.cell-art-page #main .framework-panels :is(.lesson-example-head > img, #weekly-reports .section-head > .framework-panel-art) { grid-column: 2; grid-row: 1; width: 72px; height: 45px; aspect-ratio: auto; margin: 0; object-fit: contain; }
  html body.cell-art-page #main #weekly-reports .section-head > p { grid-column: 1 / -1; }
  html body.cell-art-page #main #weekly-reports #reports-heading { font-size: 1.5rem; }
  html body.cell-art-page #main #weekly-reports .report-parts { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  html body.cell-art-page #main #weekly-reports .report-parts > li { display: block; grid-row: auto; padding: 16px; }
  html body.cell-art-page #main #weekly-reports .report-parts > li > :is(strong, span, em) { display: block; margin-bottom: 8px; }
  html body.cell-art-page #main #weekly-reports .report-example { font-size: 1rem; }
  html body.cell-art-page #main #our-lessons .lesson-example-head > div { min-width: 0; }
  html body.cell-art-page #main #where-we-teach .teaching-formats { gap: 12px; }
  html body.cell-art-page #main :is(.teaching-format-body, .subject-photo-body) { padding: 16px; }
  html body.cell-art-page #main .teaching-format-photo { height: 144px; object-fit: cover; }
  html body.subjects-page #main .framework-panels > [data-content-panel] > .section-head { grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; }
  html body.subjects-page #main .framework-panels .section-head > .subject-art { width: 64px; height: 40px; grid-row: 1; }
  html body.subjects-page #main .framework-panels .section-head > p { grid-column: 1 / -1; }
  html body.subjects-page #main .framework-panels .learning-subject-grid { grid-auto-rows: auto; }
  html body.subjects-page #main .framework-panels .photo-cell { grid-template-columns: minmax(0, 1fr); }
  html body.subjects-page #main .framework-panels .photo-cell .picture-cell-media { min-height: 0; height: 136px; aspect-ratio: auto; border-radius: 15px 15px 0 0; }
  html body.subjects-page #main .framework-panels .photo-cell .picture-cell-copy { padding: 16px; }
  html body.subjects-page #main .framework-panels :is(.subject-card:not(.picture-cell), .subject-photo-body) { padding: 16px; }
  html body.adults-page #main #how-lessons-work > .section-head { grid-template-columns: minmax(0, 1fr) 64px; gap: 8px 12px; }
  html body.adults-page #main #how-lessons-work > .section-head > .framework-panel-art { width: 64px; height: 40px; }
  html body.adults-page #main #how-lessons-work .adult-lesson-footer { gap: 16px; margin-top: 16px; padding-top: 16px; }
  html body.adults-page #main #how-lessons-work .adult-lesson-photo img { max-height: 144px; }
  html body.adults-page #main .adult-language-list > div { gap: 8px; padding-block: 16px; }
  html body.adults-page #main #qualifications :is(.ielts-tutors, .ielts-methods) { gap: 12px; }
  html body.adults-page #main #qualifications .ielts-test-list article { gap: 8px; padding-block: 12px; }

  /* Media stays edge-to-edge; controls keep finger-sized targets. */
  html body #main [data-showcase] { --showcase-height: 340px; --showcase-bar: 44px; max-width: 100%; }
  html body #main .showcase-stage > img { object-fit: cover; }
  html body #main .showcase-caption > button { flex-basis: 44px; min-width: 44px; min-height: 44px; }
  html body #main .showcase-cell .piano-toggle { min-height: 44px; padding-inline: 8px; }
  html body #main .showcase-drink-controls { gap: 4px; max-width: calc(100% - 16px); }
  html body #main .showcase-drink-controls button { min-height: 44px; padding: 6px 8px; font-size: .875rem; }
  html body #main .showcase-cell .showcase-match-mute { width: 44px; height: 44px; }
  html body #main #learner-projects .framework-project-copy,
  html body #main #learner-projects .project-copy-result { padding: 16px; }
  html body #main #learner-projects .framework-project-copy h3 { font-size: 1.25rem; }
  html body #main #learner-projects .project-copy-cells h4 { font-size: 1rem; }
  html body #main #learner-projects .showcase-navigation > button { min-width: 44px; min-height: 44px; }

  /* Team cards follow the current biography's natural height on phones. */
  html body.team-page #main .team-page-intro { padding-top: 24px; }
  html body.team-page #main .team-page-layout { gap: 16px; }
  html body.team-page #main .team-page-info { gap: 12px; }
  html body.team-page #main :is(.team-page-promise-cell, .team-page-coverage-cell, .team-biography) { padding: 16px; border-radius: var(--radius-lg); }
  html body.team-page #main .team-deck-stage { margin-block: 0; padding-block: 0; }
  html body.team-page #main .team-profiles { width: 100%; height: auto !important; }
  html body.team-page #main .team-deck-enhanced .team-biography { height: auto; }
  html body.team-page #main .team-deck-enhanced .team-biography.is-current { position: relative; inset: auto; }
  html body.team-page #main .team-deck-enhanced .team-biography:not(.is-current) { position: absolute; visibility: hidden !important; pointer-events: none; }
  html body.team-page #main .team-biography .framework-portrait-frame { width: 72px; height: 108px; margin: 0 0 12px 12px; }
  html body.team-page #main .team-biography h2 { font-size: 1.5rem; line-height: 1.2; }
  html body.team-page #main .team-deck-controls { justify-content: space-between; padding-top: 12px; }

  /* Contact and Vietnam use the same full-width controls and compact cells. */
  html body #main.contact-main { padding-block: 24px; gap: 24px; }
  html body #main .contact-primary { gap: 24px; }
  html body #main :is(.enquiry-form, .contact-pricing, .contact-next, .vietnam-card, .vietnam-teacher) { padding: 16px; border-radius: var(--radius-lg); }
  html body #main .enquiry-form :is(.field, .field-stack) { min-width: 0; }
  html body #main .enquiry-form .field :is(input, textarea, select) { min-height: 44px; padding: 10px 12px; }
  html body #main .enquiry-form .field :is(small, .field-error) { font-size: 1rem; line-height: 1.5; }
  html body #main .enquiry-form .form-submit { width: 100%; min-height: 48px; }
  html body #main .pricing-bands { display: grid; gap: 12px; }
  html body #main .pricing-bands > .price-band { padding: 12px; }
  html body #main .contact-sidebar { gap: 16px; }
  html body #main .contact-next-actions .button { min-height: 44px; }
  html body #main .vietnam-teacher-grid { gap: 12px; }
  html body #main .vietnam-teacher { gap: 12px; }
  html body #main .vietnam-cards { gap: 12px; }
  html body #main .vietnam-card { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto; gap: 8px 12px; align-items: start; }
  html body #main .vietnam-card > img { grid-column: 1; grid-row: 1; width: 72px; height: 45px; aspect-ratio: auto; border-radius: 10px; object-fit: contain; }
  html body #main .vietnam-card-copy { display: contents; }
  html body #main .vietnam-card-copy > h2 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 1.125rem; }
  html body #main .vietnam-card-copy > p { grid-column: 1 / -1; margin: 0; }
  html body #main .vietnam-details { gap: 16px; }
  html body #main .vietnam-language { margin: 0; }

  /* Legal/support pages stay text-led. Long links and tables stay inside cells. */
  html body.policy-page #main .policy-hero { padding: 24px 0 16px; }
  html body.policy-page #main .policy-hero h1 { font-size: clamp(1.875rem, 8vw, 2.25rem); line-height: 1.12; }
  html body.policy-page #main .policy-content { gap: 12px; padding: 0 0 24px; }
  html body.policy-page #main .policy-content section { padding: 16px; border-radius: var(--radius-lg); }
  html body.policy-page #main .policy-content h2 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 12px; }
  html body.policy-page #main .policy-content :is(a, td, th) { overflow-wrap: anywhere; }
  html body.policy-page #main .policy-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html body.policy-page #main .policy-table-wrap { min-width: 0; max-width: 100%; }
  html body.policy-page #main table { width: 100%; table-layout: fixed; font-size: 1rem; }
  html body.policy-page #main :is(td, th) { padding: 8px; }
  html body #main.thanks-main { min-height: 0; padding-block: 32px; }
  html body #main .thanks-card { padding: 24px 16px; border-radius: var(--radius-lg); }
  html body #main .thanks-card h1 { font-size: 2rem; line-height: 1.12; }
  html body #main .thanks-card .lead { margin-bottom: 16px; }
  html body .site-footer { margin-top: 0; padding-block: 16px 24px; }
  html body.homepage .site-footer { margin-top: 24px; }
  html body .site-footer .footer-grid { gap: 12px; }
  html body .site-footer :is(p, .footer-copy) { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
  html body .site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 0 12px; }
  html body .site-footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }
}
@media screen and (max-width: 340px) {
  html body #main .framework-section-nav { grid-template-columns: minmax(0, 1fr); }
  html body #main .framework-section-nav a { min-height: 44px; }
  html body.cell-art-page #main :is(#getting-started, #steps-to-success, #our-lessons, #english-for-work, #send-support) .picture-cell:not(.photo-cell),
  html body.homepage #main #how-it-works .how-steps li { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
  html body.cell-art-page #main :is(#getting-started, #steps-to-success, #our-lessons, #english-for-work, #send-support) .picture-cell:not(.photo-cell) .picture-cell-media,
  html body.homepage #main #how-it-works .how-step-media { width: 56px; height: 35px; }
  html body #main .vietnam-teacher-copy { display: contents; }
  html body #main .vietnam-teacher-copy > p { grid-column: 1 / -1; }
  html body #main .vietnam-teacher-copy > p:first-child { grid-column: 2; grid-row: 2; }
  html body #main .vietnam-teacher > .framework-portrait-frame { width: 72px; height: 108px; }
  html body #main .vietnam-teacher { grid-template-columns: 72px minmax(0, 1fr); }
}
/* Full-width primary actions also cover the existing paragraph-based CTAs. */
@media screen and (max-width: 767px) {
  html body #main .framework-panels p > .button,
  html body #main .approach-panel-cta > .button,
  html body #main .vietnam-hero .button,
  html body #main .framework-team-cta { width: 100%; }
}
/* Example outlines use the same small-art heading row as the other panels. */
@media screen and (max-width: 767px) {
  html body.cell-art-page #main #our-lessons .lesson-example-head { grid-template-columns: minmax(0, 1fr) 64px; }
  html body.cell-art-page #main #our-lessons .lesson-example-head > div { display: contents; }
  html body.cell-art-page #main #our-lessons .lesson-example-head .lesson-example-label { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  html body.cell-art-page #main #our-lessons .lesson-example-head h3 { grid-column: 1; grid-row: 2; margin: 0; font-size: 1.125rem; line-height: 1.3; }
  html body.cell-art-page #main #our-lessons .lesson-example-head > img { grid-column: 2; grid-row: 2; align-self: center; width: 64px; height: 40px; }
  html body.cell-art-page #main #our-lessons .lesson-example-head > div > p:last-child { grid-column: 1 / -1; grid-row: 3; margin: 0; }
}

/* Phone render review, 1 Nov: preserve the desktop portrait crop, separate the
   step badge/title, and use native rows without a second card layout. */
@media screen and (max-width: 767px) {
  html body #main .framework-portrait-frame--joshua > .framework-portrait {
    max-width: none; width: 220%; height: auto; left: -42%; top: -82%;
  }
  html body:not([data-mobile-mock]) { min-height: 0; height: auto; padding-bottom: 0; }
  html body .site-footer { min-height: 0; height: auto; padding-bottom: 16px; }
  html body .site-footer .footer-grid { min-height: 0; align-content: start; }
  html body.homepage { --section-space: 24px; }
  html body.homepage #main > .homepage-section { padding-block: 0; min-height: 0; }
  html body.homepage #main .section-head { margin-bottom: 12px; }
  html body.homepage #main .living-hero .hero-copy { padding-top: 16px; }
  html body.homepage #main .living-hero .hero-world { margin-top: 16px; padding-bottom: 0; }
  html body.homepage #main .living-hero .hero-project-caption { padding: 12px; margin-bottom: 8px; }
  html body.homepage #main .living-hero [data-showcase] { --showcase-height: 260px; }
  html body.homepage #main .living-hero .hero-world-eyebrow { margin-block: 8px 0; }
  html body.homepage #main #team .framework-team-viewer { min-width: 0; padding: 12px; }
  html body.homepage #main #team .framework-profiles {
    display: grid; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: calc(100% - 24px); gap: 12px; align-items: start;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: thin; touch-action: pan-x pan-y;
  }
  html body.homepage #main #team .framework-profiles > [data-profile-slide],
  html body.homepage #main #team .framework-profiles > [data-profile-slide][hidden] {
    display: block; grid-area: auto; align-self: start; min-width: 0;
    margin: 0; padding: 0; border: 0; visibility: visible; pointer-events: auto;
    scroll-snap-align: start;
  }
  html body.homepage #main #team .framework-profile-content { padding: 0; }
  html body.homepage #main #team .framework-profile .framework-portrait-frame { width: 72px; height: 108px; margin: 0 0 8px 12px; }
  html body.homepage #main #team .framework-profile-footer { margin-top: 12px; padding-top: 12px; }
  html body.homepage #main #team .framework-profile-controls { padding-top: 0; }
  html body.homepage #main #support-routes .audience-route-card {
    grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto;
    gap: 12px; padding: 12px; align-items: center;
  }
  html body.homepage #main #support-routes .audience-route-media { width: 88px; height: 88px; aspect-ratio: 1; }
  html body.homepage #main #support-routes .audience-route-copy { gap: 8px; }
  html body.homepage #main #support-routes .audience-route-copy .eyebrow { font-size: .6875rem; letter-spacing: .06em; }
  html body.homepage #main #support-routes .audience-route-copy h3 { font-size: 1.125rem; }
  html body.homepage #main #support-routes .audience-button { padding: 10px 8px; }
  html body.homepage #main #how-it-works .how-steps li {
    grid-template-columns: 28px minmax(0, 1fr) 56px;
    grid-template-rows: auto auto; gap: 8px; min-height: 0; padding: 12px;
  }
  html body.homepage #main #how-it-works .how-number {
    grid-column: 1; grid-row: 1; align-self: center; justify-self: start;
    position: static; width: 28px; height: 28px; border-radius: 8px;
  }
  html body.homepage #main #how-it-works .how-steps li > div:not(.how-step-media) {
    grid-column: 2; grid-row: 1; padding: 0; align-self: center;
  }
  html body.homepage #main #how-it-works .how-steps h3 { margin: 0; }
  html body.homepage #main #how-it-works .how-step-media {
    grid-column: 3; grid-row: 1; width: 56px; height: 35px; margin: 0; align-self: center;
  }
  html body.homepage #main #how-it-works .how-step-detail { grid-column: 1 / -1; grid-row: 2; }
  html body.homepage #main #how-it-works .how-follow-up { margin-top: 12px; }
  html body.homepage #main #how-it-works .how-note { padding: 12px; }
  html body.homepage #main #reviews .reviews-orbit { padding: 0; margin-block: 12px; perspective: none; touch-action: pan-x pan-y; }
  html body.homepage #main #reviews .reviews-grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: calc(100% - 24px); gap: 12px; align-items: start;
    width: 100%; height: auto !important; margin: 0; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    transform: none !important; transform-style: flat; transition: none; scrollbar-width: thin;
  }
  html body.homepage #main #reviews .reviews-grid .review-quote {
    position: relative; inset: auto; width: auto; min-width: 0; min-height: 0;
    height: auto !important; margin: 0; padding: 16px; align-self: start;
    transform: none !important; opacity: 1 !important; visibility: visible;
    pointer-events: auto !important; transition: none; scroll-snap-align: start;
  }
  html body.homepage #main #reviews .reviews-enquiry { margin-top: 16px; }
  html body.homepage .site-footer { margin-top: 16px; }
}