/* Lucett prototype v30: transporters' story layout (captions low in the frame, notes flash from the scanner) and the dashboard call to action */
.st-copy{left:4.4%;top:auto;bottom:9%;width:min(640px,60vw)}
.st-copy h2{font-size:clamp(26px,2.5vw,40px);margin:0 0 8px}
.st-copy p{font-size:15px;max-width:520px}
.st-copy .st-btn{margin-top:16px}
.st-shade{background:linear-gradient(0deg,#080706d9 0%,#08070685 16%,transparent 38%)}
.story[data-side="end"] .st-copy{bottom:auto;width:min(940px,90vw)}
.story[data-side="end"] .st-copy h2{font-size:clamp(34px,3.6vw,62px);margin-bottom:20px}
.story[data-side="end"] .st-copy p{font-size:17px;max-width:560px}
.story[data-side="end"] .st-copy .st-btn{margin-top:30px}
/* the operation note appears from the scanner, holds, then goes */
.st-chip{left:var(--x);top:var(--y);right:auto;bottom:auto;width:min(250px,62vw);translate:0 -100%;transform-origin:0 100%;padding:11px 13px;opacity:0;transform:none;transition:none}
.st-step.is-on .st-chip{opacity:0;transition:none;animation:stFlash 3.6s ease var(--d) both}
@keyframes stFlash{0%{opacity:0;transform:translateY(14px) scale(.5)}11%{opacity:1;transform:none}82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.st-chip b{font-size:13.5px}
@media(max-width:850px){
  .st-copy{left:6%;bottom:11%;width:88%}
  .st-copy h2{font-size:clamp(24px,6.4vw,34px);margin-bottom:8px}
  .st-chip{left:6%;top:max(13%,124px);translate:none;transform-origin:50% 0;width:min(270px,80vw)}
  .story[data-side="end"] .st-copy h2{font-size:clamp(28px,7.6vw,40px)}
}
@media(prefers-reduced-motion:reduce){.st-step.is-on .st-chip{animation:none;opacity:1}}
/* dashboard: Claim your territory */
.claim-cta{margin-top:18px;padding:54px 24px 46px;text-align:center}
.claim-cta h2{font:400 clamp(30px,3vw,44px)/1.1 "Source Serif 4",Georgia,serif;letter-spacing:-.005em;margin:0 0 16px;color:var(--ink)}
.claim-cta p{max-width:580px;margin:0 auto 8px;font-size:16px;line-height:1.55;color:#526181}
.claim-cta p.by{font-style:italic;margin-top:14px}
.claim-cta button{margin-top:22px;background:var(--blue);color:#fff;border:0;border-radius:28px;padding:13px 26px;font:500 14.5px var(--sans);cursor:pointer}
.claim-cta small{display:block;margin-top:14px;font-size:12.5px;color:var(--label)}
/* operational documents: Castrum Global logo */
.note-logo-img{height:44px;width:auto;display:block}
@media(max-width:600px){.note-logo-img{height:28px}}
.note-brand .note-logo-img + h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* crossfade without a dip: the outgoing clip stays opaque under the incoming one */
.st-frame{z-index:0}
.st-frame.was-on{opacity:1;transition:none;z-index:1}
.st-frame.is-on{z-index:2}
.st-frames{z-index:0}.st-shade{z-index:1}.st-step{z-index:2}
/* v37: captions are one short line; notes use the Lucett tag style from the owner side */
.st-copy{width:min(760px,62vw)}
.st-copy h2{font-size:clamp(26px,2.6vw,42px);margin:0}
.st-copy .st-btn{margin-top:18px}
.st-step .st-chip{display:flex;align-items:center;gap:0;width:auto;max-width:min(380px,84vw);padding:12px 18px;background:#1f1b1acc;border:1px solid #ffffff55;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-radius:12px;box-shadow:0 10px 35px #0005;color:#fff}
.st-tag-logo{display:block;width:92px;height:auto;flex:none;margin-right:15px}
.st-tag-div{width:1px;height:38px;flex:none;background:rgba(255,255,255,.26);margin-right:16px}
.st-tag-meta{display:block;font:400 10px/1.25 var(--sans);color:rgba(255,255,255,.94);white-space:nowrap}
.st-tag-meta strong{font-weight:500;font-size:11px;letter-spacing:.04em}
.st-tag-meta small{display:block;font-size:10px;color:rgba(255,255,255,.78);margin-top:3px}
/* the closing layout applies to the closing step only, so the previous caption does not jump to the centre while it fades */
.story[data-side="end"] .st-step:not([data-side="end"]) .st-copy{left:4.4%;top:auto;bottom:9%;transform:none;text-align:left;width:min(760px,62vw)}
.story[data-side="end"] .st-step:not([data-side="end"]) .st-copy h2{font-size:clamp(26px,2.6vw,42px);margin:0}
.st-hint{background:none;border:0;color:#fff;cursor:pointer;padding:6px 10px;z-index:3}
@media(max-width:850px){
  .st-copy,.story[data-side="end"] .st-step:not([data-side="end"]) .st-copy{left:6%;bottom:11%;width:88%}
  .st-copy h2,.story[data-side="end"] .st-step:not([data-side="end"]) .st-copy h2{font-size:clamp(22px,6vw,32px)}
  .st-tag-logo{width:66px;margin-right:9px}.st-tag-div{margin-right:9px}
}
/* v40: the opening button sits bottom right, as on the asset owner side */
.st-step[data-side="intro"] .st-btn{position:fixed;right:4%;bottom:4%;margin:0;z-index:3;background:#f6f0e7;color:#241c18;border:0;gap:35px;padding:15px 23px}
.st-step[data-side="intro"] .st-btn:hover{background:#fff}
@media(max-width:850px){
  .st-step[data-side="intro"] .st-btn{right:6%;bottom:calc(4% + 46px)}
  .st-step[data-side="intro"] .st-copy{bottom:calc(4% + 116px)}
}
/* v42: no Skip story on the closing step */
.story.is-end .st-top{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
.st-top{transition:opacity .4s ease}
/* v43: closing step carries a two-sentence headline and one supporting line */
.story[data-side="end"] .st-step[data-side="end"] .st-copy{width:min(1120px,90vw)}
.story[data-side="end"] .st-step[data-side="end"] .st-copy h2{font-size:clamp(30px,3.1vw,50px);margin-bottom:20px}
.story[data-side="end"] .st-step[data-side="end"] .st-copy p{font-size:18px;max-width:none}
@media(max-width:850px){.story[data-side="end"] .st-step[data-side="end"] .st-copy h2{font-size:clamp(24px,6.6vw,34px)}.story[data-side="end"] .st-step[data-side="end"] .st-copy p{font-size:16px}}
/* v44: Asset Owners list, as in the live platform */
.own-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.own-card{padding:0;cursor:pointer;display:flex;flex-direction:column;overflow:hidden}
.own-card:hover{box-shadow:0 6px 22px #1c213014}
.own-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.own-card header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:14px 14px 12px;border-bottom:1px solid #e7eaf1;min-height:60px}
.own-card header>div{min-width:0}
.own-card h3{margin:0;font:600 14px/1.3 Roboto,Arial,sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.own-card header p{margin:3px 0 0;font-size:13.5px;color:#4b5c83;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.own-edit{flex:none;background:none;border:0;padding:4px;cursor:pointer;line-height:0}
.own-card svg{width:15px;height:15px;flex:none;fill:none;stroke:#8694b3;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.own-edit svg{width:18px;height:18px}
.own-body{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;padding:14px;flex:1;align-content:start}
.own-f{display:flex;gap:9px;align-items:flex-start;min-width:0}
.own-f.wide{grid-column:1/-1}
.own-f>div{min-width:0}
.own-f span{display:block;font-size:13px;color:var(--ink);margin-bottom:5px}
.own-f b{display:block;font-weight:400;font-size:13.5px;line-height:1.45;color:var(--ink);text-transform:uppercase;overflow-wrap:anywhere}
.own-f.wide b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.own-card footer{display:flex;flex-wrap:wrap;gap:10px 18px;padding:12px 14px;border-top:1px solid #e7eaf1;font-size:13px;color:var(--ink)}
.own-card footer span{display:inline-flex;align-items:center;gap:7px}
.own-card footer em{font-style:normal;font-size:12px;color:#2f6fd0;background:#dbeafe;border:1px solid #9cc4f5;border-radius:4px;padding:0 8px;min-width:26px;text-align:center;line-height:18px}
.own-grid.is-list{grid-template-columns:1fr}
.own-grid.is-list .own-card{flex-direction:row;align-items:stretch}
.own-grid.is-list .own-card header{flex:0 0 26%;border-bottom:0;border-right:1px solid #e7eaf1}
.own-grid.is-list .own-body{grid-template-columns:1fr 1fr 2fr}
.own-grid.is-list .own-f.wide{grid-column:auto}
.own-grid.is-list .own-card footer{flex:0 0 22%;border-top:0;border-left:1px solid #e7eaf1;flex-direction:column;gap:8px}
@media(max-width:850px){.own-grid.is-list .own-card{flex-direction:column}.own-grid.is-list .own-card header,.own-grid.is-list .own-card footer{flex:none;border:0;border-bottom:1px solid #e7eaf1}.own-grid.is-list .own-card footer{border-bottom:0;border-top:1px solid #e7eaf1;flex-direction:row}.own-grid.is-list .own-body{grid-template-columns:1fr 1fr}.own-grid.is-list .own-f.wide{grid-column:1/-1}}
/* v45: component values line up under the heading text, not the icon */
.cf>b{padding-left:20px}
/* v46: the dashboard call to action matches the asset owner side: no white card, on the pale blue page background */
.claim-cta.card,.claim-cta{background:transparent;border:0;box-shadow:none;border-radius:0;margin-top:0;padding:86px 15px 100px;text-align:center;font-family:"DM Sans",Arial,sans-serif}
.claim-cta h2{font:400 clamp(30px,3.3vw,48px)/1.1 "Source Serif 4",Georgia,serif;letter-spacing:-.005em;color:#303449;margin:0 0 28px}
.claim-cta p{max-width:560px;margin:-8px auto 28px;font:400 16px/1.55 "DM Sans",Arial,sans-serif;color:#526181}
.claim-cta button{margin-top:0;display:inline-flex;align-items:center;justify-content:center;background:#0031c8;color:#fff;border:0;border-radius:32px;min-height:49px;padding:15px 23px;font:400 14px "DM Sans",Arial,sans-serif}
.claim-cta p{max-width:660px;text-wrap:balance}
/* v47 */
.claim-cta p{max-width:680px}
.claim-cta p.soon{margin:-12px auto 28px;font-size:14px;letter-spacing:.02em;color:#6b7897}
/* v52: secondary link to the Foundation page */
.claim-more{display:block;width:max-content;margin:18px auto 0;font:500 15px "DM Sans",Arial,sans-serif;color:#0031c8;text-decoration:none}
.claim-more:hover{text-decoration:underline;text-underline-offset:4px}

/* v57: the site menu on the transporter story, same as the asset owner side */
.story .menu-btn{position:absolute;top:16px;right:4%;z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(20,15,12,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-content:center;gap:5px;padding:0;cursor:pointer}
.menu-btn span{display:block;width:18px;height:1.5px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.menu-open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.story .st-top{right:calc(4% + 58px)}
.site-menu{position:absolute;top:70px;right:4%;z-index:5;width:min(340px,calc(100vw - 32px));background:#0d0a08f2;border:1px solid rgba(246,240,231,.18);border-radius:14px;padding:8px;display:flex;flex-direction:column;box-shadow:0 18px 50px #0008;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-menu[hidden]{display:none}
.site-menu.is-open{opacity:1;transform:none}
.site-menu a,.site-menu button{display:block;text-align:left;width:100%;background:none;border:0;color:#f6f0e7;text-decoration:none;padding:12px 14px;border-radius:9px;font:inherit;white-space:normal;cursor:pointer}
.site-menu a:hover,.site-menu button:hover{background:#221c17}
.site-menu strong{display:block;font:500 15.5px/1.3 var(--sans);letter-spacing:.005em}
.site-menu small{display:block;font:400 12.5px/1.4 var(--sans);color:#b9ae9f;margin-top:3px}
.site-menu [data-st-claim]{margin-top:4px;border-top:1px solid rgba(246,240,231,.12);border-radius:0 0 9px 9px}
@media(max-width:850px){.story .menu-btn{width:40px;height:40px;top:18px;right:16px}.site-menu{top:64px;right:16px}.story .st-top{right:66px}}
/* v63: For Asset Owners beside the menu; Skip story moves along */
.st-ao{position:absolute;top:27px;right:calc(4% + 62px);z-index:5;font:500 14.5px var(--sans);color:#fff;text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.6);white-space:nowrap}
.st-ao:hover{text-decoration:underline;text-underline-offset:4px}
.story .st-top{right:calc(4% + 196px)}
.site-menu [data-st-claim]{margin-top:0;border-top:0;border-radius:9px}
.site-menu .menu-sep{margin-top:4px;border-top:1px solid rgba(246,240,231,.12);border-radius:0 0 9px 9px}
.t-right .sm-btn{width:36px;height:36px;margin-left:8px}
@media(max-width:850px){.st-ao{top:25px;right:68px;font-size:12px;border:1px solid rgba(255,255,255,.6);border-radius:30px;padding:6px 11px;top:20px;background:rgba(20,15,12,.38)}.story .st-top{right:16px;top:68px}}
/* v74: Pause sits beside Skip story */
.st-top{display:flex;gap:8px}
#storyPause{min-width:82px}
/* v75: For Asset Owners sits in a grey bubble over the film; plain on the closing step */
.st-ao{top:20px;background:#101010a8;border:1px solid #fff8;border-radius:25px;padding:10px 17px;font:400 14px var(--sans);text-shadow:none;transition:background .4s ease,border-color .4s ease}
.story .st-top{right:calc(4% + 222px)}
.story.is-end .st-ao{background:transparent;border-color:transparent;text-shadow:0 1px 10px rgba(0,0,0,.6)}
@media(max-width:850px){.st-ao{font-size:12px;padding:6px 11px}.story .st-top{right:16px}}
/* v77: tagline on the closing step; quiet replay link; no sidebar-collapse button on wide screens */
.story[data-side="end"] .st-step[data-side="end"] .st-copy p.st-tagline{font:400 italic clamp(20px,1.9vw,28px)/1.3 "Source Serif 4",Georgia,serif;margin-top:26px;color:#f6f0e7}
.claim-cta button.claim-replay{display:block;margin:14px auto 0;background:none;color:#6b7897;min-height:0;padding:6px 10px;font:400 13px "DM Sans",Arial,sans-serif;border-radius:6px}
.claim-cta button.claim-replay:hover{color:#0031c8;text-decoration:underline;text-underline-offset:4px}
@media(min-width:851px){.t-burger{display:none!important}}
/* v78: For Asset Owners on the dashboard header */
.t-ao{font:500 13px Roboto,Arial,sans-serif;color:#0031c8;text-decoration:none;border:1px solid #c9d3ee;border-radius:6px;padding:7px 12px;white-space:nowrap;background:#fff}
.t-ao:hover{background:#eef2ff}
@media(max-width:850px){.t-ao{font-size:11.5px;padding:6px 8px}}
@media(max-width:600px){.t-header .t-icon[aria-label="Dark mode"]{display:none}.t-company-btn svg{display:none}.t-header{gap:6px}.t-right{gap:6px}.t-right .sm-btn{margin-left:0;width:34px;height:34px}.t-ao{padding:6px 7px;font-size:11px}}
@media(max-width:600px){.t-header .t-icon{display:none}}
/* v79: same style as For Transporters on the Portfolio */
.t-ao{font:500 12px Roboto,Arial,sans-serif;color:#fff;background:#1f3fb8;border:0;border-radius:25px;padding:9px 16px}
.t-ao:hover{background:#1a35a0}
@media(max-width:850px){.t-ao{padding:7px 11px;font-size:11px}}
@media(max-width:600px){.t-ao{padding:7px 7px;font-size:10.5px}}
@media(max-width:400px){.t-ao span{display:none}.t-ao{padding:7px 6px}}
/* v84: same controls, order and wording as the asset owner film: Pause, the other side, Skip journey */
.st-top{display:flex;gap:10px;align-items:center}
.story .st-top{right:calc(4% + 58px);top:20px}
.st-top .st-ao{position:static;text-decoration:none;white-space:nowrap;text-shadow:none;transition:none}
.story.is-end .st-top{opacity:1;visibility:visible;pointer-events:auto}
.story.is-end .st-top button{display:none}
.story.is-end .st-top .st-ao{background:transparent;border-color:transparent;text-shadow:0 1px 10px rgba(0,0,0,.6)}
@media(max-width:850px){.story .st-top{right:16px;top:68px;gap:6px}.st-top .st-skip{font-size:12px;padding:7px 11px}#storyPause{min-width:0}}
/* v93: the operational suite link is a second button, not a small text link */
.claim-more{display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0 0 0 12px;min-height:49px;padding:14px 23px;border:1.5px solid #0031c8;border-radius:32px;background:#fff;font:500 14px "DM Sans",Arial,sans-serif;vertical-align:top}
.claim-more:hover{background:#eef2ff;text-decoration:none}
@media(max-width:600px){.claim-more{margin:12px 0 0;display:flex;width:max-content;margin-left:auto;margin-right:auto}}

/* v98: Sign in offers the two existing logins until there is a single one */
.site-menu .menu-signin{display:flex;align-items:center;gap:8px;margin-top:4px;padding:12px 14px 8px;border-top:1px solid rgba(246,240,231,.12)}
.site-menu .menu-signin span{font:500 15.5px/1.3 var(--sans);color:#f6f0e7;margin-right:auto}
.site-menu .menu-signin a{display:inline-block!important;width:auto;padding:8px 14px;border:1px solid rgba(246,240,231,.45);border-radius:30px;font:500 13px var(--sans);white-space:nowrap}
.site-menu .menu-signin a:hover{background:#f6f0e7;color:#14110f}

/* v141: no step dots down the side of the story */
.st-dots{display:none!important}