/* =========================================================
   Abhigyan Consulting — Global Stylesheet
   Ported from business-consultant-website-design/src/styles/tokens.css —
   same fonts, colors, spacing, and motion values as the real site.
   ========================================================= */

:root {
  --font-headline-family: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --ink-950: #000000;
  --ink-900: #171717;
  --ink-800: #262626;
  --ink-700: #4B5563;
  --ink-600: #6B7280;
  --ink-500: #737373;
  --ink-400: #A3A3A3;
  --ink-300: #D4D4D4;
  --ink-200: #E5E5E5;
  --ink-150: #ECECEC;
  --ink-100: #F5F5F5;
  --paper: #FFFFFF;

  --accent-700: #1D4ED8;
  --accent-600: #2563EB;
  --accent-500: #3B82F6;
  --accent-400: #60A5FA;
  --accent-200: #BFDBFE;
  --accent-100: #DBEAFE;
  --accent-50: #EFF6FF;
  --accent-gradient: linear-gradient(100deg, #1D4ED8 0%, #3B82F6 100%);

  --color-bg-page: #FFFFFF;
  --color-text-primary: var(--ink-950);
  --color-text-secondary: var(--ink-600);
  --color-text-accent: var(--accent-600);
  --color-border: var(--ink-150);

  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-md: 0 8px 24px rgba(20, 20, 30, 0.07), 0 2px 6px rgba(20, 20, 30, 0.04);
  --shadow-lg: 0 20px 48px rgba(20, 20, 30, 0.10), 0 4px 12px rgba(20, 20, 30, 0.05);
}

@font-face {
  font-family: 'Manrope';
  src: url('https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRqAuZuw1Bx9mbZk79FO_F87jxeN7B.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  width: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline-family);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 1rem;
}
h1 { font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.75rem, 1.35rem + 2vw, 2.75rem); }
h3 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); }
h4 { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); }

p { margin: 0 0 1rem; color: var(--color-text-secondary); }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }

.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.container-wide { width: 90%; max-width: 1280px; margin: 0 auto; }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin-bottom: 1rem;
}
.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section { width: 100%; padding: 6rem 0; }
/* Soft brand-blue tint (not plain grey) so alternating sections read as a
   clear rhythm while scrolling, without competing with the black
   .section--dark blocks. */
.section--alt { background: linear-gradient(180deg, #E4EDFA 0%, #EAF1F9 100%); }
.section--dark { background: #000; color: #fff; }
.section--dark p { color: var(--ink-400); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
/* .card itself always has a white background (see .card below), even when
   it sits inside a .section--dark block (e.g. the numbered step cards on
   Solutions) — so its heading needs to stay dark, not inherit the white
   text color meant for content sitting directly on the black section
   background. This selector is more specific (extra class) so it wins. */
.section--dark .card h4 { color: var(--ink-950); }

/* Charcoal — used specifically for sections that hold a .card grid. White
   cards on a plain white/light .section had almost no contrast against
   their own background, so every section containing cards now sits on
   this darker surface instead; the cards themselves stay white and read
   clearly against it. Same white-heading / dark-card-heading pattern as
   .section--dark above, just a lighter, warmer charcoal instead of pure
   black. */
.section--charcoal { background: #262626; color: #fff; }
.section--charcoal p { color: var(--ink-300); }
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3, .section--charcoal h4 { color: #fff; }
.section--charcoal .card h4 { color: var(--ink-950); }

/* For sections that only hold a heading (plus maybe one button) — no
   grid/card content underneath — the default 6rem top+bottom padding
   reads as an oversized gap around one or two short lines. */
.section--tight { padding: 4rem 0; }

/* ---- Buttons (min 48px touch target) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.75rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease-glide), background 0.3s var(--ease-glide), color 0.3s var(--ease-glide), border-color 0.3s var(--ease-glide);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--ink-950); color: #fff; }
.btn--primary:hover { background: var(--accent-600); }
.btn--secondary { background: transparent; color: var(--ink-800); border-color: var(--ink-300); }
.btn--secondary:hover { background: var(--ink-100); border-color: var(--ink-950); }

/* ---- Header ---- */
.site-header {
  /* Full-width and flush against the top edge on every breakpoint — the
     glass background (added below on scroll) needs to span the entire
     screen, not just a centered content column. Logo/menu spacing from
     the screen edges comes from padding here, not a width/margin box. */
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 5%;
  background: transparent;
  transition: background 0.3s var(--ease-standard), backdrop-filter 0.3s var(--ease-standard), box-shadow 0.3s var(--ease-standard);
}
.site-header--scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-sm);
}

.site-header-logo {
  display: block;
  height: 96px;
  width: 96px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: 0 0 auto;
}
.site-header-logo img { height: 100%; width: 100%; object-fit: cover; }

.nav-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  background: var(--ink-950);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.3s var(--ease-glide), transform 0.3s var(--ease-glide);
}
.nav-trigger:hover { background: var(--ink-800); transform: translateY(-1px); }
.nav-trigger svg { width: 18px; height: 18px; }

.nav-flyout {
  /* position:absolute (flush at top:100% of .nav-trigger-wrap, which is
     position:relative) instead of position:fixed with a guessed top
     offset — a fixed gap left a strip of page between the trigger button
     and this panel that wasn't covered by any element, so moving the
     pointer through it looked like leaving the menu and closed it
     early. Flush positioning removes that dead zone entirely; the visual
     gap is padding-top instead, which is still part of this box. */
  position: absolute;
  top: 100%;
  right: 0;
  width: min(360px, 90vw);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  padding-top: 18px;
  z-index: 1001;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease-glide), transform 0.25s var(--ease-glide);
}
.nav-flyout.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.nav-flyout-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--ease-standard);
}
.nav-flyout-item:hover, .nav-flyout-item[aria-current="page"] { background: var(--accent-50); }
.nav-flyout-item-icon {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  color: var(--ink-500);
}
.nav-flyout-item-title { display: block; font-weight: 700; color: var(--ink-950); font-size: 0.9375rem; }
.nav-flyout-item-desc { display: block; font-size: 0.8125rem; color: var(--ink-500); margin-top: 2px; }

