/* ═══════════════════════════════════════════════════════════
   SEA AIR CARGO SYSTEMS — Export journey components
   Loaded ONLY by the Bangalore export hub, the destination pages and
   the homepage's export sections. Extends shared.css / motion.css; it
   renames nothing and adds no dependency.

   Visual rules (see DESIGN.md at the repo root):
   · Colour carries meaning, not decoration: gold = air, sky blue = sea.
   · One moving thing per surface. Hover/focus lift is reserved for
     links that navigate (destination cards); informational cards sit still.
   · Sentence-case labels. Numbers only where the content IS a sequence.
   · Content is visible by default; motion only animates FROM visible.
   ═══════════════════════════════════════════════════════════ */

:root{
  --air:var(--gold);
  --sea:var(--blue);
  --xp-pad:clamp(18px,4.2vw,64px);
  --xp-gap:clamp(52px,7vw,104px);
  --xp-measure:64ch;
}

/* ── Reveals on these pages: 260ms and a 12px rise (the shared default is 380ms / 20px). Stagger stays capped by the controller. ── */
.xp-wrap [data-reveal]{transition-duration:260ms}
.js-motion .xp-wrap [data-reveal]:not([data-reveal="draw"]):not([data-reveal="settle"]){transform:translateY(12px)}
.js-motion .xp-wrap [data-reveal].is-in{transform:none}

/* ── Page frame ── */
.xp-wrap{max-width:1200px;margin:0 auto;padding:0 var(--xp-pad)}
.xp-sect{padding:var(--xp-gap) 0;
  /* Below-the-fold sections skip layout and paint until they near the viewport. Measured: the destination
     pages carry ~2,200 DOM nodes, and layout was the main-thread cost, not JavaScript. 'auto' remembers
     the real height after first render, so there is no scroll jump on the way back up. */
  content-visibility:auto;contain-intrinsic-size:auto 640px}
@media print{.xp-sect{content-visibility:visible}}
.xp-sect.is-alt{background:var(--navy2)}
.xp-sect.is-deep{background:var(--navy4)}
.xp-sect > .xp-wrap > h2,
.xp-h2{
  font-family:var(--font-display);font-weight:600;color:#fff;
  font-size:clamp(30px,4.2vw,46px);line-height:1.08;letter-spacing:-.005em;
  max-width:24ch;margin-bottom:14px;text-wrap:balance
}
.xp-sub{font-size:clamp(16px,1.5vw,18px);line-height:1.75;color:var(--text-mute);max-width:var(--xp-measure);margin-bottom:clamp(24px,3.4vw,40px)}
.xp-sect h3{font-family:var(--font-display);font-size:clamp(22px,2.2vw,27px);line-height:1.2;font-weight:600;color:#fff;margin-bottom:8px}
.xp-sect p,.xp-sect li{font-size:16px;line-height:1.75}
.xp-sect p{color:var(--text-mute);max-width:var(--xp-measure)}
.xp-sect li{color:var(--text-mute)}
.xp-sect a:not(.btn-p):not(.btn-o):not(.dc):not(.rs-open){color:var(--gold);text-decoration:underline;text-decoration-color:var(--tint-4);transition:text-decoration-color var(--dur-state) var(--ease-out),color var(--dur-state) var(--ease-out)}
.xp-sect a:not(.btn-p):not(.btn-o):not(.dc):not(.rs-open):hover{text-decoration-color:var(--gold);color:var(--gold2)}
.xp-note{font-size:14px!important;line-height:1.7!important;color:var(--text-faint)!important}
.xp-air{color:var(--air)}.xp-sea{color:#5cb8e8}

/* ── Hero ── */
.xp-hero{
  position:relative;isolation:isolate;overflow:clip;
  /* clear the fixed 76px navigation, then breathe — fixes the badge sitting under the header */
  padding:calc(76px + clamp(24px,5vh,56px)) 0 clamp(36px,6vh,72px);
  background:
    radial-gradient(ellipse 60% 70% at 85% 10%,rgba(30,145,215,.10),transparent 60%),
    radial-gradient(ellipse 50% 60% at 5% 90%,rgba(201,168,76,.07),transparent 55%),
    linear-gradient(175deg,var(--navy5) 0%,var(--navy) 55%,var(--navy4) 100%)
}
.xp-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(24px,4vw,60px);align-items:start
}
.xp-hero-grid > *{min-width:0}              /* grid items may shrink below their content width */
.xp-hero h1{
  font-family:var(--font-display);font-weight:600;color:#fff;
  font-size:clamp(34px,4.9vw,58px);line-height:1.04;letter-spacing:-.01em;
  margin:14px 0 16px;max-width:19ch;text-wrap:balance
}
.xp-lede{font-size:clamp(16px,1.55vw,18.5px);line-height:1.7;color:var(--text-body);max-width:54ch}
.xp-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin-top:26px;max-width:580px}
.xp-cta .btn-p,.xp-cta .btn-o,.xq-actions .btn-p,.xq-actions .btn-o{min-height:52px;justify-content:center;text-align:center;max-width:100%;text-transform:none;letter-spacing:.2px;font-size:15px;font-weight:600;padding:12px 18px;line-height:1.35}
.xp-util{margin-top:14px;font-size:14px;color:var(--text-faint)}
.xp-util a{color:var(--text-mute);text-decoration:underline;text-decoration-color:var(--tint-4);text-underline-offset:.22em}
.xp-util a:hover{color:var(--gold)}

