/* cybos.ai components — docs/DESIGN.md §3–4. Colours, radii and shadows only via tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;font:var(--t-body);color:var(--ink);background:var(--bone);font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,.display{font-family:var(--display);font-weight:500;text-wrap:balance;margin:0}
p{text-wrap:pretty;max-width:68ch;margin:0}
ul,ol{margin:0;padding:0}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dark :focus-visible,.dark:focus-visible{outline-color:var(--orange)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s2);top:-60px;z-index:100;background:var(--ink);color:var(--on-dark);padding:var(--s1) var(--s2);border-radius:var(--r-pill);font:var(--t-ui)}
.skip:focus{top:var(--s1)}

/* type helpers */
.t-display{font:var(--t-display);letter-spacing:var(--tr-display)}
.t-h1{font:var(--t-h1);letter-spacing:var(--tr-h1)}
.t-h2{font:var(--t-h2);letter-spacing:var(--tr-h2)}
.t-h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.t-h4{font:var(--t-h4);letter-spacing:var(--tr-h4)}
.t-stat{font:var(--t-stat);letter-spacing:var(--tr-stat);font-variant-numeric:tabular-nums}
.t-lead{font:var(--t-lead);letter-spacing:var(--tr-lead)}
.t-small{font:var(--t-small)}
.muted{color:var(--muted)}.faint{color:var(--faint)}

/* layout */
.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--margin));margin:0 auto;padding:0 var(--margin)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.section{padding:var(--sec-y) 0}
.bone-2{background:var(--bone-2)}
.dark{background:var(--ink-bg);background-image:var(--vignette);color:var(--on-dark)}
.framed{position:relative}
.framed::before,.framed::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--hair);pointer-events:none}
.framed::before{left:max(var(--margin),calc(50% - var(--maxw)/2))}
.framed::after{right:max(var(--margin),calc(50% - var(--maxw)/2))}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-bottom:var(--s7);align-items:start}
.sec-head h2{grid-column:1/7;font:var(--t-h2);letter-spacing:var(--tr-h2)}
.sec-head .lead{grid-column:7/12;font:var(--t-lead);letter-spacing:var(--tr-lead);color:var(--muted);padding-top:10px}
.dark .sec-head .lead{color:var(--on-dark-2)}
.sec-foot{margin-top:var(--s6);display:flex;justify-content:flex-end}
@media (max-width:1199px){.sec-head h2{grid-column:1/-1}.sec-head .lead{grid-column:1/-1;padding-top:var(--s3)}}
@media (max-width:767px){.sec-head{margin-bottom:var(--s6)}}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r-pill);
  font:var(--t-ui);white-space:nowrap;transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.btn-primary{background:var(--orange);color:var(--ink)}
.btn-primary:hover{background:var(--orange-hover)}
.btn-secondary{border:1px solid var(--ink);color:var(--ink)}
.dark .btn-secondary{border-color:var(--on-dark);color:var(--on-dark)}
.btn-ink{background:var(--ink);color:var(--on-dark)}
.btn-ink:hover{background:var(--ink-bg-2)}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font:var(--t-ui);min-height:44px}
.arrow-link .ar{display:inline-block;transition:transform var(--d-fast) var(--ease)}
.arrow-link:hover .ar{transform:translateX(3px)}
.src{font:var(--t-small);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair);transition:text-decoration-color var(--d-fast)}
.src:hover{text-decoration-color:currentColor}
.dark .src{text-decoration-color:var(--hair-dark)}

/* announcement + nav */
.ann{background:var(--ink-bg);color:var(--on-dark);font:var(--t-small);min-height:40px;display:flex;align-items:center;justify-content:center;text-align:center;padding:9px var(--margin)}
.ann a{color:var(--on-dark-2);margin-left:10px;white-space:nowrap}
.ann a:hover{text-decoration:underline;text-underline-offset:3px}
.nav{position:sticky;top:0;z-index:50;height:64px;background:var(--bone);border-bottom:1px solid var(--hair);transition:background-color var(--d-fast)}
.nav.is-stuck{background:var(--nav-stuck);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
.nav .wrap{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center}
.wordmark{grid-column:1/4;display:inline-flex;align-items:center;gap:10px;font:600 26px/1 var(--display);letter-spacing:-.03em;color:var(--ink);justify-self:start;min-height:44px}
.wordmark svg{width:22px;height:22px}
.nav-links{grid-column:4/10;display:flex;gap:var(--s4);list-style:none}
.nav-links a{position:relative;font:var(--t-ui);color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.nav-links a[aria-current]::after{content:"";position:absolute;left:0;top:calc(50% + 20px - 10px);width:20px;height:2px;background:var(--orange)}
.nav-cta{grid-column:10/13;justify-self:end;display:flex;align-items:center;gap:var(--s3)}
.nav-mail{font:var(--t-ui);color:var(--muted);display:none}
.nav-mail:hover{color:var(--ink)}
@media (min-width:1440px){.nav-mail{display:inline}}
.menu-btn{display:none;width:40px;height:40px;position:relative}
.menu-btn span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform var(--d-fast) var(--ease)}
.menu-btn span:first-child{top:16px}.menu-btn span:last-child{top:23px}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.sheet{position:fixed;inset:64px 0 0 0;z-index:49;background:var(--bone);padding:var(--s5) var(--margin);display:flex;flex-direction:column;justify-content:space-between}
.sheet[hidden]{display:none}
.sheet ul{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.sheet a{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.sheet .sheet-mail{font:var(--t-ui);color:var(--muted)}
@media (max-width:899px){
  .nav .wrap{display:flex;justify-content:space-between}
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-cta{gap:var(--s1)}
}

/* hero */
.hero{position:relative;overflow:visible;background:var(--bone);padding-top:var(--s8);min-height:min(880px,calc(100svh - 104px))}
.hero .wrap{position:relative;z-index:2}
.hero-copy{grid-column:1/8;padding-bottom:var(--s9)}
.hero h1{font:var(--t-display);letter-spacing:var(--tr-display);width:calc(100% * 9 / 7);max-width:none;position:relative;z-index:2}
.hero .lead{margin-top:var(--s3);font:var(--t-lead);letter-spacing:var(--tr-lead);color:var(--muted);max-width:30em}
.hero-actions{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.hero-proof{margin-top:var(--s7);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4);max-width:640px;list-style:none}
.hero-proof p{font:var(--t-small);color:var(--ink)}
.hero-proof .src{color:var(--faint);display:inline-block;margin-top:4px}
.hero-proof-intro{margin-top:var(--s7);font:var(--t-small);color:var(--muted)}
.hero-proof-intro+.hero-proof{margin-top:var(--s2)}
@media (max-width:1199px){.hero-copy{grid-column:1/-1}.hero h1{max-width:12ch}}
@media (max-width:767px){
  .hero{padding-top:var(--s7);min-height:0}
  .hero-copy{padding-bottom:var(--s5)}
  .hero-proof{grid-template-columns:1fr}
}

.glyph{display:inline-block;flex:none}

/* logo walls */
.logos{background:var(--bone);border-top:1px solid var(--hair)}
.logo-group{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);border-bottom:1px solid var(--hair)}
.logo-group p{grid-column:1/3;font:var(--t-small);color:var(--muted);padding:var(--s3) var(--s3) var(--s3) 0;align-self:center}
.logo-cells{grid-column:3/13;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;border-left:1px solid var(--hair)}
.logo-cell{position:relative;display:grid;place-items:center;height:96px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);color:var(--ink)}
.logo-cells .logo-cell:nth-child(5n){border-right:0}
.logo-cells:not(.partial) .logo-cell:nth-last-child(-n+5){border-bottom:0}
.logo-cell svg,.logo-cell img{height:calc(var(--h)*1px);width:auto;max-width:148px;opacity:var(--o,1);transform:translateY(calc(var(--dy,0)*1px))}
a.logo-cell:hover{background:var(--bone-2)}
a.logo-cell::after{content:"↗";position:absolute;top:8px;right:10px;font-size:10px;line-height:1;color:var(--faint)}
@media (max-width:1199px){
  .logo-group p{grid-column:1/-1;padding:var(--s3) 0 var(--s2)}
  .logo-cells{grid-column:1/-1;border-left:0;border-top:1px solid var(--hair)}
}
@media (max-width:767px){
  .logo-cells{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logo-cells .logo-cell:nth-child(5n){border-right:1px solid var(--hair)}
  .logo-cells .logo-cell:nth-child(3n){border-right:0}
  .logo-cells:not(.partial) .logo-cell:nth-last-child(-n+5){border-bottom:1px solid var(--hair)}
  .logo-cell{height:72px}
  .logo-cell svg,.logo-cell img{height:calc(var(--hm)*1px);max-width:104px}
}

/* definition strip */
.definition{padding:var(--s8) 0 0}
.definition p{grid-column:3/11;font:var(--t-h3);letter-spacing:var(--tr-h3);max-width:none}
.definition a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair)}
@media (max-width:1199px){.definition p{grid-column:1/-1}}

/* pillars: 2×2 cards, image left, text right */
.pillar-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.pillar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s4);align-items:start;padding:var(--s4) 0;border-top:1px solid var(--hair)}
.pillar .card-img{aspect-ratio:1;border-radius:var(--r-plate);overflow:hidden;background:var(--bone-2)}
.pillar .card-img img,.pillar .card-img svg,.pillar .card-img picture{width:100%;height:100%;object-fit:cover;display:block}
.pillar .card-img>div{width:100%;height:100%}
.pillar h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.pillar h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair)}
.pillar p{margin-top:var(--s2);color:var(--muted)}
.pillar .proof{font:var(--t-small);color:var(--ink)}
.pillar .proof .src{color:var(--muted)}
@media (max-width:1199px){.pillar-list{grid-template-columns:1fr}}
@media (max-width:767px){.pillar{grid-template-columns:1fr;gap:var(--s3)}.pillar .card-img{aspect-ratio:4/3}}

/* case cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);list-style:none}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1199px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.cards,.cards.two{grid-template-columns:1fr}}
.case{position:relative;display:flex;flex-direction:column;min-height:340px;padding:var(--s4);background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-plate);box-shadow:var(--sh-1);
  transition:transform var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease)}
.case:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.case-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:24px}
.case-co{font:var(--t-h4);letter-spacing:var(--tr-h4)}
.case-val{margin-top:var(--s4);font:var(--t-stat);letter-spacing:var(--tr-stat);font-variant-numeric:tabular-nums}
.case-unit{margin-top:var(--s1);font:var(--t-body)}
.case-built{margin-top:var(--s2);color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.case-foot{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--hair-2);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);font:var(--t-small);color:var(--faint)}
.case-foot .src{color:var(--ink);position:relative;z-index:2;white-space:nowrap}
.case .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.case-built-wrap{flex:1;display:flex;flex-direction:column;padding-bottom:var(--s3)}
.case-c{display:block;padding:var(--s3);background:var(--ink-bg-2);border:1px solid var(--hair-dark);border-radius:var(--r-plate);position:relative}
.case-c .co{font:var(--t-h4);letter-spacing:var(--tr-h4);color:var(--on-dark)}
.case-c .vl{margin-top:var(--s1);font:500 36px/36px var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--on-dark)}
.case-c .vl span{font:var(--t-small);letter-spacing:0;color:var(--on-dark-2);margin-left:8px}
.case-c .bt{margin-top:var(--s1);font:var(--t-small);color:var(--on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case-c .mt{margin-top:var(--s1);font:var(--t-small);color:var(--on-dark-3);display:flex;justify-content:space-between;gap:var(--s2)}
.case-c .mt .src{color:var(--on-dark-2);position:relative;z-index:2}
.case-c.light{background:var(--paper);border-color:var(--hair)}
.case-c.light .co,.case-c.light .vl{color:var(--ink)}
.case-c.light .vl span,.case-c.light .bt{color:var(--muted)}
.case-c.light .mt{color:var(--faint)}.case-c.light .mt .src{color:var(--ink)}

/* people */
.people{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--s3);list-style:none}
.person .ph{aspect-ratio:1;border-radius:var(--r-plate);overflow:hidden;background:var(--matte)}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person h2,.person h3{margin-top:var(--s2);font:var(--t-h4);letter-spacing:var(--tr-h4)}
.person p{font:var(--t-small);color:var(--muted)}
.people-more{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--hair);font:var(--t-small);color:var(--muted)}
.people-more ul{display:inline;list-style:none}
.people-more li{display:inline}
.people-more li:not(:last-child)::after{content:" · "}
.people-more b{font-weight:500;color:var(--ink)}
@media (max-width:1199px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* video */
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r-plate);overflow:hidden;box-shadow:var(--sh-dark);background:var(--ink-bg-2)}
.player img,.player video{width:100%;height:100%;object-fit:cover}
.player .state{position:absolute;left:var(--s4);bottom:var(--s4);right:var(--s4);display:flex;align-items:center;gap:var(--s2);font:var(--t-small);color:var(--on-dark)}
.player .state i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--orange);flex:none}
.player .ph-art{position:absolute;inset:0;display:grid;place-items:center}
.player .ph-art svg{width:42%;height:auto;opacity:.9}
.play{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:var(--r-pill);background:var(--orange);display:grid;place-items:center;transition:transform var(--d-fast) var(--ease)}
.play:hover{transform:scale(1.04)}
.play svg{margin-left:3px}
.video-meta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--s4)}
.video-meta .main{grid-column:1/9}
.video-meta h3{font:var(--t-h3);letter-spacing:var(--tr-h3);color:var(--on-dark)}
.video-meta .by{margin-top:var(--s1);font:var(--t-small);color:var(--on-dark-3)}
.video-more{grid-column:9/13;display:grid;gap:var(--s3);list-style:none}
.video-more .thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r-plate);overflow:hidden;background:var(--ink-bg-2);border:1px solid var(--hair-dark)}
.video-more .thumb img{width:100%;height:100%;object-fit:cover;opacity:.8}
.video-more h4{margin-top:var(--s1);font:var(--t-h4);letter-spacing:var(--tr-h4);color:var(--on-dark)}
.video-more p{font:var(--t-small);color:var(--on-dark-3)}
@media (max-width:1199px){.video-meta .main,.video-more{grid-column:1/-1}.video-more{margin-top:var(--s5);grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.video-more{grid-template-columns:1fr}.player .state{left:var(--s2);right:var(--s2);bottom:var(--s2)}}

/* playbooks */
.pb-feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;position:relative}
.pb-feature .art{grid-column:1/8;aspect-ratio:4/3;border-radius:var(--r-plate);overflow:hidden;background:var(--bone-2)}
.pb-feature .txt{grid-column:8/13}
.pb-feature h3{font:var(--t-h2);letter-spacing:var(--tr-h2)}
.pb-feature .sum{margin-top:var(--s3);font:var(--t-lead);color:var(--muted)}
.pb-feature .meta,.pb-card .meta{margin-top:var(--s2);font:var(--t-small);color:var(--faint)}
.pb-feature .arrow-link{margin-top:var(--s3)}
.art svg{width:100%;height:100%}
.pb-cards{margin-top:var(--s7);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);list-style:none}
.pb-card{position:relative}
.pb-card .art{aspect-ratio:16/10;border-radius:var(--r-plate);overflow:hidden;background:var(--bone-2);transition:box-shadow var(--d-base) var(--ease),transform var(--d-base) var(--ease)}
.pb-card:hover .art{transform:translateY(-2px);box-shadow:var(--sh-2)}
.pb-card h3{margin-top:var(--s3);font:var(--t-h3);letter-spacing:var(--tr-h3)}
.pb-card .sum{margin-top:var(--s1);color:var(--muted)}
.pb-card a.stretch::after,.pb-feature a.stretch::after{content:"";position:absolute;inset:0}
@media (max-width:1199px){.pb-feature .art,.pb-feature .txt{grid-column:1/-1}.pb-feature .txt{margin-top:var(--s4)}.pb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.pb-cards{grid-template-columns:1fr}.pb-feature h3{font:var(--t-h3)}}

