/* K22: motion and composition layer */
.hero{isolation:isolate;overflow:hidden;--pointer-x:50%;--pointer-y:50%;--shift-x:0px;--shift-y:0px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(105,146,207,.13),transparent 34%)}
.hero-stage{position:relative;display:flex;align-items:center;min-height:0;overflow:visible}
.hero-title{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:none;margin:0;font-size:clamp(130px,20vw,300px);font-weight:500;line-height:.78;letter-spacing:-.055em;transform:translate(var(--shift-x),var(--shift-y));transition:transform .35s ease-out}
.hero-word{position:relative;display:block;width:max-content;max-width:100%;white-space:nowrap;animation:hero-enter 1.1s cubic-bezier(.19,1,.22,1) both}
.hero-word:first-child{padding-bottom:.08em}
.hero-word-second{align-self:flex-end;display:flex;gap:.04em;align-items:baseline;padding-right:3vw;animation-delay:.16s}
.hero-twenty{background:linear-gradient(100deg,var(--blue) 5%,#184889 36%,#8fb3e9 49%,var(--blue) 64%,var(--blue) 95%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:logo-glint 7s ease-in-out infinite}
.hero-word:first-child::after{content:attr(data-text);position:absolute;left:.055em;top:.05em;z-index:-1;color:transparent;-webkit-text-stroke:1px rgba(28,69,135,.26);pointer-events:none}
@keyframes hero-enter{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(.28em)}to{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0)}}
@keyframes logo-glint{0%,25%{background-position:100% 0}65%,100%{background-position:0 0}}
.hero-orbit{position:absolute;z-index:1;width:min(41vw,570px);aspect-ratio:1;right:12%;top:6%;transform:translate(var(--shift-x),var(--shift-y));transition:transform .5s ease-out;pointer-events:none}
.orbit-ring{position:absolute;inset:9%;border:1px solid rgba(28,69,135,.42);border-radius:50%;transform-style:preserve-3d}
.orbit-ring-one{animation:orbit-one 13s linear infinite}
.orbit-ring-two{animation:orbit-two 17s linear infinite}
.orbit-ring-three{inset:25%;border-style:dashed;opacity:.55;animation:spin 28s linear infinite}
.orbit-core{position:absolute;inset:43%;border-radius:50%;background:var(--lime);box-shadow:0 0 35px rgba(217,255,104,.55);animation:core-pulse 3.3s ease-in-out infinite}
.orbit-satellite{position:absolute;width:15px;height:15px;left:13%;top:24%;border-radius:50%;background:var(--ink);box-shadow:0 0 0 8px rgba(28,69,135,.07);animation:satellite-path 9s ease-in-out infinite}
@keyframes orbit-one{to{transform:rotate(360deg) rotateX(65deg)}}
@keyframes orbit-two{to{transform:rotate(-360deg) rotateY(64deg)}}
@keyframes core-pulse{50%{transform:scale(1.6);opacity:.5}}
@keyframes satellite-path{50%{left:80%;top:70%}}
.hero-sweep{position:absolute;z-index:3;left:-35%;right:auto;top:50%;width:25%;height:1px;background:linear-gradient(90deg,transparent,rgba(28,69,135,.75),transparent);box-shadow:0 0 18px rgba(28,69,135,.35);transform:rotate(-11deg);animation:hero-sweep 7s ease-in-out infinite;pointer-events:none}
@keyframes hero-sweep{0%,18%{left:-35%;opacity:0}35%{opacity:1}75%,100%{left:110%;opacity:0}}
.hero-caption{max-width:630px}
.hero-lower{position:relative;z-index:4}
.hero-wire{display:none}

.service-row{grid-template-columns:52px minmax(230px,.8fr) minmax(320px,1fr) 34px;align-items:start}
.service-number,.expertise-number,.digital-number,.project-no{font:500 13px/1.3 'DM Mono',monospace;color:var(--ink);padding-top:7px}
.service-row ul{margin-top:0}
.expertise-item{display:grid;grid-template-columns:45px 1fr;gap:0 10px}
.expertise-item h3{grid-column:2}
.expertise-item p{grid-column:2;margin-left:0}
.digital-point{display:grid;grid-template-columns:30px 1fr;gap:0 9px}
.digital-point h3,.digital-point p{grid-column:2}
.digital-point h3{margin-bottom:8px}
.digital-number{padding-top:2px}

