/* Britannia Cars homepage — desktop identity and navigation refinement.
   Mobile/tablet stays governed by home-mobile.css at 1024px and below. */

/* These progressive actions are intentionally desktop-only so the approved
   mobile card composition remains unchanged. */
body.page-home .service-card-action,
body.page-home .fleet-card-action {
  display: none;
}

@media (min-width: 1025px) {
  body.page-home nav#navbar {
    background: linear-gradient(180deg, #0c0c0c 0%, #080808 100%) !important;
    border-bottom-color: rgba(201, 168, 76, 0.28) !important;
  }

  body.page-home nav#navbar.scrolled {
    background: rgba(8, 8, 8, 0.98) !important;
    border-bottom-color: rgba(232, 201, 122, 0.38) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.page-home nav#navbar .nav-logo {
    min-height: 68px;
    gap: 0;
    border-radius: 6px;
  }

  body.page-home nav#navbar .nav-logo-icon {
    --home-desktop-logo-width: clamp(144px, 12vw, 170px);

    display: grid;
    flex: 0 0 var(--home-desktop-logo-width);
    width: var(--home-desktop-logo-width);
    height: auto;
    aspect-ratio: 800 / 314;
    overflow: visible;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  body.page-home nav#navbar .nav-logo-icon picture {
    display: contents;
  }

  body.page-home nav#navbar .nav-logo-icon img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center;
    border-radius: 0 !important;
    filter: drop-shadow(0 2px 8px rgba(232, 201, 122, 0.1));
    transition: filter 200ms ease-out, transform 200ms ease-out;
  }

  body.page-home nav#navbar .nav-logo:hover img,
  body.page-home nav#navbar .nav-logo:focus-visible img {
    filter: drop-shadow(0 3px 11px rgba(232, 201, 122, 0.18));
    transform: translateY(-1px);
  }

  /* The approved logo already contains the complete Britannia Cars wordmark. */
  body.page-home nav#navbar .nav-logo-text {
    display: none;
  }

  body.page-home nav#navbar .nav-links > li > a:not(.nav-cta) {
    color: #bcb5aa;
    font-weight: 500;
    transition: color 180ms ease-out;
  }

  body.page-home nav#navbar .nav-links > li > a:hover,
  body.page-home nav#navbar .nav-links > li > a:focus-visible,
  body.page-home nav#navbar .nav-links > li > a.active {
    color: var(--gold-light, #e8c97a);
  }

  body.page-home nav#navbar .nav-links > li > a::after {
    transform-origin: center;
  }

  body.page-home nav#navbar .nav-cta {
    min-height: 44px;
    border-color: rgba(232, 201, 122, 0.78);
    background: rgba(201, 168, 76, 0.035);
    box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.04);
  }

  body.page-home nav#navbar .nav-cta:hover,
  body.page-home nav#navbar .nav-cta:focus-visible {
    border-color: var(--gold-light, #e8c97a);
    box-shadow: 0 8px 22px rgba(201, 168, 76, 0.16);
  }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  body.page-home nav#navbar .nav-logo-icon img {
    transition: none;
  }
}

@media (min-width: 1025px) and (max-width: 1120px) {
  body.page-home nav#navbar .nav-links {
    gap: 12px;
    margin-left: 20px;
  }

  body.page-home nav#navbar .nav-links a {
    font-size: 11px;
    letter-spacing: 0.085em;
  }

  body.page-home nav#navbar .nav-cta {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
}

