/* Branchen — the sector overlays (Iman 2026-08-12).
   Every rule is scoped to .world or #bfab, so nothing here can reach the rest of
   the homepage. Generated from the lab prototype branchen-k4p7. */
.world h1, .world h2, .world h3{font-family:var(--head);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.06}
.world p{margin:0}
.world .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
#bfab .fab{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:70; display:flex;align-items:center}
#bfab .tab{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px; width:58px;padding:20px 0;cursor:pointer;border:0;font:inherit; background:rgb(255 255 255 / .8);backdrop-filter:blur(16px); border:1px solid var(--ink-12);border-left:0;border-radius:0 18px 18px 0; box-shadow:0 18px 40px -24px rgb(10 18 34 / .45); transition:background .3s var(--ease),width .35s var(--ease)}
#bfab .fab:hover .tab, #bfab .fab.open .tab{background:#fff}
#bfab .tab .glyph{display:block;width:22px;height:18px;color:var(--blue)}
#bfab .tab .word{writing-mode:vertical-rl;font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-46)}
#bfab .tab .pips{display:flex;flex-direction:column;gap:4px}
#bfab .tab .pips i{width:5px;height:5px;border-radius:50%;background:var(--ink-12); transition:background .3s var(--ease),transform .3s var(--ease)}
#bfab .fab:hover .tab .pips i, #bfab .fab.open .tab .pips i{background:var(--blue)}
#bfab .fab:hover .tab .pips i:nth-child(2){transform:scale(1.35)}
#bfab .menu{position:relative;z-index:1;margin-left:12px; width:min(360px,82vw); display:grid;gap:8px; opacity:0;pointer-events:none; transform:translateX(-18px) scale(.97);transform-origin:left center; transition:opacity .34s var(--ease),transform .42s var(--enter)}
#bfab .fab:hover .menu, #bfab .fab.open .menu, #bfab .fab:focus-within .menu{opacity:1;pointer-events:auto; transform:none}
#bfab .card{display:grid;grid-template-columns:44px 1fr 16px;align-items:center;gap:14px; text-align:left;width:100%;cursor:pointer;font:inherit;color:inherit; background:rgb(255 255 255 / .9);backdrop-filter:blur(16px); border:1px solid var(--ink-12);border-radius:16px;padding:14px 16px; box-shadow:0 20px 44px -28px rgb(10 18 34 / .5); opacity:0;transform:translateX(-14px); transition:border-color .25s var(--ease),transform .25s var(--ease), box-shadow .25s var(--ease),background .25s var(--ease)}
#bfab .fab:hover .card, #bfab .fab.open .card, #bfab .fab:focus-within .card{opacity:1;transform:none; transition:opacity .38s var(--ease) var(--d),transform .5s var(--enter) var(--d), border-color .25s var(--ease),box-shadow .25s var(--ease)}
#bfab .card:hover{border-color:var(--blue);transform:translateX(4px); box-shadow:0 26px 50px -26px rgb(0 132 255 / .55)}
#bfab .card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center; background:var(--wash);color:var(--blue)}
#bfab .card .ic svg{width:22px;height:22px}
#bfab .card .t{display:block;font-family:var(--head);font-weight:700;font-size:16px;letter-spacing:-.01em}
#bfab .card .s{display:block;font-size:13px;color:var(--ink-46);margin-top:3px;line-height:1.35}
#bfab .card .arw{color:var(--ink-12);transition:color .25s var(--ease),transform .25s var(--ease)}
#bfab .card:hover .arw{color:var(--blue);transform:translateX(3px)}
#bfab .curtain{position:fixed;z-index:80;background:var(--wash);border-radius:16px; pointer-events:none;opacity:0}
#bfab .curtain.run{opacity:1;transition:all .58s var(--enter)}
.world{position:fixed;inset:0;z-index:75;background:var(--ground); overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.world.on{opacity:1;visibility:visible}
.world .inner{opacity:0;transform:translateY(18px); transition:opacity .5s var(--ease) .12s,transform .6s var(--enter) .12s}
.world.on .inner{opacity:1;transform:none}
.back{position:fixed;top:22px;left:22px;z-index:92;display:inline-flex;align-items:center;gap:9px; background:rgb(255 255 255 / .82);backdrop-filter:blur(16px);border:1px solid var(--ink-12); border-radius:999px;padding:10px 18px 10px 13px;font-size:14px;font-weight:600; cursor:pointer;color:var(--ink);box-shadow:0 12px 30px -18px rgb(10 18 34 / .4)}
.back svg{width:15px;height:15px}
.back:hover{border-color:var(--blue);color:var(--blue)}
.world .whero{padding:150px 0 70px; background:radial-gradient(64% 52% at 22% 26%,var(--wash),rgb(230 243 254 / 0) 72%)}
.world .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:var(--blue); font-weight:600}
.world .whero h1{font-size:clamp(34px,4.6vw,64px);margin-top:20px;max-width:17ch}
.world .whero .lead{margin-top:24px;font-size:19px;color:var(--ink-70);max-width:56ch}
.world .wcta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.world .btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600; font-size:15.5px;padding:14px 26px;border-radius:999px}
.world .btn.pri{background:var(--blue);color:#fff;box-shadow:0 16px 34px -16px rgb(46 157 254 / .9)}
.world .btn.gho{border:1px solid var(--ink-12);color:var(--ink);background:#fff}
.world .slot{position:relative;border-radius:20px;overflow:hidden;background:var(--wash); border:1px solid var(--ink-12);aspect-ratio:4/3}
.world .slot img{width:100%;height:100%;object-fit:cover;display:block}
.world .slot.wide{aspect-ratio:16/9}
.world .slot .lab{padding:22px;max-width:34ch}
.world .slot .lab b{display:block;font-family:var(--head);font-size:13px;letter-spacing:.14em; text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.world .slot .lab span{font-size:13.5px;color:var(--ink-46);line-height:1.5}
.world .slot::after{content:'';position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 0 1px rgb(10 18 34 / .06)}
.world .whero .grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,4vw,64px); align-items:center}
.world .sec{padding:76px 0;border-top:1px solid var(--ink-12)}
.world .sec .head{max-width:46ch}
.world .sec h2{font-size:clamp(26px,3vw,40px)}
.world .sec .head p{margin-top:16px;color:var(--ink-70);font-size:17px}
.world .scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.world .scene .slot{aspect-ratio:4/3;margin-bottom:18px}
.world .scene .when{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue); font-weight:600}
.world .scene h3{font-size:19px;margin-top:10px}
.world .scene p{margin-top:10px;color:var(--ink-70);font-size:15px}
.world .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:44px; background:var(--ink-12);border:1px solid var(--ink-12);border-radius:20px;overflow:hidden}
.world .tile{background:var(--ground);padding:28px}
.world .tile .ic{width:38px;height:38px;border-radius:11px;background:var(--wash);color:var(--blue); display:grid;place-items:center;margin-bottom:16px}
.world .tile .ic svg{width:19px;height:19px}
.world .tile h3{font-size:17px}
.world .tile p{margin-top:9px;font-size:14.5px;color:var(--ink-70)}
.world .tag{display:inline-block;margin-top:12px;font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;border:1px solid var(--ink-12);border-radius:999px; padding:3px 9px;color:var(--ink-46)}
.world .close{padding:70px 0 110px;border-top:1px solid var(--ink-12);text-align:center}
.world .close h2{font-size:clamp(26px,3.2vw,42px);max-width:20ch;margin-inline:auto}
.world .close p{margin-top:18px;color:var(--ink-70);max-width:50ch;margin-inline:auto}
.world .close .wcta{justify-content:center}
@media (max-width:980px){
.world .whero .grid{grid-template-columns:1fr}
.world .scenes{grid-template-columns:1fr;gap:34px}
.world .tiles{grid-template-columns:1fr}
}
@media (max-width:760px){
#bfab .fab{top:auto;bottom:18px;left:14px;transform:none;flex-direction:column-reverse; align-items:flex-start;gap:10px}
#bfab .tab{flex-direction:row;width:auto;padding:12px 18px;border-radius:999px;border-left:1px solid var(--ink-12)}
#bfab .tab .word{writing-mode:horizontal-tb}
#bfab .menu{margin-left:0;padding-left:0;transform:translateY(14px) scale(.97)}
#bfab .fab.open .menu{transform:none}
.world .whero{padding:120px 0 50px}
}

