/* ==========================================================================
   All American Limousine — Brenda's design, built out
   Navy #001c38 and gold #b87c3c sampled off her mockups, not guessed.

   Two measured corrections to the render's own maths, because her mockup puts
   white text on gold and that fails:
       white on #b87c3c   3.51:1   FAIL for button text
       navy  on #b87c3c   4.89:1   passes, and reads richer
       gold  on paper     3.36:1   FAIL for text, so text-gold is #8a5928 (5.69:1)
   The brand gold is unchanged as a fill. Only text colour moved.
   ========================================================================== */

.aalb{
  --navy:#001c38; --navy-2:#06294c; --ink:#00122a;
  /* Brenda, 2026-10-16: "update the gold text throughout the website to match the exact
     gold colour code used for the buttons." So gold text is now the button gold, #b87c3c,
     and --gold-ink exists only so this is one line to change rather than forty.
     Measured on the paper background: #b87c3c is 3.36:1, #8a5928 was 5.69:1. 3.36 clears
     the large-text bar (3:1) and misses the normal-text one (4.5:1), so the big display
     numbers are fine and the 13-15px uppercase labels are now below standard. Flagged to
     David. Put #8a5928 back here to undo it everywhere at once. */
  --gold:#b87c3c; --gold-ink:#b87c3c; --gold-hi:#d9a862; --gold-hover:#a06a30;
  /* Brand red, sampled off the logo shield. Brenda asked for red hovers, 2026-10-13.
     White on #bd2026 is 6.18:1, navy on it is only 2.78:1, so red always takes white. */
  --red:#bd2026; --red-hover:#9d1a1f; --red-ink:#a81c22;
  /* Gold as a headline on a light scrim. Only used at clamp(42px,5.2vw,52px) on the legal
     heroes, which is large text, so #b87c3c at 3.36:1 clears the 3:1 bar that applies to
     it. Narrower than the old #96612d, and correct for this one job - do not reuse this
     token for anything small. */
  --gold-on-light:#b87c3c;
  --paper:#fbfaf8; --panel:#f3efe8; --slate:#26384c; --mid:#5d6b7a;
  --line:#e3ddd3; --line-ui:#98a1aa; --on-navy:#c9d4e0;

  --t0:17px; --t1:21px; --t2:27px; --t3:33px; --t4:42px; --t5:52px; --t6:65px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  font-family:var(--body); font-size:var(--t0); line-height:1.6;
  color:var(--slate); background:var(--paper); -webkit-font-smoothing:antialiased;
}
.aalb *,.aalb *::before,.aalb *::after{box-sizing:border-box}
.aalb img{max-width:100%;height:auto;display:block}
.aalb h1,.aalb h2,.aalb h3{font-family:var(--display);font-weight:400;color:var(--navy);
  line-height:1.12;letter-spacing:-0.01em;text-wrap:balance;margin:0}
