/* Layout: one light, soft world. A tilted glass "shipment board" floats in the hero; below it, squircle cards on a pearl ground carry sea, air, land, MINA AI and the quote. */
:root{
  color-scheme:light;
  --bg:#eef3f1;        /* pale teal-white ground, from minaline.com */
  --card:#ffffff;
  --ink:#2e3f41;       /* Minaline ink */
  --muted:#7f9496;
  --hair:rgba(46,63,65,.11);
  --lime:#f2c230;      /* Minaline yellow: done, live, go */
  --olive:#4a6c70;      /* Minaline teal */
  --rose:#3a5559;       /* deep teal */
  --sky:#8fb4b6;        /* light teal */
  --teal:#4a6c70;      /* Minaline mark */
  --sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --r:34px;
  --gut:max(20px, env(safe-area-inset-left, 0px));
  --gutr:max(20px, env(safe-area-inset-right, 0px));
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:300;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
h1 i,h2 i{font-weight:300;color:var(--muted)}
.w{max-width:1240px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}
.cap{font-size:13px;color:var(--muted);letter-spacing:.01em}
.num{font-weight:300;letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums}

/* ambient colour, drifting slowly behind everything */
.amb{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.amb b{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 26s ease-in-out infinite alternate}
.amb b:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-10vw;background:#d3e6e6}
.amb b:nth-child(2){width:40vw;height:40vw;right:-10vw;top:18vh;background:#f8ecc2;animation-duration:32s;animation-delay:-8s}
.amb b:nth-child(3){width:38vw;height:38vw;left:28vw;bottom:-20vw;background:#dceaea;animation-duration:38s;animation-delay:-14s}
@keyframes drift{to{transform:translate3d(6vw,5vh,0) scale(1.15)}}

/* pills and buttons */
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.55);font-size:14px;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.pill.on,.pill.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
button.pill:hover,a.pill:hover{border-color:var(--ink)}
.pill sup{font-size:10px;line-height:1;background:var(--ink);color:#fff;border-radius:999px;padding:3px 6px;top:0}
.pill.on sup{background:#fff;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:14px;padding:8px 8px 8px 24px;border-radius:999px;background:var(--ink);color:#fff;font-size:16px;border:0;transition:transform .3s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:rgba(255,255,255,.6);color:var(--ink);border:1px solid var(--hair);padding:8px 24px;min-height:52px}
.go{width:36px;height:36px;border-radius:50%;background:var(--lime);display:grid;place-items:center;flex:none;transition:transform .3s}
.go svg{width:14px;height:14px;stroke:#2e3f41;fill:none;stroke-width:1.8}
.btn:hover .go,.tile:hover .go{transform:rotate(45deg)}
.go.blk{background:var(--ink)}.go.blk svg{stroke:#fff}
.go.big{width:54px;height:54px}.go.big svg{width:18px;height:18px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(242,194,48,.4);animation:blink 1.8s infinite}
@keyframes blink{50%{box-shadow:0 0 0 7px rgba(242,194,48,0)}}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-block:14px}
.nav .w{display:flex;align-items:center;gap:16px}
.bar{display:flex;align-items:center;gap:18px;width:100%;padding:8px 8px 8px 14px;border-radius:999px;background:rgba(255,255,255,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 30px -18px rgba(30,55,60,.35)}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;letter-spacing:.14em;font-size:15px}
.tabs{display:flex;gap:6px;margin:0 auto}
.tabs .pill{background:transparent;border-color:transparent;color:#5f7678}
.tabs .pill.on{background:var(--ink);color:#fff}
.bar .btn{font-size:15px;padding:6px 6px 6px 18px;margin-left:auto}
.bar .go{width:32px;height:32px}
@media(max-width:900px){.tabs{display:none}}

/* hero */
.hero .w{display:grid;grid-template-columns:5fr 7fr;gap:20px;align-items:center;padding-block:clamp(24px,5vw,70px) clamp(40px,6vw,90px)}
.copy{display:grid;gap:26px;justify-items:start;min-width:0}
.hero h1{font-size:clamp(46px,5.4vw,88px)}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 span:nth-child(1){animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1 span:nth-child(2){animation:up .9s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes up{from{opacity:0;transform:translateY(30px)}}
.lede{max-width:34ch;font-size:clamp(17px,1.4vw,20px);color:#4d6164;font-weight:300}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.facts{display:flex;flex-wrap:wrap;gap:28px;padding-top:8px}
.facts b{display:block;font-size:34px}
.stage{position:relative;min-width:0;perspective:1700px;perspective-origin:40% 40%}
.fit{position:relative;width:760px;height:500px;transform-origin:0 0}
@media(max-width:900px){.hero .w{grid-template-columns:1fr}.stage{order:-1}}

/* the board: a screen of Minaline's world, tilted in space */
.board{position:absolute;inset:0;border-radius:30px;border:10px solid #2e3f41;background:linear-gradient(120deg,#fcfdfc 0%,#f1f6f5 55%,#dfecec 100%);box-shadow:0 70px 110px -40px rgba(30,55,60,.45),0 30px 50px -30px rgba(30,55,60,.3);transform-style:preserve-3d;transform:rotateX(var(--rx,9deg)) rotateY(var(--ry,-20deg)) rotateZ(var(--rz,2deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);animation:bob 7s ease-in-out infinite}
@keyframes bob{50%{translate:0 -12px}}
.board>*{position:absolute}
.b-top{left:22px;right:22px;top:18px;display:flex;align-items:center;gap:8px}
.b-top .pill{font-size:11px;padding:6px 11px}
.b-rail{left:22px;top:76px;display:grid;gap:9px}
.b-rail i{width:20px;height:20px;border-radius:50%;border:1px solid var(--hair);background:rgba(255,255,255,.7)}
.b-rail i:first-child{background:var(--ink)}
.b-hey{left:64px;top:70px;font-size:23px;font-weight:300;letter-spacing:-.02em;line-height:1.15}
.b-hey i{color:var(--muted)}
.b-lane{left:64px;top:140px;display:flex;align-items:flex-end;gap:10px}
.b-lane .num{font-size:60px}
.b-lane small{font-size:11px;color:var(--muted);line-height:1.35;padding-bottom:6px}
.b-lane small b{display:block;color:var(--ink);font-weight:500}
.strip{left:64px;top:214px;width:300px;display:grid;grid-template-columns:1fr 1.2fr 1.5fr;gap:6px}
.strip span{height:26px;border-radius:9px;background:#dceaea}
.strip span:nth-child(2){background:#f8e6a6}.strip span:nth-child(3){background:#bcd6d7}
.strip em{position:absolute;top:-9px;left:var(--m,22%);width:1.5px;height:44px;background:var(--ink);transition:left .9s cubic-bezier(.5,0,.2,1)}
.strip em::before{content:"";position:absolute;left:-4px;top:-5px;border:4.5px solid transparent;border-top-color:var(--ink)}
.b-tabs{left:64px;top:268px;display:flex;gap:18px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--hair);width:300px;padding-bottom:8px}
.b-tabs b{color:var(--ink);font-weight:500}
.mini{border-radius:26px;color:#fff;padding:14px;overflow:hidden}
.mini.a{left:64px;top:306px;width:146px;height:150px}
.mini.b{left:220px;top:306px;width:146px;height:150px}
.mini .go{position:absolute;right:12px;top:12px;width:28px;height:28px}
.mini .go svg{width:11px;height:11px}
.mini p{font-size:11px;line-height:1.25;max-width:9ch}
.mini .cap{color:rgba(255,255,255,.7);font-size:9.5px;margin-top:18px;display:block}
.mini .num{font-size:27px;display:block;margin-top:2px}
.wc{background:#fff;border-radius:24px;box-shadow:0 14px 30px -20px rgba(30,55,60,.4);padding:14px}
.wc.q{left:384px;top:76px;width:150px;height:132px}
.wc.r{left:384px;top:220px;width:150px;height:236px}
.wc .ring{width:26px;height:26px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center}
.wc .ring::after{content:"";width:8px;height:8px;border-radius:2px;border:1.4px solid var(--ink)}
.wc h4{margin:12px 0 0;font-size:12px;font-weight:400}
.wc .num{font-size:30px;margin-top:10px;display:block}
.wc .num small{font-size:11px;color:var(--muted);letter-spacing:0}
.dots{position:absolute;right:14px;bottom:16px;display:grid;grid-template-columns:repeat(5,5px);gap:5px}
.dots i{width:5px;height:5px;border-radius:50%;border:1px solid #c3d0d1}
.dots i.f{background:var(--ink);border-color:var(--ink)}
.wc.r svg{position:absolute;left:10px;right:10px;bottom:14px;width:130px;height:130px;overflow:visible}
.wc.r path{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 5s ease-in-out infinite}
@keyframes draw{45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-420}}
.glass{right:-54px;top:38px;width:236px;height:410px;border-radius:30px;padding:18px;color:#fff;overflow:hidden;transform:translateZ(80px);background:linear-gradient(165deg,rgba(46,63,65,.92) 0%,rgba(74,108,112,.9) 45%,rgba(143,180,182,.92) 100%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.35);box-shadow:0 40px 70px -30px rgba(30,55,60,.6)}
.glass header{display:flex;align-items:center;gap:9px;font-size:13px}
.glass header span{width:24px;height:24px;border-radius:7px;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;font-size:10px}
.glass .cap{color:rgba(255,255,255,.7);display:block;margin-top:16px;font-size:10px}
.glass .num{font-size:38px;display:block}
.glass .num small{font-size:11px;letter-spacing:0;opacity:.8}
.cells{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px}
.cell{border-radius:13px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);padding:8px 4px 9px;display:grid;justify-items:center;gap:7px;font-size:9.5px;text-align:center;line-height:1.1}
.ck{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;transition:background .35s,transform .45s cubic-bezier(.3,1.7,.5,1)}
.ck::after{content:"";width:7px;height:3.5px;border-left:1.6px solid transparent;border-bottom:1.6px solid transparent;transform:rotate(-45deg) translate(1px,-1px);transition:border-color .3s}
.done .ck{background:var(--lime);transform:scale(1.12)}
.done .ck::after{border-color:#111}
.glass .pay{position:absolute;left:14px;right:14px;bottom:14px;background:#fff;color:var(--ink);border-radius:999px;padding:10px 14px;font-size:12px;display:flex;justify-content:space-between;align-items:center}

/* gradient surfaces with grain */
.g{isolation:isolate}
.g:not(.mini):not(.glass){position:relative}
.g::after{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:overlay;opacity:.45;pointer-events:none;border-radius:inherit;z-index:-1}
.g-sea{background:radial-gradient(120% 90% at 0% 0%,#3a5559 0%,rgba(58,85,89,0) 60%),linear-gradient(165deg,#4a6c70,#648d91 60%,#8fb4b6)}
.g-land{background:radial-gradient(120% 90% at 0% 0%,#e3ae17 0%,rgba(227,174,23,0) 60%),linear-gradient(165deg,#f2c230,#f5cf58 60%,#f9e29a)}
.g-air{background:radial-gradient(120% 90% at 0% 0%,#4f7377 0%,rgba(79,115,119,0) 60%),linear-gradient(165deg,#648d91,#8fb4b6 60%,#b4d0d1)}

/* lanes ticker */
.tick{overflow:hidden;padding-block:6px 10px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tick div{display:flex;gap:10px;width:max-content;animation:tk 44s linear infinite}
@keyframes tk{to{transform:translateX(-50%)}}

/* sections */
section{padding-block:clamp(54px,8vw,110px)}
.head{display:grid;gap:16px;justify-items:start;margin-bottom:clamp(26px,4vw,48px)}
.head h2{font-size:clamp(38px,5vw,76px)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{position:relative;border-radius:var(--r);padding:26px;min-height:440px;color:#fff;display:flex;flex-direction:column;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;box-shadow:0 30px 50px -36px rgba(30,55,60,.6)}
.tile:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 50px 70px -40px rgba(30,55,60,.7)}
.tile header{display:flex;align-items:flex-start;gap:14px}
.tile header .icon{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;flex:none}
.tile header .icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.4}
.tile h3{font-size:26px;font-weight:400;letter-spacing:-.02em;line-height:1.05}
.tile header .go{margin-left:auto}
.tile .cap{color:rgba(255,255,255,.75);margin-top:auto}
.tile .num{font-size:clamp(54px,6vw,84px)}
.tile .num small{font-size:16px;letter-spacing:0;opacity:.85;margin-left:6px}
.tile .lane{font-size:15px;margin-top:6px}
.tile svg.viz{width:100%;height:74px;margin-top:22px;overflow:visible}
.tile svg.viz path{fill:none;stroke:rgba(255,255,255,.65);stroke-width:1.2}
.tile svg.viz circle{fill:var(--lime)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.white{position:relative;background:var(--card);border-radius:var(--r);padding:26px;box-shadow:0 30px 50px -40px rgba(30,55,60,.45);min-width:0}
.white .ring{width:46px;height:46px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center}
.white .ring svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.4}
.white h3{font-size:22px;font-weight:400;letter-spacing:-.02em;margin-top:18px}
.white p{color:var(--muted);font-size:15px;margin-top:6px;max-width:34ch}
.white .go{position:absolute;right:22px;top:22px}
.white .dots{position:static;width:max-content;margin-top:22px;grid-template-columns:repeat(7,6px);gap:7px}
.white .dots i{width:6px;height:6px}
@media(max-width:900px){.tiles,.two{grid-template-columns:1fr}.tile{min-height:360px}}

/* transit scale */
.scale{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px);align-items:center}
.scale .num{font-size:clamp(64px,8vw,120px)}
.scale .num small{font-size:18px;letter-spacing:0;color:var(--muted);margin-left:8px}
.bars{position:relative;display:grid;grid-template-columns:1fr 1.25fr 1.6fr;gap:8px;min-width:0}
.bars button{height:64px;border-radius:18px;border:0;background:#dceaea;text-align:left;padding:0 16px;font-size:14px;transition:transform .3s;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars button:nth-child(2){background:#f8e6a6}.bars button:nth-child(3){background:#bcd6d7}
.bars button:hover{transform:translateY(-3px)}
.bars em{position:absolute;top:-14px;left:var(--m,22%);width:1.5px;height:92px;background:var(--ink);transition:left .9s cubic-bezier(.5,0,.2,1);pointer-events:none}
.bars em::before{content:"";position:absolute;left:-6px;top:-8px;border:7px solid transparent;border-top-color:var(--ink)}
@media(max-width:720px){.scale{grid-template-columns:1fr}}

/* MINA AI */
.ai .w{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.ai h2{font-size:clamp(38px,5vw,76px)}
.ai p{color:#4d6164;font-weight:300;max-width:44ch;margin-top:20px;font-size:18px}
.six{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
.six div{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);border-radius:22px;padding:16px 18px;font-size:15px}
.six small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.panel{border-radius:40px;padding:28px;color:#fff;background:linear-gradient(165deg,#34494c 0%,#4a6c70 45%,#8fb4b6 100%);box-shadow:0 50px 80px -40px rgba(30,55,60,.7);min-width:0;transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);transition:transform .6s}
.panel:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
.panel header{display:flex;justify-content:space-between;gap:12px;font-size:14px;flex-wrap:wrap}
.panel header span:last-child{opacity:.7}
.panel .num{font-size:clamp(54px,6vw,84px);display:block;margin-top:22px}
.panel .num small{font-size:15px;letter-spacing:0;opacity:.8;margin-left:8px}
.panel .cells{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px}
.panel .cell{border-radius:18px;padding:12px 6px 14px;font-size:12px;gap:10px}
.panel .ck{width:30px;height:30px}
.panel .ck::after{width:9px;height:4.5px}
@media(max-width:900px){.ai .w{grid-template-columns:1fr}.panel{transform:none}.panel .cells{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.six{grid-template-columns:1fr}}

/* customers */
.who .white{padding:clamp(20px,3vw,34px)}
.who .tabs2{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.rowl{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 0;border-top:1px solid var(--hair);font-size:clamp(18px,2vw,24px);font-weight:300;letter-spacing:-.02em;animation:up .5s both}
.rowl:first-child{border-top:0}
.rowl .pill{font-size:13px;letter-spacing:0;background:var(--bg);font-weight:400}

/* quote */
.ask{border-radius:44px;padding:clamp(26px,5vw,64px);color:#fff;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,70px);align-items:end;box-shadow:0 60px 90px -50px rgba(30,55,60,.7)}
.ask h2{font-size:clamp(40px,5.6vw,88px)}
.ask h2 i{color:rgba(255,255,255,.62)}
.ask p{margin-top:18px;font-weight:300;max-width:36ch;opacity:.9}
form{display:grid;gap:10px;min-width:0}
form .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{display:grid;gap:6px;font-size:13px;color:rgba(255,255,255,.8)}
input,select{width:100%;min-width:0;border:0;border-radius:18px;background:rgba(255,255,255,.92);color:var(--ink);font:400 16px var(--sans);padding:15px 16px}
form .btn{justify-content:space-between;margin-top:6px;padding-left:22px}
#sent{background:rgba(255,255,255,.92);color:var(--ink);border-radius:18px;padding:14px 16px;font-size:15px}
#sent b{font-weight:500;user-select:all}
@media(max-width:900px){.ask{grid-template-columns:1fr}}
footer .w{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;padding-block:10px 40px;color:var(--muted);font-size:14px}
footer span{user-select:all}

/* scroll reveal: softened at rest, never hidden */
.js .rv{opacity:.25;transform:translateY(34px) scale(.98);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .tiles .rv:nth-child(2),.js .two .rv:nth-child(2){transition-delay:.1s}.js .tiles .rv:nth-child(3){transition-delay:.2s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .amb b,.board,.tick div,.dot,.hero h1 span,.wc.r path,.rowl{animation:none}
  .wc.r path{stroke-dashoffset:0}
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ---------- site-wide additions: menu, page headers, inner-page components ---------- */
.menu{display:none}
.bar .btn .lbl{display:inline}
@media(max-width:1080px){
  .bar{flex-wrap:wrap;border-radius:30px}
  .tabs{display:none;order:5;width:100%;flex-direction:column;margin:6px 0 4px;gap:2px}
  .tabs.open{display:flex}
  .tabs .pill{justify-content:flex-start;padding:12px 16px;font-size:16px}
  .menu{display:inline-flex}
}
@media(max-width:430px){.bar .btn{padding:6px}.bar .btn .lbl{display:none}}

.ph .w{display:grid;gap:22px;justify-items:start;padding-block:clamp(30px,6vw,84px) clamp(18px,3vw,36px)}
.ph h1{font-size:clamp(40px,6vw,92px);max-width:17ch;animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.ph p{max-width:60ch;font-weight:300;font-size:clamp(17px,1.5vw,21px);color:#4d6164;animation:up .9s .12s cubic-bezier(.2,.8,.2,1) both}
section.tight{padding-block:clamp(22px,4vw,48px)}
.lead{font-weight:300;font-size:clamp(18px,1.6vw,22px);color:#3a5559;max-width:62ch}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px)}
.stack{display:grid;gap:18px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}

/* services accordion */
.svc{border-radius:var(--r);margin-bottom:14px;overflow:hidden;box-shadow:0 30px 50px -40px rgba(30,55,60,.55)}
.svc.g{color:#fff}
.svc.wh{background:var(--card)}
.svc summary{list-style:none;display:flex;align-items:center;gap:18px;padding:26px;cursor:pointer}
.svc summary::-webkit-details-marker{display:none}
.svc .no{font-size:13px;opacity:.7;width:54px;flex:none;font-variant-numeric:tabular-nums}
.svc h2{font-size:clamp(26px,3.6vw,48px)}
.svc summary .go{margin-left:auto;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.svc[open] summary .go{transform:rotate(135deg)}
.svc .in{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:0 26px 32px 98px;animation:up .5s both}
.svc .in p{font-weight:300;font-size:18px;max-width:46ch}
.svc .in h3{font-size:13px;font-weight:400;opacity:.7;margin:0 0 12px}
.inc{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.inc li{display:flex;gap:12px;align-items:center;font-size:15px}
.inc li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.500 11.300l3 3 6-6.300' fill='none' stroke='%232e3f41' stroke-width='1.700'/%3E%3C/svg%3E") center/100% no-repeat}
@media(max-width:800px){.svc .in{grid-template-columns:1fr;padding-left:26px}.svc .no{width:auto}}

/* about */
.vm{border-radius:var(--r);padding:clamp(24px,3vw,40px);min-height:300px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 50px -40px rgba(30,55,60,.55)}
.vm.g{color:#fff}
.vm h2{font-size:clamp(30px,3.6vw,48px)}
.vm p{font-weight:300;font-size:18px;margin-top:auto;max-width:48ch}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vals .white h3{margin-top:0}
@media(max-width:900px){.vals{grid-template-columns:1fr}}
.people{border-radius:44px;padding:clamp(26px,5vw,64px);color:#fff;box-shadow:0 60px 90px -50px rgba(30,55,60,.7)}
.people h2{font-size:clamp(36px,5vw,76px);max-width:15ch}
.people h2 i{color:rgba(255,255,255,.62)}
.people .cols{margin-top:30px}
.people p{font-weight:300;font-size:18px}

/* closing band */
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.band h2{font-size:clamp(30px,4vw,56px)}

/* track */
.trk{display:flex;gap:8px;background:var(--card);border-radius:999px;padding:8px;max-width:620px;width:100%;box-shadow:0 30px 50px -36px rgba(30,55,60,.5)}
.trk input{flex:1;background:transparent;padding:12px 18px;border-radius:999px;font-size:17px}
.trk .btn{flex:none}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.legend .pill i{width:10px;height:10px;border-radius:50%;background:var(--lime)}
.legend .pill:nth-child(2) i{background:#fff;box-shadow:0 0 0 1.5px var(--ink)}
.legend .pill:nth-child(3) i{background:#c3d0d1}
.panel.flat,.panel.flat:hover{transform:none}
.panel .cells.nine{grid-template-columns:repeat(3,1fr)}
.cell.next{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.7)}
.cell.next .ck{background:#fff;animation:blink 1.8s infinite}
#trk-msg{margin-top:16px}

/* insights */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.post{border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px;min-height:280px;box-shadow:0 30px 50px -40px rgba(30,55,60,.5);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.post:hover{transform:translateY(-6px)}
.post .meta{display:flex;justify-content:space-between;align-items:center;gap:10px}
.post h2{font-size:clamp(24px,2.4vw,32px);line-height:1.08;margin-top:auto}
.post p{color:var(--muted);font-size:15px}
.post:not(.g){background:var(--card)}
.post.g{color:#fff;grid-column:span 2}
.post.g:last-child{grid-column:1/-1}
.post.g h2{font-size:clamp(30px,4vw,56px);max-width:16ch}
.post.g p,.post.g .cap{color:rgba(255,255,255,.8)}
.post.g .pill{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);color:#fff}
@media(max-width:900px){.posts{grid-template-columns:1fr}.post.g{grid-column:auto}}

/* careers */
.job{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:22px 0;border-top:1px solid var(--hair)}
.job:first-of-type{border-top:0}
.job h2{font-size:clamp(22px,2.4vw,30px);flex:1 1 320px;line-height:1.1}
.job .tags{display:flex;flex-wrap:wrap;gap:6px}
.job .tags .pill{background:var(--bg);font-size:13px}

/* contact */
.desks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.desks .white{padding:22px}
.desks b{display:block;font-weight:400;font-size:18px;margin-top:10px;user-select:all;overflow-wrap:anywhere}
.desks small{display:block;color:var(--muted);font-size:14px;margin-top:4px}
@media(max-width:1000px){.desks{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.desks{grid-template-columns:1fr}}
.hours{width:100%;border-collapse:collapse;margin-top:12px;font-size:16px}
.hours td{padding:10px 0;border-top:1px solid var(--hair)}
.hours td:last-child{text-align:right;color:var(--muted)}
textarea{width:100%;min-width:0;border:0;border-radius:18px;background:rgba(255,255,255,.92);color:var(--ink);font:400 16px var(--sans);padding:15px 16px;min-height:120px;resize:vertical}
.note{background:rgba(255,255,255,.92);color:var(--ink);border-radius:18px;padding:14px 16px;font-size:15px}
.note b{font-weight:500;user-select:all}

/* footer */
footer{margin-top:clamp(30px,5vw,70px)}
footer .w.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;align-items:start;padding-block:36px 26px;border-top:1px solid var(--hair);color:var(--ink);font-size:15px}
.foot h4{margin:0 0 12px;font-size:13px;font-weight:400;color:var(--muted)}
.foot a,.foot span{display:block;padding:3px 0}
.foot a:hover{text-decoration:underline}
.foot p{color:var(--muted);max-width:30ch;margin-top:12px;font-size:14px}
@media(max-width:800px){footer .w.foot{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.ph h1,.ph p,.svc .in,.cell.next .ck{animation:none}}


.svc,section[id]{scroll-margin-top:96px}

/* ---------- yellow surfaces carry ink text, not white ---------- */
.g.g-land,.g.g-land h2,.g.g-land h3{color:var(--ink)}
.g.g-land .cap,.g.g-land p,.g.g-land .no,.g.g-land small{color:rgba(46,63,65,.78)}
.g.g-land h2 i{color:rgba(46,63,65,.55)}
.g.g-land .icon{border-color:rgba(46,63,65,.4)}
.g.g-land .icon svg{stroke:var(--ink)}
.g.g-land svg.viz path{stroke:rgba(46,63,65,.55)}
.g.g-land svg.viz circle{fill:var(--ink)}
.g.g-land .pill{background:rgba(255,255,255,.45)!important;border-color:rgba(46,63,65,.14)!important;color:var(--ink)!important}
.g.g-land .inc li::before{background-color:#fff}
.g.g-land::after{opacity:.3}

/* ---------- hero depth: the board's layers separate as the page scrolls (--k runs 0 to 1) ---------- */
.board{--k:0}
.glass{transform:translate3d(calc(var(--k)*26px),calc(var(--k)*-14px),calc(80px + var(--k)*150px))}
.wc{transform:translateZ(calc(var(--k)*80px))}
.mini.a{transform:translateZ(calc(var(--k)*46px))}
.mini.b{transform:translateZ(calc(var(--k)*70px))}
.b-hey,.b-lane,.strip{transform:translateZ(calc(var(--k)*22px))}

/* ---------- spot rate ---------- */
.sp .cap{display:flex;align-items:center;gap:8px}
.sp-lane{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:14px}
.sp-lane b{font-weight:500;transition:opacity .35s}
.sp-lane i{flex:1;height:1px;background:rgba(46,63,65,.25);position:relative}
.sp-lane i::after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--lime);animation:sail 3.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes sail{to{left:calc(100% - 7px)}}
.sp-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;color:var(--muted);padding:10px 0 0;margin-top:10px;border-top:1px solid var(--hair)}
.sp-row b{font-size:19px;font-weight:300;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;transition:opacity .35s}
.sp small{display:block;font-size:9px;color:var(--muted);margin-top:12px;line-height:1.3}
.sp.swap b{opacity:0}

/* ---------- photo feature ---------- */
.reel{position:relative;border-radius:44px;overflow:hidden;aspect-ratio:16/8;max-width:100%;color:#fff;box-shadow:0 60px 90px -50px rgba(30,55,60,.7);isolation:isolate}
.reel img{position:absolute;inset:-8% 0;width:100%;height:116%;max-width:none;object-fit:cover;object-position:78% 50%;z-index:-2;transform:translate3d(0,var(--py,0px),0) scale(1.04);animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{to{scale:1.12}}
.reel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,rgba(46,63,65,.86) 0%,rgba(58,85,89,.55) 38%,rgba(74,108,112,0) 70%)}
.reel-txt{position:absolute;left:clamp(22px,4vw,56px);top:clamp(22px,4vw,56px);display:grid;gap:18px;justify-items:start}
.reel-txt .pill{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff}
.reel-txt h2{font-size:clamp(34px,5vw,76px)}
.reel-txt h2 i{color:rgba(255,255,255,.66)}
.rate{position:absolute;left:clamp(22px,4vw,56px);bottom:clamp(22px,4vw,56px);width:min(360px,calc(100% - 44px));padding:22px;border-radius:28px;background:rgba(255,255,255,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.9);color:var(--ink);box-shadow:0 30px 50px -30px rgba(30,55,60,.6)}
.rate .sp-lane{font-size:22px;margin-top:12px}
.rate .sp-lane b{font-weight:400;letter-spacing:-.02em}
.rate .sp-row{font-size:14px;padding-top:12px;margin-top:12px}
.rate .sp-row b{font-size:32px}
.rate small{font-size:12px}
@media(max-width:900px){.reel{aspect-ratio:4/5;border-radius:34px}.reel img{object-position:70% 50%}.reel::before{background:linear-gradient(180deg,rgba(46,63,65,.8) 0%,rgba(58,85,89,.3) 45%,rgba(74,108,112,0) 70%)}}

/* sea freight tile carries the vessel photo under its teal */
.tile.g-sea{background:radial-gradient(120% 90% at 0% 0%,#3a5559 0%,rgba(58,85,89,0) 60%),linear-gradient(165deg,rgba(74,108,112,.94),rgba(100,141,145,.8) 60%,rgba(143,180,182,.62)),url(img/vessel-sm.jpg) 72% 60%/cover}
@media(prefers-reduced-motion:reduce){.reel img,.sp-lane i::after{animation:none}.reel img{transform:scale(1.04)}}
.reel{aspect-ratio:16/9}
.reel-txt h2{font-size:clamp(34px,4.6vw,68px)}
.wc .sp-row span{white-space:nowrap;font-size:10px}
.wc .sp-row b{font-size:16px}
@media(max-width:900px){.reel{aspect-ratio:4/5}}
@media(max-width:900px){
  .reel{aspect-ratio:4/7}
  .rate{left:14px;right:14px;bottom:14px;width:auto;padding:16px 18px;border-radius:24px}
  .rate .sp-lane{font-size:18px;margin-top:8px}
  .rate .sp-row{padding-top:8px;margin-top:8px}
  .rate .sp-row b{font-size:24px}
  .rate small{margin-top:8px}
}

/* ---------- live 3D background, with the cards turned to glass so it shows through ---------- */
.scene{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.scene.on{opacity:1}
.white,.svc.wh,.post:not(.g),.trk{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25);border:1px solid rgba(255,255,255,.85)}
.six div{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.pill{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tile,.vm.g,.people,.ask,.svc.g,.post.g{border:1px solid rgba(255,255,255,.28)}
@media(max-width:900px){.scene.on{opacity:.7}}

/* ---------- photographic scenes: glass floats over real-looking imagery ---------- */
/* hero: the vessel fills the top of the page, running under the menu */
.hero{position:relative;isolation:isolate;margin-top:-84px;padding-top:84px}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(img/bg-sea.jpg) 100% 100%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(238,243,241,.95) 0%,rgba(238,243,241,.82) 26%,rgba(238,243,241,.2) 52%,rgba(238,243,241,0) 70%),
  linear-gradient(180deg,rgba(238,243,241,.55) 0%,rgba(238,243,241,0) 16%,rgba(238,243,241,0) 80%,var(--bg) 100%)}
.hero .w{min-height:min(860px,92svh)}
/* the screen itself becomes frosted glass, so the ship reads through it */
.board{background:transparent;box-shadow:0 70px 110px -40px rgba(20,45,50,.55),0 30px 50px -30px rgba(20,45,50,.35)}
.board::before{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(120deg,rgba(252,253,252,.66) 0%,rgba(241,246,245,.5) 55%,rgba(223,236,236,.36) 100%);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.wc{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media(max-width:900px){
  .hero::before{background-position:62% 0;background-size:auto 62%}
  .hero::after{background:linear-gradient(180deg,rgba(238,243,241,.35) 0%,rgba(238,243,241,0) 14%,rgba(238,243,241,0) 34%,rgba(238,243,241,.9) 54%,var(--bg) 64%)}
}

/* service cards: the photo shows in the lower part of each card, under its colour */
.tile{min-height:520px}
.tile>.cap{margin-top:26px}
.tile svg.viz{margin-top:auto}
.tile.g-sea{background:linear-gradient(180deg,rgba(58,85,89,.97) 0%,rgba(74,108,112,.9) 46%,rgba(74,108,112,.05) 80%),url(img/bg-sea-sm.jpg) 64% 100%/auto 70% no-repeat,#4a6c70}
.tile.g-air{background:linear-gradient(180deg,rgba(79,115,119,.97) 0%,rgba(100,141,145,.9) 46%,rgba(120,160,164,.05) 80%),url(img/bg-air-sm.jpg) 22% 100%/auto 66% no-repeat,#648d91}
.tile.g-land{background:linear-gradient(180deg,rgba(242,194,48,.98) 0%,rgba(245,207,88,.92) 46%,rgba(247,216,120,.05) 80%),url(img/bg-road-sm.jpg) 30% 100%/auto 66% no-repeat,#f2c230}
.tile.g::after{opacity:.2}
.tile svg.viz path{stroke:rgba(255,255,255,.9);stroke-width:1.5}
.g.g-land svg.viz path{stroke:rgba(255,255,255,.95)}
.g.g-land svg.viz circle{fill:var(--lime)}

/* full-width photo bands: the cards inside are glass */
.band-photo{position:relative;isolation:isolate;padding-block:clamp(44px,8vw,120px);margin-top:16px}
.band-photo::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;background:var(--img) center/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.band-photo .two{margin-top:0}
.band-photo .white{background:rgba(255,255,255,.58);box-shadow:0 40px 60px -40px rgba(20,45,50,.6)}
section.band-photo{margin-top:0}
.band-photo .ask{background:linear-gradient(165deg,rgba(46,63,65,.8) 0%,rgba(74,108,112,.66) 55%,rgba(143,180,182,.42) 100%);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.35)}

.band-photo::before{background-image:none}
.band-air::before{background-image:url(img/bg-air.jpg)}
.band-road::before{background-image:url(img/bg-road.jpg);background-position:50% 60%}
.hero::after{background:
  linear-gradient(90deg,rgba(238,243,241,.96) 0%,rgba(238,243,241,.9) 30%,rgba(238,243,241,.3) 54%,rgba(238,243,241,0) 72%),
  linear-gradient(180deg,rgba(238,243,241,.55) 0%,rgba(238,243,241,0) 16%,rgba(238,243,241,0) 80%,var(--bg) 100%)}
@media(max-width:900px){.hero::after{background:linear-gradient(180deg,rgba(238,243,241,.35) 0%,rgba(238,243,241,0) 14%,rgba(238,243,241,0) 34%,rgba(238,243,241,.9) 54%,var(--bg) 64%)}}
@media(max-width:900px){.hero::after{background:linear-gradient(180deg,rgba(238,243,241,.35) 0%,rgba(238,243,241,0) 12%,rgba(238,243,241,0) 30%,rgba(238,243,241,.93) 47%,var(--bg) 60%)}}

/* ---------- the journey: the homepage is one shipment, and the world behind the glass changes as it travels ---------- */
.world{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.world i{position:absolute;inset:-5%;background:center/cover no-repeat;opacity:0;transform:scale(1.1);transition:opacity 1.5s ease,transform 9s cubic-bezier(.2,.6,.2,1)}
.world i.on{opacity:1;transform:scale(1)}
.world .w-sea{background-image:url(img/bg-sea.jpg);background-position:78% 60%}
.world .w-air{background-image:url(img/bg-air.jpg);background-position:30% 50%}
.world .w-road{background-image:url(img/bg-road.jpg);background-position:40% 60%}
.world .w-dock{background-image:url(img/bg-dock.jpg);background-position:50% 50%}
.world::after{content:"";position:absolute;inset:0;background:rgba(238,243,241,.14)}
.journey .amb{display:none}
.journey .hero::before{display:none}
.journey .band-photo::before{display:none}

/* text that used to sit on the bare page now sits on its own glass plate */
.journey .head,.journey .ai .w>div:first-child,.journey .reel-txt{background:rgba(240,245,243,.72);-webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);border:1px solid rgba(255,255,255,.8);border-radius:var(--r);padding:clamp(22px,3vw,36px);box-shadow:0 40px 60px -44px rgba(20,45,50,.6)}
.journey .head{width:fit-content;max-width:100%}
.journey .ai .w{align-items:stretch}
.journey .six div{background:rgba(255,255,255,.7)}
.journey .white,.journey .band-photo .white{background:rgba(245,248,247,.7)}
.journey .tick{padding-block:14px}
.journey .tick .pill:not(.dark){background:rgba(245,248,247,.78)}

/* the photo feature becomes a clear window onto the world, holding only its two glass pieces */
.journey .reel{background:none;box-shadow:none;color:var(--ink);overflow:visible;aspect-ratio:16/8}
.journey .reel img,.journey .reel::before{display:none}
.journey .reel-txt{left:0;top:0}
.journey .reel-txt .pill{background:rgba(255,255,255,.55);border-color:var(--hair);color:var(--ink)}
.journey .reel-txt h2 i{color:var(--muted)}
.journey .rate{left:auto;right:0;bottom:0}
@media(max-width:900px){.journey .reel{aspect-ratio:auto;display:grid;gap:14px;min-height:78svh;align-content:space-between}.journey .reel-txt,.journey .rate{position:static;width:auto}}

.journey footer{background:rgba(240,245,243,.82);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);border-top:1px solid rgba(255,255,255,.8)}
.journey footer .w.foot{border-top:0}
.journey section{padding-block:clamp(70px,12vw,170px)}
.journey section.tight{padding-block:clamp(60px,10vw,140px)}

/* journey tracker: where this shipment is, as you scroll */
.rail{position:fixed;right:max(18px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:4px;padding:14px 12px;border-radius:26px;background:rgba(240,245,243,.72);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,.85);box-shadow:0 30px 50px -30px rgba(20,45,50,.55)}
.rail small{font-size:11px;color:var(--muted);padding:0 6px 8px;border-bottom:1px solid var(--hair);margin-bottom:6px;white-space:nowrap}
.rail a{display:flex;align-items:center;gap:10px;padding:6px;border-radius:999px;font-size:13px;color:var(--muted);transition:color .3s,background .3s}
.rail a i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(46,63,65,.3);display:grid;place-items:center;font-style:normal;font-size:10px;flex:none;transition:background .4s,border-color .4s,transform .5s cubic-bezier(.3,1.7,.5,1)}
.rail a.done i{background:var(--ink);border-color:var(--ink);color:#fff}
.rail a.now{color:var(--ink);background:rgba(255,255,255,.7)}
.rail a.now i{background:var(--lime);border-color:var(--lime);color:var(--ink);transform:scale(1.15)}
.rail a b{font-weight:400;padding-right:8px}
@media(max-width:1180px){
  .rail{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));right:50%;transform:translateX(50%);grid-auto-flow:column;align-items:center;padding:6px 8px;gap:2px;border-radius:999px}
  .rail small{display:none}
  .rail a{padding:4px}
  .rail a b{display:none}
  .rail a.now b{display:inline}
  .journey footer{padding-bottom:64px}
}
#desk i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
#desk.open i{background:var(--lime);box-shadow:0 0 0 4px rgba(242,194,48,.4)}
.journey .hero .pill{background:rgba(245,248,247,.78)}
@media(prefers-reduced-motion:reduce){.world i{transition:opacity .01s;transform:none}}
/* tracker: dots only at the side on wide screens (labels on hover); a pill at the bottom on everything narrower */
@media(min-width:1400px){
  .rail small{display:none}
  .rail a b{display:none}
  .rail:hover a b{display:inline}
  .rail:hover small{display:block}
}
@media(max-width:1399px){
  .rail{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));right:50%;transform:translateX(50%);grid-auto-flow:column;align-items:center;padding:6px 8px;gap:2px;border-radius:999px}
  .rail small{display:none}
  .rail a{padding:4px}
  .rail a b{display:none}
  .rail a.now b{display:inline}
  .journey footer{padding-bottom:64px}
}
.rail a b{white-space:nowrap}

/* ---------- studio object hero: one sculptural object on the clean page, glass floating in front of it ---------- */
.hero{margin-top:0;padding-top:0}
.hero::before,.hero::after{display:none}
.hero .w{min-height:0;grid-template-columns:5fr 7fr;padding-block:clamp(24px,4vw,56px) clamp(30px,5vw,70px)}
.obj{position:relative;min-width:0}
.obj img{display:block;width:124%;max-width:none;height:auto;margin:0 -12%;mix-blend-mode:multiply;transform:translate3d(var(--ox,0px),var(--oy,0px),0);transition:transform .6s cubic-bezier(.2,.8,.2,1);animation:settle 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes settle{from{opacity:0;scale:.94}}
.float{position:absolute;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.obj .glass{right:-2%;top:-6%;width:236px;height:auto;padding-bottom:20px;transform-origin:100% 0;transform:translate3d(var(--gx,0px),var(--gy,0px),0) scale(.86);animation:bob 7s ease-in-out infinite}
.obj .f-sp{left:-4%;bottom:4%;width:200px;padding:16px;border-radius:24px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 50px -30px rgba(30,55,60,.55);transform:translate3d(var(--sx,0px),var(--sy,0px),0);animation:bob 8s ease-in-out -3s infinite}
.obj .f-cap{right:8%;bottom:-2%;background:rgba(255,255,255,.7);transform:translate3d(var(--sx,0px),0,0)}
.obj .f-cap i{color:var(--muted)}
@media(max-width:900px){
  .hero .w{grid-template-columns:1fr}
  .obj{order:-1;margin-bottom:10px}
  .obj img{width:112%;margin:0 -6%}
  .obj .glass{transform:translate3d(0,var(--gy,0px),0) scale(.6);right:-2%;top:-10%}
  .obj .f-sp{transform:translate3d(0,var(--sy,0px),0) scale(.72);transform-origin:0 100%;left:0;bottom:-6%}
  .obj .f-cap{display:none}
}
/* the scenic photo bands are gone: those sections return to the clean page */
.band-photo{padding-block:0}
.band-photo::before{display:none}
section.band-photo{padding-block:clamp(54px,8vw,110px)}
.band-photo .ask{background:radial-gradient(120% 90% at 0% 0%,#3a5559 0%,rgba(58,85,89,0) 60%),linear-gradient(165deg,#4a6c70,#648d91 60%,#8fb4b6);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.obj img,.obj .glass,.obj .f-sp{animation:none}}

/* let the object blend into the page itself */
.hero{isolation:auto}
.obj .glass{height:auto}
@media(max-width:900px){.obj .glass{display:none}.obj{margin-bottom:64px}.obj .f-sp{bottom:-20%}}

/* clean-floor object: no blend mode; its backdrop matches the page and its edges feather out */
.obj img{mix-blend-mode:normal;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 11%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 11%,#000 88%,transparent 100%);mask-composite:intersect}
.obj .f-cap{bottom:2%}

/* ---------- studio hero: a real container, photographed on a pale studio floor, fills the first screen ---------- */
.hero{position:relative;isolation:isolate;margin-top:-84px;padding-top:84px}
.hero::before{display:block;content:"";position:absolute;inset:0;z-index:-2;background:rgb(221,221,221) url(img/studio-hero.jpg?i=2611132138) calc(100% + var(--ox,0px)) 100%/cover no-repeat}
.hero::after{display:block;content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg) 0%,rgba(238,243,241,0) 15%,rgba(238,243,241,0) 84%,var(--bg) 100%)}
.hero .w{min-height:min(840px,92svh);grid-template-columns:5fr 7fr}
.obj{align-self:stretch;min-height:320px}
.obj .f-sp{left:auto;right:1%;bottom:9%;width:210px}
.hero .pill{background:rgba(255,255,255,.7)}
.hero .btn.ghost{background:rgba(255,255,255,.75)}
@media(max-width:1180px){
  .hero .w{grid-template-columns:1fr;min-height:0}
  .hero::before{background-image:url(img/studio-hero-sm.jpg?i=2611132138);background-size:auto min(62vw,520px);background-position:72% 84px}
  .hero::after{background:linear-gradient(180deg,rgba(238,243,241,0) 0,rgba(238,243,241,0) calc(min(62vw,520px) + 20px),var(--bg) calc(min(62vw,520px) + 90px))}
  .obj{order:-1;min-height:calc(min(62vw,520px) - 20px);margin-bottom:0}
  .obj .f-sp{right:0;bottom:-6%;transform:translate3d(0,var(--sy,0px),0) scale(.72);transform-origin:100% 100%}
}
/* desktop: the photograph sits low on the right, feathered into the page, clear of the headline */
@media(min-width:1181px){
  .hero::before{inset:auto 0 0 auto;width:min(1300px,82vw);aspect-ratio:16/9;background:url(img/studio-hero.jpg?i=2611132138) calc(50% + var(--ox,0px)) 50%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 7%,#000 89%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 7%,#000 89%,transparent 100%);mask-composite:intersect}
  .hero::after{display:none}
  .hero .w{align-items:start;padding-top:clamp(40px,7vh,90px)}
  .obj .f-sp{right:0;bottom:16%}
}
/* crane hero: the photograph fills the full height of the first screen on desktop, rising behind the menu */
@media(min-width:1181px){
  .hero::before{inset:0 0 0 auto;width:min(1500px,86vw);aspect-ratio:auto;background-size:auto 100%;background-position:calc(100% + 70px + var(--ox,0px)) 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(180deg,#000 0,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(180deg,#000 0,#000 86%,transparent 100%);mask-composite:intersect}
  .obj .f-sp{right:3%;bottom:auto;top:30%}
}
@media(max-width:1180px){.hero::before{background-position:64% 84px}}
@media(max-width:1180px){.obj .f-sp{display:none}.hero::before{background-position:80% 84px}}

/* ---------- studio sections: the same pale studio continues down the page, one real object per section ---------- */
.studio{position:relative;isolation:isolate;padding:0;margin-top:-30px}
.studio .w{position:relative;display:grid;grid-template-columns:7fr 5fr;align-items:center;min-height:min(780px,90svh)}
.studio::before{content:"";position:absolute;inset:0 auto 0 0;width:min(1500px,88vw);z-index:-1;background:calc(0% - 150px) 50%/auto 100% no-repeat;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 13%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 13%,#000 86%,transparent 100%);mask-composite:intersect}
.s-air::before{background-image:url(img/studio-air.jpg)}
.st-copy{grid-column:2;display:grid;gap:22px;justify-items:start;min-width:0}
.st-copy h2{font-size:clamp(34px,4vw,62px)}
.st-copy .pill{background:rgba(255,255,255,.7)}
.st-card{position:absolute;left:max(20px,4%);bottom:13%;width:230px;padding:18px;border-radius:24px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 50px -30px rgba(30,55,60,.55);animation:bob 8s ease-in-out -2s infinite}
.st-card .cap{display:flex;align-items:center;gap:8px}
.st-card .sp-lane{font-size:17px}
.st-card .sp-row b{font-size:26px}
.st-card small{display:block;font-size:11px;color:var(--muted);margin-top:12px}
@media(max-width:1180px){
  .studio{margin-top:0}
  .studio .w{grid-template-columns:1fr;min-height:0;padding-top:calc(min(62vw,520px) + 6px);padding-bottom:30px;gap:16px}
  .studio::before{inset:0;width:auto;background-image:url(img/studio-air-sm.jpg);background-size:auto min(62vw,520px);background-position:34% 0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 calc(min(62vw,520px) - 60px),transparent calc(min(62vw,520px) - 4px));mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 calc(min(62vw,520px) - 60px),transparent calc(min(62vw,520px) - 4px));-webkit-mask-composite:source-over;mask-composite:add}
  .st-copy{grid-column:1}
  .st-card{position:static;width:auto;animation:none;order:2}
  /* hero: the spot-rate card returns on small screens, placed under the photograph */
  .obj{min-height:0;padding-top:calc(min(62vw,520px) - 24px)}
  .obj .f-sp{display:block;position:static;transform:none;width:auto;margin-bottom:4px;animation:none}
}
@media(prefers-reduced-motion:reduce){.st-card{animation:none}}

/* ---------- studio sections, sized by width so the whole object always fits and never shows an edge ---------- */
.s-land::before{background-image:url(img/studio-land.jpg)}
.s-land .w{grid-template-columns:5fr 7fr}
.s-land .st-copy{grid-column:1}
.s-land .st-card{left:auto;right:max(20px,4%)}
@media(min-width:1181px){
  .studio{margin-top:0}
  .studio .w{min-height:calc(min(74vw,1300px) * .5625)}
  .studio::before{inset:auto;left:0;top:50%;transform:translateY(-50%);width:min(74vw,1300px);height:auto;aspect-ratio:16/9;background-position:center;background-size:cover;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
  .s-land::before{left:auto;right:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
}
@media(max-width:1180px){
  /* tablet and phone: the photograph spans the full width above the text */
  .studio .w,.s-land .w{grid-template-columns:1fr;padding-top:calc(56.25vw - 6px)}
  .s-land .st-copy{grid-column:1}
  .studio::before{inset:0 0 auto 0;width:auto;height:56.25vw;transform:none;aspect-ratio:auto;background-size:100% auto;background-position:center top;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .s-air::before{background-image:url(img/studio-air.jpg)}
  .s-land::before{background-image:url(img/studio-land.jpg)}
}
@media(max-width:700px){
  /* phone: zoom in on the object */
  .studio .w,.s-land .w{padding-top:calc(68vw - 6px)}
  .studio::before{height:68vw;background-size:auto 100%}
  .s-air::before{background-image:url(img/studio-air-sm.jpg);background-position:30% 0}
  .s-land::before{background-image:url(img/studio-land-sm.jpg);background-position:82% 0}
}
@media(min-width:701px) and (max-width:1180px){
  /* tablet hero: full-width photograph, so no edge of the picture is visible */
  .hero::before{background-image:url(img/studio-hero.jpg);background-size:100% auto;background-position:0 84px}
  .hero::after{background:linear-gradient(180deg,rgba(238,243,241,0) 0,rgba(238,243,241,0) calc(56.25vw + 20px),var(--bg) calc(56.25vw + 90px))}
  .obj{padding-top:calc(56.25vw - 24px)}
}
@media(min-width:1181px){.st-card{bottom:4%}}

/* ---------- full-screen sections that snap: one section per screen, gliding from one to the next ---------- */
html{scroll-snap-type:y proximity}
.hero,.studio{scroll-snap-align:start}
#services .tick{margin-bottom:clamp(24px,4vw,48px)}
@media(min-width:1181px){
  html{scroll-snap-type:y mandatory}
  .hero,.studio{scroll-snap-stop:always}
  #services,#ai,#customers,#quote{scroll-snap-align:start}
  footer{scroll-snap-align:end}
  /* every section is at least one full screen tall, with its content centred */
  .hero{min-height:100svh;display:flex;flex-direction:column}
  .hero .w{flex:1;min-height:0;align-content:center;align-items:center;padding-block:0 6svh}
  .studio,.studio .w{min-height:100svh}
  #services,#ai,#customers,#quote{min-height:100svh;display:grid;align-content:center;padding-block:96px 40px}
  #services>.w,#ai>.w,#customers>.w,#quote>.w{width:100%}
  /* hero photograph: full height, but never so wide that the crane reaches the headline */
  .hero::before{inset:auto 0 0 auto;height:min(100%,66vw);width:min(1500px,86vw);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(180deg,transparent 0,#000 7%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(180deg,transparent 0,#000 7%,#000 86%,transparent 100%)}
}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}}
@media(min-width:1181px){.st-card{bottom:auto;top:calc(50% + min(74vw,1300px) * .5625 * .17)}}

/* ---------- quote section as a studio scene: the form is a glass card beside a real loading scene ---------- */
.s-quote::before{background-image:url(img/studio-quote.jpg)}
.q-glass{width:100%;padding:20px;border-radius:28px;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(255,255,255,.9);box-shadow:0 40px 60px -40px rgba(30,55,60,.6)}
.q-glass label{color:var(--muted)}
.q-glass input,.q-glass select{background:#fff;border:1px solid var(--hair)}
.q-glass #sent{background:#fff;border:1px solid var(--hair)}
@media(min-width:1181px){#quote.studio{display:block;padding:0}}
@media(max-width:1180px){#quote.studio{padding:0}.s-quote::before{background-image:url(img/studio-quote.jpg)}}
@media(max-width:700px){.s-quote::before{background-image:url(img/studio-quote-sm.jpg);background-position:36% 0}}

/* ---------- customer portal link ---------- */
.bar .portal{margin-left:auto;background:rgba(255,255,255,.7);font-size:15px;padding:9px 14px}
.bar .portal svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.4}
.bar .portal+.btn{margin-left:0}
.tabs .m-only{display:none}
.lnk{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
@media(max-width:1330px){.bar .portal .lbl-long{display:none}.bar .portal{text-transform:capitalize}}
@media(max-width:1180px){.tabs .pill{padding-inline:12px}}
@media(max-width:1080px){.bar .portal{display:none}.tabs .m-only{display:inline-flex;border-top:1px solid var(--hair);border-radius:0;margin-top:6px;padding-top:16px}}

/* ---------- inner page headers: the same studio, one real object per page ---------- */
.ph-img{position:relative;isolation:isolate}
.ph-img::before{content:"";position:absolute;z-index:-1;background:center/cover no-repeat}
.ph-stack::before{background-image:url(img/studio-stack.jpg)}
.ph-reach::before{background-image:url(img/studio-reach.jpg)}
.ph-land::before{background-image:url(img/studio-land.jpg)}
.ph-flat::before{background-image:url(img/studio-flat.jpg)}
.ph-quote::before{background-image:url(img/studio-quote.jpg)}
.ph-air::before{background-image:url(img/studio-air.jpg)}
@media(min-width:1181px){
  .ph-img .w{min-height:min(74svh,700px);align-content:center}
  .ph-img .w>*{max-width:min(46%,580px)}
  .ph-img h1{font-size:clamp(40px,4.6vw,72px)}
  .ph-img::before{right:0;top:50%;transform:translateY(-50%);width:min(66vw,1180px);aspect-ratio:16/9;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
  .ph-left::before{right:auto;left:0;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(270deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
  .ph-left .w{justify-items:end}
  .ph-left .w>*{width:min(44%,560px);max-width:none}
}
@media(max-width:1180px){
  .ph-img .w{padding-top:calc(56.25vw - 10px)}
  .ph-img::before{left:0;right:0;top:0;height:56.25vw;background-size:100% auto;background-position:center top;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent 100%)}
}
@media(max-width:700px){
  .ph-img .w{padding-top:calc(68vw - 10px)}
  .ph-img::before{height:68vw;background-size:auto 100%;background-position:80% 0}
  .ph-left::before{background-position:32% 0}
  .ph-stack::before{background-image:url(img/studio-stack-sm.jpg)}
  .ph-reach::before{background-image:url(img/studio-reach-sm.jpg);background-position:70% 0}
  .ph-land::before{background-image:url(img/studio-land-sm.jpg)}
  .ph-flat::before{background-image:url(img/studio-flat-sm.jpg);background-position:74% 0}
  .ph-quote::before{background-image:url(img/studio-quote-sm.jpg)}
  .ph-air::before{background-image:url(img/studio-air-sm.jpg)}
}
@media(min-width:1181px){.ph-left .w{justify-items:start}.ph-left .w>*{margin-left:56%;width:auto;max-width:44%}}

/* ---------- scroll snapping, corrected ----------
   Snapping belongs to the homepage only. On the inner pages the footer was the only snap point, so the
   browser kept pulling the page back and normal scrolling was blocked. On the homepage the snap is now
   "proximity": the page settles on a section when you stop near its start, but sections taller than the
   screen (services) scroll freely. */
html{scroll-snap-type:none}
@media(min-width:1181px){html{scroll-snap-type:none}}
html.home{scroll-snap-type:y proximity}
footer{scroll-snap-align:none}
@media(prefers-reduced-motion:reduce){html.home{scroll-snap-type:none}}

/* each inner page has its own picture; no image is used twice */
.ph-vessel::before{background-image:url(img/studio-vessel.jpg)}
.ph-straddle::before{background-image:url(img/studio-straddle.jpg)}
.ph-tug::before{background-image:url(img/studio-tug.jpg)}
@media(max-width:700px){
  .ph-vessel::before{background-image:url(img/studio-vessel-sm.jpg);background-position:78% 0}
  .ph-straddle::before{background-image:url(img/studio-straddle-sm.jpg);background-position:22% 0}
  .ph-tug::before{background-image:url(img/studio-tug-sm.jpg);background-position:30% 0}
}

/* ---------- about Minaline: one object in the centre, a giant faded word behind it, one yellow ring ---------- */
.s-jordan::before{display:none}
.s-jordan{overflow:hidden}
.s-jordan .w{grid-template-columns:1fr;gap:26px;padding-top:40px;padding-bottom:40px}
.s-jordan .st-copy{grid-column:1}
.s-jordan .ghost{position:absolute;z-index:-1;right:-.04em;top:8%;font-size:clamp(110px,27vw,190px);font-weight:500;letter-spacing:-.05em;line-height:.8;color:rgba(74,108,112,.08);pointer-events:none;user-select:none}
.st-img{display:none}
.s-jordan .st-img{display:block;position:relative;order:-1;width:min(88%,560px);aspect-ratio:799/645;margin:0 auto}
.s-jordan .st-img::before{content:"";position:absolute;right:4%;top:-6%;width:46%;aspect-ratio:1;border-radius:50%;border:clamp(12px,2.2vw,26px) solid var(--lime)}
.s-jordan .st-img::after{content:"";position:absolute;inset:0;background:url(img/jordan-cut.webp) center/contain no-repeat;filter:drop-shadow(0 26px 22px rgba(30,55,60,.22))}
.j-note{display:grid;gap:6px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9)}
.j-note b{font-weight:500;font-size:15px}
.j-note p{font-size:14px;line-height:1.45;color:var(--muted);margin:0}
@media(min-width:1181px){
  .s-jordan .w{display:block;padding:0}
  .s-jordan .st-copy{position:absolute;left:0;top:50%;transform:translateY(-58%);width:min(33%,430px);z-index:2}
  .s-jordan .st-copy.rv{transform:translateY(-58%)}
  .s-jordan .st-copy h2{font-size:clamp(34px,3.5vw,54px)}
  .s-jordan .ghost{right:-.03em;top:11%;font-size:clamp(220px,25vw,400px)}
  .s-jordan .st-img{position:absolute;left:59%;top:50%;transform:translate(-50%,-50%);width:min(42vw,640px);margin:0}
  .j-note{position:absolute;bottom:9%;width:min(21%,260px);z-index:2}
  .j-a{left:0}
  .j-b{right:0}
}

/* ---------- about Minaline: the map is alive (crane, trucks, pins, moving routes) ---------- */
.s-jordan .st-img{aspect-ratio:982/971}
.s-jordan .st-img::before,.s-jordan .st-img::after{content:none}
.j-stage{position:absolute;inset:0}
.j-ring{position:absolute;right:-3%;top:-4%;width:50%;aspect-ratio:1;border-radius:50%;border:clamp(12px,2.2vw,26px) solid var(--lime);animation:jring 7s ease-in-out infinite}
.j-ring::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:2px solid var(--lime);opacity:0;animation:jwave 3.5s ease-out infinite}
.j-map{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 22px 20px rgba(30,55,60,.16));animation:jfloat 7s ease-in-out infinite;will-change:transform}
.j-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:jfloat 7s ease-in-out infinite;filter:drop-shadow(0 1px 2px rgba(20,40,44,.45))}
.j-routes path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 11;animation:jdash 1.4s linear infinite}
.j-routes circle{fill:var(--lime);stroke:#fff;stroke-width:2.5}
.j-pin,.j-mode{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px;font-weight:500;color:var(--ink);padding:6px 11px 6px 8px;border-radius:99px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.95);box-shadow:0 8px 18px rgba(30,55,60,.16);animation:jfloat 7s ease-in-out infinite}
.j-pin{transform:translate(-9px,-50%)}
.j-pin i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 2px #fff}
.j-pin i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lime);animation:jpulse 2s ease-out infinite}
.j-mode{padding:5px 11px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);translate:0 0}
.js .j-stage.rv .j-pin,.js .j-stage.rv .j-mode,.js .j-stage.rv .j-routes{opacity:0;transition:opacity .7s ease .5s}
.js .j-stage.rv.in .j-pin,.js .j-stage.rv.in .j-mode,.js .j-stage.rv.in .j-routes{opacity:1}
.js .j-stage.rv.in .j-mode{transition-delay:.9s}
.s-jordan .ghost{translate:calc(var(--jp,0) * -60px) 0}
@keyframes jfloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes jring{0%,100%{scale:1}50%{scale:1.05}}
@keyframes jwave{0%{opacity:.7;scale:.86}100%{opacity:0;scale:1.18}}
@keyframes jpulse{0%{opacity:.7;scale:1}100%{opacity:0;scale:3.4}}
@keyframes jdash{to{stroke-dashoffset:-13}}
@media(max-width:700px){.j-pin,.j-mode{font-size:11px;padding:4px 8px 4px 6px}.j-mode{padding:3px 8px;font-size:10px}.j-routes path{stroke-width:4}.j-routes circle{r:10}}
@media(prefers-reduced-motion:reduce){.j-ring,.j-ring::after,.j-map,.j-routes,.j-routes path,.j-pin,.j-mode,.j-pin i::after{animation:none}.j-routes circle{display:none}}

/* ---------- smooth scrolling: nothing expensive is redrawn while the page moves ---------- */
/* sections no longer grab the scroll */
html,html.home{scroll-snap-type:none}
/* soft background glows are plain gradients now, not animated 90px blurs behind every glass card */
.amb b{filter:none;animation:none;opacity:.6}
.amb b:nth-child(1){background:radial-gradient(closest-side,#d3e6e6 0,rgba(211,230,230,0) 100%);width:70vw;height:70vw;left:-24vw;top:-22vw}
.amb b:nth-child(2){background:radial-gradient(closest-side,#f8ecc2 0,rgba(248,236,194,0) 100%);width:62vw;height:62vw;right:-21vw;top:calc(18vh - 11vw)}
.amb b:nth-child(3){background:radial-gradient(closest-side,#dceaea 0,rgba(220,234,234,0) 100%);width:60vw;height:60vw;left:17vw;bottom:-31vw}
/* glass blur only where a card sits over a photograph; on the plain page it cost a lot and showed nothing */
.pill,.white,.svc.wh,.post:not(.g),.trk,.six div,.wc,.j-pin,.j-mode{-webkit-backdrop-filter:none;backdrop-filter:none}
.j-pin,.j-mode{background:rgba(255,255,255,.92)}
/* the living map: no live filters, and it rests while it is off screen */
.j-map,.j-routes{filter:none;will-change:auto}
.j-routes .ul{stroke:rgba(30,50,54,.5);stroke-width:5.5;stroke-dasharray:none;animation:none}
.s-jordan:not(.live) .j-ring,.s-jordan:not(.live) .j-ring::after,.s-jordan:not(.live) .j-map,.s-jordan:not(.live) .j-routes,.s-jordan:not(.live) .j-routes path,.s-jordan:not(.live) .j-pin,.s-jordan:not(.live) .j-mode,.s-jordan:not(.live) .j-pin i::after{animation-play-state:paused}

/* ---------- image style option: the homepage pictures as technical drawings instead of studio photographs ---------- */
html.draw .hero::before{background-image:url(img/draw-hero.jpg)}
html.draw .s-air::before{background-image:url(img/draw-air.jpg)}
html.draw .s-land::before{background-image:url(img/draw-land.jpg)}
html.draw .s-quote::before{background-image:url(img/draw-quote.jpg)}
@media(max-width:700px){
  html.draw .hero::before{background-image:url(img/draw-hero-sm.jpg)}
  html.draw .s-air::before{background-image:url(img/draw-air-sm.jpg)}
  html.draw .s-land::before{background-image:url(img/draw-land-sm.jpg)}
  html.draw .s-quote::before{background-image:url(img/draw-quote-sm.jpg)}
}
.style-sw{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:45;display:flex;gap:2px;padding:4px;border-radius:99px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.95);box-shadow:0 14px 30px -14px rgba(30,55,60,.5)}
.style-sw button{appearance:none;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--muted);padding:8px 14px;border-radius:99px;cursor:pointer}
.style-sw button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* third image style: a real photograph that dissolves into a pencil sketch at its edges */
html.sketch .hero::before{background-image:url(img/sketch-hero.jpg)}
html.sketch .s-air::before{background-image:url(img/sketch-air.jpg)}
html.sketch .s-land::before{background-image:url(img/sketch-land.jpg)}
html.sketch .s-quote::before{background-image:url(img/sketch-quote.jpg)}
@media(max-width:700px){
  html.sketch .hero::before{background-image:url(img/sketch-hero-sm.jpg)}
  html.sketch .s-air::before{background-image:url(img/sketch-air-sm.jpg)}
  html.sketch .s-land::before{background-image:url(img/sketch-land-sm.jpg)}
  html.sketch .s-quote::before{background-image:url(img/sketch-quote-sm.jpg)}
}
@media(max-width:700px){.style-sw button{padding:7px 11px;font-size:12px}}

/* fourth image style: one bold yellow object, ink construction lines, a figure for scale */
html.yellow .hero::before{background-image:url(img/yellow-hero.jpg)}
html.yellow .s-air::before{background-image:url(img/yellow-air.jpg)}
html.yellow .s-land::before{background-image:url(img/yellow-land.jpg)}
html.yellow .s-quote::before{background-image:url(img/yellow-quote.jpg)}
@media(max-width:700px){
  html.yellow .hero::before{background-image:url(img/yellow-hero-sm.jpg)}
  html.yellow .s-air::before{background-image:url(img/yellow-air-sm.jpg)}
  html.yellow .s-land::before{background-image:url(img/yellow-land-sm.jpg)}
  html.yellow .s-quote::before{background-image:url(img/yellow-quote-sm.jpg)}
  .style-sw button{padding:7px 9px}
}

/* fifth image style: a small real object in the studio, cut open like a section, with faint technical lines */
html.section .hero::before{background-image:url(img/section-hero.jpg)}
html.section .s-air::before{background-image:url(img/section-air.jpg)}
html.section .s-land::before{background-image:url(img/section-land.jpg)}
html.section .s-quote::before{background-image:url(img/section-quote.jpg)}
@media(max-width:700px){
  html.section .hero::before{background-image:url(img/section-hero-sm.jpg)}
  html.section .s-air::before{background-image:url(img/section-air-sm.jpg)}
  html.section .s-land::before{background-image:url(img/section-land-sm.jpg)}
  html.section .s-quote::before{background-image:url(img/section-quote-sm.jpg)}
  .style-sw{left:8px;right:8px;justify-content:space-between}.style-sw button{padding:7px 6px;font-size:11.5px}
}

/* ---------- smaller pictures: the first screen and the section pictures are drawn at 76% size, kept against their own side ---------- */
@media(min-width:1181px){
  .hero::before{scale:.76;transform-origin:100% 62%}
  .studio::before{scale:.76;transform-origin:0 50%}
  .s-land::before{transform-origin:100% 50%}
}
/* keep the smaller pictures clear of the glass cards that float over them */
@media(min-width:1181px){
  .hero::before{transform-origin:100% 100%}
  .studio::before{transform-origin:0 18%}
  .s-land::before{transform-origin:100% 18%}
  .s-quote::before{transform-origin:0 50%}
}

/* the Jordan map follows the image style too */
.j-map.m-draw,.j-map.m-sketch,.j-map.m-yellow,.j-map.m-section{display:none}
html.draw .j-map.m-photo,html.sketch .j-map.m-photo,html.yellow .j-map.m-photo,html.section .j-map.m-photo{display:none}
html.draw .j-map.m-draw,html.sketch .j-map.m-sketch,html.yellow .j-map.m-yellow,html.section .j-map.m-section{display:block}
html.yellow .j-ring{border-color:var(--teal,#4a6c70);opacity:.85}
html.yellow .j-ring::after{border-color:var(--teal,#4a6c70)}

/* ---------- Jordan map, redesigned: a flat drawing board that tilts and turns, with the container map standing up from it ---------- */
.s-jordan{--jmap:url(img/jordan-live.webp)}
html.draw .s-jordan{--jmap:url(img/jordan-draw.webp)}
html.sketch .s-jordan{--jmap:url(img/jordan-sketch.webp)}
html.yellow .s-jordan{--jmap:url(img/jordan-yellow.webp)}
html.section .s-jordan{--jmap:url(img/jordan-section.webp)}
.j-stage{perspective:1500px;perspective-origin:50% 40%}
.j3d{position:absolute;inset:0;transform-style:preserve-3d;animation:j3d 18s ease-in-out infinite;will-change:transform}
.j3d>*{animation:none}
.j-board{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:rgba(46,63,65,.34);stroke-width:1.6}
.j-board .g{stroke:none;fill:url(#jgrid)}
.j-board pattern circle{fill:rgba(46,63,65,.3);stroke:none}
.j-board .fr{stroke:rgba(46,63,65,.22)}
.j-board .da{stroke-dasharray:3 9}
.j-board text{fill:rgba(46,63,65,.62);stroke:none;font-size:19px;letter-spacing:.04em}
.j3d .j-ring{animation:none;right:-3%;top:-4%}
.j-lay{position:absolute;inset:0;background:var(--jmap) center/100% 100% no-repeat}
.j-sh{filter:brightness(0) blur(14px);opacity:.2;transform:translate3d(22px,26px,0)}
.j-lay:nth-of-type(2){transform:translateZ(4px);filter:brightness(.62)}
.j-lay:nth-of-type(3){transform:translateZ(8px);filter:brightness(.66)}
.j-lay:nth-of-type(4){transform:translateZ(12px);filter:brightness(.7)}
.j-lay:nth-of-type(5){transform:translateZ(16px);filter:brightness(.76)}
.j-lay:nth-of-type(6){transform:translateZ(20px);filter:brightness(.84)}
.j-lay:nth-of-type(7){transform:translateZ(24px)}
.j3d .j-routes{transform:translateZ(30px);animation:none}
.j3d .j-pin,.j3d .j-mode{transform-origin:0 50%;translate:-9px -50%;animation:j3dpin 18s ease-in-out infinite}
.j3d .j-mode{transform-origin:50% 50%;translate:-50% -50%}
.j3d .j-pin i::after{animation:jpulse 2s ease-out infinite}
.j3d .j-routes path:not(.ul){animation:jdash 1.4s linear infinite}
@keyframes j3d{0%,10%{transform:rotateX(0deg) rotateZ(0deg) scale(.86)}40%{transform:rotateX(57deg) rotateZ(-26deg) scale(1.06)}72%{transform:rotateX(57deg) rotateZ(22deg) scale(1.06)}100%{transform:rotateX(0deg) rotateZ(0deg) scale(.86)}}
@keyframes j3dpin{0%,10%{transform:translateZ(64px) rotateZ(0deg) rotateX(0deg)}40%{transform:translateZ(64px) rotateZ(26deg) rotateX(-57deg)}72%{transform:translateZ(64px) rotateZ(-22deg) rotateX(-57deg)}100%{transform:translateZ(64px) rotateZ(0deg) rotateX(0deg)}}
.s-jordan:not(.live) .j3d,.s-jordan:not(.live) .j3d .j-pin,.s-jordan:not(.live) .j3d .j-mode{animation-play-state:paused}
@media(max-width:700px){.j-board text{font-size:26px}.j-stage{perspective:900px}}
@media(prefers-reduced-motion:reduce){.j3d{animation:none;transform:rotateX(52deg) rotateZ(-18deg)}.j3d .j-pin,.j3d .j-mode{animation:none;transform:translateZ(64px) rotateZ(18deg) rotateX(-52deg)}}
/* only the containers are lifted; their floor shadow stays flat on the board */
.s-jordan{--jtop:url(img/jordan-live-top.webp)}
html.draw .s-jordan{--jtop:url(img/jordan-draw-top.webp)}
html.sketch .s-jordan{--jtop:url(img/jordan-sketch-top.webp)}
html.yellow .s-jordan{--jtop:url(img/jordan-yellow-top.webp)}
html.section .s-jordan{--jtop:url(img/jordan-section-top.webp)}
.j-lay{background-image:var(--jtop)}
.j-sh{background-image:var(--jmap);filter:none;opacity:1;transform:none}
@keyframes j3d{0%,10%{transform:rotateX(0deg) rotateZ(0deg) scale(.86)}40%{transform:rotateX(57deg) rotateZ(-26deg) scale(1.06)}72%{transform:rotateX(57deg) rotateZ(14deg) scale(1.06)}100%{transform:rotateX(0deg) rotateZ(0deg) scale(.86)}}
@keyframes j3dpin{0%,10%{transform:translateZ(64px) rotateZ(0deg) rotateX(0deg)}40%{transform:translateZ(64px) rotateZ(26deg) rotateX(-57deg)}72%{transform:translateZ(64px) rotateZ(-14deg) rotateX(-57deg)}100%{transform:translateZ(64px) rotateZ(0deg) rotateX(0deg)}}

/* ---------- Jordan map: one realistic map in every style; its shadow is separate; trucks drive and containers lift inside it ---------- */
.s-jordan,html.draw .s-jordan,html.sketch .s-jordan,html.yellow .s-jordan,html.section .s-jordan{--jmap:url(img/jordan-real.webp);--jtop:url(img/jordan-real.webp)}
html.yellow .j-ring,html.yellow .j-ring::after{border-color:var(--lime);opacity:1}
.j-sh{background-image:var(--jtop);filter:brightness(0) blur(11px);opacity:.3;transform:translate3d(16px,20px,0)}
.j-slot,.j-lift{position:absolute;display:block}
.j-slot{background:#1c2a2c;transform:translateZ(24.5px);opacity:0}
.j-lift{background-image:var(--jtop);background-repeat:no-repeat;transform-style:preserve-3d;transform:translateZ(25px)}
.j-lift::before,.j-lift::after{content:"";position:absolute;inset:0;background:inherit;filter:brightness(.62);transform:translateZ(-5px)}
.j-lift::after{transform:translateZ(-10px)}
.j-traffic{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(25.5px)}
.j-traffic path{fill:none;stroke:none}
@keyframes jlift{0%,18%{transform:translateZ(25px)}40%,62%{transform:translateZ(112px)}84%,100%{transform:translateZ(25px)}}
@keyframes jslot{0%,18%{opacity:0}40%,62%{opacity:.62}84%,100%{opacity:0}}
.j3d>.j-slot{animation:jslot 10.4s ease-in-out infinite}
.j3d>.j-lift{animation:jlift 10.4s ease-in-out infinite}
.s-jordan:not(.live) .j-slot,.s-jordan:not(.live) .j-lift{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.j3d>.j-slot,.j3d>.j-lift{animation:none}.j-traffic{display:none}}
/* the cleaner map is drawn a little larger */
@keyframes j3d{0%,10%{transform:rotateX(0deg) rotateZ(0deg) scale(.96)}40%{transform:rotateX(57deg) rotateZ(-26deg) scale(1.2)}72%{transform:rotateX(57deg) rotateZ(14deg) scale(1.2)}100%{transform:rotateX(0deg) rotateZ(0deg) scale(.96)}}
/* calmer Jordan section: fewer things on the board, a fainter word behind, one note line */
.j-board pattern circle{fill:rgba(46,63,65,.2)}
.j-board .fr{stroke:rgba(46,63,65,.14)}
.s-jordan .ghost{color:rgba(74,108,112,.05)}
.j3d .j-ring{border-width:clamp(8px,1.3vw,16px);width:40%;right:2%;top:1%}
.j3d .j-ring::after{display:none}

/* ---------- Jordan map: you can turn it and touch it; the light and the shadows follow ---------- */
.j-stage{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.j-stage.drag{cursor:grabbing}
.j3d{animation:none;transform:rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg)) scale(var(--sc,.96))}
.j3d .j-pin{animation:none;transform:translateZ(70px) rotateZ(calc(var(--rz,0deg)*-1)) rotateX(calc(var(--rx,0deg)*-1));cursor:pointer}
.j-sh{position:absolute;inset:0;background:var(--jtop) center/100% 100% no-repeat;filter:brightness(0) blur(13px);opacity:.26;transform:translate3d(var(--sx,16px),var(--sy,20px),0)}
.j-sh2{filter:brightness(0) blur(3px);opacity:.34;transform:translate3d(calc(var(--sx,16px)*.22),calc(var(--sy,20px)*.22),0)}
.j-lay{filter:none}
.j-sheen{position:absolute;inset:0;transform:translateZ(29.2px);pointer-events:none;-webkit-mask:var(--jtop) center/100% 100% no-repeat;mask:var(--jtop) center/100% 100% no-repeat;background:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 64%) var(--sh,50%) 0/260% 100% no-repeat}
.j3d>.j-slot{animation:none;transform:translateZ(29.3px);opacity:0;transition:opacity .9s ease}
.j3d>.j-slot.up{opacity:.66}
.j3d>.j-lift{animation:none;transform:translateZ(29.6px);transition:transform 1.5s cubic-bezier(.3,.7,.2,1)}
.j3d>.j-lift.up{transform:translateZ(128px)}
.j-traffic{transform:translateZ(30px)}
.j-traffic .tsh{fill:rgba(10,20,22,.38);stroke:none}
.j-pin small{display:none;font-size:11px;font-weight:400;color:var(--muted);margin-left:2px;padding-left:8px;border-left:1px solid rgba(46,63,65,.18)}
.j-pin.open small{display:inline}
.j-hint{position:absolute;left:50%;bottom:-7%;transform:translateX(-50%);white-space:nowrap;font-size:12px;letter-spacing:.04em;color:var(--muted);padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);transition:opacity .6s ease;pointer-events:none}
.j-stage.used .j-hint{opacity:0}
@media(max-width:700px){.j-hint{bottom:-10%;font-size:11px}}
@media(prefers-reduced-motion:reduce){.j3d{transform:rotateX(var(--rx,52deg)) rotateZ(var(--rz,-18deg)) scale(1.1)}.j3d .j-pin{transform:translateZ(70px) rotateZ(calc(var(--rz,-18deg)*-1)) rotateX(calc(var(--rx,52deg)*-1))}}

/* ---------- Jordan, started over: a hand-sketched blueprint map drawn from the real border ---------- */
.jm{display:block;width:100%;height:auto;overflow:visible;--ink2:#2c5aa6;--ink3:rgba(44,90,166,.5);font-family:"Architects Daughter","Inter Tight",sans-serif;-webkit-tap-highlight-color:transparent}
.jm path,.jm circle,.jm rect{fill:none;stroke:var(--ink2);stroke-linecap:round;stroke-linejoin:round}
.jm-grid .g0{stroke:rgba(44,90,166,.1);stroke-width:1}
.jm-grid .g1{stroke:rgba(44,90,166,.2);stroke-width:1}
.jm text{fill:var(--ink2);stroke:none}
.jm-tk{font-size:15px;fill:rgba(44,90,166,.6)}
.jm #jm-h path{stroke:rgba(44,90,166,.2);stroke-width:1.4}
.jm .jm-fill{fill:url(#jm-h);stroke:none}
.jm-b{stroke-width:2.6}
.jm-b2{stroke-width:1.2;stroke:var(--ink3)}
.jm .jm-sea{fill:rgba(44,90,166,.16);stroke-width:1.4}
.jm-wv{stroke-width:1.3;stroke:var(--ink3)}
.jm-nb{font-size:19px;letter-spacing:.2em;fill:rgba(44,90,166,.55)}
.jm-wl{font-size:16px;fill:rgba(44,90,166,.7)}
.jm-rd{stroke-width:2;stroke-dasharray:.012 .008}
.jm .jm-rd.hi{stroke:var(--lime);stroke-width:9;stroke-dasharray:none;opacity:.75}
.jm-note{font-size:15px;fill:rgba(44,90,166,.8)}
.jm .jm-truck rect{fill:var(--ink);stroke:#fff;stroke-width:1}
.jm-p{cursor:pointer;outline:none}
.jm-p text{font-size:19px;paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.jm .jm-mk{fill:var(--bg);stroke-width:2}
.jm .jm-mk.hq{fill:var(--lime);stroke:var(--ink);stroke-width:1.6}
.jm .jm-ic{stroke:var(--ink);stroke-width:1.5}
.jm .jm-hit{stroke:none;fill:transparent}
.jm .jm-halo{stroke:none;fill:rgba(242,194,48,0);transition:fill .25s ease}
.jm-p:hover .jm-halo,.jm-p:focus-visible .jm-halo{fill:rgba(242,194,48,.35)}
.jm-p.on .jm-halo{fill:rgba(242,194,48,.55)}
.jm-p.on text{font-weight:700}
.jm-tb path,.jm-n path{stroke-width:1.8}
.jm-tb text,.jm-n text{font-size:16px}
.js .rv .jm-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s ease .2s}
.js .rv.in .jm-draw{stroke-dashoffset:0}
.js .rv .jm-rd.jm-draw{stroke-dasharray:1;transition-delay:1.6s;transition-duration:1.8s}
.js .rv .jm-fill,.js .rv .jm-p,.js .rv .jm-truck,.js .rv .jm-note{opacity:0;transition:opacity .9s ease 2s}
.js .rv.in .jm-fill,.js .rv.in .jm-p,.js .rv.in .jm-truck,.js .rv.in .jm-note{opacity:1}
/* homepage: the map sits where the 3D block was */
.s-jordan .jm-home{order:-1;width:min(92%,460px);margin:0 auto}
.jm-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn.ghostbtn{background:rgba(255,255,255,.8);color:var(--ink);border:1px solid rgba(46,63,65,.16);padding-inline:20px}
@media(min-width:1181px){
  .s-jordan .jm-home{position:absolute;left:62%;top:50%;width:min(40vw,560px);margin:0}
  .js .s-jordan .jm-home.rv,.s-jordan .jm-home{transform:translate(-50%,-50%)}
}
.s-jordan .ghost{display:none}
/* the Know Jordan page */
.jo-ph .w>*{max-width:min(100%,760px)}
.jo-map{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,3vw,48px);align-items:center}
.jo-sheet{padding:clamp(14px,2.4vw,34px);border-radius:28px;background:linear-gradient(180deg,#f3f7fb,#e9f0f7);border:1px solid rgba(44,90,166,.16);box-shadow:0 40px 60px -44px rgba(30,55,90,.5)}
.jo-sheet .jm{--bg:#eef3f9}
.jo-side{display:grid;gap:18px}
.jm-card{display:grid;gap:10px;justify-items:start;padding:24px;border-radius:26px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 50px -40px rgba(30,55,60,.5);min-height:230px;align-content:start}
.jm-card h3{font-size:clamp(28px,3vw,40px);font-weight:400;letter-spacing:-.02em;margin:4px 0 0}
.jm-card p{font-size:17px;line-height:1.5;color:var(--muted);margin:0}
.jm-card small{font-size:13px;color:var(--muted);opacity:.8;margin-top:6px}
.jo-key{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.jo-key li{display:flex;align-items:center;gap:10px}
.jo-key i{flex:none;width:26px;height:10px;border-radius:99px}
.jo-key .k-hq{width:12px;height:12px;margin-inline:7px;background:var(--lime);border:1.5px solid var(--ink)}
.jo-key .k-rd{height:0;border-top:2px dashed #2c5aa6;border-radius:0}
.jo-key .k-hi{background:rgba(242,194,48,.8)}
.jo-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.jo-facts>div{display:grid;gap:6px;align-content:start;padding:22px;border-radius:24px}
.jo-facts span{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.jo-facts b{font-size:clamp(20px,2vw,27px);font-weight:400;letter-spacing:-.01em;line-height:1.15}
.jo-facts p{font-size:14px;line-height:1.45;color:var(--muted);margin:0}
.jo-gates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.jo-gates>div{display:grid;gap:10px;justify-items:start;align-content:start;padding:26px;border-radius:26px}
.jo-gates h3{font-size:26px;font-weight:400;letter-spacing:-.01em;margin:6px 0 0}
.jo-gates p{font-size:15px;line-height:1.5;color:var(--muted);margin:0}
.jo-spots{margin-top:28px;border-radius:28px;padding:6px 26px}
.jo-spots>div{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,.7fr) minmax(0,1.6fr);gap:18px;align-items:baseline;padding:20px 0;border-top:1px solid rgba(46,63,65,.12)}
.jo-spots>div:first-child{border-top:0}
.jo-spots b{font-size:22px;font-weight:400}
.jo-spots span{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.jo-spots p{font-size:15px;line-height:1.5;color:var(--muted);margin:0}
@media(max-width:1000px){.jo-map{grid-template-columns:1fr}.jo-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.jo-gates{grid-template-columns:1fr}.jm-card{min-height:0}}
@media(max-width:700px){.jo-spots>div{grid-template-columns:1fr;gap:4px}.jm-p text{font-size:24px}.jm-nb{font-size:21px}.jm-note,.jm-tk,.jm-wl{font-size:19px}.jo-facts>div{padding:16px}}
@media(prefers-reduced-motion:reduce){.jm-truck{display:none}}

/* ---------- Know Jordan, second design: a paper map lying on a table, with layers you can switch ---------- */
.jm .jm-hp path{stroke:rgba(44,90,166,.2);stroke-width:1.4}
.jm[data-f="main"] .jm-p:not(.c-main),.jm[data-f="hist"] .jm-p:not(.c-hist),.jm[data-f="gate"] .jm-p:not(.c-gate){display:none}
.jm[data-f="hist"] .jm-note,.jm[data-f="gate"] .jm-note{display:none}
.jm[data-f="hist"] .jm-p text,.jm[data-f="gate"] .jm-p text{font-size:17px}
.jo-map{align-items:start}
.jo-table{perspective:1600px;perspective-origin:50% 30%;padding:10px 0 40px}
.jo-sheet{position:relative;padding:clamp(14px,2.4vw,34px) clamp(14px,2.4vw,34px) clamp(70px,8vw,110px);border-radius:6px;background:linear-gradient(135deg,#fbf6ea 0%,#f4ecd9 55%,#efe5cf 100%);border:1px solid rgba(120,96,48,.22);box-shadow:inset 0 0 0 10px rgba(255,255,255,.35),inset 0 0 60px rgba(150,120,60,.12),0 60px 50px -40px rgba(60,45,20,.55),0 18px 20px -14px rgba(60,45,20,.35);transform:rotateX(34deg) rotateZ(-7deg) scale(.94);transform-origin:50% 60%;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),box-shadow 1.1s ease;cursor:pointer}
.jo-sheet.flat{transform:none;cursor:default;box-shadow:inset 0 0 0 10px rgba(255,255,255,.35),inset 0 0 60px rgba(150,120,60,.12),0 40px 50px -44px rgba(60,45,20,.5)}
.jo-sheet .jm{--bg:#f6efde}
.jo-title{position:absolute;left:0;right:0;bottom:clamp(14px,2vw,26px);display:grid;justify-items:center;gap:2px;pointer-events:none}
.jo-title b{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(34px,5.4vw,72px);letter-spacing:.34em;margin-right:-.34em;line-height:1;color:#3a3324}
.jo-title span{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(58,51,36,.6)}
.jo-chips{display:flex;flex-wrap:wrap;gap:8px}
.jo-chips button{appearance:none;font:inherit;font-size:14px;font-weight:500;color:var(--ink);padding:9px 15px;border-radius:99px;border:1px solid rgba(46,63,65,.16);background:rgba(255,255,255,.75);cursor:pointer}
.jo-chips button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.jo-hist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.jo-hist article{position:relative;display:grid;gap:6px;align-content:start;padding:24px 24px 26px;border-radius:6px;background:linear-gradient(135deg,#fbf6ea,#f3ead6);border:1px solid rgba(120,96,48,.2);box-shadow:0 26px 30px -26px rgba(60,45,20,.45)}
.jo-hist i{font-family:"Architects Daughter",sans-serif;font-style:normal;font-size:15px;color:#2c5aa6}
.jo-hist h3{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:26px;line-height:1.15;margin:0;color:#3a3324}
.jo-hist span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(58,51,36,.62)}
.jo-hist p{font-size:15px;line-height:1.5;color:rgba(58,51,36,.82);margin:6px 0 0}
.jo-gates h3 em{font-style:normal;font-size:13px;letter-spacing:.08em;padding:3px 8px;border-radius:99px;background:var(--lime);color:var(--ink);vertical-align:middle;margin-left:6px}
.jo-gates{grid-template-columns:repeat(3,minmax(0,1fr))}
.jo-tips{list-style:none;margin:28px 0 0;padding:6px 26px;border-radius:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.jo-tips li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;align-items:baseline;padding:18px 0;border-top:1px solid rgba(46,63,65,.12)}
.jo-tips li:nth-child(-n+2){border-top:0}
.jo-tips b{font-weight:500;font-size:17px}
.jo-tips span{font-size:15px;line-height:1.5;color:var(--muted)}
@media(max-width:1000px){.jo-hist{grid-template-columns:repeat(2,minmax(0,1fr))}.jo-gates{grid-template-columns:1fr}.jo-tips{grid-template-columns:1fr}.jo-tips li:nth-child(2){border-top:1px solid rgba(46,63,65,.12)}}
@media(max-width:700px){.jo-hist{grid-template-columns:1fr}.jo-tips li{grid-template-columns:1fr;gap:2px}.jo-sheet{transform:rotateX(26deg) rotateZ(-5deg) scale(.96)}.jm[data-f="hist"] .jm-p text,.jm[data-f="gate"] .jm-p text{font-size:22px}}
@media(prefers-reduced-motion:reduce){.jo-sheet{transform:none;transition:none}}

/* ---------- Know Jordan: tap a place and the map zooms in to it; the panel beside it gives the details ---------- */
.jo-sheet{overflow:hidden}
.jo-sheet .jm{overflow:hidden}
.jm-in{transform:scale(calc(1/var(--z,1)))}
.jo-sheet .jm-b{stroke-width:calc(2.6px/var(--z,1))}
.jo-sheet .jm-b2{stroke-width:calc(1.2px/var(--z,1))}
.jo-sheet .jm-rd{stroke-width:calc(2px/var(--z,1))}
.jo-sheet .jm .jm-rd.hi{stroke-width:calc(9px/var(--z,1))}
.jo-sheet .jm-grid path{stroke-width:calc(1px/var(--z,1))}
.jo-sheet .jm-sea,.jo-sheet .jm-wv{stroke-width:calc(1.4px/var(--z,1))}
.jo-sheet .jm-nb{font-size:calc(19px/var(--z,1))}
.jo-sheet .jm-note,.jo-sheet .jm-wl,.jo-sheet .jm-tk{font-size:calc(15px/var(--z,1))}
.jo-sheet .jm.zoomed .jm-p:not(.on){opacity:.45}
.jo-sheet .jm.zoomed .jm-p.on .jm-halo{fill:rgba(242,194,48,.6)}
.jo-sheet .jm.zoomed .jm-tb,.jo-sheet .jm.zoomed .jm-n{opacity:0}
.jo-sheet .jm.zoomed~.jo-title{opacity:0}
.jo-title{transition:opacity .5s ease}
.jo-side .jm-card{background:linear-gradient(135deg,#fbf6ea,#f3ead6);border:1px solid rgba(120,96,48,.22);border-radius:8px;box-shadow:0 30px 34px -28px rgba(60,45,20,.5);min-height:0}
.jo-side .jm-card h3{font-family:"Playfair Display",Georgia,serif;font-weight:500;color:#3a3324}
.jo-side .jm-card p{color:rgba(58,51,36,.84)}
.jm-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin:6px 0 0;padding:12px 0 0;border-top:1px solid rgba(120,96,48,.22)}
.jm-meta dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(58,51,36,.6)}
.jm-meta dd{margin:3px 0 0;font-size:15px;color:#3a3324}
.jm-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.jm-nav button{appearance:none;font:inherit;font-size:14px;font-weight:500;padding:9px 15px;border-radius:99px;border:1px solid rgba(58,51,36,.25);background:rgba(255,255,255,.6);color:#3a3324;cursor:pointer}
.jm-nav .jm-next{background:#3a3324;color:#fff;border-color:#3a3324}
.jm-view{width:100%;perspective:900px}
.jm-view img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;border:1px solid rgba(120,96,48,.25);box-shadow:0 22px 26px -20px rgba(60,45,20,.6);transform:rotateX(var(--vx,0deg)) rotateY(var(--vy,0deg)) scale(1.02);transition:transform .25s ease;will-change:transform}
@media(max-width:700px){.jm-meta{grid-template-columns:1fr 1fr}}
/* zoomed map: finer hatching, no travelling truck, the chosen place drawn larger */
.jo-sheet .jm .jm-hp path{stroke-width:calc(1.4px/var(--z,1))}
.jo-sheet .jm.zoomed .jm-truck{display:none}
.jo-sheet .jm.zoomed .jm-p.on .jm-in{transform:scale(calc(1.6/var(--z,1)))}

/* ---------- Know Jordan map, architectural-rendering style: sepia ink and pencil on stone-coloured paper, with a teal and terracotta accent ---------- */
.jo-sheet{background:#e7dfd0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");border-color:rgba(90,70,48,.2);box-shadow:inset 0 0 90px rgba(120,95,60,.12),0 60px 50px -40px rgba(60,45,20,.55),0 18px 20px -14px rgba(60,45,20,.35)}
.jo-sheet.flat{box-shadow:inset 0 0 90px rgba(120,95,60,.12),0 40px 50px -44px rgba(60,45,20,.5)}
.jo-sheet .jm{--ink2:#4f3d2b;--ink3:rgba(79,61,43,.45);--bg:#e7dfd0;font-family:"Playfair Display",Georgia,serif}
.jo-sheet .jm-grid .g0{stroke:rgba(79,61,43,.05)}
.jo-sheet .jm-grid .g1{stroke:rgba(79,61,43,.1)}
.jo-sheet .jm-tk{fill:rgba(79,61,43,.5);font-family:"Inter Tight",sans-serif;font-size:calc(12px/var(--z,1));letter-spacing:.06em}
.jm-cl path{fill:none;stroke:rgba(79,61,43,.32);stroke-width:calc(1px/var(--z,1))}
.jm-cl .s{stroke:rgba(79,61,43,.22)}
.jm-cl .bl{stroke:rgba(79,61,43,.2);stroke-width:calc(.9px/var(--z,1))}
.jo-sheet .jm .jm-hp path{stroke:rgba(79,61,43,.22);stroke-width:calc(1px/var(--z,1))}
.jo-sheet .jm .jm-fill{fill-opacity:1}
.jo-sheet .jm-b{stroke:#3f3022;stroke-width:calc(2.2px/var(--z,1))}
.jo-sheet .jm-b2{stroke:rgba(150,104,60,.2);stroke-width:calc(13px/var(--z,1))}
.jo-sheet .jm .jm-sea{fill:rgba(58,140,150,.42);stroke:#2f7f89}
.jo-sheet .jm-wv{stroke:rgba(47,127,137,.75)}
.jo-sheet .jm-wl{fill:#2f7f89;font-style:italic}
.jo-sheet .jm-nb{fill:rgba(79,61,43,.5);font-family:"Inter Tight",sans-serif;font-size:calc(15px/var(--z,1));letter-spacing:.34em}
.jo-sheet .jm-note{fill:rgba(79,61,43,.75);font-style:italic}
.jo-sheet .jm-rd{stroke:#6b4a2e}
.jo-sheet .jm .jm-rd.hi{stroke:#3a8c96;opacity:.5}
.jo-sheet .jm-p text{fill:#3a2c1e;font-size:18px;stroke:#e7dfd0}
.jo-sheet .jm .jm-mk{fill:#f3ecdf;stroke:#4f3d2b}
.jo-sheet .jm .jm-mk.hq{fill:#b8643a;stroke:#3a2c1e}
.jo-sheet .jm .jm-ic{stroke:#3a2c1e}
.jo-sheet .jm .jm-mk.hq+.jm-ic{stroke:#fff}
.jo-sheet .jm-p:hover .jm-halo,.jo-sheet .jm-p:focus-visible .jm-halo{fill:rgba(58,140,150,.3)}
.jo-sheet .jm-p.on .jm-halo,.jo-sheet .jm.zoomed .jm-p.on .jm-halo{fill:rgba(184,100,58,.42)}
.jo-sheet .jm .jm-truck rect{fill:#3a2c1e;stroke:#e7dfd0}
.jo-sheet .jm-tb text,.jo-sheet .jm-n text{font-family:"Inter Tight",sans-serif;font-size:13px;letter-spacing:.08em}
.jo-title b{color:#3a2c1e}
.jo-title span{color:rgba(58,44,30,.6)}
.jo-side .jm-card,.jo-hist article{background:#ece5d6;border-color:rgba(90,70,48,.2)}
.jo-hist i{color:#b8643a;font-family:"Playfair Display",Georgia,serif;font-style:italic}
.jo-key .k-hq{background:#b8643a;border-color:#3a2c1e}
.jo-key .k-rd{border-top-color:#6b4a2e}
.jo-key .k-hi{background:rgba(58,140,150,.5)}
.jo-chips button[aria-pressed="true"],.jm-nav .jm-next{background:#3a2c1e;border-color:#3a2c1e}
@media(max-width:700px){.jo-sheet .jm-p text{font-size:23px}.jo-sheet .jm-nb{font-size:calc(19px/var(--z,1))}.jo-sheet .jm-tk{font-size:calc(16px/var(--z,1))}}

/* ---------- Know Jordan as a journey: the map stays in view and travels north to south as you scroll; each stop has its drawing beside it ---------- */
.jo-tour-sec{padding-top:10px}
.jo-tour{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:start}
.jo-stick{position:sticky;top:92px;height:calc(100svh - 112px);display:grid;place-items:center}
.jo-stick .jo-sheet{width:min(100%,calc((100svh - 150px)*.8));transform:none;cursor:default;padding:clamp(12px,1.8vw,26px) clamp(12px,1.8vw,26px) clamp(54px,6.4vw,90px)}
.jo-stick .jo-title b{font-size:clamp(26px,3.8vw,54px)}
.jo-stick .jo-title{bottom:clamp(10px,1.4vw,20px)}
.jm[data-f="tour"] .jm-p:not(.c-tour){display:none}
.jm[data-f="tour"] .jm-note{display:none}
.jo-sheet .jm[data-f="tour"] .jm-p{opacity:.5}
.jo-sheet .jm[data-f="tour"] .jm-p.seen{opacity:.8}
.jo-sheet .jm[data-f="tour"] .jm-p.on{opacity:1}
.jo-sheet .jm[data-f="tour"]:not(.zoomed) .jm-p text{display:none}
.jo-sheet .jm[data-f="tour"].zoomed .jm-p:not(.on) text{opacity:.55}
.jm-way{fill:none;stroke:#b8643a;stroke-width:calc(2.4px/var(--z,1));stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;transition:stroke-dashoffset .9s ease}
.jo-rail{position:absolute;right:clamp(8px,1.2vw,16px);top:14%;bottom:20%;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:6px;font-size:11px;letter-spacing:.1em;color:rgba(58,44,30,.6)}
.jo-rail em{font-style:normal}
.jo-rail u{position:relative;width:2px;background:rgba(79,61,43,.2);border-radius:2px;text-decoration:none}
.jo-rail s{position:absolute;left:50%;top:calc(var(--p,0)*100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#b8643a;box-shadow:0 0 0 3px #e7dfd0;transition:top .6s ease}
.jo-chs{display:grid}
.jo-ch{min-height:88svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(16px,2.4vw,36px);align-items:center;opacity:.28;transition:opacity .6s ease}
.jo-ch.on{opacity:1}
.jo-intro{grid-template-columns:1fr;min-height:60svh}
.jo-frame{position:relative;margin:0;aspect-ratio:4/5;border:1px solid rgba(90,70,48,.22);border-radius:3px;overflow:hidden;box-shadow:0 30px 34px -26px rgba(60,45,20,.55);transform:rotate(-1.2deg);transition:transform .8s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(rgba(79,61,43,.2),rgba(79,61,43,.2)) 18% 0/1px 100% no-repeat,linear-gradient(rgba(79,61,43,.2),rgba(79,61,43,.2)) 82% 0/1px 100% no-repeat,linear-gradient(rgba(79,61,43,.2),rgba(79,61,43,.2)) 0 16%/100% 1px no-repeat,linear-gradient(rgba(79,61,43,.2),rgba(79,61,43,.2)) 0 78%/100% 1px no-repeat,linear-gradient(rgba(79,61,43,.1),rgba(79,61,43,.1)) 50% 0/1px 100% no-repeat,#e7dfd0}
.jo-ch:nth-child(odd) .jo-frame{transform:rotate(1deg)}
.jo-ch.on .jo-frame{transform:none}
.jo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.jo-frame.has img{opacity:1}
.jo-frame figcaption{position:absolute;left:0;right:0;bottom:9%;display:grid;justify-items:center;gap:4px;text-align:center}
.jo-frame figcaption b{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(17px,1.7vw,24px);color:rgba(58,44,30,.7)}
.jo-frame figcaption span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(58,44,30,.5)}
.jo-frame.has figcaption{display:none}
.jo-tx{display:grid;gap:8px;align-content:center}
.jo-tx i{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:15px;color:#b8643a}
.jo-tx h3{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(28px,3.2vw,46px);line-height:1.08;letter-spacing:-.01em;margin:0;color:#3a2c1e}
.jo-tx span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(58,44,30,.62)}
.jo-tx p{font-size:17px;line-height:1.5;color:rgba(58,44,30,.84);margin:6px 0 0}
.jo-tx small{font-size:13px;color:rgba(58,44,30,.6);margin-top:6px}
@media(max-width:1000px){
  .jo-tour{grid-template-columns:1fr;gap:0}
  .jo-stick{top:70px;height:46svh;z-index:5;background:linear-gradient(180deg,var(--bg) 0,var(--bg) 92%,rgba(238,243,241,0) 100%);padding-bottom:14px}
  .jo-stick .jo-sheet{width:auto;height:100%;aspect-ratio:860/1010;padding:8px 8px 34px}
  .jo-stick .jo-title b{font-size:22px}.jo-stick .jo-title span{display:none}.jo-stick .jo-title{bottom:6px}
  .jo-ch{min-height:62svh;grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .jo-intro{min-height:34svh;grid-template-columns:1fr}
}
@media(max-width:600px){.jo-ch{grid-template-columns:1fr;justify-items:start;align-content:center;gap:14px}.jo-frame{width:62%}.jo-tx h3{font-size:30px}}
@media(prefers-reduced-motion:reduce){.jo-ch{opacity:1}.jo-frame{transform:none!important}}
/* journey on small screens: each stop fits in the space under the map, drawing beside the words */
@media(max-width:1000px){.jo-ch{min-height:48svh;align-items:start;padding-top:10px}.jo-intro{min-height:30svh}}
@media(max-width:600px){.jo-ch{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:14px}.jo-frame{width:100%}.jo-tx h3{font-size:24px}.jo-tx p{font-size:15px;margin-top:2px}.jo-tx{gap:5px}.jo-frame figcaption b{font-size:13px}.jo-frame figcaption span{font-size:8px}}

/* ---------- no backgrounds: the map and every drawing sit directly on the page, the way a sketch does ---------- */
.jo-sheet,.jo-sheet.flat,.jo-stick .jo-sheet{background:none;border:0;box-shadow:none;border-radius:0}
.jo-sheet .jm{--bg:#eef3f1}
.jo-sheet .jm-p text{stroke:#eef3f1}
.jo-sheet .jm .jm-mk{fill:#eef3f1}
.jo-sheet .jm .jm-truck rect{stroke:#eef3f1}
.jo-rail s{box-shadow:0 0 0 3px #eef3f1}
.jo-frame{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;
  background-image:linear-gradient(rgba(79,61,43,.22),rgba(79,61,43,.22)),linear-gradient(rgba(79,61,43,.22),rgba(79,61,43,.22)),linear-gradient(rgba(79,61,43,.22),rgba(79,61,43,.22)),linear-gradient(rgba(79,61,43,.22),rgba(79,61,43,.22)),linear-gradient(rgba(79,61,43,.1),rgba(79,61,43,.1));
  background-position:18% 0,82% 0,0 16%,0 78%,50% 0;background-size:1px 100%,1px 100%,100% 1px,100% 1px,1px 100%;background-repeat:no-repeat}
.jo-frame.has{background-image:none}
.jo-frame img{object-fit:contain;mix-blend-mode:multiply}
.jo-side .jm-card,.jo-hist article{background:none;border:0;box-shadow:none}

/* the place drawings: no frame, their own shape, blended into the page */
.jo-frame.has{aspect-ratio:auto}
.jo-frame.has img{position:static;width:100%;height:auto;display:block}
.jo-ch{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.jo-intro{grid-template-columns:1fr}
.jo-credits h2{font-size:22px;font-weight:500;margin:0 0 8px}
.jo-credits p{font-size:14px;line-height:1.5;color:var(--muted);max-width:80ch;margin:0 0 12px}
.jo-credits ul{list-style:none;margin:0;padding:0;columns:2;column-gap:40px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.jo-credits li{break-inside:avoid;padding:5px 0}
.jo-credits b{font-weight:500;color:var(--ink)}
.jo-credits a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:1000px){.jo-ch{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}.jo-intro{grid-template-columns:1fr}}
@media(max-width:700px){.jo-credits ul{columns:1}}
.jo-frame img{mix-blend-mode:normal}

/* ---------- Know Jordan: the whole page is the warm cream paper of the reference, and the drawings sit straight on it ---------- */
html.jo{--bg:#f0e7d9;background:#f0e7d9}
html.jo body{background:#f0e7d9}
html.jo .amb{display:none}
html.jo .jo-sheet .jm{--bg:#f0e7d9}
html.jo .jo-sheet .jm-p text{stroke:#f0e7d9}
html.jo .jo-sheet .jm .jm-mk{fill:#f0e7d9}
html.jo .jo-sheet .jm .jm-mk.hq{fill:#b8643a}
html.jo .jo-sheet .jm .jm-truck rect{stroke:#f0e7d9}
html.jo .jo-rail s{box-shadow:0 0 0 3px #f0e7d9}
html.jo .ph h1 i,html.jo .head h2 i{color:#a08a6c}
html.jo .ph p,html.jo .jo-facts p,html.jo .jo-gates p,html.jo .jo-tips span,html.jo .jo-credits p,html.jo .jo-credits ul{color:#7d6f5c}
html.jo .white{background:rgba(255,252,246,.62);border-color:rgba(255,255,255,.8)}
@media(max-width:1000px){html.jo .jo-stick{background:linear-gradient(180deg,#f0e7d9 0,#f0e7d9 92%,rgba(240,231,217,0) 100%)}}
.jo-ch.nofig{grid-template-columns:1fr}

/* ---------- Know Jordan: the supplied renderings, shown large beside the map; stops without a picture are text only ---------- */
.jo-ch{grid-template-columns:1fr;gap:18px;justify-items:start}
.jo-frame,.jo-frame.has{width:100%;aspect-ratio:auto;transform:none!important;background:none}
.jo-frame img,.jo-frame.has img{position:static;display:block;width:auto;max-width:100%;height:auto;max-height:64svh;opacity:0;transition:opacity .8s ease;mix-blend-mode:normal}
.jo-frame.has img{opacity:1}
.jo-ch.nofig{min-height:58svh}
.jo-tx{max-width:46ch}
@media(max-width:1000px){.jo-ch{grid-template-columns:1fr;min-height:0;padding:14px 0 40px}.jo-ch.nofig{min-height:44svh}.jo-frame img,.jo-frame.has img{max-height:none;width:100%}}
@media(max-width:600px){.jo-ch{grid-template-columns:1fr}}

/* ---------- Know Jordan: keep painting cheap while scrolling ----------
   The map's hand-wobble filters were recomputed on every frame of every zoom, which starved the page of time to paint (blank white bands while scrolling). They are gone; the map is plain vector lines now. */
.jo-sheet .jm *{filter:none}
.jo-sheet .jm{will-change:auto}
.jo-stick{contain:layout style}
.jo-ch{transition:opacity .35s ease}
.jo-frame img,.jo-frame.has img{transition:opacity .4s ease}