/* =====================================================================
   Rafay Rent a Car Lahore — website stylesheet
   Mobile-first. Deep navy + white, with the Rafay pink as an accent only.
   ===================================================================== */

:root{
  --navy:#0A2D45;
  --navy-deep:#072033;
  --navy-soft:#123A56;
  --accent:#E0357F;
  --accent-dark:#C42A6D;
  --accent-soft:#FCE9F2;
  --ink:#12212E;
  --ink-2:#3E5568;
  --muted:#617588;
  --line:#E6ECF1;
  --line-2:#EEF3F7;
  --bg:#FFFFFF;
  --bg-soft:#F7FAFC;
  --field-line:#A9BCCB;   /* form borders — dark enough to see the box at a glance */
  --field-bg:#FBFDFE;
  --ok:#0B7A56;
  --ok-soft:#E2F4EC;
  --warn:#9A6300;
  --warn-soft:#FBF0DC;
  --crit:#B32844;
  --crit-soft:#FBE7EB;
  --shadow-sm:0 1px 2px rgba(10,45,69,.06), 0 4px 12px -6px rgba(10,45,69,.14);
  --shadow:0 2px 6px rgba(10,45,69,.06), 0 18px 40px -20px rgba(10,45,69,.28);
  --shadow-lg:0 4px 10px rgba(10,45,69,.08), 0 30px 60px -24px rgba(10,45,69,.38);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --wrap:1220px;
  --font-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Archivo",var(--font-body);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* A class that sets `display` beats the browser's own rule for the
   hidden attribute, and that is exactly how a bar meant to be hidden ends
   up permanently on screen. This makes `hidden` mean hidden. */
[hidden]{display:none !important;}
/* Accessibility note on these two values.
   --muted was #7B90A3, which is 3.30:1 on white — below the 4.5:1 that
   normal text needs, and it was used on every form label and hint on the
   site. #617588 reads as the same quiet grey and measures 4.76:1 on white,
   4.54:1 on the soft background.
   White on the brand pink #E0357F is 4.21:1, also short. Buttons therefore
   sit on --accent-dark (5.39:1); the brighter pink stays for borders,
   pills and other places where it is not carrying text. */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
/* A link sitting inside a sentence has to be distinguishable by something
   other than its colour (WCAG 1.4.1) — otherwise a reader who cannot see
   the pink simply cannot see that there is a link there at all. Links that
   stand alone (navigation, buttons, card titles) are already obvious from
   their position, so they keep the cleaner look. */
p a:not(.btn),.note a,.prose a,dd a,figcaption a,.auth-links span a{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:.06em;}
button{font:inherit;}
h1,h2,h3,h4,h5{font-family:var(--font-display);margin:0;line-height:1.14;letter-spacing:-.022em;color:var(--navy);text-wrap:balance;font-weight:700;}
p{margin:0;}
ul,ol{margin:0;padding:0;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:1000;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 18px;}
@media (min-width:768px){ .wrap{padding:0 28px;} }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------------------------------------------------------------- BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:var(--r-sm);border:1.5px solid transparent;
  font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease;
  min-height:48px;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent-dark);color:#fff;}
.btn-primary:hover{background:#A81E5A;color:#fff;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-deep);color:#fff;}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--line);}
.btn-outline:hover{border-color:var(--navy);color:var(--navy);}
.btn-ghost-light{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.3);}
.btn-ghost-light:hover{background:rgba(255,255,255,.18);color:#fff;}
.btn-wa{background:#25D366;color:#06301A;}
.btn-wa:hover{background:#1DB954;color:#06301A;}
.btn-sm{padding:10px 16px;font-size:14px;min-height:40px;}
.btn-block{width:100%;}

/* ---------------------------------------------------------------- HEADER */
.topstrip{background:var(--navy-deep);color:#C3D3E0;font-size:12.5px;}
.topstrip .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:8px;padding-bottom:8px;}
.topstrip a{color:#FF9FCB;font-weight:600;}
.topstrip .hide-sm{display:none;}
@media (min-width:768px){ .topstrip .hide-sm{display:block;} }

.site-header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--line);}
.header-main{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px;}
.brand{flex:0 0 auto;}
.brand img{width:132px;height:auto;}
@media (min-width:1024px){ .brand img{width:170px;} }

.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px;}
.header-tel{display:none;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--navy);line-height:1.15;text-decoration:none;}
.header-tel small{display:block;font-family:var(--font-body);font-size:10.5px;font-weight:400;color:var(--muted);letter-spacing:.03em;}
.header-tel:hover{text-decoration:none;color:var(--accent-dark);}
@media (min-width:1024px){ .header-tel{display:block;} }