.statement,.contact{position:relative;isolation:isolate;overflow:hidden;--pointer-x:50%;--pointer-y:50%;--shift-x:0px;--shift-y:0px}
.statement::before,.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(178,214,255,.18),transparent 31%);pointer-events:none}
.statement::after,.contact::after{content:"";position:absolute;inset:0;z-index:-2;background:repeating-linear-gradient(115deg,transparent 0 110px,rgba(255,255,255,.035) 111px,transparent 112px);animation:blue-field 24s linear infinite;pointer-events:none}
@keyframes blue-field{to{background-position:400px 0}}
.statement-top,.statement p,.statement>a,.contact-layout,.contact footer{position:relative;z-index:2}
.statement p{max-width:1050px;text-wrap:balance}
.blue-art{position:absolute;z-index:0;width:min(48vw,680px);aspect-ratio:1;pointer-events:none;opacity:.85;transform:translate(var(--shift-x),var(--shift-y));transition:transform .5s ease-out}
.statement-art{right:-9%;top:7%}
.contact-art{left:-20%;top:-8%;opacity:.36}
.blue-art-ring{position:absolute;inset:15%;border:1px solid rgba(219,237,255,.45);border-radius:50%;box-shadow:0 0 25px rgba(150,196,255,.12)}
.blue-art-ring-one{animation:blue-ring-a 13s linear infinite}
.blue-art-ring-two{animation:blue-ring-b 18s linear infinite}
.blue-art-ring-three{inset:36%;border-style:dashed;animation:spin 18s linear infinite}
.blue-art-orbit{position:absolute;inset:4%;border:1px solid rgba(255,255,255,.18);border-radius:50%;transform:rotate(-25deg) scaleY(.42);animation:blue-orbit 10s ease-in-out infinite}
.blue-art-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--lime);left:17%;top:27%;box-shadow:0 0 32px rgba(217,255,104,.85);animation:blue-dot 9s ease-in-out infinite}
@keyframes blue-ring-a{to{transform:rotate(360deg) rotateX(67deg)}}
@keyframes blue-ring-b{to{transform:rotate(-360deg) rotateY(62deg)}}
@keyframes blue-orbit{50%{transform:rotate(27deg) scaleY(.56)}}
@keyframes blue-dot{50%{left:76%;top:64%;transform:scale(1.6)}}

.digital-device{position:relative;min-height:350px;height:min(44vh,470px);padding:18px;background:linear-gradient(130deg,#163973,#1d4c97 65%,#133771);box-shadow:0 25px 60px rgba(28,69,135,.18)}
.digital{padding-top:clamp(30px,4vh,50px);padding-bottom:clamp(30px,4vh,50px)}
.digital-device::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 40%,rgba(143,192,255,.25),transparent 40%);animation:digital-glow 5s ease-in-out infinite;pointer-events:none}
@keyframes digital-glow{50%{opacity:.35;transform:translateX(-8%)}}
.device-frame{position:relative;z-index:1;height:100%;width:100%;border:1px solid rgba(255,255,255,.45);border-radius:8px;transform:perspective(900px) rotateY(-3deg) rotateX(2deg);background:rgba(5,23,62,.12)}
.device-content{display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;height:100%;padding:0}
.device-ui-top,.device-ui-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 18px;font:500 11px/1.35 'DM Mono',monospace;letter-spacing:.03em;text-transform:uppercase}
.device-ui-top{border-bottom:1px solid rgba(255,255,255,.35)}
.device-ui-top span:first-child{font-family:Manrope,sans-serif;font-size:20px;font-weight:600;letter-spacing:-.06em}
.device-ui-top span:last-child{font-size:22px;line-height:.6}
.device-ui-main{position:relative;flex:1;min-height:0;overflow:hidden;padding:23px;background:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px}
.device-ui-kicker{position:relative;z-index:2;font-size:clamp(15px,1.6vw,23px);line-height:1.2;display:block;max-width:230px}
.device-ui-visual{position:absolute;right:6%;top:1%;width:53%;aspect-ratio:1}
.ui-disc{position:absolute;inset:13%;border:1px solid rgba(255,255,255,.55);border-radius:50%}
.ui-disc-one{animation:orbit-one 12s linear infinite}
.ui-disc-two{animation:orbit-two 15s linear infinite}
.ui-disc-three{inset:36%;background:radial-gradient(circle,var(--lime),rgba(217,255,104,.08) 68%,transparent 70%);border:0;animation:core-pulse 4s ease-in-out infinite}
.ui-spark{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 18px var(--lime)}
.ui-spark-one{top:22%;right:8%;animation:ui-spark 4s ease-in-out infinite}
.ui-spark-two{bottom:18%;left:8%;animation:ui-spark 4s ease-in-out infinite reverse}
@keyframes ui-spark{50%{opacity:.25;transform:scale(.55)}}
.device-ui-bars{position:absolute;left:23px;bottom:24px;display:flex;align-items:end;gap:7px;height:84px}
.device-ui-bars span{display:block;width:11px;height:var(--bar-height);border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.12);transform-origin:bottom;animation:bar-dance 3.8s ease-in-out infinite alternate;animation-delay:var(--delay)}
.device-ui-bars span:nth-child(1){--bar-height:38%;--delay:-.4s}.device-ui-bars span:nth-child(2){--bar-height:63%;--delay:-1.1s}.device-ui-bars span:nth-child(3){--bar-height:48%;--delay:-.7s}.device-ui-bars span:nth-child(4){--bar-height:82%;--delay:-1.6s}.device-ui-bars span:nth-child(5){--bar-height:56%;--delay:-.2s}.device-ui-bars span:nth-child(6){--bar-height:94%;--delay:-1.3s}.device-ui-bars span:nth-child(7){--bar-height:70%;--delay:-.9s}
@keyframes bar-dance{50%{transform:scaleY(.48);background:rgba(217,255,104,.5)}}
.device-ui-bottom{border-top:1px solid rgba(255,255,255,.35);font-size:10px;align-items:flex-start}
.device-ui-bottom span{max-width:46%}

