/* ═══════════════════════════════════════════════════════════════════
   TTMC — v4 "LIGHT"
   Full light theme: every section (including hero/emergency/CTA/nav/
   footer/modals) uses this light palette by default. Only two
   components are deliberately dark-locked — .dash and .fmap, both of
   which depict genuinely dark-themed software/data UI (a mockup of the
   real HUB app, and an ops-style command map) rather than page chrome,
   so they carry their own local variable re-override back to dark
   regardless of ancestor. Everything else — cards, buttons, nav, hero,
   footer — reads these root values directly.
═══════════════════════════════════════════════════════════════════ */

/* Self-hosted variable fonts (latin subset) — no third-party request, preloaded in <head>. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap;
  src:url('../assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* ── elevation ladder (lightest → deepest surface) ── */
  --bg0:      #FFFFFF;
  --bg1:      #FFFFFF;
  --bg2:      #F4F9FF;
  --bg3:      #DCE5EF;
  --glass:    rgba(10,22,40,.035);
  --glass-2:  rgba(10,22,40,.06);

  /* ── legacy aliases kept for shared components ── */
  --ink:      #FBFAF8;
  --ink-2:    #FFFFFF;
  --ink-3:    #F5F4F0;
  --paper:    #FBFAF8;
  --paper-2:  #F2F1EC;
  --paper-3:  #EBE9E3;

  /* ── text ── */
  --navy:      #0B1F3A;
  --navy-soft: #46566B;
  --navy-mute: #5C6C82;

  /* ── accents (deeper/more saturated than the dark theme's pale glow
     tones, so text/icons stay legible against light surfaces — darkened
     one notch past the "obvious" translation of each brand hue so every
     text usage clears WCAG AA 4.5:1 on white/off-white, not just 4.0-4.4 ── */
  --blue:      #0B6BD6;   /* primary fill: 5.1:1 with white text */
  --blue-dp:   #0A4F9E;
  --blue-lt:   #0B66C9;   /* blue for small text on white: 5.6:1 */
  --accent:    #0879E8;   /* electric blue: large type, highlights, gradients */
  --brand:     #1474BC;   /* sampled from the logo mark */
  --ice:       #EAF5FF;
  --steel:     #DCE5EF;
  --copper:    #B86534;
  --copper-lt: #A85A2C;
  --warn:      #C93A20;
  --go:        #1E9A52;

  /* ── strokes ── */
  --rule:    rgba(11,31,58,.1);
  --rule-2:  rgba(11,31,58,.06);
  --rule-d:  rgba(10,22,40,.14);
  --rule-d2: rgba(10,22,40,.07);
  --stroke-grad: linear-gradient(135deg,rgba(22,104,196,.22),rgba(10,22,40,.03) 40%,rgba(184,101,52,.2));

  /* ── type ── */
  --disp: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --ui:   'Inter', system-ui, -apple-system, sans-serif;
  --ser:  var(--disp);
  --mono: var(--ui);

  --shell: 1280px;
  --pad:   40px;
  --r:     18px;
  --r-sm:  12px;

  --ease:   cubic-bezier(.22,.68,.28,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --nav-h:  76px;

  --glow-blue:  0 20px 45px -22px rgba(22,104,196,.32);
  --glow-copper:0 20px 45px -22px rgba(184,101,52,.28);

  /* dark-lock palette, reused verbatim by .dash and .fmap below */
  --dark-bg0: #04060A; --dark-bg1:#070B12; --dark-bg2:#0B1119; --dark-bg3:#111826;
  --dark-navy:#EDF2F9; --dark-navy-soft:#A9B6C8; --dark-navy-mute:#71809A;
  --dark-glass:rgba(255,255,255,.028); --dark-glass-2:rgba(255,255,255,.055);
  --dark-rule:rgba(255,255,255,.08); --dark-rule-2:rgba(255,255,255,.05);
  --dark-blue-lt:#7CBAFF; --dark-copper-lt:#EBAD79;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 34px)}
/* clip, not hidden: `hidden` makes <body> its own scroll container,
   which breaks window.scrollY and fixed-position offsets. */
html,body{overflow-x:clip}
body{
  font-family:var(--ui);background:var(--bg0);color:var(--navy);
  line-height:1.62;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--blue);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:6px;border:2px solid var(--bg0)}
::-webkit-scrollbar-thumb:hover{background:#1A2436}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);width:100%}
.shell-nar{max-width:960px;margin:0 auto;padding:0 var(--pad);width:100%}
section{position:relative}

.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--blue);color:#fff;padding:14px 22px;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blue-lt);outline-offset:3px;border-radius:6px}

/* ═══════ ATMOSPHERE ═══════ */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg0)}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.aurora .a1{width:56vw;height:56vw;left:-16vw;top:-22vw;background:radial-gradient(circle,rgba(22,104,196,.34),transparent 62%)}
.aurora .a2{width:44vw;height:44vw;right:-14vw;top:8vh;background:radial-gradient(circle,rgba(77,159,255,.17),transparent 62%)}
.aurora .a3{width:40vw;height:40vw;right:4vw;bottom:-18vw;background:radial-gradient(circle,rgba(217,138,79,.13),transparent 65%)}
@media(prefers-reduced-motion:no-preference){
  .aurora .a1{animation:drift1 26s var(--ease-io) infinite alternate}
  .aurora .a2{animation:drift2 32s var(--ease-io) infinite alternate}
  .aurora .a3{animation:drift1 38s var(--ease-io) infinite alternate-reverse}
  @keyframes drift1{to{transform:translate(6vw,4vh) scale(1.12)}}
  @keyframes drift2{to{transform:translate(-5vw,6vh) scale(.92)}}
}

.dotsbg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 74%);
  mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 74%);
}
.topo{position:absolute;inset:0;pointer-events:none;opacity:.6;overflow:hidden}
.topo svg{width:100%;height:100%;display:block}
.topo path{fill:none;stroke:var(--navy);stroke-width:.6;opacity:.035}
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* section bases — full light theme, root vars are already light, so
   .light/.light-2 now just carry the subtle surface-tone rhythm between
   adjacent sections. .dark is repurposed as an explicit dark-LOCK utility
   (re-applies the --dark-* palette from :root) for the couple of
   components that should stay dark regardless of theme — see .dash and
   .fmap further down, which use the same technique locally. */
.light{background:var(--bg0);color:var(--navy)}
.light-2{background:var(--bg2);color:var(--navy);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.dark{
  --bg1:var(--dark-bg1); --bg2:var(--dark-bg2); --bg3:var(--dark-bg3);
  --navy:var(--dark-navy); --navy-soft:var(--dark-navy-soft); --navy-mute:var(--dark-navy-mute);
  --glass:var(--dark-glass); --glass-2:var(--dark-glass-2);
  --rule:var(--dark-rule); --rule-2:var(--dark-rule-2);
  --blue-lt:var(--dark-blue-lt); --copper-lt:var(--dark-copper-lt);
  background:var(--dark-bg1);color:var(--navy);border-top:1px solid var(--rule-2);
}
.pad{padding:118px 0}
.pad-sm{padding:80px 0}

/* ═══════ TYPE ═══════ */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-lt);margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--accent);flex:none}
.eyebrow.no-rule::before{display:none}
.eyebrow.warn{color:var(--warn)}
.eyebrow.warn::before{background:var(--warn)}
.eyebrow.cop{color:var(--copper-lt)}
.eyebrow.cop::before{background:var(--copper)}
.sec-head .eyebrow{margin-left:auto;margin-right:auto}
.sec-head.left .eyebrow{margin-left:0}

.h1{font-family:var(--disp);font-weight:900;font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:.98;letter-spacing:-.042em}
.h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.06;letter-spacing:-.03em;color:var(--navy)}
.h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.2;letter-spacing:-.02em}

.ital{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;
  color:var(--accent);
}
.ital.cop{color:var(--copper-lt)}
.ital.w{background:none;color:var(--navy)}
.light-i{color:var(--navy) !important;background:none !important}

.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.64;color:var(--navy-soft)}
.body{color:var(--navy-soft);font-size:.97rem;line-height:1.76}
.dot{color:var(--copper-lt)}

.sec-head{max-width:700px;margin:0 auto 70px;text-align:center}
.sec-head .body{margin-top:20px}
.sec-head.left{margin-left:0;text-align:left}

.sec-idx{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;color:var(--copper-lt);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
}
.sec-idx::before,.sec-idx::after{content:'';width:26px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,138,79,.55));flex:none}
.sec-idx::after{background:linear-gradient(90deg,rgba(217,138,79,.55),transparent)}
.sec-head.left .sec-idx::before{display:none}

/* ═══════ BUTTONS ═══════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  padding:15px 30px;border-radius:100px;border:1px solid transparent;cursor:pointer;
  white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .2s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:11px 21px;font-size:.68rem}
.btn-lg{padding:18px 36px;font-size:.78rem}
.btn.full{width:100%}

.btn-solid{
  background:linear-gradient(120deg,var(--blue) 0%,var(--blue-dp) 100%);color:#fff;
  box-shadow:0 0 0 1px rgba(124,186,255,.35) inset,0 10px 34px -8px rgba(22,104,196,.65);
}
.btn-solid:hover{box-shadow:0 0 0 1px rgba(124,186,255,.6) inset,0 16px 44px -8px rgba(77,159,255,.7)}
.btn-solid::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
.btn-solid:hover::after{transform:translateX(120%)}

.btn-cop{background:linear-gradient(120deg,var(--copper),#A05A2C);color:#fff;
  box-shadow:0 0 0 1px rgba(235,173,121,.4) inset,0 10px 34px -8px rgba(217,138,79,.55)}
.btn-cop:hover{box-shadow:0 0 0 1px rgba(235,173,121,.65) inset,0 16px 44px -8px rgba(217,138,79,.7)}
.btn-warn{background:linear-gradient(120deg,var(--warn),#A82D18);color:#fff;
  box-shadow:0 0 0 1px rgba(255,138,112,.4) inset,0 10px 36px -8px rgba(255,90,60,.6)}
.btn-warn:hover{box-shadow:0 0 0 1px rgba(255,138,112,.7) inset,0 16px 46px -8px rgba(255,90,60,.75)}

/* var(--navy)/var(--rule-d) instead of hardcoded white/black: this one
   rule then does the right thing automatically whether it's rendered on
   the (now default) light surface or inside a .dark-locked one, since
   --navy and --rule-d are re-scoped there too — no separate .on-dark
   override needed the way the old dark-by-default theme required. */
