/* showcase.css — 9 Oct 2026: home-page showcase (3D hero tiles, CEO card, animated
   perks, booking demo, offices, India–Nepal timeline teaser, route & live strip,
   explore/tours teaser, colourful how-to-book guide). Loads after themes.css and
   BEFORE depth.css. Owner of this file: HOME work package.

   Owner (9 Oct 2026): "home page attractive, smooth - I want to keep looking at
   it", Android-Pixel smooth. Rules here:
   • depth.css loads AFTER this file, so every rule that must beat a depth.css
     `.home-hero …` / `.home-feat …` rule carries an id (#homeHero, #homeFeat …).
     depth.css itself may not hold rotate / blur / :is / @keyframes (tests), so
     every 3D tilt, ping and loop lives here.
   • motion moves transform / opacity only; every loop runs only while its
     section is on screen (.sc-live, 21-showcase.js) and stops for
     prefers-reduced-motion and html[data-motion="reduced"];
   • colours come from the design tokens (--royal, --surface, --ink …) plus the
     --sc-* / --pk-* tokens below, redefined for dark and AMOLED;
   • class prefix sc- / pk- (not in redesign.css's "decoration off" kill list). */

/* =====================================================================
   0. TOKENS
   ===================================================================== */
:root {
  --sc-ease: var(--md-ease-emph-decel, cubic-bezier(.05, .7, .1, 1));
  --sc-ease-std: var(--md-ease-standard, cubic-bezier(.2, 0, 0, 1));
  --sc-spring: var(--md-spring, cubic-bezier(.34, 1.36, .64, 1));
  --sc-card: var(--surface, #FFFFFF);
  --sc-ink: var(--ink, #0F1B2D);
  --sc-muted: var(--muted, #55657F);
  --sc-line: var(--line, #E2E8F2);
  /* TRACK MY BUS: teal family, white ink */
  --sc-tr-a: #0F9284; --sc-tr-b: #075F55; --sc-tr-e1: #064E46; --sc-tr-e2: #033831; --sc-tr-sh: rgba(3, 56, 49, .55); --sc-tr-ink: #FFFFFF;
  /* MY TICKET: saffron / gold family, dark ink */
  --sc-my-a: #FFCF66; --sc-my-b: #F39224; --sc-my-e1: #C96E0E; --sc-my-e2: #9C5207; --sc-my-sh: rgba(156, 82, 7, .5); --sc-my-ink: #3A1C00;
  /* India + Nepal + brand accents */
  --sc-saffron: #F28A1E; --sc-gold: #F5B942; --sc-crimson: #DC143C; --sc-np-blue: #003893; --sc-in-green: #138808; --sc-in-saffron: #FF9933;
  /* perk tones: icon colour / tonal container (Material You style) */
  --pk-ac: #0B6FC2;     --pk-ac-c: #DCEEFF;
  --pk-berth: #6236C4;  --pk-berth-c: #ECE4FF;
  --pk-quick: #A35200;  --pk-quick-c: #FFEBCC;
  --pk-gps: #087D70;    --pk-gps-c: #D5F4EF;
  --pk-charge: #3A7F12; --pk-charge-c: #E2F5D4;
  --pk-wa: #0E7A44;     --pk-wa-c: #D8F6E5;
  --pk-aid: #C1112D;    --pk-aid-c: #FFE0E5;
  --pk-help: #1D58B0;   --pk-help-c: #DFEAFF;
}
:root[data-theme="dark"] {
  --sc-tr-a: #0E8476; --sc-tr-b: #08514A; --sc-tr-e1: #063F39; --sc-tr-e2: #032824; --sc-tr-sh: rgba(0, 0, 0, .6);
  --sc-my-a: #F4BC52; --sc-my-b: #DB7C14; --sc-my-e1: #A65B09; --sc-my-e2: #6F3C05; --sc-my-sh: rgba(0, 0, 0, .6); --sc-my-ink: #2A1300;
  --pk-ac: #8DC8FF;     --pk-ac-c: #123152;
  --pk-berth: #C7B0FF;  --pk-berth-c: #2B2050;
  --pk-quick: #FFC47E;  --pk-quick-c: #3B2709;
  --pk-gps: #72E1D2;    --pk-gps-c: #0B3934;
  --pk-charge: #A8E27C; --pk-charge-c: #1D3511;
  --pk-wa: #70E4A4;     --pk-wa-c: #0D3922;
  --pk-aid: #FF9DAD;    --pk-aid-c: #48141F;
  --pk-help: #A0C2FF;   --pk-help-c: #172B50;
}
:root[data-display="amoled"] {
  --sc-card: #101822;
  --pk-ac-c: #0C2440; --pk-berth-c: #20173F; --pk-quick-c: #2E1E06; --pk-gps-c: #072B27;
  --pk-charge-c: #15280B; --pk-wa-c: #082B19; --pk-aid-c: #370E17; --pk-help-c: #10203F;
}

/* =====================================================================
   1. HOME DISPLAY ORDER (PLAN.md map). The pinned redesign.css lines stay
   verbatim (hero 0, booking 1, next trip 2, facilities 3, QuickBot 4); this
   file loads after redesign.css + anim.css, so equal !important rules here
   win. HOMEINFO sets its own four (#homeFares 7, #homeRoute 9,
   #homeIndiaNepal 11, #homeExplore 12) in homeinfo.css.
   ===================================================================== */
/* 16 Oct 2026 (owner: "home page minimal professional, bus mathi, CEO intro ni"):
   the four-step sample demo (#demoHead + #animBooking) is off the home page, and
   the two slots it freed go to the coach + offices card (#topHero) and the founder
   (#homeCeo). The information band that used to be 6 moves down one to 7. */
#view-home > #topHero { order: 5 !important; }
#view-home > #homeCeo { order: 6 !important; }   /* homeinfo.css moved #homeFares to 7 */
/* 10 Oct 2026 (HD pack): the live-tracking section (#homeLive) takes the free slot 10
   between the route (9) and the India-Nepal band (11). The staged coach hero (#top)
   has no order here on purpose: redesign.css keeps it hidden until the owner says yes. */
#view-home > #homeLive { order: 10 !important; }
#view-home > #homeBiz { order: 12 !important; }   /* 10 Oct 2026 (BIZ): ties with #homeExplore - DOM order keeps it right after */
#view-home > #animRoute { order: 13 !important; }
#view-home > #bookHelp { order: 14 !important; }
#view-home > #trust { order: 30 !important; }
#view-home > #agrBar { order: 31 !important; }
#view-home > #realReviews { order: 32 !important; }
#view-home > #homeMoreBar { order: 33 !important; }
#view-home > #homeExtra { order: 34 !important; }
#view-home > #homeMore { order: 35 !important; }

/* =====================================================================
   2. SHARED PIECES — section heads, colour buttons, ripple, reveal, flags
   ===================================================================== */
.sc-head { margin: 0 2px 12px; }
.sc-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 11px; border-radius: 999px;
  font: 800 12px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--royal); background: var(--royal-tint); }
.sc-eyebrow .ic { width: 14px; height: 14px; }
.sc-h2 { margin: 8px 0 2px; font: 800 21px/1.28 var(--font-sans); color: var(--sc-ink); letter-spacing: 0; text-wrap: balance; }
.sc-sub { margin: 4px 0 0; font: 500 14.5px/1.5 var(--font-sans); color: var(--sc-muted); }
.sc-h2:lang(ne), .sc-h2:lang(hi) { line-height: 1.4; }

.sc-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; font: 800 15px/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
  color: #FFFFFF; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--sc-ease), box-shadow .2s ease, filter .2s ease; }
.sc-btn .ic { width: 20px; height: 20px; flex: none; }
.sc-btn:hover { filter: brightness(1.05); }
.sc-btn:active { transform: translateY(2px) scale(.985); }
.sc-btn-royal { color: var(--on-royal, #FFFFFF); background: linear-gradient(180deg, color-mix(in srgb, var(--royal) 78%, #FFFFFF) 0%, var(--royal) 52%, var(--royal-strong, #003D80) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 color-mix(in srgb, var(--royal-strong, #003D80) 75%, #000000), 0 10px 18px -10px color-mix(in srgb, var(--royal) 80%, transparent); }
.sc-btn-gold { color: #3A1C00; background: linear-gradient(180deg, #FFD978 0%, #F7AE33 55%, #EC8B12 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 3px 0 #B5650A, 0 10px 18px -10px rgba(236, 139, 18, .8); }
.sc-btn-wa { background: linear-gradient(180deg, #22B463 0%, #158A4A 55%, #0C7139 100%); text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #08562B, 0 10px 18px -10px rgba(12, 113, 57, .8); }

/* the Pixel-style press ripple (21-showcase.js adds one span per press) */
.sc-rip { position: absolute; z-index: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: currentColor; opacity: .22;
  pointer-events: none; transform: scale(0); animation: scRipple .6s var(--sc-ease-std) forwards; }

/* reveal on scroll: only when the observer runs (html.sc-io), never hiding
   anything for a browser without it; already-visible blocks are marked in */
.sc-reveal { transition: opacity .6s var(--sc-ease), transform .75s var(--sc-ease); }
html.sc-io .sc-reveal:not(.sc-in) { opacity: 0; transform: translateY(18px); }

/* flags: BRAND's 23-flags.js replaces each placeholder with the drawn SVG
   (keeping class="flg"); the placeholder keeps the same box, so no shift */
span.flg[data-flag] { display: inline-block; height: 14px; width: 21px; vertical-align: middle; }
span.flg[data-flag="NP"] { width: 12px; }
#view-home .flg, footer .flg { flex: none; vertical-align: middle; }

/* =====================================================================
   3. HERO — emblem on a glow, live name between the flags, and TRACK /
   MY TICKET as their own raised colour keys with depth, gloss and tilt
   ===================================================================== */
#homeHero .hh-card { isolation: isolate; }
#homeHero .hh-brand, #homeHero .hh-actions { position: relative; z-index: 1; }
/* a slow light sweep across the card (rests most of the time) */
#homeHero .sc-hh-sheen { position: absolute; z-index: 0; inset: -30% -80%; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(-55%); }
#homeHero.sc-live .sc-hh-sheen { animation: scSheen 11s var(--sc-ease-std) 1.2s infinite; }
/* the foot rule in both flags' colours: India saffron · white · green, Nepal crimson · blue */
#homeHero .hh-card::after { height: 4px; opacity: 1;
  background: linear-gradient(90deg, var(--sc-in-saffron) 0 18%, #FFFFFF 18% 30%, var(--sc-in-green) 30% 48%, var(--sc-crimson) 48% 84%, var(--sc-np-blue) 84% 100%); }
/* the emblem: no tile - a soft halo and a light rim so the blue globe reads on navy */
#homeHero .hh-logo-tile { position: relative; }
#homeHero .hh-logo-tile::before { content: ""; position: absolute; inset: -10% -6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .28), rgba(255, 214, 120, 0)); opacity: .7; }
#homeHero .hh-logo { position: relative; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)) drop-shadow(0 0 6px rgba(255, 255, 255, .25)) drop-shadow(0 5px 10px rgba(0, 0, 0, .35)); }
#homeHero.sc-live .hh-logo { animation: scFloat 6s ease-in-out infinite; }
#homeHero.sc-live .hh-logo-tile::before { animation: scGlow 6s ease-in-out infinite; }
/* the company name between the India and Nepal flags */
#homeHero .sc-hh-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 5px; color: #FFE2A8;
  font: 800 12px/1.3 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; }
#homeHero .sc-hh-eyebrow b { font: inherit; color: inherit; }
#homeHero .sc-hh-eyebrow .flg { height: 15px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
#homeHero span.flg[data-flag] { width: 22px; }
#homeHero span.flg[data-flag="NP"] { width: 13px; }

/* the three keys: perspective tilt (vars set by 21-showcase.js) + press-in */
#homeHero .hh-act { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  transform: perspective(640px) rotateX(var(--sc-rx, 0deg)) rotateY(var(--sc-ry, 0deg)) translateY(var(--sc-ty, 0px));
  transition: transform .45s var(--sc-ease), box-shadow .2s ease, filter .2s ease; }
#homeHero .hh-act.sc-tilting { transition: transform .1s linear, box-shadow .2s ease; }
#homeHero .hh-act:active { --sc-ty: 3px; }
#homeHero .hh-act > * { position: relative; z-index: 1; }
/* glossy top light on every key */
#homeHero .hh-act::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 55%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0)); }
#homeHero .hh-act.hh-book::before { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); }

/* TRACK MY BUS — teal, a radar with two GPS pings */
#homeHero .hh-act.hh-track { color: var(--sc-tr-ink); text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
  background: radial-gradient(120% 90% at 85% 0%, rgba(140, 255, 230, .22), rgba(140, 255, 230, 0) 60%), linear-gradient(165deg, var(--sc-tr-a) 0%, var(--sc-tr-b) 100%);
  border: 1px solid rgba(255, 255, 255, .2); border-top-color: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -14px 22px -14px rgba(0, 0, 0, .45), 0 2px 0 var(--sc-tr-e1), 0 4px 0 var(--sc-tr-e2), 0 14px 22px -10px var(--sc-tr-sh); }
#homeHero .hh-act.hh-track:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -10px 18px -12px rgba(0, 0, 0, .45), 0 1px 0 var(--sc-tr-e1), 0 5px 10px -6px var(--sc-tr-sh); }
#homeHero .hh-act.hh-track small, #homeHero .hh-act.hh-my small { color: inherit; opacity: .92; }
#homeHero .hh-track .hh-ic { position: relative; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 3px 0 rgba(0, 40, 35, .45), 0 8px 12px -6px rgba(0, 0, 0, .5); }
#homeHero .hh-track .hh-ic .ic { position: relative; z-index: 1; }
.sc-ping { position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(255, 255, 255, .75); opacity: 0; pointer-events: none; }
#homeHero.sc-live .hh-track .sc-ping { animation: scPing 2.6s var(--sc-ease-std) infinite; }
#homeHero.sc-live .hh-track .sc-ping2 { animation-delay: 1.3s; }

/* MY TICKET — saffron / gold, a ticket with a tick */
#homeHero .hh-act.hh-my { color: var(--sc-my-ink);
  background: radial-gradient(120% 90% at 85% 0%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, var(--sc-my-a) 0%, var(--sc-my-b) 100%);
  border: 1px solid rgba(255, 255, 255, .35); border-top-color: rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -14px 22px -14px rgba(120, 50, 0, .45), 0 2px 0 var(--sc-my-e1), 0 4px 0 var(--sc-my-e2), 0 14px 22px -10px var(--sc-my-sh); }
#homeHero .hh-act.hh-my:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -10px 18px -12px rgba(120, 50, 0, .45), 0 1px 0 var(--sc-my-e1), 0 5px 10px -6px var(--sc-my-sh); }
#homeHero .hh-my .hh-ic { color: #8A3D00;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35));
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(150, 70, 0, .14), 0 3px 0 rgba(150, 70, 0, .35), 0 8px 12px -6px rgba(120, 50, 0, .5); }
#homeHero.sc-live .hh-my .hh-ic .ic { animation: scTicket 5s ease-in-out infinite; }
/* BOOK keeps depth.css's royal key; its icon chip gets the same raised look */
#homeHero .hh-book .hh-ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 3px 0 rgba(0, 30, 80, .4), 0 8px 12px -6px rgba(0, 0, 0, .45); }
#homeHero .hh-act:focus-visible { outline: 3px solid #FFD54F; outline-offset: 3px; }

/* =====================================================================
   4. AMENITIES AS LIVING CARDS (#homeFeat, 8 items kept for the tests)
   ===================================================================== */
#view-home > #homeFeat { margin-top: 24px; }
#homeFeat .hf-list.sc-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none;
  background: none; border: 0; border-radius: 0; box-shadow: none; }
#homeFeat .sc-perks > li { display: block; min-width: 0; text-align: left; }
#homeFeat .sc-perk { --t: var(--pk-help); --tc: var(--pk-help-c);
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  width: 100%; height: 100%; min-height: 128px; margin: 0; padding: 14px 14px 13px; border-radius: 22px; text-align: left; text-decoration: none;
  color: var(--sc-ink); font: inherit; cursor: default; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--tc) 85%, transparent) 0%, transparent 62%), var(--sc-card);
  border: 1px solid color-mix(in srgb, var(--t) 20%, var(--sc-line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 0 color-mix(in srgb, var(--t) 16%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--t) 70%, transparent);
  transition: transform .3s var(--sc-ease), box-shadow .3s ease; }
