/* ============================================================
   Amanah Motors — global stylesheet
   ------------------------------------------------------------
   NOTE: The full design system (brand colour variables, reset,
   typography, buttons, forms, grid, cards) is added in Step 1.1.
   For now this file only holds the WhatsApp floating button.
   ============================================================ */

/* Cormorant Garamond — used by the homepage's stacking-cards headings
   (.stack-card__heading / .stack-card__number). @import must be the
   very first rule in the file (only comments may precede it) or the
   browser silently ignores it. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&display=swap');

/* ------------------------------------------------------------
   Temporary base reset — replaced by the full reset in Step 1.1
   ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #1A1A1A;
  background: #F9F9F9;
}

img { max-width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------
   Responsive baseline
   ------------------------------------------------------------
   Breakpoint convention used sitewide from here on: a single fluid
   mobile layout (no fixed pixel widths — %, clamp(), flex-wrap, and
   auto-fill grids so it already scales correctly anywhere from
   ~320px up, with no dedicated rule needed per device), then 768px
   (tablet portrait) and 1024px (tablet landscape / desktop). Older
   sections already use nearby numbers (560/600/640/768/820/900px)
   from earlier passes — those still work and weren't worth
   re-verifying wholesale, but anything new should land on 768/1024. */
/* NOTE: deliberately NOT setting overflow-x here. Per the CSS Overflow
   spec, giving overflow-x any value other than visible while overflow-y
   stays at its default visible forces overflow-y to compute to auto —
   which turns <body> into a scrolling container and breaks
   position:sticky for every descendant (the pinned hero photo and the
   stacking cards both rely on the viewport, not body, being the nearest
   scrolling ancestor). max-width alone is enough to stop the page box
   itself from exceeding the viewport width, with none of that side
   effect, so any element that genuinely overflows horizontally should be
   fixed at the source instead of papered over here. */
html, body { max-width: 100vw; }
video, iframe, svg { max-width: 100%; }

/* Touch targets: 44px minimum height on primary CTA buttons, phone and
   up. Deliberately scoped to .btn-primary only — plenty of secondary/
   compact controls sitewide (icon toggles, table-row action buttons,
   etc.) were sized small on purpose and a blanket `button{}` rule here
   would undo that. */
@media (max-width: 1023px) {
  .btn-primary {
    min-height: 44px;
  }
}

.btn-secondary {
  padding: 10px 16px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  color: #1A1A1A;
}
.btn-secondary:hover {
  border-color: #054B29;
  color: #054B29;
}

/* ============================================================
   Home page — hero section
   ============================================================ */

/* Sticky wrapper — makes the hero pin at the top of the viewport (rather
   than position:fixed on the hero itself) while later sections, painted
   with a higher z-index and a solid background, scroll up and visually
   cover it. Lower z-index than everything that follows. */
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 0;
}

/* Background photo ONLY now — the heading/subtitle/search pill used to
   live inside this box, but that pinned them to the screen right along
   with the photo. They've moved out to .hero-overlay (normal flow, right
   after this) so they scroll away naturally while the photo stays put. */
.hero {
  position: relative;
  height: 100%;
  overflow: hidden;                /* clips the Ken Burns zoom to the hero box */
}

/* Normal-flow sibling of .hero-sticky, not nested inside it — pulled up
   with a negative top margin so it starts flush over the pinned photo.
   Being normal flow (not sticky), it scrolls with the page like any other
   content, which is the "scrolls away naturally" part of the effect. */
.hero-overlay {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;          /* stack content top-to-bottom */
  align-items: center;             /* center all items horizontally */
  justify-content: center;         /* center vertically */
  text-align: center;              /* center all text */
  padding: 24px 0 90px;
  color: #FFFFFF;
}

/* The background photo lives on its own layer (behind the content) so the
   Ken Burns zoom animates just the image, not the text/search bar on top
   of it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to bottom, rgba(10, 40, 25, 0.35), rgba(10, 40, 25, 0.85)),
    url('../images/hero%20img%202.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  animation: kenburns 8s ease-out forwards;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Same centred 1280px track + 16px left pad as the navbar,
   so the heading lines up under the logo. */
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-headline {
  margin: 0 0 16px 0;
  font-weight: 700;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.15;
  text-align: center;
  opacity: 0;
  animation: fadeSlideUp 0.7s ease-out 0.2s forwards;
}

.hero-accent {
  color: #C4883A;
}

.hero__title {
  margin: 0 0 0.4em;
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.5rem);    /* ~22% bigger than before (was 2.5–4.5rem) */
  line-height: 1.08;
  letter-spacing: 0.5px;
  opacity: 0;
  animation: fadeSlideUp 0.7s ease-out 0.2s forwards;
}


/* ---- Trust Badges ---- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeSlideUp 0.7s ease-out 0.4s forwards;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
}

.badge-check {
  font-weight: 700;
  color: #AB7755;
}

/* ---- Hero Subtitle Group ---- */
.hero__subtitle-group {
  margin: 0 0 32px 0;
  max-width: 620px;
  opacity: 0;
  animation: fadeSlideUp 0.7s ease-out 0.6s forwards;
}

.hero__subtitle {
  margin: 0 0 1.2rem;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.6rem);
  line-height: 1.6;
  opacity: 0;
  animation: fadeSlideUp 0.7s ease-out 0.6s forwards;
}

.hero__subtitle-desc {
  text-align: center;
  max-width: 600px;
  margin: 0;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.6;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero__cta {
  display: inline-block;
  padding: 16px 44px;
  background: #AB7755;             /* Dark Copper */
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: background-color 0.2s ease, transform 0.2s ease;
  opacity: 0;
  animation: fadeSlideUp 0.7s ease-out 1.0s forwards;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: #925F42;
  transform: translateY(-2px);
}

/* ---- Hero search / filter bar ----
   Wide pill spanning most of the hero's width, centred independently of
   the left-aligned heading/CTA above it — a sibling of .hero__content,
   not nested inside it, so its centring isn't constrained to that
   column's width. Segmented fields (Brand / Condition / Body Type)
   separated by thin dividers, plus a circular search button. */
.hero-search {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: 88%;
  max-width: 1000px;
  margin: 0;
  padding: 8px;
  background: #FFFFFF;
  border-radius: 50px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  opacity: 0;
  animation: fadeSlideUp 0.7s ease-out 0.8s forwards;
}

.hero-search__field {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 26px;
  text-align: left;
}


.hero-search__field label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8A8A8A;                 /* small grey label */
}

