/* =========
   Base
========= */
:root{
  --ink:#0b1220;
  --ink-2:#334155;
  --brand:#0ea5e9;
  --brand-2:#0369a1;
  --card:#ffffff;
  --bg-dark:#02070e;
  --bg-navy:#071427;
  --muted:#64748b;
  --nav-h: 120px;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  width:100%; min-height:100%;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:#f8fafc;
}
img{max-width:100%; display:block}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px,92%); margin-inline:auto}

/* NAVBAR */
/* NAVBAR (unchanged bits kept as-is) */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(2, 7, 14, 0.94);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 1.25rem 0;
}

/* Use a 3-column grid so the center stays truly centered
   regardless of the hamburger on the right */
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left spacer | center | right button */
  align-items: center;
  gap: 1rem;
}

/* The centered group (logo + links) */
.nav-center {
  grid-column: 2;                  /* middle column */
  display: flex;
  align-items: center;
  gap: 1.2rem;                     /* space between logo and links */
  justify-content: center;         /* keeps contents centered within the middle column */
}

.brand {
  font-weight: 700;
  color: var(--card);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.25rem;
}

.logo { max-height: 50px; }

.nav-links { display: flex; gap: .9rem; }
.nav-links a {
  color: var(--card);
  font-weight: 600;
  text-decoration: none;
  padding: .6rem 1.2rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  transition: background .25s, transform .2s;
}
.nav-links a:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }

/* Hamburger (sits in the right column) */
.nav-toggle{
  grid-column: 3;                  /* right side */
  justify-self: end;               /* push to far right */
  display: none;                   /* hidden on desktop */
  background: none;
  border: 0;
  padding: .25rem;
  cursor: pointer;
}
.nav-toggle .bar{
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

/* --- Responsive (optional but handy) --- */
@media (max-width: 900px) {
  .nav-links { display: none; }         /* collapse links */
  .nav-toggle { display: inline-block; }/* show hamburger */
}

/* If you want a dropdown when toggled, you can add:
   .nav-links[data-open="true"] { display: flex; flex-direction: column; }
   and toggle that attribute via JS.
*/

/* Mobile layout */
@media (max-width: 900px){
  .nav-inner { position: relative; }

  /* show the hamburger on small screens */
  .nav-toggle{ display:block; }

  /* fixed header avoids URL-bar sticky jitter */
  .navbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    /* small boost to compositing stability */
    will-change: transform;
    transform: translateZ(0);
  }

  /* make room for the fixed bar */
  body{
    padding-top: var(--nav-h);
  }

  /* the dropdown */
  .nav-links{
    display:none;
    position:absolute;
    right:0;
    top:100%;
    background: var(--bg-dark);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:.5rem;
    width:min(260px, 92vw);
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    z-index: 1001;
    flex-direction:column;
    gap:.25rem;
  }
  .nav-links.open{ display:flex; margin-top: 1rem; }

  .nav-links a{
    background: rgba(255,255,255,.06);
    padding:.75rem 1rem;
    border-radius:10px;
  }
  .nav-links a:hover{
    background: rgba(255,255,255,.18);
    transform:none;
  }

/* Optional: animate the hamburger into an "X" when open */
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){
  opacity:0;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}
}
/* end navbar configuration */

/* =========
   Sections
========= */
.section{
    padding:64px 0;
    scroll-margin-top: var(--nav-h);
}