.aalb h1{font-size:clamp(var(--t4),6.5vw,var(--t6))}
.aalb h2{font-size:clamp(var(--t3),4.6vw,var(--t5))}
.aalb h3{font-family:var(--body);font-weight:600;font-size:var(--t1);letter-spacing:0}
.aalb p{margin:0}
.aalb a:focus-visible,.aalb button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* 24px at phone width, not 16. Brenda asked for the content to sit further right so the
   home page reads closer to the contact page, where text lands 48px in (16px wrap plus
   the white card's own 32px). Home sections are full-bleed bands with no card, so
   matching 48 exactly would cost 48px of a 375px line. 24 is the nudge. */
.aalb__wrap{max-width:1200px;margin:0 auto;padding:0 var(--s5)}
@media(min-width:768px){.aalb__wrap{padding:0 var(--s6)}}
.aalb__sec{padding:var(--s7) 0}
@media(min-width:768px){.aalb__sec{padding:var(--s9) 0}}
.aalb__sec--panel{background:var(--panel)}
.aalb__sec--navy{background:var(--navy);color:var(--on-navy)}
.aalb__sec--navy h2,.aalb__sec--navy h3{color:#fff}
.aalb__centre{text-align:center}
.aalb__centre .aalb__lede{margin-left:auto;margin-right:auto}

.aalb__eyebrow{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 var(--s4);display:flex;align-items:center;gap:var(--s3)}
.aalb__centre .aalb__eyebrow{justify-content:center}
.aalb__eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:0 0 auto}
.aalb__centre .aalb__eyebrow::after{content:"";width:26px;height:1px;background:var(--gold)}
/* .aalb__sec--navy .aalb__eyebrow used to be grouped into this rule, which gave the fleet
   section's eyebrow the LEDE's styling: 21px, grey --mid, on navy. It read as a broken
   subheading rather than a gold label, and --mid on navy is far too dark to sit there.
   Found 2026-10-16 while checking Brenda's gold change. The eyebrow now keeps its own
   13px uppercase styling and takes the bright gold, same as the hero's. */
/* She asked for 13px on 2026-10-22. Not applied as asked: body text is 17px
   (--t0) and the uppercase eyebrow above the headline is already 13px, so a
   13px lede would be smaller than the paragraph beneath it and level with the
   kicker above it, which inverts the hierarchy she is trying to tidy. 18px is
   the visible reduction from 21px without going under body size. Going back to
   her with the numbers; one value to change if she still wants 13. */
.aalb__lede{font-size:18px;line-height:1.55;color:var(--mid);max-width:62ch}
.aalb__sec--navy .aalb__eyebrow{color:var(--gold-hi)}
.aalb__sec--navy .aalb__lede{color:var(--on-navy)}

/* Buttons ---------------------------------------------------------------- */
.aalb__btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.aalb__centre .aalb__btns{justify-content:center}
.aalb__btn{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s6);
  border-radius:3px;font-size:var(--t0);font-weight:600;text-decoration:none;
  border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
.aalb__btn--gold{background:var(--gold);color:var(--navy)}
.aalb__btn--gold:hover,.aalb__btn--gold:focus{background:var(--red);color:#fff}
.aalb__btn--ghost{background:transparent;color:var(--navy);border-color:var(--line-ui)}
.aalb__btn--ghost:hover,.aalb__btn--ghost:focus{border-color:var(--gold);background:#fff}
.aalb__hero .aalb__btn--ghost,.aalb__sec--navy .aalb__btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.aalb__hero .aalb__btn--ghost:hover,.aalb__hero .aalb__btn--ghost:focus,.aalb__sec--navy .aalb__btn--ghost:hover,.aalb__sec--navy .aalb__btn--ghost:focus{background:rgba(255,255,255,.12);border-color:#fff}

/* Header ----------------------------------------------------------------- */
/* Transparent, sitting inside the hero. It scrolls away with the hero rather
   than following you down, because a see-through bar over white body copy is
   unreadable. The mobile Book Now bar is what stays. */
.aalb__bar{
  position:absolute;top:0;left:0;right:0;z-index:5;
  background:transparent;border-bottom:1px solid rgba(255,255,255,.18);
  transition:background .2s ease, border-color .2s ease, backdrop-filter .2s ease
}
.aalb__bar:hover,.aalb__bar:focus-within{
  background:rgba(0,18,42,.74);
  border-bottom-color:rgba(255,255,255,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
/* The logo is navy and red artwork, which disappears on a dark photograph.
   White reads at any brightness the hero happens to have behind it. */
/* No filter any more. This used to force the old red-shield logo to a white silhouette,
   which was the only way to make it work on a dark bar. Brenda's logo arrived 2026-10-16
   and logo-2026-light.png is already the white wordmark with a GOLD eagle, so the old
   brightness(0) invert(1) would flatten the eagle to white and throw her brand colour away. */
.aalb__bar .aalb__logo img{filter:none}
.aalb__bar .aalb__nav a,.aalb__bar .aalb__tel{color:#fff}
/* Hover stays WHITE with a gold rule under it. Gold text on the transparent
   header measures 2.49:1 against the brightest part of the photograph and
   fails; white is 5.38:1. The underline carries the brand colour instead,
   where contrast does not apply to it. */
.aalb__bar .aalb__nav a:hover,.aalb__bar .aalb__nav a[aria-current]{
  color:#fff;box-shadow:inset 0 -2px 0 var(--gold-hi)}
.aalb__bar .aalb__tel:hover{color:#fff;box-shadow:inset 0 -2px 0 var(--gold-hi)}
/* Once the bar has its hover wash behind it, gold reads fine again. */
.aalb__bar:hover .aalb__nav a:hover,.aalb__bar:hover .aalb__nav a[aria-current]{color:var(--gold-hi)}
.aalb__bar:hover .aalb__tel:hover{color:var(--gold-hi)}

/* A page without a hero behind it still needs a readable bar. */
.aalb__bar--solid{position:static;background:var(--navy);border-bottom:0}
.aalb__bar--solid:hover{background:var(--navy);backdrop-filter:none}

/* Light variant, for a bright hero. Brenda's booking page uses this: the
   photograph there is daylight, so a see-through dark bar would be wrong and
   the logo can keep its real colours. */
.aalb__bar--light{position:static;background:#fff;border-bottom:1px solid var(--line);backdrop-filter:none}
.aalb__bar--light:hover,.aalb__bar--light:focus-within{background:#fff;backdrop-filter:none;border-bottom-color:var(--line)}
.aalb__bar--light .aalb__logo img{filter:none}
.aalb__bar--light .aalb__nav a,.aalb__bar--light .aalb__tel{color:var(--slate)}
.aalb__bar--light .aalb__nav a:hover,.aalb__bar--light .aalb__nav a[aria-current]{color:var(--gold-ink)}
.aalb__bar--light .aalb__tel:hover{color:var(--gold-ink)}
@media(max-width:860px){.aalb__bar--light .aalb__nav{border-top-color:var(--line)}}
.aalb__bar-in{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding-top:var(--s4);padding-bottom:var(--s4)}
.aalb__logo{display:block;flex:0 0 auto;order:1}
/* Sized into a box rather than by height alone. The two logo files are different shapes
   (the light lockup is 7.4:1, the dark one 3.1:1), so a fixed height would make the header
   mark visibly bigger on some pages than others. Fitting both inside one box keeps the
   footprint even across the site. */
.aalb__logo img{height:auto;width:auto;max-width:224px;max-height:46px;object-fit:contain}
.aalb__nav{display:flex;gap:var(--s5);margin-left:auto;flex-wrap:wrap;order:2}
.aalb__nav a{color:var(--slate);text-decoration:none;font-size:15px;font-weight:500}
.aalb__nav a:hover,.aalb__nav a[aria-current]{color:var(--gold-ink)}
.aalb__tel{color:var(--navy);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;order:3}
.aalb__bar .aalb__btn{order:4;padding:var(--s3) var(--s5)}
@media(max-width:860px){
  .aalb__logo img{max-width:176px;max-height:36px}
  .aalb__bar .aalb__btn{display:none}
  .aalb__nav{order:4;width:100%;margin-left:0;gap:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.18)}
  .aalb__tel{margin-left:auto}
}

/* Sticky Book Now, phones only ------------------------------------------- */
.aalb__sticky{display:none}
@media(max-width:860px){
  .aalb__sticky{display:block;position:sticky;top:0;z-index:60;background:var(--gold);
    color:var(--navy);text-align:center;text-decoration:none;font-weight:600;
    padding:var(--s4);box-shadow:0 2px 10px rgba(0,28,56,.22)}
  .aalb__sticky:hover{background:var(--red);color:#fff}
}

/* Hero ------------------------------------------------------------------- */
.aalb__hero{position:relative;background:var(--navy);
  background-image:url("https://carservice-atlanta.com/wp-content/uploads/2026/10/hero-airport.jpg");
  background-size:cover;background-position:center 58%;color:#fff}
.aalb__hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(0,18,42,.34) 0%, rgba(0,18,42,0) 60%),
  linear-gradient(to top, rgba(0,18,42,.40) 0%, rgba(0,18,42,0) 46%),
  rgba(0,18,42,.62)}
.aalb__hero > *{position:relative;z-index:1}
.aalb__hero h1{color:#fff}
/* A lighter gold over the photograph only. #d9a862 measures 3.87:1 against the
   brightest part of the hero, which clears the 3:1 bar for display type but sits
   under the 4.5 comfort line. #e5bd85 is 4.76:1 and still reads gold. On navy,
   where everything else uses gold, the darker one is fine and stays. */
.aalb__hero h1 em{font-style:normal;color:#e5bd85;display:block}
.aalb__hero .aalb__eyebrow{color:#e5bd85}
.aalb__hero .aalb__lede{color:#dfe6ee}
/* Vertical padding as longhands, NOT the shorthand. This element also carries .aalb__wrap,
   and "padding: X 0 Y" was resetting that wrap's left and right padding to zero - which is
   why the hero headline, the lede and the whole quote box sat hard against both screen
   edges at 390px while every section below them had a gutter. Measured before the fix:
   .aalb__hero h1 left=0, .aalb__sec--panel h2 left=16. That was Brenda's alignment report. */
.aalb__hero-grid{display:grid;gap:var(--s7);align-items:center;
  padding-top:calc(var(--s10) + var(--s4));padding-bottom:var(--s8)}
@media(min-width:1000px){
  .aalb__hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--s8);
    padding-top:calc(var(--s10) + var(--s7));padding-bottom:var(--s10)}
}

/* Quote widget ----------------------------------------------------------- */
.aalb__quote{background:#fff;border-radius:6px;padding:var(--s5);box-shadow:0 18px 50px rgba(0,18,42,.34);color:var(--slate)}
.aalb__qtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1);
  background:var(--panel);border-radius:4px;padding:var(--s1);margin-bottom:var(--s5)}
.aalb__qtab{border:0;background:transparent;border-radius:3px;padding:var(--s3) var(--s2);
  font:600 15px/1 var(--body);color:var(--mid);cursor:pointer}
.aalb__qtab[aria-selected="true"]{background:var(--navy);color:#fff}
.aalb__qrow{display:grid;gap:var(--s3);margin-bottom:var(--s3)}
@media(min-width:420px){.aalb__qrow--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.aalb__field{display:flex;align-items:center;gap:var(--s3);border:1px solid var(--line-ui);
  border-radius:4px;padding:var(--s3) var(--s4);background:#fff}
.aalb__field svg{flex:0 0 auto;color:var(--gold-ink)}
/* 2026-11-02: a flex child keeps min-width:auto, so the <input>'s intrinsic size
   (roughly 20 characters) set the floor for the whole quote card and pushed the
   page wider than a 390px screen. Everything else is width:100%, so it stretched
   to match and the header controls went off the right edge with it. Same fix as
   .aalb__citem above. */
.aalb__field{min-width:0}
.aalb__field > *{min-width:0}
.aalb__field input,.aalb__field select{min-width:0}
/* Brenda's copy document sets these labels in capitals. Done here rather than by typing
   them in capitals in the markup, so the text stays ordinary words for a screen reader
   and the styling is one line to change if she wants it back. */
.aalb__field label{display:block;font-size:11px;color:var(--mid);letter-spacing:.07em;
  text-transform:uppercase;font-weight:600}
.aalb__field input,.aalb__field select{border:0;padding:0;width:100%;background:transparent;
  font:500 15px/1.3 var(--body);color:var(--navy)}
.aalb__field input:focus,.aalb__field select:focus{outline:none}
.aalb__field:focus-within{border-color:var(--gold)}
.aalb__quote .aalb__btn{width:100%;justify-content:center;margin-top:var(--s2)}
.aalb__qhead{font-family:var(--display);font-size:var(--t2);color:var(--navy);
  line-height:1.1;margin:0 0 var(--s4)}
.aalb__qnote{margin-top:var(--s3);font-size:13px;color:var(--mid);text-align:center}
/* The document gives this note a long form and a short one. The long sentence is dead
   weight on a 375px line, so the first clause only appears once there is room for it. */
.aalb__qnote-wide{display:none}
@media(min-width:768px){.aalb__qnote-wide{display:inline}}

/* SMS strip, between the trust bar and the legacy panel. */
.aalb__sms{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aalb__sms-in{display:flex;gap:var(--s4);align-items:flex-start;justify-content:center;
  padding-top:var(--s5);padding-bottom:var(--s5)}
.aalb__sms-in svg{flex:0 0 auto;color:var(--gold-ink);margin-top:2px}
.aalb__sms-in p{margin:0;font-size:15px;line-height:1.55;color:var(--slate);max-width:62ch}
@media(min-width:768px){.aalb__sms-in{align-items:center}.aalb__sms-in svg{margin-top:0}}

/* Trust bar -------------------------------------------------------------- */
.aalb__trust{background:var(--navy);color:#fff}
/* Same shorthand trap as .aalb__hero-grid above: this also carries .aalb__wrap. */
.aalb__trust-in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);
  padding-top:var(--s6);padding-bottom:var(--s6)}
@media(min-width:620px){.aalb__trust-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1000px){.aalb__trust-in{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}}
.aalb__trust-i{display:flex;align-items:center;gap:var(--s4);padding:0 var(--s5)}
@media(min-width:1000px){.aalb__trust-i + .aalb__trust-i{border-left:1px solid rgba(255,255,255,.16)}}
.aalb__trust-i svg{flex:0 0 auto;color:var(--gold-hi)}
.aalb__trust-i strong{display:block;font-size:16px;font-weight:600;color:#fff}
.aalb__trust-i span{display:block;font-size:14px;color:var(--on-navy);line-height:1.4}

/* Legacy ----------------------------------------------------------------- */
.aalb__split{display:grid;gap:var(--s7);align-items:center}
@media(min-width:900px){.aalb__split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8)}}
.aalb__figure{position:relative;border-radius:5px;overflow:hidden;min-height:20rem}
.aalb__figure img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.aalb__figure-cap{position:relative;z-index:1;padding:var(--s7) var(--s6);color:#fff;
  background:linear-gradient(to top, rgba(0,18,42,.90) 0%, rgba(0,18,42,.25) 70%, rgba(0,18,42,.05) 100%);
  min-height:20rem;display:flex;flex-direction:column;justify-content:flex-end}
.aalb__figure-cap b{display:block;font-family:var(--display);font-size:var(--t5);line-height:1;color:var(--gold-hi)}
.aalb__figure-cap i{display:block;font-style:normal;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;margin:var(--s2) 0 var(--s4)}
.aalb__figure-cap span{display:block;font-size:15px;color:#e7ecf2;line-height:1.5}

/* Service cards ---------------------------------------------------------- */
.aalb__cards{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr);margin-top:var(--s7)}
@media(min-width:620px){.aalb__cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1080px){.aalb__cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4)}}
.aalb__card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:5px;overflow:hidden;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.aalb__card:hover{border-color:var(--gold);box-shadow:0 10px 30px rgba(0,28,56,.10);transform:translateY(-2px)}
/* No overflow:hidden here. .aalb__card-ico hangs 16px BELOW this box by design, and
   clipping the box sliced the gold circle in half - visible in Brenda's 2026-10-16
   screenshot of the City-to-city card. The image cannot overflow anyway: it is
   width/height 100% with object-fit:cover inside a fixed aspect ratio, and the rounded
   top corners come from .aalb__card's own overflow:hidden one level up. */
.aalb__card-img{position:relative;aspect-ratio:3/2;background:var(--panel)}
.aalb__card-img img{width:100%;height:100%;object-fit:cover}
.aalb__card-ico{position:absolute;left:var(--s4);bottom:calc(var(--s4) * -1);width:40px;height:40px;
  border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;
  color:var(--navy);box-shadow:0 4px 12px rgba(0,28,56,.28)}
.aalb__card-body{padding:var(--s7) var(--s5) var(--s5)}
.aalb__card h3{font-size:18px;margin-bottom:var(--s2)}
.aalb__card p{font-size:15px;color:var(--mid);line-height:1.5}
.aalb__more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4);
  color:var(--gold-ink);font-weight:600;font-size:15px}

/* Fleet ------------------------------------------------------------------ */
.aalb__chips{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s6)}
.aalb__chip{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
  border-radius:999px;padding:var(--s2) var(--s5);font:500 15px/1.4 var(--body);cursor:pointer}
.aalb__chip[aria-pressed="true"]{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.aalb__fleetgrid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);margin-top:var(--s7)}
@media(min-width:620px){.aalb__fleetgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1000px){.aalb__fleetgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.aalb__veh{background:var(--navy-2);border:1px solid rgba(255,255,255,.12);border-radius:5px;padding:var(--s5);text-align:center}
.aalb__veh-ph{aspect-ratio:16/9;border:1px dashed rgba(255,255,255,.3);border-radius:4px;
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4)}
.aalb__veh-ph span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.aalb__veh h3{font-size:17px;color:#fff;margin-bottom:var(--s2)}
.aalb__veh-price{font-family:var(--display);font-size:var(--t2);color:var(--gold-hi);line-height:1}
.aalb__veh-price span{font-family:var(--body);font-size:13px;color:var(--on-navy);display:block;margin-top:var(--s1)}
.aalb__veh-cap{font-size:14px;color:var(--on-navy);margin-top:var(--s3)}

/* How it works ----------------------------------------------------------- */
.aalb__steps{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr);margin-top:var(--s7);text-align:center}
@media(min-width:620px){.aalb__steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1080px){.aalb__steps{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s4)}}
.aalb__step-ico{width:54px;height:54px;border-radius:50%;background:var(--panel);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4);color:var(--gold-ink)}
.aalb__step strong{display:block;color:var(--navy);font-size:16px;font-weight:600;margin-bottom:var(--s2)}
.aalb__step span{display:block;color:var(--mid);font-size:15px;line-height:1.5}

/* Closing CTA ------------------------------------------------------------ */
.aalb__close{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.aalb__close{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.aalb__close-img{min-height:20rem;background-size:cover;background-position:center}
.aalb__close-txt{background:var(--panel);padding:var(--s8) var(--s6)}
@media(min-width:900px){.aalb__close-txt{padding:var(--s9) var(--s8)}}

/* Footer ----------------------------------------------------------------- */
.aalb__foot{background:var(--navy);color:var(--on-navy);padding:var(--s8) 0 var(--s6)}
.aalb__foot-grid{display:grid;gap:var(--s7);grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.aalb__foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1000px){.aalb__foot-grid{grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr) 1.2fr}}
.aalb__foot h4{font:600 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin:0 0 var(--s4)}
.aalb__foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.aalb__foot a{color:var(--on-navy);text-decoration:none;font-size:15px}
.aalb__foot a:hover{color:var(--gold-hi)}
.aalb__foot-blurb{font-size:15px;line-height:1.6;margin-top:var(--s4);max-width:34ch}
.aalb__foot-tag{font-family:var(--display);color:var(--gold-hi);font-size:var(--t1);margin-top:var(--s4)}
.aalb__foot-base{border-top:1px solid rgba(255,255,255,.14);margin-top:var(--s7);
  padding-top:var(--s5);font-size:13px;display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between}

/* Staging notice --------------------------------------------------------- */
.aalb__staging{background:#8a6d1f;color:#fff;font-size:14px;padding:var(--s3) var(--s4);text-align:center}
.aalb__staging b{font-weight:600}

/* ==========================================================================
   Booking page
   ========================================================================== */
.aalb__bhero{
  position:relative;background:var(--paper);
  /* Veil measured against the real photograph: .96 at the left easing to .70
     by 55% holds navy text at 8.41:1 while the picture still reads. A flat
     veil washes the photo out; a steeper one drops the text to 6:1. */
  /* Left third is clean paper so the words sit on nothing, then the veil
     falls away and the photograph takes the right. Her mockup does the same:
     the subject lives on the right, the type never crosses it. */
  background-image:
    linear-gradient(90deg,
      rgba(251,250,248,1) 0%,
      rgba(251,250,248,.99) 28%,
      rgba(251,250,248,.62) 50%,
      rgba(251,250,248,.14) 72%,
      rgba(251,250,248,0) 100%),
    url("https://carservice-atlanta.com/wp-content/uploads/2026/10/meet-greet.jpg");
  background-size:cover;background-position:72% 22%;
  color:var(--slate);border-bottom:1px solid var(--line);
  /* Tall enough that the photograph is a scene rather than a sliver. A short
     band crops the subject's head off at any sensible focal point. */
  /* No flex here: the header is a CHILD of this section, so making it a flex
     container lays the header and the content out side by side. Height comes
     from the inner block instead. */
  padding:0 0 calc(var(--s8) + var(--s7))
}
@media(min-width:768px){.aalb__bhero{padding:0 0 calc(var(--s9) + var(--s7))}}
.aalb__bhero-in{display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(13rem,20vw,19rem);padding-top:var(--s7)}
.aalb__bhero h1{color:var(--navy);font-size:clamp(var(--t4),6vw,var(--t6))}
.aalb__bhero p{color:var(--mid);font-size:var(--t1);margin-top:var(--s3)}

/* minmax(0,1fr), never a bare 1fr. A bare 1fr track keeps min-width:auto, so the widest
   unbreakable thing inside sets the track width and the whole column grows past the
   viewport. That is what was giving the booking page 21px of sideways scroll at 390px:
   measured .aalb__bform and .aalb__rail at 372.4px wide inside a 327px content box.
   Same bug, same fix, as .aalb__cgrid on the contact page. */
.aalb__booking{display:grid;gap:var(--s7);grid-template-columns:minmax(0,1fr);align-items:start;margin-top:calc(var(--s8) * -1)}
@media(min-width:1000px){.aalb__booking{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:var(--s8)}}

.aalb__bform{background:#fff;border:1px solid var(--line);border-radius:6px;padding:var(--s6)}
@media(min-width:768px){.aalb__bform{padding:var(--s7)}}
.aalb__bh{font-family:var(--display);font-size:var(--t2);color:var(--navy);margin:0}
.aalb__bsub{color:var(--mid);font-size:15px;margin:var(--s2) 0 var(--s5)}
.aalb__hint{font-size:13px;color:var(--mid);margin-top:var(--s3)}
.aalb__bsubmit{width:100%;justify-content:center;margin-top:var(--s6);font-size:var(--t1);padding:var(--s5)}

/* Flight block ----------------------------------------------------------- */
.aalb__flight{border:1px solid var(--line);border-radius:5px;padding:var(--s5);margin-top:var(--s5);background:var(--paper)}
.aalb__flight-head{display:flex;gap:var(--s5);align-items:flex-start;justify-content:space-between}
.aalb__flight h3{font-size:17px;color:var(--navy)}
.aalb__flight h3 span{font-weight:400;color:var(--mid);font-size:14px;text-transform:lowercase}
.aalb__flight-head p{font-size:14px;color:var(--mid);margin-top:var(--s2);max-width:52ch}
.aalb__flight-body{margin-top:var(--s5)}
.aalb__switch{position:relative;flex:0 0 auto;width:52px;height:30px;cursor:pointer}
.aalb__switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.aalb__switch span{position:absolute;inset:0;background:var(--line-ui);border-radius:999px;transition:background .15s}
.aalb__switch span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;
  background:#fff;border-radius:50%;transition:transform .15s}
.aalb__switch input:checked + span{background:var(--gold)}
.aalb__switch input:checked + span::after{transform:translateX(22px)}
.aalb__switch input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}

/* Add-ons ---------------------------------------------------------------- */
.aalb__addons{display:grid;gap:var(--s3)}
.aalb__addon{display:flex;align-items:center;gap:var(--s4);border:1px solid var(--line);
  border-radius:5px;padding:var(--s4) var(--s5);cursor:pointer;transition:border-color .15s,background .15s}
.aalb__addon:hover{border-color:var(--gold)}
.aalb__addon:has(input:checked){border-color:var(--gold);background:#fdf8f1}
.aalb__addon input{width:20px;height:20px;accent-color:var(--gold);flex:0 0 auto}
.aalb__addon-t{flex:1}
.aalb__addon-t strong{display:block;color:var(--navy);font-size:16px;font-weight:600}
.aalb__addon-t em{display:block;font-style:normal;color:var(--mid);font-size:14px;margin-top:2px}
.aalb__addon-p{font-family:var(--display);font-size:var(--t1);color:var(--gold-ink);white-space:nowrap;text-align:right}
.aalb__addon-p i{display:block;font-family:var(--body);font-style:normal;font-size:12px;color:var(--mid)}

/* Right rail ------------------------------------------------------------- */
.aalb__rail{display:grid;gap:var(--s4)}
@media(min-width:1000px){.aalb__rail{position:sticky;top:var(--s5)}}
.aalb__railcard{background:#fff;border:1px solid var(--line);border-radius:6px;padding:var(--s5)}
.aalb__railcard--soft{background:var(--panel);border-color:#e6ded1}
.aalb__railcard h3{font-size:17px;color:var(--navy);margin-bottom:var(--s4)}
.aalb__railcard p{font-size:14px;color:var(--mid);line-height:1.55}
.aalb__trip,.aalb__price{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);margin:0}
.aalb__trip dt,.aalb__price dt{font-size:14px;color:var(--mid)}
.aalb__trip dd,.aalb__price dd{margin:0;font-size:14px;color:var(--navy);font-weight:500;text-align:right}
.aalb__total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s4)}
.aalb__total span{font-size:16px;color:var(--navy);font-weight:600}
.aalb__total b{font-family:var(--display);font-size:var(--t3);color:var(--navy)}
.aalb__cancel{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s2);font-size:14px}
.aalb__cancel b{color:var(--navy)}
.aalb__help{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3);font-size:14px}
.aalb__help li{display:flex;align-items:center;gap:var(--s3);color:var(--gold-ink)}
.aalb__help a{color:var(--navy);text-decoration:none;word-break:break-word}
.aalb__help a:hover{color:var(--gold-ink)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Accepted payment marks ---------------------------------------------------
   Drawn here rather than hotlinked. These are stand-ins good enough to read at
   a glance; the official artwork from each network's brand centre should
   replace them before launch. PayPal is included because PayPal Checkout is
   the processor on this site, so it is a real way to pay, not just a logo. */
.aalb__cards-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.aalb__cardmark{width:46px;height:30px;border:1px solid var(--line);border-radius:4px;
  background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.aalb__cardmark svg{display:block}


/* Arrows between the steps, as her mockup has them. Decorative only, so they
   are hidden from assistive tech and vanish once the row wraps. */
.aalb__step{position:relative}
@media(min-width:1080px){
  .aalb__step + .aalb__step::before{
    content:"";position:absolute;left:calc(-1 * var(--s4) / 2 - 6px);top:27px;
    width:12px;height:12px;border-top:1.5px solid var(--line-ui);border-right:1.5px solid var(--line-ui);
    transform:rotate(45deg) translateY(-50%);opacity:.9
  }
}

/* Social row in the footer */
.aalb__social{display:flex;gap:var(--s3);margin-top:var(--s5)}
.aalb__social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.26);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--on-navy);transition:border-color .15s,color .15s,background .15s}
.aalb__social a:hover{border-color:var(--gold);color:var(--navy);background:var(--gold)}

/* ==========================================================================
   Contact page
   ========================================================================== */
.aalb__chero{margin:var(--s6) 0 0;border-radius:8px;overflow:hidden;position:relative;
  background:var(--navy);
  background-image:linear-gradient(90deg, rgba(0,18,42,.94) 0%, rgba(0,18,42,.72) 46%, rgba(0,18,42,.18) 100%),
    url("https://carservice-atlanta.com/wp-content/uploads/2026/10/hero-airport.jpg");
  background-size:cover;background-position:center 58%;
  padding:var(--s8) var(--s6);color:#fff}
@media(min-width:768px){.aalb__chero{padding:var(--s9) var(--s8);min-height:22rem;display:flex;flex-direction:column;justify-content:center}}
.aalb__chero h1{color:#fff;font-size:clamp(var(--t4),5.4vw,var(--t5))}
.aalb__chero h1 em{font-style:normal;color:#e5bd85;display:block}
.aalb__chero p{color:#dfe6ee;margin-top:var(--s4);max-width:46ch;line-height:1.55}

.aalb__cgrid{display:grid;gap:var(--s7);grid-template-columns:minmax(0,1fr);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:var(--s6);margin-top:var(--s6)}
@media(min-width:900px){.aalb__cgrid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s8);padding:var(--s8)}}
.aalb__cinfo h2{font-size:clamp(var(--t3),4vw,var(--t4))}
.aalb__cinfo > p{color:var(--mid);margin-top:var(--s4);line-height:1.6;max-width:40ch}
.aalb__citems{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;gap:var(--s6)}
.aalb__citem{display:flex;gap:var(--s4);align-items:flex-start;min-width:0}
.aalb__citem > div{min-width:0}
/* info@allamericanlimoservice.com is wider than a 390px column on its own */
.aalb__citem strong{overflow-wrap:anywhere}
.aalb__citem-ico{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--accent-wash,#f6efe3);
  display:flex;align-items:center;justify-content:center;color:var(--gold-ink)}
/* nowrap: "OUR LOCATION" was breaking after "OUR" on an iPhone while the longer "HOURS OF
   OPERATION" sat happily on one line. These labels are short by definition and a two-line
   13px label next to a 46px icon reads as a misalignment, which is what Brenda reported. */
.aalb__citem b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;white-space:nowrap}
.aalb__citem strong{display:block;font-size:var(--t0);color:var(--navy);font-weight:600;margin:2px 0;overflow-wrap:anywhere}
.aalb__citem span{display:block;font-size:14px;color:var(--mid);line-height:1.45}
.aalb__citem a{color:var(--navy);text-decoration:none}
.aalb__citem a:hover{color:var(--gold-ink)}

/* Gravity Forms, dressed to match. The real form 3, not a picture of one.
   GF's orbital theme sets a fixed control height from its own custom properties
   and clips overflow, so padding alone hid the select's text. These rules carry
   one id and two classes deliberately: the theme's own block is an inline
   <style> later in the document, so matching specificity loses. */
.aalb__cform #gform_wrapper_3.gform-theme.gform-theme--framework{
  --gf-color-primary:#001c38; --gf-color-primary-rgb:0,28,56;
  --gf-color-primary-darker:#00294f; --gf-color-primary-lighter:#1b3f63;
  --gf-color-primary-contrast:#ffffff; --gf-color-primary-contrast-rgb:255,255,255;
  --gf-color-in-ctrl-primary:#b87c3c; --gf-color-in-ctrl-primary-rgb:184,124,60;
  --gf-ctrl-border-color:#98a1aa; --gf-radius:5px;
  --gf-ctrl-label-color-primary:#26384c; --gf-ctrl-label-color-secondary:#26384c;
  margin:0}
.aalb__cform #gform_wrapper_3 .gform_fields{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
@media(min-width:620px){
  .aalb__cform #gform_wrapper_3 .gform_fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .aalb__cform #gform_wrapper_3 .gfield{grid-column:1/-1}
  .aalb__cform #gform_wrapper_3 #field_3_1,.aalb__cform #gform_wrapper_3 #field_3_2,
  .aalb__cform #gform_wrapper_3 #field_3_3,.aalb__cform #gform_wrapper_3 #field_3_4{grid-column:span 1}
}
.aalb__cform #gform_wrapper_3 .gfield_label{font:600 13px/1.3 var(--body);color:var(--slate);
  margin:0 0 var(--s2);display:block}
.aalb__cform #gform_wrapper_3 .gfield_required{color:var(--gold-ink);font-weight:500}
.aalb__cform #gform_wrapper_3 .gfield_description{font:400 13px/1.45 var(--body);color:var(--mid);
  padding:0;margin:0 0 var(--s2)}
.aalb__cform #gform_wrapper_3 input[type=text],.aalb__cform #gform_wrapper_3 input[type=email],
.aalb__cform #gform_wrapper_3 input[type=tel],.aalb__cform #gform_wrapper_3 select,
.aalb__cform #gform_wrapper_3 textarea{
  width:100%;height:auto;min-height:0;box-sizing:border-box;
  border:1px solid var(--line-ui);border-radius:5px;padding:12px 14px;
  font:400 16px/1.4 var(--body);color:var(--navy);background-color:#fff}
.aalb__cform #gform_wrapper_3 select{
  appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2326384c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.aalb__cform #gform_wrapper_3 textarea{min-height:9rem;resize:vertical;display:block}
.aalb__cform #gform_wrapper_3 input:focus,.aalb__cform #gform_wrapper_3 select:focus,
.aalb__cform #gform_wrapper_3 textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,124,60,.16)}
.aalb__cform #gform_wrapper_3 .gform_footer{margin:var(--s5) 0 0;padding:0}
.aalb__cform #gform_wrapper_3 .gform_footer .gform_button{
  width:100%;height:auto;background:var(--gold);color:var(--navy);border:0;border-radius:5px;
  padding:14px var(--s6);font:600 var(--t0)/1.2 var(--body);letter-spacing:.01em;
  cursor:pointer;transition:background .15s}
.aalb__cform #gform_wrapper_3 .gform_footer .gform_button:hover{background:var(--red);color:#fff}
.aalb__cform #gform_wrapper_3 .gform_validation_errors{border-radius:5px}

/* Partner panel */
.aalb__partner{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr);align-items:center;
  background:#eef3f8;border-radius:8px;padding:var(--s7) var(--s6);margin-top:var(--s6)}
@media(min-width:900px){.aalb__partner{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s7);padding:var(--s7) var(--s8)}}
.aalb__partner-ico{width:66px;height:66px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;color:var(--gold-hi)}
.aalb__partner h3{font-family:var(--display);font-weight:400;font-size:var(--t2);color:var(--navy);margin-bottom:var(--s2)}
.aalb__partner p{font-size:15px;color:var(--mid);line-height:1.55;max-width:56ch}
.aalb__partner-cta{border-left:0;padding-left:0}
@media(min-width:900px){.aalb__partner-cta{border-left:1px solid #d6e0ea;padding-left:var(--s7);min-width:17rem}}
.aalb__partner-cta b{display:block;color:var(--navy);font-size:var(--t0);font-weight:600;margin-bottom:var(--s2)}
.aalb__partner-cta p{font-size:14px;margin-bottom:var(--s4)}

/* Closing skyline band */
.aalb__priority{margin-top:var(--s7);position:relative;text-align:center;color:#fff;
  background:var(--navy);
  background-image:linear-gradient(rgba(0,18,42,.62),rgba(0,18,42,.62)),
    url("https://carservice-atlanta.com/wp-content/uploads/2026/10/hero-c-bluehour.jpg");
  background-size:cover;background-position:center 58%;padding:var(--s8) var(--s5)}
@media(min-width:768px){.aalb__priority{padding:var(--s9) var(--s6)}}
.aalb__priority-ico{width:52px;height:52px;border-radius:50%;background:var(--gold);
  display:flex;align-items:center;justify-content:center;color:var(--navy);margin:0 auto var(--s5)}
.aalb__priority h2{color:#fff;font-size:clamp(var(--t3),4.2vw,var(--t4))}
.aalb__priority p{color:#dbe3ec;margin:var(--s4) auto 0;max-width:56ch;line-height:1.6}


/* ----------------------------------------------------------------------------
   Hover states, 2026-10-13.

   Brenda reported buttons turning pink on hover. Nothing in this file was pink.
   The cause was that .aalb__card, .aalb__chip, .aalb__tab and .aalb__more never
   set a colour of their own, so they inherited the theme's link colour and its
   hover. Every one of them is explicit now, and the accent on hover is the logo
   red she asked for rather than the gold.
   ------------------------------------------------------------------------- */
.aalb__card{color:var(--slate)}
.aalb__card h3{color:var(--navy)}
.aalb__card:hover{border-color:var(--red)}
.aalb__card:hover h3{color:var(--red-ink)}
.aalb__card:hover .aalb__more{color:var(--red-ink)}
.aalb__more{color:var(--gold-ink)}
/* THE PINK, FOUND. hello-elementor/assets/css/reset.css ships:
     [type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,
     button:focus,button:hover{background-color:#c36;color:#fff}
   #c36 is the pink. Two reasons it outlived the first fix on 2026-10-15: it fires on
   :FOCUS as well as :hover, and on a phone a tap leaves focus sitting on the button, so
   the pink stays put after the finger lifts - which is exactly where Brenda still saw it,
   in Quick Booking, on mobile. Everything fixed last time answered :hover only. The
   second reason is .aalb__qtab is a bare <button> that had no state rule at all.

   :where() contributes nothing to specificity, so this lands at (0,1,1) - identical to
   the theme rule - and wins on load order alone, while every component rule below it
   still outranks it and gets to say what the state should actually look like. */
:where(.aalb) button:hover,:where(.aalb) button:focus,
:where(.aalb) [type=button]:hover,:where(.aalb) [type=button]:focus,
:where(.aalb) [type=submit]:hover,:where(.aalb) [type=submit]:focus{
  background-color:transparent;color:inherit}

/* Was #fff, which Brenda reported on 2026-10-16 as "the hover state in the Quick Booking
   section is now showing white". She was right and it was this line: the tab strip is
   already --panel (#f3efe8), so a white tab read as a pale blank blob rather than a
   state. The neutraliser above only had to stop the theme's pink, and anything this rule
   sets is what the hover actually looks like. A tint of the navy the selected tab uses
   previews what the tab is about to become instead. */
.aalb__qtab:hover,.aalb__qtab:focus{background:rgba(0,28,56,.07);color:var(--navy)}
.aalb__qtab[aria-selected="true"],
.aalb__qtab[aria-selected="true"]:hover,
.aalb__qtab[aria-selected="true"]:focus{background:var(--navy);color:#fff}

.aalb__chip:hover,.aalb__chip:focus{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.aalb__chip[aria-pressed="true"]:hover,
.aalb__chip[aria-pressed="true"]:focus{background:var(--red);border-color:var(--red);color:#fff}
.aalb__tab:hover,.aalb__tab:focus{color:var(--red-ink)}
.aalb__addon:hover{border-color:var(--red)}
.aalb__social a:hover{border-color:var(--red);background:var(--red);color:#fff}
.aalb__foot a:hover{color:#fff}
.aalb__nav a:hover{color:var(--red-ink)}
.aalb__bar--light .aalb__nav a:hover{color:var(--red-ink)}
.aalb__citem a:hover{color:var(--red-ink)}
.aalb__help a:hover{color:var(--red-ink)}

/* ----------------------------------------------------------------------------
   Legal pages: Privacy Policy and Terms and Conditions.
   Built to Brenda's two mockups, 2026-10-13.
   ------------------------------------------------------------------------- */
.aalb__lhero{position:relative;min-height:19rem;display:flex;align-items:center;
  background:var(--navy);overflow:hidden}
.aalb__lhero-bg{position:absolute;inset:0}
.aalb__lhero-bg img{width:100%;height:100%;object-fit:cover;object-position:center right}
/* The scrim has to stay opaque for the FULL width of the text block, not just the first
   third. The text column is max-width 34rem starting at the wrap edge, which reaches about
   46% across at desktop, and the old gradient had already fallen to .55 by 52% - so on the
   Fleet hero the lede sat over a brightly lit car and could not be read. Held near-opaque
   to 55% now, clear of the text, then faded out.
   On a phone the text runs almost the whole width, so a left-to-right fade cannot work at
   all; below 860px it becomes a flat wash instead. */
.aalb__lhero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(251,250,248,.97) 0%,rgba(251,250,248,.95) 46%,rgba(251,250,248,.86) 58%,rgba(251,250,248,.35) 74%,rgba(251,250,248,0) 88%)}
@media(max-width:860px){
  .aalb__lhero-bg::after{
    background:linear-gradient(180deg,rgba(251,250,248,.96) 0%,rgba(251,250,248,.93) 60%,rgba(251,250,248,.88) 100%)}
}
/* .aalb__lhero is a flex container, so .aalb__wrap is a flex item and sizes
   shrink-to-fit instead of filling the section. The wrap carries margin:0 auto,
   which then CENTRES that shrunken box: measured live at a 2545px viewport the
   section was 2545px and the wrap 470px with 1037px of margin either side, so the
   hero text sat dead centre of the section while being left-aligned inside its own
   box. That is Brenda item 20, reported 2026-10-20 and wrongly closed as "nothing
   to left-align" because the check was for text-align rather than a look at the
   page. It only shows on a wide monitor: at 1440px the wrap is near its 1200px
   max-width and the offset is small. width:100% puts the wrap back on the same
   gutter as every other section. */
.aalb__lhero > .aalb__wrap{width:100%}
.aalb__lhero-in{position:relative;z-index:1;padding:var(--s8) 0;max-width:34rem}
.aalb__lhero h1{font-size:clamp(var(--t4),5.2vw,var(--t5));color:var(--navy);line-height:1.08}
.aalb__lhero h1 em{font-style:normal;color:var(--gold-on-light);display:block}
.aalb__lhero p{color:var(--slate);margin-top:var(--s4);line-height:1.6;max-width:34ch}
@media(max-width:860px){
  .aalb__lhero{min-height:0}
  .aalb__lhero-bg::after{background:linear-gradient(180deg,rgba(251,250,248,.95),rgba(251,250,248,.9))}
  .aalb__lhero-in{padding:var(--s7) 0;max-width:none}
}

.aalb__lgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);
  padding:var(--s8) 0 var(--s9)}
@media(min-width:940px){
  .aalb__lgrid{grid-template-columns:17rem minmax(0,1fr);gap:var(--s8)}
}
.aalb__lnav{align-self:start;min-width:0}
@media(min-width:940px){.aalb__lnav{position:sticky;top:var(--s5)}}
.aalb__lnav h2{font-family:var(--display);font-weight:400;font-size:var(--t2);
  color:var(--navy);margin-bottom:var(--s4)}
.aalb__lnav ol{list-style:none;margin:0;padding:0;background:var(--panel);
  border-radius:6px;overflow:hidden}
.aalb__lnav a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:13px var(--s4);color:var(--slate);text-decoration:none;font-size:15px;
  border-left:3px solid transparent;border-bottom:1px solid rgba(0,28,56,.07)}
.aalb__lnav li:last-child a{border-bottom:0}
.aalb__lnav a:hover{color:var(--red-ink);background:rgba(189,32,38,.05)}
.aalb__lnav a[aria-current="true"]{background:#fff;border-left-color:var(--gold);
  color:var(--navy);font-weight:600}
.aalb__lnav svg{flex:0 0 auto;opacity:.5}

.aalb__laside{margin-top:var(--s6);padding:var(--s6);background:var(--panel);border-radius:6px}
.aalb__laside-ico{width:46px;height:46px;border-radius:10px;background:#fff;color:var(--gold-ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4)}
.aalb__laside h3{font-family:var(--display);font-weight:400;font-size:var(--t2);
  color:var(--navy);margin-bottom:var(--s3)}
.aalb__laside p{font-size:14px;color:var(--mid);line-height:1.55;margin-bottom:var(--s4)}
.aalb__laside a{display:flex;align-items:center;gap:var(--s3);color:var(--navy);
  text-decoration:none;font-size:14px;font-weight:500;margin-top:var(--s3);overflow-wrap:anywhere}
.aalb__laside a:hover{color:var(--red-ink)}

.aalb__lbody{min-width:0}
.aalb__lbody h2{font-size:clamp(var(--t3),4vw,var(--t4));color:var(--navy)}
.aalb__lstamp{font-size:14px;color:var(--mid);margin-top:var(--s3)}
.aalb__lintro{color:var(--slate);line-height:1.65;margin-top:var(--s4);max-width:68ch}
.aalb__lsec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);
  padding:var(--s6) 0;border-top:1px solid var(--line);scroll-margin-top:var(--s6)}
.aalb__lsec:first-of-type{margin-top:var(--s6)}
.aalb__lnum{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}
.aalb__lnum--soft{background:#f8f1ea;color:var(--gold-ink)}
.aalb__lsec h3{font-family:var(--display);font-weight:400;font-size:var(--t2);
  color:var(--navy);margin-bottom:var(--s3);line-height:1.2}
.aalb__lsec p{color:var(--slate);line-height:1.65;max-width:68ch}
.aalb__lsec p + p{margin-top:var(--s4)}
.aalb__lsec ul{margin:var(--s4) 0 0;padding-left:1.1rem;max-width:68ch}
.aalb__lsec li{color:var(--slate);line-height:1.6;margin-bottom:var(--s3)}
.aalb__lsec a{color:var(--red-ink);overflow-wrap:anywhere}
.aalb__lnote{margin-top:var(--s4);padding:var(--s4) var(--s5);background:var(--panel);
  border-left:3px solid var(--gold);border-radius:0 5px 5px 0;font-size:15px;
  color:var(--slate);line-height:1.6}
@media(max-width:620px){
  .aalb__lsec{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}

.aalb__lcta{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  padding:var(--s8) 0}
.aalb__lcta-bg{position:absolute;inset:0}
.aalb__lcta-bg img{width:100%;height:100%;object-fit:cover}
.aalb__lcta-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,28,56,.95) 0%,rgba(0,28,56,.86) 46%,rgba(0,28,56,.58) 100%)}
.aalb__lcta-in{position:relative;z-index:1;max-width:46rem}
.aalb__lcta h2{color:#fff;font-size:clamp(var(--t3),4.4vw,var(--t5));line-height:1.1}
.aalb__lcta p{color:#dbe3ec;margin-top:var(--s4);line-height:1.6;max-width:52ch}
.aalb__lcta .aalb__btn{margin-top:var(--s6)}

/* ============================================================================
   Fleet gallery, and the Fleet / About Us / Careers pages.
   Built to Brenda's three mockups, 2026-10-16.
   ========================================================================= */

/* The vehicle grid. Brenda, 4 October: no booking button per vehicle, click the car and
   get a gallery with the interior, the seating and the luggage space instead. */
.aalb__vgrid{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr);margin-top:var(--s7)}
@media(min-width:680px){.aalb__vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.aalb__vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.aalb__vcard{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;min-width:0}
.aalb__vcard[hidden]{display:none}
.aalb__vgrid--navy .aalb__vcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.aalb__vgrid--navy .aalb__vcard h3{color:#fff}
.aalb__vgrid--navy .aalb__vmodel{color:var(--gold-hi)}
.aalb__vgrid--navy .aalb__vbody p{color:var(--on-navy)}
.aalb__vgrid--navy .aalb__vspec li{color:var(--on-navy)}

.aalb__vshot{display:block;width:100%;padding:0;border:0;background:var(--panel);cursor:pointer;
  position:relative;aspect-ratio:2/1;overflow:hidden}
.aalb__vshot img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.aalb__vshot:hover img,.aalb__vshot:focus-visible img{transform:scale(1.04)}
.aalb__vzoom{position:absolute;right:var(--s3);bottom:var(--s3);background:rgba(0,28,56,.82);
  color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 10px;border-radius:100px}

.aalb__vbody{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.aalb__vbody h3{font-size:20px;margin:0}
.aalb__vmodel{margin:0;font-size:14px;color:var(--gold-ink);font-weight:600}
.aalb__vspec{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
.aalb__vspec li{display:flex;align-items:center;gap:var(--s2);font-size:14px;color:var(--mid)}
.aalb__vspec svg{flex:0 0 auto;color:var(--gold)}
.aalb__vbody p{margin:0;font-size:15px;line-height:1.55;color:var(--mid)}

.aalb__vthumbs{display:flex;gap:var(--s2);margin-top:auto;padding-top:var(--s3)}
.aalb__vthumb{flex:1 1 0;min-width:0;padding:0;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;background:none;cursor:pointer;aspect-ratio:3/2}
.aalb__vgrid--navy .aalb__vthumb{border-color:rgba(255,255,255,.2)}
.aalb__vthumb img{width:100%;height:100%;object-fit:cover}
.aalb__vthumb:hover,.aalb__vthumb:focus-visible{border-color:var(--gold)}

/* Her disclaimer, verbatim. It is the reason the gallery exists, so it sits with it. */
.aalb__disclaim{margin:var(--s6) 0 0;font-size:13px;line-height:1.6;color:var(--mid);
  max-width:74ch;font-style:italic}
.aalb__disclaim--navy{color:var(--on-navy);margin-left:auto;margin-right:auto;text-align:center}

/* Lightbox ---------------------------------------------------------------- */
.aalb__lb{position:fixed;inset:0;z-index:200;background:rgba(0,10,22,.92);
  display:flex;align-items:center;justify-content:center;padding:var(--s4)}
.aalb__lb[hidden]{display:none}
.aalb__lb-in{position:relative;max-width:min(1100px,94vw);width:100%}
.aalb__lb figure{margin:0}
.aalb__lb img{width:100%;height:auto;max-height:76vh;object-fit:contain;border-radius:6px;display:block}
.aalb__lb figcaption{color:#dfe6ee;font-size:14px;text-align:center;margin-top:var(--s4)}
.aalb__lb-x{position:absolute;top:-46px;right:0;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.aalb__lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.aalb__lb-prev{left:-8px}
.aalb__lb-next{right:-8px}
.aalb__lb-x:hover,.aalb__lb-nav:hover,.aalb__lb-x:focus,.aalb__lb-nav:focus{background:var(--gold);color:var(--navy)}
@media(min-width:900px){.aalb__lb-prev{left:-62px}.aalb__lb-next{right:-62px}}

/* About Us: the statistics band over the skyline -------------------------- */
.aalb__statband{position:relative;background:var(--navy);color:var(--on-navy);overflow:hidden}
.aalb__statband-bg{position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(0,18,42,.94) 0%,rgba(0,18,42,.72) 55%,rgba(0,18,42,.55) 100%),
    url("https://carservice-atlanta.com/wp-content/uploads/2026/10/hero-c-bluehour.jpg");
  background-size:cover;background-position:center}
.aalb__statband-in{position:relative;z-index:1;padding-top:var(--s8);padding-bottom:var(--s8)}
.aalb__statband-top{display:grid;gap:var(--s6);align-items:start}
@media(min-width:900px){.aalb__statband-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8)}}
.aalb__statband h2{color:#fff}
/* <em> inside a heading is this design's second-line device, the gold half of a two-line
   title. It was only defined for the hero h1s, so "Built on Trust.<em>Driven by Service.</em>"
   on the new About page rendered as one italic run with no break and no colour. Defined once
   for every h2 here, with the navy contexts taking the brighter gold. */
.aalb h2 em{font-style:normal;display:block;color:var(--gold-on-light)}
.aalb__sec--navy h2 em,.aalb__statband h2 em{font-style:normal;color:var(--gold-hi);display:block}
.aalb__statband-top p{margin:0;line-height:1.65;color:var(--on-navy)}
.aalb__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);
  margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid rgba(255,255,255,.18);text-align:center}
@media(min-width:900px){.aalb__stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.aalb__stats b{display:block;font-family:var(--display);font-size:var(--t3);color:var(--gold-hi);line-height:1.05}
.aalb__stats span{display:block;font-size:14px;color:var(--on-navy);margin-top:var(--s2)}

/* Values and hiring steps ------------------------------------------------- */
.aalb__values{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr);
  margin-top:var(--s7);text-align:center}
@media(min-width:620px){.aalb__values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.aalb__values{grid-template-columns:repeat(4,minmax(0,1fr))}}
.aalb__values--two{text-align:left;margin-top:var(--s6)}
@media(min-width:1000px){.aalb__values--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}}
.aalb__values .aalb__step-ico{margin:0 auto var(--s4)}
/* Careers: icon beside the text rather than stacked above it (David, 2026-10-27).
   Each item is its own two column grid, icon in column one spanning both rows, so
   the heading and its line sit to the right of the disc. No markup change: strong
   and span flow into column two on their own rows. Same at every width, because
   the block reads as a list either way and two different arrangements of the same
   four items is worse than one. */
.aalb__values--two > div{display:grid;grid-template-columns:46px minmax(0,1fr);
  column-gap:var(--s4);align-items:start}
.aalb__values--two .aalb__step-ico{grid-row:1 / span 2;margin:0;width:46px;height:46px}
.aalb__values strong{display:block;font-size:16px;color:var(--navy)}
.aalb__values span{display:block;font-size:14px;color:var(--mid);line-height:1.5;margin-top:var(--s2)}

.aalb__hsteps{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr);margin-top:var(--s7)}
@media(min-width:620px){.aalb__hsteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.aalb__hsteps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.aalb__hsteps > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3) var(--s4);align-items:center}
.aalb__hsteps b{grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;
  font-family:var(--display);font-size:20px;display:flex;align-items:center;justify-content:center}
.aalb__hsteps strong{align-self:end;font-size:16px;color:var(--navy)}
.aalb__hsteps span{align-self:start;font-size:14px;color:var(--mid);line-height:1.5}

/* Careers: the open roles ------------------------------------------------- */
.aalb__jobs{display:grid;gap:var(--s3);margin-top:var(--s6)}
.aalb__job{display:flex;align-items:center;gap:var(--s4);justify-content:space-between;
  padding:var(--s5);border:1px solid var(--line);border-radius:6px;background:#fff;
  text-decoration:none;transition:border-color .15s,box-shadow .15s}
.aalb__job:hover,.aalb__job:focus-visible{border-color:var(--red);box-shadow:0 8px 24px rgba(0,28,56,.08)}
.aalb__job strong{display:block;font-size:17px;color:var(--navy)}
.aalb__job span{display:block;font-size:14px;color:var(--mid);margin-top:2px}
.aalb__job svg{flex:0 0 auto;color:var(--gold)}
.aalb__job:hover svg{color:var(--red)}

/* ---- FAQ accordions ------------------------------------------------------
   <summary>, deliberately, not <button>. hello-elementor's reset.css paints
   every button #c36 on :hover AND :focus; a summary element is outside that
   rule, so this needs no neutraliser and cannot regress into pink on a tap.
   -------------------------------------------------------------------------- */
.aalb__faqs{margin-top:var(--s4)}
.aalb__faq{border:1px solid var(--line);border-radius:6px;background:#fff;
  margin-bottom:var(--s3);overflow:hidden}
.aalb__faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s4);
  padding-top:var(--s4);padding-bottom:var(--s4);
  padding-left:var(--s4);padding-right:var(--s4);
  font-family:var(--body);font-weight:600;font-size:var(--t0);line-height:1.45;
  color:var(--navy)}