.hero-search__field select {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1A1A1A;                 /* darker text for the selected value */
  cursor: pointer;
}

.hero-search__btn {
  flex: 0 0 auto;
  align-self: center;
  width: 56px;
  height: 56px;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #054B29;
  color: #FFFFFF;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hero-search__btn svg {
  width: 22px;
  height: 22px;
}

.hero-search__btn:hover,
.hero-search__btn:focus-visible {
  background: #03361D;
}

@media (max-width: 768px) {
  .hero__content {
    padding-top: 90px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-headline {
    font-size: 26px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .hero__subtitle-desc {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }

  .trust-badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .trust-badges .trust-badge {
    font-size: 12px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
  }

  /* Make Amanah copper more vivid on mobile */
  .hero-headline .hero-accent,
  .hero-headline span[style*="color"] {
    color: #C4883A !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  }

  /* Add text shadow to whole headline for readability */
  .hero-headline {
    text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
  }

  /* Logo on mobile */
  .am-nav__logo img,
  .nav-logo img,
  header img[class*="logo"] {
    width: auto !important;
    height: 55px !important;
    object-fit: contain !important;
  }
}

/* Hamburger button styling */
.hamburger,
.nav-toggle,
[class*="hamburger"],
[class*="menu-toggle"],
.am-nav__toggle {
  background: rgba(5, 75, 41, 0.85) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  backdrop-filter: blur(4px) !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__cta { transition: none; }

  /* Skip straight to the end state instead of animating/zooming. */
  .hero::before,
  .hero__title,
  .hero__subtitle,
  .hero__cta {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* BRAND LOGO TICKER — purely decorative, infinite scroll strip */
.brand-ticker {
  position: relative;
  z-index: 1;              /* above .hero-sticky, so it covers the pinned hero */
  height: 80px;
  overflow: hidden;
  background: #f5f0e8;
}
.brand-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  animation: scroll-left 30s linear infinite;
  will-change: transform;  /* GPU compositing — avoids a flicker each time
                                the animation loops back to 0% */
}
.brand-ticker__logo {
  flex: 0 0 auto;          /* flex-shrink: 0 already covered by the "0" here */
  display: block;
  margin-right: 48px;      /* on every logo, including the last of each
                               set — see the -50% note below for why */
  width: 100px;            /* fixed box on BOTH axes — with width previously
                               "auto", the track's total (and hence the
                               -50% translation target) depended on each
                               image's own natural size, which isn't known
                               until it finishes loading; 16 images loading
                               at staggered times meant the loop distance
                               kept changing underneath the animation,
                               which is what actually caused the jump */
  height: 28px;
  object-fit: contain;     /* preserves each logo's own aspect ratio inside
                               that fixed box instead of stretching it */
  /* kept in each brand's own original colour, per spec — no filter/tint */
}
/* Honda and MG are square, icon-only marks (no wordmark), so at the same
   28px height they read as visibly smaller/lighter than the wordmark
   logos above — simulated the rendered box for all 8 logos and both
   come out clearly lightest (~800 sq px vs 1000-2500 for the others).
   Bumped just these two so all 8 feel like the same visual weight. */
.brand-ticker__logo--icon {
  height: 38px;
}
/* Left/right fade so the strip appears to fade in/out at the edges */
.brand-ticker::before,
.brand-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}
.brand-ticker::before {
  left: 0;
  background: linear-gradient(to right, #f5f0e8, transparent);
}
.brand-ticker::after {
  right: 0;
  background: linear-gradient(to left, #f5f0e8, transparent);
}

/* The track renders the brand list twice back to back (see index.html) —
   translating exactly -50% moves it by one full set's width, so the
   second (identical) set lines up perfectly where the first started,
   with no visible jump. This only lines up exactly because every
   logo (including the last one in each set) carries its own trailing
   margin above, rather than spacing coming from a flex `gap` — with
   22 items that would total 21 gaps (an odd count), putting the
   track's true midpoint half a gap short of the second set's start. */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-ticker__track { animation: none; }
}


/* ============================================================
   Home page — "Browse Features" card carousel
   ============================================================ */

.browse {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  padding: 56px 24px;
}

.browse__header {
  max-width: 1280px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.browse__title {
  margin: 0;
  color: #0A0A0A;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-align: left;
}

.browse__arrows {
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
}

.browse__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;              /* pill / fully round */
  background: #1e1b4b;               /* dark navy/indigo */
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.browse__arrow:hover,
.browse__arrow:focus-visible {
  background: #14123a;
  transform: scale(1.06);
}
.browse__arrow svg {
  width: 20px;
  height: 20px;
}

.browse__track {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
/* Hide the scrollbar — the arrow buttons (and swipe on touch) drive it */
.browse__track { scrollbar-width: none; -ms-overflow-style: none; }
.browse__track::-webkit-scrollbar { display: none; }

.browse__card {
  position: relative;
  flex: 0 0 calc((100% - 40px) / 3);  /* 3 cards visible on desktop */
  scroll-snap-align: start;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: block;
  text-decoration: none;

  /* Scroll-in reveal (see .card-visible below) — starts hidden. */
  opacity: 0;
  transform: translateY(40px);
  /* Hover lift (see @media (hover: hover) below) — a plain transition,
     kept separate from the reveal so the two can run at different
     speeds on the same `transform` property. */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* The background photo (set inline per-card via style="background-image:…")
   gets its own layer so it can zoom on hover independently of the card
   itself lifting — `inherit` pulls the host element's own inline
   background-image/size/position, no HTML change needed. */
.browse__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  transition: transform 0.3s ease;
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Added by the IntersectionObserver in index.html once the section
   scrolls into view. Runs once — the class is never removed, so
   scrolling back up does not re-trigger it. */
.browse__card.card-visible {
  animation: cardFadeIn 0.6s ease-out forwards;
}
.browse__card:nth-child(1).card-visible { animation-delay: 0s; }
.browse__card:nth-child(2).card-visible { animation-delay: 0.15s; }
.browse__card:nth-child(3).card-visible { animation-delay: 0.3s; }
.browse__card:nth-child(4).card-visible { animation-delay: 0.45s; }
.browse__card:nth-child(5).card-visible { animation-delay: 0.6s; }

/* Desktop-only hover lift — excluded on touch devices, where ":hover"
   would otherwise stick after a tap. */
@media (hover: hover) {
  .browse__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  }
  .browse__card:hover::before {
    transform: scale(1.05);
  }
}

.browse__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.browse__card-title {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  margin: 0;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}

.browse__card-subtitle {
  position: absolute;
  top: 60px;
  left: 24px;
  right: 24px;
  margin: 0;
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .browse__card { flex: 0 0 calc((100% - 20px) / 2); }  /* 2 cards on tablet */
}

@media (max-width: 768px) {
  .browse__card { flex: 0 0 100%; height: 320px; }      /* 1 card on mobile */
}

@media (prefers-reduced-motion: reduce) {
  .browse__card,
  .browse__card::before {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   Home page — "Everything You Need, Under One Roof" intro section
   ============================================================ */

/* ============================================================
   Home page — scroll-driven "floating" stacking cards
   ------------------------------------------------------------
   Premium-card version: each card is now a narrow (70% wide), rounded,
   shadowed panel rather than a full-bleed block, and the wrapper is
   fully transparent on purpose — the sticky hero photo above (see
   .hero-sticky) stays pinned behind this whole section, so it shows
   through around all four sides of every floating card as it scrolls.

   A compact card can't be the "slot" itself any more (that only works
   when the card IS the 100vh unit — see the old note this replaced).
   So each card is back inside a .stack-card-slot: the slot is the
   normal-flow 75vh unit that spaces the four of them across the
   wrapper's ~300vh, and gives each sticky card a containing block
   taller than itself, which is what position:sticky needs to have any
   "stuck" duration at all. The slot has no background of its own, so
   the extra room around the compact card is exactly where the hero
   shows through — that's the intended look here, not the gap bug from
   the earlier full-bleed version.

   Cormorant Garamond (used by .stack-card__heading/__number) is
   imported at the very top of this file — @import must precede every
   other rule to take effect at all, so it couldn't live down here.
   ============================================================ */

.stack-cards__wrapper {
  position: relative;
  z-index: 10;
  background: transparent;   /* the hero photo behind shows through here */
  height: 300vh;
}

.stack-card-slot {
  position: relative;
  height: 75vh;               /* 300vh / 4 cards */
  margin: 0;
  padding: 0;
}

.stack-card {
  position: sticky;
  display: flex;
  align-items: center;
  width: 70%;
  margin: 0 auto;
  padding: 40px 48px;          /* compact — not a full viewport-height block */
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
  overflow: hidden;
}

/* Explicit per-card z-index on top of the increasing `top` offsets —
   belt-and-suspenders so each later card is guaranteed to paint over the
   one before it as they stack, even if the DOM order above ever changes. */
.stack-card--1 { top: 80px;  z-index: 10; }
.stack-card--2 { top: 100px; z-index: 20; }
.stack-card--3 { top: 120px; z-index: 30; }
.stack-card--4 { top: 140px; z-index: 40; }

.stack-card__inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

.stack-card__number {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.35);
}

.stack-card__heading {
  margin: 0 0 20px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.2;
}

.stack-card__body {
  margin: 0;
  max-width: 600px;
  font-size: 1rem;
  line-height: 1.7;
}

/* ---- Card 1: emerald, diagonal line texture ---- */
.stack-card--1 {
  background-color: #054B29;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 12px
  );
}

/* ---- Card 2: copper, dot grid texture ---- */
.stack-card--2 {
  background-color: #AB7755;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* ---- Card 3: dark, fine diagonal "noise" texture ---- */
.stack-card--3 {
  background-color: #1a1a1a;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 7px
  );
}

/* ---- Card 4: beige, cross-hatch texture, emerald text ---- */
.stack-card--4 {
  background-color: #f5f0e8;
  background-image:
    repeating-linear-gradient(45deg, rgba(5, 75, 41, 0.05) 0px, rgba(5, 75, 41, 0.05) 1px, transparent 1px, transparent 14px),
    repeating-linear-gradient(-45deg, rgba(5, 75, 41, 0.05) 0px, rgba(5, 75, 41, 0.05) 1px, transparent 1px, transparent 14px);
  color: #054B29;
}
.stack-card--4 .stack-card__number {
  color: rgba(5, 75, 41, 0.35);
}

@media (max-width: 640px) {
  .stack-card__heading { font-size: 1.7rem; }
  .stack-card { width: 88%; padding: 28px 24px; }
}

/* ---- Phone landscape (short viewport) ----
   Not verifiable with a real device/browser from here — reasoned
   through from the CSS rather than visually confirmed, flagged as
   such in the summary this shipped with.
   Hero: .hero-sticky is already exactly 100vh (never taller) by
   definition; the real risk in a short landscape viewport is the
   TEXT overlay (title/subtitle/search pill) needing more vertical
   room than the viewport has, forcing a scroll to reach the search
   bar. Shrinking its padding/type here is what keeps it fitting.
   Stacking cards: the sticky-pin-per-slot effect assumes a tall
   viewport to scroll through — collapsed to a plain horizontal-
   scroll strip instead, since there isn't the vertical room for the
   stacking illusion to read correctly. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-overlay {
    min-height: auto;
    padding: 12px 0 20px;
  }
  .hero__title {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    margin-bottom: 0.2em;
  }
  .hero__subtitle {
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 0.8rem;
  }
  .hero-search {
    margin-top: 14px;
    padding: 6px;
  }
  .hero-search__field {
    padding: 4px 16px;
  }
  .hero-search__btn {
    width: 44px;
    height: 44px;
  }

  .stack-cards__wrapper {
    height: auto;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 16px;
    scroll-snap-type: x mandatory;
  }
  .stack-card-slot {
    height: auto;
    flex: 0 0 80%;
    max-width: 420px;
    scroll-snap-align: start;
  }
  .stack-card {
    position: static;
    top: auto;
    width: 100%;
    margin: 0;
    padding: 20px 24px;
    max-height: 100%;
    overflow-y: auto;
  }
  .stack-card__heading { font-size: 1.4rem; margin-bottom: 10px; }
  .stack-card__body { font-size: 0.88rem; line-height: 1.5; }
}


/* ============================================================
   Home page — "Cars For Sale" inventory section
   ============================================================ */

.inventory {
  position: relative;
  z-index: 1;
  background: #F9F9F9;
  padding: 56px 24px 72px;
}

.inventory__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.inventory__label {
  margin: 0 0 6px;
  color: #054B29;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.inventory__title {
  margin: 0 0 28px;
  color: #0A0A0A;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.inventory__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.inventory__tab {
  padding: 10px 22px;
  border: 1px solid #D9D9D9;
  border-radius: 999px;
  background: #FFFFFF;
  color: #444444;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.inventory__tab:hover {
  border-color: #054B29;
}
.inventory__tab.is-active {
  background: #054B29;
  border-color: #054B29;
  color: #FFFFFF;
}

.inventory__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.inventory__status {
  grid-column: 1 / -1;
  padding: 40px 0;
  color: #666666;
  text-align: center;
}

.inventory__footer {
  margin-top: 40px;
  text-align: center;
}

.inventory__view-all {
  display: inline-block;
  padding: 14px 36px;
  background: #054B29;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.inventory__view-all:hover,
.inventory__view-all:focus-visible {
  background: #AB7755;
}

/* ---- Cards ---- */
.inv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);

  /* Scroll-reveal starting state — see .inv-visible below */
  opacity: 0;
  transform: translateY(40px);
}
.inv-card--hidden {
  display: none;
}

.inv-card__media {
  position: relative;
  height: 180px;
}
.inv-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inv-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
}
.inv-card__badge--new { background: #054B29; }
.inv-card__badge--used { background: #AB7755; }
.inv-card__badge--sold { background: #D32F2F; }

.inv-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 18px 20px 20px;
}
.inv-card__title {
  margin: 0 0 10px;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 1.1rem;
}
.inv-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.inv-card__tag {
  padding: 3px 10px;
  background: #F5F5F5;
  border-radius: 999px;
  color: #444444;
  font-weight: 600;
  font-size: 0.75rem;
}
.inv-card__price {
  margin: 0 0 16px;
  color: #AB7755;
  font-weight: 700;
  font-size: 1.15rem;
}
.inv-card__enquire {
  display: inline-block;
  width: 100%;
  margin-top: auto;
  padding: 11px 0;
  background: #054B29;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.inv-card__enquire:hover,
.inv-card__enquire:focus-visible {
  background: #AB7755;
}

/* ---- Scroll-reveal: staggered fade-in ----
   Same recipe as the Services cards — a one-shot @keyframes
   animation (not a transition), added via .inv-visible once the
   grid scrolls into view (see the IntersectionObserver in
   public/js/home.js). Runs once — never re-triggers on scroll up. */
@keyframes invCardFadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inv-card.inv-visible {
  animation: invCardFadeIn 0.6s ease-out forwards;
}
.inventory__grid .inv-card:nth-child(1) { animation-delay: 0s; }
.inventory__grid .inv-card:nth-child(2) { animation-delay: 0.15s; }
.inventory__grid .inv-card:nth-child(3) { animation-delay: 0.3s; }
.inventory__grid .inv-card:nth-child(4) { animation-delay: 0.45s; }

@media (max-width: 1024px) and (min-width: 769px) {
  .inventory__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .inventory__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   Home page — Contact + Map section, and slim footer bar
   ============================================================ */

.contact-map {
  position: relative;
  z-index: 1;
  background: #054B29;
  padding: 64px 24px;
}

.contact-map__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-map__label {
  margin: 0 0 20px;
  color: #AB7755;                  /* Copper */
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---- Contact items (icon card + label/value) ---- */
.contact-map__items {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 24px 0 28px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-item__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  color: #AB7755;                  /* Copper */
}
.contact-item__icon svg {
  width: 24px;
  height: 24px;
}

.contact-item__body {
  padding-top: 4px;
}

.contact-item__label {
  margin: 0 0 4px;
  color: #AB7755;                  /* Copper */
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.contact-item__value {
  margin: 0;
  color: #FFFFFF;
  line-height: 1.5;
  font-size: 1rem;
}

.contact-item__value-link {
  color: #FFFFFF;
  text-decoration: none;
}
.contact-item__value-link:hover,
.contact-item__value-link:focus-visible {
  text-decoration: underline;
}

/* ---- "Chat on WhatsApp" button ---- */
.contact-map__whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: #25D366;             /* WhatsApp green */
  color: #FFFFFF;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.contact-map__whatsapp-btn:hover,
.contact-map__whatsapp-btn:focus-visible {
  background: #1EBE59;
}
.contact-map__whatsapp-btn svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.contact-map__embed {
  border-radius: 12px;
  overflow: hidden;
}
.contact-map__embed iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

@media (max-width: 768px) {
  .contact-map__inner {
    grid-template-columns: 1fr;
  }
}

/* ---- Slim footer bar ---- */
.home-footer {
  position: relative;
  z-index: 1;
  background: #03361D;             /* darker than .contact-map, for separation */
  padding: 20px 24px;
  text-align: center;
}
.home-footer p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.82rem;
}


/* ============================================================
   Interior page hero banner (Buy, About, Services, …)
   ============================================================ */

.page-hero {
  min-height: 300px;
  display: flex;
  align-items: center;
  padding: 116px 0 36px;            /* clears the overlaying navbar */
  background: #054B29;              /* Emerald */
  color: #FFFFFF;
}

.page-hero__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-hero__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.5px;
}

/* ---- Responsive page banners (About, Buy, Sell, Services,
   Trade-In, Contact, Gallery) — below 1100px they go full-bleed,
   edge to edge with square corners, same as the home page hero on
   small screens. Above 1100px each page's own rules below keep the
   side margins + rounded corners. Each page's own ≤560px rule
   further shortens the height for phones. ---- */
@media (max-width: 1100px) {
  .about-banner,
  .buy-banner,
  .sell-banner,
  .svc-banner,
  .tradein-banner,
  .contact-banner,
  .gallery-banner {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  .about-banner__img,
  .buy-banner__img,
  .sell-banner__img,
  .svc-banner__img,
  .tradein-banner__img,
  .contact-banner__img,
  .gallery-banner__img {
    border-radius: 0 !important;
    width: 100% !important;
  }

  .about-banner   { height: 300px; }
  .buy-banner     { height: 320px; }
  .sell-banner    { height: 320px; }
  .svc-banner     { height: 320px; }
  .tradein-banner { height: 320px; }
  .contact-banner { height: 300px; }
  .gallery-banner { height: 300px; }
}


/* ============================================================
   Buy a Car page
   ============================================================ */

.buy-banner {
  position: relative;
  margin: 0 16px;              /* 16px on the left and right, full width otherwise */
  height: 460px;
  border-radius: 12px;
  overflow: hidden;            /* clips the image + overlay to the rounded corners */
}

.buy-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* On very wide screens the banner is far wider than the source photo, so
     cover has to crop it to fill the box. The car sits in the upper half
     of this particular photo, so anchor a bit above centre — full "top"
     cropped its wheels off instead. */
  object-position: center 30%;
}

/* Subtle dark overlay on the left side, fading out toward the right,
   so the white title stays legible over the photo. */
.buy-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.30) 35%,
    rgba(0, 0, 0, 0) 65%
  );
}

.buy-banner__title {
  position: absolute;
  left: 28px;
  bottom: 24px;
  margin: 0;
  max-width: 80%;
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (max-width: 560px) {
  .buy-banner { height: 260px; }
  .buy-banner__title { left: 18px; bottom: 16px; }
}

.buy {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

.buy__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}

/* ---- Filter toggle (mobile only) ---- */
.buy__filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 18px;
  background: #054B29;
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Sidebar ---- */
.buy__sidebar {
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: 10px;
  padding: 20px;
  overflow-y: scroll;
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: #AB7755 #f5f0e8;   /* Firefox: copper thumb, beige track */
}
/* Chrome/Safari — Firefox is handled by scrollbar-width/-color above */
.buy__sidebar::-webkit-scrollbar { width: 6px; }
.buy__sidebar::-webkit-scrollbar-track { background: #f5f0e8; }
.buy__sidebar::-webkit-scrollbar-thumb { background: #AB7755; border-radius: 3px; }

.buy__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.buy__sidebar-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.buy__sidebar-close {
  display: none;                    /* mobile only */
  background: none;
  border: 0;
  font-size: 1.7rem;
  line-height: 1;
  color: #555555;
  cursor: pointer;
}

.buy__overlay {
  display: none;
}

/* ---- Filters form ---- */
.filters__group {
  margin-bottom: 20px;
  padding: 0;
  border: 0;
}

.filters__group > label,
.filters__group legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #054B29;
}

/* ---- Condition tabs (All / New / Used) — radio inputs styled as pills ---- */
.filters__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filters__tab {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid #D9D9D9;
  border-radius: 999px;
  background: #FFFFFF;
  color: #444444;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filters__tab input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.filters__tab:hover {
  border-color: #054B29;
}
.filters__tab.is-active {
  background: #054B29;
  border-color: #054B29;
  color: #FFFFFF;
}

.filters select,
.filters input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  color: #1A1A1A;
  background: #F9F9F9;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
}

.filters select:disabled {
  color: #8A8A8A;
  background: #EFEFEF;
  cursor: not-allowed;
}

/* ---- Price range: two independent native <select> dropdowns, side by
   side — same look as the other .filters selects (that rule already
   covers width/padding/font/background/border/disabled state, so
   there's nothing bespoke to style here beyond the layout/divider). ---- */
.filters__price {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filters__price select {
  flex: 1 1 0;
  min-width: 0;
}
/* Side by side gets genuinely cramped inside the already-narrow filter
   sidebar at iPhone SE/mini widths — stack Min/Max instead. */
@media (max-width: 380px) {
  .filters__price {
    flex-direction: column;
    align-items: stretch;
  }
  .filters__price-sep {
    display: none;
  }
}
.filters__price-sep {
  flex: 0 0 auto;
  color: #888888;
}

.filters__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.btn-primary {
  display: inline-block;          /* so it also works as an <a>, e.g. the service card links */
  padding: 12px 18px;
  background: #054B29;
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #03361D;
}

.filters__clear {
  align-self: flex-start;
  padding: 4px;
  background: none;
  border: 0;
  color: #AB7755;
  font-family: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- Results ---- */
.buy__results-head {
  min-height: 1.2em;
  margin-bottom: 16px;
}

.buy__count {
  margin: 0;
  color: #555555;
  font-size: 0.9rem;
}

.buy__grid {
  display: grid;
  /* 185px, not 240px: with the sidebar now visible at 768px (280px +
     32px gap), the remaining ~408px only fits 2 columns at this
     minimum — fits 3 comfortably at 1024px, and grows further on
     wider desktop screens, all without a dedicated breakpoint. */
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 22px;
}

.buy__empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  text-align: center;
  color: #777777;
}

/* ---- Car card ---- */
.car-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.car-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.car-card__media {
  position: relative;
}

.car-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #EEEEEE;
}

/* Copper "Sold" badge overlaid on the photo */
.car-card__sold {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  background: #D32F2F;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 999px;
}

.car-card--sold .car-card__img {
  opacity: 0.85;
}

.car-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 18px;
}

.car-card__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.car-card__year {
  margin: 0;
  color: #777777;
  font-size: 0.85rem;
}

.car-card__price {
  margin: 2px 0 12px;
  color: #054B29;
  font-weight: 700;
}

.car-card__btn {
  align-self: flex-start;
  padding: 9px 18px;
  background: #054B29;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.car-card__btn:hover,
.car-card__btn:focus-visible {
  background: #03361D;
}

/* ---- Phone only: sidebar becomes a slide-in panel. 767px, not the
   900px this used to be — tablet portrait (768px) keeps the sidebar
   visible by default alongside the results, per spec. ---- */
@media (max-width: 767px) {
  .buy__filter-toggle { display: inline-flex; }

  .buy__layout { grid-template-columns: 1fr; }

  .buy__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    z-index: 200;
    border-radius: 0;
    overflow-y: scroll;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .buy__sidebar.is-open { transform: translateX(0); }

  .buy__sidebar-close { display: block; }

  .buy__overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.45);
  }
  .buy__overlay[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .buy__sidebar,
  .car-card { transition: none; }
}


/* ============================================================
   Car detail page
   ============================================================ */

.cd {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 72px;   /* extra top clearance below the solid navbar */
}

.cd__status {
  padding: 56px 0;
  text-align: center;
  color: #777777;
}

.cd__back {
  display: inline-block;
  margin-bottom: 20px;
  color: #054B29;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.cd__back:hover { text-decoration: underline; }

.cd__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ---- Gallery ---- */
.cd__main {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #EEEEEE;
  border-radius: 12px;
}

.cd__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.cd__thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  line-height: 0;
  cursor: pointer;
}
.cd__thumb.is-active { border-color: #054B29; }
.cd__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---- Info ---- */
.cd__title {
  margin: 0 0 20px;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 700;
}

.cd__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 0 24px;
  background: #E6E6E6;
  border: 1px solid #E6E6E6;
  border-radius: 10px;
  overflow: hidden;
}
.cd__details > div {
  background: #FFFFFF;
  padding: 12px 14px;
}
.cd__details dt {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #054B29;
}
.cd__details dd {
  margin: 0;
  font-size: 0.95rem;
}

.cd__desc { margin-bottom: 24px; }
.cd__desc h2 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
}
.cd__desc p {
  margin: 0;
  color: #333333;
  line-height: 1.6;
  white-space: pre-line;
}

.cd__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: #054B29;
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.cd__wa:hover,
.cd__wa:focus-visible { background: #03361D; }
.cd__wa svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  .cd__grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 420px) {
  .cd__details { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cd__wa { transition: none; }
}


/* ============================================================
   Sell My Car page
   ============================================================ */

.sell-banner {
  position: relative;
  margin: 0 16px;              /* 16px on the left and right, full width otherwise */
  height: 450px;
  border-radius: 12px;
  overflow: hidden;            /* clips the image + overlay to the rounded corners */
}

.sell-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Subtle dark overlay on the left side, fading out toward the right,
   so the white title stays legible over the photo. */
.sell-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.30) 35%,
    rgba(0, 0, 0, 0) 65%
  );
}

.sell-banner__title {
  position: absolute;
  left: 28px;
  bottom: 24px;
  margin: 0;
  max-width: 80%;
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (max-width: 560px) {
  .sell-banner { height: 260px; }
  .sell-banner__title { left: 18px; bottom: 16px; }
}

.sell {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 72px;
  text-align: center;
}

.sell__intro {
  margin: 0 auto 28px;
  max-width: 560px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #333333;
}

.sell__success {
  margin: 28px auto 0;
  max-width: 520px;
  padding: 16px 20px;
  background: #E7F1EB;
  border: 1px solid #054B29;
  border-radius: 8px;
  color: #054B29;
  font-weight: 600;
}


/* ============================================================
   Form grid  (Sell / Trade-In / service inquiry forms)
   ============================================================ */

/* ---- Form grid ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.field label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #054B29;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #1A1A1A;
  background: #F9F9F9;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
}

.field textarea {
  resize: vertical;
  min-height: 90px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid rgba(5, 75, 41, 0.35);
  outline-offset: 1px;
  border-color: #054B29;
}

.field select:disabled {
  color: #8A8A8A;
  background: #EFEFEF;
  cursor: not-allowed;
}

/* Red highlight for an empty/invalid required field on submit —
   cleared the moment the field is no longer empty (see services.js). */
.field input.field-invalid,
.field select.field-invalid,
.field textarea.field-invalid {
  border-color: #B3261E;
}
.field input.field-invalid:focus,
.field select.field-invalid:focus,
.field textarea.field-invalid:focus {
  outline-color: rgba(179, 38, 30, 0.35);
}

.form-grid__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin-top: 4px;
}

.field--full {
  grid-column: 1 / -1;
}

/* ---- Photo upload zone (Sell My Car) ----
   A styled <label for="..."> wrapping the real (visually hidden)
   file input — clicking anywhere in the dashed box opens the file
   picker, same as clicking the input directly would. */
.photo-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  background: #F9F5EF;
  border: 2px dashed #054B29;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.photo-upload:hover {
  background: #F3EFE8;
  border-color: #03361D;
}

.photo-upload__icon {
  width: 28px;
  height: 28px;
  color: #054B29;
}

.photo-upload__text {
  font-size: 0.88rem;
  font-weight: 600;
  color: #054B29;
  text-transform: none;
  letter-spacing: normal;
}

/* The real input sits on top of the dashed box but stays invisible —
   its own native click/keyboard-focus behaviour is what the <label>
   triggers, so it still needs to exist and be reachable, just not
   seen (opacity, not display:none, so it's still focusable/tabbable). */
.photo-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.photo-upload__error {
  margin: 8px 0 0;
  color: #B3261E;
  font-size: 0.85rem;
  font-weight: 600;
}
.photo-upload__error[hidden] { display: none; }

.photo-upload__previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.photo-upload__previews:empty { margin-top: 0; }

.photo-upload__thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
}

