/* =========================================================
   ABC Airport Parking Services — design system
   Palette: dusk-runway navy/slate with a warm amber accent
   Type: Space Grotesk (display) + Inter (body)
   ========================================================= */

:root{
  --navy-950:#071B2E;
  --navy-900:#0B2E4E;
  --navy-800:#123B60;
  --slate-500:#5A7688;
  --slate-300:#9FB2BF;
  --sky-400:#6FA8D0;
  --amber-400:#E8A33D;
  --amber-500:#D98F1F;
  --ink-050:#F3F6F8;
  --glass-fill: rgba(255,255,255,0.07);
  --glass-fill-strong: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.16);
  --shadow-lg: 0 20px 60px rgba(3,14,26,0.45);
  --shadow-sm: 0 8px 24px rgba(3,14,26,0.3);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --maxw: 1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  overflow-x:hidden;
  width:100%;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink-050);
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(111,168,208,0.20), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(232,163,61,0.10), transparent 55%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, #0E3555 100%);
  min-height:100vh;
  line-height:1.55;
}

h1,h2,h3,h4{
  font-family:'Space Grotesk',system-ui,sans-serif;
  color:var(--ink-050);
  line-height:1.15;
  margin:0 0 0.5em;
  font-weight:600;
}
h1{font-size:clamp(2.3rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.2rem}
p{color:var(--slate-300); margin:0 0 1em; max-width:62ch}
a{color:inherit}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{padding:88px 0}
.section-tight{padding:56px 0}
.eyebrow{display:none} /* intentionally unused — avoiding tracked-out label chrome */

/* ---- Glass surfaces ---- */
.glass{
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow-sm);
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; min-height:44px; min-width:44px; border-radius:999px; font-weight:600; font-size:0.98rem;
  text-decoration:none; cursor:pointer; border:1px solid transparent; touch-action:manipulation;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:focus-visible{outline:3px solid var(--sky-400); outline-offset:3px}
.btn-primary{background:linear-gradient(135deg,var(--amber-400),var(--amber-500)); color:#20140A; box-shadow:0 10px 30px rgba(232,163,61,0.35);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(232,163,61,0.45)}
.btn-ghost{background:var(--glass-fill); border-color:var(--glass-border); color:var(--ink-050)}
.btn-ghost:hover{background:var(--glass-fill-strong)}
.btn-block{width:100%}
.btn[disabled]{opacity:0.6; cursor:not-allowed}

/* ---- Navbar ---- */
.navbar{
  position:sticky; top:0; z-index:50;
  background:#033965;
  border-bottom:1px solid var(--glass-border);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 24px; max-width:var(--maxw); margin:0 auto; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-height:44px}
.brand .brand-logo, .brand .home-brand-logo, .brand img{
  width:220px;
  height:auto !important;
  max-height:138px;
  display:block;
  object-fit:contain;
  border-radius:4px;
}
.brand-name{display:none}
.nav-links{display:flex; gap:28px; list-style:none; margin:0; padding:0}
.nav-links a{
  text-decoration:none; color:var(--slate-300); font-weight:500; font-size:0.95rem;
  padding:10px 4px; border-bottom:2px solid transparent; display:inline-flex; align-items:center; min-height:44px;
  transition:color 0.15s, border-color 0.15s;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--ink-050); border-color:var(--amber-400)}
.nav-cta{display:flex; align-items:center; gap:14px}
.nav-toggle{
  display:none; background:rgba(255,255,255,0.06); border:1px solid var(--glass-border);
  border-radius:10px; width:44px; height:44px; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  cursor:pointer; touch-action:manipulation;
}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink-050); border-radius:2px; transition:transform 0.2s ease, opacity 0.2s ease}
.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)}

.nav-backdrop{
  display:none; position:fixed; inset:0; top:64px; background:rgba(3,14,26,0.65);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:45;
}
.nav-backdrop.open{display:block}

