/* ==========================================================================
   AANGAN — DESIGN SYSTEM
   A single stylesheet that unifies typography, spacing, colour, motion and
   responsive behaviour across every section, on every device.

   Load order matters: this comes AFTER responsive-fix.css so it can refine
   those fixes, and it only ever *adds* polish — no structural HTML changes.

   Contents
     1. Tokens (fluid type scale, spacing, shadows, easing)
     2. Base & accessibility
     3. Responsive foundations — the 320px → 4K ladder
     4. Header / navigation
     5. Section rhythm & headings
     6. Buttons & form controls
     7. FAQ
     8. EMI calculator
     9. Comparison table (incl. mobile card mode)
    10. Testimonials
    11. Contact form
    12. Footer
    13. Motion, focus, print
   ========================================================================== */

/* ============================================================ 1. TOKENS === */
:root{
  /* Fluid type — scales smoothly between 360px and 1600px viewports,
     so nothing has to "jump" at a breakpoint. */
  --fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem);
  --fs-base: clamp(0.95rem, 0.91rem + 0.18vw, 1.06rem);
  --fs-lg:   clamp(1.05rem, 0.99rem + 0.28vw, 1.25rem);
  --fs-xl:   clamp(1.25rem, 1.13rem + 0.55vw, 1.65rem);
  --fs-h3:   clamp(1.30rem, 1.15rem + 0.70vw, 1.85rem);
  --fs-h2:   clamp(2.05rem, 1.45rem + 2.70vw, 3.75rem);
  --fs-h1:   clamp(2.55rem, 1.70rem + 3.80vw, 4.60rem);
  --fs-eyebrow: clamp(0.70rem, 0.67rem + 0.13vw, 0.80rem);

  /* Spacing rhythm */
  --sp-section: clamp(3.75rem, 2.4rem + 6.0vw, 8rem);
  --sp-gutter:  clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --sp-stack:   clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);

  /* Brand */
  --ag-ink:      #211e2b;
  --ag-ink-soft: #56506b;
  --ag-mute:     #8b84a0;
  --ag-line:     #e4dff0;
  --ag-surface:  #ffffff;
  --ag-tint:     #f6f4fa;
  --ag-brand:    #7c6bb0;
  --ag-brand-lt: #a79ada;
  --ag-brand-dk: #5d4f8c;
  --ag-gold:     #c08b3e;
  --ag-green:    #2f8f6b;

  /* Elevation — soft, brand-tinted rather than flat grey */
  --sh-1: 0 1px 2px rgba(33,30,43,.05), 0 2px 8px rgba(33,30,43,.05);
  --sh-2: 0 4px 12px rgba(33,30,43,.07), 0 12px 28px rgba(33,30,43,.07);
  --sh-3: 0 10px 24px rgba(33,30,43,.10), 0 24px 56px rgba(33,30,43,.11);
  --sh-brand: 0 12px 32px rgba(124,107,176,.30);

  --r-sm: .65rem;
  --r-md: 1rem;
  --r-lg: 1.35rem;
  --r-xl: 1.85rem;

  --ease: cubic-bezier(.22,.9,.3,1);
  --dur: .26s;
}

