:root {
    --primary: #d97706;
    --primary-light: #fbbf24;
    --accent: #f59e0b;
    --dark: #0f172a;
    --light: #f8fafc;

    /* Per-site accent: remap all teal-* utility classes to the site's colour family. */
    --color-teal-50:  var(--color-amber-50);
    --color-teal-100: var(--color-amber-100);
    --color-teal-200: var(--color-amber-200);
    --color-teal-300: var(--color-amber-300);
    --color-teal-400: var(--color-amber-400);
    --color-teal-500: var(--color-amber-500);
    --color-teal-600: var(--color-amber-600);
    --color-teal-700: var(--color-amber-700);
    --color-teal-800: var(--color-amber-800);
    --color-teal-900: var(--color-amber-900);
    --color-teal-950: var(--color-amber-950);

    /* Per-site corner radius personality (overrides Tailwind radius utilities site-wide). */
    --radius-lg: 0.25rem;
    --radius-xl: 0.375rem;
    --radius-2xl: 0.5rem;
    --radius-3xl: 0.75rem;
}
body {
    font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
    color: #334155;
    line-height: 1.6;
}
.hero-gradient {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(217, 119, 6, 0.75) 100%);
}
.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    font-size: 22px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(217, 119, 6, 0.4);
}
.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
}
@media (max-width: 768px) {
    .section-title { font-size: 1.75rem; }
}
.car-card {
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}
.car-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-light);
}
.price-tag {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.06);
}
.footer-link {
    color: #94a3b8;
    transition: color 0.2s;
}
.footer-link:hover {
    color: white;
}
[x-cloak] { display: none !important; }
.site-logo {
    height: 52px;
    max-height: 52px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}
