/* Desktop header: keep every item on one line (fixes "Areas We Serve" / phone / "Book Now" wrapping). The header sits inside a max-w-7xl (1280px) container, so past 1280px viewport width the available room for logo + nav + phone + Book Now stops growing - it stays the same from a 1280px laptop up to a huge 2000px+ monitor. So this tighter spacing applies everywhere from 1024px up, not just "narrow" laptops, otherwise the phone number and Book Now button overflow past the right edge on every screen 1280px and wider. */ @media (min-width:1024px){ header nav a, header a[href^="tel:"], header a[href="/book-now"]{white-space:nowrap} header nav{gap:0} header nav > div > a{padding-left:.375rem;padding-right:.375rem} header > div > nav ~ div{gap:.5rem;flex-shrink:0} header a[href^="tel:"]{gap:.25rem} header a[href="/book-now"]{padding-left:1rem;padding-right:1rem} /* nudge the logo in a touch from the very left edge */ header > div > a:first-child{margin-left:.25rem} } /* Narrower laptops (1024-1279px): the container is not yet capped at 1280px here, so there is even less room than above. Shrink the logo a little more and drop the phone number to icon-only so nothing wraps. At 1280px+ the container is fixed at 1280px wide and the full-size logo (xl:h-16) has room thanks to the spacing rules above - logo size itself is never reduced from there up. */ @media (min-width:1024px) and (max-width:1279px){ header img[alt^="Film Unit Car"]{height:2.5rem} header nav > div > a{font-size:13px} header a[href^="tel:"]{font-size:0;gap:0} header a[href="/book-now"]{font-size:13px} } /* Fleet cards: show the whole vehicle. The car photos are 1300x600 (13:6) on a black background, so the picture box uses the same ratio instead of a fixed height that crops the car. */ div.overflow-hidden:is(.h-32,.h-44,.h-48,.h-52):has(> img:is([src*="/images/vehicles/"]:not([src*="luggage"]):not([src*="directors-executive"]),[src*="/images/stock/minibus"],[src*="/images/stock/coach"],[src*="/images/stock/splitter"])){ height:auto;aspect-ratio:13/6;background:#000} div.overflow-hidden:is(.h-32,.h-44,.h-48,.h-52) > img:is([src*="/images/vehicles/"],[src*="/images/stock/minibus"],[src*="/images/stock/coach"],[src*="/images/stock/splitter"]){object-fit:cover;object-position:center} /* Big vehicle panel on the Fleet page: never crop the car, black bars blend into the black photo background */ div.overflow-hidden.min-h-\[320px\]:has(> img[src*="/images/vehicles/"]:not([src*="luggage"]):not([src*="directors-executive"])){background:#000;display:flex;align-items:center} div.overflow-hidden.min-h-\[320px\] > img[src*="/images/vehicles/"]:not([src*="luggage"]):not([src*="directors-executive"]){object-fit:contain;height:auto;max-height:100%} /* Square photos are shown in wide banners: keep the subject (faces, car) inside the visible strip */ img[src*="/hero/airports-hero"]{object-position:50% 67%} img[src*="/hero/areas-hero"]{object-position:50% 76%} img[src*="/hero/booknow-hero"]{object-position:50% 40%} img[src*="/hero/contact-hero"]{object-position:50% 27%} img[src*="/hero/costs-hero"]{object-position:50% 30%} img[src*="/hero/services-hero"]{object-position:50% 22%} img[src*="/hero/about-hero"]{object-position:50% 72%} img[src*="/context/private-driver-hire-with-car-for-film-productions"]{object-position:50% 35%} img[src*="/context/film-industry-transportation-service-client-exit"]{object-position:50% 25%} /* Dropdown lists in the quote forms: the closed select is dark with white text, but the open list is drawn on a white background by the browser, so the option text must be dark or it becomes invisible. */ select option,select optgroup{background:#fff;color:#121414} select option:disabled{color:#8a8f8f} /* Legal pages (Terms & Conditions, Privacy Policy): the compiled Tailwind CSS never includes the "prose" typography plugin or any list-utility classes, because the original site never used