body.branchen-open{overflow:hidden}
.world .wfoot{border-top:1px solid var(--ink-12);padding:34px 0 44px;font-size:13px;color:var(--ink-46)}
.world .wfoot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.world .wfoot a{color:inherit;text-decoration:none}
.world .wfoot a:hover{color:var(--ink)}

/* the site keeps its own navigation while an overlay is open: the world sits
   above the page but the nav is lifted above the world, and only then. */
html.branchen-open, body.branchen-open{overflow:hidden}
.world{z-index:60}
.back{z-index:85}
/* removed: the overlay carries its own cloned nav, this made a second one */

/* The overlays carry their own tokens. They must NOT sit on :root — the site
   has its own --ink/--blue and we may not touch them. Without this the world
   background resolved to nothing and the homepage showed through. */
.world, #bfab{--ground:#FBFDFF; --wash:#E6F3FF; --ink:#0A1222; --ink-70:rgb(10 18 34 / .70); --ink-46:rgb(10 18 34 / .46); --ink-12:rgb(10 18 34 / .12); --ink-6:rgb(10 18 34 / .06); --blue:#2E9DFE; --blue-2:#38A7FF; --cyan:#23D3EE; --head:'Fustat','Inter',sans-serif; --body:'Inter',system-ui,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --enter:cubic-bezier(.16,.84,.28,1);}
.world{font-family:var(--body); font-size:16px; line-height:1.6; color:var(--ink);
       background:var(--ground); -webkit-font-smoothing:antialiased}
