/* Shared override + component layer for all Westgate pages.
   Loaded after each page's base <style> so these rules win the cascade.
   Edit HERE once instead of in 7 inline blocks. */
/* ===== top bar: always compact white glassmorphism pill (no shrink on scroll) ===== */
header{ top:14px !important; }
header .nav-wrap, header.scrolled .nav-wrap{ max-width:1260px !important; padding:0 28px !important; margin:0 auto !important; }
header .nav, header.scrolled .nav{
  height:72px !important; padding:0 18px 0 26px !important; border-radius:100px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  background:rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.8) !important; backdrop-filter:blur(22px) saturate(1.8) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 40px rgba(11,11,13,.14) !important;
}
/* wordmark + nav links aligned on the exact same horizontal line, centered vertically in the top bar */
header .logo, header.scrolled .logo{ display:flex !important; align-items:center !important; gap:11px !important; transform:translateY(0) !important; }
header .logo-mark, header.scrolled .logo-mark{ width:44px !important; height:37px !important; margin-top:0 !important; transform:translateY(-6px) !important; object-fit:contain !important; }
header .logo-text, header.scrolled .logo-text{
  color:var(--ink) !important; font-size:1.12rem !important; line-height:1 !important;
  white-space:nowrap !important; transform:translateY(1px) !important;
}
header .logo-text b{ color:var(--red) !important; }
header .logo-text small{ display:none !important; }
/* IT HUB: same size + colour as WESTGATE (inherits ink in nav, #fff in footer) */
.lt-sub{ font-family:var(--fd); font-weight:700; font-size:1.12rem; letter-spacing:-.01em;
  text-transform:none; color:inherit; margin-left:0; }
footer .logo-text{ transform:translateY(6px); }
@media (min-width:1081px){
  header .nav-links{ display:flex !important; align-items:center !important; gap:28px !important; transform:translateY(1px) !important; }
  header .nav-links a:not(.nav-cta){ font-size:.92rem !important; }
  header .nav-cta{ padding:11px 20px !important; display:inline-flex !important; align-items:center !important; }
}
@media (min-width:1081px) and (max-width:1280px){ header .nav-links{ gap:20px !important; } }
header .nav-links a:not(.nav-cta){ color:var(--ink) !important; }
header .nav-links a:not(.nav-cta):hover, header .nav-links a.active{ color:var(--red) !important; }
header .menu-btn{ color:var(--ink) !important; border-color:var(--line) !important; }
header .nav-links.show a:not(.nav-cta){ color:var(--ink) !important; }
/* (.nav-inbox-badge lived here — removed with the public Inbox nav link.
   See the note in js/site.js.) */

/* ===== inner page hero banners: 100% identical background image size & text positioning across all inner pages ===== */
.page-hero{
  height:520px !important; min-height:520px !important;
  padding-top:142px !important; padding-bottom:40px !important;
  display:block !important;
  box-sizing:border-box !important; position:relative !important; overflow:hidden !important;
  background-color:#0B0B0D !important;
  background-image:url('../assets/page_bg.webp') !important;
  background-repeat:no-repeat !important;
  background-size:1600px 900px !important;
  background-position:right top !important;
}
.page-hero .wrap{ position:relative !important; z-index:5 !important; }
.page-hero .crumb{ margin-bottom:14px !important; margin-top:0 !important; }
.page-hero h1{ margin-top:0 !important; margin-bottom:18px !important; }
.page-hero .lede{ margin-top:0 !important; }
.page-hero .hero-ctas{ margin-top:28px !important; }
.page-hero::before, .page-hero::after{ display:none !important; }
.page-hero .ph-world{ display:none !important; }
.page-hero + section{ position:relative; z-index:3; margin-top:-56px; border-top-left-radius:32px; border-top-right-radius:32px; box-shadow:0 -20px 44px rgba(11,11,13,.12); }
.page-hero + section > .wrap{ padding-top:14px; }

/* ===== checkpoint badge spacing: give space above circle ===== */
.stop-tag, .stop.gate .stop-tag{ margin-bottom:34px !important; position:relative; z-index:5; }