/* Proof ledger — only facts COMPANY_PROFILE.md marks as confirmed */
.xp-proof{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:28px;
  background:var(--tint-2);border:var(--line-hair);border-radius:var(--radius-lg);overflow:hidden
}
.xp-proof > div{background:var(--navy2);padding:13px 16px;min-width:0}
.xp-proof dt{font-family:var(--font-accent);font-size:13px;letter-spacing:.2px;color:var(--text-faint);margin-bottom:2px}
.xp-proof dd{font-size:15px;line-height:1.4;color:#fff;font-weight:500;overflow-wrap:anywhere}

/* ── Quote panel ── */
.xq{
  background:var(--surface-2);border:var(--line-soft);border-radius:var(--radius-lg);
  padding:clamp(18px,2.6vw,28px);box-shadow:var(--shadow-md);min-width:0
}
.xq h2{font-family:var(--font-display);font-weight:600;color:#fff;font-size:clamp(25px,2.7vw,32px);line-height:1.12;margin-bottom:8px;max-width:none}
.xq > p,.xq-lede{font-size:15px;line-height:1.65;color:var(--text-mute);margin-bottom:16px;max-width:none}
.xq-route{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.xq-route span{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;
  border:var(--line-soft);border-radius:999px;background:var(--surface-1);
  font-family:var(--font-accent);font-size:13.5px;color:var(--text-body)
}
.xq-route b{font-weight:600;color:#fff}
.xq-route .ico{width:14px;height:14px;color:var(--gold)}
.xq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px}
.xq-grid > *{min-width:0}
.xq-grid .full{grid-column:1/-1}
.xq .field label{font-size:13.5px;letter-spacing:.2px;text-transform:none;font-weight:500;color:var(--text-body)}
.xq .field input,.xq .field select,.xq .field textarea{min-height:48px;font-size:16px}   /* 16px stops iOS zoom-on-focus */
.xq .field textarea{min-height:88px;resize:vertical}
.xq .field-hint{font-size:12.5px;line-height:1.5;color:var(--text-faint);margin-top:-2px}

/* Mode chooser — radios restyled as ≥44px tiles; the radio stays real and focusable */
.xq-modes{border:0;padding:0;min-width:0}
.xq-modes legend{font-family:var(--font-accent);font-size:13.5px;font-weight:500;color:var(--text-body);padding:0;margin-bottom:8px}
.xq-modes-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.xq-mode{position:relative;min-width:0}
.xq-mode input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.xq-mode span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:48px;padding:8px 6px;gap:8px;border:var(--line-soft);border-radius:var(--radius);background:var(--surface-1);
  font-family:var(--font-accent);font-size:13.5px;line-height:1.3;color:var(--text-body);
  transition:border-color var(--dur-state) var(--ease-out),background-color var(--dur-state) var(--ease-out),color var(--dur-state) var(--ease-out)
}
.xq-mode.is-air span::before,.xq-mode.is-sea span::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--air)}
.xq-mode.is-sea span::before{background:var(--sea)}
.xq-mode input:hover + span{border-color:var(--tint-4);background:var(--tint-1)}
.xq-mode input:checked + span{border-color:var(--gold);background:var(--tint-2);color:#fff;font-weight:600}
.xq-mode input:focus-visible + span{outline:2px solid var(--gold2);outline-offset:2px}
.xq-modes.is-error .xq-mode span{border-color:var(--red)}
.xq-modes .field-err{margin-top:6px;font-family:var(--font-accent);font-size:12px;color:var(--red);opacity:0;transition:opacity var(--dur-state) var(--ease-out)}
.xq-modes.is-error .field-err{opacity:1}

/* Optional detail — native <details>, so it works without JS */
.xq-more{margin-top:16px;border:var(--line-hair);border-radius:var(--radius);background:var(--surface-1)}
.xq-more summary{
  list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;font-family:var(--font-accent);font-size:14px;font-weight:500;color:var(--text-body)
}
.xq-more summary::-webkit-details-marker{display:none}
.xq-more summary::after{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--dur-state) var(--ease-out);flex:none}
.xq-more[open] summary::after{transform:rotate(180deg)}
.xq-more summary:focus-visible{outline:2px solid var(--gold2);outline-offset:2px;border-radius:var(--radius)}
.xq-more .xq-grid{padding:4px 14px 16px}