.icon-btn{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--navy);}
.icon-btn.wa{background:#25D366;border-color:#25D366;color:#fff;}
.nav-toggle{display:grid;}
@media (min-width:1024px){ .nav-toggle{display:none;} }
.header-book{display:none;}
@media (min-width:480px){ .header-book{display:inline-flex;} }

.main-nav{display:none;}
@media (min-width:1024px){
  .main-nav{display:flex;align-items:center;gap:2px;list-style:none;}
  .main-nav a{
    display:block;padding:9px 12px;border-radius:var(--r-sm);
    color:var(--ink-2);font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;
  }
  .main-nav a:hover{background:var(--bg-soft);color:var(--navy);text-decoration:none;}
  .main-nav a[aria-current="page"]{color:var(--accent-dark);font-weight:600;}
}

/* mobile drawer */
.mobile-nav{
  position:fixed;inset:0 0 0 auto;width:min(88vw,340px);background:#fff;z-index:400;
  transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow-y:auto;
}
.mobile-nav[data-open="true"]{transform:translateX(0);}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);}
.mobile-nav ul{list-style:none;padding:10px 12px;}
/* Scoped to the list, not to the whole drawer. As `.mobile-nav a` it also
   hit the Book Now button in the drawer footer and repainted its label
   navy-on-pink — 3.0:1, and it looked like a disabled button too. */
.mobile-nav ul a{display:block;padding:13px 12px;border-radius:var(--r-sm);color:var(--ink);font-weight:500;text-decoration:none;}
.mobile-nav ul a:hover,.mobile-nav ul a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-dark);}
.mobile-nav-foot{margin-top:auto;padding:16px 18px 22px;border-top:1px solid var(--line);display:grid;gap:10px;}
.nav-scrim{position:fixed;inset:0;background:rgba(7,32,51,.5);z-index:300;opacity:0;pointer-events:none;transition:opacity .28s ease;}
.nav-scrim[data-open="true"]{opacity:1;pointer-events:auto;}

