/* =========================================================
   Ecomersify — main stylesheet
   ========================================================= */

:root{
  --violet-900:#3a1178;
  --violet-700:#5b21b6;
  --violet-600:#6d28d9;
  --violet-500:#7c3aed;
  --violet-100:#f3edfc;
  --ink:#161221;
  --ink-soft:#544f63;
  --line:#ececf3;
  --white:#ffffff;

  --max-w:1280px;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-card:0 1px 2px rgba(22,18,33,.04), 0 8px 24px rgba(22,18,33,.05);
  --shadow-pop:0 12px 28px rgba(58,17,120,.16);
}

/* -------------------- Reset -------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.wrap{max-width:var(--max-w);margin:0 auto;padding:0 32px}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14.5px;
  padding:12px 20px;border-radius:10px;
  border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;transition:transform .15s ease}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--violet-600);color:#fff;box-shadow:var(--shadow-pop)}
.btn-primary:hover{background:var(--violet-700);transform:translateY(-1px)}
.btn-outline{background:#fff;color:var(--violet-600);border-color:var(--violet-600)}
.btn-outline:hover{background:var(--violet-100);transform:translateY(-1px)}
.btn-outline-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-outline-dark:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* -------------------- Header -------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.site-branding{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.01em}
.site-branding .logo-mark{
  width:32px;height:32px;border-radius:8px;
  background:var(--violet-600);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.site-branding .logo-mark svg{width:18px;height:18px;color:#fff}
.site-branding a{display:flex;align-items:center;gap:9px;color:var(--ink)}

.primary-nav ul{display:flex;gap:34px}
.primary-nav a{font-size:14.5px;font-weight:500;color:var(--ink);position:relative;padding:4px 0}
.primary-nav a:hover{color:var(--violet-600)}
.primary-nav--mobile{display:none}

.header-cta{display:flex;align-items:center;gap:14px}

.menu-toggle{
  display:none;background:none;border:none;padding:8px;
  flex-direction:column;gap:5px;
}
.menu-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px}

/* -------------------- Hero -------------------- */
.hero{padding:64px 0 56px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero-eyebrow{color:var(--violet-600)}
.hero h1{
  font-size:44px;line-height:1.14;font-weight:800;letter-spacing:-.02em;
  margin-bottom:18px;
}
.hero h1 .accent{color:var(--violet-600)}
.hero-sub{font-size:16px;color:var(--ink-soft);max-width:480px;margin-bottom:28px}
.hero-actions{display:flex;gap:14px;margin-bottom:40px}
.hero-stats{display:flex;gap:40px}
.hero-stat{display:flex;align-items:flex-start;gap:10px}
.hero-stat .icon{
  width:34px;height:34px;border-radius:8px;background:var(--violet-100);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.hero-stat .icon svg{width:17px;height:17px;color:var(--violet-600)}
.hero-stat strong{display:block;font-size:20px;font-weight:800;line-height:1.2}
.hero-stat span{font-size:13px;color:var(--ink-soft)}

/* Hero visual */
.hero-visual{position:relative;min-height:340px}
.floating-cards-row{display:contents}
.hero-visual .backdrop-shape{
  position:absolute;inset:0 -6% 8% 6%;
  background:linear-gradient(160deg,var(--violet-100),#fff 60%);
  border-radius:32px;
  z-index:0;
}
.floating-card{
  position:absolute;background:#fff;border-radius:12px;
  box-shadow:var(--shadow-card);
  padding:12px 14px;display:flex;align-items:center;gap:10px;
  z-index:3;font-size:12.5px;font-weight:600;
}
.floating-card .fc-icon{
  width:32px;height:32px;border-radius:8px;background:var(--violet-100);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.floating-card .fc-icon svg{width:16px;height:16px;color:var(--violet-600)}
.fc-data{top:12%;left:2%}
.fc-ops{top:34%;left:0}
.fc-brand{top:12%;right:2%}
.fc-scale{top:34%;right:0}

.dashboard-card{
  position:relative;z-index:2;margin:0 auto;max-width:420px;
  background:#fff;border-radius:18px;padding:22px;
  box-shadow:var(--shadow-pop);border:1px solid var(--line);
}
.dashboard-card .dc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dashboard-card .dc-head span{font-size:12px;color:var(--ink-soft);font-weight:600}
.dashboard-card .dc-select{
  font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;color:var(--ink-soft);
}
.dc-figure{font-size:30px;font-weight:800;margin-bottom:2px}
.dc-delta{color:#16a34a;font-weight:700;font-size:13px}
.dc-chart{margin-top:14px}
.dc-months{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--ink-soft)}

.truck-graphic{position:relative;z-index:1;margin-top:-30px}
.truck-graphic svg{width:100%;height:auto}

/* -------------------- Section shell -------------------- */
.section{padding:64px 0}
.section-head{text-align:center;margin-bottom:36px}
.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  color:var(--violet-600);text-transform:uppercase;margin-bottom:8px;
}
.section-head .eyebrow::after{
  content:"";display:block;width:26px;height:3px;border-radius:3px;
  background:var(--violet-600);margin:8px auto 0;
}
.section-title{font-size:26px;font-weight:800;letter-spacing:-.01em}

/* -------------------- What We Do -------------------- */
.pillars{
  display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px;
}
.pillar-card{
  flex:1 1 calc(25% - 15px);min-width:220px;
  border:1px solid var(--line);border-radius:16px;padding:26px 22px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.pillar-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)}
.pillar-icon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--violet-500),var(--violet-700));
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.pillar-icon svg{width:20px;height:20px;color:#fff}
.pillar-card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.pillar-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}

