/* ============================================================
   Dr. Waseem Sheqwarah, Cosmetic & Implant Dentist
   Design tokens + styles. Vanilla CSS, no build step.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand colors */
  --navy: #2E3450;
  --navy-900: #232840;
  --navy-700: #3a4066;
  --teal: #4FB9A5;
  --teal-600: #3da28f;
  --teal-100: #e5f4f1;

  /* Neutrals / surfaces */
  --white: #ffffff;
  --bg: #ffffff;
  --bg-alt: #F7F9FA;
  --line: #e6eaee;

  /* Text */
  --text: #2b3047;
  --text-muted: #6b7186;
  --text-invert: #ffffff;

  /* Typography */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing / layout */
  --container: 1160px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(46, 52, 80, 0.06);
  --shadow: 0 12px 32px rgba(46, 52, 80, 0.10);
  --shadow-lg: 0 24px 60px rgba(46, 52, 80, 0.16);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 92px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--navy);
  line-height: 1.12;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 22px;
}

.section { padding: clamp(56px, 9vw, 110px) 0; }
.section-alt { background: var(--bg-alt); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--teal-600);
  margin: 0 0 14px;
}

.section-title {
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
}

.section-head {
  max-width: 640px;
  margin: 0 auto clamp(38px, 5vw, 58px);
  text-align: center;
}

.section-intro, .lead {
  color: var(--text-muted);
  font-size: 1.06rem;
}

.lead {
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 500;
}

.accent-text { color: var(--teal); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 10px 22px rgba(79, 185, 165, 0.32);
}
.btn-primary:hover {
  background: var(--teal-600);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(79, 185, 165, 0.4);
}

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: rgba(46, 52, 80, 0.22);
}
.btn-ghost:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: var(--navy);
  color: #fff;
  padding: 11px 20px;
  font-size: 0.9rem;
}
.btn-whatsapp:hover { background: var(--navy-900); transform: translateY(-2px); }
.btn-whatsapp .wa-icon { fill: #25D366; }

.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 20px;
}

.brand { display: inline-flex; align-items: center; }
/* The mark is a stacked two-line lockup, so it needs more height than a
   single-line wordmark to read at the same size. */
.brand-logo { height: 62px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-list {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  position: relative;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--navy);
  padding: 6px 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transition: width 0.28s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  padding: 0;
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 500px at 88% -10%, rgba(79, 185, 165, 0.10), transparent 60%),
    linear-gradient(180deg, #fbfdfd 0%, var(--bg-alt) 100%);
  padding: clamp(44px, 7vw, 92px) 0 clamp(56px, 8vw, 100px);
  overflow: hidden;
}

/* Clinic exterior sits behind the hero as a soft watermark. It is kept
   deliberately faint and faded out toward the copy so the tagline stays
   the loudest thing on the page. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/clinic-banner.jpg") center 38% / cover no-repeat;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
}

/* Wash the left side back toward the page colour so body copy keeps contrast. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--bg-alt) 18%, rgba(247, 249, 250, 0.55) 46%, transparent 78%);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(30px, 5vw, 64px);
}
.hero-title {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  font-weight: 600;
  margin: 6px 0 20px;
}
.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--text-muted);
  max-width: 30ch;
  margin: 0 0 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-media { position: relative; }
.hero-media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1 / 1;
  background: var(--navy);
}
.hero-media-frame img { width: 100%; height: 100%; object-fit: cover; }

.hero-badge {
  position: absolute;
  left: -22px;
  bottom: 30px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-badge-num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
}
.hero-badge-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}

/* ---------- Stats Strip ---------- */
.stats {
  background: var(--navy);
  color: #fff;
}
/* The first column holds a short number, the other two hold sentences.
   Giving them equal 1fr columns made the painted text wildly different
   widths, which read as uneven gaps, so the columns are weighted and each
   block is capped to a similar measure. */
.stats-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-block: clamp(40px, 5vw, 60px);
  align-items: stretch;
  text-align: center;
}
/* Each stat is its own equal panel rather than centred text against a
   divider line. Text lengths differ, and centring them against a hard rule
   made the gaps look unequal even when the columns were mathematically
   identical. Equal panels make the spacing unambiguous. */
.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 148px;
  padding: 26px 22px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.stat:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-3px);
}
.stat > * {
  max-width: 22ch;
  margin-inline: auto;
}

/* The one real number on the page: it should dominate the strip. */
.stat-num {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 6.4vw, 4.4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
}
.stat-num .plus { color: var(--teal); }

