/* ============ Raymond Hanania – Landing Page ============ */
:root {
  --navy: #003766;
  --navy-2: #0b4a85;
  --ink: #12345e;
  --muted: #3b5576;
  --card: 215, 229, 242;       /* #D7E5F2 */
  --glass: rgba(var(--card), .92);
  --glass-border: rgba(255, 255, 255, .85);
  --shadow: 0 14px 40px rgba(16, 48, 92, .14), 0 2px 6px rgba(16, 48, 92, .06);
  --radius: 26px;
  --gutter: clamp(16px, 2.2vw, 40px);
  --pave: #3f4752;             /* bottom row of hero-desktop.webp */
  --pave-mobile: #3d444f;      /* bottom row of hero-mobile.webp */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Tajawal", system-ui, "Segoe UI", Tahoma, sans-serif;
  color: var(--ink);
  background: var(--pave);
  min-height: 100vh;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

/* ============ Stage (photo behind hero + cards) ============ */
/* One full-page photo drawn at 100% width. At 1920×2400 it is 125vw tall, taller
   than the page at every desktop/tablet width (the tallest, at 901px, is ~123vw). */
.stage {
  position: relative;
  background: var(--pave) url("assets/hero-desktop.webp") center top / 100% auto no-repeat;
}

/* ============ Hero ============ */
.hero {
  position: relative;
  height: 30vw;                /* ends just below the cars' tyres */
}

.hero__content {
  position: absolute;
  inset: 0 auto 0 0;
  width: 44%;
  padding: clamp(28px, 4.6vw, 80px) var(--gutter) 0 calc(var(--gutter) + 1vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3.6vw, 64px);
  z-index: 1;
}

.brand img {
  width: clamp(170px, 13vw, 250px);
  animation: fadeUp .9s .1s ease-out both;
}

.hero__title {
  color: var(--navy);
  font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 4rem);
  line-height: 1.22;
  text-align: center;
  text-shadow: 0 2px 18px rgba(255, 255, 255, .6);
  animation: fadeUp .9s .25s ease-out both;
}
.hero__title span { display: block; white-space: nowrap; }

/* ============ Layout ============ */
.wrap {
  position: relative;
  z-index: 2;
  max-width: 1840px;
  margin: 0 auto;
  padding: 0 var(--gutter) 28px;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
          backdrop-filter: blur(14px) saturate(1.15);
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1.35fr .95fr;
  gap: clamp(14px, 1.2vw, 22px);
}

.card {
  position: relative;
  padding: clamp(22px, 2vw, 34px) clamp(18px, 1.8vw, 32px);
  overflow: hidden;
}

.card__title {
  color: var(--navy);
  font-weight: 800;
  font-size: clamp(1.45rem, 1.75vw, 2.05rem);
  line-height: 1.3;
  text-align: center;
  margin-bottom: clamp(18px, 1.6vw, 26px);
}

/* Discover */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 28px);
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  padding: 20px 12px;
  text-align: center;
  font-size: clamp(1.1rem, 1.3vw, 1.45rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(16, 48, 92, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(16, 48, 92, .16); }
.tile__icon { width: 84px; height: 62px; color: var(--navy); }
img.tile__icon { width: auto; }   /* keep each image's own proportions at the shared height */

/* Why */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px clamp(8px, 1vw, 20px);
  font-size: clamp(.95rem, 1.05vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
/* keep the designed two-line breaks when there is room */
@media (min-width: 1440px) { .feature { white-space: nowrap; } }

/* hairline dividers between the 2×2 cells */
.feature:nth-child(odd) { border-left: 1px solid rgba(18, 52, 94, .14); }
.feature:nth-child(-n+2) { border-bottom: 1px solid rgba(18, 52, 94, .14); }

.feature__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 4px 12px rgba(16, 48, 92, .12);
}
.feature__icon svg { width: 24px; height: 24px; }
.feature__icon img { width: auto; height: auto; max-width: 28px; max-height: 24px; }

/* CTA */
.card--cta {
  display: flex;
  align-items: center;
}

.cta__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(var(--card), .1) 0%, rgba(var(--card), .7) 16%, rgba(var(--card), .88) 34%, rgba(var(--card), .9) 100%),
    url("assets/cta.webp") right center / cover no-repeat;
}

.cta__body {
  position: relative;
  width: 100%;
  text-align: center;
  padding-left: 0;
  padding-right: 10%;
}
.cta__body .card__title { margin-bottom: 18px; font-size: clamp(1.3rem, 1.6vw, 2rem); }
.cta__body p {
  font-size: clamp(1.1rem, 1.38vw, 1.6rem);
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 22px;
}