.section.light{ background:#f8fafc; color:var(--ink) }

/* =========
   HERO w/ Video BG (all white text)
========= */
.hero-section{
  position:relative; isolation:isolate; /* ensure overlay stack works */
  color:#fff;
  background:
    radial-gradient(1200px 600px at 18% -10%, #0b3a66 0%, transparent 60%),
    radial-gradient(1200px 600px at 82% 10%, #07233f 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-navy), var(--bg-dark));
  overflow:hidden;
  text-align: center;
  align-items: center;
  margin-top: calc(-1 * var(--nav-h));         /* pulls background under the sticky nav */
  padding: calc(96px + var(--nav-h)) 0 72px;   /* preserves the original visual spacing for text */
}

.video-background{
  position:absolute; inset:0; z-index:-2; overflow:hidden;
}
.video-background video{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  min-width:100%; min-height:100%;
  width:auto; height:auto; object-fit:cover;
  filter:saturate(105%) contrast(102%);
}
.video-background .overlay{
  position:absolute; inset:0; z-index:1;
  /* darken for legibility; tweak to taste */
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.55));
}

.hero-content{
  position:relative; z-index:2; /* above overlay */
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.15fr .85fr;
}

.hero-title{
  margin:0 0 10px;
  font-size:clamp(28px,4.2vw,44px);
  line-height:1.12;
  color:#fff; /* enforce white */
}

.hero-subtitle{
  margin:0 0 18px; color:#e6f2ff; font-weight:500;
}

.siteheading {
  font-size: clamp(22px, 3.5vw, 28px);
  line-height: 1.2;
  font-weight: 700;
  font-family: 'Libre Caslon Text', serif;
}

.pill{
  display:inline-block;
  padding:.25rem .55rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  color:#b6b6b6; font-size:.8rem;
  margin-top: 6px;
  text-indent: 4px;
}

.pilla{
  display:inline-block;
  padding:.25rem .55rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  font-size:.8rem;
  margin-top: 6px;
  text-indent: 4px;
  margin-bottom: 24px;
  background: #e2e2e2;
}

.pilla:hover {
    transform: translateY(-1px);
    transition: background .15s, transform .2s;
}

/* Right-side visual / logo area */
.logo-space{
  display:flex; align-items:center; justify-content:center;
  min-height:260px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 12px 36px rgba(0,0,0,.35);
}
.logo{ max-height:64px; width:auto; object-fit:contain; }

@media (max-width: 900px){
  .hero-content{ grid-template-columns:1fr }
  .logo-space{ min-height:200px; margin-top:6px }
}

/* =========
   Buttons
========= */
.btn{
  appearance:none; border:0; border-radius:14px;
  padding:12px 16px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none;
}
.btn.primary{ background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff }
.btn.ghost{
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.cta{ display: flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
}

/* =========
   Cards, Grids, Utilities
========= */
.card{
  background:var(--card); border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.12);
  overflow:hidden;
}
.grid{ display:grid; gap:18px }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.grid.cols-2{ grid-template-columns:repeat(2,1fr) }

@media (max-width: 900px){
  .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr }
}

