/* =============================================================
   Mindtrades — Homepage Modernization Layer
   =============================================================
   Loaded after Webflow's compiled CSS to apply conservative
   typography + button refinements on top of the legacy export
   without touching the HTML structure.
   Scope: index.html only (linked from <head>).
   Strategy: override selected Webflow classes with refined
   values. Do not introduce new layout or restructure anything.
   ============================================================= */

/* =============================================================
   GLOBAL REDUCED-MOTION FALLBACK (A11Y-06)
   =============================================================
   Defensive: every transition/animation site-wide is short-circuited
   for users with prefers-reduced-motion: reduce. Individual files
   may still declare specific overrides — this is the safety net.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ====  Body-level type refinement  ============================ */
/* Enable Inter's modern alternates (cv02 single-storey g, cv11
   straight-l, ss01 standard, cv03/cv04 number-related improvements)
   and crisper rendering. Inter is self-hosted via /css/fonts.css
   (@font-face, variable woff2) — loaded on every page. */
body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01" !important;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TYPOGRAPHIC SCALE — McKinsey/Faculty/EPAM register
   ============================================================
   - H1+H2 in Fraunces (serif w/ optical sizing) → editorial,
     premium, distinctive vs the Inter-everywhere SaaS startup look.
   - H3+H4+H5 in Inter (sans 600/500) → utility headings, crisp,
     readable, paired with Fraunces above for type-system harmony.
   - Major Third scale (1.25) — H1 72 → H2 48 → H3 32 → H4 24 → H5 18.
   ============================================================ */

/* Hero (H1) — Fraunces optical-72, weight 500, very tight tracking */
.h1, h1 {
  font-family: "Fraunces", Charter, "Iowan Old Style", "Source Serif Pro",
    Georgia, "Times New Roman", serif !important;
  font-size: clamp(44px, 5.8vw, 72px) !important;
  font-weight: 500 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.025em !important;
  font-feature-settings: "ss01", "ss02", "kern" !important;
  font-optical-sizing: auto !important;
  font-variation-settings: "opsz" 144 !important;
  color: #0a0a0a !important;
  -webkit-font-smoothing: antialiased;
}
.h1.subpage {
  font-size: clamp(32px, 4.2vw, 52px) !important;
}

/* Section heading (H2) — Fraunces optical-72, weight 500 */
.h2, h2 {
  font-family: "Fraunces", Charter, "Iowan Old Style", "Source Serif Pro",
    Georgia, "Times New Roman", serif !important;
  font-size: clamp(32px, 3.4vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.022em !important;
  font-feature-settings: "ss01", "ss02", "kern" !important;
  font-optical-sizing: auto !important;
  font-variation-settings: "opsz" 72 !important;
  color: #0a0a0a !important;
}

/* Sub-section heading (H3) — Inter 600, crisp utility */
.h3, h3 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif !important;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.018em !important;
  font-feature-settings: "cv02", "cv11", "ss01" !important;
  color: #0a0a0a !important;
}

/* Card / inline heading (H4) — Inter 600, denser */
.h4, h4 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.012em !important;
  font-feature-settings: "cv02", "cv11", "ss01" !important;
  color: #0a0a0a !important;
}

/* Small heading / stat label (H5) — Inter 600 */
.h5, h5 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em !important;
  color: #0a0a0a !important;
}

/* ====  Mono uppercase eyebrow — the distinctive signal  ======
   No competitor uses a mono-font eyebrow tag. This is the
   engineering-rigor tell that says "we ship code, not slides."
   Applied above .h1 / hero subheadings via existing .mt-tag class
   (defined in MindtradesPage.astro). Tightened here for the
   pixel-perfect register. */
.mt-tag {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular,
    "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  margin-bottom: 20px !important;
  display: inline-block;
}
/* ====  Subheading / paragraph refinement  ==================== */
.subheading {
  font-feature-settings: "cv02", "cv11" !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
}

/* ====  Numerals use tabular nums (counter stats, prices)  ==== */
.h4.stat,
.mt-pricing,
.statistic {
  font-variant-numeric: tabular-nums !important;
}