@media (max-width:900px){
  .brand .brand-logo, .brand .home-brand-logo, .brand img{ width:180px; max-height:112px; }
  .nav-links{
    position:fixed; top:64px; left:0; right:0; flex-direction:column; gap:0;
    background:#033965; border-bottom:1px solid var(--glass-border);
    max-height:0; overflow:hidden; transition:max-height 0.3s cubic-bezier(0.16,1,0.3,1);
    box-shadow:var(--shadow-lg); z-index:70;
  }
  .nav-links.open{max-height:calc(100vh - 64px); overflow-y:auto; -webkit-overflow-scrolling:touch}
  .nav-links a{display:flex; align-items:center; padding:15px 24px; min-height:48px; border-bottom:1px solid rgba(255,255,255,0.08); font-size:1.02rem}
  .nav-toggle{display:flex}
  .nav-cta .btn-ghost-label{display:none}
  .nav-mobile-only{display:block}
}
.nav-mobile-only{display:none}

@media (max-width:600px){
  .brand .brand-logo, .brand .home-brand-logo, .brand img{ width:145px; max-height:92px; }
  .nav-inner{ padding-left:14px; padding-right:14px; }
}

/* ---- Hero ---- */
.hero{
  padding:76px 0 64px; position:relative;
  background:
    linear-gradient(180deg, rgba(3,20,38,0.40) 0%, rgba(7,27,46,0.68) 65%, var(--navy-900) 100%),
    url('../assets/hero-yard.jpg') center 45%/cover no-repeat;
}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero-kicker{color:var(--sky-400); font-weight:600; font-size:0.95rem; margin-bottom:14px}
.hero h1 span{color:var(--amber-400)}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.hero-trust-inline{display:flex; gap:22px; margin-top:34px; flex-wrap:wrap}
.hero-trust-inline div{display:flex; align-items:center; gap:8px; color:var(--slate-300); font-size:0.9rem}
.hero-trust-inline strong{color:var(--ink-050); font-family:'Space Grotesk',sans-serif; font-size:1.15rem}

/* Boarding-pass style teaser card */
.boarding-card{padding:28px; position:relative; overflow:visible}
.boarding-card .bp-row{display:grid; grid-template-columns:1fr 34px 1fr; align-items:center; gap:0}
.bp-divider{position:relative; height:100%; min-height:120px; border-left:2px dashed rgba(255,255,255,0.25)}
.bp-divider::before, .bp-divider::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #0E3555, var(--navy-950));
  box-shadow:inset 0 0 0 1px var(--glass-border);
}
.bp-divider::before{top:-11px}
.bp-divider::after{bottom:-11px}
.bp-field label{display:block; font-size:0.78rem; color:var(--slate-300); margin-bottom:6px}
.bp-field input{width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.06); color:var(--ink-050); font-size:1rem}
.bp-field + .bp-field{margin-top:14px}
.bp-price{padding-left:20px}
.bp-price .amount{font-family:'Space Grotesk',sans-serif; font-size:2.4rem; font-weight:700; color:var(--amber-400)}
.bp-price .label{color:var(--slate-300); font-size:0.85rem}
.bp-note{margin-top:16px; font-size:0.85rem; color:var(--slate-300)}

@media (max-width:560px){
  .boarding-card .bp-row{grid-template-columns:1fr; gap:20px}
  .bp-divider{display:none}
  .bp-price{padding-left:0; border-top:2px dashed rgba(255,255,255,0.25); padding-top:20px}
}

/* ---- How it works ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px}
@media (max-width:800px){.steps{grid-template-columns:1fr}}
.step{padding:26px}
.step .num{font-family:'Space Grotesk',sans-serif; font-size:1.6rem; color:var(--amber-400); font-weight:700; display:block; margin-bottom:10px}

/* ---- Trust badges ---- */
.badges{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.badge{display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px}
.badge svg{width:20px; height:20px; flex:none; color:var(--sky-400)}
.badge span{font-size:0.92rem; color:var(--ink-050)}

/* ---- Testimonials ---- */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px}
@media (max-width:900px){.testimonials{grid-template-columns:1fr}}
.testimonial{padding:0; background:none; border:none; box-shadow:none}
.testimonial p{font-style:italic; color:var(--ink-050); border-left:2px solid var(--amber-400); padding-left:16px}
.testimonial cite{display:block; margin-top:10px; font-style:normal; color:var(--slate-300); font-size:0.88rem}