/* ---------------------------------------------------------------- HERO */
.hero{position:relative;background:var(--navy);overflow:hidden;}
.hero-media{position:absolute;inset:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:70% center;}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,32,51,.92) 0%,rgba(7,32,51,.80) 55%,rgba(7,32,51,.92) 100%);
}
@media (min-width:900px){
  .hero::after{background:linear-gradient(100deg,rgba(7,32,51,.95) 0%,rgba(7,32,51,.86) 44%,rgba(7,32,51,.25) 82%);}
}
.hero-inner{position:relative;z-index:2;padding-top:44px;padding-bottom:44px;max-width:640px;color:#fff;}
@media (min-width:900px){ .hero-inner{padding-top:70px;padding-bottom:120px;} }
.hero h1{color:#fff;font-size:clamp(29px,6vw,48px);font-weight:800;letter-spacing:-.032em;margin-top:16px;}
.hero h1 em{font-style:normal;color:#FF77B4;}
.hero p.lede{color:#C3D3E0;font-size:16px;margin-top:14px;max-width:34em;}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}

.eyebrow-pill{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(224,53,127,.20);border:1px solid rgba(255,141,192,.45);color:#FFAFD3;
  padding:6px 12px;border-radius:var(--r-pill);
}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-dark);font-weight:600;}

/* ---------------------------------------------------------------- BOOKING WIDGET */
.booking-card{
  position:relative;z-index:5;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;
}
@media (min-width:900px){ .booking-card{margin-top:-84px;} }

.booking-tabs{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--line-2);scrollbar-width:none;}
.booking-tabs::-webkit-scrollbar{display:none;}
.booking-tabs button{
  flex:0 0 auto;padding:14px 16px;background:none;border:0;border-bottom:2.5px solid transparent;
  font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;
}
.booking-tabs button[aria-selected="true"]{color:var(--accent-dark);border-bottom-color:var(--accent-dark);}
.booking-body{padding:18px;}
@media (min-width:768px){ .booking-body{padding:20px 22px 22px;} }

.field-grid{display:grid;gap:14px;}
@media (min-width:640px){ .field-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1080px){
  .field-grid.cols-5{grid-template-columns:1.3fr 1.3fr .8fr .7fr 1fr;}
  .field-grid.cols-4{grid-template-columns:1.2fr 1.2fr .9fr .9fr;}
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field label{font-family:var(--font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;border:1.5px solid var(--field-line);border-radius:var(--r-sm);
  font:inherit;font-size:15px;color:var(--ink);background:var(--field-bg);min-height:48px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#8FA5B8;}
.field textarea{min-height:104px;resize:vertical;line-height:1.55;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-dark);outline:none;box-shadow:0 0 0 3px var(--accent-soft);background:#fff;}
.field input::placeholder,.field textarea::placeholder{color:#A9B8C5;}
.field .hint{font-size:12px;color:var(--muted);}
.field .use-location{background:none;border:0;padding:0;color:var(--accent-dark);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--crit);}
.field .err{font-size:12.5px;color:var(--crit);font-weight:500;}
.field-full{grid-column:1/-1;}
.checkline{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink-2);}
.checkline input{width:20px;height:20px;min-height:0;flex:0 0 20px;margin-top:2px;accent-color:var(--accent);}

/* Numbered sections give the long form a visible spine. */
.form-section{border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 18px;margin-bottom:16px;background:#fff;}
@media (min-width:768px){ .form-section{padding:20px 22px 22px;} }
.form-section > h2{display:flex;align-items:center;gap:10px;font-size:16.5px;margin-bottom:16px;}
.stepnum{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:13.5px;font-weight:700;flex:0 0 28px;}

/* Big tappable either/or choices (airport direction, one way / round trip). */
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
/* .field label's mono-uppercase styling must not leak into these. */
.field label.choice,.choice{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-weight:400;font-size:14px;}
.choice{position:relative;display:block;cursor:pointer;}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;min-height:0;cursor:pointer;}
.choice span{display:block;border:1.5px solid var(--field-line);border-radius:var(--r-sm);padding:12px 14px;background:var(--field-bg);transition:all .15s ease;}
.choice b{display:block;font-size:14.5px;color:var(--navy);}
.choice small{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;}  /* holds 4.5:1 even on the pink checked state */
.choice input:checked + span{border-color:var(--accent-dark);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-dark) inset;}
.choice input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px;}
.field .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;}

.loc-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.pin-state{font-size:12.5px;color:var(--ok);font-weight:600;}
.map-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;}
.btn-lg{padding:16px 30px;font-size:16px;}

.booking-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;}
.booking-foot .note{font-size:12.5px;color:var(--muted);flex:1 1 220px;}

/* ---------------------------------------------------------------- SECTIONS */
.section{padding:44px 0;}
@media (min-width:768px){ .section{padding:64px 0;} }
.section-soft{background:var(--bg-soft);}
.section-head{margin-bottom:24px;}
.section-head h2{font-size:clamp(23px,3.4vw,32px);margin-top:8px;}
.section-head p{color:var(--muted);font-size:15px;margin-top:8px;max-width:60ch;}
.section-head .row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.section-head .row a{font-size:14px;font-weight:600;white-space:nowrap;}

/* trust strip */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:28px;}
@media (min-width:900px){ .trust{grid-template-columns:repeat(4,1fr);margin-top:34px;} }
.trust div{background:var(--bg-soft);padding:15px 16px;}
.trust b{display:block;font-family:var(--font-display);font-size:14px;color:var(--navy);}
.trust span{font-size:12.5px;color:var(--muted);}

/* ---------------------------------------------------------------- CARDS */
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr 1fr;}
@media (min-width:640px){ .grid-2{grid-template-columns:1fr 1fr;} .grid-3{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} }