/* ====  Button refinement — global-button (primary CTA)  ====== */
/* Smooth transition, subtle hover lift, refined shadow on hover.
   Webflow's default button has no transitions. */
.global-button,
.global-button.w-button {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.18s ease !important;
  letter-spacing: -0.005em !important;
  font-weight: 600 !important;
  will-change: transform;
}
.global-button:hover,
.global-button.w-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(22, 22, 22, 0.18) !important;
}
.global-button:active,
.global-button.w-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(22, 22, 22, 0.12) !important;
}

/* ====  Secondary buttons / button-6  ========================= */
.button-6,
.button-6.w-button {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.18s ease,
              background-color 0.18s ease !important;
  letter-spacing: -0.005em !important;
  font-weight: 600 !important;
}
.button-6:hover,
.button-6.w-button:hover {
  transform: translateY(-1px) !important;
}

/* ====  Red-link refinement (text links)  ===================== */
.red-link {
  transition: opacity 0.15s ease, text-decoration-thickness 0.15s ease !important;
  text-underline-offset: 3px !important;
}
.red-link:hover {
  opacity: 0.7 !important;
  text-decoration-thickness: 2px !important;
}

/* ====  Focus-visible ring for keyboard accessibility  ======== */
.global-button:focus-visible,
.button-6:focus-visible,
.red-link:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #161616 !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

/* ====  Case-study card screenshots  ==========================
   Two layouts on the site:
     - .a-feature-grid.projects     (/projects/ — 2-col mosaic)
     - .a-feature-grid-2.case-study (homepage + /projects/ — 2-col,
                                     text-on-left / screenshot-on-right)

   Webflow's original CSS gave these images width:100% / height:auto,
   so they render at intrinsic aspect — which is portrait (1.17:1)
   for full-page website screenshots, producing very tall cards.

   Lock the screenshot area to 16:9 with object-fit: cover so cards
   stay landscape, only the top of the screenshot shows (the part
   that matters — hero + nav), and tall PNG sources don't dominate
   vertical space.
   Also applies to <picture> wrappers (we added WebP sources in
   v4 — they need the same aspect lock).
   ============================================================== */
.a-feature-grid.projects .image-13,
.a-feature-grid.projects img[alt*="screenshot"],
.a-feature-grid.projects img[alt*="Case Study"],
.a-feature-grid-2.case-study img[alt*="screenshot"],
.a-feature-grid-2.case-study img[alt*="Case Study"],
.a-feature-grid-2.case-study picture > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  background: #f5f5f5;
}
/* Picture wrappers inherit width:100% via the inner img above;
   ensure the <picture> itself doesn't add extra box-sizing weirdness */
.a-feature-grid.projects picture,
.a-feature-grid-2.case-study picture {
  display: block;
  width: 100%;
}

/* On tablet (single column), pull aspect to 3:2 so the screenshot
   detail is more visible at narrow widths. */
@media (max-width: 991px) {
  .a-feature-grid.projects .image-13,
  .a-feature-grid.projects img[alt*="screenshot"],
  .a-feature-grid.projects img[alt*="Case Study"],
  .a-feature-grid-2.case-study img[alt*="screenshot"],
  .a-feature-grid-2.case-study img[alt*="Case Study"],
  .a-feature-grid-2.case-study picture > img {
    aspect-ratio: 3 / 2;
  }
}

/* ====  Subtle image refinement  ============================== */
/* Webflow images can look soft on retina. Force crisp rendering on
   logos and small UI graphics; leave photographs untouched. */
.image-2,
.image-4,
.link-arrow,
.image-15 {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ====  Selection color (subtle but on-brand)  ================ */
::selection {
  background-color: #161616;
  color: #ffffff;
}

/* ====  Statistic counter visual refinement  ================== */
/* PureCounter targets .h4.stat — tighten letter-spacing on big numerals */
.h4.stat {
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  font-feature-settings: "tnum", "ss01" !important;
}

/* =============================================================
   NAVIGATION MODERNIZATION
   =============================================================
   Sticky-on-scroll with subtle backdrop blur, refined link
   typography with hover-underline animation, modern dropdown
   panels (rounded, padded, soft shadow). Applies to BOTH legacy
   index.html and Astro pages — both use the same Webflow nav
   class names (.navbar-no-shadow-2, .nav-link-2, .nav-dropdown-2,
   .nav-dropdown-list-2, .nav-dropdown-link-2, .button-6).
   ============================================================= */

/* ----  Sticky shell  ---------------------------------------- */
.navbar-no-shadow-2 {
  position: sticky !important;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
          backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}
/* Shrink + border + denser bg once user scrolls past hero */
.navbar-no-shadow-2.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: #e6e6e6;
  box-shadow: 0 2px 12px rgba(22, 22, 22, 0.03);
}

