/* The Operating System as one drawing (rebuild 02.10.2026): Layer 1 chapter 04 (.j-os), Explore page (#xMap), Layer 2 footer (.dfoot).
   A form of fine lines above an index table. Black and white only, no shade, no grey. Sizes follow the width of the drawing (container units). */
.sy{container-type:inline-size;position:relative;color:#000;--sp:1.5cqw}
.sy-form{position:relative;height:var(--fh,18cqw)}
.sy-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.sy-ln,.sy-lh{fill:none;stroke:#000;stroke-width:.8}
.sy-lh{stroke-width:1.5;opacity:0;transition:opacity .55s}.sy.f .sy-lh,.sy.hold .sy-lh{opacity:1}
.sy-ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.8s cubic-bezier(.2,.7,.1,1) calc(var(--i)*.014s)}
.sy.go .sy-ln{stroke-dashoffset:0}.sy.done .sy-ln{stroke-dasharray:none;transition:none}
.sy-tab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.27fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.27fr) minmax(0,1fr);border-top:1.4px solid #000;border-bottom:1.4px solid #000}
.sy-c{position:relative;min-width:0;border-left:1px solid #000;transition:background .5s,color .5s}.sy-c:first-child{border-left:0}
.sy-d{padding:var(--sp);padding-bottom:calc(var(--sp)*.6)}.sy-d.on{background:#000;color:#fff}
.sy-x{display:flex;align-items:center;justify-content:center;padding-left:1.2cqw;background:#fff linear-gradient(90deg,#000 0 7px,#fff 7px 12px,#000 12px 13px,#fff 13px 17px,#000 17px 18px,#fff 18px) no-repeat;color:#000;cursor:pointer}
.sy-x::after{content:"+";position:absolute;left:calc(50% + 7px);top:12px;transform:translateX(-50%);width:1.9em;height:1.9em;border:1.4px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;font:300 max(19px,1.5cqw)/1 var(--sans);transition:transform .5s,background .45s,color .45s}
.sy-x.on,.sy-x:hover{background:#000;color:#fff}.sy-x:hover::after,.sy-x.on::after{transform:translateX(-50%) rotate(90deg)}
.sy-x .sy-k{padding-top:calc(1.9em + 1.6cqw)}
.sy-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:.7em;width:100%;text-align:left;color:inherit;cursor:pointer;font-size:var(--hn,2cqw)}
.sy-l{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border:1px solid currentColor;border-radius:50%;font:600 .42em/1 var(--sans);letter-spacing:0;margin-top:.1em}
.sy-h .n{font-weight:800;font-stretch:106%;letter-spacing:-.045em;line-height:1.02;background:none;text-transform:none}
.sy-h .plus{font-size:1.1em;font-weight:300;line-height:1;transition:transform .5s}.sy-h:hover .plus,.sy-h:focus-visible .plus{transform:rotate(90deg)}
.sy ul{list-style:none;margin:calc(var(--sp)*.9) 0 0;padding:0}
.sy li button{display:grid;grid-template-columns:2.7em minmax(0,1fr) auto;align-items:baseline;width:calc(100% + var(--sp)*2);margin:0 calc(var(--sp)*-1);padding:var(--rp,.55em) var(--sp);border-top:1px solid currentColor;text-align:left;color:inherit;cursor:pointer;font-size:var(--rn,1.7cqw);font-weight:700;letter-spacing:-.035em;line-height:1.1;transition:background .35s,color .35s}
.sy li button .ad{font-size:.5em;font-weight:700;letter-spacing:.1em}.sy li button i{font-style:normal;font-weight:300;font-size:1.1em;transition:transform .5s}
.sy li button:hover,.sy li button:focus-visible{background:#000;color:#fff}.sy-d.on li button:hover,.sy-d.on li button:focus-visible{background:#fff;color:#000}
.sy li button:hover i{transform:rotate(90deg)}.sy li button[aria-current] span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
.sy-ap{margin:.9em 0 0;font-size:max(13px,var(--an,1.05cqw));line-height:1.4;letter-spacing:-.005em;max-width:24em}
.sy-k{display:flex;align-items:center;gap:1.4em;writing-mode:vertical-rl;transform:rotate(180deg);padding:1.4em 0;color:inherit;cursor:pointer;font-size:var(--kn,1.05cqw)}
.sy-k .n{font-weight:800;font-stretch:104%;letter-spacing:.26em;text-transform:uppercase;font-size:1em}.sy-k .ab{font-size:.8em;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.sy :focus-visible{outline:2px solid currentColor;outline-offset:-3px}
.sy-c.here::before{content:"";position:absolute;left:0;right:0;top:-1.4px;height:5px;background:#000;z-index:2}
.yh{position:absolute;left:-1px;bottom:calc(100% + 1.4px);margin:0;padding:6px 12px 5px;background:#000;color:#fff;font:700 11px/1 var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;z-index:3}
/* sizes per place */
.sy-l1{--fh:21cqw;--hn:1.75cqw;--rn:1.7cqw;--rp:.5em;--kn:1.05cqw;--sp:1.25cqw}
.sy-ex{--fh:14.5cqw;--hn:2.15cqw;--rn:1.95cqw;--rp:.5em;--an:1.02cqw;--kn:1.2cqw;--sp:1.6cqw}
.sy-ft{--fh:8.5cqw;--hn:1.55cqw;--rn:1.25cqw;--rp:.45em;--kn:.9cqw;--sp:1.1cqw}
.sy-l1 .sy-h,.sy-l1 li button{min-height:0}
@media (prefers-reduced-motion:reduce){.sy-ln{stroke-dashoffset:0;stroke-dasharray:none;transition:none}}
/* Layer 1 chapter 04, inside the pinned stage (the stage sets every child absolute, so normal flow is restored here) */
.cv .j-os,.j-os{position:absolute;opacity:0;display:flex;flex-direction:column;color:#000}
.cv .j-os *{position:static}.cv .j-os .sy,.cv .j-os .sy-form,.cv .j-os .sy-c{position:relative}.cv .j-os .sy-svg{position:absolute}.cv .j-os .sy-c .yh{position:absolute}.cv .j-os .os-lead{position:absolute}.cv .j-os .os-ex{position:relative}
.cv .j-os .os-lead{right:0;top:-168px;width:500px;margin:0;font-size:24px;line-height:1.3;letter-spacing:-.012em}
.cv .j-os .os-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:auto;padding-top:22px;opacity:0;transition:opacity 1s 3s}
.j-os .sy.go~.os-cta{opacity:1}
.cv .j-os .os-cl{margin:0;font-family:var(--serif);font-style:italic;font-size:30px;letter-spacing:-.01em;line-height:1.1}
.cv .j-os .os-ex{display:flex;align-items:center;gap:26px;padding:15px 22px 15px 28px;border:1.4px solid #000;background:#fff;color:#000;cursor:pointer;font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;transition:background .45s,color .45s}
.cv .j-os .os-ex b{font-size:22px;font-weight:300;letter-spacing:0;line-height:1;transition:transform .5s}
.cv .j-os .os-ex:hover,.cv .j-os .os-ex:focus-visible{background:#000;color:#fff}.cv .j-os .os-ex:hover b,.cv .j-os .os-ex:focus-visible b{transform:rotate(90deg)}
/* Explore */
#approach #xMap{grid-area:m;margin-top:2.4vh;width:100%;display:block;grid-template-columns:none;grid-template-areas:none;column-gap:0;row-gap:0}
#approach .inner{padding-top:1.2vh;padding-bottom:3vh;row-gap:0}
#approach .dkick .t{font-size:clamp(52px,min(7.3vw,calc((100svh - 330px)/4.6)),150px);line-height:.9;letter-spacing:-.055em;font-stretch:108%}
#approach .aentry{color:#000;font-size:clamp(15px,1.05vw,19px);max-width:24em;padding-bottom:.5em}
/* footer */
#deep .inner{padding-bottom:0}#deep .dconn{display:none}
.dfoot{--fu:min(1vw,calc((100svh - 230px)/26));position:relative;margin:0 calc(var(--m) * -1);padding:clamp(40px,6vh,76px) var(--m) clamp(24px,4vh,48px);background:#fff;color:#000;border-top:1.6px solid #000}
.df-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:calc(1.6*var(--fu));padding-bottom:calc(1.2*var(--fu));border-bottom:1px solid #000}
.df-t{margin:0;font-size:calc(5.2*var(--fu));font-weight:850;font-stretch:108%;letter-spacing:-.05em;line-height:.9}
.df-s{margin:0;font-family:var(--serif);font-style:italic;font-size:calc(2.2*var(--fu));letter-spacing:-.005em}
.df-sy{padding-top:calc(2.2*var(--fu))}
.df-nav{display:flex;justify-content:center;flex-wrap:wrap;margin-top:calc(2.4*var(--fu));padding-top:calc(1.6*var(--fu));border-top:1px solid #000}
.df-nav button{padding:6px calc(2*var(--fu));border-left:1px solid #000;font:600 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:inherit;position:relative}.df-nav button:first-child{border-left:0}
.df-nav button::after{content:"";position:absolute;left:calc(2*var(--fu));right:calc(2*var(--fu));bottom:-2px;height:2px;background:#000;transform:scaleX(0);transform-origin:left;transition:transform .45s}.df-nav button:hover::after,.df-nav button.cur::after{transform:scaleX(1)}
/* phones */
@media (max-width:760px){
  .sy-l1{--fh:92px;--hn:22px;--rn:15px;--rp:.35em;--sp:0px}.sy-ex{--fh:120px;--hn:26px;--rn:20px;--rp:.4em;--an:14px;--sp:0px}.sy-ft{--fh:70px;--hn:20px;--rn:15px;--rp:.35em;--sp:0px}
  .sy-tab{display:block;border-top:1.4px solid #000;border-bottom:0}
  .sy-c{border-left:0;border-top:1.4px solid #000}.sy-c:first-child{border-top:0}
  .sy-d{padding:14px 0 10px}.sy-ap{font-size:14px;margin:.7em 0 .2em}
  .sy ul{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px}
  .sy li button{display:flex;gap:7px;width:auto;margin:0;padding:var(--rp) 0;border-top:0;min-height:32px;align-items:baseline}.sy li button i{display:none}.sy li button:hover,.sy li button:focus-visible{background:none;color:inherit}
  .sy li button .ad{font-size:11px}
  .sy-x{justify-content:flex-start;padding:10px 12px 10px 18px;margin:2px 0;background:#fff;border-left:6px solid #000;display:flex}.sy-x::after{position:static;transform:none;margin-left:auto;width:30px;height:30px;font-size:20px}.sy-x:hover,.sy-x.on{background:#000;color:#fff}.sy-x .sy-k{padding-top:0}
  .sy-k{writing-mode:horizontal-tb;transform:none;padding:0;gap:14px;font-size:14px;flex-direction:row}.sy-k .n{letter-spacing:.2em}
  .sy-c.here::before{display:none}.yh{position:static;display:inline-block;margin:0 0 8px}
  .df-head{display:block}.df-t{font-size:44px}.df-s{display:block;margin-top:6px;font-size:20px}
  .df-nav{margin-top:26px;flex-direction:column;align-items:flex-start}.df-nav button{padding:10px 0;border-left:0!important}.df-nav button::after{left:0;right:auto;width:2.2em}
  .cv .j-os .os-lead,.cv .j-os .os-cl{display:none}.cv .j-os .os-cta{opacity:1;padding-top:14px}.cv .j-os .os-ex{width:100%;justify-content:space-between;padding:13px 18px}
  #approach .inner{padding-top:2vh}#approach .dkick .t{font-size:clamp(46px,14vw,64px)}#approach .lbl.loc .dctx{display:none}
}

/* names sit in the open centre of each swelling */
@media (min-width:761px){
  .sy-h{position:absolute;left:0;right:0;top:calc(var(--fh)*-.5);transform:translateY(-50%);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25em .5em;text-align:center;width:auto;padding:0 8%;z-index:2}
  .sy-h .n{text-align:center}.sy-h .plus{margin-left:.1em}
  .sy-d{padding-top:calc(var(--sp)*.4)}
  .sy-d.on{background:none;color:#000}.sy-d.on li button{border-color:#000}
  .sy-d.on .sy-h .n{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
  .sy-c.here::before{display:none}
}
@media (min-width:761px){.cv .j-os .sy-h{position:absolute}.sy-x .sy-k{padding-top:1.4em;padding-bottom:68px}}

.sy-l1 .sy-k .ab,.sy-ft .sy-k .ab{display:none}.sy-k .n{letter-spacing:.18em}@media (min-width:761px){.sy-x .sy-k{padding-bottom:78px}}

@media (max-width:760px){.sy-l1{--fh:64px;--hn:20px}.sy-d{padding:9px 0 4px}.sy-x{padding:6px 10px 6px 16px;margin:0}.sy-x::after{width:26px;height:26px}.sy li button{min-height:28px}.cv .j-os .os-cta{padding-top:8px}.cv .j-os .os-ex{padding:11px 16px}}

/* ---- Layer 1 chapter 04, desktop composition (.j-cm): everything drawn in white, the stage blends it ---- */
.j-cm{position:absolute;left:0;top:0;width:1440px;height:900px;mix-blend-mode:difference;color:#fff;--hn:30px;--rn:20px;--sp:0px}
.cv .j-cm *{position:static}
.cv .j-cm .cm-a,.cv .j-cm .cm-dyn,.cv .j-cm .cm-svg{position:absolute}
.cv .j-cm .cm-dyn{left:0;top:0;width:1440px;height:900px}.cv .j-cm .cm-svg{left:0;top:0;width:1440px;height:900px;overflow:visible}
.cm-ln,.cm-lh{fill:none;stroke:#fff;stroke-width:.8}.cm-lh{stroke-width:1.7;opacity:0;transition:opacity .5s}.j-cm.f .cm-lh{opacity:1}
.cv .j-cm .cm-pill{left:48px;top:68px;border-color:#fff;color:#fff}
.cv .j-cm .cm-title{left:46px;top:102px;margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:82px;line-height:.95;letter-spacing:-.025em;white-space:nowrap}
.cv .j-cm .cm-sub{left:50px;top:196px;width:290px;margin:0;font-size:16px;line-height:1.38;letter-spacing:-.005em}
.cv .j-cm .cm-sys{left:26px;bottom:-30px;margin:0;font-size:268px;font-weight:850;font-stretch:108%;letter-spacing:-.065em;line-height:.8;white-space:nowrap}
.cv .j-cm .cm-quote{left:660px;top:78px;width:420px;margin:0}.cm-quote p{margin:0;font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.2;letter-spacing:-.012em}
.cv .j-cm .cm-lb{display:flex;justify-content:center;opacity:0}
.cv .j-cm .cm-lb .sy-h{position:static;transform:none;width:auto;padding:0;top:auto;left:auto;right:auto;gap:.2em .5em;justify-content:center;flex-wrap:wrap}
.cm-lb[data-d="0"]{--hn:40px}.cm-lb[data-d="1"]{--hn:33px}.cm-lb[data-d="2"]{--hn:24px}.cm-lb[data-d="3"]{--hn:25px}
.cv .j-cm .cm-ls{list-style:none;margin:0;padding:0}.j-cm .cm-ls li button{border-color:#fff}
.j-cm li button:hover,.j-cm li button:focus-visible{background:#fff;color:#000}.j-cm .sy-h:hover .n,.j-cm .on .sy-h .n{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.cv .j-cm .cm-pn{opacity:0}
.cv .j-cm .cm-k{display:flex;flex-direction:column;align-items:center;gap:16px;width:32px;cursor:pointer;color:#fff}
.cv .j-cm .cm-pl{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1.4px solid #fff;border-radius:50%;font:300 22px/1 var(--sans);transition:background .4s,color .4s,transform .5s}
.cv .j-cm .cm-k .n{writing-mode:vertical-rl;transform:rotate(180deg);font:700 12px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase}
.cv .j-cm .cm-k:hover .cm-pl,.cv .j-cm .cm-k:focus-visible .cm-pl,.cm-pn.on .cm-pl{background:#fff;color:#000;transform:rotate(90deg)}
.cv .j-cm .cm-go{left:1090px;top:650px;width:350px;height:250px;display:flex;flex-direction:column;justify-content:space-between;padding:30px 34px 32px;text-align:left;background:#fff;color:#000;cursor:pointer;transition:background .45s,color .45s,box-shadow .45s}
.cm-gq{font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.15;letter-spacing:-.01em}
.cm-gl{display:flex;align-items:center;justify-content:space-between;font:700 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}.cm-gl b{font-size:30px;font-weight:300;letter-spacing:0;line-height:1;transition:transform .5s}
.cv .j-cm .cm-go:hover,.cv .j-cm .cm-go:focus-visible{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff}.cm-go:hover .cm-gl b{transform:rotate(90deg)}
.stage.sysOn .j-cm button{pointer-events:auto}
@media (min-width:761px){.cv .j-os{display:none}}
@media (max-width:760px){.cv .j-cm{display:none}}

/* ---- refine pass (02.10.2026): Explore and footer. Systemlines expressive, navigation lines quiet; connectors are joints, not blocks ---- */
@media (min-width:761px){
  .sy-ln,.sy-lh{stroke-width:.6}.sy-lh{stroke-width:1.3}
  .sy-tab{grid-template-columns:minmax(0,1fr) minmax(0,.17fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.17fr) minmax(0,1.24fr);border-top:1px solid #000;border-bottom:0}
  .sy-c{border-left:0}
  .sy-d{padding:calc(var(--sp)*.7) calc(var(--sp)*1.1) 0}
  .sy ul{margin-top:calc(var(--sp)*1.5)}
  .sy li button{grid-template-columns:2.5em minmax(0,1fr) auto auto;width:calc(100% + var(--sp)*2.2);margin:0 calc(var(--sp)*-1.1);padding:.78em calc(var(--sp)*1.1);border-top:.5px solid #000;font-weight:650}
  .sy li button .ad{font-size:.42em;font-weight:500;letter-spacing:.14em}
  .sy li button i{font-size:.8em;font-weight:200}
  .sy li button[aria-current]{border-top:2px solid #000}.sy li button[aria-current] span{text-decoration:none}
  .sy li button:has(.yh) i{display:none}
  .yh{position:static;display:inline-flex;align-items:center;margin:0 0 0 .8em;padding:0;background:none;color:inherit;font:700 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
  .yh::before{content:"";width:5px;height:5px;background:currentColor;margin-right:.7em}
  .sy-h .yh{flex-basis:100%;justify-content:center;margin:.6em 0 0}.sy-k .yh{margin:1em 0 0}
  .sy-ap{max-width:19em;margin:calc(var(--sp)*.55) 0 0;line-height:1.5;font-size:max(13px,var(--an))}
  .sy-ex{--rn:1.8cqw;--an:.98cqw}
  .sy-ex ul{margin-top:calc(var(--sp)*1.9)}
  /* connectors: a hairline joint with a small circle, the label interrupts the line */
  .sy-x,.sy-x.on,.sy-x:hover{background:none;color:#000;padding:0;display:flex;justify-content:center;align-items:flex-start}
  .sy-x::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#000}
  .sy-x::after{left:50%;top:12px;transform:translateX(-50%);width:24px;height:24px;font:300 17px/1 var(--sans);background:#fff;color:#000;z-index:1}
  .sy-x:hover::after,.sy-x.on::after{background:#000;color:#fff;transform:translateX(-50%) rotate(90deg)}
  .sy .sy-x .sy-k{position:relative;z-index:1;margin-top:58px;padding:.9em 0;background:#fff;font-size:var(--kn)}
  .sy-x .sy-k .n{letter-spacing:.22em;font-weight:700}
  /* Explore composition */
  #approach .inner{grid-template-columns:1fr;grid-template-areas:"t" "m"}
  #approach .dkick{margin:0 0 clamp(40px,8vh,92px)}
  #approach .dkick .t{font-size:clamp(40px,min(4.8vw,calc((100svh - 330px)/6)),96px);letter-spacing:-.05em;line-height:.95}
  .sy-ex .sy-form>.aentry{position:absolute;left:var(--neckx,50%);bottom:calc(100% + 1.2cqw);width:25cqw;max-width:none;margin:0;padding:0;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.5cqw,28px);line-height:1.22;letter-spacing:-.01em;color:#000}
  .sy-ex .sy-form>.aentry em{font-style:italic;color:#000}
  .sy-ex .sy-form>.aentry::after{content:"";position:absolute;left:0;top:calc(100% + .7em);width:1px;height:calc(var(--fh)*.3 + 1.2cqw);background:#000}
  #approach .bar .back,#approach .bar .lbl{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
  #approach .bar .dctx{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:15px}
  /* footer */
  .df-head{align-items:flex-end;margin-bottom:calc(1.2*var(--fu))}
  .df-t{font-size:calc(3.4*var(--fu));letter-spacing:-.045em}.df-s{font-size:calc(1.8*var(--fu))}
  .df-sy{padding-top:calc(2.8*var(--fu))}
  .sy-ft{--hn:1.45cqw;--rn:1.2cqw;--fh:8.5cqw;--kn:.85cqw}
  .sy-ft li button{padding:.95em calc(var(--sp)*1.1)}
}
@media (max-width:760px){.sy li button,.sy-h{min-height:44px;align-items:center}.sy-x{min-height:44px}}
@media (min-width:761px){
  .sy-ex{--fh:13cqw;--rn:1.6cqw;--hn:2cqw}
  .sy-ex li button{padding:.66em calc(var(--sp)*1.1)}
  .sy-ex ul{margin-top:calc(var(--sp)*1.5)}
  .sy-ft .sy-d{padding-top:0}.sy-ft ul{margin-top:calc(var(--sp)*.6)}
  .sy-ft li:first-child button:not([aria-current]){border-top-color:transparent}
}
@media (max-width:760px){
  .yh{display:inline-flex;align-items:center;margin:0 0 0 12px;padding:0;background:none;color:inherit;font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}.yh::before{content:"";width:5px;height:5px;background:currentColor;margin-right:.7em}
  #approach .dkick{margin-bottom:18px}
}

/* ---- Layer 1 chapter 04, composition refinement: one frame, one voice, four equal names ---- */
.cv .j-cm .cm-pill{left:48px;top:64px}
.cv .j-cm .cm-quote{left:48px;top:108px;width:400px}.cm-quote p{font-size:27px;line-height:1.2}
.cv .j-cm .cm-lock{left:48px;bottom:48px;margin:0;display:flex;align-items:baseline;gap:.2em;white-space:nowrap}
.cv .j-cm .cm-lock em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:66px;letter-spacing:-.02em;line-height:1}
.cv .j-cm .cm-lock b{font-weight:850;font-stretch:108%;font-size:152px;letter-spacing:-.06em;line-height:.8}
.cm-lb[data-d="0"],.cm-lb[data-d="1"],.cm-lb[data-d="2"],.cm-lb[data-d="3"]{--hn:26px}
.cm-ln,.cm-lh{stroke-width:.9}.cm-lh{stroke-width:1.8}
.cv .j-cm .cm-go{left:1092px;top:728px;width:300px;height:124px;padding:20px 24px 22px}
.cm-gq{font-size:19px;line-height:1.18}.cm-gl{font-size:11.5px}.cm-gl b{font-size:24px}
.cv .j-cm .cm-lb .sy-h{flex-direction:column;gap:.55em}.cm-lb .sy-h .plus{display:none}.cm-lb .sy-h .sy-l{margin:0}
.cv .j-cm .cm-k .n{margin-top:50px}
.cv .j-cm .cm-lock{gap:.3em}
.cm-quote p{font-size:25px}
.cv .j-cm .cm-lb{height:68px;align-items:center}
.cm-lb[data-d="0"],.cm-lb[data-d="1"],.cm-lb[data-d="2"],.cm-lb[data-d="3"]{--hn:24px}.cm-lb .sy-h .n{letter-spacing:-.04em}

/* connectors as slim modules of their own: framed, a clear plus, a stronger label, the whole module clickable */
@media (min-width:761px){
  .sy-tab{grid-template-columns:minmax(0,1fr) minmax(0,.23fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.23fr) minmax(0,1.24fr)}
  .sy-x{border:1px solid #000;margin:0 calc(var(--sp)*.45) calc(var(--sp)*.5);transition:background .4s,color .4s}
  .sy-x::before{display:none}
  .sy-x::after{top:14px;width:32px;height:32px;font:300 22px/1 var(--sans);background:transparent;color:inherit;border:1.4px solid currentColor}
  .sy .sy-x .sy-k{position:absolute;inset:0;margin:0;padding:64px 0 18px;background:none;justify-content:center;align-items:center;color:inherit;font-size:max(12.5px,var(--kn))}
  .sy-x .sy-k .n{font-weight:800;letter-spacing:.2em}
  .sy-ex .sy-x .sy-k .ab,.sy-ft .sy-x .sy-k .ab{display:inline-block;font-size:.78em;font-weight:600;letter-spacing:.18em}
  .sy-x:hover,.sy-x:focus-within,.sy-x.on{background:#000;color:#fff}
  .sy-x:hover::after,.sy-x:focus-within::after,.sy-x.on::after{background:#fff;color:#000;border-color:#fff;transform:translateX(-50%) rotate(90deg)}
  .sy-ex{--kn:1.25cqw}.sy-ft{--kn:.95cqw}
  .sy-x .yh{margin:1em 0 0}
}
/* Layer 1: the connector label a little stronger as well */
.cv .j-cm .cm-pl{width:36px;height:36px;font-size:24px}.cv .j-cm .cm-k{width:36px}.cv .j-cm .cm-k .n{font-size:13px;letter-spacing:.26em}
.cv .j-cm .cm-pn[data-k]{margin-left:-2px}
@media (min-width:761px){.sy .sy-x .sy-k{padding:18px 0 64px}}
@media (min-width:761px){
  .sy-ft .sy-x .sy-k .ab{display:none}.sy-ft .sy-x .sy-k .n{letter-spacing:.14em;font-size:.92em}
  .sy-ft{--kn:.85cqw}
  .sy-ft .sy-x{margin-bottom:0}
  .sy .sy-x .sy-k{padding:10px 0 62px}
}
.sy-x .sy-k .ab,.sy-x .sy-k .n{white-space:nowrap}
@media (min-width:761px){
  .sy-ex .sy-x{min-height:320px}.sy-ft .sy-x{min-height:220px}.sy-l1 .sy-x{min-height:230px}
  .sy .sy-x .sy-k{padding:12px 0 74px}
  .sy-x .sy-k .ab{margin-top:.2em}
  .sy-d.here-dim{box-shadow:inset 0 2px 0 #000}
  .sy-d>.yh{display:flex;margin:calc(var(--sp)*.6) 0 calc(var(--sp)*.2)}
  .sy-ft{--fh:9.5cqw}
}
/* the old Explore label style in home.css (#xMap .yh) must not win here */
#approach #xMap .yh{display:inline-flex;align-items:center;padding:0;border-radius:0;background:none;color:inherit;outline:0;font:700 9.5px/1 var(--sans);font-stretch:100%;font-variation-settings:normal;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;writing-mode:horizontal-tb;transform:none;position:static}
#approach #xMap .yh::before{content:"";width:5px;height:5px;background:currentColor;margin-right:.7em}
#approach #xMap .sy-d>.yh{display:flex;margin:calc(var(--sp)*.6) 0 calc(var(--sp)*.2)}
#approach #xMap .sy li .yh{margin:0 0 0 .8em}
#approach #xMap .sy-x .sy-k .yh{writing-mode:vertical-rl;margin:1em 0 0}
#approach #xMap .sy li .yh,.sy li .yh{margin-left:1.5em}

/* v3 point 9: the chapter sentence has its own generous text area at the top; the entry note sits small beneath the map */
.cv .j-cm .cm-sys{left:48px;top:112px;width:480px;white-space:normal;margin:0;font-size:33px;line-height:1.14;letter-spacing:-.022em;font-weight:300;color:#fff}
.cv .j-cm .cm-quote{left:48px;top:704px;width:344px;white-space:normal}
.cm-quote p{font-size:16px;line-height:1.26;letter-spacing:0}
/* v3 M06: sub codes (A.1, B.1 ...) stay readable at every size */
.sy li button .ad{font-size:max(13px,.5em)!important;opacity:1!important}
/* v3 point 10: the full explanation of each dimension reads at body size */
.sy-ex{--an:1.22cqw}.sy-ex .sy-ap{max-width:21em;line-height:1.38}
@media (max-width:760px){.sy-ex{--an:15px}}
/* v3 M01 + point 11: the letter of each dimension is a solid code disc, so A, B, C, D read first */
.sy-l{background:#000;color:#fff;width:1.55em;height:1.55em;font:700 .6em/1 var(--sans);border:0}
.sy-l{-webkit-text-fill-color:#fff}
.j-cm .sy-l{background:#fff;color:#000;-webkit-text-fill-color:#000}
.yh{font-size:max(12px,1em)!important}.sy-k .n{font-size:max(12px,1em)}

/* ===== v3 hierarchy pass: points 8 to 11 ===== */
/* 8 codes: every sub code is an outlined pill, chapter numbers in the rail are heavy */
.sy li button{grid-template-columns:4.2em minmax(0,1fr) auto!important}
.sy li button .ad{display:inline-block;width:max-content;border:1.5px solid currentColor;border-radius:20px;padding:2px 9px!important;font-size:13px!important;font-weight:700!important;letter-spacing:.06em!important;opacity:1!important;line-height:1.3}
.j-cm li button .ad{border-color:#fff}
#rail button b{font-weight:800;font-size:14px;letter-spacing:.1em}
/* 10 + 11 each dimension opens its column with a black field, the full explanation and its sub targets sit directly beneath */
.sy-dh{display:flex;align-items:center;gap:.7em;margin:0 0 .2em;padding:.62em var(--sp,1em);background:#000;color:#fff;font-size:max(15px,1.45cqw)}
.sy-dh b{font-weight:800;letter-spacing:-.01em}
.sy-dh .sy-l{background:#fff!important;color:#000!important;-webkit-text-fill-color:#000!important;font-size:.72em!important;width:1.7em;height:1.7em}
.sy-ft .sy-dh{font-size:max(13px,1.15cqw);padding:.5em var(--sp,1em)}
.sy-ex .sy-dh{margin-top:1.8cqw}
.sy-ex .sy-ap{margin-top:1em;padding-bottom:.4em}
/* current location: the whole row turns black, unmistakable */
.sy li button[aria-current]{background:#000!important;color:#fff!important}
.sy li button[aria-current] .ad{border-color:#fff}
.sy li button[aria-current] .yh{color:#fff!important;background:none!important}
.sy-d.here-dim .sy-dh{outline:3px solid #000;outline-offset:3px}
#approach #xMap .sy li button .yh,.sy li button .yh{grid-column:3;grid-row:1;justify-self:end;margin:0!important;font-size:12px!important}
.sy-ex .sy-dh,.sy-ft .sy-dh{white-space:nowrap}.sy-ex .sy-dh{font-size:max(14px,1.2cqw)}
.j-cm li button{grid-template-columns:3.1em minmax(0,1fr) auto!important}
.j-cm li button .ad{font-size:12px!important;padding:1px 7px!important}

/* ===== v3 rebuild 2, Layer 1 chapter 04: one central composition, open interior ===== */
.cv .j-cm .cm-dyn{transform:translateX(52px)}
.cv .j-cm .cm-pill{left:48px;top:62px}
.cv .j-cm .cm-svg{-webkit-mask-image:linear-gradient(180deg,transparent 190px,#000 252px,#000 690px,transparent 752px),linear-gradient(90deg,#000 0,#000 292px,transparent 376px,transparent 930px,#000 1014px,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 190px,#000 252px,#000 690px,transparent 752px),linear-gradient(90deg,#000 0,#000 292px,transparent 376px,transparent 930px,#000 1014px,#000 100%);mask-composite:intersect}
.cv .j-cm .cm-lock{left:462px;width:490px;top:392px;bottom:auto;margin:0;display:flex;justify-content:center;align-items:baseline;gap:.28em;white-space:nowrap}
.cv .j-cm .cm-lock em{font-size:44px}.cv .j-cm .cm-lock b{font-size:88px}
.cv .j-cm .cm-go{left:572px;top:506px;width:270px;height:100px;padding:16px 22px 18px}
.cv .j-cm .cm-sys{left:352px;top:64px;width:740px;white-space:normal;text-align:center;margin:0;font-size:25px;line-height:1.2;letter-spacing:-.015em;font-weight:300;color:#fff}
.cv .j-cm .cm-quote{left:382px;top:812px;width:650px;white-space:normal;text-align:center}
.cm-quote p{font-size:17px;line-height:1.28;letter-spacing:0}
.cm-lb[data-d="0"],.cm-lb[data-d="1"],.cm-lb[data-d="2"],.cm-lb[data-d="3"]{--hn:26px}
.cv .j-cm .cm-k{display:grid;grid-template-columns:1fr auto;align-items:center;justify-items:center;column-gap:9px;row-gap:5px;width:156px;height:68px;padding:6px 10px;background:#fff;color:#000}
.cv .j-cm .cm-k .n{grid-column:1;grid-row:2;justify-self:end;writing-mode:horizontal-tb;transform:none;margin:0!important;font:800 20px/1 var(--sans);letter-spacing:-.015em;text-transform:none;color:#000}
.cv .j-cm .cm-code{grid-column:1/-1;grid-row:1;border:1.4px solid #000;border-radius:20px;padding:1px 9px;font:700 11px/1.3 var(--sans);letter-spacing:.12em;color:#000}
.cv .j-cm .cm-pl{grid-column:2;grid-row:2;width:24px;height:24px;font-size:18px;border:1.4px solid #000;color:#000;background:#fff}
.cv .j-cm .cm-k:hover .cm-pl,.cv .j-cm .cm-k:focus-visible .cm-pl,.cm-pn.on .cm-pl{background:#000;color:#fff}
.j-cm{--rn:22px}
.cm-ln{stroke-width:.8}.cm-lh{stroke-width:1.6}

/* ===== v3 rebuild, Explore and footer: the same system logic ===== */
/* no line runs between Expansion and Operations */
@media (min-width:761px){.sy-ft .sy-svg{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 42.8%,transparent 42.8%,transparent 47.6%,#000 47.6%);mask-image:linear-gradient(90deg,#000 0,#000 42.8%,transparent 42.8%,transparent 47.6%,#000 47.6%)}}
/* the connectors are black fields with a clear name, own targets */
.sy-ex .sy-x,.sy-ft .sy-x{background:#000;color:#fff;border-color:#000}
.sy-ex .sy-x .sy-k,.sy-ft .sy-x .sy-k{color:#fff}
.sy-ex .sy-x:hover,.sy-ex .sy-x:focus-within,.sy-ft .sy-x:hover,.sy-ft .sy-x:focus-within{background:#fff;color:#000}
.sy-ex .sy-x:hover .sy-k,.sy-ft .sy-x:hover .sy-k,.sy-ex .sy-x:focus-within .sy-k,.sy-ft .sy-x:focus-within .sy-k{color:#000}
.sy-ft .sy-x .sy-k .n{font-size:max(14px,1.05cqw)}
.sy-ex .sy-x .sy-k .n{font-size:max(16px,1.4cqw)}
@media (max-width:760px){.sy-dh{display:none}
  .sy-l1 .sy-x,.sy-ex .sy-x,.sy-ft .sy-x{background:#000;color:#fff;border-left-color:#fff}
  .sy-l1 .sy-x .sy-k,.sy-ex .sy-x .sy-k,.sy-ft .sy-x .sy-k{color:#fff;background:transparent!important}
  .sy .sy-x .sy-k{background:transparent!important}
  .sy-x::after{border-color:#fff;color:#fff}}

.cv .j-os .os-note{position:relative;margin:20px 0 0;font:italic 400 16px/1.35 var(--serif);letter-spacing:0}

/* v3 point 10: the entry note keeps its own line above the map, never over it */
#approach .aentry.ax-top{position:static;width:auto;max-width:34em;margin:1.4vw 0 calc(var(--fh,12cqw)*.38);font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.45vw,26px);line-height:1.22;letter-spacing:-.01em;color:#000;padding:0}
#approach .aentry.ax-top em{font-style:italic;color:#000}
/* current row in the footer: the label sits on its own line under the name */
.sy-ft li button[aria-current]{grid-template-columns:4.2em minmax(0,1fr) auto!important;row-gap:.15em}
.sy-ft li button[aria-current] .yh{grid-column:2/-1!important;grid-row:2!important;justify-self:start!important;font-size:11px!important;letter-spacing:.14em}
.sy-ex .sy-dh b{white-space:normal}
.sy li button .ad{color:inherit!important;opacity:1!important}

/* ===== application release: reference-led Layer 1 operating-system moment ===== */
body.system-moment #rail,body.system-exit #rail{opacity:0;visibility:hidden;pointer-events:none}
body.system-moment #railM{opacity:0;visibility:hidden}
#journey .stage.sysOn{overflow:visible}
#journey .stage.sysOn .j-cm{clip-path:inset(0 0 -38px 0)}
.j-entry-note{z-index:4;margin:0;color:#fff;mix-blend-mode:difference;font:italic 400 44px/1.16 var(--serif);letter-spacing:-.012em;text-align:center}
.cv .j-cm .cm-dyn{transform:none}
.cv .j-cm .cm-svg{-webkit-mask-image:none;mask-image:none}
.cm-ln,.cm-lh{fill:none;stroke:#fff;stroke-width:.62}.cm-lh{stroke-width:1.45;opacity:0;transition:opacity .35s}.j-cm.f .cm-lh{opacity:1}
.cm-zone{transition:cx .42s var(--ease),cy .42s var(--ease),rx .42s var(--ease),ry .42s var(--ease)}
.cv .j-cm .cm-pill{left:48px;top:54px}
.cv .j-cm .cm-lock{left:485px;top:290px;width:470px;display:flex;flex-direction:column;align-items:center;color:#fff;font-family:var(--serif);font-style:normal;font-weight:400;line-height:.76;letter-spacing:-.065em;text-align:center}
.cv .j-cm .cm-lock span{font:inherit;font-size:88px;letter-spacing:inherit}
.cv .j-cm .cm-sys{left:485px;top:535px;width:470px;text-align:center;font:400 18px/1.3 var(--sans);letter-spacing:-.006em;color:#fff}
.cv .j-cm .cm-go{left:520px;top:632px;width:400px;height:94px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px 28px;background:#fff;color:#000;border-radius:52px;cursor:pointer}
.cv .j-cm .cm-go .cm-gl{width:100%;display:flex;justify-content:center;font:400 28px/1 var(--serif);letter-spacing:-.02em;text-transform:none}.cm-go .cm-gl b{position:absolute;right:28px;font:300 25px/1 var(--sans)}
.cv .j-cm .cm-gq{position:static;width:auto;margin:0;text-align:center;font:400 12px/1.25 var(--sans);letter-spacing:.01em}
.cv .j-cm .cm-target{display:flex;align-items:center;gap:14px;height:52px;padding:5px 8px;background:#000;color:#fff;cursor:pointer;white-space:normal}
.cv .j-cm .cm-target .cm-code{display:inline-flex;flex:none;align-items:center;justify-content:center;min-width:54px;height:38px;padding:0 13px;border-radius:21px;background:#fff;color:#000;font:700 13px/1 var(--sans);letter-spacing:.05em}
.cv .j-cm .cm-target .n{font:400 29px/.98 var(--serif);letter-spacing:-.025em;text-align:left}
.cv .j-cm .cm-target .cm-pl{margin-left:auto;flex:none;font:300 31px/1 var(--sans);transition:transform .35s}
.cv .j-cm .cm-target:hover .cm-pl,.cv .j-cm .cm-target:focus-visible .cm-pl,.cv .j-cm .cm-target.on .cm-pl{transform:rotate(90deg)}
.cv .j-cm .cm-target:hover .n,.cv .j-cm .cm-target:focus-visible .n,.cv .j-cm .cm-target.on .n{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
.stage.sysOn .j-cm button{pointer-events:auto}
.cv .j-cm .cm-mot,.cv .j-cm .cm-ls{display:none!important}
@media (prefers-reduced-motion:reduce){.cm-ln{stroke-dasharray:none!important;stroke-dashoffset:0!important}.cm-zone{transition:none!important}.cv .j-cm .cm-target{opacity:1!important;transform:none!important}}
@media (min-width:761px){.cv .j-os{display:none}}
@media (max-width:760px){
  .cv .j-os{display:none!important}.cv .j-cm{display:block;width:430px;height:860px;transform:none!important;mix-blend-mode:difference}
  .j-entry-note{font-size:32px;line-height:1.18;text-align:center}
  .cv .j-cm .cm-dyn{width:430px;height:860px}.cv .j-cm .cm-svg{width:430px;height:500px;top:42px;overflow:hidden}
  .cv .j-cm .cm-pill{left:22px;top:32px}
  .cv .j-cm .cm-target{width:202px!important;height:52px;gap:7px;padding:4px}
  .cv .j-cm .cm-target[data-e="0"]{left:8px!important;top:92px!important}.cv .j-cm .cm-target[data-e="3"]{left:220px!important;top:92px!important}
  .cv .j-cm .cm-target[data-e="1"]{left:8px!important;top:208px!important}.cv .j-cm .cm-target[data-e="4"]{left:220px!important;top:208px!important}
  .cv .j-cm .cm-target[data-e="2"]{left:8px!important;top:324px!important}.cv .j-cm .cm-target[data-e="5"]{left:220px!important;top:324px!important}
  .cv .j-cm .cm-target .cm-code{min-width:42px;height:30px;padding:0 9px;font-size:10px}.cv .j-cm .cm-target .n{font-size:17px}.cv .j-cm .cm-target .cm-pl{font-size:22px}
  .cv .j-cm .cm-lock{left:35px;top:438px;width:360px;line-height:.82}.cv .j-cm .cm-lock span{font-size:56px}
  .cv .j-cm .cm-sys{left:37px;top:606px;width:356px;font-size:15px;line-height:1.3}
  .cv .j-cm .cm-go{left:42px;top:696px;width:346px;height:104px;border-radius:54px;padding:18px 24px;gap:10px}.cv .j-cm .cm-go .cm-gl{font-size:25px}.cv .j-cm .cm-gq{font-size:12px;max-width:28ch}
}

/* spatial refinement: equal navigation plates, stronger title and CTA */
.cv .j-cm .cm-target{width:330px!important;height:78px;padding:11px 14px;gap:12px;border:1px solid #fff;background:#000}
.cv .j-cm .cm-target .cm-code{min-width:58px;height:36px;padding:0 12px}
.cv .j-cm .cm-target .n{flex:0 1 auto;font-size:28px;line-height:.94}
.cv .j-cm .cm-target .cm-pl{margin-left:0;font-size:28px}
.cv .j-cm .cm-lock{left:475px;top:254px;width:490px;line-height:.82;letter-spacing:-.05em}
.cv .j-cm .cm-lock span{font-family:var(--serif);font-style:normal;font-weight:600;font-size:92px;letter-spacing:inherit}
.cv .j-cm .cm-lock span:first-child{font-style:italic;font-weight:400;font-size:76px;margin-bottom:5px}
.cv .j-cm .cm-lock span:nth-child(3){position:relative;left:.75em;margin-top:10px;transform:translateY(-15%)}
.cv .j-cm .cm-sys{left:410px;top:530px;width:620px;font-size:18px;line-height:1.34;padding:0;text-align:center;background:transparent}
.cv .j-cm .cm-sys span{display:block;white-space:nowrap}
.cv .j-cm .cm-go{left:465px;top:632px;width:510px;height:108px;padding:19px 40px;gap:12px;border-radius:58px}
.cv .j-cm .cm-go .cm-gl{font-family:var(--serif);font-size:31px;font-weight:600;color:#000}
.cv .j-cm .cm-gq{font-size:13px;font-weight:500;color:#000}
@media (max-width:760px){
  .cv .j-cm .cm-target{width:202px!important;height:66px;padding:8px 7px;gap:6px}
  .cv .j-cm .cm-target[data-e="0"],.cv .j-cm .cm-target[data-e="3"]{top:86px!important}
  .cv .j-cm .cm-target[data-e="1"],.cv .j-cm .cm-target[data-e="4"]{top:202px!important}
  .cv .j-cm .cm-target[data-e="2"],.cv .j-cm .cm-target[data-e="5"]{top:318px!important}
  .cv .j-cm .cm-target .cm-code{min-width:43px;height:30px;padding:0 8px}.cv .j-cm .cm-target .n{font-size:17px;line-height:.96}.cv .j-cm .cm-target .cm-pl{font-size:21px}
  .cv .j-cm .cm-lock{left:35px;top:420px;width:360px;line-height:.84}.cv .j-cm .cm-lock span{font-size:58px}.cv .j-cm .cm-lock span:first-child{font-size:48px;margin-bottom:3px}.cv .j-cm .cm-lock span:nth-child(3){margin-top:6px}
  .cv .j-cm .cm-sys{left:31px;top:604px;width:368px;padding:0 10px;font-size:15px;line-height:1.32}.cv .j-cm .cm-sys span{white-space:normal}
  .cv .j-cm .cm-go{left:30px;top:692px;width:370px;height:112px;padding:19px 28px;gap:11px}.cv .j-cm .cm-go .cm-gl{font-size:27px;font-weight:600}.cv .j-cm .cm-gq{font-size:12px;font-weight:500}
}

/* ===== Explore rebuild: complete system navigation ===== */
#approach .inner{display:block;padding-top:4vh}
#approach .dkick{margin:0 0 1.4rem}
#approach .dkick .t{display:flex;align-items:baseline;gap:.25em;font-family:var(--sans);font-size:clamp(38px,5.2vw,78px);font-weight:350;line-height:.9;letter-spacing:-.055em}
#approach .dkick .t span{font-weight:350}#approach .dkick .t strong{font:800 .92em/1 var(--sans);letter-spacing:-.045em}
.sy-ex{position:relative;min-height:780px;--sp:0;--hn:29px;--rn:17px;--an:15px}
.sy-ex>.aentry.ax-top{position:relative;z-index:3;width:min(760px,72vw);max-width:none;margin:0 0 2rem;padding:1rem 1.15rem;background:#fff;border-left:2px solid #000;font-size:clamp(18px,1.55vw,25px);line-height:1.25;text-align:left}
.sy-ex .sy-form{position:absolute;z-index:0;inset:116px 0 auto;width:100%;height:calc(100% - 116px);min-height:690px;pointer-events:none}
.sy-ex .sy-svg{overflow:visible}.sy-ex .sy-ln{stroke-width:.55}.sy-ex .sy-lh{stroke-width:1.25}
.sy-ex .sy-link{fill:none;stroke:#000;stroke-width:.7;vector-effect:non-scaling-stroke}
.sy-ex .sy-tab{position:relative;z-index:2;display:grid!important;grid-template-columns:minmax(250px,1fr) minmax(260px,.75fr) minmax(250px,1fr)!important;grid-template-rows:repeat(3,minmax(210px,auto));column-gap:clamp(28px,8vw,130px);row-gap:2.2rem;border:0!important;background:transparent}
.sy-ex .sy-c{min-width:0;min-height:210px;padding:1rem 1.1rem 1.15rem!important;border:1px solid #000!important;background:#fff!important;color:#000!important;align-self:stretch}
.sy-ex .sy-c:nth-child(1){grid-column:1;grid-row:1}.sy-ex .sy-c:nth-child(2){grid-column:1;grid-row:2}.sy-ex .sy-c:nth-child(3){grid-column:1;grid-row:3}
.sy-ex .sy-c:nth-child(4){grid-column:3;grid-row:1}.sy-ex .sy-c:nth-child(5){grid-column:3;grid-row:2}.sy-ex .sy-c:nth-child(6){grid-column:3;grid-row:3}
.sy-ex .sy-dh{display:none}
.sy-ex .sy-h,.sy-ex .sy-k{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:.75rem;width:100%;min-height:48px;margin:0!important;padding:0!important;background:#fff!important;color:#000!important;text-align:left}
.sy-ex .sy-h .sy-l,.sy-ex .sy-k .ab{display:inline-flex!important;align-items:center;justify-content:center;width:auto;min-width:48px;height:30px;margin:0;padding:0 10px;border:0;border-radius:18px;background:#000!important;color:#fff!important;-webkit-text-fill-color:#fff;font:700 12px/1 var(--sans);letter-spacing:.08em}
.sy-ex .sy-h .n,.sy-ex .sy-k .n{font:700 clamp(23px,2vw,31px)/1.04 var(--sans);letter-spacing:-.035em;white-space:nowrap}
.sy-ex :is(.sy-h,.sy-k) .plus{display:block!important;font:300 27px/1 var(--sans);transition:transform .35s}
.sy-ex :is(.sy-h,.sy-k):is(:hover,:focus-visible) .plus{transform:rotate(90deg)}
.sy-ex .sy-ap{max-width:32ch;margin:.55rem 0 0!important;padding:0!important;font:400 15px/1.42 var(--sans);text-align:left}
.sy-ex ul{margin:1rem 0 0!important;padding-top:.55rem;border-top:1px solid #000}
.sy-ex li button{display:grid;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center;gap:.7rem;width:100%!important;min-height:44px;margin:0!important;padding:.4rem 0!important;border:0!important;background:#fff!important;color:#000!important;text-align:left}
.sy-ex li button .ad{min-width:50px;text-align:center;background:#fff!important;color:#000!important;border:1px solid #000!important}
.sy-ex li button span{font-size:15px}.sy-ex li button i{display:block!important;font:300 22px/1 var(--sans)}
.sy-ex :is(.sy-h,.sy-k,li button):focus-visible{outline:2px solid #000!important;outline-offset:4px!important;box-shadow:0 0 0 2px #fff!important}
.sy-ex .sy-x::before,.sy-ex .sy-x::after{display:none!important}
.sy-ex .yh{position:static!important;display:inline-flex!important;align-items:center;width:max-content;min-height:0;margin:.55rem 0 0!important;padding:5px 9px!important;border-radius:14px;background:#071b33!important;color:#fff!important;font:700 10px/1 var(--sans)!important;letter-spacing:.14em!important;text-transform:uppercase;white-space:nowrap}
.sy-ft .yh{position:static!important;display:inline-flex!important;align-items:center;width:max-content;min-height:0;margin:.55rem 0 0!important;padding:5px 9px!important;border-radius:14px;background:#151515!important;color:#fff!important;font:700 10px/1 var(--sans)!important;letter-spacing:.14em!important;text-transform:uppercase;white-space:nowrap}
.sy-ex .yh::before{display:none!important}
.sy-ft .yh::before{display:none!important}
.sy-ex li button .yh{grid-column:2/-1!important;grid-row:2!important;justify-self:start!important;margin:.2rem 0 0!important}
.sy-ex li button:has(.yh){grid-template-rows:auto auto;row-gap:.15rem}
.sy-ex .sy-k .yh{grid-column:2/-1!important;grid-row:2!important;justify-self:start!important}
@media (max-width:1100px){
  #approach .inner{padding-top:3vh}.sy-ex{min-height:0}.sy-ex>.aentry.ax-top{width:100%;margin-bottom:1.5rem}
  .sy-ex .sy-form{position:relative;inset:auto;width:100%;height:320px;min-height:0;margin:0 0 1.5rem}
  .sy-ex .sy-link{display:none}
  .sy-ex .sy-tab{display:block!important}.sy-ex .sy-c{margin:0 0 1.2rem}.sy-ex .sy-h .n,.sy-ex .sy-k .n{font-size:clamp(22px,7vw,30px)}
}
@media (max-width:760px){#approach .dkick .t{display:block;font-size:44px}#approach .dkick .t strong{display:block;margin-top:.08em}.sy-ex>.aentry.ax-top{font-size:19px}.sy-ex .sy-form{height:300px}.sy-ex .sy-link{display:none}.sy-ex .sy-c{min-height:0;padding:1rem!important}.sy-ex .sy-h .n,.sy-ex .sy-k .n{white-space:normal}.sy-ex .sy-ap{font-size:15px}}
@media (prefers-reduced-motion:reduce){.sy-ex .sy-ln{stroke-dasharray:none!important;stroke-dashoffset:0!important}.sy-ex *{transition:none!important}}
/* The current row stays white so the dedicated black status pill remains the only location signal. */
.sy-ex li button[aria-current],.sy-ft li button[aria-current]{background:#fff!important;color:#000!important}
.sy-ex li button[aria-current] .ad,.sy-ft li button[aria-current] .ad{border-color:#000!important;color:#000!important}
/* Layer 1 preselection: visually strong, deliberately distinct from YOU ARE HERE. */
.sy-ex .sy-c.picked{outline:3px solid #000!important;outline-offset:4px}
.sy-ex .sy-c.picked :is(.sy-h,.sy-k) .plus{transform:rotate(90deg)}

/* ===== Explore black-field correction =====
   This final, view-scoped layer deliberately neutralises the historic connector
   writing modes without changing Layer 1 or the Deep Dive footer. */
#approach,#approach .bar{background:#000;color:#fff}
#approach .bar{border-bottom:1px solid rgba(255,255,255,.32)}
#approach .bar :is(.back,.lbl,.dctx,.dcur){color:#fff}
#approach .bar .lbl .pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 11px;border:1px solid #fff;border-radius:999px;background:#000;color:#fff;line-height:1.2}
#approach .dkick .t,#approach .dkick .t strong{color:#fff}
#approach .sy-ex>.aentry.ax-top{box-sizing:border-box;margin-bottom:clamp(42px,6vh,76px);padding:0 0 0 1.5rem;border:0;border-left:2px solid #fff;background:transparent;color:#fff}
#approach .sy-ex>.aentry.ax-top em{color:#fff}

.sy-ex .sy-ln,.sy-ex .sy-lh,.sy-ex .sy-link{stroke:#fff}
.sy-ex .sy-soft{transition:cx .42s var(--ease),cy .42s var(--ease),rx .42s var(--ease),ry .42s var(--ease)}
.sy-ex .sy-link{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.1,1) .45s}
.sy-ex.go .sy-link{stroke-dashoffset:0}
.sy-ex .sy-tab{grid-template-columns:minmax(390px,430px) minmax(180px,1fr) minmax(390px,430px)!important;column-gap:clamp(28px,3.4vw,54px);row-gap:clamp(36px,5vw,72px)}
.sy-ex .sy-c{box-sizing:border-box;min-height:0;padding:1.15rem 1.25rem 1.25rem!important;border:1px solid #000!important;background:#fff!important;color:#000!important;align-self:start;overflow:visible}
.sy-ex .sy-x{display:block!important;margin:0!important;background:#fff!important;color:#000!important}
.sy-ex .sy-x:is(:hover,:focus-within,.on){background:#fff!important;color:#000!important}
.sy-ex .sy-x::before,.sy-ex .sy-x::after{display:none!important}
.sy-ex .sy-h,.sy-ex .sy-k{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:.75rem!important;width:100%!important;min-height:48px!important;margin:0!important;padding:0!important;background:#fff!important;color:#000!important;writing-mode:horizontal-tb!important;transform:none!important}
.sy-ex .sy-h .sy-l,.sy-ex .sy-k .ab{display:inline-flex!important;align-items:center;justify-content:center;min-width:50px;height:30px;margin:0!important;padding:0 10px!important;border:0!important;border-radius:18px;background:#000!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font:700 12px/1 var(--sans)!important;letter-spacing:.08em!important;white-space:nowrap}
.sy-ex .sy-h .n,.sy-ex .sy-k .n{min-width:0;margin:0!important;color:#000!important;font:700 clamp(20px,1.55vw,24px)/1.05 var(--sans)!important;letter-spacing:-.035em!important;text-align:left!important;text-transform:none!important;white-space:nowrap!important;writing-mode:horizontal-tb!important;transform:none!important}
.sy-ex :is(.sy-h,.sy-k) .plus{display:block!important;margin:0!important;color:#000!important;font:300 27px/1 var(--sans)!important}
.sy-ex .sy-ap{width:100%;max-width:none;margin:.85rem 0 0!important;padding:0!important;color:#000!important;font:400 15px/1.48 var(--sans)!important;text-align:left;overflow:visible}
.sy-ex ul{width:100%;margin:1rem 0 0!important;padding:.65rem 0 0!important;border-top:1px solid #000!important}
.sy-ex li button{color:#000!important;background:#fff!important}
.sy-ex li button .ad{background:#fff!important;color:#000!important;border:1px solid #000!important;border-radius:18px!important}
.sy-ex .yh{background:#071b33!important;color:#fff!important}
.sy-ex .sy-c.on{outline:1px solid #fff;outline-offset:5px}
.sy-ex .sy-c.picked{outline-color:#fff!important}

@media (max-width:1180px){
  .sy-ex .sy-tab{display:block!important}.sy-ex .sy-c{width:100%;margin:0 0 1.25rem!important}
  .sy-ex .sy-link{display:none}
}
@media (min-width:1181px){
  #approach .sy-ex>.aentry.ax-top{margin-bottom:clamp(92px,12vh,132px)}
  .sy-ex .sy-form{top:clamp(210px,25vh,270px);height:calc(100% - clamp(210px,25vh,270px))}
  .sy-ex .sy-tab{padding-top:clamp(48px,7vh,84px)}
}
@media (max-width:760px){
  #approach .sy-ex>.aentry.ax-top{padding-left:1.15rem}
  .sy-ex .sy-h .n,.sy-ex .sy-k .n{font-size:clamp(21px,7vw,29px)!important;white-space:normal!important}
  .sy-ex .sy-c{padding:1rem!important}
}
@media (prefers-reduced-motion:reduce){.sy-ex .sy-link{stroke-dasharray:none!important;stroke-dashoffset:0!important}.sy-ex .sy-soft{transition:none!important}}

/* Explore ends in the shared release footer, after a deliberate black pause. */
#approach>.explore-footer{box-sizing:border-box;width:100%;margin:clamp(140px,20vh,260px) 0 0;padding:clamp(48px,6.5vh,72px) var(--m) max(2rem,calc(3vh + env(safe-area-inset-bottom)));background:#000;color:#fff}
#approach>.explore-footer .horizon{display:none}
#approach>.explore-footer button{color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
#approach>.explore-footer button:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ===== Deep-Dive closing system navigation ===== */
.dfoot{--fu:1rem;margin:0 calc(var(--m)*-1);padding:clamp(20px,3vh,34px) var(--m) 0;background:#000;color:#fff;border:0}
.dfoot .df-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin:0 0 clamp(14px,2vh,22px);padding:0;border:0}
.dfoot .df-head::after,.dfoot .df-head::before{content:"";position:absolute;top:calc(100% + 8px);width:54px;height:1px;background:#fff}.dfoot .df-head::before{left:0}.dfoot .df-head::after{right:0}
.dfoot .df-head{position:relative}
.dfoot .df-t{font:800 clamp(38px,5vw,68px)/.9 var(--sans);font-stretch:108%;letter-spacing:-.055em;color:#fff}
.dfoot .df-s{font:italic 400 clamp(18px,1.8vw,28px)/1 var(--serif);letter-spacing:-.015em;color:#fff}
.dfoot .df-sy{position:relative;padding:clamp(34px,5vh,52px) 0 clamp(20px,3vh,30px)}
.sy-ft{color:#000;--sp:0;--hn:24px;--rn:15px;--an:15px}
.sy-ft .sy-form{position:absolute;z-index:0;inset:0 -18px;height:auto;margin:0;pointer-events:none}
.sy-ft .sy-ln,.sy-ft .sy-lh{stroke:#fff;stroke-width:.55}.sy-ft .sy-lh{stroke-width:1.2}
.sy-ft .sy-tab{position:relative;z-index:1;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:clamp(6px,.65vw,10px);border:0!important}
.sy-ft .sy-c{display:block!important;min-width:0;min-height:246px;margin:0!important;padding:clamp(10px,1vw,15px)!important;border:0!important;border-radius:8px;background:#fff!important;color:#000!important;overflow:visible}
.sy-ft .sy-c:nth-child(2),.sy-ft .sy-c:nth-child(5){background:#000!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff}
.sy-ft .sy-dh,.sy-ft .sy-x::before,.sy-ft .sy-x::after{display:none!important}
.sy-ft .sy-h,.sy-ft .sy-k{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:32px minmax(50px,auto)!important;align-items:start!important;gap:5px 8px!important;width:100%!important;min-height:87px;margin:0!important;padding:0!important;background:transparent!important;color:inherit!important;writing-mode:horizontal-tb!important;transform:none!important;text-align:left!important}
.sy-ft .sy-h .sy-l,.sy-ft .sy-k .ab{grid-column:1/-1;grid-row:1;display:inline-flex!important;align-items:center;justify-content:center;width:max-content;min-width:44px;height:27px;margin:0!important;padding:0 9px!important;border:0!important;border-radius:18px;background:#000!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font:700 11px/1 var(--sans)!important;letter-spacing:.06em!important;white-space:nowrap}
.sy-ft .sy-c:nth-child(2) :is(.ab),.sy-ft .sy-c:nth-child(5) :is(.ab){border:1px solid #fff!important;background:#000!important;color:#fff!important}
.sy-ft .sy-h .n,.sy-ft .sy-k .n{grid-column:1;grid-row:2;margin:0!important;color:inherit!important;font:400 clamp(16px,1.5vw,24px)/.98 var(--serif)!important;font-style:normal!important;letter-spacing:-.025em!important;text-transform:none!important;writing-mode:horizontal-tb!important;transform:none!important;white-space:normal!important}
.sy-ft :is(.sy-h,.sy-k) .plus{grid-column:2;grid-row:2;display:block!important;margin:0!important;color:inherit!important;font:300 24px/1 var(--sans)!important}
.sy-ft ul{display:block!important;width:100%;margin:0!important;padding:0!important;border-top:1px solid #b8b8b8}
.sy-ft li button{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:6px!important;width:100%!important;min-height:44px;margin:0!important;padding:5px 0!important;border:0!important;border-bottom:1px solid #c5c5c5!important;background:#fff!important;color:#000!important;text-align:left!important}
.sy-ft li button .ad{display:inline-flex!important;align-items:center;justify-content:center;min-width:50px;padding:3px 9px!important;border:1px solid #000!important;border-radius:18px;background:#fff!important;color:#000!important;font:700 12px/1.2 var(--sans)!important;letter-spacing:.04em!important}
.sy-ft li button span{font:500 clamp(11px,1vw,14px)/1.15 var(--sans)}.sy-ft li button i{display:block!important;color:#000;font:300 19px/1 var(--sans)}
.sy-ft [aria-current="page"] :is(.sy-l,.ab,.ad),.sy-ex [aria-current="page"] :is(.sy-l,.ab,.ad){background:#0F766E!important;border-color:#0F766E!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.dfoot .sy-ft .sy-c .current-code,#approach .sy-ex .sy-c .current-code{background:#0F766E!important;border-color:#0F766E!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.sy-ft .sy-h:is(:hover,:focus-visible) .n,.sy-ft .sy-k:is(:hover,:focus-visible) .n,.sy-ft li button:is(:hover,:focus-visible)>span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.sy-ft :is(.sy-h,.sy-k,li button):focus-visible{outline:2px solid #0F766E!important;outline-offset:3px!important;box-shadow:0 0 0 2px #fff!important}
.sy-ft .sy-under{position:absolute;z-index:0;inset:12% -18px 4%;display:block;width:calc(100% + 36px);height:84%;margin:0;overflow:visible;pointer-events:none}.sy-ft .sy-under path{fill:none;stroke:#fff;stroke-width:.65;vector-effect:non-scaling-stroke}
.dfoot>.df-nav{display:none}
.dfoot>.deep-release-footer{box-sizing:border-box;width:calc(100% + 2*var(--m));margin:0 calc(var(--m)*-1);padding-inline:var(--m);background:#000;color:#fff}
.dfoot>.deep-release-footer .horizon{display:none}
.dfoot>.deep-release-footer button{color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
@media(max-width:760px){.dfoot{padding-top:44px}.dfoot .df-head{display:block}.dfoot .df-s{display:block;margin-top:10px}.dfoot .df-sy{padding-top:42px}.sy-ft .sy-form{inset:0 -12px}.sy-ft .sy-tab{display:block!important}.sy-ft .sy-c{min-height:0;margin-bottom:10px!important;padding:14px!important}.sy-ft .sy-h,.sy-ft .sy-k{min-height:88px}.sy-ft .sy-under{inset:4% -12px 2%;width:calc(100% + 24px);height:94%}}

/* v3 QA 06.10.: on phones the entry sentence sits in the legacy layout and was black on black */
@media (max-width:760px){#approach .inner>.aentry{color:#fff}#approach .inner>.aentry em{color:#fff}}

/* Lead, Experience and Engage: the same footer as the system page. No line above it; the page above decides how it meets the footer */
#lead>.explore-footer,#experience>.explore-footer,#engage>.explore-footer{box-sizing:border-box;width:100%;margin:0;padding:clamp(48px,6.5vh,72px) var(--m) max(2rem,calc(3vh + env(safe-area-inset-bottom)));background:#000;color:#fff}
#lead>.explore-footer .horizon,#experience>.explore-footer .horizon,#engage>.explore-footer .horizon{display:none}
#lead>.explore-footer button,#experience>.explore-footer button,#engage>.explore-footer button{color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
#lead>.explore-footer button:focus-visible,#experience>.explore-footer button:focus-visible,#engage>.explore-footer button:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* phones: the Navigation cards read at a comfortable size (Lena 09.10.2026) */
@media(max-width:760px){
  .sy-ft .sy-h .n,.sy-ft .sy-k .n{font-size:26px!important;line-height:1.05!important}
  .sy-ft .sy-h .sy-l,.sy-ft .sy-k .ab{font-size:14px!important;height:30px!important;min-width:48px}
  .sy-ft li button{min-height:52px;gap:10px!important}
  .sy-ft li button span{font-size:17px!important;font-weight:500}
  .sy-ft li button .ad{font-size:14px!important;min-width:56px}
  .sy-ft li button i{font-size:24px!important}
  .sy-ft :is(.sy-h,.sy-k) .plus{font-size:30px!important}
  .dfoot .df-s{font-size:24px}
}

/* Layer 1 chapter 04: the composition is a fixed canvas (1440x900, phones 430x860) scaled into the window; fitCanvas sets --cs to that scale.
   Small labels keep a rendered size of at least 13px by growing in canvas units, so nothing is smaller than 13px on screen (A1, 17.10.2026). At 1440x900 the scale is 1 and nothing changes. */
.cv .j-cm .cm-target .cm-code,.cv .j-cm .cm-pill,.cv .j-cm .cm-gq{font-size:max(13px,calc(13px/var(--cs,1)))}
.cv .j-cm .cm-sys{font-size:max(18px,calc(13px/var(--cs,1)))}
.cv .j-cm .cm-target .cm-code{padding:0 .5em;letter-spacing:.02em;word-spacing:-.05em}
.cv .j-cm .cm-go{height:auto;min-height:108px;border-radius:999px}
@media (max-width:760px){
  .cv .j-cm .cm-sys{font-size:max(15px,calc(13px/var(--cs,1)))}
  .cv .j-cm .cm-target .n{font-size:max(17px,calc(13px/var(--cs,1)))}
  .cv .j-cm .cm-go{min-height:112px}
  .cv .j-cm .cm-target .cm-code{padding:0 .4em;letter-spacing:0}
}

/* Explore (A2, 17.10.2026): below 1181px the drawing follows the quote (phones: the heading) directly, but explore.js lets the form's lines
   start up to 82px above its box. The drawing gets that room back, so its tip stays about 12px clear of the text above it. */
@media (max-width:1180px){.sy-ex .sy-form{margin-top:100px}}
@media (max-width:760px){.sy-ex .sy-form{margin-top:72px}}

/* Layer 1 chapter 06 (Transformation): its canvas is scaled into the window like the others, so the chapter pills keep at least 11px rendered
   (--cs is set in home.js where the canvas is scaled; 17.10.2026) */
#tcv .pill{font-size:max(13px,calc(11px/var(--cs,1)))}

/* CTA subline of chapter 04: the last phrase never splits, so the second line is "each area in depth." and not a single orphan word (17.10.2026) */
.cm-gq .nb,.os-cl .nb{white-space:nowrap}