.service-card{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:18px;color:inherit;text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease;
}
.service-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);text-decoration:none;}
.service-card .ic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:12px;color:var(--accent-dark);}
.service-card b{display:block;font-family:var(--font-display);font-size:16px;color:var(--navy);font-weight:700;}
.service-card span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.5;}
.service-card.is-dark{background:var(--navy);border-color:var(--navy);}
.service-card.is-dark b{color:#fff;}
.service-card.is-dark span{color:#9FB8CA;}
.service-card.is-dark .ic{background:rgba(255,255,255,.12);color:#FF9FCB;}

/* vehicle card */
.vehicle-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s ease,box-shadow .18s ease;}
.vehicle-card:hover{border-color:#CBD8E3;box-shadow:var(--shadow-sm);}
.vehicle-card .photo{position:relative;aspect-ratio:16/10;background:var(--bg-soft);overflow:hidden;}
.vehicle-card .photo img{width:100%;height:100%;object-fit:cover;}
.vehicle-card .photo .placeholder{width:100%;height:100%;display:grid;place-items:center;color:#4A5B6A;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(135deg,#EEF3F7,#E2EAF1);}
.vehicle-card .badge{position:absolute;top:10px;left:10px;background:rgba(10,45,69,.92);color:#fff;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;padding:5px 9px;border-radius:6px;}
.vehicle-card .body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1;}
.vehicle-card h3{font-size:17px;}
.vehicle-card h3 a{color:var(--navy);text-decoration:none;}
.vehicle-card h3 a:hover{color:var(--accent-dark);}
.vehicle-card .specs{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--muted);margin-top:8px;}
.vehicle-card .driver{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ok);margin-top:10px;}
.vehicle-card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2);}
.vehicle-card .price{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--navy);line-height:1.2;}
.vehicle-card .price small{display:block;font-family:var(--font-body);font-size:11px;font-weight:400;color:var(--muted);}
.vehicle-card .quote{font-size:13px;font-weight:700;color:var(--accent-dark);line-height:1.25;}
.vehicle-card .quote small{display:block;font-weight:400;font-size:11px;color:var(--muted);}

/* split panels */
.panel{position:relative;min-height:190px;border-radius:var(--r);overflow:hidden;display:flex;}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;}
/* The scrim used to fade to .25 at the far edge, which looked good over the
   dark photos we happen to have today and would have failed the moment a
   light one was uploaded: white text over a light photo at that alpha is
   1.7:1. The gradient still reads as a gradient, but its weakest point now
   holds 4.5:1 for every colour used on it even if the photo behind is pure
   white — white 9.5:1, the body grey 5.7:1, the link pink 5.0:1. */
