/* The Ops Layer · The Method. Builds on tokens/base/components (Home v3 system). */

/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.3) 55%,rgba(0,0,0,0) 76%),linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.2) 45%,rgba(0,0,0,0) 60%)}
.sentinel{position:absolute;top:120px;left:0;width:1px;height:1px}
.ol.js:not(.is-static) .hero [data-h]{opacity:0;translate:0 24px;filter:blur(6px);transition:opacity 1.3s var(--ex),translate 1.5s var(--ex),filter 1.3s var(--ex);transition-delay:var(--d,0ms)}
.ol.js:not(.is-static).loaded .hero [data-h]{opacity:1;translate:0 0;filter:blur(0)}
.me-hero{min-height:max(760px,min(100vh,1000px));display:flex;flex-direction:column}
.me-hero>.wrap{width:100%}
.me-in{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:80px}
.me-h1{font-size:clamp(46px,6vw,100px);line-height:.98;max-width:13em}
.me-h1 .ln+.ln:not(.me-h1b){padding-left:clamp(0px,6vw,100px)}
.me-h1b{margin-top:.42em}
.me-h1b>span{font-size:.42em;line-height:1.2;letter-spacing:-.01em;font-weight:400;color:var(--on-d2);max-width:22em}
.me-cta{margin-top:clamp(40px,4vw,64px);display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px}