.aalb__faq summary::-webkit-details-marker{display:none}
.aalb__faq summary::marker{content:""}
.aalb__faq summary:hover{background:var(--panel)}
.aalb__faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.aalb__faq summary svg{flex:0 0 auto;color:var(--gold-ink);transition:transform .18s ease}
.aalb__faq[open] summary{background:var(--panel)}
.aalb__faq[open] summary svg{transform:rotate(90deg)}
.aalb__faq-a{padding-top:var(--s4);padding-bottom:var(--s4);
  padding-left:var(--s4);padding-right:var(--s4);border-top:1px solid var(--line)}
.aalb__faq-a p{color:var(--slate);line-height:1.65;max-width:68ch}
.aalb__faq-a p + p{margin-top:var(--s3)}

/* ==========================================================================
   Brenda's list of 2026-10-20, and her answers of 2026-10-21.
   Item numbers are the ones in
   tasks/2026-10-20-aal-services-mockup-and-doc-comments/items.md
   ========================================================================== */

/* 3 - gold phone icon to the left of the header number ------------------- */
.aalb__tel{display:inline-flex;align-items:center;gap:var(--s2)}
.aalb__tel-ico{flex:0 0 auto;color:var(--gold)}
.aalb__bar--light .aalb__tel-ico{color:var(--gold-ink)}

