/* ==========================================================================
   Aayam Technovations — Base layer
   Scoped reset, typography, layout primitives, buttons, forms.

   IMPORTANT: the legacy 167KB style.css is still loaded on legacy pages and
   styles bare element selectors (body, h1-h6, p, a, ul, img, input...).
   The reset below is scoped to .ay-page and uses :where() so it holds
   specificity at 0 — components override freely, but .ay-page (0,1,0) still
   beats every bare element rule in the legacy sheet.
   ========================================================================== */

/* --- scoped reset ------------------------------------------------------- */
/* The browser's own `[hidden] { display: none }` lives in the user-agent
   sheet, the lowest-priority layer there is -- any component class that
   sets its own `display` (`.ay-card { display: flex }`, say) wins over it
   regardless of source order, so an element toggled `hidden` by script
   would stay visually laid out. `!important` here is deliberate: this
   attribute exists specifically to say "not displayed, full stop", and nothing
   should be able to out-specificity that by accident. */
[hidden] { display: none !important; }

.ay-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd) {
  margin: 0;
  padding: 0;
}
.ay-page :where(ul, ol) { list-style: none; }
.ay-page :where(a) { color: inherit; text-decoration: none; }
/* Bootstrap's own `a:hover { color: #0a58ca }` and the browser's default
   `a:visited` both carry a real pseudo-class, so both beat the :where() rule
   above once a link is hovered or has been visited -- any link with no
   colour override of its own turned Bootstrap-blue after a click. Wrapping
   the element in :where() again keeps it scoped to anchors without adding
   to the specificity, so this lands at (0,2,0) -- enough to outrank both,
   while a component that wants a genuine hover colour
   (`.ay-sidebar__cat:hover`, `.ay-link:hover`, ...) carries that same
   specificity and is declared later, in ay-components.css, so it still wins
   that tie.

   `:not(:where(.ay-btn))` excludes every button-styled anchor: `.ay-btn`
   sets its colour directly on itself (often white-on-red), and `inherit`
   here reads the *parent's* colour, not the button's own -- on anything but
   a plain text link that parent is rarely the right value. `.ay-btn`
   already restates its own colour on :hover/:focus itself (see ay-base.css
   below), so it does not need this rule to begin with. The same trap
   applies to any other component whose anchor sets colour directly rather
   than inheriting it (the mega menu, footer socials, the mobile bar's
   primary link, ...) -- those each carry their own `:visited` companion at
   (0,2,0). `:not()` normally takes on its argument's specificity, which
   would make a bare `:not(.ay-btn)` push this whole selector to (0,3,0) and
   bury every one of those companions again regardless of source order --
   wrapping the argument in :where() keeps that contribution at zero, so
   this still lands at exactly (0,2,0). */
.ay-page :where(a):not(:where(.ay-btn)):visited,
.ay-page :where(a):not(:where(.ay-btn)):hover,
.ay-page :where(a):not(:where(.ay-btn)):focus,
.ay-page :where(a):not(:where(.ay-btn)):active { color: inherit; }
.ay-page :where(img, svg, video) { display: block; max-width: 100%; height: auto; }
.ay-page :where(button, input, select, textarea) { font: inherit; color: inherit; }
.ay-page :where(button) { background: none; border: 0; cursor: pointer; }
.ay-page :where(table) { border-collapse: collapse; }
.ay-page :where(*, *::before, *::after) { box-sizing: border-box; }

/* --- document ----------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body.ay-page {
  margin: 0;
  background: var(--ay-bg);
  color: var(--ay-text);
  font-family: var(--ay-font);
  font-size: var(--ay-fs-base);
  line-height: var(--ay-lh);
  font-weight: var(--ay-fw-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Anchor targets clear the sticky header. */
.ay-page :where([id]) { scroll-margin-top: calc(var(--ay-header-h) + var(--ay-4)); }

body.ay-nav-open { overflow: hidden; }

/* --- typography --------------------------------------------------------- */
.ay-page :where(h1, h2, h3, h4) {
  font-family: var(--ay-font-display);
  font-weight: var(--ay-fw-bold);
  line-height: var(--ay-lh-tight);
  letter-spacing: var(--ay-tracking-tight);
  color: var(--ay-text);
  text-wrap: balance;
}

/* :where() keeps the element defaults at specificity (0,1,0) so a single
   component class such as .ay-sidebar__title can override them. Without it
   `.ay-page h2` is (0,1,1) and silently wins every override. */
.ay-h1, .ay-page :where(h1) { font-size: var(--ay-fs-4xl); }
.ay-h2, .ay-page :where(h2) { font-size: var(--ay-fs-3xl); }
.ay-h3, .ay-page :where(h3) { font-size: var(--ay-fs-2xl); line-height: var(--ay-lh-snug); }
.ay-h4, .ay-page :where(h4) { font-size: var(--ay-fs-xl); line-height: var(--ay-lh-snug); }