/* template viewer */
.tpl-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.tpl-list{grid-column:1/6;list-style:none;border-top:1px solid var(--hair)}
.tpl-list button,.tpl-list a.tpl-item{display:block;width:100%;text-align:left;padding:var(--s3) var(--s3) var(--s3) var(--s3);border-bottom:1px solid var(--hair);border-left:2px solid transparent;transition:background-color var(--d-fast)}
.tpl-list button:hover{background:var(--bone-2)}
.tpl-list [aria-selected="true"]{border-left-color:var(--orange);background:var(--paper)}
.tpl-list h3{font:var(--t-h4);letter-spacing:var(--tr-h4)}
.tpl-list p{margin-top:4px;font:var(--t-small);color:var(--muted)}
.viewers{grid-column:6/13}
.viewer{background:var(--ink-bg);border-radius:var(--r-plate);box-shadow:var(--sh-2);overflow:hidden;color:var(--on-dark)}
.js .viewers .viewer:not(.open){display:none}
.no-js .viewers .viewer+.viewer{margin-top:var(--s3)}
.viewer-bar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s2);border-bottom:1px solid var(--hair-dark)}
.viewer-file{font:var(--t-code);color:var(--on-dark);position:relative;height:44px;display:flex;align-items:center}
.viewer-file::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange)}
.viewer-acts{display:flex;gap:var(--s2)}
.viewer-acts a,.viewer-acts button{font:var(--t-ui);color:var(--on-dark-2);min-height:44px;display:inline-flex;align-items:center}
.viewer-acts a:hover,.viewer-acts button:hover{color:var(--on-dark)}
.code{max-height:520px;overflow:auto;padding:var(--s2) 0;font:var(--t-code);counter-reset:ln}
.code .l{display:block;padding:0 var(--s3) 0 56px;position:relative;white-space:pre;min-height:22px}
.code .l::before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:40px;text-align:right;color:var(--on-dark-3)}
.code .l.hl{background:var(--orange-a10);box-shadow:inset 2px 0 0 var(--orange)}
.code .k{color:var(--orange)}.code .s{color:var(--on-dark-2)}.code .c{color:var(--faint)}
.code .h{font-family:var(--display);font-weight:600;color:var(--on-dark)}
@media (max-width:1199px){.tpl-list,.viewers{grid-column:1/-1}.viewers{margin-top:var(--s4)}}
@media (max-width:767px){.code{max-height:420px}}

/* CTA band */
.cta{position:relative;overflow:hidden;background:var(--orange);color:var(--ink);padding:var(--s10) 0}
.cta .grid{position:relative;z-index:1;align-items:end}
.cta h2{grid-column:1/8;font:var(--t-h2);letter-spacing:var(--tr-h2)}
.cta .txt{grid-column:1/8;margin-top:var(--s3);font:var(--t-lead);color:var(--orange-ink)}
.cta .act{grid-column:9/13;grid-row:1/3;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.cta .plain{font:var(--t-small);color:var(--orange-ink);user-select:all}
.cta-art{position:absolute;right:0;bottom:0;width:36%;max-width:500px;transform:translate(34%,30%);pointer-events:none;opacity:.9}
@media (max-width:1199px){.cta h2,.cta .txt,.cta .act{grid-column:1/-1}.cta .act{grid-row:auto;margin-top:var(--s5)}.cta-art{opacity:.35}}
@media (max-width:767px){.cta{padding:var(--s8) 0}.cta-art{display:none}}

/* footer */
.footer{background:var(--ink-bg);color:var(--on-dark);padding:var(--s9) 0 var(--s6)}
.footer .row1{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5)}
.footer .about{grid-column:1/6}
.footer .wordmark{color:var(--on-dark)}
.footer .about p{margin-top:var(--s2);font:var(--t-small);color:var(--on-dark-2);max-width:36ch}
.footer .cols{grid-column:7/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.footer h2{font:600 15px/22px var(--sans);color:var(--on-dark)}
.footer ul{list-style:none;margin-top:var(--s2);display:grid;gap:var(--s1)}
.footer ul a{font:var(--t-small);color:var(--on-dark-2)}
.footer ul a:hover{color:var(--on-dark)}
.footer .row2{margin-top:var(--s9);padding-top:var(--s3);border-top:1px solid var(--hair-dark);display:flex;justify-content:space-between;font:var(--t-small);color:var(--on-dark-3)}
.footer .row2 a:hover{color:var(--on-dark)}
@media (max-width:1199px){.footer .about,.footer .cols{grid-column:1/-1}}
@media (max-width:767px){.footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* inner pages */
.page-head{padding:var(--s8) 0 var(--s7)}
.crumbs{font:var(--t-small);color:var(--muted);margin-bottom:var(--s4)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap}
.crumbs li:not(:last-child)::after{content:" / ";white-space:pre;color:var(--faint)}
.crumbs a:hover{color:var(--ink)}
.dark .crumbs{color:var(--on-dark-3)}
.page-head h1{font:var(--t-h1);letter-spacing:var(--tr-h1);max-width:18ch}
.page-head .h1-wide{max-width:22ch}
.dateline{margin-top:var(--s3);font:var(--t-small);color:var(--faint)}
.dark .dateline{color:var(--on-dark-3)}
.intro{margin-top:var(--s4);font:var(--t-lead);letter-spacing:var(--tr-lead);color:var(--muted);max-width:44em}
.dark .intro{color:var(--on-dark-2)}
.head-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center}
.head-split .l{grid-column:1/7}.head-split .r{grid-column:7/13}
.head-split .r .frame{aspect-ratio:16/9;border-radius:var(--r-plate);overflow:hidden;background:var(--ink-bg-2)}
.head-split .r .frame img{width:100%;height:100%;object-fit:cover}
@media (max-width:1199px){.head-split .l,.head-split .r{grid-column:1/-1}.head-split .r{margin-top:var(--s5)}}
.wide-art{margin-top:var(--s6);aspect-ratio:21/9;border-radius:var(--r-plate);overflow:hidden;background:var(--bone-2)}
.doc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding-bottom:var(--s9);align-items:start}
.doc-side{grid-column:1/4;position:sticky;top:96px}
.doc-main{grid-column:4/10}
.doc-notes{grid-column:10/13;display:grid;gap:var(--s3)}
.doc-main.full{grid-column:4/12}
.toc{list-style:none;border-left:1px solid var(--hair)}
.toc a{display:block;padding:6px 0 6px var(--s2);margin-left:-1px;border-left:2px solid transparent;font:var(--t-small);color:var(--muted)}
.toc a.on{color:var(--ink);border-left-color:var(--orange)}
.toc-title{font:600 15px/22px var(--sans);margin-bottom:var(--s1)}
.side-about{margin-top:var(--s5);font:var(--t-small);color:var(--muted)}
.side-about h2{font:600 15px/22px var(--sans);color:var(--ink);margin-bottom:var(--s1)}
@media (max-width:1199px){.doc-side{display:none}.doc-main,.doc-main.full{grid-column:1/-1}.doc-notes{grid-column:1/-1;margin-top:var(--s6)}}
.prose{max-width:680px}
.prose h2{font:var(--t-h3);letter-spacing:var(--tr-h3);margin:var(--s8) 0 var(--s3);scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{font:var(--t-h4);letter-spacing:var(--tr-h4);margin:var(--s5) 0 var(--s2)}
.prose p{margin:0 0 var(--s3)}
.prose ul.plain,.prose ol.plain{margin:0 0 var(--s3);padding-left:1.2em}
.prose li{margin-bottom:var(--s1)}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair)}
.prose a:hover{text-decoration-color:currentColor}
.out{margin:var(--s3) 0;padding:var(--s2) var(--s3);border-left:2px solid var(--orange);background:var(--paper);font:var(--t-small)}
.out b{font-weight:600}
.stat-row{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin:var(--s5) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.stat-row>div{padding:var(--s3) var(--s3) var(--s3) 0}
.stat-row>div+div{border-left:1px solid var(--hair);padding-left:var(--s3)}
.stat-row .v{font:var(--t-stat);letter-spacing:var(--tr-stat);font-variant-numeric:tabular-nums}
.stat-row .u{margin-top:var(--s1);font:var(--t-small);color:var(--ink)}
.stat-row .src{display:inline-block;margin-top:var(--s1);color:var(--muted)}
@media (max-width:767px){.stat-row{grid-template-columns:1fr}.stat-row>div+div{border-left:0;border-top:1px solid var(--hair);padding-left:0}}
.quote{margin:var(--s5) 0;padding:0}
.quote p{font:var(--t-h3);letter-spacing:var(--tr-h3);max-width:none}
.quote footer{margin-top:var(--s2);font:var(--t-small);color:var(--muted)}
.tbl-wrap{overflow-x:auto;margin:var(--s3) 0 var(--s4)}
table{width:100%;border-collapse:collapse;font:var(--t-small)}
th{font-weight:600;text-align:left}
th,td{padding:10px var(--s2) 10px 0;border-bottom:1px solid var(--hair);vertical-align:top}
thead th{border-bottom-color:var(--ink)}
td.n{text-align:right;font-variant-numeric:tabular-nums}
.facts{margin:var(--s5) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair)}
.facts>div{padding:var(--s2) var(--s3) var(--s2) 0;border-bottom:1px solid var(--hair)}
.facts dt{font:var(--t-small);color:var(--faint)}
.facts dd{margin:4px 0 0;font:var(--t-small);color:var(--ink);display:flex;align-items:center;gap:8px}
@media (max-width:767px){.facts{grid-template-columns:1fr 1fr}}
.faq{border-top:1px solid var(--hair);margin-top:var(--s3)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s3) var(--s5) var(--s3) 0;position:relative;font:var(--t-h4);letter-spacing:var(--tr-h4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:var(--s3);font:400 24px/28px var(--sans);color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 var(--s3)}
.checks{list-style:none;counter-reset:c;margin:0 0 var(--s3)}
.checks li{position:relative;padding:var(--s2) 0 var(--s2) var(--s5);border-bottom:1px solid var(--hair-2)}
.checks li::before{content:"";position:absolute;left:0;top:calc(var(--s2) + 4px);width:18px;height:18px;border:1.25px solid var(--ink);border-radius:var(--r-plate)}
.rail{position:sticky;top:64px;z-index:40;background:var(--nav-stuck);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.rail ul{display:flex;gap:var(--s4);list-style:none;overflow-x:auto}
.rail a{display:flex;align-items:center;gap:10px;min-height:52px;font:var(--t-ui);color:var(--muted);white-space:nowrap}
.rail a[aria-current]{color:var(--ink)}
.block{padding:var(--s8) 0;border-top:1px solid var(--hair)}
.block>.wrap>h2,.block h2.bh{font:var(--t-h2);letter-spacing:var(--tr-h2);margin-bottom:var(--s5);max-width:20ch}
.lists3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.lists3>div{padding-top:var(--s2);border-top:1px solid var(--ink)}
.lists3 h3{font:var(--t-h4);letter-spacing:var(--tr-h4);margin-bottom:var(--s2)}
.lists3 ul{list-style:none}
.lists3 li{padding:10px 0;border-bottom:1px solid var(--hair-2);color:var(--muted)}
@media (max-width:1199px){.lists3{grid-template-columns:1fr}}
.decisions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);list-style:none}
.decisions li{padding-top:var(--s3);border-top:1px solid var(--ink)}
.decisions .glyph{margin-bottom:var(--s2)}
.decisions h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.decisions p{margin-top:var(--s2);color:var(--muted)}
@media (max-width:1199px){.decisions{grid-template-columns:1fr}}

