@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Regular.6686c5de.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Medium.e9103445.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter Display';src:url('/assets/fonts/InterDisplay-Regular.297fef8f.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:dark;--bg:#090a0c;--text:#f5f5f7;--secondary:#b9bdc8;--accent:#9ab2ff;--font:Inter,Arial,sans-serif;--display:'Inter Display',Inter,Arial,sans-serif;--gutter:clamp(24px,5vw,88px);--header:104px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header)}body{margin:0;background:var(--bg);color:var(--text);font:20px/1.65 var(--font);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #7195ff;outline-offset:7px}::selection{background:#315cdb;color:white}.wrap{width:min(1360px,calc(100% - var(--gutter)*2));margin-inline:auto}.skip{position:fixed;top:-120px;left:20px;z-index:30;background:white;color:black;padding:12px 24px}.skip:focus{top:12px}.header{position:sticky;top:0;z-index:20;background:#090a0cf5;transition:background .35s,box-shadow .35s}.header.scrolled{background:#090a0ce8;backdrop-filter:blur(18px);box-shadow:0 10px 40px #0003}.header-inner{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:inline-flex;align-items:center;line-height:1}.brand img{width:238px;height:auto;display:block}nav{display:flex;gap:42px;align-items:center}nav a{font-size:18px;line-height:1.4;padding:12px 0;transition:color .2s}nav a:hover{color:var(--accent)}nav>a:last-of-type{background:#ffffff0d;border-radius:999px;padding:14px 25px}.arrow{display:inline-block;transition:transform .25s;margin-left:16px}a:hover .arrow,button:hover .arrow{transform:translate(3px,-3px)}.menu{display:none;background:none;border:0;padding:12px 0;color:inherit}
.menu-icon,.menu-icon:before,.menu-icon:after{display:block;width:26px;height:2px;background:currentColor;border-radius:2px}
.menu-icon{position:relative;margin-left:auto;transition:background .2s}
.menu-icon:before,.menu-icon:after{content:'';position:absolute;left:0;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.menu-icon:before{top:-8px}
.menu-icon:after{top:8px}
.menu[aria-expanded="true"] .menu-icon{background:transparent}
.menu[aria-expanded="true"] .menu-icon:before{transform:translateY(8px) rotate(45deg)}
.menu[aria-expanded="true"] .menu-icon:after{transform:translateY(-8px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.menu-icon,.menu-icon:before,.menu-icon:after{transition:none}}
.hero{position:relative;isolation:isolate;overflow:hidden;background:#090a0c}.hero:before{content:'';position:absolute;z-index:-1;inset:-20%;background:radial-gradient(ellipse at 85% 78%,#2347b587 0,transparent 48%),radial-gradient(ellipse at 55% 110%,#355b9e40,transparent 50%);animation:light-arrive 4s ease-out both}.hero:after{content:'';position:absolute;z-index:-1;width:65%;height:150%;right:-30%;top:-25%;transform:rotate(25deg);background:linear-gradient(90deg,#a4bfff08,transparent 65%);filter:blur(6px);animation:light-shift 4s ease-out both}.hero-inner{min-height:calc(100svh - var(--header));display:flex;flex-direction:column;justify-content:center;padding-top:clamp(50px,8vh,120px)}.eyebrow,.section-label{font-size:20px;line-height:1.5;font-weight:400;letter-spacing:0;margin:0 0 36px;color:var(--secondary)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--display);font-weight:400}h1{font-size:clamp(64px,6.6vw,104px);line-height:1.1;letter-spacing:-.045em;margin:0;max-width:1300px}.title-line{display:block;animation:title-enter 1.1s cubic-bezier(.16,1,.3,1) both}.title-line.accent{color:var(--accent);animation-delay:.14s}.hero-base{margin-top:44px;display:flex;justify-content:space-between;align-items:center;gap:50px;padding-bottom:70px}.hero-base p{max-width:590px;font-size:22px;line-height:1.7;color:var(--secondary);margin:0}.text-link,.contact-action{display:inline-flex;align-items:center;justify-content:center;font:500 18px/1.5 var(--font);gap:32px;padding:19px 28px;border:0;border-radius:999px;background:var(--text);color:#101218;cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s}.text-link:hover,.contact-action:hover{background:#dbe4ff;transform:translateY(-3px);box-shadow:0 14px 40px #0002}.text-link .arrow,.contact-action .arrow{margin:0;font-size:23px}.hero-footer{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:auto;padding:24px 0 35px;font-size:18px;color:var(--secondary)}.scroll-cue{display:flex;gap:20px;align-items:center}.scroll-circle{display:grid;place-items:center;width:52px;height:52px;background:#ffffff0a;border-radius:50%;font-size:24px;color:white;transition:background .25s,transform .25s}.scroll-cue:hover .scroll-circle{background:#ffffff20;transform:translateY(4px)}.hero-footnote{text-align:right;font-size:18px;line-height:1.5}
.section{padding-block:140px}.section-label{color:var(--accent);margin-bottom:40px}h2{font-size:clamp(48px,5.5vw,82px);line-height:1.12;letter-spacing:-.04em;margin-bottom:40px}.about{background:#f0f1f3;color:#11141b;position:relative}.about .section-label{color:#3654a1}.about h2{font-size:clamp(60px,7vw,104px);margin-bottom:80px}.about h2 span{color:#626b7e}.about-bottom{display:grid;grid-template-columns:1fr 1.2fr;gap:100px;align-items:start}.about-statement{font-family:var(--display);font-size:40px;line-height:1.25;letter-spacing:-.03em;color:#727a8a;padding-top:6px}.body-copy{max-width:660px;font-size:22px;line-height:1.75;color:#414957}.body-copy p{margin-bottom:27px}.body-copy p:last-child{margin-bottom:0}.about-link{background:#151a25;color:white;margin-top:38px}.about-link:hover{background:#294cae;color:white}
.approach{background:#0b0d11}.approach-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(104px,11vw,156px);align-items:start}.approach-intro{position:sticky;top:calc(var(--header) + 45px)}.approach-heading p{max-width:410px;color:var(--secondary);font-size:21px;line-height:1.75;margin:0}.principles{display:grid;gap:18px;padding-top:6px}details{background:#14171e;border-radius:14px;transition:background .3s}details[open]{background:#1c253c}summary{list-style:none;display:grid;grid-template-columns:42px 1fr 28px;gap:22px;align-items:center;padding:34px 30px;cursor:pointer}summary::-webkit-details-marker{display:none}.index{font-size:20px;color:#9cafd9}summary h3{font-size:32px;line-height:1.25;letter-spacing:-.025em;margin:0}.expand{position:relative;width:24px;height:24px}.expand:before,.expand:after{content:'';position:absolute;top:11px;left:2px;width:20px;height:2px;background:var(--accent);transition:transform .3s}.expand:after{transform:rotate(90deg)}details[open] .expand:after{transform:rotate(0)}summary:hover h3{color:var(--accent)}.detail-copy{margin-left:94px;max-width:660px;padding:0 32px 36px 0;color:#c3ccdf;font-size:20px;line-height:1.75}.detail-copy p{margin-bottom:22px}.detail-copy p:last-child{margin-bottom:0}
.contact{padding:30px 0 100px;background:#0b0d11}.contact-panel{position:relative;isolation:isolate;overflow:hidden;background:#2544a3;padding:85px 70px 90px;border-radius:18px}.contact-panel:before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 100% 0%,#6284ed90,transparent 65%)}.contact .section-label{color:#d6e0ff;margin-bottom:54px}.contact-grid{display:block}.contact h2{color:#fff;font-size:clamp(62px,7.2vw,108px);line-height:1.06;margin:0 0 55px;letter-spacing:-.045em}.contact h2 span{color:#d6e0ff}.contact-side{display:flex;justify-content:space-between;align-items:center;gap:48px}.contact-side p{color:#e2e9ff;font-size:22px;max-width:550px;margin:0}.contact-action{flex-shrink:0}.footer{padding:30px 0 40px;background:#0b0d11}.footer-main{display:flex;justify-content:space-between;gap:40px;padding-bottom:70px}.footer .brand img{width:260px}.legal-name{font-size:17px;color:var(--secondary);margin-top:22px}.footer-links{display:flex;gap:80px}.footer-links div{display:flex;flex-direction:column;gap:18px;font-size:19px}.footer-links p{font-size:17px;color:#959eaf;margin-bottom:8px}.footer-links a:hover{color:var(--accent)}.footer-bottom{display:flex;justify-content:space-between;gap:24px;font-size:16px;color:#b9bdc8}.preview-note{font-size:16px;color:#a2aabb;text-align:center;padding:18px 24px;margin:0;background:#0b0d11}dialog{background:#14171e;color:var(--text);border:0;border-radius:18px;width:min(570px,calc(100% - 40px));padding:42px}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}dialog h2{font-size:36px;letter-spacing:-.025em}dialog p{font-size:20px;color:var(--secondary)}dialog button{background:#e7edff;color:#101218;border:0;border-radius:999px;padding:14px 26px;cursor:pointer}
@keyframes title-enter{from{opacity:0;transform:translateY(35px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}/* Opacity only: `transform` on .hero:before is reserved for the pointer parallax, and the infinite drift already supplies an entrance scale. */
@keyframes light-arrive{from{opacity:.2}to{opacity:1}}@keyframes light-shift{from{opacity:0;transform:rotate(31deg) translateX(10%)}to{opacity:1;transform:rotate(25deg) translateX(0)}}
@media(max-width:1050px){:root{--header:92px}.brand img{width:205px}nav{gap:26px}.hero-base{gap:30px;align-items:flex-start}.hero-base p{font-size:20px}.text-link{gap:18px;font-size:17px}.about-bottom{gap:60px}.approach-layout{gap:35px;grid-template-columns:1fr 1.15fr}summary{padding:28px 22px;gap:14px;grid-template-columns:32px 1fr 24px}summary h3{font-size:28px}.detail-copy{margin-left:68px;padding-right:22px}.contact-panel{padding:65px 45px}.contact-side p{font-size:20px}.contact-side{gap:25px}.section{padding-block:105px}}
@media(max-width:700px){:root{--header:84px;--gutter:24px}.brand img{width:195px}.menu{display:block}nav{display:none;position:absolute;top:var(--header);left:0;right:0;padding:20px 24px 30px;background:#0b0d11;align-items:stretch;gap:12px}nav.open{display:flex;flex-direction:column}nav a{font-size:21px;padding:12px 0}nav>a:last-of-type{align-self:flex-start}.hero-inner{padding-top:52px;min-height:calc(100svh - var(--header))}.eyebrow{font-size:18px;margin-bottom:32px}h1{font-size:clamp(39px,8.5vw,60px);line-height:1.15;letter-spacing:-.045em}.title-line{overflow-wrap:normal}.hero-base{display:block;margin-top:34px;padding-bottom:45px}.hero-base p{font-size:19px;line-height:1.7}.hero-base .text-link{margin-top:30px}.text-link,.contact-action{font-size:18px;gap:22px;padding:16px 22px;white-space:normal}.hero-footer{padding:20px 0 30px;font-size:17px}.hero-footnote{display:none}.scroll-circle{height:45px;width:45px}.scroll-cue{gap:14px}.section{padding-block:76px}.section-label{font-size:18px;margin-bottom:32px}.about h2{font-size:clamp(43px,9vw,62px);margin-bottom:40px}.about-bottom{display:block}.about-statement{display:block;font-size:30px;margin-bottom:30px;padding-top:0;color:#8a93a4}.body-copy{font-size:20px;line-height:1.75}.about-link{margin-top:30px}.approach-layout{display:block}.approach-intro{position:static}.approach-heading h2{font-size:49px;margin-bottom:27px}.approach-heading p{font-size:20px;max-width:none}.principles{margin-top:38px;gap:14px}summary{padding:25px 20px;grid-template-columns:25px 1fr 22px;gap:12px}summary h3{font-size:25px}.index{font-size:18px}.detail-copy{margin-left:57px;font-size:18px;line-height:1.75;padding:0 20px 28px 0}.contact{padding:0 0 65px}.contact-panel{padding:40px 25px 45px;border-radius:14px}.contact .section-label{margin-bottom:32px}.contact h2{font-size:clamp(40px,9vw,62px);margin-bottom:30px}.contact-side{display:block}.contact-side p{font-size:19px}.contact-action{margin-top:30px}.footer-main{display:block;padding-bottom:40px}.footer .brand img{width:235px}.legal-name{font-size:17px}.footer-links{margin-top:40px;gap:60px}.footer-links div{font-size:18px}.footer-bottom{display:block;font-size:16px;line-height:1.7}.footer-bottom>span{display:block;margin-top:16px}.preview-note{font-size:16px;text-align:left;padding-inline:24px}dialog{padding:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Direction 05: sector positioning, continuous light, enquiry preview. */
.hero:before{inset:-35%;background:radial-gradient(ellipse at 72% 65%,#3155c6ac 0,transparent 43%),radial-gradient(ellipse at 35% 75%,#19387970,transparent 42%);animation:light-drift 16s ease-in-out infinite alternate;will-change:transform}
.hero:after{width:85%;right:-25%;background:linear-gradient(90deg,transparent,#7096ff16 25%,#abc3ff0d 50%,transparent 78%);filter:blur(22px);animation:beam-drift 20s ease-in-out infinite alternate}
@keyframes light-drift{0%{transform:translate(9%,4%) scale(1);opacity:.65}50%{transform:translate(-5%,-7%) scale(1.12);opacity:1}100%{transform:translate(-13%,6%) scale(1.04);opacity:.8}}
@keyframes beam-drift{from{transform:rotate(24deg) translateX(10%);opacity:.4}to{transform:rotate(34deg) translateX(-30%);opacity:1}}
.motion-paused:before,.motion-paused:after,.motion-offscreen:before,.motion-offscreen:after{animation-play-state:paused}
.hero-base p{max-width:680px}.hero-inner{padding-top:clamp(64px,10vh,140px)}.motion-toggle{font-size:16px;border:0;background:#ffffff0c;color:#c7d2f2;border-radius:999px;padding:12px 20px;cursor:pointer}.motion-toggle:hover{background:#ffffff18}.motion-toggle:disabled{cursor:default}.focus{background:#11151e}.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:65px}.focus-grid article{scroll-margin-top:130px}.focus h3{font-size:34px;line-height:1.2;letter-spacing:-.025em;margin-bottom:25px}.focus article p{color:var(--secondary);font-size:21px;line-height:1.75;margin:0}label{display:block;font-size:18px;color:#f5f5f7;margin-bottom:25px}label span{color:#b9bdc8}input,select,textarea{display:block;width:100%;margin-top:12px;border:1px solid #4b5363;background:#0c0f15;color:#f5f5f7;font:18px/1.5 var(--font);padding:15px 18px;border-radius:8px}textarea{resize:vertical}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #9ab2ff;outline-offset:3px}input::placeholder,textarea::placeholder{color:#969faf}.footer-main{flex-wrap:wrap}.footer-links{gap:50px}.footer-links div{font-size:18px}.hero-footnote{display:block}
@media(max-width:1050px){nav{gap:22px}nav a{font-size:17px}.focus-grid{gap:28px}.focus h3{font-size:29px}.focus article p{font-size:20px}.footer-links{gap:35px}}
@media(max-width:700px){.hero-inner{padding-top:62px}.hero-footer{align-items:flex-start;gap:25px;flex-direction:column}.hero-footnote{text-align:left}.motion-toggle{font-size:16px}.focus-grid{grid-template-columns:1fr;gap:48px;margin-top:40px}.focus h2{font-size:43px}.focus h3{font-size:31px}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:35px 22px}.footer-links div{font-size:17px}.hero-base p{font-size:19px}}
@media(prefers-reduced-motion:reduce){.hero:before,.hero:after{animation:none!important;will-change:auto}}
/* Footer contact and policy reader. */
.footer-main{display:grid;grid-template-columns:1fr;gap:50px}.footer-links{display:grid;grid-template-columns:1fr 1.2fr 1.5fr 1fr;gap:36px}.footer-connect{min-width:0}.email-link{overflow-wrap:anywhere}.footer-legal-link{border:0;background:none;padding:0;text-align:left;font:inherit;cursor:pointer;line-height:inherit}.footer-legal-link:hover{color:var(--accent)}.privacy-dialog{width:min(860px,calc(100% - 32px));max-height:85svh;padding:0;overflow:auto}.privacy-heading{position:sticky;top:0;background:#14171e;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 38px;z-index:1}.privacy-heading h2{font-size:36px;margin:0}.privacy-close{font-size:17px;white-space:nowrap}.privacy-content{padding:0 38px 38px}.privacy-content h3{font-size:26px;line-height:1.3;margin:34px 0 15px}.privacy-content p{font-size:18px;line-height:1.8}.privacy-content a{color:var(--accent);overflow-wrap:anywhere}.privacy-content .policy-note{color:var(--accent);font-size:17px}
@media(max-width:850px){.footer-links{grid-template-columns:1fr 1fr;gap:40px 30px}}
@media(max-width:500px){.footer-links{grid-template-columns:1fr;gap:35px}.privacy-heading{padding:24px;gap:15px}.privacy-heading h2{font-size:28px}.privacy-content{padding:0 24px 28px}.privacy-close{padding:10px 15px}.privacy-content p{font-size:17px}}

/* Direction 06: centered hero composition, typographic sectors, brighter light. */
.hero-inner{display:grid;grid-template-rows:1fr auto;min-height:calc(100svh - var(--header));padding-top:0}
.hero-content{align-self:center;padding:64px 0 54px}
.hero-base{display:block;margin-top:36px;padding-bottom:0}
.hero-base p{max-width:770px}
.hero-base .text-link{margin-top:30px}
.hero-footer{margin-top:0;padding:20px 0 30px}
.hero:after{width:105%;height:190%;right:-42%;top:-50%;background:linear-gradient(90deg,transparent 16%,#b9d0ff06 28%,#d9e5ff38 39%,#f5f8ff55 45%,#a9c2ff20 53%,transparent 65%);filter:blur(18px);animation:beam-sweep 11s ease-in-out infinite alternate;will-change:transform,opacity;pointer-events:none}
.hero:before{pointer-events:none}
@keyframes beam-sweep{0%{transform:rotate(24deg) translateX(20%);opacity:.5}45%{opacity:1}100%{transform:rotate(32deg) translateX(-34%);opacity:.8}}
.focus-grid{grid-template-columns:1fr 1fr;gap:50px 90px;margin-top:75px}
.focus-grid article{position:relative;padding:35px 0 15px}
.focus-grid article:first-child{grid-column:1;max-width:560px}
.focus-grid article:nth-child(2){grid-column:2;grid-row:1 / span 2;align-self:center;max-width:560px}
.focus-grid article:last-child{grid-column:1;max-width:560px}
.focus h3{font-size:clamp(36px,3.5vw,54px);line-height:1.13;letter-spacing:-.035em;margin-bottom:27px;color:#f5f5f7}
.focus article:nth-child(2) h3{color:#a8bcff}
.focus article p{max-width:510px;font-size:22px;line-height:1.75}
.focus{position:relative;isolation:isolate;overflow:hidden}
.focus:before{content:'';position:absolute;z-index:-1;inset:10% -20% 0 35%;background:radial-gradient(ellipse at center,#213c722b,transparent 65%);pointer-events:none}
.motion-paused:after,.motion-offscreen:after{animation-play-state:paused}
@media(max-width:1050px){.hero-content{padding:50px 0}.focus-grid{gap:35px 55px}.focus article p{font-size:20px}}
@media(max-width:700px){.hero-inner{padding-top:0}.hero-content{padding:45px 0 40px}.hero-base{margin-top:28px;padding-bottom:0}.hero-base .text-link{margin-top:26px}.hero-footer{padding:15px 0 25px}.focus-grid{display:block;margin-top:35px}.focus-grid article{padding:25px 0;margin-bottom:24px}.focus h3{font-size:36px}.focus article p{font-size:20px}.hero:after{width:170%;right:-85%;filter:blur(14px)}}
@media(prefers-reduced-motion:reduce){.hero:after{animation:none!important;will-change:auto;opacity:.65}}

/* Direction 07 — one coherent hero composition, aligned with navigation. */
.header{position:fixed;inset:0 0 auto;background:transparent;box-shadow:none;backdrop-filter:none}
.header.scrolled{background:#090a0ce8;backdrop-filter:blur(18px);box-shadow:none}
.hero{min-height:100svh}
.hero-inner{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:100svh;padding:calc(var(--header) + 64px) 0 120px;position:relative}
.hero-content{width:100%;max-width:1140px;align-self:stretch;padding:0;min-width:0}
.hero h1{font-size:clamp(64px,6.1vw,100px);line-height:1.09;letter-spacing:-.045em;max-width:1140px}
.hero-base{margin-top:38px;padding:0;max-width:710px}
.hero-base p{font-size:23px;line-height:1.65;max-width:690px}
.hero-base .text-link{margin-top:32px;padding:18px 27px}
.hero-footer{position:absolute;right:0;bottom:28px;display:block;margin:0;padding:0}
.motion-toggle{background:#ffffff08;color:#bdc9e4;padding:11px 18px}
.hero:before{-webkit-mask-image:linear-gradient(transparent,#000 26%);mask-image:linear-gradient(transparent,#000 26%)}
.hero:after{-webkit-mask-image:linear-gradient(transparent,#000 23%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 23%,#000 90%,transparent)}
.focus-grid{position:relative;column-gap:140px}
.focus-grid article:first-of-type{grid-column:1;grid-row:1;max-width:560px}
.focus-grid article:nth-of-type(2){grid-column:2;grid-row:1 / span 2;align-self:center;max-width:560px}
.focus-grid article:last-of-type{grid-column:1;grid-row:2;max-width:560px}
.focus-path{position:absolute;left:calc(50% - 50px);top:0;width:100px;height:100%;overflow:visible;pointer-events:none}
.focus-path path{stroke-width:1.5;vector-effect:non-scaling-stroke}
.path-base{stroke:#35486c}.path-light{stroke:#adc3ff;stroke-dasharray:1;stroke-dashoffset:1}
.focus-path circle{fill:#8eaaff}.revealed .path-light{animation:connect-fields 2.6s ease-out forwards}
@keyframes connect-fields{to{stroke-dashoffset:0}}
.contact-panel{padding-top:75px}.contact h2{font-size:clamp(58px,6vw,88px);margin-bottom:42px}
.contact-action{font-size:18px;overflow-wrap:anywhere;min-width:0}.contact-side{gap:35px}.contact-side p{max-width:520px}
@media(max-width:1050px){.hero-inner{padding-top:calc(var(--header) + 50px);padding-bottom:110px}.hero h1{font-size:clamp(58px,6.4vw,80px)}.hero-base p{font-size:21px}.focus-grid{column-gap:90px}.focus-path{width:60px;left:calc(50% - 30px)}.contact-side{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){.hero-inner{min-height:100svh;padding:calc(var(--header) + 44px) 0 100px}.hero-content{padding:0;max-width:100%}.hero h1{font-size:clamp(39px,8.7vw,60px);line-height:1.12}.hero-base{margin-top:28px;max-width:100%}.hero-base p{font-size:20px;line-height:1.7}.hero-base .text-link{margin-top:28px}.hero-footer{bottom:20px;right:0}.focus-path{display:none}.focus-grid article{padding:20px 0 20px 26px;border-left:2px solid #40577f}.focus-grid article:nth-of-type(2){border-left-color:#a8bcff}.contact-panel{padding-top:40px}.contact h2{font-size:clamp(40px,9vw,62px)}.contact-action{font-size:16px;gap:12px;padding:16px 18px}.contact-action .arrow{font-size:20px}}
@media(prefers-reduced-motion:reduce){.path-light{stroke-dashoffset:0;animation:none!important}}

/* Direction 08: sequential investment narrative and scroll-driven light. */
.hero:before{animation:light-arrive 4s ease-out both;will-change:auto}
.hero:after{animation:none;transform:rotate(28deg) translateX(var(--scroll-light,0%));opacity:.85;will-change:transform}

/* ---- Ambient hero light ---------------------------------------------------
   The light layers used to move only while the page scrolled; once a photograph
   went in behind them they read as static. They now drift on their own.

   The auto motion is written with the INDEPENDENT `translate`/`scale` longhands,
   not `transform`. `transform` is still owned by the scroll handler
   (`rotate(28deg) translateX(var(--scroll-light))`) and a second animation on the
   same property would simply replace it, killing the scroll response. The browser
   composes translate -> rotate -> scale -> transform into one matrix, so the two
   sources stack instead of fighting. `translate` lands outside the rotation, which
   is what we want: the beam sweeps across the screen horizontally while keeping its
   28deg tilt.

   Periods are deliberately not multiples of each other (29s vs 17s) so the two
   layers don't resynchronise into an obvious pulse. */
@keyframes hero-glow-drift{
 0%  {translate:0 0;      scale:1;    opacity:1}
 50% {translate:-17% -9%; scale:1.16; opacity:.80}
 100%{translate:13% 7%;   scale:1.05; opacity:.95}
}
/* Starts at .34 — the value the static rule used — so there is no step on load,
   then brightens through the sweep to make the travel legible over the photo. */
@keyframes hero-beam-sweep{
 0%  {translate:22% 0;  opacity:.30}
 50% {translate:-8% 0;  opacity:.62}
 100%{translate:-34% 0; opacity:.28}
}
/* 4s delay hands over from `light-arrive` the moment it finishes; the drift's first
   keyframe repeats that animation's end state (opacity 1, no offset) so the handover
   is invisible. Overlapping them would pop, since both animate opacity and the one
   listed later wins while both are running. */
.hero:before{
 animation:light-arrive 2.4s ease-out both,
           hero-glow-drift 11s 2.4s ease-in-out infinite alternate;
 transform:translate(var(--mx,0%),var(--my,0%));
 transition:transform .9s cubic-bezier(.22,.61,.36,1);
 will-change:transform,translate,scale,opacity}
/* The pointer term is damped in JS and then eased again here; the beam takes it at
   -0.55x so the two planes separate instead of sliding together. */
.hero:after{
 animation:hero-beam-sweep 7.5s ease-in-out infinite alternate;
 transform:translate(calc(var(--mx,0%)*-.55),calc(var(--my,0%)*-.55))
           rotate(28deg) translateX(var(--scroll-light,0%));
 transition:transform .9s cubic-bezier(.22,.61,.36,1);
 will-change:transform,translate,opacity}
/* Both layers are larger than the viewport and permanently composited, so they are
   parked whenever the hero leaves the screen rather than animating out of sight. */
.hero.light-idle:before,.hero.light-idle:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
 .hero:before,.hero:after{animation:none!important;translate:none;scale:none;transition:none;will-change:auto}
 .hero:before{transform:none}
 /* keep the beam's tilt — only the motion goes, not the composition */
 .hero:after{transform:rotate(28deg)}
 .hero:after{opacity:.34}
}
.hero-inner{padding-bottom:100px}
.focus{background:#10141d}
.focus-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:110px;align-items:start}
.focus-intro{position:sticky;top:calc(var(--header) + 45px);padding-bottom:40px}
.focus-intro h2{font-size:clamp(40px,3.8vw,58px);margin-bottom:28px}
.focus-lead{font-size:21px;color:var(--secondary);line-height:1.7;max-width:420px}
.focus-nav{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:none;margin-top:40px;padding:0}
.focus-nav a,.focus-nav a:last-child{font-size:19px;border-radius:0;background:none;padding:8px 0;color:#a7b0c1;transition:color .3s,transform .3s}
.focus-nav a[aria-current=true]{color:#c3d1ff;transform:translateX(10px)}
.focus-stories article{min-height:58svh;display:flex;flex-direction:column;justify-content:center;padding:75px 38px;border-radius:20px;scroll-margin-top:var(--header);position:relative;isolation:isolate}
.focus-stories article:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 75% 50%,#3452a632,transparent 75%);opacity:0;transition:opacity .7s}
.focus-stories article.is-active:before{opacity:1}
.focus-stories h3{font-size:clamp(40px,4vw,58px);color:#bfc5d1;transition:color .6s,transform .6s;line-height:1.15;margin:0 0 30px}
.focus-stories article.is-active h3{color:#aec2ff;transform:translateY(-5px)}
.focus-stories article p{font-size:22px;color:#c0c5d0;line-height:1.75;margin:0 0 24px;max-width:550px}
.focus-stories article .focus-examples{font-size:19px;color:#98abc9;margin:0}
.contact-panel{background:#101f49;isolation:isolate}
.contact-panel:before{inset:-25%;background:radial-gradient(ellipse at 80% 20%,#4973d6a0,transparent 48%),radial-gradient(ellipse at 15% 100%,#243f9266,transparent 50%);transform:rotate(-12deg)}
.contact-panel:after{content:'';position:absolute;z-index:-1;inset:-80% -30%;background:repeating-radial-gradient(ellipse at 90% 90%,transparent 0 65px,#a0bfff0b 66px 67px,transparent 68px 110px);transform:rotate(-20deg);pointer-events:none}
.contact-side p{color:#e0e7fa}
@media(max-width:1050px){.focus-layout{gap:45px;grid-template-columns:1fr 1.2fr}.focus-stories article{padding:65px 20px}.focus-intro{top:calc(var(--header) + 25px)}}
@media(max-width:700px){.hero-inner{padding-bottom:70px}.focus-layout{display:block}.focus-intro{position:static;padding:0}.focus-nav{display:none}.focus-stories{margin-top:25px}.focus-stories article{min-height:0;padding:54px 0}.focus-stories h3{font-size:39px}.focus-stories article p{font-size:20px}.focus-stories article .focus-examples{font-size:18px}.focus-intro h2{font-size:43px}.focus-stories article:before{inset:0 -24px}.focus-stories article.is-active h3{transform:none}}
@media(prefers-reduced-motion:reduce){.hero:before{animation:none!important}.hero:after{transform:rotate(28deg);will-change:auto}.focus-stories h3{transform:none!important}}

/* Founder information: concise, factual answers without unconfirmed fund terms. */
.faq{background:#10141d}.faq-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}.faq-intro{font-size:21px;color:var(--secondary);max-width:370px}.faq-list{display:grid;gap:16px;align-content:start}.faq-list details{background:#191f2a}.faq-list details[open]{background:#202b43}.faq-list summary{grid-template-columns:1fr 24px;padding:28px}.faq-list h3{font-size:27px;line-height:1.35}.faq-answer{padding:0 28px 28px}.faq-answer p{font-size:20px;line-height:1.75;color:#c4ccdc;margin:0}.faq-answer a{color:#b5c8ff;overflow-wrap:anywhere}
@media(max-width:1050px){.faq-layout{gap:40px}}
@media(max-width:700px){.faq-layout{display:block}.faq-list{margin-top:35px}.faq-list summary{padding:24px;gap:20px}.faq-list h3{font-size:23px}.faq-answer{padding:0 24px 24px}.faq-answer p{font-size:18px}}

/* Focus: fixed left navigation, right panels replace one another during native scroll. */
.focus-nav a,.focus-nav a[aria-current=true]{transform:none}
.focus-nav a{transition:color .35s;background:none!important}
.focus-nav a[aria-current=true]{color:#c3d1ff}
.focus.is-pinned{height:290svh;padding:0;overflow:visible}
.focus.is-pinned:before{display:none}
.is-pinned .focus-layout{position:sticky;top:var(--header);height:calc(100svh - var(--header));min-height:0;display:grid;grid-template-columns:1fr 1.1fr;gap:90px;align-items:center;padding:45px 0}
.is-pinned .focus-intro{position:static;top:auto;padding:0}
.is-pinned .focus-intro h2{font-size:clamp(40px,3.5vw,54px)}
.is-pinned .focus-nav{margin-top:30px}
.is-pinned .focus-stories{position:relative;display:grid;align-items:center;min-height:480px;isolation:isolate}
.is-pinned .focus-stories:before{content:'';position:absolute;z-index:-1;inset:-40px -30px;border-radius:50%;background:radial-gradient(ellipse,#365ab245,transparent 70%);transform:translateY(-15px) scale(.95);transition:transform 1s ease,opacity 1s ease;opacity:.6;pointer-events:none}
.is-pinned[data-active="1"] .focus-stories:before{transform:translate(15px,20px) scale(1.15);opacity:1}
.is-pinned[data-active="2"] .focus-stories:before{transform:translate(-15px,35px) scale(1.05);opacity:.8}
.is-pinned .focus-stories article{grid-area:1 / 1;align-self:center;min-height:0;padding:40px 25px;opacity:0;visibility:hidden;transform:translateY(34px);filter:blur(5px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .6s ease,visibility .55s;pointer-events:none}
.is-pinned .focus-stories article.is-active{opacity:1;visibility:visible;transform:translateY(0);filter:blur(0);pointer-events:auto}
.is-pinned .focus-stories article:before{display:none}
.is-pinned .focus-stories article h3,.is-pinned .focus-stories article.is-active h3{transform:none;font-size:clamp(40px,3.8vw,58px);color:#b6c9ff}
.is-pinned .focus-stories article p{font-size:22px;line-height:1.75}
.is-pinned .focus-stories article .focus-examples{font-size:19px}
@media(prefers-reduced-motion:reduce){.focus-stories article{filter:none!important;transform:none!important}}
/* Focus hierarchy: quiet navigation, expressive investment thesis. */
.focus-intro .section-label{color:#c5c9d2;font-size:18px;margin-bottom:28px}
.focus-intro h2,.is-pinned .focus-intro h2{font-family:var(--font);font-size:clamp(32px,2.7vw,40px);font-weight:500;line-height:1.2;letter-spacing:-.035em;color:#f5f5f7;max-width:440px}
.focus-lead{font-size:19px;line-height:1.75;color:#a9b0be;max-width:380px}
.focus-nav{gap:8px;margin-top:34px}
.focus-nav a,.focus-nav a:last-child{font-size:18px;padding:12px 18px;margin-left:-18px;border-radius:10px;color:#a6afc0;font-weight:400}
.focus-nav a[aria-current=true]{background:#ffffff0a!important;color:#fff;font-weight:500;transform:none}
.is-pinned .focus-layout{grid-template-columns:.9fr 1.2fr;gap:90px}
.is-pinned .focus-stories{min-height:500px;border-radius:24px;background:linear-gradient(135deg,#273e724d,#17223955 55%,#10141d00);padding:10px}
.is-pinned .focus-stories:before{inset:0;border-radius:24px;background:radial-gradient(ellipse at 90% 10%,#4569c845,transparent 65%)}
.is-pinned .focus-stories article{padding:42px 35px}
.focus-stories h3,.is-pinned .focus-stories article h3,.is-pinned .focus-stories article.is-active h3{font-family:var(--display);font-weight:400;font-size:clamp(46px,4.7vw,70px);line-height:1.07;letter-spacing:-.045em;color:#f6f7fb}
.focus-stories article p,.is-pinned .focus-stories article p{font-size:21px;color:#c6cddd;line-height:1.75}
.focus-stories article .focus-examples,.is-pinned .focus-stories article .focus-examples{font-size:18px;color:#9ebcff;line-height:1.7}
@media(max-width:1100px){.is-pinned .focus-layout{gap:45px}.is-pinned .focus-stories article{padding:32px 25px}.is-pinned .focus-stories article h3,.is-pinned .focus-stories article.is-active h3{font-size:52px}}
@media(max-width:700px){.focus-intro h2{font-size:33px}.focus-lead{font-size:19px}.focus-stories h3{font-size:43px}.focus-stories article p{font-size:20px}.focus-stories article{padding:45px 0}}
/* Frameless focus stage: typography over a shared atmospheric background. */
.is-pinned .focus-stories{background:none;border:0;border-radius:0;box-shadow:none;padding:0;isolation:isolate}
.is-pinned .focus-stories:before{inset:-70px -45px;border-radius:0;background:radial-gradient(ellipse at 65% 48%,#3457941f 0,transparent 68%);filter:blur(32px);opacity:.6;pointer-events:none}
.is-pinned[data-active="1"] .focus-stories:before{transform:translate(12px,12px) scale(1.1);opacity:.85}
.is-pinned[data-active="2"] .focus-stories:before{transform:translate(-10px,20px) scale(1);opacity:.65}
.is-pinned .focus-stories article{padding:35px 0;background:none;border:0;border-radius:0;box-shadow:none}
.is-pinned .focus-stories article:before{display:none}
.focus-nav a[aria-current=true]{background:none!important;color:#f5f5f7}
@media(max-width:1100px){.is-pinned .focus-stories article{padding:32px 0}}

/* Single-column investment focus: centered introduction, sequential text reveals. */
.focus{padding:120px 0 110px;background:#10141d;height:auto;overflow:hidden}
.focus:before{inset:15% -20%;background:radial-gradient(ellipse at 50% 45%,#24447a19,transparent 65%)}
.focus .focus-layout{display:block;height:auto;padding:0;position:static}
.focus .focus-intro{position:static;padding:0;text-align:center;max-width:900px;margin:0 auto 65px}
.focus .focus-intro .section-label{font-size:18px;color:#a9bbdf;margin-bottom:28px}
.focus .focus-intro h2{font-family:var(--display);font-size:clamp(44px,4.6vw,68px);line-height:1.12;font-weight:400;letter-spacing:-.04em;max-width:none;margin-bottom:26px;color:#f5f5f7}
.focus .focus-lead{font-size:21px;line-height:1.7;max-width:580px;margin:0 auto;color:#aeb6c5}
.focus .focus-stories{display:flex;flex-direction:column;gap:10px;max-width:800px;min-height:0;margin:0 auto;padding:0;background:none;border:0;border-radius:0;text-align:center}
.focus .focus-stories:before{display:none}
.focus .focus-stories article{display:block;position:relative;min-height:0;padding:65px 25px;margin:0;border:0;border-radius:0;background:none;opacity:var(--focus-opacity,1);transform:translateY(var(--focus-offset,0px));filter:none;scroll-margin-top:calc(var(--header) + 45px)}
.focus .focus-stories article:before{display:none}
.focus .focus-stories h3{font-family:var(--display);font-size:clamp(38px,3.7vw,54px);line-height:1.15;letter-spacing:-.035em;font-weight:400;margin:0 0 26px;color:#f0f2f8;transform:none;transition:color .5s}
.focus .focus-stories article.in-view h3{color:#aebfff}
.focus .focus-stories article p{font-size:22px;line-height:1.75;max-width:680px;margin:0 auto 22px;color:#c4cad6}
.focus .focus-stories article .focus-examples{font-size:19px;line-height:1.7;max-width:640px;color:#96a9ca;margin:0 auto}
@media(max-width:700px){.focus{padding:76px 0 65px}.focus .focus-intro{margin-bottom:35px}.focus .focus-intro h2{font-size:42px}.focus .focus-lead{font-size:19px}.focus .focus-stories article{padding:45px 0;scroll-margin-top:calc(var(--header) + 20px)}.focus .focus-stories h3{font-size:36px}.focus .focus-stories article p{font-size:20px}.focus .focus-stories article .focus-examples{font-size:18px}}
@media(prefers-reduced-motion:reduce){.focus .focus-stories article{opacity:1!important;transform:none!important}}

/* Fixed scroll sequence: editorial heading, three-node progress, one active panel. */
.focus-progress{display:none}
.focus.focus-sequence{height:300svh;padding:0;overflow:visible;background:#10141d}
.focus.focus-sequence:before{display:none}
.focus-sequence .focus-layout{position:sticky;top:var(--header);height:calc(100svh - var(--header));display:grid;grid-template-columns:1fr;grid-template-rows:auto 72px minmax(220px,1fr);align-content:center;padding:36px 0 25px;gap:20px}
.focus.focus-sequence .focus-intro{margin:0 auto;text-align:center;max-width:1000px;padding:0}
.focus.focus-sequence .focus-intro .section-label{font-size:20px;color:var(--accent);margin:0 0 18px}
.focus.focus-sequence .focus-intro h2{font-family:var(--display);font-size:clamp(46px,4vw,66px);line-height:1.12;font-weight:400;letter-spacing:-.04em;margin:0 0 18px;color:#f5f5f7}
.focus.focus-sequence .focus-lead{font-size:20px;max-width:760px;line-height:1.5;margin:0 auto;color:#b3bbc9}
.focus-sequence .focus-progress{display:flex;justify-content:space-between;position:relative;width:min(640px,75%);margin:4px auto 0;align-self:center}
.focus-track{position:absolute;left:12px;right:12px;top:7px;height:2px;background:#344057;pointer-events:none}
.focus-track span{display:block;height:100%;background:#9eb6ff;transform:scaleX(var(--focus-progress,0));transform-origin:left}
.focus-progress button{position:relative;display:flex;flex-direction:column;align-items:center;gap:13px;background:none;border:0;padding:0;color:#97a5be;font-size:17px;cursor:pointer;min-width:24px}
.focus-progress button:first-of-type{align-items:flex-start}.focus-progress button:last-of-type{align-items:flex-end}
.focus-progress i{display:block;width:16px;height:16px;border:3px solid #10141d;border-radius:50%;background:#4f607f;box-shadow:0 0 0 1px #4f607f;transition:background .3s,box-shadow .3s}
.focus-progress .is-complete i{background:#a8beff;box-shadow:0 0 0 1px #a8beff}
.focus-progress [aria-current=step]{color:#e6edff}.focus-progress [aria-current=step] i{box-shadow:0 0 0 1px #a8beff,0 0 20px #86a7ff55}
.focus.focus-sequence .focus-stories{display:grid;grid-template-columns:1fr;position:relative;align-items:center;align-self:stretch;width:min(880px,100%);max-width:880px;min-height:0;margin:0 auto;background:none;gap:0}
.focus.focus-sequence .focus-stories article{grid-area:1/1;padding:15px 24px;min-height:0;opacity:0;visibility:hidden;transform:translateY(22px);pointer-events:none;transition:opacity .4s ease,transform .55s ease,visibility .4s;filter:none}
.focus.focus-sequence .focus-stories article.is-current{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.focus.focus-sequence .focus-stories h3{font-family:var(--font);font-weight:500;font-size:clamp(30px,2.8vw,42px);line-height:1.2;letter-spacing:-.025em;color:#b4c7ff;margin:0 0 22px}
.focus.focus-sequence .focus-stories h3 br{display:none}
.focus.focus-sequence .focus-stories h3 br:after{content:' '}
.focus.focus-sequence .focus-stories article p{font-size:21px;line-height:1.65;max-width:780px;margin:0 auto 20px}
.focus.focus-sequence .focus-stories article .focus-examples{font-size:18px;color:#94a7c9;margin:0 auto}
@media(prefers-reduced-motion:reduce){.focus.focus-sequence .focus-stories article{transition:none!important}.focus.focus-sequence .focus-stories article:not(.is-current){opacity:0!important}}

/* Reference-led focus: persistent category headings, expanded copy, paired artwork. */
.focus.focus-reference{height:auto;padding:140px 0 0;background:#10141d;overflow:visible}
.focus.focus-reference:before{display:none}
.focus-reference .focus-heading{margin-bottom:65px;text-align:left}
.focus-reference .focus-heading .section-label{font-size:20px;color:var(--accent);margin-bottom:40px}
.focus-reference .focus-heading h2{font-family:var(--display);font-size:clamp(48px,5.5vw,82px);font-weight:400;line-height:1.12;letter-spacing:-.04em;margin-bottom:30px}
.focus-description{font-size:22px;color:var(--secondary);max-width:720px;line-height:1.7;margin:0}
.focus-interaction{padding:0 0 100px}
.focus-showcase{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;min-width:0}
.focus-visual{position:relative;aspect-ratio:1.08;display:grid;place-items:center;isolation:isolate;min-width:0}
.focus-visual:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse,#2c467738,transparent 70%)}
.sector-art{width:100%;height:100%;grid-area:1/1;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.sector-art.is-selected{opacity:1;transform:none}
.focus-options{min-width:0}
.focus-reference .focus-option{margin:0;padding:23px 0;scroll-margin-top:calc(var(--header) + 25px)}
.focus-reference .focus-option h3{margin:0;font-family:var(--display);line-height:1.2;letter-spacing:-.03em;font-weight:400;font-size:clamp(28px,2.7vw,42px)}
.focus-option button{font:inherit;letter-spacing:inherit;line-height:inherit;color:#828c9d;display:block;text-align:left;width:100%;padding:0;border:0;background:none;cursor:pointer;transition:color .3s}
.focus-option button:hover{color:#c7d3ed}
.focus-option.is-selected button{color:#f5f5f7}
.focus-option button br{display:none}
.sector-body>div{min-height:0;overflow:hidden}
.sector-body p{font-size:20px;line-height:1.75;color:#c1cad9;margin:22px 0 0;max-width:550px}
.sector-body .sector-examples{font-size:18px;line-height:1.7;color:#9eb6e6;margin-top:16px}
.focus-enhanced .sector-body{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1),opacity .35s,visibility .5s}
.focus-enhanced .is-selected .sector-body{grid-template-rows:1fr;opacity:1;visibility:visible}
.focus-scroll .focus-interaction{height:230svh;padding:0}
.focus-scroll .focus-showcase{position:sticky;top:var(--header);height:calc(100svh - var(--header));padding:35px 0}
@media(max-width:1050px){.focus.focus-reference{padding-top:105px}.focus-showcase{gap:40px}.focus-reference .focus-heading{margin-bottom:45px}.sector-body p{font-size:19px}}
@media(max-width:700px){.focus.focus-reference{padding-top:76px}.focus-reference .focus-heading .section-label{font-size:18px;margin-bottom:32px}.focus-reference .focus-heading h2{font-size:49px}.focus-description{font-size:20px}.focus-reference .focus-heading{margin-bottom:25px}.focus-showcase{grid-template-columns:1fr;gap:10px}.focus-visual{max-width:440px;width:100%;margin:0 auto;aspect-ratio:1.3}.focus-reference .focus-option h3{font-size:30px}.focus-reference .focus-option{padding:22px 0}.sector-body p{font-size:19px}.sector-body .sector-examples{font-size:18px}.focus-interaction{padding-bottom:65px}}
.focus-reference .sector-body p{font-size:20px;line-height:1.75;color:#c1cad9;margin:22px 0 0;max-width:550px}
.focus-reference .sector-body .sector-examples{font-size:18px;line-height:1.7;color:#9eb6e6;margin-top:16px}
@media(max-width:700px){.focus-reference .sector-body p{font-size:19px}.focus-reference .sector-body .sector-examples{font-size:18px}}
/* Architectural line studies paired with the systems thesis. */
.focus-reference .focus-visual{aspect-ratio:1.12}
.focus-reference .focus-visual:before{inset:10%;background:radial-gradient(ellipse at 50% 50%,#35558c22,transparent 70%)}
.focus-reference .sector-art{width:94%;height:94%}

/* Final simplified focus: no illustrative column, retain text switching. */
.focus-reference .focus-showcase{grid-template-columns:minmax(0,1fr);gap:0;align-items:center}
.focus-reference .focus-options{width:100%;max-width:1000px;margin:0 auto}
.focus-reference .focus-option{padding:26px 0}
.focus-reference .focus-option h3{font-size:clamp(32px,3.2vw,48px)}
.focus-reference .sector-body p{max-width:760px;font-size:21px;line-height:1.7}
.focus-reference .sector-body .sector-examples{font-size:18px}
.focus-scroll .focus-showcase{padding:45px 0}
@media(max-width:700px){.focus-reference .focus-options{max-width:none}.focus-reference .focus-option h3{font-size:30px}.focus-reference .sector-body p{font-size:19px}.focus-reference .sector-body .sector-examples{font-size:18px}}

/* Staggered editorial composition: oversized thesis left, switcher lower right. */
.focus.focus-reference{padding:0;background:#10141d}
.focus-reference .focus-interaction{padding:100px 0 110px}
.focus-reference .focus-showcase{display:grid;grid-template-columns:1.03fr 1fr;gap:clamp(50px,6vw,110px);align-items:stretch;min-height:650px}
.focus-reference .focus-heading{width:100%;margin:0;padding:0;align-self:start}
.focus-reference .focus-heading .section-label{margin-bottom:36px}
.focus-reference .focus-heading h2{font-size:clamp(60px,5.6vw,86px);line-height:1.07;letter-spacing:-.045em;margin-bottom:34px}
.focus-reference .focus-heading h2 span{color:#a7bcfa}
.focus-reference .focus-description{font-size:21px;line-height:1.75;max-width:430px;margin:0}
.focus-reference .focus-options{max-width:none;width:100%;margin:125px 0 0;align-self:end;padding-bottom:12px}
.focus-reference .focus-option{padding:23px 0}
.focus-reference .focus-option h3{font-size:clamp(27px,2.3vw,35px);line-height:1.25;letter-spacing:-.025em}
.focus-reference .sector-body p{font-size:20px;line-height:1.7;max-width:560px;margin-top:22px}
.focus-reference .sector-body .sector-examples{font-size:18px;margin-top:16px}
.focus-scroll .focus-interaction{height:230svh;padding:0}
.focus-scroll .focus-showcase{position:sticky;top:var(--header);height:calc(100svh - var(--header));min-height:0;padding:65px 0 60px}
.focus-scroll .focus-options{margin-top:70px}
@media(min-width:900px) and (max-height:850px){.focus-scroll .focus-showcase{padding:35px 0}.focus-reference .focus-heading h2{font-size:clamp(56px,5vw,74px)}.focus-reference .focus-heading .section-label{margin-bottom:24px}.focus-reference .focus-option{padding:18px 0}.focus-reference .focus-options{margin-top:60px}.focus-reference .sector-body p{font-size:19px}}
@media(max-width:1050px){.focus-reference .focus-showcase{gap:45px}.focus-reference .focus-heading h2{font-size:60px}.focus-reference .focus-description{font-size:20px}.focus-reference .focus-option h3{font-size:29px}}
@media(max-width:700px){.focus-reference .focus-interaction{padding:76px 0 65px}.focus-reference .focus-showcase{display:block;min-height:0}.focus-reference .focus-heading h2{font-size:clamp(47px,10.5vw,64px);margin-bottom:28px}.focus-reference .focus-heading .section-label{margin-bottom:28px}.focus-reference .focus-description{font-size:20px;max-width:420px}.focus-reference .focus-options{margin:55px 0 0;padding:0}.focus-reference .focus-option h3{font-size:29px}.focus-reference .focus-option{padding:22px 0}.focus-reference .sector-body p{font-size:19px}}

/* Subtle dividers and active scroll indicator, inspired by supplied reference. */
.focus-reference .focus-option{position:relative;border-bottom:1px solid #ffffff16;padding:24px 0 24px 24px}
.focus-reference .focus-option:first-child{border-top:1px solid #ffffff16}
.focus-reference .focus-option:before,.focus-reference .focus-option:after{content:'';position:absolute;left:0;top:24px;bottom:24px;width:3px;border-radius:3px;pointer-events:none;opacity:0;transition:opacity .25s}
.focus-reference .focus-option:before{background:#a4baff20}
.focus-reference .focus-option:after{background:#a4baff;transform:scaleY(var(--sector-progress,0));transform-origin:top;transition:opacity .25s,transform .12s linear}
.focus-reference .focus-option.is-selected:before,.focus-reference .focus-option.is-selected:after{opacity:1}
@media(max-width:700px){.focus-reference .focus-option{padding:22px 0 22px 22px}.focus-reference .focus-option:before,.focus-reference .focus-option:after{top:22px;bottom:22px}}
@media(prefers-reduced-motion:reduce){.focus-reference .focus-option.is-selected:after{transform:scaleY(1)}}
/* Alternate the middle section to break up repeated two-column compositions. */
@media(min-width:701px){
 .approach-layout{grid-template-columns:1.1fr .9fr}
 .approach-layout .principles{grid-column:1;grid-row:1}
 .approach-layout .approach-intro{grid-column:2;grid-row:1}
}
@media(min-width:701px) and (max-width:1050px){
 .approach-layout{grid-template-columns:1.15fr 1fr}
}
/* Final responsive pass: narrow phones, tablets, touch targets and safe areas. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.wrap{min-width:0}
.hero-content,.about-reading,.approach-intro,.principles,.faq-list,.contact-side,.footer-links>div{min-width:0}
.hero h1,h2,h3,.body-copy,.contact-side p,.legal-name,.footer-bottom{overflow-wrap:break-word}
.focus-option button{min-height:48px}
.footer-links a,.footer-legal-link{min-height:44px;display:flex;align-items:center}
.header-inner{padding-top:env(safe-area-inset-top)}
@media(max-width:1080px){
 .menu{display:flex;align-items:center;justify-content:flex-end;min-height:48px;min-width:48px;padding:12px 0}
 #navigation{display:none;position:absolute;top:var(--header);left:0;right:0;background:#0b0d11;padding:18px var(--gutter) 28px;align-items:stretch;gap:8px;max-height:calc(100dvh - var(--header));overflow-y:auto;box-shadow:0 20px 35px #0003}
 #navigation.open{display:flex;flex-direction:column}
 #navigation a{font-size:20px;min-height:48px;padding:12px 0}
 #navigation>a:last-of-type{padding:14px 24px;align-self:flex-start}
}
@media(max-width:899px){
 .approach-layout,.faq-layout{display:block}
 .approach-intro{position:static}
 .approach-heading h2{font-size:clamp(42px,6vw,58px)}
 .approach-heading p{max-width:620px}
 .principles,.faq-list{margin-top:36px}
 .focus-reference .focus-showcase{display:block;min-height:0}
 .focus-reference .focus-options{margin:45px 0 0;padding:0}
 .focus-reference .focus-interaction{padding:80px 0}
 .focus-reference .focus-heading h2{font-size:clamp(47px,7vw,64px)}
 .focus-reference .focus-description{max-width:590px}
 .about-bottom{gap:35px}
 .contact-side{display:block}
 .contact-action{margin-top:28px}
}
@media(max-width:700px){
 .header-inner{gap:16px}.brand img{width:clamp(160px,48vw,195px)}
 .hero-inner{padding-top:calc(var(--header) + 36px);padding-bottom:64px}
 .hero h1{font-size:clamp(37px,8.7vw,60px)}
 .hero-base p,.body-copy{font-size:19px;line-height:1.7}
 .hero-base .text-link{max-width:100%;gap:20px;min-height:52px}
 .about h2{font-size:clamp(38px,9vw,58px)}
 .about h2,.approach-heading h2,.faq h2{letter-spacing:-.035em}
 .approach-heading h2{font-size:clamp(35px,8.5vw,49px);line-height:1.15}
 .principle,.principles{min-width:0}
 .principles summary{grid-template-columns:24px minmax(0,1fr) 22px;padding:23px 18px;gap:12px}
 .principles summary h3{font-size:clamp(22px,5.8vw,25px)}
 .detail-copy{margin-left:54px;padding-right:18px;font-size:18px}
 .faq-list summary{grid-template-columns:minmax(0,1fr) 22px;padding:22px;gap:16px}
 .faq-list h3{font-size:22px}
 .focus-reference .focus-interaction{padding:70px 0 65px}
 .focus-reference .focus-heading h2{font-size:clamp(42px,10.5vw,62px)}
 .focus-reference .focus-description{font-size:19px}
 .focus-reference .focus-option h3{font-size:clamp(26px,7vw,30px)}
 .focus-reference .sector-body p{font-size:18px;line-height:1.75}
 .focus-reference .sector-body .sector-examples{font-size:17px}
 .contact-panel{padding:36px 24px 40px}
 .contact h2{font-size:clamp(36px,8.8vw,60px);letter-spacing:-.04em}
 .contact-action{font-size:18px;min-height:52px;max-width:100%}
 .footer-main{gap:28px}
 .footer-links{margin-top:28px;gap:30px}
 .footer-links div{gap:6px}
 .footer{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
 .privacy-dialog{width:calc(100% - 24px);max-height:90svh;max-height:90dvh;overscroll-behavior:contain}
 .privacy-heading{padding:20px;gap:12px;align-items:center}
 .privacy-heading h2{font-size:26px;min-width:0}
 .privacy-close{font-size:14px;min-height:44px;padding:10px 12px}
 .privacy-content{padding:0 20px 24px}
}
@media(max-width:360px){
 :root{--gutter:20px}
 .header-inner{gap:12px}.brand img{width:164px}
 .hero h1{font-size:37px}
 .contact-panel{padding-inline:20px}
 .contact h2{font-size:35px}
 .focus-reference .focus-heading h2{font-size:42px}
}

/* Language switcher — plain links, so switching works with JavaScript disabled. */
.lang{display:flex;align-items:center;gap:2px;margin-left:8px}
.lang a{font-size:16px;line-height:1;padding:10px 10px;color:#7d8699;border-radius:8px;transition:color .2s,background .2s}
.lang a+a{position:relative}
.lang a+a:before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:1px;height:13px;background:#ffffff1f}
.lang a:hover{color:var(--text)}
.lang a.is-current{color:var(--text);background:#ffffff12}
.lang a.is-current:before,.lang a.is-current+a:before{background:transparent}

/* Team — portrait grid; bios open in the shared dialog so the grid keeps its rhythm. */
.team{background:#090a0c}
.team-head{max-width:720px}
.team-intro{margin:0;font-size:21px;line-height:1.75;color:var(--secondary);max-width:620px}
.team-group{margin-top:72px}
.team-group-label{margin:0 0 28px;font-size:17px;line-height:1.5;color:#6f7a90;padding-bottom:16px;border-bottom:1px solid #ffffff14}
.team-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 36px}
.member{display:block;width:100%;text-align:left;border:0;padding:0;background:none;cursor:pointer;color:inherit}
.member-photo{display:block;position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#14171e}
.member-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04) brightness(.94);transition:filter .45s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
/* Brand-blue wash unifies headshots that were not shot together. */
.member-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#5c7cff1f,#090a0c66 72%,#090a0cc7);mix-blend-mode:normal;transition:opacity .45s}
.member:hover .member-photo img,.member:focus-visible .member-photo img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)}
.member:hover .member-photo:after,.member:focus-visible .member-photo:after{opacity:.55}
.member-meta{display:block;padding-top:22px}
.member-name{display:block;font-family:var(--display);font-size:27px;line-height:1.25;letter-spacing:-.02em}
.member-role{display:block;margin-top:9px;font-size:18px;color:var(--accent)}
.member-focus{display:block;margin-top:5px;font-size:18px;color:#7d8699}
.member-more{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-size:16px;color:var(--secondary);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.member:hover .member-more,.member:focus-visible .member-more{opacity:1;transform:translateY(0)}
.member:focus-visible{outline:3px solid #7195ff;outline-offset:10px;border-radius:18px}
.member-dialog-role{margin:0 0 20px;font-size:18px;color:var(--accent)}
.team-dialog{width:min(620px,calc(100% - 32px))}
@media(prefers-reduced-motion:reduce){
 .member-photo img,.member-more{transition:none}
 .member:hover .member-photo img,.member:focus-visible .member-photo img{transform:none}
 .member-more{opacity:1;transform:none}
}
@media(max-width:1050px){
 .team-grid{grid-template-columns:repeat(2,1fr);gap:36px 28px}
 .team-group{margin-top:58px}
 .member-name{font-size:25px}
 .team-intro{font-size:20px}
}
@media(max-width:700px){
 .team-grid{grid-template-columns:1fr;gap:34px}
 .team-group{margin-top:44px}
 .team-group-label{margin-bottom:24px;font-size:16px}
 .member-photo{aspect-ratio:1/1}
 .member-name{font-size:24px}
 .member-role,.member-focus{font-size:17px}
 /* No hover on touch — keep the affordance and full colour visible. */
 .member-more{opacity:1;transform:none}
 .member-photo img{filter:grayscale(.35) contrast(1.02)}
 /* In the drawer there is room to make these real buttons instead of the
    tight inline cluster used in the desktop header. */
 /* #navigation a sets padding with an ID selector, so match that specificity. */
 #navigation .lang{margin:16px 0 0;gap:8px;padding-top:18px;border-top:1px solid #ffffff14;align-self:stretch}
 #navigation .lang a{font-size:17px;min-height:44px;padding:10px 18px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:10px;background:#ffffff08;color:#9aa3b5}
 #navigation .lang a+a:before{display:none}
 #navigation .lang a.is-current{background:#ffffff1c;color:var(--text)}
}

/* Film grain over the whole page. The flat gradients read as digital banding on
   large dark fields; a little noise breaks that up and gives the surfaces depth.
   Fixed + pointer-events:none, below the header (z-20) and above the sections. */
.grain{position:fixed;inset:-6%;z-index:9;pointer-events:none;opacity:.055;
 background-image:url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.82" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="140" height="140" filter="url(#n)"/></svg>");background-size:140px 140px;
 mix-blend-mode:overlay}
@media(prefers-reduced-motion:no-preference){.grain{animation:grain-shift 7s steps(6) infinite}}
@keyframes grain-shift{
 0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
 60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* ---- Art-directed imagery -------------------------------------------------
   Slots stay empty until a file lands in assets/img/. Every slot gets the same
   grade (desaturate + blue wash + dark scrim) so photos from different sources
   still read as one set, and so headline text keeps its contrast over them. */
.hero-art{position:absolute;inset:0;z-index:-3;display:block}
.hero-art img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.55) contrast(1.08) brightness(.52)}
.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#090a0ced 0,#090a0cbb 42%,#0b1430a8 72%,#12204d85);}
.about-art{display:block;position:relative;margin:0 0 70px;border-radius:20px;overflow:hidden;aspect-ratio:21/9}
.about-art img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.5) contrast(1.05) brightness(.8)}
.about-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#5c7cff14,#090a0c5c)}
/* The sector photographs are near-black material studies to begin with, so the
   shared grade lifts them instead of darkening: dropping them further made the
   panel read as a hole in the page rather than an image. A hairline keeps the
   edge legible against the dark section. */
/* NB: `.sector-art` is already taken by a legacy focus layout further up this file
   (opacity:0, height:100%, grid-area) — reusing that name made the photo invisible.
   This slot uses `.sector-photo`. */
/* Top margin is slightly wider than the 22px the body paragraphs use: the photo is
   a solid block butting straight against a 35–48px display heading, so matching the
   text rhythm exactly still read as stuck to the title. */
.sector-photo{display:block;position:relative;margin:26px 0 30px;border-radius:14px;overflow:hidden;aspect-ratio:4/3;max-width:520px;
 box-shadow:inset 0 0 0 1px #ffffff1a}
.sector-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.3) contrast(1.04) brightness(1) saturate(.92)}
.sector-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(165deg,#7f9cff1f,#090a0c14 60%,#090a0c38)}
@media(max-width:700px){
 .about-art{margin-bottom:40px;border-radius:14px;aspect-ratio:16/9}
 .sector-photo{margin:20px 0 22px;max-width:none}
}

/* Two-tier team: partners large 3-up, extended team smaller 4-up. Each rule is
   repeated inside the breakpoints because `.team-group--extended .team-grid`
   (0,2,0) outranks the plain `.team-grid` overrides in the media queries. */
.team-group--extended .team-grid{grid-template-columns:repeat(4,1fr);gap:34px 26px}
.team-group--extended .member-photo{aspect-ratio:1/1;border-radius:14px}
.team-group--extended .member-meta{padding-top:18px}
.team-group--extended .member-name{font-size:22px}
.team-group--extended .member-role,.team-group--extended .member-focus{font-size:16px}
.team-group--extended .member-more{font-size:15px;margin-top:12px}
@media(max-width:1050px){
 .team-group--extended .team-grid{grid-template-columns:repeat(2,1fr);gap:32px 26px}
 .team-group--extended .member-name{font-size:21px}
}
@media(max-width:700px){
 .team-group--extended .team-grid{grid-template-columns:repeat(2,1fr);gap:28px 16px}
 .team-group--extended .member-name{font-size:17px;line-height:1.3}
 .team-group--extended .member-meta{padding-top:14px}
 .team-group--extended .member-role,.team-group--extended .member-focus{font-size:14px;margin-top:4px}
 .team-group--extended .member-photo{border-radius:12px}
 .team-group--extended .member-more{display:none}
 .team-group--extended .member-role,.team-group--extended .member-focus{font-size:17px}
}

/* When a hero photograph is present the decorative gradients drop back so the
   material reads; without one they stay at full strength as the sole treatment.

   NB: both of these are inert — the ambient-light animations above own `opacity`
   on these pseudo-elements, and a running (or forwards-filling) animation beats a
   normal declaration. `:before` has in fact never been dimmed to .38: `light-arrive`
   fills `both`, so it has always held opacity 1. The intended values live in the
   `hero-glow-drift` / `hero-beam-sweep` keyframes instead; change them there.
   Kept here only as the no-animation fallback (reduced-motion, animations off). */
.hero.has-art:before{opacity:.38}
.hero.has-art:after{opacity:.34}
.hero.has-art .hero-art img{filter:grayscale(.42) contrast(1.14) brightness(.6)}
.hero.has-art .hero-art:after{background:linear-gradient(100deg,#090a0cf0 0,#090a0cc4 38%,#0b142f8f 66%,#12204d5c)}

/* ---- Mobile balance pass --------------------------------------------------
   Desktop earns its rhythm from two-column compositions and the pinned focus
   scroll. None of that survives a 390px viewport, so the phone layout needs its
   own moments rather than a flattened copy. */
@media(max-width:700px){
 /* More air between sections: the type is large, 76px read as cramped. */
 .section{padding-block:92px}
 .hero h1{font-size:clamp(40px,10.4vw,56px);line-height:1.08}
 .hero-base p{font-size:19.5px}

 /* Full-bleed is the one compositional move a phone does better than a desktop.
    Only `.about-art` can take it: the sector photos sit inside the accordion, whose
    inner wrapper needs overflow:hidden for the 0fr->1fr height animation, so any
    breakout there just gets clipped back to the column. */
 .about-art{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border-radius:0;aspect-ratio:3/2;margin-bottom:44px}
 .sector-photo{margin-bottom:26px}   /* keep the base 4:3 — focus stays as designed */

 /* The partner portraits are the primary tier; give them a touch more presence. */
 .team-group--lead .member-photo{aspect-ratio:4/5}
 .team-group--lead .member-name{font-size:26px}
}
/* Very narrow phones: two advisor columns still fit, but the type has to come in. */
@media(max-width:360px){
 .team-group--extended .team-grid{gap:22px 12px}
 .team-group--extended .member-name{font-size:15.5px}
 .team-group--extended .member-role,.team-group--extended .member-focus{font-size:13px}
 .about-statement{font-size:26px}
}

/* Team heading reads as two columns above 1051px, matching .about / .focus /
   .approach / .faq. Left on its own the lone heading block left the right half of
   the row unclaimed, which is what made the section feel unfinished — centring it
   would have fixed the hole but broken the editorial left-rag the rest of the
   page is built on. The intro sits on the baseline of the heading's last line. */
@media(min-width:1051px){
 .team-head{display:grid;grid-template-columns:1.1fr .9fr;
  column-gap:clamp(70px,7.5vw,140px);align-items:end;max-width:none}
 .team-head .section-label{grid-column:1 / -1}
 .team-head h2{margin-bottom:0}
 .team-intro{max-width:46ch;padding-bottom:10px}
}

/* Pinned focus has a fixed box (100svh - header), so the sector photo has to give
   way rather than push the column past it. Letterboxed and tied to viewport height;
   the un-pinned layout keeps the full 4:3 because it can simply scroll. */
/* Pinned focus is a fixed box (100svh - header) and every sector has to fit inside
   it WITH its photo. The furniture around the photo — showcase padding, the right
   column's top offset, the three heading paddings — was all fixed at desktop values
   and ate the budget on shorter laptops. Scaling those with svh frees ~150px at
   900px tall, which is what the photo needs; the offset and padding still read at
   full size on tall screens. Measured against crypto, the tallest sector. */
.focus-scroll .focus-showcase{padding:clamp(18px,3.6svh,65px) 0 clamp(16px,3svh,60px)}
.focus-scroll .focus-options{margin-top:clamp(14px,6svh,125px)}
.focus-scroll .focus-option{padding-top:clamp(8px,2svh,24px);padding-bottom:clamp(8px,2svh,24px)}
.focus-scroll .focus-reference .focus-option:before,
.focus-scroll .focus-reference .focus-option:after{top:clamp(8px,2svh,24px);bottom:clamp(8px,2svh,24px)}
/* Height is the only thing the pinned box can give; width must NOT follow it.
   Capping height while `aspect-ratio` was locked shrank the width too, so the photo
   became a small card floating in a wide column, no longer flush with the text under
   it. Release the ratio, span the full column like the mobile layout does, and let
   object-fit crop the height away. Slope is ~0.7 rather than 1 because the furniture
   above also shrinks with svh — derived by measuring the deficit at 768/900/1050. */
.focus-scroll .sector-photo{
 aspect-ratio:auto;width:100%;max-width:none;
 height:clamp(104px,calc(70svh - 474px),300px);max-height:none}


/* ---- Institutional eyebrow treatment -------------------------------------
   Section labels were set at 18–20px sentence case, which reads as body copy
   with a colour change rather than as a label. Small, uppercase and tracked is
   the register finance and legal institutions use for a kicker. Listed against
   every selector that previously set a size so this wins without !important. */
.section-label,
.about .section-label,
.contact .section-label,
.focus-intro .section-label,
.focus .focus-intro .section-label,
.focus.focus-sequence .focus-intro .section-label,
.focus-reference .focus-heading .section-label,
.team-group-label{
 font-size:13px;line-height:1.4;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.team-group-label{color:#79839a}

/* ---- Team card hierarchy -------------------------------------------------
   Role and focus were both 18px and separated only by colour, so the four lines
   read as one block. Now: display name / tracked caps role / plain focus line /
   small action — distinct by size and case, not just hue. */
.member-role,.team-group--extended .member-role{
 font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-top:12px}
.member-focus,.team-group--extended .member-focus{
 font-size:17px;letter-spacing:0;color:#8b94a8;margin-top:9px}
.member-more,.team-group--extended .member-more{font-size:14px;margin-top:18px}
@media(max-width:1050px){
 .team-group--extended .member-role{font-size:12px}
 .team-group--extended .member-focus{font-size:16px}
}
@media(max-width:700px){
 .section-label,.focus-reference .focus-heading .section-label{font-size:12px;letter-spacing:.15em}
 .team-group-label{font-size:12px}
 .member-role,.team-group--extended .member-role{font-size:12px;margin-top:10px}
 .member-focus,.team-group--extended .member-focus{font-size:16px;margin-top:7px}
}

/* ---- Focus: split stage (media left, switcher right) ----------------------
   Replaces the old composition where the thesis heading held the left column and
   each sector photograph lived *inside* its accordion body. That arrangement put
   text and image in the same height budget, and the pinned box only has
   `100svh - header` to give: a fourth sector could not fit, and the photo had to
   be squeezed to ~104px on a 768px-tall laptop.

   Splitting them fixes it structurally. The heading moves above both columns and
   shrinks to a row; the photographs move into their own left column where they
   get the full stage height and any aspect ratio; the right column carries text
   only, so it is short enough that four sectors fit where three barely did.

   Written as a `.focus-split` block at the end of the file so it overrides the
   earlier `.focus-reference` rules without needing !important. */
.focus-split .focus-showcase{display:block;min-height:0;gap:0}
.focus-split .focus-heading{
 display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
 gap:clamp(30px,4vw,80px);align-items:end;margin:0 0 clamp(26px,4svh,52px)}
.focus-split .focus-heading .section-label{grid-column:1/-1;margin-bottom:clamp(14px,2.4svh,30px)}
.focus-split .focus-heading h2{
 font-size:clamp(34px,3.3vw,48px);line-height:1.12;letter-spacing:-.035em;margin:0;max-width:16ch}
.focus-split .focus-heading .focus-description{
 font-size:clamp(17px,1.3vw,20px);line-height:1.6;max-width:420px;margin:0 0 6px}

.focus-split .focus-stage{
 display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
 gap:clamp(34px,4.5vw,86px);align-items:stretch}

/* The shots are stacked in one grid cell and crossfaded. `visibility` rides along
   with opacity so a hidden shot cannot take pointer or a11y focus mid-transition. */
.focus-split .focus-media{
 position:relative;display:grid;border-radius:16px;overflow:hidden;
 background:#0c1017;box-shadow:inset 0 0 0 1px #ffffff14;min-height:260px}
.focus-split .focus-shot{
 grid-area:1/1;opacity:0;visibility:hidden;
 transition:opacity .55s cubic-bezier(.2,.7,.2,1),visibility .55s,transform .9s cubic-bezier(.2,.7,.2,1);
 transform:scale(1.035)}
.focus-split .focus-shot.is-shown{opacity:1;visibility:visible;transform:scale(1)}
/* The slot markup still carries .sector-photo; inside the stage it must fill the
   cell rather than impose the 4:3 card it used in the accordion. */
.focus-split .focus-media .sector-photo{
 margin:0;height:100%;width:100%;max-width:none;aspect-ratio:auto;
 border-radius:0;box-shadow:none}
.focus-split .focus-media .sector-photo img{height:100%;width:100%;object-fit:cover}

.focus-split .focus-options{margin:0;align-self:center;padding:0}
.focus-split .focus-option{padding:clamp(13px,2.1svh,26px) 0 clamp(13px,2.1svh,26px) 22px}
.focus-split .focus-option:before,.focus-split .focus-option:after{
 top:clamp(13px,2.1svh,26px);bottom:clamp(13px,2.1svh,26px)}
.focus-split .focus-option h3{font-size:clamp(22px,1.9vw,30px)}
.focus-split .sector-body p{font-size:clamp(16px,1.15vw,18.5px);line-height:1.65;margin-top:15px;max-width:none}
.focus-split .sector-body .sector-examples{font-size:clamp(14.5px,1vw,16.5px);margin-top:11px}

/* Four sectors now, not three: the scroll track that drives the pin has to grow
   with them or each sector gets a shorter slice of travel than it reads as. */
.focus-split.focus-scroll .focus-interaction{height:310svh}
/* Pinned, the showcase is a fixed box (100svh - header). Column flex is what makes
   the stage take *the remainder* after the heading: giving it height:100% instead
   sized it against the whole box and pushed the heading's worth straight out the
   bottom. `min-height:0` is required or the flex item refuses to shrink below its
   content and overflows anyway. */
.focus-split.focus-scroll .focus-showcase{
 display:flex;flex-direction:column;
 padding:clamp(16px,2.6svh,44px) 0 clamp(14px,2.2svh,38px)}
.focus-split.focus-scroll .focus-heading{flex:0 0 auto;margin-bottom:clamp(18px,2.8svh,40px)}
.focus-split.focus-scroll .focus-stage{flex:1 1 auto;min-height:0}
.focus-split.focus-scroll .focus-media{min-height:0}
/* Four rows of title plus one expanded body has to clear the shortest supported
   pinned box (1366x768 and 1024x768). Sized against `content`, the tallest sector. */
.focus-split.focus-scroll .focus-option{
 padding-top:clamp(7px,1.5svh,22px);padding-bottom:clamp(7px,1.5svh,22px)}
.focus-split.focus-scroll .focus-option:before,
.focus-split.focus-scroll .focus-option:after{
 top:clamp(7px,1.5svh,22px);bottom:clamp(7px,1.5svh,22px)}
.focus-split.focus-scroll .focus-option h3{font-size:clamp(20px,1.65vw,28px)}
.focus-split.focus-scroll .sector-body p{font-size:clamp(15px,1.05vw,17.5px);margin-top:clamp(9px,1.5svh,15px)}
.focus-split.focus-scroll .sector-body .sector-examples{font-size:clamp(13.5px,.92vw,15.5px);margin-top:clamp(7px,1.1svh,11px)}

@media(max-width:1050px){
 .focus-split .focus-heading{display:block}
 .focus-split .focus-heading h2{margin-bottom:18px}
 .focus-split .focus-heading .focus-description{max-width:520px;margin:0}
 .focus-split .focus-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
}
@media(max-width:860px){
 /* Below the two-column threshold the media goes above the switcher and keeps a
    fixed ratio — there is no sibling column left to match its height to. */
 .focus-split .focus-stage{display:block}
 .focus-split .focus-media{aspect-ratio:16/10;min-height:0;margin-bottom:30px}
 .focus-split .focus-options{margin:0}
}
@media(max-width:700px){
 .focus-split .focus-heading h2{font-size:clamp(34px,8vw,46px)}
 .focus-split .focus-media{aspect-ratio:4/3;border-radius:14px;margin-bottom:26px}
 .focus-split .focus-option{padding:20px 0 20px 20px}
 .focus-split .focus-option:before,.focus-split .focus-option:after{top:20px;bottom:20px}
}
@media(prefers-reduced-motion:reduce){
 .focus-split .focus-shot{transition:opacity .01s;transform:none}
 .focus-split .focus-shot.is-shown{transform:none}
}

/* ---- Cases ---------------------------------------------------------------
   Staggered cards, structure borrowed from obvious.com: sector pill, name, then
   the prose. Not borrowed: the look. That site is bright flat illustration on
   near-white and dropping it in here would read as a different website.

   Hierarchy comes from a scale jump, which is the actual mechanism behind the
   obvious hero (14px caps -> 130px -> 16px). The earlier version set the pill at
   11.5, the name at 35 and the lifted line at 26 — too close together to rank, so
   the card read flat no matter how good the copy was. The ratio is now ~5x from
   pill to name. The blue rule that used to sit beside the lifted line is gone:
   accent-bar-plus-oversized-quote is the house style of every AI-generated card.

   Each card carries its sector photograph as a backdrop, blurred hard and dropped
   to ~14%. At that treatment the subject is unresolvable, which is the whole
   point — it supplies depth without competing with the sharp version of the same
   photograph in the focus section. See CASE_BG in build.py.

   On hover the backdrop blurs further and the closing paragraph expands. Only
   that paragraph collapses: burying the whole body would hide the one thing this
   section exists for, and collapsed text is still announced by screen readers
   while being invisible, so the less of it the better. Touch devices get it open
   permanently — see the `hover: none` block. */
.cases{background:#0b0e14}
.cases-head{max-width:760px;margin-bottom:clamp(46px,6vw,78px)}
.cases-head h2{font-size:clamp(43px,5vw,76px);line-height:1.08;letter-spacing:-.045em;margin:0 0 26px}
.cases-head h2 span{color:#a7bcfa}
.cases-intro{font-size:clamp(18px,1.45vw,21px);line-height:1.7;color:var(--secondary);margin:0;max-width:620px}

.case-list{
 list-style:none;margin:0;padding:0;
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:clamp(34px,4vw,64px) clamp(30px,3.6vw,58px);align-items:start}
/* The offset is what makes a four-card grid read as composed rather than tiled. */
.case:nth-child(even){margin-top:clamp(28px,5vw,92px)}

.case{
 position:relative;isolation:isolate;overflow:hidden;
 background:#0e121a;border-radius:18px;
 box-shadow:inset 0 0 0 1px #ffffff14;outline:none;
 transition:box-shadow .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.case:hover,.case:focus-visible{box-shadow:inset 0 0 0 1px #ffffff2e;transform:translateY(-5px)}
.case:focus-visible{box-shadow:inset 0 0 0 1px #9ab2ff,0 0 0 3px #9ab2ff33}

/* The plate. Heavy blur at rest already, deeper on hover: the point is depth and a
   hint of material, never a legible scene — a readable photograph here would just
   repeat the sector shot from the focus section. `scale` oversizes it so the blur
   has pixels to pull from and never shows a soft edge inside the radius. */
.case-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
/* Logo + gradient. Four dark, desaturated tints: far enough apart to tell the
   cards from each other at a glance, close enough that the section still reads as
   one page rather than four brands. Replaces the photographic backdrop — a scene
   under a logotype fights it, and the sector shots upstairs already carry the
   photography for this part of the site. */
.case--fintech{background:
 radial-gradient(120% 80% at 12% 0%,#1d3068 0,#141a2c 42%,#0e121a 72%),#0e121a}
.case--crypto{background:
 radial-gradient(120% 80% at 12% 0%,#2a2560 0,#171729 42%,#0e121a 72%),#0e121a}
.case--digital{background:
 radial-gradient(120% 80% at 12% 0%,#16384a 0,#121c26 42%,#0e121a 72%),#0e121a}
.case--content{background:
 radial-gradient(120% 80% at 12% 0%,#3a2150 0,#1a1526 42%,#0e121a 72%),#0e121a}

/* The tint lifts slightly on hover so the card still responds once the prose
   covers most of it; without this the only feedback would be the text appearing. */
.case:before{content:'';position:absolute;inset:0;z-index:-1;
 background:radial-gradient(120% 80% at 12% 0%,#ffffff12,transparent 55%);
 opacity:0;transition:opacity .55s cubic-bezier(.2,.7,.2,1)}
.case:hover:before,.case:focus-within:before{opacity:1}

/* Supplied as dark artwork on white; build.py inverts it to white-on-transparent.
   Held back to 62% so a logotype never outshines the display name under it — this
   is a reference to a company, not a sponsor wall. */
/* The logotype is the card's picture, not a badge in the corner. It spans the
   upper half at low opacity and is masked out towards the bottom so it dissolves
   into the gradient rather than ending on a hard edge — the identity block below
   then sits on clean ground. A 26px mark in the corner left the middle of a 590px
   card empty, which is what made these read as unfinished.

   It recedes further on hover, when the prose needs the space. */
.case-mark{position:absolute;inset:0 0 auto;z-index:0;pointer-events:none;
 padding:clamp(34px,3.2vw,52px) clamp(30px,2.8vw,44px) 0;
 -webkit-mask-image:linear-gradient(#000 0,#000 52%,transparent 92%);
 mask-image:linear-gradient(#000 0,#000 52%,transparent 92%)}
/* 86% rather than full bleed: the supplied artwork is only 400-850px wide, and
   spanning the whole card upscaled it far enough to show. No softening filter
   either — it was meant to blend the mark into the gradient but at this size it
   just read as a low-resolution image. The mask and the low opacity do that job. */
img.case-logo{display:block;height:auto;width:86%;max-width:none;
 opacity:.17;
 transition:opacity .5s cubic-bezier(.2,.7,.2,1)}
.case:hover img.case-logo,.case:focus-within img.case-logo{opacity:.09}
/* The text layer has to win the stacking order now that the mark fills the card. */
.case-text{z-index:1}

/* Fixed height, text anchored to the bottom edge. At rest only the identity block
   shows; on hover the prose opens upward and the name rides up with it, so the
   card fills without ever changing size. A card that grows on hover would reflow
   the staggered grid under the pointer, which is the thing to avoid. */
/* Height is fixed, so it has to clear the tallest card fully open. Two columns
   only above 1100px: below that the column gets narrow enough that the prose
   rewraps to several more lines and no sane fixed height fits it. Numbers derived
   by measuring the pill's clearance from the card top at 1100/1280/1440/1920. */
.case{height:clamp(560px,41vw,650px)}
.case-text{
 position:absolute;inset:0;z-index:1;
 display:flex;flex-direction:column;justify-content:flex-end;
 padding:clamp(28px,2.6vw,40px) clamp(26px,2.5vw,38px) clamp(30px,2.8vw,42px)}

/* Scale contrast carries the hierarchy — four sizes, no rules, no coloured bars.
   An accent border on the lifted line is the first thing a template reaches for
   and reads as exactly that. */
.case-sector{margin:0 0 20px}
.case-sector span{
 display:inline-block;padding:7px 15px;border-radius:999px;
 background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff17;
 font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#a7bcfa}
.case-name{
 font-family:var(--display);font-weight:400;font-size:clamp(32px,2.9vw,44px);
 line-height:1.08;letter-spacing:-.04em;margin:0}
.case-meta{
 font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
 color:#737f9a;margin:14px 0 0}
.case-line{
 font-family:var(--display);font-weight:400;
 font-size:clamp(18px,1.42vw,22px);line-height:1.38;letter-spacing:-.018em;
 color:#c3cee8;margin:clamp(18px,1.7vw,26px) 0 0;max-width:30ch}

/* Clipped, never display:none, so assistive tech and crawlers get it in every
   state. grid-template-rows 0fr -> 1fr needs overflow:hidden on the inner wrapper. */
.case-prose{
 display:grid;grid-template-rows:0fr;opacity:0;
 transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1),opacity .4s .08s}
.case-prose>div{overflow:hidden;min-height:0}
.case:hover .case-prose,.case:focus-within .case-prose,.case:focus-visible .case-prose{
 grid-template-rows:1fr;opacity:1}
.case-prose p{
 font-size:clamp(15px,1.02vw,16.5px);line-height:1.7;color:#98a2b8;margin:18px 0 0}

@media(max-width:1100px){
 .case-list{grid-template-columns:minmax(0,1fr);gap:28px}
 .case:nth-child(even){margin-top:0}
 /* Single column: the card goes back to normal flow with everything visible.
    A fixed height only earns its keep when cards sit side by side — that is where
    growing one would shunt its neighbour. Stacked, expansion costs nothing, and
    any fixed height that fits a 320px-wide card is absurd on a 1000px one. */
 .case{height:auto}
 .case-text{position:relative;inset:auto}
 .case-prose{grid-template-rows:1fr;opacity:1;transition:none}
}
/* Touch has no hover, and reduced-motion users should not depend on a transition
   to reach content: both get the open state permanently. */
@media(hover:none),(prefers-reduced-motion:reduce){
 .case-prose{grid-template-rows:1fr;opacity:1;transition:none}
 img.case-texture{transition:none}
 /* With no pointer (or no motion) there is no way to trigger the reveal, so the
    card drops its fixed height and just shows everything in normal flow. */
 .case{height:auto}
 .case-text{position:relative;inset:auto}
}
@media(prefers-reduced-motion:reduce){
 .case{transition:none}.case:hover,.case:focus-visible{transform:none}
}
@media(max-width:700px){
 .case{border-radius:14px}
 .case-text{padding:28px 22px 32px}
 .case-name{font-size:clamp(30px,7.6vw,37px)}
 .case-line{font-size:19px;margin-top:18px;max-width:none}
 .case-prose p{font-size:16px;margin-top:16px}
}

/* 768px-tall laptops are the tightest supported pinned box: 1366x768 came up 13px
   short once the fourth sector landed. Trimmed here rather than in the shared
   clamps so taller screens keep the generous version. */
@media(min-width:900px) and (max-height:800px){
 .focus-split.focus-scroll .focus-showcase{padding:12px 0 10px}
 .focus-split.focus-scroll .focus-heading{margin-bottom:14px}
 .focus-split.focus-scroll .focus-heading h2{font-size:clamp(27px,2.5vw,34px)}
 .focus-split.focus-scroll .focus-heading .focus-description{font-size:16px}
 .focus-split.focus-scroll .focus-heading .section-label{margin-bottom:11px}
 .focus-split.focus-scroll .focus-option{padding-top:6px;padding-bottom:6px}
 .focus-split.focus-scroll .focus-option:before,
 .focus-split.focus-scroll .focus-option:after{top:6px;bottom:6px}
 .focus-split.focus-scroll .focus-option h3{font-size:clamp(19px,1.5vw,24px)}
}

/* ---- Lower-page motion ---------------------------------------------------
   Everything below the focus section was static: one big flat blue panel, a
   footer whose links only changed colour, and an FAQ that snapped open while the
   Approach list above it animated. These are the three cheap fixes. */

/* The contact panel is the largest single colour field on the page, so a slow
   drift there reads from across the room. Same technique as the hero: the
   gradient lives on a pseudo-element and moves with the independent `translate`
   and `scale` longhands, which leaves `transform` free and composites cleanly.
   Two layers on different periods (23s/31s, deliberately not multiples) so they
   never resynchronise into a visible pulse. */
@keyframes panel-drift-a{
 0%  {translate:0 0;        scale:1}
 50% {translate:-9% 5%;     scale:1.18}
 100%{translate:7% -4%;     scale:1.06}
}
@keyframes panel-drift-b{
 0%  {translate:0 0;     scale:1.05;opacity:.5}
 50% {translate:11% 7%;  scale:1.22;opacity:.8}
 100%{translate:-6% -5%; scale:1.1; opacity:.6}
}
.contact-panel:before{
 animation:panel-drift-a 23s ease-in-out infinite alternate;
 will-change:translate,scale}
.contact-panel:after{content:'';position:absolute;z-index:-1;inset:0;
 background:radial-gradient(ellipse at 8% 100%,#4a6ddd7a,transparent 62%);
 animation:panel-drift-b 31s ease-in-out infinite alternate;
 will-change:translate,scale,opacity}
/* Parked by IntersectionObserver when the panel leaves the viewport — these are
   full-bleed composited layers and there is no reason to pay for them unseen. */
.contact-panel.light-idle:before,.contact-panel.light-idle:after{animation-play-state:paused}

/* Footer links had a colour change and nothing else. A rule that wipes in from
   the left gives the column some life without turning it into a toy. */
.footer-links div a{position:relative;align-items:center}
.footer-links div a:after{content:'';position:absolute;left:0;bottom:11px;
 height:1px;width:100%;background:currentColor;
 transform:scaleX(0);transform-origin:left;
 transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.footer-links div a:hover:after,.footer-links div a:focus-visible:after{transform:scaleX(1)}

/* The contact CTA already lifts; nudge its arrow too so the gesture reads as
   "this goes somewhere" rather than just "this is hoverable". */
.contact-action .arrow,.text-link .arrow{
 transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.contact-action:hover .arrow,.text-link:hover .arrow{transform:translate(3px,-3px)}

@media(prefers-reduced-motion:reduce){
 .contact-panel:before,.contact-panel:after{animation:none!important;translate:none;scale:none}
 .footer-links div a:after{transition:none}
 .contact-action .arrow,.text-link .arrow{transition:none}
 .contact-action:hover .arrow,.text-link:hover .arrow{transform:none}
}

/* The wordmark link was 29-33px tall on phones — under the 44px minimum for a
   touch target, and it is the one link on the page that returns you home. */
@media(max-width:700px){
 .brand{min-height:44px;display:flex;align-items:center}
}

/* ---- Mobile repairs ------------------------------------------------------
   Three things the desktop design relies on that the phone layout had quietly
   dropped. All scoped to the small breakpoints; nothing above 860px changes. */

@media(max-width:1100px){
 /* 1. The logotype watermark is positioned for the fixed-height desktop card,
       where it occupies the empty upper half. On a phone the card is auto-height
       and the text runs in normal flow from the top, so the mark landed straight
       on top of the sector pill — measured 42px of overlap. Here it spans the
       whole card and sits dead centre instead, which is what makes it read as a
       background rather than a misplaced header image. */
 .case-mark{
  inset:0;padding:0;display:flex;align-items:center;justify-content:center;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 70% at 50% 50%,#000 30%,transparent 78%)}
 /* Fits inside the card rather than bleeding past it. At 118% the wordmark lost a
 letter off each end — clipped by the card's overflow, so harmless, but it read as
 broken artwork instead of a deliberate watermark. */
 img.case-logo{width:92%;max-width:none;opacity:.1}
 .case:hover img.case-logo,.case:focus-within img.case-logo{opacity:.1}
}

/* 2. REVERTED: the media column was made `position:sticky` on phones so the
      crossfade stayed visible while you tapped down the list. It fixed that, but
      a pinned image parks itself mid-screen for the whole section and covers the
      heading and body of whatever you just opened — a worse problem than the one
      it solved. The picture stays in normal flow above the switcher.

@media(max-width:700px){
 /* 3. The contact panel drift is running on phones, but the panel is a fraction
       of its desktop size there, so a translation tuned for a 1300px-wide block
       moves a handful of pixels and reads as static. Same periods, wider throw. */
 @keyframes panel-drift-a{
  0%  {translate:0 0;      scale:1}
  50% {translate:-22% 14%; scale:1.4}
  100%{translate:18% -11%; scale:1.16}
 }
 @keyframes panel-drift-b{
  0%  {translate:0 0;      scale:1.1; opacity:.45}
  50% {translate:26% 18%;  scale:1.5; opacity:.85}
  100%{translate:-16% -13%;scale:1.2; opacity:.6}
 }
}