#homeFeat .sc-perk.sc-go { cursor: pointer; }
#homeFeat .sc-perk.sc-go:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 color-mix(in srgb, var(--t) 20%, transparent), 0 16px 26px -14px color-mix(in srgb, var(--t) 75%, transparent); }
#homeFeat .sc-perk.sc-go:active { transform: scale(.97); }
#homeFeat .sc-perk .hf-ic { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; flex: none;
  background: var(--tc); color: var(--t);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 color-mix(in srgb, var(--t) 24%, transparent), 0 8px 14px -8px color-mix(in srgb, var(--t) 70%, transparent); }
#homeFeat .sc-perk .hf-ic .ic { position: relative; z-index: 1; width: 24px; height: 24px; }
#homeFeat .sc-perk .sc-ping { border-color: color-mix(in srgb, var(--t) 70%, transparent); }
#homeFeat .sc-pk-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 4px; }
#homeFeat .sc-perk .hf-tx { font: 800 14.5px/1.3 var(--font-sans); color: var(--sc-ink); overflow-wrap: anywhere; }
#homeFeat .sc-perk small { font: 600 12.5px/1.4 var(--font-sans); color: var(--sc-muted); }
#homeFeat .sc-perk .hf-tx:lang(ne), #homeFeat .sc-perk .hf-tx:lang(hi), #homeFeat .sc-perk small:lang(ne), #homeFeat .sc-perk small:lang(hi) { line-height: 1.5; }
#homeFeat .sc-pk-go { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--tc); color: var(--t); transition: transform .3s var(--sc-ease); }
#homeFeat .sc-pk-go .ic { width: 16px; height: 16px; }
#homeFeat .sc-perk.sc-go:hover .sc-pk-go { transform: translateX(2px); }
#homeFeat .sc-pk-ac     { --t: var(--pk-ac);     --tc: var(--pk-ac-c); }
#homeFeat .sc-pk-berth  { --t: var(--pk-berth);  --tc: var(--pk-berth-c); }
#homeFeat .sc-pk-quick  { --t: var(--pk-quick);  --tc: var(--pk-quick-c); }
#homeFeat .sc-pk-gps    { --t: var(--pk-gps);    --tc: var(--pk-gps-c); }
#homeFeat .sc-pk-charge { --t: var(--pk-charge); --tc: var(--pk-charge-c); }
#homeFeat .sc-pk-wa     { --t: var(--pk-wa);     --tc: var(--pk-wa-c); }
#homeFeat .sc-pk-aid    { --t: var(--pk-aid);    --tc: var(--pk-aid-c); }
#homeFeat .sc-pk-help   { --t: var(--pk-help);   --tc: var(--pk-help-c); }
/* QuickBot is the star: a warm filled card */
#homeFeat .sc-pk-quick { background: radial-gradient(130% 100% at 100% 0%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, var(--pk-quick-c), color-mix(in srgb, var(--pk-quick-c) 65%, var(--sc-card))); }
/* each icon has its own small motion while the strip is on screen */
#homeFeat.sc-live .sc-pk-ac .hf-ic .ic     { animation: scSpin 12s linear infinite; }
#homeFeat.sc-live .sc-pk-berth .hf-ic .ic  { animation: scBob 3.4s ease-in-out infinite; }
#homeFeat.sc-live .sc-pk-quick .hf-ic .ic  { animation: scFlash 2.2s ease-in-out infinite; }
#homeFeat.sc-live .sc-pk-gps .hf-ic .ic    { animation: scBob 2.6s ease-in-out infinite; }
#homeFeat.sc-live .sc-pk-gps .sc-ping      { animation: scPing 2.6s var(--sc-ease-std) infinite; }
#homeFeat.sc-live .sc-pk-charge .hf-ic .ic { animation: scPlug 2.8s ease-in-out infinite; }
#homeFeat.sc-live .sc-pk-wa .hf-ic .ic     { animation: scPop 3.2s ease-in-out infinite; }
#homeFeat.sc-live .sc-pk-aid .hf-ic .ic    { animation: scBeat 2.4s ease-in-out infinite; }
#homeFeat.sc-live .sc-pk-help .hf-ic .ic   { animation: scWiggle 3.6s ease-in-out infinite; }
/* staggered entrance (21-showcase.js sets .sc-in once the strip is seen) */
html.sc-io #homeFeat.sc-stagger:not(.sc-in) .sc-perks > li { opacity: 0; transform: translateY(16px) scale(.97); }
#homeFeat.sc-stagger .sc-perks > li { transition: opacity .5s var(--sc-ease), transform .65s var(--sc-ease); }
#homeFeat .sc-perks > li:nth-child(2) { transition-delay: 50ms; }
#homeFeat .sc-perks > li:nth-child(3) { transition-delay: 100ms; }
#homeFeat .sc-perks > li:nth-child(4) { transition-delay: 150ms; }
#homeFeat .sc-perks > li:nth-child(5) { transition-delay: 200ms; }
#homeFeat .sc-perks > li:nth-child(6) { transition-delay: 250ms; }
#homeFeat .sc-perks > li:nth-child(7) { transition-delay: 300ms; }
#homeFeat .sc-perks > li:nth-child(8) { transition-delay: 350ms; }