/* ---- Generic content grid ---- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
@media (max-width:850px){.two-col{grid-template-columns:1fr}}

/* ---- Rate table ---- */
/* ---- Rate table ---- */
.table-responsive{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:20px; border-radius:var(--radius-md); border:1px solid var(--glass-border)}
.rate-table{width:100%; min-width:420px; border-collapse:collapse; margin-top:0}
.rate-table th, .rate-table td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--glass-border)}
.rate-table th{color:var(--slate-300); font-weight:500; font-size:0.85rem; background:rgba(255,255,255,0.03)}
.rate-table td{color:var(--ink-050)}
.rate-table tr:last-child td{border-bottom:none}
.perks-list{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px}
.perks-list li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-050); font-size:0.96rem}
.perks-list svg{flex:none; width:20px; height:20px; color:var(--amber-400); margin-top:2px}

/* ---- Calculator (parking page, full) ---- */
.calc-panel{padding:32px}
@media (max-width:600px){.calc-panel{padding:20px}}
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:600px){.calc-grid{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block; font-size:0.88rem; color:var(--slate-300); margin-bottom:6px; font-weight:500}
.field input, .field select, .field textarea, .bp-field input{
  width:100%; padding:12px 14px; min-height:46px; border-radius:10px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.06); color:var(--ink-050); font-size:16px !important; font-family:inherit;
  box-sizing:border-box; -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239FB2BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:38px;
}
.field textarea{min-height:90px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus, .bp-field input:focus{
  outline:none; border-color:var(--sky-400); box-shadow:0 0 0 3px rgba(111,168,208,0.25);
}
.field input::placeholder{color:var(--slate-500)}
.calc-result{margin-top:10px; padding:20px; border-radius:var(--radius-md); background:rgba(232,163,61,0.09); border:1px solid rgba(232,163,61,0.35)}
.calc-result .total{font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:700; color:var(--amber-400)}
.calc-breakdown{margin-top:10px; font-size:0.9rem; color:var(--slate-300)}
.calc-breakdown div{display:flex; justify-content:space-between; padding:4px 0}
.calc-warning{color:#F2B8B8; font-size:0.9rem; margin-top:8px}
.calc-actions{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}

/* ---- Forms & Security ---- */
.form-section-header{
  display:flex; align-items:center; gap:10px; font-size:1.02rem; font-weight:600;
  color:var(--ink-050); margin:26px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--glass-border);
}
.form-section-header:first-of-type{margin-top:14px}
.form-section-header svg{width:18px; height:18px; color:var(--amber-400); flex:none}
.form-section-header .tag{
  font-size:0.7rem; padding:2px 8px; border-radius:999px; background:rgba(232,163,61,0.14);
  color:var(--amber-400); font-weight:600; letter-spacing:0.5px; text-transform:uppercase; margin-left:auto;
}
form .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
form .field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
@media (max-width:768px){form .field-row-3{grid-template-columns:1fr}}
@media (max-width:600px){form .field-row{grid-template-columns:1fr}}
.field .field-hint{display:block; font-size:0.75rem; color:var(--slate-400); margin-top:5px}
.honeypot{
  position:absolute !important; left:-9999px !important; top:-9999px !important;
  width:1px !important; height:1px !important; opacity:0 !important;
  pointer-events:none !important; z-index:-1 !important;
}
.form-note{font-size:0.85rem; color:var(--slate-300); margin-top:10px}
.form-security-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:0.78rem;
  color:var(--slate-300); margin-top:12px;
}
.form-security-badge svg{width:14px; height:14px; color:#38A169; flex:none}
.form-success{
  display:none; padding:16px; border-radius:var(--radius-md);
  background:rgba(111,168,208,0.12); border:1px solid rgba(111,168,208,0.4);
  margin-top:16px; color:var(--ink-050);
}
.form-error{
  display:none; padding:14px 16px; border-radius:var(--radius-md);
  background:rgba(235,87,87,0.14); border:1px solid rgba(235,87,87,0.45);
  margin-top:14px; color:#F8B4B4; font-size:0.9rem;
}

/* ---- Accordion (FAQ) ---- */
.accordion{margin-top:30px; border-top:1px solid var(--glass-border)}
.acc-item{border-bottom:1px solid var(--glass-border)}
.acc-trigger{
  width:100%; min-height:54px; text-align:left; background:none; border:none; color:var(--ink-050);
  font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:600;
  padding:18px 4px; display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  touch-action:manipulation;
}
.acc-trigger:focus-visible{outline:3px solid var(--sky-400); outline-offset:2px}
.acc-trigger .plus{transition:transform 0.2s ease; color:var(--amber-400); font-size:1.4rem; flex:none; margin-left:16px}
.acc-item[open] .acc-trigger .plus{transform:rotate(45deg)}
.acc-panel{padding:0 4px 22px; color:var(--slate-300); line-height:1.6}

/* ---- About / trust page bits ---- */
.feature-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:30px}
@media (max-width:700px){.feature-grid{grid-template-columns:1fr}}
.feature{padding:22px; display:flex; flex-direction:column; justify-content:center}
.feature svg{width:26px; height:26px; color:var(--amber-400); margin-bottom:12px}
.feature img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-md); margin-bottom:16px; display:block}
.feature figcaption{margin-top:2px}