.stat-title {
  font-family: var(--font-serif);
  font-size: clamp(1.08rem, 1.9vw, 1.34rem);
  font-weight: 600;
  line-height: 1.28;
  color: #fff;
}
.stat-label {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.93rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.stat-figure .stat-label {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

/* ---------- About ---------- */
.about-inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: clamp(34px, 6vw, 72px);
}
.about-media { position: relative; }
.about-portrait {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.about-copy .lead { margin: 14px 0 14px; }
.about-copy p { color: var(--text-muted); }
.about-points {
  list-style: none;
  padding: 0;
  margin: 22px 0 30px;
  display: grid;
  gap: 12px;
}
.about-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: var(--text);
}

.tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-600);
  font-size: 0.82rem;
  font-weight: 700;
}

/* ---------- Video Showcase ---------- */
.showcase {
  position: relative;
  padding: clamp(56px, 9vw, 110px) 0;
  background:
    radial-gradient(880px 420px at 12% 0%, rgba(79, 185, 165, 0.16), transparent 62%),
    linear-gradient(158deg, var(--navy) 0%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, 0.76);
  overflow: hidden;
}

.showcase-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(36px, 6vw, 76px);
}

.showcase .eyebrow { color: var(--teal); }
.showcase .section-title { color: #fff; }
.showcase .section-intro {
  color: rgba(255, 255, 255, 0.72);
  margin-top: 16px;
}

.showcase-points {
  list-style: none;
  padding: 0;
  margin: 26px 0 34px;
  display: grid;
  gap: 13px;
}
.showcase-points li {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  font-weight: 500;
  font-size: 0.99rem;
}
.showcase-points .tick {
  background: rgba(79, 185, 165, 0.18);
  color: var(--teal);
}

/* Media column */
.showcase-media {
  position: relative;
  display: flex;
  justify-content: center;
}
/* Soft halo behind the frame */
.showcase-media::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 185, 165, 0.30), transparent 68%);
  filter: blur(46px);
  z-index: 0;
}

/* The video is 720x1280 (portrait reel). Cap the width well below native
   so it always renders sharp on high density screens. */
.video-frame {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  background: #05070d;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 34px 74px rgba(0, 0, 0, 0.48);
  cursor: pointer;
}
.clinic-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play button */
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  fill: currentColor;
  display: grid;
  place-items: center;
  padding-left: 4px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.25s var(--ease);
}
.video-play:hover { background: #fff; transform: scale(1.07); }
.video-frame.playing .video-play {
  opacity: 0;
  transform: scale(0.86);
  pointer-events: none;
}

/* Sound toggle */
.video-sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(10, 13, 24, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  fill: currentColor;
  display: grid;
  place-items: center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.video-sound:hover { background: var(--teal); transform: translateY(-2px); }
.video-sound .ico-sound { display: none; }
.video-sound[aria-pressed="true"] .ico-sound { display: block; }
.video-sound[aria-pressed="true"] .ico-muted { display: none; }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 24px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--teal-100);
  font-size: 1.6rem;
  margin-bottom: 18px;
  transition: transform 0.3s var(--ease);
}
.service-card:hover .service-icon { transform: scale(1.08) rotate(-4deg); }
.service-name { font-size: 1.16rem; margin-bottom: 8px; }
.service-desc { color: var(--text-muted); font-size: 0.96rem; margin: 0; }

/* ---------- Cases ---------- */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.case-card {
  margin: 0;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  position: relative;
}
.case-card:hover, .case-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  outline: none;
}
.case-card:focus-visible { box-shadow: 0 0 0 3px var(--teal), var(--shadow-lg); }
/* Each case image is a self contained square panel that already carries its
   own title, so the card is pure image with no repeated caption beneath. */
.case-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.case-card:hover img { transform: scale(1.03); }

/* ---------- Why ---------- */
.why-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 26px;
}
.why-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-weight: 500;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.why-list li:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 20px;
}
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--teal-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.contact-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.contact-list a { font-weight: 600; color: var(--navy); transition: color 0.2s; }
.contact-list a:hover { color: var(--teal-600); }
.hours { font-weight: 500; color: var(--text); font-size: 0.96rem; }

.contact-socials { display: flex; gap: 12px; margin-bottom: 24px; }
.social-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  fill: #fff;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.social-link:hover { background: var(--teal); transform: translateY(-3px); }

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  line-height: 0;
}
.map-wrap iframe { width: 100%; height: 320px; display: block; }

.contact-form-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-sm);
}
.form-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.form-lead { margin: 0 0 22px; color: var(--text-muted); font-size: 0.96rem; }
.field { margin-bottom: 18px; }
.field label,
.field-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}
.req { color: var(--teal-600); }
.optional { color: var(--text-muted); font-weight: 400; }

