/* Appiq Solutions · Direction E shell
   Tokens, header, hero, path entry, shared tail blocks and the UI kit that path stories use.
   Path authors: read paths/README.md before adding CSS. Scope path CSS under .path[data-key="<key>"]. */

:root{
  --bg:#ECEBE7;--bg2:#E3E1DC;--bg3:#D9D7D1;
  --surface:#F6F5F2;--ink:#16181C;--ink2:#4A4E56;--mute:#6E727A;--line:rgba(22,24,28,.12);--line2:rgba(22,24,28,.22);
  --accent:#D9532E;--accent-ink:#1A0D07;
  --ui:#FBFAF8;--ui2:#F2F1ED;--ui3:#E6E4DF;--uiink:#17191D;--uiink2:#5A5E66;--uiline:rgba(23,25,29,.09);
  --shadow:0 1px 0 rgba(255,255,255,.7) inset,0 50px 90px -40px rgba(18,20,26,.42),0 22px 40px -22px rgba(18,20,26,.3);
  --shadow-s:0 16px 32px -16px rgba(18,20,26,.32),0 2px 6px -2px rgba(18,20,26,.12);
  --serif:'Newsreader',Georgia,serif;--hand:'Caveat','Comic Sans MS',cursive;--sans:'Instrument Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --hh:64px;--gut:clamp(16px,3.4vw,48px);--ease:cubic-bezier(.22,.8,.24,1);
  --photo-ink:#F4F2ED;--photo-ink2:rgba(244,242,237,.78);--photo-line:rgba(244,242,237,.2);
  --pa:var(--accent);
  /* crop of assets/viktor.webp (vertical portrait, head in the upper third): avatars, then larger frames */
  --vp-av:58% 26%;--vp-fr:50% 22%;
  /* chat bubbles (hero messages, Viktor's reply) */
  --bub:#FFFFFF;--bubink:#111B21;--bubt:rgba(17,27,33,.5);--tick:#4FA3E0;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#111316;--bg2:#171A1E;--bg3:#1F2329;
  --surface:#1B1F24;--ink:#ECEAE5;--ink2:#B3B5B9;--mute:#8C9097;--line:rgba(236,234,229,.12);--line2:rgba(236,234,229,.24);
  --accent:#F06A42;
  --bub:#202C33;--bubink:#E9EDEF;--bubt:rgba(233,237,239,.55);
  --ui:#1C2026;--ui2:#22272E;--ui3:#2B3038;--uiink:#ECEAE5;--uiink2:#A3A7AE;--uiline:rgba(236,234,229,.09);
  --shadow:0 1px 0 rgba(255,255,255,.06) inset,0 50px 90px -40px rgba(0,0,0,.75),0 22px 40px -22px rgba(0,0,0,.6);
  --shadow-s:0 16px 32px -16px rgba(0,0,0,.6),0 2px 6px -2px rgba(0,0,0,.4);
  color-scheme:dark;
}
@media (max-width:760px){:root{--hh:56px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background-color .4s,color .4s}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:min(1280px,100%);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.eyebrow{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
.h2{font:500 clamp(34px,4.4vw,64px)/1.03 var(--serif);letter-spacing:-.022em;margin:0;text-wrap:balance;font-variation-settings:"opsz" 72}
.h2 em{font-style:italic;color:var(--pa)}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--ink2);max-width:34em;margin:20px 0 0}
.q{color:var(--accent)}
/* "Beispiel" label: every piece of example data carries one */
.bsp{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:var(--ink);color:var(--bg);white-space:nowrap}
.bsp::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.bsp.on-photo{background:rgba(10,11,13,.55);color:#F4F2ED}
.todo{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:3px 7px;border-radius:5px;border:1px dashed currentColor;color:var(--accent);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:500;font-size:15px;padding:12px 14px 12px 20px;border-radius:99px;border:0;white-space:nowrap;transition:transform .15s var(--ease),background-color .3s}
.btn i{width:24px;height:24px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-style:normal;transition:transform .25s var(--ease)}
.btn i svg{width:13px;height:13px;stroke:var(--accent-ink)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover i{transform:translateX(3px)}}
.btn.sm{font-size:14px;padding:9px 10px 9px 16px}
.btn.lg{font-size:17px;padding:16px 18px 16px 26px}
.btn.lg i{width:30px;height:30px}
.btn.light{background:#F4F2ED;color:#15171B}
.link{display:inline-flex;align-items:center;gap:8px;font-size:15px;text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:2px}

/* ===== header ===== */
.hd{position:fixed;inset:0 0 auto;height:var(--hh);z-index:60;display:flex;align-items:center;gap:22px;padding-inline:var(--gut);background:var(--bg);transition:background-color .4s,box-shadow .3s}
.hd.scrolled{box-shadow:0 1px 0 var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:16.5px;letter-spacing:-.01em;white-space:nowrap}
.logo img{width:26px;height:auto}
.logo span{font-weight:400;color:var(--ink2)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.seg{display:flex;border:1px solid var(--line2);border-radius:99px;padding:3px}
.seg button{border:0;background:none;font:500 12px var(--mono);padding:5px 9px;border-radius:99px;color:var(--mute)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.ico{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:none;display:grid;place-items:center;flex:none}
.ico svg{width:17px;height:17px}
/* topic switcher */
.tsw{position:relative}
.tsw-btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 16px;border-radius:99px;border:1px solid var(--line2);background:var(--surface);font-size:14.5px;max-width:42vw;transition:border-color .2s,background-color .3s}
.tsw-btn small{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.tsw-btn b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsw-btn svg{width:12px;height:12px;flex:none;transition:transform .25s var(--ease)}
.tsw-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.tsw-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--pa);flex:none}
@media (hover:hover) and (pointer:fine){.tsw-btn:hover{border-color:var(--ink2)}}
.tsw-panel{position:absolute;top:calc(100% + 10px);left:0;width:min(520px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:10px;z-index:70;opacity:0;transform:translateY(-6px) scale(.985);transform-origin:20% 0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
.tsw-panel.open{opacity:1;transform:none;visibility:visible;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.tsw-panel .eyebrow{margin:8px 12px 8px}
.tsw-panel ol{list-style:none;margin:0;padding:0}
.tsw-panel ol a,.tsw-panel a.home{display:grid;grid-template-columns:28px 1fr auto;gap:4px 10px;align-items:baseline;padding:10px 12px;border-radius:12px;text-decoration:none;transition:background-color .15s}
.tsw-panel a .n{font:500 11px var(--mono);color:var(--mute)}
.tsw-panel a .s{font:500 17px/1.3 var(--serif)}
.tsw-panel a .t{font:500 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.tsw-panel a[aria-current="page"]{background:var(--bg2)}
.tsw-panel a[aria-current="page"] .n{color:var(--accent)}
.tsw-panel ol a:hover,.tsw-panel ol a:focus-visible,.tsw-panel a.home:hover,.tsw-panel a.home:focus-visible{background:var(--bg2);outline-offset:-2px}
.tsw-panel a.home{grid-template-columns:28px 1fr;border-top:1px solid var(--line);border-radius:0 0 12px 12px;margin-top:6px;padding-top:14px}
.tsw-panel a.home .s{font:500 15px var(--sans)}
.tsw-panel .mob{display:none}

@media (max-width:760px){
  .hd{gap:10px}
  .logo span,.hd-r .seg,#hdcta{display:none}
  .tsw{position:static}
  .tsw-btn{height:38px;padding:0 12px;max-width:none;font-size:14px}
  .tsw-btn small{display:none}
  .tsw-btn b{max-width:46vw}
  .tsw-panel{left:12px;right:12px;width:auto;top:calc(var(--hh) + 6px);max-height:calc(100svh - var(--hh) - 18px);overflow:auto}
  .tsw-panel a .t{display:none}
  .tsw-panel ol a{grid-template-columns:24px 1fr}
  .tsw-panel .mob{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 8px 6px;border-top:1px solid var(--line);margin-top:6px;flex-wrap:wrap}
}

/* ===== hero ===== */
/* hook headline over the owner photo, then seven quiet sentence lines. The key photos stay hidden in .h-media: the FLIP opens from them */
.hero{height:100svh;min-height:600px;padding:var(--hh) 14px 14px;position:relative}
.hero-in{position:relative;height:100%;border-radius:22px;overflow:hidden;background:#15171a;isolation:isolate}
.h-media{position:absolute;inset:0}
.h-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s var(--ease)}
.h-slide.on{opacity:1;z-index:1}
.h-slide img{width:100%;height:100%;object-fit:cover;object-position:var(--op,72% 50%);transform-origin:70% 45%}
.h-owner{--op:60% 22%;--opm:78% 18%}
/* dark on the left for the text, the lit cabinet in the middle stays half visible */
.h-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(10,11,14,.93) 0%,rgba(10,11,14,.86) 28%,rgba(10,11,14,.56) 44%,rgba(10,11,14,.16) 60%,rgba(10,11,14,0) 70%),linear-gradient(0deg,rgba(10,11,14,.5) 0%,rgba(10,11,14,0) 28%)}
.sym{position:absolute;z-index:3;right:18px;top:16px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.86);background:rgba(10,11,14,.4);padding:4px 8px;border-radius:5px}
.h-copy{position:absolute;z-index:3;left:clamp(24px,4vw,64px);top:0;bottom:0;width:min(max(700px,50vw),58vw);display:flex;flex-direction:column;justify-content:center;color:var(--photo-ink);--rl:rgba(244,242,237,.11);--r2:var(--photo-ink2)}
.h-h1{font:500 clamp(32px,min(3.2vw,5.6vh),56px)/1.06 var(--serif);letter-spacing:-.022em;margin:0;font-variation-settings:"opsz" 72;text-wrap:balance}
.h-h1 .l1,.h-h1 .l2{display:block}
.h-h1 .l2{margin-top:.12em;font-style:italic;font-weight:400;color:var(--accent)}
/* lock screen: date and a thin clock, then the seven sentences as frosted notifications (two columns on desktop).
   Each notification is the link; FLIP measures .s. Dark glass in both themes: the photo is dark in both. */
.h-copy{--nf:rgba(38,40,46,.5);--nfh:rgba(58,61,68,.66);--nfink:#F5F5F7;--nfsub:rgba(235,235,245,.6);--nfline:rgba(255,255,255,.14)}
.h-lock{display:flex;flex-direction:column;margin:clamp(12px,2.4vh,26px) 0 0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",var(--sans);color:rgba(244,242,237,.94)}
.h-date{font-size:clamp(14px,2vh,17px);font-weight:500;letter-spacing:.005em;opacity:.86}
.h-clockrow{display:flex;align-items:flex-end;gap:16px}
/* bell beside the clock; the badge sits on it absolutely, so counting never moves the clock or the headline */
.h-bell{position:relative;flex:none;width:34px;height:34px;margin-bottom:.35em;color:rgba(244,242,237,.94)}
.h-bell svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linejoin:round;transform-origin:50% 0}
.h-badge{position:absolute;top:-7px;right:-11px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#FF3B30;color:#fff;font:600 12px/20px -apple-system,BlinkMacSystemFont,"SF Pro Text",var(--sans);text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #15171a}
.h-badge[hidden]{display:none}
.h-clock{font-size:clamp(54px,min(6vw,9vh),104px);line-height:.92;font-weight:200;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transform-origin:0 60%}
.h-prompt{margin:clamp(8px,1.5vh,14px) 0 clamp(8px,1.4vh,14px);font-size:clamp(14px,2vh,16px);line-height:1.35;color:var(--r2)}
.rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:clamp(6px,1vh,9px) 10px;align-items:stretch}
.rows li{position:relative;min-width:0}
.tsw-btn.none small{display:none}
.row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:clamp(8px,1.15vh,11px) 12px clamp(8px,1.15vh,11px) 17px;border-radius:20px;background:var(--nf);color:var(--nfink);text-decoration:none;-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);box-shadow:inset 0 1px 0 var(--nfline),inset 0 0 0 .5px rgba(255,255,255,.08),0 14px 30px -18px rgba(0,0,0,.7);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",var(--sans);transition:opacity .3s var(--ease),transform .35s var(--ease),background-color .3s}
.row .ap{width:clamp(32px,4.8vh,38px);height:clamp(32px,4.8vh,38px);border-radius:24%;display:grid;place-items:center;background:linear-gradient(180deg,#5FE36B,#21B83B);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.row .ap svg{width:62%;height:62%;fill:#fff}
.nb{min-width:0;display:block}
.nh{display:flex;align-items:center;gap:8px;min-height:18px}
.nh b{flex:1;min-width:0;font-size:13.5px;font-weight:500;letter-spacing:-.005em}
/* unread: a blue dot left of the app icon and a semibold title, like iOS */
.row::after{content:"";position:absolute;left:5px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#0A84FF;opacity:0;transition:opacity .35s}
.row.unread::after{opacity:1}
.row.unread .nh b{font-weight:600}
.nh time{font-size:12.5px;color:var(--nfsub);white-space:nowrap;transition:opacity .2s}
.row .s{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:clamp(15.5px,min(1.2vw,2.35vh),18.5px);line-height:1.26;letter-spacing:-.008em}
.row .s .q{display:none}
/* "Kenne ich" pill takes the time's place in the header row */
.row .k{display:none;align-items:center;gap:6px;padding:2px 2px 2px 9px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600;white-space:nowrap}
.row .k i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.14)}
.row .k i svg{width:9px;height:9px;stroke:currentColor}
.row:focus-visible{outline-offset:3px;border-radius:20px}
.row:focus-visible{transform:scale(1.025);background:var(--nfh)}
.row:focus-visible .nh time{display:none}.row:focus-visible .k{display:inline-flex}
.rows:has(.row:focus-visible) .row:not(:focus-visible){opacity:.55}
@media (hover:hover) and (pointer:fine){
  .row:hover{transform:scale(1.025);background:var(--nfh)}
  .row:hover .nh time{display:none}.row:hover .k{display:inline-flex}
  .rows:has(.row:hover) .row:not(:hover){opacity:.55}
}
/* touch: a quiet arrow beside the time, the whole notification is the target */
@media (hover:none){.row .k{display:inline-flex;padding:0;background:none;color:var(--accent)}.row .k>span{display:none}.row .k i{background:none;width:14px}.row .k i svg{width:11px;height:11px;stroke-width:2.6}}
.row:active{transform:scale(.985)}
.h-more{display:none}
.h-me{display:flex;align-items:center;gap:10px;margin:clamp(10px,2vh,22px) 0 0;font-size:14px;line-height:1.35;color:var(--r2)}
.h-me img{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:var(--vp-av);border:1px solid var(--rl)}
.h-me b{font-weight:600;color:var(--photo-ink)}
@media (max-width:1100px) and (min-width:761px){.h-copy{width:min(640px,66vw)}}
/* phones: one dark photo card holds everything, the notifications sit over its lower, darker part */
@media (max-width:760px){
  .hero{height:auto;min-height:0;padding:var(--hh) 10px 10px}
  .hero-in{height:auto;border-radius:20px}
  .h-media{inset:0 0 auto 0;height:min(60%,500px);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
  .h-slide img{object-position:var(--opm,var(--op,72% 40%))}
  .h-scrim{background:linear-gradient(180deg,rgba(10,11,14,.05) 0%,rgba(10,11,14,.55) 55%,rgba(10,11,14,.9) 100%)}
  .sym{top:10px;right:10px}
  .h-copy{position:relative;left:auto;top:auto;bottom:auto;width:auto;display:block;padding:clamp(48px,6.5svh,100px) 14px 12px}
  .h-h1{font-size:clamp(30px,9vw,36px);line-height:1.07}
  .h-lock{margin-top:8px}.h-date{font-size:13.5px}.h-clock{font-size:44px}
  .h-clockrow{gap:12px}.h-bell{width:26px;height:26px}.h-badge{top:-7px;right:-10px}
  .h-prompt{margin:4px 0 8px;font-size:13.5px}
  .rows{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:6px}
  .row{padding-top:7px;padding-bottom:7px}
  .row .s{font-size:15.5px}
  .rows:not(.all) li:nth-child(n+5){display:none}
  .h-more{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:8px 2px;border:0;background:none;font-size:14px;color:var(--photo-ink2)}
  .h-more svg{width:12px;height:12px}
  .h-more[hidden]{display:none}
  .h-me{margin:4px 0 0;font-size:13px}
}

/* ===== home-only overview: the business in one picture. Six stations on one line, each opens its path.
   JS (once, no pin) draws the line and staggers the stations in; without it everything shows. ===== */
.ov{padding:clamp(64px,9vw,120px) 0 clamp(16px,3vw,40px)}
.ov-h{font:500 clamp(30px,3.4vw,52px)/1.06 var(--serif);letter-spacing:-.024em;margin:0;max-width:20em;text-wrap:balance;font-variation-settings:"opsz" 72}
.ov-h em{font-style:italic;color:var(--accent)}
.ov-sub{margin:14px 0 0;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--ink2);max-width:46ch}
.ov-flow{--ih:clamp(110px,10vw,150px);position:relative;margin-top:clamp(28px,4vw,48px)}
.ov-line{position:absolute;left:8%;right:8%;top:calc(var(--ih) / 2);height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line2),color-mix(in srgb,var(--accent) 55%,var(--line2)),var(--line2));transform-origin:0 50%}
.ov-list{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.ov-st{display:block;text-decoration:none;color:inherit;border-radius:18px;transition:transform .35s var(--ease)}
.ov-ph{display:block;height:var(--ih);border-radius:16px;overflow:hidden;background:var(--bg3);box-shadow:var(--shadow-s);border:4px solid var(--bg)}
.ov-ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ov-tx{display:block;padding:12px 2px 0}
.ov-tx b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.ov-tx>span{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--ink2)}
.ov-tx em{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-style:normal;font-size:13px;font-weight:600;color:var(--accent);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .3s var(--ease)}
.ov-tx em svg{width:12px;height:12px}
.ov-st:focus-visible{outline-offset:4px}
.ov-st:focus-visible,.ov-st:hover{transform:translateY(-4px)}
.ov-st:focus-visible em,.ov-st:hover em{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.ov-st:hover .ov-ph img{transform:scale(1.05)}}
@media (hover:none){.ov-tx em{opacity:1;transform:none}}
.ov-start{margin:clamp(20px,3vw,34px) 0 0;font-size:15px;color:var(--ink2)}
.ov-start a{display:inline-flex;align-items:center;gap:6px;margin-left:4px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}
.ov-start a svg{width:13px;height:13px;color:var(--accent)}
@media (hover:hover) and (pointer:fine){.ov-start a:hover{border-color:var(--ink)}}
@media (max-width:760px){
  .ov{padding-top:40px}
  .ov-flow{--ih:58px;margin-top:20px}
  .ov-line{left:46px;right:auto;top:20px;bottom:20px;width:2px;height:auto;transform-origin:50% 0;background:linear-gradient(180deg,var(--line2),color-mix(in srgb,var(--accent) 55%,var(--line2)),var(--line2))}
  .ov-list{grid-template-columns:minmax(0,1fr);gap:12px}
  .ov-st{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center}
  .ov-ph{border-width:3px;border-radius:12px}
  .ov-tx em{display:none}
  .ov-st:hover,.ov-st:focus-visible{transform:none}
  .ov-tx{padding:0}
  .ov-tx em{margin-top:4px}
}
#overview[hidden]{display:none}

/* ===== home tail ===== */
#home-tail{padding-top:clamp(40px,7vw,90px)}

/* ===== path ===== */
.view[hidden]{display:none}
.path{position:relative;overflow-x:clip}
/* the entry fills the screen: sentence, then Viktor's answer as a large statement, then the four tiles */
.p-entry{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--hh) + clamp(28px,6.5vh,80px)) var(--gut) 56px;color:var(--photo-ink);isolation:isolate;z-index:1}
.p-photo{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#15171a}
.p-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--op,72% 50%)}
.p-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,16,.92) 0%,rgba(12,13,16,.82) 38%,rgba(12,13,16,.34) 66%,rgba(12,13,16,.1) 82%),linear-gradient(0deg,rgba(12,13,16,.86) 0%,rgba(12,13,16,.4) 34%,rgba(12,13,16,0) 56%)}
.p-photo .sym{top:calc(var(--hh) + 14px)}
.p-in{width:min(1240px,100%)}
.p-eyebrow{display:flex;align-items:center;gap:12px;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--photo-ink2);margin:0 0 16px}
.p-eyebrow i{width:22px;height:1px;background:currentColor;opacity:.6}
.p-h1:focus{outline:none}
.p-h1{font:500 clamp(40px,4.7vw,72px)/1.0 var(--serif);letter-spacing:-.025em;margin:0;max-width:15.5em;text-wrap:balance;font-variation-settings:"opsz" 72}
.p-h1 .q{color:var(--accent)}
.p-solve{display:flex;flex-direction:column;gap:clamp(26px,4.4vh,46px);margin-top:clamp(24px,4.4vh,44px)}
/* Viktor's answer: portrait, name, and the reply typed out at statement size */
.p-say{display:grid;grid-template-columns:auto minmax(0,820px);justify-content:start;align-items:start;column-gap:20px}
.p-say .vav{--s:52px;align-self:start;border:2px solid color-mix(in srgb,var(--pa) 70%,#fff);box-shadow:0 14px 30px -14px rgba(0,0,0,.8)}
/* Viktor's reply as his outgoing chat bubble: name, typed line, then time and read ticks */
.p-bub{position:relative;min-width:0;justify-self:start;padding:11px 16px 8px 18px;border-radius:5px 22px 22px 22px;background:color-mix(in srgb,var(--pa) 15%,var(--bub));color:var(--bubink);box-shadow:0 1px 1px rgba(11,20,26,.16),0 24px 44px -24px rgba(0,0,0,.7)}
.p-bub small{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font:600 12.5px var(--sans);color:var(--bubt);margin-bottom:4px}
.p-bub small b{font-weight:600;color:color-mix(in srgb,var(--pa) 78%,var(--bubink))}
.p-bub small span{font-weight:500}
.p-line{position:relative;margin:0;font:400 clamp(19px,1.6vw,24px)/1.4 var(--sans);letter-spacing:-.005em;color:inherit;text-wrap:pretty}
.p-meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:2px;font-size:11.5px;line-height:1;color:var(--bubt);font-variant-numeric:tabular-nums;transition:opacity .3s}
.p-meta svg{width:17px;height:11px;fill:none;stroke:var(--tick);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.p-entry.typing:not(.typed) .p-meta{opacity:0}
.p-typed{position:absolute;inset:0;display:none}
.p-entry.typing .p-ghost{color:transparent}
.p-entry.typing .p-typed{display:block}
.p-entry.typing .p-typed::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.16em;background:var(--pa);animation:caret .9s steps(1) infinite}
.p-entry.typed .p-ghost{color:inherit}
.p-entry.typed .p-typed{display:none}
@keyframes caret{50%{opacity:0}}
/* the answer as a short story: the steps build one after another and a connector draws between them.
   The end state is the default; .seq (motion only) holds the start state until the shell adds .lk and .in */
.p-know{font:500 clamp(28px,2.4vw,36px)/1.05 var(--serif);letter-spacing:-.018em;margin:0 0 18px}
.p-know em{font-style:italic;color:color-mix(in srgb,var(--pa) 70%,#fff)}
.p-items{--g:clamp(30px,3.6vw,60px);--aw:52px;--ah:52px;--lk0:scaleX(0);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--g);max-width:1180px}
.p-items.has-art{--aw:100%;--ah:clamp(128px,20vh,190px)}
.p-items:empty{min-height:136px}
.p-items>li{position:relative;min-width:0}
.p-art{position:relative;width:var(--aw);height:var(--ah);display:grid;place-items:center;border-radius:16px;overflow:hidden;container-type:size}
.has-art .p-art{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.025));border:1px solid rgba(244,242,237,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 26px 46px -28px rgba(0,0,0,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.p-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 22%,rgba(16,17,21,.6));border:1px solid color-mix(in srgb,var(--pa) 50%,transparent);color:color-mix(in srgb,var(--pa) 45%,#fff);flex:none}
.p-ic svg{width:24px;height:24px}
.p-tx{margin-top:16px}
.p-no{display:block;font:500 11px var(--mono);letter-spacing:.1em;color:color-mix(in srgb,var(--pa) 60%,#fff);margin-bottom:6px}
.p-tx b{display:block;font:600 18px/1.22 var(--sans);letter-spacing:-.005em}
.p-tx small{display:block;font-size:14.5px;line-height:1.38;color:var(--photo-ink2);margin-top:4px}
/* connector: from the right edge of the previous art to the left edge of this one, at mid height */
.p-lk{position:absolute;top:calc(var(--ah) / 2 + -1px);right:calc(100% + 10px);width:calc(var(--g) + 100% + -1 * var(--aw) + -20px);height:2px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--pa) 25%,transparent),var(--pa));transform-origin:0 50%;transition:transform .42s cubic-bezier(.55,0,.3,1)}
.p-lk::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;border-top:2px solid var(--pa);border-right:2px solid var(--pa);transform:translateY(-50%) rotate(45deg)}
.p-items>li>.p-art,.p-items>li>.p-tx{transition:opacity .5s var(--ease),transform .6s var(--ease)}
.p-items>li>.p-tx{transition-delay:.14s}
.p-entry.seq .p-items>li:not(.in)>.p-art,.p-entry.seq .p-items>li:not(.in)>.p-tx{opacity:0;transform:translateY(14px)}
.p-entry.seq .p-items>li:not(.lk)>.p-lk{transform:var(--lk0)}
/* mini illustrations: a 20 × 12 em canvas, 1 em follows the art box */
.ea{position:relative;width:20em;height:12em;font-size:min(100cqh / 12,100cqw / 20);flex:none}
.ea *{transition:opacity .45s var(--ease) var(--d,0s),transform .55s var(--ease) var(--d,0s)}
.ea-win{position:absolute;inset:.35em .5em;border-radius:.7em;background:var(--ui);border:1px solid var(--uiline);box-shadow:0 1em 2em -1em rgba(0,0,0,.6);overflow:hidden}
.ea-bar{height:1.4em;display:flex;align-items:center;gap:.3em;padding:0 .6em;background:var(--ui2);border-bottom:1px solid var(--uiline)}
.ea-bar i{width:.42em;height:.42em;border-radius:50%;background:var(--ui3)}
.ea-url{margin-left:.5em;height:.66em;width:6em;border-radius:.33em;background:var(--ui)}
.ea-pg{position:absolute;inset:1.4em 0 0}
.ea-nav{position:absolute;left:.8em;right:.8em;top:.7em;display:flex;align-items:center;gap:.5em;transform-origin:0 50%}
.ea-nav b{width:1.8em;height:.6em;border-radius:.2em;background:var(--pa);margin-right:auto}
.ea-nav i{width:1.3em;height:.3em;border-radius:.15em;background:var(--ui3)}
.ea-l{position:absolute;left:.8em;border-radius:.2em;transform-origin:0 50%}
.ea-h1,.ea-h2{height:.85em;background:var(--uiink)}
.ea-h1{top:2.4em;width:8.2em}.ea-h2{top:3.5em;width:6em}
.ea-t1,.ea-t2{height:.36em;background:var(--ui3)}
.ea-t1{top:4.95em;width:7.6em}.ea-t2{top:5.6em;width:6em}
.ea-btn{position:absolute;left:.8em;top:6.7em;width:3.9em;height:1.2em;border-radius:.6em;background:var(--pa);transform-origin:0 50%}
.ea-img{position:absolute;right:.8em;top:2.4em;width:7.2em;height:5.5em;border-radius:.5em;overflow:hidden;background:radial-gradient(circle at 74% 30%,rgba(255,255,255,.75) 0 .5em,transparent .56em),linear-gradient(165deg,color-mix(in srgb,var(--pa) 55%,#fff),var(--pa) 70%)}
.ea-img::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:color-mix(in srgb,var(--pa) 55%,#000);clip-path:polygon(0 100%,0 55%,28% 15%,50% 50%,70% 25%,100% 70%,100% 100%)}
.p-entry.seq li:not(.in) .ea-win{opacity:0;transform:scale(.93)}
.p-entry.seq li:not(.in) .ea-nav,.p-entry.seq li:not(.in) .ea-l{transform:scaleX(0)}
.p-entry.seq li:not(.in) .ea-btn{transform:scale(0)}
.p-entry.seq li:not(.in) .ea-img{opacity:0;transform:scale(.82)}
.ea-sf{position:absolute;left:.5em;right:.5em;top:.4em;height:2.1em;border-radius:1.05em;background:var(--ui);border:1px solid var(--uiline);box-shadow:0 .8em 1.6em -.9em rgba(0,0,0,.55);display:flex;align-items:center;gap:.5em;padding:0 .85em;color:var(--uiink)}
.ea-sf svg{width:1em;height:1em;fill:none;stroke:var(--uiink2);stroke-width:2.2;stroke-linecap:round;flex:none}
.ea .ea-q{font:500 .9em/1 var(--sans);white-space:nowrap;clip-path:inset(0 0 0 0);transition:clip-path .62s steps(22) .18s}
.ea-r{position:absolute;left:.5em;right:.5em;height:2.6em;border-radius:.65em;background:var(--ui);border:1px solid var(--uiline);display:flex;align-items:center;gap:.6em;padding:0 .75em;color:var(--uiink)}
.ea-r i{width:1.35em;height:1.35em;border-radius:.4em;background:var(--pa);flex:none}
.ea-top{top:3em;box-shadow:0 0 0 .13em var(--pa),0 .8em 1.6em -.9em rgba(0,0,0,.55);--d:.85s}
.ea-top b{display:block;font:600 .82em/1.2 var(--sans)}
.ea-top small{display:block;font:400 .64em/1.3 var(--mono);color:#2F8A55}
:root[data-theme="dark"] .ea-top small{color:#7FCB9A}
.ea-oth{top:6em;opacity:.5;--d:.95s}
.ea-oth i{background:var(--ui3)}
.ea-oth em{display:block;height:.34em;width:6.5em;border-radius:.17em;background:var(--ui3);margin:.22em 0}
.ea-oth em+em{width:4.4em}
.ea-ai{position:absolute;right:.5em;bottom:.6em;display:inline-flex;align-items:center;gap:.4em;padding:.5em .8em;border-radius:1em;background:var(--pa);color:#fff;font:600 .74em/1 var(--sans);white-space:nowrap;box-shadow:0 .8em 1.4em -.6em color-mix(in srgb,var(--pa) 80%,#000);--d:1.2s}
.ea-ai svg{width:1.15em;height:1.15em;fill:#fff}
.p-entry.seq li:not(.in) .ea-sf{opacity:0;transform:translateY(.5em)}
.p-entry.seq li:not(.in) .ea-q{clip-path:inset(0 100% 0 0)}
.p-entry.seq li:not(.in) .ea-r{opacity:0;transform:translateY(1.2em)}
.p-entry.seq li:not(.in) .ea-ai{opacity:0;transform:scale(.6)}
.ea-ph{position:absolute;left:50%;top:.55em;width:12.6em;height:13em;margin-left:-6.3em;border-radius:2em;border:.35em solid #0E0F12;background:radial-gradient(120% 80% at 20% 0%,color-mix(in srgb,var(--pa) 60%,#1b1e24),#14161b 75%);box-shadow:0 1.2em 2.4em -1em rgba(0,0,0,.7);display:flex;flex-direction:column;align-items:center;gap:.6em;padding:2.1em .45em 0}
.ea-isl{position:absolute;top:.5em;left:50%;width:3.4em;height:.95em;margin-left:-1.7em;border-radius:1em;background:#0E0F12}
.ea-ntf{align-self:stretch;display:flex;gap:.55em;align-items:center;padding:.55em .65em;border-radius:.95em;background:rgba(246,245,242,.94);color:#17191D;box-shadow:0 .7em 1.4em -.7em rgba(0,0,0,.6);--d:.3s}
.ea-ntf img{width:1.7em;height:1.7em;border-radius:.45em;background:#fff;padding:.22em;flex:none}
.ea-ntf small{display:block;font:500 .56em/1.25 var(--sans);color:#5A5E66}
.ea-ntf b{display:block;font:600 .76em/1.2 var(--sans)}
.ea-say{font:500 .74em/1.3 var(--sans);color:#F4F2ED;padding:.55em .9em;border-radius:1em;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);white-space:nowrap;--d:.9s}
.p-entry.seq li:not(.in) .ea-ph{opacity:0;transform:translateY(1em)}
.p-entry.seq li:not(.in) .ea-ntf{opacity:0;transform:translateY(-2.4em) scale(.95)}
.p-entry.seq li:not(.in) .ea-say{opacity:0;transform:translateY(.6em)}
@media (max-width:1100px) and (min-width:761px){.p-items:not(.has-art){grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.p-items:not(.has-art) .p-lk{display:none}}
@media (max-width:760px){
  .p-entry{padding:calc(var(--hh) + 22px) 16px 40px}
  .p-photo img{object-position:var(--opm,var(--op,72% 50%))}
  .p-photo::after{background:linear-gradient(180deg,rgba(12,13,16,.66) 0%,rgba(12,13,16,.84) 40%,rgba(12,13,16,.92) 100%)}
  .p-eyebrow{margin-bottom:12px}
  .p-h1{font-size:31px;line-height:1.04}
  .p-solve{gap:24px;margin-top:22px}
  .p-say{grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  .p-say .vav{--s:38px}
  .p-bub{padding:9px 12px 7px 13px}
  .p-bub small{font-size:11.5px}
  .p-line{font-size:17px;line-height:1.38}
  .p-know{font-size:25px;margin-bottom:12px}
  .p-items{grid-template-columns:1fr;--g:20px;--aw:40px;--ah:40px;--lk0:scaleY(0)}
  .p-items.has-art{--aw:158px;--ah:98px;--g:22px}
  .p-items>li{display:grid;grid-template-columns:var(--aw) minmax(0,1fr);column-gap:14px;align-items:center}
  .p-art{border-radius:12px}
  .p-ic{width:40px;height:40px;border-radius:11px}
  .p-ic svg{width:20px;height:20px}
  .p-tx{margin:0}
  .p-no{margin-bottom:3px;font-size:10px}
  .p-tx b{font-size:15.5px}
  .p-tx small{font-size:13px;margin-top:2px}
  .p-lk{top:auto;bottom:calc(100% + 4px);right:auto;left:calc(var(--aw) / 2 + -1px);width:2px;height:calc(var(--g) + -8px);background:linear-gradient(180deg,color-mix(in srgb,var(--pa) 25%,transparent),var(--pa));transform-origin:50% 0}
  .p-lk::after{right:auto;top:auto;left:50%;bottom:0;width:6px;height:6px;transform:translateX(-50%) rotate(135deg)}
}

/* ===== story stage (pinned scene) ===== */
.stage{position:relative;height:100svh;min-height:560px;padding:calc(var(--hh) + 10px) var(--gut) 0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--bg);overflow:hidden}
/* canvas and caption read as one unit: fit() centres the box in .stage-fit and lifts the caption by half the spare
   height (--slack), so the pair sits centred with the caption right under the canvas. A transform keeps the
   measured layout (and the pin) unchanged. */
.stage-fit{position:relative;min-height:0;display:grid;place-items:center}
.stage-box{position:relative;overflow:clip;overflow-clip-margin:28px}
.stage-canvas{position:absolute;left:0;top:0;width:calc(var(--cw,1280) * 1px);height:calc(var(--ch,700) * 1px);transform:scale(var(--k,1));transform-origin:0 0}
.stage-cap{transform:translateY(calc(var(--slack,0px) * -.5));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px 26px;padding:14px 0 30px;min-height:104px}
.stage-num{font:500 12px var(--mono);letter-spacing:.06em;color:var(--mute);display:flex;align-items:center;gap:10px;white-space:nowrap}
/* scroll hint (shell): bottom centre of a pinned stage, below the caption text */
.shint{position:absolute;left:50%;bottom:5px;z-index:5;display:flex;align-items:center;gap:8px;transform:translateX(-50%);font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.shint.on{opacity:1;transition:opacity .6s var(--ease);animation:shb 2.2s ease-in-out infinite}
.shint svg{width:11px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.shint svg path{stroke:var(--pa);stroke-width:1.8;animation:shw 1.6s ease-in-out infinite}
.shint b{display:inline-block;font-weight:500;opacity:0}
.shint.on b{animation:shl .28s var(--ease) calc(var(--i) * 45ms) forwards}
@keyframes shb{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes shw{0%{transform:translateY(-1px);opacity:1}70%{transform:translateY(3px);opacity:0}100%{transform:translateY(-1px);opacity:0}}
@keyframes shl{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.stage-bar{width:64px;height:2px;border-radius:2px;background:var(--line2);overflow:hidden;display:block}
.stage-bar b{display:block;height:100%;background:var(--pa);transform-origin:0 50%;transform:scaleX(0)}
.stage-steps{position:relative;display:grid}
.stage-step{grid-area:1/1;margin:0;font:500 clamp(22px,2.2vw,32px)/1.15 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.stage-step em{font-style:italic;color:var(--pa)}
.stage-step small{display:block;font:400 15px/1.45 var(--sans);color:var(--ink2);letter-spacing:0;margin-top:6px}
.stage .stage-step:not(:first-child){visibility:hidden;opacity:0}
.stage.is-static .stage-step{visibility:hidden;opacity:0}
.stage.is-static .stage-step:last-child{visibility:visible;opacity:1}
@media (max-width:760px){
  .stage{padding:calc(var(--hh) + 8px) 16px 0;min-height:600px}
  .stage-cap{grid-template-columns:1fr;gap:8px;padding:10px 0 30px;min-height:132px;align-content:start}
  .stage-step{font-size:20px}
  .stage-step small{font-size:13.5px}
  .stage-cap .bsp{justify-self:start}
}

/* lead magnet card */
.magnet{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(24px,3.4vw,44px);border-radius:26px;background:var(--surface);box-shadow:var(--shadow-s);border:1px solid var(--line);overflow:hidden}
.magnet h3{font:500 clamp(28px,3vw,44px)/1.05 var(--serif);letter-spacing:-.02em;margin:10px 0 0}
.magnet h3 em{font-style:italic;color:var(--pa)}
.magnet p{color:var(--ink2);margin:14px 0 24px}
@media (max-width:760px){.magnet{grid-template-columns:1fr}}

/* ===== UI kit: windows and device frames ===== */
.win{background:var(--ui);color:var(--uiink);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;font-size:13px;line-height:1.4;border:1px solid var(--uiline);position:relative}
.win-bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;background:var(--ui2);border-bottom:1px solid var(--uiline);font-size:12px;color:var(--uiink2);white-space:nowrap}
.win-bar>i{width:10px;height:10px;border-radius:50%;background:var(--ui3);flex:none}
.win-bar>i:nth-child(1){background:#E96B5C}.win-bar>i:nth-child(2){background:#E8B84A}.win-bar>i:nth-child(3){background:#5DBB6A}
.win-bar .t{margin-left:10px;overflow:hidden;text-overflow:ellipsis}
/* browser window */
.dev-browser{background:var(--ui);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--uiline);position:relative}
.dev-browser .dev-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 12px;background:var(--ui2);border-bottom:1px solid var(--uiline)}
.dev-browser .dev-bar>i{width:9px;height:9px;border-radius:50%;background:var(--ui3)}
.dev-browser .dev-url{margin-left:12px;flex:1;max-width:60%;height:22px;border-radius:7px;background:var(--ui);border:1px solid var(--uiline);font:400 11px/22px var(--mono);color:var(--uiink2);padding:0 10px;white-space:nowrap;overflow:hidden}
.dev-browser .dev-screen{position:relative;overflow:hidden}
/* laptop: set width on .dev-laptop, the screen keeps 16:10 */
.dev-laptop{position:relative}
.dev-laptop .dev-lid{background:#0E0F12;border-radius:16px 16px 6px 6px;padding:2.2% 2.2% 3%;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08);position:relative}
.dev-laptop .dev-lid::before{content:"";position:absolute;top:.9%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#26292F}
.dev-laptop .dev-screen{aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:#0b0c0e;position:relative}
.dev-laptop .dev-screen>video,.dev-laptop .dev-screen>img{width:100%;height:100%;object-fit:cover}
.dev-laptop .dev-base{height:0;padding-bottom:3.4%;margin:0 -6.5%;background:linear-gradient(#D5D6D9,#A9ABB0 70%,#8F9196);border-radius:2px 2px 14px 14px;position:relative;box-shadow:0 24px 40px -18px rgba(0,0,0,.45)}
.dev-laptop .dev-base::before{content:"";position:absolute;left:41%;right:41%;top:0;height:38%;background:#9C9EA3;border-radius:0 0 8px 8px}
:root[data-theme="dark"] .dev-laptop .dev-base{background:linear-gradient(#5C5F66,#3B3E44 70%,#2E3035)}
:root[data-theme="dark"] .dev-laptop .dev-base::before{background:#2A2C31}
/* phone: set width on .dev-phone, the screen keeps 390:844 */
.dev-phone{position:relative;background:#0E0F12;border-radius:15% / 7%;padding:0;box-shadow:var(--shadow),inset 0 0 0 1.5px rgba(255,255,255,.12)}
.dev-phone .dev-screen{margin:4%;aspect-ratio:390/844;border-radius:12% / 5.6%;overflow:hidden;position:relative;background:#0b0c0e}
.dev-phone .dev-screen>video,.dev-phone .dev-screen>img{width:100%;height:100%;object-fit:cover}
.dev-phone .dev-island{position:absolute;z-index:3;top:5%;left:50%;width:30%;height:3.4%;margin-left:-15%;border-radius:99px;background:#0E0F12}

/* ===== Viktor's portrait: one file (assets/viktor.webp), one crop. Round avatars zoom on the face, frames keep head and shoulders ===== */
.vav{display:block;flex:none;width:var(--s,40px);height:var(--s,40px);border-radius:50%;overflow:hidden;background:var(--bg3)}
.vav img{width:100%;height:100%;object-fit:cover;object-position:var(--vp-av);transform:scale(1.3);transform-origin:var(--vp-av)}

/* ===== shared tail: trust. One camera angle, three photos: the buried desk with its open tasks pinned on the
   clutter, the same desk tidied up, then the handshake. Title and photo stay in view with CSS sticky (no ScrollTrigger
   pin) while .t-run adds the scroll length; one scrubbed trigger drives the story. Without .live (reduced motion,
   no JS) only the handshake end state shows. ===== */
.t-trust{padding:clamp(64px,8vw,112px) 0 clamp(64px,8vw,110px);position:relative;background:var(--bg)}
.t-head .eyebrow{margin-bottom:12px}
.t-quote{font:500 clamp(30px,min(3.4vw,5.6svh),54px)/1.05 var(--serif);letter-spacing:-.024em;margin:0;text-wrap:balance;font-variation-settings:"opsz" 72}
.t-quote em{font-style:italic;color:var(--pa)}
.t-sticky{position:sticky;top:calc(var(--hh) + 12px)}
.t-run{height:150svh}
.t-story:not(.live) .t-run{display:none}
/* the photo card: about 16:9, never taller than the viewport left under the title */
.t-photo{position:relative;margin:clamp(14px,2.4svh,26px) 0 0;height:min(calc((min(100vw,1280px) - 2 * var(--gut)) * .5625),calc(100svh - var(--hh) - clamp(240px,32svh,320px)));min-height:300px;border-radius:26px;overflow:hidden;background:#2a2622;box-shadow:var(--shadow);container-type:size}
/* .ts-box has the photos' own ratio and covers the card, so chips placed in % of the box sit on the right objects */
.ts-box{--r:1.791;--bw:max(100cqw,calc(100cqh * var(--r)));--bh:max(100cqh,calc(100cqw / var(--r)));--fx:.5;--fy:.5;position:absolute;width:var(--bw);height:var(--bh);left:calc((100cqw - var(--bw)) * var(--fx));top:calc((100cqh - var(--bh)) * var(--fy))}
.ts-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ts-hand{object-position:50% 34%}
/* the seven open things as small frosted widgets on the matching objects; a shared idle loop runs only while
   the story is on screen (.on) */
.ts-ws{list-style:none;margin:0;padding:0}
.tw{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:flex;align-items:center;gap:9px;padding:7px 12px 7px 7px;border-radius:14px;background:rgba(250,250,252,.74);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 .5px rgba(0,0,0,.06),0 14px 30px -14px rgba(0,0,0,.55);color:#111317;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",var(--sans);white-space:nowrap}
.tw-t b{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.005em;line-height:1.25}
.tw-t small{display:block;font-size:11.5px;line-height:1.3;color:rgba(60,60,67,.72)}
.tw-i{position:relative;flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff}
.tw-i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tw-call{border-radius:50%;background:#34C759}
.tw-mail{background:linear-gradient(180deg,#4FA8F5,#1A7BE8)}
.tw-mail em{position:absolute;top:-6px;right:-8px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#FF3B30;color:#fff;font:700 10.5px/19px var(--sans);font-style:normal;text-align:center;box-shadow:0 0 0 2px rgba(250,250,252,.9)}
.tw-doc{background:#8E8E93}.tw-quote{background:#E0874A}.tw-clip{background:#5E7FA0}
.tw-dm{border-radius:50%;background:radial-gradient(circle at 30% 110%,#FDD56A 0%,#F77737 35%,#E1306C 65%,#9B36B7 100%)}
.tw-dm svg{fill:#fff;stroke:none}
.tw-date{flex-direction:column;gap:0;background:#fff;color:#111317;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);place-content:center}
.tw-date small{font-size:8px;font-weight:700;color:#FF3B30;line-height:1}
.tw-date b{font-size:15px;font-weight:600;line-height:1.05}
.tw-due{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:99px;background:#FFE5E3;color:#D70015;font-size:10.5px;font-weight:600}
.tw-btns{display:flex;gap:6px;margin-left:4px}
.tw-btns i{width:24px;height:24px;border-radius:50%;background:#34C759}
.tw-btns i.no{background:#FF3B30}
.tw-btns i::before{content:"";display:block;width:12px;height:12px;margin:6px;background:#fff;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 3.5h3l1.5 4-2 1.3a10 10 0 0 0 6.2 6.2l1.3-2 4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4.5 5.5a2 2 0 0 1 2-2z"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 3.5h3l1.5 4-2 1.3a10 10 0 0 0 6.2 6.2l1.3-2 4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4.5 5.5a2 2 0 0 1 2-2z"/></svg>') center/contain no-repeat}
.tw-btns i.no::before{transform:rotate(135deg)}
.tw-open{display:inline-flex;align-items:center;gap:5px;margin-left:4px;font-size:11px;font-weight:600;color:#8A6D00}
.tw-open::before{content:"";width:7px;height:7px;border-radius:50%;background:#FFCC00}
.t-story.on .tw-call svg{animation:tw-ring 1.8s ease-in-out infinite}
.t-story.on .tw-mail em{animation:tw-pop 2.4s ease-in-out infinite}
.t-story.on .tw-dm::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #F77737;animation:tw-ping 2s ease-out infinite}
@keyframes tw-ring{0%,40%,100%{transform:rotate(0)}5%,15%,25%{transform:rotate(-14deg)}10%,20%,30%{transform:rotate(14deg)}}
@keyframes tw-pop{0%,80%,100%{transform:scale(1)}88%{transform:scale(1.22)}}
@keyframes tw-ping{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.6);opacity:0}}
/* the laptop screen in desk-messy.webp: bounding box of the quad TL(61,26) TR(79.5,31.6) BR(74,73.6) BL(55,66) in % of the photo;
   the clip-path is that quad in % of this box. The glow pulses as each widget lands */
.ts-scr{position:absolute;left:55%;top:26%;width:24.5%;height:47.6%;pointer-events:none}
.ts-glow{position:absolute;inset:0;clip-path:polygon(24.5% 0%,100% 11.8%,77.6% 100%,0% 84%)}
.ts-glow{background:radial-gradient(60% 60% at 50% 50%,rgba(255,255,255,.95),rgba(190,220,255,.55) 60%,rgba(190,220,255,0));opacity:0}
.ts-count{position:absolute;left:16px;top:14px;display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:99px;background:rgba(12,13,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#F4F2ED;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ts-count b{font:600 15px var(--sans);letter-spacing:0;font-variant-numeric:tabular-nums}
.t-photo .sym{top:14px;right:14px}
.t-photo figcaption{position:absolute;inset:auto 0 0 0;padding:clamp(40px,8%,90px) clamp(20px,3vw,40px) clamp(18px,2.6vw,32px);background:linear-gradient(0deg,rgba(12,13,16,.78) 0%,rgba(12,13,16,.42) 55%,rgba(12,13,16,0) 100%);color:#F4F2ED}
.t-photo figcaption p{margin:0 0 12px;font:500 clamp(24px,2.6vw,40px)/1.1 var(--serif);letter-spacing:-.018em;text-wrap:balance}
.ts-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;border-radius:99px;background:rgba(244,242,237,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;font-weight:600}
.ts-pill i{width:8px;height:8px;border-radius:50%;background:#4CC27A;box-shadow:0 0 0 3px rgba(76,194,122,.28)}
/* end state unless JS drives it */
.t-story:not(.live) :is(.ts-messy,.ts-clean,.ts-ws,.ts-count,.ts-scr){display:none}
/* caption row under the card: one line per phase (crossfade) and a three-step progress */
.t-cap{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;padding-top:14px;min-height:62px}
.tc-lines{display:grid;flex:1;min-width:0}
.tc-lines p{grid-area:1/1;margin:0;font:500 clamp(22px,2.2vw,34px)/1.2 var(--serif);letter-spacing:-.012em;text-wrap:balance;hyphens:manual;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.tc-lines p em{font-style:italic;color:var(--pa)}
.t-cap[data-phase="a"] [data-ph="a"],.t-cap[data-phase="t"] [data-ph="t"],.t-cap[data-phase="e"] [data-ph="e"]{opacity:1;transform:none}
/* typewriter: the ghost keeps the line's space, JS types into .tc-typed in step with the scroll */
.tc-type{position:relative;font-size:clamp(24px,2.4vw,36px)!important}
.tc-typed{position:absolute;inset:0;display:none}
.t-cap.typing .tc-ghost{color:transparent}
.t-cap.typing .tc-typed{display:block}
.t-cap.typing .tc-typed::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.12em;background:var(--pa);animation:caret .9s steps(1) infinite}
.tc-steps{flex:none;list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.tc-steps li{display:flex;align-items:center;gap:8px;transition:color .3s}
.tc-steps li+li::before{content:"";width:18px;height:1px;background:var(--line2)}
.t-cap[data-phase="a"] [data-st="a"],.t-cap[data-phase="t"] [data-st="b"],.t-cap[data-phase="e"] [data-st="e"]{color:var(--pa);font-weight:600}
.t-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:16px}
/* proof: a compact card in the legend row, left of the phone */
.t-proof{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 10px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.t-proof .vav{--s:42px}
.t-proof p{margin:0;font:500 clamp(16px,1.35vw,19px)/1.2 var(--serif);letter-spacing:-.01em}
.t-proof p em{font-style:italic;color:var(--pa)}
.t-proof div>span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.t-proof .mq-link{font-size:14px;padding:7px 12px 7px 8px;gap:8px}
.mq-link{display:inline-flex;align-items:center;gap:10px;margin-left:auto;text-decoration:none;font-weight:500;font-size:15px;padding:10px 16px 10px 12px;border-radius:99px;border:1px solid var(--line2);transition:border-color .2s,background-color .2s}
.mq-link .m{width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:600 13px var(--serif)}
.mq-link svg{width:13px;height:13px}
@media (hover:hover) and (pointer:fine){.mq-link:hover{border-color:var(--ink)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(93,187,106,.55)}70%{box-shadow:0 0 0 9px rgba(93,187,106,0)}100%{box-shadow:0 0 0 0 rgba(93,187,106,0)}}
/* logos stay on light tiles in both themes, so every logo (Lumeus too) keeps its contrast */
.logos-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:clamp(56px,7vw,90px);flex-wrap:wrap}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:6px}
.logos div{background:#F4F3F0;height:96px;border-radius:14px;display:grid;place-items:center;padding:20px;border:1px solid rgba(22,24,28,.06)}
:root[data-theme="dark"] .logos div{background:#E9E7E2;border-color:transparent}
.logos img{max-height:32px;max-width:118px;width:auto;object-fit:contain}
.logos .tall img{max-height:44px}
.logos .lumeus img{filter:brightness(0) opacity(.88);max-height:58px}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  .t-photo{height:auto;aspect-ratio:4/5;min-height:0;border-radius:20px}
  .t-run{height:130svh}
  /* phones: the crop keeps the laptop (the zoom target) in frame; four widgets sit in card space (--mx/--my) */
  .ts-box{--fx:.69}
  .tw{left:calc(var(--mx) * 100cqw - (100cqw - var(--bw)) * var(--fx));top:calc(var(--my) * 100cqh - (100cqh - var(--bh)) * var(--fy));gap:7px;padding:5px 9px 5px 5px;border-radius:12px}
  .tw.dsk{display:none}
  .tw-t b{font-size:11px}.tw-t small{font-size:10px}
  .tw-i{width:26px;height:26px;border-radius:8px}.tw-i svg{width:14px;height:14px}
  .tw-btns i{width:20px;height:20px}.tw-btns i::before{width:10px;height:10px;margin:5px}
  .t-cap{flex-direction:column;align-items:flex-start;gap:8px;min-height:96px}
  .tc-lines{width:100%}.tc-lines p,.tc-type{font-size:20px!important}
  .ts-hand{object-position:50% 34%}
  .t-photo figcaption p{font-size:24px}
  .t-row{display:grid;justify-content:stretch;gap:12px;padding-top:14px}
  .t-row .bsp{justify-self:start}
  .t-proof{flex-wrap:wrap;padding:14px;gap:12px}
  .t-proof div{flex:1 1 200px}
  .mq-link{margin-left:0}
  .logos div{height:74px;padding:14px}.logos img{max-height:24px}.logos .tall img{max-height:34px}
}

/* ===== shared tail: care. Five stations on one line. Static row by default; JS adds .hz on desktop
   and turns it into a pinned sideways path ===== */
.t-care{padding:clamp(90px,11vw,150px) 0;background:var(--bg2);position:relative;overflow:hidden;--sw:clamp(300px,27vw,400px)}
.cr-head .h2{font-size:clamp(34px,3.8vw,56px)}
.cr-view{position:relative;margin-top:clamp(40px,5vw,64px)}
.cr-track{position:relative;width:min(1280px,100%);margin-inline:auto;padding-inline:var(--gut)}
.cr-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative}
.cr-line{position:absolute;top:17px;left:calc(var(--gut) + 18px);right:var(--gut);height:2px;border-radius:2px;background:var(--line2)}
.cr-line b{position:absolute;inset:0;border-radius:2px;background:var(--pa);transform-origin:0 50%}
.cr-st{position:relative;min-width:0}
.cr-dot{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg2);border:2px solid var(--line2);font:500 11px var(--mono);color:var(--mute);transition:background-color .35s,border-color .35s,color .35s,transform .45s var(--ease)}
.cr-st.on .cr-dot{background:var(--pa);border-color:var(--pa);color:#fff}
.cr-t{display:block;font:500 clamp(22px,1.7vw,27px)/1.1 var(--serif);letter-spacing:-.012em;margin:20px 0 6px}
.cr-p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.4;min-height:2.8em}
.cr-vis{position:relative;margin-top:18px;aspect-ratio:4/3}
.cr-ph{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#2a2622;box-shadow:var(--shadow-s)}
.cr-ph img{width:100%;height:100%;object-fit:cover;object-position:var(--cp,50% 50%)}
.cr-ph .sym{top:10px;right:10px}
/* one small realistic overlay per station, placed away from the faces in the photos */
.cr-ov{position:absolute;z-index:2;background:var(--ui);color:var(--uiink);border:1px solid var(--uiline);border-radius:13px;box-shadow:var(--shadow-s);padding:9px 12px;font-size:12.5px;line-height:1.3;max-width:calc(100% + -24px)}
.cr-ov small{display:block;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--uiink2);margin-bottom:4px}
.cr-ov .r{display:flex;align-items:center;gap:8px;padding:2px 0;white-space:nowrap}
.cr-ov .r i{width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid var(--line2)}
.cr-ov .r i svg{width:9px;height:9px;stroke:#fff;opacity:0}
.cr-ov .r.ok i{background:var(--pa);border-color:var(--pa)}
.cr-ov .r.ok i svg{opacity:1}
.cr-call{left:12px;bottom:12px;display:flex;align-items:center;gap:10px}
.cr-call b{display:block;font:600 13px var(--sans)}
.cr-call small{margin:0;text-transform:none;letter-spacing:0;font:400 11.5px var(--sans)}
.cr-cam{width:28px;height:28px;border-radius:50%;background:#2F8A55;display:grid;place-items:center;flex:none}
.cr-cam svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
.cr-note{left:12px;bottom:12px;width:min(74%,250px);padding:10px 14px 8px;transform:rotate(-1.4deg)}
.cr-note-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.cr-note-h small{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cr-note-h .bsp{font-size:9px;padding:4px 6px}
.cr-note ul{list-style:none;margin:0;padding:0}
.cr-note li{font:600 19px/1.15 var(--hand);padding:3px 0 3px 18px;position:relative;border-bottom:1px dashed var(--uiline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-note li:last-child{border-bottom:0}
.cr-note li::before{content:"";position:absolute;left:1px;top:.55em;width:8px;height:8px;border-radius:50%;border:2px solid var(--pa)}
.cr-plan{right:12px;bottom:12px}
.cr-mob{right:12px;bottom:12px;width:27%;padding:4px;border-radius:17px;background:#0E0F12;border:0}
.cr-mob-s{aspect-ratio:9/17;border-radius:13px;background:var(--ui);overflow:hidden;display:flex;flex-direction:column;gap:5px;padding:8px 7px}
.cr-mob-bar{height:6px;width:42%;border-radius:3px;background:var(--pa);flex:none}
.cr-mob-hero{flex:1;min-height:0;border-radius:6px;background:url(assets/care-einrichtung.webp) 60% 50%/cover}
.cr-mob .sk{display:block;height:5px;border-radius:3px;background:var(--ui3);flex:none}
.cr-mob .sk.big{height:8px;background:color-mix(in srgb,var(--uiink) 70%,transparent)}
.cr-mob .w90{width:92%}.cr-mob .w60{width:60%}
.cr-mob-btn{display:block;text-align:center;font:600 8.5px/1 var(--sans);padding:6px 0;border-radius:99px;background:var(--pa);color:#fff;flex:none}
.cr-mob-tag{position:absolute;right:calc(100% + 8px);bottom:14px;white-space:nowrap;font-size:12px;font-weight:600;padding:7px 10px;border-radius:99px;background:var(--ui);color:var(--uiink);box-shadow:var(--shadow-s)}
.cr-live{left:12px;bottom:12px}
.cr-live .lv{display:inline-flex;align-items:center;gap:7px;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#2F8A55;margin-bottom:3px}
:root[data-theme="dark"] .cr-live .lv{color:#7FCB9A}
.cr-live .lv i{width:7px;height:7px;border-radius:50%;background:#5DBB6A;animation:pulse 2.4s infinite}
/* pinned sideways path (desktop with motion) */
.t-care.hz{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hh) + 24px) 0 40px}
/* padding-top leaves room for the scaled active dot and its halo, the view clips sideways only in effect */
.t-care.hz .cr-view{overflow:hidden;margin-top:clamp(12px,3vh,36px);padding:16px 0 34px}
.t-care.hz .cr-track{width:max-content;margin:0;padding-inline:max(var(--gut),(100vw + -1280px)/2 + var(--gut)) calc(var(--gut) + 6vw)}
.t-care.hz .cr-list{display:flex;gap:clamp(48px,5vw,84px)}
.t-care.hz .cr-st{width:var(--sw);flex:none}
.t-care.hz .cr-line{right:auto;width:var(--lw,0px)}
.t-care.hz .cr-st .cr-t,.t-care.hz .cr-st .cr-p,.t-care.hz .cr-st .cr-vis{transition:opacity .5s var(--ease),transform .6s var(--ease)}
.t-care.hz .cr-st:not(.on) .cr-vis{opacity:.55;transform:translateY(10px) scale(.97)}
.t-care.hz .cr-st:not(.on) .cr-t,.t-care.hz .cr-st:not(.on) .cr-p{opacity:.55}
.t-care.hz .cr-st.now .cr-dot{transform:scale(1.18);box-shadow:0 0 0 6px color-mix(in srgb,var(--pa) 18%,transparent)}
@media (max-height:760px){.t-care.hz{--sw:clamp(280px,24vw,340px)}.t-care.hz .cr-p{min-height:0}}
@media (max-width:1100px) and (min-width:761px){.cr-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}.cr-line{display:none}.t-care.hz .cr-line{display:block}}
/* phone: a vertical path, the line fills while you scroll */
@media (max-width:760px){
  .cr-list{grid-template-columns:1fr;gap:38px}
  .cr-line{top:0;bottom:0;left:calc(var(--gut) + 17px);right:auto;width:2px;height:auto}
  .cr-st{padding-left:52px}
  .cr-dot{position:absolute;left:0;top:0}
  .cr-t{margin-top:4px}
  .cr-p{min-height:0}
}
@media (prefers-reduced-motion:reduce){.cr-live .lv i{animation:none!important}}

/* ===== shared tail: CTA. Viktor with his path, then the question and the button ===== */
.t-cta{padding:clamp(40px,6vw,80px) 14px 14px;background:var(--bg)}
.cta-panel{position:relative;border-radius:28px;overflow:hidden;background:#15171B;color:#F1EFEA;padding:clamp(28px,4.5vw,64px);display:grid;grid-template-columns:minmax(280px,430px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;isolation:isolate}
:root[data-theme="dark"] .cta-panel{background:#1D2127;border:1px solid var(--line)}
.cta-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--pa) 26%,transparent),transparent 65%),radial-gradient(50% 60% at 10% 100%,color-mix(in srgb,var(--pa) 14%,transparent),transparent 70%)}
/* Viktor as a tall image card: name, role and his path set on a soft gradient at the bottom */
.cta-me{position:relative;margin:0;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:#24272c;box-shadow:0 44px 90px -34px rgba(0,0,0,.8),0 0 0 1px rgba(241,239,234,.08)}
.cta-me>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--vp-fr)}
.cta-me::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,13,16,.94) 0%,rgba(12,13,16,.78) 24%,rgba(12,13,16,.2) 46%,rgba(12,13,16,0) 58%);pointer-events:none}
.cta-chip{position:absolute;z-index:1;left:16px;top:16px;display:inline-flex;align-items:center;gap:7px;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border-radius:99px;background:rgba(12,13,16,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#F1EFEA;border:1px solid rgba(241,239,234,.16);white-space:nowrap}
.cta-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pa)}
.cta-bio{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:0 22px 22px}
.cta-name{display:block;font:500 clamp(26px,2.3vw,32px)/1.05 var(--serif);letter-spacing:-.015em}
.cta-bio>small{display:block;font-size:14px;color:rgba(241,239,234,.7);margin-top:4px}
.cta-path{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;position:relative}
.cta-path::before{content:"";position:absolute;left:4px;right:0;top:4px;height:1px;background:linear-gradient(90deg,rgba(241,239,234,.3),color-mix(in srgb,var(--pa) 80%,transparent))}
.cta-path li{position:relative;padding-top:18px;min-width:0}
.cta-path li::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:#15171B;border:1.5px solid rgba(241,239,234,.55)}
.cta-path li.now::before{background:var(--pa);border-color:var(--pa);box-shadow:0 0 0 4px color-mix(in srgb,var(--pa) 28%,transparent)}
.cta-path span{display:block;font:500 11px var(--mono);letter-spacing:.06em;color:rgba(241,239,234,.6)}
.cta-path b{display:block;font-weight:500;font-size:13px;line-height:1.25;margin-top:2px}
.cta-path li.now b{color:#fff}
.cta-close h2{font:500 clamp(30px,3.1vw,48px)/1.05 var(--serif);letter-spacing:-.022em;margin:0;text-wrap:balance}
.cta-close h2 em{font-style:italic;color:color-mix(in srgb,var(--pa) 70%,#fff)}
.cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px}
.cta-cal{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:rgba(241,239,234,.06);border:1px solid rgba(241,239,234,.12)}
.cta-cal .days{display:flex;gap:5px}
.cta-cal .days span{width:38px;border-radius:9px;padding:5px 0;text-align:center;font-size:10.5px;line-height:1.2;color:rgba(241,239,234,.55)}
.cta-cal .days span b{display:block;font:600 13.5px var(--sans);color:rgba(241,239,234,.75)}
.cta-cal .days span.free{background:color-mix(in srgb,var(--pa) 18%,transparent)}
.cta-cal .days span.sel{background:#F4F2ED;color:#15171B}
.cta-cal .days span.sel b{color:#15171B}
.cta-cal .bsp{background:rgba(241,239,234,.12);color:rgba(241,239,234,.75)}
.cta-note{display:block;margin-top:16px;font-size:14px;color:rgba(241,239,234,.6)}
@media (max-width:1100px){.cta-panel{grid-template-columns:1fr}.cta-me{width:min(430px,100%)}}
@media (max-width:760px){
  .cta-panel{padding:18px 18px 26px;border-radius:22px;gap:26px}
  .cta-me{width:100%;border-radius:18px}
  .cta-bio{padding:0 16px 16px}
  .cta-name{font-size:25px}
  .cta-path{gap:6px;margin-top:14px}
  .cta-path b{font-size:11.5px}
  .cta-row{margin-top:22px}
}

/* footer */
.ft{border-top:1px solid var(--line);padding:26px var(--gut);display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--mute);background:var(--bg)}
.ft a{text-decoration:none}
.ft a:hover{color:var(--ink)}
.ft span{margin-right:auto}

/* transition layer */
.fx{position:fixed;inset:0;z-index:58;pointer-events:none}
.fx-bg{position:absolute;inset:0;background:var(--bg)}
.fx-photo{position:absolute;inset:0;overflow:hidden;background:#15171a}
.fx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,16,.92) 0%,rgba(12,13,16,.82) 38%,rgba(12,13,16,.34) 66%,rgba(12,13,16,.1) 82%),linear-gradient(0deg,rgba(12,13,16,.86) 0%,rgba(12,13,16,.4) 34%,rgba(12,13,16,0) 56%)}
@media (max-width:760px){.fx-photo::after{background:linear-gradient(180deg,rgba(12,13,16,.66) 0%,rgba(12,13,16,.84) 40%,rgba(12,13,16,.92) 100%)}}
.fly{position:absolute;left:0;top:0;margin:0;transform-origin:0 0;will-change:transform,opacity}
.veil{position:fixed;inset:0;z-index:80;background:var(--bg);pointer-events:none;opacity:0}

/* reveal helper: visible by default, JS adds .rv-on to animate */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}