/* 4, 5 - "Every Journey" takes the exact gold of the Explore Our Services
   button, #b87c3c. Her words, 2026-10-20.

   The eyebrow does NOT, and that is her decision of 2026-10-22. The button gold
   is a darker gold mixed to be read as a fill behind white text, and the eyebrow
   is 13px uppercase sitting on a photograph, so at that size it went dim. It
   keeps #e5bd85, the lighter gold mixed for the dark hero. Large text can take
   the darker gold; small text on a photograph cannot. */
.aalb__hero .aalb__eyebrow{color:#e5bd85}
.aalb__hero h1 em{color:var(--gold)}

/* 6 - more air between the hero paragraph and the button ------------------ */
.aalb__hero-grid .aalb__btns{margin-top:var(--s7)}

/* 7 - more air between "Your Journey Begins Here" and the tabs ------------ */
.aalb__qtabs{margin-top:var(--s5)}

/* 8 - the passenger value sat 1px high and a shade left of the typed field
   values, because a select carries the UA's own metrics. Match the inputs. */
.aalb__field select{font:inherit;line-height:inherit;margin:0;
  appearance:none;-webkit-appearance:none;text-indent:0}

/* 10, 11 - space between the button and "No payment required to view rates",
   desktop, iPad and phone alike. */
.aalb__qnote{margin-top:var(--s4)}

/* 12 - the SMS line on one line, still centred. The container was the limit,
   not the copy: 62ch wrapped it at every width below about 1200px. */
.aalb__sms-in{max-width:none}
.aalb__sms-in p{max-width:none}
@media(min-width:1024px){.aalb__sms-in p{white-space:nowrap}}

/* 13 - blue gradient entering from the left of the 25+ years image -------- */
.aalb__figure--grad::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,
    rgba(0,28,56,.92) 0%, rgba(6,41,76,.72) 38%, rgba(6,41,76,.18) 68%, rgba(6,41,76,0) 100%)}