/* ================================================ 2. BASE & ACCESSIBILITY = */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Consistent, visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline:2.5px solid var(--ag-brand);
  outline-offset:3px;
  border-radius:.4rem;
}
::selection{ background:var(--ag-brand-lt); color:#15121c; }

/* ============================== 3. RESPONSIVE FOUNDATIONS (320px → 4K) === */
/* No sideways scroll at any width. */
html,body{ max-width:100%; overflow-x:clip; }

/* Every direct section child gets a sane gutter and a max line length. */
main > section > .mx-auto,
main > section > div{
  padding-left:var(--sp-gutter);
  padding-right:var(--sp-gutter);
}
@media (min-width:1600px){
  main > section > .mx-auto{ max-width:88rem; }
}

/* Vertical rhythm — one consistent section height everywhere. */
main > section{
  padding-top:var(--sp-section) !important;
  padding-bottom:var(--sp-section) !important;
}

/* Media never dictates layout width. */
img,svg,video,canvas{ max-width:100%; height:auto; }

/* Ultra-narrow phones (320–359px): tighten so nothing clips. */
@media (max-width:359px){
  :root{ --sp-gutter:.9rem; }
  .ap-grid{ grid-template-columns:1fr !important; }
}

/* ==================================================== 4. HEADER / NAV ==== */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(246,244,250,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(228,223,240,.9);
  transition:box-shadow var(--dur) var(--ease);
}
header:hover{ box-shadow:var(--sh-1); }

/* Bigger tap targets on the nav links (was ~20px tall). */
header nav a{
  display:inline-flex; align-items:center;
  min-height:44px; padding:.35rem .5rem;
  border-radius:.55rem;
  font-size:var(--fs-sm);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
header nav a:hover{ background:rgba(124,107,176,.10); }

/* Animated underline */
header nav a{ position:relative; }
header nav a::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:.15rem;
  height:2px; border-radius:2px; background:var(--ag-brand);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
header nav a:hover::after{ transform:scaleX(1); }

/* Header CTA */
header > div > a:last-child{
  min-height:44px; display:inline-flex; align-items:center;
  box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
header > div > a:last-child:hover{
  transform:translateY(-2px); box-shadow:var(--sh-brand);
}

/* ============================== 5. SECTION RHYTHM & HEADINGS ============= */
main h1{ font-size:var(--fs-h1) !important; line-height:1.02 !important; letter-spacing:-.03em !important; }
main h2{ font-size:var(--fs-h2) !important; line-height:1.06 !important; letter-spacing:-.025em !important; }
main h3{ font-size:var(--fs-h3) !important; line-height:1.22 !important; letter-spacing:-.01em; }
main p { font-size:var(--fs-base); }

/* Eyebrow labels — one consistent treatment, with a small rule. */
main p.uppercase.tracking-\[0\.22em\]{
  font-size:var(--fs-eyebrow) !important;
  display:inline-flex; align-items:center; gap:.6rem;
}
main p.uppercase.tracking-\[0\.22em\]::before{
  content:""; width:1.6rem; height:2px; border-radius:2px;
  background:currentColor; opacity:.55;
}
/* centred headers get the rule on both sides */
.text-center > p.uppercase.tracking-\[0\.22em\]::after{
  content:""; width:1.6rem; height:2px; border-radius:2px;
  background:currentColor; opacity:.55;
}

/* Intro paragraphs stay readable — never a 120-character line. */
main section p.text-lg{ max-width:62ch; line-height:1.68; }

/* ============================================ 6. BUTTONS & CONTROLS ====== */
/* Every interactive element clears the 44px accessible tap target. */
main a[class*="rounded-full"],
main button[class*="rounded-full"],
.ap-cta, .hs-cta, .pd-btn, .al-btn{
  min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
main a[class*="rounded-full"]:hover,
main button[class*="rounded-full"]:hover{
  transform:translateY(-2px);
}
main a[class*="bg-primary"]:hover{ box-shadow:var(--sh-brand); }
main a[class*="rounded-full"]:active,
main button[class*="rounded-full"]:active{ transform:translateY(0) scale(.985); }

/* Filter controls in the projects grid */
.ap-controls input, .ap-controls select{
  min-height:46px;
  box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ap-controls input:focus, .ap-controls select:focus{
  box-shadow:0 0 0 4px rgba(124,107,176,.16);
}
.ap-reset{ min-height:44px; padding-inline:.35rem; }

/* Cards lift consistently */
.ap-card{ box-shadow:var(--sh-1); }
.ap-card:hover{ box-shadow:var(--sh-3); }

/* ======================================================== 7. FAQ ========= */
#faq details{
  border:1px solid var(--ag-line) !important;
  border-radius:var(--r-md) !important;
  background:var(--ag-surface) !important;
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  padding:0 !important;
  margin-bottom:.7rem;
}
#faq details:hover{ border-color:var(--ag-brand-lt) !important; box-shadow:var(--sh-2); }
#faq details[open]{
  border-color:var(--ag-brand-lt) !important;
  background:var(--ag-surface) !important;
  box-shadow:var(--sh-2);
}
#faq summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:1rem;
  padding:1.15rem 1.35rem;
  min-height:56px;
  font-size:var(--fs-base);
  font-weight:700; color:var(--ag-ink);
}
#faq summary::-webkit-details-marker{ display:none; }
/* replace the "+" with a rotating chevron in a chip */
#faq summary span:last-child{ display:none !important; }
#faq summary::after{
  content:""; margin-left:auto; flex:none;
  width:1.9rem; height:1.9rem; border-radius:999px;
  background:var(--ag-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6bb0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/1rem no-repeat;
  transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
#faq details[open] summary::after{ transform:rotate(180deg); background-color:#ece7f7; }
#faq details > p,
#faq details > div{
  padding:0 1.35rem 1.25rem;
  font-size:var(--fs-sm); line-height:1.7; color:var(--ag-ink-soft);
  max-width:70ch;
}

/* ============================================= 8. EMI CALCULATOR ========= */
#emi .rounded-2xl,
#emi form{ border-radius:var(--r-lg) !important; }
#emi form{
  background:var(--ag-surface);
  border:1px solid var(--ag-line);
  box-shadow:var(--sh-2);
  padding:clamp(1.25rem,3vw,1.9rem) !important;
}
/* the two summary stats */
#emi .rounded-2xl.border,
#emi div[class*="border-border"][class*="rounded"]{
  background:var(--ag-surface);
  border:1px solid var(--ag-line) !important;
  box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#emi .rounded-2xl.border:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }

/* range sliders — consistent across engines, thumb is 24px for touch */
#emi input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:transparent; cursor:pointer;
}
#emi input[type=range]::-webkit-slider-runnable-track{
  height:7px; border-radius:99px;
  background:linear-gradient(90deg,var(--ag-brand) var(--_p,50%),#e6e1f0 var(--_p,50%));
}
#emi input[type=range]::-moz-range-track{ height:7px; border-radius:99px; background:#e6e1f0; }
#emi input[type=range]::-moz-range-progress{ height:7px; border-radius:99px; background:var(--ag-brand); }
#emi input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; margin-top:-8.5px;
  border-radius:99px; background:#fff;
  border:3px solid var(--ag-brand);
  box-shadow:0 2px 8px rgba(124,107,176,.45);
  transition:transform .16s var(--ease);
}
#emi input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:99px; background:#fff;
  border:3px solid var(--ag-brand); box-shadow:0 2px 8px rgba(124,107,176,.45);
}
#emi input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.18); }

