/* cybos.ai — the steersman (docs/DESIGN.md, iteration 7). Loaded after site.css on every page.
   One medium: fine black engraving on warm paper, light from the upper left, one orange part at a time. */

/* ---------- chrome: the vane mark, footer engraving ---------- */
.wordmark .helm-mark{width:24px;height:24px;flex:none;color:var(--ink)}
.footer .wordmark .helm-mark{color:var(--on-dark)}
.footer .foot-mark{display:block;width:150px;height:auto;margin-top:var(--s5);opacity:.75}

/* ---------- engraved images everywhere ---------- */
.engr{display:block;width:100%;height:100%;object-fit:cover}
.layer-engr{object-fit:contain;height:auto}
.engr-tile{width:100%;height:100%;background:var(--bone-2)}
.head-split .r .frame.engr-frame{aspect-ratio:1440/830;background:transparent;overflow:visible;border-radius:0;box-shadow:none;-webkit-mask-image:none;mask-image:none}
.head-split .r .frame.engr-frame.square{aspect-ratio:1;background:var(--bone-2);border-radius:12px;overflow:hidden}
.lay-img .layer-engr{width:100%;height:auto}
.player.poster .pv-art img{width:100%;height:auto;opacity:.75}

/* ---------- home hero: the yacht that steers itself ----------
   live fix 03.11 (Arc): copy and art are two columns of the same centred container (.wrap); the art box is sized by
   the container (cqw), never by the window; its SVG "meet"s the whole boat into the box, bottom-right */
.hero.steer-hero{position:relative;height:auto;min-height:0;padding:0;overflow:hidden;background:var(--bone)}
.steer-hero .sh-grid{position:relative;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);column-gap:var(--gutter);align-items:end;container-type:inline-size}
.steer-hero .sh-copy{position:relative;z-index:2;align-self:start;padding:80px 0 72px;max-width:640px}
.steer-hero h1{font:500 80px/82px var(--display);letter-spacing:-.04em;margin:0;max-width:none;width:min(100%,620px);text-wrap:balance}
.steer-hero .lead{margin-top:28px;font:400 21px/31px var(--sans);letter-spacing:-.005em;color:var(--muted);max-width:500px;text-wrap:balance}
.steer-hero .hero-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.steer-hero .sh-art{position:relative;z-index:1;height:clamp(560px,56.25cqw,828px);pointer-events:none}
.steer-hero .sh-art svg{position:absolute;right:0;bottom:0;width:100%;height:100%;display:block;overflow:visible}
@media (max-width:1439px){.steer-hero h1{font-size:72px;line-height:74px}}
@media (max-width:1279px){.steer-hero h1{font-size:60px;line-height:62px}.steer-hero .lead{font-size:19px;line-height:28px}}
@media (max-width:1099px){.steer-hero .sh-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.steer-hero h1{font-size:56px;line-height:58px}}
@media (max-width:899px){
  .steer-hero .sh-grid{display:block}
  .steer-hero .sh-copy{padding:44px 0 8px;max-width:none}
  .steer-hero h1{font-size:44px;line-height:46px;width:auto}
  .steer-hero .lead{margin-top:20px;font-size:17px;line-height:25px}
  .steer-hero .hero-actions{margin-top:28px;gap:20px}
  .steer-hero .sh-art{height:auto;aspect-ratio:960/1000;max-height:62svh;margin-top:8px}
}
@media (max-width:899px) and (max-height:700px){
  .steer-hero .sh-copy{padding-top:20px}
  .steer-hero h1{font-size:38px;line-height:40px}
  .steer-hero .lead{margin-top:12px;font-size:15px;line-height:21px}
  .steer-hero .hero-actions{margin-top:16px}
}
@media (max-width:359px){.steer-hero h1{font-size:38px;line-height:40px}}
@media (max-width:899px){
}