.form-error {
  margin: 0;
  color: #B3261E;
  font-size: 0.9rem;
  font-weight: 600;
}
.form-error[hidden] { display: none; }

.form-success {
  align-self: stretch;
  margin: 0;
  padding: 12px 16px;
  background: #E7F1EB;
  border: 1px solid #054B29;
  border-radius: 8px;
  color: #054B29;
  font-weight: 600;
  font-size: 0.95rem;
}
.form-success[hidden] { display: none; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Services page
   ============================================================ */

.svc-banner {
  position: relative;
  margin: 0 16px;               /* 16px on the left and right, full width otherwise */
  height: 450px;
  border-radius: 12px;
  overflow: hidden;             /* clips the image + overlay to the rounded corners */
}

.svc-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Subtle dark gradient overlay on the left side, fading out toward the
   right, so the white title stays legible over the photo. */
.svc-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.30) 35%,
    rgba(0, 0, 0, 0) 65%
  );
}

.svc-banner__title {
  position: absolute;
  left: 28px;
  bottom: 24px;
  margin: 0;
  max-width: 80%;
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (max-width: 560px) {
  .svc-banner { height: 260px; }
  .svc-banner__title { left: 18px; bottom: 16px; }
}

.svc-cards {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.svc-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 columns x 2 rows for the 6 cards */
  gap: 24px;
  align-items: stretch;                    /* equal card height per row */
}

@media (max-width: 1100px) and (min-width: 769px) {
  .svc-cards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .svc-cards__grid { grid-template-columns: 1fr; }
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.svc-card__icon {
  margin-bottom: 14px;
  font-size: 2.4rem;
  line-height: 1;
}

.svc-card__title {
  margin: 0 0 8px;
  color: #054B29;
  font-weight: 700;
  font-size: 1.2rem;
}

.svc-card__desc {
  flex: 1 1 auto;                 /* pushes the button to the bottom, even rows */
  margin: 0 0 20px;
  color: #444444;
  line-height: 1.55;
  font-size: 0.92rem;
}

.svc-card__btn {
  width: 100%;
}

/* Gap between Send Inquiry button and Download button */
.svc-card .download-sample-btn {
  margin-top: 12px;
}

/* ---- "Coming Soon" content — unused now that Islamic Financing &
   Takaful has been folded into Car Financing (Ijarah) / Car Insurance
   (Takaful) and its own page removed; kept in case a future service
   needs the same "register interest" treatment. ---- */
.svc-soon {
  padding: 12px 4px 4px;
  text-align: center;
}
.svc-soon__icon {
  margin: 0 0 10px;
  font-size: 2.4rem;
  line-height: 1;
}
.svc-soon__title {
  margin: 0 0 10px;
  color: #054B29;
  font-weight: 700;
  font-size: 1.15rem;
}
.svc-soon__text {
  margin: 0;
  color: #444444;
  line-height: 1.6;
}

/* ---- Individual service detail pages (Rent a Car, Car Inspection,
   Car Insurance (Takaful), Car Financing (Ijarah), Auction Report) —
   banner uses the shared .svc-banner styles above; this covers the
   description + form section below it. ---- */
.svc-page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.svc-page__intro p {
  margin: 0 0 18px;
  color: #333333;
  line-height: 1.7;
}

.svc-page__note {
  color: #054B29;
  font-weight: 700;
}

.svc-page__form-section {
  margin-top: 8px;
  padding-top: 32px;
  border-top: 1px solid #E6E6E6;
}

.svc-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  color: #054B29;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.svc-page__back:hover,
.svc-page__back:focus-visible {
  color: #AB7755;
  text-decoration: underline;
}

.svc-page__form-title {
  margin: 0 0 20px;
  color: #054B29;
  font-weight: 700;
  font-size: 1.3rem;
}


/* ============================================================
   Trade-In page
   ============================================================ */

.tradein-banner {
  position: relative;
  margin: 0 16px;               /* 16px on the left and right, full width otherwise */
  height: 450px;
  border-radius: 12px;
  overflow: hidden;             /* clips the image + overlay to the rounded corners */
}

.tradein-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Subtle dark gradient overlay on the left side, fading out toward the
   right, so the white title stays legible over the photo. */
.tradein-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.30) 35%,
    rgba(0, 0, 0, 0) 65%
  );
}