.btn-ghost{
  border-color:var(--rule-d);color:var(--navy);background:var(--glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{border-color:rgba(10,22,40,.35);background:var(--glass-2)}
.dark .btn-ghost:hover{border-color:rgba(255,255,255,.35)}

/* solid navy fill — the highest-contrast solid variant against the light
   page background, used where a button needs to read as the strongest
   possible CTA without borrowing the blue/copper/warn brand colors. */
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-soft);box-shadow:0 14px 40px -10px rgba(10,22,40,.5)}

/* transparent, light-blue-bordered secondary — a skinnier pill than
   .btn-lg, sized like .hero-emerg rather than the main CTA pair.
   Full `border` shorthand (not just border-color) because this engine
   has been observed to not reliably override a shorthand-set longhand
   with a same-specificity longhand declared later — same class of bug
   as the earlier .nav-in width issue. */
.btn-outline{
  padding:14px 28px;font-size:.72rem;
  background:rgba(22,104,196,.05);
  border:1px solid rgba(22,104,196,.32);
  color:var(--navy);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn-outline:hover{
  border:1px solid rgba(22,104,196,.6);
  background:rgba(22,104,196,.1);
  box-shadow:0 0 26px -8px rgba(22,104,196,.35);
}

/* equal-width helper — keeps two CTAs of differing label length the
   same visual size instead of shrinking to their own text content */
.btn-eq{min-width:290px}
@media(max-width:900px){.btn-eq{min-width:260px}}

.arr{font-style:normal;transition:transform .22s var(--ease)}
.btn:hover .arr,.lnk:hover .arr{transform:translateX(4px)}

.lnk{
  display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-lt);
  border-bottom:1px solid rgba(124,186,255,.4);padding-bottom:3px;transition:color .25s,border-color .25s;
}
.lnk:hover{color:var(--navy);border-color:var(--navy)}

/* ═══════ PULSE ═══════ */
.pulse{width:8px;height:8px;border-radius:50%;background:var(--warn);position:relative;flex:none;display:inline-block}
.pulse.go{background:var(--go)}
.pulse.sm{width:6px;height:6px}
.pulse::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3);opacity:0}}

/* ═══════ REVEAL ═══════ */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ═══════ SCROLL PROGRESS ═══════ */
.progress{position:fixed;top:0;left:0;height:2px;z-index:400;width:0;
  background:linear-gradient(90deg,var(--blue-dp),var(--blue-lt),var(--copper-lt));
  box-shadow:0 0 12px rgba(77,159,255,.6);transition:width .1s linear}

/* ═══════ NAV — floating glass capsule ═══════ */
.nav{position:fixed;inset:14px 0 auto;z-index:150;pointer-events:none;transition:inset .35s var(--ease)}
.nav.solid{inset:10px 0 auto}
.nav-in{
  pointer-events:auto;
  max-width:calc(var(--shell) - 40px);margin:0 auto;padding:0 10px 0 16px;
  height:var(--nav-h);display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--rule);border-radius:22px;
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 18px 50px -18px rgba(10,22,40,.22),0 0 0 1px rgba(255,255,255,.5) inset;
  transition:height .35s var(--ease),background .35s,box-shadow .35s;
}
.nav.solid .nav-in{height:64px;background:rgba(255,255,255,.9);box-shadow:0 20px 56px -18px rgba(10,22,40,.25),0 0 0 1px rgba(255,255,255,.6) inset}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:36px;width:auto;transition:height .35s var(--ease);filter:drop-shadow(0 0 10px rgba(22,104,196,.25))}
.nav.solid .brand img{height:31px}
.brand-txt b{display:block;font-family:var(--disp);font-weight:800;font-size:.78rem;letter-spacing:.01em;line-height:1.15;color:var(--navy);white-space:nowrap}
.brand-txt i{display:block;font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-mute);margin-top:2px}

/* icon shown only on mobile, where the button becomes icon-only to save
   space for the brand text next to the logo — see the ≤900px block */
.nav-book-ico{display:none}

.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links>li{position:relative}
.nav-links>li>a{
  display:flex;align-items:center;gap:6px;font-size:.77rem;font-weight:500;letter-spacing:.02em;
  color:var(--navy-soft);padding:9px 9px;border-radius:100px;transition:color .25s,background .25s,box-shadow .25s;
  white-space:nowrap;
}
.nav-links>li>a:hover,.nav-links>li>a[aria-current="page"]{
  color:var(--navy);background:var(--glass-2);
  box-shadow:0 0 0 1px var(--rule) inset;
}
.nav-links>li>a[aria-current="page"]{box-shadow:0 0 0 1px rgba(22,104,196,.3) inset,0 0 18px -6px rgba(22,104,196,.35)}
.nav-links .caret{font-size:.48rem;opacity:.55;transition:transform .25s}
.nav-links li:hover .caret,.nav-links li:focus-within .caret{transform:rotate(180deg)}

.mega{
  position:absolute;top:calc(100% + 16px);left:50%;translate:-50% 0;
  min-width:530px;background:rgba(255,255,255,.96);
  border:1px solid var(--rule);border-radius:var(--r);
  backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:0 34px 80px -20px rgba(10,22,40,.2),0 0 0 1px rgba(255,255,255,.5) inset;
  padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:5px;
  opacity:0;visibility:hidden;translate:-50% 8px;
  transition:opacity .25s var(--ease),translate .25s var(--ease),visibility .25s;
  z-index:5;
}
.nav-links li:hover .mega,.nav-links li:focus-within .mega{opacity:1;visibility:visible;translate:-50% 0}
.mega::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.mega a{display:block;padding:13px 15px;border-radius:var(--r-sm);transition:background .22s,box-shadow .22s}
.mega a:hover{background:var(--glass-2);box-shadow:0 0 0 1px var(--rule) inset}
/* overflow-wrap is a defensive guard: if a fallback system font ever
   renders wider than the custom webfont (slow connection, blocked font
   request), long labels break instead of forcing the row wider than its
   container. Costs nothing when the webfont loads fine. */
.mega b{display:block;font-family:var(--disp);font-size:.92rem;font-weight:600;letter-spacing:-.01em;color:var(--navy);margin-bottom:3px;overflow-wrap:break-word}
.mega i{font-style:normal;font-size:.75rem;color:var(--navy-mute);line-height:1.5;display:block;overflow-wrap:break-word}
.mega a{min-width:0}

/* Mobile drill-down nav — hidden by default (including if @media somehow
   isn't applied), made real inside the ≤900px block further down. */
.mnav{display:none}

/* real platform icon marks in the nav — desktop only; mobile keeps them
   in the footer instead of crowding the already-tight nav-act cluster
   (search/book-now/burger) that has broken from overflow before. */
.nav-social{display:flex;align-items:center;gap:4px;flex:none;margin-left:6px;padding-left:8px;border-left:1px solid var(--rule)}
.nav-soc-ico{display:block;width:20px;height:20px;border-radius:6px;overflow:hidden;flex:none;transition:transform .25s var(--ease),box-shadow .25s}
.nav-soc-ico svg{display:block;width:100%;height:100%}
.nav-soc-ico:hover{transform:translateY(-2px);box-shadow:0 8px 18px -6px rgba(10,22,40,.35)}

.nav-act{display:flex;align-items:center;gap:10px;flex:none}
.nav-search{
  display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:100px;
  border:1px solid var(--rule);background:var(--glass);
  color:var(--navy-mute);font-size:.73rem;cursor:pointer;transition:all .25s;
}
.nav-search:hover{border-color:rgba(22,104,196,.35);color:var(--navy);box-shadow:0 0 20px -6px rgba(22,104,196,.3)}
.nav-search kbd{font-family:var(--mono);font-size:.6rem;padding:2px 6px;border-radius:5px;background:var(--glass-2);border:1px solid var(--rule)}

.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex:none}
.burger span{display:block;width:23px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;transition:.3s var(--ease)}
.burger.open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger.open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ═══════ COMMAND PALETTE ═══════
   Backdrop stays dark/dimmed regardless of theme — that's the standard
   modal-scrim pattern in light-themed apps too (e.g. macOS Spotlight),
   not a leftover from the dark theme. The box itself is now light. */
