:root{--navy:#102747;--ink:#132b45;--muted:#526374;--paper:#f7f9f8;--line:#d6dfdf;--teal:#087b78;--mint:#79ded0;--gold:#f1b746;--coral:#ea725e;--orange:#ee934c;--radius:4px;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;background:var(--paper)}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.1;font-weight:500;letter-spacing:-.045em}h1{font-size:clamp(2.7rem,5.5vw,5.7rem);max-width:1000px}h2{font-size:clamp(2rem,3.7vw,3.6rem);max-width:850px}h3{font-size:1.6rem;letter-spacing:-.025em}p+p{margin-top:1em}a{color:inherit;text-underline-offset:4px}a:hover{color:var(--teal)}button,summary{font:inherit;cursor:pointer}a,button,summary{touch-action:manipulation}img{max-width:100%;display:block}svg{max-width:100%;display:block}button{border:0}.wrap{width:min(var(--max),calc(100% - 88px));margin:auto}.skip{position:fixed;top:-100px;left:20px;z-index:99;background:white;padding:12px}.skip:focus{top:10px}:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.header{background:rgba(247,249,248,.98);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}.navrow{display:flex;align-items:center;gap:28px;min-height:94px}.brand{text-decoration:none;font-size:28px;letter-spacing:-1px;font-weight:650;display:flex;gap:0;align-items:center;margin-right:auto}.brand-logo{width:auto;height:34px;flex:none;margin-right:14px}.desktop-nav{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:600}.desktop-nav>a{text-decoration:none;white-space:nowrap}.desktop-nav a[aria-current]{color:var(--teal)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:15px 21px;background:var(--navy);color:#fff;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.005em;transition:background .2s,transform .2s;border:1px solid transparent;border-radius:2px;line-height:1.4}.btn:hover{background:var(--teal);color:white;transform:translateY(-2px)}.btn.light{background:var(--mint);color:var(--navy)}.btn.outline{background:transparent;color:inherit;border-color:currentColor}.btn.small{padding:12px 14px;font-size:12px}.mobile-nav{display:none}.eyebrow{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;margin-bottom:25px;color:var(--teal);display:flex;gap:12px;align-items:center}.eyebrow:before{content:'';width:8px;height:8px;background:currentColor;display:inline-block}.hero{padding:80px 0 72px;position:relative;overflow:hidden}.hero .lede{margin-top:30px;max-width:660px;font-size:19px;line-height:1.65;color:var(--muted)}.home-hero{padding:80px 0 0;background:var(--navy);color:white}.home-hero .eyebrow,.dark .eyebrow{color:var(--mint)}.home-hero h1{font-size:clamp(3.1rem,6vw,6.3rem);max-width:880px;position:relative;z-index:1}.home-hero h1 em{font-style:normal;color:var(--mint)}.home-hero .lede{color:#c5d3df;max-width:600px}.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}.hero-art{min-width:0;position:relative}.hero-art svg{width:100%} /* Homepage hero: the site mark on end, bracketed by the two practices it joins. */ .hero-mark{display:flex;flex-direction:column;align-items:center;gap:26px} .hero-mark img{width:170px;height:auto;flex:none} .hero-mark-label{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);display:flex;align-items:center;gap:12px;white-space:nowrap} .hero-mark-label:before{content:'';width:8px;height:8px;background:currentColor;display:block;flex:none} .hero-mark-label.end{color:var(--gold)}.actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:32px}.text-link{font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}.hero-note{border-top:1px solid #3c5069;margin-top:70px;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:12px ui-monospace,monospace;letter-spacing:.05em;color:#cad6e2}.section{padding:86px 0}.section-head{display:flex;gap:60px;align-items:flex-end;justify-content:space-between;margin-bottom:42px}.section-head p{max-width:400px;color:var(--muted)}.section-head h2{max-width:680px}.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.practice{background:white;border:1px solid var(--line);text-decoration:none;display:flex;flex-direction:column;transition:transform .25s}.practice:hover{transform:translateY(-4px);color:inherit}.practice-image{height:270px;position:relative;overflow:hidden}.practice-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.practice:hover img{transform:scale(1.025)}.practice-body{padding:32px;flex:1}.practice-body p{color:var(--muted);margin:18px 0 25px}.practice-label{position:absolute;bottom:20px;left:24px;color:white;background:var(--navy);padding:8px 13px;font:12px ui-monospace,monospace;letter-spacing:.08em}.tag{color:var(--teal);font:12px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.practice .text-link{display:inline-block}.dark{background:var(--navy);color:#f7fbff}.dark p{color:#c1d0de}.dark .section-head p{color:#c1d0de}.diagram{background:#142f4d;border:1px solid #3a536d;padding:30px;border-radius:var(--radius);overflow:hidden}.diagram svg{width:100%;height:auto}.diagram-text{color:#c7d8e6;font:14px ui-monospace,monospace}.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:start}.split>div>p{margin-top:24px}.stack{display:grid;gap:0}.feature{border-top:1px solid var(--line);padding:28px 0;display:grid;grid-template-columns:55px 1fr;gap:22px}.feature .num{font:12px ui-monospace,monospace;color:var(--teal);padding-top:4px}.feature p{color:var(--muted);margin-top:16px;max-width:760px}.dark .feature{border-color:#3a536d}.dark .feature p{color:#c1d0de}.dark .num{color:var(--mint)}.card{display:block;text-decoration:none;border-top:1px solid var(--line);padding:27px 0;position:relative}.card h3{margin:15px 0}.card p{color:var(--muted);font-size:15px;max-width:90%}.card .arrow{display:inline-block;margin-top:24px;color:var(--teal)}.card:hover h3{color:var(--teal)}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.photo-band{display:grid;grid-template-columns:1.1fr 1fr;min-height:460px;background:#eef2f0}.photo-band figure{position:relative}.photo-band img{width:100%;height:100%;object-fit:cover}.photo-copy{padding:60px;align-self:center}.photo-copy p{margin-top:24px;color:var(--muted)}.ribbon{background:#e8f0ed;padding:30px 0;font:12px/1.5 ui-monospace,monospace;letter-spacing:.05em}.ribbon .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.breadcrumb{font-size:12px;color:var(--muted);padding-top:25px}.breadcrumb a{text-decoration:none}.body-intro{font-size:23px;line-height:1.6;max-width:1000px}.cta-band{background:#dceee8;padding:65px 0}.cta-row{display:flex;justify-content:space-between;gap:30px;align-items:center}.cta-band h2{max-width:700px}.cta-band p{color:var(--muted);margin:17px 0 0;max-width:650px}.footer{padding:65px 0 25px;background:#0a1e35;color:#ced9e2}.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}.footer .brand{color:white;display:inline-flex}.footer p{font-size:13px;max-width:260px;margin-top:20px;color:#a9bbce}.footer h2{font:12px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;margin:8px 0 20px;color:var(--mint)}.footer a:not(.brand){display:block;text-decoration:none;font-size:13px;margin-bottom:10px}.footer a:hover{color:var(--mint)}.footer-bottom{margin-top:50px;padding-top:22px;border-top:1px solid #31455a;display:flex;gap:25px;flex-wrap:wrap;font-size:12px;color:#a9bbce}.footer-bottom a{display:inline!important;font-size:12px!important}.article-layout{display:grid;grid-template-columns:240px 1fr;gap:75px}.toc{position:sticky;top:125px;align-self:start;border-top:1px solid var(--line);padding-top:20px}.toc a{display:block;font-size:13px;margin:16px 0;color:var(--muted);text-decoration:none}.article-body{max-width:810px}.article-section{padding:0 0 42px;margin-bottom:30px;border-bottom:1px solid var(--line);scroll-margin-top:125px}.article-section h2{font-size:32px;letter-spacing:-.035em}.article-section p{margin-top:25px;font-size:18px;color:var(--muted)}.article-meta{margin-top:25px;color:var(--muted);font:12px ui-monospace,monospace}.faq{margin-top:45px}.faq details{border-top:1px solid var(--line);padding:22px 0}.faq summary{font-size:17px;font-weight:550;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary:after{content:'+';color:var(--teal)}.faq details[open] summary:after{content:'−'}.faq p{margin-top:20px;color:var(--muted);max-width:800px}.faq-more{display:inline-block;margin-top:30px}.booking{background:white;border:1px solid var(--line);padding:40px}.booking h2{font-size:32px}.booking .status{font:12px ui-monospace,monospace;letter-spacing:.08em;color:var(--teal);margin-bottom:25px}.booking p{margin-top:20px;color:var(--muted)}.booking .btn{margin-top:25px}.checklist{padding-left:20px;color:var(--muted)}.checklist li{padding:9px 0}.fade-in{animation:appear .55s ease-out both}@keyframes appear{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.flow-line{stroke-dasharray:4 9;animation:flow 18s linear infinite}@keyframes flow{to{stroke-dashoffset:-130}}.divider{border-top:1px solid var(--line)}.legal-draft{font-size:12px;color:#76520e;background:#fff3d3;padding:8px 0;text-align:center}.article-hero h1{font-size:clamp(2.7rem,5vw,5rem)}.horizontal-scroll{overflow-x:auto}.page-map{columns:3;column-gap:30px}.page-map a{display:block;margin:0 0 13px;font-size:14px}.no-js{padding:12px;background:#fff3d3;font-size:12px}.config-note{font-size:13px;color:var(--muted)} /* Replaces inline style attributes so no page needs style-src 'unsafe-inline'. */ .brand-dot{color:var(--teal)} .section-flush{padding-top:0} .spacer-30{height:30px} .spacer-40{height:40px} .body-intro.spaced{margin-bottom:45px} .config-note.spaced{margin-top:28px} /* Long-form legal text rendered from markdown: headings, paragraphs and lists arrive without classes, so they are styled by element inside this one container. The document sits in its own scroll region, set in the monospace face the rest of the site uses for technical labels. */ .legal-scroll{max-height:min(70vh,780px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 38px;box-shadow:inset 0 -14px 14px -14px #10274726} .legal-scroll:focus-visible{outline:3px solid var(--orange);outline-offset:4px} .legal-body{font:14px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);max-width:74ch} .legal-body h2{font-size:15px;font-weight:650;line-height:1.5;letter-spacing:0;color:var(--ink);margin:38px 0 14px;padding-top:22px;border-top:1px solid var(--line)} .legal-body h2:first-of-type{margin-top:26px} .legal-body h3{font-size:14px;font-weight:650;line-height:1.5;letter-spacing:0;color:var(--ink);margin:26px 0 10px} .legal-body p{margin:0 0 16px} .legal-body strong{color:var(--ink);font-weight:650} .legal-body ul{margin:0 0 18px;padding-left:20px} .legal-body li{padding:4px 0} .legal-body a{color:var(--teal)} .legal-body>p:first-child{color:var(--ink)} @media(max-width:600px){.legal-scroll{padding:22px 20px;max-height:72vh}.legal-body{font-size:13px}} @media(min-width:1500px){.wrap{width:min(1360px,calc(100% - 120px))}.hero-grid{grid-template-columns:1.2fr 1fr}.desktop-nav{gap:28px}}@media(max-width:1120px){.desktop-nav{gap:16px;font-size:12px}.navrow{gap:16px}.desktop-nav .btn{font-size:12px;padding:12px}.brand{font-size:24px}.brand-logo{height:30px}.wrap{width:calc(100% - 56px)}.hero-grid{grid-template-columns:1.3fr 1fr;gap:20px}.hero-art{opacity:1}.photo-copy{padding:40px}.card-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.desktop-nav{display:none}.mobile-nav{display:block}.mobile-nav>summary{list-style:none;border:1px solid var(--line);padding:10px 15px;font-size:13px}.mobile-nav[open]>summary{background:var(--navy);color:white}.mobile-panel{position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:25px 30px;box-shadow:0 16px 20px #10274722;max-height:80vh;overflow:auto}.mobile-panel a{display:block;padding:10px 0;text-decoration:none}.mobile-panel .btn{display:inline-flex;margin-top:15px;padding:15px}.navrow{min-height:80px}.hero-grid{grid-template-columns:1fr}.hero-art{max-width:650px;margin:15px auto 0;width:100%} .hero-mark{gap:20px} .hero-mark img{width:140px}.home-hero h1{max-width:760px}.home-hero{padding-top:55px}.hero-note{margin-top:25px}.split{gap:35px;grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:25px;max-width:650px}.photo-band{grid-template-columns:1fr 1fr}.photo-copy{padding:30px}.article-layout{grid-template-columns:1fr;gap:35px}.toc{position:static;display:flex;gap:15px;flex-wrap:wrap}.toc strong{width:100%}.toc a{margin:0}.footer-top{grid-template-columns:1fr 1fr}.three{grid-template-columns:1fr}.cta-row{align-items:start;flex-direction:column}} @media(max-width:600px){.wrap{width:calc(100% - 36px)}.brand{font-size:25px}.brand-logo{height:28px}.hero{padding:45px 0}.home-hero{padding:48px 0 0}.hero-mark img{width:112px}.hero-mark{gap:16px}.home-hero h1{font-size:3.15rem;letter-spacing:-.055em}.hero .lede{font-size:17px;margin-top:23px}.eyebrow{font-size:12px;letter-spacing:.08em;margin-bottom:22px}.section{padding:55px 0}.hero-note{font-size:12px;display:block}.hero-note span{display:block;margin:8px 0}.two,.card-grid,.photo-band{grid-template-columns:1fr}.practice-image{height:235px}.practice-body{padding:25px}.section-head{margin-bottom:30px}.photo-band figure{min-height:260px}.photo-copy{padding:38px 25px}.diagram{padding:14px}.feature{grid-template-columns:30px 1fr;gap:13px}.feature h3{font-size:1.5rem}.body-intro{font-size:20px}.footer-top{grid-template-columns:1fr 1fr;gap:34px 20px}.footer-brand{grid-column:1/-1}.footer{padding-top:45px}.footer a:not(.brand){font-size:12px}.footer-bottom{gap:14px}.booking{padding:25px}.article-section p{font-size:17px}.article-section h2{font-size:28px}.article-hero h1{font-size:2.65rem}.page-map{columns:1}.actions{gap:20px}.ribbon{padding:22px 0}.ribbon .wrap{font-size:12px}.cta-band{padding:45px 0}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.btn:hover,.practice:hover{transform:none}} @media print{.header,.footer,.cta-band,.actions,.toc{display:none}body{background:white;color:black}.wrap{width:100%}.section,.hero{padding:25px 0}.dark{background:white;color:black}.dark p{color:#333}/* Navy surfaces lose their background on paper; re-ink the text instead of leaving it white on white. */.home-hero{background:white;color:black;padding:25px 0 0}.home-hero .lede,.hero-note{color:#333}.home-hero .eyebrow,.dark .eyebrow,.dark .num,.home-hero h1 em{color:var(--teal)}.hero-mark-label{color:var(--teal)}.hero-mark-label.end{color:#78551e}.hero-note{border-top-color:var(--line);margin-top:30px}/* Figures and badges are artwork: they keep their own palette rather than inverting only the type. */.diagram,.practice-label,.twin-note{-webkit-print-color-adjust:exact;print-color-adjust:exact}.diagram{break-inside:avoid;background:#142f4d;color:#f5f9ff}.diagram-text{color:#c7d8e6}.diagram:after,.cab-via-figure:after{display:none}.dark .section-head p,.dark .feature p{color:#333}/* A legal document must print in full, not clipped to its on-screen scroll height. */.legal-scroll{max-height:none;overflow:visible;border:0;padding:0;box-shadow:none}.via-steps .tag{color:var(--teal)}.twin-note,.twin-note h3{color:#f7fbff}.twin-note p{color:#c1d0de}.article-layout{display:block}a{text-decoration:none}} [hidden]{display:none!important} /* Keep technical labels readable on narrow displays; only the figure scrolls. */ .diagram{min-width:0;overflow-x:auto}.split>*{min-width:0} @media(max-width:600px){.diagram svg{min-width:620px}.diagram:after{content:'Scroll to explore →';position:sticky;left:0;display:block;font:12px/1.4 ui-monospace,monospace;letter-spacing:.05em;color:var(--mint);margin-top:16px}} .article-layout>*{min-width:0} /* CAB + VIA architecture and connected-laboratory imagery. */ .connected-hero-image{width:min(var(--max),calc(100% - 88px));margin:48px auto 0;background:#e8eeec;border:1px solid var(--line)} .connected-hero-image img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain} .cab-anatomy-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:44px} .architecture-detail{border-top:1px solid var(--line);padding:28px 0 10px;min-width:0} .architecture-detail h3{font-size:26px;line-height:1.2;margin:16px 0} .architecture-detail p{color:var(--muted);font-size:16px;max-width:620px} .linked-detail{text-decoration:none;display:block}.linked-detail:hover h3{color:var(--teal)}.linked-detail .text-link{display:inline-block;margin-top:24px} .via-intro{gap:50px}.via-intro h3{font-size:28px;line-height:1.2}.via-intro p{margin-top:20px;max-width:600px} .via-steps{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:via-step} .via-steps li{padding:25px 0;border-top:1px solid #496073;min-width:0}.via-steps .tag{color:var(--mint)} .via-steps h3{font-size:22px;line-height:1.2;margin:18px 0}.via-steps p{font-size:15px} .twin-note{margin-top:28px;border-left:3px solid var(--mint);background:#1b3852;padding:28px 32px}.twin-note h3{font-size:27px}.twin-note p{margin-top:20px;max-width:1080px} .architecture-section{background:#eaf0ef}.cab-via-figure{margin:0;background:white;border:1px solid var(--line);overflow-x:auto;min-width:0;padding:20px} .cab-via-figure svg{display:block;width:100%;height:auto;min-width:1000px} @media(max-width:1120px){.connected-hero-image{width:calc(100% - 56px)}.via-steps{grid-template-columns:1fr 1fr}} @media(max-width:600px){.connected-hero-image{width:calc(100% - 36px);margin-top:35px}.cab-anatomy-grid,.via-intro,.via-steps{grid-template-columns:1fr;gap:22px}.architecture-detail h3{font-size:24px}.cab-via-figure{padding:10px}.cab-via-figure:after{content:'Scroll to explore →';position:sticky;left:0;display:block;font:12px/1.4 ui-monospace,monospace;letter-spacing:.05em;color:var(--teal);margin-top:14px}.twin-note{padding:24px}.via-steps{margin-top:30px}.via-steps li{padding:22px 0 0}} .section-links{display:flex;gap:16px 28px;flex-wrap:wrap;margin-top:30px}.section-links a{font-size:13px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--teal);padding-bottom:4px} /* Complete CAB anatomy rendering with numbered component callouts. */ .cab-anatomy-visual{margin:38px 0 46px;min-width:0} .cab-anatomy-title{font-size:28px;line-height:1.2;margin:0 0 30px} /* The bench is the centre of the figure; callouts flank it top-to-bottom on the side its leader lines point to. */ .cab-anatomy-stage{display:grid;grid-template-columns:1fr minmax(260px,380px) 1fr;gap:0 36px;align-items:center} .cab-anatomy-photo{margin:0;align-self:center} .cab-anatomy-photo>a{display:block} /* Show the full generated canvas, including every numbered circle and pointer. */ .cab-anatomy-image-frame{display:block} .cab-anatomy-image-frame img{display:block;position:static;width:100%;max-width:100%;height:auto} .cab-component-list{list-style:none;padding:0;margin:0;display:grid;align-content:center} .cab-component-list li{display:grid;grid-template-columns:34px 1fr;gap:14px;border-top:1px solid var(--line);padding:18px 0;min-width:0} .cab-callouts-start li{grid-template-columns:1fr 34px;text-align:right} .cab-callouts-start li>div{order:1} .cab-callouts-start li>.component-number{order:2} .component-number{font:12px/1.5 ui-monospace,monospace;color:var(--teal);padding-top:4px} .cab-component-list h4{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.015em;margin:0 0 8px} .cab-component-list p{color:var(--muted);font-size:14px;line-height:1.6} .cab-anatomy-source{display:inline-block;margin-top:16px} /* Below three columns the bench moves above its callouts, which pair up underneath it. */ @media(max-width:1024px){.cab-anatomy-stage{grid-template-columns:1fr 1fr;gap:0 36px;align-items:start} .cab-anatomy-photo{order:-1;grid-column:1/-1;width:min(340px,100%);margin:0 auto 32px} .cab-callouts-start li{grid-template-columns:34px 1fr;text-align:left} .cab-callouts-start li>div{order:2} .cab-callouts-start li>.component-number{order:1} } @media(max-width:700px){.cab-anatomy-stage{grid-template-columns:1fr} .cab-anatomy-title{font-size:24px} .cab-anatomy-visual{margin-top:30px} .cab-component-list li{grid-template-columns:28px 1fr;gap:12px;padding:16px 0} } /* Inlined CAB+VIA diagram. These rules lived in a