/* ===== mobile tweaks & compact header ===== */
@keyframes wgFlowV{ 0%{top:2%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:98%;opacity:0} }
@media (max-width:768px){
  header{ top:10px !important; }
  header .nav-wrap, header.scrolled .nav-wrap{ padding:0 14px !important; }
  header .nav, header.scrolled .nav{ height:52px !important; padding:0 12px 0 16px !important; border-radius:100px !important; }
  header .logo, header.scrolled .logo{ gap:8px !important; transform:translateY(0) !important; }
  header .logo-mark, header.scrolled .logo-mark{ width:34px !important; height:28px !important; }
  header .logo-text, header.scrolled .logo-text{ font-size:0.95rem !important; transform:translateY(0) !important; }
  .lt-sub{ font-size:0.95rem !important; }
  header .menu-btn{ padding:5px 14px !important; height:32px !important; font-size:0.76rem !important; line-height:1 !important; display:inline-flex !important; align-items:center !important; }
  .wg-shell{ margin-top:66px !important; }
  .page-hero{
    height:420px !important; min-height:420px !important;
    padding-top:115px !important; padding-bottom:30px !important;
    display:block !important;
    background-color:#0B0B0D !important;
    background-image:linear-gradient(180deg, rgba(11,11,13,0.45) 0%, rgba(11,11,13,0.25) 100%), url('../assets/page_bg.webp') !important;
    background-repeat:no-repeat !important;
    background-position:88% top !important;
    background-size:1100px auto !important;
  }
}
@media (max-width:680px){
  .hero::before{ background-size:auto 118% !important; background-position:100% 62% !important; }
  .crossing .conn{ display:none !important; }
  .crossing-stops{ position:relative !important; gap:96px !important; }
  .crossing-stops::before, .crossing-stops::after{ display:none !important; }
  .stop:not(:last-child)::after{ content:""; position:absolute; left:50%; top:100%; height:96px; width:0;
    border-left:3px dotted #C6CAD3; transform:translateX(-50%); z-index:0; }
  .stop.gate::after{ border-left-color:rgba(224,19,38,.55) !important; }
  .stop:not(:last-child)::before{ content:""; position:absolute; left:50%; top:100%; margin-top:26px;
    width:44px; height:44px; border-radius:50%; transform:translateX(-50%); z-index:3;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E01326' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px 18px no-repeat;
    box-shadow:0 10px 26px rgba(11,11,13,.12); }
  .stop{ position:relative !important; z-index:2 !important; }
  .stop:not(.gate) .stop-mark{
    background:radial-gradient(circle at 38% 30%, #ffffff, #ffffff 56%, #FDECEE) !important;
    border:1px solid rgba(224,19,38,.16) !important;
    box-shadow:0 18px 42px rgba(224,19,38,.13), 0 2px 6px rgba(11,11,13,.05) !important; }
  .stop:not(.gate) .stop-mark::after{ content:""; position:absolute; inset:-13px; border-radius:50%;
    border:1.5px dashed rgba(224,19,38,.4); animation:spin 20s linear infinite; }
  .stop:not(.gate) .stop-tag{ background:#fff !important; box-shadow:0 6px 16px rgba(224,19,38,.10); }
}

/* ===== notification: drops from top, black glass, smooth uniform expand ===== */
.wg-notif{ position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:130;
  font-family:var(--fb); display:flex; justify-content:center; pointer-events:none; width:max-content; }
.wg-shell{
  pointer-events:auto; cursor:pointer; margin-top:86px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  width:290px; height:46px; padding:0 18px; border-radius:100px;
  background:rgba(16,16,20,.55); color:#fff; transform-origin:top center;
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.15);
  transform:translateY(-200px); opacity:0; will-change:width,height,transform;
  transition:
    width .42s cubic-bezier(.4,0,.2,1),
    height .42s cubic-bezier(.4,0,.2,1),
    border-radius .42s cubic-bezier(.4,0,.2,1),
    padding .42s cubic-bezier(.4,0,.2,1),
    transform .55s cubic-bezier(.2,.8,.25,1),
    opacity .4s ease, background .4s ease;
  max-width:calc(100vw - 22px);
}
.wg-notif.in .wg-shell{ transform:translateY(0); opacity:1; }
.wg-notif.open .wg-shell{ width:346px; height:372px; border-radius:24px; padding:20px 22px 22px;
  cursor:default; align-items:stretch; background:rgba(13,13,17,.64);
  box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16); }
.wg-notif.gone{ pointer-events:none; }
.wg-notif.gone .wg-shell{ transform:translateY(-240px) !important; opacity:0 !important; pointer-events:none !important;
  transition:transform .5s cubic-bezier(.5,0,.75,0), opacity .45s ease !important; }
.wg-collapsed{ display:flex; align-items:center; gap:10px; white-space:nowrap; font-size:.86rem; font-weight:500; }
.wg-notif.open .wg-collapsed{ display:none; }
.wg-collapsed b{ font-family:var(--fd); font-weight:700; }
.wg-live{ width:9px; height:9px; border-radius:50%; background:#22d36b; flex:0 0 auto; animation:wgLive 1.8s ease-out infinite; }
@keyframes wgLive{ 0%{box-shadow:0 0 0 0 rgba(34,211,107,.55)} 100%{box-shadow:0 0 0 11px rgba(34,211,107,0)} }
.wg-chev{ width:15px; height:15px; stroke:rgba(255,255,255,.7); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wg-expanded{ display:none; width:100%; text-align:left; }
.wg-notif.open .wg-expanded{ display:block; animation:wgFade .4s .1s both; }
@keyframes wgFade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.wg-x{ position:absolute; top:12px; right:14px; width:24px; height:24px; border:none; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:1rem; line-height:1; z-index:2;
  transition:transform .25s, background .2s; }
.wg-x:hover{ background:rgba(255,255,255,.22); transform:rotate(90deg); }
.wg-elive{ display:inline-flex; align-items:center; gap:8px; font-family:var(--fd); font-weight:700;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:rgba(224,19,38,.92); padding:5px 12px; border-radius:100px; }
.wg-elive i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:wgBlink 1.3s infinite; }
@keyframes wgBlink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.wg-etitle{ font-family:var(--fd); font-weight:700; font-size:1.32rem; color:#fff; margin-top:14px; letter-spacing:-.01em; }
.wg-etitle b{ color:#ff4d5f; }
.wg-etext{ font-size:.83rem; line-height:1.55; color:rgba(255,255,255,.72); margin-top:9px; }
.wg-etext b{ color:#fff; }
.wg-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.wg-chip{ font-family:var(--fd); font-weight:600; font-size:.67rem; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:6px 11px; border-radius:100px; }
.wg-portal{ margin-top:17px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--fd); font-weight:600; font-size:.86rem; color:#fff !important;
  background:linear-gradient(135deg,var(--red),var(--red-deep)); padding:12px; border-radius:12px;
  box-shadow:0 10px 24px rgba(224,19,38,.42), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .2s, box-shadow .2s; }
.wg-portal:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(224,19,38,.52), inset 0 1px 0 rgba(255,255,255,.25); }
.wg-portal span{ transition:transform .2s; } .wg-portal:hover span{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .wg-shell{ transition:opacity .3s; } .wg-live,.wg-elive i{ animation:none; }
  .wg-notif.open .wg-expanded{ animation:none; } }

/* ===== responsiveness + accessibility + animation smoothness ===== */
/* keyboard focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--red); outline-offset:2px; border-radius:4px;
}
*{ -webkit-tap-highlight-color:rgba(224,19,38,.18); }
/* GPU hints so transitions stay smooth */
.reveal,.reveal-l,.reveal-r,.reveal-s,.card,.stop-mark,.wg-shell,.member,.step,.ins,.unit{ backface-visibility:hidden; }
img{ height:auto; }
/* remove connector line behind the How-it-works step cards */
.steps::before{ display:none !important; }
/* checklist: tick and cross both red */
.check-list li::before{ background:#E7F6EC !important; color:#159a45 !important; }
.check-list.on-dark li::before{ background:#159a45 !important; color:#fff !important; }
.cross-list li::before{ background:var(--red-soft) !important; color:var(--red) !important; }
/* decorative ring must never sit on top of panel content */
.panel::after{ display:none !important; }
.panel>div{ position:relative; z-index:2; }
/* contain the decorative ring so it never overlaps content */
.grey::after{ display:none !important; }
@media (max-width:680px){
  /* show the animated connection arcs on phones (aligned to the mobile globe) */
  #arcs{ display:block !important; }
  /* comfortable tap targets */
  footer .f-col a{ min-height:40px; display:flex; align-items:center; }
  .nav-links a{ padding:11px 0; }
  .f-social a,.f-social .icon-content{ min-width:44px; min-height:44px; }
  .btn{ min-height:46px; }
}
/* full reduced-motion support */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  #arcs,#net,#wgWord{ display:none !important; }
}

/* two-up model cards (Two ways into Western markets) */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* partner testimonials (Trusted across the network) */
.quote{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px 28px;position:relative;transition:transform .2s,box-shadow .2s}
.quote:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,11,13,.09)}
.q-mark{font-family:var(--fd);font-weight:800;font-size:3rem;color:var(--red);line-height:.6;height:26px}
.quote>p{color:var(--ink);font-size:.98rem;margin-top:8px}
.q-by{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.q-av{width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:700;flex:0 0 auto}
.q-by b{display:block;font-family:var(--fd);font-size:.92rem;color:var(--ink)}
.q-by small{color:var(--grey-2);font-size:.76rem}
.quote.q-cta{background:linear-gradient(135deg,#0B0B0D,#2A0810);border-color:#2A0810;display:grid;align-items:center}
.quote.q-cta h3{color:#fff;font-size:1.15rem}
.quote.q-cta p{color:rgba(255,255,255,.65);font-size:.92rem;margin-top:8px}
.quote.q-cta .more{margin-top:14px;display:inline-flex;font-family:var(--fd);font-weight:600;font-size:.88rem;color:var(--red)}

/* FAQ accordions (native details) */
.faq{max-width:820px;margin:44px auto 0}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--red)}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--fd);font-weight:600;font-size:1rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--red);font-weight:400;flex:0 0 auto;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 24px 22px;color:var(--grey);font-size:.96rem;line-height:1.65}
.faq .faq-a a{color:var(--red);font-weight:600}

/* ===== FAQ animations ===== */
/* staggered entrance: boxes rise in one after another on page load */
@keyframes faqIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.faq details{animation:faqIn .55s cubic-bezier(.2,.7,.2,1) both}
.faq details:nth-of-type(1){animation-delay:.05s}
.faq details:nth-of-type(2){animation-delay:.11s}
.faq details:nth-of-type(3){animation-delay:.17s}
.faq details:nth-of-type(4){animation-delay:.23s}
.faq details:nth-of-type(5){animation-delay:.29s}
.faq details:nth-of-type(6){animation-delay:.35s}
.faq details:nth-of-type(7){animation-delay:.41s}
.faq details:nth-of-type(8){animation-delay:.47s}
.faq details:nth-of-type(9){animation-delay:.53s}
.faq details:nth-of-type(10){animation-delay:.59s}
.faq details:nth-of-type(11){animation-delay:.65s}
.faq details:nth-of-type(12){animation-delay:.71s}
/* open box lifts slightly and gains a red-tinted shadow */
.faq details{transition:border-color .25s,box-shadow .3s,transform .3s}
.faq details[open]{box-shadow:0 16px 38px rgba(224,19,38,.10);transform:translateY(-2px)}
.faq details:not([open]):hover{border-color:rgba(224,19,38,.45);transform:translateY(-1px)}
/* smooth height open/close where the browser supports it (Chrome 131+) */
@supports selector(details::details-content){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;opacity:0;
    transition:height .4s cubic-bezier(.2,.7,.2,1),opacity .3s ease,content-visibility .4s allow-discrete}
  .faq details[open]::details-content{height:auto;opacity:1}
}
/* fallback: answer text drops in on open */
@supports not selector(details::details-content){
  @keyframes faqDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .faq details[open] .faq-a{animation:faqDrop .35s ease both}
}

/* ===== footer: five aligned columns (Legal no longer wraps to its own row) ===== */
footer .f-grid{
  grid-template-columns:1.6fr .85fr .95fr 1.35fr .8fr;
  gap:44px 32px;
  align-items:start;
}
footer .f-grid>div{min-width:0}
footer .f-grid>div:nth-child(5){transition-delay:.4s}
@media (max-width:1180px){
  footer .f-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px 28px}
  footer .f-grid>.f-about{grid-column:1 / -1}
  footer .f-about p{max-width:640px}
}
@media (max-width:980px){
  footer .f-grid{grid-template-columns:1fr 1fr}
  footer .f-grid>.f-about{grid-column:1 / -1}
}
@media (max-width:680px){
  footer .f-grid{grid-template-columns:1fr;gap:30px}
  footer .f-grid>.f-about{grid-column:auto}
}