/* ---- Contact page ---- */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-detail{display:flex; gap:14px; margin-bottom:20px; min-height:44px; align-items:flex-start}
.contact-detail svg{width:22px; height:22px; color:var(--amber-400); flex:none; margin-top:2px}
.contact-detail a, .contact-detail span{color:var(--ink-050)}
.map-wrap{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--glass-border); margin-top:24px}
.map-wrap iframe{display:block; width:100%; height:280px; border:0}

/* ---- Footer ---- */
footer{
  border-top:1px solid var(--glass-border); padding:40px 0; margin-top:40px;
  padding-bottom:max(40px, calc(env(safe-area-inset-bottom) + 24px));
}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.footer-copy-group{display:flex; flex-direction:column; gap:4px}
.footer-inner p{margin:0; font-size:0.85rem; color:var(--slate-300)}
.footer-credit{font-size:0.8rem; color:var(--slate-400)}
.footer-credit .credit-brand{color:var(--amber-400); font-weight:600}
.footer-links{display:flex; gap:18px; list-style:none; padding:0; margin:0; flex-wrap:wrap}
.footer-links a{color:var(--slate-300); text-decoration:none; font-size:0.85rem; display:inline-flex; align-items:center; min-height:44px; padding:2px}
.footer-links a:hover{color:var(--ink-050)}