.btn {
  display: inline-block;
  padding: 10px 30px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(16, 48, 92, .14);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

/* ============ Contact bar ============ */
.contact {
  margin-top: clamp(14px, 1.2vw, 22px);
  padding: 16px clamp(16px, 1.6vw, 28px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;             /* safety net: never let an item spill out of the bar */
  justify-content: space-between;
  gap: 14px 8px;
  font-size: clamp(.95rem, .92vw, 1.15rem);
}

.contact__social { display: flex; gap: 10px; }

.social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 48, 92, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.social img { width: 21px; height: 21px; }
.social:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 48, 92, .2); }

.contact__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: clamp(10px, .9vw, 20px);
  color: var(--ink);
  white-space: nowrap;
  border-right: 1px solid rgba(18, 52, 94, .16);
}
.contact__item b { font-weight: 800; color: var(--navy); }
a.contact__item:hover b { text-decoration: underline; text-underline-offset: 4px; }

.contact__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 4px 12px rgba(16, 48, 92, .12);
}
.contact__icon svg { width: 20px; height: 20px; }
.contact__icon img { width: auto; height: auto; max-width: 22px; max-height: 22px; }

.footer {
  text-align: center;
  font-size: .9rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  padding: 6px 16px 26px;
}

/* ============ Motion ============ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.cards .reveal:nth-child(2) { transition-delay: .1s; }
.cards .reveal:nth-child(3) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 1700px) {
  .contact { flex-wrap: wrap; justify-content: center; row-gap: 14px; }
  .contact__item--address { order: 3; }
  .contact__item--hours { order: 4; }
}

@media (max-width: 1200px) {
  .cards { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
  .card--why { grid-column: 1 / -1; }
}

/* Tablet & mobile: stacked hero like the mobile design */
@media (max-width: 900px) {
  /* Mobile photo at full width, pushed down so the showroom (31vw from the photo's top)
     starts just under the headline. The sky above it is filled with the photo's top
     colour and hazed so the navy headline stays readable. */
  body { background: var(--pave-mobile); }

  .stage {
    --img-top: calc(171px - 15.5vw);   /* headline ends at ~151px + 15.5vw */
    background-color: var(--pave-mobile);
    background-image:
      linear-gradient(to bottom, rgba(226, 237, 249, .92) 0, rgba(226, 237, 249, .6) calc(var(--img-top) + 18vw), rgba(226, 237, 249, 0) calc(var(--img-top) + 30vw)),
      linear-gradient(#357ac4, #357ac4),
      url("assets/hero-mobile.webp");
    background-size: 100% 100%, 100% max(0px, var(--img-top)), 100% auto;
    background-position: 0 0, 0 0, center var(--img-top);
    background-repeat: no-repeat;
  }

  .hero {
    height: auto;
    min-height: calc(var(--img-top) + 77vw);   /* tyres end at 75.4vw in the photo */
  }
  .hero__content {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 36px 16px 8px;
    gap: 22px;
  }
  .brand img { width: 170px; }
  .hero__title { font-size: clamp(1.55rem, 6.9vw, 3.2rem); }
  .card__title { font-size: clamp(1.25rem, 5.4vw, 1.8rem); }

  .cards { grid-template-columns: 1fr; }
  .card--why { grid-column: auto; }

  .card--cta { min-height: 200px; }
  .cta__body { padding-right: 0; }
  .cta__bg {
    background:
      linear-gradient(to left, rgba(var(--card), 0) 0%, rgba(var(--card), .5) 30%, rgba(var(--card), .7) 100%),
      url("assets/cta-wide.webp") right center / cover no-repeat;
  }
  .br-lg { display: none; }

  /* Contact card: phone + WhatsApp side by side, then address, hours, socials */
  .contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    gap: 18px 12px;
    padding: 24px 18px;
  }
  .contact__item { border: 0; padding: 0; white-space: normal; }
  .contact__item--address, .contact__item--hours { grid-column: 1 / -1; }
  .contact__social { order: 5; grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 560px) {
  .tile { min-height: 140px; font-size: 1.02rem; }
  .tile__icon { width: 70px; height: 52px; }
  img.tile__icon { width: auto; }

  .features { grid-template-columns: 1fr; }
  .feature { padding: 14px 4px; border: 0 !important; white-space: normal; }
  .feature + .feature { border-top: 1px solid rgba(18, 52, 94, .14) !important; }

  .contact { grid-template-columns: 1fr; }
  .contact__item { font-size: 1rem; }

}