/* ===== GLOBAL RESETS ===== */

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

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* ===== ROOT VARIABLES ===== */

:root {
  --primary: #fcb700;
  --primary-dark: #d69700;
  --dark: #10131c;
  --darker: #080911;
  --gray-100: #f6f6f8;
  --gray-200: #ececf2;
  --gray-400: #9ea3b5;
  --white: #ffffff;
  --text: #222430;
  --radius: 1.2rem;

  --font-heading: "Exo 2", sans-serif;
  --font-body: "Lexend", sans-serif;

  --bento-gap: 0.8rem;
  --bento-radius: 16px;
  --bento-hover-scale: 1.04;
}

/* ===== BASE ===== */

html,
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;

  background-color: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

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

a {
  color: inherit;
  text-decoration: none;
}

.wrapper {
  width: min(1200px, 92%);
  /* max-width: 1600px; */
  width: 95%;
  /* width: 80%; */
  margin: 0 auto;
}

/* Anchor-nav clearance: the fixed pill header floats over the page at every
   breakpoint, so jumping to any of these sections via the nav links lands
   their heading flush under it (fully hidden) without this offset. */
#about,
#how-it-works,
#why,
#smart-safety,
#stories {
  scroll-margin-top: 120px;
}

@media (max-width: 1160px) {

  #about,
  #how-it-works,
  #why,
  #smart-safety,
  #stories {
    scroll-margin-top: 90px;
  }
}

/* ===== HEADER ===== */

.site-header {
  position: fixed;
  /* inset: 0 0 auto 0; */
  top: 10px;
  left: 12px;
  right: 12px;
  padding: 0.5rem 0;
  /* Glass effect */
  background: rgba(253, 238, 238, 0.25);
  /* background: rgba(10, 10, 10, 0.25); */
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  border-radius: 380px;
  z-index: 10;
  overflow: hidden !important;
}

/* Hide hamburger on desktop */
.menu-btn {
  display: none;
  font-size: 1.5rem;
  background: none;
  /* color: var(--white); */
  color: var(--primary);
  border: none;
  cursor: pointer;
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 0.6rem 0; */
  gap: clamp(0.5rem, 1vw, 2rem);
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  height: 4rem;
  text-transform: uppercase;
  overflow: hidden;
  flex-shrink: 0;
}

.brand img {
  /* Logo SVG has ~30% empty padding above/below the mark; scaled up and cropped by .brand's fixed height */
  width: clamp(11rem, 16vw, 25.5rem);
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  flex-shrink: 1;
  min-width: 0;
  gap: clamp(0rem, 0.3vw, 0.4rem);
  font-weight: 600;
  font-family: var(--font-heading);
  text-transform: uppercase;
  /* text-shadow: 0 0 6px rgba(0,0,0,0.6); */
  letter-spacing: 0.03em;
  font-size: clamp(0.7rem, 0.95vw, 1.125rem);
  overflow: visible;
}

.site-nav a {
  /* padding: 0.55rem 1.2rem; */
  padding: clamp(0.4rem, 0.7vw, 0.55rem) clamp(0.25rem, 0.45vw, 0.7rem);
  border-radius: 999px;
  transition: 0.25s ease;
  color: var(--darker);
  position: relative;
  white-space: nowrap;
  /* The global `* { overflow-x: hidden }` reset gives flex items an
     automatic minimum size of 0 instead of their content size, which
     let flex-shrink silently squeeze these links below their text
     width and clip letters off. Restoring visible overflow here makes
     each link keep its natural (nowrap) minimum width, so the row
     properly stays legible or wraps to the hamburger nav instead of
     quietly truncating. */
  overflow: hidden;
}

/* .site-nav a:hover {
  background: var(--dark);
  color: var(--yellow);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);

  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

  z-index: 10;
} */

.site-nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  color: var(--primary);
  /* color:inherit; */
}

/* .site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0%;
  background: var(--primary);
  transition: width 0.3s ease;
} */

.site-nav a:hover::after {
  width: 100%;
}

.site-nav a:focus {
  background: var(--gray-400);
  color: var(--dark);
  border-radius: 999px;
}

/* ACTIVE (clicked) state */
/* .site-nav a:active {
  background: var(--dark);
  color: var(--yellow);
  transform: scale(0.97);
} */
/* .site-nav a.active {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(34px) saturate(160%);
  -webkit-backdrop-filter: blur(34px) saturate(160%);

  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  color: var(--yellow);
} */

.site-nav a.active {
  background: #1C1B1B;
  /* backdrop-filter: blur(20px); */
  color: var(--primary);
  /* box-shadow: 0 4px 16px rgba(0,0,0,0.25); */
}

.nav-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-cta:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.nav-cta img {
  height: clamp(2.3rem, 3.2vw, 3.4rem);
  width: auto;
  display: block;
}

/* MOBILE NAV DRAWER */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 420px;
  height: 100vh;
  /* background: rgba(20,20,20,0.98); */
  /* background: rgba(14, 13, 13, 0.98); */
  background: #ffffff;
  /* background: rgba(253, 238, 238, 0.25);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(18px); */
  padding: 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transition: right 0.35s ease;
  z-index: 9999;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
}

.mobile-nav.open {
  right: 0;
  top: -11px;
  left: auto;
}

.close-btn {
  position: absolute;
  right: 3.2rem;
  top: 2.3rem;
  font-size: 1.8rem;
  background: rgb(0, 0, 0);
  border: none;
  border-radius: 30%;
  color: var(--primary);
  cursor: pointer;
}

.mobile-header {
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid #D9D9D9;
  overflow: hidden;
}

.mobile-logo {
  /* width: 150px; */
  width: 60px;
}

.mobile-links {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: -17px;
  margin-bottom: -25px;
  /* gap: 1rem;
  margin-top: 1rem; */
}

.mobile-links a {
  background: rgba(255, 255, 255, 0.1);
  color: var(--dark);
  padding: 0.8rem 1rem;
  border-radius: 999px;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: 0.25s ease;
  border: 1px solid transparent;
  overflow: hidden !important;
}

.mobile-links a:hover {
  background: #1C1B1B;
  color: var(--primary);
}

.mobile-links a.active {
  background: #1C1B1B;
  color: var(--primary);
}

/* FOOTER INSIDE MOBILE NAV */
/* .mobile-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;
  color: rgb(0, 0, 0);
  border-top: 1px solid #D9D9D9;
  overflow: visible !important;

} */

.mobile-footer {
  display: flex;
  margin-top: auto;
  padding-top: 1.4rem;
  border-top: 1px solid #E5E5E5;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
}

/* .mobile-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: auto;
  padding-top: 1.4rem;
  border-top: 1px solid #E5E5E5;
} */

.footer-left,
.footer-right {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mobile-footer p {
  font-size: 1.1rem;
  font-family: var(--font-heading);
  margin-bottom: 1rem;
}

.footer-right p {
  visibility: hidden;
  /* keeps space but hides label */
  height: 0;
  /* no extra spacing */
  margin: 0;
}

.footer-right {
  display: flex;
  flex-direction: column;
}

.footer-icons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2 columns */
  gap: 1rem 2rem;
  /* row gap | column gap */
}

/* .mobile-footer .icons img {
  width: 28px;
  margin-right: 8px;
  cursor: pointer;
  filter: brightness(0) saturate(100%);
} */

/* .mobile-footer .icons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  align-items: center;
} */