/* hubs */
.filters{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s5)}
.filters[hidden]{display:none}
.pill{height:36px;padding:0 var(--s2);border:1px solid var(--hair);border-radius:var(--r-pill);font:var(--t-ui);color:var(--ink);background:var(--paper)}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.filters .sep{width:1px;background:var(--hair);margin:0 var(--s1)}
.hub-list .is-hidden{display:none}
.tpl-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);list-style:none}
.tpl-card{position:relative;padding:var(--s4);background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-plate);box-shadow:var(--sh-1);transition:transform var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease)}
.tpl-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.tpl-card h2,.tpl-card h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.tpl-card p{margin-top:var(--s2);color:var(--muted)}
.tpl-card .meta{margin-top:var(--s3);font:var(--t-small);color:var(--faint)}
.tpl-card a.stretch::after{content:"";position:absolute;inset:0}
@media (max-width:767px){.tpl-cards{grid-template-columns:1fr}}
.nf{padding:var(--s11) 0}
.nf h1{font:var(--t-h1);letter-spacing:var(--tr-h1)}
.nf p{margin-top:var(--s3);color:var(--muted)}
.nf ul{margin-top:var(--s5);list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3)}
.stack-panel,.layers,.layer-panel,.panel-cases,.case-c,.doc-main,.doc-notes,.viewers,.tpl-list,.hero-copy{min-width:0}
.nw{white-space:nowrap}
.case-c{transition:transform var(--d-base) var(--ease)}
.case-c:hover{transform:translateY(-2px)}
.case-c .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.thumb .state{position:absolute;left:12px;bottom:10px;font:var(--t-small);color:var(--on-dark);background:var(--scrim);padding:2px 10px;border-radius:var(--r-pill)}
@media (max-width:1199px){.hero h1{width:auto}}

/* how we work */
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s3)}
.how-steps li{padding-top:var(--s3);border-top:1px solid var(--ink)}
.how-steps .glyph{margin-bottom:var(--s3)}
.how-steps p{font:var(--t-h4);letter-spacing:var(--tr-h4);font-weight:500;max-width:24ch}
@media (max-width:1199px){.how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.how-steps{grid-template-columns:1fr}}
/* landing template list + collapsed preview */
.tpl-list a.tpl-item{display:block;padding:var(--s3);border-bottom:1px solid var(--hair);border-left:2px solid transparent;transition:background-color var(--d-fast),border-color var(--d-fast)}
.tpl-list a.tpl-item:hover{background:var(--paper);border-left-color:var(--orange)}
.tpl-preview{background:var(--ink-bg);border-radius:var(--r-plate);box-shadow:var(--sh-2);color:var(--on-dark);overflow:hidden}
.tpl-preview>summary{list-style:none;cursor:pointer;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s2);border-bottom:1px solid var(--hair-dark)}
.tpl-preview>summary::-webkit-details-marker{display:none}
.tpl-preview .pv-open{font:var(--t-ui);color:var(--on-dark-2)}
.tpl-preview[open] .pv-open{color:var(--on-dark)}
.tpl-preview .pv-body{padding:0}
.tpl-preview .pv-body>a{display:block;padding:var(--s3);color:var(--on-dark-2)}
.tpl-preview .viewer{box-shadow:none;border-radius:0}
.tpl-preview .viewer-bar{display:none}
.tpl-preview:not([open]){min-height:0}
p.people-more a{font:var(--t-ui);color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair)}
.player .state{background:var(--scrim);padding:6px 14px;border-radius:var(--r-pill);right:auto}
.player img{filter:saturate(.85)}
@media (max-width:767px){
  .framed::before,.framed::after{display:none}
  .pillar{grid-template-columns:112px minmax(0,1fr);gap:var(--s2)}
  .pillar .card-img{aspect-ratio:1}
  .player .state{left:var(--s1);bottom:var(--s1);font-size:13px;line-height:18px;padding:4px 10px}
}