/* the highlighted EMI result panel */
#emi .bg-primary{
  background:linear-gradient(135deg,var(--ag-brand) 0%,var(--ag-brand-dk) 100%) !important;
  box-shadow:var(--sh-brand);
  border-radius:var(--r-md) !important;
}

/* ============================== 9. COMPARISON TABLE (+ mobile cards) ===== */
#compare table{ border-collapse:separate; border-spacing:0; }
#compare thead th{
  position:sticky; top:0;
  font-size:var(--fs-xs); letter-spacing:.14em;
  padding:.9rem 1.15rem !important;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(6px);
}
#compare tbody td{ padding:.95rem 1.15rem !important; font-size:var(--fs-sm); }
#compare tbody tr{ transition:background var(--dur) var(--ease); }
#compare tbody tr:hover{ background:rgba(255,255,255,.055); }
/* the Aangan column is the hero — make it read that way */
#compare tbody td:last-child{ color:#fff; font-weight:600; }
#compare thead th:last-child{ color:var(--ag-brand-lt) !important; }

/* Phones: the 640px-wide table becomes stacked cards, no sideways scroll. */
@media (max-width:767px){
  #compare table{ display:block; min-width:0 !important; white-space:normal !important; }
  #compare thead{ display:none; }
  #compare tbody{ display:grid; gap:.7rem; }
  #compare tbody tr{
    display:block;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.13);
    border-radius:var(--r-md);
    padding:.9rem 1rem;
  }
  #compare tbody td{ display:flex; gap:.75rem; padding:.3rem 0 !important; border:0 !important; }
  #compare tbody td:first-child{
    font-weight:800; color:#fff; font-size:var(--fs-base);
    padding-bottom:.55rem !important;
    margin-bottom:.45rem;
    border-bottom:1px solid rgba(255,255,255,.14) !important;
  }
  #compare tbody td:not(:first-child)::before{
    content:attr(data-label);
    flex:none; width:6.5rem;
    font-size:var(--fs-xs); font-weight:800;
    text-transform:uppercase; letter-spacing:.07em;
    color:rgba(255,255,255,.45);
  }
}

/* ================================================= 10. TESTIMONIALS ====== */
#testimonials .grid > *{
  display:flex; flex-direction:column;
  background:var(--ag-surface);
  border:1px solid var(--ag-line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:clamp(1.25rem,2.4vw,1.75rem);
  position:relative;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#testimonials .grid > *:hover{ transform:translateY(-5px); box-shadow:var(--sh-3); }
/* a soft quote mark behind the text */
#testimonials .grid > *::before{
  content:"\201C";
  position:absolute; top:.1rem; right:1.1rem;
  font:900 4.5rem/1 Georgia,serif;
  color:var(--ag-brand); opacity:.13; pointer-events:none;
}
#testimonials blockquote,
#testimonials .grid > * > p{ font-size:var(--fs-base); line-height:1.72; color:var(--ag-ink-soft); }
/* the author block sits at the bottom of every card, so they align */
#testimonials .grid > * > div:last-child{ margin-top:auto; padding-top:1rem; }