.course-banner{position:relative;min-height:60svh;padding:clamp(34px,5vw,76px);display:flex;flex-direction:column;justify-content:space-between;gap:35px;overflow:hidden;background:var(--lime);color:var(--ink);isolation:isolate}
.course-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(135deg,transparent 0 118px,rgba(28,69,135,.06) 119px,transparent 120px)}
.course-banner-label{font:500 14px/1.4 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.04em}
.course-banner-heading{display:block;position:relative;z-index:2;max-width:1120px;margin:0;font-size:clamp(44px,5.2vw,84px);font-weight:500;line-height:1.07;letter-spacing:-.04em}
.course-banner-heading em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}
.course-banner-more{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;border-top:1px solid rgba(28,69,135,.45);padding-top:16px;font:600 clamp(16px,1.3vw,20px)/1.3 Manrope,Arial,sans-serif}
.course-banner-more span{font-size:26px;line-height:1;transition:transform .35s ease}
.course-banner:hover .course-banner-more span,.course-banner:focus-visible .course-banner-more span{transform:translate(5px,-5px)}
.course-banner-visual{position:absolute;width:min(55vw,770px);aspect-ratio:1;right:-10%;top:-44%;opacity:.35;pointer-events:none;animation:spin 35s linear infinite}
.course-banner-visual i{position:absolute;inset:5%;border:1px solid var(--ink);border-radius:50%;transform:rotateX(64deg)}
.course-banner-visual i:nth-child(2){transform:rotateY(64deg)}
.course-banner-visual i:nth-child(3){inset:25%;transform:rotate(30deg)}