.cmdk{position:fixed;inset:0;z-index:500;display:none;background:rgba(4,6,10,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:11vh 20px 20px}
.cmdk.open{display:block}
.cmdk-box{
  max-width:660px;margin:0 auto;background:rgba(255,255,255,.98);border-radius:var(--r);overflow:hidden;
  box-shadow:0 50px 110px -20px rgba(10,22,40,.5),0 0 0 1px var(--rule) inset,0 0 80px -30px rgba(22,104,196,.2);
  border:1px solid var(--rule);animation:cmdIn .28s var(--ease);
}
@keyframes cmdIn{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
.cmdk-in{display:flex;align-items:center;gap:13px;padding:19px 22px;border-bottom:1px solid var(--rule)}
.cmdk-in svg{color:var(--blue-lt)}
.cmdk-in input{flex:1;border:none;outline:none;background:none;font-size:1.02rem;letter-spacing:-.01em;color:var(--navy)}
.cmdk-in input::placeholder{color:var(--navy-mute)}
.cmdk-esc{font-family:var(--mono);font-size:.6rem;color:var(--navy-mute);border:1px solid var(--rule);border-radius:6px;padding:4px 8px;background:var(--glass);cursor:pointer}
.cmdk-list{max-height:52vh;overflow-y:auto;padding:9px}
.cmdk-item{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:var(--r-sm);cursor:pointer;transition:background .15s,box-shadow .15s}
.cmdk-item:hover,.cmdk-item.sel{background:var(--glass-2);box-shadow:0 0 0 1px var(--rule) inset}
.cmdk-item .ci-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-lt);flex:none;width:76px}
.cmdk-item b{display:block;font-size:.92rem;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.cmdk-item i{font-style:normal;font-size:.76rem;color:var(--navy-mute)}
.cmdk-none{padding:34px;text-align:center;color:var(--navy-mute);font-size:.88rem}

/* ═══════ BOOK NOW MODAL ═══════ */
.bnk{position:fixed;inset:0;z-index:500;display:none;background:rgba(4,6,10,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:11vh 20px 20px}
.bnk.open{display:block}
.bnk-box{
  max-width:600px;margin:0 auto;background:rgba(255,255,255,.98);border-radius:var(--r);overflow:hidden;
  box-shadow:0 50px 110px -20px rgba(10,22,40,.5),0 0 0 1px var(--rule) inset,0 0 80px -30px rgba(22,104,196,.2);
  border:1px solid var(--rule);animation:cmdIn .28s var(--ease);
}
.bnk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:28px 30px 6px}
.bnk-eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-lt);display:block;margin-bottom:10px}
.bnk-head h3{font-family:var(--disp);font-size:1.28rem;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.bnk-close{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:var(--glass);
  color:var(--navy-mute);cursor:pointer;display:grid;place-items:center;transition:all .25s}
.bnk-close:hover{color:var(--navy);border-color:rgba(10,22,40,.25);background:var(--glass-2)}
.bnk-opts{display:grid;gap:10px;padding:20px 24px}
.bnk-opt{
  display:flex;align-items:center;gap:16px;padding:20px 20px;border-radius:var(--r-sm);
  border:1px solid var(--rule);background:var(--glass);transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.bnk-opt:hover{border-color:rgba(22,104,196,.35);background:var(--glass-2);transform:translateY(-2px);box-shadow:0 0 30px -10px rgba(22,104,196,.25)}
.bnk-ico{flex:none;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  color:var(--blue-lt);background:rgba(22,104,196,.08);border:1px solid rgba(22,104,196,.18)}
.bnk-ico svg{width:22px;height:22px}
.bnk-txt{flex:1;min-width:0}
.bnk-txt b{display:block;font-family:var(--disp);font-size:.98rem;font-weight:600;letter-spacing:-.015em;color:var(--navy);margin-bottom:4px}
.bnk-txt i{font-style:normal;font-size:.8rem;color:var(--navy-mute);line-height:1.5}
.bnk-arr{flex:none;color:var(--navy-mute);font-size:1.1rem;transition:transform .25s var(--ease),color .25s}
.bnk-opt:hover .bnk-arr{transform:translateX(4px);color:var(--blue-lt)}
.bnk-foot{padding:4px 30px 26px;font-size:.8rem;color:var(--navy-mute);text-align:center}
.bnk-foot a{color:var(--blue-lt);border-bottom:1px solid rgba(22,104,196,.3)}
.bnk-foot a:hover{color:var(--navy)}

@media(max-width:560px){
  .bnk{padding:8vh 12px 12px}
  .bnk-head{padding:24px 22px 4px}
  .bnk-opts{padding:18px 18px}
  .bnk-opt{padding:16px}
  .bnk-foot{padding:4px 22px 22px}
}

/* ═══════ PAGE HERO (inner pages) ═══════ */
.phero{background:var(--bg0);color:var(--navy);padding:calc(var(--nav-h) + 120px) 0 92px;overflow:hidden}
.phero-media{position:absolute;inset:0;z-index:0}
.phero-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.24;
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 96%);mask-image:linear-gradient(to bottom,#000 30%,transparent 96%)}
/* light veil over the (dark-toned mining) photography, not a dark one —
   opaque enough near the text that dark type stays crisp regardless of
   what's happening tonally in the photo underneath */
.phero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(251,250,248,.94) 10%,rgba(251,250,248,.75) 55%,rgba(251,250,248,.5) 100%)}
.phero-in{position:relative;z-index:2;max-width:800px}
.phero h1{font-family:var(--disp);font-weight:900;font-size:clamp(2.4rem,5.8vw,4.4rem);line-height:1;letter-spacing:-.042em;margin-bottom:24px;color:var(--navy)}
.phero .lead{max-width:640px}
.crumb{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-mute);margin-bottom:28px}
.crumb a:hover{color:var(--navy)}
.crumb span{opacity:.4}

/* ═══════ HOME HERO — full-bleed image background, cinematic effects ═══════
   Went through several earlier treatments (contained banner, dark
   OHZI-style abstract, plain text) — this is the "image background with
   cool effects" round: the brand's own hero-bg.jpg composite (the same
   plane-over-mine-over-mountains imagery the logo mark itself uses,
   already in assets/, no new sourcing needed) full-bleed behind the
   content, dimmed by a navy scrim for legibility, with a slow Ken-Burns
   zoom on the image, a gentle JS scroll parallax on top of that zoom
   (two different elements each owning one transform, so they don't
   fight), drifting light particles, and a soft pulsing glow behind the
   now much larger logo. Text runs light-on-dark via the .dark utility's
   --navy remap, same technique used elsewhere for locked-dark panels. */
.hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 60px) 0 20px;color:var(--navy)}
.hero-bg{position:absolute;inset:-6% 0 -6%;z-index:0;overflow:hidden;will-change:transform}
@media(prefers-reduced-motion:no-preference){
  .hero-bg-img{animation:heroZoom 26s ease-in-out infinite alternate}
}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.1)}}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,8,16,.8) 0%,rgba(6,12,22,.58) 34%,rgba(6,12,22,.66) 68%,rgba(3,6,12,.95) 100%);
}
.hero-scrim::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 75% 55% at 50% 26%,transparent 0%,rgba(0,0,0,.4) 100%)}
.hero-particles{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-particles span{position:absolute;bottom:-4%;border-radius:50%;
  background:rgba(255,255,255,.65);box-shadow:0 0 7px 1px rgba(124,186,255,.55)}
@media(prefers-reduced-motion:no-preference){
  .hero-particles span{animation-name:heroFloat;animation-timing-function:linear;animation-iteration-count:infinite}
}
@keyframes heroFloat{
  0%{transform:translate(0,0);opacity:0}
  8%{opacity:.85}
  88%{opacity:.35}
  100%{transform:translate(var(--dx),-118vh);opacity:0}
}
.hero-card,.hero-stats-row{position:relative;z-index:2}
.hero-logo-wrap{position:relative;width:fit-content;margin:0 auto 26px}
.hero-logo-wrap::before{content:'';position:absolute;inset:-34%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(124,186,255,.4) 0%,rgba(217,138,79,.14) 55%,transparent 72%);
  filter:blur(22px)}
@media(prefers-reduced-motion:no-preference){
  .hero-logo-wrap::before{animation:logoGlow 4.2s ease-in-out infinite alternate}
}
@keyframes logoGlow{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.08)}}
.hero-logo{display:block;width:clamp(180px,20vw,280px);height:clamp(180px,20vw,280px);
  filter:drop-shadow(0 14px 44px rgba(0,0,0,.55))}
.hero-card{max-width:720px;margin:0 auto;padding:0;text-align:center}
.hero-h{font-family:var(--disp);font-weight:900;font-size:clamp(2.4rem,5.5vw,4.4rem);line-height:.98;letter-spacing:-.03em;margin-bottom:18px;color:var(--navy)}
.hero-h .accent{color:transparent;
  background:linear-gradient(96deg,var(--navy) 6%,var(--blue-lt) 48%,var(--blue) 78%,var(--copper-lt) 108%);
  -webkit-background-clip:text;background-clip:text}
.hero-fly{font-family:var(--ser);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.7rem);color:var(--copper-lt);margin-bottom:22px;letter-spacing:-.01em}
.hero-sub{max-width:560px;margin:0 auto 30px;font-size:clamp(.95rem,1.2vw,1.08rem);color:var(--navy-soft);line-height:1.68}
/* .only-sm is the tightened phone copy, swapped in at <=560px below */
.only-sm{display:none}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-emerg{
  display:inline-flex;align-items:center;gap:13px;margin-top:26px;padding:13px 22px;border-radius:100px;
  border:1px solid rgba(255,90,60,.35);background:rgba(255,90,60,.07);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--navy-soft);font-size:.83rem;width:fit-content;margin-inline:auto;
  transition:background .25s,border-color .25s,transform .2s var(--ease),box-shadow .3s;
}
.hero-emerg b{font-weight:600;color:var(--navy)}
.hero-emerg:hover{background:rgba(255,90,60,.14);border-color:var(--warn);transform:translateY(-2px);box-shadow:0 0 34px -8px rgba(255,90,60,.5)}

/* the live-ops/quarter-stats/accreditation cards sit in their own row
   under the headline block, three-up. */
.hero-stats-row{padding:44px 0 8px}
.hero-side{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hs-card{
  background:var(--glass-2);border:1px solid var(--rule);border-radius:var(--r);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:20px 22px;position:relative;overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06) inset;
}
.hs-card::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,104,196,.4),transparent)}
.hs-head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--navy-mute);margin-bottom:15px}
.hs-tick{font-size:.8rem;color:var(--navy-soft);line-height:1.55;min-height:2.5em}
.hs-tick b{color:var(--navy);font-weight:600}
.hs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hs-stat{padding:4px 0}
.hs-stat b{display:block;font-family:var(--disp);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1.1}
.hs-stat i{display:block;font-style:normal;font-family:var(--mono);font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-mute);margin-top:5px}
.hs-bars{display:flex;align-items:flex-end;gap:5px;height:44px;margin-top:4px}
.hs-bars i{flex:1;background:linear-gradient(to top,rgba(22,104,196,.5),rgba(124,186,255,.85));border-radius:3px 3px 0 0;height:calc(var(--h)*1%);min-height:8%}
@media(prefers-reduced-motion:no-preference){
  .hs-bars i{animation:eq 2.6s var(--ease-io) infinite alternate;animation-delay:calc(var(--d)*1s)}
  @keyframes eq{to{height:calc(var(--h2)*1%)}}
}
.hs-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hs-badges{display:flex;gap:8px;flex-wrap:wrap}
.hs-badges span{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper-lt);border:1px solid rgba(217,138,79,.28);border-radius:100px;padding:6px 12px;background:rgba(217,138,79,.05)}