.panel .overlay{position:relative;z-index:2;background:linear-gradient(95deg,rgba(7,32,51,.95) 0%,rgba(7,32,51,.90) 55%,rgba(7,32,51,.82) 100%);padding:24px;display:flex;flex-direction:column;justify-content:center;width:100%;}
.panel h3{color:#fff;font-size:21px;}
.panel p{color:#B9CBD9;font-size:13.5px;margin:8px 0 14px;max-width:30ch;}
.panel a{color:#FF9FCB;font-weight:600;font-size:13.5px;}

/* CTA band */
.cta-band{background:var(--navy);color:#fff;}
.cta-band .wrap{padding-top:34px;padding-bottom:34px;display:flex;flex-direction:column;gap:18px;}
@media (min-width:900px){ .cta-band .wrap{flex-direction:row;align-items:center;justify-content:space-between;padding-top:42px;padding-bottom:42px;} }
.cta-band h2{color:#fff;font-size:clamp(21px,3vw,27px);}
.cta-band p{color:#9FB8CA;font-size:14.5px;margin-top:8px;max-width:52ch;}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto;}

/* ---------------------------------------------------------------- PAGE HEADER */
.page-head{background:var(--navy);color:#fff;padding:34px 0;}
@media (min-width:768px){ .page-head{padding:48px 0;} }
.page-head h1{color:#fff;font-size:clamp(26px,4.4vw,40px);font-weight:800;}
.page-head p{color:#A8C0D2;font-size:16px;margin-top:12px;max-width:62ch;}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:#7E9BB2;list-style:none;margin-bottom:12px;}
.breadcrumbs a{color:#A8C0D2;}
.breadcrumbs li::after{content:"›";margin-left:6px;color:#4E7391;}
.breadcrumbs li:last-child::after{content:"";}

/* ---------------------------------------------------------------- PROSE */
.prose{max-width:70ch;color:var(--ink-2);font-size:16px;}
.prose h2{font-size:24px;margin:32px 0 12px;}
.prose h3{font-size:19px;margin:26px 0 10px;}
.prose p{margin-bottom:16px;}
.prose ul,.prose ol{margin:0 0 18px 20px;padding-left:4px;}
.prose li{margin-bottom:7px;}
.prose strong{color:var(--ink);}
.prose a{text-decoration:underline;}
.prose table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:15px;}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;}
.prose th{background:var(--bg-soft);font-weight:600;color:var(--navy);}

/* ---------------------------------------------------------------- FAQ */
.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;}
.faq details{border-bottom:1px solid var(--line-2);}
.faq details:last-child{border-bottom:0;}
.faq summary{
  padding:16px 46px 16px 18px;cursor:pointer;font-weight:600;color:var(--navy);
  font-size:15.5px;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:18px;top:14px;font-size:22px;color:var(--accent);font-weight:400;line-height:1;}
.faq details[open] summary::after{content:"−";}
.faq summary:hover{background:var(--bg-soft);}
.faq .answer{padding:0 18px 18px;color:var(--ink-2);font-size:15px;}

/* ---------------------------------------------------------------- ALERTS */
.alert{border-radius:var(--r);padding:14px 16px;font-size:14.5px;display:flex;gap:11px;align-items:flex-start;margin-bottom:18px;}
.alert-error{background:var(--crit-soft);color:var(--crit);border:1px solid rgba(179,40,68,.22);}
.alert-ok{background:var(--ok-soft);color:var(--ok);border:1px solid rgba(11,122,86,.22);}
.alert-info{background:#E5EFFA;color:#1D5FA8;border:1px solid rgba(29,95,168,.2);}
.alert ul{margin:6px 0 0 18px;}

/* ---------------------------------------------------------------- SUCCESS / REFERENCE */
.ref-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;max-width:640px;}
.ref-card .top{background:var(--ok-soft);border-bottom:1px solid rgba(11,122,86,.18);padding:22px;}
.ref-card .top h1{font-size:24px;color:var(--ok);}
.ref-card .top p{color:#2C6B55;font-size:14.5px;margin-top:6px;}
.ref-number{font-family:var(--font-mono);font-size:23px;font-weight:600;color:var(--navy);letter-spacing:.02em;background:var(--bg-soft);border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px 16px;display:inline-block;margin-top:14px;}
.summary-list{list-style:none;}
.summary-list li{display:flex;gap:14px;padding:11px 22px;border-bottom:1px solid var(--line-2);font-size:14.5px;}
.summary-list li:last-child{border-bottom:0;}
.summary-list .k{flex:0 0 130px;color:var(--muted);font-size:13px;}
.summary-list .v{color:var(--ink);font-weight:500;}

/* ---------------------------------------------------------------- FOOTER */
.site-footer{background:var(--navy-deep);color:#9FB8CA;font-size:14.5px;padding-top:40px;}
.site-footer h2{color:#fff;font-size:14px;font-family:var(--font-display);letter-spacing:.02em;margin-bottom:14px;}
.site-footer a{color:#9FB8CA;text-decoration:none;}
.site-footer a:hover{color:#fff;text-decoration:underline;}
.footer-grid{display:grid;gap:30px;padding-bottom:32px;}
@media (min-width:640px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px;} }
.footer-grid ul{list-style:none;display:grid;gap:9px;}
.footer-brand img{width:160px;background:#fff;border-radius:8px;padding:8px 10px;}
.footer-brand p{margin-top:14px;font-size:14px;max-width:34ch;}
.footer-contact li{display:flex;gap:9px;align-items:flex-start;}
.newsletter-form{display:grid;gap:10px;margin-top:12px;}
.newsletter-form input{width:100%;padding:12px 13px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:14.5px;min-height:46px;}
.newsletter-form input::placeholder{color:#6E8CA5;}
.newsletter-form input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.11);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:18px 0 28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:16px;list-style:none;}
@media (max-width:767px){ .site-footer{padding-bottom:76px;} }

/* mobile sticky action bar */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;background:#fff;
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);
  box-shadow:0 -6px 20px -10px rgba(10,45,69,.28);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;font-size:11.5px;font-weight:600;color:var(--navy);text-decoration:none;}
/* accent-dark, not accent: white on #E0357F is 4.21:1, just under the bar,
   and this is the single most-tapped control on a phone. */
.mobile-bar a.is-primary{background:var(--accent-dark);color:#fff;}
@media (min-width:768px){ .mobile-bar{display:none;} }

/* utility */
.stack{display:grid;gap:16px;}
.muted{color:var(--muted);}
.small{font-size:13.5px;}
.center{text-align:center;}
.mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);}
.pill-ok{background:var(--ok-soft);color:var(--ok);}
.pill-warn{background:var(--warn-soft);color:var(--warn);}
.table-scroll{overflow-x:auto;}

/* ---------------------------------------------------------------------
   Rate tables
   A price list has to survive a phone screen, so the table scrolls inside
   its own box rather than pushing the page sideways.
   --------------------------------------------------------------------- */
.ratecard{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;}
.ratetable{width:100%;border-collapse:collapse;}
.ratetable thead th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);}
.ratetable thead th:last-child{text-align:right;}
.ratetable tbody th{text-align:left;font-weight:600;font-size:15px;color:var(--ink);padding:13px 16px;
  border-bottom:1px solid var(--line-2);vertical-align:top;}
.ratetable tbody th span{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45;}
.ratetable tbody td{text-align:right;white-space:nowrap;font-family:var(--font-display,inherit);font-weight:700;
  font-size:17px;color:var(--navy,#08243A);padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:top;}
.ratetable tr:last-child th,.ratetable tr:last-child td{border-bottom:none;}

.rateextras{padding:14px 16px;background:var(--surface-2);border-top:1px solid var(--line);}
.rateextras b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.rateextras ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.rateextras li{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--ink-2);}
.rateextras li em{font-style:normal;font-weight:600;color:var(--ink);white-space:nowrap;}

.ratenote{padding:12px 16px;margin:0;border-top:1px solid var(--line-2);line-height:1.55;}

@media (max-width:560px){
  .ratetable tbody th{font-size:14px;padding:11px 12px;}
  .ratetable tbody td{font-size:15px;padding:11px 12px;}
}

/* =====================================================================
   PHASE 4 — the customer account area
   Calm and legible rather than dashboard-like. Someone opening this is
   usually checking one fact: is my car confirmed?
   ===================================================================== */

/* ---- header entry points ---- */
.header-signin{font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap;padding:8px 4px;}
.header-signin:hover{color:var(--accent-dark);}
.header-account{display:none;align-items:center;gap:9px;text-decoration:none;padding:4px 6px;border-radius:var(--r-sm,8px);}
.header-account:hover{background:var(--bg-soft);text-decoration:none;}
.header-account .av{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:13px;flex:0 0 30px;}
.header-account .tx{display:flex;flex-direction:column;line-height:1.2;font-size:13.5px;font-weight:600;color:var(--ink);}
.header-account .tx small{font-size:11px;font-weight:400;color:var(--muted);}
@media (min-width:900px){ .header-account{display:flex;} }

/* ---- signed-out pages ---- */
.auth-section{padding:48px 0 72px;background:var(--bg-soft);min-height:60vh;}
.auth-wrap{max-width:460px;}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--r,14px);padding:28px 26px;box-shadow:var(--shadow-sm);}
.auth-card h1{font-size:26px;margin-bottom:6px;}
.auth-intro{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin-bottom:20px;}
.auth-card .field{margin-bottom:15px;}
.auth-card .btn-block{margin-top:6px;}
.auth-links{display:flex;flex-direction:column;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:14px;color:var(--ink-2);}
.auth-fineprint{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:14px;}
.auth-aside{text-align:center;font-size:13.5px;color:var(--muted);margin-top:20px;line-height:1.6;}
.code-input{font-family:var(--font-mono,monospace);font-size:22px;letter-spacing:.4em;text-align:center;}

.checkline{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-2);margin-bottom:16px;cursor:pointer;}
.checkline input{width:auto;margin-top:2px;flex:0 0 auto;}

/* ---- signed-in chrome ---- */
.account-head{padding:32px 0 64px;background:var(--bg-soft);min-height:70vh;}
.account-hello{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px;}
.account-hello h1{font-size:clamp(24px,3.6vw,32px);margin-top:8px;}
.account-hello .sub{color:var(--ink-2);font-size:15px;margin-top:6px;}
.account-who{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 8px 7px 12px;min-width:0;}
.account-who .av{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:13px;flex:0 0 34px;}
.account-who .tx{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.account-who .tx b{font-size:13.5px;}
.account-who .tx small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch;}

.account-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:22px;
  -webkit-overflow-scrolling:touch;scroll-padding-inline:15px;padding-right:15px;}
.account-tabs::-webkit-scrollbar{display:none;}
.account-tabs a{padding:11px 15px;font-size:14.5px;font-weight:600;color:var(--muted);white-space:nowrap;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;text-decoration:none;}
.account-tabs a:hover{color:var(--ink);text-decoration:none;}
.account-tabs a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--accent);}

.account-back{margin-bottom:14px;font-size:14px;}

/* ---- panels and cards ---- */
.account-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r,14px);padding:22px;margin-bottom:18px;min-width:0;}
.account-panel h2{font-size:17px;margin-bottom:14px;}
.account-panel.wide{max-width:none;}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.panel-head h2{margin-bottom:0;}
.panel-head a{font-size:14px;font-weight:600;}