#bfab{font-family:var(--body); font-size:16px; line-height:1.6; color:var(--ink)}
.world h1, .world h2, .world h3{font-family:var(--head); font-weight:700;
       letter-spacing:-.02em; margin:0; line-height:1.06}
.world p{margin:0}
.back{font-family:var(--body)}

/* the cloned site navigation inside an overlay */
.world .bnav{position:relative; z-index:6; padding:14px 0 0}
.world .bnav .nav-shell{position:sticky; top:14px}
.world .bnav + .whero{padding-top:44px}

/* ══ v3 — the sector page is a picture you stand in ═══════════════════════
   Blue-hour heroes: the building reads open and cared for. Approved 2026-08-13. */
.world{--r:clamp(20px,2.4vw,40px)}
.world .inner{position:relative}
.world .bnav{position:absolute;top:14px;left:0;right:0;z-index:6;padding:0}
.world .bnav .nav-shell{position:static}

.world .wstage{position:relative;margin:clamp(8px,1vw,14px);border-radius:var(--r);
  overflow:hidden;background:var(--ink);height:calc(100svh - clamp(16px,2vw,28px));min-height:540px;
  display:flex;flex-direction:column}
.world .wbed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.world .wveil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgb(10 18 34 / .78) 0%,rgb(10 18 34 / .46) 44%,rgb(10 18 34 / .10) 76%),
             linear-gradient(180deg,rgb(10 18 34 / .40) 0%,rgb(10 18 34 / 0) 26%)}
.world .wsay{position:relative;z-index:2;margin:auto 0;width:100%;max-width:1200px;
  padding:0 clamp(22px,5vw,72px);display:flex;flex-direction:column;
  gap:clamp(10px,1.3vw,17px);color:#fff}
.world .wbadge{display:inline-flex;align-items:center;gap:9px;width:fit-content;padding:9px 16px;
  border-radius:100px;background:rgb(255 255 255 / .14);border:1px solid rgb(255 255 255 / .26);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:13px;font-weight:600;letter-spacing:.02em}
.world .wbadge svg{width:15px;height:15px;stroke:var(--glow-1)}
.world .wstage h1{font-family:var(--font-head);font-weight:700;color:#fff;
  font-size:clamp(34px,5.4vw,72px);line-height:1.04;letter-spacing:-1.8px;max-width:15ch;
  text-wrap:balance;margin:0}
.world .wstage h1 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-weight:400;color:var(--glow-1);letter-spacing:0}
.world .wlead{font-size:clamp(15px,1.15vw,18px);line-height:1.62;max-width:48ch;
  color:rgb(255 255 255 / .84);margin:4px 0 0}