/* ═══════ ACCREDITATION STRIP ═══════ */
.accred{background:var(--bg0);border-top:1px solid var(--rule-2);padding:26px 0;color:var(--navy)}
.accred-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.acc{
  display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-soft);border:1px solid var(--rule);border-radius:100px;padding:9px 18px;background:var(--glass);
  transition:border-color .25s,color .25s,box-shadow .3s;
}
.acc:hover{border-color:rgba(22,104,196,.4);color:var(--navy);box-shadow:0 0 24px -8px rgba(22,104,196,.25)}
.acc b{color:var(--copper-lt);font-weight:600}

/* ═══════ LOGO MARQUEE ═══════ */
.proof{background:var(--bg0);padding:56px 0 66px;color:var(--navy);border-top:1px solid var(--rule-2)}
.proof-label{text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--navy-mute);margin-bottom:34px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;gap:74px;width:max-content;animation:mq 46s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.lw{font-family:var(--disp);font-size:1.16rem;font-weight:700;letter-spacing:.1em;color:rgba(10,22,40,.3);white-space:nowrap;display:flex;align-items:baseline;gap:8px;transition:color .3s,text-shadow .3s}
.lw:hover{color:var(--navy);text-shadow:none}
.lw i{font-style:normal;font-size:.6rem;letter-spacing:.16em;opacity:.65}
.lw.serif{font-family:var(--ser);font-size:1.5rem;letter-spacing:.12em;font-weight:400}

/* ═══════ SPLIT / MARKS ═══════ */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:start}
.split.center{align-items:center}
.split.rev{grid-template-columns:1.15fr 1fr}
.split>*,.cta-in>*,.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}
.marks{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.marks span{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--navy-soft);
  border:1px solid var(--rule);border-radius:100px;padding:8px 16px;background:var(--glass)}

/* ═══════ STAT BAND ═══════ */
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-2);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.bd{background:var(--bg1);padding:40px 30px;text-align:center;transition:background .3s;position:relative}
.bd::after{content:'';position:absolute;left:50%;bottom:0;translate:-50% 0;width:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-lt),transparent);transition:width .5s var(--ease)}
.bd:hover{background:var(--bg2)}
.bd:hover::after{width:80%}
.bd b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.03em;line-height:1;color:var(--navy)}
.bd i{display:block;font-style:normal;margin-top:11px;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-mute)}

/* ═══════ CARD GRIDS ═══════ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.card{
  background:var(--bg1);border-radius:var(--r);padding:38px 34px 36px;
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s;
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(10,22,40,.14),rgba(10,22,40,.04) 38%,rgba(10,22,40,.02));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  transition:opacity .35s;
}
.card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;
  background:var(--stroke-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  transition:opacity .35s;
}
.card:hover{transform:translateY(-5px);background:var(--bg2);box-shadow:0 30px 70px -30px rgba(0,0,0,.8),var(--glow-blue)}
.card:hover::after{opacity:1}
.card.cop:hover{box-shadow:0 30px 70px -30px rgba(0,0,0,.8),var(--glow-copper)}
.card h3{font-family:var(--disp);font-size:1.24rem;font-weight:700;letter-spacing:-.02em;margin-bottom:11px;color:var(--navy)}
.card p{font-size:.9rem;color:var(--navy-soft);line-height:1.72}
.card-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--copper-lt);display:block;margin-bottom:24px}
.card-ico{width:44px;height:44px;margin-bottom:22px;color:var(--blue-lt)}
.card-ico svg{width:100%;height:100%;stroke-width:1.3}

.flush{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-2);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.flush>*{padding:40px 34px;background:var(--bg1);transition:background .3s var(--ease);position:relative}
.flush>*::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,186,255,.55),transparent);
  opacity:0;transition:opacity .35s}
.flush>*:hover{background:var(--bg2)}
.flush>*:hover::before{opacity:1}

/* ═══════ SERVICE TILE ═══════ */
.svct{display:flex;flex-direction:column;cursor:pointer}
.svct .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--copper-lt);margin-bottom:20px}
.svct h3{font-family:var(--disp);font-size:1.16rem;font-weight:700;letter-spacing:-.02em;margin-bottom:9px;color:var(--navy)}
.svct p{font-size:.86rem;color:var(--navy-soft);line-height:1.68;margin-bottom:18px}
.svct .go{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-lt);margin-top:auto;display:flex;align-items:center;gap:7px;transition:gap .25s,color .25s}
.svct:hover .go{gap:12px;color:var(--navy)}

/* ═══════ COMPARISON TABLE ═══════ */
.compare{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--bg1);
  box-shadow:0 30px 70px -40px rgba(10,22,40,.2)}
.compare-head{display:grid;grid-template-columns:1fr 1fr}
.compare-head span{padding:20px 26px;font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;text-align:center}
.compare-head .ch-old{color:var(--navy-mute);background:var(--bg2)}
.compare-head .ch-new{color:#fff;background:linear-gradient(120deg,var(--blue),var(--blue-dp))}
.compare-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule-2)}
.compare-row>div{padding:20px 26px;display:flex;align-items:flex-start;gap:11px;font-size:.88rem;line-height:1.55}
.compare-row .cr-old{color:var(--navy-mute)}
.compare-row .cr-new{color:var(--navy);font-weight:500;background:rgba(22,104,196,.04)}
.compare-ico{flex:none;width:16px;height:16px;margin-top:2px}
.compare-ico.x{color:var(--warn)}
.compare-ico.ok{color:var(--go)}

.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:46px}
.chip{
  font-size:.74rem;font-weight:500;padding:10px 21px;border-radius:100px;
  border:1px solid var(--rule);background:var(--glass);color:var(--navy-soft);cursor:pointer;
  transition:all .25s var(--ease);
}
.chip:hover{border-color:var(--rule-d);color:var(--navy)}
.chip.on{background:linear-gradient(120deg,var(--blue),var(--blue-dp));color:#fff;border-color:transparent;
  box-shadow:0 0 0 1px rgba(124,186,255,.35) inset,0 8px 28px -8px rgba(22,104,196,.7)}
.hide{display:none !important}