.mobile-footer .icons {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.icon-col {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-col img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.icon-col img:hover {
  transform: scale(1.12);
}

.icon-col span {
  font-size: 0.8rem;
  font-weight: 500;
  color: #000;
  text-transform: none;
}

/* .mobile-footer .icons img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
} */

/* .mobile-footer .icons img:hover {
  transform: scale(1.08);
}

.mobile-footer .icons img {
  filter: brightness(0) saturate(100%);
} */

.footer-left p,
.footer-right p {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  gap: 1rem;
  letter-spacing: 0.03em;
}

/* SHOW HAMBURGER + HIDE DESKTOP NAV ON MOBILE */
@media (max-width: 1160px) {
  .site-header {
    position: fixed;
    /* inset: 0 0 auto 0; */
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 0.4rem 12px;
    background: rgba(253, 238, 238, 0.25);
    /* background: rgba(10, 10, 10, 0.25); */
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border-radius: 36px;
    z-index: 10;
    overflow: hidden !important;
  }

  .brand {
    height: 2.2rem;
  }

  .brand img {
    width: 14rem;
  }

  .desktop-nav {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .menu-btn {
    display: block;
    color: var(--primary);
  }
}

/* Prevent logo + hamburger from overflowing the pill header on narrow phones */
@media (max-width: 400px) {
  .nav-wrapper {
    gap: 0.6rem;
  }

  .brand img {
    width: 9.5rem;
  }
}

/* .mobile-nav.open combines left:33% with width:80%, which is over-constrained
   and pushes the drawer's right edge past the viewport on narrow phones. */
@media (max-width: 430px) {
  .mobile-nav {
    width: 88%;
  }

  .mobile-nav.open {
    left: auto;
    right: 0;
  }
}

.cta-btn {
  font-family: var(--font-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* width: 16rem; */
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--dark);
  font-weight: 700;
  /* text-transform: uppercase; */
  letter-spacing: 0.05em;
  transition: background 0.3s ease, transform 0.2s ease;
}

.cta-btn:hover {
  background: var(--primary-dark);
  /* transform: translateY(-2px); */
}

.ghost-btn {
  font-family: var(--font-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.85rem 1.6rem;
  background: #101010;
  border-radius: 999px;
  border: 2px solid var(--primary);
  color: var(--white);
  font-weight: 700;
  /* text-transform: uppercase; */
  letter-spacing: 0.04em;
  transition: background 0.3s ease, color 0.3s ease;
}

.ghost-btn:hover {
  /* background: var(--white); */
  /* background: linear-gradient(150deg, #101010, rgb(50 49 49)); */
  background: linear-gradient(150deg, rgb(50 49 49), #101010);
  /* background: #101010; */
  color: var(--white);
}

.ghost-btn-img img {
  width: 3rem;
  height: 1.5rem;
  object-fit: contain;
  display: block;
  margin: 0rem;
}

.ghost-btn.dark {
  border-color: var(--dark);
  color: var(--dark);
}

.ghost-btn.dark:hover {
  background: var(--dark);
  color: var(--white);
}

.cta-btn.secondary {
  background: var(--dark);
  color: var(--white);
}

.cta-btn.secondary:hover {
  background: var(--primary);
  color: var(--dark);
}

/* ===== HERO ===== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--white);
  text-align: left;
  padding: 6rem 0 4rem;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45);
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* background: rgba(0,0,0,0.4); */
  background: linear-gradient(120deg, rgba(16, 19, 28, 0.85) 0%, rgba(16, 19, 28, 0.2) 60%, rgba(16, 19, 28, 0.7) 100%);
  z-index: 0;
}

.hero-content {
  width: 100%;
  max-width: 60rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  box-sizing: border-box;

  margin-right: auto;
  padding-left: clamp(1.5rem, 5vw, 5rem);
  padding-right: clamp(1.5rem, 5vw, 3rem);
  gap: 0.8rem;
  z-index: 0;
  position: relative;
  text-align: left;
}


.hero-sub {
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--white);
  font-size: 0.8rem;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.4;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.hero h1 span {
  color: var(--primary);
}

.hero-desc {
  font-size: 1.05rem;
  max-width: 50rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
}


/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 7rem 0 11rem;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 1.5rem;
    box-sizing: border-box;
    gap: 0.6rem;
  }

  /* The eyebrow line above the headline is a bare <h2> with no class,
     so it was inheriting the browser's large default heading size and
     margins instead of any hero styling - fine on desktop's larger
     canvas, but on mobile it ate a disproportionate amount of the
     limited vertical space. */
  .hero-content > h2 {
    margin: 0;
    font-size: clamp(0.9rem, 3.8vw, 1.05rem);
    font-weight: 700;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }

  .hero-desc {
    font-size: 0.95rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions a,
  .hero-actions button {
    width: 100%;
    text-align: center;
  }
}



@media (max-width: 480px) {
  .hero-content {
    padding: 0 1rem;
  }

  .hero-sub {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
  }

  .hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    line-height: 1.25;
  }

  .hero-desc {
    font-size: 0.9rem;
  }
}

/* Short viewports (small-height phones, and phones in landscape):
   the fixed navbar + floating contact widget both eat into the
   available height, so tighten the vertical rhythm proportionally
   instead of letting content collide with them. */
@media (max-width: 1200px) and (max-height: 1100px) {
  .hero {
    padding: 5.5rem 0 9rem;
  }

  .hero-content {
    gap: 0.45rem;
  }

  .hero-sub {
    font-size: 0.7rem;
  }

  .hero-content > h2 {
    font-size: clamp(0.8rem, 3vh, 0.95rem);
  }

  .hero h1 {
    font-size: clamp(1.5rem, 5.5vh, 2.1rem);
    line-height: 1.2;
  }

  .hero-desc {
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .hero-actions {
    gap: 0.5rem;
  }

  .hero-actions a,
  .hero-actions button {
    padding: 0.65rem 1.3rem;
  }
}

/* When there's more width than height to spare (landscape phones),
   stack the CTAs side by side instead of vertically so they don't
   burn extra height that short viewports don't have. */
@media (max-width: 1200px) and (min-width: 480px) and (max-height: 1100px) {
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero-actions a,
  .hero-actions button {
    width: auto;
    flex: 1 1 auto;
  }
}

@media (max-width: 1200px) and (max-height: 700px) {
  .hero {
    padding: 4rem 0 7rem;
  }

  .hero-content {
    gap: 0.25rem;
  }

  .hero-content > h2 {
    font-size: clamp(0.65rem, 2.4vh, 0.8rem);
  }

  .hero h1 {
    font-size: clamp(1.15rem, 4.6vh, 1.7rem);
    line-height: 1.12;
  }

  .hero-desc {
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .hero-actions a,
  .hero-actions button {
    width: auto;
    flex: 1 1 auto;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
  }

  .hero-actions .ghost-btn-img img {
    width: 2rem;
    height: 1rem;
  }
}

/* ===== SECTIONS ===== */
.section {
  padding: 5rem 0;
}

.section h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 2.7rem);
  margin-bottom: 0.5rem;
  color: var(--dark);
  margin-top: -0.8rem;
}

.section h2 span {
  color: var(--primary);
}

.section-intro {
  max-width: 620px;
  margin-bottom: 3rem;
  font-size: 1.05rem;
  color: var(--gray-400);
}


@media (max-width: 420px) {
  .hero-content {
    padding: 0 1rem;
  }

  .hero-sub {
    letter-spacing: 0.16em;
  }
}
/* ===== ABOUT ===== */

.about {
  background: var(--gray-100);
}

.about-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  overflow: hidden;
}

.about-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

.about-text .section-tag {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.about-text h2 {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.about-text > p {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.about-text .highlight {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.35;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mission {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--primary);
  background: var(--white);
  border-radius: 30px;
  font-size: 1.05rem;
}

.mission h4 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.mission p {
  font-size: 1rem;
  line-height: 1.5;
}

/* ===== ABOUT IMAGE ===== */

.about-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 1402 / 1122;
  align-self: start;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: none;
}

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

.about-card:hover img {
  transform: scale(1.05);
}

/* ===== IMAGE PILL ===== */

.about-card .pill {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 1.15rem 1.9rem;
  background: rgba(0, 0, 0, 0.4);
  color: var(--white);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.05em;
}


/* =====================================================
   MEDIUM DESKTOP
   Keeps About section clean around 100%–110% zoom
   ===================================================== */

@media (max-width: 1600px) and (min-width: 769px) {

  .about-content {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 4rem);
  }

  .about-card {
    max-width: 680px;
    justify-self: end;
  }

  .about-text h2 {
    font-size: clamp(2rem, 3vw, 2.8rem);
  }

  .about-text > p,
  .about-text .highlight {
    font-size: 1rem;
  }

  .mission {
    margin-top: 1.25rem;
  }
}


@media (max-width: 768px) {

  /* ===== ABOUT MOBILE ===== */

  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-text {
    min-height: auto;
    width: 100%;
  }

  .about-text .section-tag {
    font-size: 1.2rem;
  }

  .about-text h2 {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.15;
  }

  .about-text > p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .about-text .highlight {
    font-size: 1rem;
    line-height: 1.45;
  }

  /* Mission card */
  .mission {
    width: 100%;
    box-sizing: border-box;
    margin-top: 1.5rem;
    padding: 1.25rem 1.2rem;
    border-radius: 28px;
  }

  .mission h4 {
    font-size: 1.15rem;
  }

  .mission p {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* About image */
  .about-card {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1402 / 1122;
    margin: 0;
    border-radius: 18px;
  }

  .about-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-card .pill {
    left: 0.75rem;
    bottom: 0.75rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.7rem 1rem;
    font-size: 0.8rem;
    line-height: 1.25;
    white-space: normal;
  }
}


/* ===== HOW IT WORKS ===== */

.how-it-works {
  background-color: #fffefb;
  background-image: url("resources/background how is work setion.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

.how-it-works .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 5rem);
}

.how-it-works .section-subtitle {
  color: #222;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.how-it-works h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 2.8rem;
  margin-top: -0.8rem;
  font-weight: 600;
  color: #111;
}

.how-it-works h2 span {
  color: #fbbf24;
}


/* ===== HEADER ===== */

.hiw-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  margin-bottom: 2.2rem;
}

.hiw-header h2 {
  text-align: left;
  margin-bottom: 0;
}


/* ===== ARROWS ===== */

.hiw-arrows {
  display: flex;
  gap: 0.7rem;
  flex-shrink: 0;
}

.hiw-arrow-btn {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 50%;
  border: none;
  background: #1c1b1b;
  color: var(--primary);
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.hiw-arrow-btn:hover {
  background: var(--dark);
  transform: translateY(-1px);
}


/* ===== SLIDER ===== */

.hiw-slider-wrapper {
  position: relative;
  width: 100%;
}

.hiw-slider {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}

.hiw-slider::-webkit-scrollbar {
  display: none;
}

.hiw-slider {
  scrollbar-width: none;
}
/* ===== CARD ===== */

.hiw-card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: 18px;
  overflow: hidden;
  background: #1c1b1b;
  box-shadow: none;
}

.hiw-card-media {
  flex-shrink: 0;
  height: 230px;
  background: var(--gray-100);
}

.hiw-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hiw-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem;
}

.hiw-card-content h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.7rem;
  letter-spacing: 0.02em;
}