/* ---- Floating action buttons ---- */
.fab-stack{
  position:fixed; right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  z-index:60; display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.fab{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 20px; min-height:48px; min-width:48px; border-radius:999px;
  text-decoration:none; font-weight:600; font-size:0.92rem; box-shadow:var(--shadow-lg);
  border:1px solid var(--glass-border); touch-action:manipulation;
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.fab:hover{transform:translateY(-2px)}
.fab:focus-visible{outline:3px solid var(--sky-400); outline-offset:3px}
.fab-whatsapp{background:linear-gradient(135deg,#2FBE60,#22994A); color:#06210F; border-color:rgba(47,190,96,0.5)}
.fab-manage{
  background:rgba(7,27,46,0.92); color:var(--ink-050);
  border-color:rgba(232,163,61,0.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.fab-manage svg{color:var(--amber-400)}
.fab-manage:hover{background:rgba(12,42,69,0.96); border-color:var(--amber-400)}
.fab-quote{
  background:rgba(11,46,78,0.88); color:var(--ink-050);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.fab-quote:hover{background:rgba(18,59,96,0.95)}
.fab svg{width:20px; height:20px; flex:none}
@media (min-width:901px){
  .fab-quote{display:none}
  .hero-grid .boarding-card{align-self:start; margin-top:10px}
}
@media (max-width:480px){
  .fab span{display:none}
  .fab{padding:14px; width:48px; height:48px; border-radius:50%}
  .container{padding:0 16px}
  section{padding:56px 0}
  .section-tight{padding:40px 0}
}

.skip-link{position:absolute; left:-999px; top:0; background:var(--amber-400); color:#20140A; padding:10px 16px; z-index:100; border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* =========================================================
   RESPONSIVE MEDIA SAFETY (prevents horizontal overflow on
   small screens and reserves layout space to avoid CLS)
   ========================================================= */
img, svg, video, iframe{max-width:100%}
img{height:auto}
.brand .brand-logo, .brand img{aspect-ratio:auto}

/* Compact header CTA on narrow screens instead of an empty pill */
.nav-cta .btn-ghost-short{display:none}
@media (max-width:900px){
  .nav-cta .btn-ghost-label{display:none}
  .nav-cta .btn-ghost-short{display:inline}
  .nav-cta .btn-ghost{padding:10px 16px; font-size:0.9rem}
}

/* Hero image element (replaces 894 KB CSS background) */
.hero{position:relative; overflow:hidden; background:var(--navy-950)}
.hero-bg{position:absolute; inset:0; display:block; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 45%}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,20,38,0.52) 0%, rgba(7,27,46,0.72) 65%, var(--navy-900) 100%);
}
.hero > .container{position:relative; z-index:2}

/* =========================================================
   BREADCRUMBS (visible + crawlable)
   ========================================================= */
.breadcrumbs{padding:18px 0 0; font-size:0.82rem; color:var(--slate-300)}
.breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.breadcrumbs li{display:flex; align-items:center; gap:8px}
.breadcrumbs li + li::before{content:"/"; color:var(--slate-500)}
.breadcrumbs a{color:var(--slate-300); text-decoration:none}
.breadcrumbs a:hover{color:var(--ink-050)}
.breadcrumbs [aria-current="page"]{color:var(--ink-050)}

/* =========================================================
   QUICK FACTS — short, extractable answer blocks that
   AI answer engines (ChatGPT, Perplexity, AI Overviews) quote
   ========================================================= */
.quick-facts{width:100%; border-collapse:collapse; margin-top:24px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--glass-border)}
.quick-facts th, .quick-facts td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--glass-border); vertical-align:top; font-size:0.95rem}
.quick-facts th{width:38%; color:var(--ink-050); font-weight:600; background:rgba(255,255,255,0.04)}
.quick-facts td{color:var(--slate-300)}
.quick-facts tr:last-child th, .quick-facts tr:last-child td{border-bottom:none}
@media (max-width:600px){
  .quick-facts th, .quick-facts td{display:block; width:100%; padding:10px 14px}
  .quick-facts th{border-bottom:none; padding-bottom:2px; background:none; font-size:0.8rem; color:var(--sky-400)}
  .quick-facts td{padding-top:2px}
}

/* =========================================================
   ANSWER BOX — one-paragraph direct answer at top of a page
   ========================================================= */
.answer-box{
  border:1px solid rgba(232,163,61,0.34); padding:18px 22px; margin:22px 0 0;
  background:rgba(232,163,61,0.07); border-radius:var(--radius-md);
}
.answer-box p{margin:0; color:var(--ink-050); max-width:70ch}
.answer-box strong{color:var(--amber-400)}

/* =========================================================
   COMPARISON TABLE (ABC vs official airport parking)
   ========================================================= */
.compare-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:24px; border-radius:var(--radius-md); border:1px solid var(--glass-border)}
.compare-table{width:100%; min-width:540px; border-collapse:collapse}
.compare-table th, .compare-table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--glass-border); font-size:0.95rem}
.compare-table thead th{background:rgba(255,255,255,0.05); color:var(--ink-050); font-weight:600; font-size:0.88rem}
.compare-table td{color:var(--slate-300)}
.compare-table .col-abc{background:rgba(232,163,61,0.08); color:var(--ink-050); font-weight:600}
.compare-table tr:last-child th, .compare-table tr:last-child td{border-bottom:none}