.service{ padding:18px }
.service h3{ margin:4px 0 6px }
.service p{ margin:0; color:#334155 }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
@media (max-width:900px){ .split{ grid-template-columns:1fr } }

.muted{ color:var(--muted); margin-top:12px; font-size:.9rem; line-height:1.4; padding-top:32px }

.mooted{ color:var(--muted); margin-top:4px; font-size:.9rem; line-height:1.4; }


/* =========
   Table (if you add pricing section back later)
========= */
.table{
  width:100%; border-collapse:collapse; border-radius:12px;
  background:#fff; overflow:hidden;
}
.table th, .table td{
  padding:12px 14px; border-bottom:1px solid #eef2f7; text-align:left;
}
.table thead th{ background:#00264d; color:#fff }
.table tr:hover{ background:#f1f9ff }
.table td:first-child{ font-weight:600; color:#003366 }
.table .note td{ background:#004080; color:#fff; font-style:italic; font-size:0.75rem; }

/* =========
   Footer
========= */
footer{ background:#0b1220; color:#a3aabd; padding:28px 0 24px }

/* =========
   Scroll-reveal (used by script.js)
========= */
.reveal{ opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease }
.reveal.in{ opacity:1; transform:none }
.reveal.tilt{ transform:perspective(800px) rotateX(6deg) translateY(16px) }

/* ===== Video Section (full-bleed video w/ overlay + centered white text) ===== */
.video-hero{
  position: relative;
  isolation: isolate;       /* keeps z-index layering tidy */
  padding: 0;               /* remove section padding so video can be edge-to-edge */
  color: #fff;
  background: #000;         /* fallback while video loads */
}

.video-hero .video-wrap{
  position: relative;
  min-height: min(80vh, 900px);
  height: 80vh;             /* tall, immersive section */
  overflow: hidden;
}

.video-hero .video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* still fills box */
  z-index: -2;
  transform: scale(1.15); /* zoom in ~15% */
}

.video-hero .video-overlay{
  position: absolute;
  inset: 0;
  z-index: -1;
  /* match the hero’s darkening so text stays readable */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.55),
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.55)
  );
}

.video-hero .video-text{
  position: relative;       /* stacks above overlay/video */
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: inherit;
  padding: clamp(24px, 4vw, 48px);
}

.video-hero .video-text h2{
  margin: 0 0 .4rem;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.15;
  color: #fff;
}

.video-hero .video-text p{
  margin: 0 0 1rem;
  color: #e6f2ff;
  font-weight: 500;
}

/* keep the CTA buttons readable here too */
.video-hero .btn.ghost{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
}

/* Responsive tweak: slightly shorter on very small screens */
@media (max-width: 720px){
  .video-hero .video-wrap{ height: 64vh; min-height: 420px; }
}

/* Give the container perspective so children can tilt in 3D */
#services .grid { perspective: 900px; }

/* Service cards: highlight + 3D prep */
.card.service{
  position: relative;
  border: 1px solid #e5eaf1;
  background: #fff;
  transform-style: preserve-3d;                 /* allows children to pop forward */
  transition: transform .2s ease,               /* subtle settle after tilt */
              box-shadow .2s ease,
              border-color .2s ease,
              background .2s ease;
}

/* Soft hover “glow” that tracks the mouse (uses --mx/--my set by JS) */
.card.service::after{
  content: "";
  position: absolute; inset: -1px;
  border-radius: 16px; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
  background: radial-gradient(
    600px 200px at var(--mx,50%) var(--my,50%),
    rgba(14,165,233,.18), transparent 40%
  );
}

.servicetext {
    font-family: 'Libre Caslon Text', serif;
    font-size: 1.7rem;
}

.card.service:hover,
.card.service:focus-within{
  box-shadow: 0 16px 40px rgba(2,7,14,.12);
  border-color: #cde8fb;
  background: linear-gradient(180deg, #fff, #f8fbff);
}
.card.service:hover::after,
.card.service:focus-within::after{ opacity: 1; }

/* Lift text slightly toward the viewer for parallax */
.card.service h3,
.card.service p{ transform: translateZ(30px); }

/* Motion accessibility: disable tilt if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  #services .grid { perspective: none; }
  .card.service{ transform: none !important; transition: box-shadow .2s, border-color .2s, background .2s; }
  .card.service h3, .card.service p{ transform: none; }
}
  /* floating button */
  .to-top{
    position:fixed; right:1rem; bottom:1rem; z-index:9999;
    width:44px; height:44px; display:grid; place-items:center;
    border-radius:999px; text-decoration:none; color:#fff;
    background: hsla(240,10%,10%,.65);
    border: 1px solid hsla(0,0%,100%,.35);
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    opacity:.85; transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .to-top:hover{ opacity:1; transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.45); }
  .to-top:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px rgba(80,140,255,.55), 0 10px 28px rgba(0,0,0,.45);
  }
  .to-top svg{ width:22px; height:22px; }

  .card.service.keyboard-focus::after {
  opacity: 1;  /* glow on focus */
}

  /* light mode tweak */
  @media (prefers-color-scheme: light){
    .to-top{ background: hsla(0,0%,100%,.85); color:#111; border-color: hsla(0,0%,0%,.15); }
  }

  /* respect reduced motion & hide on print */
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .to-top{ transition:none; } }
  @media print{ .to-top{ display:none; } }

.pricingtext {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    font-family: 'Libre Caslon Text', serif;
}

  /* Availability card styling */
.card.availability {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;           /* centers text and list horizontally */
  text-align: center;
  padding: 24px 20px;
  border: 1px solid #e5eaf1;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card.availability:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.card.availability h3 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
}

.card.availability .list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 10px;
}

.card.availability .list li {
  background: #f1f9ff;
  border: 1px solid #cde8fb;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.card.availability .list .pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 999px;
  background: rgba(14,165,233,.1);
  color: var(--brand-2);
}

.card.availability hr {
  width: 60%;
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 16px auto;
}

.card.availability p {
  margin: 6px 0;
  color: var(--muted);
  line-height: 1.4;
}

.card.availability .badge.warn {
  background: #fff4f4;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 0.75rem;
  display: inline-block;
  margin-top: 12px;
  opacity: 0.75;
}
/* Table card subtle hover */
.card.table-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.table-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* ===== About & Skills Revamp ===== */
.about-title{
  text-align:center;
  font-family:'Libre Caslon Text', serif;
  font-size:clamp(24px, 3.2vw, 32px);
  margin:0 0 6px;
  margin-bottom: 16px;
}

.about-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:24px;
}
@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; }
}