.hiw-card-content p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}


/* ===== TABLET ===== */

@media (max-width: 1024px) {

  .hiw-card {
    flex: 0 0 300px;
  }

  .hiw-card-media {
    height: 200px;
  }
}


/* =====================================================
   MOBILE ONLY (<=768px)
   The carousel becomes a vertical stack and the nav
   arrows are hidden entirely (nothing left to scroll to).
   ===================================================== */

@media (max-width: 768px) {

  .hiw-header h2 {
    font-size: 1.4rem;
    margin-bottom: 0;
  }

  .hiw-arrows {
    display: none;
  }

  /* Cards: stacked, no horizontal scroll */
  .hiw-slider-wrapper {
    width: 100%;
    overflow: hidden;
    margin-top: 1.5rem;
  }

  .hiw-slider {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    overflow: hidden;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .hiw-card {
    flex: none;
    width: 100%;
  }

  .hiw-card-media {
    height: 190px;
  }

  .hiw-card-content {
    padding: 1.3rem 1.2rem;
  }

  .hiw-card-content p {
    font-size: 0.85rem;
    line-height: 1.5;
  }
}


/* ===== SMALL MOBILE ===== */

@media (max-width: 420px) {

  .hiw-header h2 {
    font-size: 1.25rem;
  }
}




/* ===== WHY (BENTO REFRESH) ===== */
.why {
  background: #ffffff;
  color: #04060c;
  padding: clamp(2rem, 8vw, 4rem) 0;
  /* padding: 2rem 0; */
}

.why-layout {
  display: grid;
  gap: clamp(2rem, 6vw, 3.5rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  /* align-items: center; */
  align-items: stretch;
}

.bento-media {
  display: grid;
  /* gap: 0.4rem; */
  grid-template-columns: 1fr 0.8fr;
  width: 100%;
  height: 100%;
  gap: var(--bento-gap);
  align-items: stretch;
  justify-items: center;
  box-sizing: border-box;
  overflow: hidden;
  transform-origin: top left;
}

/* .media-column {
  display: grid;
  gap: clamp(0rem, 3vw, 0.1rem);
} */

/* LEFT column */
.media-column.left {
  display: grid;
  flex-direction: column;
  gap: var(--bento-gap);
  /* align-items:center; */
  /* flex: 1.5; */
  grid-template-rows: 1fr auto 1fr;
  /* 3 stacked sections */
  height: 100%;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
  justify-items: center;
}

/* RIGHT column */
.media-column.right {
  display: grid;
  gap: var(--bento-gap);
  grid-template-rows: 1fr 1fr;
  justify-content: space-evenly;
  align-items: center;
  justify-items: center;
}

.media-column:last-child {
  grid-template-rows: 1fr 1fr;
}

.merged.images {
  display: grid;
  /* grid-template-columns: repeat(2, 1fr); */
  grid-template-columns: 1fr 1fr;
  /* two equal columns */
  /* gap: clamp(0rem, 2vw, 0.5rem); */
  gap: var(--bento-gap);
  justify-content: space-evenly;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.media-item {
  width: 100%;
  height: 100%;
  border-radius: var(--bento-radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.media-item img,
.media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
  backface-visibility: hidden;
}

.media-item video {
  filter: saturate(1.05);
}

/* hover scale (desktop only) */
@media (hover: hover) and (min-width: 701px) {

  .media-item:hover img,
  .media-item:hover video {
    transform: scale(var(--bento-hover-scale));
  }
}

/* .media-item.bento1 { aspect-ratio: 16 / 7; }
.media-item.bento2,
.media-item.bento3 { aspect-ratio: 9 / 5; }
.media-item.bento4 {aspect-ratio: 16 / 7; } */

/* .media-item.bento6 { aspect-ratio: 10 / 18; }
.media-item.bento5 { aspect-ratio: 10 / 18; } */

.bento1 {
  aspect-ratio: 16 / 9;
}

.bento2,
.bento3 {
  aspect-ratio: 1 / 1;
}

.bento4,
.bento5,
.bento6 {
  aspect-ratio: 4 / 3;
  /* more compact than 16/9 tall video */
}

.why-panel {
  /* display: grid; */
  /* gap: 1rem; */
  /* max-width: 640px; */
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

.section-tag {
  font-family: var(--font-heading);
  color: var(--darker);
  font-size: 1.4rem;
  font-weight: 600;
  display: inline-block;
  /* IMPORTANT */
  position: relative;
  overflow-x: initial;
  /* Needed for ::after */
}

.section-tag::after {
  content: "";
  /* display: block; */
  position: absolute;
  left: 0;
  bottom: -4px;
  /* adjust distance below text */
  width: 100%;
  /* Match the text width */
  height: 2px;
  background: var(--primary);
  margin-top: 0.5rem;
}

.why-panel h2 {
  color: #080000;
  margin-top: 0;
}

.why-panel h2 span {
  color: var(--primary);
}

.why-panel .lead {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(9, 0, 0, 0.82);
}

.why-panel .accent {
  color: var(--primary);
  font-weight: 700;
}

.why-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.why-list .icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: block;
}

.why-list .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
}

.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--gray-200);
}

.why-list li:first-child {
  padding-top: 0;
}

.why-list li:last-child {
  border-bottom: none;
  padding-bottom: 3.5rem;
}

.why-list li > span:last-child {
  display: block;
  flex: 1;
  min-width: 0;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(4, 6, 12, 0.65);
}

.why-list li strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
}

