/* ==========================================================================
   Airport Budget Parking OR Tambo — shared stylesheet
   ========================================================================== */

:root{
  --bg: #0c0c0b;
  --bg-raised: #141412;
  --bg-raised-2: #18110a;
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.16);
  --ink: #f3efe6;
  --ink-dim: #a9a49a;
  --ink-faint: #706c63;
  --amber: #e79a2d;
  --amber-soft: #f0b354;
  --amber-ink: #201202;
  --whatsapp: #2fbf5c;
  --whatsapp-ink: #06210f;
  --danger-bg: #2a1414;
  --danger-line: #6b2b2b;
  --danger-ink: #e7a3a3;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 1180px;
  /* Tells the browser this site is dark-themed, so native form controls
     (date-picker calendar icon, typed date text, dropdown arrows) render
     in their light variant instead of defaulting to black-on-black. */
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
p{ margin:0; }
button{ font-family: inherit; }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px){ .wrap{ padding: 0 20px; } }

.eyebrow{
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 600;
}
.lede{
  color: var(--ink-dim);
  font-size: 18px;
  max-width: 62ch;
  line-height: 1.65;
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: rgba(12,12,11,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content: space-between;
  height: 88px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  height:58px; width:auto;
  display:flex; align-items:center; justify-content:center;
  flex: none;
}
.brand-mark-img{ height:58px; width:auto; display:block; }
.brand-name{ font-family: var(--font-display); font-size: 18px; line-height:1.15; }
.brand-sub{ font-size: 11px; letter-spacing:0.16em; color: var(--ink-faint); text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap: 30px; }
.main-nav a{ font-size: 15.5px; color: var(--ink-dim); transition: color .15s ease; }
.main-nav a:hover{ color: var(--ink); }
.main-nav a.active{ color: var(--amber); }
.header-cta{ display:flex; align-items:center; gap:14px; }

/* Hamburger / close icon toggle button — hidden on desktop, shown below
   the tablet breakpoint. Built from CSS bars, not an SVG, so the open/close
   morph is a pure state change (no icon-swap flash). */
.nav-toggle{
  display:none;
  position: relative;
  width: 44px; height: 44px;
  background:none; border:none; color:var(--ink);
  padding:0; margin:0; cursor:pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle .bar,
.nav-toggle .bar::before,
.nav-toggle .bar::after{
  content:""; position:absolute; left:11px; right:11px; height:2px;
  background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle .bar{ top: 21px; }
.nav-toggle .bar::before{ top: -7px; }
.nav-toggle .bar::after{ top: 7px; }
.nav-toggle[aria-expanded="true"] .bar{ background: transparent; }
.nav-toggle[aria-expanded="true"] .bar::before{ top: 0; transform: rotate(45deg); background: var(--amber); }
.nav-toggle[aria-expanded="true"] .bar::after{ top: 0; transform: rotate(-45deg); background: var(--amber); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 22px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600;
  border: 1px solid transparent;
  cursor:pointer; transition: transform .15s ease, opacity .15s ease;
}
.btn:hover{ opacity:.92; }
.btn:active{ transform: scale(.98); }
.btn svg{ width:16px; height:16px; flex:none; }
.btn-primary{ background: var(--amber); color: var(--amber-ink); }
.btn-whatsapp{ background: var(--whatsapp); color: var(--whatsapp-ink); }
.btn-outline{ background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover{ border-color: var(--amber); }
.btn-block{ width:100%; justify-content:center; }

/* ---------- floating action buttons ---------- */
.fab-stack{
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.fab{
  display:flex; align-items:center; gap:8px;
  padding: 12px 18px; border-radius: 999px;
  font-size: 15px; font-weight:700;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.fab-wa{ background: var(--whatsapp); color: var(--whatsapp-ink); }
.fab-quote{ background: var(--amber); color: var(--amber-ink); }
/* Fixes the fab icons rendering unsized/oversized — there was no rule
   constraining these inline SVGs to the button's proportions. */
.fab svg{ width:18px; height:18px; flex:none; }

/* ---------- marquee ticker ---------- */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; background: var(--bg-raised);
}
.marquee-track{
  display:inline-flex; gap:44px; padding: 16px 0;
  animation: marquee 32s linear infinite;
  font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--ink-dim);
}
.marquee-track span{ display:inline-flex; align-items:center; gap:44px; }
.marquee-dot{ color: var(--amber); font-style: normal; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; } }

/* ---------- home hero (full-bleed banner, homepage only) ---------- */
.home-hero{
  position: relative;
  min-height: 760px;
  min-height: min(84vh, 760px);
  min-height: min(84dvh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: 76px;
}
.home-hero-media{ position:absolute; inset:0; }
.home-hero-media img{ width:100%; height:100%; object-fit:cover; object-position: 55% 62%; }
.home-hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,12,11,0.05) 0%, rgba(12,12,11,0.35) 48%, rgba(12,12,11,0.95) 94%),
    linear-gradient(90deg, rgba(12,12,11,0.90) 0%, rgba(12,12,11,0.55) 40%, rgba(12,12,11,0.05) 75%);
}
.home-hero-content{ position:relative; z-index:1; width:100%; }
.home-hero h1{ font-size: clamp(40px, 5.6vw, 68px); line-height: 1.04; margin: 18px 0 22px; }
.home-hero .lede{ max-width: 56ch; }
@media (max-width: 900px){
  .home-hero{
    min-height: 620px;
    min-height: min(78vh, 620px);
    min-height: min(78dvh, 620px);
    padding-bottom: 56px;
  }
  .home-hero-scrim{
    background:
      linear-gradient(180deg, rgba(12,12,11,0.15) 0%, rgba(12,12,11,0.55) 55%, rgba(12,12,11,0.97) 96%);
  }
}
@media (max-width: 640px){
  .home-hero{
    min-height: 540px;
    min-height: min(82vh, 540px);
    min-height: min(82dvh, 540px);
    padding-bottom: 40px;
    align-items: flex-end;
  }
  .home-hero-media img{ object-position: 60% 58%; }
  .home-hero h1{ font-size: clamp(32px, 9vw, 44px); margin: 14px 0 16px; }
  .home-hero .eyebrow{ font-size: 13px; }
  .home-hero .lede{ font-size: 16px; line-height: 1.55; }
  .home-hero .hero-actions{ margin-top: 22px; gap: 10px; }
  .home-hero .hero-actions .btn{ flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px){
  .home-hero{
    min-height: 480px;
    min-height: min(80dvh, 480px);
    padding-bottom: 32px;
  }
  .home-hero h1{ font-size: clamp(28px, 9vw, 36px); }
}

/* ---------- hero ---------- */
.hero{ padding: 88px 0 64px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center; }
.hero h1{ font-size: clamp(40px, 5.6vw, 68px); line-height: 1.04; margin: 18px 0 22px; }
.hero-media{ border-radius: var(--radius-l); overflow:hidden; aspect-ratio: 4/5; background: var(--bg-raised); }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-actions{ display:flex; gap:14px; margin-top: 30px; flex-wrap: wrap; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; aspect-ratio: 16/10; }
}

/* ---------- sections ---------- */
.section{ padding: 84px 0; }
.section-tight{ padding: 56px 0; }
.section-head{ margin-bottom: 44px; }
.section-head h2{ font-size: clamp(30px, 3.6vw, 44px); margin-top: 12px; max-width: 18ch; }
.section-num-head{ display:flex; align-items:center; gap:14px; margin-bottom: 14px; }
.section-num{ font-family: var(--font-display); font-style: italic; color: var(--amber); font-size: 19px; }
.section-rule{ height:1px; flex:1; background: var(--line); max-width: 60px; }
.section-alt{ background: var(--bg-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:start; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; gap: 32px; } }

/* ---------- cards ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 900px){ .card-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }
.value-card{
  background: var(--bg-raised); border:1px solid var(--line); border-radius: var(--radius-m);
  padding: 30px 26px;
}
.value-card .icon{
  width:44px; height:44px; border-radius:10px; background: rgba(231,154,45,0.14);
  display:flex; align-items:center; justify-content:center; color: var(--amber); margin-bottom:18px;
}
.value-card .icon svg{ width:20px; height:20px; }
.value-card h3{ font-size: 20px; margin-bottom:10px; }
.value-card p{ color: var(--ink-dim); font-size: 16px; }

.service-tile-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px){ .service-tile-grid{ grid-template-columns: 1fr; } }
.service-tile{
  position:relative; border-radius: var(--radius-m); overflow:hidden;
  aspect-ratio: 4/3; border:1px solid var(--line);
}
.service-tile img{ width:100%; height:100%; object-fit:cover; }
.service-tile::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.35) 42%, rgba(0,0,0,0.05) 66%);
}
.service-tile-content{ position:absolute; left:24px; right:24px; bottom:20px; z-index:2; }
.service-tile-num{ font-family: var(--font-display); font-style: italic; color: var(--amber-soft); font-size: 14px; }
.service-tile h3{ color:#fff; font-size: 22px; margin: 6px 0 8px; }
.service-tile p{ color: rgba(255,255,255,0.78); font-size: 15px; max-width: 34ch; }

.service-row-list{ border-top:1px solid var(--line); }
.service-row{
  display:grid; grid-template-columns: 34px 1fr 140px 34px; align-items:center; gap: 26px;
  padding: 30px 0; border-bottom:1px solid var(--line); transition: color .15s ease;
}
.service-row-num{ font-family: var(--font-display); font-style:italic; color: var(--amber); font-size: 17px; }
.service-row-body h3{ font-size: 26px; transition: color .15s ease; }
.service-row-body p{ color: var(--ink-dim); font-size: 16px; margin-top:8px; max-width: 46ch; }
.service-row-thumb{ width:140px; height:100px; border-radius: var(--radius-s); overflow:hidden; }
.service-row-thumb img{ width:100%; height:100%; object-fit:cover; }
.service-row-arrow{ color: var(--ink-faint); transition: color .15s ease, transform .15s ease; }
.service-row:hover .service-row-body h3{ color: var(--amber); }
.service-row:hover .service-row-arrow{ color: var(--amber); transform: translateX(3px); }
@media (max-width: 700px){
  .service-row{ grid-template-columns: 1fr; gap:14px; }
  .service-row-thumb{ width:100%; height:180px; order:-1; }
}

/* service detail page hero */
.service-hero{ padding: 78px 0; }
.service-hero-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.service-hero h1{ font-size: clamp(34px, 4.4vw, 52px); margin: 16px 0 20px; line-height:1.06; }
.service-hero-media{ border-radius: var(--radius-l); overflow:hidden; aspect-ratio: 4/3; }
.service-hero-media img{ width:100%; height:100%; object-fit:cover; }
.service-hero-actions{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
@media (max-width: 860px){
  .service-hero-grid{ grid-template-columns: 1fr; }
  .service-hero-media{ order:-1; aspect-ratio: 16/9; }
}
.why-strip{ display:grid; grid-template-columns: 0.7fr 1.3fr; gap: 40px; }
@media (max-width: 760px){ .why-strip{ grid-template-columns: 1fr; gap:18px; } }
.why-strip h2{ font-size: clamp(26px,3.2vw,36px); }
.why-strip p{ color: var(--ink-dim); font-size: 17px; }

/* ---------- calculator ---------- */
.calc-layout{ display:grid; grid-template-columns: 1fr 0.8fr; gap: 30px; align-items:start; }
@media (max-width: 900px){ .calc-layout{ grid-template-columns: 1fr; } }
.calc-card{
  background: var(--bg-raised); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: 34px;
}
.calc-card .eyebrow{ display:block; margin-bottom:8px; }
.calc-card h2{ font-size: 26px; margin-bottom: 22px; }
.date-fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .date-fields{ grid-template-columns:1fr; } }
.field label{ display:block; font-size: 14px; color: var(--ink-dim); margin-bottom: 8px; }
.field input{
  width:100%; background: var(--bg); border:1px solid var(--line-strong); color: var(--ink);
  border-radius: var(--radius-s); padding: 13px 14px; font-size: 17px; font-family: var(--font-body);
  min-height: 44px;
}
.field input:focus{ outline:none; border-color: var(--amber); }
/* Date fields: the browser's own calendar icon is unreliable — some
   browsers render it black regardless of dark-mode hints, making it
   invisible on our dark inputs. Instead we hide the native icon and draw
   our own amber calendar icon, which always matches the theme. The
   native icon's hit area is kept (just invisible) so clicking still
   opens the picker. */
.date-field{ position: relative; }
.date-field input[type="date"]{ padding-right: 44px; }
.date-field input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 0;
  position: absolute;
  right: 0; top: 0;
  width: 44px; height: 100%;
  margin: 0;
  cursor: pointer;
}
.date-field::after{
  content: "";
  position: absolute;
  right: 14px; bottom: 13px;
  width: 18px; height: 18px;
  pointer-events: none;
  background-color: var(--amber);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.calc-error{
  margin-top:16px; background: var(--danger-bg); border:1px solid var(--danger-line);
  color: var(--danger-ink); padding: 12px 14px; border-radius: var(--radius-s); font-size: 15px;
}
.calc-breakdown{ margin-top: 22px; }
.calc-line{
  display:flex; justify-content:space-between; padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.calc-line .label{ color: var(--ink-dim); }
.calc-line.included .value{ color: var(--whatsapp); font-weight:600; display:flex; align-items:center; gap:6px; }
.calc-total{ display:flex; justify-content:space-between; align-items:flex-end; padding-top: 20px; }
.calc-total .label{ color: var(--ink-dim); font-size: 15px; }
.calc-total .value{ font-family: var(--font-display); color: var(--amber); font-size: 38px; }
.calc-cta{ margin-top: 22px; }

.side-card{
  background: var(--bg-raised); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: 30px; margin-bottom: 20px;
}
.side-card h3{ font-size: 14px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-dim); margin-bottom:18px; }
.perk-list{ display:flex; flex-direction:column; gap:18px; }
.perk{ display:flex; gap:14px; align-items:flex-start; }
.perk .icon{
  width:34px; height:34px; border-radius:9px; background: rgba(231,154,45,0.14); color: var(--amber);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.perk .icon svg{ width:16px; height:16px; }
.perk p{ font-size: 15.5px; color: var(--ink-dim); }
.perk-with-photo{ flex-direction: column; gap: 12px; }
.perk-photo{
  width:100%; aspect-ratio: 16/9; object-fit:cover; border-radius: var(--radius-m);
  display:block;
}
.rate-table .rt-row{
  display:flex; justify-content:space-between; padding: 12px 0; border-bottom:1px solid var(--line);
  font-size: 15.5px;
}
.rate-table .rt-row .amt{ color: var(--amber-soft); font-weight:600; }
.note-box{
  margin-top: 20px; padding: 16px; border-radius: var(--radius-s);
  background: rgba(231,154,45,0.08); border:1px solid rgba(231,154,45,0.28);
  font-size: 15px; color: var(--ink-dim);
}

/* ---------- FAQ accordion ---------- */
.accordion{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-trigger{
  width:100%; background:none; border:none; color: var(--ink); text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap: 20px;
  padding: 26px 0; font-size: 20px; font-family: var(--font-display); cursor:pointer;
}
.acc-trigger[aria-expanded="true"]{ color: var(--amber); }
.acc-chevron{ flex:none; color: var(--ink-faint); transition: transform .2s ease; }
.acc-trigger[aria-expanded="true"] .acc-chevron{ transform: rotate(180deg); color: var(--amber); }
.acc-panel{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.acc-panel-inner{ padding: 0 0 26px; color: var(--ink-dim); font-size: 16.5px; max-width: 68ch; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-item{ display:flex; gap:16px; padding: 20px 0; border-bottom:1px solid var(--line); }
.contact-item .icon{ color: var(--amber); flex:none; margin-top:2px; }
.contact-item h4{ font-family: var(--font-body); font-size: 15px; color: var(--ink-dim); font-weight:600; margin-bottom:4px; }
.contact-item p{ font-size: 17px; }
.map-frame{ border-radius: var(--radius-m); overflow:hidden; border:1px solid var(--line); aspect-ratio: 4/3; }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size: 14px; color:var(--ink-dim); margin-bottom:8px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background: var(--bg-raised); border:1px solid var(--line-strong); color: var(--ink);
  border-radius: var(--radius-s); padding: 13px 14px; font-size: 17px; font-family: var(--font-body); resize: vertical;
  min-height: 44px;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color: var(--amber); }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.form-note{ font-size: 14px; color: var(--ink-faint); margin-top: 10px; }

/* ---------- stat ticker footer strip ---------- */
.trust-strip{ display:flex; flex-wrap:wrap; gap: 40px; justify-content: space-between; padding: 40px 0; }
.trust-item{ display:flex; align-items:center; gap:12px; color: var(--ink-dim); font-size: 15.5px; }
.trust-item svg{ color: var(--amber); width:18px; height:18px; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding: 60px 0 34px; background: var(--bg-raised); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ font-size: 13px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom: 18px; }
.footer-grid ul{ display:flex; flex-direction:column; gap: 12px; }
.footer-grid a{ color: var(--ink-dim); font-size: 15.5px; }
.footer-grid a:hover{ color: var(--amber); }
.footer-brand p{ color: var(--ink-dim); font-size: 15.5px; margin-top: 14px; max-width: 34ch; }
.footer-bottom{
  margin-top: 50px; padding-top: 24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color: var(--ink-faint); font-size: 14px;
}
.footer-credit{ opacity: 0.75; }
.footer-credit a{ color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.footer-credit a:hover{ color: var(--amber); text-decoration-color: var(--amber); }

/* ---------- utility ---------- */
.italic-serif{ font-style: italic; }
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--amber); color:var(--amber-ink);
  padding:10px 16px; z-index:100; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ==========================================================================
   Mobile navigation dropdown
   Collapses at the tablet breakpoint (900px), not just phone width, per the
   mobile-responsiveness playbook. Below that width .main-nav becomes a
   full-width dropdown panel toggled by .nav-toggle; JS adds/removes
   "nav-open" on both the button and the nav.
   ========================================================================== */
@media (max-width: 900px){
  .header-cta .btn-outline{ display:none; }
  .nav-toggle{ display:flex; }

  .main-nav{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(0,0,0,0.45);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .main-nav.nav-open{
    max-height: 80vh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
  }
  .main-nav a{
    font-size: 17px;
    padding: 16px 20px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
  }
  .main-nav a.active{ color: var(--amber); }
  .main-nav a:last-child{ border-bottom: none; }

  .site-header .wrap{ position: relative; }
}

/* Small-phone refinements (down to 360px) */
@media (max-width: 480px){
  .site-header .wrap{ height: 76px; }
  .brand-mark{ height: 46px; }
  .brand-mark-img{ height: 46px; }
  .brand-name{ font-size: 16.5px; }
  .header-cta{ gap: 10px; }
  .header-cta .btn-primary{ padding: 10px 16px; font-size: 14.5px; }
  .hero{ padding: 48px 0 40px; }
  .section{ padding: 56px 0; }
  .section-tight{ padding: 40px 0; }
  .marquee-track{ font-size: 16px; }
  .fab{ padding: 11px 14px; font-size: 14px; }
  .fab-stack{ right: 14px; bottom: 14px; gap: 10px; }
}

/* Ensure the floating action buttons never sit on top of a form's submit
   button or the last field on short mobile viewports: forms get bottom
   breathing room equal to the fab stack's height + margin. */
@media (max-width: 900px){
  form{ padding-bottom: 84px; }
}

/* Tap targets: every interactive control gets a real 44x44px minimum hit
   area on touch devices, regardless of visual padding. */
@media (max-width: 900px){
  .btn, .acc-trigger, .service-row, .footer-grid a, .contact-item a{ min-height: 44px; }
  .footer-grid a{ display:inline-flex; align-items:center; }
}