@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700&display=swap');
@import url('fleet-scale.css');
@font-face { font-family: 'Cape Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/bebas-neue.ttf') format('truetype'); }

/* Measured reference refinements. Keep the owner's car-free, lowered heroes. */
.carent { --radius: 16px; }
.bydrive { --accent: #050505; --on-accent: #fff; --radius: 12px; }
.drovez { --accent: #485cf4; --radius: 5px; }
.zairent { --accent: #168ce4; --radius: 20px; font-family: Epilogue, sans-serif; font-size: 16px; line-height: 1.5; }
.zairent h1, .zairent h2, .zairent h3 { font-family: Barlow, sans-serif; }
.zairent h1 { line-height: 78px; }
.zairent h2 { line-height: 58px; }

/* Carent's transparent overlay, ByDrive's lean bar, and the two Webflow headers. */
body:not(.rentco) #app > .nav { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; }
body:not(.rentco) .nav > .brand { grid-column: 1; grid-row: 1; }
body:not(.rentco) .nav > nav { grid-column: 2; grid-row: 1; justify-content: center; }
body:not(.rentco) .nav > .nav-cta { grid-column: 3; grid-row: 1; }
body:not(.rentco) .nav > .menu-toggle { grid-column: 3; grid-row: 1; }
.nav-cta { justify-self: end; }
.carent #app > .nav { position: absolute; top: 36px; left: 0; right: 0; height: 90px; padding: 0 30px; background: transparent; }
.carent .nav .brand { font: 600 30px/1 Geist, sans-serif; gap: 8px; }
.carent .nav .brand small { font: 500 8px/1.3 Geist, sans-serif; margin-top: 5px; }
.carent .nav > nav { gap: 30px; font: 500 18px/1.2 Inter, sans-serif; }
.carent .nav .language { display: none; }
.carent .nav .theme-toggle { color: white; border-color: #ffffff65; padding: 9px; font-size: 11px; }
.carent .nav-cta { border-radius: 12px; background: #141414; color: white; padding: 15px 22px; font-size: 16px; }
body.carent .hero { padding: 190px 30px 110px; min-height: calc(100svh - 36px); }
.carent .hero h1 { font-size: clamp(100px,11.05vw,159px); line-height: .8; letter-spacing: -.035em; }
.carent .hero-booking { max-width: 1200px; }
@media (min-width:901px) {
 .carent .fleet-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
.carent .hero-copy { margin-top: 45px; }
.carent .booking, .carent .booking .primary { border-radius: 0; }
.carent .hero-lead { font-size: 22px; line-height: 1.5; margin-top: 34px; }
.carent .hero-background { background: linear-gradient(#0c162e80,#0a111ea8),url('assets/dusk.webp') center/cover; }

.bydrive #app > .nav { height: 76px; padding: 0 32px; border-bottom: 1px solid var(--line); }
.bydrive .nav .brand { font-size: 20px; font-weight: 800; letter-spacing: -.6px; }
.bydrive .brand-mark { font-size: 34px; color: var(--ink); }
.bydrive .nav > nav { gap: 28px; font-size: 13px; font-weight: 700; }
.bydrive .nav .language { display: none; }
.bydrive #app > .nav > .nav-cta { display: none; }
.bydrive .nav > .menu-toggle { display: block; width: 40px; height: 40px; border: 0; background: transparent; font-size: 18px; }
.bydrive .nav.menu-open > nav { position: absolute; top: calc(100% + 5px); right: 32px; left: auto; width: 330px; display: flex; flex-direction: column; align-items: stretch; background: var(--paper); color: var(--ink); padding: 22px; border: 1px solid var(--line); box-shadow: 0 12px 30px #0002; }
.bydrive .nav.menu-open > nav > a { padding: 12px; }
.bydrive .hero h1 { font-size: 60px; line-height: 72px; letter-spacing: normal; max-width: 1200px; }
.bydrive .hero-copy > .eyebrow { display: none; }
.bydrive .hero-lead { font-size: 16px; margin-top: 18px; }
.bydrive .hero-lead br { display: none; }
.bydrive .hero-booking { max-width: 900px; margin-top: 34px; }
body.bydrive .hero { padding-top: 190px; }
.bydrive .booking { background: color-mix(in srgb,var(--paper) 91%,transparent); backdrop-filter: blur(12px); padding: 16px; border: 0; box-shadow: none; grid-template-columns: 1.1fr 1fr 145px; border-radius: 16px; }
.bydrive .booking .cell + .cell { border-left: 0; }
.bydrive .booking .search { border-radius: 12px; font-size: 13px; }
.bydrive .cell label { font-size: 10px; }
.bydrive .section-head { text-align: center; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 48px; }
.bydrive .section-head > p { max-width: 650px; }
.bydrive .section-head .eyebrow { display: none; }
.bydrive .fleet, .bydrive .benefits, .bydrive .facts, .bydrive .guides { background: var(--paper); }
.bydrive .fleet-grid { gap: 24px; }
.bydrive .car-card > img { aspect-ratio: 1.1; }
.bydrive .car-body { padding: 18px 20px; }
.bydrive .car-body h3 { font-size: 20px; font-weight: 800; }
.bydrive .car-type { font-size: 11px; margin-bottom: 10px; }
.bydrive .car-price { margin-top: 15px; padding-top: 16px; border-top: 1px solid var(--line); }
.bydrive .car-price strong { font-size: 20px; }
.bydrive .benefit-grid { gap: 45px 70px; }
.bydrive .benefit-grid h3 { font-size: 22px; font-weight: 800; }
.note-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; text-align: left; }
.note-grid > article { border: 1px solid var(--line); border-radius: 12px; padding: 20px 12px 12px; display: flex; flex-direction: column; }
.note-grid article > div { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; color: var(--muted); }
.note-grid small { font-size: 10px; }
.note-grid article > div > span { border: 1px solid var(--line); border-radius: 25px; padding: 3px 12px; font-size: 12px; }
.note-grid h3 { font-size: 18px; font-weight: 800; padding: 24px 10px 12px; }
.note-grid p { padding: 0 10px 24px; font-size: 14px; flex-grow: 1; }
.note-grid footer { background: var(--soft); color: var(--muted); padding: 16px 12px; border-radius: 10px; font-size: 11px; }
.bydrive .band { min-height: 620px; align-items: flex-start; justify-content: center; text-align: center; padding-top: 70px; color: var(--ink); background: var(--paper); }
.bydrive .band:after { background: linear-gradient(var(--paper),color-mix(in srgb,var(--paper) 82%,transparent) 45%,transparent); }
.bydrive .band h2 { font-size: 48px; font-weight: 800; margin-bottom: 18px; }
.bydrive .band p { margin-bottom: 25px; }
.bydrive .cta { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; text-align: left; }
.bydrive .cta > div { background: var(--soft); padding: 45px; border-radius: 12px; }
.bydrive .cta h2 { font-size: 36px; }
.bydrive .cta p { margin: 15px 0 25px; }
.help-tile { border: 1px solid var(--line); padding: 40px; border-radius: 12px; }
.help-tile > span { font-size: 40px; display: block; margin-bottom: 30px; }
.help-tile h3 { font-size: 24px; }
.bydrive #app > footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
.bydrive #app > footer p, .bydrive #app > footer a { color: var(--muted); }
.bydrive #app > footer .brand { color: var(--ink); }

/* Rentco: the line grid, restrained red, large panel catalogue and numbered FAQ. */
[data-theme="light"] body.rentco { --paper: #f7f7f7; --soft: #f3f3f3; --muted: #666666; --line: #d5d5d5; }
[data-theme="light"] .rentco .primary { background: #f3f3f3; }
[data-theme="light"] .rentco .booking,
[data-theme="light"] .rentco .booking .loc-panel,
[data-theme="light"] .rentco .booking .calendar { background: #ffffff; --line: #c8c8c8; }
[data-theme="light"] .rentco .booking .cell > button,
[data-theme="light"] .rentco .booking .cell > input { background: #ffffff; box-shadow: inset 0 0 0 1px #b8b8b8; }
.rentco .hero-background,
html[data-theme=light] .rentco .hero-background { background: linear-gradient(180deg,rgba(12,24,34,.2),rgba(12,24,34,.38)),url('assets/cape.webp') center 55%/cover; }
.rentco .hero-background:after { content: ''; position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(90deg,transparent calc(100% - 1px),#ffffff24 0),linear-gradient(transparent calc(100% - 1px),#ffffff24 0); background-size: 33.333% 100%,100% 33.333%; }
.rentco .hero:after { content: ''; position: absolute; inset: 17% 15%; z-index: -1; pointer-events: none; background: radial-gradient(circle,#eee 0 2px,transparent 3px) 0 0/50% 50%; }
.rentco .primary { background: #f5f3ee; color: #1b1b1b; justify-content: space-between; gap: 28px; padding: 8px 8px 8px 24px; min-height: 50px; font: 14px/1.4 var(--rentco-body); text-transform: uppercase; }
.rentco .primary > span { display: grid; place-items: center; background: #202020; color: white; min-width: 36px; min-height: 36px; font-size: 24px; }
.rentco .search { border: 1px solid #424242; }
.rentco { --rentco-body: Arial, Helvetica, sans-serif; --rentco-display: 'Cape Display', Impact, sans-serif; font-family: var(--rentco-body); }
.rentco :is(button,input,select,textarea,.eyebrow,.price-note,.car-price strong,.footer-grid a,.section-head > p,.hero-lead,.rentco-wordmark small) { font-family: var(--rentco-body); }
.rentco :is(h1,h2,h3,.rentco-wordmark,.number) { font-family: var(--rentco-display); }
.rentco .footer-grid h3 {
  font-family: var(--rentco-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 16px;
}
.rentco .primary, .rentco .rentco-wordmark small, .rentco .questions summary > small { }
.rentco .hero-copy { margin-top: 70px; }
.rentco .eyebrow { font-weight: 500; letter-spacing: normal; }
.rentco .price-note { font-weight: 400; letter-spacing: normal; }
.rentco .car-price strong { font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.rentco .footer-grid a { font-size: 15px; font-weight: 400; letter-spacing: normal; }
.rentco .rental-conditions-band { margin: 40px 0; padding: 28px; background: var(--soft); border: 1px solid var(--line); }
.rentco .rental-conditions-band > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.rentco .rental-conditions-band h3 { font: 700 18px/1.4 var(--rentco-body); margin: 0 0 12px; }
.rentco .rental-conditions-band :is(p,.condition-copy) { font-size: 15px; margin: 0; color: var(--muted); }
@media(max-width:600px) { .rentco .rental-conditions-band { padding: 20px; } .rentco .rental-conditions-band > div { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .rentco .rental-conditions-band :is(article,.condition-card) { flex: 0 0 86%; scroll-snap-align: start; } }
.rentco .fleet .section-head > p { font-size: 15px; font-weight: 400; line-height: 1.65; letter-spacing: normal; }
.rentco .booking { padding-top: 22px; padding-bottom: 22px; }
.rentco .hero-booking .booking { padding-top: 28px; padding-bottom: 28px; }
.rentco .booking { --booking-control-height: 48px; }
.rentco .booking .cell > button,
.rentco .booking .cell > input,
.rentco .booking .search { height: var(--booking-control-height); min-height: var(--booking-control-height); box-sizing: border-box; }
.rentco .booking .cell > button { align-items: center; }
.rentco .booking .search { align-self: end; margin-bottom: 7px; padding-top: 5px; padding-bottom: 5px; justify-content: center; }
.rentco .booking .search > span { display: none; }
@media(max-width:900px) {
 .rentco .booking .search { margin-left: 12px; margin-right: 12px; }
}
@media(max-width:600px) {
 .rentco .booking .search { margin-bottom: 8px; }
}
:is(.rentco,.carent) .booking .cell > button,
:is(.rentco,.carent) .booking .cell > input { box-shadow: inset 0 0 0 1px var(--line); border-radius: 0; padding-left: 10px; padding-right: 10px; }
:is(.rentco,.carent) .booking .cell > button:hover,
:is(.rentco,.carent) .booking .cell > input:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.rentco .booking-dock { display: none; position: fixed; z-index: 120; bottom: 16px; left: 24px; right: 24px; max-width: 1120px; margin: auto; }
.rentco .booking-dock.active { display: block; }
.rentco .booking-dock-toggle { display: none; }
.rentco .booking-dock .booking { margin: 0; box-shadow: 0 8px 45px #0005; }
.rentco.has-booking-dock { padding-bottom: var(--booking-dock-space,160px); }
@media (min-width:601px) {
 .rentco .booking-dock .calendar, .rentco .booking-dock .loc-panel { top: auto; bottom: calc(100% + 18px); }
}
@media (max-width:600px) {
 .rentco .booking-dock { left: 10px; right: 10px; bottom: max(10px,env(safe-area-inset-bottom)); }
 .rentco .booking-dock-toggle { display: flex; width: 100%; min-height: 52px; border: 1px solid var(--line); box-shadow: 0 4px 24px #0003; }
 .rentco .booking-dock:not(.expanded) .booking { display: none; }
 .rentco .booking-dock.expanded .booking-dock-toggle { margin-bottom: 8px; }
 .rentco .booking-dock .booking { padding: 14px; grid-template-columns: 1fr; }
 .rentco .booking-dock .cell + .cell { border-left: 0; }
 .rentco .booking-dock .search { grid-column: 1/-1; margin-top: 8px; }
 .rentco .booking-dock .cell { min-width: 0; padding: 8px; }
 .rentco .booking-dock .search { margin-left: 8px; margin-right: 8px; }
 .rentco .booking-dock .cell input, .rentco .booking-dock .cell > button { font-size: 12px; }
 .rentco.has-booking-dock { padding-bottom: var(--booking-dock-space,200px); }
}
.rentco .hero-lead { font-size: 15px; font-weight: 500; line-height: 1.65; letter-spacing: .025em; max-width: 380px; }
.rentco .hero-lead { right: max(0px,calc(100% - 1119px)); }
.rentco .section-head { align-items: flex-start; }
.rentco .journeys > a { border-color: var(--line); gap: 28px; padding: 28px 12px; transition: background-color .15s; }
.rentco .journeys > a:last-child { border-bottom: 1px solid var(--line); }
.rentco .journeys > a:hover,.rentco .journeys > a:focus-visible { background: var(--soft); }
.rentco .journey-icon { width: 44px; height: 44px; flex: 0 0 44px; color: var(--muted); }
.rentco .journeys h2 { font-size: 52px; line-height: 1.05; margin: 0; }
.rentco .journey-copy p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; }
.rentco .journeys .journey-action { display: flex; align-items: center; gap: 14px; margin-left: auto; white-space: nowrap; font-size: 14px; }
.rentco .journey-action b { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); font-size: 24px; }
@media(max-width:600px) {
 .rentco .journeys > a { flex-wrap: wrap; gap: 14px; padding: 24px 0; }
 .rentco .journey-icon { flex-basis: 30px; width: 30px; height: 30px; align-self: flex-start; }
 .rentco .journey-copy { flex: 1; min-width: 0; }
 .rentco .journeys h2 { font-size: 34px; }
 .rentco .journey-copy p { font-size: 14px; }
 .rentco .journeys .journey-action { margin-left: 44px; width: calc(100% - 44px); justify-content: space-between; }
}
.rentco .stats { gap: 0; padding-top: 42px; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.rentco .stats > div { padding: 0 32px; border-left: 1px solid var(--line); }
.rentco .stats > div:first-child { padding-left: 0; border-left: 0; }
.rentco .stats strong { display: block; font-size: 68px; line-height: 1; color: var(--ink); }
.rentco .stats p { color: var(--muted); font: 400 14px/1.5 var(--rentco-body); max-width: 190px; margin-top: 12px; }
.rentco .stats p { display: flex; align-items: flex-start; gap: 10px; max-width: 220px; }
.rentco .fact-icon { flex: 0 0 22px; width: 22px; height: 22px; }
.rentco .rental-note-icon { display: block; width: 64px; height: 64px; margin: 24px 0; color: var(--ink); }
@media(max-width:600px) {
 .rentco .stats { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 26px; padding-top: 30px; padding-bottom: 30px; }
 .rentco .stats > div { padding: 0 18px; }
 .rentco .stats > div:nth-child(odd) { padding-left: 0; border-left: 0; }
 .rentco .stats strong { font-size: 52px; }
 .rentco .stats p { font-size: 13px; margin-top: 8px; }
}
.rentco .section-head .eyebrow { font-size: 13px; }
.rentco .fleet-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.rentco .fleet-grid > .car-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; position: relative; padding: 0; margin: 0; border: 1px solid var(--line); background: var(--soft); }
.rentco .fleet-grid .car-card > img { height: auto; aspect-ratio: 3/2; object-fit: contain; filter: none; padding: 16px; }
.rentco .fleet-grid .car-body { padding: 22px; text-align: left; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rentco .fleet-grid .car-type { font-size: 13px; margin-bottom: 8px; }
.rentco .fleet-grid .car-body h3 { font-size: 38px; }
.rentco .fleet-grid .car-price { justify-content: space-between; gap: 12px; margin-top: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.rentco .fleet-grid .car-price a { border-radius: 0; background: var(--ink); color: var(--paper); width: auto; height: auto; min-height: 44px; padding: 10px 14px; font: 600 14px/1.2 var(--rentco-body); white-space: nowrap; }
.rentco .steps-grid { align-items: start; min-height: 510px; gap: 0; background-image: linear-gradient(90deg,transparent calc(100% - 1px),var(--line) 0); background-size: 33.333% 100%; }
.rentco .steps-grid > article { padding: 0 28px 30px; }
.rentco .steps-grid > article:nth-child(2) { margin-top: 100px; }
.rentco .steps-grid > article:nth-child(3) { margin-top: 200px; }
.rentco .number { border-top: 1px solid var(--line); color: var(--ink); padding-top: 25px; font-size: 70px; }
.rentco .faq { grid-template-columns: 1fr 1.6fr; gap: 35px 90px; }
.rentco .faq > div:first-child { display: contents; }
.rentco .faq .section-head { grid-column: 2; grid-row: 1; margin: 0 0 35px; }
.rentco .faq .section-head h2 { font-size: 100px; }
.rentco .faq img { grid-column: 1; grid-row: 2; width: 240px; height: 260px; aspect-ratio: auto; border-radius: 0; }
.rentco .faq-gallery { grid-column: 1; grid-row: 2; display: grid; gap: 16px; align-self: start; }
.rentco .faq-gallery img { grid-column: auto; grid-row: auto; display: block; width: 100%; height: 180px; object-fit: cover; }
.rentco .faq .questions { grid-column: 2; grid-row: 2 / span 2; }
.rentco .faq-help { grid-column: 1; grid-row: 3; width: 240px; align-self: start; }
.rentco .questions details { padding: 0; border: 0; margin-bottom: 6px; background: var(--soft); }
.rentco .questions summary { padding: 22px; font: 27px/1.1 'Bebas Neue',sans-serif; gap: 12px; justify-content: flex-start; }
.rentco .questions summary > small { font: 13px/1.3 Arial,Helvetica,sans-serif; color: var(--muted); }
.rentco .questions summary > span { margin-left: auto; background: var(--paper); padding: 5px 8px; }
.rentco .questions p { padding: 20px 22px 26px; border-top: 5px solid var(--paper); }
.rentco .guide-grid img { border-radius: 0; aspect-ratio: .95; }
.rentco .guide-grid > a:nth-child(2) { padding-top: 100px; }
.rentco .guide-grid > a:nth-child(3) img { aspect-ratio: .75; }

/* Drovez: clean 75px navigation, panel form and source-specific feature slots. */
.drovez #app > .nav { height: 75px; padding: 0 5%; }
.drovez .nav .brand { font-size: 28px; font-weight: 600; letter-spacing: -.7px; }
.drovez .nav .brand-mark { display: none; }
.drovez .nav .brand small { font-size: 7px; }
.drovez .nav > nav { font-size: 14px; font-weight: 400; gap: 25px; }
.drovez .nav .language { display: none; }
.drovez .nav-cta { border-radius: 30px; padding: 12px 20px; font-size: 14px; }
.drovez .theme-toggle { width: 38px; height: 38px; overflow: hidden; padding: 0; border-radius: 50%; font-size: 0; }
.drovez .theme-toggle:before { content: '◐'; font-size: 21px; }
.drovez .hero-copy > .eyebrow { display: none; }
.drovez .hero h1 { font-size: 62px; line-height: 74.4px; max-width: 1250px; letter-spacing: normal; }
body.drovez .hero { padding-top: 150px; min-height: calc(100svh - 185px); }
.drovez .hero-lead { max-width: 780px; margin: 26px auto 0; line-height: 1.5; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 36px; font-size: 14px; }
.hero-actions > a:first-child { padding: 12px 18px; background: white; color: #111; border-radius: 5px; }
.drovez .hero-booking { max-width: 1200px; }
.drovez .fleet .car-card { padding: 18px; }
.drovez .fleet .car-card > img { border-radius: 5px; }
.drovez .fleet .car-body { padding: 24px 0 0; }
.drovez .fleet .car-body h3 { font-size: 23px; font-weight: 500; }
.drovez .fleet .car-price { padding-top: 18px; border-top: 1px solid var(--line); }
.drovez .fleet .car-price a { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.drovez .facts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0 65px; text-align: left; padding-top: 120px; padding-bottom: 120px; }
.drovez .facts .section-head { grid-column: 1; margin-bottom: 30px; }
.drovez .facts .section-head br { display: none; }
.drovez .fact-slider { grid-column: 1; background: var(--paper); padding: 40px; border-radius: 5px; width: 100%; }
.drovez .fact-slider blockquote { font-size: 20px; line-height: 1.65; min-height: 145px; }
.drovez .fact-index { font-size: 40px; color: var(--line); margin-bottom: 20px; }
.drovez .facts-photo { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 100%; min-height: 470px; border-radius: 5px; }
.drovez .slider-controls button { width: 34px; height: 34px; font-size: 15px; }
.drovez .cta { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 40px; align-items: center; text-align: left; margin: 0; padding: 70px 5%; background: var(--paper); color: var(--ink); border-radius: 0; }
.drovez .cta > img { background: white; }
.drovez .cta h2 { font-size: 38px; line-height: 1.3; }
.drovez .cta p { color: var(--muted); font-size: 14px; margin: 18px 0 0; }
.drovez .cta .eyebrow { margin: 0 0 14px; }
.drovez .cta .primary { background: var(--accent); color: white; }
.drovez #app > footer { display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px; background: #050505; padding: 80px 5% 30px; }
.drovez .footer-top { flex-direction: column; justify-content: flex-start; gap: 32px; margin: 0; }
.drovez .footer-top > p { font-size: 18px; max-width: 240px; }
.drovez .footer-grid { grid-template-columns: 1fr 1fr 1.2fr; gap: 30px; }
.drovez .footer-grid > div:last-child { grid-column: 1/-1; border-top: 1px solid #333; padding-top: 20px; }
.drovez .footer-bottom, .drovez .design-evidence { grid-column: 1/-1; margin-top: 10px; }

/* Zairent: Epilogue body, cyan pills, round icon fields and the peeking carousel. */
.zairent #app > .nav { height: 60px; margin: 24px 5% 0; padding: 0 20px; box-shadow: none; }
.zairent .nav .brand { font: 700 28px/1 Barlow,sans-serif; letter-spacing: -.5px; }
.zairent .brand-mark { color: #f5c526; font-size: 32px; }
.zairent .nav > nav { font-size: 14px; font-weight: 400; gap: 30px; }
.zairent .nav .language { display: none; }
.zairent .nav-cta { border-radius: 50px; background: linear-gradient(110deg,#129cee,#5ab2fa); padding: 5px 18px 5px 6px; gap: 10px; font-size: 15px; }
.arrow-disc { display: grid; place-items: center; background: white; color: #222; border-radius: 50%; width: 32px; height: 32px; font-size: 18px; }
.zairent .theme-toggle { border: 0; background: var(--soft); padding: 7px 10px; }
.zairent .hero-copy > .eyebrow { display: none; }
.zairent .hero-lead { font-size: 16px; max-width: 720px; line-height: 24px; margin: 20px auto 0; }
.zairent .hero-background { background: linear-gradient(180deg,#ffd12f 5%,#ffd945 50%,var(--paper) 100%); }
.zairent .hero-background:after { content: ''; position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(120deg,transparent 0 75px,#ffb91c52 75px 130px,transparent 130px 220px); mask-image: linear-gradient(black,transparent 75%); }
.zairent .hero-booking { max-width: 1296px; margin-top: 55px; }
body.zairent .hero { padding-top: 180px; }
.zairent .booking { border: 0; border-radius: 90px; padding: 24px 28px; gap: 18px; box-shadow: none; grid-template-columns: 1.1fr 1fr 230px; }
.zairent .booking .cell { padding: 5px 15px 5px 75px; }
.zairent .booking .cell:before { content: '⌖'; position: absolute; left: 0; top: 2px; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); font-size: 28px; color: var(--ink); }
.zairent .booking .cell:nth-child(2):before { content: '▦'; }
.zairent .booking .cell + .cell { border-left: 0; }
.zairent .booking .cell label { font-size: 13px; font-weight: 500; color: var(--ink); }
.zairent .booking .cell > button, .zairent .booking .cell > input { color: var(--muted); font-size: 13px; font-weight: 400; }
.zairent .booking .search { padding: 15px 22px; align-self: center; font-size: 14px; background: linear-gradient(110deg,#129cee,#5ab2fa); }
.zairent .intro-image img { border-radius: 20px; }
.zairent .fleet { background: #eff7fd; }
.zairent .fleet .section-head { text-align: center; flex-direction: column; align-items: center; gap: 16px; }
.zairent .fleet .section-head > p { max-width: 650px; }
.zairent .spotlight { overflow: clip; }
.zairent .spotlight > .spotlight-track { display: flex; gap: 24px; padding: 0 0 20px; background: none; border-radius: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.zairent .spotlight-slide { display: grid; grid-template-columns: .9fr 1.2fr; align-items: center; gap: 40px; background: #eff7fd; border-radius: 24px; padding: 45px; flex: 0 0 94%; scroll-snap-align: start; min-width: 0; }
.spotlight-slide h3 { font-size: 42px; margin-bottom: 24px; }
.spotlight-slide p { font-size: 14px; }
.spotlight-slide .primary { display: flex; width: 100%; margin-top: 25px; background: linear-gradient(110deg,#129cee,#5ab2fa); }
.spotlight-slide figure { position: relative; margin: 0; }
.spotlight-slide img { width: 100%; background: white; }
.availability-badge { position: absolute; top: -14px; right: 15px; padding: 9px 15px; border-radius: 30px; background: #ffd12f; color: #302b1c; font-size: 11px; font-weight: 600; }
.zairent .spotlight > .spotlight-controls { display: flex; justify-content: flex-end; gap: 12px; background: none; padding: 0; }
.spotlight-controls button { width: 45px; height: 45px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); }
.zairent .facts { border-radius: 0; background: #eff7fd; color: var(--ink); }
.zairent .facts p { color: var(--muted); }
.zairent .fact-slider { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 40px; }
.zairent .fact-slider blockquote { font-size: 28px; font-weight: 500; }
.zairent .cta { background: linear-gradient(90deg,#ffd12f 35%,#ffd12f00 90%),url('assets/cape.webp') right center/cover; text-align: left; padding: 80px 60px; }
.zairent .cta h2 { font-size: 64px; max-width: 600px; }
.zairent .cta p { max-width: 480px; }
.zairent #app > footer { border-radius: 0; }

/* Carent's source footer and image-backed statistics. */
.carent .stats { background: linear-gradient(#1119,#111b),url('assets/mono.webp') center/cover; padding-top: 150px; padding-bottom: 150px; }
.carent .stats strong { font: 600 70px/1 Geist,sans-serif; }
.carent .stats p { color: #ddd; font-size: 15px; }
.carent .faq img { border-radius: 20px; }
.carent #app > footer { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px 100px; padding: 80px 30px 30px; background: #151515; overflow: clip; }
.carent .footer-top { display: flex; flex-direction: column; gap: 60px; margin: 0; }
.footer-booking-panel { padding: 32px; background: #202020; border-radius: 22px; width: min(100%,500px); }
.footer-booking-panel h3 { font: 600 28px/1.2 Geist,sans-serif; margin-bottom: 16px; }
.footer-booking-panel p { font-size: 14px; margin-bottom: 24px; }
.footer-booking-panel .primary { background: #eee; color: #111; border-radius: 10px; }
.footer-booking-panel small { display: block; color: #aaa; font-size: 11px; margin-top: 15px; }
.carent .footer-grid { gap: 30px; grid-template-columns: 1fr 1fr; }
.carent .footer-grid h3 { font-size: 21px; font-weight: 600; }
.carent .footer-grid a, .carent .footer-grid p { font-size: 14px; }
.footer-wordmark { grid-column: 1/-1; font: 600 clamp(120px,21vw,340px)/.8 Geist,sans-serif; letter-spacing: -.07em; color: #282828; white-space: nowrap; margin: 80px -20px 0; }
.carent .footer-bottom, .carent .design-evidence { grid-column: 1/-1; margin-top: 0; }

html[data-theme=dark] .bydrive { --accent: #f1f2f3; --on-accent: #141619; }
html[data-theme=dark] .zairent .fleet, html[data-theme=dark] .zairent .facts, html[data-theme=dark] .zairent .spotlight-slide { background: #192733; }

@media (min-width:901px) and (max-height:760px) {
  body.bydrive .hero { padding-top: 130px; }
  body.zairent .hero { padding-top: 110px; }
  body.carent .hero { padding-top: 125px; }
  .carent .hero h1 { font-size: 125px; }
  .carent .hero-lead { font-size: 18px; margin-top: 24px; }
  body.drovez .hero { padding-top: 75px; }
  .drovez .hero h1 { font-size: 56px; line-height: 1.2; }
  .hero-actions { margin-top: 24px; }
}
@media (max-width:1150px) and (min-width:901px) {
  body:not(.rentco) #app > .nav { gap: 16px; padding-left: 22px; padding-right: 22px; }
  body:not(.rentco) .nav > nav { gap: 15px; font-size: 12px; }
  .carent .nav .brand { font-size: 24px; }
  .nav-cta { font-size: 12px!important; padding: 12px 16px!important; }
  .zairent .nav .brand { font-size: 24px; }
  .zairent .booking { grid-template-columns: 1.1fr 1fr 180px; }
  .zairent .booking .cell { padding-left: 50px; }
  .zairent .booking .cell:before { width: 40px; height: 40px; font-size: 22px; }
}
@media (max-width:900px) {
  body.bydrive .hero, body.zairent .hero { padding-top: 135px; }
  body:not(.rentco) #app > .nav { grid-template-columns: 1fr auto; height: 76px; }
  body:not(.rentco) .nav > .nav-cta { display: none; }
  body:not(.rentco) .nav > .menu-toggle { grid-column: 2; }
  body:not(.rentco) .nav > nav { display: none; }
  body:not(.rentco) .nav.menu-open > nav { display: flex; position: absolute; top: calc(100% + 6px); left: 0; right: 0; width: auto; flex-direction: column; align-items: stretch; gap: 8px; padding: 24px; background: var(--paper); color: var(--ink); font-size: 15px; }
  .carent .nav.menu-open .theme-toggle { color: var(--ink); border-color: var(--line); }
  .carent .nav .menu-toggle { color: white; border-color: #ffffff80; }
  body.carent .hero { padding: 160px 5% 90px; }
  .carent .hero h1 { font-size: 95px; }
  .carent .hero-lead { font-size: 20px; }
  .bydrive .booking { grid-template-columns: 1fr 1fr; }
  .bydrive .search { grid-column: 1/-1; }
  .bydrive .hero h1 { font-size: 50px; line-height: 1.15; }
  .note-grid { grid-template-columns: 1fr 1fr; }
  .bydrive .cta { grid-template-columns: 1fr; }
  .rentco .fleet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rentco .faq { grid-template-columns: 1fr 1.5fr; gap: 25px; }
  .rentco .faq .section-head h2 { font-size: 70px; }
  .rentco .faq img, .rentco .faq-help { width: 100%; }
  .rentco .steps-grid { min-height: 590px; }
  .rentco .steps-grid > article { padding-left: 15px; padding-right: 15px; }
  .drovez .hero h1 { font-size: 50px; line-height: 1.2; }
  body.drovez .hero { padding-top: 100px; min-height: 740px; }
  .drovez .facts { gap: 30px; grid-template-columns: 1.3fr 1fr; padding-top: 80px; padding-bottom: 80px; }
  .drovez .fact-slider { padding: 24px; }
  .drovez .fact-slider blockquote { font-size: 18px; }
  .drovez .cta { grid-template-columns: 1fr 1.5fr; }
  .drovez .cta .primary { grid-column: 2; justify-self: start; }
  .drovez #app > footer { grid-template-columns: 1fr; }
  .drovez .footer-top { flex-direction: row; justify-content: space-between; }
  .zairent #app > .nav { height: 66px; margin: 20px 4% 0; }
  .zairent h1 { font-size: 58px; line-height: 1.12; }
  .zairent h2 { font-size: 40px; line-height: 1.2; }
  .zairent .booking { border-radius: 40px; grid-template-columns: 1fr 1fr; padding: 24px; }
  .zairent .booking .search { grid-column: 1/-1; }
  .zairent .booking .cell { padding-left: 55px; }
  .zairent .booking .cell:before { width: 42px; height: 42px; font-size: 22px; }
  .zairent .spotlight-slide { padding: 30px; gap: 25px; }
  .spotlight-slide h3 { font-size: 34px; }
  .carent #app > footer { gap: 45px; }
  .carent .footer-grid { gap: 25px; }
}
@media (max-width:600px) {
  body.bydrive .hero, body.zairent .hero { padding-top: 105px; }
  body:not(.rentco) #app > .nav { padding-left: 20px; padding-right: 20px; }
  .carent .nav .brand { font-size: 25px; }
  body.carent .hero { padding: 155px 20px 75px; }
  .carent .hero-copy { margin-top: 24px; }
  .carent .hero h1 { font-size: 61px; line-height: .9; letter-spacing: -.065em; }
  .carent .hero-lead { font-size: 17px; margin-top: 26px; }
  .carent .hero-booking { margin-top: 25px; }
  .carent .stats { padding-top: 75px; padding-bottom: 75px; }
  .carent .stats strong { font-size: 50px; }
  .carent .stats p { font-size: 12px; }
  .bydrive .hero h1 { font-size: 38px; line-height: 1.15; }
  .bydrive .hero-lead { font-size: 13px; }
  .bydrive .hero-booking { margin-top: 28px; }
  .bydrive .booking { grid-template-columns: 1fr; padding: 12px; }
  .bydrive .booking .cell + .cell { border-top: 1px solid var(--line); }
  .bydrive .fleet-grid .car-card > img { aspect-ratio: 1.25; }
  .bydrive .section-head { align-items: flex-start; text-align: left; margin-bottom: 30px; }
  .note-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding-bottom: 15px; }
  .note-grid > article { flex: 0 0 90%; scroll-snap-align: start; }
  .bydrive .band { padding-top: 60px; min-height: 500px; }
  .bydrive .band h2 { font-size: 36px; }
  .bydrive .cta > div, .help-tile { padding: 28px; }
  .bydrive .cta h2 { font-size: 30px; }
  .rentco .fleet-grid { grid-template-columns: 1fr; }
  .rentco .fleet-grid > .car-card { display: flex; padding: 0; margin: 0; }
  .rentco .fleet-grid .car-card > img { height: 240px; padding: 15px; }
  .rentco .fleet-grid .car-body { padding: 24px 18px; }
  .rentco .fleet-grid .car-body h3 { font-size: 43px; }
  .rentco .steps-grid { min-height: 0; background-size: 100% 100%; gap: 0; }
  .rentco .steps-grid > article { padding: 0 0 35px 20px; margin: 0!important; border-left: 1px solid var(--line); }
  .rentco .number { font-size: 55px; }
  .rentco .faq { display: block; }
  .rentco .faq .section-head h2 { font-size: 64px; }
  .rentco .faq img, .rentco .faq-help { display: none; }
  .rentco .faq-gallery { display: flex; gap: 12px; overflow-x: auto; margin-bottom: 24px; }
  .rentco .faq-gallery img { display: block; flex: 0 0 75%; width: 75%; height: 180px; }
  .rentco .questions summary { font-size: 23px; padding: 18px 14px; }
  .rentco .questions summary small { font-size: 11px; }
  .rentco .guide-grid > a:nth-child(2) { padding-top: 0; }
  .rentco .guide-grid img, .rentco .guide-grid > a:nth-child(3) img { aspect-ratio: 1.25; }
  .drovez .nav .brand { font-size: 24px; }
  body.drovez .hero { min-height: 665px; padding-top: 95px; }
  .drovez .hero h1 { font-size: 38px; line-height: 1.2; }
  .drovez .hero-lead { margin-top: 22px; font-size: 13px; }
  .hero-actions { gap: 20px; font-size: 12px; margin-top: 24px; }
  .drovez .facts { display: flex; flex-direction: column; gap: 24px; padding: 65px 22px; }
  .drovez .facts .section-head { margin: 0; }
  .drovez .facts-photo { height: 320px; min-height: 0; }
  .drovez .fact-slider blockquote { min-height: 150px; }
  .drovez .cta { grid-template-columns: 1fr; padding: 50px 22px; gap: 28px; }
  .drovez .cta .primary { grid-column: 1; }
  .drovez .cta h2 { font-size: 33px; }
  .drovez .cta > img { max-width: 300px; }
  .drovez #app > footer { padding: 60px 22px 25px; }
  .drovez .footer-top { flex-direction: column; }
  .drovez .footer-grid { grid-template-columns: 1fr 1fr; }
  .zairent .nav .brand { font-size: 25px; }
  .zairent .hero h1 { font-size: 42px; line-height: 1.12; }
  .zairent .hero-lead { font-size: 13px; line-height: 1.6; }
  .zairent .hero-booking { margin-top: 30px; }
  .zairent .booking { grid-template-columns: 1fr; border-radius: 28px; padding: 18px; gap: 10px; }
  .zairent .booking .cell { padding: 8px 0 8px 55px; }
  .zairent .booking .cell + .cell { border-top: 0; }
  .zairent .booking .cell:before { top: 9px; }
  .zairent .booking .cell label { font-size: 11px; }
  .zairent .booking .cell > button, .zairent .booking .cell > input { font-size: 12px; }
  .zairent .booking .search { margin-top: 2px; }
  .zairent .spotlight-slide { display: flex; flex-direction: column-reverse; padding: 22px; gap: 25px; flex-basis: 92%; }
  .spotlight-slide h3 { font-size: 31px; }
  .spotlight-slide .eyebrow { font-size: 8px; }
  .spotlight-slide p { font-size: 13px; }
  .spotlight-slide figure { margin-top: 15px; }
  .zairent .fact-slider { padding: 25px; }
  .zairent .fact-slider blockquote { font-size: 25px; }
  .zairent .cta { padding: 55px 25px; background: linear-gradient(180deg,#ffd12f 40%,#ffd12f55),url('assets/cape.webp') center bottom/cover; min-height: 490px; }
  .zairent .cta h2 { font-size: 54px; }
  .carent #app > footer { grid-template-columns: 1fr; padding: 60px 22px 25px; }
  .footer-booking-panel { padding: 26px; }
  .footer-wordmark { margin: 25px -10px 0; font-size: 23vw; }
  .carent .footer-grid { grid-template-columns: 1fr 1fr; }
  .carent .footer-grid h3 { font-size: 19px; }
}
/* Rentco inner pages: photo-led editorial heroes and flat contact panel. */
.rentco[data-page] .inner-hero { position: relative; isolation: isolate; min-height: 660px; padding: 250px max(24px,calc((100vw - 1200px)/2)) 70px; background: linear-gradient(#0007,#000a),url('assets/mono.webp') center/cover; color: #f5f3ee; text-align: left; }
.rentco[data-page] .inner-hero:before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg,transparent 0,transparent calc(33.333% - 1px),#ffffff20 33.333%); }
.rentco[data-page] .inner-hero h1 { max-width: 1200px; font-size: clamp(70px,10vw,150px); line-height: .95; letter-spacing: -.025em; margin: 20px 0; }
.rentco[data-page] .inner-hero > p { max-width: 580px; line-height: 1.6; color: #f5f3ee; }
.rentco[data-page] .inner-hero .primary { display: inline-flex; margin-top: 28px; }
.rentco[data-page] .inner-cover { display: block; width: calc(100% - 48px); max-width: 1200px; margin: 70px auto; border-radius: 0; aspect-ratio: 2.2; object-fit: cover; }
.rentco[data-page] .article-layout { max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; gap: 70px; grid-template-columns: 240px minmax(0,1fr); }
.rentco[data-page] .article-layout aside { border-top: 1px solid var(--line); padding-top: 24px; }
.rentco[data-page] .article-layout article h2 { font-size: 64px; margin: 48px 0 22px; line-height: 1; }
.rentco[data-page] .article-layout article h3 { font-size: 34px; margin-top: 30px; }
.rentco[data-page] .article-layout article p { font-size: 17px; line-height: 1.75; margin-bottom: 20px; }
.rentco[data-page] .contact-layout { max-width: 1200px; margin: 0 auto; padding: 40px 24px 100px; gap: 80px; }
.rentco[data-page] .contact-layout h2 { font-size: 52px; line-height: 1; margin: 24px 0; }
.rentco[data-page] .contact-layout p,.rentco[data-page] .contact-layout li { line-height: 1.75; }
.rentco[data-page] .contact-panel { background: var(--soft); border: 1px solid var(--line); border-radius: 0; padding: 40px; }
.rentco[data-page="contact"] .inner-cover { display: none; }
.rentco[data-page="contact"] .contact-layout { padding-top: 90px; }
@media(max-width:1099px) {
 body.rentco :is(#app,#main-content) .nav {
  width: 100%; max-width: none; margin: 0;
  top: 0; left: 0; right: 0; transform: none;
  border-radius: 0; border-top: 0; border-left: 0; border-right: 0;
 }
 body.rentco :is(#app,#main-content) .nav.menu-open > nav { top: 100%; }
}
@media(min-width:1100px) {
 body.rentco :is(#app,#main-content) .nav {
  position: relative; margin: 0; background: #303030; color: #f3f1eb; z-index: 35;
  top: 0; left: 0; right: 0; transform: none;
  width: 100%; max-width: none; height: 88px;
  padding: 0 max(6%, calc((100% - 1200px)/2));
  border-radius: 0; border-bottom: 1px solid #ffffff20;
  display: flex; justify-content: space-between; gap: 28px;
 }
 body.rentco :is(#app,#main-content) .nav > .brand { text-align: left; flex-shrink: 0; }
 body.rentco #app > .nav { position: absolute; }
 body.rentco :is(#app,#main-content) .nav > .menu-toggle,
 body.rentco :is(#app,#main-content) .nav > .rentco-quick-book { display: none; }
 body.rentco :is(#app,#main-content) .nav > nav {
  display: flex; position: static; flex-direction: row;
  align-items: center; gap: 22px; padding: 0;
  background: transparent; border: 0; box-shadow: none;
  font: 14px/1.4 var(--rentco-body); white-space: nowrap;
 }
 body.rentco :is(#app,#main-content) .nav > nav > a:not(.primary) { padding: 12px 0; }
 body.rentco :is(#app,#main-content) .nav .language { display: none; }
 body.rentco :is(#app,#main-content) .nav .theme-toggle { border-color: #666; padding: 10px; }
 body.rentco :is(#app,#main-content) .nav nav .primary {
  background: #f5f5f5; color: #191919; padding: 13px 20px;
  min-height: 44px; font: 14px/1.3 var(--rentco-body);
 }
}
@media(min-width:901px) {
 body.rentco #app:has(.hero) { --content-gutter: max(6%, calc((100% - 1200px)/2)); }
 body.rentco #app:has(.hero) .hero,
 body.rentco #app:has(.hero) .section,
 body.rentco #app:has(.hero) > footer {
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
 }
 body.rentco #app:has(.hero) .hero-copy { padding-left: 0; border-left: 0; }
 body.rentco #app:has(.hero) .hero-booking { max-width: none; width: 100%; }
 body.rentco #app:has(.hero) .hero-lead { right: 0; }
}
@media(max-width:600px) {
 .rentco .hero-copy { margin-top: 15px; }
 .rentco .hero { padding-bottom: 60px; }
 .rentco .fleet-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; }
 .rentco .fleet-grid > .car-card { flex: 0 0 90%; scroll-snap-align: start; }
 .rentco .fleet-grid .car-card > img { height: auto; aspect-ratio: 3/2; }
 .rentco .fleet-grid .car-body h3 { font-size: 34px; }
 .rentco[data-page] .inner-hero { min-height: 520px; padding: 180px 24px 48px; }
 .rentco[data-page] .inner-hero h1 { font-size: 64px; overflow-wrap: anywhere; }
 .rentco[data-page] .inner-cover { margin: 36px auto; aspect-ratio: 1.4; }
 .rentco[data-page] .article-layout,.rentco[data-page] .contact-layout { display: block; padding: 24px 24px 60px; }
 .rentco[data-page] .article-layout aside { position: static; margin-bottom: 40px; }
 .rentco[data-page] .article-layout article h2 { font-size: 44px; }
 .rentco[data-page] .contact-layout h2 { font-size: 42px; }
 .rentco[data-page] .contact-panel { padding: 24px; margin-top: 40px; }
}

/* Orange accent (owner, 2026-09-12). Applied to non-text surfaces and display
 * type only: the CTA arrow box, the step numbers, the step icons and focus
 * rings. Small body text is left alone deliberately, because orange on this
 * near-black ground does not clear 4.5:1 and text-contrast would fail it. */
.rentco { --accent: #e2571f; --on-accent: #ffffff; }
.rentco .primary > span { background: var(--accent); color: var(--on-accent); }
.rentco .number { color: var(--accent); }
.rentco .step-icon { width: 28px; height: 28px; color: var(--accent); display: block; margin: 0 0 14px; }
.rentco .steps-grid article { display: flex; flex-direction: column; }
.rentco :is(a,button,input,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rentco .fact-slider { border-left: 3px solid var(--accent); padding-left: 18px; }
.rentco .topic-icon { width: 26px; height: 26px; color: var(--accent); display: block; margin: 0 0 12px; }
/* Language picker (owner, 2026-09-12): the nav listed every locale as a bare
 * link, which grows with each language added. A details disclosure needs no
 * JavaScript, so it works before hydration and in the chrome-controls gate. */
.rentco .lang-picker { position: relative; font: 12px/1 var(--rentco-body); }
/* The open panel has to clear the theme toggle that follows it in the nav:
 * without this the gate found every locale link "unreachable, the first
 * covered by theme-toggle". The stacking context goes on the OPEN picker,
 * not just the panel, or a later sibling still paints over it. */
.rentco .lang-picker[open] { z-index: 80; }
.rentco .lang-picker > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 10px; text-transform: uppercase; letter-spacing: .04em; }
.rentco .lang-picker > summary::-webkit-details-marker { display: none; }
.rentco .lang-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: grid; gap: 2px; min-width: 148px; padding: 8px; background: #101010; border: 1px solid #333; }
.rentco .lang-panel :is(a,strong) { display: block; padding: 8px 10px; text-decoration: none; white-space: nowrap; }
.rentco .lang-panel strong { color: var(--accent); }
.rentco .lang-panel a:hover { background: #1c1c1c; }
.rentco .lang-picker-drawer .lang-panel { position: static; border: 0; background: transparent; padding: 0; }
/* An accessible name that a speech user can say: the visible label stays the
 * name, with a prefix that is read but not shown. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* The picker follows the same visibility rules the bare .language block had,
 * or a phone shows the desktop picker AND the drawer's plain links at once. */
@media (max-width: 1100px) { .rentco .nav .lang-picker { display: none; } }
@media (max-width: 900px) { .rentco .nav.menu-open .lang-picker { display: none; } }
/* Dark-mode CTA (owner, 2026-09-12): outlined box, orange label, orange arrow,
 * instead of the cream fill. The text orange is #f4783c rather than the base
 * #e2571f: measured against the dark body ground #191919 the base clears
 * 4.5:1 only at 4.70, and the label is 14px normal weight, so it is one tweak
 * away from failing. #f4783c measures 6.36:1 and is the same orange family. */
html[data-theme=dark] .rentco { --accent-on-dark: #f4783c; }
html[data-theme=dark] .rentco .primary { background: transparent; color: var(--accent-on-dark); border: 1px solid #3d3d3d; }
html[data-theme=dark] .rentco .primary > span { background: transparent; color: var(--accent-on-dark); min-width: 0; }
html[data-theme=dark] .rentco .primary:hover { border-color: var(--accent-on-dark); filter: none; }
html[data-theme=dark] .rentco .number,
html[data-theme=dark] .rentco :is(.step-icon,.topic-icon) { color: var(--accent-on-dark); }
/* A transparent CTA is only as legible as whatever sits behind it. Over the
 * hero photographs on /terms and /contact, pixel-sampling the real ground
 * behind the label measured 3.59:1 and 3.81:1, while a flat-colour check of
 * the same button had said 4.98:1 PASS, because the photo is an <img> and not
 * a CSS background the check could see. Hero CTAs therefore take an opaque
 * dark ground, which keeps the outlined look and makes the contrast a property
 * of the button instead of the photograph. */
html[data-theme=dark] .rentco .editorial-hero .primary { background: rgba(17,17,17,.92); }

/* Owner, 2026-09-15: larger, better-styled icons on the home page, and the
   photo band carries a paragraph of driving conditions. */
.rentco .stats p { align-items: center; gap: 14px; }
.rentco .fact-icon { flex: 0 0 46px; width: 46px; height: 46px; padding: 11px; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); background: var(--paper); box-sizing: border-box; }
.rentco .step-icon { width: 52px; height: 52px; margin: 0 0 20px; }
.rentco .topic-icon { width: 40px; height: 40px; margin: 0 0 16px; }
.rentco .benefit-grid .symbol { width: 72px; height: 72px; border-color: var(--line); color: var(--accent); background: var(--paper); }
.rentco .benefit-icon { width: 34px; height: 34px; display: block; }
.rentco .band .band-copy { color: #f1efe9; font-size: 17px; line-height: 1.7; max-width: 640px; margin: -10px 0 34px; }
html[data-theme=dark] .rentco :is(.fact-icon,.benefit-icon) { color: var(--accent-on-dark); }
@media (max-width: 600px) {
  .rentco .fact-icon { flex-basis: 40px; width: 40px; height: 40px; padding: 9px; }
  .rentco .step-icon { width: 44px; height: 44px; }
  .rentco .benefit-grid .symbol { width: 56px; height: 56px; }
  .rentco .benefit-icon { width: 28px; height: 28px; }
  .rentco .band .band-copy { font-size: 15px; margin: -4px 0 26px; }
}

/* Owner, 2026-09-15: languages in a nav switcher at every width, and the theme
   toggle as an icon. The drawer picker's panel sits in flow (position static),
   which is what keeps the drawer's own links reachable when it is open. */
.rentco .nav .theme-toggle { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 0; background: transparent; color: inherit; font-size: 0; }
.rentco .nav .theme-toggle svg { width: 18px; height: 18px; }
.rentco .nav .lang-picker-drawer { display: none; }
@media (max-width: 1100px) and (min-width: 901px) { .rentco .nav .lang-picker:not(.lang-picker-drawer) { display: block; } }
@media (max-width: 900px) {
  .rentco .nav.menu-open .lang-picker.lang-picker-drawer { display: block; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
  .rentco .nav .lang-picker-drawer > summary { padding: 13px; justify-content: space-between; }
  .rentco .nav .lang-picker-drawer .lang-panel { position: static; min-width: 0; border: 0; background: transparent; padding: 0 0 6px 13px; }
  .rentco .nav.menu-open .theme-toggle { width: 44px; }
}

/* The MCH booking widget (owner, 2026-09-15). LocalRent's v3 search mounts in
   .lr-v3-host; public/lr-hero-widget.js does the inline restyle. The card is
   white in both themes, as MCH's is, because the widget's popovers are. The
   skeleton holds the card's height and shape until the widget has mounted, so
   the hero does not jump and the fold measurement sees the form at once. */
.rentco .booking.lr-booking,
html[data-theme=dark] .rentco .booking.lr-booking { display: block; background: #ffffff; color: #1b1b1b; padding: 14px; border: 1px solid #c8c8c8; box-shadow: 0 15px 40px #0000001f; color-scheme: only light; }
.rentco .lr-booking .lr-v3-host { width: 100%; }
.rentco .lr-skeleton { display: flex; gap: 12px; align-items: stretch; }
.rentco .lr-skeleton__pill { flex: 1 1 0; height: 64px; box-shadow: inset 0 0 0 1px #b8b8b8; background: #ffffff; }
.rentco .lr-skeleton__find { flex: 0 0 210px; height: 64px; background: #1b1b1b; }
.rentco .lr-booking.lr-ready .lr-skeleton { display: none; }
.rentco .lr-booking:not(.lr-ready) .lr-v3-host { position: absolute; visibility: hidden; }
@media (max-width: 1024px) and (min-width: 769px) { .rentco .lr-skeleton__find { flex-basis: 150px; } }
@media (max-width: 768px) {
  .rentco .lr-skeleton { flex-direction: column; gap: 10px; }
  .rentco .lr-skeleton__find { flex-basis: auto; height: 54px; }
}

/* Locale homes render the English template (rule 3a-00). Dutch "AUTOVERHUUR"
   is eleven display letters and ran past a 390px screen at the English 90px;
   the hero heading scales with the viewport on phones instead. */
@media (max-width: 600px) { html:not([lang="en"]) .rentco .hero h1 { font-size: min(90px, 18vw); } }
@media (max-width: 600px) { html:not([lang="en"]) .rentco .cta h2 { font-size: min(105px, 17vw); } }
/* German and Dutch compounds ("HUURVOORWAARDEN.", sixteen display letters)
   do not fit a phone at the English 64px; section headings follow the
   viewport there. English keeps its sizes. */
@media (max-width: 600px) { html:not([lang="en"]) .rentco .section-head h2 { font-size: min(64px, 12.5vw); } }