/* =====================================================================
   5. QUICKBOT 1-2-3 — an animated strip (each step lights in turn)
   ===================================================================== */
#quick-ticket .qt-steps.sc-qsteps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 2px; opacity: 1; font-size: inherit; }
#quick-ticket .sc-qs { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 11px 6px 10px;
  border-radius: 16px; text-align: center; background: color-mix(in srgb, var(--royal-tint) 80%, var(--sc-card)); border: 1px solid var(--royal-soft); }
#quick-ticket .sc-qs::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--sc-gold), 0 10px 20px -10px rgba(242, 138, 30, .7); }
#quick-ticket .sc-qs:not(:last-child)::after { content: ""; position: absolute; top: 24px; right: -8px; width: 8px; height: 2px; background: var(--royal-soft); }
#quick-ticket .sc-qs i { font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 900 14px/1 var(--font-sans); color: #FFFFFF; background: linear-gradient(140deg, #FFC24D, #F07A12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 #B35F06, 0 6px 10px -5px rgba(179, 95, 6, .7); text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
#quick-ticket .sc-qs b { font: 700 12.5px/1.4 var(--font-sans); color: var(--sc-ink); overflow-wrap: anywhere; }
#quick-ticket.sc-live .sc-qs { animation: scStepLift 6s var(--sc-ease-std) infinite; }
#quick-ticket.sc-live .sc-qs::before { animation: scStepGlow 6s var(--sc-ease-std) infinite; }
#quick-ticket.sc-live .sc-qs:nth-child(2), #quick-ticket.sc-live .sc-qs:nth-child(2)::before { animation-delay: 2s; }
#quick-ticket.sc-live .sc-qs:nth-child(3), #quick-ticket.sc-live .sc-qs:nth-child(3)::before { animation-delay: 4s; }

/* =====================================================================
   6. THE BRAND LOCKUP — name, ™, legal form (16 Oct 2026, owner: "logo ma
   main change garnu paryo ... dekhine garera TM lekhdeu clearly, logo klasile
   use garna napaos"). The site sets the brand the way the company logo does:
   the name, a trademark sign beside it, and the legal form letter-spaced in
   gold under it. The name itself stays live text from the facts, so a rename
   in Admin reaches every surface; only the ™ is typed into the markup.
   .b-lock keeps the name and the sign on one line inside the flex rows the
   nav, hero, offices card and footer each use.
   ===================================================================== */
.b-lock { display: inline-flex; align-items: flex-start; min-width: 0; }
.b-lock > b { min-width: 0; }
/* the sign is sized per surface, in px, so it never rides on a parent's
   inherited size: readable everywhere, never as loud as the name itself */
.b-tm { font-size: 11px; line-height: 1.1; font-weight: 800; letter-spacing: 0;
  margin-left: 2px; align-self: flex-start; }