/* ===== round 2 ===== */
/* 1. no boxes behind renders */
/* 8/9. hero */
.hero h1{width:940px;max-width:calc(100vw - 2*var(--margin))}
.hero-copy{padding-bottom:var(--s7)}
.hero-proof-wrap{position:relative;z-index:2;padding-bottom:var(--s7)}
.hero-proof{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin-top:0;border-top:1px solid var(--hair);padding-top:var(--s3);gap:var(--s4)}
.hero-proof .n{display:block;font:500 40px/40px var(--display);letter-spacing:-.03em;margin-bottom:var(--s1)}
@media (max-width:1199px){.hero h1{width:auto}}
@media (max-width:767px){
  .hero-proof{grid-template-columns:1fr;gap:var(--s3)}
  .hero-proof-wrap{padding-top:var(--s4)}
}
@media (max-width:767px){.case-c .vl span{display:block;margin:6px 0 0}}
/* 11. case cards */
.cards>li{display:flex}.cards>li>.case{flex:1}
.case-val{white-space:nowrap;font-size:clamp(40px,3.6vw,64px)}
.case-top .glyph{width:20px;height:20px;opacity:.9}
.dark-frame{background:var(--ink-bg)!important}
/* 12. dead space and frame runs */
#pillars{padding-bottom:var(--s8)}
.pillar-list{border-bottom:1px solid var(--hair)}
.definition{padding:var(--s9) 0 var(--s8)}
.section:not(.dark):not(.bone-2)+.section:not(.dark):not(.bone-2){padding-top:var(--s9)}
/* 13. pillar thumbs */
.pillar .card-img{overflow:hidden}
@media (max-width:767px){.pillar{grid-template-columns:1fr}.pillar .card-img{aspect-ratio:16/10}}
/* 14. how we work */
.how-steps li{border-top-color:var(--hair)}
.how-steps p{font:var(--t-h3);letter-spacing:var(--tr-h3);max-width:20ch}
/* 6. video */
.player img{object-fit:cover;object-position:70% 50%}
.video-meta .by{max-width:none}
/* templates on home */
.tpl-home .code{max-height:440px}
.tpl-home .tpl-list button h3{font:var(--t-h4)}
/* 10. logos on mobile: 2 columns, no orphan look */
@media (max-width:767px){
  .logo-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-cells .logo-cell:nth-child(3n){border-right:1px solid var(--hair)}
  .logo-cells .logo-cell:nth-child(2n){border-right:0}
}
/* QA D5 tap targets, D6 code size */
.footer ul a,.crumbs a{display:inline-flex;align-items:center;min-height:40px}
.footer ul{gap:0}
.footer li.sub a{padding-left:var(--s2);color:var(--on-dark-3)}
.src{display:inline-block;padding:9px 0;margin:-9px 0}
.sheet a{display:block;padding:8px 0}
.viewer-acts button,.viewer-acts a{min-width:44px;justify-content:center}
.viewer-file{font:400 14px/22px var(--mono-lazy)}
/* nav */
.nav-mail{color:var(--ink);opacity:.7}
.nav-mail:hover{opacity:1}
.hero{overflow-x:clip;overflow-y:visible}
.people{grid-template-columns:repeat(var(--cols,4),minmax(0,300px))}
@media (max-width:767px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
#video .player{max-width:1080px}
#video .player img{object-position:60% 100%}
.hero.aud{min-height:0}
.hero.aud h1{width:auto;max-width:13ch}
.aud-decisions{padding-top:var(--s6)}

/* ===== the loop system (design lab, 31 Oct 2026; docs/DESIGN.md) ===== */
/* mark */
.glyph{display:inline-block;flex:none}
.glyph circle{fill:none;stroke:currentColor;stroke-width:1.3}
.glyph .g1{fill:currentColor;stroke:none}
.glyph circle.on{stroke:var(--orange)}.glyph .g1.on{fill:var(--orange)}
.glyph .ga{fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round}
/* the instrument */
.loop{display:block;width:100%;height:auto;overflow:visible;-webkit-user-select:none;user-select:none}
.loop .hit{fill:transparent}
.loop .hr{fill:none;stroke:#D8D6CF;stroke-width:1;transition:stroke var(--d-base)}
.tk{fill:none;stroke:var(--tk,#C6C4BC);stroke-width:1}.tk.tl{stroke:var(--tl,#6F6D66);stroke-width:1.3}
.loop .b1,.loop .b3{fill:#FFFFFF;transition:fill var(--d-base)}.loop .b2{fill:#F9F8F4;transition:fill var(--d-base)}
.loop .face{transition:fill var(--d-base)}
.loop .trk{fill:none;stroke:#CDCBC4;stroke-dasharray:1 6}
.loop .ag{fill:#FFFFFF;stroke:var(--ink);stroke-width:1.4;transition:fill .3s,stroke .3s}
.loop .ag.on{fill:var(--orange);stroke:var(--orange)}
.ln{fill:none;stroke:var(--ln,#E2E0D9);stroke-width:1}
.ob{fill:var(--ob,#A9A79F);transition:fill .3s}.loop .ob.on{fill:var(--orange)}
.loop .ver{font:500 42px/1 var(--display);letter-spacing:-.035em;fill:var(--ink);font-variant-numeric:tabular-nums}
.loop .md{fill:#D6D4CD;transition:fill .3s}.loop .md.on{fill:var(--orange)}
.loop .cm{fill:none;stroke:var(--orange);stroke-width:2.6}
.loop .hd{fill:var(--orange)}.loop .hg{fill:var(--orange);opacity:.16}
.loop .st{fill:#FFFFFF;stroke:var(--ink);stroke-width:1.4;transition:fill .35s,stroke .35s}
.loop .st.on{fill:var(--orange);stroke:var(--orange)}
.loop .sw{font:500 17px/1 var(--display);letter-spacing:-.01em;fill:var(--ink)}
.loop .call{fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:120;opacity:0}
.loop .rp{fill:none;stroke:var(--orange);stroke-width:1.2;pointer-events:none}
/* selectable bands (layer explorer) */
.loop-explorer .bd{cursor:pointer}
.loop .bd :is(.ticks,.orbit,.dt,.ver,.md,.trk){transition:opacity .45s var(--ease)}
.loop[data-sel] .bd:not(.sel) :is(.ticks,.orbit,.dt,.ver,.md,.trk){opacity:.3}
.loop .bd.sel :is(.b1,.b2,.b3),.loop .bd[data-band="4"].sel .face{fill:#FFF3EC}
.loop .bd.hover:not(.sel) :is(.b1,.b2,.b3),.loop .bd[data-band="4"].hover:not(.sel) .face{fill:#FFF9F5}
.loop .bd.sel>.hr{stroke:var(--orange)}
/* hero */
.hero{min-height:0;padding-bottom:var(--s9)}
.hero .wrap.grid{align-items:center}
.hero-copy{grid-column:1/8;padding-bottom:0}
.hero h1{width:auto;max-width:none}
.hero-visual{grid-column:8/13;margin-right:calc(-1 * var(--s5));perspective:1600px;position:relative}
.hero-visual .loop{transform-style:preserve-3d;will-change:transform}
@media (max-width:1199px){.hero-copy{grid-column:1/-1}.hero-visual{grid-column:1/-1;width:min(560px,100%);margin:var(--s7) auto 0}}
@media (max-width:767px){.hero{padding-bottom:var(--s7)}.hero-visual{margin-top:var(--s6);width:100%}}
/* pillar tiles: a macro crop of the instrument around the pillar's station */
.pillar .card-img{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--bone-2);-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 0 0 1px var(--hair-2)}
.pillar .card-img .cimg,.pillar .card-img svg{width:100%;height:100%}
.pillar .card-img .loop .face{filter:none}
/* how we work: the loop closing a quarter per step */
.pring{display:block;margin-bottom:var(--s3)}
.pring .pt{fill:none;stroke:var(--hair);stroke-width:1.5}
.pring .pa{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease)}
.js .how:not(.in) .pring .pa{stroke-dashoffset:1}
.pring .pq{fill:var(--bone);stroke:var(--ink);stroke-width:1.3;transition:fill .4s .6s,stroke .4s .6s}
.pring .pq.on{fill:var(--orange);stroke:var(--orange)}
.js .how:not(.in) .pring .pq.on{fill:var(--bone);stroke:var(--ink)}
.how-steps li:nth-child(2) .pa,.how-steps li:nth-child(2) .pq{transition-delay:.15s}
.how-steps li:nth-child(3) .pa,.how-steps li:nth-child(3) .pq{transition-delay:.3s}
.how-steps li:nth-child(4) .pa,.how-steps li:nth-child(4) .pq{transition-delay:.45s}
/* layer explorer (light) */
.stack-sec{padding:var(--sec-y-xl) 0;background:var(--bone-2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.stack-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.stage{grid-column:1/7;position:sticky;top:96px}
.stack{width:100%;max-width:600px;margin-right:auto}
.stack-panel{grid-column:7/13}
.layers{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.layers .layer-item{display:block;border-bottom:1px solid var(--hair)}
.layer-h{margin:0}
.layer-tab{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:80px;text-align:left;font:var(--t-h3);letter-spacing:var(--tr-h3);color:var(--faint);transition:color var(--d-fast)}
.layer-tab>span:not(.chev){flex:1}
.layer-tab .glyph{color:currentColor}
.layer-tab:hover,.layer-tab.hover,.layer-tab[aria-selected="true"],.layer-tab[aria-expanded="true"]{color:var(--ink)}
.layer-tab .chev{flex:none;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);margin-right:6px;transition:transform var(--d-base) var(--ease)}
.layer-tab[aria-selected="true"] .chev,.layer-tab[aria-expanded="true"] .chev{transform:translateY(3px) rotate(-135deg)}
.layer-panel{padding:0 0 var(--s5) 40px}
.js .layer-panel:not(.open){display:none}
.layer-panel.open{animation:panel-in .5s var(--ease)}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px)}}
.layer-panel .def{font:var(--t-lead);letter-spacing:var(--tr-lead);color:var(--ink)}
.build-list{list-style:none;margin-top:var(--s3);border-top:1px solid var(--hair)}
.build-list li{padding:10px 0;border-bottom:1px solid var(--hair);color:var(--muted);font:var(--t-small)}
.panel-cases{display:grid;gap:var(--s2);margin-top:var(--s4)}
.panel-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);margin-top:var(--s3)}
.no-js .layer-panel{margin-top:0}
@media (max-width:1199px){.stage{grid-column:1/-1;position:relative;top:auto;max-width:520px;width:100%;margin:0 auto var(--s6)}.stack-panel{grid-column:1/-1}}
@media (max-width:767px){.stage{max-width:340px;margin-bottom:var(--s5)}.layer-tab{font:var(--t-h4);min-height:68px}.layer-panel{padding-left:0}
  .panel-cases{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s2);padding-bottom:var(--s1)}.panel-cases>*{flex:0 0 85%;scroll-snap-align:start}}
/* playbook art: instrument crops on a bone matte */
.pb-feature .art,.pb-card .art,.wide-art{background:var(--bone-2);border-radius:12px;overflow:hidden;-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 0 0 1px var(--hair-2)}
.art .tile,.wide-art .tile{width:100%;height:100%}
.art .tile svg,.wide-art .tile svg{width:100%;height:100%}
.pb-card .art{transition:box-shadow var(--d-base) var(--ease)}
.pb-card:hover .art{box-shadow:inset 0 0 0 1px var(--hair),0 18px 40px -24px rgba(11,11,11,.25)}
/* contact band: the instrument drawn in ink on orange */
.cta-art{position:absolute;right:max(-120px,calc(50% - 860px));top:50%;width:min(52vw,720px);transform:translateY(-50%);pointer-events:none;opacity:1}
.cta .loop :is(.face,.b1,.b2,.b3){fill:none;filter:none}
.cta .loop{--ln:rgba(11,11,11,.18);--tk:rgba(11,11,11,.22);--tl:rgba(11,11,11,.55);--ob:rgba(11,11,11,.32)}.cta .loop :is(.hr,.trk){stroke:rgba(11,11,11,.22)}
.cta .loop :is(.cm,.call,.rp){stroke:var(--ink)}.cta .loop .hd{fill:var(--ink)}.cta .loop .hg{fill:var(--ink);opacity:.1}
.cta .loop :is(.ag,.st){fill:var(--orange);stroke:var(--ink)}.cta .loop :is(.ag,.st).on{fill:var(--ink)}
.cta .loop .ob.on{fill:var(--ink)}.cta .loop .md{fill:rgba(11,11,11,.25)}.cta .loop .md.on{fill:var(--ink)}
.cta .loop .ver{fill:rgba(11,11,11,.8)}
@media (max-width:1199px){.cta-art{opacity:.35;right:-30%}}
@media (max-width:767px){.cta-art{display:none}}
/* inner-page heroes */
.head-split .r .frame.loop-frame{aspect-ratio:auto;background:transparent;overflow:visible;border-radius:0;max-width:520px;margin-left:auto;-webkit-mask-image:none;mask-image:none}
.dark .loop .sw{fill:var(--on-dark)}
@media (max-width:1199px){.head-split .r .frame.loop-frame{margin:0 auto;max-width:440px}}
.loop-tile .ver,.loop-tile .md,.loop-band .md{display:none}
.loop-tile .face{filter:none}
.loop[data-sel].loop-tile .bd:not(.sel) :is(.ticks,.orbit,.dt,.trk){opacity:.55}
.hero-visual{margin-left:calc(-1 * var(--s6));margin-right:calc(-1 * var(--s6))}
.layer-tab .glyph circle.on{stroke-width:2}
.lp-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* round 1 fixes */
.hero-visual{margin-left:0;margin-right:0}
@media (min-width:1200px){.hero-visual{margin-left:calc(-1 * var(--s6));margin-right:calc(-1 * var(--s6))}}
@media (max-width:767px){.hero-visual{width:calc(100% - 24px);margin:var(--s6) auto 0}
  .pillar .card-img{aspect-ratio:16/9}}
.loop-explorer .sw{font-size:21px}
.stack .loop-explorer .bd:hover :is(.b1,.b2,.b3){fill:#FFF9F5}
/* dot-field print (playbooks) */
.dots{display:block;width:100%;height:100%}
.dots .d{fill:none;stroke:var(--ink);stroke-linecap:round}
.dots .o{fill:none;stroke:var(--orange);stroke-linecap:round}
.dots .dk{fill:var(--orange)}
.dots .dh{transition:transform 1.4s var(--ease)}
.pb-card:hover .dots .dh,.pb-feature:hover .dots .dh{transform:rotate(24deg)}
.pb-feature .art,.pb-card .art,.wide-art{background:#F1EFEA}
/* contact band */
.cta-art{right:max(-260px,calc(50% - 980px));top:58%;width:min(56vw,780px)}
.cta .loop .ver,.cta .loop .md{display:none}
.cta .act{position:relative;z-index:2}
@media (min-width:1200px){.cta .act{grid-column:8/12}}
@media (max-width:767px){.loop-hero .sw,.loop-explorer .sw,.loop-frame .loop .sw{font-size:34px}}
/* pillar artefacts: one meaning each. CSS animations are always declared and paused; the relay in loop.js runs
   one artefact at a time in loop order (Sense → Decide → Act → Learn), pausing in place, so nothing ever resets.
   Base styles equal each animation's 0% frame; .pa-still shows the designed final frame (no JS, reduced motion). */
.pa-art{display:block;width:100%;height:100%}
.pa-art .lens{fill:#FFFFFF;stroke:var(--hair);stroke-width:1}
.pa-art *{animation-play-state:paused!important}
.pa-act .pa-art *{animation-play-state:running!important}
.pa-0 .rd{fill:#8F8D86;animation:rd 4.6s linear infinite;animation-delay:calc(var(--c) * .3s)}
@keyframes rd{0%{fill:#8F8D86}2%{fill:#D3D1CA}5%{fill:#FE7241}10%,30%{fill:#3A3A36}45%,100%{fill:#8F8D86}}
.pa-0 .lk{fill:none;stroke:var(--orange);stroke-width:1.4;stroke-dasharray:240;stroke-dashoffset:0;opacity:.9;animation:lk 4.6s var(--ease) infinite;animation-delay:calc(var(--c) * .3s + .2s)}
@keyframes lk{0%{stroke-dashoffset:0;opacity:.9}3%{stroke-dashoffset:0;opacity:0}4%{stroke-dashoffset:240;opacity:1}16%,100%{stroke-dashoffset:0;opacity:.9}}
.pa-0 .beam{fill:var(--orange);opacity:0;animation:beam 8s linear infinite}
@keyframes beam{0%{transform:translateX(56px);opacity:0}2%{opacity:.85}58%{transform:translateX(344px);opacity:.85}62%,100%{transform:translateX(344px);opacity:0}}
.pa-1 .grid{fill:none;stroke:var(--hair-2);stroke-width:1}
.pa-1 .stp0{fill:none;stroke:#E2E0D9;stroke-width:2}
.pa-1 .stp{fill:none;stroke:#3A3A36;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:stp 5.2s var(--ease) infinite}
@keyframes stp{0%,4%{stroke-dashoffset:0}10%,24%{stroke-dashoffset:.86}30%,44%{stroke-dashoffset:.62}50%,64%{stroke-dashoffset:.4}70%,84%{stroke-dashoffset:.18}90%,100%{stroke-dashoffset:0}}
.pa-1 .axis{stroke:var(--hair);stroke-width:1.5}
.pa-1 .vn circle{fill:#FFFFFF;stroke:#3A3A36;stroke-width:1.4}
.pa-1 .vn text{font:500 12px/1 var(--mono-lazy);fill:var(--faint)}
.pa-1 .cur{fill:none;stroke:var(--orange);stroke-width:2.2;transform:translateX(192px);animation:cur 5.2s var(--ease) infinite}
@keyframes cur{0%,4%{transform:translateX(192px)}10%,24%{transform:translateX(0)}30%,44%{transform:translateX(48px)}50%,64%{transform:translateX(96px)}70%,84%{transform:translateX(144px)}90%,100%{transform:translateX(192px)}}
.pa-2 .gt{fill:none;stroke:#BDBBB3;stroke-width:1.2}
.pa-2 .zone{fill:none;stroke:var(--orange-soft);stroke-width:18}
.pa-2 .lim{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.pa-2 .base{stroke:var(--hair);stroke-width:1}
.pa-2 .ndl path{stroke:#3A3A36;stroke-width:2.2;stroke-linecap:round}
.pa-2 .ndl circle{fill:#3A3A36}
.pa-2 .ndl{transform:rotate(-30deg);animation:ndl 4.6s var(--ease) infinite}
@keyframes ndl{0%{transform:rotate(-30deg)}22%,40%{transform:rotate(18deg)}56%,78%{transform:rotate(36deg)}94%,100%{transform:rotate(-30deg)}}
.pa-2 .own{fill:#FFFFFF;stroke:#3A3A36;stroke-width:1.6;animation:own 4.6s steps(1) infinite}
@keyframes own{0%,57%{fill:#FFFFFF;stroke:#3A3A36}60%,76%{fill:#FE7241;stroke:#FE7241}80%,100%{fill:#FFFFFF;stroke:#3A3A36}}
.pa-3 .mr{fill:none;stroke:#3A3A36;stroke-width:2.4;stroke-linecap:round;opacity:.45}
.pa-3 .fly{fill:var(--orange);opacity:0;animation:fly 4.2s var(--ease) infinite;animation-delay:calc(var(--d) * .4)}
@keyframes fly{0%{transform:translateY(0);opacity:0}18%{opacity:1}66%{transform:translateY(114px);opacity:1}78%,100%{transform:translateY(114px);opacity:0}}
.pa-3 .core{fill:#FFFFFF;stroke:var(--orange);stroke-width:2}.pa-3 .core-d{fill:#3A3A36}
.pa-3 .core2{fill:none;stroke:var(--orange);stroke-width:2;opacity:0;animation:core 4.2s var(--ease) infinite .5s}
@keyframes core{0%,58%{r:24px;opacity:0}66%{r:24px;opacity:.9}100%{r:44px;opacity:0}}
/* designed still frame */
.pa-still .pa-art *,.no-js .pa-art *{animation:none!important}
.pa-still .pa-0 .rd,.no-js .pa-0 .rd{fill:#8F8D86}
.pa-still .pa-0 .lk,.no-js .pa-0 .lk{stroke-dashoffset:0}
.pa-still .pa-1 .stp,.no-js .pa-1 .stp{stroke-dashoffset:0}
.pa-still .pa-1 .cur,.no-js .pa-1 .cur{transform:translateX(192px)}
.pa-still .pa-2 .ndl,.no-js .pa-2 .ndl{transform:rotate(18deg)}
@media (prefers-reduced-motion:reduce){.pa-art *{animation:none!important}.pa-0 .rd{fill:#8F8D86}.pa-0 .lk{stroke-dashoffset:0}.pa-1 .stp{stroke-dashoffset:0}.pa-1 .cur{transform:translateX(192px)}.pa-2 .ndl{transform:rotate(18deg)}}
.pillar .card-img{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair)}
/* round 3 */
.hero{padding-top:var(--s6);padding-bottom:var(--s6)}
@media (min-width:1200px){.hero-visual{max-width:640px;justify-self:end;width:calc(100% + 2 * var(--s5));margin-left:0;margin-right:calc(-1 * var(--s5))}}
.loop-hero .bd{cursor:pointer}
.loop-hero .bd.hover :is(.b1,.b2,.b3),.loop-hero .bd[data-band="4"].hover .face{fill:#FFF4EE}
.loop-hero .bd.hover>.hr{stroke:var(--orange)}
.lp-tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;padding:7px 12px;border-radius:999px;background:var(--ink);color:var(--on-dark);font:var(--t-ui);white-space:nowrap;opacity:0;transition:opacity var(--d-fast)}
.lp-tip.on{opacity:1}
.hero-visual{pointer-events:auto}
.dots .dh{animation:sweep 9s var(--ease-io) infinite alternate;animation-play-state:paused}.pa-act .dots .dh{animation-play-state:running}
@keyframes sweep{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.person .ph{background:#E7E3DA}
.person .ph img{filter:grayscale(1) contrast(1.06) brightness(1.04);mix-blend-mode:multiply}
/* ===== round 4 (independent review) ===== */
:root{--bone-2:#ECEAE3}
.hero .lead{color:#4A4A46}
/* dial: words inside the bezel, quiet explorer map */
.loop .sw{font:500 17px/1 var(--display);letter-spacing:.01em;fill:#3A3A36}
.loop .bn{font:500 15px/1 var(--display);letter-spacing:.005em;fill:#8F8D86;transition:fill var(--d-base)}
.loop .bd.sel .bn,.loop[data-sel] .bn{fill:#8F8D86}
.loop[data-sel="1"] .bn[data-n="1"],.loop[data-sel="2"] .bn[data-n="2"],.loop[data-sel="3"] .bn[data-n="3"],.loop[data-sel="4"] .bn[data-n="4"]{fill:var(--ink)}
.loop .bn{pointer-events:none}
.loop[data-sel] .bd:not(.sel) :is(.ticks,.orbit,.dt,.trk){opacity:.55}
.loop .call{stroke-dasharray:1;stroke-width:1.8}
.loop .ln{stroke:var(--ln,#E4E2DB)}
@media (max-width:767px){.loop-hero .sw{font-size:24px}.loop-explorer .bn{font-size:22px}}
/* pillars: one lens on the matte, no doubled frame */
.pillar .card-img{background:var(--bone-2);box-shadow:none}
#pillars{padding-bottom:0}
#pillars .pillar-list{border-bottom:0}
/* the case ledger (home) */
.ledger{list-style:none;border-top:1px solid var(--ink)}
.lrow{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:var(--s5) 0;border-bottom:1px solid var(--hair);align-items:start}
.lrow .lv{grid-column:1/5;font:500 112px/96px var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lrow .lt{grid-column:5/10}
.lrow h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.lrow .lu{margin-top:var(--s1);font:var(--t-lead);color:var(--ink)}
.lrow .lb{margin-top:var(--s2);color:var(--muted);max-width:44ch}
.lrow .lm{grid-column:10/13;display:flex;flex-direction:column;gap:6px;font:var(--t-small);color:var(--muted);align-items:flex-start}
.lrow .lm .glyph{color:var(--ink);margin-bottom:4px}
.lrow .lm .src{color:var(--ink);position:relative;z-index:2}
.lrow .stretch::after{content:"";position:absolute;inset:0}
.lrow:hover{background:linear-gradient(90deg,transparent,rgba(254,114,65,.04) 30%,transparent)}
@media (max-width:1199px){.lrow .lv{grid-column:1/-1;font-size:80px;line-height:72px}.lrow .lt{grid-column:1/9;margin-top:var(--s2)}.lrow .lm{grid-column:9/13;margin-top:var(--s2)}}
@media (max-width:767px){.lrow .lv{font-size:64px;line-height:60px}.lrow .lt,.lrow .lm{grid-column:1/-1}.lrow .lm{flex-direction:row;flex-wrap:wrap;gap:8px 16px;margin-top:var(--s3)}}
/* logos: the row fits its count */
.logo-cells{grid-template-columns:repeat(var(--lc,5),minmax(0,1fr))}
.logo-cells .logo-cell:nth-child(5n){border-right:1px solid var(--hair)}
.logo-cells .logo-cell:nth-child(n){border-right:1px solid var(--hair)}
.logo-cells{overflow:hidden;margin-right:0}
.logo-cells .logo-cell{margin-right:-1px}
.logo-group p{align-self:start;padding-top:var(--s4);color:var(--ink)}
/* recordings: light section, a designed poster on ink until the recording is public */
#video .player{max-width:none}
.player.poster{aspect-ratio:21/9;background:var(--ink-bg);box-shadow:none}
.player.poster .pv-art{position:absolute;right:-6%;top:50%;width:min(56%,720px);transform:translateY(-50%)}
.player.poster .loop{--ln:rgba(244,243,239,.16);--tk:rgba(244,243,239,.22);--tl:rgba(244,243,239,.6);--ob:rgba(244,243,239,.35)}
.player.poster .loop :is(.face,.b1,.b2,.b3){fill:none;filter:none}
.player.poster .loop :is(.hr,.trk){stroke:rgba(244,243,239,.2)}
.player.poster .loop :is(.ag,.st){fill:var(--ink-bg);stroke:rgba(244,243,239,.7)}
.player.poster .loop .ver{display:none}
.player.poster .pt{position:absolute;left:var(--s7);bottom:var(--s7);max-width:13ch;font:var(--t-h1);letter-spacing:var(--tr-h1);color:var(--on-dark)}
#video .video-meta .by{color:var(--muted)}
#video .video-meta h3{color:var(--ink)}
@media (max-width:767px){.player.poster{aspect-ratio:4/3}.player.poster .pt{left:var(--s3);bottom:var(--s3);font:var(--t-h3)}.player.poster .pv-art{width:90%;right:-30%}}
/* template viewer: soft right edge on long lines */
.viewer .code{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
/* contact band: the dial whole, smaller, to the right of the text */
.cta-art{right:max(24px,calc(50% - 700px));top:50%;width:min(30vw,420px);transform:translateY(-50%)}
@media (min-width:1200px){.cta h2,.cta .txt{grid-column:1/7}.cta .act{grid-column:1/7;grid-row:auto;margin-top:var(--s5)}}
/* playbook page art: lower */
.wide-art{aspect-ratio:4/1}
/* rhythm: one vertical scale */
.section{padding:var(--s10) 0}
.sec-foot{margin-top:var(--s5)}
.person-more{position:relative;display:flex;align-items:flex-end;aspect-ratio:1;padding:var(--s4);border:1px solid var(--hair);border-radius:var(--r-plate);background:var(--bone);transition:background-color var(--d-base) var(--ease)}
.person-more a{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.person-more a .ar{display:inline-block;transition:transform var(--d-base) var(--ease)}
.person-more:hover{background:#FFFFFF}.person-more:hover .ar{transform:translateX(4px)}
.person-more .stretch::after{content:"";position:absolute;inset:0}
@media (max-width:767px){.person-more{aspect-ratio:auto;min-height:160px}}
/* definition: four rows, one per station of the loop */
.def-rows{list-style:none;border-top:1px solid var(--hair);max-width:1040px;margin-left:calc(100% / 6)}
.def-rows li{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--hair)}
.def-rows p{font:var(--t-h3);letter-spacing:var(--tr-h3);max-width:none}
.def-rows a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair)}
.sglyph circle{fill:none;stroke:#C9C7C0;stroke-width:1.3}
.sglyph path{fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round}
.sglyph .sd{fill:var(--orange);stroke:none}
@media (max-width:1199px){.def-rows{margin-left:0}}
@media (max-width:767px){.def-rows li{grid-template-columns:40px minmax(0,1fr)}.def-rows p{font:var(--t-h4)}}
.def-rows p{grid-column:auto;text-align:left}
/* logo grid: 1px gaps on a hairline ground, so lines never double */
.logo-cells{gap:1px;background:var(--hair);border-left:1px solid var(--hair)}
.logo-cells .logo-cell,.logo-cells .logo-cell:nth-child(n){border:0;margin:0;background:var(--bone)}
a.logo-cell:hover{background:var(--bone-2)}
.logo-cells .logo-cell{height:auto;min-height:96px}
@media (max-width:767px){.logo-cells .logo-cell{min-height:72px}}
.sglyph{width:32px;height:32px}
@media (max-width:1199px) and (min-width:768px){.logo-cells{grid-template-columns:repeat(var(--lc,5),minmax(0,1fr))}}
@media (max-width:767px){.logo-cells{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-cells .logo-cell:last-child:nth-child(odd){grid-column:span 2}.logo-cells{border-left:0}}
/* two-tone section head (Stripe pattern): ink heading, grey lead, one block of display type */
.sec-tone{max-width:880px;margin-bottom:var(--s7);font:var(--t-h2);letter-spacing:var(--tr-h2);text-wrap:balance}
.sec-tone h2,.sec-tone p{display:inline;font:inherit;letter-spacing:inherit}
.sec-tone h2{color:var(--ink)}
.sec-tone p{color:#9A9890;max-width:none}
@media (max-width:767px){.sec-tone{font:var(--t-h3);letter-spacing:var(--tr-h3);margin-bottom:var(--s5)}}
.sec-tone h2::after{content:"."}
/* ===== round 5b (second independent review) ===== */
/* printed instrument: hairlines on white, legible beats */
.loop .face{fill:#FFFFFF}
.loop .b2{fill:#FAF9F6}
.loop{--ob:#8C8B85;--ln:#D9D7D0}
.loop .ag{fill:#3A3A36;stroke:#3A3A36;stroke-width:0}
.loop .ag.on{fill:var(--orange);stroke:var(--orange)}
.loop .ob{transition:fill .25s,r .25s}
.loop .ob.on{r:4.6px}
.loop .call{stroke-width:2.4}
.loop .rp{stroke-width:1.6}
.loop .st{fill:#FFFFFF;stroke:#3A3A36}
@media (min-width:1200px){.hero-visual{max-width:660px;width:calc(100% + 64px);margin-right:-64px}}
/* nav CTA stays ink while the hero is on screen (orange budget) */
.nav .btn-primary{transition:background-color var(--d-base),color var(--d-base)}
.nav.hero-in .btn-primary{background:var(--ink);color:var(--on-dark)}
.nav.is-stuck{background:rgba(246,245,241,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* glyph: hairline, no filled bullseye */
.glyph circle{stroke-width:1}.glyph .g1{fill:none;stroke:currentColor;stroke-width:1}.glyph .g1.on{fill:none;stroke:var(--orange)}
.glyph circle.on{stroke-width:1.6}
/* pillars: the artefact is the card — wide matte on top, text below; station word in the corner */
.pillar-list{gap:var(--s5) var(--s4)}
.pillar{grid-template-columns:1fr;gap:var(--s3);border-top:0;padding:0}
.pillar .card-img{position:relative;aspect-ratio:16/10;border-radius:12px;background:var(--bone-2)}
.pillar .card-img .cimg{position:relative;height:100%}
.pillar .card-img .pa-art{width:auto;height:100%;margin:0 auto}
.pillar .st-word{position:absolute;left:var(--s3);top:var(--s3);font:500 15px/1 var(--display);color:#6F6D66}
#pillars{position:relative}
#pillars.framed::before,#pillars.framed::after{display:none}
#pillars{padding-bottom:var(--s10)}
@media (max-width:767px){.pillar .card-img{aspect-ratio:4/3}}
/* pillar 0: no scanner bar; links are ink hairlines */
.pa-0 .lk{stroke:#3A3A36;stroke-width:1.2}
/* heads: short leads stack under the heading */
.sec-head.stacked h2{grid-column:1/8}
.sec-head.stacked .lead{grid-column:1/8;grid-row:2;margin-top:var(--s3)}
/* how we work: lighter steps, larger rings */
.how-steps p{font:500 22px/30px var(--display);letter-spacing:-.01em;color:var(--ink)}
.pring{width:88px;height:88px}
/* people: fill the grid */
.people{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
/* logos: lattice */
.logo-cell.empty{background:var(--bone)}
.logos{border-top:0}
.logos .wrap>.logo-group:first-child{border-top:1px solid var(--hair)}
.logo-cell svg,.logo-cell img{max-width:70%}
@media (max-width:767px){.logos .logo-cell.empty{display:none}}
/* ledger: layer name in ink */
.lrow .lm .ly{color:var(--ink)}
/* compact case cards: no ellipsis */
.case-c .bt{white-space:normal;overflow:visible}
/* code panel: right and bottom fades */
.viewer .code{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent),linear-gradient(180deg,#000 calc(100% - 64px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent),linear-gradient(180deg,#000 calc(100% - 64px),transparent);mask-composite:intersect}
/* contact band: larger dial bleeding off the right edge, crisp ink */
.cta-art{right:-12%;top:50%;width:min(52vw,760px);transform:translateY(-50%)}
.cta .loop{--ln:rgba(11,11,11,.3);--tk:rgba(11,11,11,.32);--tl:rgba(11,11,11,.7);--ob:rgba(11,11,11,.45)}
.cta .loop :is(.hr,.trk){stroke:rgba(11,11,11,.3)}
.cta .loop .ag{fill:var(--ink)}
.cta .loop .sw{fill:rgba(11,11,11,.7)}
@media (max-width:1199px){.cta-art{right:-40%;opacity:.4}}
/* playbook page wide print: centred */
.wide-art .dots{object-position:center}
@media (min-width:1200px){.hero-visual{width:calc(100% + 40px);margin-right:-40px}}
.person-more{min-width:0}.person-more a{min-width:0;overflow-wrap:break-word}
@media (max-width:767px){.person-more{padding:var(--s3)}.person-more a{font:var(--t-h4)}}
@media (max-width:767px){.logos .logo-cell.empty{display:grid}.logos .logo-cell.empty~.logo-cell.empty{display:none}.logo-cells .logo-cell:last-child:nth-child(odd){grid-column:auto}}
.lrow h2{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.ledger .lrow.is-hidden{display:none}
.hub-list.ledger .lrow .lv{font-size:88px;line-height:80px}
.lrow .lv{white-space:normal;text-wrap:balance}
.lrow .lv.long,.hub-list.ledger .lrow .lv.long{font-size:64px;line-height:62px;letter-spacing:-.035em}
@media (max-width:767px){.lrow .lv.long,.hub-list.ledger .lrow .lv.long{font-size:44px;line-height:46px}.hub-list.ledger .lrow .lv{font-size:56px;line-height:56px}}
@media (min-width:1200px) and (max-width:1399px){.hero h1{font-size:92px;line-height:88px}}
@media (max-width:1199px){.hero-visual{justify-self:center}}
/* ===== round 6 (final independent review) ===== */
/* pillar mattes: white, hairline inset; the drawing floats without a disc */
.pillar .card-img{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair)}
.pa-art .lens{fill:none;stroke:none}
/* how we work: rings as dashed circles (the full ring draws too) */
.pring .pa{stroke-dasharray:var(--f) 1;stroke-dashoffset:0}
.js .how:not(.in) .pring .pa{stroke-dashoffset:var(--f)}
/* hero agents: hollow nodes on a visible track, orange when lit */
.loop .trk{stroke:#BDBBB3;stroke-dasharray:1 5}
.loop .ag{r:6px;fill:#FFFFFF;stroke:#6F6D66;stroke-width:1.4}
.loop .ag.on{fill:var(--orange);stroke:var(--orange)}
.loop .call{stroke-width:2.6}
.loop .rp{stroke-width:1.8;opacity:.35}
.player.poster .loop .ag{fill:var(--ink-bg);stroke:rgba(244,243,239,.7)}
.cta .loop .ag{fill:var(--orange);stroke:var(--ink)}
/* logo wall: labels breathe; trailing empty cells merge into one quiet cell */
.logo-group p{padding-left:var(--s3)}
.logo-cell.empty{grid-column:span var(--span,1)}
@media (max-width:767px){.logo-group p{padding-left:0}.logos .logo-cell.empty{grid-column:auto}}
/* thesis rows on the grid */
.def-rows{margin-left:0;max-width:none}
.def-rows li{grid-template-columns:calc((100% - 11 * var(--gutter)) / 12 * 2 + var(--gutter)) minmax(0,1fr)}
.sglyph path{display:none}
@media (max-width:767px){.def-rows li{grid-template-columns:40px minmax(0,1fr)}}
/* one orange button per view: the nav CTA is ink everywhere */
.nav .btn-primary,.nav.hero-in .btn-primary{background:var(--ink);color:var(--on-dark)}
.nav .btn-primary:hover{background:#2A2A27}
/* Sense links never vanish; they flash orange when read */
@keyframes lk{0%,100%{stroke:#3A3A36;stroke-dashoffset:0;opacity:.9}6%{stroke:#FE7241;opacity:1}24%{stroke:#3A3A36;opacity:.9}}
/* code panel: a fade drawn over the right edge */
.viewer{position:relative}
.viewer .code{-webkit-mask-image:none;mask-image:none}
.viewer::after{content:"";position:absolute;top:48px;right:0;bottom:0;width:64px;background:linear-gradient(90deg,rgba(17,17,16,0),#111110);pointer-events:none}
/* compact case cards in narrow columns: caption under the figure */
.doc .case-c .vl span,.stack-panel .case-c .vl span{display:block;margin:6px 0 0}
/* people on mobile: two columns, the "more" card spans */
@media (max-width:767px){.people{grid-template-columns:1fr 1fr}.person-more{grid-column:1/-1;aspect-ratio:auto;min-height:120px}}
/* mobile rhythm */
@media (max-width:767px){.section{padding:var(--s8) 0}#pillars{padding-bottom:var(--s8)}.stack-sec{padding:var(--s8) 0}}
@media (max-width:1199px){.sec-head.stacked h2,.sec-head.stacked .lead{grid-column:1/-1}}
/* ===== iteration 5 (owner 31.10 evening) ===== */
.brand-line{margin-top:var(--s5);font:var(--t-small);color:var(--faint)}
.src-t{color:var(--muted)}
.logo-group.merged p{grid-column:1/3}
.people{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
/* hero v5: problem headline, solution sub, a wide picture band */
.hero.hero-v5{padding:var(--s8) 0 var(--s7)}
.hero-v5 h1{font:var(--t-display);letter-spacing:var(--tr-display);max-width:13.5ch}
.hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--s5);align-items:start}
.hero-row .lead{grid-column:1/8;margin:0;max-width:34em;color:#4A4A46}
.hero-cta{grid-column:9/13;justify-self:end;display:flex;flex-direction:column;align-items:flex-end}
.hero-v5 .hero-actions{margin-top:0}
.hero-v5 .brand-line{margin-top:var(--s2);text-align:right}
.hero-band{margin:var(--s7) 0 0;border-radius:16px;overflow:hidden;aspect-ratio:21/9;background:var(--bone-2)}
.hero-band img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:1200px) and (max-width:1399px){.hero-v5 h1{font-size:96px;line-height:92px}}
@media (max-width:1199px){.hero-row .lead,.hero-cta{grid-column:1/-1}.hero-cta{justify-self:start;align-items:flex-start;margin-top:var(--s4)}.hero-v5 .brand-line{text-align:left}}
@media (max-width:767px){.hero.hero-v5{padding:var(--s6) 0 var(--s5)}.hero-band{aspect-ratio:4/3;margin-top:var(--s5);border-radius:12px}.hero-band img{object-position:62% 50%}}
/* photo cards */
.pillar .card-img.photo,.pillar .cimg.photo{background:var(--bone-2);box-shadow:none}
.photo picture,.photo img{display:block;width:100%;height:100%;object-fit:cover}
.pillar .card-img{overflow:hidden}
.pillar .card-img img{transition:transform 1.2s var(--ease)}
.pillar:hover .card-img img{transform:scale(1.025)}
.tile.photo{width:100%;height:100%}
.pb-card:hover .tile.photo img,.pb-feature:hover .tile.photo img{transform:scale(1.025)}
.tile.photo img{transition:transform 1.2s var(--ease)}
/* how we work band */
.how-band{margin:0 0 var(--s6);border-radius:16px;overflow:hidden;aspect-ratio:21/9;background:var(--bone-2)}
.how-band img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){.how-band{aspect-ratio:3/2;border-radius:12px}}
/* layer explorer: the four drawers crossfade in one frame (no layout shift) */
.lay-imgs{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--bone-2)}
.lay-img{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.lay-img.on{opacity:1}
.lay-img img{width:100%;height:100%;object-fit:cover;display:block}
/* inner-page photo heads */
.head-split .r .frame.photo-frame{aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--bone-2);max-width:560px;margin-left:auto;-webkit-mask-image:none;mask-image:none}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.people{gap:var(--s3)}
.person .ph{border-radius:12px;background:#E7E3DA}
.person h3{font:600 17px/24px var(--display)}
.person-more a{font:500 19px/26px var(--display)}
@media (max-width:1199px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.people{grid-template-columns:1fr 1fr}}
/* ===== iteration 6: real artefacts ===== */
.art{margin:0;background:#FFFFFF;border:1px solid var(--hair);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 0 rgba(11,11,11,.03),0 22px 44px -28px rgba(11,11,11,.22)}
.art-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--hair-2);background:#FBFAF7;font:500 12.5px/1 var(--mono-lazy);color:var(--muted)}
.mono-ready .art-bar{font-family:var(--mono)}
.art-file{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.art-open{flex:none;font:500 13px/1 var(--sans);color:var(--ink)}
.art-open:hover{color:var(--orange-hover)}
.art-meta{flex:none}
.art-code{margin:0;padding:10px 0 12px;font:400 13px/21px var(--mono-lazy);color:var(--ink);overflow:hidden}
.mono-ready .art-code{font-family:var(--mono)}
.art-code .ln{display:block;white-space:pre;padding-right:16px}
.art-code .ln i{display:inline-block;width:34px;margin-right:14px;text-align:right;color:#B9B7B0;font-style:normal;user-select:none}
.art-code .ln.hi{background:#FFF1EA;box-shadow:inset 3px 0 0 var(--orange)}
.art-code .k{color:#A8441C}.art-code .c{color:#9C9A93}.art-code .s{color:#2F2F2C}.art-code .h{font-weight:600}
.art-table .at-wrap{overflow:auto}
.art-table table{width:100%;border-collapse:collapse;font:400 14px/20px var(--sans)}
.art-table th{text-align:left;font-weight:600;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--hair);white-space:nowrap}
.art-table td{padding:10px 14px;border-bottom:1px solid var(--hair-2);vertical-align:top}
.art-table tr:last-child td{border-bottom:0}
.art-table td:first-child{font-weight:500;color:var(--ink)}
.art-table td.num,.art-table .dom{font:400 13px/20px var(--mono-lazy);color:var(--muted)}
.mono-ready .art-table td.num,.mono-ready .art-table .dom{font-family:var(--mono)}
.art-table a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair)}
/* charts */
.art-chart{padding:20px 22px 16px}
.art-chart figcaption .ac-co{display:block;font:600 16px/22px var(--display);letter-spacing:-.01em}
.art-chart figcaption .ac-t{display:block;font:400 14px/20px var(--sans);color:var(--muted)}
.ac-bars{margin-top:18px;display:grid;gap:12px}
.ac-row{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr) 52px;gap:12px;align-items:center;font:400 14px/18px var(--sans)}
.ac-l{color:var(--muted)}.ac-row.hi .ac-l{color:var(--ink);font-weight:500}
.ac-track{height:10px;background:#F1EFEA;border-radius:5px;overflow:hidden}
.ac-bar{display:block;height:100%;width:var(--w);background:#C9C7C0;border-radius:5px;transform-origin:left center;transition:transform 1.1s var(--ease)}
.ac-row.hi .ac-bar{background:var(--orange)}
.js .art-chart:not(.in) .ac-bar{transform:scaleX(0)}
.ac-v{font:600 14px/18px var(--display);text-align:right;font-variant-numeric:tabular-nums}
.ac-n{margin-top:14px;font:400 13px/18px var(--sans);color:var(--faint)}
.ac-link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair)}
@media (prefers-reduced-motion:reduce){.ac-bar{transition:none}.js .art-chart:not(.in) .ac-bar{transform:none}}
/* hero evidence band */
.evidence{margin-top:var(--s7);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.ev-l{grid-column:1/8}.ev-r{grid-column:8/13;display:grid;gap:var(--s3)}
.art-shot img{display:block;width:100%;height:auto}
@media (max-width:1199px){.ev-l,.ev-r{grid-column:1/-1}.ev-r{margin-top:var(--s3);grid-template-columns:1fr 1fr}}
@media (max-width:767px){.ev-r{grid-template-columns:1fr}.evidence{margin-top:var(--s5)}}
/* pillars: the artefact heads the card */
.pillar .card-img.real{aspect-ratio:auto;min-height:0;background:none;box-shadow:none;overflow:visible;border-radius:0;display:flex}
.pillar .card-img.real>.art{flex:1}
.pillar-list{align-items:start}
/* atlas */
.atlas-stats{margin:0 0 var(--s6)}
.atlas-shots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.atlas-shots .as-list{grid-column:1/8;grid-row:1}.atlas-shots .as-detail{grid-column:8/13;grid-row:1}
@media (max-width:1199px){.atlas-shots .as-list,.atlas-shots .as-detail{grid-column:1/-1;grid-row:auto}.atlas-shots .as-detail{margin-top:var(--s3)}}
/* how we work: the file each step produces */
.how-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s2)}
.file-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid var(--hair);border-radius:8px;background:#FFFFFF;font:500 12.5px/1 var(--mono-lazy);color:var(--ink);transition:border-color var(--d-fast)}
.file-chip:hover{border-color:var(--orange)}
/* layer explorer: one artefact per layer, stacked in one grid cell (height = tallest, no shift) */
.lay-imgs{display:grid;position:static;aspect-ratio:auto;border-radius:0;overflow:visible;background:none}
.lay-img{grid-area:1/1;position:static;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.lay-img.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.head-split .r .frame.art-frame{aspect-ratio:auto;background:none;overflow:visible;border-radius:0;max-width:600px;margin-left:auto;-webkit-mask-image:none;mask-image:none}
/* ledger with chart */
.lrow.with-chart .lv{grid-column:1/4}
.lrow.with-chart .lt{grid-column:4/8}
.lrow.with-chart .lc{grid-column:8/13;grid-row:1/3}
.lrow.with-chart .lm{grid-column:4/8;grid-row:2;flex-direction:row;flex-wrap:wrap;gap:6px 16px;margin-top:var(--s2)}
.ac-mini{padding:16px 18px 12px}.ac-mini .ac-bars{margin-top:12px;gap:10px}.ac-mini figcaption .ac-co{display:none}
@media (max-width:1199px){.lrow.with-chart .lv,.lrow.with-chart .lt,.lrow.with-chart .lm,.lrow.with-chart .lc{grid-column:1/-1;grid-row:auto}.lrow.with-chart .lc{margin-top:var(--s3)}}
/* verify */
.verify .stat-row{margin:0 0 var(--s6)}
.art-ledger{max-width:none}
/* playbook excerpts */
.tile.real{height:100%;width:100%}
.pb-doc{height:100%;padding:20px 22px;background:#FFFFFF;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.pb-doc-h{font:400 13px/18px var(--sans);color:var(--faint)}
.pb-doc ol{list-style:none;margin-top:10px}
.pb-doc li{display:grid;grid-template-columns:26px minmax(0,1fr);padding:8px 0;border-top:1px solid var(--hair-2);font:500 15px/21px var(--display);letter-spacing:-.005em}
.pb-doc li i{font-style:normal;color:var(--orange);font-weight:600}
.pb-doc li.more{display:block;color:var(--faint);font:400 13px/20px var(--sans)}
.pb-card .art,.pb-feature .art{background:none;box-shadow:none}
.pb-feature .pb-doc{padding:28px 32px}.pb-feature .pb-doc li{font-size:18px;line-height:26px;padding:12px 0}
/* workshop frame */
.player.frame-real{aspect-ratio:auto;background:#111110}
.player.frame-real img{display:block;width:100%;height:auto}
.wide-art:has(.real){aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;overflow:visible}
.lay-imgs{grid-template-columns:minmax(0,1fr);width:100%}.lay-img,.art{min-width:0;max-width:100%}
.art-code{overflow-x:auto}
@media (max-width:1199px){.stage{max-width:none}}
@media (max-width:767px){.art-code{font-size:12px;line-height:19px}.art-code .ln i{width:26px;margin-right:10px}}
.pillar .card-img.real{height:330px}
.pillar .card-img.real>.art{overflow:hidden}
.pillar .card-img.real>.art-chart{display:flex;flex-direction:column;justify-content:center}
@media (max-width:767px){.pillar .card-img.real{height:auto}}
.people-stats{margin:0 0 var(--s6)}
.people-stats .v:not(.num){font:500 32px/40px var(--display);letter-spacing:-.02em}
/* ===== iteration 6, round 1 fixes ===== */
.hero-v5 h1{font-size:96px;line-height:92px;max-width:14ch}
.hero.hero-v5{padding-top:var(--s7)}
@media (max-width:1199px){.hero-v5 h1{font-size:72px;line-height:72px}}
@media (max-width:767px){.hero-v5 h1{font-size:44px;line-height:46px}}
.evidence{margin-top:var(--s6)}
/* code: wrap long lines with a hanging indent, never cut */
.art-code .ln{white-space:pre-wrap;word-break:break-word;padding-left:48px;text-indent:-48px}
.art-code .ln i{text-indent:0}
.art-code{overflow-x:visible}
@media (max-width:767px){.art-code .ln{padding-left:36px;text-indent:-36px}}
.at-more{padding:9px 14px;border-top:1px solid var(--hair-2);font:400 13px/18px var(--sans);color:var(--faint)}
.art-table td.num,.art-table .dom{white-space:nowrap}
/* templates viewer: the same light document style as every other artefact */
.viewer{background:#FFFFFF;color:var(--ink);border:1px solid var(--hair);box-shadow:0 22px 44px -28px rgba(11,11,11,.22)}
.viewer-bar{background:#FBFAF7;border-bottom-color:var(--hair-2)}
.viewer-file{color:var(--muted)}
.viewer-acts button,.viewer-acts a{color:var(--ink)}
.code{color:var(--ink)}
.code .l{white-space:pre-wrap;word-break:break-word}
.code .l::before{color:#B9B7B0}
.code .k{color:#A8441C}.code .s{color:#2F2F2C}.code .c{color:#9C9A93}
.code .l.hl{background:#FFF1EA;box-shadow:inset 3px 0 0 var(--orange)}
.viewer::after{display:none}
/* explorer: instant out, fade in (no ghosting) */
.lay-img{transition:none}
.lay-img.on{transition:opacity .35s var(--ease)}
/* pillars: same height in each row, content fits */
.pillar .card-img.real{height:300px}
.pillar .card-img.real>.art-chart{justify-content:center;padding:28px 30px}
.pillar .card-img.real>.art-chart .ac-bars{gap:16px}
.pillar .card-img.real>.art-chart .ac-track{height:14px}
.pillar .art{box-shadow:none}
/* ledger: the before/after bar sits under the figure */
.lvw{grid-column:1/5}
.lrow.with-chart .lvw{grid-column:1/5;grid-row:1/3}
.lrow.with-chart .lt{grid-column:5/10}.lrow.with-chart .lm{grid-column:5/10;grid-row:2}
.lbar{margin-top:var(--s3);max-width:300px;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.lb-row{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;margin-top:6px;font:400 13px/18px var(--sans);color:var(--faint)}
.lb-row.hi{color:var(--ink)}
.lb-t{height:8px;background:#ECEAE3;border-radius:4px;overflow:hidden}
.lb-row .ac-bar{background:#C9C7C0}.lb-row.hi .ac-bar{background:var(--orange)}
.lb-n{margin-top:8px;font:400 12.5px/17px var(--sans);color:var(--faint)}
@media (max-width:1199px){.lrow.with-chart .lvw{grid-column:1/-1;grid-row:auto}.lrow.with-chart .lt,.lrow.with-chart .lm{grid-column:1/-1;grid-row:auto}}
/* layer panel cases: one row of three */
@media (min-width:1200px){.stack-panel .panel-cases{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .stack-panel .case-c{padding:16px}.stack-panel .case-c .vl{font-size:26px;line-height:28px}.stack-panel .case-c .co{font-size:15px}}
/* definition rows without glyphs, aligned to column 3 */
.def-rows li{grid-template-columns:minmax(0,1fr);padding-left:calc((100% - 11 * var(--gutter)) / 12 * 2 + 2 * var(--gutter))}
@media (max-width:1199px){.def-rows li{padding-left:0}}
/* logo lattice: the sentence is the first cell */
.logo-group.merged{display:block}
.logo-group.merged .logo-cells{border-left:1px solid var(--hair)}
.logo-cell.logo-label{place-items:center start;padding:0 var(--s3)}
.logo-cell.logo-label p{font:500 15px/21px var(--sans);color:var(--ink);padding:0}
.logo-cell img[alt="MOEX"]{height:calc(var(--h) * 1.6px)}
@media (max-width:767px){.logo-cell.logo-label{grid-column:1/-1;min-height:56px}}
/* hero art on audience pages */
.hero-visual.hero-art{align-self:start;margin-top:var(--s4)}
/* workshops: calmer frame, less dead space */
#video{padding-bottom:var(--s8)}
.player.frame-real{max-width:1080px;border-radius:12px}
/* playbook feature: heading aligned with the top of the excerpt */
.pb-feature{align-items:start}.pb-feature .txt{padding-top:var(--s3)}
.pb-feature .art{aspect-ratio:auto}
.pb-card .art{aspect-ratio:auto}
.player.frame-real{max-width:900px}
.player.frame-real img{image-rendering:auto}
.atlas-shots .as-wide{grid-column:1/-1;grid-row:auto}
@media (max-width:767px){.pillar .card-img.real{height:auto}.logo-cells .logo-cell:nth-child(even):last-child{grid-column:span 2}}
@media (max-width:767px){.pillar .card-img.real{height:auto!important;aspect-ratio:auto!important;max-height:none}.pillar .card-img.real>.art{overflow:visible}.pillar .card-img.real .at-wrap{overflow-x:auto}}
.pillar .card-img:has(.real){aspect-ratio:auto;height:auto;background:none;box-shadow:none;overflow:visible;border-radius:0}
.pillar .card-img .cimg.real{display:flex;height:300px}
.pillar .card-img .cimg.real>.art{flex:1;overflow:hidden}
.pillar .card-img .cimg.real>.art-chart{display:flex;flex-direction:column;justify-content:center;padding:28px 30px}
@media (max-width:767px){.pillar .card-img .cimg.real{height:auto}.pillar .card-img .cimg.real>.art{overflow:visible}}
.pillar,.pillar .card-img,.pillar .cimg.real,.pillar .cimg.real>.art{min-width:0}
.pillar .card-img .cimg.real{height:324px}
@media (max-width:767px){.pillar .card-img .cimg.real{height:auto}}
/* ===== iteration 6, round 2 fixes ===== */
/* hero: copy then one full-width screen at about 1:1 */
.hero-row{align-items:end}
.hero-row .lead{grid-column:1/8}
.hero-cta{grid-column:1/8;justify-self:start;align-items:flex-start;margin-top:var(--s4)}
.hero-v5 .brand-line{text-align:left}
.evidence.one{display:block;margin-top:var(--s6)}
.evidence.one .art-shot img{width:100%}
/* code excerpts: no wrapping; lines that overflow fade at the right edge */
.art-code .ln{white-space:pre;word-break:normal;padding-left:0;text-indent:0}
.art-code{position:relative;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.code .l{white-space:pre;word-break:normal}
/* pillars: cards size to content, rows align at the top */
.pillar .card-img .cimg.real{height:auto}
.pillar .card-img .cimg.real>.art-chart{padding:22px 24px}
/* table footer and paragraphs inside artefacts span the card */
.art p,.at-more{max-width:none}
/* case rows: figure + bar | text | facts */
.lrow.with-chart .lvw{grid-column:1/4;grid-row:1}
.lrow.with-chart .lt{grid-column:4/10;grid-row:1}
.lrow.with-chart .lm{grid-column:10/13;grid-row:1;flex-direction:column;flex-wrap:nowrap;gap:6px;margin-top:0}
.lbar{max-width:none}
.lb-n{white-space:nowrap}
@media (max-width:1199px){.lrow.with-chart .lvw,.lrow.with-chart .lt,.lrow.with-chart .lm{grid-column:1/-1;grid-row:auto}.lrow.with-chart .lm{flex-direction:row;flex-wrap:wrap;margin-top:var(--s2)}}
/* one section-head system; even rhythm */
.definition{padding:var(--s8) 0 var(--s7)}
.section{padding:var(--s9) 0}
.sec-head{margin-bottom:var(--s6)}
.sec-foot{margin-top:var(--s4)}
@media (max-width:767px){.section{padding:var(--s7) 0}}
/* workshop: frame at half width beside its caption; the more-card matches photo height */
#video .player.frame-real{width:calc(58.33% - 12px);max-width:none;display:inline-block;vertical-align:top}
#video .video-meta{display:inline-grid;width:calc(41.66% - 12px);margin-left:24px;vertical-align:top;grid-template-columns:1fr}
#video .video-meta .main{grid-column:1/-1}
#video .video-meta h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
@media (max-width:1199px){#video .player.frame-real,#video .video-meta{width:100%;margin-left:0;display:block}#video .video-meta{margin-top:var(--s3)}}
.person-more{aspect-ratio:1;align-self:start}
/* research ledger on mobile: company, date, source only */
@media (max-width:767px){.art-ledger th:nth-child(1),.art-ledger td:nth-child(1),.art-ledger th:nth-child(4),.art-ledger td:nth-child(4){display:none}}
/* audience pages: the hero card stays inside the grid */
.hero-visual.hero-art{margin:var(--s4) 0 0;width:auto;max-width:100%;justify-self:stretch}
/* layer case cards on mobile: stacked, no sideways scroll */
@media (max-width:767px){.stack-panel .panel-cases{display:grid;overflow:visible}.stack-panel .panel-cases>*{flex:none}}
.hero-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end}
.hero-top h1{grid-column:1/8}
.hero-top .hero-row{grid-column:8/13;display:block;margin:0 0 10px}
.hero-top .hero-row .lead{font:400 19px/29px var(--sans);max-width:none}
.hero-top .hero-cta{margin-top:var(--s4)}
.hero.hero-v5{padding-top:var(--s7)}
.hero-v5 .evidence.one{margin-top:var(--s7)}
@media (max-width:1199px){.hero-top h1,.hero-top .hero-row{grid-column:1/-1}.hero-top .hero-row{margin-top:var(--s4)}}
/* ===== iteration 6, round 3: the hero risk file in live HTML ===== */
.rf-fig{margin:var(--s7) 0 0}
.rf-fig figcaption{margin-top:var(--s2);font:400 15px/22px var(--sans);color:var(--muted)}
.rf{background:#FFFFFF;border:1px solid var(--hair);border-radius:14px;overflow:hidden;box-shadow:0 1px 0 rgba(11,11,11,.03),0 30px 60px -36px rgba(11,11,11,.28);font:400 13px/18px var(--sans);color:var(--ink);text-align:left}
.rf-app{display:flex;align-items:center;gap:28px;height:52px;padding:0 20px;border-bottom:1px solid var(--hair-2)}
.rf-logo{display:flex;align-items:center;gap:8px;font:600 16px/1 var(--display);letter-spacing:-.01em}
.rf-logo i{width:16px;height:14px;background:var(--orange);clip-path:polygon(50% 0,100% 100%,0 100%)}
.rf-app nav{display:flex;gap:22px;height:100%;align-items:stretch;color:var(--muted)}
.rf-app nav>*{display:flex;align-items:center}
.rf-app nav b{font-weight:500;color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange)}
.rf-search{margin-left:auto;width:200px;height:30px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--hair);border-radius:7px;color:var(--faint)}
.rf-user{display:flex;align-items:center;gap:8px;font-weight:500}
.rf-user i{width:28px;height:28px;border-radius:50%;background:#ECEAE3;display:grid;place-items:center;font:600 11px/1 var(--sans);font-style:normal}
.rf-user em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--faint)}
.rf-body{display:grid;grid-template-columns:270px minmax(0,1fr) 210px}
.rf-mail{padding:18px 18px 20px;border-right:1px solid var(--hair-2);color:#3A3A36}
.rf-mail .rf-h5{margin:0 0 14px;font:600 14px/1 var(--display)}
.rf-from{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--hair-2)}
.rf-from i{width:30px;height:30px;border-radius:50%;background:#ECEAE3;display:grid;place-items:center;font:600 11px/1 var(--sans);font-style:normal}
.rf-from b{display:block;font-weight:600;color:var(--ink)}.rf-from em{font-style:normal;font-size:11.5px;color:var(--faint)}
.rf-from time{font-size:11.5px;color:var(--faint);align-self:start}
.rf-mail p{margin-top:9px;max-width:none}
.rf-subj{font-weight:600;color:var(--ink)}
.rf-att{list-style:none;margin-top:14px;display:grid;gap:8px}
.rf-att li{display:flex;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--hair-2);border-radius:8px}
.rf-att b{display:block;font-weight:500;color:var(--ink)}.rf-att em{font-style:normal;font-size:11.5px;color:var(--faint)}
.rf-ico{width:18px;height:22px;border-radius:3px;flex:none}.rf-ico.xls{background:#3F8F5B}.rf-ico.pdf{background:#C9483B}
.rf-main{padding:18px 22px 22px;min-width:0}
.rf-head{display:flex;justify-content:space-between;align-items:flex-start}
.rf-head .rf-h3{font:600 21px/26px var(--display);letter-spacing:-.015em}
.rf-tag{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:6px;background:#ECEAE3;font:500 11.5px/1.2 var(--sans);vertical-align:3px}
.rf-head p{margin-top:4px;color:var(--faint)}.rf-head p span{margin:0 8px;color:var(--hair)}
.rf-status{padding:6px 10px;border:1px solid var(--hair);border-radius:7px;font-weight:500}
.rf-tabs{display:flex;gap:22px;margin-top:16px;border-bottom:1px solid var(--hair-2)}
.rf-tabs>*{padding:8px 0}.rf-tabs b{font-weight:500;box-shadow:inset 0 -2px 0 var(--orange)}.rf-tabs span{color:var(--muted)}
.rf-blk{margin-top:14px;border:1px solid var(--hair-2);border-radius:10px;overflow:hidden}
.rf-blk .rf-bh{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px 6px}
.rf-blk .rf-h4{font:600 14px/18px var(--display)}
.rf-src{font:400 11.5px/1 var(--mono-lazy);color:var(--faint)}
.mono-ready .rf-src{font-family:var(--mono)}
.rf table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rf th{text-align:left;font-weight:500;color:var(--faint);font-size:11.5px;padding:6px 14px;background:#FAF9F6;border-top:1px solid var(--hair-2)}
.rf td{padding:7px 14px;border-top:1px solid var(--hair-2);white-space:nowrap}
.rf .r{text-align:right}
.rf-txt{padding:2px 14px 12px;color:#3A3A36;max-width:none}
.rf-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rf-side{padding:18px 16px;border-left:1px solid var(--hair-2);display:grid;align-content:start;gap:14px}
.rf-miss{padding:14px;border-radius:10px;background:#FFF1EA}
.rf-miss p,.rf-ok p{display:flex;gap:8px;align-items:center;font-weight:600;max-width:none}
.rf-miss p i,.rf-ok p i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--sans);font-style:normal;color:#FFFFFF}
.rf-miss p i{background:var(--orange)}.rf-ok p i{background:#3A3A36}
.rf-miss span,.rf-ok span{display:block;margin-top:6px;color:#4A4A46}
.rf-miss b{display:block;margin-top:12px;padding:8px 0;text-align:center;border-radius:7px;background:var(--orange);font-weight:600;color:var(--ink)}
.rf-ok{padding:4px 14px}
@media (max-width:1199px){.rf-body{grid-template-columns:minmax(0,1fr) 200px}.rf-mail{display:none}}
@media (max-width:767px){.rf-app nav,.rf-search,.rf-user span{display:none}.rf-body{grid-template-columns:1fr}.rf-side{border-left:0;border-top:1px solid var(--hair-2);grid-template-columns:1fr 1fr}
  .rf-main{padding:14px}.rf-blk{overflow-x:auto}.rf-two{grid-template-columns:1fr}.rf-head .rf-h3{font-size:18px}.rf-head{flex-direction:column;gap:8px}}
.rf th,.rf td{font-size:13px;line-height:18px;letter-spacing:0}
.rf th{font-size:11.5px}
.rf-from{grid-template-columns:30px minmax(0,1fr)}
.rf-from time{grid-column:2;margin-top:-4px}
.rf-from em{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-mail p,.rf-txt,.rf-miss span,.rf-ok span{font-size:13px;line-height:19px}
.rf{position:relative;max-height:640px;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 90px),transparent)}
@media (max-width:767px){.rf{max-height:720px}}
@media (max-width:767px){
  .rf th,.rf td{font-size:12.5px!important;line-height:17px!important;padding:6px 10px}
  .rf-blk.loc th:nth-child(3),.rf-blk.loc td:nth-child(3),.rf-blk.loc th:nth-child(4),.rf-blk.loc td:nth-child(4),.rf-blk.loc th:nth-child(5),.rf-blk.loc td:nth-child(5),
  .rf-blk.val th:nth-child(2),.rf-blk.val td:nth-child(2),.rf-blk.val th:nth-child(3),.rf-blk.val td:nth-child(3){display:none}
  .rf-blk .rf-bh{flex-direction:column;gap:4px}.rf-blk{overflow-x:visible}}
/* round 3: excerpts wrap with a hanging indent beyond the code start */
.art-code{-webkit-mask-image:none;mask-image:none;overflow-x:visible}
.art-code .ln{white-space:pre-wrap;word-break:break-word;padding-left:calc(48px + 4ch);text-indent:calc(-48px - 4ch)}
.art-code .ln i{text-indent:0}
@media (max-width:767px){.art-code .ln{padding-left:calc(36px + 3ch);text-indent:calc(-36px - 3ch)}}
.code .l{white-space:pre-wrap;word-break:break-word}
/* pillars: subgrid so the four headings align across each row */
@media (min-width:768px){
  .pillar-list{grid-template-rows:repeat(2,auto auto);row-gap:0}
  .pillar{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:var(--s3);margin-bottom:var(--s6)}
  .pillar .card-img .cimg.real{height:100%}
  .pillar .card-img{height:100%}}
/* how we work: file chips sit on one baseline */
.how-steps li{display:flex;flex-direction:column}
.how-steps .how-files{margin-top:auto;padding-top:var(--s3)}
/* definition rows: no empty left column */
.def-rows li{padding-left:0}
/* workshops: frame + sessions */
.vid-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--gutter);align-items:start}
#video .player.frame-real,#video .video-meta{width:auto;display:block;margin-left:0}
#video .video-meta{margin-top:var(--s3)}
.sessions h3{font:var(--t-h4);letter-spacing:var(--tr-h4)}
.sessions ol{list-style:none;margin-top:var(--s2);border-top:1px solid var(--hair)}
.sessions li{display:grid;grid-template-columns:110px 1fr;gap:var(--s2);padding:12px 0;border-bottom:1px solid var(--hair);font:400 15px/22px var(--sans)}
.sessions time{color:var(--faint);white-space:nowrap}
@media (max-width:1199px){.vid-grid{grid-template-columns:1fr}.sessions{margin-top:var(--s5)}}
/* contact band: what to send, as a list */
.cta-list{grid-column:8/13;grid-row:1/3;align-self:center;list-style:none;border-top:1px solid rgba(11,11,11,.25)}
.cta-list li{padding:14px 0;border-bottom:1px solid rgba(11,11,11,.25);font:500 22px/28px var(--display);letter-spacing:-.01em}
@media (max-width:1199px){.cta-list{grid-column:1/-1;grid-row:auto;margin-top:var(--s5)}}
/* mobile: 2x2 stats, a small more-card */
@media (max-width:767px){.stat-row{grid-template-columns:1fr 1fr!important}.stat-row>div+div{border-top:0}.stat-row>div{padding:var(--s2) 0!important;border-left:0!important}
  .person-more{aspect-ratio:auto!important;min-height:0}
  .art-ledger th:nth-child(3),.art-ledger td:nth-child(3){display:none}}
/* smaller heads where they compete */
.hero.aud h1{font-size:72px;line-height:72px;max-width:12ch}
@media (max-width:767px){.hero.aud h1{font-size:44px;line-height:46px}}
.pb-feature h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.rf .rf-h3{font:600 21px/26px var(--display);letter-spacing:-.015em;max-width:none}
.rf .rf-h4{font:600 14px/18px var(--display);max-width:none}
.rf .rf-h5{margin:0 0 14px;font:600 14px/1 var(--display)}
.rf-head .rf-h3{color:var(--ink);margin:0}
.rf-head .rf-h3 .rf-tag{color:#3A3A36;margin:0 0 0 8px}
/* ===== iteration 6, round 4 ===== */
.atlas-live{margin:0}
.ar-list{list-style:none}
.ar-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:center;padding:var(--s5) var(--s5);border-top:1px solid var(--hair-2)}
.ar-row:first-child{border-top:0}
.ar-t h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.ar-t p{margin-top:var(--s2);font:var(--t-body);color:#3A3A36}
.ar-t .ar-h{font:var(--t-small);color:var(--faint)}
.ar-img{border:1px solid var(--hair-2);border-radius:10px;overflow:hidden}
.ar-img img{display:block;width:100%;height:auto}
@media (max-width:1199px){.ar-row{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4)}}
/* rhythm */
#pillars{padding-bottom:var(--s8)}
.atlas-sec{padding-top:var(--s8)}
#video{padding-bottom:var(--s7)}
.logo-cell.logo-label p{align-self:center;padding:0!important}
.logo-cell.logo-label{display:flex;align-items:center}
/* case rows: wider bars, one note */
.lrow.with-chart .lvw{grid-column:1/5}
.lrow.with-chart .lt{grid-column:5/10}
.ledger-note{margin-top:var(--s3);font:var(--t-small);color:var(--faint)}
/* mobile */
@media (max-width:767px){
  .people-stats .v:not(.num){font:500 20px/26px var(--display)}
  .person-more{grid-column:auto!important}
  .logo-cells{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logo-cells .logo-cell:nth-child(even):last-child{grid-column:auto}
  .logo-cells .logo-cell:nth-child(3n):last-child{grid-column:span 2}
  .logo-cell img{max-width:84%}
  .art-table th:nth-child(n+3),.art-table td:nth-child(n+3){}
}
.atlas-shots .atlas-live{grid-column:1/-1}