/* ===========================
  BELOW 620px
  =========================== */
/* @media (max-width: 620px) {
    :root {
    --bento-gap: 0.5rem;
    --bento-radius: 10px;
    --bento-hover-scale: 1.02;
  }
    .why {
      padding: 1.5rem 0;
    }

    .why-layout {
      gap: clamp(1rem, 4vw, 2rem);
      grid-template-columns: 1fr;
      padding-inline: 1rem;
    }

    .why-layout h2 {
      font-size: 1.7rem;
    }

    .why-layout p {
      font-size: 1rem;
      line-height: 1.4;
    }

    .bento-media {
      grid-template-columns: 1fr 0.9fr;
      gap: var(--bento-gap);
      align-items: stretch;
    }

    .bento1,
    .bento4 {
      aspect-ratio: 16/9;
    }

    .bento2,
    .bento3 {
      aspect-ratio: 16/10;
    }

    .bento5,
    .bento6 {
      aspect-ratio: 3/4;
    }

    .section-tag {
      font-size: 1.1rem;
    }
  } */

@media (max-width: 700px) {
  :root {
    --bento-gap: 0.5rem;
    --bento-radius: 10px;
    --bento-hover-scale: 1.02;
  }

  .why {
    padding: 1.25rem 0;
    /* reduce section padding */
  }

  /* keep grid columns visually similar — still two columns, but narrower */
  .bento-media {
    grid-template-columns: 1fr 0.9fr;
    /* keep the same look but slightly adjusted */
    gap: var(--bento-gap);
    align-items: stretch;
  }

  /* tighten the left column row proportions so center row won't push too far */
  .media-column.left {
    gap: var(--bento-gap);
    grid-template-rows: 0.95fr auto 0.95fr;
    /* slightly compress */
  }

  /* merged mini-row: keep 2 columns but smaller squares */
  .merged.images {
    grid-template-columns: 1fr 1fr;
    gap: var(--bento-gap);
  }

  /* slightly adjust aspect ratios so heights reduce proportionally on narrow screens */
  .bento1,
  .bento4 {
    aspect-ratio: 14 / 9;
  }

  /* slightly less tall than desktop */
  .bento2,
  .bento3 {
    aspect-ratio: 10 / 11;
  }

  /* near-square but a touch vertical to match image crop */
  .bento5,
  .bento6 {
    aspect-ratio: 9 / 12;
  }

  /* slightly more compact tall cards */

  /* reduce radius and transform intensity (no big hover on mobile) */
  .media-item {
    border-radius: var(--bento-radius);
  }

  .media-item img,
  .media-item video {
    transition: transform 0.28s ease;
  }

  /* ensure video & img don't overflow their grid cells */
  .media-item img,
  .media-item video {
    max-width: 100%;
    max-height: 100%;
    object-position: center;
  }

  .why-list li {
    padding: 1.1rem 0;
  }

  .why-list .icon {
    width: 48px;
    height: 48px;
  }
}

/* ===========================
   BELOW 420px
  ===========================*/
/* @media (max-width: 420px) {
  .why-layout {
    gap: 1rem;
    padding-inline: 0.5rem;
  }

  .why-layout h2 {
    font-size: 1.4rem;
  }

  .why-layout p {
    font-size: .95rem;
  }

  .section-tag {
    font-size: 1rem;
  }

  .bento-media {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .media-column.left,
  .media-column.right,
  .merged.images {
    grid-template-columns: 1fr 1fr;
  }
} */
@media (max-width: 420px) {
  :root {
    --bento-gap: 0.4rem;
    --bento-radius: 8px;
  }

  .bento-media {
    /* grid-template-columns: 1fr 0.95fr; */
    grid-template-columns: 0.8fr 0.7fr;
    /* padding-right: 2.2rem; */
    gap: var(--bento-gap);
  }

  .media-column.left {
    grid-template-rows: 0.9fr auto 0.9fr;
  }

  .bento1,
  .bento4 {
    aspect-ratio: 13 / 9;
  }

  .bento2,
  .bento3 {
    aspect-ratio: 10 / 12;
  }

  .bento5,
  .bento6 {
    aspect-ratio: 9 / 13;
  }

  .why {
    padding: 0.9rem 0;
  }

  .why-layout {
    padding-inline: 0.4rem;
  }

  /* smaller text area */
  .why-panel {
    padding-right: 0.4rem;
  }
}

.survival-card {
  padding: 1rem 1.7rem;
  margin-top: 2rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(18, 23, 35, 0.95), rgba(10, 13, 22, 0.95));
  /* box-shadow: 0 20px 38px rgba(4, 6, 12, 0.58); */
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.18rem;
  display: grid;
  /* gap: 0.35rem; */
}

.survival-card strong {
  color: var(--primary);
  font-size: 1.18rem;
}

.cta-btn.highlight {
  background: var(--primary);
  color: var(--dark);
  padding-inline: 2.6rem;
  /* box-shadow: 0 20px 40px rgba(252, 183, 0, 0.28); */
  /* width: 40rem; */
  /* width: 33rem; */
  margin-top: 2rem;
}

.cta-btn.highlight:hover {
  background: var(--primary-dark);
}

.stories-media {
  margin: 2.5rem 0 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.5rem;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(16, 19, 28, 0.12);
  background: var(--gray-100);
}

.stories-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stories-caption {
  padding: clamp(1.5rem, 4vw, 2.4rem);
  text-align: left;
  display: grid;
  gap: 0.6rem;
  align-content: center;
}

.stories-caption h3 {
  font-family: var(--font-heading);
  margin: 0;
  color: var(--dark);
}

.stories-caption p {
  margin: 0;
  color: var(--gray-400);
}

.callout {
  margin: 2rem 0;
  padding: 1.4rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 0.25rem;
}

.callout strong {
  color: var(--primary);
  font-size: 1.2rem;
}

.why-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem;
}

.why-gallery img {
  border-radius: 16px;
  height: 160px;
  object-fit: cover;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.why-gallery img:hover {
  opacity: 1;
  transform: translateY(-4px);
}



/* ===== SMART SAFETY ===== */
.smart {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  padding: clamp(1rem, 4vw, 2rem) 1.5rem;
  padding-top: 0.5rem;
  text-align: center;
  overflow: hidden;
  color: #fff;
}

.smart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 23, 42, 0.55);
  /* deep dark blue overlay */
  z-index: 1;
  pointer-events: none;
}

.smart-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.smart-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* THIS is what makes it full background */
  filter: brightness(0.55);
}

.smart-content {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

.smart-content h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
}

.smart-content h2 span {
  color: #e5a600;
}

.smart-content p {
  font-size: 1.1rem;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
  max-width: 971;
  opacity: 0.9;
}

.smart-content-header {
  text-align: center;
  /* max-width: 50rem; */
}

/* .smart-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  max-width: 1200px;
  margin: 0 auto;
} */

.smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  width: 100%;
  overflow: hidden;
  justify-items: stretch;
}

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

/* ---------- GLASSMORPHIC CARDS --------- */
.smart-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1.8rem;
  border-radius: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.12);
  /* transparent glass */
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  /* transition: transform 0.3s ease, background 0.3s ease, border 0.3s ease; */
  transition: transform 0.3s ease;
}

.smart-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}

.smart-card .icon img {
  width: 85px;
  height: 85px;
}


/* ===== FOUNDER STORY ===== */
.founder {
  background: var(--white);
  padding: 2rem 0;
}

.founder-content {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.founder-image {
  border: 2px solid var(--primary);
  border-radius: 20px;
  padding: 0.5rem;
  background: var(--white);
  box-sizing: border-box;
  max-width: 510px; /* increased from 340px */
  width: 100%;
  justify-self: center;
  box-shadow: 0 14px 34px rgba(252, 183, 0, 0.14);
}

.founder-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
}