.nav .brand-word .b-tm { font-size: 9px; }
#homeHero .sc-hh-eyebrow .b-tm { font-size: 9px; }
#topHero .th-name .b-tm { font-size: 11px; }
footer .sc-f-name .b-tm { font-size: 10px; color: #FFFFFF; }
@media (min-width: 761px) { #topHero .th-name .b-tm { font-size: 14px; } }
/* the name over the legal form, where the surface sets the brand in a row */
.b-stack { display: inline-flex; flex-direction: column; align-items: center; min-width: 0; }
.b-legal { display: block; margin-top: 3px; font: 800 11px/1.3 var(--font-sans);
  letter-spacing: .26em; color: var(--sc-gold, #F5B942); white-space: nowrap; }
.b-legal:empty { display: none; }
.nav .brand-word .b-legal { margin-top: 1px; font-size: 9px; letter-spacing: .2em; color: var(--sc-gold, #F5B942); }
#homeHero .sc-hh-eyebrow .b-legal { margin-top: 1px; font-size: 9px; letter-spacing: .2em; color: inherit; opacity: .85; }
/* the nav stacks the name over the tagline, so the lockup is its own row */
.nav .brand-word .b-lock { display: flex; }
footer .sc-f-legal { margin: 0 0 6px; font: 800 10.5px/1.4 var(--font-sans);
  letter-spacing: .26em; color: var(--sc-gold, #F5B942); }
footer .sc-f-legal:empty { display: none; }
/* the brand notice above the copyright line */
footer p.f-tm { margin: 0; padding: 14px 0 0; max-width: 72ch;
  font: 500 12px/1.65 var(--font-sans); color: #8FA5CC; }
/* footer b is pinned to --on-navy with !important, so the brand name says so too */
footer p.f-tm > b { color: var(--sc-gold, #F5B942) !important; font-weight: 800; }
/* the number only shows once Admin -> Company details carries one */
.f-tm-no:empty { display: none; }
.f-tm-no:not(:empty)::before { content: "Trade mark no. "; }
#trust .f-tm-no { display: block; }

/* =====================================================================
   7. BRAND + OFFICES CARD (#topHero .th-brand; the rows are drawn by
   renderOffices() in 05-router.js and SiteFacts::officeListHtml at first paint)
   ===================================================================== */
#view-home #topHero .th-brand { padding: 16px 14px 14px; border-radius: 24px;
  background: radial-gradient(120% 120% at 100% 0%, rgba(255, 196, 92, .16), rgba(255, 196, 92, 0) 55%), radial-gradient(120% 140% at 0% 0%, #1E4F9C 0%, #0C2C63 55%, #071A3D 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 32px -18px rgba(7, 26, 61, .7); }
#view-home #topHero .th-brand::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--sc-in-saffron) 0 18%, #FFFFFF 18% 30%, var(--sc-in-green) 30% 48%, var(--sc-crimson) 48% 84%, var(--sc-np-blue) 84% 100%); }
#topHero .th-top { position: relative; z-index: 1; gap: 12px; }
#topHero .th-top picture { flex: none; display: block; }
#topHero .th-name { min-width: 0; }
#topHero .th-name b { font: 900 19px/1.15 var(--font-sans); letter-spacing: .01em; }
/* redesign.css styles every span in .th-name as the gold flag line - the
   lockup wrapper must keep the name's own size, spacing and colour */
#topHero .th-name .b-lock { display: inline-flex; margin-top: 0;
  font: inherit; letter-spacing: inherit; color: inherit; }
#topHero .sc-th-flags { display: flex !important; align-items: center; gap: 6px; margin-top: 4px; font: 800 12px/1.3 var(--font-sans) !important; letter-spacing: .06em !important; color: #FFD28A !important; }
#topHero .sc-th-flags .flg { height: 13px; }
#topHero .th-tag { position: relative; z-index: 1; color: #DCE6F7; }
#topHero .th-oh { position: relative; z-index: 1; margin-top: 10px; }
#topHero .th-oh span { color: #FFD28A; font-size: 14px; }
/* the office list: every office visible (two columns on a phone), not a swipe row */
#view-home #topHero .th-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 0; margin: 0; scroll-snap-type: none; position: relative; z-index: 1; }
#view-home #topHero .th-offices li, #view-home #topHero .th-offices li:nth-child(n+3) { display: block; min-width: 0; }
#view-home #topHero .th-o a, #view-home #topHero .th-o .th-a { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto auto; column-gap: 9px; row-gap: 2px; align-items: center; min-width: 0; min-height: 76px; height: 100%; padding: 10px 10px 9px;
  border-radius: 16px; color: #FFFFFF; text-decoration: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px -10px rgba(0, 0, 0, .6); transition: transform .25s var(--sc-ease), background .2s; }
#view-home #topHero .th-o a:active { transform: scale(.97); }
#view-home #topHero .th-o .th-badge { grid-column: 1; grid-row: 1 / 3; width: 30px; height: 30px; }
#view-home #topHero .th-o .th-l { grid-column: 2; grid-row: 1; padding-right: 26px; font: 800 13px/1.3 var(--font-sans); color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-home #topHero .th-o .th-sub { grid-column: 2; grid-row: 2; font: 600 12px/1.3 var(--font-sans); color: #B9CBE6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-home #topHero .th-o .th-n { grid-column: 1 / -1; grid-row: 3; margin-top: 3px; font: 900 13.5px/1.25 var(--font-sans); color: #FFE6B8; white-space: nowrap; font-variant-numeric: tabular-nums; }
#view-home #topHero .th-o .th-call { position: absolute; top: 8px; right: 8px; grid-column: auto; grid-row: auto; width: 26px; height: 26px; font-size: 12px;
  background: #FFFFFF; box-shadow: 0 0 0 2px #22B463, 0 3px 8px -3px rgba(0, 0, 0, .5); }   /* the red 📞 emoji reads on white, not on green */
#view-home #topHero .th-head a { border-color: rgba(255, 210, 138, .65); background: linear-gradient(150deg, rgba(255, 196, 92, .26), rgba(255, 255, 255, .05)); }
#view-home #topHero .th-np a, #view-home #topHero .th-np .th-a { border-color: rgba(220, 20, 60, .55); background: linear-gradient(150deg, rgba(220, 20, 60, .30), rgba(255, 255, 255, .05)); }
#view-home #topHero .th-np .th-badge { background: #FFFFFF; }
#view-home #topHero .th-more a { border-style: dashed; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .04); }
#view-home #topHero .th-more .th-badge { color: #FFFFFF; background: linear-gradient(135deg, #22B463, #0C7139); }
#view-home #topHero .th-more .th-call { background: rgba(255, 255, 255, .14); box-shadow: none; }
#view-home #topHero .th-o .th-sub { padding-right: 24px; }
/* the Nepal office people: a plain stacked list (no half-cut swipe row); the
   CEO's own row is left out here - the CEO card (#homeCeo) sits right below */
#view-home #topHero .th-npl { display: grid; gap: 6px; overflow: visible; scroll-snap-type: none; }
#view-home #topHero .th-npl > li { min-width: 0; width: auto; flex: none; }
#view-home #topHero .np-ceo { display: none; }
#topHero .sc-th-foot { position: relative; z-index: 1; display: flex; justify-content: flex-end; margin-top: 10px; }
#topHero .sc-th-all { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  font: 800 13px/1.2 var(--font-sans); color: #10264D; background: linear-gradient(180deg, #FFE1A6, #F5B942); box-shadow: 0 3px 0 #B5770A, 0 8px 14px -8px rgba(0, 0, 0, .5); }
#topHero .sc-th-all .ic { width: 16px; height: 16px; }

/* =====================================================================
   8. CEO INTRODUCTION (#homeCeo)
   ===================================================================== */
#view-home > #homeCeo { margin-top: 26px; }
.sc-ceo { position: relative; overflow: hidden; isolation: isolate; padding: 0 16px 18px; border-radius: 26px;
  background: var(--sc-card); border: 1px solid var(--sc-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 color-mix(in srgb, var(--royal) 10%, transparent), 0 18px 34px -22px rgba(12, 48, 108, .55); }
/* the top band: navy with an India ribbon and a Nepal ribbon crossing */
.sc-ceo-band { position: relative; overflow: hidden; height: 84px; margin: 0 -16px;
  background: radial-gradient(90% 140% at 100% 0%, rgba(255, 196, 92, .35), rgba(255, 196, 92, 0) 55%), linear-gradient(120deg, #0A2758 0%, #0C306C 45%, #0054A8 100%); }
.sc-ceo-band i { position: absolute; left: -10%; right: -10%; height: 12px; opacity: .9; }
.sc-ceo-band .sc-band-in { top: 30px; transform: rotate(-7deg); background: linear-gradient(180deg, var(--sc-in-saffron) 0 33%, #FFFFFF 33% 66%, var(--sc-in-green) 66% 100%); }
.sc-ceo-band .sc-band-np { top: 50px; transform: rotate(5deg); background: linear-gradient(180deg, var(--sc-crimson) 0 70%, var(--sc-np-blue) 70% 100%); }
/* the photo rises into the band; the name column starts below it, so a long
   name never lands dark-on-navy */
.sc-ceo-top { position: relative; z-index: 1; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: -48px; }
.sc-ceo-id { padding-top: 58px; }
/* the photo in a slowly turning ring of both flags' colours */
.sc-ceo-photo { position: relative; overflow: hidden; isolation: isolate; width: 112px; height: 140px; padding: 4px; border-radius: 24px; background: #FFFFFF;
  box-shadow: 0 12px 24px -12px rgba(12, 48, 108, .6); }
.sc-ceo-photo::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px;
  background: conic-gradient(from 0deg, var(--sc-in-saffron), #FFD978, var(--sc-in-green), var(--sc-np-blue), var(--sc-crimson), var(--sc-in-saffron)); }
#homeCeo.sc-live .sc-ceo-photo::before { animation: scSpin 10s linear infinite; }
.sc-ceo-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; border-radius: 20px; background: #FFFFFF; }
.sc-ceo-id { min-width: 0; padding-bottom: 2px; }
.sc-ceo-name { margin: 8px 0 0; font: 800 19px/1.2 var(--font-brand, var(--font-sans)); letter-spacing: .01em; color: var(--sc-ink); overflow-wrap: break-word; }
.sc-ceo-ne { margin: 2px 0 0; font: 800 15.5px/1.35 var(--font-sans); color: var(--royal); }
.sc-ceo-ne:empty { display: none; }
.sc-ceo-role { margin: 3px 0 0; font: 700 12.5px/1.45 var(--font-sans); color: var(--sc-muted); }
.sc-ceo-flags { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.sc-ceo-flags .flg { height: 18px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
#homeCeo span.flg[data-flag] { width: 27px; }
#homeCeo span.flg[data-flag="NP"] { width: 15px; }
.sc-ceo-x { font: 800 14px/1 var(--font-sans); color: var(--sc-muted); }
.sc-ceo-msg { position: relative; margin: 16px 0 0; padding: 14px 16px 12px 16px; border-radius: 20px;
  background: color-mix(in srgb, var(--royal-tint) 75%, var(--sc-card)); border: 1px solid color-mix(in srgb, var(--royal) 14%, transparent); border-left: 4px solid var(--sc-gold); }
.sc-ceo-msg::before { content: "\201C"; position: absolute; right: 12px; top: -10px; font: 900 72px/1 Georgia, 'Times New Roman', serif; color: color-mix(in srgb, var(--royal) 18%, transparent); pointer-events: none; }
.sc-ceo-msg p { margin: 0; font: 500 15px/1.65 var(--font-sans); color: var(--ink-2, var(--sc-ink)); }
.sc-ceo-msg p b { color: var(--sc-ink); }
.sc-ceo-msg .sc-ceo-sign { margin-top: 8px; text-align: right; font: 800 13.5px/1.3 var(--font-sans); color: var(--royal); }
.sc-ceo-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.sc-ceo-chips li { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px;
  font: 700 13px/1.2 var(--font-sans); color: var(--sc-ink); background: color-mix(in srgb, var(--sc-gold) 16%, var(--sc-card)); border: 1px solid color-mix(in srgb, var(--sc-gold) 45%, transparent); }
.sc-ceo-chips .ic { width: 15px; height: 15px; color: #B86E0A; }
:root[data-theme="dark"] .sc-ceo-chips .ic { color: var(--sc-gold); }
.sc-ceo-mantra { margin: 12px 0 0; text-align: center; font: 700 13px/1.4 var(--font-sans); color: color-mix(in srgb, var(--sc-saffron) 80%, var(--sc-ink)); letter-spacing: .02em; }
.sc-ceo-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
/* the entrance: the card rises, the photo settles in with a small turn */
#homeCeo .sc-ceo-photo { transition: transform .9s var(--sc-spring), opacity .6s ease; }
html.sc-io #homeCeo .sc-ceo.sc-reveal:not(.sc-in) .sc-ceo-photo { opacity: 0; transform: scale(.82) rotate(-6deg); }

/* =====================================================================
   9. HOW TO BOOK — the guide (#bookHelp): colourful real buttons
   ===================================================================== */
#view-home > #bookHelp { margin-top: 26px; }
#bookHelp .bh-btn { position: relative; overflow: hidden; isolation: isolate; width: 100%; display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 16px;
  border: 0; border-radius: 24px; text-align: left; cursor: pointer; color: #FFFFFF; font: inherit; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), linear-gradient(115deg, #1E40AF 0%, #6D28D9 55%, #BE185D 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #4C1D95, 0 6px 0 #2E1065, 0 18px 28px -14px rgba(109, 40, 217, .75);
  transition: transform .25s var(--sc-ease), box-shadow .2s ease; animation: none; }
#bookHelp .bh-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #4C1D95, 0 6px 0 #2E1065, 0 22px 32px -14px rgba(109, 40, 217, .85); }
#bookHelp .bh-btn:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 #4C1D95, 0 2px 0 #2E1065, 0 8px 14px -10px rgba(109, 40, 217, .7); }
#bookHelp .bh-btn::after { content: ""; position: absolute; z-index: -1; inset: -50% -100%; pointer-events: none; transform: translateX(-60%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 56%); }
#bookHelp.sc-live .bh-btn::after { animation: scSheen 7s var(--sc-ease-std) 1s infinite; }
#bookHelp .bh-ic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; font-size: 0; color: #FFD978;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 rgba(30, 10, 80, .45), 0 8px 14px -8px rgba(0, 0, 0, .5); }
#bookHelp .bh-ic .ic { width: 26px; height: 26px; }
#bookHelp .bh-txt { flex: 1; min-width: 0; }
#bookHelp .bh-txt b { display: block; font: 900 18px/1.3 var(--font-sans); color: #FFFFFF; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); }
#bookHelp .bh-txt small { display: block; margin-top: 3px; font: 600 13px/1.45 var(--font-sans); color: rgba(255, 255, 255, .9); }
#bookHelp .bh-go { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 0; color: #6D28D9; background: #FFFFFF;
  box-shadow: 0 3px 0 rgba(30, 10, 80, .35); transition: transform .35s var(--sc-spring); }
#bookHelp .bh-go .ic { width: 20px; height: 20px; stroke-width: 2.6; }
#bookHelp .bh-btn.open .bh-go { transform: rotate(135deg); }
:root[data-theme="dark"] #bookHelp .bh-btn { background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), linear-gradient(115deg, #1E3A8A 0%, #5B21B6 55%, #9D174D 100%) !important;
  color: #FFFFFF !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 0 #2E1065, 0 6px 0 #1A0838, 0 18px 28px -14px rgba(0, 0, 0, .8) !important; }
:root[data-theme="dark"] #bookHelp .bh-txt b { color: #FFFFFF !important; }
:root[data-theme="dark"] #bookHelp .bh-txt small { color: rgba(255, 255, 255, .88) !important; }
:root[data-theme="dark"] #bookHelp .bh-ic { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)) !important; }
/* the panel opens smoothly */
#bookHelp .bh-panel { margin-top: 12px; padding: 16px 14px; border-radius: 24px; background: var(--sc-card); border: 1px solid var(--sc-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 16px 30px -22px rgba(12, 48, 108, .55); transform-origin: 50% 0; }
#bookHelp .bh-panel[hidden] { display: none; }
#bookHelp .bh-panel:not([hidden]) { animation: scPanelIn .45s var(--sc-ease) both; }
/* seven numbered colour steps on a rainbow rail */
#bookHelp .bh-steps { position: relative; list-style: none; counter-reset: bh; display: grid; gap: 10px; margin: 0; padding: 0; }
#bookHelp .bh-steps::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; opacity: .55;
  background: linear-gradient(180deg, #2563EB, #0D9488, #16A34A, #CA8A04, #EA580C, #DC2626, #7C3AED); }
#bookHelp .bh-steps li { --c: #2563EB; counter-increment: bh; position: relative; padding: 12px 12px 12px 58px; border-radius: 18px;
  background: color-mix(in srgb, var(--c) 8%, var(--sc-card)); border: 1px solid color-mix(in srgb, var(--c) 24%, var(--sc-line)); }
#bookHelp .bh-steps li::before { content: counter(bh); position: absolute; left: 8px; top: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font: 900 14px/1 var(--font-sans); color: #FFFFFF; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 65%, #FFFFFF), var(--c));
  box-shadow: 0 0 0 3px var(--sc-card), 0 3px 0 color-mix(in srgb, var(--c) 65%, #000000), 0 8px 12px -6px var(--c); text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
#bookHelp .bh-steps li:nth-child(2) { --c: #0D9488; }
#bookHelp .bh-steps li:nth-child(3) { --c: #16A34A; }
#bookHelp .bh-steps li:nth-child(4) { --c: #CA8A04; }
#bookHelp .bh-steps li:nth-child(5) { --c: #EA580C; }
#bookHelp .bh-steps li:nth-child(6) { --c: #DC2626; }
#bookHelp .bh-steps li:nth-child(7) { --c: #7C3AED; }
#bookHelp .bh-steps b { display: block; font: 800 15.5px/1.35 var(--font-sans); color: var(--sc-ink); }
#bookHelp .bh-steps span { display: block; margin-top: 3px; font: 500 14px/1.55 var(--font-sans); color: var(--sc-muted); }
#bookHelp .bh-steps em { font-style: normal; font-weight: 800; color: color-mix(in srgb, var(--c) 80%, var(--sc-ink)); }
#bookHelp .bh-steps strong { color: var(--sc-ink); }
#bookHelp .bh-panel:not([hidden]) .bh-steps li { animation: scRise .5s var(--sc-ease) both; }
#bookHelp .bh-steps li:nth-child(2) { animation-delay: 40ms; }
#bookHelp .bh-steps li:nth-child(3) { animation-delay: 80ms; }
#bookHelp .bh-steps li:nth-child(4) { animation-delay: 120ms; }
#bookHelp .bh-steps li:nth-child(5) { animation-delay: 160ms; }
#bookHelp .bh-steps li:nth-child(6) { animation-delay: 200ms; }
#bookHelp .bh-steps li:nth-child(7) { animation-delay: 240ms; }
/* three tinted tips */
#bookHelp .bh-tips { display: grid; gap: 8px; margin-top: 12px; padding: 0; background: none; border: 0; }
#bookHelp .bh-tip { --c: #D97706; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 12px; border-radius: 16px;
  font: 500 14px/1.5 var(--font-sans); color: var(--ink-2, var(--sc-ink)); background: color-mix(in srgb, var(--c) 10%, var(--sc-card)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
#bookHelp .bh-tip b { color: var(--sc-ink); }
#bookHelp .bh-tip-help { --c: #2563EB; }
#bookHelp .bh-tip-ok { --c: #16A34A; }
#bookHelp .bh-tip-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #FFFFFF;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 70%, #FFFFFF), var(--c)); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 60%, #000000); }
#bookHelp .bh-tip-ic .ic { width: 16px; height: 16px; }
/* five colour buttons */
#bookHelp .bh-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
#bookHelp .bh-actions > a, #bookHelp .bh-actions > button { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; margin: 0; padding: 0 12px; border: 0; border-radius: 18px; cursor: pointer; text-align: center; text-decoration: none;
  font: 800 14.5px/1.25 var(--font-sans); color: #FFFFFF; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--sc-ease), box-shadow .2s ease, filter .2s; }
#bookHelp .bh-actions > a:hover, #bookHelp .bh-actions > button:hover { filter: brightness(1.06); }
#bookHelp .bh-actions > a:active, #bookHelp .bh-actions > button:active { transform: translateY(3px); }
#bookHelp .bh-actions .ic { width: 19px; height: 19px; flex: none; }
#bookHelp .bh-actions .bh-cta { color: var(--on-royal, #FFFFFF); grid-column: 1 / -1; min-height: 56px; font-size: 16px; border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--royal) 75%, #FFFFFF) 0%, var(--royal) 50%, var(--royal-strong, #003D80) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 color-mix(in srgb, var(--royal-strong, #003D80) 70%, #000000), 0 14px 22px -12px color-mix(in srgb, var(--royal) 85%, transparent); }
#bookHelp.sc-live .bh-cta .bh-arr { animation: scNudge 1.8s ease-in-out infinite; }
#bookHelp .bh-actions .bh-wa { text-shadow: 0 1px 0 rgba(0, 0, 0, .2); background: linear-gradient(180deg, #22B463, #158A4A 55%, #0C7139);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #08562B, 0 10px 16px -10px rgba(12, 113, 57, .8); }
#bookHelp .bh-actions .bh-quick { color: #3A1C00; background: linear-gradient(180deg, #FFD978, #F7AE33 55%, #EC8B12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #B5650A, 0 10px 16px -10px rgba(236, 139, 18, .8); }
#bookHelp .bh-actions .bh-help { background: linear-gradient(180deg, #6366F1, #4F46E5 55%, #3730A3); border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #27207A, 0 10px 16px -10px rgba(55, 48, 163, .8); }
#bookHelp .bh-actions .bh-demo { background: linear-gradient(180deg, #F43F5E, #E11D48 55%, #9F1239);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #74102B, 0 10px 16px -10px rgba(159, 18, 57, .8); }

/* =====================================================================
   10. CONTACT + WHATSAPP SHEET LISTS (drawn by 21-showcase.js from the facts)
   ===================================================================== */
.sc-off-list:empty, .sc-np-team:empty { display: none; }
.sc-wa-more { display: contents; }
.wa-row .flg { height: 20px; }

/* =====================================================================
   11. FOOTER — the emblem, the live name between the flags, the new pages
   ===================================================================== */
footer .sc-f-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
footer .sc-f-name .flg { height: 16px; }
footer .f-grid picture { display: block; }
.f-grid .sc-f-explore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.f-grid .sc-f-explore a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 14px; font-weight: 700; line-height: 1.3;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.f-grid .sc-f-explore a:hover { background: rgba(255, 255, 255, .12); }
.f-grid .sc-f-explore .ic { width: 17px; height: 17px; flex: none; color: #FFD28A; }

/* =====================================================================
   12. WIDER SCREENS
   ===================================================================== */
@media (min-width: 760px) {
  #homeFeat .hf-list.sc-perks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .sc-h2 { font-size: 24px; }
  #quick-ticket .sc-qs b { font-size: 13.5px; }
  .sc-ceo { padding: 0 22px 22px; }
  .sc-ceo-band { margin: 0 -22px; height: 96px; }
  .sc-ceo-top { grid-template-columns: 140px minmax(0, 1fr); margin-top: -56px; }
  .sc-ceo-photo { width: 140px; height: 172px; }
  .sc-ceo-name { font-size: 26px; }
  .sc-ceo-acts { max-width: 440px; }
  #bookHelp .bh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #bookHelp .bh-steps::before { display: none; }
  #bookHelp .bh-steps li:last-child { grid-column: 1 / -1; }
  #bookHelp .bh-tips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #bookHelp .bh-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #view-home #topHero .th-offices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  #view-home #topHero .th-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-home > #homeCeo .sc-ceo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 24px; }
  .sc-ceo-band { grid-column: 1 / -1; }
  .sc-ceo-top { grid-column: 1; }
  .sc-ceo-msg { grid-column: 2; grid-row: 2 / span 4; align-self: start; margin-top: 18px; }
  .sc-ceo-chips, .sc-ceo-mantra, .sc-ceo-acts { grid-column: 1; }
  .sc-ceo-mantra { text-align: left; }
}
@media (max-width: 359px) {
  #homeFeat .sc-perk { padding: 12px 11px; min-height: 120px; }
  #homeFeat .sc-perk .hf-tx { font-size: 13.5px; }
  .sc-ceo-top { grid-template-columns: 96px minmax(0, 1fr); }
  .sc-ceo-photo { width: 96px; height: 122px; }
  #view-home #topHero .th-o .th-n { font-size: 12.5px; }
}

/* below the fold: skip layout + paint until the visitor gets near. The size
   hints are the measured heights (390 px phone / desktop), and `auto` keeps the
   real height once a block has been drawn, so nothing jumps while scrolling. */
@supports (content-visibility: auto) {
  #view-home > #animRoute { content-visibility: auto; contain-intrinsic-size: auto 414px; }
  #view-home > #trust { content-visibility: auto; contain-intrinsic-size: auto 556px; }
  body > footer, footer#siteFooter { content-visibility: auto; contain-intrinsic-size: auto 1810px; }
  @media (min-width: 900px) {
    #view-home > #animRoute { contain-intrinsic-size: auto 340px; }
    #view-home > #trust { contain-intrinsic-size: auto 210px; }
    body > footer, footer#siteFooter { contain-intrinsic-size: auto 660px; }
  }
}

/* =====================================================================
   13. KEYFRAMES — transform / opacity only
   ===================================================================== */
@keyframes scRipple { to { transform: scale(var(--s, 30)); opacity: 0; } }
@keyframes scSheen { 0% { transform: translateX(-55%); } 28%, 100% { transform: translateX(55%); } }
@keyframes scFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes scGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes scPing { 0% { transform: scale(.75); opacity: .85; } 80%, 100% { transform: scale(1.75); opacity: 0; } }
@keyframes scTicket { 0%, 70%, 100% { transform: rotate(0deg) scale(1); } 78% { transform: rotate(-9deg) scale(1.08); } 86% { transform: rotate(7deg) scale(1.08); } 93% { transform: rotate(-3deg) scale(1); } }
@keyframes scSpin { to { transform: rotate(360deg); } }
@keyframes scBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes scFlash { 0%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.18); opacity: 1; } 55% { transform: scale(1); opacity: .65; } 70% { opacity: 1; } }
@keyframes scPlug { 0%, 100% { transform: translateY(-3px); } 45%, 60% { transform: translateY(2px); } }
@keyframes scPop { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.16); } 80% { transform: scale(.96); } 90% { transform: scale(1.04); } }
@keyframes scBeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.16); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } 70% { transform: scale(1); } }
@keyframes scWiggle { 0%, 60%, 100% { transform: rotate(0deg); } 68% { transform: rotate(-10deg); } 76% { transform: rotate(9deg); } 84% { transform: rotate(-5deg); } 92% { transform: rotate(3deg); } }
@keyframes scStepLift { 0%, 34%, 100% { transform: none; } 8%, 26% { transform: translateY(-3px) scale(1.03); } }
@keyframes scStepGlow { 0%, 34%, 100% { opacity: 0; } 8%, 26% { opacity: 1; } }
@keyframes scPanelIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes scRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes scNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* =====================================================================
   14. REDUCED MOTION — the still, final frame (system setting or the
   in-app motion switch, html[data-motion="reduced"])
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  #homeHero .sc-hh-sheen, #homeHero .hh-logo, #homeHero .hh-logo-tile::before, #homeHero .hh-act .ic, .sc-ping,
  #homeFeat .sc-perk .hf-ic .ic, #quick-ticket .sc-qs, #quick-ticket .sc-qs::before, .sc-ceo-photo::before,
  #bookHelp .bh-btn::after, #bookHelp .bh-panel, #bookHelp .bh-steps li, #bookHelp .bh-arr, .sc-rip { animation: none !important; }
  #homeHero .hh-act, .sc-reveal, #homeFeat .sc-perks > li, #homeCeo .sc-ceo-photo, #bookHelp .bh-go { transition: none !important; }
  #homeHero .hh-act { transform: none !important; }
  html.sc-io .sc-reveal:not(.sc-in), html.sc-io #homeFeat.sc-stagger:not(.sc-in) .sc-perks > li,
  html.sc-io #homeCeo .sc-ceo.sc-reveal:not(.sc-in) .sc-ceo-photo { opacity: 1; transform: none; }
}
html[data-motion="reduced"] #homeHero .sc-hh-sheen, html[data-motion="reduced"] #homeHero .hh-logo, html[data-motion="reduced"] #homeHero .hh-logo-tile::before,
html[data-motion="reduced"] #homeHero .hh-act .ic, html[data-motion="reduced"] .sc-ping, html[data-motion="reduced"] #homeFeat .sc-perk .hf-ic .ic,
html[data-motion="reduced"] #quick-ticket .sc-qs, html[data-motion="reduced"] #quick-ticket .sc-qs::before, html[data-motion="reduced"] .sc-ceo-photo::before,
html[data-motion="reduced"] #bookHelp .bh-btn::after, html[data-motion="reduced"] #bookHelp .bh-panel, html[data-motion="reduced"] #bookHelp .bh-steps li,
html[data-motion="reduced"] #bookHelp .bh-arr, html[data-motion="reduced"] .sc-rip { animation: none !important; }
html[data-motion="reduced"] #homeHero .hh-act, html[data-motion="reduced"] .sc-reveal, html[data-motion="reduced"] #homeFeat .sc-perks > li,
html[data-motion="reduced"] #homeCeo .sc-ceo-photo, html[data-motion="reduced"] #bookHelp .bh-go { transition: none !important; }
html[data-motion="reduced"] #homeHero .hh-act { transform: none !important; }
html[data-motion="reduced"].sc-io .sc-reveal:not(.sc-in), html[data-motion="reduced"].sc-io #homeFeat.sc-stagger:not(.sc-in) .sc-perks > li,
html[data-motion="reduced"].sc-io #homeCeo .sc-ceo.sc-reveal:not(.sc-in) .sc-ceo-photo { opacity: 1; transform: none; }

/* =====================================================================
   15. FORCED COLOURS + PRINT
   ===================================================================== */
@media (forced-colors: active) {
  #homeHero .hh-act, #homeFeat .sc-perk, #bookHelp .bh-btn, #bookHelp .bh-actions > *, .sc-btn, .sc-ceo { border: 1px solid CanvasText; }
  .sc-hh-sheen, .sc-ping, .sc-rip, .sc-ceo-band i { display: none; }
}
@media print {
  #homeCeo .sc-ceo-acts, #bookHelp, .sc-hh-sheen { display: none !important; }
  /* a printout never waits for the scroll observer */
  html.sc-io .sc-reveal:not(.sc-in), html.sc-io #homeFeat.sc-stagger:not(.sc-in) .sc-perks > li,
  html.sc-io #homeCeo .sc-ceo.sc-reveal:not(.sc-in) .sc-ceo-photo { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   16. GOLD TICKET 9 Oct 2026 — the on-screen ticket (#ticketCard.tk2-gold,
   07-checkout.js renderStatus). Owner: modern, golden, the logo on a seal,
   mantra on top, "शुभ यात्रा" near the bottom, a payment QR always beside
   the verify QR. The ticket keeps its own ivory + gold identity in light,
   dark, AMOLED and every palette: the design tokens are re-set on the card
   itself, so every token-driven rule inside it (redesign.css, depth.css
   dark rules) paints on ivory. Only its outer glow follows the theme.
   Palette (16 Oct 2026: the logo colours): NAVY #0A2A8F, ROYAL #1A44C8, ORANGE #C2540A, GOLD_DEEP #8A6A1F,
   GOLD #C9A227, GOLD_LIGHT #F3DE8A, CREAM #FFF8E7, INK #1A1A2E.
   Selectors start "html #ticketCard.tk2-gold" so they outrank the older
   class-only !important ticket rules in depth.css (which loads after this).
   ===================================================================== */
#statusBody { --tkg-hole: var(--page, #F4F6FB); }
html #ticketCard.tk2-gold {
  --tkg-foil: linear-gradient(135deg, #8A6A1F 0%, #F3DE8A 28%, #C9A227 52%, #F3DE8A 76%, #8A6A1F 100%);
  --ink: #1A1A2E; --ink-2: #2E2A3A; --muted: #6B5E45; --page: #FFF8E7; --card: #FFFDF7;
  --surface: #FFFDF7; --surface-sunken: #FBF4E2; --surface-hover: #F7EDD2;
  --line: #E9DDB6; --line-strong: #DCCB94; --line-control: #9C8A5A;
  --navy: #0A2A8F; --on-navy: #FFFFFF; --royal: #1A44C8; --royal-strong: #0A2A8F; --royal-soft: #DDE5FF; --royal-tint: #F3F5FA; --on-royal: #FFFFFF;
  --success: #11703F; --success-soft: #E4F6EC; --warning: #8A5A00; --warning-soft: #FFF4D6; --danger: #B42525; --danger-soft: #FBE3E3; --focus: #1A44C8;
  --dp-face: none; --dp-border: rgba(201, 162, 39, .6); --dp-rim-top: rgba(201, 162, 39, .6); --dp-rim-left: rgba(201, 162, 39, .6);
  --dp-btn-face: linear-gradient(180deg, #FFFFFF 0%, #FBF3DE 100%); --dp-btn-border: #D9C489;
  --dp-btn: inset 0 1px 0 #FFFFFF, 0 2px 0 #E2D2A0, 0 4px 0 #CDB676, 0 9px 12px -5px rgba(138, 106, 31, .35);
  --dp-field-bg: #FFFBF0; --dp-field: inset 0 2px 5px rgba(138, 106, 31, .14), 0 1px 0 #FFFFFF;
  --dp-act-face: linear-gradient(180deg, #2A55D8 0%, #1A44C8 58%, #12339E 100%); --dp-act-ink: #FFFFFF; --dp-act-rim: #5677E0;
  --dp-act: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 2px 0 #0A2A8F, 0 4px 0 #081D66, 0 6px 0 #061653, 0 13px 18px -5px rgba(10, 42, 143, .55);
  --dp-act-pressed: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 3px 7px rgba(0, 0, 0, .35), 0 1px 0 #0A2A8F, 0 3px 0 #061653, 0 5px 8px -3px rgba(10, 42, 143, .45);
  color-scheme: light;
  position: relative;
  color: #1A1A2E !important;
  border: 1.5px solid transparent !important;
  border-radius: 20px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23B8921E' stroke-opacity='.2'%3E%3Ccircle cx='100' cy='100' r='97'/%3E%3Ccircle cx='100' cy='100' r='91' stroke-dasharray='2 3'/%3E%3Ccircle cx='100' cy='100' r='64'/%3E%3Ccircle cx='100' cy='100' r='34'/%3E%3Ccircle cx='100' cy='100' r='12'/%3E%3Cg id='p'%3E%3Cellipse cx='100' cy='44' rx='11' ry='27'/%3E%3Cellipse cx='100' cy='17' rx='5' ry='11'/%3E%3Cellipse cx='100' cy='77' rx='5' ry='12'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(30 100 100)'/%3E%3Cuse href='%23p' transform='rotate(60 100 100)'/%3E%3Cuse href='%23p' transform='rotate(90 100 100)'/%3E%3Cuse href='%23p' transform='rotate(120 100 100)'/%3E%3Cuse href='%23p' transform='rotate(150 100 100)'/%3E%3Cuse href='%23p' transform='rotate(180 100 100)'/%3E%3Cuse href='%23p' transform='rotate(210 100 100)'/%3E%3Cuse href='%23p' transform='rotate(240 100 100)'/%3E%3Cuse href='%23p' transform='rotate(270 100 100)'/%3E%3Cuse href='%23p' transform='rotate(300 100 100)'/%3E%3Cuse href='%23p' transform='rotate(330 100 100)'/%3E%3C/g%3E%3C/svg%3E") center 640px / 360px 360px no-repeat padding-box,
    repeating-radial-gradient(circle at 50% 115%, rgba(201, 162, 39, .07) 0 1px, transparent 1px 8px) padding-box,
    repeating-linear-gradient(45deg, rgba(138, 106, 31, .03) 0 1px, transparent 1px 10px) padding-box,
    linear-gradient(180deg, #FFFDF7 0%, #FFF8E7 55%, #FDF1D6 100%) padding-box,
    var(--tkg-foil) border-box !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 4px rgba(10, 42, 143, .08), 0 10px 22px -8px rgba(10, 42, 143, .22),
    0 32px 60px -24px rgba(194, 84, 10, .32) !important;
}
/* four gold corner flourishes, over everything, never in the way of a tap */
html #ticketCard.tk2-gold::before {
  content: ""; position: absolute; inset: 5px; z-index: 5; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23D9B64A' stroke-linecap='round'%3E%3Cpath d='M3 61V14Q3 3 14 3H61' stroke-width='2.4'/%3E%3Cpath d='M9 46V18Q9 9 18 9H46' stroke-width='1'/%3E%3Cpath d='M15 30Q15 15 30 15' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.2' fill='%23F3DE8A' stroke='%238A6A1F'/%3E%3C/svg%3E") left top / 40px 40px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='translate(64 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%23D9B64A' stroke-linecap='round'%3E%3Cpath d='M3 61V14Q3 3 14 3H61' stroke-width='2.4'/%3E%3Cpath d='M9 46V18Q9 9 18 9H46' stroke-width='1'/%3E%3Cpath d='M15 30Q15 15 30 15' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.2' fill='%23F3DE8A' stroke='%238A6A1F'/%3E%3C/g%3E%3C/svg%3E") right top / 40px 40px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='translate(0 64) scale(1 -1)'%3E%3Cg fill='none' stroke='%23D9B64A' stroke-linecap='round'%3E%3Cpath d='M3 61V14Q3 3 14 3H61' stroke-width='2.4'/%3E%3Cpath d='M9 46V18Q9 9 18 9H46' stroke-width='1'/%3E%3Cpath d='M15 30Q15 15 30 15' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.2' fill='%23F3DE8A' stroke='%238A6A1F'/%3E%3C/g%3E%3C/svg%3E") left bottom / 40px 40px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='translate(64 64) scale(-1 -1)'%3E%3Cg fill='none' stroke='%23D9B64A' stroke-linecap='round'%3E%3Cpath d='M3 61V14Q3 3 14 3H61' stroke-width='2.4'/%3E%3Cpath d='M9 46V18Q9 9 18 9H46' stroke-width='1'/%3E%3Cpath d='M15 30Q15 15 30 15' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.2' fill='%23F3DE8A' stroke='%238A6A1F'/%3E%3C/g%3E%3C/svg%3E") right bottom / 40px 40px no-repeat;
}

/* ---- mantra strip (top) ---- */
html #ticketCard.tk2-gold .tkg-mantra {
  margin: 0; padding: 8px 46px 7px; text-align: center;
  font: 700 13px/1.5 var(--font-sans); letter-spacing: .02em; color: #F3DE8A;
  background: linear-gradient(90deg, #8A3A06 0%, #C2540A 22%, #D9650F 50%, #C2540A 78%, #8A3A06 100%);
  border-bottom: 1px solid #C9A227; text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  overflow-wrap: anywhere;
}
html #ticketCard.tk2-gold .tkg-mantra span { color: #C9A227; font-size: 11px; }

/* ---- header: navy -> royal, gold-foil double rule, the emblem on a seal ---- */
html #ticketCard.tk2-gold .tk2-head {
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(243, 222, 138, .20) 0%, rgba(243, 222, 138, 0) 55%),
    linear-gradient(118deg, #0A2A8F 0%, #1036B4 46%, #1A44C8 100%) !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 -2px 0 #C9A227, inset 0 -4px 0 #0A2A8F, inset 0 -5px 0 #F3DE8A, inset 0 -7px 0 #8A6A1F !important;
  padding-bottom: 12px !important; overflow: hidden;
}
html #ticketCard.tk2-gold .tk2-head .tk2-brand > img {
  width: 104px !important; height: 66px !important; flex: none; box-sizing: border-box;
  padding: 7px 12px !important; object-fit: contain; border-radius: 999px !important;
  background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, #FFF8E7 40%, #F6E7B0 78%, #E9CF77 100%) !important;
  box-shadow:
    0 0 0 2px #C9A227, 0 0 0 4px #0A2A8F, 0 0 0 5.5px #F3DE8A, 0 0 0 6.5px #8A6A1F,
    0 8px 16px rgba(0, 0, 0, .5),
    inset 0 2px 3px rgba(255, 255, 255, .95), inset 0 -4px 7px rgba(138, 106, 31, .45) !important;
  filter: none !important;
}
html #ticketCard.tk2-gold .tk2-head .tk2-brand b {
  background: linear-gradient(180deg, #FFF6CF 0%, #F3DE8A 38%, #C9A227 72%, #E8CB6A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: #F3DE8A !important; letter-spacing: .02em; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
}
/* 15 Oct 2026 (owner: "logo ali kati thulo, name sath ma trade mark"): the
   emblem pill grows 104x66 -> 132x84 (phones 78x50 -> 88x56), the brand
   carries a ™ and the legal form sits under it letter-spaced in gold, as on
   the company logo and the PNG ticket. */
html #ticketCard.tk2-gold .tk2-head .tk2-brand > img { width: 132px !important; height: 84px !important; padding: 8px 14px !important; }
html #ticketCard.tk2-gold .tk2-head .tk2-brand .tk-tm {
  font-size: .5em; vertical-align: super; line-height: 0; margin-left: 2px; letter-spacing: 0;
}
html #ticketCard.tk2-gold .tk2-head .tk2-brand .tk-legal {
  display: block; margin-top: 1px; font-size: 10px; font-weight: 800; letter-spacing: .26em;
  color: #F3DE8A; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html #ticketCard.tk2-gold .tk2-head .tk2-brand .tk-legal::before,
html #ticketCard.tk2-gold .tk2-head .tk2-brand .tk-legal::after { content: '\2014'; letter-spacing: 0; margin: 0 .35em; opacity: .85; }
html #ticketCard.tk2-gold .tk2-head .tk2-brand .tk-legal::before { margin-left: 0; }
html #ticketCard.tk2-gold .tk2-head .tk2-brand small { color: #E9DFC2 !important; }
html #ticketCard.tk2-gold .tk2-head .tk2-brand em { color: #F3DE8A !important; }
html #ticketCard.tk2-gold .premium-ticket-bus { opacity: .92; }
/* one slow gold sheen across the header (stills for reduced motion, below) */
html #ticketCard.tk2-gold .tk2-head::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 240, 190, 0) 0%, rgba(255, 240, 190, .20) 50%, rgba(255, 240, 190, 0) 100%);
  transform: translateX(-110%); animation: tkgSheen 7s ease-in-out 1.2s infinite;
}
@keyframes tkgSheen { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(330%); } }

/* ---- status row, route map, hero ---- */
html #ticketCard.tk2-gold .premium-ticket-status {
  background: linear-gradient(180deg, rgba(243, 222, 138, .30) 0%, rgba(255, 248, 231, 0) 100%) !important;
  border-bottom: 1px solid rgba(201, 162, 39, .45); color: #1A1A2E !important;
}
html #ticketCard.tk2-gold .premium-ticket-status > span:not(.tk2-pill) { color: #8A6A1F; font-family: var(--font-mono); font-weight: 700; }
html #ticketCard.tk2-gold .rov-3d, html #ticketCard.tk2-gold .rov-svg { box-shadow: 0 0 0 1px rgba(201, 162, 39, .7), 0 0 0 4px rgba(255, 248, 231, .9), 0 0 0 5px rgba(138, 106, 31, .45), 0 10px 20px -10px rgba(10, 42, 143, .45); }
html #ticketCard.tk2-gold .tk2-hero { background: transparent !important; color: #1A1A2E !important; }
html #ticketCard.tk2-gold .tk2-pnr { color: #0A2A8F !important; }
html #ticketCard.tk2-gold .tk2-pnr > span { font-family: var(--font-mono); background: linear-gradient(transparent 62%, rgba(243, 222, 138, .7) 62%); padding: 0 2px; }
html #ticketCard.tk2-gold .tk2-pnr small, html #ticketCard.tk2-gold .tk2-city span, html #ticketCard.tk2-gold .tk2-city small { color: #5B4E33 !important; }
html #ticketCard.tk2-gold .tk2-route {
  background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 248, 231, .85) 100%) !important;
  border: 1px solid rgba(201, 162, 39, .6) !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 0 rgba(138, 106, 31, .18), 0 12px 22px -14px rgba(194, 84, 10, .45) !important;
}
html #ticketCard.tk2-gold .tk2-city b { color: #0A2A8F !important; }
html #ticketCard.tk2-gold .tk2-arrow { color: #C2540A !important; }
html #ticketCard.tk2-gold .tk2-arrow i { border-color: #C9A227 !important; }
html #ticketCard.tk2-gold .tk2-date { color: #1A1A2E !important; }

/* ---- the four essentials (full width: the QRs moved to the stub) ---- */
html #ticketCard.tk2-gold .tk2-ess { display: block !important; padding: 14px 16px 4px !important; }
html #ticketCard.tk2-gold .tk2-ess > .tk2-tiles { width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html #ticketCard.tk2-gold .tk2-tile {
  background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 250, 236, .88) 100%) !important;
  border: 1px solid rgba(201, 162, 39, .5) !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(10, 42, 143, .06), 0 8px 16px -10px rgba(138, 106, 31, .45) !important;
}
html #ticketCard.tk2-gold .tk2-tile small { color: #C2540A !important; font-weight: 700; letter-spacing: .02em; }
html #ticketCard.tk2-gold .tk2-tile b { color: #0A2A8F !important; }
html #ticketCard.tk2-gold .tk2-tile em { color: #6B5E45 !important; }

/* ---- fare: navy plaque in a gold frame, the amount in gold foil ---- */
html #ticketCard.tk2-gold .tk2-fare {
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(243, 222, 138, .22) 0%, rgba(243, 222, 138, 0) 50%),
    linear-gradient(120deg, #0A2A8F 0%, #1A44C8 100%) !important;
  border: 1px solid #C9A227 !important;
  box-shadow: inset 0 0 0 3px #0A2A8F, inset 0 0 0 4px rgba(243, 222, 138, .65), 0 14px 26px -12px rgba(10, 42, 143, .65) !important;
}
html #ticketCard.tk2-gold .tk2-fare .amt {
  background: linear-gradient(180deg, #FFF6CF 0%, #F3DE8A 40%, #C9A227 80%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #F3DE8A !important; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45));
}
html #ticketCard.tk2-gold .tk2-fare .lbl, html #ticketCard.tk2-gold .tk2-fare .sub { color: #E9DFC2 !important; }

/* ---- passengers + payment state: gold hairlines ---- */
html #ticketCard.tk2-gold .pax-table th { background: rgba(243, 222, 138, .38) !important; color: #C2540A !important; }
html #ticketCard.tk2-gold .pax-table td { border-color: rgba(201, 162, 39, .35) !important; color: #1A1A2E; }
html #ticketCard.tk2-gold .pax-table td:first-child { color: #1A44C8 !important; font-weight: 700; }
html #ticketCard.tk2-gold .premium-payment-state {
  background: rgba(255, 255, 255, .75) !important; color: #1A1A2E !important;
  border: 1px solid rgba(201, 162, 39, .55) !important; border-left: 4px solid #C9A227 !important;
}
html #ticketCard.tk2-gold .premium-payment-state.paid { border-left-color: #11703F !important; }
html #ticketCard.tk2-gold .premium-payment-state.paid b { color: #11703F !important; }