/* ═══════ TEAM ═══════ */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-2);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.tm{background:var(--bg1);padding:36px 26px 32px;text-align:center;transition:background .35s var(--ease);position:relative}
.tm::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,186,255,.5),transparent);opacity:0;transition:opacity .35s}
.tm:hover{background:var(--bg2)}
.tm:hover::before{opacity:1}
.tm-av{
  width:84px;height:84px;border-radius:50%;margin:0 auto 20px;
  display:grid;place-items:center;font-family:var(--disp);font-size:1.5rem;font-weight:800;
  color:#fff;letter-spacing:-.02em;position:relative;
  background:linear-gradient(150deg,var(--blue),var(--blue-dp));
  box-shadow:0 0 0 1px rgba(124,186,255,.3),0 10px 30px -8px rgba(22,104,196,.6);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.tm:hover .tm-av{transform:scale(1.07);box-shadow:0 0 0 1px rgba(124,186,255,.5),0 14px 40px -8px rgba(77,159,255,.7)}
.tm-av.cop{background:linear-gradient(150deg,var(--copper),#8E4A24);box-shadow:0 0 0 1px rgba(235,173,121,.3),0 10px 30px -8px rgba(217,138,79,.5)}
.tm:hover .tm-av.cop{box-shadow:0 0 0 1px rgba(235,173,121,.5),0 14px 40px -8px rgba(217,138,79,.65)}
.tm-av.nvy{background:linear-gradient(150deg,#2A3B55,#141E30);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 30px -8px rgba(0,0,0,.6)}
.tm b{display:block;font-family:var(--disp);font-size:1.02rem;font-weight:700;letter-spacing:-.015em;margin-bottom:5px;color:var(--navy)}
.tm i{font-style:normal;font-size:.77rem;color:var(--navy-mute);line-height:1.45;display:block}
.tm .tm-tag{display:inline-block;margin-top:13px;font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-lt);border:1px solid rgba(217,138,79,.3);border-radius:100px;padding:4px 12px;background:rgba(217,138,79,.05)}

/* ═══════ PRICING ═══════ */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.plan{background:var(--bg1);border:1px solid var(--rule);border-radius:var(--r);padding:46px 42px 42px;position:relative;overflow:hidden}
.plan.feat{border-color:transparent;background:var(--bg2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85),var(--glow-blue)}
.plan.feat::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--bang,0deg),rgba(124,186,255,.7),rgba(217,138,79,.55),rgba(124,186,255,.08),rgba(124,186,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
@property --bang{syntax:'<angle>';initial-value:0deg;inherits:false}
@media(prefers-reduced-motion:no-preference){
  .plan.feat::before{animation:spin-border 7s linear infinite}
  @keyframes spin-border{to{--bang:360deg}}
}
.plan-tag{position:absolute;top:24px;right:24px;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(120deg,var(--blue),var(--blue-dp));color:#fff;border-radius:100px;padding:7px 15px;
  box-shadow:0 0 20px -4px rgba(77,159,255,.6)}
.plan-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;color:var(--copper-lt);margin-bottom:16px;display:block}
.plan h3{font-family:var(--disp);font-size:1.62rem;font-weight:800;letter-spacing:-.025em;line-height:1.14;margin-bottom:12px;color:var(--navy)}
.plan .sub{font-family:var(--ser);font-style:italic;font-size:1.06rem;color:var(--blue-lt);margin-bottom:26px;display:block;line-height:1.4}
.plan-price{display:flex;align-items:baseline;gap:9px;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:26px}
.plan-price b{font-family:var(--disp);font-size:2.1rem;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--navy)}
.plan-price i{font-style:normal;font-size:.8rem;color:var(--navy-mute)}
.plan-sec{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-mute);margin:24px 0 14px}
.plan ul li{padding:9px 0 9px 28px;position:relative;font-size:.88rem;color:var(--navy-soft);line-height:1.6}
.plan ul li::before{content:'';position:absolute;left:2px;top:16px;width:11px;height:6px;
  border-left:1.6px solid var(--blue-lt);border-bottom:1.6px solid var(--blue-lt);transform:rotate(-45deg)}
.plan .btn{margin-top:30px}

/* ═══════ ACCORDION ═══════ */
.acc-list{border-top:1px solid var(--rule)}
.acc-item{border-bottom:1px solid var(--rule)}
.acc-q{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:20px;padding:26px 0;
  font-family:var(--disp);font-size:1.06rem;font-weight:600;letter-spacing:-.015em;color:var(--navy);
  transition:color .25s;
}
.acc-q:hover{color:var(--blue-lt)}
.acc-q .acc-n{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--copper-lt);flex:none}
.acc-q .acc-ic{margin-left:auto;flex:none;width:18px;height:18px;position:relative}
.acc-q .acc-ic::before,.acc-q .acc-ic::after{content:'';position:absolute;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.acc-q .acc-ic::before{left:0;right:0;top:8px;height:2px}
.acc-q .acc-ic::after{top:0;bottom:0;left:8px;width:2px}
.acc-item.open .acc-ic::after{transform:scaleY(0)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.acc-a-in{padding:0 0 28px 44px;font-size:.92rem;color:var(--navy-soft);line-height:1.75;max-width:760px}

/* ═══════ DASHBOARD PANEL ═══════ */
.dash{
  /* deliberately dark regardless of the site's now-full-light theme —
     this mocks the HUB's own (genuinely dark) software UI and should
     read as a floating dark screen inset, like an embedded product
     screenshot, not re-theme with the page. Every child rule below
     still just uses the shared variable names; this is the only place
     that needs to reset them back to the --dark-* palette. */
  --bg1:var(--dark-bg1); --bg2:var(--dark-bg2); --bg3:var(--dark-bg3);
  --navy:var(--dark-navy); --navy-soft:var(--dark-navy-soft); --navy-mute:var(--dark-navy-mute);
  --glass:var(--dark-glass); --glass-2:var(--dark-glass-2);
  --rule:var(--dark-rule); --rule-2:var(--dark-rule-2);
  --blue-lt:var(--dark-blue-lt); --copper-lt:var(--dark-copper-lt);
  background:linear-gradient(160deg,var(--bg2),var(--bg1));
  border:1px solid rgba(124,186,255,.16);border-radius:var(--r);padding:18px;color:#fff;
  box-shadow:0 34px 84px -28px rgba(0,0,0,.85),0 0 60px -24px rgba(77,159,255,.3);display:grid;gap:14px;
}
.dash-bar{display:flex;align-items:center;gap:13px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.dots{display:flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--glass-2)}
.dash-name{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-mute)}
.dash-tick{display:flex;align-items:center;gap:11px;background:rgba(77,159,255,.07);border:1px solid rgba(124,186,255,.18);border-radius:var(--r-sm);padding:11px 15px;font-size:.78rem;color:var(--navy-soft)}
.dash-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.k{background:var(--glass);border:1px solid var(--rule);border-radius:var(--r-sm);padding:14px 13px}
.k i{display:block;font-style:normal;font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-mute);margin-bottom:7px}
.k b{font-family:var(--disp);font-size:1.4rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.k.warn{border-color:rgba(255,90,60,.35);background:rgba(255,90,60,.07)}
.k.warn b{color:#FF9078}
.dash-h{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-mute);margin-bottom:13px}
.dash-chart,.dash-dest{background:var(--glass);border:1px solid var(--rule);border-radius:var(--r-sm);padding:15px 16px}
.dash-chart svg{width:100%;height:82px;display:block}
.sp-line{stroke-dasharray:600;stroke-dashoffset:600}
.dash.lit .sp-line{animation:draw 2s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sp-fill{opacity:0}
.dash.lit .sp-fill{animation:fade .9s .9s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.dd{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:13px;margin-bottom:10px}
.dd:last-child{margin-bottom:0}
.dd span{font-size:.76rem;color:var(--navy-soft)}
.dd i{display:block;height:5px;border-radius:3px;background:var(--glass-2);position:relative;overflow:hidden}
.dd i::after{content:'';position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--blue-dp),var(--blue-lt));box-shadow:0 0 10px rgba(77,159,255,.6);transition:width 1.3s var(--ease)}
.dash.lit .dd i::after{width:var(--w)}
.dash-ai{display:flex;gap:13px;align-items:flex-start;
  background:linear-gradient(100deg,rgba(124,186,255,.12),rgba(124,186,255,.02));
  border:1px solid rgba(124,186,255,.26);border-radius:var(--r-sm);padding:14px 16px}
.ai-tag{flex:none;font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.14em;
  background:linear-gradient(120deg,var(--blue-lt),var(--blue));color:var(--bg0);border-radius:6px;padding:4px 9px;
  box-shadow:0 0 16px -2px rgba(124,186,255,.7)}
.dash-ai p{font-size:.79rem;color:var(--navy-soft);line-height:1.6}
.dash-ai b{color:#fff;font-weight:600}

/* ═══════ PROCESS STEPS ═══════ */
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule)}
.step{padding:36px 26px 0;border-right:1px solid var(--rule-2);position:relative}
.step:last-child{border-right:none}
.step::before{content:'';position:absolute;top:-1px;left:0;width:0;height:1px;
  background:linear-gradient(90deg,var(--blue-lt),var(--copper-lt));box-shadow:0 0 12px rgba(77,159,255,.5);
  transition:width .8s var(--ease)}
.step.in::before{width:100%}
.st-n{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;color:var(--copper-lt);display:block;margin-bottom:18px}
.step b{display:block;font-family:var(--disp);font-size:1.16rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;color:var(--navy)}
.step i{font-style:normal;font-size:.85rem;color:var(--navy-soft);line-height:1.62}

/* ═══════ EMERGENCY ═══════ */
.emerg{background:var(--bg1);color:var(--navy);padding:128px 0;overflow:hidden;border-block:1px solid var(--rule-2)}
.emerg-media{position:absolute;inset:0;z-index:0}
.emerg-img{position:absolute;inset:0;opacity:.28;
  -webkit-mask-image:linear-gradient(to right,transparent 4%,#000 55%);mask-image:linear-gradient(to right,transparent 4%,#000 55%)}
.emerg-img picture,.cta-img picture{display:block;width:100%;height:100%}
.emerg-img img,.cta-img img{display:block;width:100%;height:100%;object-fit:cover}
.cta-img img{object-position:center 30%}
.emerg-scrim{position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(255,255,255,.95) 8%,rgba(255,255,255,.78) 48%,rgba(255,255,255,.55) 100%),
             radial-gradient(ellipse at 78% 30%,rgba(255,90,60,.1),transparent 58%)}
.emerg-sweep{position:absolute;top:0;bottom:0;left:-30%;width:36%;
  background:linear-gradient(100deg,transparent,rgba(255,90,60,.08) 45%,transparent);animation:sweep 8s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(0)}100%{transform:translateX(370%)}}
.emerg-in{position:relative;z-index:2}
.emerg-h{font-family:var(--disp);font-weight:900;font-size:clamp(2.5rem,6.4vw,5rem);line-height:.94;letter-spacing:-.04em;margin-bottom:26px;color:var(--navy)}
.emerg-stats{display:flex;gap:60px;flex-wrap:wrap;margin:42px 0 38px;padding:32px 0;border-block:1px solid var(--rule)}
.emerg-stats b{display:block;font-family:var(--disp);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--navy)}
.emerg-stats b span{color:var(--warn);font-size:.6em}
.emerg-stats i{display:block;font-style:normal;margin-top:10px;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-mute)}

.ecard{
  background:var(--glass);border:1px solid var(--rule);border-radius:var(--r);
  padding:36px 32px;transition:border-color .3s,background .3s,transform .3s var(--ease),box-shadow .35s;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.ecard:hover{border-color:rgba(255,90,60,.45);background:rgba(255,90,60,.06);transform:translateY(-5px);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.8),0 0 44px -12px rgba(255,90,60,.45)}
.ecard .ec-ic{width:42px;height:42px;color:var(--warn);margin-bottom:22px;filter:drop-shadow(0 0 12px rgba(255,90,60,.5))}
.ecard .ec-ic svg{width:100%;height:100%;stroke-width:1.3}
.ecard h3{font-family:var(--disp);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:11px;color:var(--navy)}
.ecard p{font-size:.87rem;color:var(--navy-soft);line-height:1.68;margin-bottom:22px}
.ecard .ec-go{display:inline-flex;align-items:center;gap:9px;font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--warn);border-bottom:1px solid currentColor;padding-bottom:3px}

/* ═══════ NETWORK PANEL ═══════ */
.net-panel{background:var(--bg1);border:1px solid var(--rule);border-radius:var(--r);padding:12px 36px 32px;
  box-shadow:0 28px 66px -30px rgba(0,0,0,.8);position:relative;overflow:hidden}
.net-panel::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,186,255,.5),transparent)}
.np-head{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--navy-mute);padding:24px 0 20px;border-bottom:1px solid var(--rule)}
.np{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:21px 0;border-bottom:1px solid var(--rule-2)}
.np:last-child{border-bottom:none;padding-bottom:0}

/* ═══════ PHOTO CARD — real photography panel with a floating badge ═══════ */
.photo-card{position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:0 40px 90px -36px rgba(10,22,40,.35),0 0 0 1px var(--rule)}
.photo-card img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.photo-badge{
  position:absolute;right:18px;bottom:18px;left:18px;
  background:rgba(6,12,22,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-sm);padding:14px 18px;display:flex;align-items:center;gap:12px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6);
}
.photo-badge svg{flex:none;width:22px;height:22px;color:var(--dark-blue-lt)}
.photo-badge b{display:block;font-family:var(--disp);font-size:.86rem;font-weight:700;letter-spacing:-.01em;color:#fff;line-height:1.35}
.photo-badge b em{font-style:normal;color:var(--dark-blue-lt)}

/* ═══════ TECHNOLOGY PARTNER STRIP ═══════ */
.tech-partners{border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);background:var(--bg2)}
.tp-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 40px;padding:30px 0}
.tp-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-mute);
  flex:none;padding-right:10px;border-right:1px solid var(--rule)}
.tp-mark{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--navy-soft);transition:color .25s}
.tp-mark:hover{color:var(--navy)}
.tp-mark i{font-style:normal;font-family:var(--mono);font-weight:500;font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper-lt);background:rgba(184,101,52,.08);border:1px solid rgba(184,101,52,.22);
  border-radius:100px;padding:3px 9px}

/* ═══════ GALLERY — bento grid of real photography ═══════
   Each tile carries its own .rv (was one .rv on the grid wrapper — the
   whole block faded in as a single unit; per-tile is a nicer staggered
   cascade, consistent with how every other card grid on the site reveals). */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:130px;gap:14px}