.ay-lead {
  font-size: var(--ay-fs-lg);
  color: var(--ay-text-muted);
  line-height: var(--ay-lh);
  text-wrap: pretty;
}

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

/* Eyebrow: small uppercase label above every H2.
   The leading/trailing red rules were removed on request -- rendered at this
   size they read as a dash rather than as decoration. */
.ay-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--ay-font);
  font-size: var(--ay-fs-xs);
  font-weight: var(--ay-fw-semi);
  letter-spacing: var(--ay-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ay-accent-text);
  margin-bottom: var(--ay-3);
}
/* On dark surfaces the accessible dark red (#C40000) is nearly invisible, so
   eyebrows switch to a light red that reads cleanly against charcoal. */
.ay-on-invert .ay-eyebrow,
.ay-section--invert .ay-eyebrow,
.ay-hero__content .ay-eyebrow,
.ay-pagehero .ay-eyebrow,
.ay-modal__aside .ay-eyebrow,
.ay-mega__feature .ay-eyebrow { color: #FF6B6B; }

/* --- layout primitives -------------------------------------------------- */
.ay-container {
  width: 100%;
  max-width: var(--ay-container);
  margin-inline: auto;
  padding-inline: var(--ay-gutter);
}
.ay-container--wide { max-width: var(--ay-container-wide); }
.ay-container--narrow { max-width: 820px; }

.ay-section { padding-block: var(--ay-section-y); }
.ay-section--tight { padding-block: calc(var(--ay-section-y) * .6); }
/* For a section that opens a page directly, with no banner above it to
   separate it from the header. A full section pad there reads as a gap
   where something failed to load. */
.ay-section--opens { padding-top: var(--ay-6); }
.ay-section--alt { background: var(--ay-bg-alt); }
.ay-section--invert {
  background: var(--ay-bg-invert);
  color: var(--ay-text-on-invert);
}
.ay-section--invert :where(h1, h2, h3, h4) { color: var(--ay-white); }
.ay-section--invert .ay-lead,
.ay-section--invert .ay-muted { color: var(--ay-text-on-invert-muted); }

.ay-grid {
  display: grid;
  gap: var(--ay-5);
}
.ay-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ay-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ay-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ay-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1199px) {
  .ay-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .ay-grid--3, .ay-grid--4, .ay-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .ay-grid--2, .ay-grid--3, .ay-grid--4, .ay-grid--5 { grid-template-columns: minmax(0, 1fr); }
}

.ay-stack { display: grid; gap: var(--ay-4); }
.ay-stack--sm { gap: var(--ay-2); }
.ay-stack--lg { gap: var(--ay-6); }

.ay-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ay-3);
}

/* Section heading block */
.ay-section-head { max-width: 680px; margin-bottom: var(--ay-7); }
.ay-section-head--center {
  margin-inline: auto;
  text-align: center;
}
.ay-section-head--center .ay-eyebrow { justify-content: center; }
.ay-section-head p { margin-top: var(--ay-3); }

/* --- buttons ------------------------------------------------------------ */
.ay-btn {
  --_bg: var(--ay-red);
  --_fg: #fff;
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ay-2);
  padding: 14px 26px;
  border-radius: var(--ay-r-pill);
  background: var(--_bg);
  color: var(--_fg);
  border: 1.5px solid var(--_bd);
  font-size: var(--ay-fs-sm);
  font-weight: var(--ay-fw-semi);
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--ay-dur-1) var(--ay-ease),
    color var(--ay-dur-1) var(--ay-ease),
    transform var(--ay-dur-1) var(--ay-ease),
    box-shadow var(--ay-dur-2) var(--ay-ease);
}
/* Restates the colour on hover, which looks redundant and is not.
   bootstrap.min.css loads before this file and carries a bare
   `a:hover { color: #0a58ca }`. That selector scores (0,1,1) against the
   (0,1,0) of `.ay-btn`, so it won, and every anchor styled as a button --
   primary, ghost, WhatsApp -- turned Bootstrap blue under the cursor.
   `.ay-btn:hover` scores (0,2,0) and takes it back. */
.ay-btn:hover,
.ay-btn:focus { color: var(--_fg); }

.ay-btn:hover { transform: translateY(-2px); }
.ay-btn:active { transform: translateY(0); }
.ay-btn:focus-visible { outline: none; box-shadow: var(--ay-focus); }