.xq-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
.xq-actions .btn-p,.xq-actions .btn-o{min-height:50px;width:100%;justify-content:center;text-align:center}
.xq-reassure{margin-top:14px;font-size:13.5px;line-height:1.65;color:var(--text-faint);max-width:none}

/* Success — what happens next (the sequence is real, so it is numbered) */
.xq-success{display:none}
.xq-success.show{display:block}
.xq-success h3{font-family:var(--font-display);font-size:28px;line-height:1.15;color:#fff;margin-bottom:8px}
.xq-success p{color:var(--text-body);font-size:15.5px;line-height:1.7}
.xq-success ol{margin:16px 0 18px;padding-left:0;list-style:none;display:grid;gap:10px;counter-reset:xqn}
.xq-success li{counter-increment:xqn;position:relative;padding-left:38px;font-size:15px;line-height:1.55;color:var(--text-body)}
.xq-success li::before{
  content:counter(xqn);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-accent);font-size:13px;font-weight:600;
  background:var(--tint-2);border:var(--line-strong);color:var(--gold)
}
.xq:focus,.xq-success:focus{outline:none}
.xq-success:focus-visible{outline:2px solid var(--gold2);outline-offset:6px;border-radius:var(--radius)}

@media(min-width:1000px) and (min-height:900px){
  .xp-hero-grid > .xq{position:sticky;top:96px}
}

