/* Audience: art/design faculty and institutional decision makers.
   Direction: from creative intent to teaching practice; existing brand retained. */
:root{--paper:#fff;--ink:#1a1a1a;--muted:#505866;--brand:#002fa7;--workshop:#6d59ab;--gutter:max(32px,calc((100vw - 1280px)/2))}
html{scroll-padding-top:112px}
body{overflow-wrap:break-word}
button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}
button,summary{touch-action:manipulation}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.skip-link{position:fixed;left:24px;top:16px;z-index:100;background:white;color:#002fa7;padding:12px 24px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
header{border:0;box-shadow:0 4px 6px -1px rgba(25,39,64,.04),0 2px 4px -1px rgba(25,39,64,.02)}
.brand>span{border:0;padding-left:0}
.menu{min-height:48px;min-width:48px;align-items:center;justify-content:center;cursor:pointer}
.menu-mark{width:24px;height:16px;position:relative;display:block;background:none;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menu-mark::before,.menu-mark::after{content:'';position:absolute;left:0;width:24px;height:2px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-mark::before{top:5px}.menu-mark::after{display:none}
.menu[aria-expanded=true] .menu-mark{background:none;border:0}.menu[aria-expanded=true] .menu-mark::before{top:7px;transform:rotate(45deg)}.menu[aria-expanded=true] .menu-mark::after{display:block;top:7px;transform:rotate(-45deg)}
main>.section{padding-block:104px}
main>.hero-carousel{min-height:clamp(640px,calc(100svh - 88px),880px);display:flex;align-items:center;padding-block:120px}
.hero-carousel .hero-copy{max-width:720px}
.hero-carousel h1,.hero-carousel h1 em{font-size:clamp(40px,4.5vw,72px);line-height:1.16;letter-spacing:-.02em}
.hero-carousel .intro{margin-top:32px;line-height:1.8;color:#fff;max-width:480px}
.hero-carousel .actions{margin-top:32px}
.hero-carousel .button{min-height:56px}
.hero-slides::after{background:linear-gradient(90deg,rgba(8,14,18,.82),rgba(8,14,18,.58) 38%,rgba(8,14,18,.08) 76%)}
.carousel-controls button{min-width:48px;min-height:48px;background:#10182073}
.carousel-dots button{width:48px;min-width:48px;background:transparent}
.carousel-dots button::before{left:20px}
.platform::before{display:none}
.platform .section-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr);align-items:end;gap:64px;margin-bottom:48px}
.platform .section-top .platform-display{font-size:clamp(36px,4.5vw,64px);line-height:1.16}
.platform .section-top>div:last-child{margin:0;max-width:none}
.platform .section-top p{max-width:28em}
.platform .discipline-tabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;overflow:visible;border:0;padding:0;margin-bottom:24px}
.platform .discipline-tabs button{padding:16px 4px;min-height:56px;border:0;color:#c7d0df;background:#1a2638;white-space:normal;font-size:16px;line-height:24px}
.platform .discipline-tabs button[aria-selected=true]{background:#fff;color:#002fa7}
.platform .discipline-tabs button:hover{background:#2c3e56;color:#fff}
.platform .discipline-tabs button[aria-selected=true]:hover{background:#e5efff;color:#002fa7}
.discipline-showcase [role=tabpanel] img{box-shadow:none}
.discipline-caption{padding-top:24px;min-height:80px}
.discipline-caption p{max-width:54em}
.generation-note{margin:8px 0 40px;color:#adb9cb}
.platform .modules{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;column-gap:40px;row-gap:16px}
.platform .modules article,.platform .modules article:first-child{border:0;padding:24px 0 32px;position:relative}
.platform .modules article::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff30}
.aigc-title-trigger{min-height:40px}
.modules .aigc-module-details summary{min-height:44px;display:inline-flex;align-items:center;font-size:14px}
.aigc-intro-popover{max-width:min(320px,calc(100vw - 64px))}
.zaojing-section .section-top{align-items:baseline}
.zaojing-section .section-top>p{margin:0;max-width:28em}
.zaojing-feature{gap:64px}
.zaojing-copy h3{font-size:clamp(24px,2.7vw,36px);line-height:1.3}
.zaojing-copy>p{max-width:34em}
.zaojing-approach{gap:8px 24px;color:#5d498e}
.zaojing-step-tabs{gap:16px}
.zaojing-step-tabs button{display:grid;align-content:start;justify-items:start;gap:8px;min-height:80px;padding:12px 0 16px;text-align:left;letter-spacing:0;background:transparent;border-bottom:2px solid #dcd5ea}
.zaojing-step-tabs button[aria-selected="true"],.zaojing-step-tabs button[aria-selected="true"]:hover{background:transparent;color:var(--workshop);border-bottom-color:var(--workshop);box-shadow:none}
.zaojing-step-tabs button:hover{background:#eeeaf4;box-shadow:none}
.step-number{font-size:13px;line-height:20px;font-weight:400;font-variant-numeric:tabular-nums}
.zaojing-step-panel{min-height:192px}
.zaojing-visual figcaption{font-size:14px;color:#625b70;line-height:1.6}
.solutions .section-top{margin-bottom:48px}
.solution-tabs{gap:8px;margin-bottom:24px}
.solution-tabs button{justify-content:center;text-align:center;min-height:56px;background:transparent;border-bottom:2px solid #e5e7eb;letter-spacing:0}
.solution-tabs button[aria-selected="true"]{background:#f1f5fc;color:var(--brand);border-bottom-color:var(--brand);box-shadow:none}
.solution-tabs button:hover{background:#f1f5fc;box-shadow:none}
.solution-copy .solution-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;background:var(--brand);color:#fff}
.solution-copy .solution-cta:hover{background:#002781}
.solution-photo{min-height:560px}
.solution-copy{padding:40px}
.solution-copy h3{font-size:clamp(24px,2.2vw,32px);line-height:1.35}
.solution-copy dl{gap:16px}
.solution-cta,.case-consult{min-height:48px}
.solution-photo figcaption{font-size:14px}
.case-category-tabs{gap:8px;border:0;flex-wrap:wrap}
.case-category-tabs button{min-height:48px;padding:12px 16px;font-size:16px}
.case-photo-thumb{min-height:48px}
.real-case-copy p{max-width:36em;line-height:1.8}
.about-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px}
.about-grid>div>p{max-width:40em;line-height:1.8}
.about-grid .about-lead{font-size:clamp(20px,1.8vw,24px);line-height:1.5}
.contact-copy{max-width:860px}
.contact h2{font-size:clamp(28px,3vw,40px);line-height:1.3}
.contact .appointment-button{min-height:56px;border-width:2px;display:inline-flex;align-items:center;justify-content:center}
footer.site-footer .footer-main{gap:48px;padding-bottom:48px}
footer.site-footer .footer-navigation{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
footer.site-footer .footer-column h3{font-size:18px;font-weight:700;margin-bottom:16px}
footer.site-footer .footer-column a{font-size:16px;min-height:44px}
footer.site-footer .footer-visible{min-height:44px}
.footer-more,.footer-more-spacer{margin-top:8px;min-height:44px}
footer.site-footer .footer-more summary{font-size:14px;min-height:44px}
footer.site-footer>.footer-bottom{border:0;padding-top:24px}
.registration-section{gap:64px}
@media(max-width:1100px){
 .platform .section-top{gap:32px;grid-template-columns:1.4fr 1fr}
 .platform .discipline-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
 .platform .modules{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
 .zaojing-feature{gap:32px}.about-grid{gap:40px}
}
@media(max-width:700px){
 :root{--gutter:24px}html{scroll-padding-top:104px}
 .brand img{width:80px}.brand{gap:16px}.brand>span{font-size:16px}.brand small{display:none}
 .menu{display:flex;padding:8px}
 header nav{border:0;padding:24px;background:#fff;box-shadow:0 8px 16px -8px #19274014,0 4px 8px -4px #1927400d;gap:8px}
 header nav a{padding:8px 0;min-height:44px}
 header nav .nav-cta{padding:16px 24px;text-align:center}
 main>.section{padding-block:80px}
 main>.hero-carousel{min-height:calc(100svh - 80px);padding:80px 24px 144px;align-items:flex-start}
 .hero-carousel h1,.hero-carousel h1 em{font-size:clamp(28px,8.5vw,40px);line-height:1.25;white-space:nowrap}
 .hero-carousel .intro{margin-top:24px;font-size:16px;max-width:24em}
 .hero-carousel .actions{margin-top:24px}
 .hero-slides::after{background:linear-gradient(180deg,rgba(8,14,18,.80),rgba(8,14,18,.55) 44%,rgba(8,14,18,.15) 72%,rgba(8,14,18,.65))}
 .carousel-bar{bottom:24px}.carousel-caption{font-size:14px}
 .carousel-controls{gap:4px;margin-top:8px;justify-content:space-between}
 .carousel-controls button{min-width:36px;width:36px;height:48px}
 .carousel-controls .carousel-dots button{min-width:36px;width:36px}
 .carousel-dots button::before{left:14px}
 .carousel-controls .carousel-pause{min-width:40px;padding:4px;font-size:14px;white-space:nowrap}
 .platform .section-top{display:block;margin-bottom:32px}
 .platform .section-top .platform-display{font-size:clamp(26px,7.3vw,40px);line-height:1.2}
 .platform .section-top>div:last-child{margin-top:24px}
 .platform .discipline-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:24px}
 .platform .discipline-tabs button{font-size:14px;min-height:48px;padding:12px 0}
 .discipline-showcase [role=tabpanel] img{aspect-ratio:16/9;object-fit:contain;object-position:center}
 .discipline-caption{min-height:0;padding-top:24px}
 .generation-note{font-size:14px;margin:16px 0 24px}
 .platform .modules{grid-template-columns:1fr;gap:8px}
 .aigc-intro-popover{width:100%;min-width:min(304px,calc(100vw - 48px));max-width:calc(100vw - 48px)}
 .modules article:nth-child(n) .aigc-intro-popover{left:0;right:auto}
 .zaojing-feature{gap:32px}.zaojing-copy h3{font-size:28px}
 .zaojing-step-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;padding:0}
 .zaojing-step-tabs button{min-height:56px;font-size:14px;padding:12px 8px;white-space:normal}
 .zaojing-step-panel{min-height:224px;padding:24px;margin-top:16px}
 .zaojing-step-copy h3{font-size:22px;line-height:1.4}
 .solution-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;padding:0;margin-bottom:24px}
 .solution-tabs button{display:block;font-size:14px;line-height:1.5;min-height:72px;padding:12px 8px;white-space:normal;text-align:center}
  .solution-photo{min-height:0;aspect-ratio:4/3}
 .solution-copy{padding:24px}.solution-copy h3{font-size:24px}
 .solution-copy dl>div{grid-template-columns:1fr;gap:4px}
 .case-category-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible;padding:0}
 .case-category-tabs button{font-size:14px;min-height:48px;padding:12px 0;white-space:normal}
 .about-grid{grid-template-columns:1fr;gap:32px}
 .about-grid .about-lead{font-size:20px}
 .contact{display:block}.contact h2{font-size:clamp(28px,7.3vw,36px)}
 .contact .appointment-button{margin-top:32px}
 footer.site-footer .footer-navigation{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
 footer.site-footer .footer-column h3{font-size:16px}
 footer.site-footer .footer-column a{font-size:14px}
 .footer-identity{flex-wrap:wrap}.footer-identity small{font-size:14px}
 .registration-section{gap:32px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 a:hover,button:hover,a:active,button:active,a:focus-visible,button:focus-visible{transform:none}
}

.discipline-showcase [role=tabpanel]{position:relative}
.preview-expand{position:absolute;right:16px;top:16px;min-height:44px;border:0;padding:8px 16px;background:#fff;color:#002fa7;font:600 14px/24px var(--font-ui);cursor:pointer}
.preview-dialog{border:0;padding:0;width:min(1400px,calc(100vw - 48px));max-width:none;max-height:calc(100svh - 48px);background:#101929;color:#fff;box-shadow:0 24px 64px -24px #0005,0 8px 24px -8px #0003}
.preview-dialog::backdrop{background:#08101be6}
.preview-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px}
.preview-dialog-bar p{color:#fff;font-size:16px}
.preview-dialog-close{appearance:none;border:0;background:#26364e;color:#fff;padding:8px 16px;min-height:44px;font:inherit;cursor:pointer}
.preview-dialog img{display:block;width:100%;height:auto;max-height:calc(100svh - 148px);object-fit:contain}
@media(max-width:700px){.preview-expand{right:8px;top:8px;font-size:12px;padding:4px 12px}.preview-dialog{width:calc(100vw - 24px)}.preview-dialog-bar{padding:12px;gap:16px}}
/* Visual review round two: anchor offsets, tablet proportions, stable copy. */
main>.section{scroll-margin-top:0}
.modules article[id],#agent-preparation,#agent-feedback,#agent-work-skills{scroll-margin-top:24px}
.hero-carousel .intro br{display:block}
.preview-dialog[open]{overscroll-behavior:contain}
body:has(.preview-dialog[open]){overflow:hidden}
.skip-link:not(:focus){transform:translateY(-200%)!important}
@media(min-width:701px) and (max-width:1000px){
 .solution-panel{grid-template-columns:1fr}
 .solution-photo{height:auto;aspect-ratio:16/9;min-height:0}
 .solution-copy{padding:32px}
 .solution-copy h3{max-width:none}
 .solution-copy dl{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
 .solution-copy dl>div{grid-template-columns:1fr;gap:8px}
}
@media(max-width:380px){.solution-tabs button{font-size:13px}}

.mobile-tab-break{display:none}
@media(max-width:700px){.mobile-tab-break{display:block}.solution-tabs button{font-size:14px;line-height:1.5}}

/* Compact header wordmark and descriptor. */
header .brand>span{line-height:1.25}
header .brand small{margin-top:4px;line-height:1.4}

/* Direct business contact, using the supplied original QR image. */
main>.contact{background:var(--workshop);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;row-gap:32px;align-items:center}
.contact-copy{grid-column:1;grid-row:1}.contact .appointment-button{grid-column:1;grid-row:2;justify-self:start;margin:0}
.contact-direct{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:32px;align-items:center}
.contact-channels{display:grid;gap:24px;min-width:0}.contact-channels p{font-size:14px;line-height:1.5;color:#f0ecff;margin:0 0 8px}
.contact-channels a{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(20px,2vw,28px);line-height:1.4;font-weight:600;color:#fff;white-space:nowrap}
.contact-channels .contact-email{font-size:clamp(16px,1.5vw,20px);white-space:normal;overflow-wrap:anywhere}
.contact-qr{appearance:none;border:0;padding:8px;background:#fff;color:#252038;cursor:pointer;width:160px}
.contact-qr img{width:144px;height:auto;display:block}.contact-qr span{display:block;padding:8px 0 4px;font:400 12px/1.5 var(--font-ui)}
.wechat-dialog{border:0;padding:16px;background:#fff;color:#1a1a1a;width:min(440px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto;box-shadow:0 16px 48px -16px #0004,0 8px 16px -8px #0002}
.wechat-dialog::backdrop{background:#08101be6}.wechat-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.wechat-dialog-bar h2{font-size:20px;line-height:1.4}.wechat-close{border:0;background:#f0edf7;color:#403750;padding:8px 16px;min-height:44px;font:inherit;cursor:pointer}
.wechat-dialog>img{display:block;width:100%;height:auto;max-height:calc(100svh - 124px);object-fit:contain}
body:has(.wechat-dialog[open]){overflow:hidden}
@media(max-width:1100px){main>.contact{grid-template-columns:1fr;gap:32px}.contact-direct{grid-column:1;grid-row:3;max-width:600px;width:100%}.contact .appointment-button{grid-row:2}.contact-channels a{font-size:24px}.contact-channels .contact-email{font-size:20px}}
@media(max-width:480px){.contact-direct{grid-template-columns:minmax(0,1fr) 120px;gap:16px}.contact-qr{width:120px}.contact-qr img{width:104px}.contact-qr span{font-size:11px}.contact-channels a{font-size:20px}.contact-channels .contact-email{font-size:15px}.contact-channels{gap:16px}}

/* The added AI-creation destination keeps tablet navigation comfortable. */
@media(min-width:701px) and (max-width:1100px){
 header .menu{display:flex}
 header nav#main-navigation{display:none;position:absolute;top:88px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;padding:24px 32px;gap:8px;box-shadow:0 8px 16px -8px #19274014,0 4px 8px -4px #1927400d}
 header nav#main-navigation.open{display:flex}
 header nav#main-navigation a{min-height:44px;padding:8px 0;font-size:16px}
 header nav#main-navigation .nav-cta{padding:16px 24px;text-align:center}
 header .brand>span{display:block}
}

/* Card light follows the pointer; transform values are integrated by a damped spring. */
.depth-card{position:relative;isolation:isolate;transform:perspective(1100px) translateY(var(--card-lift,0px)) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transform-origin:center;transition-property:color,background-color,border-color,box-shadow!important}
.depth-card.depth-moving{will-change:transform;z-index:2}
.card-reflection{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:calc(var(--card-light,0)*.52);background:radial-gradient(ellipse at var(--card-x,50%) var(--card-y,50%),rgba(225,238,255,.26) 0%,rgba(184,201,255,.07) 25%,transparent 62%);box-shadow:inset 0 0 0 1px rgba(227,237,255,.08)}
@media(prefers-reduced-motion:reduce){.depth-card{transform:none!important}.card-reflection{display:none}}

/* One focal transition per action: source image expands into its native modal. */
.preview-dialog{transform-origin:0 0}
.preview-dialog[open]::backdrop{animation:preview-backdrop-in .48s ease both}
.preview-dialog.preview-closing::backdrop{animation:preview-backdrop-out .34s ease both}
@keyframes preview-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes preview-backdrop-out{from{opacity:1}to{opacity:0}}
.press-control.press-engaged{box-shadow:inset 0 2px 4px rgba(14,22,42,.09),inset 0 1px 2px rgba(14,22,42,.05)}
@media(prefers-reduced-motion:reduce){.press-control{scale:1!important}.preview-dialog{transform:none!important}}

/* The booking link comes first in reading and keyboard order. */
.booking-online{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.registration-heading>.booking-open{display:inline-flex;align-items:center;justify-content:center;min-height:56px;margin-top:24px;padding:12px 24px;background:var(--workshop);color:#fff;font-size:16px;font-weight:600}
.registration-heading>.booking-open:hover{background:#594794}
.registration-heading .booking-entry-note{font-size:14px;color:#62616c;margin-top:8px}
.booking-panel{min-width:0;background:#fff;padding:32px;box-shadow:0 4px 6px -1px rgba(36,28,60,.05),0 2px 4px -1px rgba(36,28,60,.03)}
.booking-panel h2{font-size:24px;font-weight:750;line-height:1.4;letter-spacing:-.02em}
.booking-steps{list-style:none;display:grid;gap:24px;padding:0;margin:24px 0}
.booking-steps li{display:flex;align-items:flex-start;gap:16px}
.booking-steps li>span{color:var(--workshop);font-size:14px;line-height:1.8;font-variant-numeric:tabular-nums}
.booking-steps strong{font-size:16px;font-weight:650;line-height:1.6}
.booking-steps p,.booking-purpose{font-size:14px;color:#62616c;line-height:1.8;margin-top:8px}
.booking-purpose{padding-top:24px;border-top:1px solid #e7e3ef}
.booking-contact{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:24px}
.booking-contact span{width:100%;font-size:14px;color:#62616c}
.booking-contact a{font-size:16px;color:#594794;min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
.booking-noscript{padding:16px;background:#f2eff8;color:#443567;font-size:14px;line-height:1.8;margin-top:16px}
@media(max-width:1000px){.booking-online{grid-template-columns:1fr;gap:32px}.booking-panel{padding:24px}}
@media(max-width:600px){.booking-panel{padding:16px}.booking-online{padding:48px 24px 80px}.registration-heading>.booking-open{width:100%}}

.hero-slide>picture{display:block;width:100%;height:100%}
@media(max-width:700px){
 .hero-slide-process{background:#002fa7}
 .hero-carousel .hero-slide-process img{object-fit:contain;object-position:center 78%}
}
@media(max-width:360px){
 .carousel-controls .carousel-dots button{min-width:32px;width:32px}
 .carousel-dots button::before{left:12px}
}
.discipline-showcase [role="tabpanel"]>picture{display:block}

.footer-bottom-links{flex-wrap:wrap;row-gap:8px}