/* ---- perforated tear line + the QR stub (verify + pay, side by side) ---- */
html #ticketCard.tk2-gold .tkg-perf {
  position: relative; height: 28px; margin: 16px 0 2px;
  background: linear-gradient(90deg, rgba(138, 106, 31, .6) 50%, rgba(138, 106, 31, 0) 50%) center / 12px 1.5px repeat-x;
}
html #ticketCard.tk2-gold .tkg-perf::before, html #ticketCard.tk2-gold .tkg-perf::after {
  content: ""; position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  background: var(--tkg-hole, #F4F6FB);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .28), inset 0 0 0 1.5px rgba(201, 162, 39, .75);
}
html #ticketCard.tk2-gold .tkg-perf::before { left: -15px; }
html #ticketCard.tk2-gold .tkg-perf::after { right: -15px; }
html #ticketCard.tk2-gold .tkg-stub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 8px 16px 18px; }
html #ticketCard.tk2-gold .tkg-stub.solo { grid-template-columns: minmax(0, 230px); justify-content: center; }
html #ticketCard.tk2-gold .tkg-qr {
  position: relative; margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 14px 10px 12px; border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8E7 100%) padding-box, var(--tkg-foil) border-box;
  border: 1.5px solid transparent;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 0 rgba(138, 106, 31, .18), 0 14px 24px -14px rgba(10, 42, 143, .5);
}
html #ticketCard.tk2-gold .tkg-qr-frame {
  display: flex; align-items: center; justify-content: center; position: relative;
  width: 100% !important; max-width: 150px; aspect-ratio: 1 / 1; margin: 2px auto 12px; padding: 8px !important;
  box-sizing: border-box; background: #FFFFFF !important; border: 0 !important; border-radius: 10px !important;
  box-shadow: 0 0 0 1.5px #C9A227, 0 0 0 4px #FFF8E7, 0 0 0 5px rgba(138, 106, 31, .55), 0 6px 12px -6px rgba(10, 42, 143, .4) !important;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
