brand-story{display:block;scroll-margin-top:90px}
:host{display:block;--story-accent:#f37c45;--story-top:85px}
*{box-sizing:border-box}
.story{max-width:1320px;margin:0 auto;padding:38px clamp(20px,4vw,60px) 90px;color:var(--text,#202020);font-family:Archivo,sans-serif}
.intro{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:32px}
.intro h2{font:400 clamp(32px,4.5vw,62px)/1.03 Anton,sans-serif;text-transform:uppercase;text-wrap:balance;margin:0;max-width:750px}
.intro p{font-size:17px;line-height:1.55;color:var(--muted,#666);margin:0;max-width:530px;text-wrap:pretty}
.story[data-brand=xbf] .intro h2{font-family:Orbitron,sans-serif;text-transform:none;font-size:clamp(28px,3.4vw,44px);line-height:1.18;letter-spacing:-.035em}
.story-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(26px,4vw,58px);align-items:start;position:relative}
.scene{position:sticky;top:var(--story-top);z-index:1;min-width:0;background:#1d1c1a;color:#f3efe7;isolation:isolate;overflow:hidden;--scene-bg:#1d1c1a;--axis-y:52%}
.story[data-brand=xbf] .scene{background:#000d3a;--scene-bg:#000d3a}
.story[data-brand=holding]{padding:15px 0 55px}
.story[data-brand=holding] .intro h2{font-size:clamp(30px,3.6vw,48px)}
/* Editorial composition A: one photo window ends on the shared axis; the object rides that line; the chapter caption sits below it on solid ground. */
.scene-art{height:max(360px,min(clamp(420px,38vw,520px),calc(100svh - var(--story-top) - 165px)));position:relative;overflow:hidden}
.scene-top{position:absolute;top:18px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#bdb6aa}
.scene-top span:first-child{font:700 13px/1.2 Archivo,sans-serif;letter-spacing:.04em;color:#fff}
[data-brand=xbf] .scene-top span:first-child{font:700 13px/1.2 Orbitron,sans-serif}
[data-brand=xbf] .scene-top{color:#c9d3ea}
.window{position:absolute;top:50px;left:24px;right:24px;bottom:calc(100% - var(--axis-y));margin:0;overflow:hidden;background:#2a2824}
[data-brand=xbf] .window{background:#0a1a4d}
.photo,.shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo{opacity:.82;filter:grayscale(.3) contrast(1.05);transition:clip-path .8s cubic-bezier(.22,1,.36,1)}
[data-brand=xbf] .photo{filter:saturate(.75) contrast(1.05)}
.photo-control{clip-path:inset(100% 0 0 0)}
[data-step='2'] .photo-control,[data-step='3'] .photo-control{clip-path:inset(0)}
.shade{background:linear-gradient(180deg,transparent 30%,#1d1c1acc 100%)}
[data-brand=xbf] .shade{background:linear-gradient(180deg,#000d3a33 0%,transparent 35%,#000d3ad9 100%)}
.diagram{position:absolute;left:10px;right:10px;top:calc(var(--axis-y) - 90px);height:180px}
.route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#bdb6aa;stroke-width:2}
.route-base{opacity:.75}
[data-brand=xbf] .route{stroke:#c9d3ea}
.route-progress{stroke:var(--story-accent);stroke-width:4;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.route-detour{stroke:var(--story-accent);stroke-width:3;stroke-dasharray:6 8;opacity:0;transition:opacity .35s}
.route circle{fill:var(--scene-bg);stroke:#f3efe7}
[data-exception=true][data-step='2'] .route-detour{opacity:1}
.packet{position:absolute;left:10%;top:50%;width:56px;height:62px;margin:-31px 0 0 -28px;color:#fff}
.packet svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.packet b{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);font:500 10px/1.2 'IBM Plex Mono',monospace;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;background:var(--scene-bg);color:#fff;padding:4px 7px;border-bottom:2px solid var(--story-accent)}
.sheet{stroke:var(--story-accent);stroke-width:1.5;fill:#24221f;transition:transform .75s ease,opacity .6s ease}
.sheet path{fill:none}
.sheet-back{transform:translate(70px,-35px) rotate(15deg);opacity:.65}
.sheet-mid{transform:translate(36px,14px) rotate(-8deg);opacity:.85}
[data-step='1'] .sheet-back,[data-step='2'] .sheet-back,[data-step='3'] .sheet-back{transform:translate(9px,-9px) rotate(0)}
[data-step='1'] .sheet-mid,[data-step='2'] .sheet-mid,[data-step='3'] .sheet-mid{transform:translate(5px,-5px) rotate(0)}
[data-step='2'][data-exception=true] .sheet-front{transform:translate(-6px,-4px) rotate(-6deg)}
[data-step='3']:not([data-blocked=true]) .sheet-back{transform:translate(4px,-4px);opacity:1}
[data-step='3']:not([data-blocked=true]) .sheet-mid{transform:translate(2px,-2px);opacity:1}
.cargo{fill:#0a2160;stroke:var(--story-accent);stroke-width:2.2}
.cargo path+path{fill:none}
.packet .hitch{left:-78%;right:auto;width:78%;fill:none;stroke:#fff;stroke-width:2.4;stroke-linejoin:round;opacity:0;transform:translateX(-14px);transition:opacity .45s,transform .6s}
.hitch circle{fill:#000d3a}
[data-step='1'] .hitch,[data-step='2'] .hitch,[data-step='3'] .hitch{opacity:1;transform:none}
.route-label{position:absolute;top:calc(50% + 40px);font:500 10px/1.25 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#bdb6aa}
.route-label-start{left:6%}.route-label-middle{left:36%;opacity:.5}.route-label-end{right:4%;opacity:.5;text-align:right}
[data-step='1'] .route-label-middle,[data-step='2'] .route-label-middle,[data-step='3'] .route-label-middle,[data-step='3'] .route-label-end{opacity:1;color:#f3efe7}
.owner{position:absolute;top:4%;left:4%;padding:6px 10px;border-left:2px solid var(--story-accent);font-size:11px;background:var(--scene-bg);opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s}
[data-step='2'][data-exception=true] .owner{opacity:1;transform:none}
.seal{position:absolute;top:calc(50% - 82px);left:40%;border:1px solid var(--story-accent);background:var(--scene-bg);color:var(--story-accent);width:48px;height:48px;border-radius:50%;display:grid;place-content:center;font-size:26px;opacity:0;transform:scale(.7);transition:opacity .4s,transform .6s}
.seal span{position:absolute;top:56px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;color:#fff;background:var(--scene-bg);padding:2px 6px}
[data-step='3'] .seal{opacity:1;transform:scale(1)}
[data-step='3'][data-blocked=true] .seal{opacity:0}
[data-step='3'][data-blocked=true] .owner,[data-step='3'][data-blocked=true] .route-detour{opacity:1;transform:none}
.offer-basis{position:absolute;right:2%;top:2%;display:flex;flex-direction:column;gap:5px;opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .4s;font-size:10px}
.offer-basis span{background:var(--scene-bg);padding:4px 8px;border-left:2px solid var(--story-accent)}
[data-step='1'] .offer-basis{opacity:1;transform:none}
[data-journey=offers] .route-label-middle{visibility:hidden}
.scene-caption{position:absolute;top:calc(var(--axis-y) + 64px);bottom:16px;left:24px;right:24px;overflow:hidden}
.counter{display:block;font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--story-accent);margin-bottom:8px}
.scene-caption strong{display:block;min-height:2.16em;font:400 clamp(22px,2.3vw,33px)/1.08 Anton,sans-serif;text-transform:uppercase;text-wrap:balance;max-width:520px}
[data-brand=xbf] .scene-caption strong{min-height:2.36em;font:600 clamp(20px,1.9vw,27px)/1.18 Archivo,sans-serif;text-transform:none}
.record{font-size:12px;line-height:1.4;color:#d9d3c8;margin:8px 0 0;max-width:52ch}
[data-brand=xbf] .record{color:#d2daf0}
.interaction{border-top:1px solid #ffffff24;min-height:84px;padding:14px 24px;display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:8px 15px}
button,a{font-family:inherit;-webkit-tap-highlight-color:transparent}
.incident{background:transparent;color:#fff;border:1px solid #ffffff70;min-height:40px;padding:9px 13px;cursor:pointer;font-size:12px;line-height:1.3;text-align:left}
.incident:before{content:'+';color:var(--story-accent);margin-right:10px;font-size:16px}
.incident[aria-pressed=true]:before{content:'−'}
.incident:hover{background:#ffffff12}
.response{flex:1 1 170px;margin:0;font-size:11px;line-height:1.5;color:#f5ac87;text-wrap:pretty}
nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 8px;padding:0 24px 8px}
nav button{border:0;border-top:2px solid #ffffff24;background:transparent;color:#c9c9c9;cursor:pointer;min-height:53px;padding:9px 0 4px;font-size:10px;line-height:1.25;overflow-wrap:anywhere;text-align:left}
nav button span{display:block;color:#ccc;font:10px/1.5 'IBM Plex Mono',monospace;margin-bottom:4px}
nav button[aria-current=step]{border-color:var(--story-accent);color:#fff}
nav button[aria-current=step] span{color:var(--story-accent)}
button:focus-visible,a:focus-visible{outline:3px solid #ffae80;outline-offset:3px}
/* The chapter rail continues the scene axis: each chapter is a stop, the active one is marked. */
.chapters{list-style:none;margin:0;padding:0 0 0 clamp(18px,2vw,28px);border-left:1px solid var(--line,#ccc)}
.chapters li{position:relative;min-height:clamp(360px,48vh,550px);padding:50px 0 30px;border-top:1px solid var(--line,#ccc);display:flex;flex-direction:column;justify-content:center;outline:none}
.chapters li:before{content:'';position:absolute;left:calc(-1 * clamp(18px,2vw,28px) - 5px);top:-5px;width:9px;height:9px;background:var(--line,#ccc);transition:background .3s}
.chapters li.active:before{background:var(--story-accent)}
@media(min-width:851px){.chapters li:last-child{min-height:max(clamp(360px,48vh,550px),var(--story-scene-height,620px))}}
.chapters li>span{font:500 11px/1.4 'IBM Plex Mono',monospace;color:var(--muted,#666);margin-bottom:24px}
.chapters li.active>span{color:var(--accent,var(--blue,#b85025))}
.chapters h3{font:400 clamp(30px,3.1vw,43px)/1.07 Anton,sans-serif;text-transform:uppercase;text-wrap:balance;margin:0 0 18px}
[data-brand=xbf] .chapters h3{font:600 clamp(24px,2.5vw,34px)/1.15 Archivo,sans-serif;text-transform:none}
.chapters p{font-size:16px;line-height:1.6;color:var(--muted,#666);margin:0;max-width:440px;text-wrap:pretty}
.value{display:grid;grid-template-columns:1fr 1fr;gap:28px 55px;margin-top:50px;padding:30px 0 0;border-top:2px solid var(--text,#222)}
.value h3{font:600 20px/1.25 Archivo,sans-serif;margin:0 0 12px}
.value p{font-size:15px;line-height:1.6;margin:0;color:var(--muted,#666);max-width:550px;text-wrap:pretty}
.contact{justify-self:start;display:inline-flex;align-items:center;gap:20px;min-height:48px;padding:12px 20px;text-decoration:none;color:#fff;background:var(--action,#c34b1d);font-size:13px;font-weight:600}
[data-brand=xbf] .contact{background:var(--navy,#000d3a)}
@media(max-width:850px){
  .story{padding:30px 20px 64px}.intro{grid-template-columns:1fr;gap:18px}.intro p{font-size:16px}
  .story-grid{display:block}.scene{top:var(--story-top);--axis-y:44%}.scene-art{height:290px}
  .window{top:36px;left:16px;right:16px}.diagram{top:calc(var(--axis-y) - 60px);height:120px}
  .scene-top{top:12px;left:16px;right:16px;font-size:8px}.scene-caption{top:calc(var(--axis-y) + 46px);left:16px;right:16px;bottom:10px}
  .scene-caption strong{min-height:0;font-size:22px}[data-brand=xbf] .scene-caption strong{min-height:0;font-size:19px}.counter{margin-bottom:4px}
  .record{font-size:11px;margin-top:4px}.packet{width:40px;height:44px;margin:-22px 0 0 -20px}.packet b{font-size:8px;bottom:calc(100% + 6px);padding:2px 5px}
  .route-label{font-size:8px;top:calc(50% + 26px);max-width:30%}.owner{font-size:9px;padding:4px 6px}
  .offer-basis{font-size:8px;gap:3px}.offer-basis span{padding:2px 6px}
  .seal{width:30px;height:30px;font-size:18px;top:4px}.seal span{top:34px;font-size:9px}
  .interaction{padding:10px 16px;min-height:64px}.incident{font-size:11px;min-height:36px;padding:6px 9px}.response{font-size:10px;flex-basis:140px}
  nav{padding:0 16px 6px;gap:0 6px}nav button{min-height:46px;font-size:9px;padding:5px 0}nav button span{margin-bottom:2px;font-size:9px}
  .chapters{padding-left:16px}.chapters li:before{left:-21px}
  .chapters li{min-height:45svh;padding:28px 0;justify-content:flex-start}.chapters li>span{margin-bottom:18px}.chapters h3{max-width:600px}.chapters p{max-width:600px}
  .value{margin-top:28px;gap:25px;grid-template-columns:1fr}
}
@media(max-height:730px){.scene{position:relative;top:auto}.scene-art{height:max(360px,min(clamp(420px,38vw,520px),calc(100svh - 40px)))}.chapters li{min-height:300px}}
@media(max-height:730px) and (max-width:850px){.scene-art{height:290px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}