.founder-text {
  min-width: 0;
  position: relative;
  border: 1px solid rgba(252, 183, 0, 0.28);
  border-radius: 22px;
  padding: 1.6rem 1.9rem;
  background: linear-gradient(160deg, rgba(252, 183, 0, 0.06), rgba(252, 183, 0, 0) 55%);
  box-sizing: border-box;
}

.founder-tag {
  font-family: var(--font-heading);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
  position: relative;
  display: inline-block;
}

.founder-tag::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--primary);
  margin-top: 0.4rem;
}

.founder-name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 2.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--dark);
  margin: 0 0 0.8rem;
  white-space: nowrap;
}

.founder-name span {
  display: inline;
  color: var(--primary);
}

.founder-copy {
  display: grid;
  gap: 0.6rem;
}

.founder-copy p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}

.founder-copy .gold {
  color: var(--primary-dark);
}

.founder-copy strong {
  font-weight: 700;
  color: var(--dark);
}

.founder-copy strong.gold {
  color: var(--primary-dark);
}

.founder-signoff {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--gray-200);
}

.founder-sign {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary-dark);
  margin: 0;
}

.founder-sign .dash {
  color: var(--primary);
  margin-right: 0.3rem;
}

.founder-role {
  font-size: 0.9rem;
  color: var(--gray-400);
  margin: 0.15rem 0 0;
}

@media (max-width: 900px) {
  .founder {
    padding: 2.6rem 0;
  }

  .founder-content {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .founder-content .founder-image {
    order: -1;
  }

  .founder-image {
    max-width: 300px;
    margin: 0 auto;
  }

  .founder-text {
    text-align: center;
    padding: 1.4rem 1.4rem;
  }

  .founder-tag::after {
    margin-left: auto;
    margin-right: auto;
  }

  .founder-copy {
    text-align: left;
    gap: 0.7rem;
  }

  .founder-copy p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .founder-signoff {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .founder-text {
    padding: 1.2rem 1.1rem;
    border-radius: 18px;
  }

  .founder-name {
    font-size: clamp(1.6rem, 8vw, 2.3rem);
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  .founder-copy p {
    font-size: 0.9rem;
  }
}


/* ===== STORIES ===== */
.stories {
  background: var(--white);
  text-align: center;
}

.stories span {
  color: #FFB300;
}

.story-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.5rem;
  overflow: hidden;
}

.story-card {
  /* padding: 2rem 1.6rem; */
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(252, 183, 0, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
  /* box-shadow: 0 12px 24px rgba(16, 19, 28, 0.12); */
  border: 1px solid rgb(224 224 224);
  text-align: left;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(16, 19, 28, 0.16);
}

.story-card-content {
  padding: 2rem 1.6rem;
}

.story-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.story-card h3 {
  font-family: var(--font-heading);
  color: var(--dark);
  margin-bottom: 0.6rem;
}

.story-card span {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--gray-400);
}

.slide-btn {
  display: none;
}

/* MOBILE  (below 420px) */
@media (max-width: 430px) {

  /* STOP ALL PAGE OVERFLOW */
  body,
  html {
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .story-slider-wrapper {
    width: 100%;
    overflow: hidden !important;
    position: relative;
    z-index: 1;
    padding-bottom: 3.2rem;
    /* space for arrows */
  }

  /* Horizontal slider container */
  /* .story-slider {
    display: flex;
    margin: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.9rem 0;
    gap: 0.8rem;
    width: 100%;
    box-sizing: border-box;
  } */

  .story-slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 0.9rem;
    padding: 0 1rem;
  }

  /* hide native scrollbar */
  .story-slider::-webkit-scrollbar {
    display: none;
  }

  .story-slider {
    scrollbar-width: none;
  }

  /* Grid → horizontal container */
  .story-grid {
    display: flex !important;
    flex-direction: row;
    gap: 0.9rem;
    /* width: auto !important; */
    width: max-content;
    /* min-width: auto !important; */
    padding: 0;
    margin: 0;
    /* box-sizing: border-box; */
  }

  /* .story-card {
    flex: 0 0 92%;
    width: 92%;
    max-width: 92%;
    min-width: 92%;
    box-sizing: border-box;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(140deg, rgba(252,183,0,0.06) 0%, rgba(255,255,255,0.95) 100%);
    box-shadow: 0 12px 24px rgba(16,19,28,0.12);
   } */

  .story-card {
    flex: 0 0 88%;
    max-width: 88%;
    min-width: 88%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: none;
  }

  .story-card-content {
    padding: 1.4rem 1.2rem;
    /* overflow: auto;
    max-height: calc(100vh - 170px - 180px); */
  }

  /* image fits container */
  .story-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .story-card {
    max-height: calc(100vh - 170px);
  }

  /* ARROWS (centered under slider) */
  .slide-btn {
    display: flex;
    position: absolute;
    bottom: 4px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1C1B1B;
    color: #FFB300;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 10;
  }

  .slide-btn.left {
    left: 44%;
    transform: translateX(-120%);
  }

  .slide-btn.right {
    left: 56%;
    transform: translateX(20%);
  }
}


@media (max-width: 420px) {

  .how-it-works h2 {
    font-size: 1.4rem;
  }

}


/* ===== NEWSLETTER ===== */
.newsletter {
  position: relative;
  color: var(--white);
  padding: 4rem 1rem;
  overflow: hidden;
}

.newsletter-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.newsletter-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newsletter-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1;
  opacity: 100%;
}

.newsletter-grid {
  position: relative;
  display: grid;
  z-index: 2;
  text-align: center;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  color: #fff;
}

.newsletter-left,
.newsletter-right {
  width: 100%;
  /* Forces them to occupy their full column */
}


.newsletter-left {
  text-align: left;
  /* max-width: 480px; */
  max-width: 544px;
}

.newsletter-left h2,
h3 {
  color: #fff;
}

.newsletter-right {
  display: contents;
  justify-content: center;
  width: 100%;
}

.newsletter-form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  /* align-items: center;
  justify-content: center; */
  gap: 1rem;
  width: 100%;
  max-width: 600px;
}

/* Input & button same width */
.newsletter-form input,
.newsletter-form button {
  width: 100%;
}


/* .newsletter-form input {
  padding: 0.9rem 1.2rem;
  border-radius: 999px;
  border: none;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  outline: none;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
} */

.newsletter-form input {
  /* width: 150%; */
  padding: 1.5rem 1.4rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  font-size: 1.05rem;
  color: var(--white);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  outline: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Hover / focus glass effect */
.newsletter-form input:focus {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}


.newsletter-form button {
  /* width: 150%; */
  margin-top: 0.6rem;
  padding: 1.5rem 2.4rem;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: var(--dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: 0.3s ease;
}

.newsletter-form button:hover {
  background: var(--primary-dark);
}

/* Hide label (accessibility) */
.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;
}

@media (max-width: 768px) {
  .newsletter-grid {
    grid-template-columns: 1fr;
    /* stack on small screens */
    text-align: center;
  }

  .newsletter-left {
    text-align: center;
  }
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 4rem 0 2rem;
  font-size: 0.95rem;
}

/* .footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
} */
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  align-items: start;
  gap: 4rem;
}

.footer-brand img {
  /* width: 212px; */
  width: 180px;
  margin-bottom: 1rem;
  /* margin-bottom: -0.5rem; */
}

.footer-brand h3 {
  color: #d69700;
  margin-bottom: 0.8rem;
}

.footer-brand p {
  line-height: 1.55;
}

.footer-socials {
  margin-top: 2rem;
  display: flex;
  gap: 0.8rem;
  /* font-size: 1.2rem; */
}

.footer-socials a {
  width: 3rem;
  height: 4rem;
  /* border-radius: 12px; */
  /* background: rgba(255, 255, 255, 0.12); */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.2s ease;
}

.footer-socials a img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  /* ensures icon is pure white */
}


.footer-socials a:hover {
  /* background: var(--primary); */
  color: var(--dark);
  transform: translateY(-3px);
}