.about-card, .creds-card{
  padding:20px;
  border:1px solid #e5eaf1;
  background:linear-gradient(180deg,#fff,#f8fbff);
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.about-card:hover, .creds-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.about-hero{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:14px;
  align-items:center;
  margin-bottom:10px;
}

.about-portrait{
  width:92px; height:92px;
  border-radius:14px;
  object-fit:cover; object-position:center;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  border:1px solid #e5eaf1;
  background:#fff;
}
.fallback-initials{
  display:grid; place-items:center;
  width:92px; height:92px;
  border-radius:14px;
  background:linear-gradient(135deg,#0b3a66,#07233f);
  color:#fff; font-weight:700;
  letter-spacing:.5px;
}

.about-identity h3{
  margin:0 0 4px; font-size:1.1rem;
}
.about-sub{
  margin:0 0 8px;
}
.about-badges{
  list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px;
}
.about-badges .pill{
  border:1px solid #cde8fb;
  background:#f1f9ff;
  color:#003366;
}

.about-facts{
  list-style:none; padding:0; margin:10px 0 14px; display:grid; gap:8px;
}
.about-facts li{
  background:#fff; border:1px solid #e5eaf1; border-radius:12px; padding:10px 12px;
}

.about-cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

.creds-title, .skills-title{
  margin:2px 0 10px;
  font-size:1.4rem; font-weight:700;
  margin-bottom: 16px;
  text-align: center;
}

.timeline{
  list-style:none; padding:0; margin:0 0 10px;
  display:grid; gap:12px;
}
.timeline li{
  display:grid; grid-template-columns: 110px 1fr; gap:10px;
  align-items:start;
  padding:10px 12px; border:1px solid #e5eaf1; border-radius:12px; background:#fff;
}
.timeline .t-year{
  font-weight:700; color:#003366; white-space:wrap;
}
.timeline .t-body p{ margin:.25rem 0 0; }

.soft{ border:0; border-top:1px solid #e2e8f0; margin:12px 0 10px; }

.skills-grid{
  display:flex; flex-wrap:wrap; gap:8px;
}
.skill.chip{
  border:1px solid #cde8fb; background:#f1f9ff; color:#003366;
  padding:6px 10px; border-radius:999px; font-weight:600; font-size:.9rem;
}
.skill.chip.warn{
  background:#fff4f4; border-color:#fca5a5; color:#b91c1c;
}

/* Optional “trust strip” KPIs under about */
.trust-row{
  display:grid; grid-template-columns: repeat(3,1fr); gap:12px;
  margin-top:16px;
}
.trust-item{
  background:#fff; border:1px solid #e5eaf1; border-radius:12px;
  padding:12px; text-align:center;
}
.trust-kpi{
  display:block; font-weight:800; font-size:1.2rem; color:#0b3a66;
}
@media (max-width: 720px){
  .timeline li{ grid-template-columns: 1fr; }
  .trust-row{ grid-template-columns: 1fr; }
  .pilla { margin-bottom: 2px; }
}

.trust-item:hover {
  background: #f8f8f8;
  border-color: #e2e2e2;
  transform: translateY(-2px);
  transition: background .25s, transform .3s;
}

/* new styles for contact sheet /
/* ===== Contact Revamp ===== */
.contact-title{
  text-align:center;
  font-family:'Libre Caslon Text', serif;
  font-size:clamp(24px, 3.2vw, 32px);
  margin:0 0 8px;
}
.contact-tagline{
  text-align:center;
  color:var(--muted);
  margin:0 auto 28px;
  max-width:65ch;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}

.contact-solo{
  display:flex;
  justify-content:center;
}
.contact-solo .contact-card{
  width: min(520px, 100%);
  padding: 32px;
}

.contact-card, .contact-form-card{
  padding:24px;
  border:1px solid #e5eaf1;
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#f8fbff);
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.contact-card h3, .contact-form-card h3{
  margin:0 0 14px;
  font-size:1.4rem;
  font-weight:700;
}

.contact-card:hover, .contact-form-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.contact-badges{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.contact-badges .pill{
  background:#f1f9ff;
  border:1px solid #cde8fb;
  border-radius:999px;
  padding:6px 12px;
  font-size:.85rem;
  font-weight:600;
  color:#003366;
}

.contact-form-card form{
  display:grid;
  gap:14px;
}
.contact-form-card label{
  display:grid;
  gap:6px;
  font-weight:600;
  font-size:.9rem;
  color:var(--ink-2);
}
.input{
  border:1px solid #cbd5e1;
  border-radius:10px;
  padding:10px 12px;
  font-size:.95rem;
  font-family:inherit;
  transition:border .2s, box-shadow .2s;
}
.input:focus{
  border-color:var(--brand);
  outline:none;
  box-shadow:0 0 0 3px rgba(14,165,233,.25);
}

.contact-form-card button{
  margin-top:6px;
  justify-self:start;
}
/* end contact sheet styles */

/*begin faq styles */
.faqtitle {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 10px;
    margin-bottom: 24px;
    text-align: center;
    font-family: 'Libre Caslon Text', serif;
}

.faqq:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
/* end faq styles */
/*footer styles*/

/* ===== Footer Revamp ===== */
.site-footer{
  background: linear-gradient(180deg, var(--bg-navy), var(--bg-dark));
  color:#e5eef8;
  padding-top:32px;
  font-size:.95rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:24px;
  align-items:center;
}
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr; text-align:center; }
  .footer-brand{ justify-content:center; }
  .footer-nav, .footer-badges, .footer-social{ justify-content:center; }
}

.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-logo{
  width:64px; height:64px;
  border-radius:12px;
  background:linear-gradient(135deg,#0ea5e9,#0369a1);
  color:#fff; font-weight:700; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  margin: 0 12px;
  padding: 2px;
}

.footer-nav{
  display:flex; gap:16px;
}
.footer-nav a{
  color:#cfe8ff;
  text-decoration:none;
  position:relative;
  padding-bottom:2px;
}
.footer-nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:2px; background:var(--brand);
  transition:width .25s;
}
.footer-nav a:hover::after{ width:100%; }

.footer-badges{
  display:flex; gap:10px; flex-wrap:wrap;
  list-style:none; padding:0; margin:0;
}
.footer-badges .pill{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:5px 10px;
  font-size:.8rem;
  font-weight:600;
  color:#cfe8ff;
  transition:background .2s;
}
.footer-badges .pill:hover{
  background:rgba(255,255,255,.18);
}

.footer-disclaimer{
  margin-top: 32px;
  padding:16px 0;
  text-align:center;
  font-size:.85rem;
  background:rgba(0,0,0,.25);
  color:#a0b9d6;
}

/* ===== Responsive table: stack rows into labeled cards on mobile ===== */
@media (max-width: 720px){
  /* Hide the header row, we’ll inject labels per cell */
  .table thead { 
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px; width: 1px;
    margin: -1px; overflow: hidden; padding: 0; position: absolute;
  }

  .table {
    border-collapse: separate;      /* keep rounded corners/shadow intact */
    border-spacing: 0;
    background: transparent;
  }

  .table tbody { display: grid; gap: 12px; }

  .table tr {
    display: grid;
    grid-template-columns: 1fr;     /* one column card */
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    overflow: hidden;
  }

  /* keep the note row as a single full-width banner card */
  .table tr.note {
    background: #004080;
    color: #fff;
    border-color: #004080;
  }
  .table tr.note td {
    border: 0;
    padding: 12px 14px;
    font-style: italic;
    font-size: 0.85rem;
  }

  .table tr.note td {
  display: flex;
  align-items: center;   /* vertical centering */
  gap: 8px;              /* space between icon and text */
}

  .table td {
    display: grid;
    grid-template-columns: 140px 1fr; /* label | value */
    gap: 10px;
    align-items: start;
    border: 0;                        /* remove row dividers */
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7; /* light divider within the card */
  }

  .table td:last-child { border-bottom: 0; }

  /* Inject readable labels for each cell via :before */
  .table td:nth-child(1)::before { content: "Region"; font-weight: 700; color:#003366; }
  .table td:nth-child(2)::before { content: "Towns/Cities Covered"; font-weight: 700; color:#003366; }
  .table td:nth-child(3)::before { content: "Travel Fee"; font-weight: 700; color:#003366; }

  /* Make “Towns/Cities” breathe on small screens */
  .table td:nth-child(2) { line-height: 1.35; }

  /* Slight hover polish on touch too (optional) */
  .table tr:hover { background: #fff; }
}

/* default: inline with spacing */
.lead.features span {
  margin-right: 1.5rem; /* gap between items */
  white-space: nowrap;  /* keep each phrase intact */
}

/* stack vertically on mobile */
@media (max-width: 720px){
  .lead.features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;        /* space between rows */
  }
  .lead.features span {
    margin-right: 0;    /* reset the desktop spacing */
  }
}
/* ===== Preloader Overlay ===== */
#preloader{
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  background:
    radial-gradient(1100px 600px at 20% -10%, rgba(14,165,233,0.10), transparent 60%),
    radial-gradient(1200px 600px at 80% 10%, rgba(3,105,161,0.14), transparent 60%),
    linear-gradient(180deg, var(--bg-navy), var(--bg-dark));
  color: #eaf4ff;
  transition: opacity .45s ease, visibility .45s ease;
}
.preloader-inner{
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  width: min(520px, 90vw);
  padding: 20px;
}

/* Rotating "seal" ring */
.seal{
  position: relative;
  width: 112px; height: 112px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 2px rgba(14,165,233,.35);
  display: grid; place-items: center;
  animation: spin 9s linear infinite;
  will-change: transform;
}
.seal::before, .seal::after{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border: 1px dashed rgba(255,255,255,.35);
}
.seal::after{ inset:18px; border-style: dotted; opacity:.6 }
.seal-text{
  position:absolute; inset:auto;
  font-weight:700; font-size:.65rem; letter-spacing: .12em;
  text-transform:uppercase; opacity:.85;
}

/* Logo pulse */
.pre-logo{
  width: 160px; height:auto; object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
  animation: logoPulse 1.8s ease-in-out infinite;
}

/* Progress area */
.precopy{ display:grid; gap:12px; width:100%; }

.loading-line{
  margin: 0; min-height: 20px;
  font-weight: 600; letter-spacing: .02em;
  color: #d8ecff;
}
.dot{ display:inline-block; width:8px; height:8px; border-radius:999px; margin:0 2px; background:#d8ecff; opacity:.35; }
.dot1{ animation: dotBlink 1.2s infinite; }
.dot2{ animation: dotBlink 1.2s .2s infinite; }
.dot3{ animation: dotBlink 1.2s .4s infinite; }

.progress-wrap{ display:grid; gap:8px; justify-items:center; }
.progress-bar{
  width: 82%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 24px rgba(0,0,0,.25);
}
.progress{
  display:block; height:100%; width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  position: relative;
}
.progress::after{
  /* shimmer */
  content:""; position:absolute; top:0; bottom:0; width:32%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shimmer 1.6s ease-in-out infinite;
}
.progress-label{ font-size:.9rem; color:#cfe8ff; opacity:.9 }

/* Exit transition when ready */
body.preloader-done #preloader{
  opacity: 0; visibility: hidden;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .seal, .pre-logo, .dot1, .dot2, .dot3, .progress::after { animation: none !important; }
}

/* Keyframes */
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes logoPulse{
  0%,100%{ transform: translateY(0) scale(1); opacity: 1; }
  50%{ transform: translateY(-2px) scale(1.02); opacity: .96; }
}
@keyframes shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(300%); }
}
@keyframes dotBlink{
  0%,100%{ opacity:.35; transform: translateY(0); }
  50%{ opacity:1; transform: translateY(-2px); }
}