:root {
  --mehta-ink: #3C3C3C;
  --mehta-slate: #4A4658;
  --mehta-mist: #F4F3F5;
  --mehta-cloud: #FAF8F4;
  --mehta-navy: #241B31;
  --mehta-blue: #3E2C50;
  --mehta-purple: #241B31;
  --mehta-gold: #F2AA4C;
  --mehta-white: #ffffff;
  --mehta-radius: 0.25rem;
  --mehta-shadow: 0 12px 28px rgba(36,27,49,0.12), 0 2px 6px rgba(36,27,49,0.05);
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
::selection { background: var(--mehta-gold); color: var(--mehta-navy); }

.wp-site-blocks > * { margin-block-start: 0; }
.mehta-section { padding-top: clamp(4rem, 8vw, 6rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.mehta-section-tight { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.mehta-eyebrow { color: var(--mehta-gold); font-size: .875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
.mehta-card { border: 1px solid var(--mehta-mist); border-radius: var(--mehta-radius); padding: 1.5rem; background: var(--mehta-white); }
.mehta-card-elevated { box-shadow: var(--mehta-shadow); border: 0; }
.mehta-button .wp-block-button__link, .wp-block-button__link { border-radius: var(--mehta-radius); font-weight: 700; padding: .9rem 1.25rem; }
.mehta-button-primary .wp-block-button__link { background: var(--mehta-purple); color: var(--mehta-white); }
.mehta-button-secondary .wp-block-button__link { background: transparent; border: 1px solid var(--mehta-purple); color: var(--mehta-purple); }
.mehta-button-primary .wp-block-button__link:hover { background: var(--mehta-blue); }
.mehta-button-secondary .wp-block-button__link:hover { background: var(--mehta-purple); color: var(--mehta-white); }

.site-header { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--mehta-mist); backdrop-filter: blur(12px); }
.site-header a { text-decoration: none; }
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.wp-block-navigation a:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--mehta-gold); outline-offset: 3px; }


@media (max-width: 1024px) and (min-width: 782px) {
  .mehta-grid-five { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 781px) {
  .mehta-grid-five, .mehta-grid-four, .mehta-grid-three, .mehta-grid-two { grid-template-columns: 1fr !important; }
  .mehta-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.site-header .mehta-logo, .site-header .mehta-logo img { height: 112px; width: auto; max-width: none; display: block; }
.site-footer .mehta-logo, .site-footer .mehta-logo img { height: 44px; width: auto; max-width: none; display: block; }
.mehta-logo { margin: 0; }

/* Pull the header logo flush to the same 1rem inset used for the top/bottom padding, without moving nav (position:relative doesn't affect sibling flow). Only applies once the alignwide row is actually being centered (viewport wider than the 1180px content width). */
@media (min-width: 1200px) {
  .site-header .mehta-logo {
    position: relative;
    left: calc(-1 * ((100vw - 1180px) / 2) + 1rem + 180px);
  }
}

/* Nav item hover: shift to Warm Amber brand accent */
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation a:focus,
.site-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item__content:focus {
  color: var(--mehta-gold) !important;
}

/* Hero lockup logo, above the H1 */
.hero-logo { max-width: 300px; width: 60%; margin-bottom: 2rem; }
.hero-logo img { display: block; width: 100%; height: auto; }

.hero-progression { max-width: 100%; }
.hero-progression img { display: block; width: 100%; max-width: 100%; height: auto; }

/* Prevent flex columns from refusing to shrink below the image's natural size, which was causing the hero columns to overlap */
.wp-block-group.mehta-section .wp-block-columns.alignwide > .wp-block-column { min-width: 0; }

/* Pull the hero illustration flush to the true left edge of the viewport, matching the header-logo technique: position:relative so it doesn't disturb the other two hero columns' layout. */
/* hero-progression no longer needs a manual left-shift now that the hero row itself is full-width */

.mehta-button-amber .wp-block-button__link { background: var(--mehta-gold); color: var(--mehta-navy); }
.mehta-button-amber .wp-block-button__link:hover { background: #ffbc66; }

/* Hero entrance: staggered fade-up for headline lines, subhead, button (coordinated with the illustration's draw-on animation) */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
h1 .hero-fade { display: inline-block; }
.hero-fade { opacity: 0; animation: heroFadeUp 500ms ease-out forwards; }
.hero-fade-1 { animation-delay: 500ms; }
.hero-fade-2 { animation-delay: 620ms; }
.hero-fade-3 { animation-delay: 740ms; }
.hero-fade-4 { animation-delay: 900ms; }
.hero-fade-5 { animation-delay: 1000ms; }

/* Hero section only: trim the navy padding so it reads a bit more compact/clean */
.hero-section { padding-top: 2.75rem; padding-bottom: 2.75rem; }