@media (max-width: 640px) {
  .nav-trigger-label { display: none; }
  /* justify-content:center is required here — .nav-trigger is a flex
     container with no explicit horizontal alignment, so once the label
     is hidden and only the icon remains, it was sitting at flex-start
     (the left edge of the circle) instead of centered in it. */
  .nav-trigger { width: 48px; padding: 0; border-radius: 50%; justify-content: center; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 188px 0 80px;
  overflow: hidden;
}
@media (max-width: 640px) {
  /* Header is shorter on mobile now (72px logo vs 96px on desktop), so the
     hero's top clearance needs to shrink to match — otherwise it keeps the
     desktop-sized gap even though the header above it got smaller. */
  .hero { padding-top: 164px; }
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Static mobile hero background — replaces the video below 640px (mobile
   data/perf, and the video's framing doesn't read well on a tall narrow
   screen). Hidden by default; the media query below swaps it in and hides
   .hero-video instead. Tablet and desktop keep the video. */
.hero-mobile-bg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.6) 100%);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; color: #fff; max-width: 780px; }
.hero-content .eyebrow { color: var(--accent-200); }
.hero-content p { color: rgba(255,255,255,0.82); font-size: 1.125rem; max-width: 620px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero--plain { min-height: 55vh; background: #fff; padding-top: 208px; }
@media (max-width: 640px) {
  .hero-video { display: none; }
  .hero-mobile-bg { display: block; }
}
.hero--plain .hero-content { color: var(--ink-950); text-align: center; max-width: 820px; margin: 0 auto; }
.hero--plain .hero-content p { color: var(--ink-600); margin-left: auto; margin-right: auto; }
.hero--plain .hero-actions { justify-content: center; }

/* Mobile pinned hero background image (Solutions / Industries / AI Lab / Insights / Contact) */
.hero-pin { display: none; }
.hero-pin-bg { display: none; }
.hero-pin-content { display: none; }
@media (max-width: 640px) {
  .hero--plain { display: none; }
  .hero-pin-content { display: block; }
  .hero-pin {
    /* 100vh on mobile is computed against the *largest* possible viewport
       (address bar hidden), while the fixed header renders against the
       *current* (often smaller, address-bar-visible) one — that mismatch
       is what left a real gap between the header and this section on
       actual phones. 100dvh tracks the current viewport instead; the
       100vh line stays first as a fallback for older browsers that don't
       support dvh (they'll just ignore the dvh line and keep using vh). */
    display: block;
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    background: #000;
  }
  .hero-pin-bg {
    /* 128px = the mobile header's real height (72px logo + 20px top/bottom
       padding = 112px) plus a small breathing buffer, so the pinned image
       clears the logo instead of tucking underneath it. Mobile logo is
       72px here even though desktop is 96px, so this is smaller than the
       desktop-header-based math would suggest. */
    display: block;
    position: fixed;
    top: 128px;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: calc(100% - 128px);
    height: calc(100dvh - 128px);
    object-fit: cover;
    object-position: center top;
    z-index: 0;
  }
  /* `~ *` (any element type), not `~ section` — catches every sibling
     inside <main> regardless of tag, not just <section>s. (<footer> is
     covered separately below since it's outside <main> and this selector
     can't reach it.) */
  .hero-pin ~ * {
    position: relative;
    z-index: 1;
    background: var(--color-bg-page);
  }
  /* The blanket white background right above is only a *default* for
     plain sections — it was equal-specificity to, and declared after,
     .section--alt/.section--dark, so it was silently overriding their
     actual color on every page with a pinned mobile hero (the alt-section
     tint and dark-section black were both getting flattened to white on
     mobile only). These restore the real color while keeping the same
     position/z-index stacking fix. */
  .hero-pin ~ .section--alt { background: linear-gradient(180deg, #E4EDFA 0%, #EAF1F9 100%); }
  .hero-pin ~ .section--dark { background: #000; }
  .hero-pin ~ .section--charcoal { background: #262626; }
  .hero-pin-content {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 40px 6% 56px;
    text-align: center;
  }
  .hero-pin-content .eyebrow { justify-content: center; display: flex; }
  .hero-pin-content .hero-actions { justify-content: center; }
}

/* ---- Cards / grids ---- */
.grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* The card's "prominent" look — full accent bar, elevated shadow, tinted
   border — is the permanent resting state now, not something that only
   appeared after a mouse hover. Touch devices (phones/tablets) never fire
   :hover at all, so gating the richer look behind it meant mobile users
   never saw it; making it unconditional means every device sees the same
   design regardless of input method. Hover still adds a small extra lift
   as a nice-to-have, but nothing needed for the card to look "designed"
   depends on it anymore. */
.card {
  position: relative;
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease-glide), box-shadow 0.3s var(--ease-glide), border-color 0.3s var(--ease-glide);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent-gradient);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(20, 20, 30, 0.16), 0 6px 16px rgba(20, 20, 30, 0.08);
}
.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--accent-600);
  font-family: var(--font-headline-family);
  font-weight: 800;
  font-size: 1.0625rem;
  color: #fff;
  margin-bottom: 16px;
}
.card h4 { margin-bottom: 8px; }
/* Card body copy inherited the site-wide secondary text color (--ink-600,
   a fairly light grey) meant for captions and fine print — too low
   contrast against the card's own white background to read comfortably. */
.card p { color: var(--ink-950); }
.card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.card-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-700);
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-full);
  padding: 4px 12px;
}

