/* Original Scholé founders' story, presented in The Upskilling Company's style.
   White #fff, ink #242631, body #535560, blue #2e4bf0, lavender #efedf6.
   Scholé's pairing: New Spirit headings over Inter text, with portraits as the focal point. A broad
   introduction leads into equal founder portraits and a simple booking close.
   Preserve the original story and photos; avoid invented milestones or claims. */
.about-page { margin:0; background:#fff; color:#242631; font-family:var(--_typography-primitives---family--primary-family); -webkit-font-smoothing:antialiased; }
.about-page h1, .about-page h2 { font-family:var(--_typography-primitives---family--display-sans); }
.about-page *, .about-page *::before, .about-page *::after { box-sizing:border-box; }
.about-page :is(h1,h2,p,figure) { margin:0; }
.about-page a { color:inherit; text-underline-offset:5px; }
.about-page a:focus-visible { outline:3px solid #2e4bf0; outline-offset:5px; }
.about-page img { display:block; max-width:100%; }
.about-container { width:min(100% - 64px, 1280px); margin-inline:auto; }
.about-skip { position:fixed; z-index:20; top:12px; left:12px; padding:12px 18px; background:#fff; transform:translateY(-200%); }
.about-skip:focus { transform:translateY(0); }
/* The header behaves like the homepage's (site.js + layout.css .nav_component): at the top a full-width bar with no
   edge; past 80px of scroll it becomes a white card 16px in from the edges, 77px tall, 12px corners and a soft
   shadow; scrolling down past half a screen slides it away and scrolling up brings it back (about-nav.js). The
   header box keeps its height so the page never jumps, and only the bar itself takes clicks. */
.about-header { position:sticky; top:0; z-index:1000; display:flow-root; height:101px; pointer-events:none; }
.about-header .about-navigation, .about-mega, .about-sheet { pointer-events:auto; }
.about-header .about-navigation { position:relative; box-sizing:border-box; background:transparent; border-radius:0; transition:width .3s ease, margin-top .3s ease, min-height .4s ease, padding .4s ease, border-radius .3s ease, box-shadow .3s ease, background-color .3s ease, transform .3s ease; }
.about-header.is-scrolled .about-navigation { width:calc(100% - 32px); min-height:77px; margin-top:16px; padding-inline:16px; border-radius:12px; background:#fff; box-shadow:0 2px 20px rgba(0,0,0,.1); }
.about-header.is-scrolled.is-open .about-navigation { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.about-header.is-hidden .about-navigation { transform:translateY(-140%); }
.about-navigation { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.about-logo { display:block; flex:none; width:190px; }
.about-logo img { width:100%; height:auto; }
/* The schole.ai menus, the same as the homepage's and the learner page's (about-nav.js): the items centred in the
   bar; hover or click opens a 960px panel joined to the bar's bottom edge (square top, rounded bottom) with two
   columns of links, a footer row and the feature card. Below 992px a menu button opens the grouped sheet. */
.about-navigation nav { display:contents; }
.about-logo { order:0; }
.about-header-cta { order:2; margin-left:auto; }
.about-bar { position:absolute; top:50%; left:50%; display:flex; align-items:center; gap:40px; transform:translate(-50%,-50%); }
/* Same bar geometry as the homepage (measured at 1024-1440px): 32px side gutters, the 61px-tall lockup, a 40px
   Contact Sales in 14px medium, and the items 50px right of centre, where the homepage's cloned layout puts them,
   so nothing shifts when you move between /business and these pages. */
.about-header .about-navigation { width:calc(100% - 64px); max-width:none; }
.about-header .about-logo { width:240px; margin-left:3px; }
.about-header .about-bar { transform:translate(calc(-50% + 50px),-50%); }
.about-page .about-header .about-header-cta, .about-header.about-page .about-header-cta { min-height:40px; padding:10px 24px; font-size:14px; font-weight:500; }
.about-page .about-bar-item { position:relative; padding:8px 0; border:0; background:none; color:#14151c; font:inherit; font-size:14px; line-height:1.3; white-space:nowrap; text-decoration:none; cursor:pointer; }
.about-bar-item::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:currentColor; transform:scaleX(0); transition:transform .25s ease; }
.about-bar-item.is-active::after, .about-bar-item[aria-current]::after, .about-bar-item:focus-visible::after { transform:scaleX(1); }
.about-bar-item:focus-visible { outline:none; }
.about-mega { position:absolute; top:100%; left:0; right:0; z-index:20; }
.about-mega[hidden], .about-sheet[hidden] { display:none; }
.about-mega-panel { display:grid; grid-template-columns:minmax(0,1fr) 300px; width:min(960px, calc(100vw - 48px)); margin:0 auto; overflow:hidden; background:#fff; border:1px solid #e1e8f0; border-top:0; border-radius:0 0 16px 16px; box-shadow:0 24px 60px -20px rgba(15,23,42,.25); }
.about-mega-main { padding:12px; }
.about-mega-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:83px; gap:4px; margin:0; padding:0; list-style:none; }
.about-page .about-mega-link { display:block; height:83px; padding:12px; overflow:hidden; border-radius:12px; text-decoration:none; }
.about-mega-link:hover, .about-mega-link[aria-current] { background:#f6f5fb; }
.about-mega-label { display:block; font-size:14.4px; font-weight:500; line-height:1.5; color:#242631; }
.about-mega-label::after { content:" \2192"; opacity:0; transition:opacity .3s ease; }
.about-mega-link:hover .about-mega-label::after, .about-mega-link:focus-visible .about-mega-label::after { opacity:1; }
.about-mega-desc { display:block; margin-top:2px; font-size:12.8px; line-height:1.375; color:#535560; }
.about-mega-footer { display:flex; align-items:center; gap:24px; min-height:40px; margin:12px -12px -12px; padding:10px 24px; border-top:1px solid #e4e5ea; }
.about-page .about-mega-footer a { font-size:12px; color:#535560; text-decoration:none; }
.about-page .about-mega-footer a:hover { color:#242631; }
.about-page .about-mega-feature { display:flex; flex-direction:column; gap:4px; margin:12px; padding:16px; border-radius:12px; background:#eef0f4; color:#242631; text-decoration:none; }
.about-mega-art { display:flex; align-items:center; justify-content:center; height:90px; margin-bottom:6px; border-radius:10px; background:#fff; }
.about-page .about-mega-art img { width:42%; max-height:78%; object-fit:contain; }
.about-mega-eyebrow { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#615c9c; }
.about-mega-title { font-family:var(--_typography-primitives---family--display-sans); font-size:16.8px; line-height:1.25; }
.about-mega-body { font-size:12.8px; line-height:1.375; color:#535560; }
.about-mega-cta { margin-top:auto; font-size:13.6px; font-weight:500; }
.about-mega-cta::after { content:" \2192"; }
.about-burger { display:none; }
@media (max-width:991px) {
  .about-bar, .about-mega { display:none !important; }
  .about-burger { order:3; display:inline-flex; flex-direction:column; justify-content:center; gap:6px; width:44px; height:44px; padding:0 12px; border:0; border-radius:10px; background:#f4f3f8; cursor:pointer; }
  .about-burger span { display:block; height:2px; border-radius:2px; background:#242631; transition:transform .2s ease; }
  .about-burger[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
  .about-burger[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .about-sheet { position:absolute; top:100%; left:0; right:0; z-index:20; max-height:calc(100dvh - 80px); overflow-y:auto; padding:4px 20px 24px; background:#fff; border-bottom:1px solid #eeedf1; box-shadow:0 24px 60px -20px rgba(15,23,42,.25); }
  .about-sheet-label { margin:18px 0 2px !important; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8b95c4; }
  .about-page .about-sheet-group a { display:flex; align-items:center; min-height:48px; font-size:16px; color:#111326; text-decoration:none; border-bottom:1px solid #eef0f4; }
  .about-sheet-group a[aria-current] { font-weight:600; }
  .about-sheet .about-button { width:100%; margin-top:20px; }
}
.about-page .about-button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:13px 24px; border-radius:10px; background:linear-gradient(270deg,#9075c0 0%,#6e94cf 100%); color:#fff; text-decoration:none; font-size:16px; line-height:1.3; transition:background-color .15s; }
.about-page .about-button:hover { background:linear-gradient(270deg,#7c66a5 0%,#6080b1 100%); }
.about-story { padding-block:96px 76px; }
.about-eyebrow { font-size:17px; line-height:1.5; margin-bottom:24px !important; color:#535560; }
.about-story h1 { font-size:clamp(44px,5.4vw,76px); font-weight:400; line-height:1.06; letter-spacing:-.045em; max-width:18ch; }
.about-lede { font-size:20px; line-height:1.5; color:#535560; margin-top:28px !important; max-width:58ch; }
.about-founders { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-bottom:96px; }
.about-portrait { overflow:hidden; border-radius:18px; background:#efedf6; }
.about-portrait img { width:100%; height:auto; aspect-ratio:1.08; object-fit:cover; object-position:center 43%; }
.about-founder-copy { padding-top:28px; }
.about-role { color:#535560; font-size:15px; line-height:1.5; }
.about-founder h2 { font-size:clamp(26px,2.5vw,34px); font-weight:400; line-height:1.2; letter-spacing:-.025em; margin-top:10px; }
.about-founder-copy > p:last-child { color:#535560; font-size:18px; line-height:1.6; margin-top:20px; max-width:54ch; }
.about-next { background:#efedf6; padding-block:76px; }
.about-next-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,7vw,110px); align-items:center; }
.about-next h2 { font-size:clamp(36px,4.2vw,58px); font-weight:400; line-height:1.1; letter-spacing:-.035em; }
.about-next p { font-size:20px; line-height:1.5; max-width:40ch; margin-bottom:28px; }
.about-footer { padding-block:36px; background:#14151c; color:#fff; }
.about-footer-layout { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.about-footer p { max-width:44ch; font-size:13px; line-height:1.5; color:rgba(255,255,255,.6); }
.about-footer > div > a:last-child { font-size:15px; flex:none; }
@media (max-width:900px) {
  .about-container { width:calc(100% - 40px); }
  .about-story { padding-block:60px; }
  .about-story h1 { font-size:52px; }
  .about-founders { gap:28px; }
}
@media (max-width:650px) {
  .about-navigation { min-height:72px; gap:12px; }
  .about-header { height:72px; }
  .about-header.is-scrolled .about-navigation { width:calc(100% - 16px); min-height:60px; margin-top:6px; padding-inline:12px; }
  .about-logo { width:132px; }
  .about-header-cta { display:none !important; }
  .about-story { padding-block:48px; }
  .about-story h1 { font-size:clamp(42px,10vw,60px); }
  .about-eyebrow { margin-bottom:18px !important; }
  .about-lede { font-size:18px; margin-top:22px !important; }
  .about-founders { grid-template-columns:1fr; gap:48px; padding-bottom:56px; }
  .about-founder-copy { padding-top:20px; }
  .about-founder-copy > p:last-child { font-size:17px; margin-top:16px; }
  .about-next { padding-block:48px; }
  .about-next-layout { grid-template-columns:1fr; gap:28px; }
  .about-next p { font-size:18px; }
  .about-footer-layout { flex-wrap:wrap; gap:24px; }
  .about-footer p { order:3; max-width:none; }
}
@media (prefers-reduced-motion:reduce) { .about-button { transition:none; } }
.about-footer .lp-footer-logo { width:150px; }
/* The Scholé AI logo on every page except the business pages (/business, /about): the size and place it has on the
   learner home (44px tall, about 224px across; its ink starts where the Upskilling lockup's does, x 44 at 32px gutters). */
.about-header .about-logo.is-schole { width:auto; margin-left:12px; }
.about-header .about-logo.is-schole img { width:auto; height:44px; }
@media (max-width:650px) { .about-header .about-logo.is-schole { margin-left:0; } .about-header .about-logo.is-schole img { height:32px; } }

/* Header geometry copied from the business home (/business, measured at 340-1440px) so the logo never moves between
   pages: 101px tall from 768px (logo box 61px at x35); 92px below 768px (logo box 52px), with 32px gutters and then
   16px below 480px; a 40px menu button; Contact Sales only from 992px (the phone sheet has it below). Scrolled card:
   16px in and 77px tall from 768px; 95% wide, 16px down and 84px tall below, logo box 18px in from its edge. The Scholé
   AI logo keeps the home logo's left ink edge (box + 15%) and centre, scaled like the home mark (61 -> 52px). */
.about-header .about-navigation { min-height:101px; }
.about-burger { width:40px; height:40px; padding:0 11px; }
@media (max-width:991px) {
  .about-header-cta { display:none !important; }
  .about-header.is-scrolled .about-navigation { width:95%; min-height:93px; margin-top:16px; padding-inline:16px; }
}
@media (max-width:767px) {
  .about-header { height:92px; }
  .about-header .about-navigation { min-height:92px; gap:12px; padding-top:0; width:calc(100% - 64px); }
  .about-header .about-logo { width:205px; margin-left:2px; }
  .about-header .about-logo.is-schole { width:auto; margin-left:10px; }
  .about-header .about-logo.is-schole img { height:37px; }
  .about-header.is-scrolled .about-navigation { width:95%; min-height:84px; margin-top:16px; padding-inline:16px; }
  .about-sheet { max-height:calc(100dvh - 92px); }
}
@media (max-width:479px) {
  .about-header .about-navigation { width:calc(100% - 32px); }
}
/* The menu button as on the business home: the gradient square with white lines. */
.about-header .about-burger { background:linear-gradient(270deg,#9075c0 0%,#6e94cf 100%); border-radius:8px; }
.about-header .about-burger span { background:#fff; }
/* On screens wider than 1440px the business home keeps its header inside a centred 1440px frame (u-container: 1440px
   with 32px padding), so its logo moves in from the edge; the bar and the scrolled card stay inside the same frame. */
.about-header .about-navigation { max-width:1376px; }
.about-header.is-scrolled .about-navigation { max-width:1440px; }

/* The Scholé AI logo as a lockup in the exact places of The Upskilling Company's: the logo box is the lockup's
   (240x61 from 768px, 205x52 below, same margins), the coloured Scholé stars fill the box the lockup's stars fill, and the
   Scholé AI wordmark spans the width of "The Upskilling Company", centred on the same line (fractions measured from
   lockup.svg; the two Scholé files are schole-logo.svg cropped tight to each part). */
.about-header .about-logo.is-schole { position:relative; width:240px; margin-left:3px; aspect-ratio:300 / 76; }
.about-header .about-logo.is-schole img { position:absolute; height:auto; max-width:none; }
.about-header .about-logo.is-schole .sch-stars { left:3.700%; top:8.947%; width:17.900%; }
.about-header .about-logo.is-schole .sch-word { left:29.333%; top:27.287%; width:68.367%; }
@media (max-width:767px) { .about-header .about-logo.is-schole { width:205px; margin-left:2px; } }
/* On the re-skinned pages the header carries .about-page (for its link styles); it must not paint the page's white over a hero. */
.about-header.about-page { background:transparent; }