.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px;}
.account-card{background:#fff;border:1px solid var(--line);border-radius:var(--r,14px);padding:18px 20px;min-width:0;}
.account-card .lb{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.account-card .v{display:block;font-family:var(--font-display,inherit);font-size:30px;font-weight:800;color:var(--navy);
  letter-spacing:-.03em;margin-top:6px;}
.account-card .v.small{font-size:18px;letter-spacing:-.01em;}

.account-alert{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid rgba(224,53,127,.24);border-radius:var(--r,14px);padding:16px 20px;margin-bottom:18px;}
.account-alert b{display:block;font-size:15.5px;color:var(--navy);}
.account-alert p{font-size:13.5px;color:var(--ink-2);margin-top:3px;}

.account-empty{text-align:center;padding:34px 18px;color:var(--muted);}
.account-empty b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px;}
.account-empty p{font-size:14px;line-height:1.6;max-width:46ch;margin:0 auto 16px;}

/* ---- trips ---- */
.trip-list{list-style:none;margin:0;padding:0;}
.trip-list li + li{border-top:1px solid var(--line-2);}
.trip-list a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;text-decoration:none;flex-wrap:wrap;}
.trip-list a:hover{text-decoration:none;}
.trip-list a:hover .tl-main b{color:var(--accent-dark);}
.tl-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 200px;}
.tl-main b{font-size:15px;color:var(--ink);}
.tl-main span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tl-side{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.tl-side small{font-size:12.5px;color:var(--muted);white-space:nowrap;}

.trip-cards{display:grid;gap:14px;}
.trip-card{background:#fff;border:1px solid var(--line);border-radius:var(--r,14px);padding:20px;min-width:0;}
.trip-card.needs-answer{border-color:rgba(224,53,127,.4);box-shadow:0 0 0 3px var(--accent-soft);}
.tc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line-2);}
.tc-head b{display:block;font-size:16px;}
.tc-head .mono{display:block;font-size:12px;color:var(--muted);margin-top:3px;}
.tc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;padding:16px 0;margin:0;}
.tc-facts > div{min-width:0;}
.tc-facts dt{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.tc-facts dd{font-size:14.5px;color:var(--ink);margin:3px 0 0;line-height:1.4;}
.tc-facts dd.amount{font-weight:700;color:var(--navy);}
.tc-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--line-2);}
.tc-nudge{font-size:13.5px;font-weight:600;color:var(--accent-dark);}

