/*
Theme Name:   NexPath Logistics
Theme URI:    https://nexpathlogistics.com
Description:  Custom WordPress theme for NexPath Logistics. No page builders. Full Customizer + Meta Box content control.
Author:       Waqas Ahmed / iamwaqas.com
Version:      3.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain:  nexpath
*/

/* ─────────────────────────────────────────────
   GOOGLE FONTS
───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ─────────────────────────────────────────────
   DESIGN TOKENS — edit here, changes everywhere
───────────────────────────────────────────── */
:root {
  /* Colors */
  --navy:       #0A1628;
  --navy-dark:  #060E1C;
  --navy-mid:   #08121F;
  --blue:       #1352A2;
  --blue-lt:    #3B8EF0;
  --gold:       #E8B84B;
  --grey-bg:    #F4F6FA;
  --grey-bd:    #E2E7F0;
  --grey-tx:    #6B7A99;
  --dark-tx:    #18243A;
  --white:      #ffffff;

  /* Fonts */
  --fd: 'Bebas Neue', sans-serif;
  --fh: 'Space Grotesk', sans-serif;
  --fb: 'DM Sans', sans-serif;

  /* Layout — container width is set in Customizer */
  --cw:   1440px; /* content max-width — overridden by Customizer */
  --navh: 68px;

  /* Fluid section vertical padding */
  --sv: clamp(3.5rem, 2rem + 5vw, 5.5rem);

  /* Fluid horizontal padding inside container */
  --px: clamp(1.25rem, 3vw, 5rem);

  /* Border radius */
  --r1: 6px;   --r2: 8px;
  --r3: 12px;  --r4: 16px;  --r5: 20px;

  /* Fluid type — clamp(mobile, fluid, desktop) */
  --t-xs:    clamp(0.625rem,  0.56rem  + 0.28vw, 0.6875rem);
  --t-sm:    clamp(0.75rem,   0.68rem  + 0.33vw, 0.8125rem);
  --t-base:  clamp(0.8125rem, 0.74rem  + 0.28vw, 0.875rem);
  --t-md:    clamp(0.875rem,  0.8rem   + 0.33vw, 0.9375rem);
  --t-lg:    clamp(0.9375rem, 0.85rem  + 0.38vw, 1.0625rem);
  --t-xl:    clamp(1rem,      0.9rem   + 0.42vw, 1.125rem);
  --t-2xl:   clamp(1.125rem,  1rem     + 0.52vw, 1.25rem);
  --t-3xl:   clamp(1.25rem,   1.05rem  + 0.84vw, 1.5rem);
  --t-4xl:   clamp(1.5rem,    1.15rem  + 1.46vw, 2rem);
  --t-5xl:   clamp(1.75rem,   1.25rem  + 2.08vw, 2.5rem);
  --t-h2:    clamp(1.75rem,   1.1rem   + 2.71vw, 2.75rem);
  --t-page:  clamp(2.5rem,    1.5rem   + 4.17vw, 4.5rem);
  --t-hero:  clamp(2.75rem,   1.4rem   + 5.63vw, 5.5rem);
  --t-cta:   clamp(2rem,      1.1rem   + 3.75vw, 3.625rem);

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.4s;
}

/* ─────────────────────────────────────────────
   RESET
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  font-size: var(--t-lg);
  color: var(--navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4,h5,h6 { font-family: var(--fh); font-weight: 700; line-height: 1.15; }

/* ─────────────────────────────────────────────
   LAYOUT
   Sections = 100vw (backgrounds bleed edge-to-edge)
   .wrap    = capped at --cw, centered, padded
───────────────────────────────────────────── */
.wrap {
  max-width: var(--cw);
  margin-inline: auto;
  padding-inline: var(--px);
  width: 100%;
}