/* Homepage desktop design system and section-level refinement. */
@media (min-width: 1025px) {
  body.page-home {
    --home-content-max: 1248px;
    --home-gutter: clamp(28px, 4.2vw, 60px);
    --home-section-space: clamp(76px, 6vw, 92px);
    --home-panel: #191a18;
    --home-panel-raised: #20211f;
    --home-panel-deep: #111210;
    --home-text-strong: #faf8f3;
    --home-text: #d2ccc2;
    --home-text-muted: #bdb6ab;
    --home-border: rgba(232, 201, 122, 0.18);
    --home-border-strong: rgba(232, 201, 122, 0.46);
    --home-gold: #d4b357;
    --home-gold-light: #edcf85;
    --home-card-radius: 12px;
    --home-control-radius: 10px;
    --home-motion: 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
  }

  body.page-home::before {
    opacity: 0.16;
  }

  body.page-home #mainContent > section:not(#hero) {
    scroll-margin-top: 104px;
  }

  body.page-home :where(a, button, input, select, textarea, iframe):focus-visible {
    outline: 2px solid var(--home-gold-light);
    outline-offset: 3px;
  }

  body.page-home :where(.services-header, .services-grid, .booking-inner, .fleet-header, .fleet-grid, .about-inner, .testimonials-header, .testimonials-grid, .coverage-inner),
  body.page-home footer :where(.footer-grid, .footer-bottom) {
    width: min(100%, var(--home-content-max));
    max-width: var(--home-content-max);
  }

  body.page-home :where(#services, #booking, #fleet, #about, #testimonials, #coverage).section-pad {
    padding: var(--home-section-space) var(--home-gutter);
  }

  body.page-home :where(.services-header, .fleet-header, .testimonials-header) {
    margin-bottom: clamp(42px, 3.6vw, 52px);
  }

  body.page-home .section-title {
    color: var(--home-text-strong);
  }

  body.page-home .section-body {
    color: var(--home-text);
  }

  body.page-home :where(.btn-primary, .btn-secondary, .btn-submit, .btn-dark, .btn-outline-dark) {
    min-height: 50px;
    border-radius: var(--home-control-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 180ms ease-out, background-color 180ms ease-out,
      border-color 180ms ease-out, box-shadow 180ms ease-out,
      transform 180ms ease-out;
  }

  body.page-home :where(.btn-primary, .btn-secondary, .btn-submit, .btn-dark, .btn-outline-dark):active {
    transform: translateY(1px);
  }

  /* Services: equal rows, stronger hierarchy, and an explicit card action. */
  body.page-home #services .services-grid {
    grid-auto-rows: 1fr;
    gap: 26px;
  }

  body.page-home #services .service-link {
    min-width: 0;
    border-radius: var(--home-card-radius);
  }

  body.page-home #services .service-link:focus-visible {
    outline-offset: 5px;
  }

  body.page-home #services .service-card.reveal {
    height: 100%;
    padding: 0 30px 30px;
    overflow: hidden;
    background: linear-gradient(155deg, var(--home-panel-raised), var(--home-panel));
    border: 1px solid var(--home-border);
    border-radius: var(--home-card-radius);
    cursor: pointer;
    transform: translateY(0) !important;
    transition: transform var(--home-motion), border-color var(--home-motion),
      background-color var(--home-motion), box-shadow var(--home-motion) !important;
  }

  body.page-home #services .service-card::before {
    height: 3px;
    background: linear-gradient(90deg, var(--home-gold), var(--home-gold-light));
    transform-origin: center;
  }

  body.page-home #services .service-number {
    display: none;
  }

  body.page-home #services .service-media {
    width: calc(100% + 60px);
    margin: 0 -30px;
    border-bottom: 1px solid rgba(232, 201, 122, 0.08);
  }

  body.page-home #services .service-media img {
    filter: brightness(0.76) saturate(0.74) contrast(1.06);
  }

  body.page-home #services .service-icon {
    position: relative;
    z-index: 2;
    display: flex;
    width: 46px;
    height: 46px;
    margin: -23px 0 18px;
    background: var(--home-panel-deep);
    border: 1px solid var(--home-border-strong);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  }

  body.page-home #services .service-icon svg {
    width: 19px;
    height: 19px;
    stroke: var(--home-gold-light);
  }

  body.page-home #services .service-name {
    margin-bottom: 12px;
    color: var(--home-text-strong);
    font-size: 25px;
    font-weight: 500;
  }

  body.page-home #services .service-desc {
    color: var(--home-text-muted);
    font-size: 15px;
    line-height: 1.72;
  }

  body.page-home #services .service-card-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    margin-top: 22px;
    color: var(--home-gold-light);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  body.page-home #services .service-card-action svg,
  body.page-home #fleet .fleet-card-action svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.6;
    transition: transform var(--home-motion);
  }

  body.page-home #services .service-link:hover .service-card.reveal,
  body.page-home #services .service-link:focus-visible .service-card.reveal {
    background: linear-gradient(155deg, #242521, #1b1c1a);
    border-color: var(--home-border-strong);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px) !important;
  }

  body.page-home #services .service-link:hover .service-media img,
  body.page-home #services .service-link:focus-visible .service-media img {
    filter: brightness(0.88) saturate(0.84) contrast(1.05);
    transform: scale(1.025);
  }

  body.page-home #services .service-link:hover .service-card-action svg,
  body.page-home #services .service-link:focus-visible .service-card-action svg,
  body.page-home #fleet .fleet-card-action:hover svg,
  body.page-home #fleet .fleet-card-action:focus-visible svg {
    transform: translateX(4px);
  }

  /* Booking: a compact service panel beside a clearer, tactile form. */
  body.page-home #booking .booking-inner {
    grid-template-columns: minmax(270px, 0.62fr) minmax(0, 1.5fr);
    column-gap: clamp(48px, 5vw, 68px);
  }

  body.page-home #booking .booking-info > .section-body {
    margin-bottom: 44px;
  }

  body.page-home #booking .booking-contact-items {
    gap: 0;
    padding: 8px 24px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--home-panel), var(--home-panel-deep));
    border: 1px solid var(--home-border);
    border-radius: var(--home-card-radius);
  }

  body.page-home #booking .booking-contact-item {
    gap: 15px;
    min-width: 0;
    padding: 18px 0;
    align-items: center;
    border-bottom: 1px solid rgba(232, 201, 122, 0.1);
  }

  body.page-home #booking .booking-contact-item:last-child {
    border-bottom: 0;
  }

  body.page-home #booking .booking-contact-icon {
    width: 44px;
    height: 44px;
    background: rgba(232, 201, 122, 0.07);
    border-color: rgba(232, 201, 122, 0.3);
    border-radius: 10px;
  }

  body.page-home #booking .booking-contact-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--home-gold-light);
  }

  body.page-home #booking .booking-contact-text {
    min-width: 0;
    color: var(--home-text-muted);
  }

  body.page-home #booking .booking-contact-text a {
    color: var(--home-gold-light);
    overflow-wrap: anywhere;
  }

  body.page-home #booking .booking-form.reveal {
    padding: 40px 46px;
    background: linear-gradient(145deg, #252623, #1e1f1d);
    border: 1px solid var(--home-border);
    border-radius: var(--home-card-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  }

  body.page-home #booking .form-title {
    color: var(--home-text-strong);
    font-size: 27px;
    font-weight: 500;
  }

  body.page-home #booking .form-subtitle {
    margin-bottom: 28px;
    color: var(--home-text-muted);
  }

  body.page-home #booking .form-grid {
    gap: 17px 18px;
  }

  body.page-home #booking :where(.form-group input, .form-group select) {
    min-height: 50px;
  }

  body.page-home #booking :where(.form-group input, .form-group select, .form-group textarea) {
    color: var(--home-text-strong);
    background-color: var(--home-panel-deep);
    border-color: rgba(232, 201, 122, 0.22);
    border-radius: var(--home-control-radius);
  }

  body.page-home #booking :where(.form-group input, .form-group select, .form-group textarea):hover {
    border-color: rgba(232, 201, 122, 0.38);
  }

  body.page-home #booking :where(.form-group input, .form-group select, .form-group textarea):focus {
    background-color: #151612;
    border-color: var(--home-gold);
  }

  body.page-home #booking .form-group textarea {
    min-height: 112px;
  }

  body.page-home #booking :where(input[type="date"], input[type="time"]) {
    color-scheme: dark;
  }

  body.page-home #booking .form-check {
    min-height: 44px;
  }

  body.page-home #booking .form-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  body.page-home #booking .btn-submit {
    min-height: 52px;
    border-radius: var(--home-control-radius);
  }

  /* Fleet: image-led vehicle cards with aligned data and real actions. */
  body.page-home #fleet .fleet-grid {
    gap: 26px;
  }

  body.page-home #fleet .fleet-card.reveal {
    overflow: hidden;
    background: linear-gradient(155deg, var(--home-panel-raised), var(--home-panel));
    border: 1px solid var(--home-border);
    border-radius: var(--home-card-radius);
    transform: none !important;
    transition: border-color var(--home-motion), background-color var(--home-motion) !important;
  }

  body.page-home #fleet .fleet-card:hover {
    background: linear-gradient(155deg, #22231f, #1b1c1a);
    border-color: rgba(232, 201, 122, 0.3);
    transform: none !important;
  }

  body.page-home #fleet .fleet-image {
    height: auto;
    border-bottom: 1px solid rgba(232, 201, 122, 0.1);
    filter: brightness(0.82) saturate(0.76) contrast(1.04);
    transition: filter var(--home-motion);
  }

  body.page-home #fleet .fleet-card:hover .fleet-image {
    filter: brightness(0.9) saturate(0.84) contrast(1.04);
  }

  body.page-home #fleet .fleet-body {
    padding: 30px;
  }

  body.page-home #fleet .fleet-model {
    color: var(--home-text-strong);
    font-size: 23px;
    font-weight: 500;
  }

  body.page-home #fleet .fleet-desc {
    color: var(--home-text-muted);
  }

  body.page-home #fleet .fleet-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
  }

  body.page-home #fleet .fleet-spec {
    min-width: 0;
    padding: 0 10px;
    text-align: center;
  }

  body.page-home #fleet .fleet-spec:first-child {
    padding-left: 0;
  }

  body.page-home #fleet .fleet-spec:last-child {
    padding-right: 0;
  }

  body.page-home #fleet .fleet-spec + .fleet-spec {
    border-left: 1px solid rgba(232, 201, 122, 0.13);
  }

  body.page-home #fleet .fleet-spec-key {
    overflow-wrap: anywhere;
  }

  body.page-home #fleet .fleet-card-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    min-height: 44px;
    margin-top: 17px;
    color: var(--home-gold-light);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.13em;
    text-decoration: none;
    text-transform: uppercase;
  }

  /* About: retain the content structure and give its photography more depth. */
  body.page-home #about .about-inner {
    gap: clamp(68px, 7vw, 96px);
  }

  body.page-home #about .about-image-wrap {
    isolation: isolate;
  }

  body.page-home #about .about-image-wrap::before {
    position: absolute;
    z-index: -1;
    inset: -14px 16px 18px -14px;
    border: 1px solid rgba(232, 201, 122, 0.22);
    border-radius: var(--home-card-radius);
    content: "";
  }

  body.page-home #about .about-image {
    height: auto;
    border-radius: var(--home-card-radius);
    filter: brightness(0.78) saturate(0.72) contrast(1.04);
  }

  body.page-home #about .about-image-badge {
    border-radius: var(--home-card-radius);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
  }

  body.page-home #about .why-item-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    background: rgba(232, 201, 122, 0.06);
    border-radius: 10px;
  }

  body.page-home #about .why-item-title {
    color: var(--home-text-strong);
  }

  /* Testimonials: editorial typography with aligned author baselines. */
  body.page-home #testimonials .testimonials-grid {
    gap: 26px;
  }

  body.page-home #testimonials .testimonial-card.reveal {
    display: flex;
    min-height: 360px;
    padding: 36px 34px 32px;
    flex-direction: column;
    background: linear-gradient(155deg, var(--home-panel-raised), var(--home-panel));
    border: 1px solid var(--home-border);
    border-top: 2px solid rgba(232, 201, 122, 0.48);
    border-radius: var(--home-card-radius);
  }

  body.page-home #testimonials .testimonial-quote-mark {
    top: 12px;
    right: 25px;
    color: rgba(232, 201, 122, 0.13);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 100px;
    font-weight: 400;
  }

  body.page-home #testimonials .testimonial-stars {
    margin-bottom: 20px;
  }

  body.page-home #testimonials .testimonial-text {
    flex: 1 1 auto;
    margin-bottom: 26px;
    color: #ded8ce;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.003em;
  }

  body.page-home #testimonials .testimonial-author {
    margin-top: auto;
    border-top-color: rgba(232, 201, 122, 0.12);
  }

  body.page-home #testimonials .testimonial-name {
    color: var(--home-text-strong);
  }

  body.page-home #testimonials .testimonial-role {
    color: var(--home-text-muted);
  }

  /* Coverage: two balanced, scannable information panels. */
  body.page-home #coverage .coverage-inner {
    gap: 24px;
    align-items: stretch;
  }

  body.page-home #coverage .coverage-inner > .reveal {
    min-width: 0;
    padding: clamp(30px, 3vw, 38px);
    background: linear-gradient(155deg, var(--home-panel-raised), var(--home-panel));
    border: 1px solid var(--home-border);
    border-radius: var(--home-card-radius);
  }

  body.page-home #coverage .section-body {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  body.page-home #coverage .airport-list {
    gap: 10px;
  }

  body.page-home #coverage .airport-item {
    min-height: 54px;
    padding: 13px 15px;
    background: var(--home-panel-deep);
    border-color: rgba(232, 201, 122, 0.16);
    border-radius: var(--home-control-radius);
    transition: none;
  }

  body.page-home #coverage .airport-item:hover {
    background: var(--home-panel-deep);
    border-color: rgba(232, 201, 122, 0.16);
  }

  body.page-home #coverage .local-areas {
    justify-content: center;
    gap: 9px;
  }

  body.page-home #coverage .local-tag {
    padding: 9px 14px;
    color: var(--home-text-muted);
    background: var(--home-panel-deep);
    border-color: rgba(232, 201, 122, 0.16);
    border-radius: 999px;
    transition: none;
  }

  body.page-home #coverage .local-tag:hover {
    color: var(--home-text-muted);
    border-color: rgba(232, 201, 122, 0.16);
  }

  /* CTA: a quieter champagne band that keeps conversion priority clear. */
  body.page-home #cta-banner {
    padding: 70px var(--home-gutter);
    background: linear-gradient(105deg, #bd983f 0%, #ddbd68 48%, #c5a34d 100%);
    border-top: 1px solid rgba(255, 242, 198, 0.45);
    border-bottom: 1px solid rgba(19, 17, 10, 0.32);
  }

  body.page-home #cta-banner::before {
    display: none;
  }

  body.page-home #cta-banner .cta-title {
    color: #10110f;
    font-size: clamp(40px, 3.6vw, 56px);
    font-weight: 400;
    letter-spacing: -0.035em;
  }

  body.page-home #cta-banner .cta-sub {
    color: rgba(16, 17, 15, 0.78);
    font-size: 16px;
  }

  body.page-home #cta-banner :where(.btn-dark, .btn-outline-dark) {
    min-height: 52px;
    border-radius: var(--home-control-radius);
  }

  body.page-home #cta-banner :where(.btn-dark, .btn-outline-dark):focus-visible {
    outline-color: #10110f;
  }

  /* Footer: keep its compact footprint while making the map and links cohesive. */
  body.page-home footer {
    background: #10110f;
  }

  body.page-home footer iframe {
    border-color: rgba(232, 201, 122, 0.2);
    border-radius: var(--home-control-radius);
    filter: grayscale(1) sepia(0.16) brightness(0.72) contrast(1.08);
    transition: filter var(--home-motion), border-color var(--home-motion);
  }

  body.page-home footer iframe:hover,
  body.page-home footer iframe:focus-visible {
    border-color: rgba(232, 201, 122, 0.46);
    filter: grayscale(0.38) sepia(0.08) brightness(0.88) contrast(1.04);
  }

  body.page-home footer .footer-links a {
    color: var(--home-text-muted);
  }

  body.page-home footer .footer-links a:hover,
  body.page-home footer .footer-links a:focus-visible {
    color: var(--home-gold-light);
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  body.page-home #services .service-card.reveal {
    padding-right: 24px;
    padding-bottom: 27px;
    padding-left: 24px;
  }

  body.page-home #services .service-media {
    width: calc(100% + 48px);
    margin-right: -24px;
    margin-left: -24px;
  }

  body.page-home #services .service-name {
    font-size: 22px;
  }

  body.page-home #booking .booking-form.reveal {
    padding: 34px 36px;
  }

  body.page-home #fleet .fleet-body {
    padding: 26px 22px;
  }

  body.page-home #fleet .fleet-spec {
    padding-right: 6px;
    padding-left: 6px;
  }

  body.page-home #about .about-inner {
    gap: 48px;
  }

  body.page-home #about .about-image-badge {
    width: 96px;
    height: 96px;
  }

  body.page-home #testimonials .testimonial-card.reveal {
    padding-right: 27px;
    padding-left: 27px;
  }

  body.page-home .whatsapp-float {
    right: 8px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.page-home :where(.service-card.reveal, .service-media img, .service-card-action svg,
    .fleet-card.reveal, .fleet-image, .fleet-card-action svg, .btn-primary,
    .btn-secondary, .btn-submit, .btn-dark, .btn-outline-dark, footer iframe) {
    transition: none !important;
  }

  body.page-home #services .service-link:hover .service-card.reveal,
  body.page-home #services .service-link:focus-visible .service-card.reveal,
  body.page-home :where(.btn-primary, .btn-secondary, .btn-submit, .btn-dark, .btn-outline-dark):active {
    transform: none !important;
  }
}