.account-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;font-size:14px;color:var(--muted);}

/* ---- one trip ---- */
.trip-detail{display:grid;gap:18px;grid-template-columns:1fr;}
@media (min-width:900px){ .trip-detail{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start;} }
.trip-detail > *{min-width:0;}

.detail-rows{margin:0;}
.detail-rows > div{display:flex;gap:16px;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-2);}
.detail-rows > div:last-child{border-bottom:none;}
.detail-rows dt{font-size:13px;color:var(--muted);flex:0 0 auto;}
.detail-rows dd{font-size:14.5px;color:var(--ink);margin:0;text-align:right;min-width:0;word-break:break-word;}
.detail-rows dd.amount{font-weight:700;color:var(--navy);}

.trip-timeline{list-style:none;margin:0;padding:0;position:relative;}
.trip-timeline li{position:relative;padding:0 0 16px 20px;}
.trip-timeline li::before{content:"";position:absolute;left:3px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.trip-timeline li:not(:last-child)::after{content:"";position:absolute;left:6.5px;top:15px;bottom:2px;width:1px;background:var(--line);}
.trip-timeline b{display:block;font-size:14px;color:var(--ink);}
.trip-timeline time{font-size:12.5px;color:var(--muted);}

.quote-panel{border-color:rgba(224,53,127,.3);}
.quote-lines{width:100%;border-collapse:collapse;margin-bottom:14px;}
.quote-lines thead th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--line);}
.quote-lines thead th.num,.quote-lines td.num{text-align:right;}
.quote-lines tbody th{text-align:left;font-weight:500;font-size:14.5px;color:var(--ink);padding:10px 0;
  border-bottom:1px solid var(--line-2);vertical-align:top;}