/* the cut-out corner is the way back to the other sectors */
.world .wcut{position:absolute;right:0;bottom:0;z-index:4;background:#fff;border:0;cursor:pointer;
  padding:clamp(13px,1.4vw,18px) clamp(15px,1.6vw,22px) clamp(13px,1.4vw,18px) clamp(26px,3vw,46px);
  border-top-left-radius:var(--r);border-bottom-right-radius:var(--r);
  display:flex;align-items:center;gap:clamp(11px,1.1vw,15px);font:inherit;text-align:left}
.world .wcut .mask{position:absolute;width:var(--r);height:var(--r);pointer-events:none}
.world .wcut .mask.top{top:calc(-1 * var(--r));right:0}
.world .wcut .mask.left{bottom:0;left:calc(-1 * var(--r))}
.world .wcut .mask svg{display:block;width:100%;height:100%}
.world .wcut .ring{width:clamp(36px,3vw,44px);height:clamp(36px,3vw,44px);border-radius:100px;
  display:grid;place-items:center;background:rgba(0,132,255,.08);border:1px solid rgba(0,132,255,.18);
  flex:0 0 auto}
.world .wcut .ring svg{width:17px;height:17px;stroke:var(--blue)}
.world .wcut .lab{display:flex;flex-direction:column}
.world .wcut .t{font-family:var(--font-head);font-weight:700;font-size:15.5px;letter-spacing:-.3px;
  color:var(--ink)}
.world .wcut .s{display:flex;align-items:center;gap:5px;color:var(--muted-2);font-size:12.5px}
.world .wcut .s svg{width:13px;height:13px;stroke:currentColor}
.world .wcut:hover .s{color:var(--blue)}

/* the scenes are rows now, never thumbnails */
.world .scenes{display:flex;flex-direction:column;gap:clamp(48px,6vw,96px);margin-top:clamp(34px,4vw,60px)}
.world .scene{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.world .scene:nth-child(even) .slot{order:2}
.world .scene .slot{aspect-ratio:4/3;border-radius:22px;margin:0}
.world .scene h3{font-family:var(--font-head);font-size:clamp(24px,2.7vw,38px);line-height:1.08;
  letter-spacing:-1px;margin-top:12px}
.world .scene p{font-size:clamp(15px,1.1vw,17.5px);line-height:1.62;color:var(--ink-2);max-width:44ch}
.world .scene .when{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue)}

@media (max-width:900px){
  .world .wstage{height:calc(100svh - 16px);min-height:480px}
  .world .wsay{margin-top:clamp(70px,18vw,120px);margin-bottom:auto}
  .world .scene{grid-template-columns:1fr;gap:18px}
  .world .scene:nth-child(even) .slot{order:0}
}

.world .scenes > .scene{width:100%;max-width:none}


/* ══ UI pass 2026-08-13 ═══════════════════════════════════════════════════
   Three things were wrong: the back control floated on the frame's rounded
   corner instead of belonging to the layout, the second button read as a grey
   box on the picture, and the site's own chat bubble sat exactly on top of the
   cut-out corner. */

/* 1 · back: a quiet glass disc, on the same left edge as the headline */
.world .back{position:absolute; top:clamp(20px,2.4vw,34px); left:clamp(30px,5.6vw,86px);
  z-index:7; width:42px; height:42px; padding:0; gap:0; border-radius:100px;
  background:rgb(255 255 255 / .14); border:1px solid rgb(255 255 255 / .28);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; font-size:0; box-shadow:none; overflow:hidden;
  display:grid; place-items:center; transition:background .25s var(--ease)}