.footer-links h4,
.footer-contact h4 {
  color: #d69700;
  font-family: var(--font-heading);
  margin-bottom: 1rem;
}




.footer-contact p {
  margin: 0.4rem 0;
}

.footer-contact img {
  margin-top: 1.5rem;
  width: 160px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.footer-links a:hover {
  color: var(--primary);
}

.footer-note {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.8rem;
    text-align: left;
  }

  .footer-brand img {
    width: 180px;
  }

  .footer-socials {
    margin-top: 1.4rem;
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding: 3rem 0 1.5rem;
  }

  .footer-grid {
    /* gap: 2.5rem; */
    gap: 1.5rem;
  }

  .footer-contact img {
    width: 145px;
  }

  .footer-note {
    margin-top: 2rem;
    font-size: 0.8rem;
  }
}

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 1024px) {
  .why-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  /* .hero-actions {
    flex-direction: column;
    align-items: stretch;
  } */

  .stories-media {
    grid-template-columns: 1fr;
  }

  .stories-caption {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .hero {
    text-align: left;
  }

  .newsletter-form {
    flex-direction: column;
    align-items: center;
  }

  .newsletter-form input {
    min-width: 100%;
  }

  /* .why-list li {
    flex-direction: column;
    align-items: flex-start;
  } */
}


/* =====================================================
   REGISTER MODAL
   ===================================================== */

.register-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  visibility: hidden;
}

.register-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.register-container {
  position: relative;
  width: min(90%, 1000px);
  max-height: calc(100vh - 2rem);
  margin: 1rem auto;
  background: #fffdf9;
  border-radius: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateY(-150%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.register-modal.active {
  visibility: visible;
}

.register-modal.active .register-overlay {
  opacity: 1;
}

.register-modal.active .register-container {
  transform: translateY(0);
}

.close-register {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: #10131c;
  color: #fcb700;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 20;
  display: grid;
  place-items: center;
  transition: transform 0.2s;
}

.close-register:hover {
  transform: scale(1.1);
}


/* =====================================================
   REGISTER CONTENT
   ===================================================== */

.register-content {
  display: flex;
  flex-direction: column-reverse;
}

.register-form-section {
  flex: 1;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.register-form-section h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  line-height: 1.2;
  color: #10131c;
}

.highlight-text {
  color: #fcb700;
}

.register-sub {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
  line-height: 1.4;
}

.form-group {
  margin-bottom: 0.65rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  color: #10131c;
}

.required {
  color: #d32f2f;
}

.form-group input {
  width: 100%;
  height: 38px;
  padding: 0.6rem 1rem;
  border: 1px solid #ddd;
  border-radius: 24px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.form-group input:focus {
  border-color: #fcb700;
}

.submit-btn {
  background: #10131c;
  color: #fcb700;
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.submit-btn:hover {
  background: #000;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-btn span {
  font-size: 1.2rem;
}


/* =====================================================
   APP DOWNLOAD SECTION
   ===================================================== */

.app-download-section {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "qr info"
    "buttons buttons";
  column-gap: 1rem;
  row-gap: 0.9rem;
  align-items: start;
  margin-top: 0.7rem;
  padding: 0.9rem;
  border: 1px solid #eee2c8;
  border-radius: 14px;
  background: #fffaf0;
  box-sizing: border-box;
}

.app-qr {
  grid-area: qr;
  align-self: start;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 4px;
  box-sizing: border-box;
}

.app-download-info {
  grid-area: info;
  min-width: 0;
  align-self: center;
}

.app-download-info h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: #10131c;
  margin: 0 0 0.25rem;
  line-height: 1.25;
}

.app-download-info p {
  color: #666;
  font-size: 0.72rem;
  line-height: 1.3;
  margin: 0;
}

.app-store-buttons {
  grid-area: buttons;
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  background: #10131c;
  color: #fff;
  border-radius: 10px;
  padding: 0.55rem 0.5rem;

  text-decoration: none;
  transition: background 0.2s, transform 0.2s;

  /* Equal-size, prevent overflow / scrollbar */
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.store-btn:hover {
  background: #000;
  transform: translateY(-2px);
}

.store-btn:focus-visible {
  outline: 2px solid #fcb700;
  outline-offset: 2px;
}

.store-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.store-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-weight: 600;
  font-size: 0.7rem;
  min-width: 0;
  overflow-wrap: break-word;
}

.store-btn-text small {
  font-weight: 400;
  font-size: 0.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fcb700;
}


/* =====================================================
   IMAGE SECTION
   SVG = BACKGROUND
   PNG = BIKE + DEVICE
   ===================================================== */

.register-image-section {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 480px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  box-sizing: border-box;
}

/* Yellow SVG background */

.register-image-section .register-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  border-radius: 24px;

  pointer-events: none;
  z-index: 1;
}

/* Bike + device PNG */

.register-image-section img:not(.register-bg) {
  position: relative;

  display: block;

  width: 92%;
  max-width: 100%;
  height: auto;

  max-height: 100%;

  object-fit: contain;
  object-position: center;

  z-index: 2;

  pointer-events: none;
}


/* =====================================================
   DESKTOP
   ===================================================== */

@media (min-width: 768px) {

  .register-content {
    flex-direction: row;
    align-items: stretch;
  }

  .register-image-section {
    min-height: 530px;
    min-width: 0;
  }

  .register-form-section {
    min-width: 0;
  }

  .register-image-section img:not(.register-bg) {
    width: 94%;
  }
}


/* =====================================================
   TABLET / SMALL DESKTOP
   ===================================================== */

@media (min-width: 768px) and (max-width: 1000px) {

  .register-container {
    width: 94%;
  }

  .register-form-section {
    padding: 28px;
  }

  .register-image-section {
    min-height: 450px;
  }

  .register-image-section img:not(.register-bg) {
    width: 92%;
  }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

  .register-container {
    width: 94%;
    max-height: calc(100vh - 1rem);
    margin: 0.5rem auto;
    border-radius: 18px;
  }

  .register-content {
    flex-direction: column-reverse;
  }

  /* Image stays at top */

  .register-image-section {
    width: 100%;
    height: clamp(250px, 48vw, 340px);
    min-height: 250px;
    max-height: 340px;

    overflow: hidden;
  }

  /* SVG background */

  .register-image-section .register-bg {
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
  }

  /* Bike PNG */

  .register-image-section img:not(.register-bg) {
    position: relative;

    width: 100%;
    max-width: 100%;
    height: auto;

    max-height: 100%;

    object-fit: contain;

    left: auto;
    top: auto;
    transform: none;
  }

  .register-form-section {
    padding: 20px 20px 24px;
  }

  .register-form-section h2 {
    font-size: 1.4rem;
    line-height: 1.3;
  }

  .register-sub {
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
  }

  .form-group input {
    height: 38px;
    font-size: 0.95rem;
  }

  .submit-btn {
    font-size: 1rem;
    padding: 0.7rem 1.4rem;
  }

  .close-register {
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
    top: 0.8rem;
    right: 0.8rem;
  }

  .app-download-section {
    column-gap: 0.8rem;
    row-gap: 0.75rem;
    padding: 0.8rem;
    margin-top: 0.7rem;
  }

  .app-qr {
    width: 72px;
    height: 72px;
  }

  .app-download-info h3 {
    font-size: 0.88rem;
  }

  .app-download-info p {
    font-size: 0.68rem;
  }

  .store-btn {
    padding: 0.5rem 0.4rem;
  }

  .store-btn-text {
    font-size: 0.64rem;
  }

  .store-btn-text small {
    font-size: 0.48rem;
  }
}


/* =====================================================
   VERY SMALL MOBILE
   ===================================================== */

@media (max-width: 420px) {

  .register-container {
    width: 94%;
  }

  .register-image-section {
    height: 270px;
    min-height: 270px;
  }

  .register-image-section img:not(.register-bg) {
    width: 100%;
  }

  .register-form-section {
    padding: 24px 18px 26px;
  }

  .register-form-section h2 {
    font-size: 1.4rem;
  }

  .app-download-section {
    padding: 0.7rem;
    column-gap: 0.65rem;
    row-gap: 0.65rem;
  }

  .app-qr {
    width: 64px;
    height: 64px;
  }

  .app-download-info h3 {
    font-size: 0.85rem;
  }

  .app-download-info p {
    font-size: 0.66rem;
  }

  .store-btn {
    padding: 0.45rem 0.35rem;
    gap: 0.3rem;
  }

  .store-icon {
    width: 15px;
    height: 15px;
  }

  .store-btn-text {
    font-size: 0.6rem;
  }

  .store-btn-text small {
    font-size: 0.45rem;
  }
}


/* =====================================================
   TOAST
   ===================================================== */

.toast-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  color: #333;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(150%);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10000;
  border-left: 5px solid var(--primary);
  font-family: var(--font-heading);
  font-weight: 600;
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-icon {
  color: var(--primary);
  font-size: 1.4rem;
}


/* Register Toast */

.register-toast {
  bottom: auto;
  top: 30px;
  right: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  z-index: 20000;
}

.register-toast.show {
  transform: translateX(-50%) translateY(0);
}



/* ===================================================================
   AMBULANCE SERVICES
   =================================================================== */

/* ---- Desktop nav trigger ---- */
.ambulance-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.ambulance-trigger.open {
  background: #1C1B1B;
  color: var(--primary);
}

/* ---- Dropdown / overlay panel ---- */
.ambulance-dropdown {
  container-type: inline-size;
  container-name: amb-panel;
  position: fixed;
  top: 70px;
  /* left is set inline by JS to align under the trigger; this is just a pre-JS fallback */
  left: 50%;
  margin-left: -190px;
  transform: translateY(6px);
  width: min(380px, 92vw);
  max-height: min(76vh, 700px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.25);
  padding: 1.1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 50;
}

.ambulance-dropdown.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.ambulance-dropdown.detail {
  width: min(800px, 60vw);
}

.ambulance-panel-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray-400);
  cursor: pointer;
}