html #ticketCard.tk2-gold .tkg-qr-frame img { width: 100% !important; height: auto !important; display: block; border-radius: 4px; }
html #ticketCard.tk2-gold .tkg-qr-ph { font: 800 22px/1 var(--font-mono); color: rgba(138, 106, 31, .35); letter-spacing: .1em; }
html #ticketCard.tk2-gold .tkg-qr figcaption { display: grid; gap: 3px; min-width: 0; }
html #ticketCard.tk2-gold .tkg-qr figcaption b { font: 800 13.5px/1.3 var(--font-sans); color: #0A2A8F; overflow-wrap: anywhere; }
html #ticketCard.tk2-gold .tkg-qr figcaption small { display: block; font: 600 12px/1.35 var(--font-sans); color: #6B5E45; overflow-wrap: anywhere; }
html #ticketCard.tk2-gold .tkg-qr-pay.is-due figcaption b { color: #C2540A; }
html #ticketCard.tk2-gold .tkg-qr-pay.is-office figcaption b { color: #11703F; }
html #ticketCard.tk2-gold .tkg-paid {
  position: absolute; top: -11px; right: -6px; z-index: 2; padding: 5px 11px; border-radius: 999px;
  font: 800 12px/1.2 var(--font-sans); letter-spacing: .03em; color: #0A2A8F; white-space: nowrap;
  background: linear-gradient(135deg, #B8921E 0%, #F3DE8A 45%, #C9A227 100%);
  box-shadow: 0 0 0 1.5px #FFF8E7, 0 0 0 2.5px #8A6A1F, 0 6px 12px -2px rgba(138, 106, 31, .55);
  transform: rotate(7deg);
}
/* the pay card keeps its button + amount; its QR is the stub's now */
html #ticketCard.tk2-gold #premiumPayQr { display: none !important; }
html #ticketCard.tk2-gold .premium-pay-card { background: rgba(255, 255, 255, .8) !important; border: 1px solid rgba(201, 162, 39, .55) !important; border-top: 4px solid #C2540A !important; color: #1A1A2E !important; }

