/* Aligned Pillars — front-page design styles (verbatim from the approved design). */
html { scroll-behavior: smooth; }
  body { margin: 0; font-size: 17px; overflow-x: hidden; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  ::placeholder { color: color-mix(in srgb, var(--color-text) 40%, transparent); }
  @media (max-width: 1120px) {
    [data-desktop-nav] { display: none !important; }
    [data-mobile-nav-toggle] { display: flex !important; }
  }
  @keyframes floatSlow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
  @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 34%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-accent) 0%, transparent); } }
  [data-float-shape] { animation: floatSlow 7s ease-in-out infinite; }
  [data-cta-glow] { animation: glowPulse 2.8s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { [data-float-shape], [data-cta-glow] { animation: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
  body.modal-open { overflow: hidden; }
  [data-bn-grid] { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); grid-template-rows: repeat(8, auto); row-gap: 0; }
  [data-bn-card] { display: grid; grid-template-rows: subgrid; grid-row: span 8; }
  @media (max-width: 1000px) { [data-header-logo] { width: 170px !important; } }

  @media (max-width: 640px) { [data-bridge-watermark] { width: 125% !important; } }
  @media (max-width: 900px) {
    [data-bn-grid] { grid-template-columns: 1fr; grid-template-rows: none; row-gap: clamp(20px, 2.5vw, 32px); }
    [data-bn-card] { grid-template-rows: auto; grid-row: auto; }
  }
  [data-role-card][data-expanded="false"] { min-height: var(--role-min, auto); }
  [data-env-stage] { position: relative; z-index: 2; background: transparent; }
  [data-env-btn] { cursor: pointer; background: none; border: 0; padding: 0; display: block; width: 100%; position: relative; }
  [data-env-btn]:focus-visible { outline: 2px solid #F0D98A; outline-offset: 8px; border-radius: 6px; }
  [data-env-body] { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
  [data-env-btn]:hover [data-env-body] { transform: translateY(-4px); box-shadow: 0 34px 60px -34px rgba(0,0,0,.6); }
  [data-env-stage][data-open="true"] [data-env-btn] { cursor: default; }
  [data-env-stage][data-open="true"] [data-env-btn]:hover [data-env-body] { transform: none; }
  [data-env-btn]:hover [data-env-hint] span { border-bottom-color: currentColor; }

  @keyframes flapOpen { 0%, 22% { transform: rotateX(0deg); z-index: 6; } 60% { z-index: 6; } 62% { z-index: 3; } 100% { transform: rotateX(-172deg); z-index: 3; } }
  @keyframes flapClose { 0% { transform: rotateX(-172deg); z-index: 3; } 36% { z-index: 3; } 38% { z-index: 6; } 88%, 100% { transform: rotateX(0deg); z-index: 6; } }
  [data-env-flap] { transform-origin: top center; transform-style: preserve-3d; backface-visibility: hidden; z-index: 6; }
  [data-env-stage][data-open="true"] [data-env-flap] { animation: flapOpen .85s cubic-bezier(.4,0,.2,1) forwards; }
  [data-env-stage][data-open="false"] [data-env-flap] { animation: flapClose 1.15s cubic-bezier(.4,0,.2,1) forwards; }

  [data-env-inner-shadow] { opacity: 0; transition: opacity .4s ease .25s; }
  [data-env-stage][data-open="true"] [data-env-inner-shadow] { opacity: 1; }
  [data-env-stage][data-open="false"] [data-env-inner-shadow] { transition: opacity .35s ease .6s; }

  [data-env-seal] { transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .18s ease .06s, box-shadow .2s ease; }
  [data-env-stage][data-open="true"] [data-env-seal] { transform: translate(-50%, -50%) scale(.86); opacity: 0; box-shadow: none; }
  [data-env-stage][data-open="false"] [data-env-seal] { transition: transform .3s cubic-bezier(.22,1,.36,1) .92s, opacity .28s ease .92s; }

  @keyframes paperRise { 0% { transform: translate(-50%, 0); } 78% { transform: translate(-50%, -63.4%); } 100% { transform: translate(-50%, -62%); } }
  @keyframes paperSink { 0% { transform: translate(-50%, -62%); } 100% { transform: translate(-50%, 0); } }
  [data-env-card] { z-index: 4; transform: translate(-50%, 0); }
  [data-env-stage][data-open="true"] [data-env-card] { animation: paperRise .8s cubic-bezier(.22,1,.36,1) .45s forwards; }
  [data-env-stage][data-open="false"] [data-env-card] { animation: paperSink .55s cubic-bezier(.4,0,.2,1) .3s forwards; }

  [data-env-quote] { opacity: 0; transition: opacity .4s ease 1.05s; }
  [data-env-stage][data-open="true"] [data-env-quote] { opacity: 1; }
  [data-env-stage][data-open="false"] [data-env-quote] { transition: opacity .22s ease; }

  [data-env-hint] { transition: opacity .25s ease; }
  [data-env-stage][data-open="true"] [data-env-hint] { opacity: 0; }
  [data-env-stage][data-open="false"] [data-env-hint] { transition: opacity .3s ease 1s; }

  [data-env-spacer] { max-height: 0; transition: max-height .8s cubic-bezier(.22,1,.36,1) .35s; }
  [data-env-stage][data-open="true"] [data-env-spacer] { max-height: 220px; }
  [data-env-stage][data-open="false"] [data-env-spacer] { transition: max-height .6s cubic-bezier(.4,0,.2,1) .25s; }
  @media (max-width: 700px) { [data-env-stage][data-open="true"] [data-env-spacer] { max-height: 150px; } }

  @media (prefers-reduced-motion: reduce) {
    [data-env-flap] { animation: none !important; }
    [data-env-stage][data-open="true"] [data-env-flap] { opacity: 0; z-index: 3; }
    [data-env-card] { animation: none !important; }
    [data-env-stage][data-open="true"] [data-env-card] { transform: translate(-50%, -62%); }
    [data-env-quote], [data-env-seal], [data-env-spacer], [data-env-hint] { transition: opacity .2s ease, max-height .2s ease !important; }
  }
  [data-modal-row] { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
  @media (max-width: 640px) { [data-modal-row] { grid-template-columns: 1fr; gap: 8px; } }
  img, svg, video { max-width: 100%; }
  section[id], div[id] { scroll-margin-top: 88px; }
  h1, h2, h3, p, blockquote { overflow-wrap: break-word; }
  [role="dialog"] { max-height: min(88vh, 88dvh) !important; }
  @media (max-width: 640px) {
    [role="dialog"] { padding-left: 20px !important; padding-right: 20px !important; }
    [data-puzzle-labels] > div { padding: 8% 6% !important; }
    [data-puzzle-labels] p { font-size: 13px !important; }
    [data-puzzle-labels] p + p { font-size: 9px !important; }
    [data-env-body] { height: 340px !important; }
    [data-env-stage][data-open="true"] [data-env-spacer] { max-height: 210px; }
  }
  @media (max-width: 900px) { [data-about-grid] { grid-template-columns: 1fr !important; align-items: start !important; } [data-about-figure] { height: auto !important; display: block !important; } [data-about-imgwrap] { height: auto !important; aspect-ratio: 4 / 5; } [data-about-figure] figcaption { margin-top: 18px !important; } }
  @media (max-width: 380px) { [data-env-body] { height: 330px !important; } }

  @keyframes paperRiseM { 0% { transform: translateY(0); z-index: 4; } 30% { z-index: 30; } 100% { transform: translateY(calc(-100% + 44px)); z-index: 30; } }
  @keyframes paperSinkM { 0% { transform: translateY(calc(-100% + 44px)); z-index: 30; } 70% { z-index: 4; } 100% { transform: translateY(0); z-index: 4; } }
  @media (max-width: 768px) {
    [data-env-stage] { overflow: visible; }
    [data-env-spacer] { height: 0; transition: height .8s cubic-bezier(.22,1,.36,1) .35s, max-height .8s cubic-bezier(.22,1,.36,1) .35s; }
    [data-env-stage][data-open="false"] [data-env-spacer] { transition: height .6s cubic-bezier(.4,0,.2,1) .25s, max-height .6s cubic-bezier(.4,0,.2,1) .25s; }
    [data-env-card] { left: 0 !important; right: 0; width: auto !important; max-width: none !important; top: 0; bottom: auto !important; height: auto; box-sizing: border-box; padding: 24px 20px !important; transform: translateY(0); }
    [data-env-card] blockquote { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.35 !important; overflow-wrap: break-word; }
    [data-env-stage][data-open="true"] [data-env-card] { animation: paperRiseM .8s cubic-bezier(.22,1,.36,1) .45s forwards; }
    [data-env-stage][data-open="false"] [data-env-card] { animation: paperSinkM .55s cubic-bezier(.4,0,.2,1) .3s forwards; }
    [data-env-stage][data-open="true"] [data-env-spacer] { height: var(--env-rise, 260px); max-height: var(--env-rise, 260px) !important; }
  }
  @media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    [data-env-stage][data-open="true"] [data-env-card] { transform: translateY(calc(-100% + 44px)) !important; z-index: 30; }
  }
  h2, h3 { color: var(--color-accent-900); }
  button { font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  [role="dialog"] button, [role="dialog"] input, [role="dialog"] textarea { box-sizing: border-box; }


/* ============================================================================
   Responsive repairs — 1.3.0
   Mobile and tablet only. Every rule below sits inside a max-width media query,
   so the approved desktop layout (>= 1121px) renders exactly as before.
   Audited at 320 / 360 / 390 / 412 / 430 / 768 / 1024 px.
   ========================================================================== */

/* Nothing may spill sideways at any width. */
@media (max-width: 1120px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas { max-width: 100%; height: auto; }
  input, textarea, select, button { max-width: 100%; box-sizing: border-box; }
  h1, h2, h3, h4, p, li, a, blockquote, figcaption { overflow-wrap: break-word; }
}

/* Comfortable touch targets and internally scrollable pop-ups. */
@media (max-width: 1024px) {
  [data-card-action] { min-height: 46px !important; display: inline-flex !important; align-items: center !important; }
  [data-mobile-nav-toggle] { width: 46px !important; height: 46px !important; }
  [data-modal-close] { width: 46px !important; height: 46px !important; top: 12px !important; right: 12px !important; }
  [role="dialog"] { overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  [role="dialog"] h3 { max-width: calc(100% - 56px) !important; }
  [data-modal-overlay] { align-items: flex-start !important; padding: 16px !important; }
  [role="dialog"] { margin: auto 0 !important; }
  /* the hover-only lift on cards must not stick after a tap */
  @media (hover: none) {
    [data-insight-card]:hover, [data-role-card]:hover { transform: none !important; }
  }
}

/* Tablet: two-column blocks that still assume desktop room. */
@media (max-width: 768px) {
  [data-modal-row] { grid-template-columns: 1fr !important; }
  [style*="minmax(320px"], [style*="minmax(340px"], [style*="minmax(360px"], [style*="minmax(380px"], [style*="minmax(400px"] { grid-template-columns: 1fr !important; }
}

/* Phones: contact rows stack, long addresses wrap. */
@media (max-width: 640px) {
  [data-contact-row] { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  [data-contact-row] > p { flex: 0 0 auto !important; }
  [data-contact-row] a { overflow-wrap: anywhere; }
}

/* Small phones: every auto-fit grid becomes a single column so a 300px track
   can never exceed a 320px screen, and the hero buttons stack full width. */
@media (max-width: 520px) {
  /* any auto-fit grid collapses to one column: a 300px+ track cannot fit a 320px screen */
  [style*="minmax("] { grid-template-columns: 1fr !important; }
  [data-hero-cta] { flex-wrap: wrap !important; max-width: none !important; }
  [data-hero-cta] > a { flex: 1 1 100% !important; max-width: none !important; }
  [data-insight-card] h3, [data-role-card] h3 { min-height: 0 !important; }
  [role="dialog"] { max-height: calc(100vh - 32px) !important; max-height: calc(100dvh - 32px) !important; }
}

/* 320-380px: trim the gutter, the largest headings and the puzzle labels. */
@media (max-width: 380px) {
  /* the six-alignment labels must fit inside their puzzle cells, not be clipped */
  [data-puzzle-labels] > div { padding: 4% 4% !important; }
  [data-puzzle-labels] p { font-size: 11px !important; line-height: 1.15 !important; }
  [data-puzzle-labels] p + p { font-size: 8px !important; line-height: 1.1 !important; }
  [data-modal-overlay] { padding: 10px !important; }
}

/* ----------------------------------------------------------------------------
   Header logo: no underline, ever.
   The logo is an <a> around an <img>; the browser's default link underline was
   painting a thin accent-coloured line under the artwork in every state. The
   logo's size, position, colour and artwork are untouched.
   -------------------------------------------------------------------------- */
a[data-navlink="home"],
a[data-navlink="home"]:link,
a[data-navlink="home"]:visited,
a[data-navlink="home"]:hover,
a[data-navlink="home"]:active,
a[data-navlink="home"]:focus {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
a[data-navlink="home"]::before,
a[data-navlink="home"]::after { content: none !important; }
a[data-navlink="home"] img { border: 0; box-shadow: none; }
/* Keyboard focus stays visible — as an outline, not an underline. */
a[data-navlink="home"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================================================
   Mobile-only corrections — 1.4.0
   Desktop (>= 1121px) is untouched: every rule sits in a max-width query.
   ========================================================================== */

/* 1. Header: logo hard left, menu button hard right, both vertically centred.
   The row is a 3-column grid on desktop; with the primary nav hidden the button
   was auto-placed into the middle column, landing next to the logo. A flex row
   with space-between cannot do that at any width. */
@media (max-width: 1120px) {
  [data-header-row] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  [data-header-row] > a[data-navlink="home"] {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 62px) !important;
    width: auto !important;
  }
  [data-header-logo] { max-width: 100% !important; height: auto !important; }
  [data-mobile-nav-toggle] { flex: 0 0 auto !important; margin-left: auto !important; }
}

/* 2. APOS step cards: natural height, compact rhythm, dividers unchanged. */
@media (max-width: 768px) {
  [data-reveal-card] {
    height: auto !important;
    justify-content: flex-start !important;
    padding-top: 18px !important;
    padding-bottom: 2px !important;
  }
  [data-reveal-card] h3 { min-height: 0 !important; margin: 0 0 8px !important; }
  [data-reveal-card] > p { margin-bottom: 12px !important; }
  [data-reveal-card] > [data-card-action] { margin-top: 0 !important; }
}

/* 3. Role cards: height follows content; "Learn more" sits under the text
   instead of being pinned to the bottom of an equalised card. */
@media (max-width: 768px) {
  [data-role-card],
  [data-role-card][data-expanded="false"],
  [data-role-card][data-expanded="true"] {
    min-height: 0 !important;
    height: auto !important;
    padding: 26px 24px 24px !important;
  }
  [data-role-card] > [data-card-action] { margin-top: 2px !important; }
}

/* ============================================================================
   Mobile pop-ups (all three Insights categories and every other modal share one
   component) — 1.6.0. Desktop >= 769px is untouched.
   ========================================================================== */
@media (max-width: 768px) {
  /* the overlay's 16px inset gives the dialog a safe calc(100% - 32px) width */
  [data-modal-overlay] {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow: hidden !important;
  }
  [role="dialog"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    /* reserved space at the top so the close button never sits on the label */
    padding: 72px 20px 26px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* close button: pinned to the top-right corner, above the scrolling content */
  [data-modal-close] {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 50px !important;
    height: 50px !important;
    z-index: 3 !important;
  }
  /* label, title and body start below the button area and wrap freely */
  [role="dialog"] > p,
  [role="dialog"] h3 {
    max-width: 100% !important;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  [role="dialog"] > p:first-of-type { margin: 0 0 8px !important; }
  [role="dialog"] h3 { margin: 0 0 14px !important; line-height: 1.22 !important; }
}
@media (max-width: 380px) {
  [role="dialog"] { padding: 68px 16px 22px !important; }
  [data-modal-close] { width: 48px !important; height: 48px !important; }
}
/* the page behind a modal must not scroll (the class is set by the design's logic) */
body.modal-open { overflow: hidden !important; }

/* Hero eyebrow on mobile: two intentional lines instead of an awkward wrap.
   Desktop keeps the single line "SAMKIT SHAH · FAMILY BUSINESS ADVISOR" exactly. */
@media (max-width: 520px) {
  [data-hero-eyebrow] { display: block; }
  [data-hero-name] { display: block !important; }
  [data-hero-dot] { display: none !important; }
  [data-hero-role] { display: block !important; white-space: nowrap !important; }
}