/* ---- Reveal ---- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-glide), transform 0.6s var(--ease-glide); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Forms ---- */
.form-panel { background: var(--paper); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--ink-800); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 1rem;
  color: var(--ink-950); background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  transition: border-color 0.3s var(--ease-standard);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink-950); }

.form-message { border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 20px; font-weight: 600; display: none; }
.form-message.is-visible { display: block; }
.form-message--success { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.form-message--error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

.form-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.form-tab {
  min-height: 48px; padding: 0 20px; border-radius: var(--radius-full); border: 1px solid var(--ink-200);
  background: #fff; font-weight: 600; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.form-tab[aria-selected="true"] { background: var(--ink-950); color: #fff; border-color: var(--ink-950); }
.form-panel-group { display: none; }
.form-panel-group.is-active { display: block; }

/* ---- Footer ---- */
/* position:relative + z-index:1 are required here, unconditionally — not
   just on mobile-hero-pin pages. A `position: fixed` element (the pinned
   mobile hero background image) always paints above plain in-flow static
   content in the same stacking context, no matter its z-index or DOM
   order, UNLESS that later content is also taken out of plain static flow
   via its own position + z-index. <footer> also lives outside <main> in
   the DOM, so the `.hero-pin ~ *` sibling rule above never reached it
   anyway — that combination let the fixed hero image visually bleed over
   the footer even though the footer has its own solid background. */
.site-footer { position: relative; z-index: 1; background: #000; color: var(--ink-400); padding: 64px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--ink-800); }
@media (min-width: 640px) { .footer-top { grid-template-columns: repeat(3, 1fr); } }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand img { height: 96px; width: 96px; border-radius: var(--radius-sm); object-fit: cover; }
@media (max-width: 640px) {
  .site-header-logo, .footer-brand img { height: 72px; width: 72px; }
}
.footer-brand span { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }
.footer-col-title { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { min-height: 48px; display: flex; align-items: center; color: var(--ink-400); transition: color 0.2s; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 24px; font-size: 0.8125rem; color: var(--ink-500); }
.footer-bottom a { min-height: 48px; display: inline-flex; align-items: center; color: var(--ink-500); }

/* ---- Modal (Book a Session) ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-backdrop.is-open { display: flex; }
.modal-dialog { position: relative; background: #fff; border-radius: var(--radius-lg); padding: 32px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink-200); background: #fff; cursor: pointer; }

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-prose { max-width: 68ch; }