/* ---- footer: barcode, blessing, support band ---- */
html #ticketCard.tk2-gold .tk2-foot { background: transparent !important; border-top: 1px solid rgba(201, 162, 39, .45); }
html #ticketCard.tk2-gold .tk2-thanks { color: #C2540A !important; font-weight: 700; }
html #ticketCard.tk2-gold .tkg-bless {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px 16px;
  font: 800 15px/1.45 var(--font-sans); color: #C2540A; text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
html #ticketCard.tk2-gold .tkg-bless span { min-width: 0; overflow-wrap: anywhere; }
html #ticketCard.tk2-gold .tkg-bless i {
  flex: 1 1 0; max-width: 64px; min-width: 18px; height: 8px;
  background: radial-gradient(circle, #C9A227 0 2.6px, rgba(201, 162, 39, 0) 3px) right center / 8px 8px no-repeat,
              linear-gradient(90deg, rgba(201, 162, 39, 0), #C9A227) left center / calc(100% - 10px) 1.5px no-repeat;
}
html #ticketCard.tk2-gold .tkg-bless i:last-child { transform: scaleX(-1); }
html #ticketCard.tk2-gold .premium-ticket-support {
  background: linear-gradient(118deg, #0A2A8F 0%, #1A44C8 100%) !important; color: #E9DFC2 !important;
  border-top: 2px solid #C9A227; box-shadow: inset 0 1px 0 #F3DE8A; padding-bottom: 20px !important;
}
html #ticketCard.tk2-gold .premium-ticket-support b { color: #F3DE8A !important; }
html #ticketCard.tk2-gold .premium-ticket-support a { color: #FFFFFF !important; }
html #ticketCard.tk2-gold .tk2-more summary { color: #1A44C8 !important; }

/* ---- dark + AMOLED: the ticket stays ivory; only its edge glows ---- */
html[data-theme="dark"] #ticketCard.tk2-gold {
  box-shadow: 0 0 0 1px rgba(243, 222, 138, .28), 0 0 34px -6px rgba(201, 162, 39, .40), 0 26px 50px -14px rgba(0, 0, 0, .85) !important;
}
html[data-display="amoled"] #ticketCard.tk2-gold {
  box-shadow: 0 0 0 1px rgba(243, 222, 138, .40), 0 0 42px -4px rgba(201, 162, 39, .50), 0 26px 50px -14px rgba(0, 0, 0, 1) !important;
}