/* =========================================================
   FOOTER — expanded with internal links + NAP block
   ========================================================= */
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:28px; border-bottom:1px solid var(--glass-border);
}
.footer-col .footer-h{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--sky-400); margin:0 0 12px; font-weight:600; font-family:'Space Grotesk',sans-serif;
}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.footer-col li a{color:var(--slate-300); text-decoration:none; font-size:0.88rem; display:inline-flex; align-items:center; min-height:36px; padding:2px 0}
.footer-col li a:hover{color:var(--ink-050)}
.footer-brand-col .footer-logo{width:150px; height:auto; margin-bottom:14px; display:block; border-radius:4px}
.footer-brand-col p{font-size:0.88rem; margin:0 0 12px}
.footer-areas{font-size:0.85rem; color:var(--slate-300); line-height:1.7; margin:0}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:24px}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:26px}
  .footer-brand-col{grid-column:1 / -1}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}
@media (max-width:420px){
  .footer-grid{grid-template-columns:1fr}
}

/* Inline grid-template-columns on .two-col beats the media query above, so
   force stacking where two columns would otherwise be ~160px wide. */
@media (max-width:560px){
  .two-col[style]{grid-template-columns:1fr !important}
}

/* =========================================================
   CONTENT SECTIONS for long-form / landing pages
   ========================================================= */
.prose p{max-width:70ch}
.prose h2{margin-top:1.4em}
.prose ul, .prose ol{color:var(--slate-300); max-width:70ch; padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--amber-400); text-decoration:underline; text-underline-offset:2px}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:32px}
.card{padding:24px}
.card h3{margin-bottom:8px}
.card p{margin:0; font-size:0.92rem}
.stat-row{display:flex; flex-wrap:wrap; gap:28px; margin-top:28px}
.stat{display:flex; flex-direction:column; gap:2px}
.stat b{font-family:'Space Grotesk',sans-serif; font-size:1.7rem; color:var(--amber-400); line-height:1}
.stat span{font-size:0.82rem; color:var(--slate-300)}

/* CTA band */
.cta-band{text-align:center}
.cta-band p{margin:0 auto 22px}

/* Areas grid */
.areas-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:26px}
.area-chip{padding:16px 18px; border-radius:var(--radius-md); font-size:0.92rem}
.area-chip strong{display:block; color:var(--ink-050); margin-bottom:2px}
.area-chip span{color:var(--slate-300); font-size:0.82rem}

/* Mobile table scroll hint */
.table-responsive, .compare-wrap{position:relative}
.scroll-hint{display:none; font-size:0.78rem; color:var(--slate-500); margin-top:8px}
@media (max-width:640px){.scroll-hint{display:block}}

/* 404 */
.error-page{text-align:center; padding:96px 0}
.error-page .code{font-family:'Space Grotesk',sans-serif; font-size:clamp(3.4rem,12vw,6rem); color:var(--amber-400); line-height:1; margin-bottom:8px}
.error-page ul a{color:var(--slate-300); text-decoration:none; font-size:0.9rem}
.error-page ul a:hover{color:var(--ink-050)}

/* =========================================================
   BOOKING FORM — live price summary
   ========================================================= */
.booking-price{
  margin:20px 0 6px; padding:20px 22px; border-radius:var(--radius-md);
  background:rgba(232,163,61,0.10); border:1px solid rgba(232,163,61,0.42);
  position:relative;
}
.booking-price[hidden]{display:none}
.booking-price-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.booking-price-label{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--amber-400); font-weight:600;
}
.booking-price-days{font-size:0.85rem; color:var(--slate-300)}
.booking-price-total{
  font-family:'Space Grotesk',sans-serif; font-size:2.1rem; font-weight:700;
  color:var(--amber-400); line-height:1.1; margin-top:4px;
}
.booking-price-breakdown{margin-top:8px; font-size:0.88rem; color:var(--slate-300)}
.booking-price-breakdown div{display:flex; justify-content:space-between; gap:12px; padding:3px 0}
.booking-price-breakdown div:last-child{
  border-top:1px solid rgba(232,163,61,0.3); margin-top:6px; padding-top:7px;
  color:var(--ink-050); font-weight:600;
}
.booking-price-note{margin:12px 0 0; font-size:0.8rem; color:var(--slate-300); line-height:1.5}
.booking-price.is-empty{
  background:rgba(255,255,255,0.04); border-color:var(--glass-border);
}
.booking-price.is-empty .booking-price-total{
  color:var(--slate-300); font-size:1.55rem;
}
.booking-price.is-invalid{background:rgba(235,87,87,0.10); border-color:rgba(235,87,87,0.45)}
.booking-price.is-invalid .booking-price-total{color:#F2B8B8; font-size:1.1rem; font-family:'Inter',sans-serif; font-weight:600}
.field input.calculated-price-input{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--amber-400); background:rgba(232,163,61,0.10); border-color:rgba(232,163,61,0.45);
  cursor:default;
}
.field input.calculated-price-input:placeholder-shown{
  font-family:inherit; font-weight:500; color:var(--slate-300);
  background:rgba(255,255,255,0.04); border-color:var(--glass-border);
}
@media (max-width:600px){
  .booking-price{padding:16px 18px}
  .booking-price-total{font-size:1.75rem}
}

