:root{
--paper:#f4f6f8;
--surface:#fff;
--ink:#101216;
--ink-soft:#2d333d;
--muted:#626a76;
--faint:#5f6874;
--line:#d8dde4;
--blue:#0a63ff;
--violet:#7348f5;
--blue-soft:#e8f0ff;
--dark:#0d1117;
--dark-surface:#151b24;
--site-header-height:80px;
--nav-glass-bg:radial-gradient(88% 180% at 8% -90%, #467ee612, transparent 72%), linear-gradient(180deg, #fbfcfdfc, #f5f8fafa);
--nav-glass-border:#2330451f;
--nav-glass-shadow:0 12px 32px #1f2b3e1a, inset 0 1px 0 #ffffffe0;
--nav-glass-filter:blur(20px) saturate(112%);
--nav-motion:.24s cubic-bezier(.22, 1, .36, 1);
--site-shell-max:1440px;
--site-shell-gutter:clamp(24px, 3.125vw, 48px);
--page-max:1360px;
--page-gutter:clamp(32px, 6.25vw, 96px);
--page:min(var(--page-max), calc(100vw - var(--page-gutter)));
--section-space:clamp(96px, 10vw, 148px);
--section-lead-space:clamp(56px, 6vw, 88px);
--section-lead-compact:clamp(48px, 5.4vw, 78px);
--hero-start-gap:clamp(60px, 6vh, 72px);
--page-hero-top:calc(var(--site-header-height) + var(--hero-start-gap));
--hero-bottom-home:clamp(64px, 5vw, 72px);
--hero-bottom-case:clamp(36px, 3vw, 48px);
--case-hero-row-gap:clamp(38px, 4vw, 58px);
--media-radius:28px
}
*,:before,:after{
box-sizing:border-box
}
html{
-webkit-text-size-adjust:100%;
tab-size:4;
scroll-behavior:auto;
background:var(--paper)
}
html[data-route-navigation=pending]{
cursor:progress
}
body{
color:var(--ink);
background:var(--paper);
text-rendering:optimizelegibility;
-webkit-font-smoothing:antialiased;
margin:0;
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,ui-sans-serif,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
line-height:1.6;
overflow-x:hidden
}
button,a,input,select,textarea{
color:inherit;
font:inherit;
letter-spacing:inherit
}
a{
text-decoration:none
}
button{
-webkit-appearance:none;
appearance:none;
background:0 0;
border:0;
border-radius:0
}
main,header,footer,nav,section,article,aside{
display:block
}
ol,ul,menu{
margin:0;
padding:0;
list-style:none
}
img,svg,video,canvas{
display:block
}
img,video{
max-width:100%;
height:auto
}
figure,blockquote,dl,dd,h1,h2,h3,h4,h5,h6,p{
margin:0
}
h1,h2,h3,h4,h5,h6{
font-size:inherit;
font-weight:inherit
}
h1,h2,h3,h4{
text-wrap:wrap
}
table{
border-color:inherit;
border-collapse:collapse;
text-indent:0
}
[hidden]{
display:none!important
}
.site[data-language=zh]{
line-break:strict;
overflow-wrap:normal;
word-break:normal;
word-break:auto-phrase
}
.site[data-language=zh] :where(h1,h2,h3,h4,blockquote){
text-wrap:balance
}
.site[data-language=zh] :where(p,li,dd,figcaption,.case-card-intro>span,.case-card-outcome>span,.home-section-heading>span,.home-evidence span,.approach-list small,.system-metrics span,.shortcut-impact-metrics span,.next-case-inner>span,.disclosure span,.case-card-copy small){
text-wrap:pretty
}
.site[data-language=zh] .case-card-outcome strong{
text-wrap:balance
}
.site[data-language=zh] .reflection-grid h3{
text-wrap:pretty
}
.profile-hero h1,.profile-heading h2,.principle-grid article h3,.leadership-model h3,.profile-cta h2,.approach-heading h2{
text-wrap:balance
}
section[id],div[id]{
scroll-margin-top:calc(var(--site-header-height) + 12px)
}
a:focus-visible{
outline:3px solid var(--blue);
outline-offset:4px
}
button:focus-visible{
outline:3px solid var(--blue);
outline-offset:4px
}
.case-navigator-mobile>summary:focus-visible{
outline:3px solid var(--blue);
outline-offset:4px
}
::selection{
color:#fff;
background:var(--blue)
}
.case-shell{
width:var(--page);
margin-inline:auto
}
.skip-link{
z-index:1200;
color:#fff;
background:var(--ink);
border-radius:8px;
padding:10px 14px;
transition:transform .16s;
position:fixed;
top:12px;
left:12px;
transform:translateY(-160%)
}
.skip-link:focus{
transform:translateY(0)
}
.route-transition-indicator{
z-index:1300;
pointer-events:none;
opacity:0;
height:3px;
transition:opacity .12s;
position:fixed;
inset:0 0 auto;
overflow:hidden
}
.route-transition-indicator[data-active=true]{
opacity:1
}
.route-transition-indicator span{
background:linear-gradient(90deg, var(--blue), var(--violet));
width:46%;
height:100%;
display:block;
transform:translate(-110%);
box-shadow:0 0 14px #0a63ff80
}
.route-transition-indicator[data-active=true] span{
animation:.98s cubic-bezier(.4,0,.2,1) infinite route-progress
}
@keyframes route-progress{
0%{
transform:translate(-110%)scaleX(.72)
}
56%{
transform:translate(105%)scaleX(1)
}
to{
transform:translate(245%)scaleX(.72)
}

}
a[data-pending=true]{
cursor:progress
}
.portfolio-nav a[data-pending=true],.next-case-cta[data-pending=true]{
color:var(--blue)
}
.case-card[data-pending=true]{
border-color:#0a63ff66;
box-shadow:0 24px 70px #1c438421
}
.reading-progress{
z-index:1100;
pointer-events:none;
height:3px;
position:fixed;
inset:0 0 auto
}
.reading-progress span{
background:linear-gradient(90deg, var(--blue), var(--violet));
transform-origin:0;
width:100%;
height:100%;
transition:transform 80ms linear;
display:block
}
.site-header{
z-index:1000;
width:min(var(--site-shell-max), calc(100vw - var(--site-shell-gutter)));
min-height:var(--site-header-height);
border:1px solid var(--nav-glass-border);
background:var(--nav-glass-bg);
box-shadow:var(--nav-glass-shadow);
-webkit-backdrop-filter:var(--nav-glass-filter);
backdrop-filter:var(--nav-glass-filter);
transition:transform var(--nav-motion);
will-change:transform;
border-top:0;
border-radius:0 0 18px 18px;
justify-content:space-between;
align-items:center;
gap:28px;
padding-inline:24px;
display:flex;
position:fixed;
top:0;
left:50%;
transform:translate(-50%)
}
.brand{
align-items:center;
gap:12px;
min-height:44px;
display:inline-flex
}
.brand-mark{
border:1px solid var(--ink);
letter-spacing:-.03em;
border-radius:50%;
flex:none;
place-items:center;
width:36px;
height:36px;
font-size:11px;
font-weight:760;
display:grid
}
.brand strong,.brand small{
display:block
}
.brand strong{
letter-spacing:-.02em;
font-size:14px;
font-weight:720
}
.brand small{
color:var(--muted);
letter-spacing:.02em;
margin-top:1px;
font-size:10px
}
.header-nav{
color:#333a45;
align-items:center;
gap:24px;
font-size:13px;
display:flex
}
.header-nav a,.language-toggle{
align-items:center;
min-height:44px;
display:inline-flex
}
.header-nav a{
transition:color .18s
}
.header-nav a:hover{
color:var(--blue)
}
.next-link{
border-bottom:1px solid;
gap:5px
}
.language-toggle{
cursor:pointer;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
min-width:44px;
color:var(--faint);
transform-origin:50%;
background:0 0;
gap:5px;
padding:0 2px;
transition:color .12s,opacity .12s,transform .12s
}
.language-toggle:active{
opacity:.58;
transform:scale(.96)
}
.language-toggle .active{
color:var(--ink);
font-weight:720
}
.eyebrow,.section-index,.decision-label{
color:var(--blue);
letter-spacing:.14em;
text-transform:uppercase;
margin-bottom:22px;
font-size:11px;
font-weight:760
}
.hero{
min-height:auto;
padding:var(--page-hero-top) 0 var(--hero-bottom-case);
align-items:center;
gap:var(--case-hero-row-gap) 72px;
grid-template-rows:auto auto;
grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);
display:grid
}
.hero-copy{
z-index:2;
position:relative
}
h1{
letter-spacing:-.055em;
max-width:760px;
margin-bottom:30px;
font-size:clamp(52px,5.4vw,82px);
font-weight:670;
line-height:1.055
}
.site[data-language=zh] h1{
letter-spacing:-.022em
}
.site[data-language=zh] h2,.site[data-language=zh] h3,.site[data-language=zh] h4{
letter-spacing:-.018em
}
.hero-summary{
color:#45505d;
max-width:700px;
margin-bottom:0;
font-size:clamp(17px,1.38vw,20px);
line-height:1.78
}
.hero-visual{
background:#101828;
border-radius:32px;
min-width:0;
height:clamp(560px,67vh,720px);
position:relative;
overflow:hidden;
box-shadow:0 30px 90px #1f2b4330
}
.hero-visual:after{
content:"";
pointer-events:none;
background:linear-gradient(#0000 66%,#070d187a);
position:absolute;
inset:0
}
.hero-visual img{
object-fit:cover;
object-position:53% center;
width:100%;
height:100%;
display:block;
transform:scale(1.015)
}
.hero-visual figcaption,.product-figure figcaption,.stage-figure figcaption,.visual-wall figcaption,.framework-diagram figcaption{
color:var(--muted);
font-size:12px;
line-height:1.6
}
.hero-visual figcaption{
z-index:2;
color:#ffffffd1;
letter-spacing:.08em;
text-transform:uppercase;
font-size:10px;
position:absolute;
bottom:20px;
left:24px;
right:24px
}
.project-facts{
border-block:1px solid var(--line);
grid-column:1/-1;
grid-template-columns:repeat(6,minmax(0,1fr));
padding:0;
display:grid
}
.project-facts div{
border-right:1px solid var(--line);
min-width:0;
min-height:122px;
padding:22px 18px 22px 0
}
.project-facts div:not(:first-child){
padding-left:18px
}
.project-facts div:last-child{
border-right:0
}
.project-facts dt{
color:var(--faint);
letter-spacing:.1em;
text-transform:uppercase;
margin-bottom:9px;
font-size:10px;
font-weight:700
}
.project-facts dd{
color:#303743;
font-size:13px;
line-height:1.6
}
.case-section,.outcome-section,.decision-intro{
padding-block:var(--section-space)
}
.section-heading h2,.outcome-copy h2,.decision-intro h2,.visual-copy h2{
letter-spacing:-.052em;
margin-bottom:30px;
font-size:clamp(42px,5vw,70px);
font-weight:670;
line-height:1.08
}
.section-intro{
max-width:810px;
color:var(--muted);
margin-bottom:0;
font-size:clamp(17px,1.4vw,20px);
line-height:1.78
}
.section-heading-grid{
grid-template-columns:2fr 8fr 2fr;
gap:24px;
display:grid
}
.section-heading-grid>.section-index{
grid-column:1
}
.section-heading-grid>div{
grid-column:2/4
}
.outcome-section{
border-top:1px solid var(--line);
grid-template-columns:minmax(0,.8fr) minmax(560px,1.2fr);
gap:62px 84px;
display:grid
}
.outcome-copy h2{
max-width:700px
}
.metric-grid{
border:1px solid var(--line);
background:var(--surface);
border-radius:24px;
grid-template-columns:repeat(3,minmax(0,1fr));
align-self:end;
display:grid;
overflow:hidden
}
.metric-grid article{
border-right:1px solid var(--line);
flex-direction:column;
min-height:318px;
padding:30px;
display:flex
}
.metric-grid article:last-child{
border-right:0
}
.metric-grid p{
color:var(--faint);
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:auto;
font-size:10px;
font-weight:700
}
.metric-grid strong{
letter-spacing:-.075em;
margin-bottom:15px;
font-size:clamp(52px,5vw,78px);
font-weight:730;
line-height:1;
display:block
}
.metric-grid span{
color:var(--muted);
font-size:12px;
line-height:1.55
}
.metric-grid .metric-primary{
color:#fff;
background:linear-gradient(150deg, var(--blue), var(--violet))
}
.metric-primary p,.metric-primary span{
color:#ffffffc7
}
.source-note{
border-left:2px solid var(--line);
max-width:980px;
color:var(--faint);
grid-column:1/-1;
margin:0;
padding-left:18px;
font-size:12px;
line-height:1.7
}
.challenge-section{
border-top:1px solid var(--line)
}
.subsection-label-row{
border-bottom:1px solid var(--line);
justify-content:space-between;
align-items:end;
gap:20px;
margin:96px 0 28px;
padding-bottom:16px;
display:flex
}
.subsection-label-row p{
margin-bottom:0;
font-size:20px;
font-weight:650
}
.subsection-label-row span{
color:var(--faint);
letter-spacing:.12em;
text-transform:uppercase;
font-size:10px
}
.evidence-grid,.lever-grid,.impact-grid,.leadership-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
display:grid
}
.evidence-grid article{
border-right:1px solid var(--line);
min-height:360px;
padding:34px 34px 38px 0
}
.evidence-grid article:not(:first-child){
padding-left:34px
}
.evidence-grid article:last-child{
border-right:0
}
.evidence-grid strong{
color:var(--blue);
letter-spacing:-.07em;
margin-bottom:74px;
font-size:clamp(54px,6vw,84px);
font-weight:720;
line-height:.95;
display:block
}
.evidence-grid h3{
letter-spacing:-.035em;
max-width:330px;
margin-bottom:18px;
font-size:24px;
line-height:1.24
}
.evidence-grid p,.lever-grid article>p,.impact-grid span,.leadership-grid span{
color:var(--muted);
margin-bottom:0;
font-size:15px;
line-height:1.72
}
.strategy-section{
padding-block:var(--section-space);
background:var(--surface)
}
.strategy-section blockquote{
max-width:1160px;
color:var(--blue);
letter-spacing:-.06em;
margin:100px 0 86px;
font-size:clamp(44px,6.2vw,90px);
font-weight:650;
line-height:1.08
}
.lever-grid{
border-top:1px solid var(--line)
}
.lever-grid article{
border-right:1px solid var(--line);
min-height:330px;
padding:30px 32px 32px 0
}
.lever-grid article:not(:first-child){
padding-left:32px
}
.lever-grid article:last-child{
border-right:0
}
.lever-meta{
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:76px;
display:flex
}
.lever-meta span{
border:1px solid var(--line);
width:34px;
height:34px;
color:var(--blue);
border-radius:50%;
place-items:center;
font-size:10px;
display:grid
}
.lever-meta p{
color:var(--faint);
letter-spacing:.1em;
text-transform:uppercase;
margin-bottom:0;
font-size:10px
}
.lever-grid h3{
letter-spacing:-.04em;
max-width:330px;
margin-bottom:18px;
font-size:27px;
line-height:1.2
}
.decision-intro{
grid-template-columns:2fr 10fr;
gap:24px;
display:grid
}
.decision-intro h2{
max-width:940px
}
.dark-section{
padding-block:var(--section-space);
color:#fff;
background:var(--dark)
}
.decision-grid{
grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);
align-items:start;
gap:84px;
display:grid
}
.dark-section .decision-label{
color:#7daaff
}
.decision-copy h3,.decision-header h3{
letter-spacing:-.052em;
margin-bottom:28px;
font-size:clamp(40px,4.8vw,68px);
font-weight:660;
line-height:1.08
}
.decision-lead{
color:#aeb7c4;
margin-bottom:52px;
font-size:18px;
line-height:1.75
}
.decision-notes{
grid-template-columns:1fr 1fr;
gap:28px;
display:grid
}
.decision-notes div{
border-top:1px solid #343d4b;
padding-top:18px
}
.decision-notes span{
color:#7daaff;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:12px;
font-size:10px;
font-weight:700;
display:block
}
.decision-notes p{
color:#aeb7c4;
margin-bottom:0;
font-size:13px;
line-height:1.72
}
.framework-diagram{
background:var(--dark-surface);
border:1px solid #2e3744;
border-radius:28px;
grid-template-columns:1fr 54px 1fr;
align-items:stretch;
min-width:0;
padding:24px;
display:grid
}
.framework-state{
border-radius:18px;
flex-direction:column;
min-width:0;
min-height:520px;
padding:34px;
display:flex
}
.framework-before{
background:#11161e;
border:1px solid #343d49
}
.framework-after{
background:linear-gradient(155deg,#0a63ff59,#7348f538);
border:1px solid #6799ff8c
}
.framework-state>span{
color:#8691a0;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:76px;
font-size:10px;
font-weight:700
}
.framework-after>span{
color:#a9c5ff
}
.framework-state h4{
letter-spacing:-.04em;
margin-bottom:44px;
font-size:28px;
line-height:1.18
}
.framework-state ul{
margin:auto 0 0;
padding:0;
list-style:none
}
.framework-state li{
color:#b7c0cc;
border-top:1px solid #343d49;
min-height:58px;
padding:16px 0;
font-size:13px
}
.framework-after li{
color:#fff;
border-color:#c5d8ff38
}
.framework-arrow{
color:#6e7a89;
place-items:center;
font-size:28px;
display:grid
}
.framework-diagram figcaption{
color:#7f8a99;
grid-column:1/-1;
margin-top:20px
}
.media-decision{
border-bottom:1px solid var(--line)
}
.decision-header{
grid-template-columns:2fr 10fr;
gap:0 24px;
display:grid
}
.decision-header .decision-label{
grid-column:1
}
.decision-header h3,.decision-body-columns{
grid-column:2
}
.decision-header h3{
max-width:1000px
}
.decision-body-columns{
grid-template-columns:1fr 1fr;
gap:54px;
max-width:1040px;
margin-top:14px;
display:grid
}
.decision-body-columns p{
color:var(--muted);
margin-bottom:0;
font-size:16px;
line-height:1.76
}
.product-figure{
margin-top:var(--section-lead-compact)
}
.product-figure img{
aspect-ratio:16/9;
object-fit:cover;
border-radius:var(--media-radius);
background:#e8ebf0;
border:1px solid #10121614;
width:100%;
display:block;
box-shadow:0 24px 70px #2230441a
}
.product-figure figcaption,.stage-figure figcaption{
margin-top:16px
}
.resource-decision .product-figure img{
object-position:center
}
.media-decision .product-figure img{
aspect-ratio:auto;
object-fit:contain;
height:auto
}
.validation-section{
background:var(--blue-soft)
}
.validation-content{
margin-top:var(--section-lead-space);
grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr);
gap:48px;
display:grid
}
.path-comparison{
background:#ffffffb3;
border:1px solid #0a63ff24;
border-radius:24px;
overflow:hidden
}
.path-row{
grid-template-columns:120px 1fr;
align-items:center;
gap:22px;
min-height:190px;
padding:28px;
display:grid
}
.path-row+.path-row{
border-top:1px solid #0a63ff24
}
.path-row>p{
color:var(--faint);
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:0;
font-size:11px;
font-weight:700
}
.path-row ol{
grid-auto-columns:1fr;
grid-auto-flow:column;
margin:0;
padding:0;
list-style:none;
display:grid
}
.path-row li{
background:#fff;
border:1px solid #1012161f;
border-radius:14px;
min-height:96px;
padding:22px 34px 18px 18px;
font-size:14px;
position:relative
}
.path-row li+li{
margin-left:30px
}
.path-row li+li:before{
content:"→";
color:#8b95a3;
position:absolute;
top:50%;
right:calc(100% + 8px);
transform:translateY(-50%)
}
.path-row li span{
color:var(--faint);
margin-bottom:16px;
font-size:10px;
display:block
}
.path-after li{
background:var(--blue);
color:#fff;
border-color:#0a63ff47
}
.path-after li span{
color:#ffffffa3
}
.path-after li+li:before{
color:var(--blue)
}
.validation-metrics{
background:#fff;
border:1px solid #0a63ff24;
border-radius:24px;
overflow:hidden
}
.validation-metrics article{
border-bottom:1px solid var(--line);
justify-content:space-between;
align-items:center;
gap:24px;
min-height:126px;
padding:24px 28px;
display:flex
}
.validation-metrics article:last-child{
border-bottom:0
}
.validation-metrics strong{
color:var(--blue);
letter-spacing:-.065em;
font-size:clamp(36px,4.2vw,62px);
font-weight:720;
line-height:1
}
.validation-metrics span{
max-width:150px;
color:var(--muted);
text-align:right;
font-size:12px
}
.validation-section .source-note{
border-color:#0a63ff47;
margin-top:32px
}
.visual-section{
padding-top:var(--section-space);
color:#fff;
background:var(--dark)
}
.visual-copy{
grid-template-columns:2fr 7fr 3fr;
gap:24px;
padding-bottom:80px;
display:grid
}
.visual-copy .section-index{
color:#7daaff;
grid-column:1
}
.visual-copy h2{
grid-column:2;
margin-bottom:0
}
.visual-copy>p:last-child{
color:#aeb7c4;
grid-column:3;
align-self:end;
margin-bottom:0;
font-size:15px;
line-height:1.72
}
.visual-wall{
background:#0f1725;
position:relative;
overflow:hidden
}
.visual-wall img{
object-fit:cover;
width:100%;
min-height:min(70vw,880px);
display:block
}
.visual-wall figcaption{
color:#ffffffd1;
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
background:#05091099;
border-radius:8px;
padding:8px 12px;
position:absolute;
bottom:22px;
right:max(24px,50vw - 680px)
}
.impact-section{
border-bottom:1px solid var(--line)
}
.stage-figure{
margin:84px 0 68px
}
.stage-figure img{
object-fit:cover;
border-radius:var(--media-radius);
background:#0c0e13;
width:100%;
max-height:570px;
display:block
}
.impact-grid,.leadership-grid{
border-top:1px solid var(--line)
}
.impact-grid article,.leadership-grid article{
border-right:1px solid var(--line);
min-height:280px;
padding:28px 32px 32px 0
}
.impact-grid article:not(:first-child),.leadership-grid article:not(:first-child){
padding-left:32px
}
.impact-grid article:last-child,.leadership-grid article:last-child{
border-right:0
}
.impact-grid p,.leadership-grid p{
color:var(--blue);
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:72px;
font-size:10px;
font-weight:700
}
.impact-grid h3,.leadership-grid h3{
letter-spacing:-.04em;
margin-bottom:16px;
font-size:28px;
line-height:1.22
}
.leadership-section{
background:var(--surface)
}
.leadership-grid{
margin-top:var(--section-lead-space)
}
.reflection-grid{
margin-top:var(--section-lead-space);
grid-template-columns:1fr 1fr;
gap:24px;
display:grid
}
.reflection-grid article{
background:var(--paper);
border-radius:24px;
flex-direction:column;
justify-content:space-between;
min-height:420px;
padding:42px;
display:flex
}
.reflection-grid article:last-child{
color:#fff;
background:var(--dark)
}
.reflection-grid p{
color:var(--blue);
letter-spacing:.12em;
text-transform:uppercase;
font-size:10px;
font-weight:700
}
.reflection-grid h3{
letter-spacing:-.035em;
max-width:560px;
margin:auto 0 0;
font-size:clamp(25px,2.65vw,39px);
font-weight:570;
line-height:1.35
}
.disclosure{
border-block:1px solid var(--line);
grid-template-columns:2fr 10fr;
gap:24px;
margin-block:48px;
padding:24px 0;
display:grid
}
.disclosure p{
color:var(--faint);
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:0;
font-size:10px;
font-weight:700
}
.disclosure span{
max-width:980px;
color:var(--muted);
font-size:12px;
line-height:1.75
}
.next-case{
padding-block:var(--section-space);
color:#fff;
background:radial-gradient(circle at 84% 28%, #7348f56b, transparent 32%), radial-gradient(circle at 18% 95%, #0a63ff73, transparent 36%), var(--dark)
}
.next-case-inner>p{
color:#a9c5ff;
letter-spacing:.13em;
text-transform:uppercase;
margin-bottom:68px;
font-size:11px;
font-weight:700
}
.next-case h2{
letter-spacing:-.06em;
max-width:1040px;
margin-bottom:38px;
font-size:clamp(46px,6.3vw,90px);
font-weight:640;
line-height:1.07
}
.next-case-inner>span{
color:#aeb7c4;
max-width:1040px;
font-size:17px;
line-height:1.75;
display:block
}
.next-case-cta{
color:#7f8a99;
border-top:1px solid #384353;
justify-content:space-between;
align-items:center;
margin-top:76px;
padding-top:22px;
font-size:13px;
display:flex
}
.site-footer{
min-height:150px;
color:var(--muted);
justify-content:space-between;
align-items:center;
gap:20px;
font-size:12px;
display:flex
}
.site-footer p{
margin-bottom:0
}
.site-footer a{
align-items:center;
min-height:44px;
display:inline-flex
}
@media (max-width:1180px){
.hero{
grid-template-columns:1fr;
min-height:auto
}
.hero-copy{
max-width:830px
}
.hero-visual{
height:min(72vw,700px)
}
.project-facts{
grid-template-columns:repeat(3,minmax(0,1fr))
}
.project-facts div:nth-child(3n+1){
padding-left:0
}
.project-facts div:nth-child(3n){
border-right:0
}
.project-facts div:nth-child(n+4){
border-top:1px solid var(--line)
}
.outcome-section,.decision-grid,.validation-content{
grid-template-columns:1fr
}
.outcome-copy{
max-width:820px
}
.metric-grid{
max-width:900px
}
.decision-grid{
gap:64px
}
.framework-diagram{
max-width:900px
}
.validation-metrics{
grid-template-columns:repeat(3,1fr);
display:grid
}
.validation-metrics article{
border-right:1px solid var(--line);
border-bottom:0;
flex-direction:column;
justify-content:space-between;
align-items:flex-start;
min-height:180px
}
.validation-metrics article:last-child{
border-right:0
}
.validation-metrics span{
text-align:left
}
.visual-copy{
grid-template-columns:2fr 10fr
}
.visual-copy>p:last-child{
grid-column:2;
max-width:740px;
margin-top:24px
}

}
@media (max-width:840px){
:root{
--site-header-height:72px;
--section-space:88px;
--media-radius:20px
}
.site-header{
min-height:72px;
padding-inline:16px
}
.header-nav{
gap:16px
}
.header-nav>a:not(.next-link){
display:none
}
.section-heading-grid,.decision-intro,.decision-header,.visual-copy,.disclosure{
grid-template-columns:1fr
}
.section-heading-grid>.section-index,.section-heading-grid>div,.decision-header .decision-label,.decision-header h3,.decision-body-columns,.visual-copy .section-index,.visual-copy h2,.visual-copy>p:last-child,.disclosure p,.disclosure span{
grid-column:1
}
.evidence-grid,.lever-grid,.impact-grid,.leadership-grid{
grid-template-columns:1fr
}
.evidence-grid article,.evidence-grid article:not(:first-child),.lever-grid article,.lever-grid article:not(:first-child),.impact-grid article,.impact-grid article:not(:first-child),.leadership-grid article,.leadership-grid article:not(:first-child){
border-right:0;
border-bottom:1px solid var(--line);
min-height:0;
padding:28px 0 34px
}
.evidence-grid article:last-child,.lever-grid article:last-child,.impact-grid article:last-child,.leadership-grid article:last-child{
border-bottom:0
}
.evidence-grid strong,.lever-meta,.impact-grid p,.leadership-grid p{
margin-bottom:36px
}
.strategy-section blockquote{
margin:72px 0 60px
}
.decision-body-columns{
grid-template-columns:1fr;
gap:22px
}
.product-figure{
margin-top:48px
}
.framework-diagram{
grid-template-columns:1fr
}
.framework-state{
min-height:390px
}
.framework-arrow{
height:54px;
transform:rotate(90deg)
}
.framework-diagram figcaption{
grid-column:1
}
.path-row,.reflection-grid{
grid-template-columns:1fr
}
.reflection-grid article{
min-height:330px
}
.visual-copy>p:last-child{
margin-top:0
}

}
@media (max-width:600px){
:root{
--site-header-height:68px;
--section-space:76px
}
.brand-copy small,.next-link{
display:none!important
}
.site-header{
min-height:68px
}
h1{
font-size:clamp(42px,12.7vw,58px)
}
.hero-summary{
font-size:16px
}
.hero-visual{
border-radius:22px;
height:120vw;
max-height:600px
}
.hero-visual img{
object-position:45% center
}
.project-facts{
grid-template-columns:1fr 1fr
}
.project-facts div,.project-facts div:not(:first-child){
border-top:1px solid var(--line);
border-right:1px solid var(--line);
min-height:112px;
padding:18px 14px 18px 0
}
.project-facts div:nth-child(2n){
border-right:0;
padding-left:14px
}
.project-facts div:nth-child(2),.project-facts div:first-child{
border-top:0
}
.project-facts dd{
font-size:12px
}
.section-heading h2,.outcome-copy h2,.decision-intro h2,.visual-copy h2{
font-size:clamp(38px,11vw,52px)
}
.outcome-section{
gap:48px
}
.metric-grid{
grid-template-columns:1fr
}
.metric-grid article{
border-right:0;
border-bottom:1px solid var(--line);
min-height:220px
}
.metric-grid article:last-child{
border-bottom:0
}
.subsection-label-row{
margin-top:62px
}
.subsection-label-row span{
display:none
}
.strategy-section blockquote{
font-size:clamp(39px,11.6vw,58px)
}
.decision-copy h3,.decision-header h3{
font-size:clamp(37px,10.8vw,52px)
}
.decision-notes{
grid-template-columns:1fr
}
.framework-diagram{
border-radius:20px;
padding:14px
}
.framework-state{
min-height:350px;
padding:26px
}
.framework-state>span{
margin-bottom:48px
}
.product-figure img{
aspect-ratio:4/3
}
.path-row{
padding:22px
}
.path-row ol{
grid-auto-columns:auto;
grid-auto-flow:row;
gap:28px
}
.path-row li+li{
margin-left:0
}
.path-row li+li:before{
content:"↓";
inset:auto auto calc(100% + 3px) 50%;
transform:translate(-50%)
}
.validation-metrics{
grid-template-columns:1fr
}
.validation-metrics article{
border-right:0;
border-bottom:1px solid var(--line);
flex-direction:row;
align-items:center;
min-height:116px
}
.validation-metrics span{
text-align:right
}
.visual-copy{
padding-bottom:58px
}
.visual-wall img{
width:178%;
max-width:none;
min-height:122vw;
margin-left:-38%
}
.visual-wall figcaption{
bottom:16px;
left:16px;
right:16px
}
.stage-figure{
margin:58px 0 44px
}
.stage-figure img{
min-height:250px
}
.leadership-grid,.reflection-grid{
margin-top:64px
}
.reflection-grid article{
min-height:300px;
padding:30px
}
.next-case-inner>p{
margin-bottom:52px
}
.next-case h2{
font-size:clamp(42px,12vw,58px)
}
.site-footer{
flex-direction:column;
justify-content:center;
align-items:flex-start;
min-height:130px
}

}
@media (prefers-reduced-motion:reduce){
html{
scroll-behavior:auto
}
.route-transition-indicator span{
width:100%;
transform:none;
animation:none!important
}
*,:before,:after{
transition-duration:.01ms!important;
animation-duration:.01ms!important;
animation-iteration-count:1!important
}

}
.portfolio-header{
background:var(--nav-glass-bg)
}
.portfolio-header[data-scroll-state=hidden]{
pointer-events:none;
transform:translate(-50%,calc(-100% - 8px))
}
.portfolio-header[data-scroll-state=hidden]:focus-within{
pointer-events:auto;
transform:translate(-50%)
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.site-header,.case-navigator-inner,.case-navigator-links{
background:#eef2f6
}

}
.case-main{
--case-header-stack:var(--site-header-height);
--case-nav-height:58px;
--case-anchor-gap:clamp(16px, 2vw, 26px);
--case-anchor-offset:calc(var(--case-header-stack) + 8px + var(--case-nav-height) + var(--case-anchor-gap))
}
.case-main section[id]:not(#top),.case-main div[id]{
scroll-margin-top:var(--case-anchor-offset)
}
.case-navigator{
z-index:900;
top:var(--site-header-height);
pointer-events:none;
transition:top var(--nav-motion);
padding-top:8px;
position:sticky
}
.portfolio-header[data-scroll-state=hidden]~.case-main .case-navigator{
top:max(0px, env(safe-area-inset-top))
}
.portfolio-header[data-scroll-state=hidden]~.case-main{
--case-header-stack:max(0px, env(safe-area-inset-top))
}
.case-main>.case-navigator+.case-shell{
border-top:0
}
.case-navigator-inner{
width:var(--page);
border:1px solid var(--nav-glass-border);
background:var(--nav-glass-bg);
min-height:58px;
box-shadow:var(--nav-glass-shadow);
-webkit-backdrop-filter:var(--nav-glass-filter);
backdrop-filter:var(--nav-glass-filter);
pointer-events:auto;
border-radius:17px;
grid-template-columns:auto minmax(0,1fr);
align-items:stretch;
margin-inline:auto;
padding:6px;
display:grid
}
.case-navigator-label{
min-width:102px;
color:var(--faint);
letter-spacing:.1em;
text-transform:uppercase;
border-right:1px solid #10121614;
align-items:center;
margin-right:4px;
padding-inline:14px 18px;
font-size:9px;
font-weight:720;
display:flex
}
.case-navigator-mobile{
display:none
}
.case-navigator-links{
grid-template-columns:repeat(var(--case-nav-count,7), minmax(0, 1fr));
gap:3px;
min-width:0;
display:grid
}
.case-navigator-links a{
min-width:0;
min-height:44px;
color:var(--muted);
text-align:center;
border:1px solid #0000;
border-radius:11px;
justify-content:center;
align-items:center;
gap:7px;
padding:8px 9px;
font-size:11px;
font-weight:620;
line-height:1.3;
transition:color .16s,background-color .16s,border-color .16s,box-shadow .16s;
display:flex;
position:relative
}
.case-navigator-links a:hover{
color:var(--ink);
background:#ffffffa3
}
.case-navigator-links a[aria-current=location]{
color:var(--blue)
}
.case-navigator-links small{
color:var(--faint);
letter-spacing:.04em;
flex:none;
font-size:9px;
font-weight:720
}
.case-navigator-links a[aria-current=location] small{
color:inherit
}
.portfolio-nav a{
position:relative
}
.portfolio-nav a:after{
content:"";
transform-origin:100%;
background:currentColor;
height:1px;
transition:transform .18s;
position:absolute;
bottom:6px;
left:0;
right:0;
transform:scaleX(0)
}
.portfolio-nav a:hover:after,.portfolio-nav a.is-active:after{
transform-origin:0;
transform:scaleX(1)
}
.portfolio-footer{
border-top:1px solid var(--line);
min-height:190px
}
.portfolio-footer>div:first-child strong{
color:var(--ink);
margin-bottom:7px;
font-size:15px;
display:block
}
.portfolio-footer p{
color:var(--faint);
letter-spacing:.08em;
text-transform:uppercase;
margin:0;
font-size:10px
}
.footer-links{
align-items:center;
gap:26px;
display:flex
}
.home-hero{
min-height:auto;
padding:var(--page-hero-top) 0 var(--hero-bottom-home);
grid-template-columns:minmax(0,.96fr) minmax(520px,1.04fr);
align-items:center;
gap:70px;
display:grid
}
.home-hero-copy h1{
max-width:800px;
margin-bottom:32px;
font-size:clamp(58px,6.2vw,94px)
}
.home-hero-copy>p:not(.eyebrow){
max-width:720px;
color:var(--muted);
margin-bottom:0;
font-size:clamp(17px,1.4vw,20px);
line-height:1.82
}
.home-actions{
flex-wrap:wrap;
gap:12px;
margin-top:44px;
display:flex
}
.button-primary,.button-secondary{
border-radius:999px;
justify-content:space-between;
align-items:center;
gap:34px;
min-height:54px;
padding:0 22px;
font-size:13px;
font-weight:650;
transition:transform .18s,background .18s,color .18s;
display:inline-flex
}
.button-primary{
color:#fff;
background:var(--ink)
}
.button-secondary{
border:1px solid var(--line);
background:#ffffff73
}
.button-primary:hover,.button-secondary:hover{
transform:translateY(-2px)
}
.button-secondary:hover{
color:var(--blue);
background:var(--surface)
}
.home-hero-visual{
background:radial-gradient(circle at 20% 18%,#657eff38,#0000 34%),linear-gradient(150deg,#e8ecf3,#d8dee9);
border:1px solid #10121614;
border-radius:34px;
min-width:0;
height:min(70vh,720px);
min-height:590px;
position:relative;
overflow:hidden;
box-shadow:0 34px 100px #1f2b4326
}
.home-hero-visual:before{
content:"";
opacity:.38;
background-image:linear-gradient(#10121614 1px,#0000 1px),linear-gradient(90deg,#10121614 1px,#0000 1px);
background-size:52px 52px;
position:absolute;
inset:0
}
.hero-tile{
border:1px solid #ffffffa6;
border-radius:22px;
position:absolute;
overflow:hidden;
box-shadow:0 24px 58px #1f2a3b33
}
.hero-tile span{
z-index:2;
color:#ffffffe6;
letter-spacing:.12em;
text-transform:uppercase;
font-size:9px;
font-weight:700;
position:absolute;
bottom:14px;
left:16px;
right:16px
}
.hero-tile-coloros{
inset:9% 23% 25% 7%;
transform:rotate(-4deg)
}
.hero-tile-coloros img{
object-fit:cover;
object-position:24% center
}
.hero-tile-coloros:after,.hero-tile-shortcut:after{
content:"";
background:linear-gradient(#0000,#04080fb3);
position:absolute;
inset:55% 0 0
}
.hero-tile-n3{
z-index:3;
background:linear-gradient(145deg,#eadad1,#c6a7a0);
width:45%;
height:56%;
bottom:7%;
right:3%;
transform:rotate(4deg)
}
.hero-tile-n3 img{
object-fit:contain;
width:115%;
max-width:none;
height:100%;
margin-left:-8%
}
.hero-tile-shortcut{
z-index:4;
background:#0c0e12;
width:26%;
height:48%;
top:8%;
right:4%;
transform:rotate(1.5deg)
}
.hero-tile-shortcut img{
object-fit:cover;
object-position:center 42%;
width:100%;
height:100%
}
.home-evidence{
border-block:1px solid var(--line);
grid-template-columns:repeat(4,1fr);
display:grid
}
.home-evidence article{
border-right:1px solid var(--line);
flex-direction:column;
justify-content:space-between;
min-height:170px;
padding:28px 28px 28px 0;
display:flex
}
.home-evidence article:not(:first-child){
padding-left:28px
}
.home-evidence article:last-child{
border-right:0
}
.home-evidence strong{
letter-spacing:-.06em;
font-size:clamp(32px,3vw,48px);
font-weight:680;
line-height:1
}
.home-evidence span{
max-width:200px;
color:var(--muted);
font-size:12px;
line-height:1.55
}
.home-work{
padding-block:var(--section-space)
}
.home-section-heading{
grid-template-columns:2fr 7fr 3fr;
gap:24px;
display:grid
}
.home-section-heading .section-index{
grid-column:1
}
.home-section-heading h2{
letter-spacing:-.055em;
grid-column:2;
margin-bottom:0;
font-size:clamp(44px,5.4vw,76px);
font-weight:660;
line-height:1.08
}
.home-section-heading>span{
color:var(--muted);
grid-column:3;
align-self:end;
font-size:14px;
line-height:1.72
}
.case-card-list{
margin-top:var(--section-lead-space);
grid-template-columns:1fr 1fr;
gap:26px;
display:grid
}
.case-card{
border:1px solid var(--line);
background:var(--surface);
border-radius:28px;
min-width:0;
transition:transform .22s,box-shadow .22s;
overflow:hidden
}
.case-card:hover{
transform:translateY(-5px);
box-shadow:0 28px 80px #1c26351c
}
.case-card-1{
grid-column:1/-1;
grid-template-columns:1.25fr .75fr;
display:grid
}
.case-card-media{
background:#e9edf3;
min-height:520px;
position:relative;
overflow:hidden
}
.case-card-1 .case-card-media{
min-height:610px
}
.case-card-2 .case-card-media,.case-card-3 .case-card-media{
height:520px;
min-height:0
}
@media (min-width:901px){
.case-card-2,.case-card-3{
grid-template-rows:auto minmax(0,1fr);
display:grid
}
.case-card-2 .case-card-copy,.case-card-3 .case-card-copy{
grid-template-rows:minmax(0,1fr) minmax(132px,auto) minmax(98px,auto);
display:grid
}
.case-card-2 .case-card-footer,.case-card-3 .case-card-footer{
margin-top:0
}

}
.case-card-1 .case-card-media>img{
object-fit:cover
}
.case-card-2 .case-card-media{
background:radial-gradient(circle at 50% 20%,#ffffffd9,#0000 40%),linear-gradient(145deg,#e4d3c9,#bda19c)
}
.case-card-3 .case-card-media{
background:#0c0e12
}
.case-card-3 .case-card-media>img{
object-fit:contain;
object-position:center 43%;
width:73%;
height:100%;
margin:auto;
display:block
}
.n3-card-products{
height:100%;
position:absolute;
inset:0
}
.n3-card-products img{
object-fit:contain;
width:70%;
height:86%;
position:absolute
}
.n3-card-products img:first-child{
bottom:-6%;
left:-4%;
transform:rotate(-8deg)
}
.n3-card-products img:last-child{
bottom:-1%;
right:-5%;
transform:rotate(8deg)
}
.case-number{
z-index:3;
color:#fff;
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
background:#1012163d;
border:1px solid #ffffffad;
border-radius:50%;
place-items:center;
width:40px;
height:40px;
font-size:10px;
display:grid;
position:absolute;
top:24px;
left:26px
}
.case-card-copy{
flex-direction:column;
min-height:380px;
padding:36px;
display:flex
}
.case-card-1 .case-card-copy{
min-height:610px;
padding:44px
}
.case-card-intro>p{
color:var(--blue);
letter-spacing:.1em;
text-transform:uppercase;
margin-bottom:34px;
font-size:10px;
font-weight:720
}
.case-card-copy h3{
letter-spacing:-.05em;
margin-bottom:22px;
font-size:clamp(30px,3.2vw,48px);
line-height:1.12
}
.case-card-intro>span{
color:var(--muted);
font-size:14px;
line-height:1.72;
display:block
}
.case-card-outcome{
border-top:1px solid var(--line);
margin-top:34px;
padding-top:24px
}
.case-card-copy .case-card-outcome small{
color:var(--blue);
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:10px;
font-size:11px;
font-weight:720;
display:block
}
.case-card-outcome strong{
letter-spacing:-.025em;
max-width:620px;
font-size:clamp(21px,2vw,29px);
font-weight:660;
line-height:1.32;
display:block
}
.case-card-outcome>span{
max-width:620px;
color:var(--muted);
margin-top:10px;
font-size:12px;
line-height:1.65;
display:block
}
.case-card-footer{
border-top:1px solid var(--line);
justify-content:space-between;
align-items:end;
gap:20px;
margin-top:auto;
padding-top:48px;
display:flex
}
.case-card-copy small{
max-width:260px;
color:var(--faint);
font-size:10px;
line-height:1.6
}
.case-card-copy b{
flex:none;
font-size:12px
}
.home-approach{
padding-block:var(--section-space);
color:#fff;
background:var(--dark)
}
.approach-heading .section-index{
color:#7daaff
}
.approach-heading>span{
color:#aeb7c4
}
.approach-heading h2{
font-size:clamp(44px,5vw,72px)
}
.approach-list{
margin-top:var(--section-lead-compact);
border-top:1px solid #343d49;
grid-template-columns:repeat(4,minmax(0,1fr));
padding:0;
list-style:none;
display:grid
}
.approach-list li{
border-right:1px solid #343d49;
flex-direction:column;
min-width:0;
min-height:390px;
padding:30px 28px 32px 0;
display:flex
}
.approach-list li:not(:first-child){
padding-left:28px
}
.approach-list li:last-child{
border-right:0
}
.approach-list span{
color:#7daaff;
margin-bottom:62px;
font-size:11px;
display:block
}
.approach-list h3{
letter-spacing:-.04em;
margin-bottom:18px;
font-size:29px
}
.approach-list p{
color:#aeb7c4;
margin-bottom:0;
font-size:14px;
line-height:1.75
}
.approach-list small{
color:#7daaff;
margin-top:auto;
padding-top:30px;
font-size:11px;
line-height:1.65
}
.approach-return{
color:#7f8996;
align-items:center;
gap:16px;
padding-top:18px;
font-size:11px;
display:flex
}
.approach-return:before{
content:"↺";
color:#7daaff;
flex:none;
font-size:18px;
line-height:1
}
.approach-return:after{
content:"";
background:linear-gradient(90deg,#7daaff,#343d49);
flex:1;
height:1px
}
.profile-hero{
padding:var(--page-hero-top) 0 var(--section-space)
}
.profile-hero h1{
max-width:1280px;
margin-bottom:90px;
font-size:clamp(58px,7.1vw,102px)
}
.profile-intro{
grid-template-columns:1fr 1fr;
gap:70px;
display:grid
}
.profile-intro>p{
max-width:650px;
color:var(--muted);
margin:0;
font-size:18px;
line-height:1.85
}
.profile-intro blockquote{
border-left:2px solid var(--blue);
color:var(--ink);
padding-left:30px;
font-size:clamp(22px,2.3vw,32px);
font-weight:530;
line-height:1.55
}
.profile-section{
padding-block:var(--section-space);
border-top:1px solid var(--line)
}
.profile-heading{
grid-template-columns:2fr 10fr;
gap:24px;
display:grid
}
.profile-heading h2{
letter-spacing:-.055em;
margin-bottom:0;
font-size:clamp(44px,5.3vw,76px);
font-weight:650;
line-height:1.08
}
.principle-grid{
margin-top:var(--section-lead-space);
grid-template-columns:repeat(3,1fr);
display:grid
}
.principle-grid article{
border-top:1px solid var(--line);
border-right:1px solid var(--line);
flex-direction:column;
min-height:440px;
padding:28px 34px 38px 0;
display:flex
}
.principle-grid article:not(:first-child){
padding-left:34px
}
.principle-grid article:last-child{
border-right:0
}
.principle-grid article>div{
color:var(--blue);
letter-spacing:.12em;
text-transform:uppercase;
justify-content:space-between;
font-size:10px;
display:flex
}
.principle-grid article h3{
letter-spacing:-.04em;
text-wrap:balance;
max-width:none;
margin:auto 0 18px;
font-size:30px;
line-height:1.18
}
.principle-grid article p{
color:var(--muted);
margin:0;
font-size:14px;
line-height:1.75
}
@media (min-width:901px){
.principle-grid article h3{
min-block-size:2.36em
}
.principle-grid article p{
min-block-size:7em
}

}
.leadership-profile{
color:#fff;
background:var(--dark)
}
.leadership-profile .section-index{
color:#7daaff
}
.leadership-model{
margin-top:var(--section-lead-space);
grid-template-columns:repeat(2,1fr);
gap:18px;
display:grid
}
.leadership-model article{
background:#141a22;
border:1px solid #303947;
border-radius:22px;
min-height:330px;
padding:34px
}
.leadership-model span{
color:#7daaff;
margin-bottom:88px;
font-size:10px;
display:block
}
.leadership-model h3{
letter-spacing:-.04em;
text-wrap:balance;
margin-bottom:16px;
font-size:28px
}
.leadership-model p{
color:#aeb7c4;
max-width:none;
margin:0;
font-size:14px;
line-height:1.75
}
.profile-background{
margin-top:var(--section-lead-space);
grid-template-columns:7fr 5fr;
gap:18px;
display:grid
}
.profile-background article{
border:1px solid var(--line);
background:#fff;
border-radius:22px;
flex-direction:column;
min-height:330px;
padding:34px;
display:flex
}
.profile-background article>span{
color:var(--blue);
letter-spacing:.12em;
text-transform:uppercase;
font-size:10px
}
.profile-background h3{
letter-spacing:-.04em;
text-wrap:balance;
max-width:620px;
margin:auto 0 18px;
font-size:30px
}
.profile-background p{
max-width:700px;
color:var(--muted);
margin:0;
font-size:14px;
line-height:1.75
}
.profile-cta{
margin-bottom:var(--section-space);
color:#fff;
background:linear-gradient(140deg,#0d1117,#172444);
border-radius:28px;
padding:58px
}
.profile-cta h2{
letter-spacing:-.05em;
max-width:980px;
margin-bottom:66px;
font-size:clamp(38px,4.4vw,62px);
line-height:1.12
}
.profile-cta>div{
flex-wrap:wrap;
gap:12px;
display:flex
}
.profile-cta a{
color:#dce6f7;
border:1px solid #485467;
border-radius:999px;
align-items:center;
min-height:50px;
padding:0 18px;
font-size:12px;
display:inline-flex
}
.system-case-hero{
padding:var(--page-hero-top) 0 var(--hero-bottom-case);
gap:var(--case-hero-row-gap) 72px;
grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);
align-items:center;
display:grid
}
.page-hero{
padding-top:var(--page-hero-top);
align-content:start
}
.system-case-copy h1{
max-width:760px;
margin-bottom:30px;
font-size:clamp(52px,5.6vw,84px)
}
.system-case-copy>p:last-child{
max-width:700px;
color:var(--muted);
margin:0;
font-size:17px;
line-height:1.8
}
.system-case-hero>.project-facts{
grid-column:1/-1
}
.case-media{
min-width:0
}
.case-media>img{
border-radius:var(--media-radius);
width:100%;
display:block
}
.case-media figcaption{
color:var(--muted);
margin-top:15px;
font-size:11px;
line-height:1.65
}
.system-outcome,.system-challenge,.system-impact{
border-top:1px solid var(--line)
}
.system-metrics{
margin-top:var(--section-lead-compact);
border-block:1px solid var(--line);
grid-template-columns:repeat(3,1fr);
display:grid
}
.system-metrics article{
border-right:1px solid var(--line);
flex-direction:column;
justify-content:space-between;
min-height:270px;
padding:30px 34px 34px 0;
display:flex
}
.system-metrics article:not(:first-child){
padding-left:34px
}
.system-metrics article:last-child{
border-right:0
}
.system-metrics strong{
color:var(--blue);
letter-spacing:-.07em;
font-size:clamp(54px,6vw,86px);
line-height:1
}
.system-metrics span{
max-width:260px;
color:var(--muted);
font-size:13px;
line-height:1.6
}
.system-outcome .source-note,.system-impact .source-note{
margin-top:28px
}
.system-problem-grid{
margin-top:var(--section-lead-space);
grid-template-columns:repeat(3,1fr);
display:grid
}
.system-problem-grid article{
border-top:1px solid var(--line);
border-right:1px solid var(--line);
min-height:360px;
padding:28px 34px 36px 0
}
.system-problem-grid article:not(:first-child){
padding-left:34px
}
.system-problem-grid article:last-child{
border-right:0
}
.system-problem-grid article>span{
color:var(--blue);
margin-bottom:92px;
font-size:11px;
display:block
}
.system-problem-grid h3{
letter-spacing:-.04em;
margin-bottom:17px;
font-size:28px
}
.system-problem-grid p,.principle-rail p,.system-impact-grid p,.contribution-grid li,.reflection-principles p{
color:var(--muted);
margin:0;
font-size:14px;
line-height:1.72
}
.system-principles{
background:var(--surface)
}
.principle-rail{
margin-top:var(--section-lead-space);
border-top:1px solid var(--line);
grid-template-columns:repeat(3,minmax(0,1fr));
display:grid
}
.principle-rail article{
border-right:1px solid var(--line);
min-height:330px;
padding:28px 26px 34px 0
}
.principle-rail article:not(:first-child){
padding-left:26px
}
.principle-rail article:last-child{
border-right:0
}
.principle-rail article>span{
color:var(--blue);
margin-bottom:80px;
font-size:10px;
display:block
}
.principle-rail h3{
letter-spacing:-.035em;
margin-bottom:16px;
font-size:24px
}
.system-decisions-title,.shortcut-iterations-title{
padding-block:var(--section-space);
grid-template-columns:2fr 10fr;
gap:24px;
display:grid
}
.system-decisions-title h2,.shortcut-iterations-title h2{
letter-spacing:-.055em;
max-width:1040px;
margin:0;
font-size:clamp(44px,5.3vw,76px);
line-height:1.08
}
.split-decision{
grid-template-columns:minmax(0,.84fr) minmax(560px,1.16fr);
align-items:start;
gap:76px;
display:grid
}
.system-decision-copy h2{
letter-spacing:-.052em;
margin-bottom:28px;
font-size:clamp(40px,4.7vw,67px);
line-height:1.08
}
.system-decision-copy>p:not(.decision-label),.copy-columns p,.iteration-copy>p:not(.decision-label){
color:var(--muted);
margin:0;
font-size:16px;
line-height:1.78
}
.dark-section .system-decision-copy>p:not(.decision-label){
color:#aeb7c4
}
.system-decision-copy aside{
color:#aeb7c4;
border-top:1px solid #343d49;
margin-top:48px;
padding:24px 0 0;
font-size:13px;
line-height:1.75
}
.system-media-decision{
border-bottom:1px solid var(--line)
}
.system-media-decision .system-decision-copy{
grid-template-columns:2fr 10fr;
gap:0 24px;
display:grid
}
.system-media-decision .decision-label{
grid-column:1
}
.system-media-decision h2,.system-media-decision .copy-columns{
grid-column:2
}
.copy-columns{
grid-template-columns:1fr 1fr;
gap:54px;
display:grid
}
.system-media-decision>.case-media{
max-width:1120px;
margin:var(--section-lead-compact) auto 0
}
.system-media-decision>.case-media img{
object-fit:cover;
border:1px solid var(--line);
background:#e4e8ee;
max-height:760px;
box-shadow:0 24px 70px #2230441c
}
.n3-case .system-media-decision>.case-media img{
object-fit:contain;
height:auto;
max-height:none
}
.launch-media{
margin-top:var(--section-lead-compact)
}
.launch-media img{
object-fit:cover;
background:#0b0c0f;
max-height:610px
}
.system-impact-grid{
margin-top:var(--section-lead-compact);
border-top:1px solid var(--line);
grid-template-columns:repeat(4,1fr);
display:grid
}
.system-impact-grid article{
border-right:1px solid var(--line);
min-height:280px;
padding:28px 26px 34px 0
}
.system-impact-grid article:not(:first-child){
padding-left:26px
}
.system-impact-grid article:last-child{
border-right:0
}
.system-impact-grid article>span{
color:var(--blue);
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:74px;
font-size:10px;
font-weight:700;
display:block
}
.system-impact-grid h3{
letter-spacing:-.04em;
margin-bottom:15px;
font-size:25px;
line-height:1.22
}
.system-reflection{
background:var(--surface)
}
.contribution-grid{
margin-top:var(--section-lead-space);
grid-template-columns:1fr 1fr;
gap:24px;
display:grid
}
.contribution-grid article{
background:var(--paper);
border-radius:22px;
min-height:370px;
padding:38px
}
.contribution-grid article:last-child{
color:#fff;
background:var(--dark)
}
.contribution-grid article>span{
color:var(--blue);
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:72px;
font-size:10px;
display:block
}
.contribution-grid ul{
margin:0;
padding-left:18px
}
.contribution-grid li+li{
margin-top:13px
}
.contribution-grid article:last-child li{
color:#aeb7c4
}
.system-reflection blockquote{
max-width:1120px;
color:var(--blue);
letter-spacing:-.055em;
margin:110px 0 0;
font-size:clamp(38px,5.2vw,72px);
font-weight:620;
line-height:1.14
}
.n3-hero-media{
background:radial-gradient(circle at 50% 18%,#fffc,#0000 35%),linear-gradient(145deg,#eadfd8,#bea49e);
border-radius:32px;
overflow:hidden;
box-shadow:0 30px 90px #3e2b272b
}
.n3-hero-media figcaption{
color:#261d1cad;
padding:0 22px 20px
}
.n3-device-stage{
height:clamp(560px,67vh,720px);
position:relative
}
.n3-device{
object-fit:contain;
filter:drop-shadow(0 30px 28px #291d1d33);
width:65%;
height:88%;
position:absolute;
bottom:-2%
}
.n3-device-left{
left:-13%;
transform:rotate(-9deg)
}
.n3-device-main{
z-index:2;
width:67%;
bottom:1%;
left:18%
}
.n3-device-right{
right:-17%;
transform:rotate(9deg)
}
.n3-architecture>div{
grid-template-columns:repeat(6,minmax(0,1fr));
gap:10px;
display:grid
}
.n3-architecture article{
background:#141a22;
border:1px solid #323b48;
border-radius:14px;
flex-direction:column;
grid-column:span 3;
min-height:158px;
padding:18px 22px;
display:flex
}
.n3-architecture article:nth-child(n+3){
grid-column:span 2
}
.n3-architecture strong{
color:#7daaff;
font-size:21px
}
.n3-architecture h3{
margin:18px 0 10px;
font-size:18px
}
.n3-architecture p{
color:#aeb7c4;
margin:0;
font-size:11px;
line-height:1.55
}
.n3-architecture figcaption{
color:#7f8a99
}
.n3-final{
background:linear-gradient(155deg,#eee4df,#c6aaa3);
overflow:hidden
}
.n3-final .section-intro{
color:#5b4d49
}
.n3-final-devices{
height:min(66vw,780px);
margin-top:40px;
position:relative
}
.n3-final-devices img{
object-fit:contain;
filter:drop-shadow(0 24px 24px #3324222e);
width:48%;
height:100%;
position:absolute;
bottom:-10%
}
.n3-final-devices img:first-child{
left:-5%;
transform:rotate(-7deg)
}
.n3-final-devices img:nth-child(2){
z-index:2;
left:27%
}
.n3-final-devices img:last-child{
right:-5%;
transform:rotate(7deg)
}
.shortcut-hero-media{
color:#fff;
background:radial-gradient(circle at 65% 32%,#305ca038,#0000 34%),#090b0f;
border-radius:32px;
height:clamp(590px,70vh,760px);
position:relative;
overflow:hidden;
box-shadow:0 30px 90px #0e131d38
}
.shortcut-hero-media>img{
object-fit:cover;
object-position:center 43%;
width:62%;
height:100%;
margin-left:5%;
display:block
}
.shortcut-hero-media figcaption{
color:#828d9e;
position:absolute;
bottom:20px;
left:24px;
right:24px
}
.shortcut-hero-metric{
z-index:2;
-webkit-backdrop-filter:blur(16px);
backdrop-filter:blur(16px);
background:#121821b8;
border:1px solid #313b49;
border-radius:18px;
width:37%;
padding:24px;
position:absolute;
top:34px;
right:30px
}
.shortcut-hero-metric strong{
color:#75a7ff;
letter-spacing:-.06em;
margin-bottom:12px;
font-size:clamp(29px,3vw,46px);
line-height:1;
display:block
}
.shortcut-hero-metric span{
color:#9ca7b8;
font-size:10px;
line-height:1.5
}
.shortcut-challenge ol{
margin:var(--section-lead-space) 0 0;
border-top:1px solid var(--line);
grid-template-columns:repeat(3,1fr);
padding:0;
list-style:none;
display:grid
}
.shortcut-challenge li{
border-right:1px solid var(--line);
min-height:300px;
padding:28px 34px 34px 0
}
.shortcut-challenge li:not(:first-child){
padding-left:34px
}
.shortcut-challenge li:last-child{
border-right:0
}
.shortcut-challenge li span{
color:var(--blue);
margin-bottom:84px;
font-size:10px;
display:block
}
.shortcut-challenge li p{
letter-spacing:-.025em;
margin:0;
font-size:20px;
line-height:1.48
}
.shortcut-method{
color:#fff;
background:var(--dark)
}
.shortcut-method .section-index{
color:#7daaff
}
.shortcut-method .section-intro{
color:#aeb7c4
}
.method-loop{
margin-top:var(--section-lead-space);
grid-template-columns:repeat(4,1fr);
display:grid;
position:relative
}
.method-loop:before{
content:"";
background:#3a4451;
height:1px;
position:absolute;
top:77px;
left:10%;
right:10%
}
.method-loop article{
text-align:center;
min-width:0;
padding:0 24px;
position:relative
}
.method-loop article>span{
z-index:1;
color:#7daaff;
background:var(--dark);
border:1px solid #485464;
border-radius:50%;
place-items:center;
width:154px;
height:154px;
margin:0 auto 30px;
font-size:12px;
display:grid;
position:relative
}
.method-loop article:nth-child(3)>span{
border-color:var(--blue);
color:#fff;
background:var(--blue)
}
.method-loop small{
color:#7daaff;
letter-spacing:.1em;
text-transform:uppercase;
min-height:34px;
font-size:9px;
display:block
}
.method-loop h3{
margin-bottom:14px;
font-size:21px
}
.method-loop p{
color:#9ca7b8;
margin:0;
font-size:12px;
line-height:1.65
}
.shortcut-method blockquote{
color:#fff;
letter-spacing:-.05em;
text-align:center;
max-width:1100px;
margin:112px auto 0;
font-size:clamp(34px,4.5vw,62px);
font-weight:600;
line-height:1.18
}
.rule-principles{
margin-top:var(--section-lead-space);
grid-template-columns:repeat(3,1fr);
gap:16px;
display:grid
}
.rule-principles article{
border:1px solid var(--line);
background:var(--surface);
border-radius:20px;
min-height:280px;
padding:28px
}
.rule-principles span{
color:var(--blue);
margin-bottom:76px;
font-size:10px;
display:block
}
.rule-principles h3{
letter-spacing:-.035em;
margin-bottom:14px;
font-size:24px
}
.rule-principles p{
color:var(--muted);
margin:0;
font-size:13px;
line-height:1.68
}
.rule-example{
border:1px solid var(--line);
background:var(--surface);
border-radius:24px;
margin-top:48px;
overflow:hidden
}
.rule-example>header{
color:#fff;
background:var(--ink);
padding:28px 32px
}
.rule-example>header span{
color:#7daaff;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:10px;
font-size:10px;
display:block
}
.rule-example>header h3{
letter-spacing:-.04em;
font-size:clamp(24px,3vw,38px)
}
.rule-example>div{
grid-template-columns:repeat(4,1fr);
display:grid
}
.rule-example article{
border-right:1px solid var(--line);
min-height:230px;
padding:28px
}
.rule-example article:last-child{
border-right:0
}
.rule-example article>span{
color:var(--blue);
margin-bottom:52px;
font-size:10px;
display:block
}
.rule-example small{
color:var(--muted);
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:14px;
font-size:11px;
display:block
}
.rule-example p{
margin:0;
font-size:15px;
line-height:1.65
}
.rule-matrix{
border:1px solid var(--line);
background:var(--surface);
border-radius:20px;
margin-top:48px;
overflow:hidden
}
.rule-matrix-wrap{
border:1px solid var(--line);
background:var(--surface);
outline-offset:4px;
border-radius:20px;
margin-top:48px;
overflow-x:auto
}
.rule-matrix-wrap:focus-visible{
outline:3px solid var(--blue)
}
table.rule-matrix{
border-collapse:collapse;
table-layout:fixed;
border:0;
border-radius:0;
width:100%;
min-width:760px;
margin:0
}
table.rule-matrix caption{
clip:rect(0, 0, 0, 0);
white-space:nowrap;
border:0;
width:1px;
height:1px;
padding:0;
position:absolute;
overflow:hidden
}
table.rule-matrix th,table.rule-matrix td{
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
text-align:left;
vertical-align:middle;
min-height:68px;
padding:17px 20px;
font-size:11px;
line-height:1.45
}
table.rule-matrix thead th{
color:#fff;
background:var(--ink);
border-color:#353e4b
}
table.rule-matrix th:first-child{
width:25%
}
table.rule-matrix tbody th{
font-size:12px
}
table.rule-matrix td{
color:var(--muted)
}
table.rule-matrix td i{
border:1px solid var(--blue);
border-radius:50%;
width:7px;
height:7px;
margin-right:9px;
display:inline-block
}
table.rule-matrix tr>:last-child{
border-right:0
}
table.rule-matrix tbody tr:last-child>*{
border-bottom:0
}
table.rule-matrix td.rule-cell-emphasis{
color:var(--blue);
background:var(--blue-soft)
}
table.rule-matrix td.rule-cell-emphasis i{
background:var(--blue)
}
.rule-matrix-head,.rule-matrix-row{
grid-template-columns:1.2fr repeat(3,1fr);
display:grid
}
.rule-matrix-head{
color:#fff;
background:var(--ink)
}
.rule-matrix-head>*,.rule-matrix-row>*{
border-right:1px solid var(--line);
align-items:center;
min-height:68px;
padding:17px 20px;
font-size:11px;
line-height:1.45;
display:flex
}
.rule-matrix-head>*{
border-color:#353e4b
}
.rule-matrix-head>:last-child,.rule-matrix-row>:last-child{
border-right:0
}
.rule-matrix-row+.rule-matrix-row{
border-top:1px solid var(--line)
}
.rule-matrix-row>strong{
font-size:12px
}
.rule-matrix-row>span{
color:var(--muted);
gap:9px
}
.rule-matrix-row i{
border:1px solid var(--blue);
border-radius:50%;
flex:none;
width:7px;
height:7px
}
.rule-matrix-row .rule-cell-emphasis{
color:var(--blue);
background:var(--blue-soft)
}
.rule-cell-emphasis i{
background:var(--blue)
}
.iteration-section{
border-top:1px solid var(--line);
grid-template-columns:minmax(0,.86fr) minmax(480px,1.14fr);
align-items:center;
gap:72px;
display:grid
}
.iteration-reverse .iteration-copy{
grid-column:2
}
.iteration-reverse .case-media{
grid-area:1/1
}
.iteration-copy h2{
letter-spacing:-.05em;
margin-bottom:28px;
font-size:clamp(38px,4.3vw,61px);
line-height:1.1
}
.iteration-copy blockquote{
--iteration-quote-gap:clamp(30px, 2vw, 34px);
padding:var(--iteration-quote-gap) 0 0 24px;
border-top:1px solid var(--line);
margin-top:44px;
font-size:18px;
font-weight:550;
line-height:1.55;
position:relative
}
.iteration-copy blockquote:before{
content:"";
top:var(--iteration-quote-gap);
background:var(--blue);
width:2px;
position:absolute;
bottom:0;
left:0
}
.iteration-section .case-media img{
object-fit:cover;
border:1px solid var(--line);
background:#e4e8ee;
max-height:680px;
box-shadow:0 24px 70px #2230441a
}
.shortcut-final{
background:var(--blue-soft)
}
.activation-loop{
margin:var(--section-lead-compact) 0 54px;
grid-template-columns:repeat(3,1fr);
gap:16px;
display:grid
}
.activation-loop article{
background:#ffffffb8;
border:1px solid #0a63ff29;
border-radius:18px;
min-height:220px;
padding:26px
}
.activation-loop article>span{
color:var(--blue);
margin-bottom:58px;
font-size:10px;
display:block
}
.activation-loop h3{
margin-bottom:12px;
font-size:24px
}
.activation-loop p{
color:var(--muted);
margin:0;
font-size:13px;
line-height:1.65
}
.shortcut-final .case-media img{
background:#dfe6f0;
border:1px solid #0a63ff24;
box-shadow:0 24px 70px #2230441a
}
.shortcut-impact-layout{
margin-top:var(--section-lead-compact);
grid-template-columns:1fr 1fr;
gap:24px;
display:grid
}
.shortcut-rules>.source-note,.shortcut-impact>.source-note{
margin-top:28px
}
.shortcut-impact-metrics{
border:1px solid var(--line);
background:var(--surface);
border-radius:24px;
grid-template-columns:1fr 1fr;
display:grid;
overflow:hidden
}
.shortcut-impact-metrics article{
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
flex-direction:column;
justify-content:space-between;
min-height:250px;
padding:26px;
display:flex
}
.shortcut-impact-metrics article:nth-child(2n){
border-right:0
}
.shortcut-impact-metrics article:nth-child(n+3){
border-bottom:0
}
.shortcut-impact-metrics article:nth-child(3){
color:#fff;
background:var(--blue)
}
.shortcut-impact-metrics strong{
letter-spacing:-.07em;
font-size:clamp(37px,4.2vw,62px);
line-height:1
}
.shortcut-impact-metrics span{
max-width:180px;
color:var(--muted);
font-size:11px;
line-height:1.55
}
.shortcut-impact-metrics article:nth-child(3) span{
color:#ffffffc2
}
.official-shortcut-media{
background:#e9edf2;
border-radius:24px;
overflow:hidden
}
.official-shortcut-media img{
object-fit:cover;
border-radius:0;
height:calc(100% - 48px)
}
.official-shortcut-media figcaption{
padding:0 18px 14px
}
.reflection-principles{
margin-top:var(--section-lead-space);
border-top:1px solid var(--line);
grid-template-columns:repeat(3,1fr);
display:grid
}
.reflection-principles article{
border-right:1px solid var(--line);
min-height:290px;
padding:28px 30px 34px 0
}
.reflection-principles article:not(:first-child){
padding-left:30px
}
.reflection-principles article:last-child{
border-right:0
}
.reflection-principles article>span{
color:var(--blue);
margin-bottom:76px;
font-size:10px;
display:block
}
.reflection-principles h3{
letter-spacing:-.035em;
margin-bottom:14px;
font-size:25px
}
@media (min-width:1181px){
.home-hero{
grid-template-columns:minmax(0,1fr) minmax(520px,44%);
align-items:stretch;
gap:clamp(48px,4vw,60px)
}
.home-hero-copy{
min-width:0
}
.home-hero-visual{
align-self:stretch;
height:auto;
min-height:0
}
.hero,.system-case-hero{
grid-template-columns:minmax(0,1fr) minmax(520px,44%);
align-items:stretch;
column-gap:clamp(48px,4vw,60px)
}
.hero-copy,.system-case-copy{
min-width:0
}
.hero-visual,.system-case-hero>.case-media{
align-self:stretch;
height:auto;
min-height:0
}
.hero-visual>img{
position:absolute;
inset:0
}
.n3-hero-media{
grid-template-rows:minmax(0,1fr) auto;
display:grid
}
.n3-device-stage{
height:auto;
min-height:0
}
.shortcut-hero-media>img{
width:62%;
height:100%;
margin-left:0;
position:absolute;
inset:0 auto 0 5%
}

}
@media (max-width:1180px){
.home-hero,.system-case-hero,.split-decision,.iteration-section{
grid-template-columns:1fr
}
.home-hero-copy{
max-width:860px
}
.home-hero-visual{
height:min(78vw,720px)
}
.system-case-copy{
max-width:850px
}
.system-case-hero .case-media{
max-width:950px
}
.home-section-heading{
grid-template-columns:2fr 10fr
}
.home-section-heading>span{
grid-column:2;
max-width:720px;
margin-top:24px
}
.case-card-1{
grid-template-columns:1fr
}
.case-card-1 .case-card-copy{
min-height:390px
}
.approach-list{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.approach-list li:nth-child(odd){
padding-left:0
}
.approach-list li:nth-child(2n){
border-right:0;
padding-left:28px
}
.approach-list li:nth-child(n+3){
border-top:1px solid #343d49
}
.iteration-reverse .iteration-copy,.iteration-reverse .case-media{
grid-column:1
}
.iteration-reverse .iteration-copy{
grid-row:1
}
.iteration-reverse .case-media{
grid-row:2
}
.iteration-section .case-media{
max-width:900px
}

}
@media (min-width:901px) and (max-width:960px){
.home-evidence,.principle-rail,.system-impact-grid,.method-loop{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.home-evidence article:nth-child(2n),.principle-rail article:nth-child(2n),.system-impact-grid article:nth-child(2n){
border-right:0
}
.home-evidence article:nth-child(n+3),.principle-rail article:nth-child(n+3),.system-impact-grid article:nth-child(n+3){
border-top:1px solid var(--line)
}
.home-evidence article:nth-child(odd){
padding-left:0
}
.home-evidence article:nth-child(2n){
padding-left:28px
}
.principle-rail article:nth-child(odd),.system-impact-grid article:nth-child(odd){
padding-left:0
}
.principle-rail article:nth-child(2n),.system-impact-grid article:nth-child(2n){
padding-left:26px
}
.case-card-list,.profile-intro,.principle-grid,.shortcut-challenge ol,.rule-principles,.shortcut-impact-layout,.reflection-principles,.system-problem-grid{
grid-template-columns:1fr
}
.case-card-1{
grid-column:1
}
.profile-intro{
gap:44px
}
.principle-grid article,.principle-grid article:not(:first-child){
border-right:0;
border-bottom:0;
min-height:0;
padding:28px 0 34px
}
.principle-grid article h3,.principle-grid article p{
min-block-size:0
}
.principle-grid article>div{
margin-bottom:36px
}
.principle-grid article h3{
margin:34px 0 14px
}
.shortcut-challenge li,.shortcut-challenge li:not(:first-child),.reflection-principles article,.reflection-principles article:not(:first-child){
border-right:0;
border-bottom:1px solid var(--line);
min-height:0;
padding:28px 0 34px
}
.shortcut-challenge li:last-child,.reflection-principles article:last-child{
border-bottom:0
}
.shortcut-challenge li span,.reflection-principles article>span{
margin-bottom:36px
}
.rule-principles article{
min-height:0;
padding:28px
}
.system-problem-grid article,.system-problem-grid article:not(:first-child){
border-right:0;
border-bottom:0;
min-height:0;
padding:28px 0 34px
}
.system-problem-grid article>span{
margin-bottom:38px
}
.rule-example>div{
grid-template-columns:1fr 1fr
}
.rule-example article:nth-child(2){
border-right:0
}
.rule-example article:nth-child(n+3){
border-top:1px solid var(--line)
}
.method-loop{
row-gap:52px
}
.method-loop:before{
display:none
}
.method-loop article{
padding:0 18px
}
}
@media (max-width:900px){
.portfolio-nav{
gap:14px
}
.portfolio-nav>a{
display:inline-flex!important
}
.home-evidence,.principle-rail,.system-impact-grid,.method-loop{
grid-template-columns:1fr 1fr
}
.home-evidence article:nth-child(2n),.principle-rail article:nth-child(2n),.system-impact-grid article:nth-child(2n),.method-loop article:nth-child(2){
border-right:0
}
.home-evidence article:nth-child(n+3),.principle-rail article:nth-child(n+3),.system-impact-grid article:nth-child(n+3){
border-top:1px solid var(--line)
}
.home-evidence article:nth-child(odd){
padding-left:0
}
.home-evidence article:nth-child(2n){
padding-left:28px
}
.principle-rail article:nth-child(odd),.system-impact-grid article:nth-child(odd){
padding-left:0
}
.principle-rail article:nth-child(2n),.system-impact-grid article:nth-child(2n){
padding-left:26px
}
.case-card-list,.profile-intro,.principle-grid,.shortcut-challenge ol,.rule-principles,.shortcut-impact-layout,.reflection-principles{
grid-template-columns:1fr
}
.rule-example>div{
grid-template-columns:1fr 1fr
}
.rule-example article:nth-child(2){
border-right:0
}
.rule-example article:nth-child(n+3){
border-top:1px solid var(--line)
}
.case-card-1{
grid-column:1
}
.approach-list{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.approach-list li{
min-height:340px
}
.approach-list li:nth-child(2){
border-right:0
}
.approach-list li:nth-child(n+3){
border-top:1px solid #343d49
}
.case-card-1 .case-card-media,.case-card-media{
min-height:540px
}
.case-card-2 .case-card-media,.case-card-3 .case-card-media{
height:540px;
min-height:0
}
.case-card-copy,.case-card-1 .case-card-copy{
padding:36px
}
.profile-heading{
grid-template-columns:1fr
}
.profile-heading>.section-index{
margin-bottom:0
}
.profile-heading h2{
grid-column:1
}
.principle-grid article,.principle-grid article:not(:first-child){
border-bottom:0;
border-right:0;
min-height:0;
padding:28px 0 34px
}
.shortcut-challenge li,.shortcut-challenge li:not(:first-child),.reflection-principles article,.reflection-principles article:not(:first-child){
border-right:0;
border-bottom:1px solid var(--line);
min-height:0;
padding:28px 0 34px
}
.rule-principles article{
min-height:0;
padding:28px
}
.principle-grid article>div,.shortcut-challenge li span,.reflection-principles article>span{
margin-bottom:36px
}
.principle-grid article h3{
margin:34px 0 14px
}
.shortcut-challenge li:last-child,.reflection-principles article:last-child{
border-bottom:0
}
.leadership-model,.profile-background,.copy-columns,.contribution-grid,.system-problem-grid{
grid-template-columns:1fr
}
.system-problem-grid article,.system-problem-grid article:not(:first-child){
border-bottom:0;
border-right:0;
min-height:0;
padding:28px 0 34px
}
.system-problem-grid article>span{
margin-bottom:38px
}
.method-loop{
row-gap:52px
}
.method-loop:before{
display:none
}
.method-loop article{
padding:0 18px
}
.shortcut-impact-metrics{
min-height:580px
}

}
@media (max-width:840px){
.section-heading-grid>.section-index,.decision-intro>.section-index,.visual-copy>.section-index{
margin-bottom:0
}
.system-decisions-title,.shortcut-iterations-title,.system-media-decision .system-decision-copy{
grid-template-columns:1fr
}
.system-decisions-title h2,.shortcut-iterations-title h2,.system-media-decision .decision-label,.system-media-decision h2,.system-media-decision .copy-columns{
grid-column:1
}
.system-decisions-title .section-index,.shortcut-iterations-title .section-index{
margin-bottom:0
}

}
@media (max-width:680px){
:root{
--hero-bottom-home:48px;
--hero-bottom-case:40px
}
.rule-example>div{
grid-template-columns:1fr
}
.rule-example article,.rule-example article:nth-child(2){
border-right:0;
border-top:1px solid var(--line);
min-height:0
}
.rule-example article:first-child{
border-top:0
}
.portfolio-header{
padding-inline:14px
}
.portfolio-header .brand-copy{
display:none
}
.portfolio-nav{
gap:9px;
font-size:12px
}
.portfolio-nav>a{
justify-content:center;
min-width:44px;
min-height:44px;
display:inline-flex!important
}
.home-hero{
gap:42px
}
.home-hero-copy h1,.profile-hero h1,.system-case-copy h1{
font-size:clamp(44px,13vw,60px)
}
.home-actions{
flex-direction:column;
align-items:stretch
}
.button-primary,.button-secondary{
width:100%
}
.home-hero-visual{
border-radius:24px;
height:136vw;
min-height:500px;
max-height:620px
}
.hero-tile-coloros{
inset:7% 8% 47% 6%
}
.hero-tile-n3{
width:64%;
height:51%;
bottom:4%;
right:1%
}
.hero-tile-shortcut{
width:35%;
height:45%;
inset:43% auto 5% 4%
}
.system-metrics,.principle-rail,.system-impact-grid,.method-loop,.activation-loop{
grid-template-columns:1fr
}
.system-metrics article,.system-metrics article:not(:first-child),.principle-rail article,.principle-rail article:not(:first-child),.system-impact-grid article,.system-impact-grid article:not(:first-child){
border-right:0;
border-bottom:1px solid var(--line);
min-height:150px;
padding:24px 0
}
.system-metrics article:last-child,.principle-rail article:last-child,.system-impact-grid article:last-child{
border-bottom:0
}
.home-section-heading{
grid-template-columns:1fr
}
.home-section-heading .section-index,.home-section-heading h2,.home-section-heading>span{
grid-column:1
}
.home-section-heading>.section-index{
margin-bottom:0
}
.home-section-heading h2,.profile-heading h2,.system-decisions-title h2,.shortcut-iterations-title h2{
font-size:clamp(39px,11.5vw,54px)
}
.case-card,.case-card-1{
border-radius:22px
}
.case-card-media,.case-card-1 .case-card-media{
aspect-ratio:4/3;
height:auto;
min-height:0;
max-height:none
}
.case-card-2 .case-card-media,.case-card-3 .case-card-media{
aspect-ratio:4/3;
height:auto;
min-height:0
}
.case-card-copy,.case-card-1 .case-card-copy{
min-height:0;
padding:26px
}
.case-card-copy h3{
font-size:34px
}
.case-card-outcome{
margin-top:28px;
padding-top:22px
}
.case-card-outcome strong{
font-size:21px
}
.case-card-footer{
flex-direction:column;
align-items:flex-start;
margin-top:34px;
padding-top:28px
}
.approach-list{
grid-template-columns:1fr
}
.approach-list li,.approach-list li:not(:first-child){
border-bottom:1px solid #343d49;
border-right:0;
min-height:0;
padding:28px 0 34px
}
.approach-list li:nth-child(n+3){
border-top:0
}
.approach-list li:last-child{
border-bottom:0
}
.approach-list span{
margin-bottom:40px
}
.approach-list small{
margin-top:26px;
padding-top:0
}
.home-evidence{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.home-evidence article,.home-evidence article:not(:first-child){
border-right:1px solid var(--line);
border-bottom:0;
min-height:136px;
padding:20px 16px
}
.home-evidence article:nth-child(2n){
border-right:0;
padding-left:16px
}
.home-evidence article:nth-child(odd){
padding-left:0
}
.home-evidence article:nth-child(n+3){
border-top:1px solid var(--line)
}
.footer-links{
flex-direction:column;
align-items:flex-start;
gap:0
}
.profile-hero h1{
margin-bottom:58px
}
.profile-intro{
gap:44px
}
.profile-intro>p{
font-size:16px
}
.leadership-model article{
min-height:280px;
padding:28px
}
.leadership-model span{
margin-bottom:62px
}
.profile-background article{
min-height:280px;
padding:28px
}
.profile-cta{
border-radius:20px;
padding:32px 26px
}
.system-case-copy>p:last-child{
font-size:16px
}
.n3-device-stage{
height:126vw;
max-height:590px
}
.n3-device{
width:82%
}
.n3-device-left{
left:-29%
}
.n3-device-main{
width:86%;
left:8%
}
.n3-device-right{
right:-31%
}
.n3-architecture article{
grid-column:auto;
min-height:0
}
.n3-architecture>div{
grid-template-columns:1fr
}
.n3-architecture article:nth-child(n+3){
grid-column:auto
}
.n3-final-devices{
height:120vw
}
.n3-final-devices img{
width:65%
}
.n3-final-devices img:first-child{
left:-22%
}
.n3-final-devices img:nth-child(2){
left:18%
}
.n3-final-devices img:last-child{
right:-22%
}
.shortcut-hero-media{
border-radius:22px;
height:126vw;
max-height:610px
}
.shortcut-hero-media>img{
width:87%;
margin-left:-5%
}
.shortcut-hero-metric{
width:53%;
padding:18px;
top:20px;
right:18px
}
.shortcut-challenge li span,.rule-principles span,.activation-loop article>span{
margin-bottom:34px
}
.method-loop article{
padding:0
}
.method-loop article>span{
width:128px;
height:128px
}
.shortcut-method blockquote{
text-align:left;
margin-top:78px
}
.rule-matrix-wrap{
overflow-x:auto
}
table.rule-matrix{
min-width:700px
}
.iteration-copy h2{
font-size:39px
}
.shortcut-impact-metrics{
min-height:520px
}
.shortcut-impact-metrics article{
min-height:220px
}
.shortcut-rules>.source-note,.shortcut-impact>.source-note{
margin-top:24px
}
.system-reflection blockquote{
margin-top:76px;
font-size:40px
}

}
.footer-links a{
align-items:center;
min-height:44px;
display:inline-flex
}
.next-case-cta{
min-height:44px
}
@media (max-width:1040px){
.case-main{
--case-nav-height:56px
}
.case-navigator-inner{
width:var(--page);
border-radius:16px;
min-height:56px;
padding:5px;
display:block;
position:relative
}
.case-navigator-label{
display:none
}
.case-navigator-mobile{
width:100%;
display:block
}
.case-navigator-mobile>summary{
min-height:46px;
color:var(--ink);
text-align:left;
cursor:pointer;
background:0 0;
grid-template-columns:minmax(0,1fr) auto 20px;
align-items:center;
gap:14px;
padding:6px 10px;
list-style:none;
display:grid
}
.case-navigator-mobile>summary::-webkit-details-marker{
display:none
}
.case-navigator-mobile>summary::marker{
content:""
}
.case-navigator-mobile>summary>span{
min-width:0;
font-size:13px;
font-weight:680;
line-height:1.35;
display:grid
}
.case-navigator-mobile>summary small{
color:var(--faint);
letter-spacing:.09em;
text-transform:uppercase;
margin-bottom:1px;
font-size:9px;
font-weight:720
}
.case-navigator-mobile>summary b{
color:var(--muted);
letter-spacing:.06em;
font-size:10px;
font-weight:700
}
.case-navigator-mobile>summary i{
color:var(--muted);
text-align:center;
font-size:18px;
font-style:normal;
line-height:1;
transition:transform .16s;
display:block
}
.case-navigator-mobile[open]>summary i{
transform:rotate(180deg)
}
.case-navigator-desktop-links{
display:none
}
.case-navigator-mobile-links{
z-index:2;
max-height:min(440px,100vh - 168px);
overscroll-behavior:contain;
border:1px solid var(--nav-glass-border);
max-height:min(440px,100dvh - 168px);
padding:6px;
padding-bottom:max(6px, env(safe-area-inset-bottom));
background:var(--nav-glass-bg);
-webkit-backdrop-filter:var(--nav-glass-filter);
backdrop-filter:var(--nav-glass-filter);
border-radius:16px;
grid-template-columns:1fr;
gap:2px;
display:none;
position:absolute;
top:calc(100% + 8px);
left:0;
right:0;
overflow-y:auto;
box-shadow:0 22px 48px #1c253424,inset 0 1px #ffffffb8
}
.case-navigator-mobile[open] .case-navigator-mobile-links{
display:grid
}
.case-navigator-links a{
justify-content:initial;
text-align:left;
border:1px solid #0000;
border-radius:10px;
grid-template-columns:34px minmax(0,1fr);
gap:10px;
min-height:46px;
padding:9px 14px;
font-size:13px;
display:grid
}
.case-navigator-links a[aria-current=location]{
box-shadow:inset 2px 0 0 var(--blue);
background:#ffffffb8;
border-color:#10121612
}

}
@media (max-width:600px){
.case-navigator-mobile>summary{
padding-inline:2px
}
.case-navigator-mobile-links{
max-height:min(400px,100vh - 152px);
-webkit-overflow-scrolling:touch;
max-height:min(400px,100dvh - 152px)
}

}
@media (max-width:360px){
.portfolio-header{
gap:8px;
padding-inline:10px
}
.portfolio-nav{
gap:2px
}

}
.home-current-focus{
border-left:2px solid var(--blue);
grid-template-columns:max-content minmax(0,1fr);
align-items:start;
gap:18px;
max-width:720px;
margin-top:26px;
padding:3px 0 3px 18px;
display:grid
}
.home-current-focus>span{
color:var(--blue);
letter-spacing:.1em;
text-transform:uppercase;
padding-top:3px;
font-size:10px;
font-weight:720
}
.home-current-focus>p{
color:var(--muted);
margin:0;
font-size:13px;
line-height:1.72
}
.home-current-focus+.home-actions{
margin-top:34px
}
.system-diagram{
border:1px solid var(--line);
background:#ffffffc7;
border-radius:30px;
width:100%;
margin:78px auto 0;
padding:clamp(24px,3.2vw,46px);
overflow:hidden;
box-shadow:0 22px 70px #1d304f12
}
.system-diagram-header{
max-width:920px;
margin-bottom:48px
}
.system-diagram-header>p{
color:var(--blue);
letter-spacing:.12em;
text-transform:uppercase;
margin:0 0 16px;
font-size:10px;
font-weight:750
}
.system-diagram-header h3{
letter-spacing:-.05em;
max-width:780px;
margin:0;
font-size:clamp(31px,3.2vw,48px);
line-height:1.12
}
.system-diagram-header>span{
max-width:760px;
color:var(--muted);
margin-top:18px;
font-size:14px;
line-height:1.72;
display:block
}
.system-node{
border:1px solid var(--line);
background:var(--paper);
border-radius:19px;
min-width:0;
padding:23px
}
.system-node small,.personalization-outputs>small{
color:var(--blue);
letter-spacing:.1em;
text-transform:uppercase;
margin-bottom:20px;
font-size:9px;
font-weight:740;
display:block
}
.system-node h4{
letter-spacing:-.035em;
margin:0;
font-size:20px;
line-height:1.2
}
.system-node>p{
color:var(--muted);
margin:11px 0 0;
font-size:11px;
line-height:1.65
}
.system-node-accent{
color:#fff;
background:linear-gradient(145deg,#0b65f2,#5d36d4);
border-color:#0000;
box-shadow:0 18px 42px #2a5bd533
}
.system-node-accent small,.system-node-accent>p{
color:#ffffffc2
}
.system-flow-arrow{
min-width:0;
color:var(--faint);
text-align:center;
flex-direction:column;
justify-content:center;
align-items:center;
gap:9px;
display:flex
}
.system-flow-arrow span{
max-width:110px;
font-size:9px;
line-height:1.45
}
.system-flow-arrow i{
color:var(--blue);
font-size:25px;
font-style:normal;
line-height:1
}
.system-diagram>figcaption{
color:var(--faint);
margin-top:20px;
font-size:10px;
line-height:1.6
}
.personalization-system-flow{
grid-template-columns:minmax(150px,.72fr) 54px minmax(440px,2fr) 54px minmax(160px,.76fr);
align-items:stretch;
display:grid
}
.personalization-intent{
flex-direction:column;
justify-content:center;
display:flex
}
.personalization-engine{
background:#edf4ff;
border:1px solid #b7c9e9;
border-radius:23px;
padding:15px
}
.personalization-engine>header{
padding:10px 9px 19px
}
.personalization-engine>header small{
color:var(--blue);
letter-spacing:.1em;
text-transform:uppercase;
font-size:9px;
font-weight:740
}
.personalization-engine>header h4{
letter-spacing:-.03em;
margin:8px 0 0;
font-size:18px
}
.personalization-paths{
flex-wrap:wrap;
gap:7px;
margin-top:14px;
display:flex
}
.personalization-paths span{
color:#23508f;
background:#ffffffc7;
border-radius:999px;
padding:7px 10px;
font-size:9px;
line-height:1.35
}
.personalization-engine>div{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
display:grid
}
.personalization-engine .system-node{
background:#ffffffe6;
padding:17px
}
.personalization-engine .system-node small{
margin-bottom:28px
}
.personalization-engine .system-node h4{
font-size:15px
}
.personalization-outputs{
border:1px solid var(--line);
background:var(--paper);
border-radius:20px;
flex-direction:column;
justify-content:center;
gap:8px;
padding:20px;
display:flex
}
.personalization-outputs>small{
margin-bottom:6px
}
.personalization-outputs article{
background:var(--surface);
border-radius:12px;
align-items:center;
gap:10px;
padding:12px;
display:flex
}
.personalization-outputs article span{
color:var(--blue);
font-size:9px
}
.personalization-outputs article strong{
font-size:12px
}
.system-validation-loop{
color:var(--muted);
background:#edf4ff94;
border:1px dashed #9fb3d4;
border-radius:14px;
align-items:center;
gap:18px;
margin-top:18px;
padding:14px 18px;
font-size:11px;
line-height:1.55;
display:flex
}
.system-validation-loop strong{
color:var(--blue);
letter-spacing:.08em;
text-transform:uppercase;
flex:none;
font-size:9px
}
.cover-screen-flow-diagram{
max-width:none
}
.cover-global-layer{
color:#fff;
background:#121b2a;
border-radius:22px;
grid-template-columns:max-content repeat(3,minmax(0,1fr));
align-items:stretch;
gap:10px;
padding:14px;
display:grid
}
.cover-global-layer>span{
color:#7daaff;
letter-spacing:.1em;
text-transform:uppercase;
writing-mode:vertical-rl;
align-self:center;
padding:13px 8px;
font-size:9px;
font-weight:740
}
.cover-global-layer article{
background:#192435;
border:1px solid #354052;
border-radius:14px;
flex-direction:column-reverse;
justify-content:space-between;
gap:16px;
min-width:0;
padding:17px;
display:flex
}
.cover-global-layer article small{
color:#9ba9bc;
font-size:9px;
line-height:1.45
}
.cover-global-layer article strong{
font-size:14px
}
.cover-global-layer>p{
color:#9ba9bc;
grid-column:2/-1;
margin:0;
padding:2px 5px 5px;
font-size:9px;
line-height:1.5
}
.cover-main-flow{
grid-template-columns:1fr 110px 1fr 110px 1fr;
align-items:stretch;
margin-top:26px;
display:grid
}
.cover-main-flow .system-node{
min-height:170px
}
.cover-main-flow .system-node small{
margin-bottom:44px
}
.cover-return-flow,.shortcut-rule-outcome{
color:#22508e;
text-align:center;
background:#eaf2ff;
border-radius:13px;
justify-content:center;
align-items:center;
gap:12px;
margin-top:13px;
padding:13px 18px;
font-size:11px;
line-height:1.45;
display:flex
}
.cover-return-flow>span,.shortcut-rule-outcome>span{
color:var(--blue);
font-size:18px
}
.system-diagram-note{
border-left:2px solid var(--blue);
color:var(--muted);
margin:24px 0 0;
padding-left:15px;
font-size:11px;
line-height:1.65
}
.shortcut-method .system-diagram{
color:#fff;
box-shadow:none;
background:#101721;
border-color:#303a49
}
.shortcut-method .system-diagram-header>span{
color:#aeb7c4
}
.shortcut-rule-flow{
grid-template-columns:minmax(130px,.75fr) 34px minmax(260px,1.45fr) 34px minmax(145px,.86fr) 34px minmax(145px,.86fr);
align-items:stretch;
display:grid
}
.shortcut-method .system-node{
background:#17212e;
border-color:#344052
}
.shortcut-method .system-node small,.shortcut-method .system-node>p{
color:#9aa8ba
}
.shortcut-method .system-node-accent{
box-shadow:none;
background:linear-gradient(145deg,#163d75,#24295c);
border-color:#3971d0
}
.shortcut-method .system-flow-arrow{
color:#738094
}
.shortcut-trigger-node>div,.shortcut-decision-node>div,.shortcut-feedback-node>div{
flex-wrap:wrap;
gap:7px;
margin-top:32px;
display:flex
}
.shortcut-trigger-node>div span,.shortcut-decision-node>div span,.shortcut-feedback-node>div span{
color:#c8d1de;
border:1px solid #3c495d;
border-radius:999px;
padding:7px 9px;
font-size:9px;
line-height:1
}
.shortcut-matrix-node>p{
margin-bottom:15px
}
.rule-matrix{
grid-template-columns:repeat(5,1fr);
gap:5px;
width:100%;
max-width:170px;
display:grid
}
.rule-matrix i{
aspect-ratio:1;
background:#7daaff33;
border-radius:4px;
display:block
}
.rule-matrix i:nth-child(8),.rule-matrix i:nth-child(13),.rule-matrix i:nth-child(18){
background:#66a0ff;
box-shadow:0 0 14px #66a0ff7a
}
.rule-contexts{
flex-wrap:wrap;
gap:5px;
margin-top:13px;
display:flex
}
.rule-contexts span{
color:#aebbd0;
font-size:8px
}
.rule-contexts span:not(:last-child):after{
content:" ·"
}
.rule-state-check{
color:#7daaff;
margin-top:13px;
font-size:9px;
font-weight:580;
line-height:1.5;
display:block
}
.shortcut-rule-outcome{
color:#c8d8f1;
background:#17243a;
border:1px solid #2b4265
}
.shortcut-method .system-diagram>figcaption{
color:#7f8b9d
}
@media (max-width:1100px){
.personalization-system-flow,.shortcut-rule-flow{
grid-template-columns:1fr;
gap:12px
}
.personalization-system-flow>.system-flow-arrow,.shortcut-rule-flow>.system-flow-arrow{
min-height:34px
}
.personalization-system-flow>.system-flow-arrow i,.shortcut-rule-flow>.system-flow-arrow i{
transform:rotate(90deg)
}
.personalization-system-flow>.system-flow-arrow span,.shortcut-rule-flow>.system-flow-arrow span{
display:none
}
.personalization-outputs{
grid-template-columns:repeat(3,minmax(0,1fr));
display:grid
}
.personalization-outputs>small{
grid-column:1/-1
}
.shortcut-trigger-node>div,.shortcut-decision-node>div,.shortcut-feedback-node>div{
margin-top:20px
}
.rule-matrix{
max-width:210px
}

}
@media (max-width:760px){
.home-current-focus{
grid-template-columns:1fr;
gap:6px
}
.system-diagram{
border-radius:22px;
margin-top:52px;
padding:20px
}
.system-diagram-header{
margin-bottom:34px
}
.system-diagram-header h3{
font-size:29px
}
.personalization-engine>div,.personalization-outputs,.cover-global-layer,.cover-main-flow{
grid-template-columns:1fr
}
.personalization-paths{
flex-direction:column;
align-items:flex-start
}
.personalization-engine .system-node small{
margin-bottom:16px
}
.system-validation-loop{
flex-direction:column;
align-items:flex-start;
gap:7px
}
.cover-global-layer>span{
writing-mode:horizontal-tb;
padding:4px 3px 8px
}
.cover-global-layer>p{
grid-column:auto
}
.cover-main-flow{
gap:10px
}
.cover-main-flow>.system-flow-arrow{
min-height:44px
}
.cover-main-flow>.system-flow-arrow i{
transform:rotate(90deg)
}
.cover-main-flow .system-node{
min-height:0
}
.cover-main-flow .system-node small{
margin-bottom:22px
}

}