/* =========================================================
   ASTRAA INTERIOR — GLOBAL DESIGN FOUNDATION
   Reusable across all pages. Page-specific compositions
   (e.g. the homepage hero) stay scoped to their own page.
   ========================================================= */

/* Layout guard — Astra sizes .alignfull at 100vw, which includes
   the scrollbar and causes a few px of horizontal overflow. */
.site-content{overflow-x:hidden;overflow-x:clip}

/* --- Section shell + 1240px content container --- */
.as-sec{padding:96px 24px;overflow:hidden;position:relative}
.as-in{max-width:1240px;margin-inline:auto;position:relative;z-index:1}
.wp-block-cover.as-sec{padding:96px 24px;align-items:center}
.wp-block-cover .wp-block-cover__inner-container{max-width:1240px;width:100%;margin-inline:auto}

/* --- Typography helpers --- */
.as-eyebrow{font-family:Roboto,sans-serif;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#f9ad4a;font-weight:500;margin:0 0 16px}
.as-h2{font-family:Raleway,sans-serif;font-weight:700;font-size:clamp(28px,4.2vw,46px);line-height:1.12;color:#1a1a1a;margin:0 0 20px;max-width:20ch}
.as-h2.is-centered{margin-inline:auto;text-align:center}
.as-lead{font-family:Roboto,sans-serif;font-size:16.5px;line-height:1.8;color:#4a4a4a;max-width:62ch;margin:0 0 26px}
.as-lead.is-centered{margin-inline:auto;text-align:center}
.as-h2.is-light{color:#fff}
.as-lead.is-light{color:rgba(255,255,255,.9)}

/* --- Watermark heading --- */
.as-wm{position:absolute;top:38px;left:50%;transform:translateX(-50%);font-family:Raleway,sans-serif;font-weight:700;font-size:clamp(54px,11vw,148px);line-height:1;color:rgba(26,26,26,.05);white-space:nowrap;pointer-events:none;z-index:0;user-select:none}
.as-wm.is-light{color:rgba(255,255,255,.07)}

/* --- Buttons (44px minimum touch target) --- */
.as-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-family:Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.15;text-transform:capitalize;padding:13px 26px;border-radius:32px;border:1px solid #1a1a1a;color:#1a1a1a;text-decoration:none;transition:background .2s,color .2s}
.as-btn:hover,.as-btn:focus-visible{background:#1a1a1a;color:#fff}
.as-btn.is-solid{background:#f9ad4a;border-color:#f9ad4a;color:#fff}
.as-btn.is-solid:hover,.as-btn.is-solid:focus-visible{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
.as-btn.is-light{border-color:#fff;color:#fff}
.as-btn.is-light:hover,.as-btn.is-light:focus-visible{background:#fff;color:#1a1a1a}
.as-btnrow{display:flex;flex-wrap:wrap;gap:14px}
.as-btnrow.is-centered{justify-content:center}
/* Site-wide minimum touch target for other interactive controls */
.wp-block-button__link,.ast-button,.ast-custom-button,.srfm-button,.srfm-submit-button button,button[type=submit],input[type=submit]{min-height:44px}

/* --- Responsive grids --- */
.as-grid{display:grid;gap:28px}
.as-g2{grid-template-columns:repeat(2,1fr)}
.as-g3{grid-template-columns:repeat(3,1fr)}
.as-g4{grid-template-columns:repeat(4,1fr)}

/* --- Icon / text card --- */
.as-card{background:#fff;padding:34px 30px;border:1px solid #ececec}
.as-card h3{font-family:Raleway,sans-serif;font-weight:700;font-size:19px;color:#1a1a1a;margin:0 0 10px;line-height:1.3}
.as-card p{font-family:Roboto,sans-serif;font-size:14.5px;line-height:1.75;color:#4a4a4a;margin:0}
.as-card img.as-icon{width:44px;height:44px;object-fit:contain;margin:0 0 20px;display:block}

/* --- Large image-led division card --- */
.as-divcard{display:flex;flex-direction:column;background:#fff;border:1px solid #ececec;overflow:hidden}
.as-divcard__img{aspect-ratio:16/10;background-size:cover;background-position:center}
.as-divcard__body{padding:34px 32px 38px}
.as-divcard__body h3{font-family:Raleway,sans-serif;font-weight:700;font-size:24px;color:#1a1a1a;margin:0 0 12px}
.as-divcard__body p{font-family:Roboto,sans-serif;font-size:15px;line-height:1.8;color:#4a4a4a;margin:0 0 24px}

/* --- Image category tile --- */
.as-cat{background:#fff;border:1px solid #ececec}
.as-cat img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.as-cat h3{font-family:Raleway,sans-serif;font-weight:600;font-size:16px;color:#1a1a1a;margin:0;padding:18px 20px}

/* --- Numbered process grid --- */
.as-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #e6e6e6}
.as-step{padding:34px 34px 34px 0;border-bottom:1px solid #e6e6e6;border-right:1px solid #e6e6e6}
.as-step:nth-child(3n){border-right:0}
.as-step__n{display:block;font-family:Raleway,sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;color:#f9ad4a;margin-bottom:12px}
.as-step h3{font-family:Raleway,sans-serif;font-weight:700;font-size:20px;color:#1a1a1a;margin:0 0 8px}
.as-step p{font-family:Roboto,sans-serif;font-size:14.5px;line-height:1.75;color:#4a4a4a;margin:0}

/* --- Industry tile --- */
.as-ind{background:#fff;border:1px solid #ececec;padding:34px 28px;text-align:center}
.as-ind .as-icon{margin:0 auto 18px;width:44px;height:44px;object-fit:contain;display:block}
.as-ind h3{font-family:Raleway,sans-serif;font-weight:600;font-size:17px;color:#1a1a1a;margin:0}

/* --- Bulleted capability list + fine print --- */
.as-caplist{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px}
.as-caplist li{font-family:Roboto,sans-serif;font-size:14.5px;color:#1a1a1a;padding-left:20px;position:relative}
.as-caplist li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:#f9ad4a}
.as-note{font-family:Roboto,sans-serif;font-size:13px;color:#8a8a8a;margin:22px 0 0;font-style:italic}

/* --- Image + text split --- */
.as-matwrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.as-matimg img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.as-mattext .as-h2{max-width:none}

/* --- Closing CTA band --- */
.as-cta{background:#101010}
.as-ctawrap{text-align:center;max-width:780px;margin-inline:auto}
.as-ctawrap .as-h2{max-width:none}
.as-cta .as-h2.is-light{text-shadow:0 2px 20px rgba(0,0,0,.55)}
.as-cta .as-lead.is-light{text-shadow:0 1px 14px rgba(0,0,0,.65)}

/* --- Footer helpers --- */
.as-ftag{font-size:13px;letter-spacing:.04em;color:#f9ad4a;margin:0 0 14px}
.as-flist{list-style:none;margin:0;padding:0}
.as-flist li{margin:0 0 10px;line-height:1.6}
.as-flist li:last-child{margin-bottom:0}

/* --- Responsive --- */
@media(max-width:960px){
 .as-g4,.as-g3{grid-template-columns:repeat(2,1fr)}
 .as-caplist{grid-template-columns:1fr}
 .as-steps{grid-template-columns:repeat(2,1fr)}
 .as-step:nth-child(3n){border-right:1px solid #e6e6e6}
 .as-step:nth-child(2n){border-right:0}
 .as-matwrap{grid-template-columns:1fr;gap:34px}
 .wp-block-cover.as-sec{padding:72px 20px}
}
@media(max-width:720px){
 .as-sec{padding:64px 20px}
 .wp-block-cover.as-sec{padding:60px 20px}
 .as-g2,.as-g3,.as-g4{grid-template-columns:1fr}
 .as-card{padding:28px 24px}
 .as-divcard__body{padding:28px 24px 32px}
 .as-steps{grid-template-columns:1fr}
 .as-step{border-right:0;padding-right:0}
 .as-step:nth-child(2n),.as-step:nth-child(3n){border-right:0}
 .as-btn{padding:12px 20px;font-size:13.5px;min-height:44px}
 .as-wm{top:26px}
}
@media(prefers-reduced-motion:reduce){.as-btn{transition:none}}


/* ---------------------------------------------------------------
   Cover-block text colour override.
   Astra emits: body .wp-block-cover:not(.has-text-color.has-link-color) p
   which outranks a single utility class, so every paragraph placed over a
   cover image inherits the dark body colour. These rules restore
   light-on-image text at matching specificity.
   --------------------------------------------------------------- */
body .wp-block-cover:not(.has-text-color.has-link-color) .as-h2.is-light{color:#fff}
body .wp-block-cover:not(.has-text-color.has-link-color) .as-lead.is-light{color:rgba(255,255,255,.9)}
body .wp-block-cover:not(.has-text-color.has-link-color) .as-onimage{color:rgba(255,255,255,.92)}
body .wp-block-cover:not(.has-text-color.has-link-color) .as-onimage-muted{color:rgba(255,255,255,.72)}


/* ---------------------------------------------------------------
   Inner-page hero — used by every section hub and inner page.
   Promoted from the Contact page, which had it scoped locally.
   --------------------------------------------------------------- */
.wp-block-cover.as-pagehero{padding:150px 24px 110px;min-height:420px;align-items:center;text-align:center}
.as-pagehero h1{font-family:Raleway,sans-serif;font-weight:700;font-size:clamp(32px,5vw,54px);line-height:1.1;color:#fff;margin:0 0 16px;text-shadow:0 2px 18px rgba(0,0,0,.4);max-width:22ch}
.as-pagehero:not(.is-left) h1{margin-inline:auto}
body .wp-block-cover.as-pagehero .as-lead{margin:0 auto;text-align:center;text-shadow:0 1px 12px rgba(0,0,0,.5);max-width:66ch}
.as-pagehero .as-eyebrow{text-align:center}
.as-pagehero.is-left,.as-pagehero.is-left h1,.as-pagehero.is-left .as-eyebrow{text-align:left}
body .wp-block-cover.as-pagehero.is-left .as-lead{margin-inline:0;text-align:left}

/* Card link — turns a .as-card into a navigable service card */
.as-card .as-cardlink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-family:Roboto,sans-serif;font-size:13.5px;font-weight:500;color:#1a1a1a;text-decoration:none;border-bottom:1px solid rgba(26,26,26,.25);padding-bottom:3px;transition:color .2s,border-color .2s}
.as-card .as-cardlink:hover,.as-card .as-cardlink:focus-visible{color:#f9ad4a;border-color:#f9ad4a}

/* Five-across tile row */
.as-g5{grid-template-columns:repeat(5,1fr)}

/* Light variants for content sitting on a dark image */
.as-caplist.is-light li{color:rgba(255,255,255,.92)}
.as-note.is-light{color:rgba(255,255,255,.62)}

@media(max-width:960px){.as-g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){
 .wp-block-cover.as-pagehero{padding:112px 20px 72px;min-height:0}
 .as-g5{grid-template-columns:repeat(2,1fr)}
}

/* CONSTRAINED-LAYOUT override — WordPress's constrained layout sets
   margin-left/right:auto !important on direct children of an inner
   container, so a left-aligned hero must beat it explicitly. */
.as-pagehero.is-left .wp-block-cover__inner-container > *{margin-left:0!important;margin-right:0!important}
.as-pagehero.is-left .wp-block-cover__inner-container > h1{max-width:20ch}
body .wp-block-cover.as-pagehero.is-left .as-lead{max-width:58ch;margin-inline:0;text-align:left}

/* ---------------------------------------------------------------
   BRAND-PANEL — white panel for the ASTRAA logo over photography.
   The supplied PNG already carries internal white margin, so the
   panel padding stays tight to avoid dwarfing the mark.
   --------------------------------------------------------------- */
.as-logopanel{display:inline-block;background:#fff;padding:12px 16px;margin:0 0 30px;line-height:0;max-width:100%}
.as-logopanel img{display:block;width:280px;max-width:100%;height:auto}

/* FAQ — plain visible Q&A, fully crawlable */
.as-faq{max-width:900px;border-top:1px solid #e6e6e6}
.as-faq>div{padding:26px 0;border-bottom:1px solid #e6e6e6}
.as-faq h3{font-family:Raleway,sans-serif;font-weight:700;font-size:18px;color:#1a1a1a;margin:0 0 10px;line-height:1.35}
.as-faq p{font-family:Roboto,sans-serif;font-size:15px;line-height:1.8;color:#4a4a4a;margin:0;max-width:78ch}

/* Two-column scope comparison */
.as-compare{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.as-comparecol{background:#fff;border:1px solid #ececec;padding:38px 34px}
.as-comparecol.is-primary{border:2px solid #f9ad4a;padding:37px 33px}
.as-comparecol h3{font-family:Raleway,sans-serif;font-weight:700;font-size:21px;color:#1a1a1a;margin:0 0 6px}
.as-comparetag{font-family:Roboto,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a;margin:0 0 20px}
.as-comparecol ul{list-style:none;margin:0 0 20px;padding:0}
.as-comparecol li{font-family:Roboto,sans-serif;font-size:14.5px;line-height:1.7;color:#4a4a4a;padding-left:20px;position:relative;margin-bottom:8px}
.as-comparecol li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#f9ad4a}
.as-comparefoot{font-family:Roboto,sans-serif;font-size:14.5px;color:#1a1a1a;margin:0;font-weight:500}

/* Four-across process grid, for sequences of 7-8 stages */
.as-steps.is-4up{grid-template-columns:repeat(4,1fr)}
.as-steps.is-4up .as-step:nth-child(3n){border-right:1px solid #e6e6e6}
.as-steps.is-4up .as-step:nth-child(4n){border-right:0}

@media(max-width:960px){
 .as-steps.is-4up{grid-template-columns:repeat(2,1fr)}
 .as-steps.is-4up .as-step:nth-child(4n){border-right:1px solid #e6e6e6}
 .as-steps.is-4up .as-step:nth-child(2n){border-right:0}
}
@media(max-width:720px){
 .as-compare{grid-template-columns:1fr}
 .as-comparecol{padding:28px 24px}
 .as-comparecol.is-primary{padding:27px 23px}
 .as-logopanel{padding:10px 13px;margin-bottom:24px}
 .as-logopanel img{width:196px}
 .as-steps.is-4up{grid-template-columns:1fr}
 .as-steps.is-4up .as-step{border-right:0}
}

/* ---------------------------------------------------------------
   HEADER-LOGO — the official ASTRAA mark (SVG, media 3305) in the
   transparent header. The SVG is transparent and tightly cropped
   (viewBox 1730x415, ~4.2:1), so the link itself is drawn as the
   180x60 / 165x55 / 150x50 white brand block the header was approved
   with, and the artwork sits centred inside it at the same size the
   old PNG's artwork occupied. Footprint and layout are unchanged.
   Astra emits SVG logos with class astra-logo-svg, not custom-logo.
   --------------------------------------------------------------- */
.site-header .custom-logo-link,
.site-header .site-logo-img{display:inline-flex;align-items:center;justify-content:center}
.site-header .custom-logo-link{width:180px;height:60px;background:#fff;box-sizing:border-box}
.site-header .custom-logo-link img.custom-logo,.site-header .custom-logo-link img.astra-logo-svg{width:150px!important;max-width:150px!important;height:auto!important}
@media(max-width:921px){.site-header .custom-logo-link{width:165px;height:55px}.site-header .custom-logo-link img.custom-logo,.site-header .custom-logo-link img.astra-logo-svg{width:137px!important;max-width:137px!important}}
@media(max-width:544px){.site-header .custom-logo-link{width:150px;height:50px}.site-header .custom-logo-link img.custom-logo,.site-header .custom-logo-link img.astra-logo-svg{width:125px!important;max-width:125px!important}}

/* =========================================================
   TIGHT TILE GRID — modifier for five-across rows of short
   cards (scope tiles, audience tiles). Column counts still
   come from .as-g5; only padding and type scale change.
   ========================================================= */
.as-grid.is-tight .as-card{padding:26px 22px}
.as-grid.is-tight .as-card h3{font-size:16.5px;margin-bottom:8px}
.as-grid.is-tight .as-card p{font-size:13.5px;line-height:1.7}
@media(max-width:720px){.as-grid.is-tight .as-card{padding:24px 20px}}


/* =========================================================
   HEADER SWITCH — the astra_header_break_point filter in
   astraa-site-tweaks.php moves Astra's body class and JS to 1023px,
   but Astra's header-builder CSS bakes its own tablet breakpoint
   (768px) into the media query that toggles the two headers. These
   two lines finish the job (1023.99 mirrors the exact media query
   Astra's own frontend.js uses, so CSS and JS can never disagree); all mobile-header styling then applies
   correctly because the ast-header-break-point body class is present.
   ========================================================= */
@media(max-width:1023.99px){
 #ast-desktop-header{display:none}
 #ast-mobile-header{display:block}
}


/* =========================================================
   FLOATING WHATSAPP — one fixed button, output site-wide by
   astraa-site-tweaks.php. Static: no animation, no pulsing.
   Sits clear of footer links, buttons and form controls.
   ========================================================= */
.as-wa{position:fixed;right:24px;bottom:24px;z-index:9999;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#25D366;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:background .2s,box-shadow .2s}
.as-wa:hover,.as-wa:focus-visible{background:#1da851;box-shadow:0 6px 18px rgba(0,0,0,.34)}
.as-wa svg{width:30px;height:30px;fill:#fff;display:block}
@media(max-width:544px){
 .as-wa{right:16px;bottom:16px;width:52px;height:52px}
 .as-wa svg{width:28px;height:28px}
}
@media print{.as-wa{display:none}}
/* Reserve room under the last footer row so the fixed button never
   sits on top of the copyright or the design-credit link. */
.site-footer .site-below-footer-wrap{padding-bottom:96px}
@media(max-width:544px){.site-footer .site-below-footer-wrap{padding-bottom:88px}}

/* FOOTER GRID — Astra reflows its four footer columns to two at its own baked
   768px tablet breakpoint, but this site's tablet band now starts at 1023.99px
   (astra_header_break_point). Between 769px and 1023px that left four columns
   of only ~135-199px, which forced the postal address into one-word lines.
   Extend Astra's own two-column footer layout to the site's real tablet band.
   768.01 not 769: at fractional device-pixel ratios the viewport lands on
   768.x, where Astra's max-width:768px and a min-width:769px both evaluate
   false, leaving a one-pixel dead zone that kept four columns. */
@media(min-width:768.01px) and (max-width:1023.99px){
 .site-primary-footer-wrap .ast-builder-grid-row.ast-builder-footer-grid-columns{grid-template-columns:1fr 1fr}
}

/* FOOTER TEXT WRAPPING — the theme sets overflow-wrap:anywhere on body text,
   which creates a soft-break opportunity between *every* pair of characters,
   including inside non-breaking spaces. That let the postcode in the address
   orphan onto its own line in the narrow four-column desktop footer.
   break-word keeps long unbreakable strings (email addresses) from
   overflowing, but only breaks as a last resort, so normal word spacing and
   the non-breaking spaces in "Bengaluru - 560108" are respected. */
.site-footer .as-flist li,.site-footer .as-fcontact li{overflow-wrap:break-word}

/* --- LEGAL DOCUMENT PAGES (Privacy Policy, Terms, Disclaimer) ---
   These pages are read in sequence rather than scanned, so the site's display
   components are the wrong tool for them: .as-h2 runs up to 46px, the card
   grids would break a legal argument into tiles, and Astra zeroes heading
   margin-top, which would run the numbered sections together with no
   separation. This block is a reading measure and a vertical rhythm only --
   no new colours, fonts or layout ideas beyond what the design system
   already uses. */
.as-pagehero.is-compact{min-height:0;padding:150px 24px 70px}
.as-pagehero.is-compact h1{font-size:clamp(30px,4vw,42px);max-width:none}
/* Three classes: WordPress's constrained-layout rule is
   .wp-block-group.is-layout-constrained > :where(:not(.alignleft)...) at
   specificity (0,2,0) and sets max-width to the 1240px content size, so a
   single .as-legal class loses and the reading measure never applies. */
.wp-block-group .as-legal.as-legal{max-width:900px;margin-inline:auto}
.as-legal h2{font-family:Raleway,sans-serif;font-weight:700;font-size:20px;line-height:1.35;color:#1a1a1a;margin:52px 0 14px}
.as-legal h2:first-of-type{margin-top:0}
.as-legal h3{font-family:Raleway,sans-serif;font-weight:700;font-size:16.5px;line-height:1.45;color:#1a1a1a;margin:30px 0 10px}
.as-legal p{font-family:Roboto,sans-serif;font-size:15.5px;line-height:1.85;color:#4a4a4a;margin:0 0 16px}
.as-legal ul{margin:0 0 20px;padding-left:22px}
.as-legal li{font-family:Roboto,sans-serif;font-size:15.5px;line-height:1.8;color:#4a4a4a;margin:0 0 7px}
.as-legal a{color:#1a1a1a;text-decoration:underline;text-underline-offset:2px}
.as-legal a:hover,.as-legal a:focus-visible{color:#c4780f}
.as-legal .as-legal__meta{font-family:Roboto,sans-serif;font-size:13px;letter-spacing:.02em;color:#8a8a8a;margin:0 0 46px}
.as-legal__contact{margin-top:58px;padding:30px 32px;background:#f7f7f5;border-left:3px solid #f9ad4a}
.as-legal__contact p{margin:0 0 8px}
.as-legal__contact p:last-child{margin-bottom:0}
@media(max-width:720px){
 .as-pagehero.is-compact{padding:130px 24px 54px}
 .as-legal h2{font-size:18.5px;margin-top:44px}
 .as-legal__contact{padding:24px 22px}
}