/* ---------- home layers: a heading, then a pinned block of four steps ---------- */
.steer-layers{position:relative;background:var(--bone-2)}
.sl-head h2,.sl-title{font:var(--t-h2);letter-spacing:var(--tr-h2);margin:0}
/* desktop: the heading lives inside the pinned frame (the real h2 stays for assistive tech) */
@media (min-width:900px){
  .js .sl-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;padding:0}
  .sl-title{max-width:none;text-wrap:balance;margin-bottom:48px}
  .no-js .sl-title{display:none}
}
.js .steer-layers{height:calc(340svh + 200px)}
.sl-pin{padding:var(--s7) 0 var(--s9)}
.js .sl-pin{position:sticky;top:64px;height:calc(100svh - 64px);padding:0;display:flex;align-items:center;overflow:hidden}
.sl-pin>.wrap{width:100%}
.sl-grid{display:grid;grid-template-columns:420px minmax(0,1fr);gap:32px;align-items:center}
.sl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.sl-list li{border-bottom:1px solid var(--hair)}
.sl-list button{all:unset;box-sizing:border-box;display:block;width:100%;padding:17px 0;cursor:pointer;color:var(--faint);
  font:500 24px/30px var(--display);letter-spacing:-.015em;transition:color .3s var(--ease)}
.sl-list button:hover,.sl-list button[aria-selected=true]{color:var(--ink)}
.sl-list button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.sl-lines{position:relative;height:78px;margin-top:24px}
.sl-line{position:absolute;inset:0;max-width:340px;font:400 17px/26px var(--sans);color:var(--muted);opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.sl-line.on{opacity:1;transform:none;pointer-events:auto}
.sl-line a{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s var(--ease),color .3s var(--ease)}
.sl-line a:hover{color:var(--ink);background-size:100% 1px}
.no-js .sl-lines{height:auto}
.no-js .sl-line{position:static;opacity:1;transform:none;margin-bottom:8px}
.sl-plate{position:relative;margin-right:calc(-1 * var(--margin));overflow:hidden}
/* the zoomed plate fades into the page at its edges (an overlay is cheaper than a CSS mask in WebKit) */
.sl-plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,var(--bone-2),rgba(239,237,231,0) 5%),linear-gradient(to left,var(--bone-2),rgba(239,237,231,0) 5%),linear-gradient(to bottom,var(--bone-2),rgba(239,237,231,0) 7%,rgba(239,237,231,0) 91%,var(--bone-2))}
.sl-art{position:relative;transform-origin:0 0}
.sl-art svg{display:block;width:100%;height:auto;aspect-ratio:1440/830;overflow:visible}
.sl-plate .base{opacity:.15}
.sl-plate .cp,.sl-plate .fx{opacity:0;transition:opacity .55s var(--ease)}
[data-on="1"] .cp1,[data-on="2"] .cp2,[data-on="3"] .cp3,[data-on="4"] .cp4,
[data-on="1"] .fx1,[data-on="2"] .fx2,[data-on="3"] .fx3,[data-on="4"] .fx4{opacity:1}
@media (max-width:899px){
  .sl-title{display:none}
  .steer-layers{padding-top:var(--s8)}
  .sl-head h2{font-size:36px;line-height:40px}
  .sl-grid{grid-template-columns:1fr;gap:0}
  .sl-copy{display:contents}
  .js .sl-pin{align-items:flex-start;padding-top:12px}
  .sl-plate{order:1;width:min(100vw,calc(36svh * 1.735));margin:0 0 0 calc(50% - min(50vw,calc(18svh * 1.735)))}
  .sl-list{order:2;margin-top:12px}
  .sl-list button{padding:9px 0;font-size:18px;line-height:24px}
  .sl-lines{order:3;height:72px;margin-top:12px}
  .sl-line{font-size:16px;line-height:24px}
}
@media (max-width:899px) and (max-height:700px){
  .sl-plate{width:min(100vw,calc(30svh * 1.735));margin-left:calc(50% - min(50vw,calc(15svh * 1.735)))}
  .sl-list button{padding:7px 0;font-size:16px;line-height:22px}
  .sl-lines{height:66px;margin-top:8px}
  .sl-line{font-size:15px;line-height:22px}
}
/* the nav must fit at 320 */
@media (max-width:359px){.nav-cta .btn-primary{display:none}}

/* ---------- home: short sections ---------- */
.home-pb .pb-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-pb .pb-feature.home .txt{align-self:center}
.home-pb .pb-card.home h3{margin-top:var(--s2)}
@media (max-width:767px){.home-pb .pb-cards.two{grid-template-columns:1fr}}
#people .sec-foot{margin-top:var(--s5)}