/* ================================================== 11. CONTACT FORM ===== */
#contactForm input, #contactForm textarea{
  min-height:48px;
  font-size:max(16px,var(--fs-base));   /* 16px stops iOS zooming on focus */
  border-radius:var(--r-sm) !important;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
#contactForm textarea{ min-height:112px; }
#contactForm input:focus, #contactForm textarea:focus{
  box-shadow:0 0 0 4px rgba(167,154,218,.22);
  background:rgba(255,255,255,.14) !important;
}
#contactForm label{ font-size:var(--fs-xs); }
#contactForm button[type=submit]{ min-height:50px; box-shadow:var(--sh-brand); }
#cfStatus{ font-size:var(--fs-sm); line-height:1.6; }

/* ========================================================= 12. FOOTER ==== */
footer{ padding-block:clamp(2.5rem,5vw,3.5rem) !important; }
footer a{
  display:inline-flex; align-items:center; min-height:34px;
  transition:color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
footer a:hover{ transform:translateX(3px); }
footer .grid > div > p:first-child{ font-size:var(--fs-xs); }

/* ============================== 13. MOTION / REVEAL / PRINT ============== */
/* Gentle reveal as sections enter the viewport (JS adds .ag-in). */
.ag-reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.ag-reveal.ag-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .ag-reveal{ opacity:1 !important; transform:none !important; }
}

/* Larger screens: give the hero and grids more room to breathe. */
@media (min-width:1280px){
  .ap-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.65rem; }
}
@media (min-width:1800px){
  .ap-grid{ grid-template-columns:repeat(4,1fr); }
}

/* Tablet: two project columns reads better than three cramped ones. */
@media (min-width:641px) and (max-width:1023px){
  .ap-grid{ grid-template-columns:repeat(2,1fr); }
}

@media print{
  header, #ag-launch, #ag-panel, #alOverlay, #pdOv, .hs-nav, .hs-dots,
  .ap-controls, #apMore, #agAdminLink{ display:none !important; }
  main > section{ padding-block:1.5rem !important; break-inside:avoid; }
  .ap-card{ break-inside:avoid; box-shadow:none; border:1px solid #ccc; }
}

/* ============ 14. REMAINING TAP TARGETS (audit fixes) ==================== */
/* Slider arrows and dots were under 40px; the footer/nav links and the
   "email us" button also needed padding to clear the 44px guideline. */
.hs-nav{ width:2.9rem !important; height:2.9rem !important; font-size:1.25rem !important; }
.hs-dots{ padding-block:.45rem; }
.hs-dot{ height:14px !important; background:transparent !important; display:flex; align-items:center; }
.hs-dot::before{
  content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:3px; border-radius:99px; background:rgba(255,255,255,.32);
}
.hs-dot i{ top:50% !important; transform:translateY(-50%); height:3px !important; border-radius:99px; }

#cfCopyMail, .ag-copymail{
  min-height:44px; display:inline-flex; align-items:center; padding-inline:.15rem;
}
footer a{ min-height:40px !important; }
.ap-reset{ min-height:44px; display:inline-flex; align-items:center; }
.al-btn, .al-mini{ min-height:38px; }
#agDrawer nav a{ min-height:52px; }

/* the projects "Show more" + card CTAs */
#apMore{ min-height:50px; }
.ap-cta{ min-height:40px; }

/* ================= 15. SECTION BANDING — clear visual rhythm ============ */
/* Alternate surface tones so sections read as distinct chapters rather than
   one long scroll, and add a soft divider where two light bands meet. */
#projects{ background:linear-gradient(180deg,#efecf6 0%,#f6f4fa 100%) !important; }
#why{ background:var(--ag-surface) !important; }
#faq{ background:linear-gradient(180deg,#f6f4fa 0%,#efecf6 100%) !important; }
#emi{ background:var(--ag-surface) !important; }
#testimonials{ background:linear-gradient(180deg,#f6f4fa 0%,#efecf6 100%) !important; }