.g-tile{position:relative;border-radius:var(--r-sm);overflow:hidden;
  box-shadow:0 20px 50px -26px rgba(10,22,40,.4);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
/* .gallery prefix (not just .g-tile:hover) deliberately matches the
   specificity of .js .rv.in{transform:none} (the settled reveal state) —
   without it, the reveal rule's higher specificity wins and silently
   eats this hover transform regardless of source order. */
.gallery .g-tile:hover{transform:translateY(-6px);box-shadow:0 30px 60px -22px rgba(10,22,40,.5)}
.g-tile::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;opacity:0;transition:opacity .4s}
.g-tile:hover::before{opacity:1}
.g-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease),filter .4s}
.g-tile:hover img{transform:scale(1.08)}
.g-tile::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(4,8,16,.82) 0%,rgba(4,8,16,.18) 48%,transparent 72%);
  transition:background .4s;pointer-events:none}
.g-tile:hover::after{background:linear-gradient(to top,rgba(4,8,16,.88) 0%,rgba(4,8,16,.1) 52%,transparent 74%)}
.g-cap{position:absolute;left:18px;right:18px;bottom:15px;z-index:3;transition:transform .4s var(--ease)}
.g-tile:hover .g-cap{transform:translateY(-3px)}
.g-cap b{display:block;font-family:var(--disp);font-size:.94rem;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.3}
.g-cap i{font-style:normal;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:4px}
.g-cap i::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--copper-lt);box-shadow:0 0 8px var(--copper-lt)}
.g-big{grid-column:span 2;grid-row:span 2}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}
.np b{font-family:var(--disp);font-size:2.1rem;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--navy)}
.np b span{color:var(--copper-lt);font-size:.62em}
.np i{font-style:normal;font-size:.77rem;color:var(--navy-soft);text-align:right}

.tick-list{margin-top:30px;border-top:1px solid var(--rule)}
.tick-list li{padding:16px 0 16px 32px;border-bottom:1px solid var(--rule-2);font-size:.92rem;color:var(--navy-soft);position:relative}
.tick-list li::before{content:'';position:absolute;left:4px;top:24px;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--blue-lt);box-shadow:0 0 10px rgba(77,159,255,.5)}

.ind-row{display:flex;flex-wrap:wrap;gap:10px}
.ind{font-family:var(--disp);font-size:.92rem;font-weight:600;padding:11px 23px;border-radius:100px;
  border:1px solid var(--rule);background:var(--glass);color:var(--navy-soft);transition:all .28s var(--ease)}
.ind:hover{background:var(--glass-2);color:var(--navy);border-color:rgba(124,186,255,.4);transform:translateY(-2px);
  box-shadow:0 0 26px -8px rgba(77,159,255,.5)}

/* ═══════ FOOTPRINT MAP ═══════ */
.fmap{
  /* deliberately dark, same reasoning as .dash — this reads as a live
     ops/command-centre display, which is the whole point of the visual */
  --bg1:var(--dark-bg1); --bg2:var(--dark-bg2);
  --navy:var(--dark-navy); --navy-soft:var(--dark-navy-soft); --navy-mute:var(--dark-navy-mute);
  --rule:var(--dark-rule);
  --blue-lt:var(--dark-blue-lt); --copper-lt:var(--dark-copper-lt);
  position:relative;background:linear-gradient(165deg,var(--bg2),var(--bg1));
  border:1px solid rgba(124,186,255,.15);border-radius:var(--r);overflow:hidden;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85),0 0 80px -40px rgba(77,159,255,.3)}
.fmap svg{width:100%;height:auto;display:block}
.fmap .contour{fill:none;stroke:rgba(124,186,255,.08);stroke-width:1}
.fmap .route{fill:none;stroke:rgba(124,186,255,.3);stroke-width:1.1;stroke-dasharray:4 7}
.fmap .node{fill:var(--blue-lt)}
.fmap .node-hub{fill:var(--copper-lt)}
.fmap .halo{fill:none;stroke:rgba(124,186,255,.5);stroke-width:1;opacity:0;transform-origin:center;transform-box:fill-box}
.js .fmap.lit .halo{animation:halo 3.2s var(--ease) infinite}
.fmap .halo.h2{animation-delay:1.1s}.fmap .halo.h3{animation-delay:2.2s}
@keyframes halo{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
.fmap .mover{fill:#fff;opacity:0}
.js .fmap.lit .mover{animation:mv 6s linear infinite}
@keyframes mv{0%{offset-distance:0%;opacity:0}10%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.fmap text{font-family:var(--mono);font-size:11px;fill:rgba(237,242,249,.68);letter-spacing:.08em}
.fmap text.hub-t{fill:var(--copper-lt);font-weight:500}
.fmap-live{position:absolute;left:18px;bottom:16px;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-soft);background:rgba(4,6,10,.6);border:1px solid var(--rule);
  border-radius:100px;padding:8px 16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fmap-live b{color:#fff}
.fmap-legend{position:absolute;right:18px;top:16px;display:flex;flex-direction:column;gap:7px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy-mute);background:rgba(4,6,10,.6);border:1px solid var(--rule);
  border-radius:12px;padding:12px 15px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fmap-legend span{display:flex;align-items:center;gap:8px}
.fmap-legend i{width:8px;height:8px;border-radius:50%;flex:none}
.fmap-legend .lg-hub{background:var(--copper-lt);box-shadow:0 0 8px rgba(235,173,121,.7)}
.fmap-legend .lg-node{background:var(--blue-lt);box-shadow:0 0 8px rgba(124,186,255,.7)}

/* ═══════ QUOTES ═══════ */
.q{background:var(--bg1);border:1px solid var(--rule);border-radius:var(--r);padding:48px 46px 42px;position:relative;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.8);overflow:hidden}
.q::before{content:'\201C';position:absolute;top:12px;left:34px;font-family:var(--ser);font-size:6rem;line-height:1;
  color:transparent;background:linear-gradient(140deg,var(--blue-lt),transparent);-webkit-background-clip:text;background-clip:text;opacity:.4}
.q::after{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,186,255,.45),transparent)}
.q blockquote{font-family:var(--ser);font-size:clamp(1.14rem,1.7vw,1.42rem);line-height:1.52;letter-spacing:-.01em;position:relative;margin-bottom:28px;color:var(--navy)}
.q figcaption{padding-top:22px;border-top:1px solid var(--rule)}
.q figcaption b{display:block;font-family:var(--disp);font-size:.92rem;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.q figcaption i{font-style:normal;font-size:.76rem;color:var(--blue-lt)}

/* ═══════ CTA ═══════ */
.cta{background:var(--bg1);color:var(--navy);padding:122px 0;overflow:hidden;border-top:1px solid var(--rule-2)}
.cta-media{position:absolute;inset:0;z-index:0}
.cta-img{position:absolute;inset:0;opacity:.22;
  -webkit-mask-image:linear-gradient(to left,#000 30%,transparent 90%);mask-image:linear-gradient(to left,#000 30%,transparent 90%)}
.cta-scrim{position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(255,255,255,.96) 12%,rgba(255,255,255,.85) 52%,rgba(255,255,255,.7) 100%),
             radial-gradient(ellipse at 16% 18%,rgba(22,104,196,.14),transparent 58%)}
.cta-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr .88fr;gap:74px;align-items:start}
.cta-h{font-family:var(--disp);font-weight:900;font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.02;letter-spacing:-.04em;margin-bottom:22px;color:var(--navy)}
.cta-lines{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:42px;background:var(--rule-2);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.cl{background:rgba(255,255,255,.5);padding:23px 24px;transition:background .28s}
.cl:hover{background:rgba(22,104,196,.06)}
.cl i{display:block;font-style:normal;font-family:var(--mono);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-mute);margin-bottom:9px}
.cl b{display:block;font-family:var(--disp);font-size:1rem;font-weight:600;letter-spacing:-.015em;margin-bottom:5px;word-break:break-word;color:var(--navy)}
.cl em{font-style:normal;font-size:.72rem;color:var(--navy-mute)}

/* ═══════ FORM ═══════ */
/* base rule is now the light treatment directly — .cta (which uses the
   base, no modifier) went light along with everything else, so the old
   dark-glass base + a separate ".on-light" override for contact.html is
   no longer two different things; .on-light is kept as a harmless no-op
   alias in case anything still references it. */
.form-card{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:38px 36px 34px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:grid;gap:16px;position:relative;overflow:hidden;
  box-shadow:0 30px 70px -32px rgba(10,22,40,.2)}
.form-card::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,104,196,.4),transparent)}
.form-card.on-light{background:#fff;border-color:var(--rule);box-shadow:0 26px 60px -32px rgba(10,22,40,.18)}
.form-card.on-light::before{background:linear-gradient(90deg,transparent,rgba(22,104,196,.35),transparent)}
.form-card h3{font-family:var(--disp);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;color:var(--navy)}
.form-card.on-light h3{color:var(--navy)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-card label{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--navy-mute)}
.form-card label span{color:var(--warn)}
.form-card input,.form-card select,.form-card textarea{
  width:100%;margin-top:8px;background:#FBFAF8;border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:12px 15px;color:var(--navy);font-family:var(--ui);font-size:.9rem;letter-spacing:0;text-transform:none;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.form-card textarea{resize:vertical;min-height:80px}
.form-card select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230A1628' stroke-width='1.6' fill='none' opacity='.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.form-card select option{background:#fff;color:var(--navy)}
.form-card input::placeholder,.form-card textarea::placeholder{color:var(--navy-mute)}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  outline:none;background:#fff;border-color:var(--blue-lt);box-shadow:0 0 0 3px rgba(22,104,196,.1)}
.form-card input.err,.form-card textarea.err,.form-card select.err{border-color:var(--warn);box-shadow:0 0 0 3px rgba(225,74,48,.12)}
.f-note{font-size:.78rem;color:var(--blue-lt);min-height:1.2em;text-align:center}
.f-note.bad{color:var(--warn)}

/* ═══════ FOOTER — giant outline wordmark ═══════ */
.footer{background:var(--bg0);color:var(--navy-soft);position:relative;z-index:1;border-top:1px solid var(--rule-2);overflow:hidden}
.foot-mark{
  font-family:var(--disp);font-weight:900;letter-spacing:-.04em;line-height:.82;
  font-size:clamp(3.4rem,11.5vw,10.4rem);text-align:center;user-select:none;pointer-events:none;
  padding:70px 20px 0;white-space:nowrap;
  color:transparent;
  background:linear-gradient(180deg,var(--navy) 0%,var(--blue-dp) 60%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 10px 28px rgba(10,22,40,.22));
}
.foot-live{background:rgba(10,22,40,.03);border-block:1px solid var(--rule-2);margin-top:56px}
.foot-live-in{display:flex;flex-wrap:wrap;gap:16px 38px;padding:15px 0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-mute)}
.foot-live-in span{display:flex;align-items:center;gap:9px}
.foot-live-in b{color:var(--navy);font-weight:600}
.fl-emerg{margin-left:auto}
.fl-emerg b{color:var(--warn)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:52px;padding-block:66px 54px}
.foot-brand img{height:50px;width:auto;margin-bottom:22px;filter:drop-shadow(0 0 12px rgba(77,159,255,.35))}
.foot-brand p{font-size:.86rem;line-height:1.74;color:var(--navy-mute);max-width:340px}
.foot-brand em{font-style:normal;color:var(--copper-lt);font-weight:500}
.foot-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.foot-acc span{font-family:var(--mono);font-size:.54rem;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:100px;padding:5px 13px;color:var(--navy-mute);background:var(--glass)}
.foot-soc{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.foot-soc-ico{display:block;width:34px;height:34px;border-radius:9px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.foot-soc-ico svg{display:block;width:100%;height:100%}
.foot-soc-ico:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(10,22,40,.4)}
.foot-col .foot-h{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--navy);margin-bottom:20px}
.foot-col a{display:block;font-size:.85rem;padding:6px 0;color:var(--navy-mute);transition:color .22s,translate .22s}
.foot-col a:hover{color:var(--blue-lt);translate:3px 0}
.foot-hrs{font-size:.74rem;line-height:1.85;color:var(--navy-mute);margin-top:15px}
.foot-hrs b{color:var(--navy-soft);font-weight:500}
.foot-base{border-top:1px solid var(--rule-2)}
.foot-base-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0;font-size:.74rem;color:var(--navy-mute)}
.fb-links{display:flex;gap:22px}
.fb-links a:hover{color:var(--blue-lt)}

/* ═══════ BACK TO TOP ═══════ */
.totop{position:fixed;right:26px;bottom:26px;z-index:120;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.85);color:var(--navy);border:1px solid var(--rule);cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,visibility .3s,transform .3s var(--ease),border-color .25s,box-shadow .3s;
  box-shadow:0 12px 34px -10px rgba(10,22,40,.35)}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:rgba(22,104,196,.5);box-shadow:0 12px 34px -10px rgba(10,22,40,.35),0 0 30px -8px rgba(22,104,196,.3)}