.tradein-banner__title {
  position: absolute;
  left: 28px;
  bottom: 24px;
  margin: 0;
  max-width: 80%;
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (max-width: 560px) {
  .tradein-banner { height: 260px; }
  .tradein-banner__title { left: 18px; bottom: 16px; }
}

.tradein {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.tradein__intro {
  max-width: 620px;
  margin: 0 0 28px;
  color: #333333;
  line-height: 1.6;
  font-size: 1.05rem;
}

.form-section {
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid #E6E6E6;
  border-radius: 10px;
}

.form-section legend {
  padding: 0 8px;
  color: #054B29;
  font-weight: 700;
  font-size: 0.95rem;
}


/* ============================================================
   About page
   ============================================================ */

.about-banner {
  position: relative;
  margin: 0 16px;              /* 16px on the left and right, full width otherwise */
  height: 380px;
  border-radius: 12px;
  overflow: hidden;            /* clips the image + overlay to the rounded corners */
}

.about-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle dark overlay on the left side, fading out toward the right,
   so the white title stays legible over the photo. */
.about-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.30) 35%,
    rgba(0, 0, 0, 0) 65%
  );
}

.about-banner__title {
  position: absolute;
  left: 28px;
  bottom: 24px;
  margin: 0;
  max-width: 80%;
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (max-width: 560px) {
  .about-banner { height: 260px; }
  .about-banner__title { left: 18px; bottom: 16px; }
}

.about {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}
.about p {
  margin: 0 0 18px;
  color: #333333;
  line-height: 1.7;
}
.about h2 {
  margin: 32px 0 12px;
  color: #054B29;
  font-weight: 700;
  font-size: 1.3rem;
}
.about a {
  color: #AB7755;
  font-weight: 600;
  text-decoration: none;
}
.about a:hover { text-decoration: underline; }


/* ============================================================
   Contact page
   ============================================================ */

.contact-banner {
  position: relative;
  margin: 0 16px;              /* 16px on the left and right, full width otherwise */
  height: 380px;
  border-radius: 12px;
  overflow: hidden;            /* clips the image + overlay to the rounded corners */
}

.contact-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle dark overlay on the left side, fading out toward the right,
   so the white title stays legible over the photo. */
.contact-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.30) 35%,
    rgba(0, 0, 0, 0) 65%
  );
}