/* ── Tables (cost / timing / scope) ── */
.xp-tablewrap{border:var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-1)}
.xp-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.xp-table caption{text-align:left;padding:14px 18px 6px;font-family:var(--font-accent);font-size:14px;color:var(--text-faint)}
.xp-table th,.xp-table td{padding:13px 18px;text-align:left;vertical-align:top;border-top:var(--line-hair)}
.xp-table thead th{font-family:var(--font-accent);font-size:13px;font-weight:600;color:var(--gold);background:var(--tint-1);border-top:0}
.xp-table tbody th{font-weight:600;color:#fff;width:24%}
.xp-table td{color:var(--text-mute)}
.xp-table td strong{color:var(--text-body);font-weight:600}
@media(max-width:700px){
  .xp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .xp-table,.xp-table tbody,.xp-table tr,.xp-table th,.xp-table td{display:block;width:100%}
  .xp-table tr{border-top:var(--line-soft);padding:6px 0}
  .xp-table tr:first-child{border-top:0}
  .xp-table th,.xp-table td{border:0;padding:6px 16px}
  .xp-table tbody th{width:100%;padding-top:10px;font-size:16px}
  .xp-table td[data-label]::before{content:attr(data-label);display:block;font-family:var(--font-accent);font-size:12.5px;color:var(--text-faint);margin-bottom:1px}
}

/* ── Mode comparison — air / LCL / FCL ── */
.xp-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.xp-modes > *{min-width:0}
.xp-mode{background:var(--surface-1);border:var(--line-soft);border-radius:var(--radius-lg);padding:22px 22px 20px}
.xp-mode::before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--air);margin-bottom:16px}
.xp-mode.is-sea::before{background:var(--sea)}
.xp-mode h3{margin-bottom:4px}
.xp-mode .xp-tag{font-family:var(--font-accent);font-size:13px;color:var(--text-faint);margin-bottom:12px;display:block}
.xp-mode ul{list-style:none;display:grid;gap:9px}
.xp-mode li{font-size:15px;line-height:1.6;padding-left:18px;position:relative}
.xp-mode li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--gold)}
.xp-mode.is-sea li::before{background:var(--sea)}
.xp-mode li strong{color:var(--text-body);font-weight:600}

/* ── Responsibilities ── */
.xp-resp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.xp-resp > *{min-width:0}
.xp-resp > div{background:var(--surface-1);border:var(--line-soft);border-radius:var(--radius-lg);padding:22px}
.xp-resp h3{font-size:22px;margin-bottom:10px}
.xp-resp ul{list-style:none;display:grid;gap:9px}
.xp-resp li{font-size:15px;line-height:1.6;padding-left:22px;position:relative}
.xp-resp li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.xp-resp > div.is-other li::before{border-color:var(--text-faint);width:7px;height:7px;border:0;border-top:2px solid var(--text-faint);transform:none;top:.8em;height:0}

/* ── Process line — pickup → clearance → gateway → destination → delivery ──
   Explanatory, not a live status. The line draws once when it scrolls in. */
.xp-flow{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;list-style:none;padding:0;margin:0}
.xp-flow::before{                         /* the route */
  content:"";position:absolute;left:12.5%;right:12.5%;top:17px;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--sea));opacity:.55;
  transform-origin:left center
}
.xp-flow > li{position:relative;min-width:0;text-align:left;padding:0}
.xp-node{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin:0 auto 14px;border-radius:50%;
  background:var(--navy);border:2px solid var(--gold);color:var(--gold);
  font-family:var(--font-accent);font-size:14px;font-weight:600
}
.xp-flow > li:nth-child(n+4) .xp-node{border-color:var(--sea);color:#7cc8f0}
.xp-flow h3{font-size:21px;text-align:center;margin-bottom:6px}
.xp-flow p{font-size:14.5px;line-height:1.6;text-align:center;margin:0 auto}
.xp-who{display:block;margin:10px auto 0;width:max-content;max-width:100%;padding:3px 10px;border-radius:999px;border:var(--line-strong);font-family:var(--font-accent);font-size:12.5px;color:var(--text-body);text-align:center}
.xp-who.is-carrier{border-color:rgba(138,157,181,.5);color:var(--text-mute)}
.xp-who.is-dest{border-color:rgba(30,145,215,.5);color:#9ad4f3}
@media(max-width:900px){
  .xp-flow{grid-template-columns:1fr;gap:6px}
  .xp-flow::before{left:17px;right:auto;top:18px;bottom:18px;width:2px;height:auto;background:linear-gradient(180deg,var(--gold),var(--sea));transform-origin:top center}
  .xp-flow > li{padding:0 0 18px 56px;min-height:60px}
  .xp-node{position:absolute;left:0;top:0;margin:0}
  .xp-flow h3,.xp-flow p{text-align:left;margin-left:0}
  .xp-who{margin:8px 0 0}
}
/* the line draws once, only where the reveal controller is active */
.js-motion .xp-flow[data-reveal]:not(.is-in)::before{transform:scaleX(0)}
.js-motion .xp-flow[data-reveal]:not(.is-in) .xp-node{opacity:.25}
.xp-flow::before{transition:transform var(--dur-focal) var(--ease-out)}
.xp-node{transition:opacity var(--dur-move) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger-step))}
@media(max-width:900px){.js-motion .xp-flow[data-reveal]:not(.is-in)::before{transform:scaleY(0)}}