.ambulance-panel-back:hover {
  color: var(--primary-dark);
}

/* ---- View switching ---- */
.ambulance-view {
  display: none;
}

.ambulance-view.active {
  display: block;
}

.ambulance-subview {
  display: none;
}

.ambulance-subview.active {
  display: block;
}

/* ---- Menu view ---- */
.ambulance-menu-view .section-intro {
  margin-bottom: 2.5rem;
}

.ambulance-menu-grid {
  display: grid;
  gap: 1rem;
  max-width: 720px;
}

.ambulance-menu-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.3rem;
  border-radius: 18px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.ambulance-menu-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.ambulance-menu-card .ambulance-menu-icon {
  width: 60px;
  height: 60px;
}

.ambulance-menu-card .ambulance-menu-icon svg {
  width: 42px;
  height: 28px;
}

.ambulance-menu-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /* The global `* { overflow-x: hidden }` reset zeroes this flex item's
     automatic minimum size, letting it shrink narrower than an unbroken
     word like "Ambulance" on tight panel widths; without a wrap escape
     the word overflows its own line and gets silently clipped instead
     of wrapping. */
  overflow-wrap: break-word;
}

.ambulance-menu-text strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--dark);
}

.ambulance-menu-text span {
  font-size: 0.9rem;
  color: var(--gray-400);
}

.ambulance-menu-arrow {
  font-size: 1.3rem;
  color: var(--dark);
  flex-shrink: 0;
}

/* ---- Sub tabs (Ground: Overview / Types) ---- */
.ambulance-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.ambulance-tab {
  padding: 0.66rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--dark);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.25s ease;
}

.ambulance-tab:hover {
  border-color: var(--primary);
}

.ambulance-tab.active {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--primary);
}

/* ---- Ground Ambulance detail only: tighter spacing so "Book Ground Ambulance"
   fits inside the panel without scrolling (Air/Train are untouched). ---- */
[data-amb-view-panel="ground"] .ambulance-panel-back {
  margin-bottom: 0.6rem;
}

[data-amb-view-panel="ground"] .ambulance-tabs {
  margin-bottom: 1rem;
}

[data-amb-view-panel="ground"] [data-amb-subpanel="overview"] .ambulance-overview-grid {
  gap: 2rem;
  margin-bottom: 1rem;
}

[data-amb-view-panel="ground"] [data-amb-subpanel="overview"] .ambulance-overview-lead {
  margin-bottom: 0.5rem;
}

[data-amb-view-panel="ground"] [data-amb-subpanel="overview"] .ambulance-overview-desc {
  margin-bottom: 1rem;
}

[data-amb-view-panel="ground"] [data-amb-subpanel="overview"] .ambulance-features {
  gap: 0.9rem;
}

[data-amb-view-panel="ground"] [data-amb-subpanel="overview"] .ambulance-book-card {
  padding: 1.1rem 1.6rem;
}

[data-amb-view-panel="ground"] [data-amb-subpanel="overview"] .ambulance-book-label {
  margin-bottom: 0.5rem;
}

/* ---- Overview (image + info) ---- */
.ambulance-overview-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.15fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

.ambulance-hero-media {
  border-radius: var(--radius);
  background: linear-gradient(160deg, #eaf2fb 0%, var(--gray-100) 100%);
  padding: 1.5rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.ambulance-hero-graphic {
  width: 100%;
  height: auto;
  display: block;
}

.ambulance-overview-info h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  color: var(--dark);
  margin: 0 0 0.4rem;
}

.ambulance-overview-lead {
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 0.9rem;
}

.ambulance-overview-desc {
  color: var(--gray-400);
  line-height: 1.7;
  margin: 0 0 1.8rem;
}

.ambulance-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}

.ambulance-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.ambulance-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gray-100);
  display: grid;
  place-items: center;
  color: var(--dark);
}

.ambulance-feature-icon svg {
  width: 24px;
  height: 24px;
}

.ambulance-feature-icon img {
  width: 22px;
  height: 22px;
}

.ambulance-feature span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
}

/* ---- Book ambulance form ---- */
.ambulance-book-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.6rem;
  background: var(--gray-100);
}

.ambulance-book-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.9rem;
}

.ambulance-book-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.ambulance-book-row input {
  flex: 1;
  min-width: 220px;
  height: 52px;
  padding: 0 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s;
}

.ambulance-book-row input:focus {
  border-color: var(--primary);
}

.ambulance-book-row .cta-btn {
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* ---- Types of Ground Ambulance ---- */
.ambulance-type-list {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.ambulance-type-card {
  display: grid;
  grid-template-columns: 96px 1.6fr 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.2rem;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: var(--white);
}

.ambulance-type-thumb {
  width: 96px;
  height: 68px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gray-100);
  display: block;
}

.ambulance-type-thumb svg {
  width: 100%;
  height: 100%;
}

.ambulance-type-info h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--dark);
  margin: 0 0 0.3rem;
}

.ambulance-type-info p {
  font-size: 0.88rem;
  color: var(--gray-400);
  margin: 0;
  line-height: 1.5;
}

.purpose-label {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--dark);
  margin-bottom: 0.2rem;
}

.ambulance-type-purpose p {
  font-size: 0.85rem;
  color: var(--gray-400);
  margin: 0;
  line-height: 1.4;
}

/* ---- Footer emergency bar ---- */
.footer-emergency-bar {
  margin-top: 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-emergency-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-emergency-left {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.footer-emergency-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--white);
}

.footer-emergency-mark {
  width: 28px;
}

.footer-emergency-word {
  height: 20px;
  width: auto;
}

.footer-emergency-tag {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.footer-emergency-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.footer-emergency-info span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-emergency-info svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.footer-emergency-follow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.85rem;
}

.footer-emergency-follow .footer-socials {
  margin-top: 0;
  gap: 0.4rem;
}

.footer-emergency-follow .footer-socials a {
  width: 2rem;
  height: 2rem;
}