.contact-banner__title {
  position: absolute;
  left: 28px;
  bottom: 24px;
  margin: 0;
  max-width: 80%;
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (max-width: 560px) {
  .contact-banner { height: 260px; }
  .contact-banner__title { left: 18px; bottom: 16px; }
}

.contact {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}

.contact__list {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.contact__list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #E6E6E6;
}
.contact__list li:first-child { padding-top: 0; }

.contact__icon {
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1.5;
}

.contact__label {
  display: block;
  margin-bottom: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #054B29;
}

.contact__list p {
  margin: 0;
  line-height: 1.55;
}

.contact__list a {
  color: #AB7755;
  font-weight: 600;
  text-decoration: none;
}
.contact__list a:hover { text-decoration: underline; }

.contact__subhead {
  margin: 0 0 12px;
  color: #054B29;
  font-size: 1.1rem;
  font-weight: 700;
}

.contact__hours {
  width: 100%;
  border-collapse: collapse;
}
.contact__hours th,
.contact__hours td {
  padding: 10px 12px;
  border: 1px solid #E6E6E6;
  text-align: left;
  font-size: 0.95rem;
}
.contact__hours th {
  background: #F4F5F4;
  font-weight: 600;
}

.contact__map {
  min-height: 450px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E6E6E6;
}
.contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 450px;
}

