/* The approach is an editorial pause, with one shared pace for text and colour. */
.perspective-story[data-approach-controller]{--story-bg:#d9e6be;--story-ink:#183e35;background:var(--story-bg);color:var(--story-ink);transition:background-color 1.8s cubic-bezier(.4,0,.2,1),color 1.8s cubic-bezier(.4,0,.2,1)}
.perspective-story[data-approach-controller] .perspective-stage{padding-block:48px}
.perspective-story[data-approach-controller] .perspective-panel{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:clamp(40px,7vw,100px);padding:80px 0;position:relative;isolation:isolate}
.perspective-story[data-approach-controller] .perspective-panel h2{font-size:clamp(3.92rem,6.72vw,7.168rem);font-weight:500;line-height:1.12;letter-spacing:-.035em;z-index:1}
.perspective-story[data-approach-controller] .perspective-heading{display:grid;justify-items:start;gap:28px;position:relative;z-index:1}
.perspective-story[data-approach-controller] .perspective-icon{display:block;width:120px;height:120px;color:inherit;transform:none;rotate:none;flex-shrink:0}
.perspective-story[data-approach-controller] .perspective-number{top:50%;right:0;left:auto;bottom:auto;transform:translateY(-50%);font-size:clamp(16rem,26vw,27rem);opacity:.055;line-height:.82;letter-spacing:-.055em;z-index:0;user-select:none}
.perspective-story[data-approach-controller] .perspective-bottom{display:block;margin:0;position:relative;z-index:1}
.perspective-story[data-approach-controller] .perspective-bottom h3{margin:0 0 24px;max-width:28ch}
.perspective-story[data-approach-controller] .perspective-bottom p{max-width:46ch}
.approach-ready .perspective-panels{display:grid;align-items:center}
.approach-ready .perspective-panel{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none}
.approach-ready .perspective-panel.is-current{opacity:1;visibility:visible;pointer-events:auto}
.perspective-story[data-approach-controller].scroll-story{height:440svh}
.perspective-story[data-approach-controller].scroll-story .perspective-stage{position:sticky;top:112px;height:calc(100svh - 112px);min-height:560px;padding-block:38px;display:flex;flex-direction:column;justify-content:space-between}
.perspective-story[data-approach-controller] .perspective-nav{gap:24px;border-color:color-mix(in srgb,currentColor 30%,transparent)}
.perspective-story[data-approach-controller] .perspective-nav button{transition:background-color 1.8s,color 1.8s,border-color 1.8s,border-radius .6s;transform:none}
.site-header[data-approach-tone]{transition:background-color 1.8s cubic-bezier(.4,0,.2,1),color 1.8s cubic-bezier(.4,0,.2,1)}
.site-header[data-approach-tone] .brand,.site-header[data-approach-tone] .menu-toggle{color:inherit!important;transition:color 1.8s}
.site-header[data-approach-tone] .button{transition:background-color 1.8s,color 1.8s,border-color 1.8s}
.site-header[data-approach-tone=dark] .button{background:#eef3cc;color:#183e35;border-color:#eef3cc}
@media(max-width:849px){
 .perspective-story[data-approach-controller] .perspective-stage{padding-block:40px}
 .perspective-story[data-approach-controller] .perspective-panel{grid-template-columns:1fr;align-content:center;gap:30px;padding:76px 0 45px}
 .perspective-story[data-approach-controller] .perspective-panel h2{font-size:clamp(3.15rem,11.2vw,5.04rem)}
 .perspective-story[data-approach-controller] .perspective-heading{gap:20px}
 .perspective-story[data-approach-controller] .perspective-icon{width:75px;height:75px}
 .perspective-story[data-approach-controller] .perspective-number{font-size:clamp(13rem,42vw,22rem);top:auto;bottom:40px;right:0;transform:none}
 .perspective-story[data-approach-controller] .perspective-nav>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px}
 .perspective-story[data-approach-controller] .perspective-nav button{padding:13px 16px}
}
@media(prefers-reduced-motion:reduce){.perspective-story[data-approach-controller],.perspective-story[data-approach-controller] .perspective-nav button,.site-header[data-approach-tone],.site-header[data-approach-tone] *{transition:none!important}}
html[data-motion=off] .perspective-story[data-approach-controller],html[data-motion=off] .perspective-story[data-approach-controller] .perspective-nav button,html[data-motion=off] .site-header[data-approach-tone],html[data-motion=off] .site-header[data-approach-tone] *{transition:none!important}
/* Keep the wordmark at rest as the approach changes tone. */
.site-header[data-approach-tone] .wordmark{transform:none!important;transition:color .5s ease;will-change:auto}
.site-header[data-approach-tone]{transition:background-color 1.8s cubic-bezier(.4,0,.2,1),color 1.8s cubic-bezier(.4,0,.2,1)}

/* Sculptural icons retain the existing visual weight without cropping. */
.perspective-story[data-approach-controller] .perspective-icon.perspective-icon--sculptural{width:144px;height:144px;object-fit:contain;object-position:center}
@media(max-width:849px){.perspective-story[data-approach-controller] .perspective-icon.perspective-icon--sculptural{width:92px;height:92px}}