/* Media-led presentation for the five primary pages. */
.visual-page { --visual-paper:#fff; --visual-soft:#f5f5f7; --visual-ink:#15252e; --visual-muted:#637079; --visual-accent:#147d91; color:var(--visual-ink); background:var(--visual-paper); }
.visual-page .visual-width { width:min(1280px,calc(100% - 112px)); margin-inline:auto; }
.visual-page .visual-hero { background:#fff; }
.visual-page .visual-hero-copy { text-align:center; max-width:980px; margin:auto; padding:76px 24px 44px; }
.visual-page .visual-hero h1 { font-size:clamp(52px,5.4vw,80px); font-weight:650; line-height:1.1; letter-spacing:-.045em; margin:0; text-wrap:balance; }
.visual-page .visual-hero-copy>p { font-size:21px; line-height:1.5; color:var(--visual-muted); margin:24px 0 0; text-wrap:balance; }
.visual-page .visual-hero-copy>.visual-link { margin-top:22px; }
.visual-page .visual-hero-art { width:100%; max-width:1680px; height:clamp(340px,35vw,540px); margin:auto; overflow:hidden; }
.visual-page .visual-hero-art>img { width:100%; height:100%; object-fit:cover; object-position:70% 0%; }
.visual-page .visual-hero-art--motion { width:min(1440px,calc(100% - 112px)); height:auto; padding-bottom:56px; overflow:visible; }
.visual-page .visual-link { display:inline-flex; align-items:center; justify-content:center; gap:14px; border:0; border-bottom:1px solid transparent; padding:6px 0; color:var(--visual-accent); font:inherit; font-size:17px; line-height:1.5; background:none; cursor:pointer; text-decoration:none; }
.visual-page .visual-link:hover { border-bottom-color:currentColor; }
.visual-page .visual-link span { font-size:18px; }
.visual-page .page-index { background:#ffffffed; }
.visual-page .page-index>.page-width { width:min(1280px,calc(100% - 112px)); padding:0; margin:auto; gap:36px; }
.visual-page .page-index a { font-size:13px; padding-block:16px; }
.visual-page .visual-section { padding-block:104px; }
.visual-page .visual-heading { margin-bottom:44px; max-width:1020px; }
.visual-page .visual-heading h2 { font-size:clamp(36px,3.65vw,54px); font-weight:600; line-height:1.2; letter-spacing:-.04em; margin:0; text-wrap:balance; }
.visual-page .visual-heading p { font-size:20px; line-height:1.6; color:var(--visual-muted); margin-top:22px; max-width:750px; }
.visual-page .visual-heading.is-centered { text-align:center; margin-inline:auto; }
.visual-page .visual-heading.is-centered p { margin-inline:auto; }
.visual-page .visual-soft { background:var(--visual-soft); }
.visual-page .visual-dark { background:#101a20; color:#fff; }
.visual-page .visual-dark .visual-heading p { color:#c0cbd0; }
.visual-page .motion-stage { position:relative; isolation:isolate; overflow:hidden; border-radius:20px; background:#dfe3e4; aspect-ratio:16/9; }
.visual-page .motion-stage video { width:100%; height:100%; object-fit:cover; display:block; }
.visual-page .motion-stage.motion-panorama { aspect-ratio:16/3; }
.visual-page .motion-stage.motion-square { aspect-ratio:1; }
.visual-page .motion-stage.motion-native video { object-fit:contain; }
.visual-page .motion-controls { position:absolute; z-index:2; right:12px; bottom:12px; display:flex; gap:8px; }
.visual-page .motion-controls button { width:44px; height:44px; display:grid; place-items:center; color:#fff; border:1px solid #ffffff52; border-radius:50%; background:#15252ebd; cursor:pointer; }
.visual-page .motion-controls button:hover { background:#15252e; }
.visual-page .motion-controls svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.visual-page .motion-controls .play-symbol { fill:currentColor; stroke:none; }
.visual-page .motion-controls .pause-symbol { display:none; stroke-width:2.4; }
.visual-page .motion-stage.is-playing .play-symbol { display:none; }
.visual-page .motion-stage.is-playing .pause-symbol { display:block; }
.visual-page .motion-note { display:flex; justify-content:center; gap:64px; margin-top:26px; color:var(--visual-muted); font-size:16px; }
.visual-page .visual-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.visual-page .visual-feature-grid img { width:100%; aspect-ratio:1.12; object-fit:cover; border-radius:18px; }
.visual-page .visual-feature-grid h3 { font-size:25px; font-weight:600; margin:28px 0 9px; letter-spacing:-.025em; }
.visual-page .visual-feature-grid p { color:var(--visual-muted); font-size:17px; line-height:1.6; margin:0; }
.visual-page .visual-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; margin-top:24px; }
.visual-page .visual-pair>div { min-width:0; }
.visual-page .visual-pair>div>img { width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; border-radius:20px; }
.visual-page .visual-pair .motion-stage { height:100%; }
.visual-page .visual-pair--compact { grid-template-columns:1.55fr 1fr; align-items:stretch; }
.visual-page .visual-pair--compact .motion-stage { aspect-ratio:auto; min-height:300px; }
.visual-page .visual-pair--compact video { position:absolute; inset:0; }
.visual-page .visual-brief { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8%; }
.visual-page .visual-brief .visual-heading { margin-bottom:22px; }
.visual-page .visual-brief>img { width:100%; border-radius:20px; }
.visual-page .visual-evaluation { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:start; }
.visual-page .visual-disclosures details { border-bottom:1px solid #d8dddf; padding:23px 0; }
.visual-page .visual-disclosures details:first-child { padding-top:0; }
.visual-page summary { cursor:pointer; }
.visual-page .visual-disclosures summary,.visual-page .visual-learning-path>summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:21px; line-height:1.5; }
.visual-page summary::-webkit-details-marker { display:none; }
.visual-page details[open]>summary>span { transform:rotate(45deg); }
.visual-page .visual-disclosures p { color:var(--visual-muted); font-size:17px; line-height:1.7; margin-top:18px; }
.visual-page .visual-cta { text-align:center; padding:100px 24px 116px; }
.visual-page .visual-cta h2 { font-size:clamp(30px,3.25vw,48px); line-height:1.3; font-weight:600; letter-spacing:-.035em; margin:0 0 24px; text-wrap:balance; }
.visual-page .visual-cta .visual-link { font-size:19px; }
.visual-page .article-grid { gap:28px; }
.visual-page .knowledge-card { border:0; background:transparent; box-shadow:none; }
.visual-page .knowledge-card>img { aspect-ratio:1.4; border-radius:18px; }
.visual-page .knowledge-card>div { padding:23px 0 14px; }
.visual-page .knowledge-card h3 { font-weight:600; font-size:24px; line-height:1.45; }
.visual-page #articles>.visual-link { margin-top:24px; }
.visual-page .visual-learning-path { margin-top:54px; padding-block:25px; border-top:1px solid #d8dddf; border-bottom:1px solid #d8dddf; }
.visual-page .visual-learning-path>summary { font-size:18px; }
.visual-page .visual-learning-path .learning-path { margin-bottom:0; border:0; padding:30px 0 0; }
.visual-page .catalogue-controls { margin-bottom:36px; gap:24px; }
.visual-page .filter-buttons { gap:4px; }
.visual-page .filter-buttons button,.visual-page .motion-filters button { padding:10px 16px; border:0; border-radius:22px; color:#56636b; background:transparent; font-size:14px; line-height:1.5; cursor:pointer; }
.visual-page .filter-buttons button[aria-pressed=true],.visual-page .motion-filters button[aria-pressed=true] { background:var(--visual-ink); color:#fff; }
.visual-page .course-search { border:1px solid #c7cfd3; border-radius:24px; background:#fff; }
.visual-page .course-search input { padding-block:12px; background:transparent; }
.visual-page .course-catalogue { gap:54px 28px; }
.visual-page .learning-card { background:transparent; border:0; box-shadow:none; }
.visual-page .learning-card>img { border-radius:18px; aspect-ratio:1.4; }
.visual-page .learning-card>div { padding:24px 0 0; }
.visual-page .learning-card .course-category { color:var(--visual-muted); font-size:12px; }
.visual-page .learning-card h3 { font-size:23px; font-weight:600; line-height:1.45; margin-top:9px; }
.visual-page .learning-card .card-link { color:var(--visual-accent); margin-top:18px; }
.visual-page .visual-spotlight { text-align:center; }
.visual-page .visual-spotlight .visual-heading { margin-inline:auto; }
.visual-page .visual-spotlight .visual-heading p { margin-inline:auto; }
.visual-page .visual-spotlight .motion-stage { width:min(920px,100%); margin:auto; }
.visual-page .visual-spotlight>.visual-link { margin-top:28px; }
.visual-page .discussion-grid { gap:26px; }
.visual-page .discussion-grid>a { border:0; background:transparent; }
.visual-page .discussion-grid img { border-radius:18px; aspect-ratio:1.5; }
.visual-page .discussion-grid>a>div { padding:22px 0 0; }
.visual-page .discussion-grid h3 { font-size:21px; line-height:1.5; font-weight:600; }
.visual-page .discussion-grid .card-link { color:var(--visual-accent); font-size:14px; }
.visual-page .community-grid { gap:30px; }
.visual-page .community-grid>a { border:0; border-radius:0; padding:22px 0; background:transparent; border-top:1px solid #ccd4d8; }
.visual-page .community-grid h3 { font-weight:600; font-size:24px; }
.visual-page .community-grid a>span { margin-top:16px; color:var(--visual-accent); }
.visual-page .channel-links { margin-top:28px; }
.visual-page .motion-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
.visual-page .motion-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:42px 24px; }
.visual-page .motion-tile { min-width:0; }
.visual-page .motion-tile[hidden] { display:none; }
.visual-page .motion-tile h3 { font-size:22px; font-weight:600; margin:20px 0 0; line-height:1.4; }
.visual-page .motion-tile .motion-controls { right:9px; bottom:9px; gap:6px; }
.visual-page .motion-tile .motion-stage { aspect-ratio:16/10; }
.visual-page .motion-all { margin-top:34px; }
.visual-page .visual-reels { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.visual-page .visual-reels button { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px; background:var(--visual-soft); border:0; border-radius:18px; color:var(--visual-ink); font:inherit; font-size:21px; cursor:pointer; }
.visual-page .visual-reels button:hover { background:#e9ecee; }
.visual-page .founder-profile { padding:0; margin:0 0 72px; border:0; background:none; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:56px; }
.visual-page .founder-card { display:block; width:100%; min-width:0; padding:0; border:1px solid #dbe3e8; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 14px 40px #15252e0b; cursor:pointer; }
.visual-page .founder-card img { display:block; width:100%; height:auto; }
.visual-page .founder-profile h3 { font-size:32px; line-height:1.3; font-weight:600; margin-bottom:12px; }
.visual-page .founder-profile p { margin:0 0 16px; color:var(--visual-muted); font-size:17px; }
.visual-page .visual-team-label { font-size:19px; margin:0 0 30px; font-weight:500; color:var(--visual-muted); }
.visual-page .people-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; }
.visual-page .person-row { display:block; border:0; padding:0; }
.visual-page .person-photo { width:100%; height:300px; border-radius:18px; background:#f0f2f3; }
.visual-page .person-photo img { width:100%; height:100%; object-fit:cover; }
.visual-page .person-info { padding-top:24px; min-width:0; }
.visual-page .person-info h3 { font-size:25px; font-weight:600; }
.visual-page .person-info .person-role { font-size:15px; margin-top:9px; line-height:1.6; }
.visual-page .person-bio { margin-top:22px; }
.visual-page .person-bio summary { font-size:15px; }
.visual-page .person-bio p { font-size:15px; overflow-wrap:anywhere; }
@media(min-width:1600px){.visual-page .visual-hero-copy{padding-top:90px}.visual-page .visual-section{padding-block:128px}}
@media(max-width:1100px){
 .visual-page .visual-width,.visual-page .visual-hero-art--motion,.visual-page .page-index>.page-width{width:calc(100% - 64px)}
 .visual-page .motion-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .visual-page .catalogue-controls{align-items:stretch;flex-direction:column}
 .visual-page .course-search{max-width:420px}
 .visual-page .people-list{gap:24px}.visual-page .person-photo{height:240px}
}
@media(max-width:767px){
 .visual-page .visual-width,.visual-page .visual-hero-art--motion,.visual-page .page-index>.page-width{width:calc(100% - 40px)}
 .visual-page .visual-hero-copy{padding:48px 20px 34px}
 .visual-page .visual-hero h1{font-size:clamp(40px,11.8vw,52px);line-height:1.13;letter-spacing:-.045em}
 .visual-page .visual-hero-copy>p{font-size:17px;margin-top:20px;line-height:1.6}
 .visual-page .visual-hero-copy>.visual-link{margin-top:16px}
 .visual-page .visual-hero-art{height:320px}
 .visual-page .visual-hero-art>img{object-position:73% center}
 .visual-page .visual-hero-art--motion{height:auto;padding-bottom:28px}
 .visual-page .page-index>.page-width{gap:28px}
 .visual-page .page-index a{font-size:12px;padding-block:15px}
 .visual-page .visual-section{padding-block:64px}
 .visual-page .visual-heading{margin-bottom:32px}
 .visual-page .visual-heading h2{font-size:34px;line-height:1.25;letter-spacing:-.035em}
 .visual-page .visual-heading p{font-size:17px;margin-top:17px}
 .visual-page .motion-stage{border-radius:16px}
 .visual-page .motion-stage.motion-panorama{aspect-ratio:4/3}
 .visual-page .motion-note{gap:24px;font-size:13px;margin-top:20px;flex-wrap:wrap}
 .visual-page .visual-feature-grid,.visual-page .visual-pair,.visual-page .visual-brief,.visual-page .visual-evaluation{grid-template-columns:1fr;gap:36px}
 .visual-page .visual-feature-grid{gap:44px}
 .visual-page .visual-feature-grid img{aspect-ratio:1.6}
 .visual-page .visual-feature-grid h3{font-size:23px;margin-top:22px}
 .visual-page .visual-feature-grid p{font-size:16px}
 .visual-page .visual-pair{gap:20px}
 .visual-page .visual-pair--compact{grid-template-columns:1.35fr 1fr;gap:12px}
 .visual-page .visual-pair--compact .motion-stage{min-height:190px}
 .visual-page .visual-pair--compact .motion-controls{flex-direction:column;gap:5px;right:7px;bottom:7px}
 .visual-page .visual-disclosures summary{font-size:20px}
 .visual-page .visual-cta{padding:68px 20px 78px}
 .visual-page .visual-cta h2{font-size:31px}
 .visual-page .visual-link{font-size:16px}
 .visual-page .article-grid,.visual-page .course-catalogue{gap:40px}
 .visual-page .knowledge-card>img,.visual-page .learning-card>img{aspect-ratio:1.65}
 .visual-page .knowledge-card h3,.visual-page .learning-card h3{font-size:23px}
 .visual-page .learning-card>div{padding-top:20px}
 .visual-page .filter-buttons button,.visual-page .motion-filters button{padding:9px 13px;font-size:13px}
 .visual-page .filter-buttons{flex-wrap:wrap;gap:5px}
 .visual-page .visual-learning-path>summary{font-size:16px}
 .visual-page .visual-learning-path .learning-path{padding-top:28px}
 .visual-page .discussion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}
 .visual-page .discussion-grid img{aspect-ratio:1.2;border-radius:13px}
 .visual-page .discussion-grid h3{font-size:17px}
 .visual-page .discussion-grid>a>div{padding-top:15px}
 .visual-page .discussion-grid .card-link{font-size:12px}
 .visual-page .community-grid{gap:10px}
 .visual-page .community-grid>a{padding-block:22px}
 .visual-page .motion-gallery{grid-template-columns:1fr;gap:34px}
 .visual-page .motion-tile h3{font-size:21px;margin-top:16px}
 .visual-page .visual-reels{grid-template-columns:1fr;gap:16px}
 .visual-page .visual-reels button{padding:24px;font-size:18px}
 .visual-page .founder-profile{grid-template-columns:1fr;gap:24px;margin-bottom:56px}
 .visual-page .founder-profile h3{font-size:29px}
 .visual-page .founder-profile p{font-size:15px}
 .visual-page .people-list{grid-template-columns:1fr;gap:42px}
 .visual-page .person-photo{height:340px}
 .visual-page .person-info{padding-top:21px}
}
@media(prefers-reduced-motion:reduce){.visual-page *{scroll-behavior:auto!important}}

/* About: keep the headline and the working robot in one scene. */
.visual-page .about-hero { position:relative; isolation:isolate; min-height:560px; height:clamp(560px,calc(100svh - 132px),760px); background:#f5f5f7; }
.visual-page .about-hero .visual-hero-art { position:absolute; inset:0; z-index:-2; max-width:none; height:100%; }
.visual-page .about-hero .visual-hero-art>img { object-position:70% center; }
.visual-page .about-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#fff 0%,#fffffff5 24%,#ffffffd9 34%,#ffffff70 46%,#ffffff00 60%); }
.visual-page .about-hero .visual-hero-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; text-align:left; width:min(1440px,100%); height:100%; max-width:none; padding:40px var(--gutter); margin:auto; }
.visual-page .about-hero h1 { font-size:clamp(48px,4.6vw,72px); font-weight:600; line-height:1.16; letter-spacing:-.04em; }
.visual-page .about-hero .visual-hero-copy>p { font-size:20px; margin-top:24px; color:#4c5960; }
.visual-page .about-hero .visual-hero-copy>.visual-link { margin-top:18px; }
@media(max-width:767px) {
 .visual-page .about-hero { height:auto; min-height:0; background:#fff; }
 .visual-page .about-hero::before { display:none; }
 .visual-page .about-hero .visual-hero-copy { height:auto; align-items:center; text-align:center; padding:36px 20px 22px; }
 .visual-page .about-hero h1 { font-size:42px; line-height:1.16; }
 .visual-page .about-hero .visual-hero-copy>p { font-size:17px; margin-top:16px; }
 .visual-page .about-hero .visual-hero-copy>.visual-link { margin-top:10px; }
 .visual-page .about-hero .visual-hero-art { position:relative; z-index:0; height:clamp(320px,90vw,420px); }
 .visual-page .about-hero .visual-hero-art>img { object-position:75% center; }
}

/* Size the engineering image within its own column and preserve the full frame. */
.visual-page .about-hero .visual-hero-art{inset:116px 0 0 auto;width:66%;height:auto;background:transparent}
.visual-page .about-hero .visual-hero-art>img{object-fit:contain;object-position:right center}
@media(max-width:767px){
 .visual-page .about-hero .visual-hero-art{inset:auto;width:100%;height:auto;aspect-ratio:1672/941;margin-top:40px}
 .visual-page .about-hero .visual-hero-art>img{object-position:center}
}

/* Keep the complete real-hardware recording visible at a comfortable viewing width. */
.visual-page .motion-stage.about-practice-video { width:min(1040px,100%); margin-inline:auto; aspect-ratio:16/9; }