@media (max-width: 820px) {
  .contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .contact__map { min-height: 340px; }
  .contact__map iframe { min-height: 340px; }
}


/* ============================================================
   Gallery page
   ============================================================ */

.gallery-banner {
  position: relative;
  margin: 0 16px;              /* 16px on the left and right, full width otherwise */
  height: 380px;
  border-radius: 12px;
  overflow: hidden;            /* clips the image + overlay to the rounded corners */
}

.gallery-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle dark overlay on the left side, fading out toward the right,
   so the white title stays legible over the photo. */
.gallery-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.30) 35%,
    rgba(0, 0, 0, 0) 65%
  );
}

.gallery-banner__title {
  position: absolute;
  left: 28px;
  bottom: 24px;
  margin: 0;
  max-width: 80%;
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (max-width: 560px) {
  .gallery-banner { height: 260px; }
  .gallery-banner__title { left: 18px; bottom: 16px; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gallery {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

.gallery__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.gallery__tab {
  padding: 8px 18px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #054B29;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gallery__tab.is-active {
  background: #054B29;
  border-color: #054B29;
  color: #FFFFFF;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.gallery__item {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #EEEEEE;
  cursor: pointer;
}
.gallery__item img,
.gallery__item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.gallery__item:hover img,
.gallery__item:hover video { transform: scale(1.05); }

.gallery__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.gallery__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #FFFFFF;
}

.gallery__empty {
  padding: 60px 0;
  text-align: center;
  color: #777777;
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
}
.lightbox[hidden] { display: none; }

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}

.lightbox__stage {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
}
.lightbox__img,
.lightbox__video {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 6px;
  background: #000000;
}

.lightbox__caption {
  color: #DDDDDD;
  font-size: 0.9rem;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }

@media (max-width: 560px) {
  .lightbox { padding: 8vh 2vw; }
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__tab,
  .gallery__item img,
  .gallery__item video { transition: none; }
}


/* ============================================================
   Employee login page
   ============================================================ */

.login-page {
  min-height: 100vh;
  background: #054B29;
}

.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.login__card {
  width: 100%;
  max-width: 400px;
  padding: 36px 32px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.login__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #054B29;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-decoration: none;
}
.login__logo {
  height: 44px;
  width: auto;
}

.login__title {
  margin: 0 0 22px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1A1A1A;
}

.login .field {
  margin-bottom: 16px;
}

.password-field {
  position: relative;
}
.password-field input {
  padding-right: 42px;   /* room for the toggle button */
}
/* Edge/IE add their own built-in reveal-password eye icon in the same
   corner — without this it renders right next to the custom one,
   which is what "two eyes" actually was. */
.password-field input::-ms-reveal,
.password-field input::-ms-clear {
  display: none;
}
.password-field__toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  color: #8A8A8A;
  cursor: pointer;
}
.password-field__toggle svg {
  width: 20px;
  height: 20px;
}
/* Explicit show/hide per icon, plain class selectors only — not the
   HTML `hidden` attribute, which doesn't reliably beat an element's
   own sizing rules inside a flex container in every engine. Default
   (password hidden): closed eye visible, open eye hidden. */
.password-field__icon-open { display: none; }
.password-field__toggle.is-open .password-field__icon-closed { display: none; }
.password-field__toggle.is-open .password-field__icon-open { display: block; }
.password-field__toggle:hover,
.password-field__toggle:focus-visible {
  color: #054B29;
}

.login__error {
  margin: 0 0 14px;
  color: #B3261E;
  font-size: 0.9rem;
  font-weight: 600;
}
.login__error[hidden] { display: none; }

.login__btn {
  width: 100%;
  margin-top: 6px;
}


/* ============================================================
   WhatsApp floating button
   Reusable markup: public/components/whatsapp-button.html
   ============================================================ */

/* Hidden while a mobile drawer/menu/modal with a lower z-index is open
   (mobile nav menu, Buy filter drawer, Sell modal) so the bubble can't
   float on top of their controls at narrow widths. The gallery lightbox
   (z-index 10000) is already above the button, so it needs no toggle. */
body.wa-hide .wa-float { display: none; }

.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;                 /* above all page content */

  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;           /* WhatsApp green */
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  text-decoration: none;

  animation: wa-bounce 2.8s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-float:hover,
.wa-float:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation-play-state: paused;
}

