/* Option B — scroll-world theme for InterBridge Global (bright Vox). These rules are UNLAYERED, so they beat the engine's defaults. */
@font-face{font-family:'Anton';font-weight:400;font-display:swap;src:url(../assets/fonts/anton-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(../assets/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(../assets/fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Special Elite';font-weight:400;font-display:swap;src:url(../assets/fonts/special-elite-400.woff2) format('woff2')}
:root{
  --cream:#FBF7EE;--paper:#F3EAD6;--navy:#1B2A4A;--gold:#C9A227;
  --head:'Anton','Impact',sans-serif;--label:'Special Elite','Courier New',monospace;--body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .08  0 0 0 0 .04  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --torn:polygon(0% 3%,4% 0%,9% 2.5%,15% .5%,22% 3%,30% 0%,38% 2%,46% 0%,54% 2.5%,62% .5%,70% 2.5%,78% 0%,86% 2%,93% .5%,100% 2.5%,99% 18%,100% 34%,98.5% 50%,100% 66%,99% 82%,100% 97%,94% 100%,86% 98%,78% 100%,70% 97.5%,62% 100%,54% 98%,46% 100%,38% 97.5%,30% 100%,22% 98%,14% 100%,7% 97.5%,0% 100%,1.2% 82%,0% 66%,1.5% 50%,0% 34%,1% 18%);
}
.sw-root{--sw-bg:#FBF7EE;--sw-ink:#1B2A4A;--sw-ink-soft:#4a5368;--sw-accent:#C9A227;--sw-font-display:var(--head);--sw-font-body:var(--body)}
html,body{background:var(--cream);margin:0}
.sw-particles,.sw-sky__grad,.sw-sky__glow{display:none}
/* safety net: keep the still under the video so a scene can never render empty if a browser is slow to paint the video layer */
.sw-scene.has-clip .sw-scene__still{opacity:1}
.sw-scene__video{z-index:2}

/* top bar */
.sw-brand__mark{width:38px;height:38px;border-radius:7px;background:url(../assets/logo.webp) center/cover;box-shadow:none}
.sw-brand__name{white-space:nowrap;font-family:var(--head);font-weight:400;font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;color:var(--navy)}
.sw-topbar{background:linear-gradient(180deg,rgba(251,247,238,.92),rgba(251,247,238,0))}
.sw-nav{background:rgba(251,247,238,.92);border:2px solid var(--navy);border-radius:0;clip-path:var(--torn);padding:6px 10px}
.sw-nav__item{white-space:nowrap;font-family:var(--label);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);border-radius:0}
.sw-nav__item.is-active{background:var(--navy);color:var(--cream)}
.sw-topcta{font-family:var(--head);font-weight:400;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;background:var(--navy);color:var(--cream);border-radius:0;padding:12px 22px;clip-path:polygon(0 8%,3% 0,40% 6%,100% 0,98% 50%,100% 100%,55% 94%,0 100%,2% 52%)}
.sw-scrollbar span{background:var(--gold)}

/* copy as a torn paper card, so text stays readable on top of any scene */
.sw-copylayer::before{display:none}
.sw-copy{width:min(32vw,410px);padding:26px 28px 28px;background:var(--paper) var(--grain);clip-path:var(--torn);filter:none;top:auto;transform:none;color:var(--navy)}
.sw-copy.pos-tl{left:clamp(18px,5vw,64px);top:11%}
.sw-copy.pos-tr{right:clamp(60px,7vw,100px);left:auto;top:11%}
.sw-copy.pos-r{right:clamp(60px,7vw,100px);left:auto;top:22%}
.sw-copy.pos-br{right:clamp(60px,7vw,100px);left:auto;top:auto;bottom:12%}
.sw-copy.pos-bl{left:clamp(18px,5vw,64px);top:auto;bottom:12%}
.sw-copy__num{font-family:var(--label);color:var(--sw-ink-soft)}
.sw-copy__eyebrow{font-family:var(--label);font-weight:400;font-size:.8rem;letter-spacing:.1em;color:#7a6410;margin-top:12px}
.sw-copy__title{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;font-size:clamp(1.7rem,3vw,2.6rem);color:var(--navy);text-shadow:none;margin-top:10px}
.sw-copy__body{font-family:var(--body);color:#2c3550;text-shadow:none;font-size:clamp(.95rem,1.05vw,1.05rem);margin-top:14px;max-width:none}
.sw-copy__tags li{font-family:var(--label);font-weight:400;font-size:.76rem;color:var(--navy);background:#E8EDF4;border:0;border-radius:0;clip-path:var(--torn);padding:6px 12px}
.sw-btn{font-family:var(--head);font-weight:400;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;border-radius:0;padding:13px 26px}
.sw-btn--primary{background:var(--navy);color:var(--cream);clip-path:polygon(0 8%,3% 0,40% 6%,100% 0,98% 50%,100% 100%,55% 94%,0 100%,2% 52%)}
.sw-btn--ghost{color:var(--navy);border:2.5px solid var(--navy)}
/* route dots + line: cream with a navy outline, so they read on dark navy water and on pale clouds alike */
.sw-route__dot i{box-sizing:border-box;width:12px;height:12px;background:var(--cream);border:2px solid var(--navy);box-shadow:0 0 0 2px rgba(251,247,238,.75),0 1px 6px rgba(27,42,74,.35)}
.sw-route__dot.is-active i{background:var(--gold);box-shadow:0 0 0 5px rgba(201,162,39,.25)}
.sw-route::before{width:3px;background:var(--cream);opacity:.95;box-shadow:0 0 0 1.5px var(--navy),0 1px 6px rgba(27,42,74,.3)}
.sw-route__label{font-family:var(--label);font-weight:400;border-radius:0;background:var(--cream);color:var(--navy)}
.sw-hint{font-family:var(--label);color:var(--navy)}.sw-hint i{border-color:rgba(27,42,74,.5)}

@media(max-width:1180px){.sw-nav{display:none}}
@media(max-width:860px){
  .sw-copy,.sw-copy.pos-tl,.sw-copy.pos-tr,.sw-copy.pos-r,.sw-copy.pos-br,.sw-copy.pos-bl{left:12px;right:12px;top:auto;bottom:calc(46px + env(safe-area-inset-bottom));width:auto;max-width:none;padding:18px 20px 20px}
  .sw-copy__title{font-size:clamp(1.45rem,6.2vw,2rem)}
  .sw-copy__body,.sw-copy__tags{display:none}
  .sw-copy__cta{margin-top:14px}
  .sw-copy__eyebrow{margin-top:6px}
  .sw-hint{display:none}
  .sw-btn{padding:11px 16px;font-size:.92rem}
  .sw-copy__cta{gap:8px;flex-wrap:nowrap}
  .sw-topbar{padding:10px 14px}
  .sw-brand__name{font-size:1rem}
  .sw-topcta{padding:9px 14px;font-size:.85rem}
}

/* contact sheet: slides over the final scene */
.contact-sheet{position:relative;z-index:300;background:var(--cream) var(--grain);color:var(--navy);font-family:var(--body);padding:clamp(48px,8vw,100px) 0 0;margin-top:-1px;box-shadow:0 -14px 30px rgba(27,42,74,.18)}
.cs-in{max-width:1160px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:start}
@media(max-width:860px){.cs-in{grid-template-columns:1fr}}
.cs-eyebrow{font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;color:#7a6410;margin:0 0 12px}
.contact-sheet h2{font-family:var(--head);font-weight:400;text-transform:uppercase;line-height:1.05;font-size:clamp(2rem,4.4vw,3.4rem);margin:0;color:var(--navy)}
.cs-lead{font-size:1.15rem;margin:16px 0 0;max-width:48ch;color:#2c3550}
.contact-sheet address{font-style:normal;display:grid;gap:6px;margin-top:22px}
.contact-sheet address a{font-weight:600;color:var(--navy)}.contact-sheet address .small{font-size:.9rem;color:#444}
.cs-form{background:var(--paper) var(--grain);padding:30px 28px 28px;clip-path:var(--torn);display:grid;gap:16px}
.cs-form h3{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:1.9rem;margin:0;color:var(--navy)}
.cs-form label{display:grid;gap:5px;font-family:var(--label);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.cs-form input,.cs-form select,.cs-form textarea{font:400 16px var(--body);text-transform:none;letter-spacing:0;background:var(--cream);border:0;border-bottom:3px solid var(--navy);padding:12px;min-height:46px;width:100%;color:#1A1A1A;border-radius:0;box-sizing:border-box}
.cs-form textarea{resize:vertical}
.cs-btn{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;background:var(--navy);color:var(--cream);border:0;padding:14px 28px;min-height:48px;cursor:pointer;clip-path:polygon(0 8%,3% 0,40% 6%,100% 0,98% 50%,100% 100%,55% 94%,0 100%,2% 52%)}
.cs-msg{font-family:var(--label);font-size:.88rem;min-height:20px;margin:0}.cs-msg.ok{color:#1d5c2e}.cs-msg.err{color:#8a1f1f}
.cs-foot{background:var(--navy);color:var(--cream);margin-top:clamp(48px,7vw,90px);padding:42px clamp(20px,6vw,80px) 22px}
.cs-brand{display:flex;align-items:center;gap:10px;font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;font-size:1.2rem}
.cs-brand img{border-radius:6px}
.cs-foot p{margin:12px 0 0;max-width:70ch;font-size:.95rem;opacity:.92}
.cs-foot a{color:var(--cream)}
.cs-legal{font-family:var(--label);font-size:.8rem!important;border-top:1px solid rgba(251,247,238,.25);padding-top:14px;margin-top:22px!important}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ===== Option C additions ===== */
/* 4-step counter */
.steps{position:fixed;left:50%;top:clamp(76px,10vh,96px);transform:translate(-50%,-10px);z-index:45;pointer-events:none;opacity:0;transition:opacity .45s,transform .45s;
  display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--navy);color:var(--cream);font-family:var(--label);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  clip-path:polygon(0 12%,3% 0,40% 8%,100% 0,98% 50%,100% 100%,55% 92%,0 100%,1.5% 52%)}
.steps.on{opacity:1;transform:translate(-50%,0)}
.steps b{font-family:var(--head);font-weight:400;font-size:1.5rem;letter-spacing:.02em;color:var(--gold);min-width:1.6ch;text-align:right;line-height:1}
.steps i{width:22px;height:6px;background:rgba(251,247,238,.28);transition:background .4s}
.steps i.is-on{background:var(--gold)}
@media(max-width:1100px){.steps{display:none}}
/* underline swipe on the card title's last words */
.sw-copy__title{background:linear-gradient(var(--gold),var(--gold)) 0 100%/0% 5px no-repeat;padding-bottom:4px;transition:background-size .9s .25s cubic-bezier(.2,.8,.2,1)}
.sw-copy[style*="opacity: 1"] .sw-copy__title{background-size:100% 5px}

/* phone clips are 2:3 and cropped to the viewport: bias the crop to the right so the second landmark of the hero stays in view */
@media(max-width:860px){.sw-scene__video,.sw-scene__still{object-position:50% 50%}}

/* process step tags: the active step lights up navy as the camera reaches it; finished steps turn gold */
.sw-copy__tags li{transition:background .35s,color .35s}
.sw-copy__tags li.is-active{background:var(--navy);color:var(--cream)}
.sw-copy__tags li.is-done{background:var(--gold);color:var(--navy)}
.sw-copy__eyebrow{transition:opacity .3s}

/* scene 3: card sits centred above the two signposts */
@media(min-width:861px){.sw-copy.pos-ctr{left:52vw;top:59vh;right:auto;bottom:auto;padding:16px 24px 18px}}
@media(min-width:861px){.sw-copy.pos-ctr .sw-copy__body{display:none}.sw-copy.pos-ctr .sw-copy__title{font-size:clamp(1.4rem,2.1vw,1.95rem);margin-top:4px}.sw-copy.pos-ctr .sw-copy__eyebrow{margin-top:6px}.sw-copy.pos-ctr .sw-copy__tags{margin-top:10px}}

/* larger supporting text on desktop cards: counter, label line, paragraph, tags and buttons */
@media(min-width:861px){
  .sw-copy{width:min(34vw,470px)}
  .sw-copy__num{font-size:clamp(.95rem,1.05vw,1.1rem)}
  .sw-copy__eyebrow{font-size:clamp(1rem,1.2vw,1.22rem);letter-spacing:.09em;line-height:1.3}
  .sw-copy__body{font-size:clamp(1.12rem,1.32vw,1.34rem);line-height:1.5;margin-top:16px}
  .sw-copy__tags li{font-size:clamp(.88rem,.98vw,1rem);padding:7px 14px}
  .sw-btn{font-size:clamp(1.15rem,1.3vw,1.35rem);padding:16px 32px;letter-spacing:.07em}
  .sw-copy__cta{gap:14px;margin-top:22px}
  .sw-topcta{font-size:1.05rem}
  .sw-copy.pos-ctr{width:min(36vw,500px)}
}

/* right-hand route markers: glowing yellow label + dot */
.sw-route__label{background:linear-gradient(180deg,#FFD866,#FFC52E);color:var(--navy);border:0;font-size:.95rem;padding:7px 14px;
  box-shadow:0 0 0 1px rgba(201,162,39,.55),0 0 14px 3px rgba(255,201,60,.65),0 0 30px 8px rgba(255,201,60,.35);animation:routeglow 2.6s ease-in-out infinite}
.sw-route__dot.is-active i{background:#FFC52E;box-shadow:0 0 0 5px rgba(255,201,60,.35),0 0 16px 5px rgba(255,201,60,.8)}
@keyframes routeglow{0%,100%{box-shadow:0 0 0 1px rgba(201,162,39,.55),0 0 12px 2px rgba(255,201,60,.55),0 0 24px 6px rgba(255,201,60,.28)}50%{box-shadow:0 0 0 1px rgba(201,162,39,.65),0 0 18px 5px rgba(255,214,90,.85),0 0 38px 12px rgba(255,201,60,.45)}}
@media(prefers-reduced-motion:reduce){.sw-route__label{animation:none}}

/* step / place tags: solid navy chips that pop on the cream card; the current step glows yellow, finished steps turn gold */
.sw-copy__tags{gap:10px}
.sw-copy__tags li{background:var(--navy);color:var(--cream);font-size:clamp(1rem,1.15vw,1.18rem);padding:9px 18px;letter-spacing:.02em;line-height:1.2;transition:background .35s,color .35s,box-shadow .35s,transform .35s}
.sw-copy__tags li.is-active{clip-path:none;background:#FFC93C;color:var(--navy);transform:scale(1.04);box-shadow:0 0 0 2px rgba(201,162,39,.55),0 0 14px 3px rgba(255,201,60,.7)}
.sw-copy__tags li.is-done{background:var(--gold);color:var(--navy);box-shadow:none;transform:none}

/* map labels (scene 2) */
.maplabels{position:fixed;inset:0;z-index:18;pointer-events:none}
.maplabel{position:absolute;left:0;top:0;will-change:transform,opacity;opacity:0;visibility:hidden}
.maplabel span{display:block;position:relative;background:var(--cream) var(--grain);color:var(--navy);font-family:var(--label);font-size:clamp(1rem,1.15vw,1.2rem);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;padding:8px 18px 9px;clip-path:var(--torn);filter:none}
.maplabel i{position:absolute;left:50%;top:-9px;width:0;height:0;margin-left:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid var(--gold);filter:drop-shadow(0 0 4px rgba(255,201,60,.8))}
.maplabel::after{content:"";position:absolute;left:8px;right:8px;bottom:-3px;height:3px;background:var(--gold);box-shadow:0 0 10px 2px rgba(255,201,60,.65)}
@media(max-width:860px){.maplabel span{font-size:.78rem;padding:6px 12px 7px}}
.maplabel.up i{top:auto;bottom:-9px;border-bottom:0;border-top:10px solid var(--gold)}

/* no counting on the cards: hide the "NN / 07" counters, and show the journey as a path of named steps */
.sw-copy__num{display:none}
.proc .sw-copy__tags li:not(:last-child)::after{content:"  →";opacity:.85}
.steps b{display:none}
.steps span{text-transform:none;letter-spacing:.06em;font-size:.85rem}

/* hero: two buttons may wrap on desktop; phones keep them on one line */
@media(min-width:861px){.sw-copy__cta{flex-wrap:wrap}}
@media(max-width:860px){.sw-btn--ghost{padding:10px 14px;font-size:.88rem}}

/* keep a clear lane on the right for the route dots + yellow label; hero card wide enough for two buttons on one row */
@media(min-width:861px){
  .sw-copy.pos-br,.sw-copy.pos-tr,.sw-copy.pos-r{right:215px}
  .sw-copy.hero{width:min(38vw,540px)}
  .sw-copy.pos-ctr{width:min(30.5vw,440px)}
}

/* phone hero: the two buttons stack, one clean line each */
@media(max-width:860px){
  .sw-copy.hero .sw-copy__cta{flex-direction:column;align-items:stretch;gap:8px;flex-wrap:nowrap}
  .sw-copy.hero .sw-btn{text-align:center;white-space:nowrap;padding:10px 14px;font-size:.92rem}
}

/* "Business" / "Residency" lettering on the signpost boards (scene 3) */
.boardlabels{position:fixed;inset:0;z-index:17;pointer-events:none}
.boardlabels span{position:absolute;left:0;top:0;font-family:var(--head);text-transform:uppercase;letter-spacing:.02em;color:var(--navy);white-space:nowrap;line-height:1;will-change:transform,opacity;opacity:0}

/* phones: the scene 3 card uses the same bottom strip as every other card */
/* phone: the 'Start here' card sits just below the route-dot bar (bar centre + 146px = last dot's bottom, + 5px) so it stays clear of the bridge at the bottom */
/* phone: the 'Where we build' card top edge meets the cross-beam of the near-left bridge tower at the moment it fades in (74.5vh; the clip is cropped by height, so this scales with the phone) */
@media(max-width:860px){.sw-copy.card-where{top:74.5vh;bottom:auto}}
/* phone: the 'The process' and 'Peace of mind' cards sit 5px below the route-dot bar (same spot as the 'Start here' card) */
@media(max-width:860px){.sw-copy.card-process,.sw-copy.card-protect{top:calc(50% + 151px);bottom:auto}}
/* phone: the closing card sits 3px below the route-dot bar */
@media(max-width:860px){.sw-copy.card-begin{top:calc(50% + 149px);bottom:auto}}
/* phone: show the glowing yellow label beside the active dot (the engine hides it on small screens by default) */
@media(max-width:860px){.sw-route .sw-route__label{display:block;font-size:.8rem;padding:5px 11px;right:26px}}
/* phone: the label shows when a scene starts and then fades, so it never sits on top of the words painted into the clip (BUSINESS / RESIDENCY, the arch plaques) */
@media(max-width:860px){.sw-route__dot.is-active .sw-route__label{animation:routeglow 2.6s ease-in-out infinite,chipfade 5s ease forwards}}
@keyframes chipfade{0%,45%{opacity:1}100%{opacity:0}}
/* phone: those cards hold still (no scroll float), so the gap under the route-dot bar stays exactly 5px / 3px */
@media(max-width:860px){.sw-copy.pos-ctr,.sw-copy.card-process,.sw-copy.card-protect,.sw-copy.card-begin{transform:none !important}}
@media(max-width:860px){.sw-copy.pos-ctr{left:12px;right:12px;top:calc(50% + 151px);bottom:auto;width:auto;padding:18px 20px 20px}}

/* ===== "What we handle" strip (top of the contact sheet) ===== */
.cs-in--handle{display:block;margin-bottom:clamp(48px,7vw,90px)}
.cs-handle{scroll-margin-top:20px}
.cs-handle .cs-lead{margin-bottom:28px}
.wh-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);margin-top:8px}
.wh-card{background:var(--paper) var(--grain);clip-path:var(--torn);padding:30px 28px 30px;display:flex;flex-direction:column;gap:12px}
.wh-tag{font-family:var(--label);letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;color:#7a6410;margin:0}
.wh-card h3{font-family:var(--head);font-weight:400;text-transform:uppercase;line-height:1.08;font-size:clamp(1.5rem,2.4vw,2rem);margin:0;color:var(--navy);border-bottom:3px solid var(--gold);padding-bottom:8px;align-self:flex-start}
.wh-card p:not(.wh-tag){margin:0;font-size:1.02rem;line-height:1.55;color:#2c3550}
.wh-chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wh-chips li{font-family:var(--label);font-size:.8rem;color:var(--navy);background:#E8EDF4;clip-path:var(--torn);padding:7px 13px}
.wh-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px);padding:22px 28px;background:var(--navy);color:var(--cream);clip-path:var(--torn)}
.wh-cta p{margin:0;font-size:1.1rem;font-weight:500}
.wh-cta .cs-btn{display:inline-block;text-decoration:none;background:var(--gold);color:var(--navy);text-align:center}
@media(max-width:860px){.wh-grid{grid-template-columns:1fr}.wh-card{padding:26px 22px}.wh-cta{padding:22px 22px}.wh-cta .cs-btn{width:100%;box-sizing:border-box}}

/* "Latest guides" strip (filled in by tools/build-insights.mjs; empty until a guide is published) */
.cs-guides{margin-top:clamp(40px,6vw,72px)}
.cs-guides h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.cs-guides__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:22px}
.cs-guide{display:flex;flex-direction:column;gap:10px;background:var(--paper) var(--grain);clip-path:var(--torn);padding:26px 24px;text-decoration:none;color:var(--navy);transition:transform .25s}
.cs-guide:hover{transform:translateY(-3px)}
.cs-guide strong{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:1.35rem;line-height:1.1}
.cs-guide span:last-child{font-size:.96rem;line-height:1.5;color:#2c3550}
.cs-guide .gd-tag{font-family:var(--label);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:#7a6410}
.cs-guides__all{margin:18px 0 0;font-family:var(--label)}.cs-guides__all a{color:var(--navy);font-weight:600}
@media(max-width:860px){.cs-guides__grid{grid-template-columns:1fr}}

.cs-guide .gd-tag{color:#7a6410}

/* touch screens: no sticky "hover" on the route dots (a tapped dot kept its label lit after you scrolled on) */
@media (hover:none){
  .sw-route__dot:hover:not(.is-active) .sw-route__label{opacity:0}
  .sw-route__dot:hover:not(.is-active) i{transform:none;background:color-mix(in srgb,var(--sw-accent) 40%,transparent)}
  .sw-route__dot:focus,.sw-route__dot:focus-visible{outline:none}
}

/* scroll hint pinned to the route bar on every screen (visitors tend to click the dots; this tells them they can simply scroll) */
.sw-route::after{content:"Scroll to cross\Athe bridge \2193";white-space:pre;position:absolute;right:2px;bottom:calc(100% + 6px);padding:6px 11px 6px 13px;text-align:right;font-family:var(--label,'Special Elite',monospace);font-size:.72rem;line-height:1.35;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);background:rgba(251,247,238,.94);border:1.5px solid var(--navy);box-shadow:0 2px 8px rgba(27,42,74,.25);pointer-events:none;animation:swHintNudge 2.6s ease-in-out infinite}
@keyframes swHintNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.sw-route::after{animation:none}}
@media(max-width:860px){.sw-route::after{font-size:.62rem;padding:5px 8px 5px 10px;right:0}}
@media(max-width:860px){.sw-route.hint-off::after{opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}}
@media(max-width:860px){.sw-route.chip-off .sw-route__label{opacity:0 !important;transition:opacity .25s}}

/* phone-only plain line under each headline (scenes 2-6): tells an ad visitor what the scene is about without covering the picture */
.sw-copy__bodym{display:none}
@media(max-width:860px){
  .sw-copy__bodym{display:block;margin:8px 0 0;font-family:var(--body);font-size:.9rem;line-height:1.4;color:#2c3550}
}

/* phone: compact chips under the one-line text (only "Where we build" and "Peace of mind": the other cards have no room without covering the dots bar) */
@media(max-width:860px){
  .sw-copy.card-where .sw-copy__tags,.sw-copy.card-protect .sw-copy__tags{display:flex !important;flex-wrap:wrap;gap:5px;margin:8px 0 0}
  .sw-copy.card-where .sw-copy__tags li,.sw-copy.card-protect .sw-copy__tags li{font-size:.66rem !important;padding:4px 8px !important;line-height:1.15;letter-spacing:.01em;transform:none}
}

/* spam trap field: invisible to people */
.cs-trap{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.cs-form button[disabled]{opacity:.6;cursor:wait}

/* after sending: the whole form is replaced by a clear thank-you panel */
.cs-done{display:none;text-align:center;padding:18px 6px 10px;gap:10px;justify-items:center}
.cs-form.is-done > :not(.cs-done){display:none !important}
.cs-form.is-done > .cs-done{display:grid}
.cs-done[hidden]{display:none !important}
.cs-done h3{font-size:1.9rem !important}
.cs-done p{margin:0;font-family:var(--body);font-size:1.02rem;line-height:1.5;color:#2c3550;max-width:34ch}
.cs-done svg{animation:csPop .5s ease-out both}
@keyframes csPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.cs-again{margin-top:6px;background:none;border:0;border-bottom:2px solid var(--navy);padding:4px 2px;font-family:var(--label);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);cursor:pointer}
@media(prefers-reduced-motion:reduce){.cs-done svg{animation:none}}

/* WhatsApp assistant link */
.cs-wa-wrap{margin:18px 0 0}
.cs-wa,.wh-wa{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--label);font-size:.88rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.25}
.cs-wa{color:var(--navy);border:2px solid var(--navy);padding:10px 16px;background:rgba(251,247,238,.6)}
.cs-wa:hover{background:var(--navy);color:var(--cream)}
.wh-wa{flex-basis:100%;color:var(--cream);border-bottom:1px solid rgba(251,247,238,.5);justify-self:start;width:fit-content;padding:2px 0}
.wh-wa:hover{color:var(--gold)}
@media(max-width:860px){.cs-wa{width:100%;box-sizing:border-box;justify-content:center;text-align:left}}