.world .back:hover{background:rgb(255 255 255 / .26); color:#fff}
.world .back svg{width:17px; height:17px; stroke:#fff}

/* 2 · the second button is a text button with a disc, exactly like the
   homepage's own secondary — not a filled box on top of a photograph */




/* 3 · the cut-out moves to the bottom LEFT; the bottom right belongs to the
   site's chat bubble and fighting it would only ever be a patch */
.world .wcut{left:0; right:auto;
  border-top-left-radius:0; border-bottom-right-radius:0;
  border-top-right-radius:var(--r); border-bottom-left-radius:var(--r);
  padding:clamp(13px,1.4vw,18px) clamp(26px,3vw,46px) clamp(13px,1.4vw,18px) clamp(15px,1.6vw,22px)}
.world .wcut .mask{transform:scaleX(-1)}
.world .wcut .mask.top{left:0; right:auto}
.world .wcut .mask.left{right:calc(-1 * var(--r)); left:auto}

/* the cloned navigation stays put while the sector page scrolls */
.world .bnav{position:sticky; top:clamp(14px,1.6vw,20px)}

/* zero-height sticky rail: the navigation stays at the top while the sector
   page scrolls, without pushing the picture down */
.world .bnav{position:sticky; top:clamp(14px,1.6vw,20px); height:0; overflow:visible; z-index:7}
.world .bnav .nav-shell{position:relative}


/* ══ chrome pass 2026-08-13 ══════════════════════════════════════════════
   The lone round button in the corner belonged to nothing. It now sits on the
   same line as the navigation — back on the left, menu in the middle — and the
   page ends with the site's own footer instead of a stand-in. */
.world .bnav{position:sticky; top:clamp(14px,1.6vw,20px); height:0; overflow:visible; z-index:7}
.world .bnav .nav-shell{position:absolute; top:0; left:50%; transform:translateX(-50%)}

.world .back{position:absolute; top:0; left:clamp(20px,5.6vw,86px); z-index:8;
  width:auto; height:auto; border-radius:100px; font-size:14.5px; font-weight:600; color:#fff;
  display:inline-flex; align-items:center; gap:9px; padding:12px 20px 12px 14px;
  background:rgb(255 255 255 / .14); border:1px solid rgb(255 255 255 / .28);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:none;
  transition:background .25s var(--ease)}
.world .back:hover{background:rgb(255 255 255 / .26); color:#fff}
.world .back svg{width:15px; height:15px; stroke:#fff}

/* the borrowed footer keeps the site's own look; it only needs its own margin */
.world .bfoot{margin-top:clamp(40px,5vw,80px)}
.world .bfoot .footer{margin:0}

/* an absolutely positioned box at left:50% only has half the width available,
   which was folding the menu onto two lines */
.world .bnav .nav-shell{width:max-content; max-width:calc(100% - 2 * clamp(20px,5.6vw,86px))}


/* the back control now speaks the same language as the buttons in the bar:
   a solid pill, dark type, not a translucent ghost nobody notices */
.world .back{background:#fff; border:0; color:var(--ink);
  padding:13px 20px 13px 15px; font-size:14.5px; font-weight:600;
  box-shadow:0 14px 30px -16px rgb(10 18 34 / .55);
  backdrop-filter:none; -webkit-backdrop-filter:none}
.world .back:hover{background:#fff; color:var(--blue); transform:translateX(-2px)}
.world .back svg{stroke:currentColor}


/* ══ responsive pass 2026-08-13 ══════════════════════════════════════════
   On a phone the navigation pill fills the width, so an absolutely placed
   back button lands on top of it. Below 900px the bar becomes a stack: menu
   first, back underneath, both inside a zero-height rail so the picture is
   never pushed down. */
@media (max-width:900px){
  .world .bnav{display:flex; flex-direction:column; align-items:flex-start;
    gap:10px; padding:0 clamp(12px,4vw,20px)}
  .world .bnav .nav-shell{position:static; transform:none; left:auto;
    width:100%; max-width:none; order:1}
  .world .back{position:static; order:2; align-self:flex-start;
    padding:11px 17px 11px 13px; font-size:13.5px}
  .world .wsay{margin-top:clamp(150px,40vw,210px); margin-bottom:auto;
    padding-inline:clamp(16px,5vw,26px)}
  .world .wstage h1{font-size:clamp(30px,8.4vw,40px); letter-spacing:-1.2px; max-width:none}
  .world .wlead{font-size:15.5px; max-width:none}
  
  
  
  .world .wcut{padding:11px 20px 11px 13px; gap:10px}
  .world .wcut .t{font-size:14px}
  .world .wcut .s{font-size:11.5px}
}
@media (max-width:520px){
  .world .wbadge{font-size:12px; padding:8px 13px}
  .world .wcut .ring{width:34px; height:34px}
  .world .bfoot{margin-top:34px}
}

/* on a phone the BRANCHEN tab already sits bottom-left and does the same job;
   two controls in one corner is one too many */
@media (max-width:900px){ .world .wcut{display:none} }


/* the tab left the centre only below 760px, so between 760 and 1000 it sat on
   top of the hero's first button. It belongs at the bottom on every touch-sized
   screen, not just phones. */
@media (max-width:1000px){
  #bfab .fab{top:auto; bottom:18px; left:14px; transform:none;
    flex-direction:column-reverse; align-items:flex-start; gap:10px}
  #bfab .tab{flex-direction:row; width:auto; padding:12px 18px; border-radius:100px;
    border-left:1px solid rgb(10 18 34 / .12)}
  #bfab .tab .word{writing-mode:horizontal-tb}
  #bfab .menu{margin-left:0; padding-left:0; transform:translateY(14px) scale(.97)}
  #bfab .fab.open .menu, #bfab .fab:hover .menu{transform:none}
}


/* At 1024 the bar is wide enough to reach the back button — they overlapped.
   The two only fit side by side on a real desktop, so they stack earlier now. */
@media (max-width:1100px){
  .world .bnav{display:flex; flex-direction:column; align-items:flex-start; gap:10px; height:auto}
  .world .bnav .nav-shell{position:static; transform:none; width:100%; max-width:none; order:1}
  .world .back{position:static; order:2}
  .world .wsay{margin-top:clamp(150px,26vw,210px)}
}
/* below 1000 the branch tab itself sits bottom left — the cut-out cannot stay there */
@media (max-width:1000px){ .world .wcut{display:none} }


/* Measured, not guessed: the borrowed bar is 1017px wide. Centred, it only
   clears a back button on the left above ~1400px — below that the two share
   the same pixels. So they sit side by side on wide screens only, and the
   button drops onto its own line everywhere else. */
@media (max-width:1400px){
  .world .bnav{display:flex; flex-direction:column; align-items:flex-start; gap:10px; height:auto}
  .world .bnav .nav-shell{position:static; transform:none; width:100%; max-width:none; order:1}
  .world .back{position:static; order:2}
  .world .wsay{margin-top:clamp(150px,20vw,205px)}
}


/* ══ buttons 2026-08-13 ═══════════════════════════════════════════════════
   The sector heroes now use the very components the home hero uses —
   .cta-row / .cta / .ghost — so the two buttons share one baseline and one
   language. Only the colours change here, because these sit on a photograph
   instead of on white. */
.world .cta-row{margin-top:clamp(22px,3vw,36px)}
.world .ghost{color:#fff}
.world .ghost .pl{border:1px solid rgb(255 255 255 / .34);
  background:rgb(255 255 255 / .16); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 2px 3px rgb(255 255 255 / .28); transition:background .25s var(--ease)}
.world .ghost:hover .pl{background:rgb(255 255 255 / .3)}

/* Coming out of the tab, the pointer stays exactly where it was — so the
   hover kept the menu open inside the sector. In here it opens on a click. */
html.branchen-open #bfab .fab:hover .menu,
html.branchen-open #bfab .fab:focus-within .menu{
  opacity:0; pointer-events:none; transform:translateX(-18px) scale(.97)}
html.branchen-open #bfab .fab:hover .card,
html.branchen-open #bfab .fab:focus-within .card{opacity:0; transform:translateX(-14px)}
html.branchen-open #bfab .fab.open .menu{opacity:1; pointer-events:auto; transform:none}
html.branchen-open #bfab .fab.open .card{opacity:1; transform:none}


/* the home hero centres its buttons on a phone because its whole hero is
   centred there. These heroes are left-aligned, so the row stays left. */
.world .cta-row{justify-content:flex-start}


/* ══ dead buttons 2026-08-13 ══════════════════════════════════════════════
   The .fab is only a positioning box, but its box also contains the collapsed
   menu — 360px wide and a few hundred tall — and an invisible box still eats
   clicks. On a phone that box sits exactly over the hero's two buttons, so
   both were unclickable. The box now passes clicks through; only the real
   controls take them. (.menu manages its own pointer-events already.) */
#bfab .fab{pointer-events:none}
#bfab .tab{pointer-events:auto}