/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ── CSS Variables ── */
:root {
  --radius: 0.875rem;
  --background: #fafafa;
  --foreground: #1e1a2e;
  --card: #ffffff;
  --border: #e5e3ed;
  --muted: #f4f3f8;
  --muted-fg: #6b6882;
  --brand: #c8232c;
  --midnight: #2e2a4a;
  --gold: #c49a3c;
  --emerald: #3d9970;
  --surface: #f7f6fb;
  --shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.03), 0 10px 15px -3px rgba(0,0,0,0.08);
  --shadow-brand: 0 14px 40px rgba(200,35,44,0.25);
  --font-display: 'Sora', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }
html { scroll-behavior: smooth; }
body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; line-height: 1.6; }
h1,h2,h3,h4 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.2; }
@media(min-width:768px){ h1,h2,h3,h4 { line-height: 1.1; } }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Layout ── */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }
@media(min-width:640px){ .container { padding: 0 1.5rem; } }
@media(min-width:1024px){ .container { padding: 0 2rem; } }
.flex { display: flex; }
.grid { display: grid; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-10 { gap: 2.5rem; }

/* ── Animations ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes blob {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(40px,-30px) scale(1.1); }
  66%      { transform: translate(-30px,30px) scale(0.95); }
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-blob  { animation: blob 14s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-marquee { animation: marquee 30s linear infinite; }

/* ── Utility ── */
.gradient-brand { background: linear-gradient(135deg, var(--brand), var(--midnight)); }
.gradient-text  { background: linear-gradient(135deg, var(--brand), var(--midnight)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hover-lift { transition: transform 0.3s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.text-brand  { color: var(--brand); }
.text-midnight { color: var(--midnight); }
.text-gold   { color: var(--gold); }
.text-emerald{ color: var(--emerald); }
.text-muted  { color: var(--muted-fg); }
.bg-surface  { background: var(--surface); }
.bg-card     { background: var(--card); }
.shadow-brand{ box-shadow: var(--shadow-brand); }
.shadow-soft { box-shadow: var(--shadow-soft); }

/* ── Navbar ── */
.navbar {
  position: sticky; top: 0; z-index: 50;
  width: 100%; border-bottom: 1px solid rgba(229,227,237,0.6);
  background: rgba(250,250,250,0.85); backdrop-filter: blur(20px);
}
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 4rem;
}
.navbar-logo { display: flex; align-items: center; gap: 0.75rem; }
.navbar-logo-img-wrap {
  height: 2.5rem; width: 2.5rem; overflow: hidden; border-radius: 0.75rem;
  border: 1px solid var(--border); background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: transform 0.2s;
}
.navbar-logo:hover .navbar-logo-img-wrap { transform: scale(1.05); }
.navbar-logo img { height: 100%; width: 100%; object-fit: contain; padding: 2px; }
.navbar-logo-name { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--foreground); white-space: nowrap; }
.navbar-nav { display: none; align-items: center; gap: 0.25rem; }
@media(min-width:768px){ .navbar-nav { display: flex; } }
.nav-link {
  position: relative; border-radius: 999px; padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 700; color: var(--muted-fg);
  transition: all 0.2s;
}
.nav-link:hover { background: rgba(244,243,248,0.8); color: var(--foreground); }
.nav-link.active { background: rgba(200,35,44,.1); color: var(--brand); }
.navbar-actions { display: flex; align-items: center; gap: 0.5rem; }
.btn-signup {
  display: none; align-items: center; border-radius: 0.5rem;
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 700; color: white;
  background: linear-gradient(135deg, var(--brand), var(--midnight));
  box-shadow: var(--shadow-brand);
  transition: transform 0.2s;
}
.btn-signup:hover { transform: translateY(-2px); }
@media(min-width:768px){ .btn-signup { display: flex; } }
.hamburger { display: flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 0.5rem; color: var(--foreground); min-height: 48px; min-width: 48px; }
.hamburger:hover, .hamburger:active { background: var(--muted); }
@media(min-width:768px){ .hamburger { display: none; } }
/* ── Mobile Drawer ── */
/* Dark scrim behind drawer */
.mobile-overlay {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-overlay.active { opacity: 1; pointer-events: auto; }

/* Slide-in drawer panel (from right) */
.mobile-menu {
  position: fixed; top: 0; left: 0; bottom: 0; right: auto;
  width: 85%; max-width: 340px;
  display: flex; flex-direction: column;
  background: #ffffff;
  z-index: 999;
  padding: 0;
  box-shadow: 8px 0 30px rgba(0,0,0,0.12);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { transform: translateX(0); }

/* Drawer header with close button */
.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.25rem;
}
.mobile-menu-logo {
  display: flex; align-items: center; gap: 0.5rem;
}
.mobile-menu-logo img {
  width: 2.75rem; height: 2.75rem; object-fit: contain;
}
.mobile-menu-logo-text {
  display: flex; flex-direction: column;
}
.mobile-menu-logo-text .name {
  font-family: var(--font-display);
  font-size: 0.85rem; font-weight: 800; color: #111;
  line-height: 1.2; text-transform: uppercase;
}
.mobile-close {
  display: flex; align-items: center; justify-content: center;
  height: 2.25rem; width: 2.25rem; border-radius: 50%;
  background: transparent; color: #111;
  cursor: pointer; border: 1px solid #ddd;
  transition: background 0.2s, transform 0.15s;
}
.mobile-close:active { transform: scale(0.9); background: rgba(0,0,0,0.05); }

/* Navigation links */
.mobile-nav {
  display: flex; flex-direction: column;
  padding: 0 1.25rem;
  flex: 1;
}
.mobile-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 0;
  font-size: 1.1rem; font-weight: 700; color: #222;
  transition: color 0.15s;
  border-bottom: 1px solid #eaeaea; text-decoration: none;
}
.mobile-nav-link:last-child {
  border-bottom: none;
}
.mobile-nav-link:active { opacity: 0.7; }
.mobile-nav-link.active {
  color: var(--brand); font-weight: 800;
}

/* Nav link icons - removed for new design */
/* Nav link icons - removed for new design */

/* Drawer footer with Sign Up */
.mobile-menu-footer {
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: auto;
}
.mobile-signup {
  display: flex; justify-content: center; align-items: center;
  width: 100%;
  border-radius: 0.75rem; padding: 0.875rem; font-size: 1rem; font-weight: 700; color: white;
  background: linear-gradient(135deg, var(--brand), var(--midnight)); min-height: 52px;
  box-shadow: var(--shadow-brand);
  transition: transform 0.15s;
}
.mobile-signup:active { transform: scale(0.97); }

/* ── Hero Blobs ── */
.blob-wrap { position: relative; overflow: hidden; }
.blob {
  pointer-events: none; position: absolute; height: 24rem; width: 24rem;
  border-radius: 9999px; filter: blur(80px);
}
.blob-brand  { background: rgba(200,35,44,.18); }
.blob-midnight { background: rgba(46,42,74,.2); }

/* ── Sections ── */
.section-py     { padding-top: 3rem; padding-bottom: 3rem; }
@media(min-width:640px){ .section-py { padding-top: 4rem; padding-bottom: 4rem; } }
@media(min-width:768px){ .section-py { padding-top: 5rem; padding-bottom: 5rem; } }
.section-pt-hero { padding-top: 4rem; padding-bottom: 2.5rem; }
/* Offset anchor links for sticky navbar */
[id] { scroll-margin-top: 5rem; }

/* ── Eyebrow + Heading ── */
.eyebrow {
  display: inline-block; border-radius: 999px;
  background: rgba(200,35,44,.1); padding: 0.25rem 0.875rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand);
}
.eyebrow-border { border: 1px solid rgba(200,35,44,.3); }
.section-title {
  margin-top: 1rem;
  font-size: clamp(1.625rem, 5vw, 3.5rem);
  font-weight: 800; color: var(--foreground); max-width: 42rem;
}
.section-subtitle { margin-top: 0.875rem; font-size: 1rem; color: var(--muted-fg); max-width: 42rem; line-height: 1.75; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ── Cards ── */
.card { background: var(--card); border: 1px solid rgba(0,0,0,0.05); border-radius: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.card-p { padding: 1.5rem; }
.card-p6 { padding: 1.5rem; }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.75rem; padding: 0.75rem 1.25rem; min-height: 48px; width: 100%;
  font-size: 0.875rem; font-weight: 700; color: white;
  background: linear-gradient(135deg, var(--brand), var(--midnight));
  box-shadow: var(--shadow-brand); transition: transform 0.2s;
}
@media(min-width:640px){ .btn-primary { width: auto; } }
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: scale(0.96); }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.75rem; padding: 0.75rem 1.25rem; min-height: 48px; width: 100%;
  font-size: 0.875rem; font-weight: 700; color: var(--foreground);
  border: 1px solid var(--border); background: var(--card); transition: transform 0.2s, background 0.2s;
}
@media(min-width:640px){ .btn-secondary { width: auto; } }
.btn-secondary:hover { background: var(--muted); }
.btn-secondary:active { transform: scale(0.96); }
.btn-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.75rem; padding: 0.875rem 1.5rem; min-height: 48px; width: 100%;
  font-size: 0.875rem; font-weight: 700; color: var(--brand);
  background: white; box-shadow: var(--shadow-soft);
  transition: transform 0.2s;
}
@media(min-width:640px){ .btn-white { width: auto; } }
.btn-white:hover { transform: scale(1.02); }
.btn-white:active { transform: scale(0.96); }
.btn-ghost-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.75rem; padding: 0.875rem 1.5rem; min-height: 48px; width: 100%;
  font-size: 0.875rem; font-weight: 700; color: white;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px); transition: background 0.2s, transform 0.2s;
}
@media(min-width:640px){ .btn-ghost-white { width: auto; } }
.btn-ghost-white:hover { background: rgba(255,255,255,.2); }
.btn-ghost-white:active { transform: scale(0.96); }