/* 17 - the close control on the vehicle pop-up. The glyph is 26px on a 40px
   circle with no centring, so it rode high and left. */
.aalb__lb-x,.aalb__lb-nav{display:flex;align-items:center;justify-content:center;
  padding:0;text-align:center}
.aalb__lb-in{margin-left:auto;margin-right:auto}

/* 18 - fleet filters: red on hover, and the chosen one stays gold so it still
   reads as the active filter. Pressed is declared last so it wins the cascade,
   and :focus is covered because a tap leaves focus sitting on the control. */
.aalb__chip:hover,.aalb__chip:focus{background:var(--red);color:#fff;border-color:var(--red)}
.aalb__chip[aria-pressed="true"],
.aalb__chip[aria-pressed="true"]:hover,
.aalb__chip[aria-pressed="true"]:focus{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* 19 - the illustrative-images note sat tight under the last row ---------- */
.aalb__disclaim--navy{margin-top:var(--s7)}

/* 20 - "Travel in First-Class Comfort." left-aligned within its section.
   DONE 2026-10-27. She was right and the first reading of this was wrong: the
   text was left-aligned inside a box that was itself centred in the section,
   because .aalb__wrap is a flex item under .aalb__lhero. Fixed at the rule
   itself, above, which corrects all seven interior hero pages. */

/* 24 - every contact icon centred in its gold circle. The svg was baseline
   aligned inside the flex box, which put a 22px glyph 2px low in a 46px disc. */
.aalb__citem-ico svg{display:block;flex:0 0 auto}

/* 29, 31, 35 - the footer ------------------------------------------------- */
.aalb__foot-logo{height:44px;width:auto;display:block}
.aalb__foot-head{font-family:var(--display);color:var(--gold-hi);font-size:var(--t2);
  line-height:1.2;margin-top:var(--s4);max-width:20ch}
.aalb__foot-blurb{max-width:42ch;margin-top:var(--s3)}
/* 35 - the address and "Available 24/7" are plain list text, so they were
   inheriting the body size while every link beside them was 15px. */
.aalb__foot li{font-size:15px;line-height:1.5}
/* minmax, not 1fr: a bare track keeps min-width:auto and the email address
   sets the column width. That has broken this page twice. */
.aalb__foot-grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.aalb__foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.aalb__foot-grid{grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr) 1.2fr}}