/* Date + time side by side */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field-hint {
  margin: -6px 0 16px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-muted);
  min-height: 1em;
}
.field-hint.warn { color: #c0392b; }

/* Appointment vs consultation toggle */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--bg-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px;
}
.segment { position: relative; margin: 0; }
.segment input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.segment span {
  display: block;
  text-align: center;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.segment input:checked + span {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 4px 12px rgba(79, 185, 165, 0.3);
}
.segment input:focus-visible + span {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.form-alt {
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}
.form-alt a {
  color: var(--teal-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-alt a:hover { color: var(--navy); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(79, 185, 165, 0.14);
}
.field textarea { resize: vertical; }
.form-hint-send {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.form-note {
  margin: 14px 0 0;
  font-size: 0.92rem;
  font-weight: 500;
  min-height: 1.2em;
}
.form-note.ok { color: var(--teal-600); }
.form-note.err { color: #c0392b; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding-top: clamp(48px, 6vw, 72px);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
}
.footer-logo {
  height: 72px;
  width: auto;
  margin-bottom: 16px;
  /* Logo is dark; invert to sit on navy footer */
  filter: brightness(0) invert(1);
}
.footer-tag {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  color: #fff;
  margin: 0 0 8px;
}
.footer-small { font-size: 0.92rem; margin: 0; }
.footer-heading {
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.footer-links, .footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer-links a, .footer-contact a { transition: color 0.2s; font-size: 0.95rem; }
.footer-links a:hover, .footer-contact a:hover { color: var(--teal); }
.footer-contact li { font-size: 0.95rem; }
.footer-socials { display: flex; gap: 12px; margin-top: 18px; }
.footer-socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  fill: #fff;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.footer-socials a:hover { background: var(--teal); transform: translateY(-3px); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
}
.footer-bottom p { margin: 0; font-size: 0.88rem; text-align: center; }

/* ---------- Floating action buttons ---------- */
.fab-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.fab {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  fill: #fff;
  color: #fff;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.fab:hover { transform: scale(1.08); }

.fab-whatsapp {
  background: #25D366;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  animation: wa-pulse 2.6s var(--ease) infinite;
}
.fab-call {
  background: var(--teal);
  box-shadow: 0 10px 26px rgba(79, 185, 165, 0.45);
}
.fab-call:hover { background: var(--teal-600); }

/* Back to top only appears once the visitor has scrolled */
.fab-top {
  width: 46px;
  height: 46px;
  background: rgba(46, 52, 80, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.fab-top.show { opacity: 1; visibility: visible; transform: none; }
.fab-top:hover { background: var(--navy); }

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45); }
  50% { box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45), 0 0 0 12px rgba(37, 211, 102, 0.10); }
}

/* ---------- Open / closed status badge ---------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-badge.open { background: var(--teal-100); color: var(--teal-600); }
.status-badge.closed { background: #fdecea; color: #c0392b; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 23, 38, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: min(92vw, 620px);
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  transform: scale(0.96);
  transition: transform 0.3s var(--ease);
}
.lightbox.open .lightbox-img { transform: scale(1); }
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
  backdrop-filter: blur(4px);
}
.lightbox-close {
  top: 20px; right: 24px;
  width: 46px; height: 46px;
  font-size: 1.8rem;
  line-height: 1;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: 2rem;
  line-height: 1;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--teal); }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.08); }

/* ---------- Scroll Reveal ---------- */
/* Gated on .js so content is always visible if JavaScript is unavailable. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  :root { --header-h: 76px; }
  .brand-logo { height: 52px; }
  .footer-logo { height: 64px; }

  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 10px 22px 24px;
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  .main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-list { flex-direction: column; gap: 0; width: 100%; }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-link { display: block; padding: 15px 4px; font-size: 1.05rem; }
  .nav-link::after { display: none; }
  .nav-cta { margin-top: 16px; width: 100%; }

  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { order: 2; }
  .hero-media { order: 1; max-width: 440px; margin-inline: auto; }
  .hero-sub { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-badge { left: 12px; bottom: 14px; padding: 12px 16px; }

  .about-inner { grid-template-columns: 1fr; }
  .about-media { max-width: 460px; margin: 0 auto 24px; }

  .showcase-inner { grid-template-columns: 1fr; }
  .showcase-copy { text-align: center; }
  .showcase-points { max-width: 420px; margin-inline: auto; text-align: left; }
  .showcase-points li { justify-content: flex-start; }

  .why-inner { grid-template-columns: 1fr; }
  .why-copy { text-align: center; }

  .contact-grid { grid-template-columns: 1fr; }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .stats-inner { grid-template-columns: 1fr; gap: 12px; }
  .stat { min-height: 0; padding: 22px 18px; }
  .services-grid { grid-template-columns: 1fr; }
  .cases-grid { grid-template-columns: 1fr; }
  .why-list { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .fab-whatsapp { animation: none; }
  .btn, .service-card, .case-card, .case-card img { transition: none; }
  .video-play, .video-sound, .fab { transition: none; }
}