/* Accessibility helper */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Print-friendly */
@media print{
  .navbar, .fab-stack, .hero-bg, .hero::after, footer .footer-links{display:none !important}
  body{background:#fff; color:#111}
  h1,h2,h3,p,a{color:#111 !important}
}

/* Tabular numerals & anchor scroll offsets */
.rate-table td, .compare-table td, .quick-facts td, .amount, .total, .booking-price-total, .stat b{
  font-variant-numeric:tabular-nums;
}
#calculator, #book-now, #booking-form, #manage-lookup-form{
  scroll-margin-top:92px;
}
h1, h2, h3{
  text-wrap:balance;
}
@media (max-width:640px){
  .hero-trust-inline{
    padding-right:68px;
  }
  footer{
    padding-bottom:124px;
  }
}

.staff-login-link{
  color:inherit;
  text-decoration:none;
  opacity:0.65;
}
.staff-login-link:hover{
  color:var(--ink-050);
  opacity:1;
  text-decoration:underline;
}
.admin-return-bar{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:120;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:var(--radius-sm);
  background:rgba(4,19,32,0.94);
  border:1px solid rgba(232,163,61,0.45);
  color:var(--ink-050);
  font-size:0.82rem;
  box-shadow:0 10px 28px rgba(0,0,0,0.4);
}
.admin-return-bar a{
  color:var(--amber-400);
  font-weight:600;
  text-decoration:none;
}
.admin-return-bar a:hover{
  text-decoration:underline;
}

/* =========================================================
   Clean Layout & Typography Classes (Zero Inline Styles)
   ========================================================= */
[hidden]{display:none !important}
.boarding-card-title{font-size:1.2rem; margin-bottom:18px}
.card-subhead{font-size:1.2rem}
.cta-banner{padding:44px; text-align:center}
.cta-banner p{margin:0 auto 22px}
.callout-panel{padding:36px; margin-top:36px}
.callout-panel h2{margin-top:0}
.panel-pad{padding:30px}
.booking-shell{padding:36px; max-width:800px; margin:0 auto}
.container-narrow{max-width:780px}
.container-faq{max-width:880px}
.manage-card{padding:30px; margin-top:24px}
.input-uppercase{text-transform:uppercase}
.req, .text-amber{color:var(--amber-400)}
.text-amber-strong{color:var(--amber-400); font-weight:600}
.sub-label{font-weight:400; font-size:0.85rem; color:var(--slate-300)}
.wash-photo-grid{grid-template-columns:1fr 1fr; gap:14px; margin-top:20px}
.wash-photo{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius-md)}
.feature-figure{margin:0}
.feature-figure figcaption p{margin:0}
.map-wrap iframe{border:0}
.form-security-centered{justify-content:center; margin-top:14px}
.calc-warning.is-note{color:var(--slate-300)}
.mt-0{margin-top:0}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-24{margin-top:24px}
.mt-26{margin-top:26px}
.mt-30{margin-top:30px}
.mt-neg-6{margin-top:-6px}
.mb-10{margin-bottom:10px}
.error-page h1{margin-top:0}
.error-page > p:not(.code){margin:0 auto 26px}
.error-page .calc-actions{justify-content:center}
.error-links{list-style:none; padding:0; margin-top:34px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap}