/* ============================================================================
   VIZZORA ABROAD — BRAND v5.0  ·  PREPARE · APPLY · FLY
   Rebuilt 22 Aug 2026 from the logo. Violet #102850 and green #1F9E5A are
   sampled from the mark itself, not chosen near it.

   THREE THINGS WORTH ARGUING ABOUT
   1. GREEN REPLACES GOLD AS THE ACCENT, AND KEEPS GOLD'S RULE.
      #1F9E5A on white is 3.44:1 — a surface colour, never a text colour.
      Where green *text* is wanted, --vz-green-ink (#0C7038, 6.19:1)
      carries it. Same discipline the gold had; new hue.
   2. THE WHATSAPP BUTTON IS UNCHANGED. #25D366 with violet text is 6.24:1.
      Recognition is a design asset and this retheme does not spend it.
   3. THE PALETTE ENCODES THE PROMISE. Prepare is violet, Apply is the
      midpoint, Fly is green: the journey runs from structure to the tick.
      Colour carries the proposition, so the proposition survives translation.

   All 16 critical pairs pass WCAG AA — see build/brand_audit.json.
   ============================================================================ */

:root{
  /* -- brand ---------------------------------------------------------- */
  --vz-navy:#102850;        /* 14.76:1 on white — primary text, surfaces, header */
  --vz-navy-2:#0B1A33;      /* hover / second surface */
  --vz-navy-3:#081428;      /* deepest — mobile nav sheet, footers */
  --vz-gold:#B01818;        /* SURFACE ONLY. navy on gold = 7.28:1 */
  --vz-gold-dk:#B01818;     /* SURFACE ONLY (hover). never text on light */
  --vz-gold-ink:#B01818;    /* 6.16:1 on white — this is amber TEXT */
  --vz-gold-soft:#FFF4DE;   /* tint surface for callouts */

  /* -- ink ------------------------------------------------------------ */
  --vz-ink:#0B1A33;         /* 15.48:1 — body copy */
  --vz-muted:#5C6B85;       /* 6.34:1 — was #5C6B85 at 2.89:1, which failed */
  --vz-muted-2:#6B7689;     /* 4.59:1 — smallest permissible secondary text */

  /* -- surfaces ------------------------------------------------------- */
  --vz-surface:#ffffff;
  --vz-grey:#F5F7FB;
  --vz-grey-2:#DCE6F5;
  --vz-line:#CFD4DF;
  --vz-line-2:#DCE6F5;

  /* -- state (always paired with a word, never colour alone) ---------- */
  --vz-ok:#0C7038;          /* 5.02:1 */
  --vz-warn:#B45309;        /* 4.87:1 */
  --vz-bad:#B91C1C;         /* 6.47:1 */
  --vz-ok-soft:#E6F5EC; --vz-warn-soft:#FEF6E7; --vz-bad-soft:#FEECEC;
  --vz-info-soft:#F5F7FB;

  /* -- whatsapp ------------------------------------------------------- */
  --vz-wa-bg:#25D366;       /* the recognisable green, kept deliberately */
  --vz-wa-bg-dk:#1EBE5D;
  --vz-wa-ink:#0B2E17;      /* near-black green, 8.9:1 on #25D366 */

  /* -- TYPE SCALE — 1.200 minor third, anchored 16px ------------------
     Nine steps. Every size on the site must be one of these. The two
     display steps are fluid so headlines shrink on a phone without a
     media query and without a second set of numbers to keep in sync. */
  --vz-t-xs:0.75rem;        /* 12   legal, captions */
  --vz-t-sm:0.8125rem;      /* 13   labels, chips, nav */
  --vz-t-base:0.9375rem;    /* 15   dense UI copy */
  --vz-t-body:1rem;         /* 16   body — never smaller for paragraphs */
  --vz-t-lg:1.125rem;       /* 18   lead paragraphs */
  --vz-t-xl:1.375rem;       /* 22   card titles */
  --vz-t-2xl:1.75rem;       /* 28   section headings */
  --vz-t-3xl:clamp(1.875rem,1.4rem + 2.1vw,2.5rem);   /* 30 → 40 */
  --vz-t-4xl:clamp(2.25rem,1.5rem + 3.4vw,3.25rem);   /* 36 → 52  hero only */

  --vz-lh-tight:1.18; --vz-lh-snug:1.35; --vz-lh:1.62; --vz-lh-loose:1.75;
  --vz-track-tight:-0.018em; --vz-track-caps:0.06em;

  /* -- SPACING — 4px base. Nothing off-scale. ------------------------- */
  --vz-1:4px;  --vz-2:8px;  --vz-3:12px; --vz-4:16px; --vz-5:20px;
  --vz-6:24px; --vz-8:32px; --vz-10:40px; --vz-12:48px; --vz-16:64px;
  --vz-20:80px; --vz-24:96px;
  --vz-section:clamp(48px,7vw,88px);   /* the ONE section rhythm */

  /* -- shape ---------------------------------------------------------- */
  --vz-r-sm:8px; --vz-r:12px; --vz-r-lg:18px; --vz-r-xl:24px; --vz-r-pill:999px;

  /* -- elevation — three levels, tinted navy not black ---------------- */
  --vz-e1:0 1px 2px rgba(16,40,80,.06), 0 2px 8px rgba(16,40,80,.05);
  --vz-e2:0 2px 6px rgba(16,40,80,.07), 0 10px 28px rgba(16,40,80,.10);
  --vz-e3:0 6px 14px rgba(16,40,80,.10), 0 22px 56px rgba(16,40,80,.16);
  --vz-ring:0 0 0 3px rgba(176,24,24,.45);   /* focus, gold, always visible */
  --vz-focus:#2F6FD6;       /* the focus RING colour — see "THE FOCUS RING" below */

  /* -- motion — one duration, one curve ------------------------------- */
  --vz-dur:.18s; --vz-dur-slow:.32s;
  --vz-ease:cubic-bezier(.22,.61,.36,1);

  /* -- layout --------------------------------------------------------- */
  --vz-maxw:1180px; --vz-maxw-text:68ch;
  --vz-head-h:64px; --vz-head-h-sm:58px;
  --vz-tap:44px;            /* the mobile touch floor. non-negotiable. */

  --vz-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --vz-font-ur:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq',var(--vz-font);
}

/* ---- Prepare · Apply · Fly additions (v16.3) -------------------------------
   ADDITIVE ONLY. v16.0 replaced this whole :root block with colours alone and
   silently deleted --vz-font, the type scale and every spacing token. Pages
   fell back to a serif and blocks overlapped, because font-family:var(--vz-font)
   with no --vz-font resolves to nothing. build/qa_tokens.js now fails the build
   if any var(--vz-*) used anywhere is not defined here. */