.wa-float:focus-visible {
  outline: 3px solid rgba(37, 211, 102, 0.5);
  outline-offset: 3px;
}

.wa-float__icon {
  width: 34px;
  height: 34px;
  display: block;
  fill: currentColor;
}

/* Pulsing ring behind the button */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: wa-pulse 2.8s ease-out infinite;
}

@keyframes wa-bounce {
  0%, 88%, 100% { transform: translateY(0); }
  92%           { transform: translateY(-6px); }
  96%           { transform: translateY(-3px); }
}

@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 600px) {
  .wa-float {
    bottom: 18px;
    right: 18px;
    width: 54px;
    height: 54px;
  }
  .wa-float__icon { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float,
  .wa-float::before {
    animation: none;
  }
}

/* ---- Stack Card Download Button ---- */
.stack-card__download-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 24px;
  border: 2px solid #AB7755;
  background: transparent;
  color: #AB7755;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stack-card__download-btn:hover,
.stack-card__download-btn:focus-visible {
  background: rgba(171, 119, 85, 0.08);
  transform: translateY(-2px);
}

.stack-card__download-btn:active {
  transform: translateY(0);
}

/* ---- Stack Card Thumbnail ---- */
.stack-card__thumbnail {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin: 16px 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.stack-card__thumbnail:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.stack-card__thumbnail:focus-visible {
  outline: 2px solid #AB7755;
  outline-offset: 2px;
}

/* ---- Lightbox Overlay ---- */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.active {
  display: flex;
  opacity: 1;
}

.lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10000;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.lightbox__close:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}






/* ---- Hero Content Spacing Fix ---- */
.hero__content {
}

/* ---- Tagline Centering ---- */
.hero__subtitle-desc {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 32px;
}


/* ============================================================
   WhatsApp Inquiry Button
   ============================================================ */
.wa-inquiry-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #ffffff;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 16px;
}
.wa-inquiry-btn:hover { background: #1ebe5d; }

/* Download Sample Button */
.download-sample-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 2px solid #054B29;
  color: #054B29;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 24px;
}
.download-sample-btn:hover {
  background: #054B29;
  color: #f5f0e8;
}