/* 30 - the Atlanta skyline behind the footer, lifted so the photograph reads
   while the text stays legible. Measured on the darkest corner of the plate:
   #c9d4e0 on the composite is 11.2:1, white on it 14.9:1. */
.aalb__foot{position:relative;isolation:isolate;
  background-color:var(--navy);
  background-image:linear-gradient(180deg,rgba(0,28,56,.88) 0%,rgba(0,28,56,.74) 52%,rgba(0,28,56,.92) 100%),
    url("https://carservice-atlanta.com/wp-content/uploads/2026/10/footer-skyline-night.jpg");
  background-size:auto, cover;
  background-position:center, center bottom;
  background-repeat:no-repeat, no-repeat}

/* six service cards, not five. Three across reads better than five across:
   each card goes from a fifth of the row to a third, and two columns at tablet
   width is three clean rows instead of five leaving an orphan. */
@media(min-width:620px){.aalb__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.aalb__cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}}

/* the closing panel sat 8px further in than every other section on a phone,
   because s6 is 32px and the page gutter is s5. Not reported, but it is the
   same class of thing she keeps spotting. */
@media(max-width:899px){.aalb__close-txt{padding-left:var(--s5);padding-right:var(--s5)}}

/* ==========================================================================
   25 to 28 - the mobile header and menu.
   Her reference images show the arrangement, not the colour: she confirmed on
   2026-10-21 that the header keeps the desktop transparency rather than going
   solid white. So the bar is untouched and only the controls inside it change.
   ========================================================================== */