.footer-emergency-follow .footer-socials a img {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---- Responsive ----
   The panel's own width (not the viewport) decides its inner layout, since a
   detail panel can be much narrower than the screen even on a wide desktop. */
@container amb-panel (max-width: 620px) {
  .ambulance-menu-card {
    gap: 0.8rem;
    padding: 1rem;
  }

  .ambulance-menu-card .ambulance-menu-icon {
    width: 44px;
    height: 44px;
  }

  .ambulance-menu-card .ambulance-menu-icon svg {
    width: 32px;
    height: 22px;
  }

  .ambulance-menu-text strong {
    font-size: 1rem;
  }

  .ambulance-menu-text span {
    font-size: 0.82rem;
  }

  .ambulance-menu-arrow {
    font-size: 1.1rem;
  }

  .ambulance-overview-grid {
    grid-template-columns: 1fr;
  }

  .ambulance-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .ambulance-book-row {
    flex-direction: column;
  }

  .ambulance-book-row input,
  .ambulance-book-row .cta-btn {
    width: 100%;
  }

  .ambulance-type-card {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .ambulance-type-purpose {
    grid-column: auto;
  }

  .ambulance-type-thumb {
    width: 100%;
    height: 110px;
  }
}

/* Same stacking as the container query above, but keyed to the viewport
   instead of the panel's own width: at 768px the full-width sheet
   (viewport - 24px gutter) is still wider than the 620px container
   threshold, so it wouldn't otherwise collapse to one column here. */
@media (max-width: 768px) {
  .ambulance-menu-card {
    gap: 0.8rem;
    padding: 1rem;
  }

  .ambulance-menu-card .ambulance-menu-icon {
    width: 44px;
    height: 44px;
  }

  .ambulance-menu-card .ambulance-menu-icon svg {
    width: 32px;
    height: 22px;
  }

  .ambulance-menu-text strong {
    font-size: 1rem;
  }

  .ambulance-menu-text span {
    font-size: 0.82rem;
  }

  .ambulance-menu-arrow {
    font-size: 1.1rem;
  }

  .ambulance-overview-grid {
    grid-template-columns: 1fr;
  }

  .ambulance-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .ambulance-book-row {
    flex-direction: column;
  }

  .ambulance-book-row input,
  .ambulance-book-row .cta-btn {
    width: 100%;
  }

  .ambulance-type-card {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .ambulance-type-purpose {
    grid-column: auto;
  }

  .ambulance-type-thumb {
    width: 100%;
    height: 110px;
  }
}

/* Below the desktop nav breakpoint the trigger lives in the mobile drawer instead,
   so the panel becomes a full-width sheet anchored under the header. */
@media (max-width: 1160px) {
  .ambulance-dropdown {
    left: 12px;
    right: 12px;
    margin-left: 0;
    width: auto;
    top: 82px;
    max-height: min(80vh, 640px);
  }

  .ambulance-dropdown.detail {
    width: auto;
  }
}

@media (max-width: 700px) {
  .footer-emergency-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===================================================================
   LEGAL (TERMS & CONDITIONS / PRIVACY POLICY)
   =================================================================== */
.legal-section {
  background: var(--white);
}

.legal-section.alt {
  background: var(--gray-100);
}

.legal-wrapper {
  max-width: 900px;
}

/* Standalone legal pages (terms.html / privacy-policy.html) open straight into this
   section with no hero above it, so it needs its own clearance under the fixed header. */
.legal-page {
  padding-top: 8rem;
}

@media (max-width: 1160px) {
  .legal-page {
    padding-top: 6.5rem;
  }
}

.legal-content {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
}

.legal-clause h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--dark);
  margin: 0 0 0.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.legal-num {
  color: var(--primary-dark);
  font-weight: 700;
}

.legal-clause p {
  color: var(--gray-400);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 600px) {
  .legal-content {
    gap: 1.5rem;
  }
}

/* ===================================================================
   FAQ
   =================================================================== */
.faq-section {
  background: var(--gray-100);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
}

.faq-extra {
  display: none;
}

.faq-grid.expanded .faq-extra {
  display: block;
}

.faq-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}

.faq-num {
  flex-shrink: 0;
  min-width: 2.1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary-dark);
}

.faq-question-text {
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--dark);
}

.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--dark);  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.25s ease;
}

.faq-chevron svg {
  width: 100%;
  height: 100%;
  
}

.faq-card.active .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-answer-inner {
  overflow: hidden;
  padding: 0 1.4rem;
}

.faq-card.active .faq-answer {
  grid-template-rows: 1fr;
}

.faq-card.active .faq-answer-inner {
  padding: 0 1.4rem 1.2rem;
}

.faq-answer-inner p {
  margin: 0;
  color: var(--gray-400);
  font-size: 0.9rem;
  line-height: 1.6;
}

.faq-view-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.faq-view-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: var(--dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.faq-view-more:hover {
  background: var(--primary-dark);
}

.faq-view-more-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.faq-view-more-icon svg {
  width: 100%;
  height: 100%;
}

.faq-view-more.is-open .faq-view-more-icon {
  transform: rotate(180deg);
}

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

  .faq-question-text {
    font-size: 0.92rem;
  }
}

/* Floating Contact Buttons */
.contact-widget {
  position: fixed;
  right: 0;
  bottom: 20px;
  width: 155px;
  padding: 18px 12px;
  background: #fff;
  border-radius: 28px 0 0 28px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.12);
  z-index: 9999;
  text-align: center;
}

.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.contact-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.whatsapp {
  background: #2fc34a;
}

.phone {
  background: #FAAA09;
}

.contact-item span {
  margin-top: 12px;
  font-size: 20px;
  line-height: 1.2;
  color: #031639;
  font-weight: 500;
}

.contact-divider {
  width: 45px;
  height: 2px;
  background: #111;
  margin: 20px auto;
}

@media (max-width: 480px) {
  .contact-widget {
    width: 96px;
    padding: 10px 6px;
    bottom: 12px;
  }

  .contact-icon {
    width: 40px;
    height: 40px;
  }

  .contact-icon img {
    width: 22px;
    height: 22px;
  }

  .contact-item span {
    margin-top: 6px;
    font-size: 11px;
  }

  .contact-divider {
    width: 32px;
    margin: 8px auto;
  }
}

/* Short viewports (small-height phones, phones in landscape, and
   common laptop windows like 1366x768/1440x900): the widget itself
   needs to take up less vertical room so it doesn't sit tall enough
   to cover in-flow content (e.g. the About card) at common scroll
   positions. Scoped to max-width:1600px so only genuinely spacious
   desktop windows (e.g. 1920x1080+) keep the full-size widget. */
@media (max-width: 1600px) and (max-height: 1100px) {
  .contact-widget {
    width: 96px;
    padding: 10px 6px;
    bottom: 10px;
  }

  .contact-icon {
    width: 40px;
    height: 40px;
  }

  .contact-icon img {
    width: 22px;
    height: 22px;
  }

  .contact-item span {
    margin-top: 6px;
    font-size: 11px;
  }

  .contact-divider {
    width: 32px;
    margin: 8px auto;
  }
}

@media (max-width: 1600px) and (max-height: 700px) {
  .contact-widget {
    width: 76px;
    padding: 6px 5px;
    bottom: 6px;
  }

  .contact-icon {
    width: 32px;
    height: 32px;
  }

  .contact-icon img {
    width: 18px;
    height: 18px;
  }

  .contact-item span {
    margin-top: 4px;
    font-size: 9.5px;
  }

  .contact-divider {
    width: 26px;
    margin: 5px auto;
  }
}

/* On short mobile viewports the Ambulance Services sheet's booking button
   (or the mobile nav drawer's own footer links) can sit low enough that the
   fixed widget would be drawn on top of it; hide the widget while either
   overlay is open. */
@media (max-width: 768px) {
  body:has(.ambulance-dropdown.open) .contact-widget,
  body:has(#mobileNav.open) .contact-widget {
    display: none;
  }

  /* Reserve clearance at the bottom of the footer so the fixed widget
     never sits on top of its real content once the page is scrolled all
     the way down. */
  .site-footer {
    padding-bottom: 180px;
  }
}