@import url('./vendor/lenis.css');
/* Selected A only. Uses Halo's 82rem container and responsive site spacing. */
.about-refined{--about-space:5rem;--about-section-gap:10rem;--about-heading-gap:4rem;--about-content:82rem;--about-ease:cubic-bezier(.22,1,.36,1)}
.about-refined .concept-stage{min-height:44rem;padding:22rem var(--site-gutter) 6rem}
.about-refined .hero.concept-hero h1#hero-title{max-width:68rem;font-size:4.5rem;line-height:1.08}
.about-refined #hero-title>span{display:block;white-space:nowrap}
.about-refined .concept-optics{background:var(--concept-ink);mask-image:none}
.about-refined .concept-stage{--halo-center-x:50vw;--halo-center-y:100%;--halo-radius-x:45vw;--halo-radius-y:83%;--halo-field-height:100%;overflow:visible}
.about-refined .concept-optics,.about-refined .halo-star-sphere{position:absolute;inset:0 0 auto;width:100%;height:var(--halo-field-height);pointer-events:none;overflow:hidden}
.about-refined .halo-star-sphere{z-index:-1;clip-path:ellipse(var(--halo-radius-x) var(--halo-radius-y) at var(--halo-center-x) var(--halo-center-y));mask-image:radial-gradient(ellipse var(--halo-radius-x) var(--halo-radius-y) at var(--halo-center-x) var(--halo-center-y),#000 90%,transparent 99.4%)}
/* Keep the native star drawing within the measured sphere. Its homepage-only
   scroll tween must not scale this canvas away from the dome or retain opacity 0. */
.about-refined .halo-home-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:1!important;transform:none!important}
.about-refined .hero-sparkle{display:block;width:clamp(24px,2.45vw,48px);height:auto;margin:0 auto clamp(22px,2.4vw,48px)}
/* Static upper arch uses the same circle geometry as the shader. */
.about-refined .concept-optics{container-type:size}
.about-refined .concept-fallback{inset:0;background:none;filter:none;transform:none}
.about-refined .concept-fallback::before{content:"";position:absolute;left:calc(var(--halo-center-x) - var(--halo-radius-x));top:calc(var(--halo-center-y) - var(--halo-radius-y));width:calc(2 * var(--halo-radius-x));height:calc(2 * var(--halo-radius-y));border-radius:50%;background:radial-gradient(closest-side,transparent 90%,#102b5b16 94%,#1f65b64d 97%,#57b9e8bb 99%,#d9f9ff 99.8%,transparent 100%)}
.about-refined .hero.concept-hero #clients{padding:0 var(--site-gutter) 3rem!important}
.about-refined .hero.concept-hero #clients>.container{width:100%;max-width:var(--about-content);margin-inline:auto;padding:0}
.about-refined .intro-story #approach{--rail-start:var(--concept-ink);--rail-end:#0c2e63;padding-top:0}
.about-refined .leadership-rail{--rail-gutter:max(var(--site-gutter),calc((100vw - var(--about-content))/2))}
/* Natural document spacing matches the retained staging letters. */
.about-refined .leadership-rail{background:linear-gradient(180deg,var(--rail-start),var(--rail-end))!important}
.about-refined .leadership-rail__panel{padding-block:1.5rem;background:transparent}
.about-refined .leadership-rail__track{gap:4rem;padding-block:2rem}
/* Normal flow: no sticky panel, reserved scroll height or upward entrance. */
.about-refined .leadership-rail{height:auto}
.about-refined .leadership-rail__panel{position:static;height:auto;min-height:0;display:block}
.about-refined .leadership-rail__viewport{scroll-snap-type:none;scroll-behavior:auto;cursor:grab}
.about-refined .leadership-rail__viewport.is-dragging{cursor:grabbing;user-select:none}
.about-refined .leadership-rail .leadership-letter:nth-child(n){display:block;min-height:0;height:auto;transform-origin:50% 50%;transform:translateX(var(--letter-x,0%)) rotate(var(--letter-turn,0deg)) scale(var(--letter-scale,1));backface-visibility:hidden;box-shadow:0 .75rem 1.75rem #0412300d}
.about-refined .leadership-letter h2{min-height:0;max-width:none;margin-bottom:1.75rem;text-wrap:initial}
.about-refined .letter-body{flex:none}
.about-refined .letter-body p{font-size:1.125rem;line-height:1.6;margin:0}
.about-refined .letter-signature{margin-top:2rem}
.about-refined .letter-signature>div b{font-size:1.125rem}
.about-refined .letter-signature>div>span{font-size:.875rem}
@media(min-width:992px){
 /* The first fold is reserved for the halo, manifesto and client logos. */
 .about-refined .hero.concept-hero{display:flex;flex-direction:column;height:100svh;min-height:600px}
 .about-refined .concept-stage{flex:1;min-height:0;max-height:none;padding:0 var(--site-gutter)}
 .about-refined .concept-optics{inset:0 0 auto}
 .about-refined .concept-copy{position:absolute;top:59%;left:var(--site-gutter);right:var(--site-gutter);width:auto;max-width:none;text-align:center;transform:translateY(-50%)}
 .about-refined .hero.concept-hero h1#hero-title{max-width:none;font-size:clamp(48px,min(8.8svh,5.05vw),5rem);line-height:1.1;letter-spacing:-.03em}
 .about-refined .hero.concept-hero #clients{flex:none;min-height:0;height:auto;padding-bottom:clamp(24px,4svh,60px)!important}
 .about-refined .value-theme p,.about-refined .team-direction p{font-size:clamp(14px,1rem,20px)}
 .about-refined .letter-body p,.about-refined .letter-signature>div b{font-size:clamp(14px,1.125rem,22.5px)}
 .about-refined .letter-signature>div>span,.about-refined .direction-tags span{font-size:clamp(12px,.875rem,17.5px)}
}
.about-refined .placeholder-avatar{display:grid;place-items:center;background:#e6ebf5;color:#59617b;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:2.5rem}
/* Keep the text on blue; the fade begins only after the team copy. */
.about-refined #working-principles{background:linear-gradient(180deg,#0c2e63 0%,#205cbb 56%,#3063c8 100%);color:#fff;padding:var(--about-section-gap) var(--site-gutter) var(--about-space)}
.about-refined .principles-layout{display:grid;grid-template-columns:1fr 2.4fr;gap:4rem;max-width:var(--about-content);margin:auto;align-items:start}
.about-refined .principles-aside{min-width:0}
.about-refined .principles-aside .team-diamond{width:20rem;max-width:115%;margin:-2.5rem 0 0 -1.5rem}
.about-refined .principles-intro{font:400 2.5rem/1.3 Suisse,Arial,sans-serif;letter-spacing:-.035em;text-align:left;max-width:none;color:#fff;margin:0 0 6rem}
.about-refined .principle-row{display:grid;grid-template-columns:minmax(0,1fr) 10.75rem;gap:2.75rem;align-items:center;border-top:1px solid #ffffff40;padding:3rem 0}
.about-refined .principle-copy h3{font:italic 400 3.5rem/1.05 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;color:#fff;margin:0 0 1.5rem;max-width:29rem;text-wrap:balance}
.about-refined .principle-copy p{font-size:clamp(14px,1rem,20px);line-height:1.6;color:#e0e9fb;margin:0;max-width:27rem}
.about-refined .principle-visual{display:grid;place-items:center;width:10.75rem;aspect-ratio:1;border-radius:12px;background:linear-gradient(140deg,#d7e7ff24,#b1d1ff08);box-shadow:inset 0 0 0 1px #cce6ff20}
.about-refined .principle-visual img{width:75%;height:75%;object-fit:contain;filter:url(#principle-glass-blue)}
.about-refined #working-principles>.principles-color-filter{position:absolute;pointer-events:none}
.about-refined #ongoing-partnership .leadership-rail__track{gap:1.5rem}
.about-refined #ongoing-partnership .leadership-letter:nth-child(n){flex-basis:56rem;width:56rem;padding:4rem 4.5rem}
.about-refined .brand-story #numbers{background:linear-gradient(180deg,#2360c1 0%,#2967c6 72%,#bacfe9 100%);padding:var(--about-space) var(--site-gutter) var(--about-section-gap)!important;color:#fff}
.about-refined #numbers>.container{max-width:var(--about-content);width:100%;margin:auto;padding:0}
.about-refined #numbers .success__label{color:#e0e9fb}
.about-refined #numbers .success__card-title{font-size:4.5rem}
.about-refined #numbers .success__card-text{font-size:clamp(14px,1rem,20px)}
.about-refined #numbers .columns.mod--success{padding-bottom:3rem}
.about-refined .opening-story #teams.section{background:#3063c8;padding:var(--about-space) max(var(--site-gutter),calc((100% - var(--about-content))/2)) 0;color:#fff}
.about-refined #teams>h2,.about-refined #teams>.lead{color:#fff}
.about-refined #teams>h2{font-size:4.5rem;font-weight:600;line-height:1.1;letter-spacing:-.02ch;max-width:48rem;margin-inline:auto;margin-bottom:0}
.about-refined .team-diamond{position:relative;width:37.875rem;max-width:100%;aspect-ratio:606/372;margin:0 auto -3.5rem;pointer-events:none}
.about-refined .team-diamond__canvas{position:absolute;inset:0}
.about-refined .team-diamond__canvas canvas{display:block;width:100%;height:100%}
.about-refined .team-diamond__fallback{position:absolute;width:100%;height:100%;object-fit:contain;inset:0}
.about-refined .team-diamond.is-ready .team-diamond__fallback{visibility:hidden}
.about-refined .team-directions{margin-top:var(--about-heading-gap);gap:5rem}
.about-refined .team-direction{border-color:#ffffff50}
.about-refined .team-direction .direction-label,.about-refined .direction-label span:first-child,.about-refined #teams .team-direction h3,.about-refined .team-direction p,.about-refined .direction-link{color:#fff}
.about-refined .direction-tags span{border-color:#ffffff80}
.about-refined .direction-link{justify-content:center;min-height:48px;padding:1rem 1.5rem;border:1px solid #ffffffb3;border-radius:100vw;background:transparent;line-height:1.2;transition:background-color .2s ease,border-color .2s ease}
.about-refined .direction-link:hover{background:#ffffff14;border-color:#fff}
.about-refined .direction-link:active{background:#ffffff24}
.about-refined .direction-link:focus-visible{outline:2px solid #fff;outline-offset:4px}
.about-refined #discovery-letters{--rail-start:#dce6f8;--rail-end:#f5f5f7}
/* Cases, recognition, reviews and CTA inherit the retained source backgrounds. */
.about-refined .team-life{position:relative;background:linear-gradient(180deg,#3063c8 0%,#3063c8 12%,#8eacde 53%,#dce6f8 100%);padding:var(--about-section-gap) 0 var(--about-space);overflow:clip;color:#02021e}
.about-refined #work.section{padding-block:var(--about-space)}
.about-refined #work .cards{margin-top:var(--about-heading-gap)}
.about-refined .brand-story #recognition{padding-block:var(--about-section-gap)}
.about-refined #recognition h2{margin-bottom:var(--about-heading-gap)}
.team-photo-strip{display:flex;gap:30px;align-items:flex-start;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:0 var(--site-gutter);overscroll-behavior-x:contain;cursor:grab;touch-action:pan-y}
.team-photo-strip::-webkit-scrollbar{display:none}
.team-photo-strip:focus-visible{outline:2px solid #02021e;outline-offset:-3px}
.team-photo-strip.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.team-photo{margin:0;flex:0 0 min(45vw,48rem);min-width:0;scroll-snap-align:center}
.team-photo:nth-child(2){flex-basis:min(30vw,32rem)}
.team-photo img{display:block;width:100%;height:min(33.75vw,36rem);max-width:none;object-fit:cover;object-position:50% 45%;border-radius:12px;pointer-events:none}
.team-photo:nth-child(2) img{height:min(45vw,42rem);object-position:50% 58%}
.team-photo:nth-child(3) img{height:min(30vw,34rem);object-position:50% 50%}
/* JS adds the pending state only after an observer exists; no-JS content stays visible. */
.about-refined .reveal-pending{opacity:0}
.about-refined .reveal-enter{transition:opacity .4s var(--about-ease);opacity:1}
@media(max-width:991px){
 .about-refined{--about-space:3.5rem}
 .about-refined .concept-stage{min-height:40rem;padding-top:22rem;padding-bottom:4rem}
 .about-refined .hero.concept-hero h1#hero-title{font-size:3.25rem;max-width:55rem}
 .about-refined .opening-story #teams.section{padding-top:7rem}
 .about-refined .team-directions{gap:2rem;margin-top:3rem}
}
@media(max-width:767px){
 .about-refined{--about-space:2.5rem}
 .about-refined .concept-stage{min-height:33rem;padding:18rem var(--site-gutter) 3.5rem}
 .about-refined .hero.concept-hero h1#hero-title{font-size:1.75rem;line-height:1.1;max-width:23rem;letter-spacing:-.04rem;text-wrap:initial}
 .about-refined #hero-title>span:first-child{white-space:nowrap}
 .about-refined .hero.concept-hero #clients{padding-bottom:2.5rem}
 .about-refined .values-heading{margin-bottom:2.5rem}
 .about-refined .values-grid{gap:2.5rem}
 .about-refined .leadership-rail__panel{padding-block:2rem .5rem}
 .about-refined .leadership-rail__track{gap:2rem;padding-block:3rem 4rem}
 .about-refined .letter-body p{font-size:.875rem}
 .about-refined .opening-story #teams.section{padding-top:6rem}
 .about-refined .team-directions{margin-top:2.5rem;gap:2.5rem}
}
@media(prefers-reduced-motion:reduce){
 .about-refined .direction-link{transition:none}
 .about-refined .reveal-pending,.about-refined .reveal-enter{opacity:1;transform:none;filter:none;transition:none}
 .about-refined .leadership-rail .leadership-letter:nth-child(n){transform:none}
}