/* ── Icon Boxes ── */
.icon-box { display: grid; place-items: center; border-radius: 0.75rem; flex-shrink: 0; }
.icon-brand    { background: rgba(200,35,44,.1); color: var(--brand); }
.icon-midnight { background: rgba(46,42,74,.1); color: var(--midnight); }
.icon-emerald  { background: rgba(61,153,112,.15); color: var(--emerald); }
.icon-gold     { background: rgba(196,154,60,.2); color: var(--gold); }
.icon-gradient { background: linear-gradient(135deg, var(--brand), var(--midnight)); color: white; box-shadow: var(--shadow-brand); }
.icon-dark     { background: rgba(46,42,74,.45); color: white; }
.icon-white20  { background: rgba(255,255,255,.2); color: white; }
.icon-sm  { height: 2.75rem; width: 2.75rem; }
.icon-md  { height: 3rem; width: 3rem; }
.icon-lg  { height: 3.5rem; width: 3.5rem; }
.icon-xl  { height: 4rem; width: 4rem; }

/* ── Ticker ── */
.ticker { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); padding: 1rem 0; overflow: hidden; }
.ticker-inner { display: flex; width: max-content; gap: 2.5rem; white-space: nowrap; animation: marquee 30s linear infinite; }
.ticker-item { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-fg); }
.ticker-dot  { margin-right: 2.5rem; color: var(--brand); }