.search-cigarette,
.highlight-container,
.vehicles-grid,
.search__buttons,
.search__results {
    display: none !important;
}
.landing-hero { background: #1e293b; color: #fff; padding: 4rem 2rem; text-align: center; }
.landing-hero h1 { margin: 0 0 1rem; font-size: 2.5rem; }
.landing-hero p { margin: 0; opacity: 0.9; }
.landing-content { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }
.landing-nav ul { list-style: none; padding: 1rem 2rem; margin: 0; display: flex; gap: 1rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.landing-nav a { text-decoration: none; color: var(--primary); font-weight: 500; }
.landing-footer { text-align: center; padding: 2rem; color: #64748b; border-top: 1px solid #e2e8f0; }

/* ─── Nav responsive breakpoints ─────────────────────────────────────── */
/* Applies to the `classic` header variant only. Every other nav-* variant ships its own
   breakpoints inside its own scoped <style> block. */
.nav-container { width: 100%; }   /* burger visible → full width */
.nav-logo { display: flex; }
/* Desktop menu: hidden below 1100px */
.nav-menu { display: none; }
/* Contact info block: hidden below 1500px */
.nav-info { display: none; }
/* Burger: visible below 1100px. 44px is the minimum comfortable tap target and this is the
   ONLY nav control on a phone, so it is sized explicitly rather than left to icon + padding
   (which came out at 34px). */
.nav-burger { display: inline-flex; align-items: center; justify-content: center;
              min-width: 44px; min-height: 44px; }
/* Mobile dropdown: hidden below 1100px (shown via Alpine x-show) */

@media (min-width: 1100px) {
    .nav-container { width: max-content; } /* burger hidden → shrink to content */
    .nav-menu { display: flex; }
    .nav-burger { display: none; }
    .nav-mobile-panel { display: none !important; }
    /* The logo used to be display:none here, to buy room for a long translated menu between
       1100 and 1300px. That blanked the brand at 1280, one of the most common laptop widths,
       and removed the only link back to home. Shrink it instead: a 32px wordmark still reads
       and gives back ~110px. !important is required because the <img> carries its size INLINE
       (that inline style is deliberate: /shared/*.css is cached for 24h, so a stylesheet-only
       size rule would leave cached visitors with an oversized logo). */
    .nav-logo img.site-logo {
        height: 32px !important;
        max-height: 32px !important;
        max-width: 130px !important;
    }
}
@media (min-width: 1300px) {
    .nav-logo img.site-logo {
        height: 52px !important;
        max-height: 52px !important;
        max-width: min(200px, 42vw) !important;
    }
}
@media (min-width: 1500px) {
    .nav-info { display: flex; }
}

/* ─── Car filter pills – wrap blocks, not text ─────────────────────────── */
.car-search-widget .flex-wrap {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
}
/* ─── Responsive utility classes missing from per-site compiled Tailwind ────── */
/* sm: ≥ 640px */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:p-7  { padding: 1.75rem; }
    .sm\:p-8  { padding: 2rem; }
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .sm\:text-4xl { font-size: 2.25rem;  line-height: 2.5rem; }
    .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
    .sm\:text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
}

/* md: ≥ 768px */
@media (min-width: 768px) {
    .md\:block          { display: block; }
    .md\:flex           { display: flex; }
    .md\:hidden         { display: none; }
    .md\:col-span-2     { grid-column: span 2 / span 2; }
    .md\:flex-row       { flex-direction: row; }
    .md\:grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:items-center   { align-items: center; }
    .md\:items-end      { align-items: flex-end; }
    .md\:justify-between{ justify-content: space-between; }
}

/* lg: ≥ 1024px */
@media (min-width: 1024px) {
    .lg\:col-span-3     { grid-column: span 3 / span 3; }
    .lg\:gap-12         { gap: 3rem; }
    .lg\:grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-\[1\.2fr\,0\.9fr\,1\.05fr\] { grid-template-columns: 1.2fr 0.9fr 1.05fr; }
    .lg\:pt-12          { padding-top: 3rem; }
    .lg\:px-8           { padding-left: 2rem; padding-right: 2rem; }
    .lg\:text-5xl       { font-size: 3rem; line-height: 1; }
}

/* xl: ≥ 1280px */
@media (min-width: 1280px) {
    .xl\:grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Missing opacity / dark-shade utilities ────────────────────────────────── */
.bg-slate-950          { background-color: #020617; }
.bg-slate-900\/70      { background-color: rgba(15, 23, 42, 0.70); }
.bg-slate-900\/90      { background-color: rgba(15, 23, 42, 0.90); }
.bg-white\/5           { background-color: rgba(255,255,255,0.05); }
.bg-white\/10          { background-color: rgba(255,255,255,0.10); }
.bg-white\/95          { background-color: rgba(255,255,255,0.95); }
.bg-white\/\[0\.03\]   { background-color: rgba(255,255,255,0.03); }
.bg-black\/40          { background-color: rgba(0,0,0,0.40); }
.bg-teal-400\/10       { background-color: rgba(59,130,246,0.10); }
.bg-cyan-400\/10       { background-color: rgba(34,211,238,0.10); }
.border-white\/10      { border-color: rgba(255,255,255,0.10); }
.border-teal-400\/30   { border-color: rgba(59,130,246,0.30); }
.text-white\/80        { color: rgba(255,255,255,0.80); }
.text-teal-600\/70     { color: rgba(30,64,175,0.70); }
.shadow-slate-900\/10  { --tw-shadow-color: rgba(15,23,42,0.10); }
.shadow-teal-500\/20   { --tw-shadow-color: rgba(59,130,246,0.20); }
.shadow-teal-500\/25   { --tw-shadow-color: rgba(59,130,246,0.25); }
.hover\:bg-teal-400\/10:hover       { background-color: rgba(59,130,246,0.10); }
.hover\:bg-black\/60:hover          { background-color: rgba(0,0,0,0.60); }
.hover\:border-teal-400\/30:hover   { border-color: rgba(59,130,246,0.30); }
.hover\:border-teal-400\/40:hover   { border-color: rgba(59,130,246,0.40); }
.hover\:shadow-slate-200\/50:hover  { --tw-shadow-color: rgba(226,232,240,0.50); }
.focus\:ring-teal-500\/20:focus     { --tw-ring-color: rgba(59,130,246,0.20); }
.text-\[11px\]         { font-size: 11px; line-height: 1.5; }
.tracking-\[0\.22em\]  { letter-spacing: 0.22em; }
.tracking-\[0\.24em\]  { letter-spacing: 0.24em; }
.group-hover\:translate-x-0\.5 { --tw-translate-x: 0.125rem; }

/* ─── Language selector: limit height and make scrollable ───────────────────── */
[x-show="open"][class*="min-w-56"],
[class*="min-w-56"][class*="max-h-96"] {
    max-height: 320px !important;
    overflow-y: auto !important;
}/* --- Arbitrary-value utilities missing from the compiled Tailwind subset ---
   The per-site subset only emits z-10..z-50 and a fixed set of sizes. These [..] values are
   used by the language modal, image lightbox, footer and car cards, so without them the modal
   has no z-index (gets overlapped) and bottom sheets have no max-height. Keep in sync with
   templates; see build-rental-site skill ("compiled subset") notes. */
.z-\[60\]{z-index:60}
.z-\[100\]{z-index:100}
.z-\[9999\]{z-index:9999}
.z-\[10000\]{z-index:10000}
.max-h-\[60vh\]{max-height:60vh}
.max-h-\[80vh\]{max-height:80vh}
.max-h-\[85vh\]{max-height:85vh}
.max-h-\[90vh\]{max-height:90vh}
.min-h-\[40px\]{min-height:40px}
.min-w-\[160px\]{min-width:160px}
.min-w-\[200px\]{min-width:200px}
.max-w-\[200px\]{max-width:200px}
.text-\[10px\]{font-size:10px;line-height:1.2}
.text-\[11px\]{font-size:11px;line-height:1.3}
.text-\[15px\]{font-size:15px}
.tracking-\[0\.14em\]{letter-spacing:.14em}
.tracking-\[0\.22em\]{letter-spacing:.22em}
.tracking-\[0\.24em\]{letter-spacing:.24em}
.scale-\[0\.99\]{scale:.99}
.w-\[min\(92vw\,34rem\)\]{width:min(92vw,34rem)}

/* === Supplement: utilities used by authored content but absent from the compiled subset (anti-empty-padding). Generated from a Tailwind v4.3 compile of the authored pages. === */
.bg-emerald-50{background-color:var(--color-emerald-50)}
.bg-slate-200{background-color:var(--color-slate-200)}
.bg-slate-300{background-color:var(--color-slate-300)}
.bg-slate-50\/70{background-color:#f8fafcb3}
.bg-slate-900\/60{background-color:#0f172b99}
.border-collapse{border-collapse:collapse}
.border-emerald-100{border-color:var(--color-emerald-100)}
.border-slate-700{border-color:var(--color-slate-700)}
.border-teal-200\/80{border-color:#bfdbfecc}
.border-teal-500{border-color:var(--color-teal-500)}
.cursor-zoom-in{cursor:zoom-in}
.cursor-zoom-out{cursor:zoom-out}
.divide-slate-100>:not([hidden])~:not([hidden]){border-color:var(--color-slate-100)}
.flex-none{flex:none}
.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}
.from-slate-50{--tw-gradient-from:var(--color-slate-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}
.from-teal-50{--tw-gradient-from:var(--color-teal-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}
.gap-0\.5{gap:calc(var(--spacing) * .5)}
.group-hover\:bg-teal-100:is(:where(.group):hover *){background-color:var(--color-teal-100)}
.group-hover\:rotate-12:is(:where(.group):hover *){rotate:12deg}
.group-hover\:text-teal-600:is(:where(.group):hover *){color:var(--color-teal-600)}
.group-hover\:text-teal-700:is(:where(.group):hover *){color:var(--color-teal-700)}
.h-96{height:calc(var(--spacing) * 96)}
.h-auto{height:auto}
.hover\:bg-slate-800:hover{background-color:var(--color-slate-800)}
.hover\:bg-teal-700:hover{background-color:var(--color-teal-700)}
.hover\:border-slate-200:hover{border-color:var(--color-slate-200)}
.hover\:border-teal-300:hover{border-color:var(--color-teal-300)}
.hover\:border-teal-400:hover{border-color:var(--color-teal-400)}
.hover\:border-teal-500:hover{border-color:var(--color-teal-500)}
.hover\:border-teal-500\/30:hover{border-color:#3b82f64d}
.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}
.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.hover\:text-slate-700:hover{color:var(--color-slate-700)}
.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}
.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.max-w-3xl{max-width:var(--container-3xl)}
.max-w-5xl{max-width:var(--container-5xl)}
.mb-2\.5{margin-bottom:calc(var(--spacing) * 2.5)}
.mb-7{margin-bottom:calc(var(--spacing) * 7)}
.ml-0\.5{margin-left:calc(var(--spacing) * .5)}
.mt-5{margin-top:calc(var(--spacing) * 5)}
.my-6{margin-block:calc(var(--spacing) * 6)}
.my-8{margin-block:calc(var(--spacing) * 8)}
.origin-top-right{transform-origin:100% 0}
.p-7{padding:calc(var(--spacing) * 7)}
.pb-1{padding-bottom:calc(var(--spacing) * 1)}
.pb-20{padding-bottom:calc(var(--spacing) * 20)}
.pb-5{padding-bottom:calc(var(--spacing) * 5)}
.pl-6{padding-left:calc(var(--spacing) * 6)}
.pt-0{padding-top:calc(var(--spacing) * 0)}
.pt-16{padding-top:calc(var(--spacing) * 16)}
.pt-5{padding-top:calc(var(--spacing) * 5)}
.px-7{padding-inline:calc(var(--spacing) * 7)}
.py-5{padding-block:calc(var(--spacing) * 5)}
.right-4{right:calc(var(--spacing) * 4)}
.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.ring-inset{--tw-ring-inset:inset}
.ring-slate-900\/5{--tw-ring-color:#0f172b0d}
.rounded-t-3xl{border-top-left-radius:var(--radius-3xl);border-top-right-radius:var(--radius-3xl)}
.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.shadow-slate-900\/20{--tw-shadow-color:#0f172b33}
.shadow-teal-500\/10{--tw-shadow-color:#3b82f61a}
@media (min-width:640px){.sm\:p-12{padding:calc(var(--spacing) * 12)}}
@media (min-width:640px){.sm\:px-12{padding-inline:calc(var(--spacing) * 12)}}
@media (min-width:640px){.sm\:py-16{padding-block:calc(var(--spacing) * 16)}}
.text-cyan-300{color:var(--color-cyan-300)}
.text-emerald-700{color:var(--color-emerald-700)}
.text-slate-200{color:var(--color-slate-200)}
.text-slate-900{color:var(--color-slate-900)}
.text-teal-200{color:var(--color-teal-200)}
.text-teal-50{color:var(--color-teal-50)}
.text-teal-900{color:var(--color-teal-900)}
.text-teal-950{color:var(--color-teal-950)}
.to-emerald-50{--tw-gradient-to:var(--color-emerald-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}
.to-slate-100{--tw-gradient-to:var(--color-slate-100);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}
.top-4{top:calc(var(--spacing) * 4)}
.w-1\/2{width:50%}
.w-1\/3{width:33.3333%}
.w-1\/4{width:25%}
.w-2\/3{width:66.6667%}

/* minimal typography for legal/prose pages (no @tailwindcss/typography plugin installed) */
.prose{color:var(--color-slate-600);max-width:none;line-height:1.75}
.prose-slate{--tw-prose-body:var(--color-slate-600)}
.prose :where(h2):not(.not-prose *){color:var(--color-slate-900);font-weight:700;font-size:1.25rem;margin-top:2rem;margin-bottom:.75rem}
.prose :where(h3):not(.not-prose *){color:var(--color-slate-900);font-weight:600;font-size:1.075rem;margin-top:1.5rem;margin-bottom:.5rem}
.prose :where(p):not(.not-prose *){margin-top:0;margin-bottom:1rem}
.prose :where(ul,ol):not(.not-prose *){margin:1rem 0;padding-left:1.5rem;list-style:revert}
.prose :where(li):not(.not-prose *){margin:.35rem 0}
.prose :where(a):not(.not-prose *){color:var(--color-teal-700);text-decoration:underline}
.prose :where(strong):not(.not-prose *){color:var(--color-slate-900);font-weight:600}
.prose :where(table):not(.not-prose *){width:100%;border-collapse:collapse;margin:1.25rem 0}
.prose :where(th,td):not(.not-prose *){border:1px solid var(--color-slate-200);padding:.5rem .75rem;text-align:left}

/* LocalRent WL booking script: keep ONLY the booking modal (#spa__modal). Hide the app's inline
   white-label search UI (<lr-whitelabel>) — it duplicates our own car-search section and drives a
   runaway ResizeObserver growth loop (the mrc_wl container ballooned to thousands of nodes). The
   booking modal is a sibling, so booking is unaffected (verified: same navigation on click). */
[id^="mrc_wl_"], lr-whitelabel { display: none !important; }

/* Car-search loading states (per-site loader_style: skeleton/shimmer/spinner/dots; uses --primary) */
.lr-skel{background:#e2e8f0;position:relative;overflow:hidden}
.lr-skel--img{height:11rem;width:100%}
.lr-skel--line{height:.8rem;border-radius:5px}
.lr-skel--btn{height:2rem;border-radius:7px}
.lr-skel-card{border:1px solid #f1f5f9;border-radius:1rem;background:#fff;overflow:hidden}
.lr-skel-body{padding:1.15rem;display:flex;flex-direction:column;gap:.6rem}
.lr-loader--skeleton .lr-skel{animation:lr-pulse 1.5s ease-in-out infinite}
@keyframes lr-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.lr-loader--shimmer .lr-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:lr-shimmer 1.4s infinite}
@keyframes lr-shimmer{100%{transform:translateX(100%)}}
.lr-spinner{width:46px;height:46px;border-radius:50%;border:4px solid #e2e8f0;border-top-color:var(--primary,#4f46e5);animation:lr-spin .8s linear infinite}
@keyframes lr-spin{to{transform:rotate(360deg)}}
.lr-dots{display:inline-flex;gap:9px}
.lr-dots span{width:13px;height:13px;border-radius:50%;background:var(--primary,#4f46e5);animation:lr-bounce 1.2s infinite both}
.lr-dots span:nth-child(2){animation-delay:.18s}
.lr-dots span:nth-child(3){animation-delay:.36s}
@keyframes lr-bounce{0%,80%,100%{transform:scale(.45);opacity:.5}40%{transform:scale(1);opacity:1}}

/* supplement: axis gaps used by authored content grids */
.gap-x-10{column-gap:calc(var(--spacing) * 10)}
.gap-y-8{row-gap:calc(var(--spacing) * 8)}

/* supplement: responsive/variant utilities used by authored content */
.hover\:text-teal-800:hover{color:var(--color-teal-800)}
@media (min-width: 1024px){
  .lg\:col-span-2{grid-column:span 2 / span 2}
  .lg\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}
}