/* Logentic living harbour — styles shared by homepage, brochure and access page.
   Everything is namespaced hb- so it never collides with src/index.css. */
:root{--hb-navy:#1F2F3A;--hb-navy2:#172532;--hb-accent:#81A6C6;--hb-accent-d:#5F88A8;--hb-accent-l:#AACDDC;--hb-brown:#B07A44;--hb-beige:#E7DED2;--hb-sand:#FAF3E9;--hb-muted:#5d6b76;--hb-line:rgba(31,47,58,.12);--hb-green:#237a4b;--hb-green-l:#eaf5ed}

/* ── scene motion ── */
.hb-layer{will-change:transform}
.hb-bob{animation:hb-bob 6s ease-in-out infinite}
@keyframes hb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(1.6px)}}
.hb-cloud{animation:hb-drift 90s linear infinite}
.hb-cloud.hb-c2{animation-duration:130s;animation-delay:-40s}
.hb-cloud.hb-c3{animation-duration:110s;animation-delay:-80s}
@keyframes hb-drift{from{transform:translateX(-300px)}to{transform:translateX(1900px)}}
.hb-farship{animation:hb-farship 140s linear infinite}
@keyframes hb-farship{from{transform:translateX(-260px)}to{transform:translateX(1300px)}}
.hb-plane{animation:hb-plane 30s linear infinite;animation-delay:-6s}
@keyframes hb-plane{0%{transform:translate(-300px,0)}100%{transform:translate(1900px,-60px)}}
.hb-shim line{animation:hb-shim 4s ease-in-out infinite}
@keyframes hb-shim{0%,100%{opacity:.08}50%{opacity:.55}}
.hb-gull{animation:hb-gull 16s ease-in-out infinite}
.hb-gull path{animation:hb-flap .9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes hb-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@keyframes hb-gull{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-18px)}}
.hb-buoy{animation:hb-buoy 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes hb-buoy{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(2px)}}
.hb-blink{animation:hb-blink 2.4s steps(1) infinite}
@keyframes hb-blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
.hb-scan{opacity:0;transition:opacity .3s}
.hb-scan.on{opacity:1}
.hb-scanbar{animation:hb-scanbar 1s ease-in-out infinite alternate}
@keyframes hb-scanbar{from{transform:translateX(0)}to{transform:translateX(54px)}}

/* ── hotspots + document popover ── */
.hb-hs{cursor:pointer;outline:none}
.hb-hs-ring{fill:rgba(250,243,233,.25);stroke:#FAF3E9;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:hb-ring 2.4s ease-out infinite}
.hb-hs-dot{fill:var(--hb-brown);stroke:#FAF3E9;stroke-width:2;transition:fill .2s}
.hb-hs:hover .hb-hs-dot,.hb-hs:focus-visible .hb-hs-dot,.hb-hs.open .hb-hs-dot{fill:var(--hb-navy)}
.hb-hs:focus-visible .hb-hs-ring{stroke:var(--hb-navy);stroke-width:3}
@keyframes hb-ring{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.9);opacity:0}}
.hb-doc{position:fixed;z-index:300;width:300px;background:#fffdf8;border-radius:12px;border:1px solid rgba(31,47,58,.14);box-shadow:0 30px 60px -20px rgba(15,25,35,.5);padding:14px 16px 12px;opacity:0;transform:translateY(6px) scale(.98);pointer-events:none;transition:opacity .18s,transform .18s;font-family:'DM Sans',system-ui,sans-serif;color:var(--hb-navy)}
.hb-doc.show{opacity:1;transform:none;pointer-events:auto}
.hb-doc-h{display:flex;align-items:baseline;gap:8px;padding-bottom:8px;border-bottom:1px dashed rgba(31,47,58,.2);margin-bottom:6px}
.hb-doc-h b{font-family:'Space Grotesk',sans-serif}
.hb-doc-h span{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--hb-muted)}
.hb-doc dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:.8rem;margin:0}
.hb-doc dt{font-family:'DM Mono',monospace;font-size:.64rem;color:var(--hb-muted);text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.hb-doc dd{font-weight:500;margin:0}
.hb-doc dd mark{background:linear-gradient(90deg,rgba(129,166,198,.38),rgba(129,166,198,.38)) no-repeat 0 100%/0% 100%;color:inherit;padding:0 2px;border-radius:3px}
.hb-doc.show dd mark{animation:hb-hl .5s ease forwards;animation-delay:calc(var(--i)*.14s + .1s)}
@keyframes hb-hl{to{background-size:100% 100%}}
.hb-doc-f{margin-top:10px;padding-top:8px;border-top:1px solid var(--hb-line);font-size:.74rem;color:var(--hb-muted)}
.hb-doc-f b{color:var(--hb-green)}
.hb-tag{margin-left:auto;font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--hb-muted);background:rgba(31,47,58,.06);padding:4px 8px;border-radius:6px;white-space:nowrap}