/* ── Stats grid ── */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media(min-width:640px){ .stats-grid { grid-template-columns: repeat(4,1fr); } }
.stat-val { font-family: var(--font-display); font-size: clamp(1.5rem,4vw,2rem); font-weight: 800; color: var(--foreground); }
.stat-lbl { margin-top: 0.25rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-fg); }

/* ── Hero 2-col ── */
.hero-grid { display: grid; gap: 2rem; padding: 3rem 0 4rem; }
@media(min-width:640px){ .hero-grid { padding: 4rem 0 5rem; gap: 2.5rem; } }
@media(min-width:1024px){ .hero-grid { grid-template-columns: 1fr 1fr; gap: 4rem; padding: 6rem 2rem; align-items: stretch; }
  .hero-img-wrap { height: 100%; min-height: 100%; } }
.hero-img-wrap { position: relative; min-height: 22rem; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 24px 60px rgba(200,35,44,.18); border: 1px solid var(--border); }
@media(min-width:640px){ .hero-img-wrap { min-height: 26rem; } }
.hero-img-wrap img { height: 100%; width: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(46,42,74,.45), transparent, transparent); }
.hero-float-card {
  position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);
  display: none; align-items: center; gap: 0.75rem;
  border-radius: 1rem; background: var(--card); padding: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.06);
  animation: float 6s ease-in-out infinite; animation-delay: 1.5s;
}
@media(min-width:640px){ .hero-float-card { display: flex; } }