.ay-btn--primary { --_bg: var(--ay-red); --_fg: #fff; box-shadow: var(--ay-shadow-red); }
.ay-btn--primary:hover { --_bg: var(--ay-red-600); }

.ay-btn--dark { --_bg: var(--ay-ink); --_fg: #fff; }
.ay-btn--dark:hover { --_bg: var(--ay-ink-700); }

.ay-btn--ghost {
  --_bg: transparent;
  --_fg: var(--ay-text);
  --_bd: var(--ay-border);
}
.ay-btn--ghost:hover { --_bg: var(--ay-ink); --_fg: #fff; --_bd: var(--ay-ink); }

.ay-btn--ghost-invert {
  --_bg: transparent;
  --_fg: #fff;
  --_bd: rgba(255, 255, 255, .45);
}
.ay-btn--ghost-invert:hover { --_bg: #fff; --_fg: var(--ay-ink); --_bd: #fff; }

.ay-btn--white { --_bg: #fff; --_fg: var(--ay-ink); }
.ay-btn--white:hover { --_bg: var(--ay-surface); }

.ay-btn--wa { --_bg: var(--ay-wa); --_fg: #fff; }
/* Deliberately no colour shift: the button and its label stay exactly as
   they are and the only feedback is the pop. */
.ay-btn--wa:hover { --_bg: var(--ay-wa); transform: scale(1.045); }
.ay-btn--wa:active { transform: scale(.985); }
/* Honour a reduced-motion preference: the scale is decoration, and the
   button is still obviously a button without it. */
@media (prefers-reduced-motion: reduce) {
  .ay-btn--wa:hover,
  .ay-btn--wa:active { transform: none; }
}

.ay-btn--lg { padding: 17px 34px; font-size: var(--ay-fs-base); }
.ay-btn--sm { padding: 10px 18px; font-size: var(--ay-fs-xs); }
.ay-btn--block { width: 100%; }

.ay-btn i { font-size: 1.1em; line-height: 1; }

/* Text link with animated underline */
.ay-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ay-2);
  font-weight: var(--ay-fw-semi);
  font-size: var(--ay-fs-sm);
  color: var(--ay-accent-text);
}
.ay-link i { transition: transform var(--ay-dur-1) var(--ay-ease); }
.ay-link:hover i { transform: translateX(4px); }

/* --- forms -------------------------------------------------------------- */
.ay-field { display: grid; gap: var(--ay-2); }

.ay-label {
  font-size: var(--ay-fs-sm);
  font-weight: var(--ay-fw-medium);
  color: var(--ay-text);
}
.ay-label .ay-req { color: var(--ay-red-600); }

.ay-input,
.ay-select,
.ay-textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--ay-white);
  border: 1.5px solid var(--ay-border);
  border-radius: var(--ay-r-sm);
  font-size: var(--ay-fs-sm);
  color: var(--ay-text);
  transition: border-color var(--ay-dur-1) var(--ay-ease), box-shadow var(--ay-dur-1) var(--ay-ease);
}
.ay-input::placeholder,
.ay-textarea::placeholder { color: var(--ay-slate-400); }

.ay-input:focus,
.ay-select:focus,
.ay-textarea:focus {
  outline: none;
  border-color: var(--ay-red);
  box-shadow: var(--ay-focus);
}
.ay-textarea { resize: vertical; min-height: 110px; }

.ay-select {
  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 fill='%235A6B71' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}

.ay-input.is-invalid,
.ay-select.is-invalid,
.ay-textarea.is-invalid { border-color: var(--ay-red-600); }

.ay-error {
  font-size: var(--ay-fs-xs);
  color: var(--ay-red-600);
  font-weight: var(--ay-fw-medium);
}

/* Honeypot — off-screen rather than display:none, which many bots skip. */
.ay-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Form on a dark surface */
.ay-on-invert .ay-label { color: var(--ay-text-on-invert); }
.ay-on-invert .ay-input,
.ay-on-invert .ay-select,
.ay-on-invert .ay-textarea {
  background: rgba(255, 255, 255, .06);
  border-color: var(--ay-border-invert);
  color: #fff;
}
.ay-on-invert .ay-input::placeholder,
.ay-on-invert .ay-textarea::placeholder { color: var(--ay-text-on-invert-muted); }

/* --- utilities ---------------------------------------------------------- */
.ay-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ay-skip-link {
  position: absolute;
  left: var(--ay-4);
  top: -100px;
  z-index: calc(var(--ay-z-modal) + 10);
  padding: 12px 20px;
  background: var(--ay-ink);
  color: #fff;
  border-radius: 0 0 var(--ay-r-sm) var(--ay-r-sm);
  font-size: var(--ay-fs-sm);
  font-weight: var(--ay-fw-semi);
  transition: top var(--ay-dur-1) var(--ay-ease);
}
.ay-skip-link:focus { top: 0; }

.ay-text-center { text-align: center; }
.ay-mt-auto { margin-top: auto; }

/* --- scroll reveal ------------------------------------------------------ */
/* Elements start hidden ONLY when JS is present to reveal them. ay-site.js
   sets .ay-js on <html> immediately, so a JS failure leaves content visible. */
.ay-js [data-ay-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--ay-dur-3) var(--ay-ease-out),
    transform var(--ay-dur-3) var(--ay-ease-out);
  transition-delay: var(--ay-reveal-delay, 0ms);
}
.ay-js [data-ay-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ay-js [data-ay-reveal] { opacity: 1; transform: none; }
}