/* Layout and motion refinement: calm, photographic, and responsive. */
:root{--page-gutter:clamp(20px,5.5vw,104px);--motion-ease:cubic-bezier(.22,1,.36,1)}
html{overflow-x:clip}body{min-width:320px;overflow-x:clip}
img,svg{max-width:100%}
.section-pad{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.hero{min-height:620px;height:max(700px,100svh);max-height:980px}
.hero-copy{width:min(57%,660px);margin-left:var(--page-gutter);padding-top:clamp(100px,12vh,150px)}
.hero h1{font-size:clamp(38px,4.1vw,66px);font-weight:400;letter-spacing:-.045em;line-height:1.3}
.hero-description{font-size:clamp(14px,1.12vw,17px);line-height:1.95}
.hero-image{object-position:59% center}
.section-heading{align-items:start;gap:clamp(35px,6vw,110px)}
.section-heading>div{min-width:0;flex:1}.section-heading>p{flex:0 1 445px;max-width:445px}
.record-gallery,.retrieval-photo{height:auto;aspect-ratio:1.92;min-height:430px;max-height:690px}
.photo-stage,.market-section .photo-stage,.social-group #expert .photo-stage,.social-group #collaboration .photo-stage{height:auto;aspect-ratio:1.9;min-height:450px;max-height:760px}
.scene-svg{display:block}.scene-svg image{animation-duration:36s}
.scene-offer{width:min(350px,40%);max-width:unset;bottom:clamp(30px,5vw,80px);right:clamp(25px,4vw,55px)}
.knowledge-stage{height:clamp(780px,65vw,895px)}
.knowledge-note{width:clamp(190px,19vw,245px)}
.knowledge-stage{background:#f2f5f3;background-image:none}
.knowledge-stage .constellation ellipse:first-of-type{opacity:.28}
.core-orbit{box-shadow:none;background:#f8faf7ed;border-color:#b9ccca}
.knowledge-note{background:#fbfcf9e8;border-color:#e4ece7;box-shadow:0 10px 28px #536b730d}
.scene-connections{opacity:.17}
.business-center{box-shadow:0 0 0 1px #cadad7}
.foundation-index>a,.expert-grid article,.two-columns article{position:relative;isolation:isolate}
.knowledge-note{isolation:isolate}
.foundation-index>a,.expert-grid article,.two-columns article{transition:transform .6s var(--motion-ease),border-color .4s,box-shadow .6s}
.foundation-index>a:hover,.expert-grid article:hover,.two-columns article:hover{transform:translateY(-6px);border-color:#7a9c9a}

/* A material response to the pointer, inspired by React Bits' card effects. */
.motion-card{--pointer-x:50%;--pointer-y:50%}
.motion-card:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(320px circle at var(--pointer-x) var(--pointer-y),#b9d0c725,transparent 75%);transition:opacity .45s}
.motion-card:hover:before,.motion-card:focus-within:before{opacity:1}
.foundation-index>a.motion-card,.expert-grid article.motion-card,.two-columns article.motion-card{padding-left:clamp(0px,1.2vw,14px);padding-right:clamp(0px,1.2vw,14px)}
.knowledge-note.motion-card:hover{border-color:#aec9c6;box-shadow:0 20px 45px #536b7329;transform:translateY(-5px)}

/* Large images enter with a photographic curtain, then settle very gently. */
.js-motion .photo-stage,.js-motion .record-gallery,.js-motion .retrieval-photo{clip-path:inset(0 0 9% 0);opacity:.6;transform:translateY(24px);transition:clip-path 1.05s var(--motion-ease),opacity .9s,transform 1.05s var(--motion-ease)}
.js-motion .photo-stage.is-visible,.js-motion .record-gallery.is-visible,.js-motion .retrieval-photo.is-visible{clip-path:inset(0);opacity:1;transform:none}
.photo-stage .scene-offer,.photo-stage .floating-label,.record-gallery .record-snippet,.retrieval-photo .agent-overlay{transition:transform .75s var(--motion-ease),opacity .75s var(--motion-ease),box-shadow .5s}
.js-motion .photo-stage:not(.is-visible) .scene-offer,.js-motion .photo-stage:not(.is-visible) .floating-label,.js-motion .record-gallery:not(.is-visible) .record-snippet,.js-motion .retrieval-photo:not(.is-visible) .agent-overlay{opacity:0;transform:translateY(28px)}
.js-motion .photo-stage.is-visible .scene-offer,.js-motion .record-gallery.is-visible .record-snippet,.js-motion .retrieval-photo.is-visible .agent-overlay{transition-delay:.28s}
.photo-stage .scene-offer:hover{transform:translateY(-5px)}
.record-gallery.is-changing .record-snippet,.record-gallery.is-changing .record-caption{animation:content-appear .48s var(--motion-ease) both}
.knowledge-stage.is-changing .knowledge-note{animation:knowledge-appear .58s var(--motion-ease) both}
.knowledge-stage.is-changing .knowledge-note:nth-of-type(2n){animation-delay:.07s}
.knowledge-stage.is-changing .knowledge-note:nth-of-type(3n){animation-delay:.14s}
.service-case.is-entering .section-heading,.service-case.is-entering .photo-stage{animation:content-appear .75s var(--motion-ease) both}
.service-case.is-entering .photo-stage{animation-delay:.12s}
@keyframes content-appear{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes knowledge-appear{from{opacity:.25;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* At laptop widths and browser zoom, switch to a two-part composition early. */
@media(max-width:1200px){
  .header{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
  .hero-copy{width:min(61%,620px)}
  .scene-section .section-heading{gap:36px}
  .scene-section .section-heading>p{max-width:390px}
  .photo-stage,.market-section .photo-stage{aspect-ratio:1.68;min-height:470px}
  .scene-offer{width:min(330px,43%)}
}
@media(max-width:920px){
  .hero{height:auto;min-height:710px;max-height:none}
  .hero-copy{width:min(66%,570px);padding-top:125px;padding-bottom:175px}
  .hero h1{font-size:clamp(38px,5.5vw,53px)}
  .header nav{gap:6px}
  .header nav a{padding-inline:12px}
  .section-heading{display:block}
  .section-heading>p{max-width:660px;margin-top:25px;padding-bottom:0}
  .scene-section .section-heading>p{max-width:660px}
  .record-gallery,.retrieval-photo{aspect-ratio:1.45;min-height:450px}
  .photo-stage,.market-section .photo-stage,.social-group #expert .photo-stage,.social-group #collaboration .photo-stage{aspect-ratio:1.42;min-height:490px}
  .scene-offer{width:min(315px,48%);bottom:28px;right:25px}
  .scene-offer>p{min-height:0}
  .foundation-index{gap:30px}
  .knowledge-stage{height:840px}
  .knowledge-note{width:clamp(175px,24vw,215px)}
  .note-a,.note-e{left:5%}.note-b,.note-f{right:5%}
  .note-c{left:2%}.note-d{right:2%}
  .use-paths{grid-template-columns:1fr 1fr}.use-paths .text-link{grid-column:1/-1}
}
@media(max-width:760px){
  :root{--page-gutter:7vw}
  .section-pad{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
  .hero{height:auto;min-height:max(690px,100svh);max-height:none}
  .hero-image{height:54%;object-position:75% center}
  .hero-copy{width:86%;margin-left:var(--page-gutter);padding-top:clamp(80px,11svh,115px);padding-bottom:clamp(320px,45svh,430px)}
  .hero h1{font-size:clamp(34px,8.4vw,45px)}
  .hero-description{font-size:clamp(13px,3.45vw,15px)}
  .hero-bottom{bottom:20px}
  .record-gallery,.retrieval-photo{height:clamp(470px,135vw,580px);min-height:0;max-height:none;aspect-ratio:auto}
  .photo-stage,.market-section .photo-stage,.social-group #expert .photo-stage,.social-group #collaboration .photo-stage{height:clamp(625px,166vw,720px);min-height:0;max-height:none;aspect-ratio:auto}
  .scene-svg{height:61%;top:0}
  .photo-caption{top:calc(61% - 55px)}
  .motion-toggle{top:calc(61% - 46px)}
  .scene-offer{bottom:22px;width:88%;left:6%;right:auto;padding:clamp(18px,5vw,23px)}
  .floating-label{max-width:80%}
  .market-section .photo-stage{height:clamp(615px,165vw,700px)}
  .market-section .scene-svg{height:57%}
  .market-section .photo-caption{top:calc(57% - 55px)}
  .market-section .motion-toggle{top:calc(57% - 45px)}
  .knowledge-product{top:46%;left:8%;width:84%}
  .knowledge-stage{height:clamp(1030px,290vw,1170px)}
  .knowledge-stage .suggestion{bottom:20px}
  .knowledge-note{width:43%}
  .service-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .service-tabs button{flex:0 0 auto}
  .foundation-index>a.motion-card,.expert-grid article.motion-card,.two-columns article.motion-card{padding-inline:0}
}
@media(max-width:430px){
  .header{padding-left:12px;padding-right:12px}.header nav a{padding-inline:8px;font-size:9px}
  .header .author-link{right:12px}
  .hero-copy{width:88%;padding-top:95px;padding-bottom:340px}
  .hero-description br{display:none}
  .record-snippet{max-width:195px;padding:16px}
  .record-caption>span{font-size:22px}
  .knowledge-stage{height:1120px}
  .knowledge-note{padding:12px 10px}
  .knowledge-core{top:215px}
  .note-c,.note-d{top:430px}.note-e,.note-f{top:600px}
  .synthesis-line{top:775px}
  .suggestion{width:94%;padding:16px 12px}
  .scene-offer>p{font-size:13px;line-height:1.75}
  .offer-buttons{gap:11px;flex-wrap:wrap}
}
@media(max-height:720px) and (min-width:761px){
  .hero{height:auto;min-height:690px}.hero-copy{padding-top:90px}
}
@media(prefers-reduced-motion:reduce){
  .js-motion .photo-stage,.js-motion .record-gallery,.js-motion .retrieval-photo{clip-path:none;opacity:1;transform:none}
  .js-motion .photo-stage .scene-offer,.js-motion .photo-stage .floating-label,.js-motion .record-gallery .record-snippet,.js-motion .retrieval-photo .agent-overlay{opacity:1;transform:none}
  .record-gallery.is-changing .record-snippet,.record-gallery.is-changing .record-caption,.knowledge-stage.is-changing .knowledge-note,.service-case.is-entering .section-heading,.service-case.is-entering .photo-stage{animation:none}
  .motion-card:before{display:none}
}

/* Second pass: visible interactions grounded in the product story. */
.knowledge-stage.has-knowledge-flow .constellation{display:none}
.knowledge-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.knowledge-flow .flow-track{fill:none;stroke:#9eb8b6;stroke-width:1.5;opacity:.72}
.knowledge-flow .flow-pulse{fill:none;stroke:#3d777a;stroke-width:3;stroke-linecap:round;stroke-dasharray:4 96;animation:knowledge-travel 4.8s linear infinite}
.knowledge-flow .flow-track.is-active{stroke:#3d777a;stroke-width:2.3;opacity:1}
.knowledge-flow .flow-pulse.is-active{stroke-width:4.5}
.knowledge-note{z-index:3;transition:border-color .35s,box-shadow .35s,transform .45s var(--motion-ease),background .35s}
.knowledge-note.is-connecting,.knowledge-note:hover,.knowledge-note:focus-visible{background:#fff;border-color:#78aaa5;box-shadow:0 18px 45px #2b616b24;transform:translateY(-5px)}
.knowledge-core{z-index:4}.knowledge-core .core-orbit{transition:box-shadow .45s,border-color .45s}
.knowledge-stage .suggestion{z-index:5}
.knowledge-stage.is-linking .core-orbit{border-color:#6eaaa1;box-shadow:0 0 0 12px #b6d8cc50}
@keyframes knowledge-travel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* Dock-like capability rail: progress, proximity magnification and sliding label. */
@media(min-width:761px){
  .side-nav{left:clamp(17px,2.2vw,36px);width:46px;z-index:46}
  .side-nav .side-items{width:46px;gap:7px;padding:12px 0}
  .side-items:before{left:6px;top:17px;bottom:17px;background:#b9c9c7}
  .side-items:after{content:"";position:absolute;left:5px;top:17px;width:3px;height:calc((100% - 34px)*var(--rail-progress,0));background:#426d70;border-radius:3px;transition:height .3s;pointer-events:none}
  .side-nav a{width:44px;height:45px;z-index:1}
  .side-nav a i{width:12px;height:2px;margin-left:6px;border-radius:3px;transform:scaleX(var(--dock-scale,1));transform-origin:left;transition:transform .24s var(--motion-ease),width .24s,background .24s}
  .side-nav a.current i{width:23px;background:#245c62}
  .side-nav a span{left:45px;min-width:118px;border:1px solid #d7e5df;font-size:11px}
  .side-nav a:hover i,.side-nav a:focus-visible i{background:#245c62}
  .side-nav:hover a,.side-nav:focus-within a,.side-nav.expanded a{width:178px}
}
@media(min-width:761px) and (max-width:1200px){.knowledge-stage{height:900px}}

/* Magnet-like CTA response and a deliberate sliding ink layer. */
.button,.offer-buttons button:first-child,.close-action{--mag-x:0px;--mag-y:0px;position:relative;overflow:hidden;transform:translate(var(--mag-x),var(--mag-y));transition:transform .32s var(--motion-ease),box-shadow .32s,background .32s}
.button:before,.offer-buttons button:first-child:before{content:"";position:absolute;inset:0;background:#a7c8bc;transform:translateY(103%);transition:transform .46s var(--motion-ease);pointer-events:none;opacity:.55}
.button:hover:before,.button:focus-visible:before,.offer-buttons button:first-child:hover:before,.offer-buttons button:first-child:focus-visible:before{transform:translateY(0)}
.button>span,.offer-buttons button:first-child>span{position:relative;transition:transform .38s var(--motion-ease)}
.button:hover>span,.button:focus-visible>span,.offer-buttons button:first-child:hover>span{transform:translate(4px,-3px)}
.button:hover,.offer-buttons button:first-child:hover{box-shadow:0 12px 30px #254d542d}

/* Editorial text reveal: words retain full legibility without motion. */
.js-motion .word-reveal{opacity:1}
.js-motion .word-reveal .word-piece{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.42em);transition:opacity .65s var(--motion-ease),filter .65s var(--motion-ease),transform .65s var(--motion-ease);transition-delay:calc(var(--word-index)*65ms)}
.js-motion .word-reveal.is-visible .word-piece{opacity:1;filter:none;transform:none}

/* React Bits-style spotlight cards, adapted to the site's paper palette. */
.foundation-index>a.motion-card,.expert-grid article.motion-card,.two-columns article.motion-card{border:1px solid #e0e9e5;border-radius:15px;background:#fafcf9;padding:clamp(24px,2.5vw,36px);box-shadow:0 8px 30px #25454b0a;overflow:hidden}
.foundation-index>a.motion-card:before,.expert-grid article.motion-card:before,.two-columns article.motion-card:before{z-index:0;opacity:.35;background:radial-gradient(350px circle at var(--pointer-x) var(--pointer-y),#8bb8a55e,transparent 70%)}
.foundation-index>a.motion-card:hover:before,.expert-grid article.motion-card:hover:before,.two-columns article.motion-card:hover:before{opacity:1}
.foundation-index>a.motion-card>* ,.expert-grid article.motion-card>* ,.two-columns article.motion-card>*{position:relative;z-index:1}
.foundation-index>a.motion-card:hover,.expert-grid article.motion-card:hover,.two-columns article.motion-card:hover{border-color:#9cbfba;box-shadow:0 20px 48px #25454b18}
@media(max-width:760px){
  .knowledge-flow .flow-track{stroke-width:1.2;opacity:.65}.knowledge-flow .flow-pulse{stroke-width:2.1}
  .foundation-index>a.motion-card,.expert-grid article.motion-card,.two-columns article.motion-card{padding:22px}
  .foundation-index{gap:14px}
  .knowledge-stage{height:clamp(1190px,310vw,1250px)}
  .knowledge-top{top:28px}
  .note-a,.note-b{top:132px}
  .knowledge-core{top:283px}
  .note-c,.note-d{top:500px}
  .note-e,.note-f{top:670px}
  .synthesis-line{top:850px}
}
@media(max-width:430px){
  .knowledge-stage{height:1220px}
  .note-c,.note-d{top:500px}
  .note-e,.note-f{top:670px}
  .knowledge-core{top:283px}
  .synthesis-line{top:850px}
}
@media(prefers-reduced-motion:reduce){
  .knowledge-flow .flow-pulse{animation:none;display:none}
  .js-motion .word-reveal .word-piece{opacity:1;filter:none;transform:none;transition:none}
  .button,.offer-buttons button:first-child{transform:none}
}