/* ---------- the mark ---------- */
.hero-engr img{width:100%;height:auto;display:block}
}
.steer-still .steer-layers *,.steer-still .steer-hero *{transition:none!important}
@media (prefers-reduced-motion:reduce){.steer-layers *,.steer-hero *{transition:none!important}}
/* audience heroes: the yacht runs to the screen edge, as on home */
.hero.aud{overflow:hidden}
@media (min-width:1200px){
  .hero.aud .hero-visual.hero-engr{max-width:none;justify-self:stretch;align-self:center;
    width:auto;margin-left:0;margin-right:calc(-1 * (100vw - min(100vw, var(--maxw) + 2 * var(--margin))) / 2 - var(--margin))}
  .hero.aud .hero-engr img{width:118%;max-width:none;margin-left:-2%}
}
@media (max-width:1199px){.hero.aud .hero-visual.hero-engr{width:calc(100% + var(--margin));margin:var(--s5) calc(-1 * var(--margin)) 0 auto}}

/* ---------- IA v3: inbound hub ---------- */
.new-cards{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.new-card{position:relative}
.new-card .art,.hub-tile .art{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--bone-2)}
.new-card .art img,.hub-tile .art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.new-card:hover .art img,.hub-tile:hover .art img{transform:scale(1.025)}
.new-date{margin-top:var(--s2);font:var(--t-small);color:var(--muted)}
.new-card h3{margin-top:4px;font:var(--t-h4);letter-spacing:var(--tr-h4)}
.new-card h3 a{color:inherit;text-decoration:none}
.new-card .stretch::after{content:"";position:absolute;inset:0}
.hub-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.hub-tile h2{margin-top:var(--s3);font:var(--t-h3);letter-spacing:var(--tr-h3)}
.hub-tile p{margin-top:var(--s1);font:var(--t-body);color:var(--muted);max-width:34ch}
.hub-tile .arrow-link{display:inline-flex;margin-top:var(--s2)}
@media (max-width:899px){.new-cards,.hub-tiles{grid-template-columns:1fr}}
.nav .sheet-btn,.sheet .sheet-btn{margin-top:var(--s4);align-self:flex-start}
.work-band h2{max-width:20ch}

/* ---------- /work/ ---------- */
.work-head h1{font:var(--t-h1);letter-spacing:var(--tr-h1)}
.work-head .intro{margin-top:var(--s3);font:var(--t-lead);color:var(--muted);max-width:30em}
.w-sec{padding:var(--s8) 0;border-top:1px solid var(--hair)}
.w-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:center}
.w-sec:not(.has-art) .w-grid{grid-template-columns:minmax(0,8fr)}
.w-sec.flip .w-txt{order:2}
.w-txt h2{font:var(--t-h2);letter-spacing:var(--tr-h2)}
.w-txt p,.w-list li{margin-top:var(--s3);font:var(--t-lead);color:var(--muted);max-width:30em}
.w-list{list-style:none;margin:var(--s2) 0 0;padding:0}
.w-list li{margin-top:var(--s2);padding-left:22px;position:relative}
.w-list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1.5px;background:var(--orange)}
.w-art{border-radius:12px;overflow:hidden;background:var(--bone-2)}
.w-art img{display:block;width:100%;height:auto}
@media (max-width:899px){.w-grid{grid-template-columns:1fr;gap:var(--s4)}.w-sec.flip .w-txt{order:0}}
.hub-tile .art.contain img{object-fit:contain;padding:4% 2%}
.new-list{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--hair)}
.new-list li{border-bottom:1px solid var(--hair)}
.new-list .new-row{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;font:var(--t-h3);letter-spacing:var(--tr-h3);color:var(--ink);text-decoration:none}
.new-list .new-row .ar{transition:transform .2s var(--ease)}.new-list .new-row:hover .ar{transform:translateX(4px)}
@media (max-width:899px){.new-list .new-row{font:var(--t-h4)}}

/* phones with room to spare: centre the pinned group instead of leaving the bottom empty */
@media (max-width:899px) and (min-height:701px){.js .sl-pin{align-items:center;padding-top:0}}
@media (min-width:1600px){.sl-plate{margin-right:calc(-1 * (100vw - min(100vw, var(--maxw) + 2 * var(--margin))) / 2 - var(--margin))}}