:root {
  --vz-violet:#102850; --vz-violet-deep:#0B1A33; --vz-violet-mid:#41527A;
  --vz-violet-soft:#9FA9BE; --vz-violet-tint:#E7EAF0; --vz-violet-wash:#F5F7FB;
  --vz-green:#1F9E5A; --vz-green-ink:#0C7038; --vz-green-deep:#075026;
  --vz-green-tint:#E6F5EC; --vz-green-soft:#6FC894;
  --vz-paper:#F5F7FB; --vz-rule:#CFD4DF;
  --vz-ink-2:#5C6B85; --vz-ink-3:#5C6B85;
  --vz-prepare:#102850; --vz-prepare-ink:#0B1A33; --vz-prepare-tint:#E7EAF0;
  --vz-apply:#2F6FD6;   --vz-apply-ink:#2358AD;   --vz-apply-tint:#DCE6F5;
  --vz-fly:#B01818;     --vz-fly-ink:#0C7038;     --vz-fly-tint:#E6F5EC;
  --vz-whatsapp:#25D366; --vz-danger:#B3261E; --vz-warn-ink:#8A5600;
  --vz-blue:#41527A;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ font-family:var(--vz-font); color:var(--vz-ink); line-height:var(--vz-lh);
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg,video{ max-width:100%; height:auto; }

/* THE FOCUS RING — 12 September 2026.  Read this before changing it.

   It used to say `outline:none; box-shadow:var(--vz-ring)`. Inside :where()
   that carries ZERO specificity, so every control on the site that draws its
   own box-shadow overrode the ring and — because the same rule had already
   turned the browser's outline off — showed nothing whatsoever on focus.
   .vz-cta, .vz-wa, .btn-wa, .wa-float, .btn-gold, .vz-nav a.on, .rbtn.on,
   .v20-tab and .card are all box-shadow controls: up to ten of the fifty-seven
   controls on a single page were invisible to a keyboard. .vz-cta even sets
   its shadow !important, so no box-shadow ring could ever have won there.

   An OUTLINE is the fix, not a shadow: it composites on its own channel, so
   nothing that paints a box-shadow — important or not — can erase it, and
   outline-offset lifts it clear of the control's own fill, so a ring never
   lands on a same-coloured button.

   ONE RING, TWO GROUNDS. --vz-focus is runway blue on the paper page (4.4:1)
   and turns white inside the navy header, footer and feed bar (12.4:1) by
   inheriting a different value there. A navy ring on the navy header is not a
   focus ring, and no single colour clears 3:1 on both grounds at once. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--vz-focus); outline-offset:2px;
}
/* Stated again for the branded controls at a specificity a component rule
   cannot undercut, so a future `.some-card:focus{outline:none}` cannot quietly
   take the ring away again. */
.vz-cta:focus-visible,.vz-wa:focus-visible,.btn-wa:focus-visible,.wa-float:focus-visible,
.btn-gold:focus-visible,.btn-primary:focus-visible,.btn-navy:focus-visible,.btn-blue:focus-visible,
.vz-btn:focus-visible,.vz-lang:focus-visible,.vz-nav a:focus-visible,.rbtn:focus-visible,
.v20-tab:focus-visible,.v20-tile:focus-visible,.card:focus-visible,.dest-card:focus-visible,
.vz-card:focus-visible,.vz-burger:focus-visible{
  outline:3px solid var(--vz-focus); outline-offset:3px;
}
/* the dark furniture: a white ring, because runway blue on #102850 is 3.0:1
   and that is a ring you have to go looking for */
.vz-head,.vz-foot,.vz-feed,.vz-dark,.vz-nav-dark{ --vz-focus:#FFFFFF; }

::selection{ background:var(--vz-gold); color:var(--vz-navy); }

/* Urdu needs its own leading — Nastaliq descends far below the baseline and
   at 1.62 the lines collide. */
.urdu,.ur,[lang="ur"]{ font-family:var(--vz-font-ur); line-height:2.05; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ==========================================================================
   3. HEADER — fixed height at each breakpoint. This is the anti-flicker rule.
   ========================================================================== */
.vz-head{
  background:var(--vz-navy); color:#fff; position:sticky; top:0; z-index:900;
  height:var(--vz-head-h);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
/* A hairline of gold under the bar. One pixel of brand, and because it is a
   box-shadow it costs no layout height. */
.vz-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--vz-gold),rgba(176,24,24,0) 62%);
  opacity:.9; pointer-events:none;
}
.vz-head-in,.vz-feed-in,.vz-nav{ box-sizing:content-box; }  /* v22.5: pages that reset * to border-box were shrinking the header by 40px */
.vz-head-in{
  max-width:var(--vz-maxw); margin:0 auto; height:100%; padding:0 var(--vz-5);
  display:flex; align-items:center; gap:var(--vz-4);
}

.vz-logo{ display:flex; align-items:center; gap:10px; font-weight:700;
  font-size:var(--vz-t-lg); color:var(--vz-violet); text-decoration:none; line-height:1.05; }
.vz-logo .vz-mark{ width:50px; height:40px; flex:none; display:block; background-image:url("brand/vizzora-logo.jpg"); background-repeat:no-repeat; background-size:71.4px 128px; background-position:-9.5px -34.5px; background-origin:content-box; background-color:#fff; border-radius:9px; padding:5px 7px; box-sizing:content-box; }
.vz-logo span{ white-space:nowrap; display:block; }
.vz-logo em{ font-style:normal; color:var(--vz-green-ink); }
.vz-logo i{ display:block; font-style:normal; font-size:9.5px; font-weight:600;
  letter-spacing:.19em; color:var(--vz-green-ink); text-transform:uppercase; margin-top:2px; }
/* on dark headers the mark and wordmark invert together */
/* The site header is a solid violet bar, so the mark and wordmark invert on it.
   currentColor drives the violet strokes; the green stroke is fixed in the SVG
   and reads correctly on both grounds (violet-on-white 11.4:1, white-on-violet
   12.4:1, green-soft-on-violet 6.3:1). */
.vz-head .vz-logo, .vz-nav-dark .vz-logo, .vz-dark .vz-logo{ color:#fff; }
.vz-head .vz-logo .vz-mark, .vz-nav-dark .vz-logo .vz-mark, .vz-dark .vz-logo .vz-mark{ color:#fff; }
.vz-head .vz-logo em, .vz-nav-dark .vz-logo em, .vz-dark .vz-logo em{ color:var(--vz-green-soft); }
.vz-head .vz-logo i, .vz-nav-dark .vz-logo i, .vz-dark .vz-logo i{ color:var(--vz-green-soft); }
/* The strapline is part of the mark, but the header is a fixed-height row that
   already carries 11 nav items, the WhatsApp button and the language toggle.
   At 1280 the extra 60px of "PREPARE · APPLY · FLY" pushed the Urdu button off
   the right edge and put a horizontal scrollbar on all 27 pages. It stays on
   wide screens and in the footer, and steps aside where the nav needs the room. */
@media (max-width:1500px){ .vz-head .vz-logo i{ display:none; } }
@media (max-width:1500px){ .vz-head .vz-logo{ gap:8px; } }
.vz-head .vz-nav{ min-width:0; }
/* footers and light grounds keep the violet mark */
.vz-foot .vz-logo, .vz-foot .vz-logo .vz-mark{ color:#fff; }
.vz-foot .vz-logo em, .vz-foot .vz-logo i{ color:var(--vz-green-soft); }
.vz-logo span{ white-space:nowrap; }
.vz-logo em{ font-style:normal; color:var(--vz-gold); }

.vz-nav{ display:flex; align-items:center; gap:2px; margin-left:auto; height:100%; }
.vz-nav a{
  color:#D6CFE6; text-decoration:none; font-size:var(--vz-t-sm); font-weight:500;
  padding:0 11px; border-radius:var(--vz-r-sm); white-space:nowrap;
  display:inline-flex; align-items:center; min-height:var(--vz-tap);   /* 44, was 38 */
  transition:color var(--vz-dur) var(--vz-ease), background var(--vz-dur) var(--vz-ease);
  position:relative;
}
.vz-nav a:hover{ color:#fff; background:rgba(255,255,255,.09); }
/* Active state uses an inset shadow, NOT font-weight. A bolder active item is
   a wider item, and a wider item pushes every link beside it — which is the
   several-pixel shuffle a visitor sees on each page change. */
.vz-nav a.on{ color:#fff; background:rgba(255,255,255,.13); box-shadow:inset 0 -2px 0 var(--vz-gold); }

.vz-cta{
  background:var(--vz-gold); color:var(--vz-navy)!important; font-weight:700!important;
  padding:0 var(--vz-4)!important; border-radius:var(--vz-r-sm); margin-left:var(--vz-2);
  min-height:38px!important; box-shadow:0 2px 10px rgba(176,24,24,.30);
  transition:background var(--vz-dur) var(--vz-ease), box-shadow var(--vz-dur) var(--vz-ease);
}
.vz-cta:hover{ background:var(--vz-gold-dk)!important; box-shadow:0 4px 16px rgba(176,24,24,.42); }

.vz-lang-slot{ width:64px; display:flex; justify-content:flex-end; flex-shrink:0; }
/* A slot with nothing in it is 64px of header reserved for a control that does
   not exist. Forty-nine of the fifty-two pages shipped exactly that (12 Sep
   2026): the اردو toggle is only real on languages, destinations and ielts,
   where the copy is actually translated. build/v20/shell.py now emits the slot
   only where a toggle lives; this keeps any stray one from costing layout. */
.vz-lang-slot:empty{ display:none; }
/* v22.5: on desktop the اردو toggle sits at the right end of the ticker bar,
   not inside the menu row, so the menu links land on the same pixels on every
   page (the 64px slot was pushing the whole menu left on three pages). */
.vz-head-in{ position:relative; }
@media(min-width:901px){
  .vz-lang-slot{ position:absolute; right:var(--vz-5); top:-35px; height:35px; width:auto; align-items:center; padding-left:14px; background:#081428; z-index:2; }
  .vz-lang-slot .vz-lang{ height:26px!important; min-height:0!important; line-height:26px; padding:0 10px!important; font-size:12px!important; margin:0!important; }
}
.vz-lang{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.24);
  border-radius:var(--vz-r-sm); padding:0 var(--vz-3); min-height:38px; font-size:var(--vz-t-sm);
  font-weight:600; cursor:pointer; font-family:inherit; margin-left:var(--vz-2); white-space:nowrap;
  transition:background var(--vz-dur) var(--vz-ease); }
.vz-lang:hover{ background:rgba(255,255,255,.22); }

.vz-burger{ display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  width:var(--vz-tap); height:var(--vz-tap); align-items:center; justify-content:center;
  flex-direction:column; gap:5px; border-radius:var(--vz-r-sm); }
.vz-burger i{ display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform var(--vz-dur) var(--vz-ease), opacity var(--vz-dur) var(--vz-ease); }
.vz-burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.vz-burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.vz-burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:1040px){ .vz-nav a{ padding:0 8px; } }
@media(max-width:900px){
  .vz-head{ height:var(--vz-head-h-sm); }
  .vz-burger{ display:flex; }
  .vz-nav{
    position:absolute; top:var(--vz-head-h-sm); left:0; right:0;
    background:var(--vz-navy-3); flex-direction:column; align-items:stretch;
    height:auto; padding:var(--vz-2) var(--vz-4) var(--vz-4); gap:2px; display:none;
    box-shadow:var(--vz-e3); border-top:1px solid rgba(255,255,255,.08);
  }
  .vz-nav.open{ display:flex; }
  /* the panel covers the page, so the page underneath must stop moving. Both
     elements are set because a browser honours overflow on whichever of the two
     is the viewport-propagating box, and site/vzshell.js reads neither — it
     just adds the class. */
  html.vz-menu-open, html.vz-menu-open body{ overflow:hidden; }
  .vz-nav a{ padding:0 var(--vz-3); font-size:var(--vz-t-body); min-height:48px; }
  .vz-cta{ margin:var(--vz-2) 0 0; justify-content:center; min-height:48px!important; }
}

/* ==========================================================================
   4. FOOTER
   ========================================================================== */
.vz-foot{ background:var(--vz-navy); color:#B4C2DA; font-size:var(--vz-t-base);
  margin-top:var(--vz-16); }
.vz-foot-in{ max-width:var(--vz-maxw); margin:0 auto; padding:var(--vz-12) var(--vz-5) var(--vz-8);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--vz-8) var(--vz-6); }
.vz-foot h4{ color:#fff; font-size:var(--vz-t-sm); margin:0 0 var(--vz-3);
  letter-spacing:var(--vz-track-caps); text-transform:uppercase; font-weight:700; }
.vz-foot a{ color:#B4C2DA; text-decoration:none; display:flex; align-items:center;
  min-height:32px; transition:color var(--vz-dur) var(--vz-ease); }
.vz-foot a:hover{ color:var(--vz-gold); }
.vz-foot .vz-about{ color:#A7B7D2; line-height:var(--vz-lh); max-width:34ch; }
.vz-foot-bar{ border-top:1px solid rgba(255,255,255,.1); text-align:center;
  padding:var(--vz-4) var(--vz-5); font-size:var(--vz-t-xs); color:#93A6C5; }
/* THE BOTTOM BAR IS A SENTENCE, NOT A COLUMN — 11 Sep 2026.
   `.vz-foot a` above sets display:flex and min-height:32px. That is correct for
   the four link columns, where each anchor is its own row with a thumbable
   target. It is wrong here: it turned Facebook, Instagram and the photography
   credit into full-width rows that broke out of the centred line and stacked
   against the left edge of the page, leaving the separators dangling with
   nothing between them. Two classes beat one, so this also overrides the
   880px tap-target rule further down without needing its own media query. */
.vz-foot-bar a{ display:inline; min-height:0; color:#B4C2DA; }
.vz-foot-bar a:hover{ color:var(--vz-gold); }
@media(max-width:880px){ .vz-foot-in{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .vz-foot-in{ grid-template-columns:1fr; gap:var(--vz-6); } }

/* ==========================================================================
   5. WHATSAPP — the decision explained at the top of this file
   ========================================================================== */
.vz-wa,.btn-wa,.wa-float{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--vz-2);
  background:var(--vz-wa-bg); color:var(--vz-wa-ink)!important;
  padding:0 var(--vz-4); min-height:var(--vz-tap);
  border-radius:var(--vz-r-sm); font-weight:700; font-size:var(--vz-t-base);
  box-shadow:0 2px 10px rgba(37,211,102,.30); text-decoration:none;
  transition:background var(--vz-dur) var(--vz-ease), transform var(--vz-dur) var(--vz-ease),
             box-shadow var(--vz-dur) var(--vz-ease);
}
.vz-wa:hover,.btn-wa:hover{ background:var(--vz-wa-bg-dk); transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(37,211,102,.38); }
.vz-foot .vz-wa{ margin-top:var(--vz-3); }
/* the floating bubble keeps its circle and its size */
.wa-float{ position:fixed; border-radius:var(--vz-r-pill); z-index:800;
  box-shadow:var(--vz-e2), 0 0 0 4px rgba(37,211,102,.16); }

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */
.vz-wrap{ width:min(var(--vz-maxw),92%); margin-inline:auto; }
.vz-section{ padding-block:var(--vz-section); }        /* the one rhythm */
.vz-section--grey{ background:var(--vz-grey); }
.vz-prose{ max-width:var(--vz-maxw-text); }

/* buttons — one geometry, three intents */
.vz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--vz-2);
  min-height:var(--vz-tap); padding:0 var(--vz-6);
  font-family:inherit; font-size:var(--vz-t-base); font-weight:600;
  border:1px solid transparent; border-radius:var(--vz-r-sm); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background var(--vz-dur) var(--vz-ease), color var(--vz-dur) var(--vz-ease),
             transform var(--vz-dur) var(--vz-ease), box-shadow var(--vz-dur) var(--vz-ease);
}
.vz-btn:active{ transform:translateY(1px); }
.vz-btn--primary{ background:var(--vz-gold); color:var(--vz-navy); box-shadow:0 2px 10px rgba(176,24,24,.30); }
.vz-btn--primary:hover{ background:var(--vz-gold-dk); box-shadow:0 6px 20px rgba(176,24,24,.40); transform:translateY(-1px); }
.vz-btn--navy{ background:var(--vz-navy); color:#fff; }
.vz-btn--navy:hover{ background:var(--vz-navy-2); transform:translateY(-1px); box-shadow:var(--vz-e2); }
.vz-btn--ghost{ background:transparent; color:var(--vz-navy); border-color:var(--vz-line-2); }
.vz-btn--ghost:hover{ background:var(--vz-grey); border-color:var(--vz-navy); }
.vz-btn--lg{ min-height:52px; padding:0 var(--vz-8); font-size:var(--vz-t-lg); }

.vz-card{
  background:var(--vz-surface); border:1px solid var(--vz-line);
  border-radius:var(--vz-r-lg); padding:var(--vz-6); box-shadow:var(--vz-e1);
  transition:box-shadow var(--vz-dur) var(--vz-ease), transform var(--vz-dur) var(--vz-ease),
             border-color var(--vz-dur) var(--vz-ease);
}
.vz-card--hover:hover{ box-shadow:var(--vz-e2); transform:translateY(-2px); border-color:var(--vz-line-2); }

.vz-kicker{ font-size:var(--vz-t-sm); font-weight:700; letter-spacing:var(--vz-track-caps);
  text-transform:uppercase; color:var(--vz-gold-ink); margin-bottom:var(--vz-2); }
.vz-h2{ font-size:var(--vz-t-3xl); line-height:var(--vz-lh-tight); font-weight:700;
  letter-spacing:var(--vz-track-tight); color:var(--vz-navy); }
.vz-h3{ font-size:var(--vz-t-xl); line-height:var(--vz-lh-snug); font-weight:600; color:var(--vz-navy); }
.vz-lead{ font-size:var(--vz-t-lg); color:var(--vz-muted); max-width:var(--vz-maxw-text); }

.vz-badge{ display:inline-flex; align-items:center; gap:6px; font-size:var(--vz-t-xs);
  font-weight:700; letter-spacing:.03em; padding:5px var(--vz-3);
  border-radius:var(--vz-r-pill); background:var(--vz-grey-2); color:var(--vz-navy); }
.vz-badge--ok{ background:var(--vz-ok-soft); color:var(--vz-ok); }
.vz-badge--warn{ background:var(--vz-warn-soft); color:var(--vz-warn); }
.vz-badge--bad{ background:var(--vz-bad-soft); color:var(--vz-bad); }

/* forms — 48px fields, because these are filled on a phone */
.vz-field{ display:block; width:100%; min-height:48px; padding:0 var(--vz-4);
  font-family:inherit; font-size:var(--vz-t-body); color:var(--vz-ink);
  background:var(--vz-surface); border:1.5px solid var(--vz-line-2);
  border-radius:var(--vz-r-sm);
  transition:border-color var(--vz-dur) var(--vz-ease), box-shadow var(--vz-dur) var(--vz-ease); }
.vz-field:hover{ border-color:#B9C5D8; }
.vz-field:focus{ outline:none; border-color:var(--vz-navy); box-shadow:var(--vz-ring); }
textarea.vz-field{ min-height:120px; padding:var(--vz-3) var(--vz-4); line-height:var(--vz-lh); }
.vz-label{ display:block; font-size:var(--vz-t-sm); font-weight:600; color:var(--vz-navy);
  margin-bottom:6px; }

/* ==========================================================================
   7. FEE ROUTING — no price is published anywhere (O1's standing decision)
   ========================================================================== */
.vz-fee{
  background:var(--vz-info-soft); border-left:4px solid var(--vz-navy);
  border-radius:var(--vz-r); padding:var(--vz-4) var(--vz-5); margin:var(--vz-4) 0;
  font-size:var(--vz-t-base); color:var(--vz-ink);
}
.vz-fee b{ display:block; color:var(--vz-navy); margin-bottom:var(--vz-1); font-size:var(--vz-t-body); }
.vz-fee .vz-wa{ margin-top:var(--vz-3); }
.vz-fee small{ display:block; margin-top:var(--vz-2); color:var(--vz-muted); font-size:var(--vz-t-xs); }

/* ==========================================================================
   8. REMEDIATION LAYER
   These rules exist to correct measured failures in the legacy per-page CSS.
   This file loads after each page's inline <style>, so equal specificity wins.
   Every rule below cites the audit finding it closes. Delete a rule only
   after re-running build/visual_audit.js and confirming the finding is gone.
   ========================================================================== */

/* [AUDIT: 27 nodes at 1.98:1] white on WhatsApp green.
   Caught by attribute so it applies to any legacy class we did not enumerate. */
a[href*="wa.me"],a[href*="whatsapp"]{ color:var(--vz-wa-ink); }
a[href*="wa.me"] *,a[href*="whatsapp"] *{ color:inherit; }

/* [AUDIT: 24 nodes at 2.70:1 + 4 at 2.03:1] gold used as text on a light surface.
   Gold remains the fill colour everywhere; only gold *text* is corrected. */
/* Deliberately narrow. An earlier draft of this rule included .num and .stat b
   and turned the gold statistics band into muddy brown text on gold — gold-ink
   is for amber text on a LIGHT surface, and navy is the correct ink on gold
   (7.28:1). Scope beats convenience. */
.sec-kicker,.kicker,.eyebrow{ color:var(--vz-gold-ink); }
[style*="background:var(--gold)"] .num,[style*="background:#B01818"] .num,
.stats .num,.stat-band .num,.stats .lbl,.stat-band .lbl{ color:var(--vz-navy); }

/* [AUDIT: 12 nodes at 2.89:1] the light grey secondary text. */
.muted,.sub,.note,.small,.caption,.hint{ color:var(--vz-muted); }
.tile .sub,.tile.granted .sub,.tile.refused .sub,.note-live{ color:var(--vz-muted); }

/* [AUDIT: the remaining gold-on-light nodes, named by selector from the audit
   JSON rather than guessed]. Gold text on a DARK surface is 7.28:1 and is left
   exactly as it is — hero headlines, footer hovers, the logo accent. Only the
   instances measured on white or grey are corrected. */
.testi .stars,.lvl .price,.lvl.hot .price,.card .price,
.wc-chip em,.tile .sub,.note-live,.urgent b,
span.sec-kicker{ color:var(--vz-gold-ink); }
/* .hero-badge was in the list above for one draft and went dark-brown on the
   navy hero, where gold is both correct and 7.28:1. The audit could not catch
   it — text on a gradient is explicitly recorded as "not measurable" rather
   than passed — so it was caught by looking at the screenshot. Automated
   checks narrow the search; they do not replace opening the page. */
.hero-badge,.hero .badge,.hero-badge *{ color:#FBE9E9; }

/* [AUDIT: 584 targets under 40px] every interactive element meets the touch floor.
   Applied with min-height so nothing that is already larger is shrunk. */
.btn,.btn-gold,.btn-ghost,.btn-navy,.btn-wa,.chip,.faq-q,
button:not(.vz-burger):not([class*="tiny"]){
  min-height:var(--vz-tap); display:inline-flex; align-items:center; justify-content:center;
}
.btn-sm{ min-height:38px; }
/* Two deliberate exceptions, stated so nobody "fixes" them later:
   .vz-cta sits inside a 64px bar and is 38px by design — it is a mouse target
   on desktop and becomes 48px in the mobile sheet. Footer links are 32px in
   the desktop grid for density, and 44px once the grid stacks on a phone,
   which is the only context where they are actually thumbed. */
@media(max-width:880px){
  .vz-foot a,.footer-grid a,footer a{ min-height:var(--vz-tap); }
  .faq-q,.faq b,.chip,.tag{ min-height:var(--vz-tap); }
  a{ text-underline-offset:3px; }
}

/* [AUDIT: 62 font sizes] the legacy pages set body copy anywhere from 13px to
   17px. Paragraph text is normalised to the scale; headings keep their own
   sizes because each page's hierarchy was authored deliberately even if the
   values were not. This closes the largest visual inconsistency without
   touching a single page's markup. */
p,li,dd,td{ font-size:var(--vz-t-body); line-height:var(--vz-lh); }
small,.small,figcaption{ font-size:var(--vz-t-xs); }
h1{ letter-spacing:var(--vz-track-tight); line-height:var(--vz-lh-tight); }
h2,h3{ letter-spacing:var(--vz-track-tight); line-height:var(--vz-lh-snug); }

/* [AUDIT: 11 section padding pairs] one vertical rhythm sitewide. */
section,.sec,.band{ padding-block:var(--vz-section); }
.sec-grey,.section-grey{ background:var(--vz-grey); }

/* [design] the legacy cards each carried their own radius and shadow. */
.card,.dest-card,.big-box,.faq-item,.box-blue{
  border-radius:var(--vz-r-lg); box-shadow:var(--vz-e1); border:1px solid var(--vz-line);
  transition:box-shadow var(--vz-dur) var(--vz-ease), transform var(--vz-dur) var(--vz-ease);
}
.card:hover,.dest-card:hover{ box-shadow:var(--vz-e2); transform:translateY(-2px); }

/* [design] links inside body copy were indistinguishable from plain text on
   several pages — an underline offset reads as a link without shouting. */
.vz-prose a:not(.btn):not([class*="vz-btn"]),p a:not(.btn):not([class*="btn"]){
  color:var(--vz-navy); text-decoration:underline; text-decoration-color:rgba(16,40,80,.35);
  text-underline-offset:3px; transition:text-decoration-color var(--vz-dur) var(--vz-ease);
}
.vz-prose a:hover,p a:not(.btn):hover{ text-decoration-color:var(--vz-gold); }

/* ==========================================================================
   9. PRINT — clients print checklists and take them to the bank
   ========================================================================== */
@media print{
  .vz-head,.vz-foot,.wa-float,.vz-burger,.vz-lang{ display:none!important; }
  body{ color:#000; font-size:11pt; }
  .vz-card,.card{ box-shadow:none; border:1px solid #999; break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#444; }
}

/* ---- header fit, 880–1400px -------------------------------------------------
   PRE-EXISTING, not introduced by the rebrand: v15.0 already overflowed 156px
   at 1024 and 10px at 1280, which clipped the Urdu toggle off the right edge
   and put a horizontal scrollbar on every page. The mobile menu takes over at
   880, so the squeeze band is 880–1400 where all eleven items must fit a row.
   Measured at 1024/1280/1366 after each step rather than guessed. */
@media (min-width:881px) and (max-width:1400px){
  .vz-head-in{ gap:var(--vz-2); padding:0 var(--vz-3); }
  .vz-nav{ gap:0; }
  .vz-nav a{ padding:0 7px; font-size:13px; letter-spacing:-0.01em; }
  .vz-logo{ font-size:var(--vz-t-base); gap:7px; }
  .vz-logo .vz-mark{ width:28px; height:28px; }
}
@media (min-width:881px) and (max-width:1120px){
  .vz-nav a{ padding:0 5px; font-size:12.2px; }
  .vz-logo span{ font-size:14px; }
}
/* Last-resort guard: if a future nav item still will not fit, the bar scrolls
   inside itself instead of dragging the whole document sideways. */
.vz-head{ max-width:100%; }
.vz-head-in{ min-width:0; }
.vz-nav{ min-width:0; }

/* ---- VZTour player chrome (tour.js) — product tours + brand piece ---- */
.vz-tour{ position:relative; background:#102850; border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.vz-tour canvas{ display:block; cursor:pointer; }
.vz-tour-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%; border:0; background:rgba(255,255,255,.95); cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.vz-tour-play span{ display:block; width:0; height:0; border-left:26px solid #102850; border-top:15px solid transparent; border-bottom:15px solid transparent; margin-left:6px; }
.vz-tour.is-playing .vz-tour-play{ opacity:0; pointer-events:none; }
.vz-tour-bar{ position:absolute; left:0; right:0; bottom:0; height:8px; background:rgba(255,255,255,.2); cursor:pointer; }
.vz-tour-fill{ height:100%; width:0; background:#B01818; }
.vz-tour-cap{ position:absolute; left:14px; bottom:16px; color:#fff; font-size:13px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.vz-tour-badge{ position:absolute; right:12px; top:10px; background:rgba(0,0,0,.45); color:#fff; font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px; letter-spacing:.3px; }

/* ==========================================================================
   v20 — THE LOGO'S OWN COLOURS  ·  10 September 2026
   Flight Navy #102850 and Plane Red #B01818 are sampled from brand/vizzora-
   logo.jpg. Everything above this block was re-mapped hex-for-hex by
   build/v20/retheme.py; these rules settle the cases a hex swap cannot:
   the primary button (red needs WHITE text — navy-on-red is 2.1:1), the
   focus ring, the header mark, and the tokens new pages are written against.
   ========================================================================== */
:root{
  --vz-navy:#102850; --vz-navy-2:#0B1A33; --vz-navy-3:#081428;
  --vz-red:#B01818; --vz-red-dk:#8E1212; --vz-red-soft:#FBE9E9;
  --vz-blue:#2F6FD6; --vz-blue-dk:#2358AD; --vz-blue-soft:#E7EEFB;
  --vz-ink:#0B1A33; --vz-muted:#5C6B85; --vz-muted-2:#5C6B85;
  --vz-mist:#DCE6F5; --vz-paper:#F5F7FB; --vz-grey:#F5F7FB; --vz-grey-2:#DCE6F5;
  --vz-line:#CFD4DF; --vz-line-2:#DCE6F5; --vz-rule:#CFD4DF;
  --vz-gold:#B01818; --vz-gold-dk:#8E1212; --vz-gold-ink:#B01818; --vz-gold-soft:#FBE9E9;
  --vz-ok:#0C7038; --vz-green:#1F9E5A; --vz-green-ink:#0C7038;
  --vz-ring:0 0 0 3px rgba(47,111,214,.45);
  --vz-focus:#2F6FD6;       /* runway blue — the ring on every light ground */
  --vz-e1:0 1px 2px rgba(16,40,80,.06), 0 2px 8px rgba(16,40,80,.05);
  --vz-e2:0 2px 6px rgba(16,40,80,.07), 0 10px 28px rgba(16,40,80,.10);
  --vz-e3:0 6px 14px rgba(16,40,80,.10), 0 22px 56px rgba(16,40,80,.16);
  --vz-font-body:'Source Sans 3','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --vz-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* the header mark — a real cropped PNG of the logo, so it survives every zoom
   level (the CSS background crop broke at 100% on 9 Sep) */
.vz-logo .vz-mark{ background-image:url("brand/vizzora-icon.png"); background-size:contain; background-position:center; background-repeat:no-repeat; background-origin:content-box; background-color:#fff; width:46px; height:36px; padding:4px 6px; border-radius:9px; }
.blog .vz-logo .vz-mark, .vz-sub .vz-logo .vz-mark{ background-image:url("../brand/vizzora-icon.png"); }
@media(max-width:480px){ .vz-logo .vz-mark{ width:34px; height:28px; padding:3px 4px; } }
/* one red CTA per screen, white type on it */
.btn-gold, .vz-cta, .btn-primary{ background:var(--vz-red)!important; color:#fff!important; box-shadow:0 6px 18px rgba(176,24,24,.28)!important; }
.btn-gold:hover, .vz-cta:hover, .btn-primary:hover{ background:var(--vz-red-dk)!important; box-shadow:0 10px 26px rgba(176,24,24,.36)!important; }
.btn-navy{ background:var(--vz-navy)!important; color:#fff!important; }
.btn-blue{ background:var(--vz-blue)!important; color:#fff!important; }
.vz-nav a.on{ box-shadow:inset 0 -2px 0 var(--vz-red); }
.vz-nav a.vz-signin{ border:1.5px solid rgba(255,255,255,.35); border-radius:8px; margin-left:4px; padding:0 12px!important; min-height:36px; }
.vz-nav a.vz-signin:hover{ background:rgba(255,255,255,.12); }
/* the live intake feed that rides above the header on every page */
html,body{ margin:0; }
html{ overflow-y:scroll; }  /* v22.6: a scrollbar lane on every page, short or long, so the frame never shifts sideways */
.vz-head .vz-logo{ flex:none; }  /* v22.5: one frame on every page — the browser default 8px body margin inset the ticker and header on most pages and not on others */
.vz-feed{ box-sizing:content-box; background:#081428; color:#DCE6F5; font-size:13px; height:34px; overflow:hidden; position:relative; border-bottom:1px solid rgba(255,255,255,.06); }
.vz-feed-in{ max-width:var(--vz-maxw); margin:0 auto; padding:0 var(--vz-4); display:flex; align-items:center; height:34px; gap:12px; }
.vz-feed-tag{ flex:none; background:var(--vz-red); color:#fff; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.vz-feed-track{ flex:1; overflow:hidden; white-space:nowrap; position:relative; }
.vz-feed-track ul{ display:inline-flex; gap:40px; list-style:none; margin:0; padding:0; animation:vzfeed 60s linear infinite; }
.vz-feed-track:hover ul{ animation-play-state:paused; }
.vz-feed-track li{ display:inline-flex; gap:8px; align-items:center; }
.vz-feed-track b{ color:#fff; font-weight:600; }
.vz-feed-track i{ font-style:normal; color:#9FA9BE; }
.vz-feed-track .soon{ color:#FFB4B4; font-weight:700; }
.vz-feed-track a{ color:inherit; text-decoration:none; }
@keyframes vzfeed{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media(prefers-reduced-motion:reduce){ .vz-feed-track ul{ animation:none; } }
@media(max-width:640px){ .vz-feed-tag{ font-size:10px; } }

/* ---- v20 components — written once here, used by every new page ---------- */
body{ font-family:var(--vz-font-body); }
h1,h2,h3,h4,.btn,.vz-nav,.sec-kicker,.kicker,.eyebrow,.v20-tab h3,.v20-tile h3,.v20-stat b{ font-family:var(--vz-font); }
.v20-hero{ position:relative; min-height:min(88vh,760px); display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--vz-navy); }
.v20-hero video,.v20-hero .v20-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.v20-hero:after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,20,40,.88) 0%, rgba(16,40,80,.72) 45%, rgba(16,40,80,.28) 100%); }
.v20-hero .container{ position:relative; z-index:2; padding-top:64px; padding-bottom:64px; }
.v20-hero h1{ font-size:var(--vz-t-4xl); line-height:1.08; letter-spacing:-.02em; font-weight:800; max-width:15ch; margin:14px 0 18px; }
.v20-hero h1 em{ font-style:normal; color:#FFB4B4; }
.v20-hero p.lead{ font-size:var(--vz-t-lg); max-width:58ch; color:#DCE6F5; line-height:1.55; }
.v20-kicker{ display:inline-flex; align-items:center; gap:8px; font:600 12.5px/1 var(--vz-font); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(176,24,24,.9); padding:8px 12px; border-radius:999px; }
.v20-acts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.v20-acts .btn{ min-height:50px; padding:0 22px; border-radius:12px; font-weight:700; font-size:16px; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.btn-white{ background:#fff!important; color:var(--vz-navy)!important; }
.btn-wa{ background:#25D366!important; color:#0B2E17!important; }
.v20-hero-note{ margin-top:22px; font-size:13.5px; color:#B4C2DA; display:flex; gap:18px; flex-wrap:wrap; }
.v20-hero-note b{ color:#fff; font-weight:600; }
.v20-credit{ position:absolute; right:12px; bottom:8px; z-index:2; font-size:10.5px; color:rgba(255,255,255,.55); }
.v20-sec{ padding:var(--vz-section) 0; }
.v20-sec.mist{ background:var(--vz-mist); } .v20-sec.paper{ background:var(--vz-paper); } .v20-sec.navy{ background:var(--vz-navy); color:#fff; }
.v20-head{ max-width:760px; margin:0 auto 32px; text-align:center; }
.v20-head .sec-kicker{ display:block; margin-bottom:8px; font:600 12.5px/1 var(--vz-font); letter-spacing:.08em; text-transform:uppercase; color:var(--vz-red); }
.v20-head h2{ font-size:var(--vz-t-3xl); line-height:1.15; letter-spacing:-.015em; color:var(--vz-navy); margin:0 0 10px; }
.navy .v20-head h2{ color:#fff; } .navy .v20-head p{ color:#DCE6F5; }
.v20-head p{ color:var(--vz-muted); font-size:var(--vz-t-lg); margin:0; }
.v20-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:980px){ .v20-tabs{ grid-template-columns:repeat(2,1fr);} } @media(max-width:520px){ .v20-tabs{ grid-template-columns:1fr;} }
.v20-tab{ position:relative; display:block; border-radius:var(--vz-r-lg); overflow:hidden; min-height:340px; color:#fff; text-decoration:none; background:var(--vz-navy); box-shadow:var(--vz-e2); transition:transform var(--vz-dur) var(--vz-ease), box-shadow var(--vz-dur) var(--vz-ease); }
.v20-tab:hover{ transform:translateY(-4px); box-shadow:var(--vz-e3); }
.v20-tab img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--vz-ease); }
.v20-tab:hover img{ transform:scale(1.05); }
.v20-tab:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,20,40,.05) 20%, rgba(8,20,40,.92) 100%); }
.v20-tab .in{ position:relative; z-index:2; padding:22px; display:flex; flex-direction:column; justify-content:flex-end; height:100%; min-height:340px; }
.v20-tab .band{ align-self:flex-start; font:700 11px/1 var(--vz-font); letter-spacing:.1em; text-transform:uppercase; padding:6px 9px; border-radius:6px; margin-bottom:auto; }
.v20-tab h3{ font-size:24px; margin:0 0 8px; letter-spacing:-.01em; }
.v20-tab ul{ list-style:none; margin:0 0 12px; padding:0; color:#DCE6F5; font-size:14px; line-height:1.5; }
.v20-tab ul li:before{ content:"— "; color:#FFB4B4; }
.v20-tab .go{ font:600 14px var(--vz-font); color:#fff; }
.v20-tab .go:after{ content:" →"; }
.v20-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ .v20-tiles{ grid-template-columns:repeat(2,1fr);} } @media(max-width:560px){ .v20-tiles{ grid-template-columns:1fr;} }
.v20-tile{ background:#fff; border:1px solid var(--vz-line); border-radius:var(--vz-r-lg); padding:24px; box-shadow:var(--vz-e1); display:block; text-decoration:none; color:var(--vz-ink); border-top:4px solid var(--vz-navy); }
.v20-tile.red{ border-top-color:var(--vz-red);} .v20-tile.blue{ border-top-color:var(--vz-blue);}
.v20-tile:hover{ box-shadow:var(--vz-e2); }
.v20-tile .ic{ width:44px; height:44px; border-radius:12px; background:var(--vz-mist); display:grid; place-items:center; color:var(--vz-navy); margin-bottom:14px; }
.v20-tile h3{ font-size:19px; margin:0 0 6px; color:var(--vz-navy); }
.v20-tile p{ margin:0; color:var(--vz-muted); font-size:15px; line-height:1.55; }
.v20-tile .more{ display:inline-block; margin-top:12px; font:600 14px var(--vz-font); color:var(--vz-red); }
.v20-dests{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.v20-dest{ position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:4/3; text-decoration:none; color:#fff; background:var(--vz-navy); }
.v20-dest img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--vz-ease); }
.v20-dest:hover img{ transform:scale(1.06); }
.v20-dest .in{ position:absolute; inset:auto 0 0 0; padding:40px 14px 12px; background:linear-gradient(180deg, transparent, rgba(8,20,40,.9)); }
.v20-dest b{ display:block; font:700 17px var(--vz-font); }
.v20-dest small{ font-size:12px; color:#DCE6F5; }
.v20-dest .st{ position:absolute; top:10px; left:10px; font:700 10.5px/1 var(--vz-font); letter-spacing:.08em; padding:5px 8px; border-radius:6px; color:#fff; }
.st-GREEN{ background:#0C7038;} .st-AMBER{ background:#B45309;} .st-RED{ background:var(--vz-red);}
.v20-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:step; }
@media(max-width:800px){ .v20-steps{ grid-template-columns:1fr;} }
.v20-step{ background:#fff; border-radius:var(--vz-r-lg); padding:26px; border:1px solid var(--vz-line); position:relative; }
.v20-step:before{ counter-increment:step; content:counter(step,decimal-leading-zero); font:800 44px/1 var(--vz-font); color:var(--vz-mist); position:absolute; right:20px; top:14px; }
.v20-step h3{ margin:0 0 8px; font-size:20px; color:var(--vz-navy);} .v20-step h3 em{ font-style:normal; color:var(--vz-red);}
.v20-step p{ margin:0; color:var(--vz-muted); line-height:1.6; }
.v20-prices{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:900px; margin:0 auto; }
@media(max-width:720px){ .v20-prices{ grid-template-columns:1fr;} }
.v20-price{ background:#fff; border-radius:var(--vz-r-xl); padding:28px; border:1px solid var(--vz-line); box-shadow:var(--vz-e2); position:relative; overflow:hidden; }
.v20-price:before{ content:""; position:absolute; left:0; top:0; right:0; height:6px; background:var(--vz-navy); }
.v20-price.red:before{ background:var(--vz-red); }
.v20-price h3{ margin:0; font-size:22px; color:var(--vz-navy); }
.v20-price .amt{ font:800 44px/1 var(--vz-font); letter-spacing:-.02em; color:var(--vz-ink); margin:14px 0 2px; font-variant-numeric:tabular-nums; }
.v20-price .amt small{ font-size:16px; font-weight:600; color:var(--vz-muted); }
.v20-price .per{ color:var(--vz-muted); font-size:14px; }
.v20-price ul{ margin:16px 0 20px; padding:0 0 0 18px; color:var(--vz-ink); line-height:1.7; font-size:15px; }
.v20-region{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin:0 auto 22px; font-size:14px; color:var(--vz-muted); }
.v20-region select{ min-height:38px; border:1.5px solid var(--vz-line); border-radius:8px; padding:0 10px; font:inherit; color:var(--vz-ink); background:#fff; }
.v20-bench{ text-align:center; font-size:13.5px; color:var(--vz-muted); margin-top:16px; }
.v20-stats{ background:var(--vz-navy); color:#fff; padding:44px 0; }
.v20-stats .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:800px){ .v20-stats .grid{ grid-template-columns:repeat(2,1fr);} }
.v20-stat b{ display:block; font:800 42px/1 var(--vz-font); letter-spacing:-.02em; color:#fff; }
.v20-stat b i{ font-style:normal; color:#FFB4B4; }
.v20-stat span{ display:block; margin-top:8px; color:#DCE6F5; font-size:14.5px; line-height:1.4; }
.v20-form{ background:#fff; border-radius:var(--vz-r-xl); padding:30px; box-shadow:var(--vz-e2); border:1px solid var(--vz-line); }
.v20-form .grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media(max-width:600px){ .v20-form .grid{ grid-template-columns:1fr;} }
.v20-form label{ display:block; font:600 13px var(--vz-font); color:var(--vz-navy); margin-bottom:5px; }
.v20-form input,.v20-form select,.v20-form textarea{ width:100%; min-height:46px; padding:10px 12px; border:1.5px solid var(--vz-line); border-radius:10px; font:inherit; font-size:15px; color:var(--vz-ink); background:#fff; }
.v20-form textarea{ min-height:96px; resize:vertical; }
.v20-form input:focus,.v20-form select:focus,.v20-form textarea:focus{ outline:none; border-color:var(--vz-blue); box-shadow:var(--vz-ring); }
.v20-form .full{ grid-column:1/-1; }
.v20-form .msg{ margin-top:12px; font-size:14px; padding:12px 14px; border-radius:10px; display:none; }
.v20-form .msg.ok{ display:block; background:#E6F5EC; color:#0C7038; } .v20-form .msg.bad{ display:block; background:#FBE9E9; color:var(--vz-red); }
.v20-form .hp{ position:absolute; left:-9999px; }
.v20-auth{ max-width:440px; margin:56px auto; }
.v20-auth .v20-form{ padding:34px; }
.v20-auth h1{ font-size:28px; color:var(--vz-navy); margin:0 0 6px; }
.v20-auth p.sub{ color:var(--vz-muted); margin:0 0 22px; font-size:15px; }
.v20-auth .links{ display:flex; justify-content:space-between; gap:12px; font-size:14px; margin-top:16px; flex-wrap:wrap; }
.v20-auth .links a{ color:var(--vz-blue); text-decoration:none; font-weight:600; }
.v20-auth .lock{ text-align:center; margin-bottom:18px; }
.v20-auth .lock img{ height:56px; }
.v20-cta-band{ background:linear-gradient(120deg, var(--vz-navy), #1a3d7a); color:#fff; padding:52px 0; }
.v20-cta-band h2{ color:#fff; font-size:var(--vz-t-2xl); margin:0 0 8px; }
.v20-cta-band p{ color:#DCE6F5; margin:0; max-width:60ch; }
.v20-cta-band .row{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.v20-detail{ display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:start; }
@media(max-width:860px){ .v20-detail{ grid-template-columns:1fr;} }
.v20-country{ border:1px solid var(--vz-line); border-radius:var(--vz-r-lg); overflow:hidden; background:#fff; margin-bottom:22px; scroll-margin-top:110px; }
.v20-country .top{ position:relative; min-height:220px; background:var(--vz-navy); color:#fff; }
.v20-country .top img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.v20-country .top .in{ position:relative; z-index:2; padding:26px; background:linear-gradient(90deg, rgba(8,20,40,.9), rgba(8,20,40,.35)); min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; }
.v20-country h3{ margin:0; font-size:28px; } .v20-country .tag{ color:#DCE6F5; margin:6px 0 0; max-width:62ch; font-size:15px; }
.v20-country .chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.v20-country .chip{ background:rgba(255,255,255,.14); color:#fff; font:600 12px var(--vz-font); padding:6px 10px; border-radius:999px; }
.v20-country .body{ padding:22px 26px; }
.v20-country h4{ font:600 12.5px/1 var(--vz-font); letter-spacing:.08em; text-transform:uppercase; color:var(--vz-red); margin:16px 0 6px; }
.v20-country h4:first-child{ margin-top:0; }
.v20-country p,.v20-country li{ font-size:15px; line-height:1.6; color:var(--vz-ink); margin:0; }
.v20-country ul{ margin:0; padding-left:18px; }
.v20-country .foot{ border-top:1px solid var(--vz-line); padding:14px 26px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:13.5px; color:var(--vz-muted); }
.v20-side{ position:sticky; top:104px; }
.v20-list{ background:#fff; border:1px solid var(--vz-line); border-radius:var(--vz-r-lg); padding:18px; margin-bottom:16px; }
.v20-list h3{ font-size:16px; margin:0 0 10px; color:var(--vz-navy); }
.v20-list a{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--vz-line); text-decoration:none; color:var(--vz-ink); font-size:14.5px; }
.v20-list a:last-child{ border-bottom:0; } .v20-list a b{ color:var(--vz-navy); }
.v20-list a small{ color:var(--vz-muted); white-space:nowrap; }
.v20-honest{ border-left:4px solid var(--vz-red); background:#fff; padding:18px 22px; border-radius:0 14px 14px 0; box-shadow:var(--vz-e1); }
.v20-honest b{ color:var(--vz-navy); }
.v20-video{ position:relative; border-radius:var(--vz-r-xl); overflow:hidden; background:#081428; aspect-ratio:16/9; box-shadow:var(--vz-e3); }
.v20-video video,.v20-video img,.v20-video canvas{ width:100%; height:100%; object-fit:cover; display:block; }
.v20-video .cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px; background:linear-gradient(transparent, rgba(8,20,40,.85)); color:#DCE6F5; font-size:13px; }
.v20-contact{ display:grid; grid-template-columns:1fr 1.2fr; gap:30px; } @media(max-width:860px){ .v20-contact{ grid-template-columns:1fr;} }
.v20-contact .card{ background:#fff; border:1px solid var(--vz-line); border-radius:var(--vz-r-lg); padding:22px; margin-bottom:14px; }
.v20-contact .card h3{ margin:0 0 6px; font-size:17px; color:var(--vz-navy);} .v20-contact .card p{ margin:0; color:var(--vz-muted); font-size:15px; line-height:1.6; }
.v20-contact .card a{ color:var(--vz-blue); font-weight:600; text-decoration:none; }
.v20-tools{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media(max-width:900px){ .v20-tools{ grid-template-columns:repeat(2,1fr);} }
.v20-tool{ display:block; text-decoration:none; background:#fff; border:1px solid var(--vz-line); border-radius:14px; padding:16px 18px; color:var(--vz-ink); }
.v20-tool b{ display:block; color:var(--vz-navy); font:700 15px var(--vz-font); margin-bottom:4px; } .v20-tool span{ font-size:13.5px; color:var(--vz-muted); }
.v20-tool:hover{ border-color:var(--vz-blue); }
.v20-media{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center; } @media(max-width:860px){ .v20-media{ grid-template-columns:1fr;} }
.v20-media img{ width:100%; border-radius:var(--vz-r-xl); box-shadow:var(--vz-e2); display:block; aspect-ratio:4/3; object-fit:cover; }
.v20-media h2{ font-size:var(--vz-t-2xl); color:var(--vz-navy); margin:0 0 12px; }
.v20-media p{ color:var(--vz-muted); font-size:16px; line-height:1.65; margin:0 0 12px; }
/* v20 fixes after the first render: the container, and the wordmark's second word in red not green */
body.v20 .container{ max-width:var(--vz-maxw); margin:0 auto; padding:0 var(--vz-5); }
.vz-logo em{ color:var(--vz-red)!important; }
.vz-head .vz-logo em, .vz-foot .vz-logo em{ color:#FF8A8A!important; }
.vz-foot .vz-logo i{ color:#9FA9BE; }
.vz-head-in{ padding:0 var(--vz-5); }
/* university checkerboard — alternating navy / white tiles, names only, no crests */
.v20-board{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--vz-line); border-radius:var(--vz-r-lg); overflow:hidden; }
@media(max-width:900px){ .v20-board{ grid-template-columns:repeat(2,1fr);} }
.v20-uni{ background:#fff; color:var(--vz-navy); padding:22px 20px; min-height:104px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--vz-line); border-bottom:1px solid var(--vz-line); }
.v20-uni.alt{ background:var(--vz-navy); color:#fff; border-color:rgba(255,255,255,.08); }
.v20-uni b{ font:700 15.5px/1.3 var(--vz-font); }
.v20-uni span{ font-size:12.5px; margin-top:5px; opacity:.75; letter-spacing:.04em; text-transform:uppercase; font-family:var(--vz-font); }
@media(max-width:900px){ .v20-uni.alt{ background:#fff; color:var(--vz-navy);} .v20-uni:nth-child(4n+2), .v20-uni:nth-child(4n+3){ background:var(--vz-navy); color:#fff; } }

/* ---- v20.2 · Suite G findings, 11 Sep 2026 --------------------------------
   Every one of these was found by rendering the page, not by reading it.

   1. FEED LINKS WERE 26px TALL on a phone — under the 32px floor, and the feed
      is the first thing a thumb meets. The bar grows, the links fill it.
   2. 10.5px TEXT (photo credits, status pills). Below the 11px floor this
      project set for itself; small enough that a 45-year-old father squints.
   3. A HEADING SLICED BY THE STICKY HEADER. The founder hit this on contact;
      the suite found it again on checklist. 48px of top padding is less than
      the 64px bar, so the first heading sits under it the moment you scroll a
      hair. scroll-margin-top fixes anchor jumps; the padding fixes the rest.
   -------------------------------------------------------------------------- */
html{ scroll-padding-top:112px; }
h1,h2,h3,[id]{ scroll-margin-top:112px; }
body.v20 .v20-sec:first-of-type{ padding-top:clamp(56px,7vw,80px); }
.v20-credit{ font-size:11px; }
.v20-dest .st, .v20-country .st{ font-size:11px; }
.v20-tab .band{ font-size:11px; }
@media(max-width:640px){
  .vz-feed, .vz-feed-in{ height:42px; }
  .vz-feed-track li{ min-height:34px; }
  .vz-feed-track a{ display:inline-flex; align-items:center; min-height:34px; }
}
.vz-feed-track a{ display:inline-flex; align-items:center; min-height:32px; }
/* v20.2 — the hero is a photograph with a subject on one side, so the text side
   must be genuinely dark, not tinted. The founder's words: the graduation cap
   "interferes with the text". A gradient that is opaque where the words are and
   clear where the tower is fixes that without dimming the picture. */
.v20-hero:after{ background:linear-gradient(90deg, rgba(8,20,40,.94) 0%, rgba(8,20,40,.86) 34%, rgba(16,40,80,.55) 58%, rgba(16,40,80,.12) 100%); }
@media(max-width:820px){ .v20-hero:after{ background:linear-gradient(180deg, rgba(8,20,40,.72) 0%, rgba(8,20,40,.90) 55%, rgba(8,20,40,.95) 100%); } }
.v20-hero .v20-hero-img{ object-position:center 42%; }
.v20-tab img{ object-position:center 45%; }
/* the tile copy was sitting on the photograph itself — legible to someone who
   knows what it says, not to a stranger. The scrim now starts higher and lands
   almost opaque behind the words. Same fix on the destination cards. */
.v20-tab:after{ background:linear-gradient(180deg, rgba(8,20,40,.10) 0%, rgba(8,20,40,.55) 42%, rgba(8,20,40,.93) 78%, rgba(8,20,40,.97) 100%); }
.v20-tab .in{ min-height:380px; }
.v20-tab ul{ color:#E7EAF0; }
.v20-dest .in{ padding-top:54px; background:linear-gradient(180deg, transparent, rgba(8,20,40,.55) 40%, rgba(8,20,40,.94)); }
/* auth pages: the secondary links were 23px — under the floor for a thumb */
.v20-auth .links a{ display:inline-flex; align-items:center; min-height:34px; padding:4px 2px; }
/* three product tiles now that Hajj & Umrah is held back until it launches */
.v20-tabs{ grid-template-columns:repeat(3,1fr); }
@media(max-width:980px){ .v20-tabs{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .v20-tabs{ grid-template-columns:1fr;} }
/* cross-links between the two academy pages were 21px — a thumb misses those */
.v20-tool, .v20-tile .more, .cross-link{ min-height:32px; }
a.crosslink, .prod-switch a{ display:inline-flex; align-items:center; min-height:32px; }

/* ---- v20.8 · THE WORDMARK WEARS THE LOGO'S OWN COLOURS, 18 Sep 2026 --------
   O1: "the logo colors not good... you need to give proper same blue and red
   color to logo". The lockup (brand/vizzora-lockup.png) is VIZZORA in the
   mark's navy #172F53 and ABROAD in the mark's red #B21C1E. The site was
   printing the wordmark white and salmon (#FF8A8A) on the navy bar, with a
   mint strapline — three colours the logo does not contain.

   Navy text cannot sit on a navy bar, so the white chip that already carries
   the mark now carries the whole lockup: mark, wordmark and strapline, in the
   logo's two colours, on every ground. One lockup, one chip, everywhere. */
.vz-logo{ --lg-navy:#172F53; --lg-red:#B21C1E; }
.vz-head .vz-logo, .vz-nav-dark .vz-logo, .vz-dark .vz-logo, .vz-foot .vz-logo{
  background:#fff; border-radius:12px; padding:4px 12px 4px 4px; gap:9px; color:var(--lg-navy);
  box-shadow:0 1px 0 rgba(0,0,0,.08); }
.vz-head .vz-logo .vz-mark, .vz-nav-dark .vz-logo .vz-mark, .vz-dark .vz-logo .vz-mark, .vz-foot .vz-logo .vz-mark{
  border-radius:8px; background-color:#fff; }
.vz-logo, .vz-head .vz-logo, .vz-foot .vz-logo, .vz-nav-dark .vz-logo, .vz-dark .vz-logo{ color:var(--lg-navy)!important; }
.vz-logo em, .vz-head .vz-logo em, .vz-foot .vz-logo em, .vz-nav-dark .vz-logo em, .vz-dark .vz-logo em{ color:var(--lg-red)!important; }
.vz-logo i, .vz-head .vz-logo i, .vz-foot .vz-logo i, .vz-nav-dark .vz-logo i, .vz-dark .vz-logo i{ color:var(--lg-navy)!important; }
.vz-foot .vz-logo{ display:inline-flex; }
@media(max-width:480px){ .vz-head .vz-logo{ padding:3px 9px 3px 3px; border-radius:10px; gap:6px; } }