.founders-row{
  display:flex;flex-wrap:wrap;gap:32px;
  border-top:1px solid var(--line);padding-top:36px;
}
.founders-copy{flex:0 1 340px;min-width:280px}
.founders-copy .eyebrow{margin-bottom:10px}
.founders-copy h3{font-size:24px;font-weight:800;line-height:1.25;margin-bottom:14px}
.founders-copy p{font-size:14px;color:var(--ink-soft);margin-bottom:20px;max-width:420px}

.capability-grid{display:flex;flex-wrap:wrap;gap:22px 32px;flex:1 1 520px}
.capability{display:flex;gap:12px;flex:1 1 calc(50% - 16px);min-width:220px}
.capability .cap-icon{
  width:34px;height:34px;border-radius:9px;background:var(--violet-100);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.capability .cap-icon svg{width:16px;height:16px;color:var(--violet-600)}
.capability h4{font-size:14px;font-weight:700;margin-bottom:3px}
.capability p{font-size:12.5px;color:var(--ink-soft);line-height:1.5}

/* -------------------- Investment focus -------------------- */
.focus-section{padding:40px 0;border-top:1px solid var(--line)}
.focus-row{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.focus-label{flex:none;min-width:150px}
.focus-label .eyebrow{margin-bottom:0}
.focus-chips{display:flex;gap:14px;flex-wrap:wrap;flex:1}
.chip{
  display:flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:11px;
  padding:11px 16px;font-size:13.5px;font-weight:600;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.chip:hover{border-color:var(--violet-500);box-shadow:var(--shadow-card)}
.chip svg{width:16px;height:16px;color:var(--violet-600)}

/* -------------------- Why India -------------------- */
.why-section{padding:40px 0;border-top:1px solid var(--line)}
.why-grid{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;margin-top:18px}
.why-stat{display:flex;flex-direction:column;gap:10px;flex:1 1 calc(20% - 21px);min-width:150px}
.why-stat .icon{
  width:30px;height:30px;border-radius:8px;background:var(--violet-100);
  display:flex;align-items:center;justify-content:center;
}
.why-stat .icon svg{width:15px;height:15px;color:var(--violet-600)}
.why-stat strong{font-size:19px;font-weight:800}
.why-stat span{font-size:12.5px;color:var(--ink-soft)}
.why-stat p{font-size:12px;color:var(--ink-soft);line-height:1.55;margin-top:2px}
.why-map svg,.why-map img{width:100%;max-width:120px;max-height:150px;height:auto;color:var(--violet-500);display:inline-block;object-fit:contain}

/* -------------------- CTA band -------------------- */
.cta-band{
  background:linear-gradient(120deg,var(--violet-900) 0%, #1c0f3d 55%, #120a29 100%);
  color:#fff;padding:46px 0;position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;right:-8%;top:-40%;width:520px;height:520px;
  background:radial-gradient(circle at center, rgba(124,58,237,.35), transparent 70%);
  pointer-events:none;
}
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;z-index:1}
.cta-heading{font-size:26px;font-weight:800;line-height:1.25}
.cta-heading .accent{color:#b58bff}
.cta-copy{font-size:13.5px;color:#c9c2de;max-width:340px}
.cta-actions{display:flex;gap:12px;flex:none}

/* -------------------- Footer -------------------- */
.site-footer{background:#0e0a1e;color:#a99fc2;padding:56px 0 0}
.footer-grid{
  display:flex;flex-wrap:wrap;gap:28px;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand{flex:1 1 260px;min-width:220px}
.footer-col{flex:1 1 140px;min-width:130px}
.footer-contact{flex:1 1 260px}
.footer-brand .site-branding{color:#fff;margin-bottom:14px}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{
  width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.footer-social a:hover{background:var(--violet-600)}
.footer-social svg{width:15px;height:15px;color:#fff}
.footer-col h5{color:#fff;font-size:13px;font-weight:700;margin-bottom:14px}
.footer-col ul li{margin-bottom:10px}
.footer-col a{font-size:13px;color:#a99fc2;transition:color .2s ease}
.footer-col a:hover{color:#fff}
.footer-contact p{font-size:12.5px;color:#8a7fa8;line-height:1.6;margin-bottom:10px}
.footer-contact strong{display:block;color:#fff;font-size:13px;margin-bottom:8px}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 0;font-size:12px;color:#71678c;flex-wrap:wrap;gap:10px;
}

/* -------------------- Pitch modal / form -------------------- */
.pitch-modal-overlay{
  position:fixed;inset:0;background:rgba(15,10,30,.55);
  display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;
}
.pitch-modal-overlay.is-open{display:flex}
.pitch-modal{
  background:#fff;border-radius:18px;max-width:460px;width:100%;
  padding:32px;position:relative;box-shadow:var(--shadow-pop);
  max-height:90vh;overflow-y:auto;
}
.pitch-modal h3{font-size:20px;font-weight:800;margin-bottom:6px}
.pitch-modal p.modal-sub{font-size:13.5px;color:var(--ink-soft);margin-bottom:20px}
.pitch-modal .modal-close{
  position:absolute;top:18px;right:18px;background:none;border:none;
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
}
.pitch-modal .modal-close:hover{background:var(--violet-100)}
.pitch-modal .modal-close svg{width:16px;height:16px}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.form-field input,.form-field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:9px;
  padding:11px 13px;font-size:14px;font-family:inherit;color:var(--ink);
  transition:border-color .2s ease;
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--violet-500)}
.form-field textarea{resize:vertical;min-height:88px}
.form-msg{font-size:13px;margin-top:10px;padding:10px 12px;border-radius:8px;display:none}
.form-msg.success{display:block;background:#ecfdf3;color:#15803d}
.form-msg.error{display:block;background:#fef2f2;color:#b91c1c}
.form-submit{width:100%;justify-content:center;margin-top:4px}

/* -------------------- Focus visibility -------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--violet-500);outline-offset:2px;
}

/* -------------------- Contact / Pitch Your Brand page -------------------- */
.contact-page{padding:56px 0 0}
.contact-grid{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.contact-info{flex:1 1 460px;min-width:300px}
.contact-info .eyebrow{margin-bottom:10px}
.contact-info h1{font-size:34px;font-weight:800;letter-spacing:-.01em;line-height:1.18;margin-bottom:14px}
.contact-info .contact-sub{font-size:15px;color:var(--ink-soft);max-width:420px;margin-bottom:32px}

.contact-illustration{margin:0 0 32px}
.contact-illustration svg{width:220px;height:auto}

.contact-points{border-top:1px solid var(--line)}
.contact-point{
  display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);
}
.contact-point .cp-icon{
  width:48px;height:48px;border-radius:12px;background:var(--violet-100);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.contact-point .cp-icon svg{width:22px;height:22px;color:var(--violet-600)}
.contact-point h3{font-size:15px;font-weight:700;margin-bottom:5px}
.contact-point p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.contact-point.cp-highlight{
  background:var(--violet-100);border:none;border-radius:14px;
  padding:20px 22px;margin-top:6px;
}
.contact-point.cp-highlight .cp-icon{background:#fff}

.contact-form-card{
  flex:1 1 460px;min-width:300px;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:32px;box-shadow:var(--shadow-card);
}
.contact-form-card h2{font-size:18px;font-weight:800;margin-bottom:22px}

.form-row{display:flex;gap:18px;flex-wrap:wrap}
.form-row .form-field{flex:1 1 200px}

.phone-field{display:flex;gap:8px}
.phone-field select{
  flex:0 0 78px;border:1.5px solid var(--line);border-radius:9px;
  padding:11px 8px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff;
}
.phone-field input{flex:1}

.form-field select{
  width:100%;border:1.5px solid var(--line);border-radius:9px;
  padding:11px 13px;font-size:14px;font-family:inherit;color:var(--ink);
  background:#fff;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23544f63' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.form-field select:focus{outline:none;border-color:var(--violet-500)}

.file-drop{
  border:1.5px dashed var(--line);border-radius:12px;
  padding:22px;text-align:center;cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  position:relative;
}
.file-drop:hover,.file-drop.is-dragover{border-color:var(--violet-500);background:var(--violet-100)}
.file-drop input[type="file"]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}
.file-drop .fd-icon{
  width:32px;height:32px;border-radius:8px;background:var(--violet-100);
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px;
}
.file-drop .fd-icon svg{width:16px;height:16px;color:var(--violet-600)}
.file-drop .fd-label{font-size:13.5px;font-weight:600}
.file-drop .fd-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
.file-drop .fd-filename{font-size:12.5px;color:var(--violet-600);font-weight:600;margin-top:6px}

.form-check{display:flex;align-items:flex-start;gap:9px;margin:16px 0 20px}
.form-check input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--violet-600)}
.form-check label{font-size:13px;color:var(--ink-soft);line-height:1.5}

/* -------------------- Scroll-reveal animation system -------------------- */
/* Progressive enhancement: content is visible by default. Only the .js-animations-ready
   class (added by animations.js once it has successfully initialized) switches elements
   into the "hidden until revealed" state. If JS fails to load or errors out, everything
   stays visible and the page is fully usable with zero animation. */
[data-animate]{
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.js-animations-ready [data-animate]{opacity:0}
.js-animations-ready [data-animate="fade-up"]{transform:translateY(22px)}
.js-animations-ready [data-animate="fade"]{transform:none}
.js-animations-ready [data-animate="scale"]{transform:scale(.94)}
[data-animate].is-visible{opacity:1;transform:none}

/* Hero on-load elements (no scroll trigger, just page-load sequence) */
[data-animate-onload]{
  transition:opacity .55s ease, transform .55s ease;
}
.js-animations-ready [data-animate-onload]{opacity:0;transform:translateY(14px)}
[data-animate-onload].is-visible{opacity:1;transform:none}

/* Count-up numbers: subtle settle so the final frame doesn't feel abrupt */
[data-count-to]{display:inline-block}

/* Sales graph: dots pop in after the line draws */
.dc-chart circle{
  transform-origin:center;
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.js-animations-ready .dc-chart circle{opacity:0;transform:scale(0)}
.dc-chart circle.is-visible{opacity:1;transform:scale(1)}
.js-animations-ready .dc-chart polyline{opacity:0}
.dashboard-card.is-visible .dc-chart polyline{opacity:1;transition:opacity .2s ease}
.dc-figure,.dc-delta{transition:opacity .4s ease}

/* Floating hero cards: gentle continuous float once revealed */
.floating-card[data-animate].is-visible{
  animation:ecomersify-float 5.5s ease-in-out infinite;
}
.fc-ops.is-visible{animation-delay:.3s}
.fc-brand.is-visible{animation-delay:.6s}
.fc-scale.is-visible{animation-delay:.9s}
@keyframes ecomersify-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* Chip / pillar hover already defined above; add a light press state */
.chip:active,.pillar-card:active{transform:translateY(-1px) scale(.99)}

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  [data-animate],[data-animate-onload]{opacity:1!important;transform:none!important}
  .dc-chart circle,.dc-chart polyline{opacity:1!important;transform:none!important}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .why-stat{flex-basis:calc(33.333% - 18px)}
  .pillar-card{flex-basis:calc(50% - 10px)}
  .footer-col,.footer-brand,.footer-contact{flex-basis:calc(50% - 14px)}
}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-visual{order:-1;min-height:0;margin-bottom:24px;padding-top:8px}
  .backdrop-shape{display:none}

  /* Floating cards: switch from absolute overlay positioning to a static
     2-column grid sitting above the dashboard card, since there's no room
     on narrow screens for them to frame the card's corners without overlap. */
  .floating-card{
    position:static;
    width:auto;
    font-size:11.5px;
    padding:10px 12px;
  }
  .floating-cards-row{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    margin-bottom:14px;position:relative;z-index:1;
  }

  .dashboard-card{max-width:100%}
  .truck-graphic{margin-top:-14px}

  .founders-copy{flex-basis:100%}
  .capability-grid{flex-basis:100%}
  .capability{flex-basis:calc(50% - 16px)}
  .focus-row{flex-direction:column;align-items:flex-start}
  .cta-row{flex-direction:column;align-items:flex-start;text-align:left}
  .contact-illustration{display:none}
}

@media (max-width:760px){
  .site-header .wrap{height:68px}
  .header-cta{gap:8px}
  .header-cta .btn-primary{
    padding:9px 14px;font-size:13px;
  }
  .header-cta .btn-primary svg{display:none}

  .primary-nav--desktop{display:none}
  .primary-nav--mobile{
    display:block;
    position:fixed;top:68px;left:0;right:0;bottom:0;
    width:100%;
    background:#fff;padding:28px 24px;
    transform:translateX(100%);transition:transform .25s ease;
    z-index:9998;
    overflow-y:auto;
    box-shadow:-8px 0 24px rgba(22,18,33,.08);
  }
  .primary-nav--mobile.is-open{transform:translateX(0)}
  .primary-nav--mobile ul{flex-direction:column;gap:4px}
  .primary-nav--mobile a{
    font-size:17px;display:block;padding:14px 4px;
    border-bottom:1px solid var(--line);
  }

  .mobile-nav-overlay{
    display:none;
    position:fixed;top:68px;left:0;right:0;bottom:0;
    background:rgba(15,10,30,.35);
    z-index:9997;
  }
  .mobile-nav-overlay.is-open{display:block}

  .menu-toggle{display:flex;flex:none;position:relative;z-index:9999}
  .menu-toggle span{transition:transform .2s ease, opacity .2s ease}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .hero{padding:36px 0 40px}
  .hero h1{font-size:32px}
  .hero-stats{gap:24px;flex-wrap:wrap}
  .hero-actions{flex-wrap:wrap}

  .pillar-card{flex-basis:100%}
  .capability{flex-basis:100%}
  .why-stat{flex-basis:calc(50% - 13px)}
  .why-map{flex-basis:100%;text-align:center}

  .footer-col,.footer-brand,.footer-contact{flex-basis:calc(50% - 14px)}
  .footer-bottom{flex-direction:column;align-items:flex-start}

  .section{padding:48px 0}
  .contact-page{padding:32px 0 0}
  .contact-info h1{font-size:28px}
  .contact-form-card{padding:24px}
  .form-row .form-field{flex-basis:100%}
}

@media (max-width:480px){
  .wrap{padding:0 20px}
  .why-stat{flex-basis:100%}
  .footer-col,.footer-brand,.footer-contact{flex-basis:100%}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1;justify-content:center}

  .site-branding span:not(.logo-mark){font-size:16px}
  .header-cta .btn-primary{padding:8px 10px;font-size:12px}

  /* Prevent horizontal overflow: the min-width values set for tablet/desktop
     flex-wrap sizing are too wide for very narrow phones and were forcing
     cards past the viewport edge. Let flex-basis:100% (set above/earlier)
     fully govern width on the smallest screens instead. */
  .pillar-card,.capability,.footer-brand,.footer-col,.footer-contact{min-width:0}
}