/* ---- phones 360-420 ---- */
@media (max-width: 600px) {
  html #ticketCard.tk2-gold .tk2-head .tk2-brand > img { width: 88px !important; height: 56px !important; padding: 5px 9px !important; }
  html #ticketCard.tk2-gold .tk2-head .tk2-brand .tk-legal { font-size: 8.5px; letter-spacing: .18em; }
  html #ticketCard.tk2-gold .tk2-head { gap: 8px !important; }
  html #ticketCard.tk2-gold .premium-ticket-bus { width: 92px !important; }
  html #ticketCard.tk2-gold .tk2-head .tk2-brand b { font-size: 14px !important; line-height: 1.3 !important; }
  html #ticketCard.tk2-gold .tkg-mantra { font-size: 12.5px; padding: 8px 40px 7px; }
  html #ticketCard.tk2-gold .tkg-stub { gap: 10px; padding: 8px 12px 16px; }
  html #ticketCard.tk2-gold .tkg-qr { padding: 12px 8px 10px; }
  html #ticketCard.tk2-gold .tkg-qr-frame { max-width: 132px; padding: 6px !important; }
  html #ticketCard.tk2-gold .tkg-bless { font-size: 14px; gap: 8px; }
  html #ticketCard.tk2-gold::before { background-size: 32px 32px, 32px 32px, 32px 32px, 32px 32px; }
}
@media (min-width: 900px) {
  html #ticketCard.tk2-gold .tkg-qr-frame { max-width: 170px; }
}

/* ---- motion / forced colours / print ---- */
@media (prefers-reduced-motion: reduce) {
  html #ticketCard.tk2-gold .tk2-head::after { animation: none !important; opacity: 0; }
}
html[data-motion="reduced"] #ticketCard.tk2-gold .tk2-head::after { animation: none !important; opacity: 0; }
@media (forced-colors: active) {
  html #ticketCard.tk2-gold::before, html #ticketCard.tk2-gold .tk2-head::after { display: none; }
  html #ticketCard.tk2-gold .tkg-qr { border: 1px solid CanvasText; }
}
@media print {
  html #ticketCard.tk2-gold { background: #FFFFFF !important; border: 1.5px solid #C9A227 !important; }
  html #ticketCard.tk2-gold .tk2-head::after, html #ticketCard.tk2-gold .tkg-perf::before, html #ticketCard.tk2-gold .tkg-perf::after { display: none !important; }
  html #ticketCard.tk2-gold .tkg-mantra, html #ticketCard.tk2-gold .tk2-head, html #ticketCard.tk2-gold .tk2-fare,
  html #ticketCard.tk2-gold .premium-ticket-support, html #ticketCard.tk2-gold .tkg-paid { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  html #ticketCard.tk2-gold .tkg-stub { break-inside: avoid; }
}