.aalb__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.aalb__burger{display:none;order:4;flex:0 0 auto;width:44px;height:44px;padding:0;
  border:1px solid rgba(255,255,255,.28);border-radius:5px;background:transparent;
  cursor:pointer;align-items:center;justify-content:center}
.aalb__bar--light .aalb__burger{border-color:var(--line-ui)}
.aalb__burger-bars{display:block;width:20px}
.aalb__burger-bars i{display:block;height:2px;background:#fff;border-radius:2px}
.aalb__burger-bars i + i{margin-top:4px}
.aalb__bar--light .aalb__burger-bars i{background:var(--navy)}
/* :hover and :focus together. hello-elementor paints a bare button #c36 on
   both, and a tap leaves :focus sitting on the control after the finger lifts. */
.aalb__burger:hover,.aalb__burger:focus{background:rgba(255,255,255,.12);color:inherit}
.aalb__bar--light .aalb__burger:hover,.aalb__bar--light .aalb__burger:focus{background:var(--panel)}
.aalb__burger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(max-width:860px){
  .aalb__nav{display:none}
  .aalb__burger{display:flex}
  .aalb__tel{margin-left:auto;order:3}
  .aalb__bar-in{flex-wrap:nowrap;gap:var(--s3)}
}

/* 2026-11-02: with flex-wrap:nowrap the bar's three children cannot shrink. A
   176px logo, a white-space:nowrap phone number and the 44px burger plus the
   wrap gutters come to slightly more than a 390px screen, so the bar overflowed.
   Everything below it is width:100%, so the whole document stretched to the
   bar's width and the page scrolled sideways.

   2026-11-02, corrected: measured at a real 390px viewport and the bar does NOT
   overflow. The apparent overflow was a measurement error, Chrome on Windows
   refusing a window under 500px so a 390px screenshot was a cropped 500px page.
   The min-width:0 below is kept as cheap safety; the logo was NOT shrunk. */
@media(max-width:860px){
  .aalb__bar-in > *{min-width:0}
  .aalb__logo{flex:0 1 auto;overflow:hidden}
}

.aalb__menu{position:fixed;inset:0;z-index:70;background:var(--navy);color:#fff;
  display:flex;flex-direction:column;overflow-y:auto;
  padding-top:var(--s5);padding-bottom:var(--s7);
  padding-left:var(--s5);padding-right:var(--s5)}
.aalb__menu[hidden]{display:none}
.aalb__menu-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.aalb__menu-top .aalb__logo img{max-width:176px;max-height:36px}
.aalb__menu-x{width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.10);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.aalb__menu-x:hover,.aalb__menu-x:focus{background:var(--gold);color:var(--navy)}
.aalb__menu-x:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}

