/* ==========================================================================
   Yadhan — homepage-only sections
   Loaded after main.css. Everything here belongs to index.html: the hero and
   its stat row, the brushed-metal actions, the pillars, the four-steps band,
   the locations marquee, the trust split and the enquiry form.
   ========================================================================== */

/* brushed-metal hero buttons */
.btn-metal {
  position: relative;
  overflow: hidden;
  padding: 15px 40px;
  font-size: 25px;
  border-radius: 16px;
}
.btn-metal--teal {
  color: #0e2423;
  border: 1px solid #9fc4bf;
  background: linear-gradient(168deg, #ffffff 0%, #d8ece8 18%, #8fbcb6 40%, #eaf7f4 52%, #7fb0aa 66%, #cde6e1 84%, #ffffff 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.95), inset 0 -2px 2px rgba(20,60,58,.28), 0 1px 2px rgba(0,0,0,.12);
}
.btn-metal--silver {
  color: var(--color-text);
  border: 1px solid #cdd2ce;
  background: linear-gradient(168deg, #ffffff 0%, #f4f6f3 18%, #d3d9d4 40%, #ffffff 52%, #c8cfc9 66%, #eef1ec 84%, #ffffff 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,1), inset 0 -2px 2px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.1);
}
.btn-metal:hover { color: inherit; }
.btn-metal::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-18deg);
  animation: metal-sheen 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes metal-sheen {
  0%, 68% { left: -45%; }
  100% { left: 115%; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
/* The hero wants the photograph's own 3:2 — that is the shape that crops
   nothing — but it is capped to the viewport so the stat row is always on
   screen when the page loads, animation and all. Without the cap the ratio
   makes the hero 960px tall at 1440 and 1280px at 1920, which pushes the
   numbers below the fold.

   Where the cap bites, object-fit: cover trims the picture — but only by the
   difference, not to a fixed band: 100% of the photo is still visible on any
   viewport tall enough for the ratio, and ~94% at 1280x900 where the old
   fixed band showed 84%. 96px is the sticky header. */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 0;
  max-height: calc(100vh - 96px);
  max-height: calc(100svh - 96px);
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: var(--color-accent);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* the photo stays untinted at the top; a soft dark fade near the bottom
   carries the stat row */
.hero__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(10,20,20,.62) 62%, rgba(10,20,20,.78));
  pointer-events: none;
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  margin: auto auto 0;
  padding: clamp(28px, 5vw, 72px) var(--page-pad) clamp(32px, 4vw, 56px);
}
/* On a laptop the capped hero ends at the bottom of the window, which puts
   the stat row under the floating WhatsApp button — measured overlapping the
   fourth caption at 1024, 1280, 1366 and 1440. The button occupies the
   bottom 88px, so the row is lifted clear of it. */
@media (min-width: 1000px) {
  .hero__inner { padding-bottom: clamp(96px, 8vw, 112px); }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.js .stat { opacity: 0; }
.stat.is-in { animation: stat-drop 1.15s cubic-bezier(.2,.75,.3,1) both; }
.stat.is-in:nth-child(1) { animation-delay: .15s; }
.stat.is-in:nth-child(2) { animation-delay: .40s; }
.stat.is-in:nth-child(3) { animation-delay: .65s; }
.stat.is-in:nth-child(4) { animation-delay: .90s; }
@keyframes stat-drop {
  from { opacity: 0; transform: translateY(-38px); }
  to { opacity: 1; transform: none; }
}

.stat__value {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 2.2vw, 32px);
  font-variant-numeric: tabular-nums;
  color: #f7fbf9;
  text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 6px 22px rgba(0,0,0,.6);
}
.stat__value--live { display: flex; align-items: center; gap: 11px; }
.stat__caption {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(247,251,249,.95);
  text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 4px 14px rgba(0,0,0,.55);
}

/* "Live" — red metallic type with a shimmer, beside a pulsing dot */
/* "Live" is a status, not a number, but it sits in a row of numbers, so it is
   set in the same white with the same shadow and the liveness is carried by a
   dot in front of it. It used to be a red gradient clipped to the letters:
   with dark stops at #7D1408 and #6F1206 it went muddy wherever the photograph
   behind it was light, and it was the only stat that did not match its
   neighbours — it read as a rendering fault rather than a flourish. */
.live {
  color: #f7fbf9;
  text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 6px 22px rgba(0,0,0,.6);
}
.live-dot {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  display: inline-block;
  background: #ff4a3d;
  box-shadow: 0 0 0 3px rgba(255,74,61,.28), 0 1px 3px rgba(0,0,0,.55);
}
/* a ring going out from the dot, the way a broadcast light reads — steadier
   than blinking the dot itself, which flickered against the moving photo */
.live-dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid #ff4a3d;
  animation: live-ping 2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes live-ping {
  0% { transform: scale(1); opacity: .85; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* --------------------------------------------------------------------------
   6. Hero actions
   -------------------------------------------------------------------------- */
.hero-actions {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 48px) var(--page-pad) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   7. What the companion does
   -------------------------------------------------------------------------- */
.pillars {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--section-pad) var(--page-pad);
}
.pillars .kicker { margin-bottom: 28px; }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0;
}
.pillar { padding: 0 28px 28px; border-right: 2px solid var(--color-divider); }
.pillar:first-child { padding-left: 0; }
.pillar:last-child { padding-right: 0; border-right: 0; }
.pillar__num { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.pillar__title { font-size: 24px; margin: 0 0 12px; }
.pillar__body {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.pillar__link { margin: 0; font-size: 14px; }
.pillar__link a { text-decoration: none; }

/* --------------------------------------------------------------------------
   8. Four steps
   -------------------------------------------------------------------------- */
.steps { background: var(--color-mint); padding: var(--section-pad) var(--page-pad); }
.steps__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 4vw, 64px);
}
.steps__title { font-size: clamp(28px, 3vw, 38px); margin: 0 0 16px; }
.steps__cta { margin-top: 8px; }

.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 2px solid var(--color-divider);
}
.step:last-child { border-bottom: 0; }
.step__num { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.step__title { font-size: 19px; margin: 0 0 6px; }
.step__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.step__body a { text-decoration: none; }

/* --------------------------------------------------------------------------
   9. Service locations
   -------------------------------------------------------------------------- */
.locations { background: #ffffff; padding: 120px 0 0; }
.locations__title {
  max-width: var(--page-max);
  margin: 0 auto 32px;
  padding: 0 var(--page-pad);
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-accent);
}

.marquee { overflow: hidden; padding: 2px 0 4px; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__group { display: flex; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* names are set as clipped metal gradients, cycling through five tones */
.location {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  margin: 0 7px;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(21px, 2.1vw, 28px);
  letter-spacing: 0.08em;
  text-transform: capitalize;
  white-space: nowrap;
  background: linear-gradient(150deg, #1f5f57 0%, #0e2f2a 26%, #4fa093 48%, #16413a 70%, #2b6f63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.location:nth-child(5n+2) { background: linear-gradient(150deg, #b4361c 0%, #5e1a0b 26%, #ef6a48 48%, #7d240f 70%, #c8431f 100%); -webkit-background-clip: text; background-clip: text; }
.location:nth-child(5n+3) { background: linear-gradient(150deg, #1e4a80 0%, #0d2242 26%, #4c86c9 48%, #143459 70%, #2a5c98 100%); -webkit-background-clip: text; background-clip: text; }
.location:nth-child(5n+4) { background: linear-gradient(150deg, #7a4a12 0%, #3c2306 26%, #c98a35 48%, #4f2f0a 70%, #8f5b18 100%); -webkit-background-clip: text; background-clip: text; }
.location:nth-child(5n+5) { background: linear-gradient(150deg, #5d2c7a 0%, #2c123c 26%, #9a63bd 48%, #3b1a51 70%, #6e3690 100%); -webkit-background-clip: text; background-clip: text; }

/* --------------------------------------------------------------------------
   10. Why families trust us
   -------------------------------------------------------------------------- */
.trust {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 96px var(--page-pad) var(--section-pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.trust__title { font-size: clamp(26px, 2.8vw, 34px); margin: 0 0 28px; }
.trust__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.trust__list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 15px;
  line-height: 1.65;
}
.trust__bullet { width: 10px; height: 10px; background: var(--color-accent); margin-top: 7px; }
/* No framing ratio here: this is a composite graphic with headings, captions
   and a footer strip running to its edges, so a 5:3 crop shaved the sides off
   its own artwork. It shows whole, at its own proportions. */
.trust__media img { width: 100%; height: auto; }
.trust__media .btn { margin-top: 20px; }

/* --------------------------------------------------------------------------
   11. Enquiry
   -------------------------------------------------------------------------- */
.enquiry { background: var(--color-mint); padding: var(--section-pad) var(--page-pad); }
.enquiry__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.enquiry__title { font-size: clamp(26px, 2.8vw, 34px); margin: 0 0 16px; max-width: 22ch; }
.enquiry__body {
  margin: 0 0 28px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.contact-rows { display: grid; gap: 0; border-top: 2px solid var(--color-divider); }
.contact-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 14.5px;
}
.contact-row:last-child { border-bottom-width: 2px; }
.contact-row__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

.enquiry__form {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--color-bg);
  border: 2px solid var(--color-divider);
}
.enquiry__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.enquiry__actions .btn { font-size: 15px; padding: 13px 24px; }
/* The button hands off to WhatsApp, which on a desktop means WhatsApp Web and
   a QR screen for anyone not already signed in there. The phone number sits
   beside it so that visitor is not left at a dead end. */
.enquiry__alt {
  margin: 0;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.enquiry__alt a { text-decoration: none; font-weight: 600; }
.enquiry__status {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.enquiry__status:empty { margin: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  /* the four-steps band stacks before its 4fr/8fr split gets cramped */
  .steps__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 860px) {
  /* the pillars stack, and their dividers turn horizontal with them */
  .pillars__grid { grid-template-columns: minmax(0, 1fr); }
  .pillar { padding: 24px 0; border-right: 0; border-bottom: 2px solid var(--color-divider); }
  .pillar:first-child { padding-top: 0; }
  .pillar:last-child { padding-bottom: 0; border-bottom: 0; }
  .locations { padding-top: 80px; }
  .trust { padding-top: 72px; }
}

@media (max-width: 620px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the 25px metal labels get their own rows rather than overflowing */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-metal { justify-content: center; padding: 15px 28px; font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .stat, .btn-metal::after, .live-dot::after, .marquee__track { animation: none; }
  /* without the ring the dot alone still reads as a status light */
  .live-dot::after { opacity: 0; }
  .js .stat { opacity: 1; }
}

/* the enquiry form stacks its fields on a grid and sets its labels as small
   caps, unlike the plainer forms elsewhere on the site */
.enquiry__form .field { display: grid; gap: 8px; }
.enquiry__form .input { font-size: 15px; }
.enquiry__form .field > label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Hero photography on smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  /* on a phone the picture would be too short to carry the stats on top, so
     the photo runs at full width and the stats sit below it on the teal */
  .hero {
    aspect-ratio: auto;
    max-height: none;
    background: var(--color-accent);
  }
  .hero__media { position: static; }
  .hero__media img { height: auto; }
  .hero__scrim { display: none; }
  .hero__inner {
    margin: 0;
    padding: 26px var(--page-pad) 30px;
  }
  /* the shadows exist to lift the type off the photograph; on the flat teal
     they only soften it */
  .stat__value,
  .stat__caption { text-shadow: none; }
}

/* the email address is one long unbreakable word */
.contact-row__value--email { white-space: normal; overflow-wrap: anywhere; text-align: right; }

/* --------------------------------------------------------------------------
   Outside our areas — the band closing the homepage
   -------------------------------------------------------------------------- */
.outside h2 { max-width: 20ch; }
.outside__body {
  max-width: 58ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-bg) 88%, transparent);
}
.outside .actions { gap: 12px; margin-top: 32px; }

/* The trust panel is a composite graphic with its own headline, captions and
   footer strip. Split evenly it renders at 0.35x of its source, which puts
   its smallest type around 6px. Giving the media column 7 of the 12 lifts it
   to about 0.47x. It is a wide graphic in a page column either way — for the
   small print to be properly readable it wants a full-bleed band of its own. */
@media (min-width: 900px) {
  .trust { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}