.quote-lines tbody th span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;}
.quote-lines tbody td{padding:10px 0;border-bottom:1px solid var(--line-2);white-space:nowrap;font-size:14.5px;vertical-align:top;}
.quote-lines td.discount{color:var(--ok);}
.quote-lines tfoot th{text-align:left;padding-top:12px;font-size:15px;}
.quote-lines tfoot td.grand{padding-top:12px;font-family:var(--font-display,inherit);font-size:20px;font-weight:800;
  color:var(--navy);white-space:nowrap;}
.quote-actions{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2);}
.quote-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 10px;}

.next-trip{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px;}
.next-trip b{display:block;font-size:17px;color:var(--navy);}
.next-trip span{display:block;font-size:14px;color:var(--ink-2);margin-top:3px;}
.next-trip .mono{font-size:12.5px;color:var(--muted);}

/* ---- addresses and profile ---- */
.address-layout{display:grid;gap:18px;grid-template-columns:1fr;}
@media (min-width:900px){ .address-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;} }
.address-layout > *{min-width:0;}

.address-list{list-style:none;margin:0;padding:0;}
.address-list li{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line-2);}
.address-list li:last-child{border-bottom:none;}
.address-list b{display:flex;align-items:center;gap:8px;font-size:15px;}
.address-list span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.5;}

.stack-buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px;}

.danger-panel{border-color:rgba(179,40,68,.28);}
.danger-panel h2{color:var(--crit);}
.btn.danger{color:var(--crit);border-color:rgba(179,40,68,.4);}
.btn.danger:hover{background:var(--crit-soft);}
.btn-danger{background:var(--crit);color:#fff;border-color:var(--crit);}
.btn-danger:hover{background:#96203a;color:#fff;}

.delete-facts{list-style:none;margin:0 0 22px;padding:0;}
.delete-facts li{padding:12px 0;border-bottom:1px solid var(--line-2);}
.delete-facts li:last-child{border-bottom:none;}
.delete-facts b{display:block;font-size:14px;color:var(--navy);margin-bottom:3px;}
.delete-facts span{display:block;font-size:14px;color:var(--ink-2);line-height:1.6;}
.delete-form{max-width:460px;padding-top:18px;border-top:1px solid var(--line);}
.delete-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}

/* Grid and flex children default to min-width:auto and will push the
   page sideways on a phone. Same containment rule as AdminWeb. */
.account-grid > *,.trip-cards > *,.tc-facts > *,.account-hello > *{min-width:0;}

/* The account chip narrows the header on a laptop; the phone number must
   not break across two lines because of it. */
.header-tel{white-space:nowrap;}

/* -------------------------------------------------------- HOW TO PAY */
.pay-methods{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--bg-soft);}
.pay-methods h2{font-size:19px;margin-bottom:4px;}
.pay-note{font-size:13.5px;color:var(--ink-2);margin-bottom:14px;}
.pay-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.pay-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;}
.pay-card b{display:block;font-size:14.5px;color:var(--navy);margin-bottom:8px;}
.pay-card dl{margin:0;}
.pay-card dl div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:13px;}
.pay-card dt{color:var(--muted);}
.pay-card dd{margin:0;font-weight:600;color:var(--ink);word-break:break-all;text-align:right;}
.pay-small{font-size:12.5px;color:var(--muted);margin-top:12px;}
.mono{font-family:var(--font-mono);}