.section {
  width: 100%;
  padding-block: var(--sv);
}
.bg-white  { background: #fff; }
.bg-grey   { background: var(--grey-bg); }
.bg-navy   { background: var(--navy); }
.bg-dark   { background: var(--navy-dark); }
.bg-mid    { background: var(--navy-mid); }
.bg-blue   { background: linear-gradient(135deg, var(--blue) 0%, #0C3778 100%); }

/* ─────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────── */
.t-display { font-family: var(--fd); font-weight: 400; letter-spacing: .01em; line-height: .93; }
.t-h1      { font-family: var(--fd); font-size: var(--t-page); font-weight: 400; line-height: .92; letter-spacing: .01em; }
.t-hero    { font-family: var(--fd); font-size: var(--t-hero); font-weight: 400; line-height: .93; letter-spacing: .01em; }
.t-h2      { font-family: var(--fh); font-size: var(--t-h2);   font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.t-h3      { font-family: var(--fh); font-size: var(--t-5xl);  font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.t-body    { font-size: var(--t-lg); font-weight: 400; line-height: 1.75; }
.t-sm      { font-size: var(--t-sm); line-height: 1.65; }
.t-label   { font-size: var(--t-xs); font-weight: 700; letter-spacing: 1.54px; text-transform: uppercase; }
.t-cta     { font-family: var(--fd); font-size: var(--t-cta);  font-weight: 400; letter-spacing: .01em; line-height: 1; }

.c-gold    { color: var(--gold); }
.c-blue    { color: var(--blue); }
.c-grey    { color: var(--grey-tx); }
.c-white   { color: #fff; }
.c-w55     { color: rgba(255,255,255,.55); }
.c-w65     { color: rgba(255,255,255,.65); }
.c-w72     { color: rgba(255,255,255,.72); }

/* ─────────────────────────────────────────────
   SECTION LABEL (small caps eyebrow)
───────────────────────────────────────────── */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fb);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: clamp(.5rem, 1vw, .75rem);
}
.label::before {
  content: '';
  display: block;
  width: 20px; height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
}
.label--lt  { color: var(--blue-lt); }
.label--lt::before { background: var(--blue-lt); }
.label--gold { color: var(--gold); }
.label--gold::before { background: var(--gold); }

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fb);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1;
  padding: clamp(.75rem, 1.2vw, .9375rem) clamp(1.1rem, 2vw, 1.75rem);
  border-radius: var(--r2);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.btn:active { transform: none; box-shadow: none; }

.btn-primary { background: var(--blue);  color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: #1660c0; }
.btn-gold    { background: var(--gold);  color: var(--navy); font-weight: 700; border-color: var(--gold); }
.btn-ghost   { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--grey-bd); }
.btn-outline:hover { background: var(--grey-bg); }
.btn-sm      { padding: 9px 18px; font-size: var(--t-base); border-radius: var(--r1); }

/* Gold shimmer effect */
.btn-gold::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .5s var(--ease);
}
.btn-gold:hover::after { transform: translateX(100%); }

/* ─────────────────────────────────────────────
   HEADER / NAV
───────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  height: var(--navh);
  background: rgba(10,22,40,.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: box-shadow .3s;
}
#site-header.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,.3); }

.nav-wrap {
  max-width: var(--cw);
  margin-inline: auto;
  padding-inline: var(--px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo a { display: flex; align-items: center; gap: 10px; }
.site-logo img {
  width: var(--logo-w, 200px);
  height: auto;
  max-height: 56px;
  object-fit: contain;
  display: block;
}
.logo-fallback { display: flex; flex-direction: column; }
.logo-fallback strong { font-family: var(--fh); font-size: var(--t-xl); font-weight: 700; color: #fff; line-height: 1; }
.logo-fallback small  { font-size: 9px; color: rgba(255,255,255,.35); letter-spacing: .8px; text-transform: uppercase; margin-top: 2px; }

/* Primary Nav — from WordPress Menu location "header" */
#primary-nav { display: flex; align-items: center; gap: clamp(.875rem, 1.8vw, 1.75rem); }

/* These selectors target the standard WordPress menu output */
#primary-nav li { position: relative; list-style: none; }
#primary-nav li a {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-base);
  font-weight: 500;
  color: rgba(255,255,255,.7);
  padding: 4px 0;
  transition: color .2s;
  position: relative;
}
#primary-nav li a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
#primary-nav li a:hover,
#primary-nav li.current-menu-item a,
#primary-nav li.current-page-ancestor a { color: #fff; }
#primary-nav li a:hover::after,
#primary-nav li.current-menu-item a::after { transform: scaleX(1); }

/* CTA button in nav — add CSS class "menu-cta" in Appearance > Menus */
#primary-nav li.menu-cta a {
  background: var(--blue);
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--r1);
  border: 1px solid var(--blue);
  font-weight: 600;
  transition: background .2s, transform .2s;
}
#primary-nav li.menu-cta a::after { display: none; }
#primary-nav li.menu-cta a:hover { background: #1660c0; transform: translateY(-1px); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 10;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────────────────────
   PAGE OFFSET — no gap under fixed nav