/* ── Destination cards — the one hover-lift on the page, because they navigate ── */
.dc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:0}
.dc-grid > li{min-width:0;display:flex}
.dc{
  display:flex;flex-direction:column;gap:8px;width:100%;min-height:100%;
  padding:20px 20px 18px;border:var(--line-soft);border-radius:var(--radius-lg);background:var(--surface-1);
  text-decoration:none;color:inherit;
  transition:transform 200ms var(--ease-out),border-color 200ms var(--ease-out),background-color 200ms var(--ease-out)
}
.dc:hover,.dc:focus-visible{transform:translateY(-3px);border-color:var(--gold);background:var(--tint-1)}
.dc:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.dc h3{font-size:24px;margin:0;color:#fff}
.dc p{font-size:14.5px!important;line-height:1.6!important;color:var(--text-mute)!important;margin:0}
.dc-modes{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.dc-modes span{font-family:var(--font-accent);font-size:12.5px;padding:3px 9px;border-radius:999px;border:var(--line-strong);color:var(--text-body)}
.dc-modes .is-sea{border-color:rgba(30,145,215,.5);color:#9ad4f3}
.dc-go{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-accent);font-size:14px;font-weight:500;color:var(--gold)}
.dc-go .ico{width:14px;height:14px;transition:transform 200ms var(--ease-out)}
.dc:hover .dc-go .ico,.dc:focus-visible .dc-go .ico{transform:translateX(3px)}

/* ── Export / Import paths (homepage) ── */
.xp-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.xp-path{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,34px);border:var(--line-soft);border-radius:var(--radius-lg);background:var(--surface-1);min-width:0}
.xp-path.is-export{border-color:var(--tint-4);background:linear-gradient(160deg,var(--tint-2),var(--surface-1) 60%)}
.xp-path h3{font-size:clamp(26px,3vw,34px);margin:0}
.xp-path ul{list-style:none;display:grid;gap:7px;margin:4px 0 10px}
.xp-path li{font-size:15px;line-height:1.55;padding-left:18px;position:relative}
.xp-path li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--gold)}
.xp-path .btn-p,.xp-path .btn-o{align-self:flex-start;min-height:48px}

/* ── Planning example / callouts ── */
.xp-callout{border:var(--line-strong);border-radius:var(--radius-lg);background:var(--tint-1);padding:clamp(18px,2.4vw,26px)}
.xp-callout.is-sea{border-color:rgba(30,145,215,.42);background:rgba(30,145,215,.05)}
.xp-callout h3{margin-bottom:6px}
.xp-callout p{margin-bottom:10px}
.xp-callout p:last-child{margin-bottom:0}
.xp-label{display:inline-block;font-family:var(--font-accent);font-size:13px;font-weight:600;color:var(--navy);background:var(--gold);padding:3px 10px;border-radius:999px;margin-bottom:10px}
.xp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.xp-two > *{min-width:0}
.xp-list{list-style:none;display:grid;gap:9px;margin:0}
.xp-list li{padding-left:22px;position:relative;font-size:15.5px;line-height:1.65}
.xp-list li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}

/* ── Sources / review ── */
.xp-sources{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.xp-sources li{font-size:14.5px;line-height:1.6;color:var(--text-mute);overflow-wrap:anywhere}
.xp-review{margin-top:22px;padding-top:16px;border-top:var(--line-hair);font-size:14px;line-height:1.65;color:var(--text-faint);max-width:none!important}

/* ── FAQ (uses shared .faq-item look; this just sets the wrap) ── */
.xp-faq{display:grid;gap:12px;max-width:860px}
.xp-faq details{border:var(--line-soft);border-radius:var(--radius-lg);background:var(--surface-1)}
.xp-faq summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;font-family:var(--font-display);font-size:clamp(19px,2vw,22px);font-weight:600;color:#fff;line-height:1.35}
.xp-faq summary::-webkit-details-marker{display:none}
.xp-faq summary::after{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--dur-state) var(--ease-out);flex:none}
.xp-faq details[open] summary::after{transform:rotate(180deg)}
.xp-faq summary:focus-visible{outline:2px solid var(--gold2);outline-offset:2px;border-radius:var(--radius-lg)}
.xp-faq details > div{padding:0 20px 18px}
.xp-faq details p{margin:0;max-width:70ch}