/* ── Service Cards (home) ── */
.services-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media(min-width:480px){ .services-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px){ .services-grid { grid-template-columns: repeat(3,1fr); gap: 1.5rem; } }
.svc-card { display: block; height: 100%; overflow: hidden; border-radius: 1.25rem; border: 1px solid rgba(0,0,0,0.05); background: var(--card); transition: transform 0.3s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.svc-card:hover, .svc-card:active { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
.svc-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.svc-card-img img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.7s; }
.svc-card:hover .svc-card-img img { transform: scale(1.08); }
.svc-card-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(46,42,74,.7), rgba(46,42,74,.1), transparent); }
.svc-card-icon { position: absolute; top: 0.875rem; left: 0.875rem; }
.svc-card-body { padding: 1.25rem; }
@media(min-width:640px){ .svc-card-body { padding: 1.5rem; } }
.svc-card-tag  { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand); }
.svc-card-title { margin-top: 0.375rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; color: var(--foreground); }
.svc-card-desc { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.65; color: var(--muted-fg); }
.svc-card-link { margin-top: 1rem; display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 700; color: var(--brand); }
.svc-card-link svg { transition: transform 0.2s; }
.svc-card:hover .svc-card-link svg { transform: translateX(4px); }

/* ── Why cards ── */
.why-grid { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media(min-width:480px){ .why-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px){ .why-grid { grid-template-columns: repeat(4,1fr); gap: 1.25rem; margin-top: 3rem; } }
.why-card {
  height: 100%; border-radius: 1.25rem;
  border: 1px solid rgba(0,0,0,0.05); background: var(--card);
  padding: 1.25rem;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
@media(min-width:640px){ .why-card { padding: 1.5rem; } }
.why-card:hover, .why-card:active { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }

/* ── CTA Banner ── */
.cta-banner {
  position: relative; overflow: hidden; border-radius: 1.5rem;
  padding: 3.5rem 1.5rem; text-align: center; color: white;
  background: linear-gradient(135deg, var(--brand), var(--midnight));
  box-shadow: var(--shadow-brand);
}
@media(min-width:640px){ .cta-banner { padding: 5rem 3rem; } }
.cta-glow-1 { pointer-events:none; position:absolute; top:-5rem; left:-2.5rem; height:15rem; width:15rem; border-radius:9999px; background:rgba(255,255,255,.1); filter:blur(60px); }
.cta-glow-2 { pointer-events:none; position:absolute; bottom:-5rem; right:-2.5rem; height:18rem; width:18rem; border-radius:9999px; background:rgba(196,154,60,.3); filter:blur(70px); }
.cta-title { position:relative; font-size:clamp(1.375rem,4vw,3rem); font-weight:800; color:white; max-width:42rem; margin:0 auto; }
.cta-sub   { position:relative; margin-top:0.875rem; color:rgba(255,255,255,.85); max-width:36rem; margin-left:auto; margin-right:auto; font-size:0.9375rem; }
.cta-actions {
  position: relative; margin-top: 2rem;
  display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem;
}
@media(min-width:480px){ .cta-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } }

/* ── Footer ── */
footer { border-top: 1px solid var(--border); background: var(--midnight); color: rgba(255,255,255,.85); }
.footer-grid { display: grid; gap: 2rem; padding: 3rem 0; }
@media(min-width:640px){ .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media(min-width:1024px){ .footer-grid { grid-template-columns: repeat(4,1fr); gap: 2.5rem; } }
.footer-logo-name { font-family:var(--font-display); font-size:1rem; font-weight:800; color:white; white-space:nowrap; }
.footer-desc { margin-top:1rem; font-size:0.875rem; line-height:1.7; color:rgba(255,255,255,.6); }
.footer-socials { display:flex; gap:0.75rem; margin-top:1.25rem; }
.footer-social { display:grid; place-items:center; height:2.25rem; width:2.25rem; border-radius:9999px; background:rgba(255,255,255,.1); transition:background 0.2s; cursor:default; }
.footer-social:hover { background: var(--brand); }
.footer-h { font-size:0.875rem; font-weight:700; color:white; margin-bottom:1rem; }
.footer-links li+li { margin-top:0.625rem; }
.footer-links a { font-size:0.875rem; color:rgba(255,255,255,.6); transition:color 0.2s; }
.footer-links a:hover { color: var(--gold); }
.footer-contact li { display:flex; gap:0.75rem; font-size:0.875rem; color:rgba(255,255,255,.7); }
.footer-contact li+li { margin-top:0.75rem; }
.footer-contact-icon { flex-shrink:0; margin-top:2px; color:var(--gold); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom-inner { display:flex; flex-direction:column; gap:0.5rem; padding:1.25rem 0; font-size:0.75rem; color:rgba(255,255,255,.5); }
@media(min-width:640px){ .footer-bottom-inner { flex-direction:row; align-items:center; justify-content:space-between; } }

/* ── About page ── */
.about-grid { display:grid; gap:2rem; }
@media(min-width:768px){ .about-grid { gap:2.5rem; } }
@media(min-width:1024px){ .about-grid { grid-template-columns:1fr 1fr; align-items:center; gap:4rem; } }
.about-img { overflow:hidden; border-radius:1.5rem; border:1px solid rgba(0,0,0,0.06); box-shadow:0 8px 32px rgba(0,0,0,0.08); }
.about-img img { width:100%; height:100%; object-fit:cover; display:block; }
.check-list { margin-top:1.5rem; display:flex; flex-direction:column; gap:0.75rem; }
.check-item { display:flex; align-items:flex-start; gap:0.75rem; }
.check-icon { flex-shrink:0; color:var(--emerald); margin-top:2px; }

/* ── Services page ── */
.pill-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem; }
.pill { display:inline-flex; align-items:center; gap:0.375rem; border-radius:999px; border:1px solid var(--border); background:var(--card); padding:0.5rem 1.25rem; font-size:0.75rem; font-weight:700; color:var(--foreground); box-shadow:0 1px 4px rgba(0,0,0,.06); transition:all 0.2s; }
.pill:hover { background:linear-gradient(135deg, var(--brand), var(--midnight)); color:white; border-color:transparent; box-shadow:var(--shadow-brand); }
.svc-section { scroll-margin-top: 6rem; padding: 4rem 0; }
.svc-section.alt { background: var(--surface); }
.svc-detail-grid { display:grid; gap:2.5rem; }
@media(min-width:1024px){ .svc-detail-grid { grid-template-columns: 5fr 7fr; align-items:center; } }
.svc-detail-grid.reverse { }
@media(min-width:1024px){ 
  .svc-detail-grid.reverse { grid-template-columns: 7fr 5fr; }
  .svc-detail-grid.reverse .svc-img-col { order:2; } 
}
.svc-img-wrap { position:relative; overflow:hidden; border-radius:1.5rem; border:1px solid var(--border); box-shadow:var(--shadow-soft); aspect-ratio:4/3; }
.svc-img-wrap img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.svc-img-icon { position:absolute; top:1rem; left:1rem; }
.svc-items-grid { display:grid; gap:1rem; margin-top:2rem; }
@media(min-width:640px){ .svc-items-grid { grid-template-columns:repeat(2,1fr); } }
.svc-item { display:flex; gap:1rem; border-radius:1.25rem; border:1px solid var(--border); background:var(--card); padding:1rem; transition:transform 0.3s, box-shadow 0.3s; }
.svc-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.svc-item-text h4 { font-family:var(--font-display); font-size:0.875rem; font-weight:800; color:var(--foreground); display:flex; align-items:center; gap:0.5rem; }
.svc-item-text p  { margin-top:0.25rem; font-size:0.875rem; color:var(--muted-fg); line-height:1.6; }

/* ── Why Us page ── */
.reasons-grid { display:grid; gap:1.25rem; }
@media(min-width:640px){ .reasons-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .reasons-grid { grid-template-columns:repeat(3,1fr); } }
.reason-card {
  position:relative; overflow:hidden; border-radius:1.25rem;
  border:1px solid var(--border); background:var(--card);
  padding:1.5rem; transition:all 0.3s;
}
.reason-card:hover { transform:translateY(-4px); border-color:rgba(200,35,44,.3); box-shadow:var(--shadow-soft); }
.reason-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(to right, var(--brand), rgba(200,35,44,.4), transparent); transform:scaleX(0); transform-origin:left; transition:transform 0.3s; border-radius:999px; }
.reason-card:hover::after { transform:scaleX(1); }
.reason-icon { display:grid; place-items:center; height:3.5rem; width:3.5rem; border-radius:1rem; background:linear-gradient(135deg,var(--brand),var(--midnight)); color:white; box-shadow:var(--shadow-brand); transition:transform 0.3s; }
.reason-card:hover .reason-icon { transform:scale(1.1); }
.reason-title { margin-top:1.25rem; font-family:var(--font-display); font-size:1.125rem; font-weight:800; color:var(--foreground); transition:color 0.2s; }
.reason-card:hover .reason-title { color:var(--brand); }
.reason-desc  { margin-top:0.5rem; font-size:0.875rem; line-height:1.6; color:var(--muted-fg); }
.stats-banner { border-radius:1.5rem; border:1px solid var(--border); background:var(--card); padding:2rem 3rem; display:grid; gap:2rem; }
@media(min-width:1024px){ .stats-banner { grid-template-columns:repeat(3,1fr); } }
.stats-banner-val { font-family:var(--font-display); font-size:clamp(2rem,5vw,3rem); font-weight:800; background:linear-gradient(135deg,var(--brand),var(--midnight)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stats-banner-lbl { margin-top:0.5rem; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted-fg); }

/* ── Contact page ── */
.contact-layout { display:grid; gap:1.5rem; }
@media(min-width:1024px){ .contact-layout { grid-template-columns: 1fr 1.8fr; } }
.info-card {
  display:flex; align-items:flex-start; gap:1rem;
  border-radius:1.25rem; border:1px solid rgba(0,0,0,0.04);
  background:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  padding:1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
  transition:transform 0.3s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s;
}
.info-card:hover, .info-card:active { transform:translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.info-cards { display:flex; flex-direction:column; gap:1rem; }
.info-card-text h3 { font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--foreground); margin-bottom:0.375rem; }
.info-card-text p,.info-card-text div { font-size:0.875rem; color:var(--muted-fg); line-height:1.6; }

/* Map — stacks below info cards on mobile, side-by-side on desktop */
.map-col { display:flex; flex-direction:column; gap:1.25rem; }
.map-wrap {
  position:relative; border-radius:1.5rem; overflow:hidden;
  border:1px solid rgba(0,0,0,0.06); background:var(--muted);
  box-shadow:var(--shadow-soft);
  height: 20rem; /* compact on mobile */
}
@media(min-width:768px){ .map-wrap { height: 28rem; } }
@media(min-width:1024px){ .map-wrap { height:100%; min-height:30rem; } }
.map-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; }
.map-open-btn {
  position:absolute; top:0.75rem; left:0.75rem; z-index:10;
  display:flex; align-items:center; gap:0.375rem;
  border-radius:0.625rem; background:white; padding:0.5rem 0.875rem;
  font-size:0.8125rem; font-weight:700; color:var(--brand);
  box-shadow:0 2px 8px rgba(0,0,0,0.12); border:1px solid rgba(0,0,0,0.06);
  transition:background 0.2s;
}
.map-open-btn:hover { background:var(--muted); }
.map-fallback {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:1.5rem; text-align:center;
}
.map-fallback svg { color:var(--muted-fg); opacity:0.4; margin-bottom:0.75rem; }

/* Stats — now BELOW map as a separate card (not overlapping) */
.map-stats {
  border-radius:1.25rem; background:white;
  padding:1.25rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  border:1px solid rgba(0,0,0,0.04);
}
.map-stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media(min-width:640px){ .map-stats-grid { grid-template-columns:repeat(4,1fr); } }
.map-stat-item { display:flex; gap:0.625rem; align-items:flex-start; }
.map-stat-item .title { font-size:0.875rem; font-weight:700; color:var(--foreground); line-height:1.3; }
.map-stat-item .sub   { font-size:0.75rem; color:var(--muted-fg); margin-top:0.2rem; line-height:1.4; }
.contact-cta {
  position:relative; overflow:hidden; margin-top:3rem; border-radius:1.5rem;
  display:flex; flex-direction:column; gap:1.5rem; align-items:center; justify-content:space-between;
  padding:2rem; color:white;
  background:linear-gradient(135deg,var(--brand),var(--midnight));
  box-shadow:var(--shadow-brand);
  transition:transform 0.3s, box-shadow 0.3s;
}
.contact-cta:hover { transform:translateY(-4px); }
@media(min-width:640px){ .contact-cta { flex-direction:row; padding:3rem; } }
.contact-cta-glow1 { pointer-events:none; position:absolute; top:-2.5rem; left:-2.5rem; height:10rem; width:10rem; border-radius:9999px; background:rgba(255,255,255,.1); filter:blur(40px); }
.contact-cta-glow2 { pointer-events:none; position:absolute; bottom:-2.5rem; right:-2.5rem; height:10rem; width:10rem; border-radius:9999px; background:rgba(196,154,60,.2); filter:blur(40px); }
.contact-cta-left { position:relative; display:flex; align-items:center; gap:1.5rem; }
.contact-cta-icon { display:flex; align-items:center; justify-content:center; height:4rem; width:4rem; flex-shrink:0; border-radius:1rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); }
.contact-cta-title { font-family:var(--font-display); font-size:1.5rem; font-weight:800; }
.contact-cta-sub   { color:rgba(255,255,255,.85); margin-top:0.5rem; max-width:28rem; }
.contact-cta-btns  { position:relative; display:flex; gap:1rem; flex-shrink:0; width:100%; }
@media(min-width:640px){ .contact-cta-btns { width:auto; } }
.contact-cta-btns a { flex:1; justify-content:center; }
@media(min-width:640px){ .contact-cta-btns a { flex:none; } }