.aalb__menu-nav{display:block;margin-top:var(--s6)}
.aalb__menu-item{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:var(--s4);text-align:left;
  font-family:var(--display);font-weight:400;font-size:var(--t2);line-height:1.25;
  color:#fff;text-decoration:none;background:transparent;border:0;cursor:pointer;
  padding-top:var(--s4);padding-bottom:var(--s4);padding-left:0;padding-right:0;
  border-bottom:1px solid rgba(255,255,255,.16)}
.aalb__menu-item svg{flex:0 0 auto;color:var(--gold)}
.aalb__menu-item:hover,.aalb__menu-item:focus{color:var(--gold-hi);background:transparent}
.aalb__menu-item:hover svg,.aalb__menu-item:focus svg{color:var(--gold-hi)}
.aalb__menu-item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.aalb__menu-contact{margin-top:var(--s6);display:grid;gap:var(--s4)}
.aalb__menu-contact a,.aalb__menu-contact p{display:flex;align-items:center;gap:var(--s4);
  margin:0;color:var(--on-navy);text-decoration:none;font-size:15px;line-height:1.4;
  overflow-wrap:anywhere}
.aalb__menu-contact a:hover{color:var(--gold-hi)}
.aalb__menu-ico{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center}
.aalb__menu-cta{margin-top:var(--s6);width:100%;justify-content:center}

.aalb__submenu{position:absolute;inset:0;z-index:1;background:var(--navy);
  overflow-y:auto;
  padding-top:var(--s5);padding-bottom:var(--s7);
  padding-left:var(--s5);padding-right:var(--s5);
  animation:aalb-slide .22s ease}
.aalb__submenu[hidden]{display:none}
@keyframes aalb-slide{from{transform:translateX(14%);opacity:.4}to{transform:none;opacity:1}}
.aalb__submenu-back{display:flex;align-items:center;gap:var(--s3);
  font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);background:transparent;border:0;
  cursor:pointer;padding-top:var(--s3);padding-bottom:var(--s3);padding-left:0;padding-right:0}
.aalb__submenu-back:hover,.aalb__submenu-back:focus{color:var(--gold-hi);background:transparent}
.aalb__submenu-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.aalb__submenu nav{margin-top:var(--s4)}

/* 36, 37 - the contact page on a phone ----------------------------------- */
@media(max-width:600px){
  /* the address line is the one that overflowed a 390px column */
  .aalb__citem strong{font-size:16px;line-height:1.35}
  .aalb__citem strong a{font-size:inherit}
  /* one weight and one size for every bolded run on the page */
  .aalb__cinfo b,.aalb__citem b{font-size:13px;font-weight:600}
}

/* 26 - "Logo left, phone and hamburger icons right." On a phone the header was
   carrying the full number, and logo 176 + number 130 + burger 44 + gaps came
   to 398 in a 375 viewport, so the burger hung off the right edge. Her
   reference shows an icon, not the number, which is also the fix. */
@media(max-width:560px){
  .aalb__logo img{max-width:148px}
  .aalb__tel{font-size:0;gap:0;width:44px;height:44px;flex:0 0 auto;
    justify-content:center;border:1px solid rgba(255,255,255,.28);border-radius:5px}
  .aalb__bar--light .aalb__tel{border-color:var(--line-ui)}
  .aalb__tel-ico{width:20px;height:20px}
  .aalb__tel:hover,.aalb__tel:focus{background:rgba(255,255,255,.12)}
  .aalb__bar--light .aalb__tel:hover,.aalb__bar--light .aalb__tel:focus{background:var(--panel)}
}
/* the menu panel inherits .aalb__logo{order:1} from the header, which put the
   close control to the left of the logo. Her reference has the logo left. */
.aalb__menu-top .aalb__logo{order:0}
.aalb__menu-top .aalb__menu-x{order:1}