───────────────────────────────────────────── */
/* Hero sections absorb the nav height themselves */
.hero-push  { padding-top: var(--navh); }
/* Non-hero first sections (e.g. generic page.php) */
.page-top   { padding-top: calc(var(--navh) + var(--sv)); }

/* ─────────────────────────────────────────────
   HOME HERO
───────────────────────────────────────────── */
.home-hero {
  position: relative;
  background: linear-gradient(135deg, #060E1C 0%, #0E1E38 100%);
  min-height: clamp(600px, 100vh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--navh);
}
.home-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(19,82,162,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,82,162,.06) 1px, transparent 1px);
  background-size: 64px 64px;
}
.home-hero__glow {
  position: absolute;
  right: -100px; top: 50%;
  width: clamp(400px, 50vw, 700px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(19,82,162,.3) 0%, transparent 65%);
  pointer-events: none;
}
.home-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,184,75,.1);
  border: 1px solid rgba(232,184,75,.28);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 1rem;
}
.hero-badge__dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }
.hero-badge__text { font-size: var(--t-xs); font-weight: 600; color: var(--gold); letter-spacing: 1.1px; text-transform: uppercase; }
.home-hero__h1 {
  font-family: var(--fd);
  font-size: var(--t-hero);
  font-weight: 400;
  color: #fff;
  letter-spacing: .01em;
  line-height: .93;
  margin-bottom: clamp(.875rem, 1.5vw, 1.25rem);
}
.home-hero__sub {
  font-size: var(--t-lg);
  color: rgba(255,255,255,.65);
  line-height: 1.72;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero image panel */
.home-hero__img { position: relative; }
.home-hero__img-wrap {
  border-radius: var(--r5);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
  position: relative;
}
.home-hero__img-wrap img { width: 100%; height: clamp(340px, 45vw, 580px); object-fit: cover; display: block; }
.home-hero__img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,22,40,.7) 0%, transparent 55%);
}
.home-hero__badge {
  position: absolute; bottom: 20px; left: 20px; right: 20px;
  background: rgba(10,22,40,.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.badge-icon { width: 40px; height: 40px; min-width: 40px; background: var(--blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.badge-icon svg { width: 20px; height: 20px; fill: #fff; display: block; }
.badge-title { font-size: var(--t-base); font-weight: 700; color: #fff; margin-bottom: 2px; }
.badge-sub   { font-size: var(--t-sm);  color: rgba(255,255,255,.55); }

/* ─────────────────────────────────────────────
   PAGE HERO (Services / Pricing / Contact)
───────────────────────────────────────────── */
.page-hero {
  position: relative;
  background: var(--navy-mid);
  padding-top: var(--navh);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
  overflow: hidden;
}
.page-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(19,82,162,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,82,162,.06) 1px, transparent 1px);
  background-size: 64px 64px;
}
.page-hero__inner {
  position: relative; z-index: 1;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--px);
  padding-top: clamp(2.5rem, 5vw, 5rem);
}
.page-hero__h1 {
  font-family: var(--fd);
  font-size: var(--t-page);
  font-weight: 400;
  color: #fff;
  letter-spacing: .01em;
  line-height: .92;
  margin-bottom: clamp(.75rem, 1.5vw, 1.25rem);
}
.page-hero__desc { font-size: var(--t-xl); color: rgba(255,255,255,.6); line-height: 1.7; max-width: 560px; margin-inline: auto; }

/* ─────────────────────────────────────────────
   SECTION HEADER
───────────────────────────────────────────── */
.sec-hdr { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.sec-hdr .t-h2 { margin-bottom: clamp(.5rem, 1vw, .75rem); }

/* ─────────────────────────────────────────────
   SERVICE CARDS
───────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.875rem, 1.5vw, 1.25rem);
}
.card {
  background: #fff;
  border: 1px solid var(--grey-bd);
  border-radius: var(--r3);
  padding: clamp(1.25rem, 2vw, 1.875rem);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lt));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(19,82,162,.12); }
.card:hover::before { transform: scaleX(1); }
.card__icon { width: 48px; height: 48px; background: rgba(19,82,162,.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card__icon svg { width: 24px; height: 24px; fill: var(--blue); display: block; }
.card__title { font-family: var(--fh); font-size: var(--t-lg); font-weight: 700; color: var(--navy); margin-top: 4px; }
.card__body  { font-size: var(--t-sm); color: var(--grey-tx); line-height: 1.65; flex: 1; }
.card__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--blue);
  letter-spacing: .6px;
  text-transform: uppercase;
  background: var(--grey-bg);
  border: 1px solid var(--grey-bd);
  border-radius: 100px;
  padding: 4px 12px;
  margin-top: auto;
}

/* Dark promo bar below cards */
.promo-bar {
  background: var(--navy);
  border-radius: var(--r3);
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  margin-top: clamp(.875rem, 1.5vw, 1.25rem);
}
.promo-bar__text { flex: 1; min-width: 260px; }
.promo-bar__h3 { font-family: var(--fh); font-size: var(--t-2xl); font-weight: 700; color: #fff; margin-bottom: 8px; }
.promo-bar__p  { font-size: var(--t-md); color: rgba(255,255,255,.6); line-height: 1.65; margin-bottom: 16px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { background: rgba(19,82,162,.38); border: 1px solid rgba(59,142,240,.28); border-radius: 100px; padding: 5px 14px; font-size: var(--t-xs); font-weight: 500; color: rgba(255,255,255,.82); white-space: nowrap; }

/* ─────────────────────────────────────────────
   PROBLEM / SOLUTION
───────────────────────────────────────────── */
.ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.problem-list { margin-top: 1.5rem; }
.problem-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.problem-item:last-child { border: none; }
.problem-icon { width: 38px; height: 38px; min-width: 38px; background: rgba(232,184,75,.1); border: 1px solid rgba(232,184,75,.2); border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.problem-icon svg { width: 18px; height: 18px; fill: var(--gold); display: block; }
.problem-item h4 { font-size: var(--t-md); font-weight: 600; color: #fff; margin-bottom: 4px; }
.problem-item p  { font-size: var(--t-sm); color: rgba(255,255,255,.5); line-height: 1.6; }

.solution-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(59,142,240,.18);
  border-radius: var(--r4);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.solution-card h3 { font-family: var(--fh); font-size: var(--t-3xl); font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 10px; }
.solution-card .sub { font-size: var(--t-md); color: rgba(255,255,255,.52); line-height: 1.65; margin-bottom: 24px; }
.checklist { display: flex; flex-direction: column; }
.checklist li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: var(--t-md); font-weight: 500; color: rgba(255,255,255,.82); border-bottom: 1px solid rgba(255,255,255,.07); }
.checklist li:last-child { border: none; }
.chk { width: 20px; height: 20px; min-width: 20px; background: var(--blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.chk svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; display: block; }

/* ─────────────────────────────────────────────
   TEAM SPLIT
───────────────────────────────────────────── */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split-img { border-radius: var(--r4); overflow: hidden; height: clamp(300px, 35vw, 460px); }
.split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trust-list { border-top: 1px solid var(--grey-bd); }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--grey-bd); font-size: var(--t-base); color: var(--dark-tx); }
.trust-item svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; display: block; }
.trust-chk { width: 20px; height: 20px; min-width: 20px; background: var(--blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; }

/* ─────────────────────────────────────────────
   SERVICE AREAS
───────────────────────────────────────────── */
.areas-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: clamp(2rem, 4vw, 3rem); }
.area-cell {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: clamp(.875rem, 1.5vw, 1.375rem) 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  transition: transform var(--dur) var(--ease), background var(--dur);
}
.area-cell:hover { transform: translateY(-4px); background: rgba(255,255,255,.08); }
.area-cell.active { background: rgba(19,82,162,.28); border-color: rgba(59,142,240,.28); }
.area-cell svg { width: 22px; height: 22px; fill: rgba(255,255,255,.55); display: block; }
.area-cell.active svg { fill: var(--gold); }
.area-cell span { font-family: var(--fh); font-size: var(--t-sm); font-weight: 600; color: #fff; }

/* ─────────────────────────────────────────────
   CHIPS (service areas alternate layout)
───────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(2rem, 4vw, 3rem); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: clamp(.5rem, 1vw, .75rem) clamp(.875rem, 1.5vw, 1.375rem); border-radius: 100px; font-size: var(--t-base); font-weight: 600; border: 1px solid var(--grey-bd); background: #fff; color: var(--navy); transition: transform .2s, box-shadow .2s; }
.chip svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ─────────────────────────────────────────────
   CTA BANNER
───────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--blue) 0%, #0C3778 100%);
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: var(--px);
  text-align: center;
}
.cta-banner__inner { max-width: 640px; margin-inline: auto; }
.cta-banner__title { font-family: var(--fd); font-size: var(--t-cta); color: #fff; letter-spacing: .01em; line-height: 1; margin-bottom: 12px; }
.cta-banner__desc  { font-size: var(--t-xl); color: rgba(255,255,255,.72); line-height: 1.72; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.cta-btns { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ─────────────────────────────────────────────
   FEATURE CARDS (Services page)
───────────────────────────────────────────── */
.feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--grey-bd);
  border-radius: var(--r5);
  overflow: hidden;
  margin-bottom: 16px;
}
.feature-card.flip { direction: rtl; }
.feature-card.flip > * { direction: ltr; }
.feature-card__img { overflow: hidden; min-height: clamp(280px, 30vw, 500px); }
.feature-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.feature-card:hover .feature-card__img img { transform: scale(1.03); }
.feature-card__body {
  background: #fff;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.75rem, 3vw, 2.875rem);
  display: flex; flex-direction: column; justify-content: center;
}
.feat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.feat-badge svg { width: 12px; height: 12px; display: block; flex-shrink: 0; }
.feat-badge.blue { background: rgba(19,82,162,.08); border: 1px solid rgba(19,82,162,.18); }
.feat-badge.blue svg { fill: var(--blue); }
.feat-badge.blue span { color: var(--blue); font-size: var(--t-xs); font-weight: 700; letter-spacing: .88px; text-transform: uppercase; }
.feat-badge.gold { background: rgba(232,184,75,.1); border: 1px solid rgba(232,184,75,.25); }
.feat-badge.gold svg { fill: #b8860b; }
.feat-badge.gold span { color: #b8860b; font-size: var(--t-xs); font-weight: 700; letter-spacing: .88px; text-transform: uppercase; }
.feature-card__h3 { font-family: var(--fh); font-size: var(--t-h2); font-weight: 700; color: var(--navy-mid); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
.feature-card__p  { font-size: var(--t-lg); color: var(--grey-tx); line-height: 1.75; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.feat-list { display: flex; flex-direction: column; }
.feat-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--grey-bd); font-size: var(--t-base); color: var(--dark-tx); }
.feat-list li:last-child { border: none; }
.feat-chk { width: 18px; height: 18px; min-width: 18px; background: var(--blue); border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.feat-chk svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; display: block; }

/* ─────────────────────────────────────────────
   IMAGE BANNER
───────────────────────────────────────────── */
.img-banner { position: relative; height: clamp(300px, 30vw, 440px); overflow: hidden; }
.img-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-banner__over {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,18,31,.88) 0%, rgba(8,18,31,.4) 50%, rgba(8,18,31,.1) 100%);
  display: flex; align-items: center; justify-content: center;
}
.img-banner__text { max-width: var(--cw); width: 100%; padding-inline: var(--px); text-align: center; }
.img-banner__h2 { font-family: var(--fd); font-size: var(--t-page); color: #fff; line-height: .95; margin-bottom: 14px; letter-spacing: .01em; }
.img-banner__p  { font-size: var(--t-xl); color: rgba(255,255,255,.68); max-width: 480px; margin: 0 auto 28px; line-height: 1.7; }

/* ─────────────────────────────────────────────
   PRICING
───────────────────────────────────────────── */
.intro-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.intro-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--grey-bg); border: 1px solid var(--grey-bd); border-radius: 100px; padding: 9px 18px; font-size: var(--t-base); font-weight: 600; color: var(--dark-tx); }
.intro-badge svg { width: 14px; height: 14px; fill: var(--blue); display: block; }

.ptable { background: #fff; border: 1px solid var(--grey-bd); border-radius: var(--r4); overflow: hidden; margin-bottom: 20px; }
.ptable__head { display: flex; align-items: center; gap: 14px; padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem); background: var(--navy); flex-wrap: wrap; }
.ptable__head.blue { background: var(--blue); }
.ptable__head-icon { width: 42px; height: 42px; min-width: 42px; background: rgba(255,255,255,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ptable__head-icon svg { width: 20px; height: 20px; fill: #fff; display: block; }
.ptable__head-title { font-family: var(--fh); font-size: var(--t-xl); font-weight: 700; color: #fff; }
.ptable__head-sub   { font-size: var(--t-sm); color: rgba(255,255,255,.5); }
.ptable__head-tag { margin-left: auto; font-size: var(--t-xs); font-weight: 700; letter-spacing: .7px; text-transform: uppercase; padding: 5px 13px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; }
.ptable__head-tag.gold  { background: rgba(232,184,75,.18); border: 1px solid rgba(232,184,75,.3); color: var(--gold); }
.ptable__head-tag.white { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.ptable__body { padding: 0 clamp(1.25rem, 2.5vw, 2rem); }
.prow { display: flex; align-items: center; justify-content: space-between; padding: clamp(.875rem, 1.5vw, 1.125rem) 0; border-bottom: 1px solid var(--grey-bd); gap: 16px; flex-wrap: wrap; }
.prow:last-child { border: none; }
.prow__left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.prow__icon { width: 32px; height: 32px; min-width: 32px; background: rgba(19,82,162,.07); border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.prow__icon svg { width: 15px; height: 15px; fill: var(--blue); display: block; }
.prow__label { font-size: var(--t-md); font-weight: 500; color: var(--dark-tx); }
.prow__note  { font-size: var(--t-sm); color: var(--grey-tx); margin-top: 2px; }
.prow__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.prow__price { font-family: var(--fh); font-size: var(--t-3xl); font-weight: 700; color: var(--navy); white-space: nowrap; }

.stat-card { display: grid; grid-template-columns: 1fr clamp(220px, 28vw, 380px); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r4); overflow: hidden; background: linear-gradient(135deg, #0A1628 0%, #0D2B55 100%); margin-bottom: 20px; min-height: clamp(380px, 40vw, 520px); }
.stat-card__body { padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; gap: 12px; }
.stat-badge { display: inline-flex; align-items: center; gap: 7px; width: fit-content; background: rgba(232,184,75,.12); border: 1px solid rgba(232,184,75,.25); border-radius: 100px; padding: 6px 14px; }
.stat-badge__dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }
.stat-badge__text { font-size: var(--t-xs); font-weight: 700; color: var(--gold); letter-spacing: 1.1px; text-transform: uppercase; }
.stat-card__h3  { font-family: var(--fh); font-size: var(--t-3xl); font-weight: 700; color: #fff; line-height: 1.2; }
.stat-card__desc { font-size: var(--t-md); color: rgba(255,255,255,.58); line-height: 1.7; }
.stat-rows { background: rgba(255,255,255,.06); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
.stat-row { background: rgba(10,22,40,.5); display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; gap: 12px; }
.stat-row__label { font-size: var(--t-base); color: rgba(255,255,255,.65); }
.stat-row__price { font-family: var(--fh); font-size: var(--t-xl); font-weight: 700; color: #fff; white-space: nowrap; }
.stat-card__img { position: relative; overflow: hidden; }
.stat-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stat-card__img::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg,rgba(10,22,40,.5) 0%,transparent 60%); }

.routes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--grey-bd); border-radius: var(--r3); overflow: hidden; margin-bottom: 20px; }
.route-col { background: #fff; padding: clamp(1.25rem, 2vw, 1.875rem); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.route-col.dark { background: var(--navy); }
.route-col__label { font-size: var(--t-sm); font-weight: 600; color: var(--grey-tx); letter-spacing: .7px; text-transform: uppercase; }
.route-col.dark .route-col__label { color: rgba(255,255,255,.55); }
.route-col__price { font-family: var(--fd); font-size: clamp(2.5rem,4.5vw,3.5rem); color: var(--navy); margin-top: 4px; }
.route-col.dark .route-col__price { color: var(--gold); }
.route-col__per { font-size: var(--t-sm); color: var(--grey-tx); margin-bottom: 6px; }
.route-col.dark .route-col__per { color: rgba(255,255,255,.45); }
.route-stops { display: inline-flex; align-items: center; gap: 5px; background: rgba(19,82,162,.08); border-radius: 100px; padding: 4px 12px; font-size: var(--t-sm); font-weight: 600; color: var(--blue); }
.route-col.dark .route-stops { background: rgba(255,255,255,.12); color: #fff; }
.route-stops svg { width: 12px; height: 12px; fill: currentColor; display: block; }
.per-stop { background: var(--navy); border-radius: var(--r3); padding: clamp(1.25rem,2.5vw,2rem) clamp(1.5rem,3vw,2.25rem); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.per-stop h4 { font-family: var(--fh); font-size: var(--t-xl); color: #fff; margin-bottom: 4px; }
.per-stop p  { font-size: var(--t-sm); color: rgba(255,255,255,.5); }
.per-stop__price { text-align: right; flex-shrink: 0; }
.per-stop__num  { font-family: var(--fd); font-size: clamp(2.5rem,4.5vw,3.5rem); color: var(--gold); line-height: 1; }
.per-stop__unit { font-size: var(--t-sm); color: rgba(255,255,255,.4); margin-top: 2px; }

.addons-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.addon { background: #fff; border: 1px solid var(--grey-bd); border-radius: var(--r3); padding: clamp(1rem,1.8vw,1.5rem) clamp(1rem,2vw,1.625rem); display: flex; align-items: center; gap: 16px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.addon:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(19,82,162,.1); }
.addon__icon { width: 44px; height: 44px; min-width: 44px; background: rgba(19,82,162,.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.addon__icon svg { width: 20px; height: 20px; fill: var(--blue); display: block; }
.addon__info { flex: 1; min-width: 0; }
.addon__info h4 { font-family: var(--fh); font-size: var(--t-md); font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.addon__info p  { font-size: var(--t-sm); color: var(--grey-tx); line-height: 1.5; }
.addon__price-wrap { text-align: right; flex-shrink: 0; }
.addon__price { font-family: var(--fh); font-size: var(--t-4xl); font-weight: 700; color: var(--blue); }
.addon__unit  { font-size: var(--t-sm); color: var(--grey-tx); }

.notes-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.note { background: var(--grey-bg); border: 1px solid var(--grey-bd); border-radius: var(--r3); padding: clamp(1.125rem,2vw,1.625rem); }
.note h4 { font-family: var(--fh); font-size: var(--t-base); font-weight: 700; color: var(--navy); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.note h4 svg { width: 16px; height: 16px; fill: var(--blue); display: block; flex-shrink: 0; }
.note p { font-size: var(--t-sm); color: var(--grey-tx); line-height: 1.65; }

/* ─────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.65fr; gap: clamp(2rem, 5vw, 4rem); align-items: flex-start; }
.contact-info-card { background: #fff; border: 1px solid var(--grey-bd); border-radius: var(--r3); padding: clamp(.875rem,1.5vw,1.25rem) clamp(1rem,2vw,1.5rem); display: flex; align-items: center; gap: 16px; margin-bottom: 14px; transition: box-shadow .2s; }
.contact-info-card:hover { box-shadow: 0 4px 16px rgba(19,82,162,.08); }
.contact-icon { width: 44px; height: 44px; min-width: 44px; background: rgba(19,82,162,.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.contact-icon svg { width: 20px; height: 20px; fill: var(--blue); display: block; }
.ci-label { font-size: var(--t-xs); font-weight: 700; color: var(--grey-tx); letter-spacing: .88px; text-transform: uppercase; margin-bottom: 2px; }
.ci-value { font-size: var(--t-xl); font-weight: 700; color: var(--navy); }
.ci-value a { transition: color .2s; }
.ci-value a:hover { color: var(--blue); }
.contact-form-box { background: #fff; border: 1px solid var(--grey-bd); border-radius: var(--r4); padding: clamp(1.5rem,3vw,2.5rem); }
.contact-form-box h2 { font-family: var(--fh); font-size: var(--t-3xl); font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.contact-form-box .sub { font-size: var(--t-md); color: var(--grey-tx); margin-bottom: 24px; line-height: 1.6; }
.coverage-box { background: var(--navy); border-radius: var(--r3); padding: clamp(1.125rem,2vw,1.5rem); margin-top: 8px; }
.coverage-box h3 { font-family: var(--fh); font-size: var(--t-xl); color: #fff; margin-bottom: 8px; }
.coverage-box p  { font-size: var(--t-sm); color: rgba(255,255,255,.55); line-height: 1.65; }
.trust-bar { display: flex; align-items: center; justify-content: center; gap: clamp(1rem,2.5vw,2.5rem); flex-wrap: wrap; }
.trust-bar-item { display: flex; align-items: center; gap: 8px; font-size: var(--t-base); font-weight: 600; color: var(--navy); }

/* ─────────────────────────────────────────────
   SCROLL REVEAL ANIMATIONS
───────────────────────────────────────────── */
.reveal { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.up    { transform: translateY(30px); }
.reveal.left  { transform: translateX(-30px); }
.reveal.right { transform: translateX(30px); }
.reveal.scale { transform: scale(.95); }
.reveal.in    { opacity: 1; transform: none !important; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; }
.d6 { transition-delay: .48s; }

/* Hero load animations */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.h-anim   { animation: fadeUp .8s var(--ease) both; }
.h-anim-1 { animation-delay: .1s; }
.h-anim-2 { animation-delay: .25s; }
.h-anim-3 { animation-delay: .42s; }
.h-anim-4 { animation-delay: .58s; }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
#site-footer { background: var(--navy-dark); padding: clamp(2.5rem,5vw,3.75rem) 0 clamp(1rem,2vw,1.75rem); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(1.5rem,3vw,3rem); padding-bottom: clamp(1.5rem,3vw,2.5rem); }
.footer-logo-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo-wrap img { width: var(--logo-w, 200px); height: auto; max-height: 48px; object-fit: contain; }
.footer-brand strong { font-family: var(--fh); font-size: var(--t-xl); font-weight: 700; color: #fff; display: block; line-height: 1; }
.footer-brand small  { font-size: 9px; color: rgba(255,255,255,.28); letter-spacing: .8px; text-transform: uppercase; display: block; margin-top: 2px; }
.footer-desc { font-size: var(--t-sm); color: rgba(255,255,255,.45); line-height: 1.72; max-width: 320px; margin-bottom: 18px; }
.footer-contact a,
.footer-contact span { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: rgba(255,255,255,.58); margin-bottom: 8px; transition: color .2s; }
.footer-contact a:hover { color: #fff; }
.footer-contact svg { width: 14px; height: 14px; fill: currentColor; opacity: .7; flex-shrink: 0; display: block; }
.footer-col-title { font-family: var(--fh); font-size: var(--t-xs); font-weight: 700; color: rgba(255,255,255,.28); letter-spacing: 1.32px; text-transform: uppercase; margin-bottom: 16px; }
.footer-nav { display: flex; flex-direction: column; gap: 9px; }
.footer-nav a { font-size: var(--t-sm); color: rgba(255,255,255,.55); transition: color .2s; }
.footer-nav a:hover { color: #fff; }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: clamp(.875rem,1.5vw,1.25rem); flex-wrap: wrap; gap: 8px; }
.footer-copy    { font-size: var(--t-sm); color: rgba(255,255,255,.28); }
.footer-tagline { font-size: var(--t-sm); color: rgba(255,255,255,.28); font-style: italic; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* Nav collapses */
  .nav-toggle { display: flex; }
  #primary-nav {
    display: none;
    position: absolute;
    top: var(--navh); left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(10,22,40,.99);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 12px var(--px) 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
  }
  #primary-nav.open { display: flex; }
  #primary-nav li { width: 100%; }
  #primary-nav li a { display: block; padding: 13px 0; font-size: var(--t-xl); border-bottom: 1px solid rgba(255,255,255,.07); }
  #primary-nav li:last-child a { border: none; }
  #primary-nav li a::after { display: none; }
  #primary-nav li.menu-cta { margin-top: 10px; }
  #primary-nav li.menu-cta a { border-bottom: none; text-align: center; justify-content: center; border-radius: var(--r1); }

  .home-hero__inner { grid-template-columns: 1fr; }
  .ps-grid   { grid-template-columns: 1fr; gap: 2.5rem; }
  .split-grid { grid-template-columns: 1fr; }
  .split-img { height: clamp(260px, 40vw, 360px); }
  .feature-card { grid-template-columns: 1fr; }
  .feature-card.flip { direction: ltr; }
  .feature-card__img { min-height: clamp(220px, 35vw, 340px); }
  .stat-card { grid-template-columns: 1fr; }
  .stat-card__img { height: clamp(220px, 35vw, 320px); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .areas-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .cards-grid   { grid-template-columns: repeat(2, 1fr); }
  .addons-grid  { grid-template-columns: 1fr; }
  .notes-grid   { grid-template-columns: 1fr; }
  .routes-grid  { grid-template-columns: 1fr; }
  .areas-grid   { grid-template-columns: repeat(3, 1fr); }
  .footer-grid  { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-btns    { flex-direction: column; }
  .hero-btns .btn { justify-content: center; }
  .cta-btns     { flex-direction: column; align-items: center; }
  .cta-btns .btn { width: 100%; max-width: 320px; justify-content: center; }
  .per-stop     { flex-direction: column; text-align: center; }
  .per-stop__price { text-align: center; }
}

@media (max-width: 520px) {
  .cards-grid   { grid-template-columns: 1fr; }
  .areas-grid   { grid-template-columns: repeat(2, 1fr); }
  .home-hero__badge { flex-direction: column; text-align: center; gap: 10px; }
  .trust-bar    { flex-direction: column; align-items: flex-start; }
  .addon        { flex-direction: column; align-items: flex-start; }
  .addon__price-wrap { text-align: left; }
  .prow         { flex-direction: column; align-items: flex-start; }
  .prow__right  { width: 100%; justify-content: space-between; }
}

@media print {
  #site-header, #site-footer, .nav-toggle { display: none !important; }
  .home-hero, .page-hero { padding-top: 0; }
}