/* ---------- round 4: one card grammar on paper (image above, 16 px, title), no boxes ---------- */
.cards{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s5) var(--s4)}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.card .card-link{display:block;color:var(--ink);text-decoration:none}
.card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:transparent;transition:transform 1.2s var(--ease)}
.card .card-link:hover img{transform:scale(1.02)}
.card h3{margin-top:16px;font:var(--t-h4);letter-spacing:var(--tr-h4)}
.cards.two .card h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.card p{margin-top:var(--s1);font:var(--t-body);color:var(--muted);max-width:36ch}
.card .ar{display:inline-block;transition:transform .2s var(--ease)}.card .card-link:hover .ar{transform:translate(2px,-2px)}
@media (max-width:1199px){.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.cards.four,.cards.two{grid-template-columns:1fr}}
.home-pb .sec-foot,#people .sec-foot{margin-top:var(--s5)}
.section.hub{padding-top:0}

/* Sessions: engraved portraits, names only */
.person.engr .ph{aspect-ratio:1;background:transparent;border-radius:0;overflow:hidden}
.person.engr img{width:100%;height:100%;display:block;filter:none}
.person.engr h3{margin-top:12px;font:var(--t-h4);letter-spacing:var(--tr-h4)}
.sess-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.sess{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--hair)}
.sess p{font:var(--t-body);color:var(--muted)}
@media (max-width:767px){.sess{grid-template-columns:1fr;gap:var(--s1)}}

/* the closing band: paper and ink, one black button (orange stays with the drawing) */
.cta.work-band{background:var(--bone-2);color:var(--ink);border-top:1px solid var(--hair)}
.cta.work-band h2{max-width:24ch;font:var(--t-h3);letter-spacing:var(--tr-h3)}
.sheet .sheet-btn{background:var(--ink);color:var(--on-dark)}

/* audience layer block */
.w-art.plain{background:transparent;border-radius:0}

/* short phones: the yacht is in the first screen */
@media (max-width:899px) and (max-height:700px){
}

/* /work/: one rhythm, heading | text | plate */
.w-row{padding:var(--s7) 0;border-top:1px solid var(--hair)}
.w-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.w-cols h2{grid-column:1/5;font:var(--t-h3);letter-spacing:var(--tr-h3)}
.w-body{grid-column:5/9}
.w-body p,.w-body li{font:var(--t-body);color:var(--muted)}
.w-body p+p,.w-body .w-list{margin-top:var(--s2)}
.w-body .w-list li{margin-top:var(--s1);font:var(--t-body)}
.w-plate{grid-column:9/13}
.w-plate img{display:block;width:100%;height:auto}
@media (max-width:899px){.w-cols{display:block}.w-body,.w-plate{margin-top:var(--s3)}}
.person.engr .pname{margin-top:12px;font:var(--t-h4);letter-spacing:var(--tr-h4);color:var(--ink)}
.cards>li.card{display:block}
.person.engr .ph{background:transparent!important}
.person.engr .ph img{mix-blend-mode:normal;filter:none}
.pb-card h3{margin-top:16px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:767px){.cards.three{grid-template-columns:1fr}}
/* /layers/ hub */
.lay-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.lay-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:center;padding:var(--s5) 0;border-bottom:1px solid var(--hair)}
.lay-row h2{font:var(--t-h3);letter-spacing:var(--tr-h3)}.lay-row h2 a{color:var(--ink);text-decoration:none}
.lay-row p{margin-top:var(--s1);font:var(--t-body);color:var(--muted)}
.lay-pic img{display:block;width:100%;height:auto}
@media (max-width:767px){.lay-row{grid-template-columns:1fr}}
.case-facts{margin-top:var(--s3);font:var(--t-body);color:var(--muted);max-width:48em}

