/* LDT INC | the experience on / */

.scene{position:relative}
.stage{position:relative;height:100vh;overflow:hidden;background:#fff;isolation:isolate}
.cv{position:absolute;left:50%;top:50%;width:1440px;height:900px;transform-origin:50% 50%;isolation:isolate}
.cv *{position:absolute}
.cv .rw{position:static;display:inline}.cv svg *{position:static}
.cut{background:#fff;mix-blend-mode:difference}
.shinebox{overflow:hidden;pointer-events:none}
.cv .shine{top:-20%}
.bg{left:-3000px;top:-3000px;width:9000px;height:9000px;background:#000}
.j-sys,.j-connect,.j-title,.j-serif,.j-core,.blk,.blab,.j-labels>*{pointer-events:none}
.stage.cxOn .blk,.stage.sysOn .j-labels>*{pointer-events:auto}

/* 01 arrive: wordmark first, role second, name and disciplines as quiet anchors */
/* the monolith layer (prototype/landing-monolith-v3.html): viewport sized, above the canvas until the line hands over to the cut */
/* while the page loads, nothing shows before it has its place: the stage canvas and the landing type appear once measured (home.js, monolith.js) */
html.js .jstage .cv{visibility:hidden}
html.js .mono .mwm,html.js .mono .lab,html.js .mono .mscroll{opacity:0}
.mono{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;color:#000}
.mono .room{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,#fff 0%,#fff 48%,#f3f3f3 80%,#e9e9e9 100%)}
.mono .mwm{position:absolute;z-index:1;white-space:nowrap;line-height:.74;left:50%;transform:translateX(-50%);will-change:transform,opacity}
.mono .mwm .b{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;letter-spacing:-.05em}
.mono .mwm .l{font-weight:200;letter-spacing:-.035em;margin-left:.78em}
.mono .mgl{position:absolute;left:0;top:0;z-index:2}
.mono .mfb{display:none;position:absolute;z-index:2;background:#0b0b0b}
.mono .mlabs{position:absolute;inset:0;z-index:3}
.mono .lab{position:absolute;display:flex;align-items:center;gap:18px;white-space:nowrap;will-change:opacity}
.mono .lab .t{display:flex;flex-direction:column;line-height:1.08}
.mono .lab.l .t{align-items:flex-end;text-align:right}
.mono .lab.r{flex-direction:row-reverse}.mono .lab.r .t{align-items:flex-start}
.mono .lab i{display:block;height:1px;background:#000;transform-origin:right center}
.mono .lab.r i{transform-origin:left center}
/* the four disciplines as equals (Lena, 27.09.2026): sans and serif cross over the monolith, optically the same size and weight of voice */
/* both voices optically the same size (Lena, 27.09.2026): equal pixel sizes made the italic look smaller, equal cap height is not what the eye reads;
   at 17 and 22 px (Lena) the capitals and the italic lines carry the same presence */
.mono .cp{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:600;letter-spacing:-.03em;font-size:17px}
.mono .lab .it{font-size:22px;font-weight:400}
.mono .mscroll{position:absolute;z-index:3;right:48px;bottom:32px;display:flex;align-items:center;gap:14px;font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-size:11px;letter-spacing:.24em;font-weight:500}
.mono .mscroll i{display:block;width:44px;height:1px;background:#000;order:-1}
@media (max-width:760px){
  .mono .mwm .l{margin-left:1.3em}.mono .mscroll{right:22px;bottom:26px}
  .mono .cp{font-size:13px}.mono .lab .it{font-size:17px}
}
.j-core{font-size:58px;line-height:1.06;letter-spacing:-.025em;width:820px}
.j-core span{position:relative;display:inline-block;margin-right:.24em;opacity:.08}
.j-core .sr{opacity:1}
.j-core .it{font-size:1.15em;letter-spacing:-.02em}
.jt .pill{position:relative;margin-bottom:10px}
.jt .t{position:relative;display:block;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:60px;letter-spacing:-.045em;line-height:.9}
.jt .x{position:relative;display:block;line-height:1.4;letter-spacing:-.005em}
.jt .s{position:relative;display:block;font-family:var(--serif);font-style:italic;font-size:52px;line-height:1.02;margin-top:40px;width:420px}

/* 02 complexity: a composed field of realities */
.j-serif{white-space:nowrap;line-height:.8;letter-spacing:-.02em}
.blk{background:#fff;mix-blend-mode:difference}
.blab{display:flex;align-items:flex-start;justify-content:flex-start;padding:16px 18px;color:#fff;mix-blend-mode:difference;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:15px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;line-height:1.1;pointer-events:none}

.j-connect{font-size:46px;line-height:1.12;letter-spacing:-.02em;width:900px;text-align:center}
.j-connect .jcl{position:relative}
@media (max-width:760px){.j-connect .jcl{display:block}}
.j-connect .it{position:relative;display:block;font-size:1.55em;line-height:1.05;letter-spacing:-.015em;margin-top:.12em}
.j-divider{width:1px;background:#fff}
svg.sys{overflow:visible}
svg.sys .ring{fill:none;stroke:#fff;stroke-width:1}
svg.sys .fillc{fill:#fff;opacity:0}
svg.sys .lens{fill:#fff}
svg.sys .cross{stroke:#fff;stroke-width:1}
.dimn{display:flex;gap:10px;align-items:flex-start;white-space:nowrap;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.12em;font-weight:700;text-transform:uppercase;line-height:1.25;cursor:pointer;color:#fff;mix-blend-mode:difference}
.dimn span{position:relative}
.dimn .dn .ln{display:block}
.tick{display:flex;align-items:center;gap:10px;white-space:nowrap;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;cursor:pointer;color:#fff;mix-blend-mode:difference}
.tick i{position:relative;display:block;width:14px;height:1px;background:currentColor}
/* a larger touch area around each area name, without moving it */
.tick::after{content:"";position:absolute;inset:-7px -6px}
/* the open control at the centre of each circle */
.cplus{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;cursor:pointer;color:#fff;mix-blend-mode:difference;transition:transform .45s var(--ease)}
.cplus::before{content:"";position:absolute;inset:4px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;opacity:0;transform:scale(.6);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.cplus i{position:relative;display:block;width:16px;height:1px;background:currentColor}
.cplus i::after{content:"";position:absolute;left:50%;top:-7.5px;width:1px;height:16px;background:currentColor}
.cplus:hover,.cplus:focus-visible{transform:rotate(90deg)}
.cplus:hover::before,.cplus:focus-visible::before{opacity:1;transform:scale(1)}
.cplus:focus-visible{outline:none}
.tick span{position:relative}
.vlab{color:#fff;mix-blend-mode:difference;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;white-space:nowrap;text-align:center;transform:rotate(-90deg);cursor:pointer}
.j-labels :focus-visible{outline:1px solid #fff;outline-offset:5px}
/* the system explains itself: a quiet cue, and every term answers the pointer */
.j-cue{position:absolute;display:flex;align-items:center;gap:16px;color:#000;cursor:pointer;text-align:left}
.j-cue>span{position:static}
.j-cue .ci{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;font-size:18px;font-weight:300;line-height:1;transition:background .35s var(--ease),color .35s var(--ease),transform .45s var(--ease)}
.j-cue .ct{flex:none;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.j-cue .cl{flex:1 1 auto;height:1px;background:currentColor;opacity:.35;transform-origin:0 50%;transition:opacity .35s var(--ease)}
.j-cue:hover .ci,.j-cue:focus-visible .ci{background:#000;color:#fff;transform:rotate(90deg)}
.j-cue:hover .cl,.j-cue:focus-visible .cl{opacity:1}
.j-cue:focus-visible{outline:1px solid #000;outline-offset:6px}
.dimn .dn{display:inline-block}
.dimn .dn,.tick span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease);padding-bottom:3px}
.dimn:hover .dn,.dimn:focus-visible .dn,.tick:hover span,.tick:focus-visible span{background-size:100% 1px}
.tick i{transition:width .45s var(--ease)}
.tick:hover i,.tick:focus-visible i{width:26px}
.vlab{transition:letter-spacing .45s var(--ease)}
.vlab:hover,.vlab:focus-visible{letter-spacing:.24em}

/* transformation */
.bar7{background:#fff;mix-blend-mode:difference}
.bar7,.bar7lab{pointer-events:none;cursor:default}
.bar7lab{color:#fff;mix-blend-mode:difference;font-weight:500;letter-spacing:-.03em;white-space:nowrap;display:flex;align-items:center;justify-content:flex-start;padding:0;line-height:1;border-bottom:1px solid;border-image:linear-gradient(90deg,#8b9197,#fff 50%,#747a80) 1}
/* process axis: the fine italic needs size and air on black to stay legible (Lena, 27.09.2026) */
#tProg{display:flex;justify-content:space-between;border-top:1px solid #fff;padding-top:26px}
#tProg span{position:relative;font-family:var(--serif);font-style:italic;font-weight:400;font-size:28px;letter-spacing:0;opacity:.62;transition:opacity .3s}
/* on a phone the thin Boska needs more light to stay readable (Lena, 28.09.2026) */
@media (max-width:760px){#tProg span{opacity:.8;-webkit-text-stroke:.02em currentColor}}
#tProg span.on{opacity:1}
#tAnchor .it{position:relative;display:block;font-size:64px;line-height:1.02;width:520px}
#tAnchor .act{margin-top:36px}
#tAnchor .when{position:relative;display:block;line-height:1.4;letter-spacing:-.005em}
.cv .act span{position:static}
#tAnchor .act:focus-visible{outline-color:#fff}
.act .pill,.cv .act .pill{position:static;margin-right:12px;font-weight:400;letter-spacing:.06em}
.act.deep{min-width:340px;font-size:13px;padding-top:16px}
.act.deep .plus{font-size:24px;transition:transform .4s var(--ease)}
.act.deep:hover .plus,.act.deep:focus-visible .plus{transform:rotate(90deg)}

/* proof */
#proof .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:6vw;align-items:end}
.marks{position:relative;display:inline-block;padding:2.6vw 3vw 2.2vw}
.marks i{position:absolute;width:18px;height:18px;border:0 solid #000}
.marks i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.marks i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.marks i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.marks i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.two{display:block;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;font-size:clamp(64px,10vw,188px);letter-spacing:-.05em;line-height:.84}
.two .it{font-weight:400;letter-spacing:-.02em;font-stretch:100%;font-variation-settings:"wdth" 100}
.lede{font-size:clamp(17px,1.45vw,22px);line-height:1.42;max-width:32ch}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:0 2vw;margin-top:14vh}
.fig{display:flex;flex-direction:column-reverse;justify-content:flex-end;border-top:1px solid #000;padding-top:16px}
.fig dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-top:14px}
.fig dd{font-weight:600;font-size:clamp(30px,2.6vw,46px);letter-spacing:-.035em;line-height:1;white-space:nowrap}
#mk-regions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 2vw;margin-top:9vh}
#mk-regions li{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:500;font-size:clamp(26px,3.4vw,60px);letter-spacing:-.035em;line-height:1;text-transform:uppercase;border-top:1px solid;border-image:linear-gradient(90deg,#747a80,#fff 50%,#8b9197) 1;padding-top:16px}
#orgs{position:relative;margin:14vh calc(var(--m) * -1) 0;overflow:hidden;border-top:1px solid #000;isolation:isolate;background:#fff}
#orgList{padding:0 var(--m)}
.og{display:grid;grid-template-columns:260px 1fr;align-items:baseline;column-gap:calc(clamp(64px,6vw,100px) + 6vw);row-gap:2vw;border-bottom:1px solid #000;padding:2.6vh 0}
.og h3{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.og ul{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:3.2vw;row-gap:.4vh}
.og .it{font-size:clamp(30px,3.6vw,64px);letter-spacing:-.02em;line-height:1.1}
.og .g{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:500;text-transform:uppercase;font-size:clamp(24px,2.9vw,52px);letter-spacing:-.03em;line-height:1.1}
#orgCut,#orgShine{position:absolute;top:0;bottom:0;left:calc(var(--m) + 260px + 3vw);width:clamp(64px,6vw,100px);pointer-events:none}
#orgCut{background:#000}
#orgShine{overflow:hidden}
#proof .act{margin-top:9vh}
@media (min-width:761px){section.flow{padding-right:calc(var(--m) + 200px)}#orgs{margin-right:calc(-1 * (var(--m) + 200px))}#orgList{padding-right:calc(var(--m) + 200px)}}

/* ways to work: three equal decisions */
#ways .row{position:relative;display:grid;grid-template-columns:1fr minmax(220px,32ch) 48px;align-items:center;gap:3vw;border-top:1px solid #000;padding:2.6vh 1.2vw;cursor:pointer;width:100%}
#ways .row:last-child{border-bottom:1px solid #000}
#ways .row:focus-visible{outline-offset:-2px}
#ways .word{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;font-size:clamp(44px,8.4vw,160px);letter-spacing:-.05em;line-height:.9}
#ways .row p{font-size:15px;line-height:1.45;text-align:right;justify-self:end}
#ways .row .plus{justify-self:end;font-size:clamp(24px,2.2vw,34px);font-weight:300;line-height:1;transition:transform .45s var(--ease)}
#ways .row:hover .plus,#ways .row:focus-visible .plus{transform:rotate(90deg)}

/* contact: a quiet invitation and two equal routes, with the existing rings as the counterweight */
#contact{min-height:100vh;padding-top:max(12vh,96px);display:flex;flex-direction:column;justify-content:space-between}
#contact .c-in{display:flex;flex-direction:column;flex:1;min-height:clamp(620px,78vh,820px);padding-right:min(42vw,560px)}
#contact .kick{flex-direction:row;align-items:center;gap:16px;margin-bottom:clamp(64px,9vh,108px)}#contact .kick .pill{margin:0}
#contact .kick .t{font-family:var(--sans);font-style:normal;font-weight:600;font-stretch:108%;font-variation-settings:"wdth" 108;font-size:clamp(36px,3.4vw,58px);letter-spacing:-.04em;line-height:1}
#contact .c-copy{width:min(100%,700px)}
#contact .open{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,3.25vw,54px);line-height:1.16;letter-spacing:-.018em;max-width:21ch;text-wrap:balance}
.c-acts{width:min(100%,620px);margin-top:clamp(70px,10vh,120px);border-bottom:1px solid rgba(255,255,255,.28)}
.c-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:72px;padding:14px 2px;border-top:1px solid rgba(255,255,255,.28);font-family:var(--sans);font-size:clamp(22px,2vw,32px);font-weight:400;letter-spacing:-.02em;line-height:1.1;cursor:pointer;transition:padding .35s var(--ease),background-color .35s var(--ease)}
.c-row .c-arr{flex:none;margin-left:32px;font-size:1.1em;font-weight:300;line-height:1;transition:transform .35s var(--ease)}
.c-row:hover,.c-row:focus-visible{padding-left:12px;padding-right:12px;background:rgba(255,255,255,.07)}
.c-row:hover .c-arr,.c-row:focus-visible .c-arr{transform:translateX(5px)}
.c-row:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (min-width:761px) and (max-width:1100px){#contact .c-in{padding-right:290px}#contact .kick{margin-bottom:44px}#contact .open{font-size:28px;max-width:20ch}.c-acts{margin-top:46px}.c-row{min-height:60px;font-size:22px}}
/* on contact the chapter rail steps back, so nothing competes with the address */
body.at-end #rail button:not(.on){opacity:.32}body.at-end #rail button:hover,body.at-end #rail button:focus-visible{opacity:1}

/* layers of the experience */
.xh{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.dd{display:grid;grid-template-columns:1.15fr .85fr;gap:6vw;align-items:start}
.dkind{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.ddl .k{margin-top:4vh;max-width:30ch;font-size:clamp(24px,2.3vw,38px)}
#deepProof{margin-top:6vh}
.dfig{display:flex;align-items:baseline;gap:20px;margin-bottom:3vh}
.dfig b{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(40px,4vw,72px);white-space:nowrap;letter-spacing:-.05em;line-height:.9}
.dfig span{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.dflow{display:flex;flex-wrap:wrap;column-gap:1.6em;row-gap:.35em;font-size:clamp(18px,1.5vw,23px);letter-spacing:-.01em;line-height:1.25;max-width:640px}
.dgrp{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw;border-top:1px solid #000;padding-top:18px;max-width:720px}
.dgrp h3{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.dgrp .dflow{flex-direction:column;font-size:17px;row-gap:.45em}
.ddetail{font-size:16px;line-height:1.5;max-width:52ch;margin-top:5vh}
.mini{position:relative;aspect-ratio:1/1;max-width:460px;isolation:isolate;margin-top:4vh}
.mini svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mini svg [data-ddim]{cursor:pointer}
.mini .lbl2{position:absolute;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;color:#000;white-space:nowrap;cursor:pointer}
.mini .lbl2.on{font-weight:700}
.mini .lbl2:hover,.mini .lbl2:focus-visible{text-decoration:underline;text-underline-offset:4px}
.mini .lens2{position:absolute;transform:translate(-50%,-50%) rotate(-90deg);font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;mix-blend-mode:difference;white-space:nowrap;cursor:pointer}
/* connected system: the secondary layer, inverted */
.dconn{margin:12vh calc(var(--m) * -1) -14vh;padding:7vh var(--m) 9vh;background:#000;color:#fff}
.drel{font-size:clamp(20px,1.8vw,30px);line-height:1.2;letter-spacing:-.015em;margin-top:18px;max-width:40ch}
.dgroups{display:grid;grid-template-columns:auto auto auto auto auto auto;justify-content:space-between;column-gap:2.4vw;row-gap:4vh;margin-top:5vh}
/* each dimension leads its areas; the connecting areas stand between, set a little apart */
.dgroups .sg ul{flex-direction:column;align-items:flex-start;gap:4px;margin-left:-17px}
.dgroups .sc h4{margin-bottom:6px}
.dgroups .sc{padding-top:0}
.dgroups button.dim{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.dgroups h4{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:.6;margin-bottom:12px}
.dgroups ul{display:flex;flex-wrap:wrap;gap:8px}
.dgroups button{min-height:40px;padding:8px 16px;border:1px solid transparent;border-radius:24px;font-size:15px;letter-spacing:-.005em;cursor:pointer;transition:border-color .3s}
.dgroups button:hover,.dgroups button:focus-visible{border-color:rgba(255,255,255,.55);outline-offset:2px}
.dgroups button.rel{border-color:#fff}
.dgroups button.cur{background:#fff;color:#000;border-color:#fff}
/* experience: proof, breadth, evidence */
.xk{font-size:clamp(34px,4.2vw,72px)!important;max-width:30ch!important;line-height:1.02!important;letter-spacing:-.03em!important}
.xfigs{margin-top:9vh;grid-template-columns:repeat(4,1fr)}
.xgeo{display:flex;align-items:center;gap:1.2em;margin-top:5vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:500;text-transform:uppercase;font-size:clamp(20px,2.2vw,36px);letter-spacing:-.03em}
.xgeo i{display:block;width:1px;height:.9em;background:#000}
.xsec{margin-top:14vh}
.xact{margin-top:14vh}
/* approach: how the business is read */
/* approach: the four dimensions as one written addition. Operators sit in their own column, one rule closes the sum, the operating system is the total */
.sum{--op:clamp(44px,6.2vw,104px);margin-top:13vh}
.sum .sk{padding-left:var(--op);font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:3vh}
.sum .d{display:grid;grid-template-columns:var(--op) minmax(0,34fr) minmax(0,40fr) minmax(0,12fr);grid-template-areas:"op t p go" "op t u go";column-gap:0;width:100%;padding:4.4vh 0;text-align:left;color:inherit;cursor:pointer;transition:opacity .45s var(--ease)}
.sum .op{grid-area:op;font-weight:200;font-size:clamp(24px,2.5vw,40px);line-height:1}
.sum h3{grid-area:t;align-self:start;max-width:11.5ch;padding-right:3vw;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(24px,2.5vw,40px);letter-spacing:-.025em;line-height:1}
.sum .d p{grid-area:p;font-size:clamp(16px,1.25vw,19px);line-height:1.45;max-width:40ch}
.sum .d ul{grid-area:u;display:flex;flex-wrap:wrap;column-gap:1.6em;row-gap:.3em;margin-top:2.2vh}
.sum .d li{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.sum .go{grid-area:go;justify-self:end;align-self:start;display:flex;align-items:center;gap:10px;margin-top:.5em;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:.4;transition:opacity .3s}
.sum .go i{display:block;width:22px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.sum .d:hover .go,.sum .d:focus-visible .go{opacity:1}
.sum .d:hover .go i,.sum .d:focus-visible .go i{width:44px}
.sum .d:focus-visible{outline-offset:6px}
@media (hover:hover){#dimsGrid:hover .d:not(:hover){opacity:.28}}
.sum .total{display:grid;grid-template-columns:var(--op) minmax(0,34fr) minmax(0,52fr);grid-template-areas:"op r r" ". . n";align-items:baseline;border-top:1px solid #000;margin-top:2vh;padding-top:4.4vh}
.sum .total .op{grid-area:op;font-weight:200}
.sum .res{grid-area:r;white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(40px,4.4vw,76px);letter-spacing:-.015em;line-height:1;padding-right:3vw}
.sum .anote{grid-area:n;margin-top:4vh;font-size:clamp(16px,1.25vw,19px);line-height:1.45;max-width:46ch}
.aentry{margin-top:16vh;font-size:clamp(24px,2.4vw,40px);line-height:1.18;letter-spacing:-.02em;max-width:30ch}
.aentry em{font-family:var(--serif);font-style:italic;letter-spacing:-.005em;font-size:1.08em}
/* experience: one argument on one axis. Left of the axis the context changes, right of it the operating capability stays the same */
.e-bwf{margin-top:4vh;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.1vw,36px);letter-spacing:-.01em;line-height:1.1}
.e-led{position:relative;margin-top:16vh}
.e-led::before{content:"";position:absolute;left:40%;top:0;bottom:0;width:1px;background:#000}
.e-axis{display:grid;grid-template-columns:40fr 60fr;border-bottom:1px solid #000;padding-bottom:14px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.e-axis span+span{padding-left:4vw}
.e-case{display:grid;grid-template-columns:40fr 60fr;padding:10vh 0 0}
.e-ctx{padding-right:3vw}
.e-own{padding-left:4vw}
.e-where{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.e-name{margin-top:3vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(40px,4.4vw,76px);letter-spacing:-.045em;line-height:.92}
.e-name span{display:block;margin-top:.22em;font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;font-variation-settings:normal;font-size:.62em;letter-spacing:-.01em;line-height:1}
.e-role{display:inline-block;margin-top:4vh;padding-top:12px;border-top:1px solid #000;font-size:clamp(17px,1.3vw,20px);font-weight:500;line-height:1.3;letter-spacing:-.01em;max-width:24ch}
.e-nums{display:flex;flex-wrap:wrap;gap:3vh 4.4vw;margin-bottom:4.4vh}
.e-nums div{display:flex;flex-direction:column-reverse}
.e-nums dd{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(30px,2.9vw,50px);letter-spacing:-.04em;line-height:1;white-space:nowrap}
.e-nums dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:10px}
.e-txt{font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:46ch}
.e-terms{display:flex;flex-wrap:wrap;column-gap:1.5em;row-gap:.45em;margin-top:3vh;max-width:62ch}
.e-terms li{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.e-proof{font-family:var(--serif);font-style:italic;font-size:clamp(22px,1.9vw,32px);letter-spacing:-.01em;line-height:1.15;max-width:30ch;margin-top:4.4vh}
.e-more{padding:14vh 0 4vh}
.e-more .e-where{padding-top:1em}
.e-env div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3vw;align-items:baseline}
.e-env div+div{margin-top:3vh}
.e-env dt{font-weight:600;font-size:clamp(20px,1.7vw,28px);letter-spacing:-.025em;line-height:1.15}
.e-env dt i{font-weight:300}
.e-env dd{font-size:16px;line-height:1.45;max-width:36ch}
.e-env dd b{font-weight:600}
/* impact as an accounting ledger on black: caption left, figure right */
.e-impact{margin:16vh calc(-1 * var(--m)) 0;padding:15vh var(--m) 17vh;background:#000;color:#fff}
.e-big{margin-top:6vh}
.e-big div{display:grid;grid-template-columns:40fr 60fr;align-items:baseline;padding:2.6vh 0;border-bottom:1px solid rgba(255,255,255,.28)}
.e-big dt{grid-row:1;grid-column:1;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.e-big dd{grid-row:1;grid-column:2;text-align:right;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(52px,6.6vw,116px);letter-spacing:-.05em;line-height:.95;white-space:nowrap}
.e-note{margin-top:2.4vh;text-align:right;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.4vw,22px)}
.e-comm{display:grid;grid-template-columns:40fr 60fr;margin-top:16vh}
.e-cstate{font-size:clamp(26px,2.5vw,42px);line-height:1.1;letter-spacing:-.02em;padding-right:3vw;max-width:16ch}
.e-cstate .it{letter-spacing:-.005em}
.e-comm>div{padding-left:4vw}
.e-cflow{display:flex;flex-wrap:wrap;column-gap:.9em;row-gap:.15em;margin-top:3vh;font-size:clamp(20px,1.75vw,29px);letter-spacing:-.015em;line-height:1.3}
.e-cflow li:nth-child(even){font-family:var(--serif);font-style:italic;font-size:1.08em}
/* independent practice: own wordmark, not an employer */
.e-prac{display:grid;grid-template-columns:40fr 60fr;margin-top:18vh}
.e-mark{margin-top:4vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;font-size:clamp(64px,7.8vw,136px);letter-spacing:-.055em;line-height:.84}
.e-since{margin-top:3vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.e-atel{margin-top:5vh;font-size:15px;line-height:1.45}
.e-atel .it{display:block;font-size:clamp(26px,2.3vw,38px);letter-spacing:-.01em;line-height:1.05;margin-bottom:8px}
.e-pr{padding-left:4vw;padding-top:calc(11px + 4vh)}
.e-ptxt{font-size:clamp(22px,2vw,34px);line-height:1.2;letter-spacing:-.02em;max-width:26ch}
.e-psub{margin-top:3.6vh;font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:46ch}
.e-stages{grid-column:1/-1;margin-top:14vh}
.e-stages ol{display:grid;grid-template-columns:repeat(4,1fr);margin-top:3vh;border-top:1px solid #000}
.e-stages li{position:relative;padding:2.6vh 2vw 0 0;font-size:clamp(20px,1.8vw,30px);letter-spacing:-.02em;line-height:1.15}
.e-stages li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:#000}
.e-stages li:nth-child(even){font-family:var(--serif);font-style:italic}
/* creative and cultural fluency: names as a typographic field on the same axis */
.e-crea{margin-top:20vh}
.e-cq{margin-top:4vh;font-size:clamp(34px,4vw,68px);line-height:1.04;letter-spacing:-.03em;max-width:20ch}
.e-csub{margin-top:4vh;font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:52ch}
.e-field{margin-top:10vh;border-top:1px solid #000}
.e-field>div{display:grid;grid-template-columns:40fr 60fr;padding:3.6vh 0 0}
.e-field dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding-top:1.1em}
.e-field dd{padding-left:4vw}
.e-field ul{display:flex;flex-wrap:wrap;column-gap:.7em;row-gap:0}
.e-field li{font-size:clamp(28px,3vw,52px);line-height:1.1;letter-spacing:-.03em}
.e-field li:nth-child(odd){font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;letter-spacing:-.045em}
.e-field li:nth-child(even){font-family:var(--serif);font-style:italic;letter-spacing:-.01em}
.e-field sup{margin-left:.35em;vertical-align:.95em;font-family:var(--sans);font-style:normal;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;font-weight:600}
.e-fnote{margin-top:4vh;padding-left:calc(40% + 4vw);font-family:var(--serif);font-style:italic;font-size:18px}
/* closing: what carries across, then the next step */
.e-close{margin-top:22vh}
.e-cl{font-size:clamp(34px,4.1vw,70px);line-height:1.05;letter-spacing:-.03em;max-width:21ch}
.e-cl b{font-weight:600}
.e-cl .it{letter-spacing:-.01em}
.e-cl2{margin-top:4vh;font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:44ch}
.e-acts{display:flex;flex-wrap:wrap;gap:4vh 3vw;margin-top:11vh}
.e-acts .xact{margin-top:0}
/* experience: impact, environments, depth */
.xlead{font-size:clamp(17px,1.35vw,20px);line-height:1.5;max-width:46ch;margin-top:3vh}
/* lead */
.lrows{margin-top:3vh;border-top:1px solid #000}
.lrows div{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:3vw;align-items:baseline;padding:2.6vh 0;border-bottom:1px solid #000}
.lrows dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(18px,1.5vw,24px);letter-spacing:-.02em}
.lrows dd{font-size:clamp(17px,1.35vw,20px);line-height:1.45}

.lk{font-size:clamp(36px,4.6vw,80px)!important;max-width:16ch!important;line-height:1.02!important;letter-spacing:-.03em!important}
.lsub{font-size:17px;margin-top:3vh}
.lforms{margin-top:3vh;display:flex;flex-direction:column;gap:.15em}
.lforms li{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(20px,2vw,34px);letter-spacing:-.035em;line-height:1.12}
.lsplit{display:grid;grid-template-columns:1.6fr 1fr;gap:6vw;margin-top:10vh;align-items:start}
.lconn{display:flex;flex-wrap:wrap;align-items:center;gap:.8em;margin-top:2.4vh;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.015em}
.lconn i{display:block;width:18px;height:1px;background:#000}
.lfigs{grid-template-columns:1fr;margin-top:0;align-self:end}
.lfigs dd{font-size:clamp(24px,2.2vw,38px);white-space:normal}
.states{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw;margin-top:8vh}
.states .g{position:relative;height:24vh;border-top:1px solid #000}
.states .g i{position:absolute;display:block;background:#000}
.states .l{display:block;margin-top:2vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.states p{font-size:16px;line-height:1.45;margin-top:12px;max-width:34ch}

/* reduced motion: every chapter as a finished still */
.rm #orgShine{display:none}

@media (max-width:760px){
  #proof .grid{grid-template-columns:1fr}
  #mk-regions{grid-template-columns:1fr;row-gap:2vh}
  .og{grid-template-columns:1fr;row-gap:10px}
  #orgCut,#orgShine{display:none}
  #ways .row{grid-template-columns:1fr 36px}
  #ways .row .word{grid-column:1}#ways .row p{grid-column:1;text-align:left;justify-self:start}#ways .row .plus{grid-column:2;grid-row:1}
  .mini .lbl2{white-space:normal;max-width:48%}
  .dd{grid-template-columns:1fr}.states{grid-template-columns:1fr}
  .j-cue{justify-content:center;gap:12px}.j-cue .cl{display:none}.j-cue .ci{width:26px;height:26px;font-size:16px}
  #contact{padding-top:max(11vh,86px)}#contact .c-in{min-height:0;padding-right:0}#contact .kick{margin-bottom:54px}#contact .kick .t{font-size:38px}#contact .c-copy{width:100%}#contact .open{font-size:clamp(28px,8.4vw,40px);line-height:1.17;max-width:19ch;text-wrap:pretty}.c-acts{width:100%;margin-top:64px}.c-row{min-height:64px;font-size:24px}
  .e-led::before{left:0}
  .e-axis{grid-template-columns:1fr;row-gap:4px;padding-left:18px}.e-axis span+span{padding-left:0}
  .e-case{grid-template-columns:1fr;padding:7vh 0 0 18px}
  .e-ctx{padding-right:0}.e-own{padding-left:0;margin-top:4vh}
  .e-name{font-size:40px}
  .e-more{padding-top:9vh}.e-more .e-where{padding-top:0}.e-env div{grid-template-columns:1fr;row-gap:4px}
  .e-nums{gap:3vh 9vw}.e-nums dd{font-size:30px;white-space:normal}
  .e-big div{grid-template-columns:1fr;row-gap:10px;padding:3vh 0}
  .e-big dt,.e-big dd{grid-row:auto;grid-column:1;text-align:left}.e-big dd{order:-1}.e-big dd{font-size:clamp(40px,12.4vw,54px)}
  .e-note{text-align:left}
  .e-comm,.e-prac{grid-template-columns:1fr}.e-comm{margin-top:11vh}.e-comm>div{padding-left:0;margin-top:6vh}
  .e-pr{padding:6vh 0 0}.e-mark{font-size:72px}
  .e-stages ol{grid-template-columns:1fr;border-top:0;border-left:1px solid #000;row-gap:3vh}
  .e-stages li{padding:0 0 0 20px}.e-stages li::before{left:-4px;top:.45em}
  .e-field>div{grid-template-columns:1fr;row-gap:1.4vh;padding-top:4vh}.e-field dt{padding-top:0}.e-field dd{padding-left:0}.e-field li{font-size:28px}
  .e-fnote{padding-left:0}
  .e-cl{font-size:34px}.e-acts{flex-direction:column}
  .sum{--op:30px;margin-top:10vh}
  .sum .d{grid-template-columns:var(--op) minmax(0,1fr);grid-template-areas:"op t" "op p" "op u" "op go";padding:4vh 0}
  .sum h3{max-width:none;padding-right:0;font-size:26px}.sum .op{font-size:26px}
  .sum .d p{margin-top:1.6vh}
  .sum .go{justify-self:start;margin-top:2.4vh}
  .sum .total{grid-template-columns:var(--op) minmax(0,1fr);grid-template-areas:"op r" ". n";padding-top:4vh}
  .sum .total .op{grid-area:op}.sum .res{grid-area:r;font-size:clamp(30px,9vw,38px);white-space:normal;padding-right:0}.sum .anote{grid-area:n;margin-top:3vh}
  .figs{grid-template-columns:1fr 1fr;row-gap:4vh}.fig dd{font-size:26px;white-space:normal}
  .dgrp{grid-template-columns:1fr;row-gap:3vh}.dgroups{grid-template-columns:1fr;row-gap:2.4vh}.dgroups .sg ul{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px}.dgroups button.dim{margin-bottom:0}.dgroups .sc h4{margin-bottom:0}
  .lsplit{grid-template-columns:1fr;row-gap:8vh}
  .lrows div{grid-template-columns:1fr;row-gap:10px}.lfigs{grid-template-columns:1fr 1fr}
  .mini{max-width:340px}
  .dfig{flex-wrap:wrap;row-gap:8px}.dfig b{font-size:36px}
  .xgeo{font-size:18px;gap:.8em;white-space:nowrap}
}

/* ---------- Layer 2 relationships: the way back to the deep dive this one was opened from ---------- */
#deep .dret[hidden]{display:none}
.dret{margin-bottom:8vh}
.dret .xh{margin-bottom:10px;opacity:.6}
.dret-b{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;column-gap:24px;align-items:center;width:100%;padding:18px 22px;background:#000;color:#fff;text-align:left;cursor:pointer}
.dret-b .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:clamp(16px,1.4vw,22px);letter-spacing:.02em;text-transform:uppercase;font-weight:600}
.dret-b .q{font-size:clamp(15px,1.15vw,18px);line-height:1.3;opacity:.72}
.dret-b .rt{white-space:nowrap;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .3s}
.dret-b .ret{display:flex;align-items:center;gap:12px;justify-self:end}
.dret-b .mi{display:flex;align-items:center;justify-content:flex-start;width:24px;height:24px}
.dret-b .mi i{display:block;width:18px;height:1px;background:#fff;transition:width .35s var(--ease)}
.dret-b:hover .rt,.dret-b:focus-visible .rt{text-decoration-color:currentColor}
.dret-b:hover .mi i,.dret-b:focus-visible .mi i{width:24px}
.dret-b:focus-visible{outline:1px solid #000;outline-offset:3px}

/* ---------- Layer 2 headline (Lena, 27.09.2026): the chapter logic of Layer 1, a pill and the name in the wide face, larger, so every deep dive says where the visitor is ---------- */
.dkick{display:flex;flex-direction:column;align-items:flex-start}
/* where you are, one rule everywhere in Layer 2 (Lena, 28.09.2026): the address in the bubble (the level), what the page belongs to in Boska (the quiet explanation), the page itself in wide capitals (where you are) */
#deepCat{display:inline-flex;align-items:baseline;justify-content:flex-end;flex-wrap:wrap;gap:4px 10px;text-align:right}
#deepCat .pill{align-self:center}
#deepCat .dctx{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;font-variation-settings:normal;text-transform:none;letter-spacing:0;font-size:15px;color:rgba(0,0,0,.62)}
#deepCat .dcur{font-weight:600}
#deepCat .pill{flex:none;letter-spacing:.06em}
@media (max-width:760px){#deepCat{column-gap:8px}#deepCat .dctx{font-size:14px}}
/* an area between two dimensions names both; on a narrow phone the names carry it and the pill steps back, so Back keeps its room */
@media (max-width:440px){#deepCat.multi .dctx{display:none}}
.dkick .t{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(56px,6.6vw,112px);letter-spacing:-.05em;line-height:.9}

/* ---------- Deep Dive 01 Proposition: impact, one mechanism, decision, evidence, where it connects, contact ---------- */
#deep .dd[hidden],#deep .dpage[hidden]{display:none}
.pp{--rule:rgba(0,0,0,.14);--bar:74px}
.pp .xh{display:block}
/* system names are set in the wide face: PROPOSITION here, its neighbours below */
.pp-sys{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;letter-spacing:-.01em}

/* 1 entry: the page name orients, the thesis leads, the couplet answers it. The dark field below is a deliberate preview */
.pp-hero{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-rows:auto 1fr auto;column-gap:5vw;min-height:calc(100svh - var(--h0,190px) - 9vh);padding-bottom:7vh}
.pp-or{grid-column:1/-1}
.pp-k{grid-column:1;align-self:center;padding:7vh 0 6vh;font-size:clamp(34px,3.9vw,64px);line-height:1.02;letter-spacing:-.03em;max-width:17ch}
.pp-k .it{letter-spacing:-.015em}
.pp-sub{grid-column:2;grid-row:3;align-self:end;padding-top:16px;border-top:1px solid #000;font-size:clamp(19px,1.55vw,25px);line-height:1.22;letter-spacing:-.015em}
.pp-sub span{display:block;white-space:nowrap}
@media (min-width:761px){.pp-sub{grid-column:1/-1;justify-self:end;min-width:min(100%,24em)}}
.pp-sub span:first-child{opacity:.5}

/* 2 the mechanism: one dark field. Left the statement, its three meanings and the choice; right the picture and, below it,
   a white reading field that closes exactly with the list */
.pp-ins{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:5vw;align-content:center;align-items:stretch;
  min-height:calc(100vh - var(--bar));margin:0 calc(var(--m) * -1);padding:8vh var(--m);background:#000;color:#fff}
.pp-st{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(30px,2.9vw,50px);letter-spacing:-.05em;line-height:.98;max-width:14ch}
.pp-stx{margin-top:2.6vh;font-size:clamp(16px,1.25vw,20px);line-height:1.4;color:rgba(255,255,255,.72)}
.pp-stx span{display:block}
.pp-stx b{color:#fff;font-weight:600}
.pp-tg{margin-top:5vh}
.pp-gh{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;opacity:.64;margin-bottom:8px}
.pp-gh+.pp-row+.pp-gh{margin-top:3vh}
.pp-row{border-top:1px solid rgba(255,255,255,.22)}
.pp-row:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.pp-tab{display:grid;grid-template-columns:62px minmax(0,1fr) 20px;column-gap:18px;align-items:center;min-height:44px;padding:9px 12px;margin:0 -12px;width:calc(100% + 24px);text-align:left;color:#fff;cursor:pointer;transition:background-color .3s}
.pp-tab .gl{position:relative;display:flex;flex-direction:column;gap:4px;opacity:.5;transition:opacity .3s}
.pp-tab .gl span{position:relative;display:block;height:5px}
.pp-tab .gl span::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.24)}
.pp-tab .gl i{position:absolute;top:0;bottom:0;background:#fff;z-index:1}
.pp-tab .gl em{position:absolute;left:34%;width:32%;top:-3px;bottom:-3px;border:1px dashed rgba(255,255,255,.6)}
.pp-tab .t{font-size:clamp(16px,1.2vw,19px);letter-spacing:-.01em;line-height:1.25;opacity:.72;transition:opacity .3s}
.pp-tab .x{justify-self:end;font-size:20px;font-weight:300;line-height:1;opacity:.72;transition:transform .45s var(--ease),opacity .3s}
.pp-tab:hover .gl,.pp-tab:focus-visible .gl,.pp-tab:hover .t,.pp-tab:focus-visible .t,.pp-tab:hover .x,.pp-tab:focus-visible .x{opacity:1}
.pp-tab:hover .x,.pp-tab:focus-visible .x{transform:rotate(90deg)}
.pp-tab.on{background:rgba(255,255,255,.1)}
.pp-tab.on .gl,.pp-tab.on .t,.pp-tab.on .x{opacity:1}
.pp-tab.on .t{font-weight:600}
.pp-tab.on .x{transform:rotate(45deg)}
.pp-tab[data-s="0"].on .x{opacity:0}
.pp-tab:focus-visible{outline:1px solid #fff;outline-offset:-1px}
.pp-d{display:none}
.pp-tab .nm{display:none}

.pp-ib{display:flex;flex-direction:column;justify-content:space-between;row-gap:5vh}
/* the picture: three rows, one column. Rows are the three realities, the dashed column is the idea, white is where each reality really is */
.pp-rails{position:relative;display:grid;grid-template-columns:196px minmax(0,1fr);grid-template-rows:16px 48px 48px 48px;row-gap:22px}
.pp-lab{grid-column:1;align-self:center;padding-right:18px}
.pp-lab b{display:block;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.pp-lab span{display:block;margin-top:4px;font-size:13px;line-height:1.3;color:rgba(255,255,255,.68)}
.pp-track{grid-column:2;position:relative;z-index:1}
.pp-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.2)}
.pp-track i{position:absolute;top:0;bottom:0;display:block;background:#fff;transition:left .9s var(--ease),width .9s var(--ease)}
.pp-colw{grid-column:2;grid-row:1/5;position:relative;pointer-events:none}
.pp-colt{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.pp-col{position:absolute;left:34%;width:32%;top:26px;bottom:-11px;border:1px dashed rgba(255,255,255,.62)}
/* the reading: a white field, the output of the choice. One head, one insight and its consequence, one question */
.pp-out{display:grid;background:#fff;color:#000}
.pp-o{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:3vw;padding:22px 26px 26px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.pp-o.on{opacity:1;visibility:visible;transition:opacity .45s .08s}
.pp-o .h{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-bottom:2.4vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.pp-o .h .pill{letter-spacing:.06em;font-stretch:100%;font-variation-settings:normal;font-weight:400}
.pp-o .i{font-size:clamp(18px,1.4vw,22px);line-height:1.3;letter-spacing:-.012em;font-weight:500}
.pp-o .c{margin-top:1.4vh;font-size:clamp(15px,1.1vw,17px);line-height:1.42;color:rgba(0,0,0,.66)}
/* the question Lena asks: the reflective voice of the page (Boska), next to the diagnosis in the sans */
.pp-o .q{align-self:start;padding-left:2.4vw;border-left:1px solid rgba(0,0,0,.16);font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.55vw,25px);line-height:1.22;letter-spacing:-.005em}
.pp-o .q .xh{font-family:var(--sans);font-style:normal}
/* the aligned state has no question: its rule reads across the whole field */
.pp-o[data-s="0"] .b{grid-column:1/-1}
.pp-o[data-s="0"] .i{max-width:40ch}
.pp-o .q .xh{margin-bottom:10px;font-size:10px;font-weight:500;letter-spacing:.14em;color:rgba(0,0,0,.6)}

/* 3 what changes: three steps, one grammar. Number and title, the picture, then the lines */
.pp-work{padding-top:19vh}
.pp-big{margin-top:4vh;font-size:clamp(30px,2.9vw,48px);line-height:1.1;letter-spacing:-.025em;max-width:31ch}
.pp-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:4vw;margin-top:9vh;align-items:start}
.pp-flow>li{border-top:1px solid #000;padding-top:3vh}
.pp-flow h4{display:flex;align-items:baseline;gap:14px;font-size:clamp(21px,1.75vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.pp-flow h4 .pill{flex:none;transform:translateY(-3px)}
.pp-flow .fg{position:relative;height:40px;margin:5.4vh 0 4vh}
.pp-flow .fr>li,.pp-flow .fr>div{padding:11px 0;border-top:1px solid var(--rule);font-size:clamp(15.5px,1.15vw,18px);line-height:1.38;letter-spacing:-.005em}
.pp-flow .fr>li:last-child,.pp-flow .fr>div:last-child{border-bottom:1px solid var(--rule)}
.f1 .bar{position:absolute;left:0;top:0;width:62%;height:16px;background:#000}
.f1 .sf{position:absolute;left:0;right:0;top:22px;height:1px;background:#000}
.f1 .d{position:absolute;top:22px;width:1px;background:#000;opacity:.5}
.f1 .d1{left:10%;height:18px}.f1 .d2{left:31%;height:10px}.f1 .d3{left:52%;height:15px}
.f2 .fg{display:flex;gap:6px}
.f2 .fg i{display:block;flex:0 0 calc((62% - 24px) / 5);height:16px;box-shadow:inset 0 0 0 1px #000}
.f2 .fg .fk{background:#000}
.f2 .fg .fs{background:linear-gradient(#000,#000) 0 0/50% 100% no-repeat}
.f3 .fg{display:flex;flex-direction:column;gap:4px}
.f3 .fg i{display:block;width:62%;height:8px;background:#000}
.f2 dl div{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:12px;align-items:baseline}
.f2 dt{display:flex;align-items:center;gap:10px;font-weight:600}
.f2 .g{flex:none;display:block;width:22px;height:8px;box-shadow:inset 0 0 0 1px #000;transform:translateY(-1px)}
.f2 .g1{background:#000}
.f2 .g2{background:linear-gradient(#000,#000) 0 0/50% 100% no-repeat}
.f3 .fr>li:last-child{font-weight:500}

/* 4 evidence: the name, then scale, responsibility, transformation and result in one reading line */
.pp-ev{margin-top:24vh}
.pp-evn{margin-top:3vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(60px,7.4vw,128px);letter-spacing:-.055em;line-height:.86}
.pp-evs{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,2.8fr) minmax(0,3fr) minmax(0,3fr);column-gap:3.4vw;margin-top:7vh;padding-top:3vh;border-top:1px solid #000}
.pp-evs dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:.6;margin-bottom:3vh}
.pp-evs b{display:block;font-weight:600}
.pp-evs span{display:block;margin-top:14px;font-size:15px;line-height:1.4;max-width:30ch}
.e1 b{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:clamp(40px,4.2vw,72px);letter-spacing:-.045em;line-height:.9;white-space:nowrap}
.e2 b{font-size:clamp(22px,1.9vw,32px);letter-spacing:-.025em;line-height:1.05}
.e3 b{font-size:clamp(19px,1.5vw,25px);font-weight:500 !important;letter-spacing:-.015em;line-height:1.15}
.e4 b.it{font-weight:400;font-size:clamp(24px,2.1vw,36px);line-height:1.08;letter-spacing:-.01em}
.pp-also{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);column-gap:3.4vw;align-items:baseline;margin-top:10vh;padding-top:3vh;border-top:1px solid #000;font-size:16px;line-height:1.45}
.pp-also b{display:block;font-weight:600;font-size:clamp(19px,1.5vw,24px);letter-spacing:-.015em;line-height:1.2;margin-bottom:6px}
.pp-also b i{font-style:normal;opacity:.5}

/* 5 where it connects: three neighbouring operating questions, each opens and can be closed again (+ / −) */
.pp-nb{margin-top:24vh}
.pp-nbk{margin-top:3vh;font-size:clamp(28px,2.7vw,46px);line-height:1.08;letter-spacing:-.025em}
.pp-nb ul{margin-top:6vh;border-bottom:1px solid #000}
.pp-nb li{border-top:1px solid #000}
.pp-nb button{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) 32px;align-items:center;width:100%;padding:26px 0;text-align:left;cursor:pointer}
.pp-nb .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:clamp(20px,1.8vw,30px);letter-spacing:-.01em;text-transform:uppercase;font-weight:600}
.pp-nb .q{font-size:clamp(17px,1.35vw,21px);letter-spacing:-.01em;line-height:1.3;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color .3s}
.pp-nb .plus{justify-self:end;font-size:28px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.pp-nb button:hover .q,.pp-nb button:focus-visible .q{text-decoration-color:currentColor}
.pp-nb button:hover .plus,.pp-nb button:focus-visible .plus{transform:rotate(90deg)}

/* 6 the end of the thought, then contact */
.pp-cta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:6vw;align-items:end;margin-top:18vh;padding-top:4vh;border-top:1px solid #000}
.pp-cta p{font-size:clamp(22px,2vw,32px);line-height:1.18;letter-spacing:-.02em;max-width:32ch}
.pp-cta .act{justify-self:end}

.rm .pp-track i,.rm .pp-o,.rm .pp-tab .x,.rm .pp-d{transition:none}
@media (prefers-reduced-motion:reduce){.pp-track i,.pp-o,.pp-tab .x,.pp-d{transition:none}}

@media (max-width:1100px) and (min-width:761px){
  .dgroups{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:7vw}
  .pp-ins{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:5vw}
  .pp-flow{grid-template-columns:1fr 1fr;row-gap:8vh}.pp-flow .f3{grid-column:1/-1}
  .pp-evs{grid-template-columns:1fr 1fr;row-gap:6vh}
  .e1 b{white-space:normal}
}
@media (max-width:760px){
  .pp{--bar:62px}
  .dret{margin-bottom:6vh}
  .dret-b{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:16px 18px}
  .dret-b .ret{justify-self:start;margin-top:4px}
  .pp-hero{grid-template-columns:1fr;min-height:calc(100svh - var(--h0,160px) - 7vh);padding-bottom:6vh}
  .dkick .t{font-size:clamp(40px,12.6vw,58px)}
  .pp-k{font-size:clamp(30px,8.6vw,38px);line-height:1.04;padding:5vh 0}
  .pp-sub{grid-column:1;font-size:20px}
  .pp-sub span{white-space:normal}
  .pp-ins{grid-template-columns:minmax(0,1fr);align-content:start;min-height:0;padding:8vh var(--m) 9vh}
  .pp-ia,.pp-ib{display:contents}
  .pp-st{order:0;font-size:clamp(32px,9.4vw,40px)}
  .pp-stx{order:0;font-size:16px}
  /* on a phone the picture, the six choices and the reading share one screen: the choices become small chips */
  .pp-rails{order:1;margin-top:4vh;grid-template-columns:142px minmax(0,1fr);grid-template-rows:14px auto auto auto;row-gap:8px}
  .pp-track{height:24px;align-self:center}
  .pp-lab{padding-right:10px}.pp-lab b{font-size:10px}.pp-lab span{font-size:11.5px;margin-top:2px;line-height:1.25}
  .pp-col{top:18px;bottom:-5px}
  .pp-colt{font-size:9.5px}
  .pp-tg{order:2;margin-top:2.4vh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pp-gh{display:none}
  .pp-row,.pp-row:last-child{border:0}
  .pp-tab{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;width:100%;min-height:44px;padding:8px 9px;border:1px solid rgba(255,255,255,.28)}
  .pp-tab .gl{width:100%}
  .pp-tab .t,.pp-tab .x{display:none}
  .pp-tab .nm{display:block;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.72}
  .pp-tab.on{background:#fff;color:#000;border-color:#fff}
  .pp-tab.on .nm{opacity:1}
  .pp-tab.on .gl span::before{background:rgba(0,0,0,.25)}
  .pp-tab.on .gl i{background:#000}
  .pp-tab.on .gl em{border-color:rgba(0,0,0,.6)}
  .pp-d{display:none}
  .pp-out{order:3;display:grid;margin-top:8px}
  .pp-o{grid-template-columns:minmax(0,1fr);padding:13px 16px 15px}
  .pp-o .h{margin-bottom:8px;font-size:10px}
  .pp-o .i{font-size:16.5px}
  .pp-o .c{margin-top:6px;font-size:14.5px}
  .pp-o .q{margin-top:10px;padding:10px 0 0;border-left:0;border-top:1px solid rgba(0,0,0,.14);font-size:18px}
  .pp-o .q .xh{margin-bottom:6px;font-size:9.5px}
  .pp-o[data-s="0"] .b{grid-column:auto}
  .pp-work{padding-top:14vh}
  .pp-big{font-size:clamp(28px,8.2vw,36px)}
  .pp-flow{grid-template-columns:1fr;row-gap:8vh;margin-top:7vh}
  .pp-flow .fg{margin:4vh 0 3vh}
  .f2 dl div{grid-template-columns:1fr;row-gap:4px}
  .pp-ev{margin-top:17vh}
  .pp-evn{font-size:clamp(54px,16vw,68px)}
  .pp-evs{grid-template-columns:minmax(0,1fr);margin-top:5vh;padding-top:0;border-top:0}
  .pp-evs>div{padding:3vh 0;border-top:1px solid #000}
  .pp-evs dt{margin-bottom:1.6vh}
  .e1 b{font-size:clamp(34px,10vw,42px)}
  .pp-also{grid-template-columns:1fr;row-gap:3vh;margin-top:8vh}
  .pp-nb{margin-top:16vh}
  .pp-nbk{font-size:28px}
  .pp-nb button{grid-template-columns:minmax(0,1fr) 28px;row-gap:8px;padding:20px 0}
  .pp-nb .n{grid-column:1;font-size:22px}.pp-nb .q{grid-column:1;font-size:17px}.pp-nb .plus{grid-column:2;grid-row:1}
  .pp-cta{grid-template-columns:1fr;row-gap:5vh;margin-top:14vh}
  .pp-cta p{font-size:23px}
  .pp-cta .act{justify-self:start}
}

/* ---------- Deep Dive 02 Advantage: a sieve of differences, the path through the operation, where advantage lives, the bridge ---------- */
.av{--rule:rgba(0,0,0,.14);--bar:74px}
.av .xh{display:block}
/* the page reads as composed frames: each major thought owns a screen on laptop and desktop */
.av-fr{min-height:calc(100vh - var(--bar));display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,6vh,80px) 0}
@media (min-width:761px) and (min-height:560px) and (prefers-reduced-motion:no-preference){#deep:has(.av:not([hidden])){scroll-snap-type:y proximity;scroll-padding-top:74px}.av-fr{scroll-snap-align:start}}

/* 1 entry */
.av-hero{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-rows:auto 1fr auto;column-gap:5vw;min-height:calc(100svh - 190px);padding-bottom:9vh}
.av-hero .dkick{grid-column:1/-1}
.av-k{grid-column:1;align-self:center;padding:7vh 0 6vh;font-size:clamp(34px,3.9vw,64px);line-height:1.02;letter-spacing:-.03em;max-width:20ch}
.av-k .it{letter-spacing:-.015em}
.av-sub{grid-column:1/-1;grid-row:3;justify-self:end;align-self:end;width:min(100%,24em);padding-top:16px;border-top:1px solid #000;font-size:clamp(19px,1.55vw,25px);line-height:1.22;letter-spacing:-.015em}

/* 2 the sieve */
.av-st{font-size:clamp(28px,2.8vw,48px);line-height:1.08;letter-spacing:-.028em;max-width:30ch;font-weight:400}
.av-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto auto auto auto;column-gap:3.4vw;margin-top:5.4vh}
.av-c{display:grid;grid-row:1/span 6;grid-template-rows:subgrid;align-items:start;position:relative}
.av-c[data-c="0"]{grid-column:1}.av-c[data-c="1"]{grid-column:2}.av-c[data-c="2"]{grid-column:3}.av-c[data-c="3"]{grid-column:4}
.av-ql{grid-column:1/-1;grid-row:5;align-self:end;padding-top:3.4vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.av-dots{grid-row:1;display:grid;grid-template-columns:repeat(4,16px);gap:12px;padding-bottom:3.6vh;position:relative}
.av-dots i{display:block;width:16px;height:16px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 1.5px #000;transition:background-color .55s var(--ease),box-shadow .55s var(--ease)}
.av-dots i.o{background:transparent}
.av-dots i.g{background:transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.av-c:not(:last-child) .av-dots::after{content:"";position:absolute;left:calc(4 * 16px + 3 * 12px + 16px);right:calc(-3.4vw + 8px);top:calc(1.5 * 16px + 12px);height:1px;background:var(--rule)}
.av-c h4{grid-row:2;display:flex;align-items:baseline;gap:12px;padding-top:2.6vh;border-top:1px solid #000;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(20px,1.7vw,28px);letter-spacing:-.035em;line-height:1.05}
.av-c h4 .n{flex:none;font-stretch:100%;font-variation-settings:normal;font-weight:400;font-size:11px;letter-spacing:.06em;border:1px solid currentColor;border-radius:20px;padding:2px 8px;transform:translateY(-4px)}
.av-c .d{grid-row:3;margin-top:1.8vh;font-size:clamp(16px,1.25vw,19px);line-height:1.3;letter-spacing:-.01em;max-width:24ch}
.av-c .x{grid-row:4;display:flex;gap:10px;align-items:baseline;margin-top:1.8vh;font-size:14px;line-height:1.4;color:rgba(0,0,0,.6);max-width:28ch}
.av-c .x i{flex:none;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.2px rgba(0,0,0,.6);transform:translateY(1px)}
.av-c .q{grid-row:6;margin-top:1.4vh;padding-top:1.6vh;border-top:1px solid var(--rule);font-size:clamp(16px,1.2vw,19px);line-height:1.35;letter-spacing:-.01em;font-weight:500;max-width:24ch}

/* 3 the path through the operation: one dark field. The reason for choice enters, passes five parts of the operation, leaves strengthened, diluted or traded away */
.av-op{margin:0 calc(var(--m) * -1);padding-left:var(--m);padding-right:var(--m);background:#000;color:#fff}
.av-oph{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:5vw;align-items:end}
.av-opk{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,3.6vw,60px);line-height:1.04;letter-spacing:-.015em;max-width:19ch}
.av-opg{font-size:clamp(16px,1.2vw,19px);line-height:1.45;color:rgba(255,255,255,.72);max-width:38ch;padding-bottom:.4em}
.av-flow{--h:200px;display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,290px);grid-template-rows:auto var(--h);column-gap:0;row-gap:2.4vh;margin-top:8vh;position:relative}
.av-flow .cap{grid-row:1;align-self:end;font-size:clamp(16px,1.2vw,19px);line-height:1.35;max-width:36ch}
.av-flow .c2{grid-column:2;padding-left:2vw}
.av-flow .c3{grid-column:3;padding-left:70px;color:#fff}
.av-flow .o1{grid-column:1;grid-row:2;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}
.av-flow .o1 .dot{display:block;width:26px;height:26px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .7s var(--ease)}
.av-flow .lb{position:absolute;left:0;top:calc(50% + 24px);font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;max-width:12ch;line-height:1.35}
.av-flow .path{grid-column:1/3;grid-row:2;align-self:center;height:1px;margin-left:13px;background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease) .25s}
.av-flow .o2{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0 2vw}
.av-flow .o2 li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;opacity:.25;transition:opacity .5s var(--ease)}
.av-flow .o2 li i{position:absolute;left:50%;top:0;bottom:30px;width:1px;background:rgba(255,255,255,.55)}
.av-flow .o2 li span{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.av-flow .o3{grid-column:3;grid-row:2;position:relative}
.av-flow .fork{position:absolute;left:0;top:0;width:70px;height:100%;overflow:visible}
.av-flow .fork path{fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset .8s var(--ease) 1.25s}
.av-flow .outs{position:absolute;left:70px;top:0;right:0;height:100%;display:grid;grid-template-rows:repeat(3,1fr)}
.av-flow .outs li{display:flex;align-items:center;gap:16px;font-size:clamp(18px,1.5vw,24px);letter-spacing:-.015em;opacity:0;transition:opacity .6s var(--ease)}
.av-flow .outs i{flex:none;display:block;border-radius:50%}
.av-flow .outs .s i{width:26px;height:26px;background:#fff}
.av-flow .outs .d i{width:16px;height:16px;background:rgba(255,255,255,.45);margin:0 5px}
.av-flow .outs .t i{width:16px;height:16px;box-shadow:inset 0 0 0 1px #fff;margin:0 5px}
.av-flow .outs .d span{color:rgba(255,255,255,.7)}
.av-flow .outs .t span{color:rgba(255,255,255,.55)}
.av-flow.go .o1 .dot{transform:scale(1)}
.av-flow.go .path{transform:scaleX(1)}
.av-flow.go .o2 li{opacity:1}
.av-flow.go .o2 li:nth-child(1){transition-delay:.35s}.av-flow.go .o2 li:nth-child(2){transition-delay:.5s}.av-flow.go .o2 li:nth-child(3){transition-delay:.65s}.av-flow.go .o2 li:nth-child(4){transition-delay:.8s}.av-flow.go .o2 li:nth-child(5){transition-delay:.95s}
.av-flow.go .fork path{stroke-dashoffset:0}
.av-flow.go .outs li{opacity:1}
.av-flow.go .outs li:nth-child(1){transition-delay:1.7s}.av-flow.go .outs li:nth-child(2){transition-delay:1.85s}.av-flow.go .outs li:nth-child(3){transition-delay:2s}

/* 4 in practice: one business line, three places where advantage became real */
.av-evk{margin-top:3vh;font-family:var(--serif);font-style:italic;font-size:clamp(30px,3vw,50px);line-height:1.08;letter-spacing:-.012em;max-width:24ch}
.av-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3.4vw;margin-top:9vh;position:relative}
.av-chain::before{content:"";position:absolute;left:0;right:0;top:calc(var(--cat) + 9px);height:1px;background:#000}
.av-chain{--cat:44px}
.av-chain li{display:grid;grid-template-rows:var(--cat) 18px auto auto;row-gap:0}
.av-chain .cat{align-self:end;padding-bottom:14px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:rgba(0,0,0,.6)}
.av-chain .cat i,.av-chain .nm i{font-style:normal;opacity:.4}
.av-chain .nd{position:relative;z-index:1;display:block;width:18px;height:18px;border-radius:50%;background:#000;box-shadow:0 0 0 6px #fff}
.av-chain .nm{margin-top:3vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(20px,1.8vw,30px);letter-spacing:-.03em;line-height:1.08;max-width:14ch}
.av-chain .ds{margin-top:1.6vh;font-size:clamp(15px,1.1vw,17px);line-height:1.45;max-width:30ch}

/* 5 the bridge: Proposition, Advantage, Positioning on one line; the two neighbours open, Advantage is where the visitor is */
.av-f5{gap:12vh;padding-bottom:4vh}
.av-brk{margin-top:3vh;font-family:var(--serif);font-style:italic;font-size:clamp(30px,3vw,50px);line-height:1.08;letter-spacing:-.012em;max-width:24ch}
.av-rel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;margin-top:8vh}
.av-rel .rn{display:grid;grid-template-columns:minmax(0,1fr) 32px;grid-template-rows:auto auto;column-gap:14px;row-gap:14px;padding-top:22px;border-top:1px solid #000;text-align:left;cursor:pointer}
.av-rel .rn .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(22px,2.1vw,34px);letter-spacing:-.02em;line-height:1;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:5px;justify-self:start;transition:background-size .45s var(--ease)}
.av-rel .rn .q{grid-column:1;font-size:clamp(16px,1.2vw,19px);line-height:1.4;max-width:32ch}
.av-rel .rn .plus{grid-column:2;grid-row:1;justify-self:end;font-size:30px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.av-rel .rn:hover .n,.av-rel .rn:focus-visible .n{background-size:100% 1px}
.av-rel .rn:hover .plus,.av-rel .rn:focus-visible .plus{transform:rotate(90deg)}
.av-rel .rc{display:grid;grid-template-columns:6vw auto 6vw;grid-template-rows:auto auto;align-items:center;justify-items:center;padding:0;transform:translateY(-13px)}
/* one line: the rule of Proposition, into Advantage, out to the rule of Positioning */
.av-rel .rc .ln:first-child{grid-column:1;grid-row:1}.av-rel .rc .dot{grid-column:2;grid-row:1}.av-rel .rc .ln:last-child{grid-column:3;grid-row:1}
.av-rel .rc .ln{display:block;width:100%;height:1px;background:#000}
.av-rel .rc .dot{display:block;width:26px;height:26px;border-radius:50%;background:#000}
.av-rel .rc .n{grid-column:1/-1;grid-row:2;margin-top:12px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.av-cta{margin-top:0}

.rm .av-dots i,.rm .av-flow *{transition:none!important}
@media (prefers-reduced-motion:reduce){.av-dots i,.av-flow *{transition:none!important}}

@media (max-width:1100px) and (min-width:761px){
  .av-cols{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;row-gap:8vh}
  .av-c,.av-c[data-c]{grid-row:auto;grid-column:auto;grid-template-rows:none;display:block}
  .av-ql{display:none}
  .av-c .q::before{content:"The question I ask";display:block;margin-bottom:6px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:rgba(0,0,0,.6)}
  .av-c:not(:last-child) .av-dots::after{display:none}
  .av-flow{grid-template-columns:120px minmax(0,1fr) minmax(0,230px)}
  .av-oph{grid-template-columns:1fr;row-gap:3vh}
}
@media (max-width:760px){
  .av{--bar:62px}
  .av-fr{min-height:0;display:block;padding:0}
  .av-hero{grid-template-columns:1fr;min-height:calc(100svh - 170px - 7vh);padding-bottom:5vh}
  .av-k{font-size:clamp(30px,8.6vw,38px);line-height:1.04;padding:5vh 0}
  .av-sub{grid-column:1;width:auto;font-size:20px}
  .av-sv{padding-top:12vh}
  .av-st{font-size:clamp(27px,7.8vw,34px)}
  .av-cols{grid-template-columns:1fr;grid-template-rows:none;margin-top:6vh;row-gap:0}
  .av-ql{display:none}
  .av-c,.av-c[data-c]{grid-row:auto;grid-column:auto;display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:none;column-gap:18px;padding:3.4vh 0;border-top:1px solid #000}
  .av-c:last-child{border-bottom:1px solid #000}
  .av-dots{grid-row:1/span 4;grid-column:1;grid-template-columns:repeat(4,13px);gap:7px;padding:4px 0 0}
  .av-dots i{width:13px;height:13px}
  .av-c:not(:last-child) .av-dots::after{display:none}
  .av-c h4,.av-c .d,.av-c .x,.av-c .q{grid-column:2;grid-row:auto}
  .av-c h4{padding-top:0;border-top:0;font-size:22px}
  .av-c .d{margin-top:8px;font-size:16.5px}
  .av-c .x{margin-top:10px;font-size:13.5px}
  .av-c .q{margin-top:12px;padding-top:12px;font-size:16px}
  .av-c .q::before{content:"The question I ask";display:block;margin-bottom:5px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:rgba(0,0,0,.6)}
  /* the path reads downwards on a phone: the reason enters at the top, passes the operation, divides at the bottom */
  .av-op{margin-top:14vh;padding:11vh var(--m) 12vh}
  .av-oph{grid-template-columns:1fr;row-gap:3vh}
  .av-opk{font-size:clamp(30px,8.6vw,38px)}
  .av-flow{grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto;row-gap:0;margin-top:7vh}
  .av-flow .cap{grid-column:2;padding:0 0 2.4vh}
  .av-flow .c2{grid-row:2;padding-left:0}
  .av-flow .c3{grid-row:4;padding:3vh 0 2.4vh}
  .av-flow .o1{grid-column:1/-1;grid-row:1;flex-direction:row;align-items:center;gap:14px;padding-bottom:3vh}
  .av-flow .o1 .dot{width:22px;height:22px;margin-left:9px}
  .av-flow .lb{position:static;max-width:none}
  .av-flow .path{grid-column:1;grid-row:1/6;width:1px;height:auto;align-self:stretch;justify-self:center;margin:22px 0 0;transform:scaleY(0);transform-origin:50% 0}
  .av-flow.go .path{transform:scaleY(1)}
  .av-flow .o2{grid-column:2;grid-row:3;display:flex;flex-direction:column;padding:0}
  .av-flow .o2 li{flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;min-height:40px;border-top:1px solid rgba(255,255,255,.25)}
  .av-flow .o2 li:last-child{border-bottom:1px solid rgba(255,255,255,.25)}
  .av-flow .o2 li i{display:none}
  .av-flow .o3{grid-column:1/-1;grid-row:5}
  .av-flow .fork{display:none}
  .av-flow .outs{position:static;display:flex;flex-direction:column;gap:14px;padding-left:0}
  .av-flow .outs li{gap:14px}
  .av-flow .outs .s i{margin-left:9px;width:22px;height:22px}
  .av-flow .outs .d i,.av-flow .outs .t i{margin-left:12px;margin-right:3px}
  .av-ev{margin-top:14vh}
  .av-evk{font-size:clamp(27px,7.8vw,34px)}
  .av-chain{grid-template-columns:1fr;row-gap:5vh;margin-top:6vh;padding-left:34px}
  .av-chain::before{left:8px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .av-chain li{display:block;position:relative}
  .av-chain .nd{position:absolute;left:-34px;top:2px}
  .av-chain .cat{padding-bottom:6px}
  .av-chain .nm{margin-top:0;font-size:22px;max-width:none}
  .av-chain .ds{margin-top:8px}
  .av-f5{margin-top:15vh}
  .av-brk{font-size:clamp(27px,7.8vw,34px)}
  .av-rel{grid-template-columns:1fr;row-gap:0;margin-top:6vh}
  .av-rel .rc{grid-template-columns:auto auto;grid-template-rows:5vh auto 5vh;justify-items:start;justify-content:start;column-gap:14px;padding:0 0 0 12px;transform:none}
  .av-rel .rc .ln{width:1px;height:100%;grid-column:1}
  .av-rel .rc .ln:first-child{grid-row:1}.av-rel .rc .ln:last-child{grid-row:3}
  .av-rel .rc .dot{grid-column:1;grid-row:2;width:20px;height:20px;margin-left:-10px}
  .av-rel .rc .n{grid-column:2;grid-row:2;margin:0}
  .av-rel .rc .ln{margin-left:0}
  .av-rel .rn .n{font-size:24px}
  .av-cta{margin-top:12vh}
}

/* ---------- Deep Dive 03 Positioning: the same business in different company, the comparison a guest makes, the position decisions produce, where intent meets trade, the change of context ----------
   one visual rule: the black square is the business, grey squares are the company it is seen in, an outline is where it was meant to be */
.ps{--rule:rgba(0,0,0,.14);--bar:74px;--grey:#c9c9c9}
.ps .xh{display:block}
.ps .xh span{margin-left:10px;font-weight:400;opacity:.6}
.ps .hd{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ps-fr{min-height:calc(100vh - var(--bar));display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4.5vh,72px) 0}
@media (min-width:761px) and (min-height:560px) and (prefers-reduced-motion:no-preference){#deep:has(.ps:not([hidden])){scroll-snap-type:y proximity;scroll-padding-top:74px}.ps-fr{scroll-snap-align:start}}

/* 1 entry, on the same two columns as the market frame below. One reading line: the name, the thesis, the proof beside it, and under the proof what follows from it.
   The thesis and the proof share one horizontal axis; the conclusion closes the frame at the bottom right */
.ps-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr auto;column-gap:6vw;min-height:calc(100svh - 190px);padding-bottom:7vh}
.ps-hero .dkick{grid-column:1/-1}
.ps-k{grid-column:1;grid-row:2;align-self:center;padding-top:clamp(36px,6vh,72px);font-size:clamp(36px,4vw,66px);line-height:1.02;letter-spacing:-.034em;max-width:13ch;text-wrap:balance}
.ps-eb{grid-column:2;grid-row:2;align-self:center;justify-self:end;margin:0;padding-top:clamp(36px,6vh,72px)}
.egs{display:grid;grid-template-columns:1fr 1fr;column-gap:3.6vw;width:min(500px,64vh)}
.ps-sub{grid-column:2;grid-row:3;justify-self:end;text-align:right;padding-top:6vh;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.3vw,38px);line-height:1.1;letter-spacing:-.01em;max-width:30ch;text-wrap:balance}
.eg{position:relative;aspect-ratio:1;display:block}
.eg i{position:absolute;display:block;transform:translate(-50%,-50%)}
.eg .c{left:50%;top:50%;width:13%;height:13%;background:#000}
.eg .o{background:#fff;box-shadow:inset 0 0 0 1px #000}
.ps-eb figcaption{margin-top:2.4vh;text-align:right;font-size:14px;line-height:1.4;letter-spacing:.005em;font-weight:600}
.ps-hero .eg .o{transform:translate(-50%,-50%) scale(0);transition:transform .7s var(--ease) calc(.5s + var(--d))}
.ps-hero figcaption{opacity:0;transition:opacity .8s var(--ease) 1.4s}
.ps-hero.go .eg .o{transform:translate(-50%,-50%) scale(1)}
.ps-hero.go figcaption{opacity:1}

/* 2 the market frame: one hotel, the guest chooses the field; the reading on the right is the consequence, in the voice of observation */
/* one grid for the whole frame: the claim and its correction side by side, the choice under the claim, the reading under the correction, the two consequences under both */
.ps-st,.ps-inst,.ps-ft{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:6vw}
.ps-st{font-size:clamp(26px,2.5vw,42px);line-height:1.1;letter-spacing:-.026em;font-weight:400}
.ps-st span{max-width:19ch;text-wrap:balance}
/* the claim in the plain voice, the correction in the voice of observation: one sentence answering the other */
.ps-st span + span{font-family:var(--serif);font-style:italic;font-size:1.14em;line-height:1.02;letter-spacing:-.01em;max-width:18ch}
.ps-inst{margin-top:7vh;align-items:start}
.ps-same{display:flex;align-items:center;gap:12px;font-size:clamp(16px,1.2vw,19px);letter-spacing:-.01em}
.ps-same b{flex:none;width:18px;height:18px;background:#000}
.ps-tg{display:grid;row-gap:10px;margin-top:2.6vh}
.ps-t{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:baseline;padding:16px 18px;border:1px solid #000;text-align:left;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease)}
.ps-t .w{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(17px,1.4vw,22px);letter-spacing:-.02em}
.ps-t .o{grid-column:1;margin-top:4px;font-size:14.5px;line-height:1.35;opacity:.7}
.ps-t[aria-pressed="true"]{background:#000;color:#fff;cursor:default}
.ps-t[aria-pressed="false"]:hover{background:rgba(0,0,0,.05)}
.ps-t:focus-visible{outline:1px solid #000;outline-offset:3px}
.ps-ft{margin-top:6vh;align-items:start}
.ps-note,.ps-next{font-size:clamp(17px,1.35vw,21px);line-height:1.32;letter-spacing:-.01em;max-width:28ch}
.ps-read{display:grid;row-gap:3.6vh;padding-top:calc(1.6em + 2.6vh)}
.ps-read > div{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:24px;align-items:baseline}
.ps-read dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(0,0,0,.6);white-space:nowrap}
.ps-read dd{display:grid;font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.95vw,32px);line-height:1.12;letter-spacing:-.01em}
.ps-read dd span{grid-area:1/1;transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s}
.ps-inst[data-f="a"] .ps-read [data-f="b"],.ps-inst[data-f="b"] .ps-read [data-f="a"]{opacity:0;visibility:hidden;transform:translateY(8px);transition-delay:0s,0s,.45s}
.ps-ft .ps-next{grid-column:2;margin-left:224px;max-width:34ch;text-wrap:balance}

/* 3 intended and produced: one dark field, one line. The outline is where the business meant to be, the black square where its decisions put it.
   Under each place, the decisions that put it there: two stay with the intention, four move over to the produced position */
.ps-dr{margin:0 calc(var(--m) * -1);padding-left:var(--m);padding-right:var(--m);background:#000;color:#fff}
.ps-drh{display:flex;justify-content:space-between;align-items:flex-end;gap:5vw}
.ps-drk{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(32px,3.4vw,58px);line-height:1.05;letter-spacing:-.015em;max-width:21ch}
.ps-scn{position:absolute;right:0;top:-2.6em;color:rgba(255,255,255,.72)}
.ps-sc{--avg:92;--fin:55;position:relative;margin-top:7vh}
.ps-ln{position:relative;height:44px}
.ps-ln::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.35)}
.ps-ln .e0,.ps-ln .e1{position:absolute;top:calc(50% + 30px);font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.5)}
.ps-ln .e0{left:0}.ps-ln .e1{right:0}
.ps-ln .in,.ps-ln .pd{position:absolute;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px}
.ps-ln .in{left:92%;box-shadow:inset 0 0 0 1.5px #fff}
.ps-ln .pd{left:calc(var(--avg) * 1%);background:#fff;transition:left 1s var(--ease)}
.ps-ln .gp{position:absolute;top:50%;height:2px;margin-top:-1px;left:calc(var(--avg) * 1%);right:calc(8% + 20px);background:#fff;transition:left 1s var(--ease)}
.ps-cl .hd{margin-bottom:2.2vh;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.35);font-size:11px}
.ps-cl ul{display:grid;row-gap:2vh}
.ps-cl li span{text-wrap:balance}
.ps-cl li{display:grid;grid-template-columns:1fr;row-gap:5px;font-size:clamp(15px,1.15vw,18px);line-height:1.3;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.ps-cl li b{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.ps-cl{position:absolute;top:calc(44px + 6.4vh);width:min(20%,280px)}
.ps-cl.inc{right:0}
.ps-cl.pdc{left:calc(var(--fin) * 1% - 20px)}
/* a decision that moved leaves the intention: it goes, towards the produced side */
.ps-cl.inc li.left{opacity:0;transform:translateX(-28px)}
.ps-cl.pdc li{opacity:0;transform:translateX(24px)}
.ps-cl.pdc li.on{opacity:1;transform:none}
.ps-cl.pdc .hd{opacity:.35;transition:opacity .6s var(--ease)}
.ps-sc.done .pdc .hd{opacity:1}
.ps-sc{min-height:calc(44px + 6.4vh + 2.2vh + 30px + 4 * (2.8em + 2vh) + 2vh)}
.ps-sc .ps-sum{position:absolute;left:0;top:calc(44px + 6.4vh);width:calc(var(--fin) * 1% - 20px - 5vw)}
.ps-sum{margin:0;font-size:clamp(20px,1.8vw,30px);line-height:1.2;letter-spacing:-.015em;max-width:40ch}
.ps-sum span{display:block;text-wrap:balance}
.ps-sum .it{margin-top:.2em;font-size:1.08em;letter-spacing:-.005em}

/* 4 in the market: the brand's side in white, commercial reality in black; the evidence sits where the two meet */
/* the black field is exactly as tall as the white side: from the label to the last line */
.ps-lx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:5vw;align-content:center;align-items:stretch}
.ps-lxw{display:flex;flex-direction:column}
.ps-lxk{margin-top:3vh;font-family:var(--serif);font-style:italic;font-size:clamp(30px,2.9vw,48px);line-height:1.08;letter-spacing:-.012em;max-width:17ch}
.ps-ctx{margin-top:auto;padding-top:6vh}
.ps-ctx .hd{color:rgba(0,0,0,.6);margin-bottom:10px}
.ps-names{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(19px,1.6vw,26px);letter-spacing:-.03em;line-height:1.2;margin-bottom:3.6vh}
.ps-names i{font-style:normal;font-weight:400;opacity:.35}
.ps-names span{font-weight:400;opacity:.55;white-space:nowrap}
.ps-mh{display:grid;row-gap:4px;font-size:clamp(15px,1.15vw,18px);line-height:1.35}
.ps-mh b{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(19px,1.6vw,26px);letter-spacing:-.03em;line-height:1.2;margin-bottom:4px}
.ps-mh span{color:rgba(0,0,0,.62);max-width:34ch;text-wrap:balance}
.ps-lxb{background:#000;color:#fff;padding:5vh 4vw;display:flex;flex-direction:column;justify-content:space-between}
.ps-lxb .hd{color:#fff;margin-bottom:4vh}
/* three kinds of commercial work, each with its strongest line first and the rest quieter; spacing, not rules, separates them */
.ps-work{display:grid;row-gap:4.4vh}
.ps-work > div{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:20px;align-items:baseline}
.ps-work dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff}
.ps-work dd b,.ps-work dd span{text-wrap:balance}
.ps-work dd b{display:block;font-weight:400;font-size:clamp(19px,1.65vw,26px);line-height:1.2;letter-spacing:-.018em;max-width:30ch}
.ps-work dd span{display:block;margin-top:1.2vh;font-size:clamp(14.5px,1.1vw,17px);line-height:1.4;color:rgba(255,255,255,.62);max-width:40ch}

/* 5 the bridge: the change of context. The same square in a new company: what holds, what needs to shift. The whole field opens Expansion */
.ps-f5{gap:7vh}
.ps-brk{margin-top:3vh;font-family:var(--serif);font-style:italic;font-size:clamp(34px,3.5vw,58px);line-height:1.08;letter-spacing:-.012em;max-width:26ch}
.ps-nx{display:block;width:100%;margin-top:9vh;padding-top:18px;border-top:1px solid #000;text-align:left;cursor:pointer}
.ps-nx .top{display:flex;justify-content:space-between;align-items:baseline}
.ps-nx .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(17px,1.4vw,22px);letter-spacing:-.02em;line-height:1;padding-bottom:5px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.ps-nx .plus{font-size:24px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
/* the change of context, made visible: the same square in its company today, and the same square where even the ground has turned */
.ps-nx .hs{display:grid;grid-template-columns:1fr 1fr;margin-top:3vh}
.ps-nx .ha,.ps-nx .hb{display:grid;grid-template-columns:clamp(80px,7vw,112px) minmax(0,1fr);column-gap:3vw;align-items:center;padding:3.4vh 3vw;min-height:20vh}
.ps-nx .ha{box-shadow:inset 0 0 0 1px #000}
.ps-nx .hb{background:#000;color:#fff}
.ps-nx .hb .eg .c{background:#fff}
.ps-nx .hb .eg .o{background:transparent;box-shadow:inset 0 0 0 1px #fff}
.ps-nx .tx{display:grid;row-gap:10px}
.ps-nx em{font-style:normal;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.65}
.ps-nx .t{font-size:clamp(19px,1.65vw,26px);line-height:1.22;letter-spacing:-.015em;max-width:20ch}
.ps-nx .eg{transition:transform .6s var(--ease)}
.ps-nx:hover .eg,.ps-nx:focus-visible .eg{transform:scale(1.06)}
.ps-nx:hover .n,.ps-nx:focus-visible .n{background-size:100% 1px}
.ps-nx:hover .plus,.ps-nx:focus-visible .plus{transform:rotate(90deg)}
.ps-nx:focus-visible{outline:1px solid #000;outline-offset:6px}

.rm .ps *{transition:none!important}
@media (prefers-reduced-motion:reduce){.ps *{transition:none!important}}

@media (max-width:1100px) and (min-width:761px){
  /* the frame keeps its two sides; each reading puts its label above it */
  .ps-read > div{grid-template-columns:1fr;row-gap:6px}
  .ps-ft .ps-next{margin-left:0}
  .ps-cl{width:22%}
  .ps-cl li{grid-template-columns:1fr;row-gap:2px}
  .ps-lx{column-gap:4vw}
}
@media (max-width:900px) and (min-width:761px){
  .ps-inst{grid-template-columns:1fr;row-gap:5vh}
  .ps-tg{grid-template-columns:1fr 1fr;column-gap:12px}
  .ps-ft{display:block}
  .ps-lx{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ps{--bar:62px}
  .ps-fr{min-height:0;display:block;padding:0}
  .ps-hero{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;min-height:calc(100svh - 170px - 7vh);padding-bottom:4vh}
  .ps-k{grid-row:2;padding-top:5vh;align-self:start;font-size:clamp(31px,8.8vw,40px);line-height:1.03;max-width:none}
  .ps-sub{grid-column:1;grid-row:4;padding-top:4vh;font-size:25px}
  .ps-eb{grid-column:1;grid-row:3;margin:0;padding-top:6vh}
  .egs{width:auto}
  .ps-eb{justify-self:stretch}
  .egs{column-gap:7vw}
  .ps-fm{padding-top:12vh}
  .ps-st,.ps-ft{display:block}
  .ps-st{font-size:clamp(26px,7.6vw,33px)}
  .ps-st span{display:block;max-width:none}
  .ps-st span + span{max-width:none}
  .ps-st span + span{margin-top:.5em}
  .ps-ft{margin-top:5vh}
  .ps-inst{display:block;margin-top:5vh}
  .ps-tg{grid-template-columns:1fr 1fr;column-gap:10px;margin-top:2vh}
  .ps-t{padding:12px 12px 14px;grid-template-columns:1fr auto}
  .ps-t .w{font-size:17px}
  .ps-t .o{font-size:13.5px}
  .ps-rd{margin-top:5vh}
  .ps-read{padding-top:0;row-gap:3vh}
  .ps-read > div{grid-template-columns:1fr;row-gap:6px}
  .ps-read dt{white-space:normal}
  .ps-read dd{font-size:24px}
  .ps-ft .ps-next{margin:0;font-size:18px}
  .ps-dr{margin-top:14vh;padding:11vh var(--m) 12vh}
  .ps-drh{display:block}
  .ps-drk{font-size:clamp(29px,8.4vw,37px)}
  .ps-scn{position:static;margin-bottom:2.4vh}
  .ps-sc{margin-top:6vh;padding-bottom:0}
  .ps-ln{height:34px}
  .ps-ln .in,.ps-ln .pd{width:30px;height:30px;margin:-15px 0 0 -15px}
  /* the line stays in view while the decisions scroll past it, so the produced square is seen moving */
  .ps-ln{position:sticky;top:var(--bar);z-index:2;height:74px;background:#000}
  .ps-ln::before,.ps-ln .in,.ps-ln .pd,.ps-ln .gp{top:30px}
  .ps-ln .e0,.ps-ln .e1{top:54px}
  .ps-cl{position:static;width:auto;margin-top:4vh}
  .ps-cl.pdc{margin-top:5vh}
  .ps-cl.inc{margin-top:4vh}
  .ps-sc{display:flex;flex-direction:column}
  .ps-cl.inc{order:2}.ps-cl.pdc{order:3}
  .ps-cl li{grid-template-columns:1fr;row-gap:2px;font-size:15.5px}
  .ps-cl.pdc li{transform:translateY(10px)}
  .ps-cl.inc li.left{display:none}
  .ps-sc .ps-sum{position:static;width:auto;order:4;margin-top:6vh;font-size:22px}
  .ps-sc{min-height:0}
  .ps-lx{display:block;margin-top:14vh}
  .ps-lxk{font-size:clamp(27px,7.8vw,34px)}
  .ps-ctx{padding-top:5vh}
  .ps-lxb{margin:5vh calc(var(--m) * -1) 0;padding:6vh var(--m)}
  .ps-work > div{grid-template-columns:1fr;row-gap:8px}
  .ps-work dd b{font-size:20px}
  .ps-f5{margin-top:15vh}
  .ps-brk{font-size:clamp(27px,7.8vw,34px)}
  .ps-nx .hs{grid-template-columns:1fr}
  .ps-nx .ha,.ps-nx .hb{grid-template-columns:84px minmax(0,1fr);column-gap:18px;padding:4vh 18px;min-height:0}
  .ps-nx .n{font-size:24px}
}

/* ---------- Deep Dive 04 Expansion: one business system under distance, volume and complexity; the chain it runs on; the step to Markets ----------
   one physical logic: a figure of points and fine lines. Points are parts of the business, lines are what they depend on. Strain shows as a line thinning into dashes */
.ex{--bar:74px;--rule:rgba(0,0,0,.14)}
.ex .xh{display:block}
.ex-seq{position:relative;height:calc(4.2 * (100vh - var(--bar)));margin-top:-2vh}
.ex-stage{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto;column-gap:6vw;padding:3vh 0 4.4vh}
/* the words: one statement at a time, all in the same place */
.ex-copy{grid-column:1;grid-row:1;display:grid;align-items:center}
.ex-st{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s var(--ease),transform .7s var(--ease),visibility 0s .6s}
.ex-st.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .1s,transform .8s var(--ease) .1s,visibility 0s}
.ex-s0{display:flex;flex-direction:column;gap:clamp(28px,6vh,64px)}
.ex-k{font-size:clamp(36px,4vw,66px);line-height:1.02;letter-spacing:-.034em;max-width:13ch;text-wrap:balance}
/* the state numbers in Boska italic, no bubble (Lena, 28.09.2026) */
.ex-n{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,2.2vw,38px);line-height:1;letter-spacing:.01em;font-variant-numeric:lining-nums;-webkit-text-stroke:.045em currentColor;justify-self:start;display:inline-block}
.ex-h{margin-top:3vh;font-size:clamp(32px,3.3vw,54px);line-height:1.04;letter-spacing:-.03em;font-weight:400;max-width:13ch;text-wrap:balance}
.ex-p{margin-top:3vh;font-size:clamp(18px,1.45vw,23px);line-height:1.3;letter-spacing:-.012em;max-width:24ch;text-wrap:balance;color:rgba(0,0,0,.72)}
.ex-key{margin-top:4vh;display:grid;row-gap:2.2vh;max-width:30em}
.ex-key > div{display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:18px;align-items:baseline}
.ex-key dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ex-key dd{font-size:clamp(17px,1.35vw,21px);line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
/* the figure */
.ex-fig{grid-column:2;grid-row:1/3;display:flex;align-items:center;justify-content:center;min-height:0}
.ex-plane{position:relative;width:min(100%,calc(100vh - var(--bar) - 9vh));aspect-ratio:1}
.ex-plane svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ex-plane line{stroke:#000;stroke-width:1;vector-effect:non-scaling-stroke}
.ex-plane .sp{stroke-width:.75}
.ex-plane .rg{fill:none;stroke:#000;stroke-width:1.1}
.ex-plane .nd,.ex-plane .co{fill:#000}
.ex-plane .cs{stroke-dasharray:3 5}
.ex-plane .cn{fill:#fff;stroke:#000;stroke-width:1.5;vector-effect:non-scaling-stroke}
.ex-plane .on{fill:#fff;stroke:#000;stroke-width:1.5;vector-effect:non-scaling-stroke}
.ex-plane .lb{position:absolute;white-space:nowrap;pointer-events:none;background:#fff;padding:3px 6px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:0}
.lb-one{transform:translate(16px,-50%)}
.lb-orig,.lb-copy{transform:translate(-50%,-50%)}
.lb-core{transform:translate(-50%,20px)}
.lb-sys{transform:translate(-100%,-150%)}
.lb-ctx{transform:translate(-50%,16px)}
/* the three states, always reachable */
.ex-steps{grid-column:1;grid-row:2;display:flex;gap:26px;align-items:center}
.ex-steps button{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:rgba(0,0,0,.4);transition:color .35s var(--ease)}
.ex-steps .n{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;line-height:1;letter-spacing:.01em;font-variant-numeric:lining-nums;-webkit-text-stroke:.045em currentColor}
.ex-steps .t{white-space:nowrap;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ex-steps button.on,.ex-steps button:hover{color:#000}
.ex-steps button:focus-visible{outline:1px solid #000;outline-offset:4px}
.ex-stage[data-s="0"] .ex-steps{opacity:.8}

/* 2 worked on directly: the chain growth has to run through, drawn as one wide loop across the field of operating reality.
   Stations sit on the upper run in order; the lower run brings the range decisions back to the next orders */
.ex-ev{margin:0 calc(var(--m) * -1);padding:13vh var(--m) 12vh;background:#000;color:#fff;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:6vw;align-items:end}
.ex-ev .xh{color:#fff}
.ex-evk{margin-top:3vh;font-family:var(--serif);font-style:italic;font-size:clamp(32px,3.3vw,56px);line-height:1.06;letter-spacing:-.012em;max-width:17ch;text-wrap:balance}
.ex-more{display:grid;row-gap:1.6vh;max-width:34ch;padding-bottom:.5em}
.ex-more li{font-size:clamp(15px,1.15vw,18px);line-height:1.4;color:rgba(255,255,255,.66);text-wrap:balance}
.ex-loop{grid-column:1/-1;position:relative;height:clamp(150px,24vh,220px);margin-top:calc(12vh + 3.2em)}
.ex-loop::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;border:1px solid rgba(255,255,255,.55);border-radius:clamp(75px,12vh,110px)}
.ex-lc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(60%,30em);text-align:center;font-size:clamp(14px,1.05vw,16px);line-height:1.4;color:rgba(255,255,255,.72);text-wrap:balance}
.ex-ring li{position:absolute;top:0;width:0;height:0;font-size:clamp(14px,1.1vw,17px);line-height:1.25;letter-spacing:-.01em;color:#fff}
.ex-ring li::before{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff}
.ex-ring li:nth-child(1){left:calc(clamp(75px,12vh,110px) + (100% - 2 * clamp(75px,12vh,110px)) * 0)}
.ex-ring li:nth-child(2){left:calc(clamp(75px,12vh,110px) + (100% - 2 * clamp(75px,12vh,110px)) * .2)}
.ex-ring li:nth-child(3){left:calc(clamp(75px,12vh,110px) + (100% - 2 * clamp(75px,12vh,110px)) * .4)}
.ex-ring li:nth-child(4){left:calc(clamp(75px,12vh,110px) + (100% - 2 * clamp(75px,12vh,110px)) * .6)}
.ex-ring li:nth-child(5){left:calc(clamp(75px,12vh,110px) + (100% - 2 * clamp(75px,12vh,110px)) * .8)}
.ex-ring li:nth-child(6){left:calc(clamp(75px,12vh,110px) + (100% - 2 * clamp(75px,12vh,110px)) * 1)}
.ex-ring span{position:absolute;left:0;bottom:16px;transform:translateX(-50%);width:max-content;max-width:9em;text-align:center;text-wrap:balance}

/* 3 the step to Markets */
.ex-br{min-height:calc(100vh - var(--bar));display:flex;flex-direction:column;justify-content:center;padding:10vh 0 6vh}
.ex-brk{margin-top:3vh;font-family:var(--serif);font-style:italic;font-size:clamp(34px,3.6vw,60px);line-height:1.06;letter-spacing:-.012em;max-width:18ch;text-wrap:balance}
.ex-nx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr) 32px;column-gap:6vw;align-items:baseline;width:100%;margin-top:12vh;padding-top:22px;border-top:1px solid #000;text-align:left;cursor:pointer}
.ex-nx .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(22px,2.1vw,34px);letter-spacing:-.02em;line-height:1;justify-self:start;padding-bottom:5px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.ex-nx .q{font-size:clamp(18px,1.45vw,23px);line-height:1.3;letter-spacing:-.012em;max-width:30ch;text-wrap:balance}
.ex-nx .plus{justify-self:end;font-size:30px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.ex-nx:hover .n,.ex-nx:focus-visible .n{background-size:100% 1px}
.ex-nx:hover .plus,.ex-nx:focus-visible .plus{transform:rotate(90deg)}
.ex-nx:focus-visible{outline:1px solid #000;outline-offset:6px}

@media (max-width:1100px) and (min-width:761px){
  .ex-ev{grid-template-columns:1fr;row-gap:5vh}
  .ex-more{max-width:44ch}
}
.rm .ex *{transition:none!important}
@media (prefers-reduced-motion:reduce){.ex *{transition:none!important}}

@media (max-width:760px){
  .ex{--bar:62px}
  .ex-stage{height:calc(100svh - var(--bar));grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:2vh 0 3vh}
  .ex-seq{height:calc(4.2 * (100svh - var(--bar)))}
  .ex-copy{grid-row:1;align-items:start;padding-top:2vh}
  .ex-fig{grid-column:1;grid-row:2}
  .ex-plane{width:min(100%,36svh)}
  .ex-s0{justify-content:flex-start;gap:3vh}
  .ex-s0 .dkick .t{font-size:clamp(44px,13vw,60px)}
  .ex-k{font-size:clamp(28px,8vw,36px);max-width:none;padding:0}
  .ex-h{margin-top:2vh;font-size:clamp(27px,7.6vw,34px);max-width:none}
  .ex-p{margin-top:2vh;font-size:17px;max-width:none}
  .ex-key{margin-top:2.4vh;row-gap:1.4vh}
  .ex-key > div{grid-template-columns:76px minmax(0,1fr)}
  .ex-key dd{font-size:16px}
  .ex-steps{grid-row:3;gap:18px}
  .ex-steps .t{display:none}
  .ex-ev{grid-template-columns:1fr;padding:11vh var(--m)}
  .ex-evk{font-size:clamp(28px,8vw,36px)}
  .ex-more{margin-top:5vh}
  /* on a phone the chain reads downwards and returns to its start */
  .ex-loop{width:auto;height:auto;justify-self:stretch;margin:8vh 0 0 30px}
  .ex-loop::before{inset:auto;left:0;top:calc(2.2em + 12px);bottom:10px;width:0;border:0;border-left:1px solid rgba(255,255,255,.55);border-radius:0}
  .ex-loop::after{content:"";position:absolute;left:-22px;top:calc(2.2em + 12px);bottom:10px;width:22px;border:1px solid rgba(255,255,255,.35);border-right:0;border-radius:14px 0 0 14px}
  .ex-lc{position:static;transform:none;width:auto;text-align:left;margin-bottom:12px}
  .ex-ring{display:grid;row-gap:22px}
  .ex-ring li,.ex-ring li:nth-child(n){position:relative;left:auto;top:auto;width:auto;height:auto;padding-left:22px}
  .ex-ring li::before{left:-5px;top:.45em}
  .ex-ring li span,.ex-ring li:nth-child(n) span{position:static;transform:none;max-width:none;text-align:left}
  .ex-br{min-height:0;padding:15vh 0 6vh}
  .ex-brk{font-size:clamp(28px,8vw,36px)}
  .ex-nx{grid-template-columns:minmax(0,1fr) 28px;row-gap:14px;margin-top:7vh}
  .ex-nx .q{grid-column:1;grid-row:2}
  .ex-nx .plus{grid-column:2;grid-row:1}
}

/* ---------- Deep Dive 05 Markets: distance is made of conditions. Panes between business and customer; a context that re-weights them; the route that decides whose panes the business looks through; proof placed apart; promises carried into Operations ----------
   one material for the page: a pane. Frosted panes belong to others and take clarity away; a black frame belongs to the business. The customer is only as sharp as the panes in between allow */
.mk{--bar:74px;--bg:#fff}
.mk .xh{display:block}
.mk-h{font-size:clamp(28px,2.8vw,48px);line-height:1.06;letter-spacing:-.028em;font-weight:400;text-wrap:balance}

/* 1 entry: the statement on the left, the view on the right. Seven panes recede from the business towards its customer */
.mk-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:3.5vw;min-height:calc(100svh - 170px);padding-bottom:5vh}
.mk-hl{display:flex;flex-direction:column}
.mk-k{margin-top:clamp(26px,5.5vh,70px);font-size:clamp(28px,2.9vw,50px);line-height:1.05;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.mk-sub{margin-top:auto;padding-top:5vh;font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.9vw,32px);line-height:1.1;letter-spacing:-.01em;max-width:19ch;text-wrap:balance}
.mk-tun{position:relative;margin:0;min-height:300px;background:#efefef;overflow:hidden}
.mk-pns{position:absolute;inset:0}
.mk-pn{position:absolute;background:rgba(255,255,255,.17);-webkit-backdrop-filter:blur(1.1px);backdrop-filter:blur(1.1px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.34)}
.mk-pn:first-child{box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.mk-cu{position:absolute;left:76%;top:33%;width:clamp(16px,2.2vw,30px);aspect-ratio:1;border-radius:50%;background:#000;transform:translate(-50%,-50%)}
.mk-pl{position:absolute;z-index:20;transform:translate(10px,6px);white-space:nowrap;font-size:clamp(12px,.95vw,14px);letter-spacing:-.005em;line-height:1}
.mk-pl i{font-style:normal;font-size:9.5px;letter-spacing:.06em;margin-right:6px;color:rgba(0,0,0,.45)}
.mk-tl{position:absolute;z-index:20;white-space:nowrap;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;line-height:1}
.mk-tb{left:14px;bottom:14px;display:flex;align-items:center;gap:9px}
.mk-tb i{width:9px;height:9px;background:#000}
.mk-tc{left:76%;top:33%;transform:translate(-50%,calc(clamp(16px,2.2vw,30px) / 2 + 10px))}
/* arrival: the panes set themselves one behind the other, then the names appear */
.mk-hero .mk-pn{opacity:0;transform:scale(.96);transition:opacity .7s var(--ease) calc(.15s + var(--i) * 90ms),transform .9s var(--ease) calc(.15s + var(--i) * 90ms)}
.mk-hero .mk-pl,.mk-hero .mk-tl,.mk-hero .mk-cu{opacity:0;transition:opacity .6s var(--ease) calc(.6s + var(--i,7) * 70ms)}
.mk-hero.go .mk-pn{opacity:1;transform:none}
.mk-hero.go .mk-pl,.mk-hero.go .mk-tl,.mk-hero.go .mk-cu{opacity:1}

/* 2 a different reality: the seven conditions set as type. Weight is size; a context changes which words carry it */
.mk-cx{--bg:#000;margin:0 calc(var(--m) * -1);padding:12vh var(--m) 13vh;background:#000;color:#fff;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw}
.mk-cxh{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.mk-cxh .mk-h{max-width:18ch}
.mk-geo{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.75vw,29px);line-height:1.14;letter-spacing:-.008em;color:rgba(255,255,255,.86);max-width:22ch;text-wrap:balance}
.mk-tg{grid-column:1/-1;display:flex;flex-wrap:wrap;column-gap:clamp(18px,2.4vw,40px);row-gap:4px;margin-top:9vh}
.mk-t{display:inline-flex;align-items:baseline;gap:10px;padding:7px 0 6px;font-size:clamp(15px,1.15vw,18px);letter-spacing:-.01em;color:rgba(255,255,255,.5);cursor:pointer;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .35s var(--ease),background-size .45s var(--ease)}
.mk-t b{font-weight:500;font-size:10.5px;letter-spacing:.06em;border:1px solid currentColor;border-radius:20px;padding:2px 8px 1px}
.mk-t:hover{color:rgba(255,255,255,.9);background-size:100% 1px}
.mk-t[aria-pressed="true"]{color:#fff;background-size:100% 1px;cursor:default}
.mk-t[aria-pressed="true"] b{background:#fff;color:#000;border-color:#fff}
.mk-t:focus-visible{outline:1px solid #fff;outline-offset:4px}
.mk-wf{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:clamp(16px,2vw,36px);row-gap:.12em;margin-top:5vh;line-height:1.02}
.mk-wf span{--fs:clamp(19px,1.6vw,27px);font-size:var(--fs);font-weight:300;letter-spacing:-.02em;color:rgba(255,255,255,.34);transition:font-size .8s var(--ease),font-weight .7s var(--ease),color .6s var(--ease),letter-spacing .8s var(--ease)}
.mk-wf span.hv{--fs:clamp(44px,6.2vw,108px);font-weight:600;letter-spacing:-.045em;color:#fff}
.mk-wf i{font-style:normal;font-weight:500;font-size:10px;letter-spacing:.06em;vertical-align:top;margin-right:7px;color:rgba(255,255,255,.45)}
.mk-rd{grid-column:2;display:grid;margin-top:6vh}
.mk-rd p{grid-area:1/1;font-size:clamp(17px,1.35vw,21px);line-height:1.34;letter-spacing:-.01em;color:rgba(255,255,255,.84);max-width:30ch;text-wrap:balance;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
.mk-rd p.off,.mk-rc p.off{opacity:0;visibility:hidden;transform:translateY(8px);transition-delay:0s,0s,.5s}

/* 3 the route in: a view of the customer through the panes the route puts in between. The view stays while the choices are read */
.mk-rt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4.5vw;align-items:start;padding:12vh 0}
.mk-vw{position:sticky;top:calc(var(--bar) + 4vh)}
.mk-view{position:relative;width:min(100%,calc((100vh - var(--bar) - 9vh) * 4 / 3));aspect-ratio:4/3;background:#efefef;overflow:hidden}
.mk-vc{margin-top:14px;text-wrap:balance;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(0,0,0,.55)}
.mk-crowd{position:absolute;left:20%;top:22%;width:60%;height:58%;overflow:visible}
.mk-crowd circle{fill:#000}
.mk-view .ly{position:absolute;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.mk-view .ly.g{background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.mk-view .ly span{position:absolute;left:0;top:0;white-space:nowrap;padding:8px 11px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(0,0,0,.6)}
.mk-view .ly.o{box-shadow:inset 0 0 0 2px #000}
.mk-view .ly.o span{background:#000;color:#fff}
.mk-view .l-di{inset:7%}
.mk-view .l-re{inset:19% 16%}
.mk-view .l-ds{inset:11%}
.mk-view .l-hs{inset:7%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.mk-view .l-hs i{position:absolute;background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.mk-view .l-hs i:nth-child(1){left:0;right:0;top:0;height:15.1%}
.mk-view .l-hs i:nth-child(2){left:0;right:0;bottom:0;height:15.1%}
.mk-view .l-hs i:nth-child(3){left:0;top:15.1%;bottom:15.1%;width:15.1%}
.mk-view .l-hs i:nth-child(4){right:0;top:15.1%;bottom:15.1%;width:15.1%}
.mk-view .l-cn{inset:20%}
.mk-view .l-ow{inset:7%}
.mk-view[data-r="0"] :is(.l-di,.l-re),.mk-view[data-r="1"] .l-ds,.mk-view[data-r="2"] :is(.l-hs,.l-cn),.mk-view[data-r="3"] .l-ow{opacity:1;visibility:visible;transition-delay:0s}
.mk-rtt{padding-top:1vh}
.mk-rtt .mk-h{max-width:19ch}
.mk-rs{display:grid;margin-top:6vh}
.mk-s{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center;padding:11px 0;text-align:left;font-size:clamp(16px,1.3vw,20px);letter-spacing:-.012em;color:rgba(0,0,0,.42);cursor:pointer;transition:color .35s var(--ease)}
.mk-s .c{display:flex;gap:3px}
.mk-s .c i{width:9px;height:9px;box-shadow:inset 0 0 0 1px currentColor}
.mk-s .c i.f{background:currentColor}
.mk-s:hover{color:#000}
.mk-s[aria-pressed="true"]{color:#000;cursor:default}
.mk-s:focus-visible{outline:1px solid #000;outline-offset:4px}
.mk-cm{margin-top:1.6vh;text-wrap:balance;font-size:14px;letter-spacing:.005em;color:rgba(0,0,0,.58)}
.mk-rc{display:grid;margin-top:6vh}
.mk-rc p{grid-area:1/1;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.2vw,36px);line-height:1.08;letter-spacing:-.01em;max-width:18ch;text-wrap:balance;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}

/* 4 proof: the observation, then the places, each with the route it was worked through, set apart from each other */
.mk-ev{--bg:#000;margin:0 calc(var(--m) * -1);padding:13vh var(--m) 12vh;background:#000;color:#fff}
.mk-evk{margin-left:auto;font-family:var(--serif);font-style:italic;font-size:clamp(30px,3vw,52px);line-height:1.06;letter-spacing:-.012em;max-width:20ch;text-align:right;text-wrap:balance}
.mk-fld{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:4vw;margin-top:11vh}
.mk-fld .xh{grid-column:1/-1;margin-bottom:5vh;color:rgba(255,255,255,.62)}
.mk-37{display:flex;flex-direction:column;align-items:flex-start}
.mk-37 b{font-weight:200;font-size:clamp(130px,15vw,250px);line-height:.78;letter-spacing:-.065em;margin-left:-.05em}
.mk-37 span{margin-top:2vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.mk-37 em{margin-top:1.4vh;font-style:normal;font-size:clamp(15px,1.1vw,17px);line-height:1.4;color:rgba(255,255,255,.66);max-width:22ch}
.mk-pf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3.5vw;row-gap:7vh;align-content:start}
.mk-pf li{position:relative;display:flex;flex-direction:column;padding-left:22px}
.mk-pf li::before{content:"";position:absolute;left:0;top:3px;width:8px;height:8px;background:#fff}
.mk-pf .p2,.mk-pf .p4{margin-top:9vh}
.mk-pf small{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.55)}
.mk-pf b{margin-top:1.4vh;font-weight:400;font-size:clamp(22px,1.9vw,32px);line-height:1.06;letter-spacing:-.024em;text-wrap:balance}
.mk-pf span{margin-top:1.2vh;font-size:clamp(15px,1.1vw,17px);line-height:1.4;color:rgba(255,255,255,.72);max-width:26ch;text-wrap:balance}
.mk-pf em{margin-top:1.6vh;font-style:normal;font-size:12.5px;letter-spacing:.01em;color:rgba(255,255,255,.5)}
.mk-evf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:4vw;align-items:end;margin-top:12vh}
.mk-evf p{grid-row:1;grid-column:2;font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:rgba(255,255,255,.6);max-width:54ch;text-wrap:pretty}
.mk-evf .mk-reg{grid-column:1;color:#fff;font-size:clamp(16px,1.2vw,19px);line-height:1.35;max-width:22ch;text-wrap:balance}

/* 5 the step to Operations: the promises a route creates cross into the operating system */
.mk-br{min-height:calc(100vh - var(--bar));display:flex;flex-direction:column;justify-content:center;padding:12vh 0 8vh}
.mk-brk{margin-top:3vh;font-family:var(--serif);font-style:italic;font-size:clamp(34px,3.6vw,62px);line-height:1.06;letter-spacing:-.012em;max-width:17ch;text-wrap:balance}
.mk-op{position:relative;margin-top:14vh}
.mk-pr{position:absolute;z-index:2;left:clamp(20px,2.6vw,44px);right:clamp(20px,2.6vw,44px);top:0;transform:translateY(-50%);display:flex;flex-wrap:wrap;gap:10px;pointer-events:none}
.mk-pr li{display:flex;align-items:baseline;gap:10px;padding:13px 17px 12px;background:#000;color:#fff;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:background-color .45s var(--ease),color .45s var(--ease),transform .6s var(--ease)}
.mk-pr i{font-style:normal;font-weight:500;opacity:.55}
.mk-nx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr) 32px;column-gap:4vw;align-items:end;width:100%;min-height:clamp(190px,32vh,320px);padding:clamp(22px,4vh,44px) clamp(20px,2.6vw,44px);box-shadow:inset 0 0 0 1px #000;text-align:left;cursor:pointer;transition:background-color .45s var(--ease),color .45s var(--ease)}
.mk-nx .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(26px,2.8vw,48px);letter-spacing:-.02em;line-height:1;justify-self:start}
.mk-nx .q{font-size:clamp(18px,1.45vw,23px);line-height:1.3;letter-spacing:-.012em;max-width:30ch;text-wrap:balance}
.mk-nx .plus{justify-self:end;font-size:30px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.mk-op:hover .mk-nx,.mk-nx:focus-visible{background:#000;color:#fff}
.mk-op:hover .mk-pr li,.mk-op:focus-within .mk-pr li{background:#fff;color:#000;box-shadow:inset 0 0 0 1px #000;transform:translateY(12px)}
.mk-op:hover .mk-nx .plus,.mk-nx:focus-visible .plus{transform:rotate(90deg)}
.mk-nx:focus-visible{outline:1px solid #000;outline-offset:6px}

@media (max-width:1100px) and (min-width:761px){
  .mk-pf{grid-template-columns:1fr;row-gap:5vh}
  .mk-pf .p2,.mk-pf .p4{margin-top:0}
  .mk-pf li:nth-child(even){margin-left:14%}
}
.rm .mk *{transition:none!important}
@media (prefers-reduced-motion:reduce){.mk *{transition:none!important}}

/* on a phone: the same objects, one after another. Statement, view, observation; the route view above its choices */
@media (max-width:760px){
  .mk{--bar:62px}
  .mk-hero{grid-template-columns:1fr;min-height:0;padding-bottom:4vh}
  .mk-hl{display:contents}
  .mk-hero .dkick .t{font-size:clamp(44px,13vw,60px)}
  .mk-k{margin-top:4vh;font-size:clamp(28px,8vw,36px);max-width:none}
  .mk-tun{order:3;margin-top:5vh;min-height:0;aspect-ratio:1/1.08}
  .mk-sub{order:4;padding-top:4vh;margin-top:0;font-size:clamp(24px,6.8vw,30px);max-width:15ch;justify-self:end;text-align:right}
  .mk-h{font-size:clamp(27px,7.6vw,34px)}
  .mk-cx{grid-template-columns:1fr;padding:11vh var(--m) 11vh}
  .mk-cxh{grid-template-columns:1fr;row-gap:3vh}
  .mk-tg{display:grid;grid-template-columns:1fr;row-gap:2px;margin-top:6vh}
  .mk-t{justify-self:start}
  .mk-t{font-size:15.5px}
  /* on a phone the conditions stand as one column: the weight still reads as size, the order never moves */
  .mk-wf{display:grid;justify-items:start;row-gap:.08em;margin-top:4.5vh}
  .mk-wf span{--fs:19px;display:flex;align-items:baseline}
  .mk-wf i{flex:none;width:24px;margin-right:8px;vertical-align:baseline}
  .mk-wf span.hv{--fs:clamp(38px,11vw,48px)}
  .mk-rd{grid-column:1;margin-top:4.5vh}
  .mk-rt{grid-template-columns:1fr;padding:11vh 0 9vh}
  .mk-rtt{display:contents}
  /* the choices come first and the view directly under them, so a tap and its consequence are seen together */
  .mk-rtt .mk-h{order:1;max-width:none}
  .mk-vw{order:4;position:static;margin-top:3vh}
  .mk-view{width:100%}
  .mk-view .ly span{padding:6px 9px;font-size:9.5px;letter-spacing:.12em}
  .mk-view .l-cn{inset:22% 20%}
  .mk-rs{order:2;margin-top:4vh}
  .mk-s{padding:10px 0}
  .mk-cm{order:3}
  .mk-rc{order:5;margin-top:4vh}
  .mk-rc p{font-size:clamp(24px,6.8vw,30px)}
  .mk-ev{padding:11vh var(--m)}
  .mk-evk{font-size:clamp(28px,8vw,36px);text-align:left;margin-left:0}
  .mk-fld{grid-template-columns:1fr;margin-top:8vh}
  .mk-fld .xh{margin-bottom:4vh}
  .mk-37 b{font-size:clamp(120px,38vw,170px)}
  .mk-pf{grid-template-columns:1fr;row-gap:5vh;margin-top:7vh}
  .mk-pf .p2,.mk-pf .p4{margin-top:0}
  .mk-evf{grid-template-columns:1fr;row-gap:4vh;margin-top:8vh}
  .mk-evf p,.mk-evf .mk-reg{grid-column:1;grid-row:auto}
  .mk-br{min-height:0;padding:15vh 0 6vh}
  .mk-brk{font-size:clamp(28px,8vw,36px)}
  .mk-op{margin-top:11vh}
  /* the promises stand in two rows; the second row rests on the threshold of the field */
  .mk-pr{position:relative;left:auto;right:auto;transform:none;display:grid;grid-template-columns:repeat(2,max-content);gap:8px;margin:0 18px -19px}
  .mk-pr li{padding:11px 13px 10px;font-size:10px}
  .mk-nx{grid-template-columns:minmax(0,1fr) 28px;row-gap:14px;padding:48px 18px 22px;min-height:0}
  .mk-op:hover .mk-pr li,.mk-op:focus-within .mk-pr li{transform:none}
  .mk-nx .q{grid-column:1;grid-row:2}
  .mk-nx .plus{grid-column:2;grid-row:1}
}

/* ---------- Explore the system (04.1): the map of the operating system, same logic as the diagram ---------- */
/* the whole system in one frame (Lena, 28.09.2026): the bold title stays, everything else is set finer.
   Title and entry line share the first row; the four dimensions sit as a two by two board with the two connecting areas between the pairs */
#approach .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25em);grid-template-areas:"t e" "m m";column-gap:5vw;align-items:end;padding-top:4vh;padding-bottom:6vh}
#approach .dkick{grid-area:t;margin:0}
#approach .dkick .t{font-size:clamp(42px,4.6vw,80px)}
#approach .aentry{grid-area:e;margin:0;padding-bottom:.35em;font-size:clamp(15px,1.15vw,18px);line-height:1.4;letter-spacing:-.008em;max-width:none;color:rgba(0,0,0,.7)}
#approach .aentry em{color:#000}
/* three levels, read at a glance: dimensions (wide capitals, numbered), their areas (one line of links), the connections (black, between the pairs) */
.xmap{grid-area:m;margin-top:5.5vh;display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);grid-template-areas:"d0 l0 d1" "d2 l1 d3";column-gap:2.4vw;row-gap:4.5vh}
.xd{padding-top:1.5vh;border-top:1px solid #000}
.xdn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;width:100%;text-align:left;cursor:pointer}
.xdn .pill{align-self:center}
.xdn .n{justify-self:start;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(16px,1.45vw,25px);letter-spacing:-.015em;line-height:1.05;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:4px;transition:background-size .45s var(--ease)}
.xdn .plus{font-size:22px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.xdn:hover .n,.xdn:focus-visible .n{background-size:100% 1px}
.xdn:hover .plus,.xdn:focus-visible .plus{transform:rotate(90deg)}
.xd p{margin-top:.9vh;font-size:clamp(13px,.95vw,15px);line-height:1.45;max-width:52ch;color:rgba(0,0,0,.56);text-wrap:pretty}
.xd ul{margin-top:1.1vh;display:flex;flex-wrap:wrap;column-gap:clamp(16px,1.8vw,30px)}
.xd li button{display:flex;align-items:center;gap:9px;min-height:34px;cursor:pointer;font-size:clamp(15px,1.1vw,18px);font-weight:500;letter-spacing:-.01em}
.xd li button i{display:block;width:12px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.xd li button span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .45s var(--ease)}
.xd li button:hover i,.xd li button:focus-visible i{width:22px}
.xd li button:hover span,.xd li button:focus-visible span{background-size:100% 1px}
.xl{align-self:stretch;display:flex;align-items:center;justify-content:center;border-radius:23px;background:#000;color:#fff;cursor:pointer}
.xl .n{writing-mode:vertical-rl;transform:rotate(180deg);font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;transition:letter-spacing .45s var(--ease)}
.xl .c{display:none}
.xl:hover .n,.xl:focus-visible .n{letter-spacing:.26em}
.xl:focus-visible{outline:1px solid #000;outline-offset:4px}
@media (max-width:1000px) and (min-width:761px){#approach .inner{grid-template-columns:minmax(0,1fr) minmax(0,19em)}}
@media (max-width:760px){
  #approach .lbl.loc{flex-wrap:nowrap;white-space:nowrap}
  #approach .inner{grid-template-columns:1fr;grid-template-areas:"t" "e" "m";row-gap:3vh;padding-top:3vh}
  #approach .dkick .t{font-size:clamp(40px,11vw,52px)}
  #approach .aentry{padding:0;font-size:16px}
  .xmap{margin-top:3vh;grid-template-columns:minmax(0,1fr);grid-template-areas:"d0" "l0" "d1" "d2" "l1" "d3";row-gap:3.2vh}
  .xdn .n{font-size:clamp(19px,5.6vw,23px)}
  .xd p{font-size:14px}
  .xd li button{font-size:17px;min-height:40px}
  .xl{flex-direction:column;align-items:flex-start;gap:3px;padding:12px 18px;border-radius:30px}
  .xl .n{writing-mode:horizontal-tb;transform:none;font-size:11px}
  .xl .c{display:block;font-size:12.5px;opacity:.72;letter-spacing:0}
}

/* where you are, in one line beneath the top bar of a deep dive: it comes in on scrolling up and leaves on reading on */
.dcr{position:absolute;left:0;right:0;top:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:9px var(--m) 11px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08);font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s .3s}
.dcr.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s}
.dcr button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:rgba(0,0,0,.55);cursor:pointer;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:color .3s var(--ease),background-size .4s var(--ease)}
.dcr button:hover,.dcr button:focus-visible{color:#000;background-size:100% 1px}
.dcr button:focus-visible{outline:1px solid #000;outline-offset:3px}
.dcr .sl,.dcr .pl{color:rgba(0,0,0,.3)}
.dcr b{font-weight:600;color:#000}
.rm .dcr{transition:none}
@media (prefers-reduced-motion:reduce){.dcr,.dcr.on{transition:none}}

/* Explore opened from a deep dive: the visitor's place is marked on the map, in a black bubble that is seen at once (Lena, 28.09.2026) */
#xMap .yh{display:inline-flex;align-items:center;padding:5px 10px 4px;border-radius:20px;background:#000;color:#fff;font-style:normal;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap;line-height:1}
#xMap .xd li button.here{font-weight:650}
#xMap .xd li button.here i{width:22px;height:2px}
#xMap .xd li button.here .yh{margin-left:6px}
#xMap .xdn.here .n{background-size:100% 2px}
#xMap .xdn.here .yh{grid-column:2;justify-self:start;margin-top:8px}
#xMap .xl.here{background:#fff;color:#000;box-shadow:inset 0 0 0 1.5px #000}
#xMap .xl .yh{writing-mode:vertical-rl;transform:rotate(180deg);padding:10px 4px 9px;margin-left:6px}
@media (max-width:760px){#xMap .xl .yh{writing-mode:horizontal-tb;transform:none;padding:5px 10px 4px;margin:4px 0 0}}

/* addresses on the map, quiet: the letter in the dimension bubble, a small address before each area and on each connection */
#xMap .ad{font-weight:500;font-size:10px;letter-spacing:.06em;color:rgba(0,0,0,.45);margin-right:-2px;font-variant-numeric:tabular-nums}
/* on the map the address takes the place of the dash, so a row of three areas stays on one line */
#xMap .xd li button i{display:none}
#xMap .xd li button{gap:7px}
#xMap .xd li button.here .ad{color:#000}
#xMap .xl .ad{writing-mode:vertical-rl;transform:rotate(180deg);color:rgba(255,255,255,.6);font-size:9.5px;margin:0 0 0 2px;white-space:nowrap}
#xMap .xl{gap:4px}
#xMap .xl.here .ad{color:rgba(0,0,0,.5)}
@media (max-width:760px){#xMap .xl{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}#xMap .xl .ad{writing-mode:horizontal-tb;transform:none;margin:0}#xMap .xl .c{flex-basis:100%}}
/* the location line reads the same way: address, then name */
.dcr em{font-style:normal;margin-right:7px;color:rgba(0,0,0,.4)}
.dcr b em{color:rgba(0,0,0,.45)}

/* ---------- numbers inside a page (Lena, 28.09.2026): a count is set in Boska italic, strong, with upright figures and no bubble.
   Bubbles are kept for addresses only (chapters 04 to 08, layers 04.1 to 07.2, A to D and their areas) ---------- */
.pp-o .h .pill,.pp-d .h .pill,.pp-flow h4 .pill,.av-c h4 .n,.mk-t b{border:0;border-radius:0;padding:0;background:none;box-shadow:none;font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;font-variation-settings:normal;text-transform:none;letter-spacing:.01em;font-variant-numeric:lining-nums;-webkit-text-stroke:.045em currentColor;line-height:1}
.pp-o .h .pill,.pp-d .h .pill{font-size:18px}
.pp-flow h4 .pill{font-size:.95em;transform:none}
.av-c h4 .n{font-size:1em;transform:none}
.mk-t b{font-size:1.2em}
.mk-t[aria-pressed="true"] b{background:none;color:inherit}

/* ---------- Deep Dive C Operations: the business in motion. One material for the page, the running week: every part of the business is a lane
   with its own rhythm. The entry shows them all at once; between the parts is where it breaks; a signal is a change in the rhythm;
   intervention is judged once or repeated every week; structure carries the load while the work keeps moving ---------- */
.op{--bar:74px;--bg:#fff}
.op .xh{display:block}
.op-h{font-size:clamp(28px,2.8vw,48px);line-height:1.06;letter-spacing:-.028em;font-weight:400;text-wrap:balance}
.op-bs{font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.9vw,32px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}

/* 1 entry: the name and the thesis on the left; on the right the running business as a score, every lane at its own speed */
.op-hero{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr auto;column-gap:4vw;min-height:calc(100svh - 170px);padding-bottom:6vh}
.op-hero .dkick{grid-column:1/-1}
.op-hl{grid-row:2;display:flex;flex-direction:column}
.op-k{margin-top:clamp(20px,4vh,52px);font-size:clamp(34px,3.9vw,68px);line-height:.98;letter-spacing:-.04em;font-weight:500;max-width:9ch;text-wrap:balance}
.op-sub{margin-top:auto;padding-top:5vh;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.3vw,40px);line-height:1.05;letter-spacing:-.012em}
.op-run{grid-column:1;grid-row:3;margin-top:3vh;font-size:clamp(15px,1.1vw,17px);line-height:1.45;color:rgba(0,0,0,.66);max-width:30ch;text-wrap:pretty}
.op-score{grid-column:2;grid-row:2/4;margin:clamp(20px,4vh,52px) 0 0;display:flex;flex-direction:column;min-height:260px}
.op-lanes{flex:1;display:grid;grid-auto-rows:minmax(0,1fr);row-gap:clamp(3px,.7vh,8px)}
.op-ln{display:grid;grid-template-columns:clamp(96px,9.5vw,150px) minmax(0,1fr);align-items:center;column-gap:14px;min-height:14px}
.op-ln span{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:clamp(9.5px,.72vw,11px);letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap;color:rgba(0,0,0,.72)}
.op-tk{position:relative;height:100%;overflow:hidden}
.op-tk>div{position:absolute;left:0;top:0;bottom:0;width:200%;animation:op-run var(--d) linear infinite;animation-delay:calc(var(--k) * -3.7s)}
.op-tk i{position:absolute;top:22%;bottom:22%;background:#000}
.op-ln:nth-child(3n+2) .op-tk i{top:30%;bottom:30%}
.op-ln:nth-child(4n) .op-tk i{top:14%;bottom:14%}
@keyframes op-run{to{transform:translateX(-50%)}}
/* today: one band through every lane at once. Whatever passes it is happening now */
.op-score{position:relative}
.op-now{position:absolute;top:-26px;bottom:34px;left:calc(clamp(96px,9.5vw,150px) + 14px + (100% - clamp(96px,9.5vw,150px) - 14px) * .64);width:clamp(46px,5vw,84px);background:#fff;mix-blend-mode:difference;pointer-events:none}
.op-now span{position:absolute;left:0;top:0;padding:6px 0 0 8px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#000}
.op-cap{margin-top:14px;padding-left:calc(clamp(96px,9.5vw,150px) + 14px);font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.35vw,22px);line-height:1.2;letter-spacing:-.005em}
/* arrival: the lanes start one after the other */
.op-hero .op-ln{opacity:0;transition:opacity .7s var(--ease) calc(.1s + var(--k) * 55ms)}
.op-hero.go .op-ln{opacity:1}
.op-score:hover .op-tk>div{animation-play-state:paused}

/* 2 between the parts: two strong words, and the black column between them where the problem lives */
.op-cn{padding:14vh 0 13vh}
.op-cnh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.op-cnh .op-h{max-width:17ch}
.op-cnb{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.75vw,29px);line-height:1.14;letter-spacing:-.008em;max-width:24ch;text-wrap:balance}
.op-gap{margin-top:9vh;--gw:clamp(210px,27vw,420px)}
.op-gl,.op-rows li{display:grid;grid-template-columns:minmax(0,1fr) var(--gw) minmax(0,1fr)}
.op-gl span{padding-bottom:12px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(0,0,0,.5)}
.op-gl span:first-child{text-align:right;padding-right:clamp(18px,2vw,34px)}
.op-gl span:nth-child(2){padding-left:clamp(18px,1.8vw,30px)}
.op-gl span:last-child{padding-left:clamp(18px,2vw,34px)}
.op-rows li .a,.op-rows li .b{align-self:center;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(22px,2.7vw,46px);letter-spacing:-.025em;line-height:1;text-wrap:balance;padding:clamp(18px,3.4vh,34px) clamp(18px,2vw,34px)}
.op-rows li .a{text-align:right}
.op-rows li .m{display:flex;align-items:center;background:#000;color:#fff;padding:clamp(14px,2.6vh,26px) clamp(18px,1.8vw,30px);font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.3vw,21px);line-height:1.2;letter-spacing:-.004em;text-wrap:balance;box-shadow:0 1px 0 #000}
.op-rows li+li .m{border-top:1px solid rgba(255,255,255,.18)}
.op-rows li .m{transition:padding .5s var(--ease)}
.op-rows li:hover .a,.op-rows li:hover .b{color:#000}
.op-rows:hover li:not(:hover) :is(.a,.b){color:rgba(0,0,0,.28)}
.op-rows li :is(.a,.b){transition:color .4s var(--ease)}

/* 3 reading the operation (black): a promise made in the market, and the rhythm it shows. Grey is the normal week, white is where it changes */
.op-rd{--bg:#000;margin:0 calc(var(--m) * -1);padding:11vh var(--m) 11vh;background:#000;color:#fff}
.op-rdh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.op-rdh .op-h{max-width:18ch}
.op-rdb{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.75vw,29px);line-height:1.14;letter-spacing:-.008em;color:rgba(255,255,255,.86);max-width:24ch;text-wrap:balance}
.op-rdw{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:4vw;margin-top:7vh;align-items:start}
.op-pml{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:2.2vh}
.op-pms{display:grid;justify-items:start}
.op-p{display:inline-flex;align-items:baseline;gap:14px;padding:6px 0;font-size:clamp(22px,2.1vw,36px);letter-spacing:-.025em;line-height:1.1;color:rgba(255,255,255,.4);cursor:pointer;transition:color .35s var(--ease)}
.op-p b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.62em;letter-spacing:.01em;font-variant-numeric:lining-nums;-webkit-text-stroke:.045em currentColor;min-width:1.6em}
.op-p:hover{color:rgba(255,255,255,.85)}
.op-p[aria-pressed="true"]{color:#fff;cursor:default}
.op-p:focus-visible{outline:1px solid #fff;outline-offset:4px}
.op-wave{grid-column:2;grid-row:1/3;margin:0}
.op-bars{display:flex;align-items:flex-end;gap:clamp(3px,.45vw,7px);height:clamp(150px,30vh,300px)}
.op-bars i{flex:1;background:rgba(255,255,255,.26);transition:height .8s var(--ease),background-color .6s var(--ease)}
.op-bars i:nth-child(7n){margin-right:clamp(6px,.9vw,14px)}
.op-bars i.sg{background:#fff}
.op-wc{display:flex;justify-content:space-between;margin-top:14px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.5)}
.op-wc span:last-child{color:#fff}
.op-rs{grid-column:1/-1;display:grid;margin-top:6vh}
.op .nw{white-space:nowrap}
.op-rs dl{grid-area:1/1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);column-gap:4vw;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
.op-rs dl.off{opacity:0;visibility:hidden;transform:translateY(8px);transition-delay:0s,0s,.5s}
.op-rs dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:1.4vh}
.op-rs dd{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,28px);line-height:1.12;letter-spacing:-.008em;max-width:18ch;text-wrap:balance}
.op-rs .sg dd{font-family:var(--sans);font-style:normal;font-size:clamp(17px,1.35vw,21px);line-height:1.3;letter-spacing:-.01em;max-width:24ch}

/* 4 intervention: judgement is one decisive slip; compensation is the same slip again, every week, stacked into depth */
.op-rp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:4vw;padding:15vh 0 13vh}
.op-rph .op-h{max-width:14ch}
.op-rpb{margin-top:2.4vh;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.3vw,40px);line-height:1.05;letter-spacing:-.012em}
.op-stk{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3vw;align-items:end}
.op-stl{display:flex;flex-direction:column;gap:6px;margin-bottom:3vh}
.op-stl b{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:clamp(15px,1.2vw,19px);letter-spacing:.02em;text-transform:uppercase;font-weight:600}
.op-stl span{font-size:clamp(14px,1vw,16px);line-height:1.35;color:rgba(0,0,0,.6);max-width:24ch}
.op-sl{position:relative;aspect-ratio:4/3.1;margin:46px 42px 0 0}
.op-slip{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(16px,1.6vw,26px);font-size:clamp(17px,1.4vw,23px);line-height:1.2;letter-spacing:-.014em;text-wrap:balance}
.op-j .op-slip{background:#000;color:#fff}
.op-c .op-sl i{position:absolute;inset:0;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);transform:translate(calc(var(--n) * 5px),calc(var(--n) * -5px))}
.op-c .op-sl i:nth-child(1){--n:8;opacity:.35}.op-c .op-sl i:nth-child(2){--n:7;opacity:.42}.op-c .op-sl i:nth-child(3){--n:6;opacity:.5}.op-c .op-sl i:nth-child(4){--n:5;opacity:.58}
.op-c .op-sl i:nth-child(5){--n:4;opacity:.66}.op-c .op-sl i:nth-child(6){--n:3;opacity:.75}.op-c .op-sl i:nth-child(7){--n:2;opacity:.85}.op-c .op-sl i:nth-child(8){--n:1}
.op-c .op-slip{background:#fff;box-shadow:inset 0 0 0 1px #000}
.op-ix{grid-column:1/-1;display:flex;gap:22px;margin-top:3.4vh}
.op-x{font-family:var(--serif);font-style:italic;font-size:22px;font-variant-numeric:lining-nums;-webkit-text-stroke:.045em currentColor;color:rgba(0,0,0,.34);cursor:pointer;padding:4px 2px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .35s var(--ease),background-size .45s var(--ease)}
.op-x:hover{color:#000}
.op-x[aria-pressed="true"]{color:#000;background-size:100% 1px;cursor:default}
.op-lens{grid-column:1;grid-row:2;align-self:end;margin-top:8vh}
.op-lens .xh{margin-bottom:1.6vh}
.op-lens p{font-size:clamp(18px,1.45vw,23px);line-height:1.32;letter-spacing:-.012em;max-width:26ch;text-wrap:pretty}

/* 5 right-sized: the business as a load on its structure. The visitor sets how much structure there is */
.op-sz{--bg:#efefef;margin:0 calc(var(--m) * -1);padding:13vh var(--m) 12vh;background:#efefef}
.op-szh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.op-szh .op-h{max-width:19ch}
.op-szb{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.75vw,29px);line-height:1.14;letter-spacing:-.008em;max-width:22ch;text-wrap:balance}
.op-bw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;column-gap:4vw;margin-top:8vh;align-items:start}
.op-beam{grid-row:1/3;margin:0}
.op-beam svg{display:block;width:100%;height:auto;overflow:visible}
.op-beam svg .w{fill:#fff;stroke:#000;stroke-width:2}
.op-beam[data-z="1"] svg .w{fill:#000}
.op-ctl{padding-top:2vh}
.op-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:linear-gradient(#000,#000) 0 50%/100% 2px no-repeat;cursor:pointer}
.op-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;background:#000;border:0}
.op-range::-moz-range-thumb{width:22px;height:22px;background:#000;border:0;border-radius:0}
.op-range:focus-visible{outline:1px solid #000;outline-offset:6px}
.op-ends{display:flex;justify-content:space-between;margin-top:10px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(0,0,0,.42)}
.op-ends span{transition:color .35s var(--ease)}
.op-ends span.on{color:#000}
.op-zr{display:grid;margin-top:5vh}
.op-zr p{grid-area:1/1;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,34px);line-height:1.08;letter-spacing:-.01em;max-width:17ch;text-wrap:balance;transition:opacity .45s var(--ease),visibility 0s}
.op-zr p.off{opacity:0;visibility:hidden;transition-delay:0s,.45s}
.op-pc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4vw;row-gap:5vh;margin-top:10vh}
.op-pk{font-size:clamp(16px,1.2vw,19px);line-height:1.45;color:rgba(0,0,0,.66);max-width:34ch;text-wrap:pretty}
.op-pk b{display:block;margin-bottom:.5vh;font-weight:500;font-size:clamp(22px,1.9vw,32px);line-height:1.08;letter-spacing:-.025em;color:#000}
.op-ch b{font-weight:300;color:rgba(0,0,0,.75)}
.op-fw{grid-column:1/-1;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.75vw,29px);line-height:1.14;letter-spacing:-.008em;text-wrap:balance}

/* 6 operating realities (black): three businesses, three shapes of the same work. A plan that runs, an order that travels, an idea that is built */
.op-ev{--bg:#000;margin:0 calc(var(--m) * -1);padding:13vh var(--m) 13vh;background:#000;color:#fff}
.op-evh{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:4vw;align-items:start}
.op-evh .xh{color:rgba(255,255,255,.62);padding-top:.8em}
.op-evk{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3vw,52px);line-height:1.06;letter-spacing:-.012em;max-width:19ch;text-wrap:balance}
.op-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3.5vw;margin-top:8vh;align-items:start}
.op-mov{margin-top:7vh}.op-mk{margin-top:14vh}
.op-cs{display:flex;flex-direction:column}
.op-ck{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:2.4vh}
.op-cn2{margin-top:3.4vh;font-size:clamp(22px,1.9vw,32px);line-height:1.06;letter-spacing:-.024em;font-weight:400;text-wrap:balance}
.op-cf{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:4px;margin-top:1.8vh;font-size:clamp(13px,.95vw,15px);line-height:1.4;color:rgba(255,255,255,.62)}
.op-cf span:first-child{color:#fff}
/* the operating reality leads; the size of the building is context */
.op-cb.op-cb1{font-size:clamp(17px,1.35vw,21px);line-height:1.34;letter-spacing:-.01em;color:#fff;max-width:26ch}
.op-cb{margin-top:1.6vh;font-size:clamp(15px,1.1vw,17px);line-height:1.45;color:rgba(255,255,255,.7);max-width:32ch;text-wrap:pretty}
.op-cq{margin-top:2.6vh;font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.5vw,25px);line-height:1.12;max-width:20ch;text-wrap:balance}
/* the fine Boska on black needs more light to read (Lena, 28.09.2026): pure white, a touch stronger, a little more air. Size unchanged */
.op .op-rows li .m,.op .op-cq{color:#fff;-webkit-text-stroke:.014em currentColor;letter-spacing:.014em}
/* on a phone every Boska line of the page is set a little wider and stronger; on black it is pure white */
@media (max-width:760px){
  .op :is(.op-sub,.op-cap,.op-cnb,.op-rows li .m,.op-rdb,.op-rs div:not(.sg) dd,.op-rpb,.op-zr p,.op-szb,.op-fw,.op-evk,.op-cq,.op-trv li:last-child,.op-brk,.op-in .q,.op-dl .q){letter-spacing:.018em;-webkit-text-stroke:.018em currentColor}
  .op :is(.op-rdb,.op-rs dd,.op-evk,.op-cq,.op-dl .q,.op-rows li .m){color:#fff}
}
/* running it: the building as a plan, every format a room of its own size */
.op-plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(44px,6.6vh);gap:4px}
.op-plan span{display:flex;align-items:flex-end;padding:8px 9px;background:rgba(255,255,255,.1);font-size:clamp(10.5px,.78vw,12.5px);line-height:1.15;letter-spacing:.005em;color:rgba(255,255,255,.85);hyphens:none}
.op-plan span.s2{grid-column:span 2}
.op-plan span.w{background:#fff;color:#000}
/* moving it: one order, eight states; the square is where it stands, the outlines where it still has to go */
.op-trv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:14px;row-gap:9px}
.op-trv li{display:flex;align-items:center;gap:11px;font-size:clamp(14px,1.05vw,16.5px);letter-spacing:-.005em;color:rgba(255,255,255,.9)}
.op-trv li::before{content:"";flex:none;width:11px;height:11px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.op-trv li:nth-child(-n+3)::before{background:#fff;box-shadow:none}
.op-trv li:last-child{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.2vw,19px)}
/* making it operational: from an outline to something that stands, layer by layer */
.op-bld{display:flex;flex-direction:column;gap:4px}
.op-bld li{padding:7px 10px 6px;font-size:clamp(12.5px,.92vw,14.5px);line-height:1.2;letter-spacing:.005em;background:rgba(255,255,255,var(--f));color:var(--c,#fff);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.op-bld li:nth-child(1){--f:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);background:none;outline:1px dashed rgba(255,255,255,.5);outline-offset:-1px}
.op-bld li:nth-child(2){--f:.08}.op-bld li:nth-child(3){--f:.16}.op-bld li:nth-child(4){--f:.26}.op-bld li:nth-child(5){--f:.4}
.op-bld li:nth-child(6){--f:.62;--c:#000}.op-bld li:nth-child(7){--f:1;--c:#000;font-weight:600}

/* 7 inside Operations: three further questions, then the step to Delivery */
.op-br{padding:14vh 0 10vh}
.op-brk{margin-top:3vh;font-family:var(--serif);font-style:italic;font-size:clamp(32px,3.4vw,58px);line-height:1.06;letter-spacing:-.012em;max-width:18ch;text-wrap:balance}
.op-in{margin-top:8vh}
.op-in li+li{margin-top:clamp(6px,1.2vh,14px)}
.op-in button{position:relative;display:grid;grid-template-columns:clamp(44px,4.4vw,70px) minmax(0,7fr) minmax(0,5fr) 40px;align-items:baseline;column-gap:2vw;width:100%;padding:clamp(10px,1.8vh,18px) 0;text-align:left;cursor:pointer}
.op-in .ad{font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:rgba(0,0,0,.5)}
.op-in .n{justify-self:start;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(34px,4.6vw,80px);letter-spacing:-.045em;line-height:.95;background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;padding-bottom:6px;transition:background-size .5s var(--ease),color .4s var(--ease)}
.op-in .q{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.75vw,29px);line-height:1.1;letter-spacing:-.008em;text-wrap:balance}
.op-in .plus{justify-self:end;font-size:30px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.op-dl .plus{position:absolute;right:clamp(16px,1.6vw,26px);top:clamp(14px,1.5vw,24px);font-size:28px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.op-in:hover button:not(:hover):not(:focus-visible) .n{color:rgba(0,0,0,.25)}
.op-in button:hover .n,.op-in button:focus-visible .n{background-size:100% 3px}
.op-in button:hover .plus,.op-in button:focus-visible .plus,.op-dl:hover .plus,.op-dl:focus-visible .plus{transform:rotate(90deg)}
.op-in button:focus-visible,.op-dl:focus-visible{outline:1px solid #000;outline-offset:5px}
.op-dl{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;column-gap:4vw;row-gap:3vh;width:100%;margin-top:clamp(10px,1.2vw,18px);padding:clamp(24px,4.4vh,48px) clamp(18px,1.8vw,28px);background:#000;color:#fff;text-align:left;cursor:pointer}
.op-dl .xh{grid-column:1/-1;justify-self:start;color:rgba(255,255,255,.6)}
.op-dl .q{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.4vw,42px);line-height:1.06;letter-spacing:-.012em;max-width:20ch;text-wrap:balance}
.op-dl .n{align-self:end;justify-self:end;display:flex;align-items:baseline;gap:12px;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(22px,2.4vw,40px);letter-spacing:-.015em;line-height:1;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:6px;transition:background-size .45s var(--ease)}
.op-dl .n em{font-style:normal;font-weight:400;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.55)}
.op-dl:hover .n,.op-dl:focus-visible .n{background-size:100% 2px}
.op-dl:focus-visible{outline-color:#000}

.rm .op *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.op *{transition:none!important;animation:none!important}}

@media (max-width:1100px) and (min-width:761px){
  .op-cases{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:9vh}
  .op-mk{margin-top:0}
  .op-rs dl{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3vw}
}

/* on a phone: recomposed frame by frame. The score shows fewer, longer lanes; the gap between the parts becomes a black band per pair;
   the promises sit above the rhythm they change; the two kinds of intervention stand side by side; the structure is set with the thumb */
@media (max-width:760px){
  .op{--bar:62px}
  .op-hero{grid-template-columns:1fr;grid-template-rows:none;min-height:0;padding-bottom:5vh}
  .op-hl{display:contents}
  .op-hero .dkick .t{font-size:clamp(44px,13vw,60px)}
  .op-k{margin-top:3.4vh;font-size:clamp(34px,10vw,44px);max-width:none}
  .op-score{grid-column:1;grid-row:auto;order:3;margin-top:4.5vh;min-height:0}
  .op-lanes{grid-auto-rows:22px;row-gap:5px}
  .op-ln:nth-child(n+10){display:none}
  .op-ln{grid-template-columns:92px minmax(0,1fr);column-gap:10px}
  .op-ln span{font-size:9.5px;letter-spacing:.12em}
  .op-cap{padding-left:0;font-size:18px}
  .op-sub{order:4;margin-top:0;padding-top:4.5vh;font-size:clamp(26px,7.4vw,32px)}
  .op-run{grid-column:1;grid-row:auto;order:5;margin-top:2vh;font-size:16px}
  .op-h{font-size:clamp(27px,7.6vw,34px)}
  .op-cn{padding:11vh 0 10vh}
  .op-cnh,.op-rdh,.op-szh{grid-template-columns:1fr;row-gap:3vh}
  .op-cnb,.op-rdb,.op-szb{font-size:clamp(21px,6vw,26px)}
  .op-gap{margin-top:5vh}
  .op-gl{display:none}
  .op-rows{display:grid;row-gap:22px}
  .op-rows li{grid-template-columns:1fr;row-gap:0}
  .op-rows li .a,.op-rows li .b{padding:0;font-size:clamp(22px,6.6vw,28px)}
  .op-rows li .a{text-align:left}
  .op-rows li .b{text-align:right}
  .op-rows li .m{margin:10px 0;padding:14px 16px;font-size:17px}
  .op-rows li+li .m{border-top:0}
  .op-rd{padding:11vh var(--m)}
  .op-rdw{grid-template-columns:1fr;margin-top:5vh}
  .op-pms{grid-template-columns:repeat(2,max-content);column-gap:22px}
  .op-p{font-size:19px;gap:9px;padding:5px 0}
  .op-wave{grid-column:1;grid-row:auto;margin-top:3.5vh}
  .op-bars{height:150px;gap:2px}
  .op-bars i:nth-child(7n){margin-right:6px}
  .op-rs{margin-top:4.5vh}
  .op-rs dl{grid-template-columns:1fr;row-gap:2.6vh}
  .op-rs dt{margin-bottom:.8vh}
  .op-rs dd{font-size:22px;max-width:none}
  .op-rs .sg dd{font-size:18px}
  .op-rp{grid-template-columns:1fr;grid-template-rows:none;padding:11vh 0 10vh}
  .op-rpb{font-size:clamp(26px,7.4vw,32px)}
  .op-stk{grid-column:1;grid-row:auto;margin-top:5vh;column-gap:18px}
  .op-stl b{font-size:13px}
  .op-stl span{font-size:13px}
  .op-sl{aspect-ratio:3/4;margin-top:16px}
  .op-slip{padding:13px;font-size:15.5px}
  .op-c .op-sl i{transform:translate(calc(var(--n) * 3px),calc(var(--n) * -3px))}
  .op-lens{grid-column:1;grid-row:auto;margin-top:6vh}
  .op-lens p{font-size:19px}
  .op-sz{padding:11vh var(--m) 10vh}
  .op-bw{grid-template-columns:1fr;grid-template-rows:none;margin-top:5vh}
  .op-beam{grid-row:auto}
  .op-ctl{padding-top:3vh}
  .op-zr{margin-top:3.5vh}
  .op-zr p{font-size:24px}
  .op-pc{grid-template-columns:1fr;row-gap:4vh;margin-top:7vh}
  .op-ev{padding:11vh var(--m)}
  .op-evh{grid-template-columns:1fr;row-gap:2.5vh}
  .op-evk{font-size:clamp(28px,8vw,36px)}
  .op-cases{grid-template-columns:1fr;row-gap:9vh;margin-top:7vh}
  .op-mov,.op-mk{margin-top:0}
  .op-plan{grid-auto-rows:48px}
  .op-plan span{font-size:11.5px}
  .op-br{padding:12vh 0 6vh}
  .op-brk{font-size:clamp(28px,8vw,36px)}
  .op-in{margin-top:5vh}
  .op-in button{grid-template-columns:minmax(0,1fr) 28px;row-gap:6px;padding:12px 0}
  .op-in .ad{grid-column:1;grid-row:1}
  .op-in .n{grid-column:1;grid-row:2;font-size:clamp(30px,9vw,40px)}
  .op-in .q{grid-column:1;grid-row:3;font-size:20px}
  .op-in .plus{grid-column:2;grid-row:2;align-self:center;font-size:26px}
  .op-dl{grid-template-columns:1fr;padding:26px 18px 24px}
  .op-dl .xh{margin-right:40px}
  .op-dl .q{font-size:clamp(24px,7vw,30px);padding-right:24px}
  .op-dl .n{justify-self:start;font-size:24px}
  .op-dl .plus{top:22px;right:16px}
}

/* ---------- Deep Dive C.1 People: people carry the operation. One material for the page, a halftone field: every dot is a person,
   its size is how much of the operation they carry. The role fills with what the person needs; a group sends the work to one person,
   a team lets it move; knowledge spreads without the holder shrinking; what a team carries together is not its headcount ---------- */
.pe{--bar:74px;--bg:#fff}
.pe .xh{display:block}
.pe-h{font-size:clamp(28px,2.8vw,48px);line-height:1.06;letter-spacing:-.028em;font-weight:400;text-wrap:balance}
.pe-bs0,.pe-sub,.pe-rlb,.pe-cpb,.pe-cyb,.pe-cxb,.pe-cuk,.pe-lk,.pe-brk,.pe-fw{font-family:var(--serif);font-style:italic;letter-spacing:-.008em;text-wrap:balance}
.pe svg circle{transition:r .8s var(--ease),opacity .5s var(--ease)}
.pe svg rect{transition:x .7s var(--ease),y .7s var(--ease),opacity .5s var(--ease)}

/* 1 entry */
.pe-hero{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:4vw;min-height:calc(100svh - 170px);padding-bottom:6vh}
.pe-hero .dkick{grid-column:1/-1}
.pe-hl{display:flex;flex-direction:column}
.pe-k{margin-top:clamp(20px,4vh,52px);font-size:clamp(34px,3.9vw,68px);line-height:.98;letter-spacing:-.04em;font-weight:500;max-width:9ch;text-wrap:balance}
.pe-sub{margin-top:auto;padding-top:5vh;font-size:clamp(22px,2vw,34px);line-height:1.08;max-width:15ch}
.pe-fig{margin:clamp(20px,4vh,52px) 0 0;display:flex;flex-direction:column;justify-content:flex-end}
.pe-svg{display:block;width:100%;height:auto;max-height:calc(100svh - 240px)}
.pe-svg circle{fill:#000;transition:r 1s var(--ease) var(--d,0ms)}
.pe-cap{margin-top:16px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(0,0,0,.6);text-wrap:balance}

/* 2 the role */
.pe-rl{padding:14vh 0 12vh}
.pe-rlh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.pe-rlb{font-size:clamp(20px,1.75vw,29px);line-height:1.14;max-width:22ch}
.pe-rlw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;margin-top:8vh;align-items:center}
.pe-rfig{margin:0}
.pe-rsvg{display:block;width:100%;height:auto}
.pe-rsvg .in,.pe-rsvg .few{fill:#000}
.pe-rsvg .bk{fill:#000}
.pe-rtl{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(0,0,0,.6)}
.pe-rtl span:first-child{padding-left:9%}
.pe-rtl span:last-child{padding-left:12%}
.pe-nl{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(0,0,0,.55);margin-bottom:2vh}
.pe-nb{display:flex;flex-wrap:wrap;gap:8px}
.pe-n{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:40px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);font-size:clamp(15px,1.15vw,18px);letter-spacing:-.01em;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.pe-n::before{content:"";width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;transition:background-color .35s var(--ease)}
.pe-n[aria-pressed="true"]{background:#000;color:#fff;box-shadow:none}
.pe-n[aria-pressed="true"]::before{background:#fff;box-shadow:none}
.pe-n:hover{box-shadow:inset 0 0 0 1px #000}
.pe-n:focus-visible{outline:1px solid #000;outline-offset:4px}
.pe-nr{margin-top:4vh;font-size:clamp(17px,1.35vw,21px);line-height:1.34;letter-spacing:-.01em;max-width:30ch;min-height:4em;text-wrap:pretty}
.pe-rlq{margin-top:8vh;font-size:clamp(22px,2.1vw,36px);line-height:1.12;letter-spacing:-.025em;max-width:30ch;text-wrap:balance}

/* 3 the team (grey): the same seven people as a group and as a team; pressure shows the difference */
.pe-tm{--bg:#efefef;margin:0 calc(var(--m) * -1);padding:13vh var(--m) 12vh;background:#efefef}
.pe-tmh{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:4vw;align-items:end}
.pe-tmh .pe-h{max-width:20ch}
.pe-pr{justify-self:end;display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:40px;background:#000;color:#fff;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer}
.pe-pr i{width:10px;height:10px;border-radius:50%;background:#fff;transition:transform .5s var(--ease)}
.pe-pr[aria-pressed="true"]{background:#fff;color:#000;box-shadow:inset 0 0 0 1.5px #000}
.pe-pr[aria-pressed="true"] i{background:#000;transform:scale(1.5)}
.pe-pr:focus-visible{outline:1px solid #000;outline-offset:4px}
.pe-pr2{display:none}
.pe-tw{display:grid;grid-template-columns:1fr 1fr;column-gap:4vw;margin-top:7vh}
.pe-tf{margin:0;background:#fff;padding:clamp(14px,2vw,30px)}
.pe-tsvg{display:block;width:100%;height:auto;max-height:46vh}
.pe-tsvg circle{fill:#000}
.pe-tsvg .wk{fill:#fff;stroke:#000;stroke-width:1.2}
.pe-tf figcaption{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.pe-tf b{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:clamp(15px,1.2vw,19px);letter-spacing:.02em;text-transform:uppercase;font-weight:600}
.pe-tf span{font-size:clamp(14px,1.05vw,16px);line-height:1.4;color:rgba(0,0,0,.66);max-width:34ch}
.pe-cu{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:4vw;margin-top:8vh;align-items:start}
.pe-cuk{font-size:clamp(24px,2.3vw,40px);line-height:1.05;max-width:16ch}
.pe-cuq{font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:rgba(0,0,0,.72);max-width:48ch;text-wrap:pretty;padding-top:.5em;transition:color .5s var(--ease)}
.pe-tw[data-p="1"]~.pe-cu .pe-cuq{color:#000}

/* 4 capability (black): the knowledge of one person, held or travelling */
.pe-cp{--bg:#000;margin:0 calc(var(--m) * -1);padding:13vh var(--m) 12vh;background:#000;color:#fff}
.pe-cph{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.pe-cpb{font-size:clamp(20px,1.75vw,29px);line-height:1.14;max-width:24ch}
.pe-cpw{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:4vw;margin-top:8vh;align-items:start}
.pe-hdl{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:2vh}
.pe-hs{display:grid;justify-items:start}
.pe-h1{padding:5px 0;font-size:clamp(18px,1.55vw,26px);letter-spacing:-.02em;line-height:1.15;color:rgba(255,255,255,.4);cursor:pointer;text-align:left;transition:color .35s var(--ease)}
.pe-h1:hover{color:rgba(255,255,255,.85)}
.pe-h1[aria-pressed="true"]{color:#fff;cursor:default}
.pe-h1:focus-visible{outline:1px solid #fff;outline-offset:4px}
.pe-cfig{margin:0}
.pe-csvg{display:block;width:100%;height:auto}
.pe-csvg circle{fill:#fff}
.pe-st{display:flex;gap:8px;margin-top:3vh}
.pe-s{padding:10px 18px;border-radius:40px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);font-size:clamp(14px,1.05vw,16px);color:rgba(255,255,255,.75);cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease)}
.pe-s[aria-pressed="true"]{background:#fff;color:#000;box-shadow:none;cursor:default}
.pe-s:focus-visible{outline:1px solid #fff;outline-offset:4px}
.pe-kn{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);column-gap:4vw;margin-top:9vh}
.pe-kn div:first-child{grid-column:2}
.pe-kn dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:1.4vh}
.pe-kn dd{font-size:clamp(16px,1.2vw,19px);line-height:1.45;color:rgba(255,255,255,.86);max-width:30ch;text-wrap:pretty}
.pe-fw{grid-column:1/-1;margin-top:8vh;font-size:clamp(20px,1.75vw,29px);line-height:1.14;max-width:30ch}

/* 5 capacity: two teams, and what each carries together as one dot of the same ink */
.pe-cy{padding:14vh 0 12vh}
.pe-cyh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.pe-cyb{font-size:clamp(20px,1.75vw,29px);line-height:1.14;max-width:22ch}
.pe-cyw{display:grid;grid-template-columns:minmax(0,3fr) clamp(70px,7vw,110px) minmax(0,3fr) minmax(0,4fr);column-gap:2.4vw;margin-top:7vh;align-items:end}
.pe-cyf{margin:0}
.pe-ysvg{display:block;width:100%;height:auto;max-height:52vh}
.pe-ysvg circle{fill:#000}
.pe-ysvg .ag{fill:#000}
.pe-cyf figcaption{display:flex;flex-direction:column;gap:5px;margin-top:14px}
.pe-cyf b{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:clamp(15px,1.2vw,19px);letter-spacing:.02em;text-transform:uppercase;font-weight:600}
.pe-cyf span{font-size:13px;color:rgba(0,0,0,.6)}
.pe-eq{align-self:center;justify-self:center;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.4vw,23px);line-height:1.1;text-align:center;padding-bottom:14vh}
.pe-fx{padding-left:1vw}
.pe-fxl{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(0,0,0,.55);margin-bottom:1.6vh}
.pe-fxw{font-size:clamp(18px,1.45vw,23px);line-height:1.3;letter-spacing:-.012em;max-width:22ch;text-wrap:pretty}
.pe-fxn{margin-top:3vh;font-size:12.5px;color:rgba(0,0,0,.5)}

/* 6 context (black): the same field, arranged as each type of business is */
.pe-cx{--bg:#000;margin:0 calc(var(--m) * -1);padding:13vh var(--m) 12vh;background:#000;color:#fff}
.pe-cxh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.pe-cxh .pe-h{max-width:17ch}
.pe-cxb{font-size:clamp(20px,1.75vw,29px);line-height:1.14;max-width:24ch}
.pe-cxw{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:4vw;margin-top:8vh}
.pe-bs{grid-row:1/3;display:grid;justify-items:start;align-content:start}
.pe-b{display:inline-flex;align-items:baseline;gap:12px;padding:6px 0;font-size:clamp(17px,1.4vw,23px);letter-spacing:-.018em;line-height:1.15;color:rgba(255,255,255,.4);cursor:pointer;text-align:left;transition:color .35s var(--ease)}
.pe-b b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.8em;font-variant-numeric:lining-nums;-webkit-text-stroke:.045em currentColor;min-width:1.7em}
.pe-b:hover{color:rgba(255,255,255,.85)}
.pe-b[aria-pressed="true"]{color:#fff;cursor:default}
.pe-b:focus-visible{outline:1px solid #fff;outline-offset:4px}
.pe-xfig{margin:0}
.pe-xsvg{display:block;width:100%;height:auto}
.pe-xsvg circle{fill:#fff;stroke:#fff;stroke-width:0}
.pe-xsvg circle.o{fill:none;stroke-width:1.3}
.pe-xl{display:flex;gap:22px;margin-top:12px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.6);opacity:0;transition:opacity .5s var(--ease)}
.pe-xl span{display:inline-flex;align-items:center;gap:8px}
.pe-xl i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px #fff}
.pe-xl i.f{background:#fff}
.pe-xfig[data-b="4"] .pe-xl{opacity:1}
.pe-xr{grid-column:2;display:grid;margin-top:4vh}
.pe-xr p{grid-area:1/1;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,34px);line-height:1.1;max-width:28ch;text-wrap:balance;transition:opacity .45s var(--ease),visibility 0s}
.pe-xr p.off{opacity:0;visibility:hidden;transition-delay:0s,.45s}

/* 7 in practice: three verbs as type, the proof beside each */
.pe-pf{padding:14vh 0 10vh}
.pe-v{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:4vw;align-items:start;margin-top:7vh}
.pe-pf .xh+.pe-v{margin-top:5vh}
.pe-vw{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(44px,6.4vw,112px);letter-spacing:-.05em;line-height:.9}
.pe-v2 .pe-vw{padding-left:6vw}.pe-v3 .pe-vw{padding-left:12vw}
.pe-vt{padding-top:.4em}
.pe-vk{font-size:clamp(19px,1.55vw,25px);line-height:1.28;letter-spacing:-.014em;max-width:30ch;text-wrap:pretty}
.pe-vs{margin-top:1.8vh;font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:rgba(0,0,0,.64);max-width:44ch;text-wrap:pretty}
.pe-vs em{font-style:normal;color:#000;white-space:nowrap}
.pe-vc{display:flex;align-items:baseline;gap:14px;margin-top:2.4vh}
.pe-vc b{font-weight:200;font-size:clamp(40px,3.6vw,62px);line-height:.9;letter-spacing:-.05em}
.pe-vc span{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* 8 what I look for, then the two questions that follow */
.pe-br{padding:6vh 0 10vh}
.pe-ln{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:4vw;align-items:start;padding:8vh 0 10vh}
.pe-ln .xh{padding-top:.9em}
.pe-lk{font-size:clamp(28px,3vw,52px);line-height:1.06;max-width:22ch}
.pe-brk{font-size:clamp(22px,2vw,34px);line-height:1.1;max-width:30ch}
.pe-nx{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px);margin-top:5vh}
.pe-x{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) 30px;grid-template-rows:auto auto;column-gap:clamp(18px,2vw,32px);row-gap:10px;align-items:center;width:100%;padding:clamp(22px,3.4vh,40px) clamp(18px,1.8vw,30px);text-align:left;cursor:pointer;transition:background-color .45s var(--ease),color .45s var(--ease)}
.pe-x svg{grid-row:1/3;width:clamp(64px,6vw,104px);height:auto;fill:currentColor}
.pe-x .ad{grid-column:2;font-size:11px;letter-spacing:.06em;opacity:.55}
.pe-x .n{grid-column:2;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(24px,2.6vw,44px);letter-spacing:-.03em;line-height:1}
.pe-x .q{grid-column:2;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.5vw,25px);line-height:1.12}
.pe-x .ad{grid-row:1}
.pe-x .plus{position:absolute;right:clamp(16px,1.6vw,26px);top:clamp(14px,1.5vw,24px);font-size:28px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.pe-xt{box-shadow:inset 0 0 0 1px #000}
.pe-xd{background:#000;color:#fff}
.pe-xt:hover,.pe-xt:focus-visible{background:#000;color:#fff}
.pe-xd:hover,.pe-xd:focus-visible{background:#fff;color:#000;box-shadow:inset 0 0 0 1px #000}
.pe-x:hover .plus,.pe-x:focus-visible .plus{transform:rotate(90deg)}
.pe-x:focus-visible{outline:1px solid #000;outline-offset:5px}
.pe-x{grid-template-areas:none}
.pe-x .ad,.pe-x .n,.pe-x .q{grid-row:auto}

/* Boska legibility (Lena, 28.09.2026): on black pure white, a touch stronger, a little more air; on a phone every Boska line */
.pe-cp :is(.pe-cpb,.pe-fw),.pe-cx :is(.pe-cxb,.pe-xr p),.pe-xd .q{color:#fff;-webkit-text-stroke:.014em currentColor;letter-spacing:.014em}

/* People desktop composition pass (Lena, 28.09.2026): each mechanism and the words it needs read as one state.
   The headline and its Boska line sit with the controls beside the picture; the concluding lines follow below */
.pe-hero .pe-sub{margin-top:3.6vh;padding-top:0}
.pe-rl{padding:12vh 0 11vh}
.pe-rlw{margin-top:0;align-items:center}
.pe-rlh{display:block;margin-bottom:5vh}
.pe-rlh .pe-rlb{margin-top:2vh}
.pe-rsvg{max-height:calc(100svh - 200px)}
.pe-rlq{margin-top:7vh}
.pe-tm{padding-top:10vh}
.pe-tw{margin-top:4.5vh}
.pe-tsvg{max-height:min(calc(100svh - 400px),42vh);min-height:150px}
.pe-cu{margin-top:9vh}
.pe-cpw{margin-top:0;align-items:center}
.pe-cph{display:block}
.pe-cph .pe-cpb{margin-top:2vh}
.pe-hdl{margin-top:5vh}
.pe-csvg{max-height:calc(100svh - 230px)}
.pe-cxw{margin-top:0;align-items:center}
.pe-xc{grid-row:1/3}
.pe-cxh{display:block;margin-bottom:5vh}
.pe-cxh .pe-cxb{margin-top:2vh}
.pe-xsvg{max-height:calc(100svh - 330px)}
.pe-cxw .pe-xr{margin-top:3vh}
.pe-v{break-inside:avoid}
@media (max-width:760px){
  .pe-need{display:contents}
  .pe-rlh{order:-1;margin-bottom:0}
  .pe-rfig{margin-top:4vh}
  .pe-nl{margin-top:4vh}
  .pe-rsvg,.pe-csvg,.pe-xsvg,.pe-tsvg{max-height:none}
  .pe-tm .pe-pr2{display:inline-flex;margin-top:12px}
  .pe-nx{grid-auto-rows:1fr}
  .pe-hdl{margin-top:4vh}
  .pe-cxh{margin-bottom:4vh}
}
.rm .pe *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.pe *{transition:none!important}}

@media (max-width:1100px) and (min-width:761px){
  .pe-cyw{grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr)}
  .pe-fx{grid-column:1/-1;margin-top:5vh;padding:0}
  .pe-kn{grid-template-columns:1fr 1fr}.pe-kn div:first-child{grid-column:auto}
}

@media (max-width:760px){
  .pe{--bar:62px}
  .pe :is(.pe-sub,.pe-rlb,.pe-cpb,.pe-cyb,.pe-cxb,.pe-cuk,.pe-lk,.pe-brk,.pe-fw,.pe-xr p,.pe-x .q,.pe-eq){letter-spacing:.018em;-webkit-text-stroke:.018em currentColor}
  .pe-hero{grid-template-columns:1fr;grid-template-rows:none;min-height:0;padding-bottom:5vh}
  .pe-hero .dkick .t{font-size:clamp(44px,13vw,60px)}
  .pe-k{margin-top:3.4vh;font-size:clamp(34px,10vw,44px);max-width:none}
  .pe-sub{padding-top:2.4vh;margin-top:0;font-size:clamp(22px,6.4vw,28px);max-width:none}
  .pe-fig{margin-top:4vh}
  .pe-svg{max-height:none}
  .pe-h{font-size:clamp(27px,7.6vw,34px)}
  .pe-rlh,.pe-cph,.pe-cyh,.pe-cxh,.pe-tmh{grid-template-columns:1fr;row-gap:3vh}
  .pe-rlb,.pe-cpb,.pe-cyb,.pe-cxb{font-size:clamp(21px,6vw,26px)}
  .pe-rl,.pe-cy,.pe-pf{padding:11vh 0 9vh}
  .pe-rlw{grid-template-columns:1fr;margin-top:4vh}
  .pe-need{margin-top:4vh}
  .pe-n{font-size:15px;padding:9px 14px 9px 11px}
  .pe-nr{font-size:17px;min-height:0}
  .pe-rlq{margin-top:5vh;font-size:clamp(22px,6.4vw,27px)}
  .pe-tm,.pe-cp,.pe-cx{padding:11vh var(--m) 10vh}
  .pe-pr{justify-self:start}
  .pe-tw{grid-template-columns:1fr;row-gap:10px;margin-top:4vh}
  .pe-tf{padding:12px 14px 16px}
  .pe-tsvg{max-height:none}
  .pe-tf b{font-size:13px}
  .pe-tf span{font-size:13px}
  .pe-cu{grid-template-columns:1fr;row-gap:2.4vh;margin-top:5vh}
  .pe-cuk{font-size:clamp(24px,7vw,30px)}
  .pe-cpw{grid-template-columns:1fr;margin-top:4vh}
  .pe-hs{grid-template-columns:1fr;}
  .pe-h1{font-size:18px;padding:4px 0}
  .pe-cfig{margin-top:3.5vh}
  .pe-kn{grid-template-columns:1fr;row-gap:3vh;margin-top:5vh}
  .pe-kn div:first-child{grid-column:auto}
  .pe-kn dd{font-size:17px}
  .pe-fw{margin-top:5vh;font-size:22px}
  .pe-cyw{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);column-gap:8px;margin-top:4vh}
  .pe-eq{font-size:15px;padding-bottom:12vh}
  .pe-cyf b{font-size:13px}
  .pe-fx{grid-column:1/-1;margin-top:4vh;padding:0}
  .pe-fxw{font-size:18px;max-width:none}
  .pe-cxw{grid-template-columns:1fr;grid-template-rows:none;margin-top:4vh}
  .pe-bs{grid-row:auto;grid-template-columns:1fr}
  .pe-b{font-size:17px;padding:5px 0}
  .pe-xfig{margin-top:3vh}
  .pe-xl{flex-direction:column;gap:6px}
  .pe-xr{grid-column:1;margin-top:3vh}
  .pe-xr p{font-size:23px}
  .pe-v{grid-template-columns:1fr;row-gap:2vh;margin-top:6vh}
  .pe-v2 .pe-vw,.pe-v3 .pe-vw{padding-left:0}
  .pe-vw{font-size:clamp(40px,12vw,54px)}
  .pe-vk{font-size:18px}
  .pe-ln{grid-template-columns:1fr;row-gap:2.4vh;padding:4vh 0 7vh}
  .pe-lk{font-size:clamp(26px,7.4vw,32px)}
  .pe-brk{font-size:22px}
  .pe-nx{grid-template-columns:1fr;gap:10px;margin-top:4vh}
  .pe-x{padding:22px 18px}
  .pe-x svg{width:58px}
  .pe-x .n{font-size:24px}
  .pe-x .q{font-size:19px;padding-right:20px}
  .pe-x .plus{top:16px;right:16px;font-size:26px}
}
@media (max-width:360px){.pe-x{column-gap:14px}.pe-x svg{width:50px}.pe-x .n{font-size:21px}}

/* ---------- Deep Dive C.2 Technology (narrative + art direction rebuild, Lena 28.09.2026). One argument and one red thread: a line of work
   drawn in points. It enters the black monolith, loses its friction, crosses the system boundary, passes Lena's gates, aligns on one owner,
   breaks differently by business, travels the commercial chain and stops at a threshold. Every frame is a resolved still ---------- */
.tc{--bar:74px;--bg:#fff;--dot:radial-gradient(circle,currentColor 0 1.1px,transparent 1.5px) 0 50%/7px 7px repeat-x}
.tc .xh{display:block}
.tc-h{font-size:clamp(28px,2.9vw,50px);line-height:1.04;letter-spacing:-.03em;font-weight:400;text-wrap:balance}
.tc-mi{font-stretch:75%;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:13px;line-height:1.3}
.tc-me,.tc-jd,.tc-askq,.tc-num em,.tc-aub,.tc-apk,.tc-lena .v,.tc-seq b,.tc-route b,.tc-eab,.tc-brk{font-family:var(--serif);font-style:italic;font-weight:400}

/* 1 entry. The line of stable work runs into the monolith, continues inside it, and leaves as one verified state; judgement is a point that
   stands outside, set flush against the system boundary */
.tc-hero{--ln:67%;--mx:61%;--mw:13.5%;position:relative;height:max(470px,calc(100svh - 170px));margin-bottom:4vh}
.tc-hl{position:relative;z-index:3;max-width:56%}
.tc-k{margin-top:clamp(18px,3.4vh,40px);font-size:clamp(34px,3.9vw,68px);line-height:1;letter-spacing:-.04em;font-weight:500}
.tc-mono{position:absolute;inset:0;margin:0}
.tc-slab{position:absolute;z-index:2;left:var(--mx);width:var(--mw);top:0;bottom:0;background:#000;color:#fff}
.tc-inl{position:absolute;left:0;right:0;top:var(--ln);height:7px;transform:translateY(-50%);background:var(--dot)}
.tc-sl{position:absolute;left:16px;top:16px;writing-mode:vertical-rl}
.tc-flow{position:absolute;z-index:1;left:0;width:var(--mx);top:var(--ln);height:7px;transform:translateY(-50%);background:var(--dot)}
.tc-flow i{position:absolute;top:50%;left:calc(var(--p) * 100%);width:11px;height:11px;border-radius:50%;background:#000;transform:translate(-50%,-50%)}
.tc-fl0{position:absolute;left:0;bottom:calc(100% - var(--ln) + 18px)}
.tc-jd{position:absolute;right:calc(100% - var(--mx) + 22px);bottom:calc(100% - var(--ln) + clamp(64px,13vh,120px));display:flex;align-items:center;gap:14px;font-size:clamp(19px,1.55vw,26px);line-height:1;letter-spacing:-.005em;white-space:nowrap}
.tc-jd i{flex:none;width:18px;height:18px;border-radius:50%;background:#000;box-shadow:0 0 0 5px #fff,0 0 0 6.5px #000}
.tc-exit{position:absolute;left:calc(var(--mx) + var(--mw));right:8px;top:var(--ln);height:2px;background:#000;transform:translateY(-50%)}
.tc-exit::after{content:"";position:absolute;right:-8px;top:50%;width:16px;height:16px;border-radius:50%;background:#000;box-shadow:0 0 0 4px #fff,0 0 0 5.5px #000;transform:translateY(-50%)}
.tc-out{position:absolute;right:0;top:calc(var(--ln) + 22px);text-align:right}
.tc-me{position:absolute;left:0;top:calc(var(--ln) + clamp(26px,5vh,48px));max-width:15ch;font-size:clamp(22px,2vw,34px);line-height:1.1;letter-spacing:-.01em}
/* arrival: the work moves along the line once, then rests where the still shows it */
.tc-hero .tc-flow i{opacity:0;transform:translate(calc(-50% - 36px),-50%);transition:opacity .7s var(--ease),transform 1s var(--ease)}
.tc-hero .tc-flow i:nth-child(n+5){transition-delay:.08s}.tc-hero .tc-flow i:nth-child(n+9){transition-delay:.16s}.tc-hero .tc-flow i:nth-child(n+12){transition-delay:.24s}
.tc-hero.go .tc-flow i{opacity:1;transform:translate(-50%,-50%)}

/* 2 carry (grey). One order as a ledger of touches; the numbers stand in their own column with the meaning beside them, and the two
   verdicts answer Lena's question in her own voice */
.tc-cw{--bg:#efefef;margin:0 calc(var(--m) * -1);padding:11vh var(--m) 10vh;background:#efefef}
.tc-cwh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.tc-cw .tc-h{max-width:17ch}
.tc-ask{justify-self:end;text-align:right}
.tc-ask .tc-mi{color:rgba(0,0,0,.55);margin-bottom:1.2vh}
.tc-askq{font-size:clamp(24px,2.4vw,42px);line-height:1.06;letter-spacing:-.012em;max-width:11em;margin-left:auto;text-wrap:balance}
.tc-obj{margin-top:clamp(28px,6vh,64px);color:rgba(0,0,0,.55)}
.tc-led{margin-top:clamp(8px,1.6vh,18px);display:grid;row-gap:clamp(4px,1.4vh,16px)}
.tc-led li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5.4fr) minmax(0,4.6fr);column-gap:3vw;align-items:center}
.tc-ml{font-size:14px;color:rgba(0,0,0,.78)}
.tc-r2 .tc-ml{color:#000}
.tc-path{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));justify-items:center;align-items:center;height:40px;background:var(--dot)}
.tc-path i{width:13px;height:13px;border-radius:50%;background:#000}
.tc-path i.x{background:#efefef;box-shadow:inset 0 0 0 1.6px #000}
.tc-blk{grid-column:2/7;justify-self:stretch;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;align-items:center;height:40px;background:#000}
.tc-blk i{background:#fff}
.tc-num{display:grid;grid-template-columns:1.3em minmax(0,1fr);align-items:center;column-gap:clamp(12px,1.2vw,20px);font-size:min(clamp(64px,7vw,128px),14.5vh)}
.tc-num b{justify-self:end;font-stretch:75%;font-variation-settings:"wdth" 75;font-weight:200;line-height:.8;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tc-num span{font-size:clamp(15.5px,1.2vw,19px);line-height:1.32;letter-spacing:-.01em;max-width:21ch;text-wrap:balance}
.tc-num em{display:block;margin-top:4px;font-size:clamp(20px,1.7vw,28px);line-height:1;letter-spacing:-.005em}
.tc-gain{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);column-gap:3vw;align-items:baseline;margin-top:clamp(24px,5vh,56px)}
.tc-gain .tc-mi{font-size:14px;color:rgba(0,0,0,.78)}
.tc-gain span:last-child{font-size:clamp(15px,1.2vw,19px);line-height:1.4;letter-spacing:-.01em;max-width:54ch;text-wrap:pretty}

/* 3 the boundary. One page split into the human side and the system side; judgement stands once, repeat compresses as it goes; Lena's
   sentence stands against the boundary; her method crosses it */
.tc-au{padding:12vh 0 0}
.tc-au .tc-h{font-size:clamp(30px,3.7vw,66px);letter-spacing:-.035em;max-width:none}
.tc-split{display:grid;grid-template-columns:1fr 1fr;margin:6vh calc(var(--m) * -1) 0;background:linear-gradient(90deg,#fff 50%,#000 50%)}
.tc-hu{display:flex;flex-direction:column;padding:7vh 4vw 0 var(--m)}
.tc-sy{padding:7vh var(--m) 0 4vw;color:#fff;overflow:hidden}
.tc-big{font-weight:500;font-size:clamp(50px,6.6vw,120px);line-height:.86;letter-spacing:-.05em;white-space:nowrap}
.tc-rep{display:grid;justify-items:start}
.tc-rep span:nth-child(2){font-size:.64em;font-stretch:88%;font-variation-settings:"wdth" 88;opacity:.62;margin-top:.06em}
.tc-rep span:nth-child(3){font-size:.4em;font-stretch:75%;font-variation-settings:"wdth" 75;opacity:.38;margin-top:.1em}
.tc-rep span:nth-child(4){font-size:.24em;font-stretch:75%;font-variation-settings:"wdth" 75;letter-spacing:.02em;opacity:.22;margin-top:.14em}
.tc-who{margin-top:3.6vh;opacity:.6}
.tc-hu ul,.tc-sy ul{display:flex;flex-wrap:wrap;column-gap:20px;row-gap:4px;margin-top:1.4vh;font-size:clamp(17px,1.4vw,22px);line-height:1.35;letter-spacing:-.012em;max-width:26em}
.tc-aub{align-self:flex-end;margin-top:auto;padding-top:5vh;text-align:right;font-size:clamp(22px,2vw,34px);line-height:1.1;letter-spacing:-.01em;max-width:18ch;text-wrap:balance}
.tc-seq{grid-column:1/-1;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6vh var(--m) 10vh}
.tc-seq::before{content:"";position:absolute;left:var(--m);right:var(--m);top:calc(6vh + 5px);height:7px;transform:translateY(-50%);color:#fff;background:var(--dot);mix-blend-mode:difference}
.tc-seq li{position:relative;display:flex;flex-direction:column;padding:26px 3vw 0 0;font-size:clamp(16px,1.3vw,21px);line-height:1.3;letter-spacing:-.012em}
.tc-seq li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:#000;box-shadow:0 0 0 4px #fff}
.tc-seq li:nth-child(3)::before{background:#fff;box-shadow:0 0 0 4px #000}
.tc-seq li:nth-child(3){grid-column:3;padding-left:4vw;color:#fff}
.tc-seq li:nth-child(3)::before{left:4vw;background:#fff;box-shadow:0 0 0 4px #000}
.tc-seq li span{max-width:19ch;text-wrap:balance}
.tc-seq b,.tc-route b{margin-bottom:.8vh;font-size:clamp(21px,1.7vw,28px);font-variant-numeric:lining-nums;-webkit-text-stroke:.045em currentColor}

/* 4 how I work with it (black). Five roles converge on one point of authority; below, one real page of this site passes Lena's three gates */
.tc-ap{--bg:#000;margin:0 calc(var(--m) * -1);padding:12vh var(--m) 12vh;background:#000;color:#fff}
.tc-ap .xh{color:rgba(255,255,255,.6)}
.tc-apk{margin-top:2.4vh;font-size:clamp(32px,3.6vw,64px);line-height:1.02;letter-spacing:-.012em;max-width:17ch;text-wrap:balance}
.tc-conv{display:grid;grid-template-columns:minmax(0,6.4fr) minmax(0,1.8fr) minmax(0,3.8fr);margin-top:clamp(36px,8vh,88px)}
.tc-roles{display:grid;grid-auto-rows:1fr}
.tc-roles li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:auto auto;column-gap:2vw;align-content:center;padding:clamp(6px,1.2vh,12px) 0}
.tc-roles .n{grid-row:1/3;align-self:center;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(17px,1.75vw,30px);letter-spacing:-.03em;line-height:1}
.tc-roles .v{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.62vw,27px);line-height:1.1}
.tc-roles .m{margin-top:6px;color:rgba(255,255,255,.78);font-size:13.5px;letter-spacing:.07em}
.tc-cvl{width:100%;height:100%;overflow:visible}
.tc-cvl path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.tc-lena{position:relative;display:flex;flex-direction:column;justify-content:center;padding-left:clamp(20px,2.4vw,40px)}
.tc-lena::before{content:"";position:absolute;left:-7px;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;transform:translateY(-50%)}
.tc-lena .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;text-transform:uppercase;font-size:clamp(50px,6vw,108px);letter-spacing:-.045em;line-height:.86}
.tc-lena .v{margin-top:.1em;font-size:clamp(36px,4vw,72px);line-height:1}
.tc-lena .m{margin-top:1.6vh;color:#fff}
.tc-proof{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:4vw;row-gap:3.4vh;margin-top:clamp(56px,12vh,130px)}
.tc-prl{grid-column:1/-1;color:rgba(255,255,255,.6)}
.tc-route{grid-column:1/-1;position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.tc-route::before{content:"";position:absolute;left:0;right:0;top:6px;height:7px;transform:translateY(-50%);color:#fff;background:var(--dot)}
.tc-route li{position:relative;display:flex;flex-direction:column;padding:30px 12px 0 0;font-size:clamp(15px,1.2vw,19px);letter-spacing:-.01em}
.tc-route li::before{content:"";position:absolute;left:0;top:1px;width:10px;height:10px;border-radius:50%;background:#fff}
.tc-route li.g::before{top:-14px;width:7px;height:40px;border-radius:0}
.tc-route li.g{font-weight:600}
.tc-route i{margin-top:.6vh;font-style:normal;font-size:13.5px;color:rgba(255,255,255,.82)}
.tc-lak{grid-column:2;margin-top:2vh;font-size:clamp(17px,1.4vw,23px);line-height:1.34;letter-spacing:-.014em;max-width:34ch;text-wrap:pretty}
.tc-lak em{font-style:normal;color:rgba(255,255,255,.6)}

/* 5 truth (white). One order, one property. Above the date axis four answers drift apart; below it one owner and three readers align */
.tc-tr{padding:13vh 0 11vh}
.tc-trh{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:4vw;align-items:end}
.tc-rec{display:grid;row-gap:4px;color:rgba(0,0,0,.6)}
.tc-rec b{font-weight:700;color:#000;font-size:15px}
.tc-tr .tc-h{justify-self:end;text-align:right;font-size:clamp(32px,4vw,72px);letter-spacing:-.035em}
.tc-sts{display:grid;row-gap:clamp(14px,2.6vh,28px);margin-top:clamp(36px,7vh,80px)}
.tc-sa,.tc-sb,.tc-ax{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,2.2fr) minmax(0,7.6fr);column-gap:2vw;align-items:center}
.tc-cnt{grid-column:1;grid-row:1/5;align-self:center;display:flex;align-items:flex-end;gap:12px}
.tc-cnt b{font-stretch:75%;font-variation-settings:"wdth" 75;font-weight:200;font-size:min(clamp(72px,6.6vw,120px),15vh);line-height:.76;letter-spacing:-.04em}
.tc-cnt span{padding-bottom:.3em;font-size:clamp(14px,1.05vw,17px);line-height:1.2;color:rgba(0,0,0,.65);white-space:nowrap}
.tc-src{grid-column:2;font-size:14px;color:rgba(0,0,0,.78);text-align:right}
.tc-src em{display:block;margin-top:1px;font-style:normal;font-weight:500;font-size:12.5px;color:rgba(0,0,0,.58)}
.tc-src.own{color:#000}.tc-src.own em{color:#000;font-weight:700}
.tc-lane{--x:calc((var(--d) + .5) / 7 * 100%);grid-column:3;position:relative;height:clamp(30px,5vh,42px)}
.tc-lane::before{content:"";position:absolute;left:0;width:var(--x);top:50%;height:7px;transform:translateY(-50%);background:var(--dot)}
.tc-lane i{position:absolute;left:var(--x);top:50%;width:12px;height:12px;border-radius:50%;background:#000;transform:translate(-50%,-50%)}
.tc-lane b{position:absolute;right:calc(100% - var(--x) + 5px);top:50%;transform:translateY(-54%);padding:0 6px 0 8px;background:#fff;font-stretch:75%;font-variation-settings:"wdth" 75;font-weight:300;font-size:clamp(20px,1.9vw,32px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.tc-sb .tc-lane:not(.own)::before{opacity:.4}
.tc-sb .tc-lane:not(.own) b{color:rgba(0,0,0,.45)}
.tc-lane.own::before{height:3px;background:#000}
.tc-lane.own i{width:16px;height:16px;box-shadow:0 0 0 4px #fff,0 0 0 5.5px #000}
.tc-lane.own b{right:calc(100% - var(--x) + 15px)}
.tc-sb .tc-lane{height:clamp(40px,6.4vh,54px)}
.tc-sb .tc-src{line-height:1.2}
.tc-ax{padding:10px 0}
.tc-axi{grid-column:3;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:10px;box-shadow:inset 0 1px 0 rgba(0,0,0,.25)}
.tc-axi span{text-align:center;font-stretch:75%;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;font-weight:600;color:rgba(0,0,0,.55)}
.tc-axi span:nth-child(4){color:#000}
.tc-lc{margin:clamp(28px,5vh,56px) 0 0 auto;max-width:44ch;font-size:clamp(16px,1.28vw,20px);line-height:1.45;color:rgba(0,0,0,.84);text-wrap:pretty}

/* 6 business realities (grey). The same line runs through six businesses and breaks in a different place in each */
.tc-cx{--bg:#efefef;margin:0 calc(var(--m) * -1);padding:12vh var(--m) 11vh;background:#efefef}
.tc-cx .tc-h{font-size:clamp(32px,4vw,72px);letter-spacing:-.035em;max-width:none}
.tc-fx{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(36px,8vh,90px)}
.tc-fx li{display:flex;flex-direction:column}
.tc-g{position:relative;display:block;height:84px}
.tc-g::before{content:"";position:absolute;left:0;right:0;top:50%;height:7px;transform:translateY(-50%);background:var(--dot)}
.tc-g svg{position:relative;display:block;width:100%;max-width:180px;height:84px;margin:0 auto;overflow:visible}
.tc-g circle{fill:#000}
.tc-g .o{fill:#efefef;stroke:#000;stroke-width:1.5}
.tc-g .h{opacity:.35}
.tc-g .k{fill:#efefef}
.tc-g .s{fill:none;stroke:#000;stroke-width:1.5}
.tc-fx .c{margin-top:3vh;padding-right:1.4vw;font-size:13.5px;color:rgba(0,0,0,.74);min-height:2.6em}
.tc-fx .f{margin-top:.8vh;padding-right:1.4vw;font-weight:600;text-transform:uppercase;font-size:clamp(17px,1.55vw,28px);letter-spacing:-.02em;line-height:1.02}
.tc-fx .l{margin-top:1.6vh;padding-right:1.8vw;font-size:clamp(15px,1.15vw,17.5px);line-height:1.45;color:rgba(0,0,0,.8);text-wrap:pretty}

/* 7 earlier practice (black). The platform names as the frame's architecture, filled and in outline; the evidence sits inside the
   composition; the commercial chain runs on and Lena's sentence closes it from the right */
.tc-ea{--bg:#000;margin:0 calc(var(--m) * -1);padding:12vh var(--m) 12vh;background:#000;color:#fff;overflow:hidden}
.tc-ea .xh{color:rgba(255,255,255,.6)}
.tc-eag{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:4vw;align-items:end;margin-top:3vh}
.tc-n1,.tc-n2{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;letter-spacing:-.05em;white-space:nowrap}
.tc-n1{font-size:min(clamp(96px,15vw,280px),34vh);line-height:.78}
.tc-eak{padding-bottom:.4em;font-size:clamp(16px,1.3vw,21px);line-height:1.4;letter-spacing:-.012em;color:rgba(255,255,255,.86);max-width:40ch;text-wrap:pretty}
.tc-n2{grid-column:1/-1;justify-self:end;margin-top:.12em;font-size:clamp(48px,7.6vw,138px);line-height:.9;color:#000;text-shadow:1.5px 0 #fff,-1.5px 0 #fff,0 1.5px #fff,0 -1.5px #fff,1px 1px #fff,-1px -1px #fff,1px -1px #fff,-1px 1px #fff}
.tc-chain{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr)) minmax(0,1.6fr);margin-top:clamp(40px,8vh,90px)}
.tc-chain::before{content:"";position:absolute;left:0;right:0;top:5px;height:7px;transform:translateY(-50%);color:#fff;background:var(--dot);-webkit-mask:linear-gradient(90deg,#000 82%,transparent);mask:linear-gradient(90deg,#000 82%,transparent)}
.tc-chain li{position:relative;padding:26px 10px 0 0;font-stretch:75%;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:clamp(13.5px,1.12vw,16px);line-height:1.25}
.tc-chain li::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#fff}
.tc-eab{margin:clamp(28px,5vh,56px) 0 0 auto;text-align:right;font-size:clamp(26px,2.7vw,48px);line-height:1.04;max-width:17ch;text-wrap:balance}

/* 8 the threshold. The line of work reaches a boundary and stops; beyond it, Decisions */
.tc-br{padding:12vh 0 11vh}
.tc-bw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end;margin-top:4vh}
.tc-bl{position:relative;padding-bottom:44px}
.tc-bl::before{content:"";position:absolute;left:0;right:0;bottom:12px;height:7px;transform:translateY(-50%);background:var(--dot)}
.tc-th{position:absolute;right:0;bottom:0;width:2px;height:clamp(64px,12vh,120px);background:#000}
.tc-brk{font-size:clamp(30px,3.2vw,56px);line-height:1.05;letter-spacing:-.012em;max-width:17ch;text-wrap:balance}
.tc-dx{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(18px,2vw,32px);row-gap:12px;align-items:baseline;width:100%;padding:clamp(24px,4vh,44px) clamp(18px,1.8vw,30px);background:#000;color:#fff;text-align:left;cursor:pointer}
.tc-dx .ad{justify-self:start;grid-row:1/3;font-size:13px;letter-spacing:.06em;opacity:.6}
.tc-dx .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(28px,3vw,52px);letter-spacing:-.03em;line-height:1;justify-self:start;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:6px;transition:background-size .45s var(--ease)}
.tc-dx .q{grid-column:2;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,28px);line-height:1.1}
.tc-dx .plus{position:absolute;right:clamp(16px,1.6vw,26px);top:clamp(14px,1.5vw,24px);font-size:28px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.tc-dx:hover .n,.tc-dx:focus-visible .n{background-size:100% 2px}
.tc-dx:hover .plus,.tc-dx:focus-visible .plus{transform:rotate(90deg)}
.tc-dx:focus-visible{outline:1px solid #000;outline-offset:5px}

/* Boska legibility (Lena, 28.09.2026): on black pure white, a touch stronger, a little more air */
.tc-ap :is(.tc-apk,.tc-roles .v,.tc-lena .v),.tc-sy .tc-seq b,.tc-ea .tc-eab,.tc-dx .q{color:#fff;-webkit-text-stroke:.014em currentColor;letter-spacing:.014em}

.rm .tc *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.tc *{transition:none!important;animation:none!important}}

/* a short laptop window: less air between the parts, the same type sizes */
@media (max-height:620px) and (min-width:761px){
  .tc-hero{--ln:62%;height:max(380px,calc(100svh - 150px))}
  .tc-jd{bottom:calc(100% - var(--ln) + 10vh)}
  .tc-me{top:calc(var(--ln) + 22px)}
  .tc-cw{padding-top:8vh}
  .tc-obj{margin-top:4vh}
  .tc-au{padding-top:10vh}
  .tc-split{margin-top:4vh}
  .tc-hu,.tc-sy{padding-top:5vh}
  .tc-seq{padding-top:5vh}
  .tc-seq::before{top:calc(5vh + 5px)}
}
@media (max-width:1100px) and (min-width:761px){
  .tc-hl{max-width:60%}
  .tc-led li{grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,4fr)}
  .tc-conv{grid-template-columns:minmax(0,7fr) minmax(0,1.4fr) minmax(0,3.6fr)}
  .tc-roles li{grid-template-columns:1fr;grid-template-rows:auto}
  .tc-roles .n{grid-row:auto;margin-bottom:4px}
  .tc-fx{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:6vh}
  .tc-chain{grid-template-columns:repeat(8,minmax(0,1fr)) minmax(0,.6fr)}
}

/* on a phone: its own composition of the same argument. The monolith stands at the right, the ledger reads row by row, the boundary
   turns horizontal (human above, system below), the roles converge downwards onto Lena, the line of each business stands beside its words */
@media (max-width:760px){
  .tc{--bar:62px}
  .tc :is(.tc-me,.tc-jd,.tc-askq,.tc-num em,.tc-aub,.tc-apk,.tc-roles .v,.tc-lena .v,.tc-eab,.tc-brk,.tc-dx .q){letter-spacing:.018em;-webkit-text-stroke:.018em currentColor}
  .tc-hero{--ln:64%;--mx:50%;--mw:21%;height:auto;margin-bottom:0;padding-bottom:6vh}
  .tc-hl{max-width:none}
  .tc-hero .dkick .t{font-size:clamp(44px,13vw,60px)}
  .tc-k{margin-top:2.6vh;font-size:clamp(30px,9vw,40px)}
  .tc-mono{position:relative;height:300px;margin-top:4vh}
  .tc-jd{font-size:18px;gap:10px;white-space:normal;text-align:right;max-width:10em;line-height:1.05;right:calc(100% - var(--mx) + 14px);bottom:calc(100% - var(--ln) + 70px)}
  .tc-jd i{width:14px;height:14px;box-shadow:0 0 0 4px #fff,0 0 0 5.5px #000}
  .tc-flow i{width:9px;height:9px}
  .tc-exit{right:6px}
  .tc-exit::after{right:-6px;width:12px;height:12px}
  .tc-sl{left:11px;top:11px;font-size:12px}
  .tc-fl0{font-size:12px}
  .tc-out{font-size:12px;top:calc(var(--ln) + 18px)}
  .tc-me{position:static;margin-top:3vh;font-size:clamp(22px,6.4vw,27px);max-width:17ch}
  .tc-h{font-size:clamp(27px,7.6vw,34px)}
  .tc-cw,.tc-ap,.tc-ea,.tc-cx{padding:10vh var(--m) 9vh}
  .tc-cwh{grid-template-columns:1fr;row-gap:4vh}
  .tc-ask{justify-self:end}
  .tc-askq{font-size:clamp(24px,7vw,30px)}
  .tc-obj{margin-top:5vh}
  .tc-led{row-gap:3.4vh;margin-top:2vh}
  .tc-led li{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .tc-path{height:30px}
  .tc-path i{width:10px;height:10px}
  .tc-blk{height:30px}
  .tc-num{font-size:72px;grid-template-columns:1.25em minmax(0,1fr)}
  .tc-num span{font-size:16px}
  .tc-num em{font-size:22px}
  .tc-gain{grid-template-columns:1fr;row-gap:8px;margin-top:5vh}
  .tc-gain span:last-child{font-size:16px}
  .tc-au{padding-top:10vh}
  .tc-au .tc-h{font-size:clamp(28px,8vw,36px)}
  .tc-split{grid-template-columns:1fr;margin-top:4vh;background:none}
  .tc-hu{padding:4vh var(--m) 5vh;background:#fff}
  .tc-sy{padding:6vh var(--m) 4vh;background:#000}
  .tc-big{font-size:clamp(46px,14.5vw,64px)}
  .tc-aub{align-self:flex-end;margin-top:0;padding-top:5vh;font-size:clamp(22px,6.4vw,27px);max-width:15ch}
  .tc-seq{grid-template-columns:1fr;row-gap:3.4vh;padding:4vh var(--m) 9vh;background:#000;color:#fff}
  .tc-seq::before{display:none}
  .tc-seq li{padding:0 0 0 28px;color:#fff}
  .tc-seq li::before,.tc-seq li:nth-child(3)::before{top:9px;background:#fff;box-shadow:none}
  .tc-seq li:nth-child(3){grid-column:1;padding-left:28px}
  .tc-seq li:nth-child(3)::before{left:0}
  .tc-seq b{color:#fff;-webkit-text-stroke:.045em currentColor}
  .tc-seq li span{max-width:none}
  .tc-apk{font-size:clamp(30px,8.6vw,38px)}
  .tc-conv{grid-template-columns:1fr;grid-template-rows:auto 56px auto;margin-top:6vh}
  .tc-roles{row-gap:14px}
  .tc-roles li{grid-template-columns:1fr;grid-template-rows:auto;padding:0}
  .tc-roles .n{grid-row:auto;font-size:20px;margin-bottom:4px}
  .tc-roles .v{font-size:21px}
  .tc-cvl{display:none}
  .tc-conv::after{content:"";grid-row:2;justify-self:start;width:2px;height:100%;margin-left:6px;background:rgba(255,255,255,.5)}
  .tc-lena{grid-row:3;padding:18px 0 0}
  .tc-lena::before{left:0;top:0;transform:none}
  .tc-lena .n{font-size:clamp(56px,17vw,76px)}
  .tc-lena .v{font-size:clamp(34px,10vw,44px)}
  .tc-proof{grid-template-columns:1fr;margin-top:9vh}
  .tc-route{grid-template-columns:1fr;row-gap:14px}
  .tc-route::before{left:4px;right:auto;top:6px;bottom:6px;width:2px;height:auto;transform:none;background:radial-gradient(circle,#fff 0 1.1px,transparent 1.5px) 50% 0/7px 7px repeat-y;width:7px;left:1px}
  .tc-route li{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px;padding:0 0 0 30px}
  .tc-route li::before{top:6px}
  .tc-route li.g::before{top:3px;left:-4px;width:18px;height:6px}
  .tc-route b{margin:0}
  .tc-route i{margin:0}
  .tc-lak{grid-column:1;font-size:18px}
  .tc-tr{padding:10vh 0 9vh}
  .tc-trh{grid-template-columns:1fr;row-gap:4vh}
  .tc-tr .tc-h{font-size:clamp(30px,8.6vw,38px)}
  .tc-sts{margin-top:5vh}
  .tc-sa,.tc-sb{grid-template-columns:minmax(0,3.4fr) minmax(0,6.6fr);column-gap:12px}
  .tc-cnt{grid-column:1/-1;grid-row:auto;margin-bottom:10px}
  .tc-cnt b{font-size:72px}
  .tc-src{grid-column:1;font-size:12.5px}
  .tc-src em{font-size:11.5px}
  .tc-lane{grid-column:2;height:34px}
  .tc-sb .tc-lane{height:42px}
  .tc-lane b{font-size:19px;padding-left:4px}
  .tc-ax{grid-template-columns:minmax(0,3.4fr) minmax(0,6.6fr);column-gap:12px}
  .tc-axi{grid-column:2}
  .tc-axi span{font-size:10.5px;letter-spacing:.02em}
  .tc-axi span:nth-child(4){font-size:0}.tc-axi span:nth-child(4)::before{content:"14";font-size:10.5px}
  .tc-lc{font-size:16.5px;max-width:none}
  .tc-cx .tc-h{font-size:clamp(30px,8.6vw,38px)}
  .tc-fx{grid-template-columns:1fr;row-gap:5vh;margin-top:5vh}
  .tc-fx li{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:16px;align-items:start}
  .tc-g{grid-row:1/4;height:60px}
  .tc-g svg{height:60px}
  .tc-fx .c{margin-top:0;min-height:0;padding-right:0}
  .tc-fx .f{font-size:clamp(19px,5.6vw,24px);padding-right:0}
  .tc-fx .l{font-size:16px;padding-right:0}
  .tc-eag{grid-template-columns:1fr;row-gap:4vh}
  .tc-n1{font-size:clamp(88px,30vw,128px)}
  .tc-eak{grid-row:3;font-size:17px}
  .tc-n2{grid-column:1;justify-self:end;text-align:right;white-space:normal;font-size:clamp(40px,12.6vw,56px);line-height:.94}
  .tc-chain{grid-template-columns:1fr;row-gap:12px;margin-top:6vh}
  .tc-chain::before{left:1px;right:auto;top:6px;bottom:-40px;width:7px;height:auto;transform:none;background:radial-gradient(circle,#fff 0 1.1px,transparent 1.5px) 50% 0/7px 7px repeat-y;-webkit-mask:linear-gradient(180deg,#000 80%,transparent);mask:linear-gradient(180deg,#000 80%,transparent)}
  .tc-chain li{padding:0 0 0 30px;font-size:14px}
  .tc-chain li::before{top:1px}
  .tc-eab{margin-top:8vh;font-size:clamp(26px,7.6vw,32px);max-width:14ch}
  .tc-br{padding:10vh 0 7vh}
  .tc-bw{grid-template-columns:1fr;row-gap:5vh}
  .tc-brk{font-size:clamp(28px,8vw,34px)}
  .tc-dx{grid-template-columns:1fr;padding:24px 18px 26px}
  .tc-dx .ad{grid-row:auto}
  .tc-dx .q{grid-column:1;font-size:21px}
  .tc-dx .plus{top:18px;right:16px}
  /* phone legibility (Lena, 28.09.2026): the same faces, set a little wider; on black pure white, on white and grey near black */
  .tc :is(.tc-mi,.tc-chain li,.tc-axi span){font-stretch:92%;font-variation-settings:"wdth" 92;letter-spacing:.06em}
  .tc :is(.tc-ml,.tc-obj,.tc-ask .tc-mi,.tc-gain .tc-mi,.tc-src,.tc-fx .c,.tc-rec,.tc-hu .tc-who,.tc-axi span){color:rgba(0,0,0,.86);opacity:1}
  .tc-src em{color:rgba(0,0,0,.66)}
  .tc :is(.tc-sy .tc-who,.tc-roles .m,.tc-route i,.tc-prl,.tc-lena .m,.tc-ap .xh,.tc-ea .xh){color:#fff;opacity:1}
  .tc-lak em{color:rgba(255,255,255,.8)}
  .tc-lane b{font-weight:400;font-stretch:88%;font-variation-settings:"wdth" 88}
  .tc-sb .tc-lane:not(.own) b{color:rgba(0,0,0,.62)}
  .tc-cnt span,.tc-num span{color:#000}
  .tc-sa,.tc-sb,.tc-ax{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
  .tc-sb .tc-lane{height:54px}
  .tc-lane[style*="--d:1"] b{right:auto;left:calc(var(--x) + 12px);padding:0 4px}
  .tc-out{max-width:6em;line-height:1.2}
}

/* ---------- Deep Dive C.3 Decisions (first build, Lena 28.09.2026). The page behaves like a decision: it begins open, becomes more exact
   and ends committed. Red thread, directionality: lines diverge, narrow, carry weight, stop at or reach authority, cross a threshold,
   converge into one direction and leave toward Delivery. Outline type is contribution, filled type is authority ---------- */
.dc{--bar:74px;--bg:#fff}
.dc .xh{display:block;font-size:14px}
.dc-mi{font-stretch:85%;font-variation-settings:"wdth" 85;text-transform:uppercase;letter-spacing:.07em;font-weight:600;font-size:14.5px;line-height:1.3}
.dc-h{font-size:clamp(30px,3.6vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:400;text-wrap:balance}
.dc-q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,2.6vw,46px);line-height:1.06;letter-spacing:-.012em;max-width:15ch;text-wrap:balance}
.dc-q .dc-mi{display:block;margin-bottom:1.4vh;font-family:var(--sans);-webkit-text-stroke:0;font-style:normal;color:rgba(0,0,0,.85)}
.dc-q.r{justify-self:end;margin-left:auto;text-align:right}
.dc-tx{font-size:clamp(17px,1.32vw,21px);line-height:1.45;letter-spacing:-.01em;color:rgba(0,0,0,.84);max-width:42ch;text-wrap:pretty}
.dc-o,.dc-pt,.dc-mk{position:absolute;border-radius:50%}

/* 1 orient. The business moves in every direction at once; four of the lines are named */
.dc-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:3vw;min-height:max(460px,calc(100svh - 170px));padding-bottom:6vh}
.dc-hl{display:flex;flex-direction:column}
.dc-k{margin-top:clamp(26px,5vh,56px);font-size:clamp(34px,3.9vw,68px);line-height:1;letter-spacing:-.04em;font-weight:500;max-width:11ch;text-wrap:balance}
.dc-or{margin-top:auto;padding-top:5vh;font-size:clamp(18px,1.5vw,24px);line-height:1.3;letter-spacing:-.014em;max-width:22ch;text-wrap:balance}
.dc-fan{position:relative;margin:0;min-height:320px}
.dc-fan svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dc-fan path{fill:none;vector-effect:non-scaling-stroke}
.dc-fan .g{stroke:rgba(0,0,0,.16);stroke-width:1}
.dc-fan .f{stroke:rgba(0,0,0,.4);stroke-width:1.2}
.dc-fan .n{stroke:#000;stroke-width:2.2}
.dc-o{left:3%;top:64%;width:20px;height:20px;background:#000;box-shadow:0 0 0 5px #fff,0 0 0 6.5px #000;transform:translate(-50%,-50%)}
.dc-ol{position:absolute;left:3%;top:calc(64% + 20px);transform:translateX(-50%);color:rgba(0,0,0,.85)}
.dc-fl{position:absolute;left:var(--x);top:var(--y);padding:2px 6px;background:#fff;font-size:clamp(17px,1.35vw,21px);line-height:1.2;letter-spacing:-.012em;font-weight:500;white-space:nowrap;transform:translate(8px,-20%)}
.dc-fl.r{transform:translate(-100%,calc(-100% - 6px));text-align:right}
.dc-fl.b{transform:translate(-40%,14px)}

/* 2 define. A wide issue narrows into one bounded decision; Lena's question stands where the narrowing begins */
.dc-df{padding:12vh 0 11vh}
.dc-cap{color:rgba(0,0,0,.85)}
.dc-iss{margin-top:3vh;font-size:clamp(44px,6.4vw,118px);line-height:.95;letter-spacing:-.045em;font-weight:300;color:#adadad;white-space:nowrap}
.dc-iss .dc-mi{display:block;margin-bottom:1.6vh;color:rgba(0,0,0,.85)}
.dc-fun{display:block;width:100%;height:clamp(56px,11vh,120px);margin-top:2vh;overflow:visible}
.dc-fun path{fill:none;stroke:#000;stroke-width:1.6;vector-effect:non-scaling-stroke}
.dc-dfw{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.dc-dfl{padding:clamp(20px,3vh,36px) 4vw 0 0}
.dc-dfl .dc-tx{margin-top:3.4vh;max-width:36ch}
.dc-box{padding:clamp(22px,3.6vh,42px) clamp(22px,2.2vw,38px);background:#000;color:#fff}
.dc-box>.dc-mi{color:#fff}
.dc-dq{margin:1vh 0 3vh;font-size:clamp(24px,2.3vw,40px);line-height:1.08;letter-spacing:-.025em;font-weight:500;text-wrap:balance}
.dc-box dl{display:grid;row-gap:10px}
.dc-box dl div{display:grid;grid-template-columns:5.6em minmax(0,1fr);align-items:baseline;column-gap:12px;padding-top:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.dc-box dt{color:#fff}
.dc-box dd{font-size:clamp(17px,1.32vw,20px);line-height:1.35}

/* 3 weigh and place. Four decisions stand at the height they have to reach: the heavier the consequence, the higher, the stronger
   the line, the heavier the type. Top: the highest level of authority; bottom: the work */
.dc-wg{padding:12vh 0 11vh}
.dc-wgh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.dc-wg .dc-h{max-width:20ch}
.dc-trk{position:relative;height:clamp(250px,44vh,460px);margin-top:clamp(52px,9vh,100px)}
.dc-trk::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px dashed rgba(0,0,0,.45)}
.dc-trk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:#000;transform:translateY(100%)}
.dc-top{position:absolute;right:0;bottom:calc(100% + 10px);color:rgba(0,0,0,.85)}
.dc-base{position:absolute;left:0;top:calc(100% + 18px);color:rgba(0,0,0,.85)}
.dc-st{position:absolute;left:calc(var(--i) * 25%);bottom:0;width:25%;height:var(--h)}
.dc-st::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:#000}
.dc-st p{padding-left:calc(var(--w) + 16px);padding-right:1.6vw}
.dc-st .c{margin-top:-.2em;color:rgba(0,0,0,.85)}
.dc-st .d{margin-top:.5vh;font-size:clamp(18px,1.65vw,29px);line-height:1.1;letter-spacing:-.022em;font-weight:var(--fw);text-wrap:balance}
.dc-just{margin-top:clamp(56px,9vh,100px);max-width:58ch;text-align:justify;text-align-last:left;hyphens:manual;word-spacing:-.02em}

/* 4 input is not authority (black). Six perspectives on the pricing decision: three reach the line of authority, three are heard;
   one mandate decides behind the line */
.dc-in{--bg:#000;margin:0 calc(var(--m) * -1);padding:12vh var(--m) 12vh;background:#000;color:#fff}
.dc-eq{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.28em;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;text-transform:uppercase;font-size:clamp(46px,6.2vw,118px);line-height:.92;letter-spacing:-.045em}
.dc-eq .o{color:#000;text-shadow:1.5px 0 #fff,-1.5px 0 #fff,0 1.5px #fff,0 -1.5px #fff,1px 1px #fff,-1px -1px #fff,1px -1px #fff,-1px 1px #fff}
.dc-eq .ne{font-stretch:100%;font-variation-settings:"wdth" 100;font-weight:200}
.dc-inw{display:grid;grid-template-columns:1fr 1fr;column-gap:4vw;align-items:end;margin-top:clamp(32px,7vh,80px)}
.dc-inr{margin-top:clamp(24px,5vh,56px);color:#fff}
.dc-in .dc-q{color:#fff}
.dc-flt{display:grid;grid-template-columns:minmax(0,8.4fr) minmax(0,3.6fr);margin-top:clamp(10px,2vh,22px)}
.dc-flt ul{box-shadow:inset -3px 0 0 #fff}
.dc-flt li{position:relative;display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,3.5fr) minmax(0,2.4fr);column-gap:1.4vw;align-items:baseline;padding:clamp(7px,1.25vh,14px) 2vw clamp(7px,1.25vh,14px) 0}
.dc-flt li i{position:absolute;left:0;bottom:0;width:var(--l);height:1px;background:rgba(255,255,255,.4)}
.dc-flt li.m i{height:2px;background:#fff}
.dc-flt .p{font-size:clamp(19px,1.75vw,30px);line-height:1.05;letter-spacing:-.02em;font-weight:500}
.dc-flt .w{font-size:clamp(16.5px,1.28vw,20px);line-height:1.25;color:rgba(255,255,255,.88)}
.dc-flt .t{color:rgba(255,255,255,.78)}
.dc-flt li.m .t{color:#fff}
.dc-flt li:not(.m) .p{color:rgba(255,255,255,.8)}
.dc-auth{display:flex;flex-direction:column;padding-left:clamp(20px,2.6vw,44px)}
.dc-auth .dc-q{margin-bottom:auto;padding-bottom:3vh;font-size:clamp(24px,2.3vw,40px)}
.dc-auth .dc-mi{color:#fff}
.dc-dec{margin-top:1.4vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;text-transform:uppercase;font-size:clamp(34px,3.9vw,72px);line-height:.9;letter-spacing:-.045em}
.dc-man{margin-top:1.2vh;font-size:clamp(17px,1.35vw,21px)}
.dc-in .dc-inx{margin-top:clamp(28px,5vh,56px);color:rgba(255,255,255,.84);max-width:52ch}

/* 5 threshold (white, quiet). One line across the frame: a decision closes below it, one crosses it for a reason, one is sent over it by
   habit and comes back still open */
.dc-th{padding:12vh 0 10vh}
.dc-th .dc-h{max-width:18ch}
.dc-thf{--a:18%;--b:50%;--c:82%;--r:96%;position:relative;height:clamp(290px,50vh,500px);margin-top:clamp(56px,10vh,110px)}
.dc-thf svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dc-thf path{fill:none;vector-effect:non-scaling-stroke;stroke:#000;stroke-width:2}
.dc-thf .x{stroke-width:1.4}
.dc-thf .d{stroke-dasharray:5 6}
.dc-tl{position:absolute;left:0;right:0;top:40%;height:4px;background:#000;transform:translateY(-50%)}
.dc-tl span{position:absolute;left:0;top:12px}
.dc-thq{position:absolute;left:0;bottom:calc(60% + 18px);max-width:12ch}
.dc-mk{left:var(--x);top:var(--y);width:16px;height:16px;background:#000;box-shadow:0 0 0 5px #fff;transform:translate(-50%,-50%)}
.dc-mk.o{background:#fff;box-shadow:inset 0 0 0 2px #000,0 0 0 5px #fff}
.dc-pl{position:absolute;left:var(--x);top:var(--y);display:grid;row-gap:3px;max-width:15em;padding:4px 8px;background:#fff;font-size:clamp(16px,1.2vw,18px);line-height:1.3;color:rgba(0,0,0,.84);transform:translate(16px,-50%)}
.dc-pl b{font-weight:600;font-size:clamp(17.5px,1.4vw,21px);color:#000;letter-spacing:-.01em}
.dc-pl.e{text-align:center;white-space:nowrap;transform:translate(-50%,calc(-100% - 18px))}
.dc-pl.e.lo{text-align:right;transform:translate(calc(-100% + 10px),18px)}
.dc-thm{display:none}

/* 6 close and commit (black). The open lines converge in one point of commitment; one direction continues */
.dc-cl{--bg:#000;margin:0 calc(var(--m) * -1);padding:13vh var(--m) 12vh;background:#000;color:#fff}
.dc-ww{display:flex;justify-content:space-between;align-items:flex-end}
.dc-w{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;text-transform:uppercase;font-size:clamp(40px,5.4vw,100px);line-height:.9;letter-spacing:-.045em}
.dc-w.w0{color:#000;text-shadow:1.5px 0 rgba(255,255,255,.7),-1.5px 0 rgba(255,255,255,.7),0 1.5px rgba(255,255,255,.7),0 -1.5px rgba(255,255,255,.7),1px 1px rgba(255,255,255,.7),-1px -1px rgba(255,255,255,.7),1px -1px rgba(255,255,255,.7),-1px 1px rgba(255,255,255,.7)}
.dc-cs{position:relative;height:clamp(140px,26vh,260px);margin-top:3vh}
.dc-cs svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dc-cs path{fill:none;vector-effect:non-scaling-stroke}
.dc-cs .f{stroke:rgba(255,255,255,.5);stroke-width:1}
.dc-cs .k{stroke:#fff;stroke-width:7}
.dc-pt{left:48%;top:50%;width:24px;height:24px;background:#fff;box-shadow:0 0 0 7px #000,0 0 0 8.5px #fff;transform:translate(-50%,-50%)}
.dc-ptl{position:absolute;left:48%;bottom:calc(50% + 30px);transform:translateX(-50%);white-space:nowrap}
.dc-w.w1{margin-top:3vh;margin-left:48%;transform:translateX(-50%);width:max-content;font-size:clamp(30px,3.4vw,62px)}
.dc-clf{display:grid;grid-template-columns:1fr 1fr;column-gap:4vw;align-items:end;margin-top:clamp(32px,7vh,80px)}
.dc-cl .dc-tx{color:rgba(255,255,255,.84)}
.dc-cl .dc-q{color:#fff}

/* 7 the proof. MaHalla as an operating field: what was mine to decide (filled), what needed specialist knowledge or outside approval
   (outline); the wholesale practice as a quieter second line */
.dc-pr{padding:13vh 0 10vh}
.dc-prh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;align-items:end}
.dc-prh .dc-h{max-width:15ch}
.dc-prh .dc-tx{justify-self:end;max-width:30ch;text-align:right}
.dc-fld{display:grid;grid-template-columns:minmax(0,5.2fr) minmax(0,3.8fr) minmax(0,3fr);margin-top:clamp(32px,7vh,80px)}
.dc-z{padding:2.4vh 2vw 0}
.dc-z.z1{padding-left:0;box-shadow:inset 0 4px 0 #000}
.dc-z.z2{box-shadow:inset 0 2px 0 #000,inset 1px 0 0 rgba(0,0,0,.3)}
.dc-z.z3{box-shadow:inset 0 1px 0 #000,inset 1px 0 0 rgba(0,0,0,.3)}
.dc-z>.dc-mi{color:rgba(0,0,0,.85)}
.dc-zw{display:flex;flex-direction:column;margin-top:2vh;font-size:clamp(24px,2.6vw,48px);line-height:1.02;letter-spacing:-.03em;font-weight:600}
.dc-zw.o{font-weight:500;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000,.7px .7px #000,-.7px -.7px #000,.7px -.7px #000,-.7px .7px #000}
.dc-zs{margin-top:2.4vh;font-size:clamp(16.5px,1.28vw,20px);line-height:1.4;color:rgba(0,0,0,.86);max-width:28ch;text-wrap:pretty}
.dc-prf{display:grid;grid-template-columns:1fr 1fr;column-gap:4vw;align-items:end;margin-top:clamp(40px,8vh,90px)}
.dc-ws{display:grid;row-gap:1vh}
.dc-ws .dc-mi{color:rgba(0,0,0,.85)}
.dc-ws span:last-child{font-size:clamp(17px,1.35vw,21px);line-height:1.4;letter-spacing:-.01em;max-width:34ch}
.dc-pr .dc-q{max-width:19ch}

/* 8 handoff. The committed line leaves the page into Delivery */
.dc-br{padding:12vh 0 11vh}
.dc-bw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;row-gap:0;align-items:end;margin-top:4vh}
.dc-bl{padding-bottom:4vh}
.dc-go{grid-column:1/-1;display:block;height:6px;background:#000}
.dc-brk{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,3.2vw,56px);line-height:1.05;letter-spacing:-.012em;max-width:17ch;text-wrap:balance}
.dc-dx{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(18px,2vw,32px);row-gap:12px;align-items:baseline;width:100%;padding:clamp(24px,4vh,44px) clamp(18px,1.8vw,30px);background:#000;color:#fff;text-align:left;cursor:pointer}
.dc-dx .ad{justify-self:start;grid-row:1/3;font-size:14px;letter-spacing:.06em;opacity:.85;white-space:nowrap}
.dc-dx .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;text-transform:uppercase;font-size:clamp(28px,3vw,52px);letter-spacing:-.03em;line-height:1;justify-self:start;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:6px;transition:background-size .45s var(--ease)}
.dc-dx .q{grid-column:2;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,28px);line-height:1.1;padding-right:24px;text-wrap:balance}
.dc-dx .plus{position:absolute;right:clamp(16px,1.6vw,26px);top:clamp(14px,1.5vw,24px);font-size:28px;font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.dc-dx:hover .n,.dc-dx:focus-visible .n{background-size:100% 2px}
.dc-dx:hover .plus,.dc-dx:focus-visible .plus{transform:rotate(90deg)}
.dc-dx:focus-visible{outline:1px solid #000;outline-offset:5px}

/* Boska legibility (Lena, 28.09.2026): on black pure white, a touch stronger, a little more air */
.dc-in .dc-q,.dc-cl .dc-q,.dc-dx .q{color:#fff;-webkit-text-stroke:.014em currentColor;letter-spacing:.014em}

.rm .dc *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.dc *{transition:none!important;animation:none!important}}

/* a short laptop window: less air between the parts, the same type sizes */
@media (max-height:620px) and (min-width:761px){
  .dc-df,.dc-th,.dc-pr{padding-top:9vh}
  .dc-wg,.dc-in,.dc-cl{padding-top:9vh}
  .dc-th .dc-h{max-width:none}
  .dc-thf{height:280px;margin-top:52px}
}
@media (max-width:1100px) and (min-width:761px){
  .dc-fld{grid-template-columns:minmax(0,4.6fr) minmax(0,3.8fr) minmax(0,3.2fr)}
  .dc-fl:not(.r):not(.b){left:auto;right:0;transform:translateY(-10%)}
}

/* on a phone: the same argument recomposed. Directions run downward, the issue narrows into the box, rows stack with their line beneath,
   the line of authority turns horizontal, the threshold keeps its three paths, the commitment reads top to bottom */
@media (max-width:760px){
  .dc{--bar:62px}
  .dc :is(.dc-q,.dc-brk,.dc-dx .q){letter-spacing:.018em;-webkit-text-stroke:.018em currentColor}
  .dc :is(.dc-mi){font-size:13.5px;font-stretch:95%;font-variation-settings:"wdth" 95;letter-spacing:.06em}
  .dc :is(.dc-cap,.dc-iss .dc-mi,.dc-q .dc-mi,.dc-z>.dc-mi,.dc-ws .dc-mi,.dc-ol){color:rgba(0,0,0,.86)}
  .dc :is(.dc-inr,.dc-auth .dc-mi,.dc-flt .t,.dc-ptl){color:#fff}
  .dc-hero{grid-template-columns:1fr;min-height:0;padding-bottom:6vh}
  .dc-hero .dkick .t{font-size:clamp(44px,13vw,60px)}
  .dc-k{margin-top:2.6vh;font-size:clamp(30px,9vw,40px)}
  .dc-or{margin-top:0;padding-top:2.6vh;font-size:18px}
  .dc-fan{height:340px;margin-top:4vh}
  .dc-fl{font-size:15.5px;padding:1px 4px}
  .dc-fl:not(.r):not(.b){left:auto;right:0;transform:translateY(-10%)}
  .dc-ol{transform:none;left:0}
  .dc-fl.b{transform:translate(-15%,14px)}
  .dc-q{font-size:clamp(24px,7vw,30px)}
  .dc-tx{font-size:16.5px}
  .dc-h{font-size:clamp(28px,8vw,36px)}
  .dc-df{padding:10vh 0 9vh}
  .dc-iss{white-space:normal;font-size:clamp(40px,12vw,52px)}
  .dc-fun{height:64px}
  .dc-fun path{d:path("M0 0L0 100M100 0L100 100")}
  .dc-dfw{grid-template-columns:1fr}
  .dc-dfl{grid-row:2;padding:5vh 0 0}
  .dc-box{grid-row:1}
  .dc-box dl div{grid-template-columns:5.4em minmax(0,1fr)}
  .dc-wg,.dc-in,.dc-cl{padding:10vh var(--m) 9vh}
  .dc-trk{display:flex;flex-direction:column-reverse;height:auto;margin-top:6vh;padding:14px 0}
  .dc-top,.dc-base{position:static}
  .dc-top{order:10;margin-bottom:10px;text-align:right}
  .dc-base{order:-1;margin-top:14px}
  .dc-st{position:relative;left:auto;width:auto;height:118px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 12px 60px}
  .dc-st::before{left:10px;top:auto;height:var(--h);width:calc(var(--w) * .8)}
  .dc-st p{padding:0}
  .dc-st .d{font-size:clamp(19px,5.6vw,23px)}
  .dc-just{margin-top:6vh}
  .dc-bl{padding-bottom:4vh}
  .dc-go{margin:0 calc(var(--m) * -1)}
  .dc-eq{font-size:clamp(34px,10.4vw,46px);row-gap:.1em}
  .dc-flt{grid-template-columns:1fr;margin-top:3vh}
  .dc-flt ul{box-shadow:none;padding-right:18px;box-shadow:inset -3px 0 0 #fff}
  .dc-flt li{grid-template-columns:1fr;row-gap:3px;padding:12px 18px 12px 0}
  .dc-flt .p{font-size:21px}
  .dc-flt .w{font-size:16.5px}
  .dc-flt li:not(.m) .p{color:rgba(255,255,255,.8)}
  .dc-auth{padding:18px 0 0;box-shadow:inset 0 3px 0 #fff;margin-top:0}
  .dc-auth .dc-q{order:3;margin:4vh 0 0 auto;padding:0;text-align:right}
  .dc-wgh{grid-template-columns:1fr;row-gap:3vh}
  .dc-dec{font-size:clamp(40px,12vw,54px)}
  .dc-th{padding:10vh 0 8vh}
  .dc-thf{height:auto;margin-top:4vh}
  .dc-thf>:not(.dc-thq){display:none}
  .dc-thq{position:static;max-width:15ch}
  .dc-thm{display:grid;row-gap:38px;margin-top:3vh}
  .dc-thm li{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;height:170px}
  .dc-thm li::before{content:"";position:absolute;left:0;right:0;top:40%;height:3px;background:#000;transform:translateY(-50%)}
  .dc-thm li:first-child::after{content:"Threshold";position:absolute;right:0;top:calc(40% - 28px);font-stretch:95%;font-variation-settings:"wdth" 95;text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:13.5px}
  .dc-thm svg{grid-column:1;width:100%;height:100%;overflow:visible}
  .dc-thm path{fill:none;stroke:#000;stroke-width:2;vector-effect:non-scaling-stroke}
  .dc-thm .x{stroke-width:1.4}.dc-thm .d{stroke-dasharray:5 6}
  .dc-thm .dc-mk{left:var(--x);top:var(--y)}
  .dc-thm p{grid-column:2;align-self:end;padding-bottom:10px;display:grid;row-gap:3px;font-size:16px;line-height:1.35;color:rgba(0,0,0,.8)}
  .dc-thm b{font-size:16.5px;font-weight:600;color:#000}
  .dc-ww{flex-direction:column;align-items:flex-start;row-gap:.2em}
  .dc-w{font-size:clamp(34px,11vw,48px)}
  .dc-w.w2{align-self:flex-end}
  .dc-cs{height:150px}
  .dc-ptl{white-space:normal;text-align:center;width:9em}
  .dc-w.w1{font-size:clamp(28px,9vw,40px)}
  .dc-clf{grid-template-columns:1fr;row-gap:5vh;margin-top:5vh}
  .dc-pr{padding:10vh 0 8vh}
  .dc-prh{grid-template-columns:1fr;row-gap:3vh}
  .dc-prh .dc-tx{justify-self:start}
  .dc-fld{grid-template-columns:1fr;row-gap:4vh}
  .dc-z,.dc-z.z1{padding:2vh 0 0}
  .dc-z.z2{box-shadow:inset 0 2px 0 #000}
  .dc-z.z3{box-shadow:inset 0 1px 0 #000}
  .dc-zw{flex-direction:row;flex-wrap:wrap;column-gap:.4em;font-size:clamp(24px,7.4vw,32px)}
  .dc-zs{font-size:16px}
  .dc-prf{grid-template-columns:1fr;row-gap:5vh}
  .dc-br{padding:10vh 0 7vh}
  .dc-bw{grid-template-columns:1fr;row-gap:0}
  .dc-brk{font-size:clamp(28px,8vw,34px)}
  .dc-dx{grid-template-columns:1fr;padding:24px 18px 26px}
  .dc-dx .ad{grid-row:auto}
  .dc-dx .q{grid-column:1;font-size:21px}
  .dc-dx .plus{top:18px;right:16px}
}

/* ---------- Deep Dive C + D Delivery (Lena 28.09.2026, refinement pass). Follow the commitment. The subject is the commitment and its integrity
   through reality; the scenario (a commitment due 01 Nov) only carries it; Lena's judgement speaks in every frame. Type is the material:
   vague is blurred and light, committed is wide and heavy, assumed is hollow, lost falls out, eroding fades, inserted is inverted.
   Light = promise and resolution, black = operating density ---------- */
.dl{--bar:74px;--bg:#fff}
.dl .xh{display:block;font-size:14px}
.dl-mi{font-stretch:85%;font-variation-settings:"wdth" 85;text-transform:uppercase;letter-spacing:.07em;font-weight:600;font-size:14.5px;line-height:1.3;color:rgba(0,0,0,.85)}
.dl-h{font-size:clamp(30px,3.6vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:400;text-wrap:balance}
.dl-q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,2.6vw,46px);line-height:1.06;letter-spacing:-.012em;max-width:16ch;text-wrap:balance}
.dl-q.r{justify-self:end;margin-left:auto;text-align:right}
.dl-me{font-size:clamp(19px,1.6vw,27px);line-height:1.25;letter-spacing:-.02em;font-weight:500;max-width:32ch;text-wrap:pretty}
.dl-ev{display:grid;row-gap:.8vh;font-size:clamp(16.5px,1.25vw,20px);line-height:1.4;letter-spacing:-.01em;max-width:44ch;text-wrap:pretty}
.dl-wd{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:700;letter-spacing:-.04em;line-height:.95}

/* 1 orient. Three different promises travel toward one line: where they have to arrive */
.dl-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:3vw;min-height:max(460px,calc(100svh - 170px));padding-bottom:6vh}
.dl-hl{display:flex;flex-direction:column}
.dl-k{margin-top:clamp(26px,5vh,56px);font-size:clamp(34px,3.9vw,68px);line-height:1;letter-spacing:-.04em;font-weight:500;max-width:11ch;text-wrap:balance}
.dl-or{margin-top:auto;padding-top:5vh;font-size:clamp(18px,1.5vw,24px);line-height:1.3;letter-spacing:-.014em;max-width:30ch;text-wrap:balance}
.dl-arr{--rc:clamp(128px,12vw,200px);position:relative;display:flex;flex-direction:column;justify-content:center;margin:0}
.dl-aq{align-self:flex-end;text-align:right;max-width:13ch;margin-bottom:clamp(20px,4vh,44px)}
.dl-el{align-self:flex-end;width:var(--rc);padding-left:4px;margin-bottom:12px}
.dl-rows{position:relative;display:grid;row-gap:clamp(22px,4.6vh,52px);padding:6px 0 16px}
.dl-rows::after{content:"";position:absolute;right:calc(var(--rc) + 18px);top:-44px;bottom:0;width:6px;background:#000}
.dl-row{display:grid;grid-template-columns:var(--o) auto minmax(36px,1fr) 42px var(--rc);align-items:end}
.dl-pr{grid-column:2;display:grid;row-gap:4px;padding-left:14px;box-shadow:inset 4px 0 0 #000}
.dl-pr b{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:700;font-size:clamp(18px,1.55vw,28px);line-height:1;letter-spacing:-.03em;white-space:nowrap}
.dl-pr span{font-size:clamp(16px,1.2vw,19px);line-height:1.2;color:rgba(0,0,0,.84);white-space:nowrap}
.dl-gap{grid-column:3;align-self:end;height:0;margin:0 0 .5em 14px;border-top:2px dotted #000}
.dl-to{grid-column:5;font-size:clamp(17px,1.35vw,21px);line-height:1.2;letter-spacing:-.012em;font-weight:500}

/* 2 define. The vague sentence is out of focus; it sharpens into the committed line */
.dl-df{padding:12vh 0 11vh}
.dl-df .dl-h{max-width:20ch}
.dl-cap{margin-bottom:1.6vh}
.dl-dfm{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(40px,1.4fr) minmax(0,6.4fr);align-items:center;row-gap:clamp(10px,2vh,22px);margin-top:clamp(24px,4.6vh,52px)}
.dl-dq{grid-column:3;margin-bottom:clamp(4px,1vh,12px);font-size:clamp(22px,2.1vw,36px);max-width:none}
.dl-dfm .v{grid-column:1;font-stretch:75%;font-variation-settings:"wdth" 75;font-size:clamp(21px,2.1vw,38px);line-height:1.05;letter-spacing:.01em;font-weight:300;color:#555;text-align:right}
.dl-dfm>i{grid-column:2;height:2px;margin:0 16px;background:linear-gradient(90deg,rgba(0,0,0,.12),#000)}
.dl-dfm .c{grid-column:3;font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:700;font-size:clamp(24px,2.7vw,50px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.dl-df .dl-me{margin-top:clamp(26px,5vh,56px)}

/* 3 ready. Five conditions hold the date; one of them is hollow: assumed, not checked */
.dl-rd{padding:12vh 0 11vh}
.dl-qh{max-width:20ch;font-size:clamp(32px,3.6vw,62px)}
.dl-due{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:4vw;align-items:end;margin-top:clamp(26px,5vh,60px)}
.dl-due li{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:700;font-size:clamp(28px,3.4vw,62px);line-height:1.02;letter-spacing:-.04em}
.dl-due li.a{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:18px}
.dl-due li.a span{color:transparent;-webkit-text-stroke:1.6px #000}
.dl-due li.a em{font-style:normal;color:#000;font-weight:700}
.dl-date{display:grid;justify-items:end;row-gap:1.6vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;text-transform:uppercase;font-size:clamp(60px,8vw,154px);line-height:.85;letter-spacing:-.05em;white-space:nowrap}
.dl-date .dl-mi{letter-spacing:.07em;line-height:1.3}
.dl-rd .dl-me{margin-top:clamp(26px,5vh,56px)}

/* 4 handoff (black). One commitment changes hands four times; at the first handover its reason falls out and stays behind,
   the work arrives without it */
.dl-ho{--bg:#000;margin:0 calc(var(--m) * -1);padding:12vh var(--m) 10vh;background:#000;color:#fff}
.dl-ho .dl-h{max-width:26ch}
.dl-ho .dl-mi{color:#fff}
.dl-hof{position:relative;margin-top:clamp(28px,5.6vh,64px)}
.dl-hof ol{position:relative;display:grid;grid-template-columns:1.25fr repeat(3,minmax(0,.7fr)) 1.25fr;column-gap:clamp(12px,1.6vw,28px);align-items:start}
.dl-hof ol::before{content:"";position:absolute;left:0;right:0;top:calc(1.3em + 14px + 40px);height:2px;background:rgba(255,255,255,.55)}
.dl-hof li{position:relative;display:grid;row-gap:14px}
.dl-hof li .dl-mi{font-size:14.5px}
.dl-obj{position:relative;display:grid;padding:10px 14px 12px;background:#fff;color:#000}
.dl-obj span{font-size:clamp(16px,1.25vw,20px);line-height:1.35;font-weight:600;letter-spacing:-.01em}
.dl-obj span:first-child{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:700;font-size:clamp(20px,1.8vw,30px);letter-spacing:-.03em;line-height:1.1}
.dl-obj .x{font-weight:400;color:#000;text-decoration:underline dotted 2px;text-underline-offset:4px}
.dl-hof .h4 .dl-obj{box-shadow:-10px 0 0 #000,-16px 0 0 #fff}
.dl-gh{position:relative;display:grid;row-gap:7px;padding:14px 12px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);background:#000}
.dl-gh i{height:6px;background:#fff}
.dl-gh i:nth-child(2){width:70%}.dl-gh i:nth-child(3){width:86%}
.dl-gh i.o{width:60%;height:4px;background:none;border:1.5px dashed #fff}
.dl-hof .h2 .dl-gh,.dl-hof .h3 .dl-gh{padding-bottom:27px}
.dl-drop{justify-self:start;padding:6px 12px;border:1.5px dashed #fff;font-size:clamp(17px,1.4vw,23px);font-weight:600;letter-spacing:-.01em;transform:rotate(-7deg);transform-origin:left top;white-space:nowrap}
.dl-hox{display:grid;grid-template-columns:calc(25% + clamp(150px,14vw,240px)) minmax(0,1fr);column-gap:clamp(16px,2.4vw,44px);row-gap:clamp(12px,2.4vh,26px);align-items:start;margin-top:clamp(12px,2.2vh,24px)}
.dl-hox .dl-drop{grid-row:1/3;margin-left:64%;justify-self:start}
.dl-hox .dl-q{grid-column:2;margin-top:clamp(10px,2vh,22px);max-width:28ch;font-size:clamp(24px,2.3vw,40px)}
.dl-hox .dl-ev{grid-column:2;max-width:40ch;font-size:16.5px;color:rgba(255,255,255,.9)}
.dl-ho .dl-me{color:#fff}

/* 5 exception (black, continued). The date shift is the whole frame; how early it is seen decides what is still possible */
.dl-ex{--bg:#000;margin:0 calc(var(--m) * -1);padding:9vh var(--m) 12vh;background:#000;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.dl-ex .dl-h{max-width:20ch;font-size:clamp(26px,2.6vw,44px)}
.dl-ex .dl-mi{color:#fff}
.dl-brk{display:grid;row-gap:clamp(12px,2.6vh,30px);margin-top:clamp(22px,4.4vh,50px)}
.dl-brk p{display:grid;grid-template-columns:auto auto 1fr;column-gap:.5em;align-items:baseline}
.dl-brk .dl-mi{grid-column:1/-1;margin-bottom:4px}
.dl-brk s,.dl-brk b{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-size:clamp(46px,6.6vw,128px);line-height:.9;letter-spacing:-.05em;white-space:nowrap}
.dl-brk s{margin-right:.25em;font-weight:200;color:rgba(255,255,255,.7);text-decoration-thickness:.06em}
.dl-brk b{font-weight:700}
.dl-ex{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3vw}
.dl-ex>*{grid-column:1}
.dl-exf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3vw;align-items:end;max-width:44em;margin-top:clamp(26px,5vh,60px)}
.dl-ex>.dl-exq{grid-column:2;grid-row:2;align-self:end;max-width:12ch}
.dl-seen{font-size:clamp(17px,1.4vw,22px);line-height:1.3;letter-spacing:-.012em;color:#fff;max-width:22ch}
.dl-seen b{display:block;font-weight:700}
.dl-seen.late{font-weight:300}
.dl-ex .dl-q{text-align:right;color:#fff;font-size:clamp(24px,2.3vw,40px)}

/* 6 adapt. The same date, twice: rewritten in the open and kept honest, or left alone and eroding */
.dl-ad{padding:12vh 0 11vh}
.dl-ad .dl-h{max-width:22ch}
.dl-adm{display:grid;grid-template-columns:minmax(0,6.6fr) minmax(0,5.4fr);column-gap:5vw;align-items:start;margin-top:clamp(26px,5vh,58px)}
.dl-op{display:grid;row-gap:clamp(8px,1.8vh,18px)}
.dl-cg{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4em}
.dl-cg s{font-stretch:75%;font-variation-settings:"wdth" 75;font-size:clamp(20px,1.9vw,32px);font-weight:300;color:#646464;text-decoration-thickness:1.5px}
.dl-cg b{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:700;font-size:clamp(34px,4.4vw,82px);line-height:.95;letter-spacing:-.045em;white-space:nowrap}
.dl-kp{display:flex;flex-wrap:wrap;column-gap:14px;align-items:baseline;margin-top:1vh;font-size:clamp(17px,1.35vw,21px)}
.dl-qt{display:grid;row-gap:clamp(8px,1.6vh,16px)}
.dl-er{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:700;font-size:clamp(34px,4.4vw,82px);line-height:.95;letter-spacing:.14em;color:#000;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.08) 92%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.08) 92%)}
.dl-qt ul{display:grid;row-gap:4px;margin-top:1vh}
.dl-qt li{font-size:clamp(17px,1.35vw,21px);line-height:1.3;letter-spacing:-.012em}
.dl-adq{margin-top:clamp(30px,6vh,68px);max-width:26ch;font-size:clamp(24px,2.3vw,40px)}

/* 7 what can move. Three promises, three behaviours: the bar splits, the bar steps, the bar is pinned to one time */
.dl-fx{padding:12vh 0 11vh}
.dl-fx .dl-h{max-width:22ch}
.dl-mv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4.4vw,80px);margin-top:clamp(28px,5.6vh,64px)}
.dl-mv .c{display:grid;grid-template-rows:auto auto clamp(70px,11vh,110px) auto;row-gap:10px}
.dl-mv .w{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:700;font-size:clamp(36px,4.4vw,82px);line-height:.95;letter-spacing:-.045em}
.dl-mv .g{position:relative;align-self:center;height:100%}
.dl-mv .g i{position:absolute;height:26px;background:#000}
.dl-mv .sp i:nth-child(1){left:0;width:58%;top:calc(50% - 13px)}
.dl-mv .sp i:nth-child(2){left:70%;width:30%;top:calc(50% - 13px)}
.dl-mv .sp::after{content:"";position:absolute;left:64%;top:8%;bottom:8%;border-left:2px dashed #000}
.dl-mv .ph i:nth-child(1){left:0;width:52%;top:14%}
.dl-mv .ph i:nth-child(2){left:52%;width:48%;bottom:14%}
.dl-mv .fx i{right:14px;height:10px}
.dl-mv .fx i:nth-child(1){left:14%;top:34%}.dl-mv .fx i:nth-child(2){left:0;top:56%}.dl-mv .fx i:nth-child(3){left:30%;top:78%}
.dl-mv .fx::after{content:"";position:absolute;right:0;top:0;bottom:0;width:8px;background:#000}
.dl-mv .fx b{position:absolute;right:18px;top:0;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;font-size:clamp(17px,1.4vw,22px)}
.dl-mv .t{font-size:clamp(16.5px,1.3vw,20px);line-height:1.3;color:rgba(0,0,0,.84);max-width:24ch}
.dl-fx .dl-me{margin-top:clamp(30px,6vh,68px)}

/* 8 done is not delivered (black). One binary, read in two seconds */
.dl-dn{--bg:#000;margin:0 calc(var(--m) * -1);padding:13vh var(--m) 12vh;background:#000;color:#fff}
.dl-bin{display:grid;grid-template-columns:1fr 1fr}
.dl-bin .hd{padding-bottom:2.4vh;color:#fff}
.dl-bin .hd.a{text-align:right;padding-right:clamp(18px,2.4vw,44px)}
.dl-bin .hd.b{padding-left:clamp(18px,2.4vw,44px)}
.dl-bin .l,.dl-bin .r{padding:clamp(6px,1.3vh,14px) 0;font-size:clamp(28px,3.4vw,62px);line-height:1;letter-spacing:-.035em}
.dl-bin .l{padding-right:clamp(18px,2.4vw,44px);text-align:right;font-weight:600;box-shadow:inset -5px 0 0 #fff}
.dl-bin .r{padding-left:clamp(18px,2.4vw,44px);font-weight:300}
.dl-bin i{font-style:normal;font-weight:700;margin-left:.2em}
.dl-bin .k{margin-top:clamp(10px,2vh,22px);padding-top:clamp(14px,2.6vh,28px);font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-size:clamp(22px,2.5vw,46px);letter-spacing:-.03em}
.dl-bin .l.k{box-shadow:inset -5px 0 0 #fff,inset 0 3px 0 #fff;font-weight:700}
.dl-bin .r.k{box-shadow:inset 0 3px 0 #fff;font-weight:400}
.dl-dnq{margin-top:clamp(28px,6vh,64px);max-width:16ch}
.dl-dn .dl-q{color:#fff}

/* 9 arrival. Done stays on the inside of the arrival line; what lands is checked part by part on the other side */
.dl-ar{padding:12vh 0 11vh}
.dl-arq{max-width:none;font-size:clamp(40px,5vw,92px);line-height:1}
.dl-land{display:grid;grid-template-columns:minmax(0,4fr) 6px minmax(0,8fr);column-gap:clamp(20px,2.6vw,48px);align-items:center;margin-top:clamp(26px,5vh,58px)}
.dl-land::before{content:"";grid-column:2;grid-row:1;align-self:stretch;background:#000}
.dl-dn2{grid-column:1;grid-row:1;display:grid;justify-items:end;row-gap:10px;font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:300;font-size:clamp(44px,5.8vw,108px);line-height:.9;letter-spacing:-.05em;color:#8a8a8a}
.dl-dn2 .dl-mi{letter-spacing:.07em;line-height:1.3}
.dl-land ul{grid-column:3;grid-row:1;display:grid;row-gap:clamp(6px,1.4vh,14px)}
.dl-land li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px}
.dl-land li b{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:700;font-size:clamp(24px,2.7vw,50px);line-height:1;letter-spacing:-.04em}
.dl-land li i{font-style:normal;font-weight:700;font-size:clamp(24px,2.7vw,50px);line-height:1}
.dl-land li span{flex-basis:100%;font-size:clamp(16.5px,1.3vw,20px);color:rgba(0,0,0,.84)}
.dl-land li.h b{font-weight:400}
.dl-aus{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:3vw;row-gap:8px;align-items:baseline;margin-top:clamp(34px,7vh,80px)}
.dl-aus .w{display:flex;flex-wrap:wrap;column-gap:1.1em;row-gap:4px;font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:700;font-size:clamp(18px,1.6vw,28px);letter-spacing:-.03em}
.dl-aus .t{grid-column:2;font-size:clamp(16.5px,1.25vw,20px);line-height:1.4;color:rgba(0,0,0,.84);max-width:52ch}

/* 10 evidence. The next commitment is the first one rewritten: new lines are inserted, the assumed one is struck */
.dl-ev2{padding:12vh 0 10vh}
.dl-ev2 .dl-h{max-width:18ch}
.dl-nx{display:grid;row-gap:clamp(12px,2.4vh,26px);margin-top:clamp(26px,5vh,58px)}
.dl-nx .hd{padding-bottom:2px}
.dl-nx .ln{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);column-gap:clamp(16px,2vw,36px);align-items:baseline}
.dl-nx .ln>span{grid-row:1/3;color:#000}
.dl-nx .ln s{justify-self:start;font-size:clamp(16.5px,1.3vw,20px);line-height:1.25;color:#646464;text-decoration-thickness:1.5px}
.dl-nx .ln b{justify-self:start;margin-top:4px;font-size:clamp(20px,1.9vw,32px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.dl-nx .n{padding:4px 12px 6px;background:#000;color:#fff;font-weight:600}
.dl-nx .k{font-weight:500}
.dl-evf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4vw;align-items:end;margin-top:clamp(34px,7vh,80px)}

/* 11 the next system question. The whole field is the way into Commercial Architecture */
.dl-br{padding:12vh 0 0}
.dl-brk2{margin-top:3vh;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,4vw,72px);line-height:1.04;letter-spacing:-.012em;max-width:18ch;text-wrap:balance}
.dl-dx{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(18px,2.4vw,44px);row-gap:clamp(14px,2.4vh,26px);align-items:baseline;width:calc(100% + var(--m) * 2);margin:clamp(34px,7vh,80px) calc(var(--m) * -1) 0;padding:clamp(40px,8vh,96px) var(--m) clamp(44px,9vh,104px);background:#000;color:#fff;text-align:left;cursor:pointer}
.dl-dx .ad{grid-row:1/3;justify-self:start;font-size:14px;letter-spacing:.06em;opacity:.85;white-space:nowrap}
.dl-dx .n{justify-self:start;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;text-transform:uppercase;font-size:clamp(34px,5vw,96px);letter-spacing:-.045em;line-height:.95;padding-bottom:8px;background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size .45s var(--ease)}
.dl-dx .q{grid-column:2;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,38px);line-height:1.1;max-width:30ch;text-wrap:balance}
.dl-dx .plus{position:absolute;right:var(--m);top:clamp(32px,6vh,72px);font-size:clamp(30px,2.6vw,46px);font-weight:300;line-height:1;transition:transform .45s var(--ease)}
.dl-dx:hover .n,.dl-dx:focus-visible .n{background-size:100% 3px}
.dl-dx:hover .plus,.dl-dx:focus-visible .plus{transform:rotate(90deg)}
.dl-dx:focus-visible{outline:2px solid #fff;outline-offset:-10px}

/* Boska legibility (Lena, 28.09.2026): on black pure white, a touch stronger, a little more air */
.dl-ho .dl-q,.dl-ex .dl-q,.dl-dn .dl-q,.dl-dx .q{color:#fff;-webkit-text-stroke:.014em currentColor;letter-spacing:.014em}

.rm .dl *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.dl *{transition:none!important;animation:none!important}}

/* a short laptop window: less air between the parts, the same type sizes */
@media (max-height:620px) and (min-width:761px){
  .dl-df,.dl-rd,.dl-ad,.dl-fx,.dl-ar,.dl-ev2,.dl-br{padding-top:9vh}
  .dl-ho,.dl-dn{padding-top:9vh}
  .dl-ex{padding-top:7vh}
  .dl-hero{min-height:420px;padding-bottom:3vh}
  .dl-aq{margin-bottom:10px}
  .dl-el{margin-bottom:6px}
  .dl-rows{row-gap:16px}
  .dl-or{padding-top:3vh}
}
@media (max-width:1100px) and (min-width:761px){
  .dl-row{grid-template-columns:calc(var(--o) * .4) auto minmax(24px,1fr) 34px var(--rc)}
  .dl-pr span{white-space:normal}
}

@media (max-width:900px) and (min-width:761px){
  .dl-hox{grid-template-columns:1fr}
  .dl-hox .dl-drop{grid-row:auto;margin:0 0 8px 27%}
  .dl-hox .dl-q,.dl-hox .dl-ev{grid-column:1}
}

/* on a phone: the same story, recomposed top to bottom. The handoff runs down a line of hands, the three behaviours stack,
   done sits above the arrival line, the rewritten commitment reads line by line */
@media (max-width:760px){
  .dl{--bar:62px}
  .dl :is(.dl-q,.dl-brk2,.dl-dx .q){letter-spacing:.018em;-webkit-text-stroke:.018em currentColor}
  .dl :is(.dl-mi){font-size:13.5px;font-stretch:95%;font-variation-settings:"wdth" 95;letter-spacing:.06em}
  .dl-q{font-size:clamp(24px,7vw,30px)}
  .dl-me{font-size:19px}
  .dl-ev{font-size:16.5px}
  .dl-h{font-size:clamp(28px,8vw,36px)}
  .dl-hero{grid-template-columns:1fr;min-height:0;padding-bottom:6vh}
  .dl-hero .dkick .t{font-size:clamp(44px,13vw,60px)}
  .dl-k{margin-top:2.6vh;font-size:clamp(30px,9vw,40px)}
  .dl-or{margin-top:0;padding-top:2.6vh;font-size:18px}
  .dl-arr{--rc:92px;margin-top:5vh}
  .dl-aq{margin-bottom:3vh}
  .dl-rows::after{right:calc(var(--rc) + 9px);width:5px;top:-40px}
  .dl-row{grid-template-columns:0 auto minmax(10px,1fr) 24px var(--rc)}
  .dl-pr{padding-left:10px;box-shadow:inset 3px 0 0 #000}
  .dl-pr b{font-size:17px;white-space:normal}
  .dl-pr span{font-size:15.5px;white-space:normal;max-width:10em}
  .dl-to{font-size:16px}
  .dl-df,.dl-rd,.dl-ad,.dl-fx,.dl-ar,.dl-ev2{padding:10vh 0 9vh}
  .dl-dfm{grid-template-columns:1fr;row-gap:0}
  .dl-dq{grid-column:1;margin-bottom:3vh}
  .dl-dfm .v{grid-column:1;text-align:left;font-size:19px;margin-top:18px}
  .dl-dfm>i{grid-column:1;width:44px;height:2px;margin:8px 0}
  .dl-dfm .c{grid-column:1;font-size:clamp(24px,7vw,30px)}
  .dl-due{grid-template-columns:1fr;row-gap:4vh}
  .dl-date{order:-1;justify-items:start;font-size:clamp(60px,19vw,86px)}
  .dl-due li{font-size:clamp(28px,8.4vw,36px)}
  .dl-due li.a em{flex-basis:100%;margin:2px 0 6px}
  .dl-ho,.dl-dn{padding:10vh var(--m) 9vh}
  .dl-ex{padding:7vh var(--m) 9vh}
  .dl-hof ol{grid-template-columns:1fr;row-gap:14px;padding-left:22px}
  .dl-hof ol::before{left:4px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .dl-hof li{grid-template-columns:96px minmax(0,1fr);column-gap:12px;align-items:start}
  .dl-hof li::before{content:"";position:absolute;left:-23px;top:6px;width:12px;height:2px;background:#fff}
  .dl-gh{padding:10px;row-gap:6px}
  .dl-hof .h2 .dl-gh,.dl-hof .h3 .dl-gh{padding-bottom:22px}
  .dl-hof .h4 .dl-obj{box-shadow:none}
  .dl-hox{grid-template-columns:1fr;row-gap:3vh}
  .dl-hox .dl-drop{grid-row:auto;margin-left:130px}
  .dl-hox .dl-q,.dl-hox .dl-ev{grid-column:1;margin-top:0}
  .dl-brk s,.dl-brk b{font-size:clamp(40px,12.4vw,58px)}
  .dl-brk p{grid-template-columns:1fr}
  .dl-exf{grid-template-columns:1fr;row-gap:3vh}
  .dl-ex .dl-q{justify-self:start;text-align:left}
  .dl-adm{grid-template-columns:1fr;row-gap:6vh}
  .dl-cg b,.dl-er{font-size:clamp(34px,10.4vw,46px)}
  .dl-mv{grid-template-columns:1fr;row-gap:6vh}
  .dl-mv .c{grid-template-rows:auto auto 80px auto}
  .dl-mv .w{font-size:clamp(36px,11vw,48px)}
  .dl-bin .l,.dl-bin .r{font-size:clamp(21px,6.2vw,27px);line-height:1.05}
  .dl-bin .l{padding-right:12px;box-shadow:inset -4px 0 0 #fff}
  .dl-bin .r{padding-left:12px}
  .dl-bin .hd.a{padding-right:12px}.dl-bin .hd.b{padding-left:12px}
  .dl-bin .k{font-size:clamp(16px,4.6vw,20px)}
  .dl-bin .l.k{box-shadow:inset -4px 0 0 #fff,inset 0 3px 0 #fff}
  .dl-arq{font-size:clamp(38px,11vw,50px)}
  .dl-land{grid-template-columns:1fr;row-gap:22px}
  .dl-land::before{grid-column:1;grid-row:2;height:6px}
  .dl-dn2{grid-row:1;justify-items:start;font-size:clamp(44px,13vw,60px)}
  .dl-land ul{grid-column:1;grid-row:3}
  .dl-land li b,.dl-land li i{font-size:clamp(24px,7.2vw,30px)}
  .dl-aus{grid-template-columns:1fr}
  .dl-aus .t{grid-column:1}
  .dl-nx .ln{grid-template-columns:1fr;row-gap:4px}
  .dl-nx .ln>span{grid-row:auto}
  .dl-nx .ln b{font-size:19px}
  .dl-exf{max-width:none}
  .dl-ex{grid-template-columns:1fr}
  .dl-ex>.dl-exq{grid-column:1;grid-row:auto;margin-top:4vh;text-align:left!important;max-width:none}
  .dl-evf{grid-template-columns:1fr;row-gap:4vh}
  .dl-br{padding:10vh 0 0}
  .dl-brk2{font-size:clamp(30px,8.6vw,38px)}
  .dl-dx{grid-template-columns:1fr;padding:34px var(--m) 40px}
  .dl-dx .ad{grid-row:auto}
  .dl-dx .n{font-size:clamp(30px,9vw,40px)}
  .dl-dx .q{grid-column:1;font-size:22px}
  .dl-dx .plus{top:30px}
}

/* ---------- Deep Dive D Commercial Architecture (second refinement after Lena's frame by frame review, 29.09.2026). One drawing carries
   the page: an offer (a solid block) and the decisions around it (plates), in isometric projection. Type is composed with the drawing, in
   the free corners of the stage or beside it, never as a template column; solid planes over outlines, and an outline only where it means
   something (what only appears to be there) ---------- */
.ca{--bar:74px;--bg:#fff}
.ca .xh{display:block;font-size:14px}
.ca-mi{font-stretch:88%;font-variation-settings:"wdth" 88;text-transform:uppercase;letter-spacing:.07em;font-weight:650;font-size:14.5px;line-height:1.3}
.ca-h1{font-size:clamp(34px,4.1vw,74px);line-height:.98;letter-spacing:-.045em;font-weight:600;text-wrap:balance;max-width:19ch}
.ca-h2{font-size:clamp(30px,3.4vw,60px);line-height:1;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.ca-bq{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,1.75vw,31px);line-height:1.14;letter-spacing:.004em;max-width:24ch;text-wrap:balance}
.ca-dk{--bg:#000;margin:0 calc(var(--m) * -1);padding:12vh var(--m) 12vh;background:#000;color:#fff}
.ca-dk .ca-bq{color:#fff;-webkit-text-stroke:.014em currentColor;letter-spacing:.014em}
.ca-pf{max-width:46ch;font-size:16px;line-height:1.45;text-wrap:pretty}
.ca-dk .ca-pf{color:rgba(255,255,255,.84)}

/* the switch: a real control with a real consequence. Square, bordered, the chosen state filled */
.ca-sg{display:inline-flex;align-self:flex-start;box-shadow:inset 0 0 0 1.5px currentColor}
.ca-t{display:inline-flex;align-items:baseline;column-gap:10px;padding:clamp(12px,1.9vh,18px) clamp(16px,1.6vw,26px);background:none;color:inherit;font-size:clamp(16px,1.2vw,19px);line-height:1.1;letter-spacing:-.005em;font-weight:600;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.ca-t span{white-space:nowrap}
.ca-cf .ca-t{padding-left:clamp(12px,1.1vw,22px);padding-right:clamp(12px,1.1vw,22px)}
.ca-t+.ca-t{box-shadow:inset 1.5px 0 0 currentColor}
.ca-t i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.3em;letter-spacing:.01em;-webkit-text-stroke:.045em currentColor}
.ca-t:hover{background:rgba(0,0,0,.07)}
.ca-dk .ca-t:hover{background:rgba(255,255,255,.14)}
.ca-t[aria-pressed="true"]{background:#000;color:#fff}
.ca-dk .ca-t[aria-pressed="true"]{background:#fff;color:#000}
.ca-t:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* the drawing kit: top faces carry the light, sides are solid */
.ca svg .ft,.ca svg .fs,.ca svg .fb{stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* 1 + 2 one stage, held while the layer scrolls. The drawing sits in the middle; the words take the free corners around the diamond */
.ca-seq{position:relative;height:calc(2.9 * (100svh - var(--bar)))}
.ca-stage{position:sticky;top:var(--bar);height:calc(100svh - var(--bar))}
.ca-copy{position:absolute;inset:3.4vh 0 4.4vh;z-index:2;pointer-events:none}
.ca-st1{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .5s}
.ca-st1.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .08s,transform .7s var(--ease) .08s,visibility 0s}
.ca-tl{position:absolute;left:0;top:0;margin:0}
.ca-tr1{position:absolute;right:0;top:0;text-align:right}
.ca-br1{position:absolute;right:0;bottom:0;text-align:right}
.ca-seq .dkick .t{font-size:clamp(42px,4.9vw,88px)}
.ca-k{font-size:clamp(26px,2.55vw,46px);line-height:1;letter-spacing:-.04em;font-weight:650;max-width:12ch;text-wrap:balance}
.ca-lead,.ca-st1 .ca-br1{max-width:19ch}
.ca-h2.ca-tl{max-width:10ch}
.ca-say{font-size:clamp(19px,1.5vw,25px);line-height:1.28;letter-spacing:-.015em;font-weight:500;max-width:19ch;text-wrap:balance}
.ca-dw{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:min(100%,calc((100svh - var(--bar) - 2vh) * 4 / 3));aspect-ratio:4/3}
.ca-dw svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ca-dw .pl .ft{fill:#fff;stroke:#000;stroke-width:1.3}
.ca-dw .pl .fs{fill:#000;stroke:#000;stroke-width:1}
.ca-dw .pl .fb{fill:none;stroke:none}
.ca-dw .bs .ft{fill:#e6e6e3;stroke:none}
.ca-dw .bs .fs{fill:#1b1b1b;stroke:#1b1b1b;stroke-width:.6}
.ca-dw .bs .fs.r{fill:#3a3a3a}
.ca-dw .bs .fb{fill:none;stroke:none}
.ca-dw .cf .f{fill:#000;stroke:#fff;stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ca-dw .sh{fill:none;stroke:#000;stroke-width:1;stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
/* names sit on their plate, no frame around them; the white of the plate carries them */
.ca-lb{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;row-gap:4px;text-align:center;pointer-events:none}
.ca-lb b{font-stretch:92%;font-variation-settings:"wdth" 92;text-transform:uppercase;letter-spacing:.045em;font-weight:750;font-size:clamp(15px,1.2vw,19px);line-height:1.1;white-space:nowrap;background:#fff;padding:2px 5px 1px}
.ca-lb.base b,.ca-lb.base em{background:none}
.ca-lb em{max-width:11em;font-style:normal;font-size:clamp(16px,1.12vw,18px);font-weight:500;line-height:1.18;letter-spacing:-.01em;background:#fff;padding:1px 5px 2px;text-wrap:balance;opacity:0;transition:opacity .4s var(--ease)}
.ca-dw.hist .ca-lb em{opacity:1}
.ca-lb.core b{background:none;color:#fff;letter-spacing:.1em;font-stretch:110%;font-variation-settings:"wdth" 110;font-size:clamp(15px,1.25vw,20px)}

/* 3 fit (black): two good decisions on one piece of ground. Choose the situation, read the first decision, see the drawing,
   read the second, then what they do together */
.ca-cf{display:grid;grid-template-columns:minmax(0,3.3fr) minmax(0,6.4fr) minmax(0,3.3fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"h h q" "t t q" "a f b" "a f o";column-gap:2.6vw;row-gap:clamp(18px,3.4vh,40px)}
.ca-cf .ca-h1{grid-area:h;max-width:22ch}
.ca-cfq{grid-area:q;align-self:end;justify-self:end;text-align:right;max-width:20ch;font-size:clamp(19px,1.5vw,26px)}
.ca-cf .ca-sg{grid-area:t;justify-self:start}
.ca-dc.a{grid-area:a;align-self:center}
.ca-dc.b{grid-area:b;justify-self:end;text-align:right;align-self:start}
.ca-dc.b .ca-dt{margin-left:auto}
.ca-out{grid-area:o;align-self:end;justify-self:end;text-align:right;font-size:clamp(21px,1.95vw,34px);line-height:1.08;letter-spacing:-.03em;font-weight:600;max-width:15ch;text-wrap:balance}
.ca-cf[data-s="0"] :is(.ca-dc,.ca-out)[data-s="1"],.ca-cf[data-s="1"] :is(.ca-dc,.ca-out)[data-s="0"]{display:none}
.ca-tg{margin:0;text-transform:uppercase;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;letter-spacing:-.035em;line-height:.92;font-size:clamp(22px,2.2vw,40px)}
.ca-tg.f{color:#fff}
.ca-tg.o{color:transparent;-webkit-text-stroke:1.4px #fff}
.ca-dt{margin-top:clamp(10px,1.6vh,16px);font-size:clamp(16.5px,1.2vw,20px);line-height:1.3;letter-spacing:-.01em;color:rgba(255,255,255,.88);max-width:17ch;text-wrap:balance}
.ca-cx{grid-area:f;position:relative;margin:0;align-self:center;justify-self:center;width:min(100%,calc((100svh - var(--bar) - 32vh - 70px) * 660 / 480));aspect-ratio:660/480}
.ca-cx svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ca-cx .pw .ft{fill:#fff;stroke:#fff;stroke-width:1}
.ca-cx .pw .fs{fill:#8d8d8a;stroke:#000;stroke-width:.8}
.ca-cx .pw .fs.r{fill:#5d5d5a}
.ca-cx .po .ft{fill:rgba(255,255,255,.2);stroke:#fff;stroke-width:2.2}
.ca-cx .po .fs{fill:#000;stroke:#fff;stroke-width:1.3}
.ca-cx .pw .fb,.ca-cx .po .fb{fill:none;stroke:none}
.ca-cx .gd{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-dasharray:3 6;vector-effect:non-scaling-stroke}
.ca-cx .eg{fill:none;stroke:#000;stroke-width:3;vector-effect:non-scaling-stroke}
.ca-cx .ht{fill:url(#caHatch);stroke:#000;stroke-width:1.4;vector-effect:non-scaling-stroke}
.ca-cf[data-s="0"] .ca-cx .s1,.ca-cf[data-s="1"] .ca-cx .s0{display:none}

/* 4 cause and consequence: one year read from left to right; the dots grow, the result is the loudest thing in the frame */
.ca-tr{padding:13vh 0 15vh}
.ca-tr .ca-h1{max-width:21ch}
.ca-yr{position:relative;margin:clamp(24px,5vh,60px) 0 0;width:100%;aspect-ratio:1200/420}
.ca-yr svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ca-yr .yd{fill:#000;transition:opacity .25s linear}
.ca-yr .yb{fill:none;stroke:#000;stroke-width:1.2;vector-effect:non-scaling-stroke}
.ca-yr .yh{fill:#000}
.ca-yr .pk .ft{fill:#000;stroke:#000;stroke-width:1}
.ca-yr .pk .fs{fill:#000;stroke:#fff;stroke-width:.8}
.ca-yr .pk .fb{fill:none;stroke:none}
.ca-mo{position:absolute;display:grid;row-gap:6px;width:13em;pointer-events:none;transition:opacity .5s var(--ease)}
.ca-mo i{font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.7vw,30px);line-height:1;-webkit-text-stroke:.02em currentColor}
.ca-mo span{font-size:clamp(16px,1.2vw,19px);line-height:1.3;text-wrap:balance}
.ca-mo[data-k="0"]{transform:translate(-50%,18px);justify-items:center;text-align:center}
.ca-mo[data-k="1"],.ca-mo[data-k="2"]{transform:translate(-50%,calc(-100% - 26px));justify-items:center;text-align:center;width:9.5em}
.ca-mo.z{transform:translate(-100%,-50%);justify-items:end;text-align:right;width:auto}
.ca-mo.z b{text-transform:uppercase;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(40px,5.4vw,100px);line-height:.86;letter-spacing:-.055em;width:4.6em;text-align:right}
.ca-mo.z span i{font-size:1.2em;margin-right:.3em}
.ca-back{position:absolute;left:50%;top:100%;transform:translate(-50%,0);max-width:none;white-space:nowrap;background:#fff;padding:0 14px;transition:opacity .5s var(--ease)}

/* 5 one account (black): what it brings in stands tall and solid; read with everything agreed around the price, only its outline
   remains, and what stays solid is what it keeps. Beside it, what each agreement actually does */
.ca-ac{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2.4vw;row-gap:clamp(20px,4vh,48px);align-items:end}
.ca-ac .ca-h1{grid-column:1/9;max-width:17ch}
.ca-ac .ca-sg{grid-column:9/13;justify-self:end;align-self:end}
.ca-ax{grid-column:1/8;position:relative;margin:0;align-self:center;justify-self:center;width:min(100%,calc((100svh - var(--bar) - 30vh - 60px) * 800 / 520));aspect-ratio:800/520}
.ca-acr{grid-column:8/13;align-self:center;display:flex;flex-direction:column;row-gap:clamp(16px,3vh,32px)}
.ca-ac .ca-bq{max-width:23ch}
.ca-cn{list-style:none;margin:0;padding:0;display:grid}
.ca-cn li{display:grid;row-gap:3px;padding:clamp(8px,1.4vh,13px) 0;border-top:1px solid rgba(255,255,255,.34);transition:opacity .5s var(--ease)}
.ca-cn li:last-child{border-bottom:1px solid rgba(255,255,255,.34)}
.ca-cn b{font-size:clamp(17px,1.3vw,21px);line-height:1.15;font-weight:650;letter-spacing:-.015em}
.ca-cn span{font-size:clamp(16px,1.12vw,18px);line-height:1.3;color:rgba(255,255,255,.84)}
.ca-ac:not(.kept) .ca-cn li{opacity:.62}
.ca-ax svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ca-ax .sw .ft{fill:#fff;stroke:#fff;stroke-width:1}
.ca-ax .sw .fs{fill:#d4d4d1;stroke:#000;stroke-width:.8}
.ca-ax .sw .fs.r{fill:#9a9a97}
.ca-ax .cg .ft,.ca-ax .cg .fs{fill:none;stroke:#fff;stroke-width:1.3;stroke-dasharray:5 5}
.ca-ax .sw .fb,.ca-ax .cg .fb{fill:none;stroke:none}
.ca-ax .gr .ft{fill:#1c1c1c;stroke:none}
.ca-ax .gr .fs{fill:#0c0c0c;stroke:#2e2e2e;stroke-width:.7}
.ca-ax .gr .fb{fill:none;stroke:none}
.ca-ax .ld{stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;transition:opacity .4s var(--ease)}
.ca-ak{position:absolute;transform:translate(0,-50%);display:grid;row-gap:6px;width:max-content;max-width:12em;pointer-events:none;transition:opacity .45s var(--ease)}
.ca-ak b{text-transform:uppercase;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(20px,1.9vw,34px);line-height:.95;letter-spacing:-.04em;width:6.6em;transition:color .45s var(--ease)}
.ca-ak span{font-size:clamp(16px,1.15vw,18.5px);line-height:1.28;color:rgba(255,255,255,.88);max-width:11.5em;text-wrap:balance;transition:opacity .45s var(--ease)}
.ca-ac.kept .ca-ak[data-k="all"] b{color:transparent;-webkit-text-stroke:1.2px #fff}
.ca-ac.kept .ca-ak[data-k="all"] span{opacity:0}
.ca-ac:not(.kept) .ca-ak.k{opacity:0}

/* 6 re-set: the drawing from the opening, level and flush; one plate smaller by choice, its former size still traced */
.ca-rs{padding:13vh 0 12vh}
.ca-rsh{margin-left:auto;text-align:right;max-width:none;font-size:clamp(34px,3.9vw,70px)}
.ca-rsh span{font-weight:350;display:block}
.ca-rsh b{font-weight:750;display:block;letter-spacing:-.05em}
.ca-rz{position:relative;margin:clamp(4px,1vh,14px) auto 0;width:min(100%,calc((100svh - var(--bar) - 36vh) * 1040 / 560));aspect-ratio:1040/560}
.ca-rz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ca-rz .pl .ft{fill:#fff;stroke:#000;stroke-width:1.6}
.ca-rz .pl .fs{fill:#000;stroke:#000;stroke-width:1}
.ca-rz .pl .fb{fill:none;stroke:none}
.ca-rz .bs .ft{fill:#000;stroke:#000;stroke-width:1}
.ca-rz .bs .fs{fill:#000;stroke:#000;stroke-width:1}
.ca-rz .cf .f{fill:#000;stroke:#fff;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ca-rz .sh{fill:none;stroke:#000;stroke-width:1.2;stroke-dasharray:3 6;vector-effect:non-scaling-stroke}
.ca-rz .ld{stroke:#000;stroke-width:1;vector-effect:non-scaling-stroke}
.ca-rl{position:absolute;transform:translate(0,-50%);display:grid;row-gap:5px;width:max-content;max-width:13.5em;pointer-events:none}
.ca-rl.l{transform:translate(-100%,-50%);justify-items:end;text-align:right}
.ca-rl span{font-stretch:88%;font-variation-settings:"wdth" 88;text-transform:uppercase;letter-spacing:.07em;font-weight:650;font-size:14.5px;color:rgba(0,0,0,.72)}
.ca-rl b{font-size:clamp(19px,1.75vw,31px);line-height:1.04;letter-spacing:-.03em;font-weight:650;text-wrap:balance}
.ca-rl em{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.5vw,25px);line-height:1.1;-webkit-text-stroke:.012em currentColor}

/* 7 the whole structure opens into three questions: one branch each, the chosen one comes forward */
.ca-br2{--bg:#000;margin:0 calc(var(--m) * -1);padding:12vh var(--m) 12vh;background:#000;color:#fff}
.ca-br2 .xh{color:#fff}
.ca-brw{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:3vw;margin-top:3vh}
.ca-brl{position:relative;display:flex;flex-direction:column;row-gap:4vh}
.ca-opn{color:#fff;font-size:clamp(26px,2.9vw,50px);line-height:1.05;letter-spacing:-.03em;font-weight:400;max-width:16ch;text-wrap:balance}
.ca-brs{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ca-brs .bl{fill:none;stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke;transition:stroke-width .35s var(--ease),opacity .35s var(--ease)}
.ca-brs .bl.on{stroke-width:3.2}
.ca-brs .cw .f{fill:#fff;stroke:#000;stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ca-tree{display:flex;flex-direction:column;row-gap:clamp(14px,2.8vh,30px)}
.ca-nx{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;row-gap:9px;align-items:baseline;width:100%;padding:8px 0;text-align:left;cursor:pointer;background:none;color:#fff;transition:opacity .35s var(--ease)}
.ca-nx .ad{grid-row:1/3;font-family:var(--serif);font-style:italic;font-size:25px;color:#fff;-webkit-text-stroke:.04em #fff}
.ca-nx .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.2vw,76px);letter-spacing:-.05em;line-height:.9;color:transparent;-webkit-text-stroke:1.5px #fff;transition:color .35s var(--ease)}
.ca-nx .q{font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.75vw,29px);line-height:1.16;max-width:40ch;text-wrap:balance;-webkit-text-stroke:.014em currentColor;letter-spacing:.014em}
.ca-nx:hover .n,.ca-nx:focus-visible .n,.ca-nx.on .n{color:#fff}
.ca-tree:has(.ca-nx:hover,.ca-nx:focus-visible) .ca-nx:not(:hover):not(:focus-visible){opacity:.62}
.ca-nx:focus-visible{outline:2px solid #fff;outline-offset:6px}

.rm .ca *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.ca *{transition:none!important;animation:none!important}}

@media (max-height:620px) and (min-width:761px){
  .ca-dk{padding-top:9vh;padding-bottom:9vh}
  .ca-tr,.ca-rs{padding-top:9vh;padding-bottom:9vh}
  .ca-br2{padding-top:9vh;padding-bottom:9vh}
  .ca-h1{font-size:clamp(28px,3.4vw,52px)}
  .ca-seq .dkick .t{font-size:clamp(34px,3.9vw,58px)}
  .ca-k{font-size:clamp(22px,2.3vw,36px)}
  .ca-say{font-size:17px}
  .ca-h2{font-size:clamp(26px,3vw,44px)}
  .ca-cf{row-gap:14px}
  .ca-t{padding:9px 14px}
  .ca-tg{font-size:clamp(19px,2vw,28px)}
  .ca-dt{font-size:16px}
  .ca-out{font-size:clamp(19px,1.9vw,27px)}
  .ca-cx{width:min(100%,calc((100svh - var(--bar) - 25vh - 60px) * 660 / 480))}
  .ca-ac{row-gap:14px}
  .ca-ax{width:min(100%,calc((100svh - var(--bar) - 28vh - 50px) * 800 / 520))}
  .ca-acr{row-gap:12px}
  .ca-cn li{padding:6px 0}
  .ca-ac .ca-bq,.ca-cf .ca-bq{font-size:clamp(17px,1.5vw,22px)}
  .ca-rsh{font-size:clamp(28px,3.6vw,54px)}
  .ca-rz{width:min(100%,calc((100svh - var(--bar) - 40vh) * 1040 / 560))}
  .ca-rl b{font-size:18px}.ca-rl em{font-size:17px}
}

/* phones, and tablets held upright: every drawing stays whole and full width; the names leave the drawing and follow it as a short list */
@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .ca :is(.ca-bq,.ca-nx .q,.ca-mo i,.ca-t i){letter-spacing:.018em;-webkit-text-stroke:.018em currentColor}
  .ca .ca-mi{font-size:13.5px;font-stretch:95%;font-variation-settings:"wdth" 95;letter-spacing:.06em}
  .ca-h1{font-size:clamp(28px,8.2vw,38px)}
  .ca-h2{font-size:clamp(28px,8vw,36px)}
  .ca-bq{font-size:clamp(20px,5.8vw,24px);max-width:none}
  .ca-dk{padding:10vh var(--m) 9vh}
  .ca-tr,.ca-rs{padding:10vh 0 9vh}
  .ca-seq{height:calc(2.7 * (100svh - var(--bar)))}
  .ca-stage{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);row-gap:1vh;padding:1.6vh 0 2vh}
  .ca-copy{position:static;display:grid;align-self:start;pointer-events:auto}
  .ca-st1{position:static;grid-area:1/1;display:flex;flex-direction:column;row-gap:1.6vh}
  .ca-tl,.ca-tr1,.ca-br1{position:static;text-align:left;max-width:none!important}
  .ca-seq .dkick .t{font-size:clamp(32px,9.2vw,40px)}
  .ca-k{font-size:clamp(22px,6.2vw,26px);max-width:16ch}
  .ca-say{font-size:17px}
  .ca-dw{position:relative;left:auto;top:auto;transform:none;width:calc(100% + 2 * var(--m));max-width:none;margin:0 calc(var(--m) * -1);align-self:start;justify-self:stretch}
  .ca-lb b{font-size:13.5px;font-stretch:95%;font-variation-settings:"wdth" 95;letter-spacing:.05em;padding:2px 4px 1px}
  .ca-lb em{font-size:15.5px;max-width:9.5em}
  .ca-lb.core b{font-size:13.5px;letter-spacing:.04em;font-stretch:92%;font-variation-settings:"wdth" 92}
  .ca-cf{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"h" "t" "f" "a" "b" "o" "q";row-gap:3vh}
  .ca-cfq{justify-self:start;text-align:left;font-size:21px}
  .ca-dc.b{justify-self:start;text-align:left}
  .ca-dc.b .ca-dt{margin-left:0}
  .ca-dt{max-width:none;font-size:17px}
  .ca-tg{font-size:22px}
  .ca-tg.o{-webkit-text-stroke:1.1px #fff}
  .ca-out{justify-self:start;text-align:left;font-size:22px;max-width:none}
  .ca-ac{grid-template-columns:minmax(0,1fr);row-gap:3vh}
  .ca-ac>*{grid-column:1/-1!important}
  .ca-ac .ca-h1{order:0}
  .ca-ax{order:1}
  .ca-ac .ca-sg{order:2;justify-self:start}
  .ca-acr{order:3}
  .ca-t{padding:12px 14px;font-size:15.5px}
  .ca-t span{white-space:normal}
  .ca-cx,.ca-ax,.ca-rz,.ca-yr{width:calc(100% + 2 * var(--m));max-width:none;margin-left:calc(var(--m) * -1);margin-right:calc(var(--m) * -1);aspect-ratio:auto;height:auto;display:flex;flex-wrap:wrap;row-gap:10px;column-gap:14px}
  .ca-cx svg,.ca-ax svg,.ca-rz svg,.ca-yr svg{position:static;display:block;flex:0 0 100%;width:100%;height:auto}
  .ca-ax .ld,.ca-rz .ld{display:none}
  .ca-ax .ca-ak,.ca-rz .ca-rl,.ca-yr .ca-mo,.ca-yr .ca-back{position:static!important;transform:none!important;left:auto!important;top:auto!important}
  .ca-ax .ca-ak{flex:0 0 calc(100% - 2 * var(--m));width:auto;max-width:none;margin:0 var(--m)}
  .ca-ak b{font-size:22px;width:auto}
  .ca-ac:not(.kept) .ca-ak.k,.ca-ac.kept .ca-ak[data-k="all"]{display:none}
  .ca-rz{flex-direction:column;flex-wrap:nowrap;row-gap:14px}
  .ca-rz .ca-rl,.ca-rz .ca-rl.l{justify-items:start;text-align:left;max-width:none;margin:0 var(--m)}
  .ca-rl span{font-size:13.5px}
  .ca-rl b{font-size:20px}
  .ca-rsh{margin-left:0;text-align:left;font-size:clamp(30px,8.6vw,40px)}
  .ca-yr{flex-direction:column;flex-wrap:nowrap;row-gap:16px}
  .ca-yr svg{order:0}
  .ca-yr .yb,.ca-yr .yh{display:none}
  .ca-yr .ca-mo{order:1;width:auto;margin:0 var(--m);justify-items:start;text-align:left;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline}
  .ca-yr .ca-mo i{grid-row:1/3}
  .ca-yr .ca-mo.z{grid-template-columns:1fr}
  .ca-mo.z b{font-size:clamp(34px,11vw,48px);white-space:normal}
  .ca-yr .ca-back{order:2;margin:1vh var(--m) 0;white-space:normal;padding:0}
  .ca-brw{display:flex;flex-direction:column;align-items:stretch;row-gap:3vh}
  .ca-brl svg{display:none}
  .ca-opn{font-size:clamp(24px,7.4vw,30px)}
  .ca-nx .n{font-size:clamp(30px,9.4vw,44px);-webkit-text-stroke:1.2px #fff}
  .ca-nx .q{font-size:20px}
  .ca-nx .ad{font-size:21px}
}

/* ---------- Deep Dive D.1 Revenue (refinement pass after Lena's frame by frame review, 29.09.2026). No geometric template carries the
   page. A total is closed by a double rule (01, 02 only, where the sum itself is the subject); sources appear as words whose size says
   more or less, never an exact share; time appears where the meaning depends on it (the year, last year to this year, season to season).
   Solid = earned, hatched = agreed, outline = likely, dotted = hoped for, grey = earlier or not yet read ---------- */
.rv{--bar:74px;--bg:#fff}
.rv .xh{display:block;font-size:14px}
.rv .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rv-mi{font-stretch:88%;font-variation-settings:"wdth" 88;text-transform:uppercase;letter-spacing:.07em;font-weight:650;font-size:14.5px;line-height:1.3}
.rv-h1{font-size:clamp(34px,4.1vw,74px);line-height:.98;letter-spacing:-.045em;font-weight:600;text-wrap:balance;max-width:19ch}
.rv-h2{font-size:clamp(30px,3.3vw,58px);line-height:1;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.rv-bq{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,1.75vw,31px);line-height:1.14;letter-spacing:.004em;max-width:24ch;text-wrap:balance}
.rv-dk{--bg:#000;margin:0 calc(var(--m) * -1);padding:12vh var(--m);background:#000;color:#fff}
.rv-dk .rv-bq{color:#fff;-webkit-text-stroke:.014em currentColor;letter-spacing:.014em}
.rv svg{display:block;overflow:visible}
.rv :where(figure){margin:0}
.rv .sw{display:inline-block;flex:none;width:22px;height:13px;margin-right:9px;vertical-align:-1px;box-sizing:border-box}
.rv .sw.in{background:#000}
.rv .sw.ag{border:1.5px solid #000;background:repeating-linear-gradient(-45deg,#000 0 2px,#fff 2px 6px)}
.rv .sw.lk{border:2px solid #000;background:#fff}
.rv .sw.hp{border:1.5px dotted #000;background:#fff}
/* the double rule that closes a sum */
.rv-rule{height:12px;background:linear-gradient(#000 0 7px,transparent 7px 10px,#000 10px 12px)}
.rv-rule.w{background:linear-gradient(#fff 0 6px,transparent 6px 9px,#fff 9px 11px);height:11px}

/* 01 the total: the page title is the total. Solid on the left, it opens towards the right into the four layers it is built on,
   and each layer is named where it ends. Composed as one reading: what it is, what it looks like, what Lena asks */
.rv-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto minmax(0,1.2fr) auto;grid-template-areas:". ." "k k" "w w" ". ." "a q";row-gap:clamp(10px,2vh,22px);column-gap:4vw;min-height:calc(100svh - var(--bar) - 96px);padding:0 0 clamp(28px,6vh,80px)}
.rv-hk{grid-area:k;margin:0}
.rv-word{grid-area:w;position:relative;display:flex;align-items:flex-start}
.rv .rv-wd{position:relative;margin:0;font-size:var(--wf,150px);line-height:1;text-transform:uppercase;font-weight:800;font-stretch:100%;font-variation-settings:"wdth" 100;letter-spacing:-.045em;white-space:nowrap}
.rv-wd span{display:block}
.rv-wd .l{position:relative;color:#000;-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 53%);mask-image:linear-gradient(90deg,#000 45%,transparent 53%)}
.rv-wd .s{position:absolute;inset:0;color:transparent;background:var(--bands,#000);-webkit-background-clip:text;background-clip:text}
.rv-parts{list-style:none;margin:0;padding:0}
.rv-parts li{position:absolute;left:var(--px,80%);display:flex;align-items:center;column-gap:12px;transform:translateY(-50%);white-space:nowrap;font-stretch:92%;font-variation-settings:"wdth" 92;text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:clamp(14px,1.05vw,17px);line-height:1}
.rv-parts li::before{content:"";width:clamp(18px,2.4vw,40px);height:1.5px;background:#000}
.rv-k{grid-area:a;align-self:end;margin:0;font-size:clamp(24px,2.5vw,46px);line-height:1.04;letter-spacing:-.035em;font-weight:350;max-width:14ch;text-wrap:balance}
.rv-hq{grid-area:q;align-self:end;justify-self:end;text-align:right;max-width:22ch;font-size:clamp(21px,1.9vw,34px)}

/* 02 same total (black): one, many, three standing on one shared double rule. The weight of each word says how the total is carried:
   one heavy and narrow, many light and wide, three in between. The words are fitted together to the full width */
.rv-dk.rv-same{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;min-height:calc(100svh - var(--bar));padding:clamp(28px,6.5vh,72px) var(--m) clamp(28px,7vh,76px)}
.rv-same .rv-h1{max-width:none;font-size:clamp(24px,2.9vw,46px);line-height:1.08;letter-spacing:-.02em}
.rv-same .rv-h1 span{display:block;font-weight:330}
.rv-same .rv-h1 b{display:block;font-weight:760}
.rv-om{display:grid;grid-template-columns:auto auto auto;column-gap:var(--og,48px);align-items:end;align-self:end;min-height:0}
.rv-om p{margin:0;font-size:var(--of,120px);line-height:.74;text-transform:uppercase;white-space:nowrap}
.rv-om span{display:inline-block}
.rv-om [data-k="1"]{font-weight:900;font-stretch:75%;font-variation-settings:"wdth" 75;letter-spacing:-.015em}
.rv-om [data-k="m"]{font-weight:200;font-stretch:125%;font-variation-settings:"wdth" 125;letter-spacing:.06em}
.rv-om [data-k="3"]{font-weight:560;font-stretch:100%;font-variation-settings:"wdth" 100;letter-spacing:-.03em}
.rv-sum2{margin-top:clamp(12px,1.6vh,20px);border-top:3px solid #fff;padding-top:4px}
.rv-sum2::after{content:"";display:block;border-top:1px solid #fff}
.rv-oc{list-style:none;margin:clamp(16px,2.6vh,26px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--og,48px)}
.rv-oc li{font-size:clamp(17px,1.4vw,23px);line-height:1.25;font-weight:360;color:#e6e6e6;white-space:nowrap}
.rv-oc b{display:block;text-transform:uppercase;font-size:clamp(14px,1.05vw,17px);font-weight:720;letter-spacing:.09em;color:#fff;margin-bottom:.45em}

/* 03 the year: what carries it and what is still to come. Today divides it: solid behind, each source in its own state ahead */
.rv-yr{padding:11vh 0 10vh}
.rv-yh{display:block}
.rv-yr .rv-h1{font-size:clamp(28px,3.1vw,56px)}
.rv-two{max-width:none}
.rv-two span{display:block;font-weight:350}
.rv-two b{display:block;font-weight:750;letter-spacing:-.05em}
.rv-yf{position:relative;margin:clamp(34px,6vh,70px) 0 0;width:100%;aspect-ratio:var(--ar,3)}
.rv-fq,.rv-note{position:absolute;margin:0;pointer-events:none}
.rv-fq{transform:translate(0,-100%);max-width:12ch;font-size:clamp(19px,1.6vw,28px)}
.rv-note{transform:translate(0,-50%);max-width:15ch;font-size:clamp(16px,1.3vw,22px);line-height:1.2;letter-spacing:-.015em;font-weight:650;text-wrap:balance}
.rv-yf svg,.rv-rq svg{position:absolute;inset:0;width:100%;height:100%}
.rv-lb,.rv-st{position:absolute;margin:0;pointer-events:none}
.rv-lb{transform:translate(0,-50%);font-stretch:92%;font-variation-settings:"wdth" 92;text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:clamp(14px,1.05vw,17px);line-height:1.1;white-space:nowrap;color:#fff}
.rv-lb.c{transform:translate(-50%,-50%);white-space:normal;width:min-content;text-align:center}
.rv-lb.o{color:#000;transform:translate(0,-100%)}
/* the four states and the line of today share one voice: wide capitals, one size */
.rv-st{transform:translate(-50%,-50%);font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;font-weight:800;font-size:clamp(14px,1.15vw,20px);letter-spacing:.01em;line-height:1;white-space:nowrap}
.rv-st[data-k="0"]{background:#fff;padding:5px 9px 4px}
.rv-st[data-k="in"]{transform:translate(-100%,-100%);padding:0 12px 8px 0}
.rv-st.rv-today{transform:translate(0,-100%);padding:0 0 8px 12px}
.rv-st[data-k="3"]{transform:translate(0,-100%);padding-bottom:6px}
.rv-mo{position:absolute;left:0;margin:6px 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));text-align:center;font-stretch:88%;font-variation-settings:"wdth" 88;font-weight:650;font-size:14px;letter-spacing:.06em;color:rgba(0,0,0,.72)}

/* 04 inside, two things moved (black): headline, then the mechanism, then the diagnosis. Last year to this year, the total a quiet
   reference; the two sources that moved are white and cross, the two that held are grey and level. Positions show direction, not values */
.rv-dk.rv-sig{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:clamp(22px,5vh,56px);min-height:calc(100svh - var(--bar));padding:clamp(28px,6vh,72px) var(--m) clamp(26px,5.5vh,64px)}
.rv-sig .rv-h1{max-width:none;font-size:clamp(26px,3.1vw,50px);line-height:1.04;letter-spacing:-.025em}
.rv-sig .rv-h1 span{display:block;font-weight:330}
.rv-sig .rv-h1 b{display:block;font-weight:780}
.rv-sgm{display:grid;grid-template-columns:minmax(0,1fr) clamp(286px,29vw,440px);column-gap:clamp(30px,4.5vw,88px);min-height:0}
.rv-slp{position:relative;min-height:clamp(220px,36vh,560px)}
.rv-slp svg{position:absolute;inset:0;width:100%;height:100%}
.rv-slp p{position:absolute;margin:0;white-space:nowrap;line-height:1;text-transform:uppercase}
.rv-slp .sy{font-size:13px;font-weight:700;letter-spacing:.1em;transform:translateX(-50%)}
.rv-slp .stt{font-size:13px;font-weight:600;letter-spacing:.08em;color:#9a9a9a;transform:translate(-50%,-50%);background:#000;padding:0 12px}
.rv-slp .stt b{color:#fff;font-weight:700;margin-right:.7em}
.rv-slp .stt i{font-style:normal;text-transform:none}
.rv-slp .sg{font-size:13px;font-weight:620;letter-spacing:.06em;color:#8c8c8c;transform:translateY(-50%)}
.rv-slp .sm{font-size:13px;font-weight:700;letter-spacing:.06em;color:#fff;transform:translateY(-50%)}
.rv-slp .sl{transform:translate(-100%,-50%)}
.rv-slp .se{font-size:clamp(15px,1.25vw,20px);font-weight:780;letter-spacing:.05em;color:#fff;transform:translateY(-.5em)}
.rv-slp .se small{display:block;font-size:13px;font-weight:600;font-stretch:80%;font-variation-settings:"wdth" 80;letter-spacing:.14em;margin-top:6px}
.rv-dg{display:flex;flex-direction:column;justify-content:space-between;row-gap:24px;border-top:1px solid #fff;padding-top:14px}
.rv-dg .rv-bq{max-width:none;text-wrap:wrap;font-size:clamp(19px,1.8vw,30px);line-height:1.18;letter-spacing:.01em;-webkit-text-stroke:.25px #fff}
.rv-dg .rv-hyq{min-height:2.36em}
/* the hypothesis selector: text only; each option a generous invisible target, at least 44px high */
.rv-tabs{--hx:clamp(6px,.7vw,12px);display:flex;margin:0 0 12px calc(var(--hx) * -1)}
.rv-tabs button:last-child{padding-right:0}
.rv-tabs button:last-child::after{right:0}
.rv-tabs button{position:relative;display:inline-flex;align-items:flex-end;min-height:44px;padding:0 var(--hx) 8px;margin:0;border:0;background:none;color:#8c8c8c;font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;cursor:pointer;transition:color .2s var(--ease)}
.rv-tabs button span{font-weight:500;margin-right:.5em}
.rv-tabs button::after{content:"";position:absolute;left:var(--hx);right:var(--hx);bottom:0;height:2px;background:transparent;transition:background-color .2s var(--ease)}
.rv-tabs button:hover{color:#fff}
.rv-tabs button:hover::after{height:1px;background:rgba(255,255,255,.45)}
.rv-tabs button[aria-selected="true"]{color:#fff}
.rv-tabs button[aria-selected="true"]::after{height:2px;background:#fff}
.rv-tabs button:focus{outline:none}
.rv-tabs button:focus-visible{outline:1.5px solid #fff;outline-offset:0}

/* 05 decision: the reflex struck through; one signal, several legitimate answers, none ranked above another */
.rv-dec{display:grid;grid-template-columns:minmax(0,3.6fr) minmax(0,8.4fr);column-gap:clamp(32px,5vw,96px);align-items:center;padding:12vh 0 11vh}
.rv-dl{display:flex;flex-direction:column;row-gap:clamp(10px,2.2vh,24px)}
.rv-grow{margin:12px 0 0;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;text-transform:uppercase;font-size:clamp(52px,6vw,112px);white-space:nowrap;line-height:.86;letter-spacing:-.055em;color:#fff;-webkit-text-stroke:3.2px #000;paint-order:stroke fill}
.rv-grow s{text-decoration:line-through;text-decoration-color:#000;text-decoration-thickness:.07em}
.rv-dl .rv-h2{max-width:14ch;margin-top:clamp(6px,1.4vh,16px)}
.rv-field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:clamp(20px,2.8vw,52px);row-gap:clamp(16px,3.2vh,38px);align-items:start}
.rv-sgw{grid-column:1/-1;grid-row:1;display:flex;align-items:baseline;column-gap:18px;margin:0}
.rv-sgw b{text-transform:uppercase;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(30px,3.3vw,60px);line-height:.88;letter-spacing:-.05em;max-width:6em}
.rv-opt{display:contents;list-style:none}
.rv-opt li{display:grid;row-gap:6px;align-content:start;padding-top:12px;border-top:2px solid #000}
.rv-opt li[data-k="0"]{grid-column:1;grid-row:2}
.rv-opt li[data-k="1"]{grid-column:2;grid-row:2}
.rv-opt li[data-k="2"]{grid-column:3;grid-row:2}
.rv-opt li[data-k="3"]{grid-column:1;grid-row:3}
.rv-opt li[data-k="4"]{grid-column:2;grid-row:3}
.rv-opt li[data-k="5"]{grid-column:3;grid-row:3}
.rv-opt b{font-size:clamp(20px,1.75vw,31px);line-height:1;letter-spacing:-.03em;font-weight:750}
.rv-opt span{font-size:clamp(16px,1.2vw,20px);line-height:1.3;color:#000;letter-spacing:-.005em}

/* 06 proof: the verified reading set apart by placement, measure and type, not by a box */
.rv-pr{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"h e" "s s";column-gap:clamp(32px,5vw,96px);row-gap:clamp(30px,6vh,72px);padding:12vh 0 11vh}
.rv-pr .rv-h2{grid-area:h;align-self:start;max-width:12ch;font-size:clamp(24px,2.4vw,44px);line-height:1.02;font-weight:700}
.rv-ev{grid-area:e;align-self:end;display:flex;flex-direction:column;row-gap:clamp(12px,2.2vh,22px);padding-top:clamp(20px,8vh,110px)}
.rv-evk{margin:0}
.rv-me{font-size:clamp(21px,2.05vw,36px);line-height:1.22;letter-spacing:-.025em;font-weight:350;max-width:24ch;text-wrap:pretty}
.rv-me b{font-weight:750}
.rv-sea{grid-area:s;display:flex;align-items:center;column-gap:clamp(14px,2vw,32px)}
.rv-sea span{font-size:clamp(20px,2vw,36px);letter-spacing:-.03em;line-height:1;white-space:nowrap}
.rv-sea .a{font-weight:350}
.rv-sea .b{font-weight:750}
.rv-sea i{flex:1 1 auto;height:1.5px;background:#000;position:relative}
.rv-sea i::after{content:"";position:absolute;right:0;top:-5px;width:11px;height:11px;border-top:1.5px solid #000;border-right:1.5px solid #000;transform:rotate(45deg)}

/* 07 the win (black): the established sources form the base, new business sits on top as added weight. A height scale beside the
   stack reads it: this year at the top, last year below, the base alone lower still. Lena's sentence reads both */
.rv-dep{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h t" "g g";column-gap:clamp(28px,4vw,72px);row-gap:clamp(30px,6vh,70px);align-items:end}
.rv-dep .rv-h1{grid-area:h;max-width:none;font-size:clamp(28px,3.1vw,56px)}
.rv-dep .rv-h1 span{display:block;font-weight:350}
.rv-dep .rv-h1 b{display:block;font-weight:750}
.rv-t{grid-area:t;justify-self:end;display:inline-flex;padding:clamp(12px,1.9vh,18px) clamp(18px,1.8vw,28px);background:none;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;font-size:clamp(16px,1.2vw,19px);line-height:1.1;font-weight:600;letter-spacing:-.005em;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.rv-t .b,.rv-dep[data-v="1"] .rv-t .a{display:none}
.rv-dep[data-v="1"] .rv-t .b{display:inline}
.rv-t:hover{background:rgba(255,255,255,.14)}
.rv-t[aria-pressed="true"]{background:#fff;color:#000}
.rv-t:focus-visible{outline:2px solid #fff;outline-offset:4px}
.rv-stage{grid-area:g;display:grid;grid-template-columns:minmax(0,2.2fr) auto minmax(0,3fr);column-gap:clamp(18px,2.6vw,48px);align-items:end}
.rv-gauge{position:relative;align-self:stretch;border-right:1.5px solid #fff}
.rv-tk{position:absolute;right:0;margin:0;display:flex;align-items:center;column-gap:10px;transform:translateY(50%);transition:bottom .8s var(--ease),opacity .4s var(--ease)}
.rv-tk::after{content:"";width:16px;height:1.5px;background:#fff}
.rv-tk span{color:#fff;white-space:nowrap}
.rv-tk[data-k="ly"]::after{width:26px}
.rv-tk[data-k="ly"] span{color:rgba(255,255,255,.8)}
.rv-stack{display:flex;flex-direction:column;align-items:flex-start}
.rv-sw,.rv-base{margin:0;text-transform:uppercase;font-stretch:125%;font-variation-settings:"wdth" 125;letter-spacing:-.035em;line-height:.9;white-space:nowrap;color:#fff}
.rv-base{font-size:clamp(44px,6vw,112px);font-weight:800;letter-spacing:-.05em;white-space:normal;width:5.4em;line-height:.84;padding-bottom:.14em;max-height:2.2em;overflow:hidden;transition:max-height .8s var(--ease),opacity .6s var(--ease),padding .8s var(--ease)}
.rv-dep[data-v="1"] .rv-base{max-height:0;opacity:0;padding-bottom:0}
.rv-sw[data-k="2"]{font-size:clamp(17px,1.75vw,32px);font-weight:600;letter-spacing:-.01em;padding-top:.14em;border-top:1.5px solid rgba(255,255,255,.55)}
.rv-sw[data-k="1"]{font-size:clamp(21px,2.3vw,42px);font-weight:700;padding-top:.12em}
.rv-sw[data-k="0"]{font-size:clamp(27px,3.1vw,56px);font-weight:800;padding-top:.1em}
.rv-rl{margin:0;align-self:end;max-width:none;font-size:clamp(21px,1.95vw,34px)!important;line-height:1.22}

/* 08 the same year, read three times: same reality, different attention */
.rv-end{padding:13vh 0 12vh}
.rv-endh{font-size:clamp(28px,3.1vw,56px)}
.rv-endh{max-width:none;font-weight:350}
.rv-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3.2vw,60px);margin-top:clamp(26px,5vh,60px)}
.rv-rq{display:flex;flex-direction:column;row-gap:clamp(12px,2vh,20px)}
.rv-rq svg{position:static;width:100%;height:auto;aspect-ratio:1200/560}
.rv-eq{margin:0;font-size:clamp(17px,1.68vw,32px);line-height:1;letter-spacing:-.035em;font-weight:700;white-space:nowrap}
.rv-ea{margin:0;font-size:clamp(16px,1.15vw,19px);line-height:1.3;color:rgba(0,0,0,.8);text-wrap:balance}
.rv-close{margin:clamp(34px,7vh,80px) 0 0 auto;max-width:27ch;text-align:right;font-size:clamp(22px,2.1vw,38px);line-height:1.12;letter-spacing:-.025em;font-weight:400;text-wrap:balance}

/* 09 the handoff (black): revenue rests on relationships */
.rv-br{--bg:#000;margin:0 calc(var(--m) * -1);padding:12vh var(--m);background:#000;color:#fff}
.rv-br .xh{color:#fff}
.rv-brw{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:3vw;margin-top:3vh;align-items:start}
.rv-opn{color:#fff;font-size:clamp(28px,3vw,54px);line-height:1.04;letter-spacing:-.035em;max-width:13ch}
.rv-opn span{display:block;font-weight:350}
.rv-opn b{display:block;font-weight:750;margin-top:.25em}
.rv-tree{display:flex;flex-direction:column;row-gap:clamp(22px,4.4vh,48px)}
.rv-nx{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;row-gap:12px;align-items:baseline;width:100%;padding:8px 0;text-align:left;cursor:pointer;background:none;color:#fff;transition:opacity .35s var(--ease)}
.rv-nx .ad{grid-row:1/3;font-family:var(--serif);font-style:italic;font-size:clamp(26px,2vw,34px);color:#fff;-webkit-text-stroke:.05em #fff}
.rv-nx .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.2vw,76px);letter-spacing:-.05em;line-height:.9;color:#000;-webkit-text-stroke:3px #fff;paint-order:stroke fill;transition:color .35s var(--ease)}
.rv-nx .q{font-family:var(--serif);font-style:italic;font-size:clamp(22px,1.95vw,32px);line-height:1.2;max-width:34ch;text-wrap:balance;color:#fff;-webkit-text-stroke:.02em #fff;letter-spacing:.016em}
.rv-nx:hover .n,.rv-nx:focus-visible .n{color:#fff}
.rv-tree:has(.rv-nx:hover,.rv-nx:focus-visible) .rv-nx:not(:hover):not(:focus-visible){opacity:.62}
.rv-nx:focus-visible{outline:2px solid #fff;outline-offset:6px}

.rm .rv *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.rv *{transition:none!important;animation:none!important}}

@media (max-height:620px) and (min-width:761px){
  .rv-dk,.rv-br{padding-top:9vh;padding-bottom:9vh}
  .rv-yr,.rv-dec,.rv-pr,.rv-end{padding-top:9vh;padding-bottom:9vh}
  .rv-yr{padding-top:6vh}
  .rv-yf{margin-top:26px}
  .rv-h1{font-size:clamp(28px,3.4vw,52px)}
  .rv-h2{font-size:clamp(26px,3vw,46px)}
  .rv-pr .rv-h2{font-size:clamp(28px,3.4vw,52px)}
  .rv-hero .dkick .t{font-size:clamp(34px,3.9vw,58px)}
  .rv-k{font-size:clamp(20px,2.1vw,32px)}
  .rv-bq{font-size:clamp(18px,1.6vw,24px)}
  .rv-grow{font-size:clamp(46px,5.4vw,90px)}

  .rv-field{row-gap:14px}
  .rv-ev{padding-top:0}
}

/* phones, and tablets held upright: every moment recomposed for the width, nothing shrunk */
@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .rv :is(.rv-bq,.rv-nx .q){letter-spacing:.018em;-webkit-text-stroke:.018em currentColor}
  .rv .rv-mi{font-size:13.5px;font-stretch:95%;font-variation-settings:"wdth" 95;letter-spacing:.06em}
  .rv-h1{font-size:clamp(28px,8.2vw,38px)}
  .rv-h2{font-size:clamp(28px,8vw,36px)}
  .rv-bq{font-size:clamp(20px,5.8vw,24px);max-width:none}
  .rv-dk,.rv-br{padding:10vh var(--m) 9vh}
  .rv-yr,.rv-dec,.rv-pr,.rv-end{padding:10vh 0 9vh}
  /* 01: the word across the full width, its four layers named below it in the same order, top to bottom */
  .rv-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"k" "w" "a" "q";row-gap:0;min-height:0;padding:3vh 0 7vh}
  .rv-hk{margin-bottom:2.2vh}
  .rv-word{flex-direction:column;height:auto!important}
  .rv-parts{margin-top:2.6vh;display:grid;row-gap:9px}
  .rv-parts li{position:static;transform:none;font-size:14px}
  .rv-parts li::before{width:22px}
  .rv-k{margin-top:5vh;font-size:clamp(24px,7vw,30px);max-width:none}
  .rv-hq{justify-self:start;text-align:left;margin-top:3vh}
  /* 02: the three words stacked, held together by one double rule running beside them: one and the same total */
  .rv-dk.rv-same{grid-template-columns:auto minmax(0,1fr);grid-template-rows:none;column-gap:16px;min-height:0}
  .rv-same .rv-h1{grid-column:1/-1;margin-bottom:6vh;font-size:clamp(26px,7.4vw,34px)}
  .rv-om,.rv-oc{display:contents}
  .rv-om p,.rv-oc li{grid-column:2}
  .rv-om p:nth-child(1){grid-row:2}.rv-oc li:nth-child(1){grid-row:3}
  .rv-om p:nth-child(2){grid-row:4}.rv-oc li:nth-child(2){grid-row:5}
  .rv-om p:nth-child(3){grid-row:6}.rv-oc li:nth-child(3){grid-row:7}
  .rv-om p{padding-top:.08em}
  .rv-oc li{margin:14px 0 5.5vh;white-space:normal;font-size:18px}
  .rv-oc li:last-child{margin-bottom:0}
  .rv-oc b{font-size:14px}
  .rv-sum2{grid-column:1;grid-row:2/8;margin:0;padding:0;border-top:0;border-left:3px solid #fff;width:7px;position:relative}
  .rv-sum2::after{position:absolute;top:0;bottom:0;left:2px;border-top:0;border-left:1px solid #fff}
  /* 03: the drawing across the width; the fact and Lena's question follow it instead of sitting beside it */
  .rv-yf{display:flex;flex-direction:column;aspect-ratio:auto;margin-top:5vh}
  .rv-yf svg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:var(--ar,1.5)}
  .rv-yf .rv-lb{font-size:13px;letter-spacing:.04em}
  .rv-yf .rv-lb.c{width:min-content;background:#000;padding:1px 3px;line-height:1.05}
  .rv-yf .rv-st{font-size:13.5px}
  .rv-yf .rv-st[data-k="3"]{transform:translate(-100%,-50%);padding:0}
  .rv-yf .rv-lb.o.l{transform:translate(-100%,-100%)}
  .rv-mo{position:static;order:1;margin:6px 0 0;font-size:13px}
  .rv-yf .rv-note,.rv-yf .rv-fq{position:static;transform:none;max-width:none}
  .rv-yf .rv-note{order:2;margin-top:4.5vh;font-size:18px}
  .rv-yf .rv-fq{order:3;margin-top:2vh;font-size:22px}
  /* 04: the lines across the full width, each name set just above the end it belongs to */
  .rv-sgm{grid-template-columns:minmax(0,1fr);row-gap:5vh}
  .rv-slp{min-height:0;height:clamp(380px,56vh,460px)}
  .rv-slp .up{transform:translate(0,calc(-100% - 8px))}
  .rv-slp .up.r{transform:translate(-100%,calc(-100% - 8px));text-align:right}
  .rv-slp .sy.r{transform:translateX(-100%)}
  .rv-slp .dn{transform:translate(0,8px)}
  .rv-slp .dn.r{transform:translate(-100%,8px);text-align:right}
  .rv-slp .sy:not(.r){transform:none}
  .rv-slp .se{font-size:15px}
  .rv-tabs{--hx:4px}
  .rv-tabs button{letter-spacing:.035em}
  .rv-dec{grid-template-columns:minmax(0,1fr);row-gap:6vh}
  .rv-grow{font-size:clamp(44px,14.4vw,70px);-webkit-text-stroke:2.6px #000}
  .rv-field{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;row-gap:26px;column-gap:18px;align-items:start}
  .rv-sgw{grid-column:1/-1;grid-row:1;justify-items:start;text-align:left}
  .rv-opt li{grid-column:auto!important;grid-row:auto!important;justify-self:start!important;margin:0!important;max-width:none}
  .rv-opt b{font-size:20px}
  .rv-opt span,.rv-opt em{font-size:16px}
  .rv-pr{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "e" "s";row-gap:5vh}
  .rv-ev{padding-top:0}
  .rv-evl{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .rv-me{font-size:18px}
  .rv-sea{flex-wrap:wrap;row-gap:10px}
  .rv-sea span{font-size:20px}
  .rv-sea i{flex-basis:40%}
  .rv-dep{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "g" "t";row-gap:4vh}
  .rv-dep .rv-stage{margin-top:3vh}
  .rv-t{justify-self:start}
  /* 07: the scale keeps its place beside the stack; the stack is sized to the width left beside it */
  .rv-stage{height:auto;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"g s" "r r";column-gap:14px;row-gap:5vh}
  .rv-gauge{grid-area:g}
  .rv-stack{grid-area:s;container-type:inline-size;min-width:0}
  .rv-gauge{min-width:max-content;padding-left:calc(6.4em + 20px);font-size:13.5px}
  .rv-tk span{font-size:13px}
  .rv-tk::after{width:10px}
  .rv-tk[data-k="ly"]::after{width:16px}
  .rv-base{font-size:18.3cqw}
  .rv-sw[data-k="0"]{font-size:10.3cqw}
  .rv-sw[data-k="1"]{font-size:7.9cqw}
  .rv-sw[data-k="2"]{font-size:max(13px,6cqw)}
  .rv-rl{grid-area:r;font-size:22px!important}
  .rv-twice{max-width:none}
  .rv-rd{max-width:none;right:0}
  .rv-rd .rv-bq{max-width:none}
  .rv-three{grid-template-columns:minmax(0,1fr);row-gap:7vh}
  .rv-eq{min-height:0;font-size:clamp(24px,7vw,30px);white-space:normal}
  .rv-close{text-align:left;margin-left:0;font-size:22px}
  .rv-brw{display:flex;flex-direction:column;row-gap:4vh}
  .rv-opn{font-size:clamp(24px,7.4vw,30px)}
  .rv-nx .n{font-size:clamp(26px,8.2vw,44px);-webkit-text-stroke:2.4px #fff}
  .rv-nx .q{font-size:21px}
  .rv-nx .ad{font-size:23px}
}

/* ---------- Deep Dive D.2 Customers (built 29.09.2026 from the approved visual proofs S01 to S04 and S07; S05 and S06 are added when approved).
   Each frame is one composed stage, scaled to the window (--u = one unit of the 970 wide proof). Static first: every frame shows its final state
   without script; with script, the parts arrive quietly when the frame enters the view. Solid rings and dots = what is there, dashed = expected
   or absent, outline type = in transition. ---------- */
.cu{margin-top:calc(-7vh + 23px);--bar:74px}
.cu-fr{position:relative;display:grid;place-items:center;margin:0 calc(var(--m) * -1);min-height:calc(100svh - var(--bar));background:#fff;color:#000;overflow:hidden}
.cu-fr.cu-dk{background:#000;color:#fff}
.cu-st{position:relative;width:min(100%,calc((100svh - var(--bar)) * 970 / 458));aspect-ratio:970/458;container-type:inline-size;--u:calc(100cqw / 970)}
.cu-st>div[role="img"]{position:absolute;inset:0}
.cu-g{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cu-x{position:absolute;margin:0;white-space:nowrap;line-height:1;font-family:var(--sans);font-stretch:100%;font-variation-settings:normal}
.cu-fr .cu-bq{font-family:var(--serif);font-style:italic;font-weight:400}
.cu-fr.cu-dk .cu-bq{-webkit-text-stroke:.3px #fff;letter-spacing:.015em}
.cu-mid{width:100%;text-align:center;-webkit-text-stroke:calc(var(--u) * .45) #000}
.cu-lb{font-stretch:100%;font-variation-settings:normal;position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:999px;background:#fff;color:#000;font-weight:700;letter-spacing:-.045em;line-height:1}
.cu-tg{font-stretch:100%;font-variation-settings:normal;position:absolute;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font-weight:700;letter-spacing:-.03em;line-height:1;z-index:2;border-radius:999px}
.cu-cap,.cu-cap2{font-stretch:78%;text-transform:uppercase}
.cu-cap{background:#fff;padding:calc(var(--u) * 3) calc(var(--u) * 8);z-index:2}
.cu-cap2{font-stretch:92%;text-transform:uppercase}
.cu-cap3{text-transform:uppercase;color:#111}
.cu-body{color:#1a1a1a}
.cu-bc{font-weight:800;font-stretch:112%;letter-spacing:-.03em;transform:translate(-50%,-50%) rotate(54deg)}
.cu-hr{position:absolute;height:1px;background:#000}
.cu-fr .cu-hd{display:none}
/* motion: only when the page starts it (script) and the visitor has not asked for less movement */
.cu-anim .cu-fr .m{opacity:0;transition:opacity .5s var(--ease) calc(var(--d,0s) * .3),transform .7s var(--ease) calc(var(--d,0s) * .3),stroke-dashoffset .9s var(--ease) calc(var(--d,0s) * .3)}
.cu-anim .cu-fr.is-in .m{opacity:var(--o,1)}
.cu-anim .cu-fr .m.rise{transform:translateY(calc(var(--u) * 14))}
.cu-anim .cu-fr.is-in .m.rise{transform:none}
.cu-anim .cu-fr .m.pop{transform:scale(.9);transform-origin:center;transform-box:fill-box}
.cu-anim .cu-fr.is-in .m.pop{transform:none}
.cu-anim .cu-fr .m.dr{stroke-dasharray:1;stroke-dashoffset:1}
.cu-anim .cu-fr.is-in .m.dr{stroke-dashoffset:0}
.cu-anim .cu-fr .m.dot{transform:scale(.4);transform-origin:center;transform-box:fill-box}
.cu-anim .cu-fr.is-in .m.dot{transform:none}
.cu-anim .cu-fr .cu-tg.pop,.cu-anim .cu-fr .cu-lb.rise{transition-property:opacity,transform}
@media (prefers-reduced-motion:reduce){.cu-anim .cu-fr .m{opacity:var(--o,1);transform:none;stroke-dashoffset:0;transition:none}}

.cu-bq2{-webkit-text-stroke:calc(var(--u) * .5) #000;letter-spacing:.012em}
.cu-lt{display:block;font-weight:700;letter-spacing:-.045em;line-height:1}
.cu-syn{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:calc(var(--u) * 4) calc(var(--u) * 12);margin-top:0;width:calc(var(--u) * 252);color:#3a3a3a;line-height:1.1;font-style:normal}
.cu-syn i{font-style:normal;white-space:nowrap}
.cu-syn .s1{font-size:calc(var(--u) * 13.5);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cu-syn .s2,.cu-syn .s4{font-family:var(--serif);font-style:italic;font-size:calc(var(--u) * 17)}
.cu-syn .s3{font-size:calc(var(--u) * 15);font-weight:300;letter-spacing:-.02em}
.cu-syn .s5{font-size:calc(var(--u) * 13.5);font-weight:650;letter-spacing:.12em;text-transform:uppercase;font-stretch:88%}
.cu-syn .s6{font-size:calc(var(--u) * 15);font-weight:700;letter-spacing:-.03em}
.cu-syn .s7{font-size:calc(var(--u) * 13.5);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-stretch:125%}

/* S05 */
.cu-own,.cu-own2,.cu-hist{font-size:calc(var(--u)*134);line-height:1;letter-spacing:-.02em;pointer-events:none}
.cu-own,.cu-own2{transform-origin:0 100%;transform:skewX(11deg)}
.cu-hist{font-size:calc(var(--u)*128);letter-spacing:-.035em}
.cu-own{color:#8c8c8c;-webkit-text-stroke:calc(var(--u)*2) #8c8c8c;z-index:0}
.cu-own2{color:#fff;z-index:0}
.cu-hist{color:#d9d9d9}
.cu-c5{line-height:1.3;letter-spacing:.14em;font-weight:500;font-stretch:88%;text-align:center}
#cuT5,.cu-st h3{z-index:2}

.cu-fr.cu-ab{padding-bottom:7vh}
.cu-fr.cu-gap{padding:17vh 0 10vh}
.cu-gap .cu-st{aspect-ratio:970/518;width:min(94%,calc((100svh - var(--bar)) * 970 / 518 * .96))}
.cu-fr.cu-gap::before{content:"";position:absolute;top:8vh;left:50%;width:84px;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent)}
.cu-fr.cu-gap::after{content:"";position:absolute;top:calc(8vh - 2px);left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#000}
.cu-s4{padding-top:5vh}
.cu-s4 .cu-st{aspect-ratio:970/520;width:min(94%,calc((100svh - var(--bar)) * 970 / 520 * .96))}

/* Customers mobile stages (phones and portrait tablets) */
.cu-ms{display:none}
@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .cu{margin-top:calc(-7vh + 18px)}
  .cu-fr{display:block;min-height:0;padding:0}
  .cu-fr .cu-st{display:none}
  .cu-ms{display:block;position:relative;width:100%;max-width:560px;margin:0 auto;container-type:inline-size;--u:calc(100cqw / 390)}
  .cu-mg{position:absolute;inset:0}
  .cu-fr.cu-s4{padding-top:0}
  .cu-fr.cu-ab{padding-bottom:0}
  .cu-fr.cu-gap{padding:0}
  .cu-fr.cu-gap::before{top:44px}
  .cu-fr.cu-gap::after{top:42px}
  .cu-fr.cu-gap .cu-ms{margin-top:88px;margin-bottom:40px}
  .cu-fr:not(.cu-dk) .cu-ms:first-child{}
  .cu-syn{width:calc(var(--u) * 284)}
  .cu-syn .s1,.cu-syn .s5,.cu-syn .s7{font-size:max(13px,calc(var(--u) * 15))}
  .cu-syn .s2,.cu-syn .s4{font-size:calc(var(--u) * 19)}
  .cu-syn .s3,.cu-syn .s6{font-size:calc(var(--u) * 17)}
  .cu-syn{gap:calc(var(--u) * 5) calc(var(--u) * 13)}
  .cu-ms .cu-mown,.cu-ms .cu-mown2,.cu-ms .cu-mhist{font-size:calc(var(--u) * 84);line-height:1;letter-spacing:-.02em;pointer-events:none}
  .cu-ms .cu-mown{color:#8c8c8c;-webkit-text-stroke:calc(var(--u) * 2) #8c8c8c}
  .cu-ms .cu-mown2{color:#fff}
  .cu-ms .cu-mown,.cu-ms .cu-mown2{transform-origin:0 100%;transform:skewX(11deg)}
  .cu-ms .cu-mhist{color:#d9d9d9;letter-spacing:-.035em}
  .cu-ms .cu-c5{line-height:1.3;letter-spacing:.12em;font-weight:500;font-stretch:88%}
  .cu-ms .cu-mid4{-webkit-text-stroke:calc(var(--u) * .45) #000}
  .cu-ms .cu-bq2{-webkit-text-stroke:calc(var(--u) * .5) #000}
}

/* S06 */
.cu-fr.cu-s6{background:linear-gradient(90deg,#fff 50%,#000 50%);padding:9vh 0 9vh}
.cu-s6 .cu-st{width:min(94%,calc((100svh - var(--bar)) * 970 / 458 * .84))}
.cu-s6 .cu-art{position:absolute;display:block;max-width:none;-webkit-mask-image:none;mask-image:none}
.cu-s6 .cu-ex{position:absolute;left:0;width:100%;height:calc(30vh + var(--u) * 70)}
.cu-s6 .cu-ex.cu-ext{bottom:calc(100% - var(--u) * 70)}
.cu-s6 .cu-ex.cu-exb{top:calc(100% - var(--u) * 70)}
.cu-s6 .cu-w{color:#fff}
.cu-s6 .cu-w6{color:#fff;-webkit-text-stroke:.4px #fff;letter-spacing:.015em}
.cu-s6 .cu-l6{white-space:nowrap;line-height:1;font-stretch:100%;font-variation-settings:normal;text-align:right;letter-spacing:.05em;font-weight:400}
.cu-anim .cu-fr .m.slx{transform:translateX(calc(var(--u) * 28))}
.cu-anim .cu-fr.is-in .m.slx{transform:none}
.cu-anim .cu-fr .cu-art.m{transition:opacity 1.1s var(--ease) calc(var(--d,0s) * .3),transform 1.2s var(--ease) calc(var(--d,0s) * .3)}

@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .cu-fr.cu-s6{background:#030303;padding:0}
  .cu-ms .cu-mart{position:absolute;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent)}
  .cu-ms .cu-mart .cu-art{position:absolute;-webkit-mask-image:none;mask-image:none;max-width:none}
  .cu-ms .cu-ml{display:flex;align-items:center;gap:calc(var(--u) * 10);white-space:nowrap;font-weight:400;letter-spacing:.04em;line-height:1;font-stretch:100%;font-variation-settings:normal}
  .cu-ms .cu-ml i{flex:1;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.6}
  .cu-ms .cu-w6{-webkit-text-stroke:.5px #fff}
}

.cu-s6 .cu-fd{position:absolute;left:-100vw;right:-100vw;pointer-events:none}
.cu-s6 .cu-fdt{bottom:calc(100% - var(--u) * 70);height:calc(20vh + var(--u) * 70);background:linear-gradient(180deg,#fff 0,#fff 40%,rgba(255,255,255,.94) 50%,rgba(255,255,255,.78) 60%,rgba(255,255,255,.5) 70%,rgba(255,255,255,.22) 80%,rgba(255,255,255,.06) 90%,rgba(255,255,255,0))}
.cu-s6 .cu-fdb{top:calc(100% - var(--u) * 60);height:calc(20vh + var(--u) * 60);background:linear-gradient(180deg,rgba(3,3,3,0),rgba(3,3,3,.03) 10%,rgba(3,3,3,.1) 20%,rgba(3,3,3,.24) 30%,rgba(3,3,3,.44) 42%,rgba(3,3,3,.66) 54%,rgba(3,3,3,.85) 66%,rgba(3,3,3,.96) 76%,#030303 86%,#030303)}
.cu-s6 .cu-st{--lx:calc(var(--m) - 50vw + var(--u) * 485)}
.cu-s6 .cu-lgd{position:absolute;width:calc(var(--u) * 5.2);height:calc(var(--u) * 5.2);border-radius:50%;background:#000}

@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .cu-ms.cu-fit{width:min(100%,calc((100svh - 100px) * 390 / var(--H)))}
  .cu-fr.cu-s6{background:#fff}
  .cu-mgap{position:relative}
  .cu-mgap::before{content:"";position:absolute;top:40px;left:50%;width:84px;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);z-index:2}
  .cu-mgap::after{content:"";position:absolute;top:38px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#000;z-index:2}
  .cu-mdk::before{background:linear-gradient(90deg,transparent,#fff 35%,#fff 65%,transparent)}
  .cu-mdk::after{background:#fff}
  .cu-mgap .cu-ms{margin-top:84px}
  .cu-syn .s2,.cu-syn .s3,.cu-syn .s4,.cu-syn .s6{font-size:max(13px,calc(var(--u) * 17))}
  .cu-ms .cu-bh{transform:none !important}
  .cu-ms .cu-cloud{font-family:var(--serif);font-style:italic;font-weight:400;font-size:calc(var(--u) * 19);line-height:1.38;color:#000;white-space:normal;letter-spacing:.005em}
  .cu-ms .cu-cloud span{color:#000}
}
@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){.cu-f1 .cu-ms.cu-fit{width:min(100%,calc((100svh - 170px) * 390 / var(--H)))}}

/* S08, S09, bridge */
.cu-fr.cu-air{padding:6vh 0}
.cu-air .cu-st{aspect-ratio:970/520;width:min(94%,calc((100svh - var(--bar)) * 970 / 520 * .96))}
.cu-br{margin:0 calc(var(--m) * -1);padding:12vh var(--m) 13vh;background:#fff;color:#000}
.cu-brw{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:4vw;margin-top:4vh;align-items:start}
.cu-opn{font-size:clamp(28px,3vw,54px);line-height:1.04;letter-spacing:-.035em;max-width:17ch;margin:0}
.cu-opn span{display:block;font-weight:350}
.cu-opn b{display:block;font-weight:750;margin-top:.25em}
.cu-brg{display:block;width:min(100%,460px);height:auto;margin-top:5vh;overflow:visible}
.cu-btree{padding-top:.4em}
.cu-nx{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;row-gap:12px;align-items:baseline;width:100%;padding:8px 0;text-align:left;cursor:pointer;background:none;color:#000;transition:opacity .35s var(--ease)}
.cu-nx .ad{grid-row:1/3;font-family:var(--serif);font-style:italic;font-size:clamp(26px,2vw,34px);color:#000;-webkit-text-stroke:.05em #000}
.cu-nx .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.2vw,76px);letter-spacing:-.05em;line-height:.9;color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill;transition:color .35s var(--ease)}
.cu-nx .q{font-family:var(--serif);font-style:italic;font-size:clamp(22px,1.95vw,32px);line-height:1.2;max-width:34ch;text-wrap:balance;color:#000;-webkit-text-stroke:.02em #000;letter-spacing:.016em}
.cu-nx:hover .n,.cu-nx:focus-visible .n{color:#000}
.cu-nx:focus-visible{outline:2px solid #000;outline-offset:6px}
.cu-anim .cu-br .m{opacity:0;transition:opacity .5s var(--ease) calc(var(--d,0s) * .3),transform .7s var(--ease) calc(var(--d,0s) * .3),stroke-dashoffset .9s var(--ease) calc(var(--d,0s) * .3)}
.cu-anim .cu-br.is-in .m{opacity:var(--o,1)}
.cu-anim .cu-br .m.rise{transform:translateY(14px)}
.cu-anim .cu-br.is-in .m.rise{transform:none}
.cu-anim .cu-br .m.dr{stroke-dasharray:1;stroke-dashoffset:1}
.cu-anim .cu-br.is-in .m.dr{stroke-dashoffset:0}
.cu-anim .cu-br .m.dot{transform:scale(.4);transform-origin:center;transform-box:fill-box}
.cu-anim .cu-br.is-in .m.dot{transform:none}
@media (prefers-reduced-motion:reduce){.cu-anim .cu-br .m{opacity:var(--o,1);transform:none;stroke-dashoffset:0;transition:none}}

@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .cu-fr.cu-air{padding:0}
  .cu-air .cu-st{display:none}
  .cu-br{padding:9vh var(--m) 10vh}
  .cu-brw{grid-template-columns:1fr;row-gap:4vh}
  .cu-opn{font-size:clamp(24px,7.4vw,30px);max-width:none}
  .cu-brg{width:100%;margin-top:4vh}
  .cu-nx .n{font-size:clamp(26px,8.2vw,44px);-webkit-text-stroke:2.4px #000}
  .cu-nx .q{font-size:21px}
  .cu-nx .ad{font-size:23px}
}

/* typographic accents S08, S09, bridge */
.cu-aci{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.16em;letter-spacing:.004em;-webkit-text-stroke:.025em currentColor}
.cu-cl{white-space:nowrap}
.cu-cl i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.3em;letter-spacing:.01em;margin-right:.3em;-webkit-text-stroke:.02em currentColor}
.cu-cl b{font-weight:800}
.cu-ol{color:#000;-webkit-text-stroke:calc(var(--u) * 3) #fff;paint-order:stroke fill;font-stretch:112%}
.cu-opn em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.22em;line-height:1.02;letter-spacing:.005em;-webkit-text-stroke:.02em currentColor;margin-top:.3em}
.cu-nx .n{font-size:clamp(44px,5.3vw,100px)}
@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .cu-nx .n{font-size:clamp(26px,8.2vw,46px)}
  .cu-ms .cu-cl i{font-size:.3em}
}

.cu-s6 .cu-fd{display:none}
.cu-ms .cu-mart{-webkit-mask-image:none !important;mask-image:none !important}

/* ---------- Deep Dive D.3 Partnerships. One continuous page on a 970 x 5700 stage, scaled to the window; real text and SVG, the two monoliths as one rendered image. ---------- */
.pa{--bar:74px;margin:0 calc(var(--m) * -1);background:#fff;color:#000;overflow:hidden}
.pa-w{position:relative;overflow:hidden;height:calc(5700px * var(--k,1))}
.pa-s{position:absolute;left:0;top:0;width:970px;height:5700px;transform-origin:0 0;transform:translateX(var(--x,0px)) scale(var(--k,1));-webkit-font-smoothing:antialiased}
.pa-s>svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.pa-s>img{position:absolute;display:block;max-width:none}
.pa-bd{position:absolute;left:-2400px;width:5770px;display:block}
.pa-gp{position:absolute;left:0;width:970px;background:#efefef;border-radius:0 0 44px 44px}
.pa p,.pa h2{margin:0;font-variation-settings:normal}
.pa-s h2{font-variation-settings:normal}
.pa-s .pw{position:absolute;white-space:nowrap;line-height:1;text-transform:uppercase;font-weight:900;font-stretch:75%;letter-spacing:-.012em}
.pa-s .pt{position:absolute}
.pa-s .pr{text-align:right}
.pa-s .pc{position:absolute;font-stretch:92%;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:13px;line-height:1.25;white-space:nowrap}
.pa-s .pd{position:absolute;font-size:13.5px;line-height:1.38}
.pa-s h2 span{display:inline-block}
/* closing: where to go next */
.pa-br{background:#000;color:#fff;padding:4vh var(--m) 10vh;margin-top:-1px}
.pa-br .xh{display:block;opacity:.6}
.pa-br .pa-brk{margin-top:2.2vh;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,34px);line-height:1.2;color:#fff;max-width:28em}
.pa-br ul{list-style:none;margin-top:5vh;border-top:1px solid rgba(255,255,255,.28)}
.pa-br li{border-bottom:1px solid rgba(255,255,255,.28)}
.pa-nx{display:grid;grid-template-columns:clamp(70px,9vw,150px) minmax(0,1fr) auto;align-items:center;width:100%;padding:2.6vh 0;text-align:left;cursor:pointer;background:none;color:#fff}
.pa-nx .ad{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2vw,34px);-webkit-text-stroke:.05em #fff}
.pa-nx .n{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;text-transform:uppercase;font-size:clamp(40px,5.3vw,96px);letter-spacing:-.05em;line-height:.95;color:#000;-webkit-text-stroke:2.6px #fff;paint-order:stroke fill;transition:color .35s var(--ease)}
.pa-nx .ar{position:relative;display:block;width:clamp(50px,6vw,110px);height:1px;background:#fff;transition:width .45s var(--ease)}
.pa-nx .ar::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg) translate(-2px,2px)}
.pa-nx:hover .n,.pa-nx:focus-visible .n{color:#fff}
.pa-nx:hover .ar,.pa-nx:focus-visible .ar{width:clamp(70px,8vw,150px)}
.pa-nx:focus-visible{outline:2px solid #fff;outline-offset:4px}
#deep.pa-on .dconn{margin-top:0}
/* motion (only when the visitor has not asked for less) */
.pa-anim .m{opacity:0;transition:opacity .7s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),stroke-dashoffset 1.2s var(--ease) var(--d,0s)}
.pa-anim .m.is-in{opacity:var(--o,1)}
.pa-anim .m.rise{transform:translateY(16px)}
.pa-anim .m.rise.is-in{transform:none}
.pa-anim path.m.dr{stroke-dasharray:1;stroke-dashoffset:1}
.pa-anim path.m.dr.is-in{stroke-dashoffset:0}
.pa-anim circle.m.dot{transform:scale(.3);transform-origin:center;transform-box:fill-box}
.pa-anim circle.m.dot.is-in{transform:none}
.pa-anim img.pa-gl{transform:translateY(46px)}
.pa-anim img.pa-gl.is-in{transform:none;transition-duration:.9s,1.5s,0s}
.pa-anim .pa-rbp,.pa-anim .pa-cn{stroke-dasharray:1}
@media (prefers-reduced-motion:reduce){.pa-anim .m{opacity:var(--o,1);transform:none;transition:none}}

/* Partnerships on the phone: recomposed as a vertical book, one column, the same grammar (fields, outline type, fine lines, one thread). */
.pa-m{display:none}
@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){
.pa-w{display:none}
.pa-m{display:block;position:relative;container-type:inline-size;isolation:isolate;overflow:hidden;background:#000;--fw:clamp(70px,24vw,118px)}
.pa-m .pm{position:relative;padding:54px 20px 58px}
.pa-m .pm-w{background:#fff;color:#000}.pa-m .pm-g{background:#efefef;color:#000}.pa-m .pm-k{background:#000;color:#fff}
.pa-m p,.pa-m h2{margin:0;font-variation-settings:normal}
.pa-m .pm-h,.pa-m .pm-h2,.pa-m .pm-still,.pa-m .pw2,.pa-m .pw3,.pa-m .pm-jl,.pa-m .pm-jm{font-weight:900;font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em;line-height:.92}
.pa-m .pm-h{white-space:nowrap;display:block}.pa-m .fw{display:inline-block}
.pa-m .pm-h2{font-size:clamp(46px,15.5vw,72px)}
.pa-m .pw2{font-size:clamp(46px,16vw,70px)}
.pa-m .pw3{font-size:clamp(72px,25vw,110px);line-height:.86}
.pa-m .pm-still{display:block;white-space:nowrap}
.pa-m .pm-jl,.pa-m .pm-jm{display:block;white-space:nowrap}.pa-m .pm-jm{margin-top:.02em}.pa-m #pmDot{font-weight:inherit}
.pa-m .pm-ol{color:#fff;-webkit-text-stroke:2.6px #000;paint-order:stroke fill}
.pa-m .pm-ol.g{color:#efefef}.pa-m .pm-k .pm-ol{color:#000;-webkit-text-stroke-color:#fff}
.pa-m .pc{font-stretch:92%;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:13px;line-height:1.25}
.pa-m .pd{font-size:14.5px;line-height:1.38}
.pa-m .pb,.pa-m .pbb,.pa-m .pbig,.pa-m .pbs,.pa-m .pm-meets{font-family:var(--serif);font-style:italic;font-weight:400;-webkit-text-stroke:.3px currentColor;line-height:1.2}
.pa-m .pb{font-size:24px}.pa-m .pbb{font-size:clamp(30px,9.6vw,40px);line-height:1.05}.pa-m .pbig{font-size:clamp(22px,6.2vw,26px);max-width:calc(100% - 92px);margin-top:14px}.pa-m .pbs{font-size:17px;line-height:1.3}.pa-m .pm-meets{font-size:clamp(34px,11vw,46px);line-height:1;margin-top:-2px}
.pa-m .pt2{font-weight:800;font-size:19px;letter-spacing:-.03em;line-height:1.1;margin-top:26px}
.pa-m .pbold{font-weight:800;font-size:17px;letter-spacing:-.015em;line-height:1.3}
.pa-m .pm-light{font-weight:300;letter-spacing:-.02em;font-size:30px;line-height:1}
.pa-m .pm-s1{padding-top:36px}.pa-m .pm-s1 .pb{margin-top:40px;text-align:center}
.pa-m .pm-s1 .pc{margin-top:22px}
.pa-m .pm-s2 .pw2{text-align:left;margin-top:0}
.pa-m .pb,.pa-m .pbb,.pa-m .pbig{text-wrap:balance}
.pa-m .pm-sgs{margin-top:16px}
.pa-m .pm-s5 .pm-light{margin-top:14px}
.pa-m .pw2{margin-top:44px;text-align:center}
.pa-m .pt2{text-align:center}
/* two monoliths and the ribbon between them */
.pa-m .pm-mono{margin-top:26px}
.pa-m .pm-blk{width:76%;padding:22px 20px 26px;border-radius:8px;color:#fff;background:linear-gradient(112deg,#191919 0,#050505 34%,#000 100%);box-shadow:inset 1px 0 0 rgba(255,255,255,.24),inset -14px 0 0 #232323}
.pa-m .pm-a{margin-right:auto}.pa-m .pm-b{margin-left:auto}
.pa-m .pm-blk .pd{color:#dadada;margin-top:14px}
.pa-m .pm-bridge{display:block;width:100%;height:170px;overflow:visible}
/* lists whose lines meet in one axis */
.pa-m .pm-ax-w{position:relative;margin-top:14px}
.pa-m .pm-lst{position:relative}
.pa-m .pm-row{position:absolute;left:0;right:calc(var(--fw) + 24px);display:flex;flex-direction:column;justify-content:center}
.pa-m .pm-rn{font-stretch:92%;text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:14px;line-height:1.2}
.pa-m .pm-rd{font-size:13px;color:#444;line-height:1.3;margin-top:3px}
.pa-m .pm-fw{position:absolute;right:7px;top:0;width:var(--fw);height:100%}
.pa-m .pm-fan{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pa-m .pm-dot{position:absolute;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#000}
.pa-m .pm-gap{position:relative;height:88px;display:flex;align-items:center}
.pa-m .pm-gapt{padding-right:calc(var(--fw) + 24px)}
.pa-m .pm-gapt .pc{font-size:13px}
.pa-m .pm-axis{position:absolute;right:0;width:7px;border:solid #000;border-width:0 1px}
.pa-m .pm-k .pm-axis{border-color:rgba(255,255,255,.7)}
.pa-m .pm-gap .pm-axis{top:-18px;bottom:-18px}.pa-m .pm-s3 .pm-gap .pm-axis{top:-17px;bottom:-17px}
.pa-m .pm-s2 .pm-gap{height:114px;align-items:flex-start;padding-top:12px}.pa-m .pm-cap2{position:absolute;left:0;bottom:4px}
.pa-m .pm-pill{display:inline-block;border:1px solid #fff;border-radius:99px;padding:8px 16px;font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1;white-space:nowrap;align-self:flex-start}
.pa-m .pm-s3{--fw:clamp(44px,13vw,80px)}
.pa-m .pm-s3 .pm-dot{background:#fff}
.pa-m .pm-s3 .pm-fan path{opacity:.6}
/* together */
.pa-m .pm-s3b{padding-bottom:88px}
.pa-m .pm-lens{display:grid;place-items:center;margin:26px -20px 0}
.pa-m .pm-lens>*{grid-area:1/1}.pa-m .pm-lens svg{width:100%;height:auto;display:block}
.pa-m .pm-jv{color:#000;font-weight:900;font-stretch:75%;text-transform:uppercase;font-size:20px;line-height:1;text-align:center}
/* value meets constraint, the field rises out of the black */
.pa-m .pm-up{border-radius:30px 30px 0 0;margin-top:-30px;z-index:1}
.pa-m .pm-pairs{margin:34px 0 28px}
.pa-m .pm-pr{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:15px;text-transform:uppercase;letter-spacing:.06em;line-height:1}
.pa-m .pm-pr b{font-weight:800}.pa-m .pm-pr span{font-weight:300}
.pa-m .pm-pr svg{flex:1;min-width:26px;height:10px;display:block}
/* operating fields */
.pa-m .pm-fds{display:grid;gap:10px;margin-top:20px}
.pa-m .pm-fd{display:flex;align-items:center;gap:14px;background:#121212;border:1px solid #2c2c2c;border-radius:14px;padding:14px 16px;min-height:88px}
.pa-m .pm-num{font-size:52px;font-weight:200;line-height:1;color:#121212;-webkit-text-stroke:1.2px #fff;paint-order:stroke fill;min-width:64px}
.pa-m .pm-fd b{display:block;font-size:15px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1.15}
.pa-m .pm-fd span:not(.pm-num){display:block;font-size:13.5px;color:#d0d0d0;margin-top:5px;line-height:1.3}
.pa-m .pm-wf{white-space:normal;margin-top:12px;background:#fff;color:#000;border-radius:14px;padding:18px 20px;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.3;-webkit-text-stroke:.3px #000}
/* pressure, and the ribbon across the edge */
.pa-m .pm-s6{position:relative;isolation:isolate}
.pa-m .pm-rib{mix-blend-mode:difference;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.pa-m .pm-s6a{padding-bottom:70px}
.pa-m .pm-sg{margin:0 0 12px;line-height:1}
.pa-m .pm-sg b{display:block;font-stretch:92%;text-transform:uppercase;letter-spacing:.05em;font-weight:800;font-size:13px}
.pa-m .pm-sd{display:block;position:relative;width:1px;height:14px;margin:6px 0 0 5px;background:#000}
.pa-m .pm-sd::after{content:"";position:absolute;left:-2px;bottom:-3px;width:5px;height:5px;border-radius:50%;background:#000}
.pa-m .pm-lena{display:block;width:max-content;margin:38px 0 0 auto;background:#fff;color:#000;border-radius:10px;padding:15px 22px;font-stretch:92%;font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.pa-m .pm-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pa-m .pm-pills .pm-pill{font-size:13.5px;padding:9px 16px}
/* the closing question */
.pa-m .pm-s7{padding-bottom:64px;border-radius:0 0 32px 32px}
.pa-m .pm-still{margin-top:8px}
.pa-m .pm-opt{position:relative;margin-top:34px}
.pa-m .pm-o .pm-fw{right:34px}
.pa-m .pm-o .pm-rn{font-size:20px;letter-spacing:.06em;font-weight:800}
.pa-m .pm-o .pm-rd{font-size:13.5px}
.pa-m .pm-end{position:absolute;right:34px;top:389px;width:0;height:0}
.pa-m .pm-end i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#000}
.pa-m .pm-end b{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border:1px solid #000;border-radius:50%}
/* the thread */
.pa-m .pm-cn{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3;mix-blend-mode:difference;overflow:visible}
.pa-m .pm-cnp{stroke:#fff;stroke-width:1.4}.pa-m .pm-cn rect{fill:#fff;width:7px;height:7px}
.pa-br .pa-nx .n{font-size:clamp(34px,10.4vw,48px)}
.pa-nx{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ad ad" "n ar";row-gap:4px}
.pa-nx .ad{grid-area:ad}.pa-nx .n{grid-area:n}.pa-nx .ar{grid-area:ar;margin-left:14px}
.pa-nx .ar{width:clamp(28px,8vw,50px)}
.pa-br{padding-top:30px}
}
@media (max-width:360px){.pa-m .pm-pill{padding:8px 11px;letter-spacing:.03em}.pa-m .pm-pr{font-size:13.5px}}

/* QA-01 v3: the late approval stays attached to the remaining scope only; core first has its own released path */
.dl-brk{position:relative}
.dl-brk::after{content:"";position:absolute;left:calc(clamp(46px,6.6vw,128px)*4.5);top:calc(clamp(22px,3vh,34px) + clamp(46px,6.6vw,128px)*.9 - 6px);width:0;height:clamp(26px,5.6vh,54px);border-left:1px solid #fff}
.dl-dp{display:grid;row-gap:clamp(10px,2vh,20px);margin-top:clamp(18px,3.4vh,34px);padding-top:clamp(14px,2.6vh,26px);border-top:1px solid #000}
.dl-ln{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;column-gap:12px;font-size:clamp(17px,1.35vw,21px)}
.dl-ln.core{grid-template-columns:auto 1fr auto}
.dl-ln i{display:block;height:0;border-top:1px solid #000;min-width:40px}
.dl-ln.rest i{border-top-style:dashed}
.dl-ln b{font-weight:700;letter-spacing:-.01em}
.dl-ln.core b::before,.dl-ln.rest b::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;background:#000;margin-right:10px;vertical-align:-1px}
.dl-ln.rest b::before{background:#fff;border:1px solid #000;box-sizing:border-box}
.dl-ln em{font-style:normal;font-weight:700}
@media (max-width:760px){.dl-ln{grid-template-columns:auto auto 1fr auto}.dl-ln .dl-mi{grid-column:auto}}

/* v3 M06: 44px touch targets for the controls inside the deep dives on phones */
@media (max-width:760px),(pointer:coarse){
  .dpage :is(button,a[href],[role=button]),.sy-k,.sy-tab :is(a,button){min-height:44px}
  .pl-n,.mr-s,.ox-p,.ox-x{min-height:44px}
}
@media (max-width:760px),(pointer:coarse){
  .ov button,.df-nav button,.ox-x{min-height:44px}
  .ox-x{min-width:44px}
  .ov input[type=range]{min-height:44px}
}
@media (max-width:760px),(pointer:coarse){
  .ov [data-go],.ov [role=tab],.ox .ox-x{min-height:44px!important}
  .ox .ox-x{min-width:44px!important;display:inline-flex;align-items:center;justify-content:center}
}

/* 08.10.2026 Besucherfuehrung, Partnerships mobil "Route + Need": the two lists are two clearly separate white groups on the grey ground;
   the capability gap with its axis stays between them as the relation (all rows, dots and fan lines unchanged) */
@media (max-width:760px){
  .pa-m .pm-s2 .pm-lst{isolation:isolate}
  .pa-m .pm-s2 .pm-lst::before{content:"";position:absolute;inset:-14px -14px -14px -14px;background:#fff;border-radius:16px;z-index:-1}
  .pa-m .pm-s2 .pm-ax-w{margin-top:26px}
  .pa-m .pm-s2 .pm-need{margin-bottom:14px}
}

/* phones, Partnerships: the gap labels sit between the cards and are never covered (Lena 09.10.2026) */
@media (max-width:760px){.pa-m .pm-s2 .pm-gap{height:150px;padding-top:34px}.pa-m .pm-cap2{bottom:34px}.pa-m .pm-gap{min-height:88px}.pa-m .pm-gapt .pc{font-size:14px}}