/* the go-live date: four sources, four owners */
.gl-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px clamp(40px,7vw,120px);align-items:end}
.gl-head .h2{max-width:14em}
.gl-sub{font-family:var(--disp);font-style:italic;font-size:clamp(20px,1.8vw,27px);color:var(--on-d2)}
.gl{margin-top:clamp(56px,5vw,88px)}
.gl-cols,.gl li{display:grid;grid-template-columns:minmax(120px,.5fr) minmax(140px,.6fr) minmax(0,1.4fr);gap:16px clamp(24px,4vw,64px);align-items:baseline}
.gl-cols{padding-bottom:14px;font-size:12.5px;font-weight:700;color:var(--on-d3);border-bottom:1px solid rgb(0 0 0 / .18)}
.gl ol{list-style:none;margin:0;padding:0}
.gl li{padding:26px 0;border-bottom:1px solid rgb(0 0 0 / .09);opacity:0;translate:0 14px;transition:opacity .8s var(--ease),translate 1s var(--ex);transition-delay:calc(var(--k) * 260ms + .2s)}
.gl.in li,.ol:not(.js) .gl li,.ol.is-static .gl li{opacity:1;translate:0 0}
.gl-src{font-size:15px;font-weight:700;color:var(--on-d)}
.gl-own{position:relative;width:fit-content;font-family:var(--disp);font-weight:700;font-size:clamp(22px,2vw,30px);line-height:1.1;color:var(--fg)}
.gl-own::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:#0F0F0F;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ex);transition-delay:calc(var(--k) * 260ms + .8s)}
.gl.in .gl-own::after{transform:scaleX(1)}
.gl-none{color:var(--mute);font-style:italic;font-weight:400}
.gl-none::after{display:none}
.gl-say{font-family:var(--disp);font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:var(--on-d2);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.gl-dates{display:inline-flex;align-items:center;gap:6px}
.gl-dates i{width:22px;height:26px;border:1px solid rgb(0 0 0 / .35);border-radius:2px;background:linear-gradient(rgb(0 0 0 / .35),rgb(0 0 0 / .35)) 0 6px/100% 1px no-repeat}
.gl-dates b{margin-left:10px;padding:4px 10px;border:1px dashed rgb(0 0 0 / .35);border-radius:3px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--mute)}
.gl-end{margin-top:clamp(64px,6vw,104px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px clamp(40px,7vw,120px);align-items:end}
.gl-verdict{font-size:clamp(32px,3.6vw,58px);line-height:1.06;color:var(--fg)}
.gl-verdict span{display:block}
.gl-body{font-size:16px;line-height:1.72;color:var(--on-d2)}

/* six realities: one company, six wirings */
.rz-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px clamp(40px,7vw,120px);align-items:end}
.rz-head .lead{color:var(--on-d2)}
.rz{margin-top:clamp(56px,5vw,88px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.rz-list{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.rz-t{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--hair);transition:color .4s}
.rz-t b{font-family:var(--disp);font-weight:700;font-size:clamp(21px,1.8vw,27px);line-height:1.15;color:var(--mute2);transition:color .4s,translate .7s var(--ex)}
.rz-t span{font-size:14px;line-height:1.5;color:var(--mute);transition:color .4s}
.rz-t:hover b{color:var(--on-d2)}
.rz-t.on b{color:var(--fg);translate:10px 0}
.rz-t.on span{color:var(--on-d2)}
.rz-t:focus-visible{outline:2px solid #F26B21;outline-offset:2px}
.rz-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left}
.rz.run .rz-t.on .rz-bar{animation:rzfill var(--dur,6500ms) linear forwards}
@keyframes rzfill{to{transform:scaleX(1)}}
.rz-stage{position:sticky;top:120px}
.mg{display:block;width:100%;height:auto;overflow:visible}
.mg .e{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.1s var(--ex),opacity .4s var(--ease)}
.mg .e.alt{stroke-dasharray:.03 .025}
.mg .e.hot{stroke-width:2.6}
.mg .e.inf{stroke:rgb(255 255 255 / .75);stroke-width:2;stroke-dasharray:.02 .02}
.mg .e.loop{stroke:rgb(255 255 255 / .7)}
.mg .own{fill:#F0EFEE;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:opacity .4s,transform .6s var(--ex) .6s}
.mg .rc{fill:none;stroke:rgb(255 255 255 / .6);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s .6s}
.mg .th{stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s .7s}
.mg .n circle{fill:#000;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}
.mg .n text{font-family:var(--sans);font-size:13px;font-weight:700;fill:var(--on-d2)}
.mg[data-v="0"] .v0,.mg[data-v="1"] .v1,.mg[data-v="2"] .v2,.mg[data-v="3"] .v3,.mg[data-v="4"] .v4,.mg[data-v="5"] .v5{opacity:1;stroke-dashoffset:0}
.mg[data-v="4"] .own{transform:scale(1)}
.rz-ps{position:relative;margin-top:24px;min-height:120px}
.rz-p{position:absolute;inset:0 0 auto;font-size:16px;line-height:1.72;color:var(--on-d2);max-width:58ch;opacity:0;translate:0 10px;transition:opacity .5s var(--ease),translate .8s var(--ex)}
.rz-p.on{opacity:1;translate:0 0;transition-delay:.15s}

/* the rule */
.ru-h{font-size:clamp(40px,4.8vw,80px);line-height:1.02;max-width:14em}
.lvl{margin-top:clamp(56px,5vw,88px);display:flex;flex-direction:column;gap:6px;border-top:1px solid rgb(0 0 0 / .14)}
.lvl p{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,.6fr) minmax(0,1fr);align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid rgb(0 0 0 / .08);font-family:var(--disp);font-size:clamp(20px,1.9vw,28px);line-height:1.2;color:var(--fg)}
.lvl p span:first-child{text-align:right;font-weight:700}
.lvl p span:last-child{color:var(--on-d2)}
.lvl i{position:relative;height:1.5px;background:#0F0F0F;transform:scaleX(0);transition:transform 1.1s var(--ex) .3s}
.lvl i::before,.lvl i::after{content:"";position:absolute;top:-5px;width:1.5px;height:11px;background:#0F0F0F}
.lvl i::before{left:0}.lvl i::after{right:0}
.lvl.in i,.ol:not(.js) .lvl i,.ol.is-static .lvl i{transform:scaleX(1)}
.ru-b{margin-top:24px;font-family:var(--disp);font-style:italic;font-size:clamp(18px,1.5vw,22px);color:var(--on-d2)}
.tt{margin-top:clamp(64px,6vw,104px)}
.tt-hd,.tt li{display:grid;grid-template-columns:repeat(3,minmax(70px,.32fr)) minmax(0,2fr);gap:16px clamp(16px,2vw,32px);align-items:center}
.tt-hd{padding-bottom:14px;font-size:12.5px;font-weight:700;color:var(--on-d3);border-bottom:1px solid rgb(0 0 0 / .18)}
.tt ol{list-style:none;margin:0;padding:0}
.tt li{padding:26px 0;border-bottom:1px solid rgb(0 0 0 / .09)}
.tt-c{display:flex;gap:6px}
.tt-m{display:inline-block;width:20px;height:13px;border:1.5px solid #0F0F0F;transform:skewX(-29deg) scale(0);transition:transform .6s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--k) * 300ms + .3s)}
.tt-y{background:#0F0F0F}
.tt-n{background:transparent}
.tt-a{background:#0F0F0F}.tt-b{background:repeating-linear-gradient(90deg,#0F0F0F 0 2px,transparent 2px 4px)}.tt-c .tt-c,.tt-c{}
.tt-c .tt-c{background:transparent}
.tt-m.tt-c{background:transparent;border-style:dashed}
.tt.in .tt-m,.ol:not(.js) .tt-m,.ol.is-static .tt-m{transform:skewX(-29deg) scale(1)}
.tt-key .tt-m{transform:skewX(-29deg) scale(1);width:16px;height:10px;margin:0 8px 0 16px;vertical-align:-1px}
.tt-key .tt-m:first-child{margin-left:0}
.tt-v{font-size:16px;line-height:1.55;color:var(--on-d2)}
.tt-v b{display:block;margin-top:4px;font-family:var(--disp);font-weight:700;font-size:clamp(20px,1.7vw,25px);line-height:1.25;color:var(--fg)}
.tt-key{margin-top:16px;font-size:13px;color:var(--on-d3)}
.ru-end{margin-top:clamp(64px,6vw,104px);font-size:clamp(24px,2.4vw,36px);font-weight:400;line-height:1.3;max-width:30em;color:var(--on-d2)}
.ru-end em{color:var(--fg);font-weight:700;font-style:normal}

/* evidence to design */
.evd-h{max-width:13em}
.evd{margin-top:clamp(56px,5vw,88px);border-top:1px solid var(--hair2)}
.ev{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px clamp(40px,6vw,96px);padding:clamp(40px,4vw,64px) 0;border-bottom:1px solid var(--hair)}
.ev-v{font-size:clamp(52px,6vw,100px);line-height:.9;color:transparent;-webkit-text-stroke:1px rgb(255 255 255 / .45);transition:color 1s var(--ease),-webkit-text-stroke-color 1s}
.ev.in .ev-v,.ol:not(.js) .ev-v,.ol.is-static .ev-v{color:var(--fg);-webkit-text-stroke-color:transparent}
.ev-t p{font-size:clamp(16px,1.2vw,18px);line-height:1.72;color:var(--on-d2);max-width:58ch}
.ev-t .ev-say{margin-top:16px;font-family:var(--disp);font-style:italic;font-size:clamp(19px,1.6vw,24px);line-height:1.4;color:var(--fg)}
.ev-fig{grid-column:1/-1;margin:24px 0 0}
.pv{display:block;width:100%;max-width:900px;height:auto;margin-left:auto;overflow:visible}
.pv-l{fill:none;stroke:rgb(255 255 255 / .16);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .4s,stroke-width .4s}
.pv-s{font-family:var(--disp);font-size:17px;fill:var(--on-d2);transition:fill .4s}
.pv-d{fill:var(--on-d3)}
.pv-f{cursor:pointer;outline:none}
.pv-f circle{fill:#000;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;transition:fill .3s}
.pv-f p{margin:0;font-family:var(--disp);font-size:16px;line-height:1.35;color:var(--on-d2);transition:color .3s}
.pv-f:hover p,.pv-f:focus-visible p,.pv-f.on p{color:var(--fg)}
.pv-f.on circle{fill:#fff}
.pv[data-f="0"] .f0,.pv[data-f="1"] .f1,.pv[data-f="2"] .f2,.pv[data-f="3"] .f3{stroke:#fff;stroke-width:1.6}
.pv .pv-s.on{fill:var(--fg)}

/* AI: the trail with no single owner */
.ai{list-style:none;margin:clamp(56px,5vw,88px) 0 0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ai li{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding-top:40px}
.ai-n{position:absolute;left:0;top:0;width:18px;height:18px;border:1.5px solid #fff;background:#000;transform:skewX(-29deg)}
.ai li b{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2vw,30px);color:var(--fg)}
.ai li span{font-family:var(--disp);font-style:italic;font-size:clamp(18px,1.5vw,22px);color:var(--on-d2)}
.ai-trail{position:absolute;left:18px;right:calc(25% - 6px);top:8px;height:2px;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(24px + 18px)}
.ai-trail i{height:2px;background:#fff;transform-origin:left;animation:trail 9s var(--ease) infinite;animation-delay:calc(var(--j,0) * 1.4s)}
.ai-trail i:nth-child(2){--j:1}.ai-trail i:nth-child(3){--j:2}
@keyframes trail{0%{transform:scaleX(0);opacity:1}12%{transform:scaleX(1);opacity:1}40%{opacity:1}62%,100%{transform:scaleX(1);opacity:.06}}
.ai-cap{margin-top:48px;max-width:40em;font-family:var(--disp);font-size:clamp(21px,1.9vw,29px);line-height:1.35;color:var(--fg)}
.ai-b{margin-top:clamp(48px,5vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px clamp(40px,6vw,96px);padding-top:32px;border-top:1px solid var(--hair)}
.ai-b p{font-size:16px;line-height:1.72;color:var(--on-d2)}

/* where the method runs */
.wr{margin-top:clamp(56px,5vw,88px);border-top:1px solid var(--hair2)}
.wr-r{position:relative;display:grid;grid-template-columns:56px minmax(0,.9fr) minmax(0,1.3fr) auto 20px;gap:18px clamp(20px,3vw,48px);align-items:center;padding:30px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--on-d2);transition:color .4s}
.wr-r .mk{font-size:46px;color:var(--fg);opacity:.85}
.wr-r b{font-family:var(--disp);font-weight:700;font-size:clamp(20px,1.7vw,26px);line-height:1.15;color:var(--fg)}
.wr-s{font-size:15px;line-height:1.6}
.wr-c{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.wr-c em{font-family:var(--disp);font-size:13px;color:var(--on-d3)}
.sx{display:flex;gap:5px}
.sx i{width:14px;height:9px;border:1px solid rgb(255 255 255 / .35);transform:skewX(-29deg);transition:background-color .5s}
.sx i.on{background:#F0EFEE;border-color:#F0EFEE}
.wr-r>.ic{font-size:18px;color:var(--fg);opacity:0;translate:-8px 0;transition:opacity .4s,translate .6s var(--ex)}
.wr-r::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ex)}
.wr-r:hover{color:var(--on-d)}
.wr-r:hover::after{transform:scaleX(1)}
.wr-r:hover>.ic{opacity:1;translate:0 0}

.faq-a a{color:var(--fg);text-underline-offset:3px}

@media (max-width:1100px){
.gl-head,.gl-end,.rz-head,.rz,.ev,.ai-b{grid-template-columns:minmax(0,1fr)}
.rz-stage{position:relative;top:0;order:-1}
.ai{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
.ai-trail{display:none}
.wr-r{grid-template-columns:48px minmax(0,1fr) 20px}
.wr-s,.wr-c{grid-column:2}
.wr-c{align-items:flex-start;flex-direction:row;align-items:center;gap:12px}
.wr-r>.ic{grid-column:3;grid-row:1}
.pv{max-width:none}
}
@media (max-width:760px){
.me-h1 .ln+.ln:not(.me-h1b){padding-left:0}
.gl-cols{display:none}
.gl li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:6px}
.gl-say{grid-column:1/-1}
.lvl p{grid-template-columns:minmax(0,1fr);gap:8px}
.lvl p span:first-child{text-align:left}
.lvl i{width:60px}
.tt-hd{display:none}
.tt li{grid-template-columns:repeat(3,auto) minmax(0,1fr);row-gap:12px}
.tt-v{grid-column:1/-1}
.ai{grid-template-columns:minmax(0,1fr)}
.pv-s{font-size:22px}
.pv-f p{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
.ol *,.ol *::before,.ol *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
.pv-m{display:none;list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.pv-m li{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-bottom:1px solid var(--hair)}
.pv-m b{font-family:var(--disp);font-weight:400;font-size:19px;line-height:1.35;color:var(--fg)}
.pv-m span{font-size:13.5px;color:var(--on-d3)}
@media (max-width:760px){.pv{display:none}.pv-m{display:block}}

/* Phone pass (6 Oct 2026): the company graph scales to about half size, so its 13px labels landed near 7px */
@media (max-width:760px){.mg .n text{font-size:23px}.mg .n circle{stroke-width:2}}

.ai-b a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Evidence-state descriptions (9 Oct 2026): stacked in one grid cell so the box fits the longest instead of overlapping what follows. */
.rz-ps{display:grid}
.rz-p{position:relative;inset:auto;grid-area:1/1}