/* ---------- round 5 ---------- */
.w-row.wide .w-body{grid-column:5/13}
.w-row.wide .w-body p{max-width:36em}
.pb-work{margin-top:var(--s6);font:var(--t-h4)}.pb-work a{color:var(--ink)}
.sess-names{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);border-top:1px solid var(--hair);padding-top:var(--s4)}
.sess-names li{display:flex;flex-direction:column;gap:4px}
.sess-names .nm{font:var(--t-h4);letter-spacing:var(--tr-h4);color:var(--ink)}
.sess-names .co{font:var(--t-body);color:var(--muted)}
@media (max-width:767px){.sess-names{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hero-engr.detail img{border-radius:0}
/* logo wall: wrapped rows, no cells, no filler */
.logos .logo-cells{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s4) var(--s6);border:0!important;grid-column:1/-1}
.logos .logo-cell{border:0!important;padding:0!important;min-height:0!important;flex:0 0 auto}
.logos .logo-cell.empty{display:none}
.logos .logo-group.merged{display:block}
/* dead bands */
.home-pb{padding-bottom:var(--s7)}
.section.hub{padding-top:0;padding-bottom:var(--s7)}
@media (min-width:900px){.js .steer-layers{height:340svh}}
.sl-plate.leaving{transition:none}
/* mobile 320–390 */
@media (max-width:359px){
  .nav-cta .btn-primary{display:inline-flex!important;height:34px;padding:0 12px;font-size:13px}
  .nav .wordmark span{font-size:21px}
}
@media (max-width:899px) and (max-height:700px){
  .sl-plate{width:min(100vw,calc(36svh * 1.735))!important;margin-left:calc(50% - min(50vw,calc(18svh * 1.735)))!important}
}
@media (max-width:899px){
  .js .sl-pin{align-items:flex-start!important;padding-top:8px!important}
  .steer-layers{padding-top:var(--s7)}
  .sl-head{padding-bottom:0}
}
.logos .logo-cells{background:transparent!important;padding:var(--s5) 0!important;max-width:1100px;margin:0 auto!important}
.logos .logo-cells .logo-cell,.logos .logo-cells .logo-cell:nth-child(n){background:transparent!important;min-height:0!important;height:auto!important}
.logos .logo-cell img{max-width:none!important;height:calc(var(--h)*1.05px)!important}
.logos .logo-cell img[alt="MOEX"]{height:calc(var(--h)*1.05px)!important}
@media (max-width:767px){.logos .logo-cells{gap:var(--s3) var(--s4)}.logos .logo-cell img{height:calc(var(--hm)*1px)!important}}
.logos .logo-cells{max-width:1240px}
.logos .logo-cell img[alt="MOEX"]{height:calc(var(--h)*1.45px)!important;opacity:1!important}
.sl-art .hires{position:absolute;inset:0;pointer-events:none}
.sl-art .hp{position:absolute;inset:0;visibility:hidden;opacity:0}
.sl-art .hp img{position:absolute;display:block;max-width:none}
.sl-art .lores{position:absolute;inset:0;pointer-events:none}
.sl-art .lores img{position:absolute;display:block;max-width:none}
.sl-art .lores .fx{position:absolute;inset:0}
.sl-art > svg:first-child{visibility:hidden}
/* round 5b: portraits back (ink-and-paper duotone) */
.sess-names{border-top:0;padding-top:0}
.sess-names .ph{aspect-ratio:1;overflow:hidden;margin-bottom:12px;background:var(--bone)}
.sess-names .ph img{width:100%;height:100%;object-fit:cover;display:block;filter:none;mix-blend-mode:normal}
/* round 5b: phones give the free height to the drawing */
@media (max-width:899px){
  .sl-plate{width:100vw!important;margin-left:calc(-1 * var(--margin))!important;margin-right:calc(-1 * var(--margin))!important;
    height:clamp(200px,calc(100svh - 324px),560px);display:flex;align-items:center}   /* r16c: no dead band under the caption */
  .sl-art{width:100%;flex:none}
}
@media (max-width:899px) and (max-height:700px){.sl-plate{height:clamp(200px,calc(100svh - 336px),300px)}}

/* ---------- round 6: below the pin, one hairline grid (12 columns, 1px rules), no bands or boxes ---------- */
.home-pb,.section.hub,#people{padding:var(--s7) 0;border-top:1px solid var(--hair);background:var(--bone)}
.section.hub{border-top:0;padding-top:0}
.home-pb .sec-head,#people .sec-head{margin:0;padding-bottom:var(--s4);border-bottom:1px solid var(--hair)}
.cards,.sess-names{gap:0!important;margin-top:0!important;border-bottom:1px solid var(--hair)}
.cards>li.card,.sess-names>li{padding:var(--s4) var(--s4) var(--s5);border-left:1px solid var(--hair)}
.cards>li.card:first-child,.sess-names>li:first-child{border-left:0;padding-left:0}
.cards.two>li.card{padding-top:var(--s5)}
.section.hub .cards.two{border-top:1px solid var(--hair)}
@media (max-width:767px){
  .cards>li.card,.sess-names>li{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--hair)}
  .cards>li.card:first-child,.sess-names>li:first-child{border-top:0}
  .sess-names>li:nth-child(2n){border-left:1px solid var(--hair);padding-left:var(--s3)}
}
.sess-names>li{padding-top:var(--s4)}
.home-pb .sec-foot,#people .sec-foot{margin-top:var(--s3)}
/* the closing band: full width, statement and button on one row */
.cta.work-band{padding:var(--s8) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.cta.work-band .grid{display:flex!important;align-items:center;justify-content:space-between;gap:var(--s5)}
.cta.work-band h2{max-width:none;flex:1;font:var(--t-h2);letter-spacing:var(--tr-h2)}
.cta.work-band .act{flex:none;margin:0}
@media (max-width:767px){.cta.work-band .grid{flex-direction:column;align-items:flex-start}.cta.work-band h2{font:var(--t-h3)}}
/* orange only for the active part and the primary button */
.w-list li::before{background:var(--ink)!important}
.arrow-link .ar,.sec-foot .ar{color:inherit}
/* plates on inner pages: the page paper, no boxes */
.engr-tile,.w-art,.head-split .r .frame.engr-frame.square,.pb-card .art,.pb-feature .art,.wide-art,.tile,.art .tile{background:transparent!important;border-radius:0!important;box-shadow:none!important}
.hero-engr.detail{background:transparent}
/* phones */
@media (max-width:599px){.ann{display:none}}
.chips,.case-filters,.filters{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.page-head h1.h1-long{font-size:52px;line-height:56px;letter-spacing:-.025em;max-width:26ch}
.page-head .intro-rest{margin-top:var(--s3);font:var(--t-body);color:var(--muted);max-width:36em}
@media (max-width:767px){.page-head h1.h1-long{font-size:36px;line-height:40px}}

/* ---------- round 7 ---------- */
/* (1) no plate boxes: engraved crops end in their own lines (edges fade into the paper), no frames */
img.engr:not(.layer-engr){-webkit-mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000 58%,transparent 100%)}
.pb-card .art,.pb-feature .art,.card .art,.wide-art,.engr-tile,.w-art,.w-plate,.hero-engr,.frame.engr-frame{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important}
.pb-card:hover .art{box-shadow:none!important;transform:none!important}
/* the pin: no vignette box; the plate overscans to the pin's full height and the viewport edge */
.sl-plate::after{display:none!important}
@media (min-width:900px){
  .js .sl-pin>.wrap{height:100%}
  .js .sl-grid{height:100%;align-items:stretch}
  .js .sl-copy{align-self:center}
  .js .sl-plate{display:flex;align-items:center;height:100%;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 72px);mask-image:linear-gradient(to right,transparent 0,#000 72px)}
  .js .sl-art{width:100%;flex:none}
}
/* (4) orange only in the drawing and the one primary CTA */
.nav-links a[aria-current]::after{background:var(--ink)!important}
.toc a.on{border-left-color:var(--ink)!important}
.w-act .btn-primary{background:var(--ink);color:var(--on-dark)}
/* (7) case chips: one scrolling row, never clipped */
.filters{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.filters::-webkit-scrollbar{display:none}
.filters .pill{flex:none;white-space:nowrap;width:auto}
/* (6) one baseline: fixed image heights and two-line titles in every card row */
.cards .card img,.cards .card .art img{aspect-ratio:16/10;height:auto;width:100%;object-fit:contain}
.cards .card h3{min-height:2.6em}
.sess-names .nm{min-height:1.3em}
.cta.work-band .grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--s6)}
.cta.work-band .wb-art img{display:block;width:100%;height:auto}
.cta.work-band .act{margin-top:var(--s4)}
@media (max-width:899px){.cta.work-band .grid{grid-template-columns:1fr}}
/* (8) phones: the hero strip is the stern, vane, pendulum and waterline */
/* (1) no blank band after the pin: the next section slides up over the pinned frame as it releases */
.js .steer-layers{margin-bottom:calc(-100svh + 64px)}
@media (min-width:900px){.js .steer-layers{height:calc(440svh - 64px)}}
@media (max-width:899px){.js .steer-layers{height:calc(440svh + 136px)}}
.js .steer-layers+section{position:relative;z-index:3;background:var(--bone);box-shadow:0 -1px 0 var(--hair)}
/* (6) every card in a row the same size: symmetric padding, rules inset to the column */
.cards>li.card,.sess-names>li{padding:var(--s4) var(--s3) var(--s5)!important}
.cards>li.card:first-child,.sess-names>li:first-child{padding-left:var(--s3)!important}
.cards,.sess-names{margin-left:calc(-1 * var(--s3))!important;margin-right:calc(-1 * var(--s3))!important}
.cards.two .card h3{min-height:0}
.card .card-link h3 .ar{font-size:.8em}
/* round 11: the pills wrap onto a second row instead of fading out at the edge */
.filters{flex-wrap:wrap!important;overflow:visible;row-gap:var(--s1)}

/* ---------- round 8 ---------- */
/* every section after the pin rises over it; the pinned section never paints over them */
.js .steer-layers~section,.js .steer-layers~footer{position:relative;z-index:3;background:var(--bone)}
.js .steer-layers~footer{background:var(--ink-bg)}
.js .steer-layers~section.cta.work-band{background:var(--bone-2)}
/* the pin: no feather; the drawing is clipped only by the page column */
@media (min-width:900px){.js .sl-plate{-webkit-mask-image:none!important;mask-image:none!important}}
/* engraved images: no vignettes; each ends at its own lines */
img.engr:not(.layer-engr){-webkit-mask-image:none!important;mask-image:none!important;object-fit:contain!important}
/* callouts: an ink hairline */
.out{border-left-color:var(--ink)!important;border-left-width:1px!important}
/* phones: the gloss is never cut; the H1 sits on the sub */
@media (max-width:899px){.sl-lines{height:auto!important;min-height:72px}.sl-line{position:absolute}.sl-line.on{position:relative}}
img.engr.iso{object-fit:contain!important;background:transparent;height:100%;width:100%}
.cards .card img.engr.iso{aspect-ratio:16/10;padding:4% 6%}
.hero-engr.detail img{width:100%;height:auto;max-height:560px;object-fit:contain}

/* ---------- round 9 ---------- */
/* one paper tone from the hero down */
.steer-layers{background:var(--bone)!important}
.js .steer-layers~section,.js .steer-layers~footer{position:static;z-index:auto}
/* the pin releases naturally after its climax holds (no slide-over, nothing ever cut) */
.js .steer-layers{margin-bottom:0!important}
@media (min-width:900px){.js .steer-layers{height:calc(380svh + 120px)!important}}
@media (max-width:899px){.js .steer-layers{height:calc(380svh + 200px)!important}}
/* desktop: the zoomed drawing runs on under the copy column, behind a paper gradient that sits only under the text */
@media (min-width:900px){
  .js .sl-plate{overflow:visible!important}
  .js .sl-pin{overflow:hidden}
  .js .sl-copy{position:relative;z-index:3}
  /* paper only under the text block itself; elsewhere the drawing runs on to the viewport edge */
  .js .sl-copy::before{content:"";position:absolute;z-index:-1;top:-32px;bottom:-32px;left:-40px;right:-72px;
    background:radial-gradient(closest-side,var(--bone) 72%,rgba(246,245,241,0))}
}
/* the lit parts switch as whole segments, each a 150 ms fade */
.sl-art .op,.sl-art .hpo{transition:opacity .15s linear}
/* phones: the hero strip ends in water below the keel, no hard crop under the yacht */
.cta.work-band .grid{grid-template-columns:minmax(0,1fr) auto!important}

.sl-art .hp{display:none}

/* ---------- round 10: hero propeller (carried by the hull's own transform; seen through the water) ---------- */

/* ---------- round 10: playbook cards read as articles you can click ---------- */
.card.pb-art{cursor:pointer}
.card.pb-art .card-link{display:block;height:100%;color:var(--ink);text-decoration:none}
.card.pb-art .art{position:relative}
.card.pb-art .art img.lit{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .18s var(--ease)}
.card.pb-art .card-link:hover .art img.lit,.card.pb-art .card-link:focus-visible .art img.lit{opacity:1}
.card.pb-art .card-link:hover img{transform:none}
.card.pb-art .pb-meta{margin-top:16px;font:var(--t-body);color:var(--muted)}
.card.pb-art h2,.card.pb-art h3{margin-top:6px;font:var(--t-h4);letter-spacing:var(--tr-h4);min-height:0}
.card.pb-art .t{background-image:linear-gradient(currentColor,currentColor);background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .18s var(--ease)}
.card.pb-art .card-link:hover .t,.card.pb-art .card-link:focus-visible .t{background-size:100% 1.5px}
.card.pb-art .ar{display:inline-block;opacity:0;transform:translateX(-4px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.card.pb-art .card-link:hover .ar,.card.pb-art .card-link:focus-visible .ar{opacity:1;transform:none}
.cards.pb-list{margin-top:var(--s4)}
.block .cards.pb-list .card img.engr.iso{aspect-ratio:16/10;height:auto}
/* round 11: on phones the plate's top edge dissolves into the paper instead of cutting flat through the sails */
/* round 11: cards — no meta on home (the block stays <= 30 words), the home hub cards share the playbook card, and on
   touch screens (no hover) the arrow is shown at rest so the title reads as a link */
.card.pb-art .art+h2,.card.pb-art .art+h3{margin-top:16px}
.card.pb-art p.line{margin-top:8px;font:var(--t-body);color:var(--muted)}
@media (hover:none){.card.pb-art .ar{opacity:1;transform:none}}
/* round 11: three-column card grids that wrap (e.g. four playbooks): each row starts without a left rule and the second
   row is ruled off like the first; on phones the list sits inside the page margin (no 4 px overflow) */
@media (min-width:768px){
  .cards.three>li.card:nth-child(3n+1){border-left:0}
  .cards.three:has(>li:nth-child(4))>li.card:nth-child(-n+3){border-bottom:1px solid var(--hair)}
}
@media (max-width:767px){
  .cards,.sess-names{margin-left:0!important;margin-right:0!important}
  .sess-names>li:nth-child(2n+1){padding-left:0!important}
  .sess-names>li:nth-child(2n){padding-right:0!important}
  .cards>li.card,.cards>li.card:first-child{padding-left:0!important;padding-right:0!important}
}
/* round 12: the phone menu's button keeps button type and padding (the sheet's link font made its text spill out) */
.sheet a.sheet-btn{font:var(--t-ui);letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 var(--s3);white-space:nowrap;border-radius:var(--r-pill)}
.for-list .for-who{margin:6px 0 0;font:var(--t-body);color:var(--muted)}
/* round 12: /playbooks/ with four playbooks: four across on desktop, 2x2 on tablets, ruled like the other grids */
@media (min-width:600px) and (max-width:1199px){
  .cards.four>li.card:nth-child(2n+1){border-left:0}
  .cards.four:has(>li:nth-child(3))>li.card:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}
/* round 13: the new H1 ("Rebuild your company around AI agents") in three balanced lines beside the yacht */
/* round 15: the Contessa 32 hero. Phones frame the whole rig and the water (viewBox set by steer.js), no top mask,
   and no rule between the water and the logo wall */
.steer-hero+.logos,.steer-hero+.logos .logo-group{border-top:0!important;box-shadow:none!important}
/* round 16b: the active part's one orange contour (1.5 css px at any zoom, no fill); the outline layer sits above the
   level plates and fades with its step like the old lit parts did */
.sl-art .ol-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sl-art .ol{fill:none;stroke:#E25828;stroke-width:var(--olw,1.5);stroke-linejoin:round;stroke-linecap:round}
.sl-art .ol-svg .op{transition:opacity .35s var(--ease)}
/* round 16b: the zoomed plates stop at the text column: clipped to the plate's box and faded in over the column gap */
@media (min-width:900px){.js .sl-plate{overflow:hidden!important;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px)!important;mask-image:linear-gradient(to right,transparent 0,#000 40px)!important}}
/* live fix 03.11: on tall windows the pin is no taller than a 1440x900 screen's (860 px), centred in the viewport
   while pinned, so the step list sits right under the logo wall and the plate keeps its usual proportions */
@media (min-width:900px){.js .sl-pin{height:min(calc(100svh - 64px),860px);top:calc(64px + (100svh - 64px - min(100svh - 64px, 860px)) / 2)}}
/* live fix 03.11: before the pin engages the drawing is hidden (no zoomed fragments under the logo wall); it fades in
   as the block pins, already framed on its first step */
.js .sl-plate{transition:opacity .4s var(--ease)}
.js .sl-plate.prepin{opacity:0}