/* ── CTA band ── */
.xp-band{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:center;padding:clamp(24px,3.4vw,40px);border:var(--line-strong);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--tint-2),rgba(30,145,215,.05))}
.xp-band h2{font-family:var(--font-display);font-size:clamp(28px,3.4vw,40px);line-height:1.1;font-weight:600;color:#fff;margin:0 0 8px;max-width:22ch}
.xp-band p{margin:0;color:var(--text-body)}
.xp-band .xp-cta{margin:0;max-width:none}

/* ── Related ── */
.xp-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.xp-related a{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:var(--line-soft);border-radius:var(--radius);background:var(--surface-1);color:#fff!important;text-decoration:none!important;transition:border-color var(--dur-state) var(--ease-out),background-color var(--dur-state) var(--ease-out)}
.xp-related a:hover,.xp-related a:focus-visible{border-color:var(--gold);background:var(--tint-1)}
.xp-related a:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.xp-related strong{font-family:var(--font-accent);font-size:13px;font-weight:500;color:var(--text-faint)}
.xp-related span{font-size:15.5px;line-height:1.4}

/* ═══════════════════════════════════════════════════════════
   ROUTE SELECTOR — the one signature interaction (hub page)
   Choose a destination: a schematic arc draws from Bangalore
   once, then rests; the panel shows gateway, modes and the
   ordinary link to the destination page. Without JS the section
   is hidden and the destination cards (real links) do the job.
   ═══════════════════════════════════════════════════════════ */
.rs{display:none}
/* shown only after export-hub.js has run (adds .is-ready), so a blocked or failed script never leaves an empty widget */
.rs.is-ready{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.2vw,24px)}
.rs > *{min-width:0}
.rs-map{position:relative;border:var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(ellipse 70% 80% at 50% 40%,var(--navy3),var(--navy4))}
.rs-svg{display:block;width:100%;height:auto;aspect-ratio:1000/380}
.rs-land{fill:rgba(138,157,181,.16);stroke:rgba(138,157,181,.28);stroke-width:.6;vector-effect:non-scaling-stroke}
.rs-grat{stroke:rgba(201,168,76,.07);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.rs-arc{fill:none;stroke-width:2.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}   /* no non-scaling-stroke: it breaks pathLength dashes */
.rs-arc.is-air{stroke:var(--air)}
.rs-arc.is-sea{stroke:var(--sea)}
.rs-arc.is-on{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--ease-out),opacity 120ms linear}
.rs-arc.is-on.is-instant{transition:none}
.rs-node{r:5.5px;fill:var(--navy);stroke:var(--text-faint);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:fill var(--dur-state) var(--ease-out),stroke var(--dur-state) var(--ease-out),r var(--dur-state) var(--ease-out)}
.rs-node.is-on{fill:var(--gold);stroke:var(--gold2);r:7.5px}
.rs-origin{fill:var(--gold);stroke:var(--navy);stroke-width:2;vector-effect:non-scaling-stroke}
.rs-ring{fill:none;stroke:var(--gold);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.55}
.rs-tag{font-family:var(--font-accent);font-size:15px;fill:var(--text-body);paint-order:stroke;stroke:var(--navy4);stroke-width:4px;stroke-linejoin:round}
.rs-tag.is-origin{fill:#fff;font-weight:600}
.rs-tag.is-on{fill:#fff;font-weight:600}
.rs-cap{font-size:12.5px;line-height:1.5;color:var(--text-faint);margin:0;padding:8px 14px 12px;max-width:none;border-top:var(--line-hair)}

.rs-side{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(14px,2vw,22px);align-items:start;min-width:0}
.rs-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rs-chip{
  appearance:none;cursor:pointer;min-height:48px;padding:8px 12px;text-align:left;
  display:flex;align-items:center;gap:8px;
  border:var(--line-soft);border-radius:var(--radius);background:var(--surface-1);color:var(--text-body);
  font-family:var(--font-accent);font-size:14.5px;line-height:1.3;
  transition:border-color var(--dur-state) var(--ease-out),background-color var(--dur-state) var(--ease-out),color var(--dur-state) var(--ease-out)
}
.rs-chip i{width:8px;height:8px;border-radius:50%;background:var(--text-faint);flex:none;transition:background-color var(--dur-state) var(--ease-out)}
.rs-chip:hover{border-color:var(--tint-5);background:var(--tint-1)}
.rs-chip:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.rs-chip[aria-checked="true"]{border-color:var(--gold);background:var(--tint-2);color:#fff;font-weight:600}
.rs-chip[aria-checked="true"] i{background:var(--gold)}
.rs-panel{border:var(--line-strong);border-radius:var(--radius-lg);background:var(--surface-2);padding:18px 20px;min-width:0}
.rs-panel h3{font-size:24px;margin-bottom:4px}
.rs-panel dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 14px;font-size:14.5px;line-height:1.5}
.rs-panel dt{font-family:var(--font-accent);color:var(--text-faint);font-size:13px;padding-top:1px}
.rs-panel dd{color:var(--text-body)}
.rs-panel-actions{display:flex;flex-wrap:wrap;gap:10px}
.rs-panel-actions .btn-p,.rs-panel-actions .btn-o{min-height:46px;padding:10px 18px;font-size:12px}
.rs-open{display:inline-flex}

/* ── Mobile composition ──
   Under 820px the map becomes a slim strip (the arc still draws), the destination
   chips take the lead as a 2-column grid of full-size touch targets, and the panel
   follows. Nothing here captures vertical scroll: the SVG has no gesture handlers. */
@media(max-width:820px){
  .rs-side{grid-template-columns:minmax(0,1fr)}
  .rs-svg{aspect-ratio:1000/374}
  .rs-tag{font-size:0}
  .rs-tag.is-on,.rs-tag.is-origin{font-size:30px}
  .rs-node{r:9px}
  .rs-node.is-on{r:12px}
  .rs-origin{r:10px}
  .rs-ring{r:18px}
  .rs-arc{stroke-width:5}
}

/* ── Responsive grid collapse ── */
@media(max-width:1100px){.dc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .xp-hero-grid{grid-template-columns:minmax(0,1fr)}
  .xp-hero h1{max-width:20ch}
  .xp-modes,.xp-resp{grid-template-columns:1fr}
  .xp-paths,.xp-two{grid-template-columns:1fr}
  .xp-band{grid-template-columns:1fr}
}
@media(max-width:560px){
  .dc-grid{grid-template-columns:1fr}
  .xq-grid{grid-template-columns:1fr}
  .xq-modes-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xp-proof{grid-template-columns:1fr}
  .xp-cta{grid-template-columns:1fr}
  .rs-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-panel dl{grid-template-columns:1fr;gap:2px}
  .rs-panel dt{margin-top:8px}
}
/* short landscape screens: keep the first screen useful */
@media(max-height:560px) and (min-width:700px){
  .xp-hero{padding-top:calc(76px + 14px);padding-bottom:28px}
  .xp-hero h1{font-size:clamp(30px,4.4vw,44px);margin:8px 0 10px}
  .xp-proof{margin-top:16px}
}

/* ── Reduced motion: keep every state legible, remove travel ── */
@media(prefers-reduced-motion:reduce){
  .rs-arc,.rs-arc.is-on{transition:none!important}
  .dc:hover,.dc:focus-visible{transform:none}
  .dc:hover .dc-go .ico,.dc:focus-visible .dc-go .ico{transform:none}
  .xp-flow::before,.xp-node{transition:none!important}
  .js-motion .xp-flow[data-reveal]:not(.is-in)::before{transform:none}
  .js-motion .xp-flow[data-reveal]:not(.is-in) .xp-node{opacity:1}
}