/* ═══════ CHAT WIDGET — bottom-right, stacked above .totop so the two
   floating buttons never collide (.totop only appears after scrolling,
   but its space is reserved unconditionally rather than depending on
   that visibility state). ═══════ */
/* a pill, not a bare circle — a plain logo button gave no hint it was
   the chat launcher, so a "Let's Chat" label rides alongside the icon
   (and collapses away when the panel is open, leaving just the close
   circle). overflow is NOT clipped at the pill level — only the small
   icon circle inside it is — so the notification badge (a sibling of
   that circle, not a child) can sit on the icon's corner without being
   cut off, which is what was happening when the whole pill clipped it. */
.chat-fab{
  position:fixed;right:26px;bottom:92px;z-index:170;height:60px;border-radius:100px;
  background:#fff;border:1px solid var(--rule);cursor:pointer;
  display:flex;align-items:center;padding:5px;color:var(--navy);
  box-shadow:0 16px 40px -12px rgba(10,22,40,.35);
  transition:transform .3s var(--ease),box-shadow .3s,padding .3s var(--ease);
}
.chat-fab:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 48px -12px rgba(10,22,40,.45)}
.chat-fab.open{padding:0;width:60px}
/* the icon wrapper itself is NOT clipped — only .chat-fab-ico-clip inside
   it is, so the badge (a sibling of that clip, not a child) can sit right
   on the icon's corner without being cut off by the same overflow:hidden
   that crops the logo image into a circle. */
.chat-fab-ico{position:relative;flex:none;width:48px;height:48px}
/* both icons occupy the SAME grid cell (grid-area:1/1) with place-items
   centring them independently of their own size — the previous attempt
   used two nested position:absolute+inset:0+margin:auto icons, which
   *should* centre reliably but visibly didn't (an SVG with no explicit
   width/height attribute of its own, sized purely via CSS, was landing
   off-centre in testing here). The grid-stacking technique is the more
   bulletproof of the two ways to overlay elements for a crossfade, so
   switched to it outright rather than debugging the absolute version
   further — worth defaulting to this pattern for any future icon-swap
   toggle in this codebase instead of the inset/margin:auto trick. */
.chat-fab-ico-clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.chat-fab .ci-logo{grid-area:1/1;width:100%;height:100%;object-fit:cover;transition:opacity .2s,transform .2s}
.chat-fab .ci-close{grid-area:1/1;width:22px;height:22px;opacity:0;transform:rotate(-45deg) scale(.6);color:var(--navy);transition:opacity .2s,transform .2s}
.chat-fab.open .ci-logo{opacity:0;transform:rotate(45deg) scale(.6)}
.chat-fab.open .ci-close{opacity:1;transform:none}
.chat-fab-label{
  font-family:var(--disp);font-weight:700;font-size:.83rem;letter-spacing:-.01em;color:var(--navy);
  padding:0 16px 0 10px;white-space:nowrap;max-width:140px;overflow:hidden;
  transition:max-width .3s var(--ease),opacity .2s,padding .3s var(--ease);
}
.chat-fab.open .chat-fab-label{max-width:0;padding:0;opacity:0}
.chat-fab-badge{
  position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;
  background:var(--warn);color:#fff;font-family:var(--mono);font-size:.55rem;font-weight:700;
  display:grid;place-items:center;box-shadow:0 0 0 2px #fff;animation:chatPulse 2.2s ease-in-out infinite;
}
.chat-fab.open .chat-fab-badge{display:none}
@keyframes chatPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

.chat-panel{
  position:fixed;right:26px;bottom:164px;z-index:169;width:380px;max-width:calc(100vw - 40px);
  height:min(600px,calc(100vh - 220px));max-height:600px;
  background:var(--bg1);border:1px solid var(--rule);border-radius:20px;
  box-shadow:0 40px 90px -20px rgba(10,22,40,.4),0 0 0 1px rgba(255,255,255,.5) inset;
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transform-origin:bottom right;
  transition:opacity .28s var(--ease),visibility .28s,transform .28s var(--ease);
}
.chat-panel.open{opacity:1;visibility:visible;transform:none}

.chat-head{
  flex:none;display:flex;align-items:center;gap:12px;padding:16px 18px;
  background:linear-gradient(120deg,var(--blue),var(--blue-dp));color:#fff;
}
.chat-head-av{
  flex:none;width:38px;height:38px;border-radius:50%;background:#fff;overflow:hidden;
  display:grid;place-items:center;position:relative;
}
.chat-head-av img{width:100%;height:100%;object-fit:cover}
.chat-head-av i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--go);border:2px solid var(--blue-dp)}
.chat-head-txt{flex:1;min-width:0}
.chat-head-txt b{display:block;font-family:var(--disp);font-size:.92rem;font-weight:700;letter-spacing:-.01em}
.chat-head-txt span{display:block;font-size:.7rem;color:rgba(255,255,255,.78);margin-top:1px}
.chat-head-close{flex:none;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.14);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.chat-head-close:hover{background:rgba(255,255,255,.26)}

.chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--bg0)}
.chat-row{display:flex;gap:9px;max-width:88%}
.chat-row.bot{align-self:flex-start}
.chat-row.user{align-self:flex-end;flex-direction:row-reverse}
.chat-av{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-top:2px;overflow:hidden}
.chat-row.bot .chat-av{background:#fff;border:1px solid var(--rule)}
.chat-av img{width:100%;height:100%;object-fit:cover}
.chat-row.bot .chat-av svg{width:14px;height:14px}
.chat-bubble{
  padding:11px 14px;border-radius:14px;font-size:.85rem;line-height:1.55;
  animation:chatIn .25s var(--ease);
}
.chat-row.bot .chat-bubble{background:var(--bg1);border:1px solid var(--rule);color:var(--navy);border-bottom-left-radius:4px}
.chat-row.user .chat-bubble{background:linear-gradient(120deg,var(--blue),var(--blue-dp));color:#fff;border-bottom-right-radius:4px}
@keyframes chatIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.chat-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 16px;background:var(--bg1);border:1px solid var(--rule);border-radius:14px;border-bottom-left-radius:4px}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--navy-mute);animation:chatDot 1.3s ease-in-out infinite}
.chat-typing i:nth-child(2){animation-delay:.15s}
.chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes chatDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat-opts{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:100%;padding-left:35px}
.chat-opt{
  font-size:.78rem;font-weight:500;color:var(--blue-lt);background:rgba(22,104,196,.06);
  border:1px solid rgba(22,104,196,.3);border-radius:100px;padding:8px 14px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.chat-opt:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.chat-opt:disabled{pointer-events:none;opacity:.5}

.chat-cta{align-self:flex-start;margin-left:35px;display:flex;flex-direction:column;gap:8px;max-width:calc(100% - 35px);width:calc(100% - 35px)}
.chat-cta a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;
  font-weight:700;font-size:.85rem;text-align:center;box-sizing:border-box;transition:transform .2s var(--ease)}
