/*
Theme Name:   Progrysss
Theme URI:    https://example.com/progrysss/
Author:       Progrysss
Author URI:   https://example.com/
Description:  Bespoke WordPress theme for Vietnam Tourism Office. Ships a Home page template and a Thank You page template with a shared jade + lantern-gold design system, an enquiry modal wired for Contact Form 7, and a mobile sticky call/WhatsApp bar.
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  progrysss
Tags:         travel, one-column, custom-menu, custom-logo, translation-ready

Progrysss is a bespoke theme. All design tokens live in the :root block below.
*/

/* =====================================================================
   VIETNAM TOUR PACKAGES — one-page site

   TYPE is carried over from meghalaya.html unchanged:
     body + UI   Montserrat, weight 500
     h1 / h2     Playfair Display

   COLOUR is new. Jade green + lantern gold:
     jade    #0E6B5C  Ha Long / Lan Ha water, Sapa terraces  → primary
     gold    #E0A33E  Hoi An lanterns, imperial Hue          → every CTA
     red     #C8402F  lacquer & temple red                   → small accents only
     cream   #FBF7F0  warm paper ground

   The red is deliberately rationed to duration pills and "not included"
   marks. Running red and gold as co-primaries would split the call to
   action, which is the same reason meghalaya.html parks its cyan.
   ===================================================================== */
:root{
  /* -- Brand -------------------------------------------------------- */
  --vn-jade:#0E6B5C;
  --vn-jade-dark:#0A5348;
  --vn-jade-deep:#07332C;        /* header top strip, footer            */
  --vn-jade-wash:#E8F2EF;        /* tinted surface                      */
  --vn-gold:#E0A33E;             /* CTA fill                            */
  --vn-gold-dark:#C4862A;        /* CTA hover                           */
  --vn-red:#C8402F;              /* accent, rationed                    */
  --vn-green:#3CB54F;            /* WhatsApp / "included" ticks         */

  /* -- Ink ---------------------------------------------------------- */
  --vn-charcoal:#1D252D;
  --vn-muted:#5A636B;
  --vn-soft:#8A8F96;
  --vn-on-dark:#fff;

  /* -- Surfaces ----------------------------------------------------- */
  --vn-bg:#fff;
  --vn-cream:#FBF7F0;
  --vn-cream-2:#F4EFE6;          /* table headers, sidebar heads        */
  --vn-hover:#F2E7D3;            /* row hover wash                      */
  --vn-line:#E4E0D8;
  --vn-line-2:#EFEAE0;

  /* -- Type --------------------------------------------------------- */
  --vn-font:'Montserrat','Segoe UI',Arial,sans-serif;
  --vn-font-head:'Playfair Display',Georgia,'Times New Roman',serif;
  --vn-fw-body:500;
  --vn-fs-base:16px;
  --vn-fs-h1:44px;
  --vn-fs-h2:30px;
  --vn-fs-h3:18px;
  --vn-fs-sm:14px;
  --vn-fs-xs:12.5px;
  --vn-lh:1.7;

  /* -- Shape & space ------------------------------------------------ */
  --vn-radius:12px;
  --vn-radius-lg:14px;
  --vn-radius-sm:6px;
  --vn-shell:1200px;             /* content max width                   */
  --vn-header-h:72px;
  --vn-section-gap:64px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--vn-bg);
  font-family:var(--vn-font); font-size:var(--vn-fs-base);
  font-weight:var(--vn-fw-body); line-height:var(--vn-lh);
  color:var(--vn-charcoal); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}

.vn-shell{max-width:var(--vn-shell); margin:0 auto; padding:0 20px;}

/* Anchor targets must clear the sticky header */
section[id]{scroll-margin-top:calc(var(--vn-header-h) + 16px);}

/* =====================================================================
   HEADINGS, TEXT, LINKS, LISTS — defined once, used everywhere
   ===================================================================== */
h1,h2,h3{margin:0;}
.vn-h2{
  font-family:var(--vn-font-head); font-weight:700;
  font-size:var(--vn-fs-h2); line-height:1.25;
  color:var(--vn-charcoal); margin:0 0 8px;
}
.vn-h3{
  font-family:var(--vn-font); font-weight:700;
  font-size:var(--vn-fs-h3); line-height:1.5;
  color:var(--vn-charcoal); margin:26px 0 8px;
}
.vn-lede{color:var(--vn-muted); font-size:16.5px; margin:0 0 22px; max-width:78ch;}
p{margin:0 0 14px;}
a{color:var(--vn-jade);}
ul,ol{margin:0 0 14px; padding-left:22px;}
li{margin:0 0 8px;}
li::marker{color:var(--vn-jade);}
.vn-note{font-size:13px; color:var(--vn-soft); margin:0 0 6px;}

/* Section rhythm. Alternating bands give the one-pager some structure. */
.vn-section{padding:var(--vn-section-gap) 0;}
.vn-section-cream{background:var(--vn-cream);}
.vn-section-head{margin:0 0 28px;}

/* Small caps eyebrow above each section title */
.vn-eyebrow{
  display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--vn-jade); margin:0 0 8px;
}