/* ── Alex card (hero + brochure cover) ── */
.hb-card{box-sizing:border-box;background:rgba(250,243,233,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(31,47,58,.1);border-radius:16px;box-shadow:0 28px 60px -24px rgba(15,25,35,.55);padding:16px;font-size:.86rem;color:var(--hb-navy);text-align:left}
.hb-card-h{display:flex;align-items:center;gap:10px}
.hb-av{width:38px;height:38px;flex:none;display:block}
.hb-card-h b{display:block;font-family:'Space Grotesk',sans-serif;font-size:.92rem}
.hb-card-h small{color:var(--hb-muted);font-size:.76rem}
.hb-steps{list-style:none;display:grid;margin:10px 0 0;padding:6px 0 0;border-top:1px solid var(--hb-line)}
.hb-steps li{display:flex;align-items:center;gap:10px;padding:4px;color:var(--hb-muted);transition:color .3s}
.hb-steps li i{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(31,47,58,.25);flex:none;position:relative;transition:all .3s}
.hb-steps li em{margin-left:auto;font-style:normal;font-family:'DM Mono',monospace;font-size:.7rem;opacity:0;transition:opacity .3s}
.hb-steps li.active,.hb-steps li.done{color:var(--hb-navy)}
.hb-steps li.active i{border-color:var(--hb-accent-d);border-top-color:transparent;animation:hb-spin .8s linear infinite}
.hb-steps li.done i{background:var(--hb-green);border-color:var(--hb-green)}
.hb-steps li.done i::after{content:'';position:absolute;left:4.5px;top:2px;width:4px;height:7px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.hb-steps li.done em{opacity:1;color:var(--hb-green)}
@keyframes hb-spin{to{transform:rotate(360deg)}}
.hb-card-foot{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--hb-muted);margin:6px 0 0;letter-spacing:.02em}

/* ── homepage hero ── */
.hb-hero{position:relative;height:100vh;min-height:700px;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#cbd8e2 0%,#dde6ec 46%,#dde6ec 100%)}
.hb-hero-copy{position:relative;z-index:3;text-align:center;padding:108px 20px 0;max-width:880px;margin:0 auto}
.hb-eyebrow{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--hb-navy);display:inline-flex;align-items:center;gap:12px}
.hb-eyebrow::before,.hb-eyebrow::after{content:'';width:26px;height:1px;background:var(--hb-brown)}
.hb-hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.5rem,5.6vw,4.7rem);line-height:1;letter-spacing:-.05em;color:var(--hb-navy);margin:18px 0}
.hb-hero h1 em{font-style:normal;color:var(--hb-accent-d)}
.hb-lead{font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.65;color:var(--hb-muted);max-width:600px;margin:0 auto}
.hb-actions{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.hb-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;text-decoration:none;transition:transform .15s,background .2s;cursor:pointer;border:0}
.hb-btn-primary{background:var(--hb-navy);color:#fff;box-shadow:0 10px 24px -10px rgba(31,47,58,.6)}
.hb-btn-primary:hover{background:#2a3f4e;transform:translateY(-1px)}
.hb-btn-ghost{background:#f6f0e6;color:var(--hb-navy);box-shadow:inset 0 0 0 1px rgba(31,47,58,.18)}
.hb-btn-ghost:hover{background:#fff}
.hb-btn-warm{background:var(--hb-brown);color:#fff;box-shadow:0 12px 28px -12px rgba(176,122,68,.8)}
.hb-btn-warm:hover{background:#c08a54;transform:translateY(-1px)}
.hb-scene-wrap{position:relative;flex:1;min-height:0;margin-top:-36px}
.hb-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.hb-hero .hb-card{position:absolute;left:clamp(16px,3vw,48px);bottom:24px;z-index:4;width:330px}
.hb-hint{position:absolute;right:clamp(16px,3vw,48px);bottom:28px;z-index:4;font-family:'DM Mono',monospace;font-size:.7rem;color:rgba(250,243,233,.85);letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.hb-hint i{width:14px;height:14px;border-radius:50%;background:var(--hb-brown);box-shadow:0 0 0 3px rgba(250,243,233,.35)}

/* ── shared section type ── */
.hb-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.hb-label{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hb-brown);display:inline-flex;align-items:center;gap:12px}
.hb-label::before{content:'';width:26px;height:1px;background:currentColor}
.hb-h2{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1.04;color:var(--hb-navy);font-size:clamp(2rem,4vw,3.4rem);margin:14px 0 0}

/* ── day ── */
.hb-day{position:relative;padding:120px 0 0;overflow:hidden;background:linear-gradient(180deg,var(--hb-sky-a,#d9e4ec),var(--hb-sky-b,#f3e3cc) 70%)}
.hb-sun{position:absolute;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,#fff3dc 0 38%,rgba(249,217,168,.55) 40%,rgba(249,217,168,0) 70%);transform:translate(-50%,50%);pointer-events:none}
.hb-day-head{position:relative;z-index:2}
.hb-day-head p{max-width:620px;color:var(--hb-muted);line-height:1.65;margin:18px 0 0;font-size:1.05rem}
.hb-day-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:34px;flex-wrap:wrap}
.hb-big{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(3rem,7vw,5.4rem);letter-spacing:-.05em;line-height:1;color:var(--hb-brown);transition:color .4s}
.hb-big small{display:block;font-family:'DM Mono',monospace;font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hb-muted);margin-top:10px}
.hb-day [data-when=alex]{display:none}
.hb-day.is-alex [data-when=now]{display:none!important}
.hb-day.is-alex span[data-when=alex]{display:inline}
.hb-day.is-alex small[data-when=alex],.hb-day.is-alex .hb-crate [data-when=alex]{display:block}
.hb-day.is-alex .hb-big{color:var(--hb-green)}
.hb-tg{position:relative;display:flex;background:var(--hb-navy);border-radius:999px;padding:5px}
.hb-tg button{position:relative;z-index:1;background:none;border:0;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.92rem;padding:11px 26px;border-radius:999px;cursor:pointer;transition:color .3s}
.hb-tg button[aria-pressed=true]{color:var(--hb-navy)}
.hb-knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--hb-sand);transition:transform .45s cubic-bezier(.6,0,.2,1)}
.hb-day.is-alex .hb-knob{transform:translateX(100%)}
.hb-yard-wrap{position:relative;z-index:2;margin-top:70px}
.hb-gantry{position:relative;height:74px}
.hb-rail{position:absolute;left:-8px;right:-8px;top:10px;height:10px;background:#4a5661;border-radius:2px}
.hb-rail::before,.hb-rail::after{content:'';position:absolute;top:10px;width:10px;height:210px;background:#4a5661}
.hb-rail::before{left:0}.hb-rail::after{right:0}
.hb-trolley{position:absolute;top:4px;left:92%;width:44px;height:20px;margin-left:-22px;background:var(--hb-navy);border-radius:3px;transition:left .55s cubic-bezier(.6,0,.2,1)}
.hb-cable{position:absolute;left:50%;top:20px;width:2px;margin-left:-1px;height:var(--drop,26px);background:var(--hb-navy);transition:height .35s ease}
.hb-cable::after{content:'';position:absolute;left:-18px;bottom:-6px;width:38px;height:6px;background:var(--hb-brown);border-radius:1px}
.hb-axis{display:flex;justify-content:space-between;font-family:'DM Mono',monospace;font-size:.68rem;color:var(--hb-muted);margin-bottom:10px}
.hb-yard{position:relative;display:flex;align-items:flex-end;height:118px}
.hb-marker{position:absolute;top:-34px;bottom:-12px;left:0;width:0;border-left:1.5px dashed var(--hb-brown);z-index:3;pointer-events:none}
.hb-clock{position:absolute;top:-4px;left:6px;font-family:'DM Mono',monospace;font-size:.68rem;color:var(--hb-brown);background:var(--hb-sand);padding:1px 6px;border-radius:4px;white-space:nowrap}
.hb-blk{flex:var(--now) 1 0;min-width:0;padding-right:6px;transition:flex-grow 1s cubic-bezier(.6,0,.2,1),transform .75s cubic-bezier(.5,0,.2,1),opacity .6s,padding .6s}
.hb-day.shrunk .hb-blk{flex-grow:var(--alex)}
.hb-day.shrunk .hb-blk.lift{padding-right:0}
.hb-blk.up{transform:translateY(-190px);opacity:0}
.hb-crate{position:relative;height:112px;border-radius:3px;background-color:var(--c);color:#fff;padding:14px;overflow:hidden;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.13) 0 2px,transparent 2px 13px),linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.14));box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),0 14px 20px -12px rgba(0,0,0,.45)}
.hb-crate::before,.hb-crate::after{content:'';position:absolute;top:6px;bottom:6px;width:6px;border-radius:1px;background:rgba(0,0,0,.18)}
.hb-crate::before{left:4px}.hb-crate::after{right:4px}
.hb-nm,.hb-tm,.hb-qt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.hb-nm{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.02rem}
.hb-tm{font-family:'DM Mono',monospace;font-size:.75rem;opacity:.9;margin-top:3px}
.hb-qt{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;opacity:.72;margin-top:14px}
.hb-day.is-alex .hb-blk:first-child .hb-nm,.hb-day.is-alex .hb-blk:first-child .hb-qt{display:none!important}
.hb-blk.free .hb-crate{background:repeating-linear-gradient(135deg,rgba(31,47,58,.05) 0 10px,transparent 10px 20px);box-shadow:inset 0 0 0 1.5px rgba(31,47,58,.18);color:var(--hb-accent-d)}
.hb-blk.free .hb-crate::before,.hb-blk.free .hb-crate::after,.hb-blk.gain .hb-crate::before,.hb-blk.gain .hb-crate::after{display:none}
.hb-blk.free .hb-tm,.hb-blk.free .hb-qt{color:var(--hb-muted)}
.hb-blk.gain{opacity:0}
.hb-day.shrunk .hb-blk.gain{opacity:1;transition-delay:.3s}
.hb-blk.gain .hb-crate{background:var(--hb-green-l);box-shadow:inset 0 0 0 1.5px rgba(35,122,75,.35);color:var(--hb-green)}
.hb-blk.gain .hb-tm,.hb-blk.gain .hb-qt{color:var(--hb-green)}
.hb-note{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--hb-muted);margin:18px 0 0}
.hb-day-quay{position:relative;margin-top:26px;height:14px;background:#8f8272}
.hb-day-water{height:90px;background:linear-gradient(180deg,#b3c4cc,#8fb0c4 55%,#7593a6);position:relative;overflow:hidden}
.hb-day-water i{position:absolute;height:2px;border-radius:2px;background:rgba(255,255,255,.55);animation:hb-shim 4s ease-in-out infinite}

/* ── journey ── */
.hb-journey{position:relative;height:640vh;background:var(--hb-navy)}
.hb-j-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.hb-j-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.hb-j-panel{position:absolute;left:clamp(16px,3vw,48px);top:100px;z-index:3;width:380px;background:rgba(250,243,233,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;padding:22px 22px 18px;box-shadow:0 30px 70px -30px rgba(10,20,30,.6);border:1px solid rgba(31,47,58,.08)}
.hb-j-panel .hb-h2{font-size:clamp(1.5rem,2.2vw,1.95rem);margin:12px 0 16px}
.hb-j-steps{list-style:none;display:grid;gap:4px;margin:0;padding:0}
.hb-j-steps li{position:relative;padding:7px 12px 7px 40px;border-radius:12px;transition:background .35s}
.hb-j-steps li::before{content:'';position:absolute;left:14px;top:15px;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(31,47,58,.3);background:var(--hb-sand);transition:all .3s}
.hb-j-steps li::after{content:'';position:absolute;left:19.5px;top:30px;bottom:-14px;width:1.5px;background:rgba(31,47,58,.14)}
.hb-j-steps li:last-child::after{display:none}
.hb-j-steps .t{font-family:'DM Mono',monospace;font-size:.66rem;color:var(--hb-muted)}
.hb-j-steps b{display:block;font-family:'Space Grotesk',sans-serif;color:var(--hb-navy);font-size:.98rem;opacity:.55;transition:opacity .3s}
.hb-j-steps p{font-size:.84rem;color:var(--hb-muted);line-height:1.5;max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .45s,opacity .35s,margin .35s}
.hb-j-steps li.active{background:#fff;box-shadow:0 6px 16px -10px rgba(31,47,58,.4)}
.hb-j-steps li.active b,.hb-j-steps li.done b{opacity:1}
.hb-j-steps li.active p{max-height:130px;opacity:1;margin-top:4px}
.hb-j-steps li.active::before{border-color:var(--hb-brown);background:var(--hb-brown);box-shadow:0 0 0 4px rgba(176,122,68,.18)}
.hb-j-steps li.done::before{border-color:var(--hb-green);background:var(--hb-green)}
.hb-j-prog{height:3px;background:rgba(31,47,58,.1);border-radius:3px;margin-top:14px;overflow:hidden}
.hb-j-prog i{display:block;height:100%;width:0;background:var(--hb-brown)}
.hb-j-clock{position:absolute;right:clamp(16px,3vw,48px);top:96px;z-index:3;text-align:right;color:var(--hb-navy)}
.hb-j-clock span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.04em;display:block;transition:color .4s}
.hb-j-clock small{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.hb-j-clock.dark{color:#FAF3E9}

@media (max-width:900px){
  .hb-hero{height:auto;min-height:0}
  .hb-hero-copy{padding-top:104px}
  .hb-scene-wrap{flex:none;height:auto;margin-top:20px;background:#26343f;padding-bottom:4px}
  .hb-scene{position:relative;inset:auto;height:300px}
  .hb-hero .hb-card{position:relative;left:auto;bottom:auto;width:auto;margin:0 16px 28px}
  .hb-hint{display:none}
  .hb-j-scene{height:64vh;bottom:auto}
  .hb-j-sticky{background:linear-gradient(180deg,#26343f,#1F2F3A)}
  .hb-j-panel{top:auto;bottom:16px;left:16px;right:16px;width:auto;padding:16px}
  .hb-j-panel .hb-h2{display:none}
  .hb-j-steps li{padding:6px 10px 6px 36px}
  .hb-j-steps li:not(.active){display:none}
  .hb-j-steps li.active{background:transparent;box-shadow:none}
  .hb-j-steps li::after{display:none}
  .hb-j-clock{top:80px}
  .hb-j-clock small{display:none}
  .hb-yard{height:96px}.hb-crate{height:92px;padding:10px}
  .hb-qt{display:none!important}
  .hb-nm{font-size:.85rem}
}
@media (max-width:560px){
  .hb-blk:not(.free):not(.gain):not(:first-child) .hb-nm{font-size:0}
  .hb-tm{font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){
  .hb-layer,.hb-bob,.hb-cloud,.hb-farship,.hb-plane,.hb-shim line,.hb-gull,.hb-gull path,.hb-buoy,.hb-blink,.hb-scanbar,.hb-hs-ring,.hb-day-water i,.hb-steps li.active i{animation:none!important}
  .hb-blk,.hb-trolley,.hb-cable,.hb-knob{transition-duration:.01ms!important}
}

/* Day section flows into the container journey sky (no separate water strip) */
.hb-day-fade{height:160px;margin-top:40px;background:linear-gradient(180deg,rgba(201,216,227,0),#c9d8e3)}

/* src/index.css pads every <section> sideways; these harbour sections are full-bleed */
section.hb-day,section.hb-journey{padding-left:0!important;padding-right:0!important}

/* Phones and small tablets: the day becomes a vertical list; "Met Alex" folds the manual rows away */
@media (max-width:900px){
  .hb-gantry,.hb-axis,.hb-marker{display:none}
  .hb-yard-wrap{margin-top:36px}
  .hb-yard{flex-direction:column;align-items:stretch;height:auto;gap:8px}
  .hb-blk{flex:none!important;padding-right:0!important;max-height:120px;overflow:hidden;transition:max-height .6s cubic-bezier(.6,0,.2,1),opacity .5s,margin .6s}
  .hb-crate{height:auto;min-height:58px;padding:12px 16px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .hb-crate .hb-tm{margin-top:0}
  .hb-blk .hb-nm{font-size:.98rem!important}
  .hb-blk.up{transform:none;opacity:0;max-height:0;margin-top:-8px}
  .hb-blk.gain{max-height:0;margin-top:-8px}
  .hb-day.shrunk .hb-blk.gain{max-height:120px;margin-top:0}
  .hb-day.is-alex .hb-blk:first-child .hb-nm-ctrl{display:block!important}
  .hb-note{display:none}
}


/* Alex in the journey: what Alex does at each step and where the data goes */
.hb-j-alex{position:absolute;left:50%;top:96px;transform:translateX(-30%);z-index:4;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;background:#1F2F3A;color:#fff;box-shadow:0 18px 40px -18px rgba(10,20,30,.7);max-width:min(620px,52vw)}
.hb-j-alex-av{width:34px;height:34px;border-radius:10px;background:#5F88A8;display:grid;place-items:center;font:700 15px 'Space Grotesk',sans-serif;flex:none}
.hb-j-alex-txt small{display:block;font:500 10px 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#AACDDC}
.hb-j-alex-txt b{display:block;font:700 14px 'Space Grotesk',sans-serif;white-space:nowrap}
.hb-j-alex-flow{display:flex;gap:5px;flex:none}
.hb-j-alex-flow i{width:6px;height:6px;border-radius:50%;background:#e2b585;opacity:.25;animation:hbFlow 1.2s linear infinite}
.hb-j-alex-flow i:nth-child(2){animation-delay:.2s}.hb-j-alex-flow i:nth-child(3){animation-delay:.4s}
@keyframes hbFlow{0%,100%{opacity:.2;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
.hb-j-alex-to{display:flex;gap:6px;flex:none}
.hb-j-alex-to em{font:500 11px 'DM Mono',monospace;font-style:normal;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.45);transition:all .35s}
.hb-j-alex-to em.on{background:#237a4b;color:#fff}
.hb-j-alex.hb-ping{animation:hbAlexPulse .6s ease}
@keyframes hbAlexPulse{0%{box-shadow:0 0 0 0 rgba(226,181,133,.6)}100%{box-shadow:0 0 0 14px rgba(226,181,133,0)}}
@media (max-width:900px){
  .hb-j-alex{left:12px;right:12px;top:72px;transform:none;max-width:none;padding:8px 10px 8px 8px;gap:8px;flex-wrap:wrap}
  .hb-j-alex-av{width:28px;height:28px}
  .hb-j-alex-txt{flex:1;min-width:0}
  .hb-j-alex-txt b{white-space:normal;font-size:13px}
  .hb-j-alex-flow{display:none}
  .hb-j-alex-to{width:100%;padding-left:36px}
}
@media (prefers-reduced-motion:reduce){.hb-j-alex-flow i,.hb-j-alex.hb-ping{animation:none}}
/* Journey fades into the shared sky at the bottom: no hard line */
body.story .hb-journey{background:transparent}
body.story .hb-j-sticky::after{display:none}
body.story .hb-j-scene{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 96%);mask-image:linear-gradient(180deg,#000 62%,transparent 96%)}

/* Full-width night scenes under the sections */
body.story{overflow-x:clip}
.hb-horizon{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:48px;height:clamp(150px,15vw,260px);pointer-events:none}
.hb-horizon svg{display:block;width:100%;height:100%}
.hz-flick{animation:hzFlick 6s steps(1) infinite}
@keyframes hzFlick{0%,70%{opacity:1}71%,78%{opacity:.25}79%,100%{opacity:1}}
/* Planner: a container hanging from a gantry crane on the terminal */
.hz-flick{will-change:opacity}
@media (prefers-reduced-motion:reduce){.hz-flick{animation:none}}

.hb-port{height:clamp(220px,24vw,420px);margin-top:24px;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.np-shim{animation:hb-shim 4s ease-in-out infinite}
.np-straddle{animation:npDrive 26s ease-in-out infinite alternate}
@keyframes npDrive{from{transform:translateX(1000px)}to{transform:translateX(1520px)}}
@media (max-width:760px){.hb-port{height:230px}}
@media (prefers-reduced-motion:reduce){.np-shim,.np-straddle{animation:none}}
/* Morning harbour closes the story */
.hb-finale{position:relative;height:clamp(300px,34vw,560px);margin-top:-20px}
.hb-finale svg{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 100%)}
@media (max-width:760px){.hb-finale{height:260px}}

/* Dawn: CTA and footer sit under a light sky again */
body.story .cta-section .section-title{color:var(--navy)}
body.story .cta-section .section-sub{color:var(--text2)}
body.story .cta-section .label{color:#8a5a2c!important}
body.story .cta-section .btn-white{background:var(--navy);color:#fff}

/* Planner: light card like the rest of the page, with a live strip of the hero harbour on top */
.bk-wrap .booking-card{border:1px solid rgba(31,47,58,.1);border-radius:18px;overflow:hidden;background:#fffdf8;box-shadow:0 30px 60px -30px rgba(10,20,30,.55)}
.bk-scene{position:relative;height:clamp(170px,32vw,200px);background:#dde6ec;overflow:hidden}
.bk-scene svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bk-wrap .booking-head{background:#fffdf8!important;border-bottom:1px solid var(--border)}
.bk-wrap .booking-head-title{color:var(--navy)!important}
.bk-wrap .booking-head-sub{color:var(--text2)!important}
.bk-wrap .booking-head-icon{background:var(--navy)!important}
.bk-wrap .form-input{background:var(--sand);border:1px solid var(--border);border-radius:10px}
.bk-wrap .form-input:focus{outline:2px solid #AACDDC;border-color:var(--accent-dark)}
.bk-wrap :is(.date-btn,.time-btn){background:var(--sand);border:1px solid var(--border);color:var(--navy)}
.bk-wrap :is(.date-btn,.time-btn):hover:not(:disabled){border-color:var(--accent-dark)}
.bk-wrap :is(.date-btn,.time-btn).sel{background:var(--navy);border-color:var(--navy);color:#fff}
.bk-wrap .date-btn.sel .dn,.bk-wrap .date-btn.sel .dm{color:rgba(255,255,255,.8)}
.bk-wrap .form-submit{background:var(--navy);color:#fff}
.bk-wrap .form-submit:hover{background:#2a3f4e}

/* Depot scene in the planner */
.dp-in{animation:dpIn 14s ease-in-out infinite}
@keyframes dpIn{0%{transform:translateX(960px)}45%,100%{transform:translateX(640px)}}
.dp-out{animation:dpOut 18s linear infinite;animation-delay:-6s}
@keyframes dpOut{from{transform:translateX(980px)}to{transform:translateX(-200px)}}
.dp-van{animation:dpVan 11s linear infinite;animation-delay:-3s}
@keyframes dpVan{from{transform:translateX(-120px)}to{transform:translateX(960px)}}
.dp-fork{animation:dpFork 6s ease-in-out infinite alternate}
@keyframes dpFork{from{transform:translateX(0)}to{transform:translateX(150px)}}
.dp-door{transform-box:fill-box;transform-origin:top;animation:dpDoor 8s ease-in-out infinite}
.dp-d1{animation-delay:-2s}.dp-d2{animation-delay:-4s}.dp-d3{animation-delay:-6s}
@keyframes dpDoor{0%,20%{transform:scaleY(1)}35%,75%{transform:scaleY(.15)}90%,100%{transform:scaleY(1)}}
.dp-lamp{animation:hb-blink 2.4s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.dp-in,.dp-out,.dp-van,.dp-fork,.dp-door,.dp-lamp{animation:none}}

/* Calmer hero card (11-10): one line with what Alex is doing now, no timings, tag or footer */
.hb-hero .hb-card{width:auto;max-width:300px;padding:10px 14px;border-radius:14px;background:rgba(250,243,233,.88)}
.hb-hero .hb-card .hb-tag,.hb-hero .hb-card .hb-card-foot,.hb-hero .hb-steps li em{display:none}
.hb-hero .hb-card-h small{display:none}
.hb-hero .hb-card-h b{font-size:.84rem}
.hb-hero .hb-av{width:26px;height:26px;border-radius:8px;font-size:.8rem}
.hb-hero .hb-steps{margin-top:6px;padding-top:6px}
.hb-hero .hb-steps li{display:none;padding:2px 0;font-size:.82rem}
.hb-hero .hb-steps li.active{display:flex}
.hb-hero .hb-steps:not(:has(li.active)) li.done:last-child{display:flex}
.hb-hero .hb-steps:not(:has(li.active,li.done)){display:none}
/* Calmer day crates: flat colour, name and time only */
.hb-crate{background-image:none!important;box-shadow:0 10px 18px -12px rgba(0,0,0,.35)!important;border-radius:6px}
.hb-crate::before,.hb-crate::after{display:none!important}
.hb-crate .hb-qt{display:none!important}
/* Day yard (11-10): dimension lines above the crates say what the widths mean;
   no hour axis or moving clock running through the labels. */
.hb-dims{display:flex;height:30px;margin-bottom:8px}
.hb-dim{flex:var(--now) 1 0;min-width:0;padding-right:6px;position:relative;transition:flex-grow 1s cubic-bezier(.6,0,.2,1),opacity .6s;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}
.hb-day.shrunk .hb-dim{flex-grow:var(--alex)}
.hb-dim::before{content:'';position:absolute;left:0;right:6px;bottom:4px;height:8px;border:1.5px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0;opacity:.55}
.hb-dim span{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.04em;white-space:nowrap;padding:0 8px;line-height:18px}
.hb-dim.man{color:var(--hb-brown)}.hb-dim.own{color:var(--hb-muted)}.hb-dim.gain{color:var(--hb-green);opacity:0}
.hb-day.shrunk .hb-dim.gain{opacity:1;transition-delay:.3s}
.hb-day.shrunk .hb-dim.man span[data-when=alex]{font-size:.66rem;padding:0 2px}
.hb-dim span{transition:opacity .4s}.hb-dim span[data-when=alex]{display:none}.hb-day.shrunk .hb-dim span[data-when=alex]{display:inline}.hb-day.shrunk .hb-dim span[data-when=now]{display:none}.hb-day.is-alex:not(.shrunk) .hb-dim span{opacity:0}
.hb-gantry{height:52px}
.hb-crate{padding:12px 8px 12px 10px;container-type:inline-size}
.hb-nm{white-space:normal;line-height:1.15;text-overflow:clip;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;font-size:clamp(.7rem,16cqi,1.02rem)}
.hb-tm{white-space:normal}
@media (max-width:900px){.hb-dims{display:none}.hb-crate{padding:12px 16px;container-type:normal}.hb-nm{hyphens:manual}}

/* ═════ "Hoe het werkt" as a voyage (11-10): dawn, brochure colours (slide 5) ═════ */
.hb-voyage{position:relative;padding:110px 0 0;overflow:hidden}
.vg-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.vg-top p{max-width:520px;margin:14px 0 0;color:#5F6B76;font-size:1.02rem;line-height:1.65}
.vg-day{text-align:right;font-family:'DM Mono',monospace;color:#5F6B76;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.vg-day b{display:block;font:700 3rem/1 'Space Grotesk',sans-serif;color:var(--hb-brown);letter-spacing:-.03em;margin-top:4px}
.vg-day b small{font-size:1.3rem;color:#5F6B76;font-weight:500}
.vg-sp{position:relative;margin-top:44px}
.vg-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;margin:0;padding:0}
.vg-card{position:relative;min-height:196px;padding:18px 18px 16px;border-radius:16px;background:rgba(252,249,244,.94);border:1px solid rgba(31,47,58,.08);cursor:pointer;opacity:.78;transition:background .4s,box-shadow .4s,transform .4s,opacity .4s,border-color .4s}
.vg-card:focus-visible{outline:2px solid var(--hb-accent-d);outline-offset:3px}
.vg-card b{display:block;font:700 1.15rem/1.2 'Space Grotesk',sans-serif;letter-spacing:-.01em;margin-top:12px;color:var(--hb-navy)}
.vg-card small{display:block;font:400 .72rem 'DM Mono',monospace;color:#5F6B76;margin-top:4px}
.vg-card ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;opacity:0;transition:opacity .4s}
.vg-card li{position:relative;padding-left:16px;font-size:.88rem;line-height:1.3;color:#3B4B56}
.vg-card li::before{content:'';position:absolute;left:2px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--hb-brown)}
.vg-n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid #D9CBB4;font:700 .85rem 'Space Grotesk',sans-serif;color:var(--hb-navy);transition:all .4s}
.vg-n i{font-style:normal}.vg-n svg{width:15px;height:15px;display:none}
.vg-card.active{opacity:1;background:#fff;border-color:rgba(176,122,68,.35);box-shadow:0 18px 40px rgba(31,47,58,.14);transform:translateY(-6px)}
.vg-card.active ul{opacity:1}
.vg-card.active .vg-n{background:var(--hb-brown);border-color:var(--hb-brown);color:#fff}
.vg-card.done{opacity:.92}
.vg-card.done .vg-n{background:var(--hb-green);border-color:var(--hb-green);color:#fff}
.vg-card.done .vg-n i{display:none}.vg-card.done .vg-n svg{display:block}
.vg-card::after{content:'';position:absolute;left:50%;top:100%;height:var(--drop,96px);border-left:2px dotted rgba(31,47,58,.22)}
.vg-card.active::after{border-left-color:var(--hb-brown)}.vg-card.done::after{border-left-color:var(--hb-green)}
.vg-sea{position:relative;height:150px;margin-top:70px}
.vg-water{position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:34px;bottom:-150px;background:linear-gradient(180deg,#B9CFDB 0%,#9DBBD0 40%,rgba(157,187,208,.55) 72%,rgba(157,187,208,0) 100%)}
.vg-water::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0))}
.vg-glint{position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));animation:vgGlint 7s ease-in-out infinite}
@keyframes vgGlint{50%{opacity:.3;transform:translateX(14px)}}
.vg-lane{position:absolute;left:0;top:0;width:100%;height:80px;overflow:visible}
.vg-lane path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vg-lane .l{stroke:rgba(31,47,58,.35);stroke-width:2;stroke-dasharray:2 7}
.vg-lane .t{stroke:var(--hb-green);stroke-width:3}
.vg-stop{position:absolute;top:40px;width:0;height:0;z-index:2}
.vg-stop i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #9FB3C1;box-sizing:border-box;transition:all .4s}
.vg-stop.reached i{background:var(--hb-green);border-color:#fff;box-shadow:0 0 0 4px rgba(35,122,75,.2)}
.vg-end{position:absolute;top:66px;font:500 .7rem 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.vg-ship{position:absolute;left:0;top:0;width:96px;height:32px;z-index:3;will-change:transform}
.vg-foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:6px;padding-bottom:26px}
.vg-foot p{margin:0;font-size:.8rem;color:rgba(255,255,255,.95)}
.vg-pause{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
@media (max-width:820px){
  .hb-voyage{padding-top:80px}
  .vg-sp{display:flex;flex-direction:column-reverse}
  .vg-cards{grid-template-columns:1fr;gap:10px}.vg-card{min-height:0;opacity:1}.vg-card::after{display:none}
  .vg-card ul{display:none}.vg-card.active ul{display:flex}
  .vg-sea{margin:0 0 18px;height:120px}.vg-water{bottom:0}.vg-stop,.vg-end{display:none}
  .vg-day b{font-size:2.2rem}.vg-day{text-align:left}
  .vg-foot{padding-top:16px}.vg-foot p{color:#5F6B76}.vg-pause{border-color:rgba(31,47,58,.3);color:var(--hb-navy);background:#fff}
}
@media (prefers-reduced-motion:reduce){.vg-glint{animation:none}}
/* While the sky is still dark (dawn not yet reached) the heading reads light; it turns dark as the sun comes up. */
.hb-voyage{overflow:visible;overflow-x:clip}
.hb-voyage .vg-top :is(.hb-h2,p,.vg-day,.vg-day small){transition:color .6s}
body.st-dark .hb-voyage .vg-top .hb-h2{color:#fff}
body.st-dark .hb-voyage .vg-top :is(p,.vg-day,.vg-day small){color:rgba(232,238,244,.8)}
body.st-dark .hb-voyage .vg-top .hb-label{color:#e2b585}
/* Day yard (13-10): "own work" is a calm solid slate block, not a see-through outline */
.hb-blk.free .hb-crate{background:#dfe7ee!important;box-shadow:inset 0 0 0 1px rgba(95,136,168,.28),0 10px 18px -12px rgba(0,0,0,.25)!important;color:var(--hb-accent-d)}
.hb-blk.free .hb-tm{color:#5d6b76}

/* ---- Waar de dag verdwijnt, variant C (Bogdan 22-10): the sun over one working
   day stops where the manual work is done. Widths are shares of 600 minutes. */
.hb-tl{--man:65%;--gain:0%;--own:35%;position:relative;margin-top:24px;padding-top:150px}
.hb-day.is-alex .hb-tl{--man:5%;--gain:60%}
.hb-tl-arc{position:absolute;left:0;right:0;top:20px;height:140px;width:100%;overflow:visible}
.hb-tl-arc path{fill:none;stroke:var(--hb-brown);stroke-opacity:.4;stroke-width:2;stroke-dasharray:2 8;vector-effect:non-scaling-stroke}
.hb-tl-sun{position:absolute;left:65%;top:0;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;
  background:radial-gradient(circle,#f3b77c 0 29%,rgba(246,201,154,.45) 31% 50%,rgba(246,201,154,0) 51%);pointer-events:none}
.hb-tl-tags{position:relative;display:flex;height:26px}
.hb-tl-tag{display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-family:'DM Mono',monospace;font-size:.74rem;white-space:nowrap;overflow:hidden;transition:flex-basis 1.1s cubic-bezier(.6,0,.2,1),opacity .5s}
.hb-tl-tag.man{flex:0 0 var(--man);color:var(--hb-brown)}
.hb-tl-tag.gain{flex:0 0 var(--gain);color:var(--hb-green);opacity:0}
.hb-tl-tag.own{flex:0 0 var(--own);color:var(--hb-muted)}
.hb-day.is-alex .hb-tl-tag.man{display:flex!important;opacity:0}
.hb-day.is-alex .hb-tl-tag.gain{opacity:1;transition-delay:.6s,.6s}
.hb-tl-bar{display:flex;height:24px;border-radius:12px;overflow:hidden;background:#c9d8e4}
.hb-tl-bar i{display:block;height:100%;transition:flex-basis 1.1s cubic-bezier(.6,0,.2,1)}
.hb-tl-bar .man{flex:0 0 var(--man);background:var(--hb-brown);border-radius:12px 0 0 12px}
.hb-tl-bar .gain{flex:0 0 var(--gain);background:var(--hb-green)}
.hb-tl-bar .own{flex:0 0 var(--own);background:#c9d8e4}
.hb-tl-hours{position:relative;height:28px;margin-top:8px}
.hb-tl-hours span{position:absolute;top:0;transform:translateX(-50%);font-family:'DM Mono',monospace;font-size:.72rem;color:var(--hb-muted)}
.hb-tl-hours span:first-child{transform:none}.hb-tl-hours span:last-child{transform:translateX(-100%)}
.hb-day .hb-note{margin-top:10px}
@media (max-width:760px){
  .hb-tl{padding-top:110px}
  .hb-tl-arc{height:100px}
  .hb-tl-sun{width:52px;height:52px;margin:-26px 0 0 -26px}
  .hb-tl-tag{font-size:.66rem}
  .hb-tl-hours span:nth-child(even){display:none}
}
@media (prefers-reduced-motion:reduce){.hb-tl-bar i,.hb-tl-tag{transition:none!important}}