.chat-cta a:hover{transform:translateY(-1px)}
.chat-cta a.primary{background:linear-gradient(120deg,var(--blue),var(--blue-dp));color:#fff}
.chat-cta a.warn{background:linear-gradient(120deg,var(--warn),#A82D18);color:#fff}
.chat-cta a.ghost{background:var(--glass);color:var(--navy);border:1px solid var(--rule);font-weight:600}

.chat-form{align-self:flex-start;width:100%;padding-left:35px;box-sizing:border-box;display:grid;gap:8px}
.chat-form input,.chat-form textarea{
  width:100%;box-sizing:border-box;padding:10px 13px;border-radius:10px;border:1px solid var(--rule);
  background:var(--bg1);font-size:.82rem;color:var(--navy);font-family:var(--ui);
}
.chat-form input:focus,.chat-form textarea:focus{outline:none;border-color:var(--blue-lt);box-shadow:0 0 0 3px rgba(22,104,196,.12)}
.chat-form button{margin-top:2px}

/* free-text entry — always available alongside the quick-reply buttons,
   so a visitor whose need doesn't match any of the guided options can
   just type instead of getting stuck. */
.chat-composer{flex:none;display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--rule-2)}
.chat-composer input{
  flex:1;min-width:0;padding:11px 15px;border-radius:100px;border:1px solid var(--rule);
  background:var(--bg0);font-size:.83rem;color:var(--navy);font-family:var(--ui);
}
.chat-composer input:focus{outline:none;border-color:var(--blue-lt);box-shadow:0 0 0 3px rgba(22,104,196,.12)}
.chat-composer button{
  flex:none;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(120deg,var(--blue),var(--blue-dp));color:#fff;
  display:grid;place-items:center;transition:transform .2s var(--ease);
}
.chat-composer button:hover{transform:scale(1.07)}
.chat-composer button:disabled{opacity:.4;pointer-events:none}

.chat-foot{flex:none;padding:8px 16px 12px;text-align:center}
.chat-foot span{font-size:.66rem;color:var(--navy-mute)}
.chat-foot a{color:var(--blue-lt)}

/* ═══════ RESPONSIVE ═══════ */
/* nav-in's own width starts shrinking below 1320px (margin-constrained
   instead of shell-capped) — everything competing for space inside it
   must compress at that same point, or there's a gap zone where the
   container has narrowed but the content hasn't caught up yet and the
   nav silently wraps or overflows past the capsule edge. Placed down
   here, after every component's own base rule, deliberately — an early
   override of the same specificity loses to a later base declaration
   regardless of whether its media condition matches, which is exactly
   the bug this block replaced (nav-social kept showing at this width
   because its unconditional `display:flex` base rule was declared
   further down the file than an earlier attempt at this same override). */
@media(max-width:1320px){
  .nav-in{margin:0 var(--pad)}
  .nav-search span{display:none}
  .nav-links>li>a{padding:9px 6px;font-size:.71rem}
  .nav-social{display:none}
}
@media(max-width:1080px){
  :root{--pad:30px}
  .split,.split.rev,.cta-in{grid-template-columns:1fr;gap:48px}
  .hero-side{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .grid-3,.grid-4,.flush{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{border-bottom:1px solid var(--rule-2);padding-bottom:30px}
  .step:nth-child(2n){border-right:none}
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .nav{inset:0 0 auto !important}
  /* explicit width, not just margin: this engine has been observed to
     render width:auto as 100% of the containing block on this element,
     ignoring left/right margins entirely and overflowing off-screen */
  .nav-in{margin:10px var(--pad) 0;padding:0 10px 0 16px;width:calc(100% - 2 * var(--pad))}
  .burger{display:block}
  .nav-search{display:none}
  .brand-txt i{display:none}
  .nav-in{gap:14px}
  .nav-act{margin-left:auto}
  /* .brand defaults to flex-shrink:0, which is fine on desktop's wide nav
     but on mobile let the much longer "The Travel Management Company"
     text push the burger button clean off the right edge of the screen —
     the same flex-item-won't-shrink pattern that has broken this nav
     before. min-width:0 lets it shrink; the ellipsis truncation on the
     text itself is a hard cap so it can never do this again regardless
     of how long the brand copy ends up being. */
  .brand{min-width:0;flex-shrink:1}
  .brand-txt{min-width:0}
  .brand-txt b{max-width:180px;overflow:hidden;text-overflow:ellipsis;font-size:.6rem}
  /* Book Now becomes an icon-only circular button on mobile — still one
     tap, still always visible, but frees the space the text label used
     to need so the brand name can actually be read next to the logo. */
  .nav-book{padding:10px;border-radius:50%;flex:none}
  .nav-book-ico{display:block}
  .nav-book-txt{display:none}
  /* the old hover-mega structure is desktop-only now; the mobile
     experience is the entirely separate .mnav drill-down below */
  .nav-links{display:none}

  /* ── mobile drill-down nav ──
     Full-screen panel below the top capsule bar. Opening/closing is an
     opacity+visibility fade (never touches layout). Root → submenu
     navigation is a translateX on the track (also layout-free — each
     panel is a fixed-height, non-shrinking flex child, so nothing here
     can grow/shrink a box, spawn a scrollbar mid-interaction, or hit a
     flex/grid item refusing to shrink below its content width — the
     three failure modes that broke every iteration of the old inline
     accordion. */
  .mnav{
    display:block;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    z-index:140;background:var(--bg1);overflow:hidden;
    opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s;
  }
  .mnav.open{opacity:1;visibility:visible}
  .mnav-track{display:flex;height:100%;transition:transform .34s var(--ease)}
  .mnav-panel{
    flex:0 0 100%;max-width:100%;height:100%;box-sizing:border-box;
    overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;
    padding:20px var(--pad) 110px;
  }
  .mnav-list{display:block}
  /* plain block rows, not flex — a chevron positioned absolutely inside
     a relative row needs no flex participation from the label text at all */
  .mnav-link{
    display:block;position:relative;width:100%;box-sizing:border-box;
    padding:17px 40px 17px 2px;margin:0;text-align:left;
    background:none;border:none;border-bottom:1px solid var(--rule-2);
    font-family:var(--disp);font-size:1.05rem;font-weight:600;color:var(--navy);
    cursor:pointer;
  }
  .mnav-link[aria-current="page"]{color:var(--blue-lt)}
  .mnav-chev{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--navy-mute)}
  .mnav-root-act{margin-top:26px}
  .mnav-root-act .btn{margin-bottom:14px}
  .mnav-tel{
    display:block;text-align:center;padding:12px 0;
    font-family:var(--disp);font-size:.98rem;font-weight:700;color:var(--blue-lt);
  }
  .mnav-back{
    display:block;width:100%;box-sizing:border-box;text-align:left;
    background:none;border:none;color:var(--navy);cursor:pointer;
    padding:6px 0 22px;margin:0;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  }
  .mnav-back-arr{display:inline-block;margin-right:6px;font-size:1.15rem;vertical-align:middle}
  .mnav-sub{display:block}
  .mnav-subitem{
    display:block;width:100%;box-sizing:border-box;text-align:left;
    padding:15px 16px;margin:0 0 9px;
    background:var(--glass);border:1px solid var(--rule);border-radius:var(--r-sm);
  }
  .mnav-subitem:active{background:var(--glass-2);border-color:rgba(22,104,196,.35)}
  .mnav-subitem b{display:block;font-family:var(--disp);font-size:.98rem;font-weight:600;color:var(--navy);margin-bottom:3px;overflow-wrap:break-word}
  .mnav-subitem i{display:block;font-style:normal;font-size:.8rem;color:var(--navy-mute);line-height:1.5;overflow-wrap:break-word}

  .hero{padding-top:calc(var(--nav-h) + 40px)}
  .hero-stats-row{padding:32px 0 4px}
  .hs-card-tick{padding:16px 18px}
  .hs-tick{min-height:0}
  /* trim to the three credibility badges; commodities + the 18% figure
     are lower priority here and already reappear in the stat band below */
  .accred-in{gap:8px}
  .acc:nth-child(4),.acc:nth-child(5){display:none}
  .acc{padding:8px 12px;font-size:.56rem;gap:6px}
  .grid-3,.grid-2,.grid-4,.flush,.cta-lines,.f-row{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .emerg-stats{gap:32px;flex-direction:column}
  .foot-grid{grid-template-columns:1fr 1fr;gap:38px;padding-block:52px 42px}
  .fl-emerg{margin-left:0}
  .dash-kpi{grid-template-columns:repeat(2,1fr)}
  .phero{padding:calc(var(--nav-h) + 84px) 0 64px}
  .foot-mark{padding-top:52px}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .g-big{grid-column:span 2}
}
@media(max-width:560px){
  :root{--pad:18px}
  .pad{padding:76px 0}
  .pad-sm{padding:56px 0}
  .emerg,.cta{padding:88px 0}
  .steps,.band-grid,.team-grid{grid-template-columns:1fr}
  .step{border-right:none}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-emerg{width:100%;justify-content:center;text-align:center}
  .q,.plan{padding:34px 24px 30px}
  .card{padding:30px 24px 28px}
  .flush>*{padding:30px 24px}
  .acc-a-in{padding-left:0}
  .totop{right:14px;bottom:14px}
  .chat-fab{right:14px;bottom:74px;width:54px;height:54px;padding:4px;border-radius:50%}
  .chat-fab-ico{width:46px;height:46px}
  .chat-fab-label{display:none}
  .chat-panel{left:10px;right:10px;bottom:138px;width:auto;max-width:none;height:min(60vh,600px)}
  .cmdk{padding:7vh 12px 12px}
  .hs-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .gallery{grid-template-columns:1fr;grid-auto-rows:190px;gap:10px}
  .g-big,.g-tall,.g-wide{grid-column:span 1;grid-row:span 1}
  .hs-stat b{font-size:1.2rem}
  /* shorter hero subhead on phones — same substance, less to read before
     the buttons and the live ticker below them */
  .only-lg{display:none}
  .only-sm{display:inline}
  .compare-head span{padding:14px 10px;font-size:.54rem}
  .compare-row>div{padding:14px 12px;font-size:.78rem;gap:7px}
  .compare-ico{width:13px;height:13px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js .rv{opacity:1;transform:none}
  .dd i::after{width:var(--w)}
  .sp-line{stroke-dashoffset:0}
  .sp-fill{opacity:1}
}

@media print{
  .nav,.totop,.cmdk,.progress,.emerg-media,.cta-media,.foot-live,.aurora,.chat-fab,.chat-panel{display:none !important}
  body{background:#fff;color:#000}
}