/* -- Buttons -------------------------------------------------------- */
.vn-btn,.vn-btn-o{
  display:inline-block; font-weight:700; text-align:center;
  border-radius:var(--vn-radius-sm); text-decoration:none;
  cursor:pointer; border:0; font-family:var(--vn-font);
  transition:background .15s ease, color .15s ease;
}
.vn-btn{background:var(--vn-gold); color:#3B2A0C; font-size:15px; padding:13px 24px;}
.vn-btn:hover{background:var(--vn-gold-dark); color:#3B2A0C;}
.vn-btn-o{
  background:transparent; border:1.5px solid var(--vn-jade);
  color:var(--vn-jade); font-size:var(--vn-fs-sm); padding:11px 18px;
}
.vn-btn-o:hover{background:var(--vn-jade); color:var(--vn-on-dark);}
.vn-btn-wa{border-color:var(--vn-green); color:#2E8B3E;}
.vn-btn-wa:hover{background:var(--vn-green); color:var(--vn-on-dark);}
.vn-btn-sm{font-size:13.5px; padding:9px 16px;}
.vn-btn-row{display:flex; flex-wrap:wrap; gap:12px;}

/* =====================================================================
   HEADER — sticky, with a thin jade utility strip above it
   ===================================================================== */
.vn-topbar{
  background:var(--vn-jade-deep); color:#CFE3DE;
  font-size:12.5px; letter-spacing:.2px;
}
.vn-topbar .vn-shell{
  display:flex; align-items:center; gap:18px;
  height:38px; justify-content:space-between;
}
.vn-topbar a{color:#CFE3DE; text-decoration:none;}
.vn-topbar a:hover{color:var(--vn-on-dark); text-decoration:underline;}
.vn-topbar-l,.vn-topbar-r{display:flex; align-items:center; gap:18px; min-width:0;}
.vn-topbar-hide{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.vn-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--vn-line);
}
.vn-header .vn-shell{
  display:flex; align-items:center; gap:24px; height:var(--vn-header-h);
}
.vn-logo{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; flex:0 0 auto;
}
.vn-logo svg{width:34px; height:34px; display:block; flex:0 0 auto;}
.vn-logo-txt{display:flex; flex-direction:column; line-height:1.15;}
.vn-logo-txt b{
  font-family:var(--vn-font-head); font-weight:700;
  font-size:17px; color:var(--vn-jade); letter-spacing:.2px;
}
.vn-logo-txt span{
  font-size:10px; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--vn-soft);
}
.vn-nav{display:flex; align-items:center; gap:24px; margin-left:auto;}
.vn-nav a{
  font-size:14.5px; font-weight:600; color:var(--vn-charcoal);
  text-decoration:none; white-space:nowrap; padding:4px 0;
  border-bottom:2px solid transparent;
}
.vn-nav a:hover{color:var(--vn-jade); border-bottom-color:var(--vn-gold);}
.vn-header-cta{display:flex; align-items:center; gap:12px; flex:0 0 auto;}

/* Below 1040px the nav becomes a scrollable strip under the logo bar
   rather than a hamburger — with only seven anchors that stays one tap. */
.vn-navwrap{display:contents;}
@media (max-width:1040px){
  .vn-navwrap{
    display:block; order:3; width:100%;
    border-top:1px solid var(--vn-line-2);
  }
  .vn-header .vn-shell{height:auto; flex-wrap:wrap; padding-top:12px; row-gap:0;}
  .vn-nav{
    margin-left:0; gap:20px; overflow-x:auto; padding:10px 0 9px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .vn-nav::-webkit-scrollbar{display:none;}
  .vn-header-cta{margin-left:auto;}
}

/* =====================================================================
   HERO
   ===================================================================== */
.vn-hero{
  --vn-hero-img:url('https://commons.wikimedia.org/wiki/Special:FilePath/HALONG_BAY_.jpg?width=1800');
  position:relative; background:var(--vn-hero-img) center/cover no-repeat;
  min-height:560px; display:flex; align-items:center;
}
.vn-hero-shade{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(7,51,44,.90) 0%, rgba(7,51,44,.66) 46%, rgba(7,51,44,.30) 100%);
}
.vn-hero .vn-shell{position:relative; padding-top:56px; padding-bottom:56px;}
.vn-hero-in{max-width:660px; color:var(--vn-on-dark);}
.vn-hero-eyebrow{
  display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase;
  color:var(--vn-gold); margin:0 0 12px;
}
.vn-hero h1{
  font-family:var(--vn-font-head); font-weight:700;
  font-size:var(--vn-fs-h1); line-height:1.14; margin:0 0 14px;
  text-shadow:0 2px 18px rgba(0,0,0,.32);
}
.vn-hero-sub{font-size:17.5px; color:#E4EFEC; margin:0 0 20px;}
.vn-hero-price{
  display:inline-block; background:var(--vn-gold); color:#3B2A0C;
  font-weight:700; font-size:15px; padding:8px 16px;
  border-radius:var(--vn-radius-sm); margin:0 0 20px;
}
.vn-hero-price small{font-weight:600; font-size:12px; opacity:.82;}
.vn-hero .vn-btn-row{margin:0 0 24px;}
.vn-hero .vn-btn-o{
  background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.94);
  color:var(--vn-jade-dark);
}
.vn-hero .vn-btn-o:hover{background:var(--vn-on-dark); color:var(--vn-jade-dark);}

/* -- Highlighted stat panel in the hero ------------------------------
   The traveller count is the one number people scan for, so it gets a
   panel rather than a chip. The first stat is deliberately larger and
   gold: three equal-weight stats read as decoration, one lead figure
   with two supports reads as a claim. */
.vn-hero-stats{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:0;
  margin:0 0 22px; border-radius:var(--vn-radius);
  background:rgba(7,51,44,.55); border:1px solid rgba(224,163,62,.42);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 6px 26px rgba(0,0,0,.20);
  overflow:hidden;
}
.vn-hero-stat{padding:15px 24px; flex:1 1 auto; min-width:0;}
.vn-hero-stat + .vn-hero-stat{border-left:1px solid rgba(255,255,255,.18);}
.vn-hero-stat b{
  display:block; font-family:var(--vn-font-head); font-weight:700;
  font-size:26px; line-height:1.1; color:var(--vn-on-dark);
}
.vn-hero-stat b i{font-style:normal; font-size:15px; opacity:.7;}
.vn-hero-stat-since b{font-size:22px;}
.vn-hero-stat span{display:block; font-size:12.5px; color:#BCD8D2; line-height:1.4; margin-top:3px;}
/* The lead stat */
.vn-hero-stat-lead{background:rgba(224,163,62,.14); flex:0 0 auto;}
.vn-hero-stat-lead b{font-size:34px; color:var(--vn-gold);}
.vn-hero-stat-lead span{color:#F0E2C6; font-weight:600;}
/* Smiley for the lead stat, drawn rather than set as an emoji: 😊 renders in
   each platform's own house style and palette, which fights the gold panel,
   and it sits on a different baseline per OS. currentColor keeps this one in
   step with the label if that colour is ever changed. */
.vn-smiley{
  width:1.2em; height:1.2em; vertical-align:-.25em; margin-right:5px;
  fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.vn-hero-stat .vn-stars{font-size:12px; letter-spacing:1px;}

.vn-hero-chips{display:flex; flex-wrap:wrap; gap:10px;}
.vn-chip{
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  color:var(--vn-on-dark); font-size:var(--vn-fs-xs);
  font-weight:600; padding:6px 13px; border-radius:20px;
}
.vn-stars{color:var(--vn-gold);}

/* -- Trust strip under the hero ------------------------------------- */
.vn-trust{background:var(--vn-jade); color:var(--vn-on-dark);}
.vn-trust .vn-shell{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:18px; padding-top:22px; padding-bottom:22px;
}
.vn-trust-i{display:flex; align-items:center; gap:11px; font-size:13.5px; line-height:1.4;}
.vn-trust-i svg{width:22px; height:22px; flex:0 0 auto; color:var(--vn-gold);}
.vn-trust-i b{display:block; font-size:14.5px;}
.vn-trust-i span{color:#BCD8D2; font-size:12.5px;}

/* =====================================================================
   TABLES
   ===================================================================== */
.vn-tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 14px;}
.vn-table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:620px; background:var(--vn-bg);}
.vn-table th{
  background:var(--vn-jade); color:var(--vn-on-dark); text-align:left;
  padding:12px 14px; font-weight:600; border:1px solid var(--vn-jade);
  white-space:nowrap;
}
.vn-table td{padding:11px 14px; border:1px solid var(--vn-line); vertical-align:top;}
.vn-table tbody tr:nth-child(even) td{background:var(--vn-cream);}
.vn-section-cream .vn-table tbody tr:nth-child(even) td{background:var(--vn-cream-2);}
.vn-table .vn-price{font-weight:700; white-space:nowrap;}
.vn-nowrap{white-space:nowrap;}

/* =====================================================================
   CALLOUTS
   ===================================================================== */
.vn-callout{
  background:var(--vn-jade-wash); border:1px solid #CBE1DB;
  border-left:4px solid var(--vn-jade);
  border-radius:0 var(--vn-radius) var(--vn-radius) 0;
  padding:18px 22px; margin:0 0 18px;
}
.vn-callout-gold{
  background:var(--vn-cream); border:1px solid var(--vn-line);
  border-left:4px solid var(--vn-gold); border-radius:0 var(--vn-radius) var(--vn-radius) 0;
  padding:18px 22px; margin:18px 0 0;
}
.vn-callout p:last-child,.vn-callout-gold p:last-child{margin-bottom:0;}
.vn-callout strong{color:var(--vn-jade-dark);}
.vn-callout-gold strong{color:#8A5E12;}

/* =====================================================================
   PACKAGE CARDS
   ===================================================================== */
.vn-grid{display:grid; gap:22px;}
.vn-grid-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.vn-grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}

.vn-pkg{
  background:var(--vn-bg); border:1px solid var(--vn-line);
  border-radius:var(--vn-radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease;
}
.vn-pkg:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(7,51,44,.12);}
.vn-pkg-imgwrap{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--vn-jade-wash);}
.vn-pkg-imgwrap img{width:100%; height:100%; object-fit:cover;}
.vn-pkg-dur{
  position:absolute; top:12px; left:12px;
  background:var(--vn-red); color:var(--vn-on-dark);
  font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:4px;
  letter-spacing:.3px;
}
.vn-pkg-body{padding:18px 18px 12px; flex:1;}
.vn-pkg-title{font-family:var(--vn-font); font-size:17px; font-weight:700; line-height:1.35; margin:0 0 8px;}
.vn-pkg-route{font-size:13px; color:var(--vn-muted); margin:0 0 4px;}
.vn-pkg-for{font-size:12.5px; color:var(--vn-soft); margin:0;}
.vn-pkg-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px; border-top:1px solid var(--vn-line-2);
}
.vn-pkg-price{font-size:19px; font-weight:700; line-height:1.2;}
.vn-pkg-price span{display:block; font-size:11.5px; font-weight:500; color:var(--vn-soft);}

/* =====================================================================
   DESTINATION TILES
   ===================================================================== */
.vn-dest{
  position:relative; border-radius:var(--vn-radius); overflow:hidden;
  aspect-ratio:4/3; display:block; text-decoration:none;
}
.vn-dest img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.vn-dest:hover img{transform:scale(1.06);}
.vn-dest-cap{
  position:absolute; inset:auto 0 0 0; padding:34px 16px 14px;
  background:linear-gradient(180deg,rgba(7,51,44,0) 0%,rgba(7,51,44,.86) 100%);
  color:var(--vn-on-dark);
}
.vn-dest-cap b{display:block; font-size:16px; font-weight:700; line-height:1.3;}
.vn-dest-cap span{display:block; font-size:12.5px; color:#CFE3DE; margin-top:2px;}

/* =====================================================================
   TWO-COLUMN INCLUDED / NOT INCLUDED
   ===================================================================== */
.vn-two{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.vn-inc{background:var(--vn-bg); border:1px solid var(--vn-line); border-radius:var(--vn-radius); padding:22px 24px;}
.vn-inc h3{display:flex; align-items:center; gap:9px; margin:0 0 14px; font-size:17px; font-weight:700;}
.vn-inc ul{margin:0; padding-left:20px;}
.vn-inc li{font-size:14.5px;}
/* Colour carries the heading and the bullet only — running it through the
   list copy as well hurts legibility and makes the panel shout. */
h3.vn-yes{color:var(--vn-green);}
h3.vn-no{color:var(--vn-red);}
.vn-inc ul.vn-yes li,
.vn-inc ul.vn-no li{color:var(--vn-charcoal);}
.vn-inc ul.vn-yes li::marker{color:var(--vn-green);}
.vn-inc ul.vn-no li::marker{color:var(--vn-red);}

/* =====================================================================
   WHY-BOOK TILES
   ===================================================================== */
.vn-why{
  background:var(--vn-bg); border:1px solid var(--vn-line);
  border-radius:var(--vn-radius); padding:22px 22px 24px;
}
.vn-why-ico{color:var(--vn-jade); margin:0 0 12px;}
.vn-why-ico svg{width:26px; height:26px; display:block;}
.vn-why b{display:block; font-size:15.5px; margin:0 0 5px; line-height:1.35;}
.vn-why p{font-size:13.5px; color:var(--vn-muted); margin:0; line-height:1.55;}

/* =====================================================================
   CUSTOMER REVIEWS
   A dark jade band. The page alternates white and cream everywhere else,
   so a third, darker ground is what stops the reviews reading as one
   more content block — and it is the one section where the gold stars
   have enough contrast to actually carry.
   ===================================================================== */
.vn-section-jade{background:var(--vn-jade-deep); color:var(--vn-on-dark);}
.vn-section-jade .vn-h2{color:var(--vn-on-dark);}
.vn-section-jade .vn-eyebrow{color:var(--vn-gold);}
.vn-section-jade .vn-lede{color:#BCD8D2;}
.vn-section-jade .vn-lede strong{color:var(--vn-on-dark);}

/* -- Rating summary ------------------------------------------------- */
.vn-rev-top{
  display:grid; grid-template-columns:auto 1fr; gap:34px;
  align-items:center; margin:0 0 30px;
  padding:22px 26px; border-radius:var(--vn-radius);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
}
.vn-rev-score{text-align:center; padding-right:30px; border-right:1px solid rgba(255,255,255,.18);}
.vn-rev-score b{
  display:block; font-family:var(--vn-font-head); font-weight:700;
  font-size:48px; line-height:1; color:var(--vn-on-dark);
}
.vn-rev-score .vn-stars{font-size:17px; letter-spacing:2px; display:block; margin:8px 0 4px;}
.vn-rev-score span{display:block; font-size:12.5px; color:#BCD8D2;}

/* Bar chart of the star split. Widths are inline so the numbers and the
   bars can never drift apart when you swap in your real figures. */
.vn-rev-bars{display:grid; gap:7px; min-width:0;}
.vn-rev-bar{display:grid; grid-template-columns:52px 1fr 44px; gap:12px; align-items:center; font-size:12.5px;}
.vn-rev-bar i{font-style:normal; color:#BCD8D2; white-space:nowrap;}
.vn-rev-bar u{
  text-decoration:none; height:7px; border-radius:4px; display:block;
  background:rgba(255,255,255,.14); overflow:hidden;
}
.vn-rev-bar u b{display:block; height:100%; background:var(--vn-gold); border-radius:4px;}
.vn-rev-bar em{font-style:normal; color:#BCD8D2; text-align:right;}

/* -- Review cards --------------------------------------------------- */
.vn-rev-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.vn-rev{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--vn-radius); padding:22px 22px 20px;
  display:flex; flex-direction:column;
}
.vn-rev .vn-stars{font-size:14px; letter-spacing:2px; margin:0 0 10px;}
.vn-rev-q{
  font-size:14.5px; line-height:1.65; color:#EAF3F1; margin:0 0 16px;
  flex:1 1 auto;
}
.vn-rev-q strong{color:var(--vn-on-dark);}
.vn-rev-who{display:flex; align-items:center; gap:12px; padding-top:15px; border-top:1px solid rgba(255,255,255,.14);}
/* The avatar disc carries the reviewer's initials, and a portrait — when
   one exists — is layered over them by the <img> inside. The initials are
   never removed from the markup: they are what shows if the photo 404s or
   was never supplied, so a missing file degrades to the old design instead
   of a broken-image disc. Only ever put a real photo here, of the person
   actually named, published with their permission. */
.vn-rev-av{
  position:relative; overflow:hidden;
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:var(--vn-jade); color:var(--vn-on-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:700; letter-spacing:.5px;
}
/* inset:0 rather than a plain block image — the portrait is taken out of
   flow so its intrinsic size cannot stretch the disc, and object-fit crops
   a non-square upload to the circle instead of squashing it. */
.vn-rev-av img{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; object-position:center top;
  background:var(--vn-jade);
}
/* Scoped to .vn-rev-meta, not to every span in .vn-rev-who — a bare
   `.vn-rev-who span` also matches the avatar and would flatten it. */
.vn-rev-meta{min-width:0;}
.vn-rev-meta b{display:block; font-size:14px; line-height:1.3; color:var(--vn-on-dark);}
.vn-rev-meta span{display:block; font-size:12px; color:#BCD8D2; line-height:1.4;}
.vn-rev-trip{
  display:inline-block; margin:14px 0 0; align-self:flex-start;
  font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:20px;
  background:rgba(224,163,62,.16); color:#F0C883;
  border:1px solid rgba(224,163,62,.34);
}
.vn-rev-foot{
  margin:28px 0 0; font-size:13px; color:#BCD8D2; line-height:1.6;
}
.vn-rev-foot a{color:var(--vn-gold); font-weight:600;}

/* =====================================================================
   FAQ ACCORDION
   ===================================================================== */
.vn-faq{max-width:900px;}
.vn-faq-item{
  border:1px solid var(--vn-line); border-radius:var(--vn-radius-sm);
  background:var(--vn-bg); margin:0 0 10px; overflow:hidden;
}
.vn-faq-q{
  cursor:pointer; list-style:none; position:relative;
  padding:16px 52px 16px 18px; margin:0;
  font-weight:600; font-size:15.5px; color:var(--vn-charcoal);
}
.vn-faq-q::-webkit-details-marker{display:none;}
.vn-faq-q::marker{content:"";}
.vn-faq-q::after{
  content:"+"; position:absolute; right:18px; top:50%;
  transform:translateY(-50%); color:var(--vn-gold);
  font-size:24px; font-weight:400; line-height:1;
}
.vn-faq-item[open] .vn-faq-q{color:var(--vn-jade);}
.vn-faq-item[open] .vn-faq-q::after{content:"–";}
.vn-faq-q:hover{background:var(--vn-cream);}
.vn-faq-q:focus-visible{outline:2px solid var(--vn-jade); outline-offset:-2px;}
.vn-faq-a{padding:0 18px 16px; margin:0; color:var(--vn-muted); font-size:15px;}
@media (prefers-reduced-motion:no-preference){
  .vn-faq-item[open] .vn-faq-a{animation:vn-reveal .18s ease-out;}
  @keyframes vn-reveal{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
}

/* =====================================================================
   CLOSING CTA
   ===================================================================== */
.vn-cta{
  background:var(--vn-jade-deep); color:var(--vn-on-dark);
  border-radius:var(--vn-radius-lg); padding:44px 44px 46px;
  position:relative; overflow:hidden;
}
.vn-cta::after{  /* soft gold glow, purely decorative */
  content:""; position:absolute; right:-90px; top:-90px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(224,163,62,.22) 0%,rgba(224,163,62,0) 70%);
}
.vn-cta-in{position:relative; max-width:660px;}
.vn-cta h2{
  font-family:var(--vn-font-head); font-weight:700;
  font-size:30px; line-height:1.22; margin:0 0 12px;
}
.vn-cta p{color:#CFE3DE; margin:0 0 22px;}
.vn-cta .vn-btn-o{border-color:rgba(255,255,255,.55); color:var(--vn-on-dark);}
.vn-cta .vn-btn-o:hover{background:var(--vn-on-dark); color:var(--vn-jade-deep);}

/* =====================================================================
   FOOTER
   ===================================================================== */
.vn-footer{background:var(--vn-jade-deep); color:#B9D2CC; font-size:14px;}
.vn-footer .vn-shell{padding-top:52px; padding-bottom:28px;}
.vn-foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:36px; padding-bottom:34px;
}
.vn-foot-brand .vn-logo-txt b{color:var(--vn-on-dark);}
.vn-foot-brand .vn-logo-txt span{color:#7FA79F;}
.vn-foot-brand p{margin:16px 0 16px; line-height:1.65; color:#B9D2CC;}
.vn-foot h4{
  font-size:12px; font-weight:700; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--vn-on-dark); margin:0 0 16px;
}
.vn-foot ul{list-style:none; margin:0; padding:0;}
.vn-foot li{margin:0 0 10px;}
.vn-foot a{color:#B9D2CC; text-decoration:none;}
.vn-foot a:hover{color:var(--vn-gold);}
.vn-social{display:flex; gap:10px; margin-top:4px;}
.vn-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
}
.vn-social a:hover{background:var(--vn-gold); border-color:var(--vn-gold); color:var(--vn-jade-deep);}
.vn-social svg{width:18px; height:18px;}
.vn-foot-contact li{display:flex; gap:10px; align-items:flex-start; line-height:1.55;}
.vn-foot-contact svg{width:17px; height:17px; flex:0 0 auto; margin-top:4px; color:var(--vn-gold);}
.vn-foot-bar{
  border-top:1px solid rgba(255,255,255,.13);
  padding-top:20px; display:flex; flex-wrap:wrap;
  gap:12px 26px; justify-content:space-between;
  font-size:12.5px; color:#7FA79F;
}
.vn-credits{font-size:11.5px; color:#5F8880; line-height:1.6; margin:14px 0 0;}
.vn-credits a{color:#7FA79F;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  :root{--vn-fs-h1:34px; --vn-fs-h2:25px; --vn-section-gap:46px;}
  .vn-hero{min-height:0;}
  .vn-hero .vn-shell{padding-top:46px; padding-bottom:46px;}
  .vn-trust .vn-shell{grid-template-columns:1fr 1fr; gap:16px;}
  .vn-two{grid-template-columns:1fr;}
  .vn-foot-grid{grid-template-columns:1fr 1fr; gap:30px;}
  .vn-cta{padding:32px 26px 34px;}
  .vn-cta h2{font-size:25px;}
  /* The score and the star-split bars stop fitting side by side well
     before the cards do, so they stack a breakpoint earlier. */
  .vn-rev-top{grid-template-columns:1fr; gap:20px; padding:20px;}
  .vn-rev-score{padding:0 0 18px; border-right:0; border-bottom:1px solid rgba(255,255,255,.18);}
}
@media (max-width:560px){
  :root{--vn-fs-h1:29px;}
  .vn-topbar-hide{display:none;}
  .vn-trust .vn-shell{grid-template-columns:1fr;}
  .vn-foot-grid{grid-template-columns:1fr;}
  .vn-btn,.vn-btn-o{width:100%;}
  /* The price pill sits in the same stack as the hero CTAs, so once those
     go full-bleed it has to match their width and padding or it reads as a
     half-finished button. */
  .vn-hero-price{
    display:block; width:100%; padding:13px 24px; text-align:center;
  }
  .vn-pkg-foot{flex-direction:column; align-items:stretch; gap:10px; text-align:center;}
  /* Three stats side by side squeeze to unreadable on a phone. Stacked,
     the divider moves from the left edge to the top. */
  .vn-hero-stats{display:block;}
  .vn-hero-stat{padding:13px 20px;}
  .vn-hero-stat + .vn-hero-stat{border-left:0; border-top:1px solid rgba(255,255,255,.18);}
  .vn-hero-stat-lead b{font-size:30px;}
  .vn-rev-score b{font-size:40px;}
  .vn-rev-bar{grid-template-columns:48px 1fr 40px; gap:9px; font-size:12px;}
}

/* =====================================================================
   ENQUIRY MODAL

   Two panels: "how it works" plus an illustration on the left, the form on
   the right. The form is Contact Form 7 — the static markup in the body
   mirrors what CF7 emits, so this same CSS styles both the preview here
   and the real shortcode output once the page is inside WordPress.
   ===================================================================== */
.vn-ov{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(12,18,24,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:24px; overflow-y:auto;
}
.vn-ov.is-open{display:flex; align-items:flex-start; justify-content:center;}
@media (min-height:700px){.vn-ov.is-open{align-items:center;}}
body.vn-locked{overflow:hidden;}

.vn-modal{
  position:relative; width:100%; max-width:940px; margin:auto;
  background:var(--vn-bg); border-radius:var(--vn-radius-lg);
  overflow:hidden; display:grid; grid-template-columns:38% 62%;
  box-shadow:0 30px 70px rgba(0,0,0,.34);
}
@media (prefers-reduced-motion:no-preference){
  .vn-ov.is-open .vn-modal{animation:vn-pop .22s cubic-bezier(.2,.8,.3,1);}
  @keyframes vn-pop{from{opacity:0; transform:translateY(14px) scale(.98);}to{opacity:1; transform:none;}}
}

.vn-modal-x{
  position:absolute; top:16px; right:16px; z-index:3;
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:var(--vn-cream-2); color:var(--vn-muted);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.vn-modal-x:hover{background:var(--vn-line); color:var(--vn-charcoal);}
.vn-modal-x svg{width:17px; height:17px;}

/* -- Left panel ----------------------------------------------------- */
.vn-modal-aside{
  background:var(--vn-jade-wash); padding:30px 26px 0;
  display:flex; flex-direction:column;
}
.vn-modal-aside h3{
  font-family:var(--vn-font); font-size:19px; font-weight:700;
  color:var(--vn-charcoal); margin:0 0 20px;
}
.vn-steps{list-style:none; margin:0 0 22px; padding:0;}
.vn-steps li{
  display:flex; gap:12px; align-items:flex-start;
  margin:0 0 16px; font-size:13.5px; line-height:1.5; color:var(--vn-charcoal);
}
.vn-steps b{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  background:var(--vn-jade-deep); color:var(--vn-on-dark);
  font-size:12px; font-weight:700; line-height:24px; text-align:center;
}
.vn-modal-call{display:flex; align-items:center; gap:12px; margin:0 0 18px;}
.vn-modal-call-ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  background:var(--vn-green); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.vn-modal-call-ico svg{width:19px; height:19px;}
.vn-modal-call span span{display:block; font-size:11.5px; color:var(--vn-muted); line-height:1.3;}
.vn-modal-call a{
  font-size:17px; font-weight:700; color:var(--vn-charcoal);
  text-decoration:none; letter-spacing:.2px;
}
.vn-modal-call a:hover{color:var(--vn-jade);}
.vn-modal-art{
  margin-top:auto; display:block; width:100%; height:auto;
  max-height:230px; min-height:0; flex:0 1 auto;
}

/* -- Right panel ---------------------------------------------------- */
.vn-modal-main{padding:30px 30px 28px;}
.vn-modal-main h2{
  font-family:var(--vn-font-head); font-weight:700;
  font-size:27px; line-height:1.2; color:var(--vn-charcoal);
  margin:0 0 22px; padding-right:44px;
}

/* Two-up field grid. CF7 wraps each control in .wpcf7-form-control-wrap,
   so .vn-field (the <p>) is the positioning context for the label. */
.vn-f2{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin:0 0 20px;}
.vn-field{position:relative; margin:0;}
.vn-field > label{
  position:absolute; top:-8px; left:12px; z-index:1;
  background:var(--vn-bg); padding:0 6px;
  font-size:12px; font-weight:600; color:var(--vn-soft);
  pointer-events:none;
}
.vn-field .wpcf7-form-control-wrap{display:block;}
.vn-field input,
.vn-field select,
.vn-field textarea{
  width:100%; font-family:var(--vn-font); font-size:14.5px; font-weight:500;
  color:var(--vn-charcoal); background:var(--vn-bg);
  border:1px solid var(--vn-line); border-radius:var(--vn-radius-sm);
  padding:15px 13px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.vn-field input:focus,
.vn-field select:focus,
.vn-field textarea:focus{
  border-color:var(--vn-jade); box-shadow:0 0 0 3px var(--vn-jade-wash);
}
.vn-field:focus-within > label{color:var(--vn-jade);}
.vn-field-full{grid-column:1 / -1;}

/* CF7 submit, plus its spinner and validation output */
.vn-modal-main input[type=submit],
.vn-modal-main .wpcf7-submit{
  width:100%; max-width:230px; cursor:pointer; border:0;
  font-family:var(--vn-font); font-size:15px; font-weight:700;
  background:var(--vn-gold); color:#3B2A0C;
  border-radius:var(--vn-radius-sm); padding:15px 24px;
  transition:background .15s ease;
}
.vn-modal-main input[type=submit]:hover,
.vn-modal-main .wpcf7-submit:hover{background:var(--vn-gold-dark);}
.vn-modal-main .wpcf7-not-valid-tip{font-size:12px; color:#C8402F; margin-top:5px;}
.vn-modal-main .wpcf7-response-output{
  margin:16px 0 0 !important; padding:11px 14px !important;
  border-radius:var(--vn-radius-sm); font-size:13.5px;
  border:1px solid var(--vn-line) !important;
}
.vn-modal-main .wpcf7-spinner{margin:0 0 0 10px;}
/* CF7 stamps a status class on the response box; the neutral border above
   reads the same for "sent" and "failed", which is the one moment the form
   must be unambiguous. */
.vn-modal-main .wpcf7-response-output.sent{
  border-color:var(--vn-green) !important;
  background:rgba(60,181,79,.09); color:#1E7A2E;
}
.vn-modal-main .wpcf7-response-output.invalid,
.vn-modal-main .wpcf7-response-output.unaccepted,
.vn-modal-main .wpcf7-response-output.spam,
.vn-modal-main .wpcf7-response-output.failed{
  border-color:var(--vn-red) !important;
  background:rgba(200,64,47,.07); color:#9E2E20;
}
/* An invalid control should be findable without reading the tip under it. */
.vn-field input.wpcf7-not-valid,
.vn-field select.wpcf7-not-valid,
.vn-field textarea.wpcf7-not-valid{border-color:var(--vn-red);}

/* -- Why-travel strip ----------------------------------------------- */
.vn-modal-why{margin-top:26px; padding-top:20px; border-top:1px solid var(--vn-line);}
.vn-modal-why > p{font-size:13.5px; font-weight:700; color:var(--vn-charcoal); margin:0 0 14px;}
.vn-modal-why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.vn-modal-why-i{display:flex; align-items:center; gap:10px;}
.vn-modal-why-i svg{width:26px; height:26px; flex:0 0 auto; color:var(--vn-jade);}
.vn-modal-why-i span{font-size:12.5px; line-height:1.35; color:var(--vn-muted);}

@media (max-width:820px){
  /* Below the two-column breakpoint the popup is the form and nothing
     else. Stacked, the "how it works" panel and the why-travel strip push
     the fields under the fold, which defeats the point of a popup. */
  .vn-modal{grid-template-columns:1fr;}
  .vn-modal-aside,
  .vn-modal-why{display:none;}
}
@media (max-width:560px){
  .vn-ov{padding:0;}
  /* Full-bleed, but only as tall as the form — min-height:100% would
     leave a large empty panel under the submit button. */
  .vn-modal{border-radius:0;}
  .vn-modal-main{padding:26px 20px 24px;}
  .vn-modal-main h2{font-size:22px;}
  .vn-f2{grid-template-columns:1fr;}
  .vn-modal-main input[type=submit],
  .vn-modal-main .wpcf7-submit{max-width:none;}
  .vn-modal-why-grid{grid-template-columns:1fr; gap:11px;}
}

/* =====================================================================
   MOBILE STICKY CTA
   A fixed bar so contacting us is always one tap away on a phone. Three
   routes, because people split three ways: call now, WhatsApp (the
   default in this market), or leave details in the form.

   The two instant channels are icon-only squares and the form button
   takes the rest of the row — a phone tap is a decision already made, so
   it needs recognition, not persuasion, while "Get a quote" is the one
   still being sold and keeps the gold fill and the words.

   It replaces the header button rather than doubling it — the header is
   sticky too, so showing both would put two identical CTAs on screen at
   once. Sits below the modal overlay (z-index 200) so it cannot overlap
   the form it opens.
   ===================================================================== */
.vn-stickycta{display:none;}
@media (max-width:820px){
  .vn-stickycta{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:120;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-top:1px solid var(--vn-line);
    padding:10px 16px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -6px 22px rgba(0,0,0,.09);
    /* Hidden until the reader scrolls: on load the hero's own CTA is right
       there, so the bar would just cover the page for no gain. It is also
       pointer-events:none while off-screen so it cannot catch a stray tap. */
    transform:translateY(115%); opacity:0; pointer-events:none;
    transition:transform .26s ease, opacity .2s ease;
  }
  .vn-stickycta.is-visible{transform:none; opacity:1; pointer-events:auto;}
  .vn-stickycta-row{display:flex; align-items:stretch; gap:8px;}
  /* The quote button eats the leftover width; min-width:0 stops its label
     from setting a floor that pushes the icons off a 320px screen. */
  .vn-stickycta .vn-btn{
    flex:1 1 auto; min-width:0; display:flex; align-items:center;
    justify-content:center; padding:13px 12px; font-size:14.5px;
    white-space:nowrap;
  }
  /* 50 x 48 keeps both icon taps at the 44px minimum. */
  .vn-sticky-ico{
    flex:0 0 auto; width:50px; min-height:48px;
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--vn-radius-sm); border:1.5px solid currentColor;
    text-decoration:none; transition:background .15s ease, color .15s ease;
  }
  .vn-sticky-ico svg{width:23px; height:23px; display:block;}
  .vn-sticky-call{color:var(--vn-jade);}
  .vn-sticky-call:active{background:var(--vn-jade); color:var(--vn-on-dark);}
  .vn-sticky-wa{color:#2E8B3E;}
  .vn-sticky-wa:active{background:var(--vn-green); color:var(--vn-on-dark);}
  /* Hide the duplicate in the sticky header, and keep the bar from
     covering the last of the footer. */
  .vn-header-cta{display:none;}
  .vn-footer{padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px));}
}

@media (prefers-reduced-motion:reduce){
  .vn-stickycta{transition:none;}
}

/* =====================================================================
   ─────────────────────────────────────────────────────────────────────
   THANK YOU PAGE TEMPLATE
   Everything below is used only by template-thank-you.php. It reuses the
   tokens and components above, so the two templates read as one site.
   ─────────────────────────────────────────────────────────────────────
   ===================================================================== */
/* =====================================================================
   CONFIRMATION BAND
   The page's whole job in one screen: it worked, here is when we reply,
   here is how to reach us if you would rather not wait.
   ===================================================================== */
.vn-ty{
  background:var(--vn-jade-deep); color:var(--vn-on-dark);
  padding:64px 0 60px; text-align:center;
  /* A soft jade glow behind the tick rather than a photo — this page is
     read for ten seconds and a hero image only slows it down. */
  background-image:radial-gradient(circle at 50% 0%, rgba(14,107,92,.85) 0%, rgba(7,51,44,0) 62%);
}
.vn-ty-in{max-width:680px; margin:0 auto;}
.vn-ty-tick{
  width:78px; height:78px; margin:0 auto 22px;
  border-radius:50%; background:rgba(60,181,79,.16);
  border:2px solid var(--vn-green);
  display:flex; align-items:center; justify-content:center;
  color:var(--vn-green);
}
.vn-ty-tick svg{width:38px; height:38px; display:block;}
.vn-ty h1{
  font-family:var(--vn-font-head); font-weight:700;
  font-size:var(--vn-fs-h1); line-height:1.16; margin:0 0 14px;
}
.vn-ty-sub{font-size:17px; color:#D6E7E3; margin:0 0 10px;}
.vn-ty-ref{
  display:inline-block; margin:8px 0 24px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26);
  border-radius:20px; padding:7px 16px; font-size:13px; color:#EAF3F1;
}
.vn-ty-ref b{color:var(--vn-on-dark);}
.vn-ty .vn-btn-row{justify-content:center;}
.vn-ty .vn-btn-o{
  background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.94);
  color:var(--vn-jade-dark);
}
.vn-ty .vn-btn-o:hover{background:var(--vn-on-dark); color:var(--vn-jade-dark);}
.vn-ty .vn-btn-wa{border-color:rgba(255,255,255,.94); color:#1E7A2E;}

/* =====================================================================
   NEXT-STEP TIMELINE
   Numbered, with the timing as the headline of each step — "when do I
   hear back" is the only question anyone brings to this page.
   ===================================================================== */
.vn-steps-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px;}
.vn-step{
  position:relative; background:var(--vn-bg);
  border:1px solid var(--vn-line); border-radius:var(--vn-radius);
  padding:26px 22px 24px;
}
.vn-step-n{
  position:absolute; top:-17px; left:22px;
  width:34px; height:34px; border-radius:50%;
  background:var(--vn-jade); color:var(--vn-on-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14.5px;
}
.vn-step-when{
  display:block; font-size:12px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--vn-gold-dark); margin:6px 0 6px;
}
.vn-step b{display:block; font-size:16px; margin:0 0 7px; line-height:1.4;}
.vn-step p{font-size:14px; color:var(--vn-muted); margin:0; line-height:1.6;}

/* =====================================================================
   TWO-COLUMN PREP PANELS
   ===================================================================== */
.vn-two{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.vn-panel{
  background:var(--vn-bg); border:1px solid var(--vn-line);
  border-radius:var(--vn-radius); padding:26px 26px 22px;
}
.vn-section-cream .vn-panel{border-color:var(--vn-line-2);}
.vn-panel h3{
  font-size:17px; font-weight:700; margin:0 0 6px;
  display:flex; align-items:center; gap:10px;
}
.vn-panel h3 svg{width:22px; height:22px; flex:0 0 auto; color:var(--vn-jade);}
.vn-panel > p{font-size:14px; color:var(--vn-muted); margin:0 0 14px;}
.vn-panel ul{margin:0; padding-left:20px;}
.vn-panel li{font-size:14.5px; line-height:1.6;}
.vn-panel li strong{color:var(--vn-charcoal);}

/* =====================================================================
   READING LINKS
   ===================================================================== */
.vn-read{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;}
.vn-read a{
  display:block; text-decoration:none; color:inherit;
  background:var(--vn-bg); border:1px solid var(--vn-line);
  border-radius:var(--vn-radius); padding:20px 20px 18px;
  transition:border-color .15s ease, transform .15s ease;
}
.vn-read a:hover{border-color:var(--vn-jade); transform:translateY(-2px);}
.vn-read b{display:block; font-size:15px; margin:0 0 5px; color:var(--vn-charcoal);}
.vn-read span{display:block; font-size:13.5px; color:var(--vn-muted); line-height:1.55;}
.vn-read i{
  font-style:normal; display:inline-block; margin-top:10px;
  font-size:13px; font-weight:700; color:var(--vn-jade);
}
@media (prefers-reduced-motion:reduce){
  .vn-read a:hover{transform:none;}
}

/* =====================================================================
   URGENT CONTACT STRIP
   ===================================================================== */
.vn-urgent{
  background:var(--vn-jade); color:var(--vn-on-dark);
  border-radius:var(--vn-radius-lg); padding:30px 32px;
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 30px;
  justify-content:space-between;
}
.vn-urgent-t{min-width:0; flex:1 1 340px;}
.vn-urgent h2{
  font-family:var(--vn-font-head); font-weight:700;
  font-size:24px; line-height:1.3; margin:0 0 6px;
}
.vn-urgent p{font-size:14.5px; color:#CFE3DE; margin:0; max-width:60ch;}
.vn-urgent .vn-btn-row{flex:0 0 auto;}
.vn-urgent .vn-btn-o{
  background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.94);
  color:var(--vn-jade-dark);
}
.vn-urgent .vn-btn-o:hover{background:var(--vn-on-dark);}
/* Thank-you responsive — the shared breakpoints above already cover the
   header, footer, .vn-two and the type scale; these are the extras. */
@media (max-width:900px){
  .vn-ty{padding:48px 0 44px;}
  .vn-urgent{padding:26px 24px;}
}
@media (max-width:560px){
  .vn-ty-tick{width:66px; height:66px;}
  .vn-ty-tick svg{width:32px; height:32px;}
  .vn-urgent .vn-btn-row{width:100%;}
}

/* =====================================================================
   WORDPRESS CORE CLASSES
   Required for theme-check / accessibility; the templates themselves do
   not use them, but editor content and plugins do.
   ===================================================================== */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; padding:0;
  overflow:hidden; position:absolute !important; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:var(--vn-cream); color:var(--vn-jade-dark);
  clip:auto !important; clip-path:none;
  display:block; font-size:14px; font-weight:700;
  height:auto; width:auto; left:8px; top:8px; padding:14px 22px;
  line-height:normal; text-decoration:none; z-index:100000;
  border-radius:var(--vn-radius); box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.alignleft{float:left; margin:.4em 1.6em 1em 0;}
.alignright{float:right; margin:.4em 0 1em 1.6em;}
.aligncenter{display:block; margin-left:auto; margin-right:auto;}
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:13px; color:var(--vn-muted); margin-top:6px;}
.sticky,.gallery-caption,.bypostauthor{}

/* Fallback page/post body copy (page.php, index.php, singular.php) */
.vn-entry{max-width:820px; margin:0 auto;}
.vn-entry h1{font-family:var(--vn-font-head); font-size:var(--vn-fs-h1); line-height:1.16; margin:0 0 18px;}
.vn-entry h2{font-family:var(--vn-font-head); font-size:var(--vn-fs-h2); line-height:1.22; margin:34px 0 12px;}
.vn-entry h3{font-size:19px; margin:26px 0 10px;}
.vn-entry p,.vn-entry li{font-size:16px; line-height:1.75; color:var(--vn-muted);}
.vn-entry a{color:var(--vn-jade);}
.vn-entry img{max-width:100%; height:auto; border-radius:var(--vn-radius);}
.vn-pagination{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px;}
.vn-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px;
  border:1px solid var(--vn-line); border-radius:var(--vn-radius);
  text-decoration:none; color:var(--vn-charcoal); font-weight:600; font-size:14px;
}
.vn-pagination .page-numbers.current,
.vn-pagination .page-numbers:hover{background:var(--vn-jade); border-color:var(--vn-jade); color:var(--vn-on-dark);}

/* =====================================================================
   ADMIN BAR
   .vn-header is position:sticky at top:0, which would sit under the
   logged-in admin bar. Offset it by the bar's own two heights.
   ===================================================================== */
body.admin-bar .vn-header{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar .vn-header{top:46px;}
}