/* dark bands get a subtle brand glow so they don't read as flat black */
#locations, #compare, #contact{ position:relative; overflow:hidden; }
#locations::before, #compare::before, #contact::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:60rem; height:60rem; border-radius:50%;
  background:radial-gradient(circle,rgba(124,107,176,.20) 0%,transparent 68%);
}
#locations::before{ top:-28rem; right:-18rem; }
#compare::before{ bottom:-32rem; left:-20rem; }
#contact::before{ top:-30rem; left:50%; transform:translateX(-50%); }
#locations > *, #compare > *, #contact > *{ position:relative; z-index:1; }

/* ================= 16. HERO POLISH ====================================== */
main > section:first-of-type{ padding-top:clamp(2.5rem,4vw,4.5rem) !important; }
.hs{ box-shadow:0 30px 70px -20px rgba(33,30,43,.45) !important; }
/* the decorative purple square behind the slider */
main > section:first-of-type .absolute.-left-6{
  background:linear-gradient(135deg,var(--ag-brand-lt),var(--ag-brand)) !important;
  opacity:.9;
}
/* hero stat row */
main > section:first-of-type .mt-12 span.text-2xl{
  font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem) !important;
  background:linear-gradient(135deg,var(--ag-ink),var(--ag-brand));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ================= 17. PROJECT CARD REFINEMENT ========================== */
.ap-card{ border-radius:var(--r-lg) !important; }
.ap-media{ border-radius:0 !important; }
.ap-badge, .ap-prio{ box-shadow:0 2px 8px rgba(0,0,0,.18); }
.ap-name{ font-size:var(--fs-lg) !important; }
.ap-price{ font-size:var(--fs-xl) !important;
  background:linear-gradient(135deg,var(--ag-ink),var(--ag-brand));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.ap-empty{ font-size:var(--fs-base); }

/* ================= 18. WHY CARDS — match the new scale ================== */
.why-card h3{ font-size:var(--fs-h3) !important; }
.why-card p{ font-size:var(--fs-base) !important; }
.why-card{ box-shadow:var(--sh-1); }
.why-card:hover{ box-shadow:var(--sh-3); }

/* ================= 19. LOCATION TILES — match the new scale ============= */
.loc-name{ font-size:var(--fs-lg) !important; }
.loc-card{ min-height:150px; }

/* Progress bars stay visually thin but get an invisible 44px tap area. */
.hs-dot{ position:relative; height:14px !important; }
.hs-dot::after{
  content:""; position:absolute; left:0; right:0;
  top:-15px; bottom:-15px;          /* 14 + 30 = 44px touch height */
}

/* ============ 20. AUDIT FIXES — hero stats & card footers =============== */
/* BUG: the gradient-clipped stat numbers ("176", "43") were wrapping to two
   lines ("17 / 6") because the flex row had no wrap protection. */
main > section:first-of-type .mt-12{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.75rem clamp(.9rem,2vw,1.5rem) !important;
}
main > section:first-of-type .mt-12 > div{
  display:flex; align-items:baseline; gap:.45rem;
  flex:none; white-space:nowrap;
}
main > section:first-of-type .mt-12 span.text-2xl{
  white-space:nowrap; flex:none; line-height:1.05;
}
main > section:first-of-type .mt-12 span.max-w-\[8rem\]{
  max-width:none !important; white-space:nowrap;
  font-size:var(--fs-sm);
}
@media (max-width:420px){
  main > section:first-of-type .mt-12 > span.h-8{ display:none; }
  main > section:first-of-type .mt-12{ gap:.6rem 1.1rem !important; }
}

/* BUG: Details + Enquire wrapped onto separate lines and pushed past the
   card edge. Give the footer a proper two-row layout instead. */
.ap-foot{
  display:grid !important;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:.6rem .5rem !important;
  width:100%;
}
.ap-foot > div{ min-width:0; }
.ap-cta{
  white-space:nowrap;
  padding-inline:.85rem !important;
  font-size:.75rem !important;
}
/* when a card has BOTH buttons they share a full-width row underneath */
.ap-foot .ap-det{ grid-column:1; grid-row:2; justify-self:start; }
.ap-foot .ap-det + .ap-cta{ grid-column:2; grid-row:2; justify-self:end; }
.ap-price{ font-size:clamp(1.05rem,.95rem + .4vw,1.3rem) !important; }
.ap-from{ margin-bottom:.1rem; }

/* "Price on request" is much longer than "₹1.12 Cr" — let it shrink and wrap
   rather than run under the Enquire button. */
.ap-foot > div:first-child{ min-width:0; overflow:hidden; }
.ap-price{ white-space:normal !important; overflow-wrap:anywhere; }
.ap-card .ap-price:not([data-num]){ line-height:1.15; }