/* ── Value cards (about) ── */
.values-grid { display:grid; gap:1.25rem; margin-top:3rem; }
@media(min-width:640px){ .values-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .values-grid { grid-template-columns:repeat(4,1fr); } }
.value-card { height:100%; border-radius:1.25rem; border:1px solid var(--border); background:var(--card); padding:1.5rem; transition:transform 0.3s, box-shadow 0.3s; }
.value-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-soft); }

/* ── Responsive tweaks ── */
@media(max-width:640px){ .cta-banner { padding:2rem 1.25rem; } }

/* Prevent x-overflow on all viewports */
body { overflow-x: hidden; }

/* Tablet fix: services detail grid needs smaller gap */
@media(min-width:768px) and (max-width:1023px){
  .svc-detail-grid { gap: 2rem; }
  .reasons-grid { grid-template-columns: repeat(2,1fr); }
  .stats-banner { padding: 2rem; }
}

/* Very small screens (320px–375px) */
@media(max-width:375px){
  .section-title { font-size: 1.5rem; }
  .hero-grid { padding: 2.5rem 0 3.5rem; }
  .stat-val { font-size: 1.375rem; }
  .navbar-logo-name { font-size: 13px; }
}

/* SVG icons inline helper */
.icon { display:inline-block; flex-shrink:0; }