.download-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 4px;
  padding: 14px 24px;
  border: 2px solid #054B29;
  border-radius: 12px;
  color: #054B29;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  width: auto;
  justify-content: flex-start;
}
.download-link:hover {
  background: #054B29;
  color: #ffffff;
}

/* Fallback scenario banner with WhatsApp button */
.fallback-banner {
  background: linear-gradient(135deg, #054B29 0%, #033519 100%);
  border-radius: 16px;
  padding: 28px 32px;
  color: white;
  width: 100%;
  box-sizing: border-box;
}
.fallback-text {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: white;
  line-height: 1.5;
}
.wa-fallback-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: white;
  padding: 12px 24px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.wa-fallback-btn:hover {
  background: #1da851;
}

/* Fallback chips container — horizontal row with wrapping */
.buy__fallback-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

/* Fallback chip button — compact copper pills */
.buy__fallback-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #AB7755;
  color: white;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  height: auto;
  width: auto;
  border: none;
}
.buy__fallback-chip:hover {
  background: #8e6344;
}

/* Show All Cars button */
.show-all-btn {
  display: inline-block;
  width: auto;
  padding: 10px 24px;
  border: 2px solid #054B29;
  border-radius: 8px;
  color: #054B29;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
}
.show-all-btn:hover {
  background: #054B29;
  color: white;
}