.project-card{grid-template-columns:46px minmax(390px,1fr) minmax(300px,.85fr) 30px;gap:22px;align-items:center;min-height:300px;padding:24px 0}
.project-no{align-self:start;padding-top:7px}
.project-main h3{font-size:clamp(25px,2.3vw,38px);line-height:1.17;letter-spacing:-.025em;margin:0 0 15px}
.project-main .project-detail{margin-top:22px}
.project-detail p{font-size:15px;line-height:1.55;margin:0 0 12px}
.project-visual{grid-column:3;grid-row:1;height:250px;overflow:hidden;border:1px solid var(--line);background:#e4e9ef;display:grid;place-items:center;transition:background .35s,transform .35s}
.project-card:nth-child(even) .project-visual{background:#e9ece7}
.project-card:hover .project-visual,.project-card:focus-within .project-visual{height:250px;background:#d9e2ef;transform:translateY(-4px)}
.project-visual img{display:block;width:100%;height:100%;padding:8px;object-fit:contain;filter:none;transition:transform .45s}
.project-card:hover .project-visual img{transform:scale(1.035)}
.project-visual::after{display:none}
.project-arrow{grid-column:4;grid-row:1;align-self:start}

.partners{position:relative;isolation:isolate;justify-content:space-between;overflow:hidden;background:#e5ebf0}
.partners .display-heading{margin-top:clamp(55px,10vh,110px);margin-bottom:30px}
.partner-rows{margin:0 0 clamp(45px,9vh,105px)}
.partner-marquee{border-bottom:0;background:rgba(255,255,255,.2)}
.partner-marquee:last-child{border-bottom:1px solid var(--line)}
.partner-marquee-reverse .partner-track{animation:partner-reverse 46s linear infinite}
@keyframes partner-reverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.partner-logo{height:155px;width:230px;padding:30px}
.partner-logo img{max-height:98px}
.partner-marquee:hover .partner-track{animation-play-state:paused}

.contact-art{left:-19%;top:4%}
.contact .contact-layout,.contact footer{position:relative;z-index:2}

@media(max-width:1050px){
  .hero-title{font-size:clamp(120px,21vw,210px)}
  .service-row{grid-template-columns:45px minmax(180px,.7fr) minmax(230px,1fr) 24px;gap:17px}
  .project-card{grid-template-columns:36px minmax(260px,1fr) minmax(230px,.85fr) 26px;gap:16px}
  .project-visual,.project-card:hover .project-visual,.project-card:focus-within .project-visual{height:230px}
}
@media(max-width:700px){
  .hero{min-height:610px}
  .hero-stage{align-items:center}
  .hero-title{font-size:min(26vw,112px);line-height:.86;letter-spacing:-.045em;transform:none}
  .hero-word-second{align-self:flex-end;padding-right:3vw;margin-top:.04em}
  .hero-word:first-child::after{left:.04em;top:.055em}
  .hero-orbit{width:76vw;right:-20%;top:9%;opacity:.68}
  .hero-caption{max-width:100%}
  .hero-caption p{font-size:clamp(19px,5vw,23px)}
  .hero-sweep{animation-duration:6s}
  .service-row{grid-template-columns:33px minmax(0,1fr) 24px;gap:9px 12px}
  .service-number{grid-column:1;grid-row:1;padding-top:5px}
  .service-row h3{grid-column:2;grid-row:1;font-size:27px}
  .service-row ul{grid-column:2;grid-row:2}
  .service-row .service-symbol{grid-column:3;grid-row:1}
  .expertise-item{grid-template-columns:32px 1fr}
  .digital-point{grid-template-columns:23px 1fr;gap:0 7px}
  .digital-number{font-size:11px}
  .statement-art{width:85vw;right:-35%;top:20%}
  .statement p{position:relative;z-index:2}
  .digital-points{grid-template-columns:1fr}
  .digital-point{min-width:0}
  .digital-point h3{font-size:22px}
  .digital-point p{font-size:15px}
  .digital-device{height:300px;min-height:0;padding:12px}
  .device-frame{height:100%;transform:none}
  .device-ui-top,.device-ui-bottom{padding:9px 11px;font-size:9px}
  .device-ui-top span:first-child{font-size:16px}
  .device-ui-main{padding:12px}
  .device-ui-kicker{font-size:15px;max-width:130px}
  .device-ui-visual{width:60%;right:1%;top:10%}
  .device-ui-bars{left:12px;bottom:12px;height:55px;gap:4px}
  .device-ui-bars span{width:7px}
  .course-banner{min-height:65svh;padding:28px 20px 95px}
  .course-banner-heading{font-size:clamp(38px,9vw,58px);line-height:1.13}
  .course-banner-visual{width:120vw;right:-56%;top:-13%}
  .project-card{grid-template-columns:30px minmax(0,1fr) 24px;gap:10px 12px;min-height:0;padding:25px 0}
  .project-no{grid-column:1;grid-row:1;padding-top:5px}
  .project-main{grid-column:2;grid-row:1}
  .project-main h3{font-size:24px;line-height:1.18}
  .project-main .project-detail{margin-top:16px}
  .project-detail p{font-size:14px}
  .project-visual,.project-card:hover .project-visual,.project-card:focus-within .project-visual{grid-column:2/4;grid-row:2;height:220px;margin-top:10px}
  .project-visual img{padding:6px}
  .project-arrow{grid-column:3;grid-row:1}
  .partner-logo{height:125px;width:180px;padding:18px}
  .partner-logo img{max-height:80px}
  .partner-rows{margin-bottom:16vh}
  .contact-art{width:100vw;left:-55%;top:0}
}
@media(max-width:360px){.hero-title{font-size:25vw}.digital-points{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hero-word,.hero-twenty,.hero-sweep,.orbit-ring,.orbit-core,.orbit-satellite,.blue-art-ring,.blue-art-orbit,.blue-art-dot,.ui-disc,.ui-spark,.device-ui-bars span,.digital-device::before,.course-banner-visual,.partners-lines,.partner-track,.statement::after,.contact::after{animation:none!important}.hero-word{clip-path:none;opacity:1;transform:none}}