/* ----  Container height shrink on scroll  ------------------- */
.navbar-no-shadow-container-2 {
  transition: padding 0.2s ease;
}

/* ----  Top-level nav links  ---------------------------------
   Tightened to 14px / 500 / sentence case — matches Faculty AI,
   ThoughtWorks, EPAM. Avoids the 16px "SaaS startup" feel and
   the uppercase tracking that only BCG/McKinsey can pull off. */
.nav-link-2 {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: #1a1a1a !important;
  padding: 8px 14px !important;
  position: relative;
  transition: color 0.15s ease !important;
}
.nav-link-2:hover { color: #0a0a0a !important; }
/* Underline-grow hover indicator */
.nav-link-2::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 1.5px;
  background: #161616;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.nav-link-2:hover::after,
.nav-link-2.w--current::after {
  transform: scaleX(1);
}

/* ----  Dropdown toggles (Products / Services / Industries)  - */
.nav-dropdown-toggle-2 {
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  position: relative;
  transition: color 0.15s ease !important;
}
.nav-dropdown-toggle-2::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 28px;
  bottom: 4px;
  height: 1.5px;
  background: #161616;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.nav-dropdown-2:hover .nav-dropdown-toggle-2::after,
.nav-dropdown-2.w--current .nav-dropdown-toggle-2::after,
.nav-dropdown-2.w--open .nav-dropdown-toggle-2::after {
  transform: scaleX(1);
}
/* Dropdown caret icon — tighter rotation */
.nav-dropdown-icon-2 {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.nav-dropdown-2.w--open .nav-dropdown-icon-2 {
  transform: rotate(180deg);
}

/* ----  Dropdown panels  ------------------------------------- */
.nav-dropdown-list-2 {
  border: 1px solid #e6e6e6 !important;
  box-shadow: 0 16px 36px rgba(22, 22, 22, 0.08) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  background: #ffffff !important;
  min-width: 260px !important;
  margin-top: 8px !important;
}

/* ----  Dropdown links  -------------------------------------- */
.nav-dropdown-link-2 {
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.35 !important;
  transition: background 0.12s ease, color 0.12s ease !important;
  position: relative;
}
.nav-dropdown-link-2:hover {
  background: #fafafa !important;
  color: #161616 !important;
}
.nav-dropdown-link-2.w--current {
  background: #f0f0f0 !important;
  font-weight: 600 !important;
}

/* ----  CTA button in nav (button-6)  ------------------------ */
/* Already refined by light layer above. Add subtle nav-context tweak. */
.button-6.w-button {
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
}

/* ----  Mobile hamburger  ------------------------------------ */
.menu-button-2 {
  transition: opacity 0.15s ease;
}
.menu-button-2:hover { opacity: 0.7; }
.menu-button-2.w--open {
  background: transparent !important;
  color: #161616 !important;
}

/* ----  Reduced motion respect  ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .navbar-no-shadow-2,
  .navbar-no-shadow-container-2,
  .nav-link-2,
  .nav-link-2::after,
  .nav-dropdown-toggle-2::after,
  .nav-dropdown-icon-2,
  .nav-dropdown-link-2,
  .menu-button-2 {
    transition: none !important;
  }
}

/* =============================================================
   MOBILE TAP TARGETS (MOBILE-01) — 44×44 minimum on ≤991px
   =============================================================
   WCAG 2.5.5 / Apple HIG / Android M3 all converge on a 44×44px
   minimum interactive surface. Webflow's default nav-link-2
   renders ~32px tall with 8px vertical padding — fine on desktop
   hover, too small for thumb. This block bumps nav, dropdown,
   and footer links to the spec while leaving CTA buttons alone
   (they're already ≥ 44px via existing button-6 padding).

   Scoped under @media (max-width: 991px) — same breakpoint as
   the mega-menu fallback (megamenu.css:386) so behavior is
   consistent across the mobile drawer surface.

   display: flex + align-items: center (NOT line-height: 44px) so
   multi-line drawer link labels still wrap correctly without
   clipping to a single line.
   ============================================================= */
@media (max-width: 991px) {
  .nav-link-2,
  .nav-link-2.mt-mega-trigger,
  .nav-dropdown-link-2 {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
  }

  /* Button-variant trigger (the <button class="mt-mega-trigger">) */
  button.mt-mega-trigger {
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Footer link defensive coverage — Webflow's footer-light uses
     these classes; even though Phase 11's 64 findings were all
     nav, the spec applies site-wide. */
  .footer-link,
  .footer-link-two,
  .footer-link-2 {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 6px 4px;
  }

  /* Drawer fallback — catches any link rendered inside the mobile
     drawer's .nav-menu-2 ul that doesn't match a specific class
     above (excludes button-like CTAs by class hint). */
  .nav-menu-2 a:not([class*="button"]):not([class*="cta"]):not(.button-6) {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Brand-styled inline link (red-link is the canonical inline-link
     class — refined typography lives at line 188 above). On mobile,
     ensure tap-target compliance without breaking inline flow:
     inline-flex keeps the link inside its sentence, vertical padding
     reaches 44px total height via the line-height + padding sum. */
  a.red-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 2px;
  }
}

/* =============================================================
   2026 PROGRESSIVE ENHANCEMENTS (MOD26-02, MOD26-03, MOD26-09)
   =============================================================
   Phase 12. Progressive — wrapped in @supports so older browsers
   ignore the rules cleanly. Respect prefers-reduced-motion.
   ============================================================= */

/* ---- MOD26-02: text-wrap balance/pretty ---------------------
   `balance` on headings minimizes ragged short last lines on
   multi-line H1/H2 (editorial-magazine feel). `pretty` on body
   prose eliminates single-word orphans on the final line.
   ------------------------------------------------------------- */
@supports (text-wrap: balance) {
  h1, h2, .h1, .h2 {
    text-wrap: balance;
  }
}
@supports (text-wrap: pretty) {
  p, .subheading, li {
    text-wrap: pretty;
  }
}

/* ---- MOD26-03: container queries on card components ---------
   Switches card type-scale on the card's own width, not the
   viewport width — so a 3-col card and a 4-col card auto-adapt
   without bespoke media-query breakpoints per layout. container-type
   silently falls back to no-op on older browsers.
   ------------------------------------------------------------- */
.mt-mega-card,
.a-feature-card-3,
.a-feature-card-2 {
  container-type: inline-size;
  container-name: card;
}
@container card (max-width: 320px) {
  .mt-mega-name { font-size: 14px; }
  .mt-mega-desc { font-size: 12px; }
}

/* ---- MOD26-04 (modernize.css companion): :has() backdrop ----
   Subtle border accent on the sticky navbar when ANY mega panel
   is open. Visual cue without changing layout. The mega-menu's
   own .mt-mega-backdrop handles the page-body scrim.
   ------------------------------------------------------------- */
@supports selector(:has(*)) {
  .navbar-no-shadow-2:has(.mt-mega.is-open) {
    border-bottom-color: #161616 !important;
  }
}

/* ---- MOD26-09: scroll-driven reveal on case-study/industry --
   Cards fade + lift as they cross the entry threshold. Falls
   back to immediate visibility on browsers without animation-
   timeline support (no @supports needed since `animation` is
   universally supported; the timeline value is just ignored).
   But we wrap in @supports for clarity and to gate the entire
   keyframes+rule pair together.
   ------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  .a-feature-card-3,
  .mt-mega-card,
  .case-study-section,
  [class*="industry"] .a-feature-card-2 {
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes scroll-reveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: scroll()) {
    .a-feature-card-3,
    .mt-mega-card,
    .case-study-section,
    [class*="industry"] .a-feature-card-2 {
      animation: none !important;
    }
  }
}