/* Master stylesheet: extracted shared styles and overrides for AyurDatta site */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root{
  --brand-green: #107569;
  --brand-green-2: #1a9e8f;
  --muted-ink: #344054;
  /* Authority palette (introduced for RTCT/IHASG repositioning) */
  --navy: #0d2438;
  --navy-2: #16324a;
  --navy-3: #1d3f5c;
  --gold: #c0894a;
  --gold-2: #d8a45a;
  --ink-soft: #475569;
}

html,body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: var(--muted-ink);
  background-color: #f8f9fa; /* match original pages' soft background */
}

/* Global container */
.container{ width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

/* Header / Nav */
.site-header{ background: #fff; border-bottom: 1px solid #eef2f7; position: sticky; top: 0; z-index: 40; }
.site-header .site-brand{ display: flex; align-items: center; gap: .75rem; padding: 1rem 0; }
.site-brand img{ height: 38px; width: auto; }
.nav{ display: flex; gap: 1rem; align-items: center; }
.nav a{ color: var(--muted-ink); padding: 0.5rem .6rem; border-radius: 6px; text-decoration: none; }
.nav a:hover{ background: #f8fafb; color: var(--brand-green); }

/* Mobile menu */
.mobile-menu-button{ display: none; background: transparent; border: none; padding: .5rem; }
.mobile-menu{ display: none; }

/* Hero */
.hero{ padding: 3.5rem 0; }
.hero h1{ font-size: 2rem; line-height: 1.05; }
.hero p.lead{ color: #475569; margin-top: .5rem; max-width: 72ch; }

/* Buttons */
.btn{ display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: 8px; font-weight: 600; text-decoration: none; }
.btn-primary{ background: linear-gradient(90deg,var(--brand-green),var(--brand-green-2)); color: #fff; box-shadow: 0 6px 18px rgba(16,117,105,0.12); }
.btn-outline{ border: 1px solid #e6eef0; background: #fff; color: var(--muted-ink); }

/* CTA section used on about page */
.cta-section{ margin-top: 1.75rem; background: linear-gradient(180deg, rgba(16,117,105,0.03), rgba(255,255,255,0.01)); border: 1px solid rgba(16,117,105,0.04); border-radius: 12px; }
.cta-section .cta-inner{ display:flex; align-items:center; justify-content:space-between; }
.cta-section .cta-text p{ margin:0; }
.cta-section .cta-btn{ padding: .6rem .95rem; }

/* Equalize CTA button heights without changing padding: use an inline-grid so buttons stretch to the
   tallest button while preserving their internal padding and allowing text to wrap naturally. On
   small screens fall back to the previous flex stacking for alignment parity. */
.cta-section .cta-actions{
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-auto-rows: 1fr; /* make each row consume the same available height */
  gap: .75rem;
  align-items: stretch; /* ensure children stretch to fill the row height */
}
.cta-section .cta-actions .cta-btn{
  /* allow long labels to wrap to multiple lines */
  white-space: normal;
  align-self: stretch; /* explicit stretch on grid children */
}

@media(max-width:640px){
  .cta-section .cta-inner{ flex-direction:column; gap: .75rem; align-items:stretch; }
  /* restore original mobile behavior (stacked actions, right-aligned) */
  .cta-section .cta-actions{ display:flex; justify-content:flex-end; gap: .75rem; }
}

/* Forms */
.form-field{ display: flex; flex-direction: column; gap: .4rem; }
.form-field input, .form-field textarea, .form-field select{ padding: .6rem .75rem; border: 1px solid #e6eef0; border-radius: 8px; }

/* Footer */
.site-footer{ background: #fff; border-top: 1px solid #eef2f7; padding: 2rem 0; color: #475569; }


.text-gradient{
  background: linear-gradient(90deg, #0ea5a1, #107569 40%, #1a9e8f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Hero visual: full-bleed background, overlay, and slow zoom for subtle motion */
.hero-bg{
  /* background-image intentionally removed so hero slideshow ( .hero-slide ) controls visuals */
  background-color: #0d2438; /* navy authority fallback (was teal #08332f) */
  padding: 6.5rem 0; /* unified hero height across new + legacy pages */
  position: relative;
  overflow: hidden; /* clip the slow-zoom ::after + slide zoom so they never cause horizontal scroll */
}
.hero-overlay{
  position: absolute; inset: 0; z-index: 2; /* sit above slides to provide consistent tint */
  /* Navy authority wash: bottom/left-weighted so headline + gold eyebrow stay legible over any
     background image, while the image still reads through the lighter side. The legacy
     `--hero-overlay-alpha` knob still nudges overall depth for pages that set it. */
  background:
    linear-gradient(118deg,
      rgba(11,30,48, calc(0.86 + (var(--hero-overlay-alpha, 0.35) - 0.35) * 0.4)) 0%,
      rgba(13,36,56, 0.74) 48%,
      rgba(20,46,70, 0.52) 100%);
}
.hero-inner .text-gradient{
  /* Headline color is configurable via --hero-headline-color (use brand green or white).
     Example: <section id="hero" style="--hero-headline-color:#107569"> */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: var(--hero-headline-color, #ffffff) !important;
}

.hero-inner h1, .hero-inner p{
  text-shadow: 0 8px 22px rgba(2,6,23,0.6);
}
.hero-inner{ position: relative; z-index: 10; }

/* Slow zoom animation on the background (visual interest) */
@keyframes slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}
.hero-bg::after{
  /* decorative layer to enable GPU-accelerated transform */
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transform-origin: center center;
  animation: slow-zoom 18s ease-in-out infinite alternate;
}

/* Hero slideshow slides (crossfade) */
.hero-slide{
  position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: opacity 1s ease; will-change: opacity, transform;
}
.hero-slide.active{ opacity: 1; z-index: 1; }

.cta-button{
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta-button:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16,117,105,0.12);
}

.service-tab{
  transition: color .15s ease, background-color .15s ease, transform .12s ease;
}
.service-tab.active{
  color: var(--brand-green);
  border-bottom: 3px solid rgba(163,233,225,0.9);
}

.chart-container{
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  height: 400px;
  max-height: 50vh;
}

/* Improve responsiveness of chart canvas */
.chart-container canvas{ width:100% !important; height:100% !important; }

/* Layout and section helpers used across pages */
.section-header{
  border-left: 4px solid var(--brand-green);
  padding-left: 1.5rem;
}

.indication-list{
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

.service-pillar{ border-left: 4px solid var(--brand-green); }
.service-category{ border-top: 1px solid #e5e7eb; padding-top: 1.5rem; margin-top: 2rem; }

/* Larger, more photographic service images to increase visual impact */
.service-image{ max-width:320px; width:100%; height:auto; display:block; margin:0 auto 1rem; border-radius:12px; object-fit:cover; box-shadow: none; border: 0; background: transparent; }

/* Small responsive tweaks */
@media (max-width:640px){
  .chart-container{ height: 300px; }
  .indication-list{ columns: 1; }
  .nav{ display: none; }
  .mobile-menu-button{ display: inline-flex; }
  .mobile-menu{ display: block; padding: 1rem 0; }
  .site-header .container{ display:flex; justify-content:space-between; align-items:center; }
}

/* Responsive typography scale */
@media (min-width: 768px){
  .hero h1{ font-size: 3.25rem; }
  .hero p.lead{ font-size: 1.125rem; }
}

@media (min-width: 1024px){
  .hero h1{ font-size: 4rem; }
}

/* Card grid responsive helpers */
.cards{ display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media(min-width: 640px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 1024px){ .cards{ grid-template-columns: repeat(3, 1fr); } }

/* Card visual treatment */
.card{ background: #fff; border: 1px solid #eef2f7; padding: 1.25rem; border-radius: 12px; box-shadow: 0 6px 18px rgba(16,117,105,0.04); }

/* Core values: icon cards */
.value-card{ display:flex; gap:1rem; align-items:flex-start; transition: transform .12s ease, box-shadow .12s ease; }
.value-card:focus, .value-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 30px rgba(16,117,105,0.08); }
.value-icon{ width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(16,117,105,0.06), rgba(26,158,143,0.03)); color: var(--brand-green); flex-shrink:0; }
.value-icon svg{ width:28px; height:28px; }

@media (max-width:640px){
  .value-card{ flex-direction:row; }
}


/* Responsive tables */
.responsive-table{ width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.responsive-table table{ width: 100%; border-collapse: collapse; }
.responsive-table th, .responsive-table td{ padding: .75rem; border-bottom: 1px solid #eef2f7; text-align: left; }

/* Images */
img{ max-width: 100%; height: auto; display: block; }
/* Increase avatar size by ~50% (72px -> 108px) for index and about pages. Keep a smaller size on small screens. */
.avatar{
  /* Responsive avatar size: increase minimum so mobile keeps visual weight */
  width: clamp(108px, 12vw, 140px);
  height: clamp(108px, 12vw, 140px);
  border-radius: 9999px;
  object-fit: cover;
}

/* Removed small-screen avatar override so avatars keep their responsive clamp() sizing on mobile */

/* Name + credentials layout helper
   - On wide screens: horizontal (name + credentials on same line)
   - On medium and smaller screens: stack vertically to avoid awkward wrapping
*/
.name-credentials{ display:flex; align-items:center; gap:0.75rem; justify-content:center; }
@media (max-width:1000px){
  .name-credentials{ flex-direction:column; gap:0.25rem; }
  .name-credentials h4, .name-credentials h3{ margin:0; }
}

/* Small helpers */
.muted{ color: #646e78; }
.kbd{ background: #f1f5f9; border: 1px solid #e6eef0; padding: .1rem .4rem; border-radius: 6px; font-size: .9rem; }

/* Improve link focus and hover for accessibility */
a:hover{ text-decoration: none; }

/* Reduce hero padding on small screens */
@media(max-width:420px){ .hero{ padding: 2rem 0; } }


/* Focus styles for accessibility */
a:focus, button:focus, input:focus, textarea:focus{
  outline: 3px solid rgba(16,117,105,0.18);
  outline-offset: 2px;
}

/* Profile page tweaks */
.avatar--lg{ display: inline-block; }
@media (max-width:640px){
  /* Make avatar larger on small screens (overrides Tailwind when present) */
  .avatar--lg{ width: 14rem !important; height: 14rem !important; }
}

/* Compact definition-list styling for profile highlights */
.compact-dl{ display:block; }
.compact-dl .compact-row{ display:grid; grid-template-columns: 160px 1fr; gap: 0.75rem; align-items:baseline; margin-bottom: .5rem; }
.compact-dl dt{ color: #0f766e; font-weight:600; }
.compact-dl dd{ margin:0; color: #475569; }
/* Increase label column on medium+ and large screens to prevent wrapping for longer dt labels */
@media (min-width: 768px){
  .compact-dl .compact-row{ grid-template-columns: 200px 1fr; }
  .compact-dl dt{ white-space: nowrap; }
}
@media (min-width: 1024px){
  .compact-dl .compact-row{ grid-template-columns: 240px 1fr; }
}
@media (max-width:768px){
  .compact-dl .compact-row{ grid-template-columns: 1fr; }
  .compact-dl dt{ white-space: normal; }
}

/* Slight visual divider between header and content card when card uses border-top */
.page-card-divider{ border-top: 1px solid #eef2f7; padding-top: 1rem; }

/* Modal overlay and container (team member modal) */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none; /* hidden by default; JS will toggle */
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.55);
  z-index: 1100;
  padding: 1.25rem;
}
.modal-overlay.show{
  display: flex;
}
.modal-container{
  width: 100%;
  max-width: 980px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(2,6,23,0.28);
  overflow: hidden;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
  display: flex;
  flex-direction: column;
}
.modal-overlay.show .modal-container{
  transform: translateY(0);
  opacity: 1;
}
.modal-container .modal-header{ border-bottom: 1px solid #eef2f7; }
.modal-container .modal-footer{ border-top: 1px solid #eef2f7; }
.modal-close{
  background: #fff;
  border: 1px solid #e6eef0;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0; /* square button */
  cursor: pointer;
  color: #475569;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(2,6,23,0.12);
  position: absolute;
  top: 6px;
  right: 12px;
  z-index: 1200;
}
.modal-content{ position: relative; display:flex; flex-direction:column; flex:1; min-height:0; }
.modal-container img.img-fluid{ width: 170px; height: 170px; object-fit: cover; border-radius: 9999px; border: 6px solid rgba(16,117,105,0.06); box-shadow: 0 8px 18px rgba(16,117,105,0.06); }

@media (max-width: 640px){
  .modal-container{ max-width: 95%; }
  .modal-container img.img-fluid{ width: 120px; height: 120px; }
}

/* Modal layout: left column image, right column content */
.modal-body > .row{ display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.modal-body > .row .col-md-4, .modal-body > .row .left-col{ display:flex; flex-direction:column; align-items:center; padding: 0.5rem 0.75rem; }
.modal-body > .row .col-md-8, .modal-body > .row .right-col{ padding: 0.5rem 0.75rem; }

/* Constrain modal max height and make content scrollable on small screens */
.modal-container{ max-height: calc(100vh - 64px); }
.modal-body{ overflow: auto; padding: 0; }
.modal-body .modal-inner-content{ padding: 0.75rem 1rem; }

@media (max-width: 880px){
  .modal-body > .row{ grid-template-columns: 1fr; }
  .modal-body > .row .col-md-4, .modal-body > .row .left-col{ order: 0; padding-bottom: .5rem; }
  .modal-body > .row .col-md-8, .modal-body > .row .right-col{ order: 1; }
  .modal-container{ max-width: 96%; }
}

/* When content is tall, ensure modal body scrolls but header/footer stay visible */
.modal-container .modal-header{ flex: 0 0 auto; }
.modal-container .modal-footer{ flex: 0 0 auto; }
.modal-container .modal-body{ flex: 1 1 auto; min-height:0; }

/* Modal header styling */
.modal-container .modal-header{ display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; }
.modal-container .modal-header h5{ margin:0; font-weight:600; color: #0f766e; }

/* Typography inside modal */
.modal-container h4{ margin: .25rem 0 .5rem 0; font-size: 1.05rem; }
.modal-container p{ color: #374151; line-height:1.6; }

/* Footer buttons */
.modal-container .modal-footer{ display:flex; gap: .5rem; align-items:center; justify-content:space-between; padding: .75rem 1rem; background: linear-gradient(180deg,#fbfcfd,#fff); }
.modal-container .modal-footer .btn{ padding: .45rem .9rem; border-radius: 8px; }
.modal-container .modal-footer .btn.btn-primary{ background: linear-gradient(90deg,var(--brand-green),var(--brand-green-2)); color: #fff; }
.modal-container .modal-footer .btn.btn-link{ color: #475569; }

/* Make sure list sections have spacing */
.modal-container .experience-section, .modal-container .education-section{ margin-top: 1rem; }
.modal-container .experience-section h5, .modal-container .education-section h5{ margin-bottom: .5rem; color: #0f766e; }

/* Social buttons inside modal (LinkedIn / Email) */
.member-social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px; border:1px solid #e6eef0; background:#fff; color:var(--muted-ink); margin-right:.5rem; text-decoration:none;
}
.member-social-btn i{ font-size:14px; }
.member-social-btn:hover{ background: linear-gradient(90deg, rgba(16,117,105,0.04), #fff); color: var(--brand-green); border-color: rgba(16,117,105,0.08); }

/* Headings inside modal body (About / Experience / Education) */
.modal-body h5{ color: var(--brand-green); font-weight:600; margin-top: .6rem; margin-bottom: .35rem; font-size: 1rem; }

/* Slightly reduce the top padding of header area so close button sits visually closer to edge */
.modal-container .modal-header{ padding-top: .6rem; padding-bottom: .5rem; }

/* Small screens: ensure modal content scrolls internally rather than growing beyond viewport */
@media (max-height: 700px){
  .modal-container{ max-height: calc(100vh - 40px); }
}

/* Floating back-to-top button */
.back-to-top{
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--brand-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(16,117,105,0.16);
  z-index: 1200;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.back-to-top.show{
  transform: translateY(0);
  opacity: 1;
}
.back-to-top:focus{ outline: 3px solid rgba(255,255,255,0.18); outline-offset: 2px; }
.back-to-top svg{ width:18px; height:18px; }

/* Article listing tweaks */
.article-card img { transition: transform .25s ease; }
.article-card:hover img { transform: scale(1.03); }

/* ---- Prose typography — article/news detail bodies ---- */
/* Tailwind CDN JIT scans static HTML only; the .prose wrapper is injected by JS  */
/* so Typography plugin descendant rules are never generated. Define them here.    */
.prose { line-height: 1.75; }
.prose h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.875rem; font-weight: 700; color: var(--navy); margin: 1.75rem 0 .6rem;  line-height: 1.2; }
.prose h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.4rem;   font-weight: 700; color: var(--navy); margin: 1.75rem 0 .55rem; line-height: 1.3; }
.prose h3 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.15rem;  font-weight: 700; color: var(--navy); margin: 1.35rem 0 .45rem; line-height: 1.35; }
.prose h4 { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 1.1rem 0 .35rem; }
.prose p  { margin-bottom: 1.1rem; }
.prose ul { padding-left: 1.5rem; margin-bottom: 1rem; list-style-type: disc; }
.prose ol { padding-left: 1.5rem; margin-bottom: 1rem; list-style-type: decimal; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--brand-green); }
.prose strong, .prose b { font-weight: 700; color: var(--navy); }
.prose em, .prose i { font-style: italic; }
.prose blockquote { border-left: 4px solid var(--brand-green); padding: .65rem 1.25rem; margin: 1.5rem 0; color: #4b5563; background: #f9fafb; border-radius: 0 8px 8px 0; font-style: italic; }
.prose blockquote p { margin-bottom: 0; }
.prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 2rem 0; }
.prose code:not(pre code) { font-family: 'Courier New', monospace; font-size: .875em; background: #f3f4f6; padding: .1rem .3rem; border-radius: 4px; }
.prose pre  { background: #1e293b; color: #e2e8f0; padding: 1.1rem 1.4rem; border-radius: 10px; overflow-x: auto; margin-bottom: 1.1rem; font-size: .875rem; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .9rem; }
.prose th   { background: var(--navy); color: #fff; padding: .55rem .85rem; text-align: left; font-weight: 600; }
.prose td   { padding: .5rem .85rem; border-bottom: 1px solid #e5e7eb; }
.prose tr:nth-child(even) td { background: #f9fafb; }

.prose img { max-width: 100%; height: auto; }

/* Make links inside article/news bodies clearly visible: green and underlined */
.prose a {
  color: var(--brand-green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.prose a:hover,
.prose a:focus {
  color: var(--brand-green-2);
  text-decoration-color: var(--brand-green-2);
}
.prose a:visited {
  color: #0e6b5f; /* slightly darker green for visited links */
}

/* Ensure links inside CTA boxes have white text for visibility on dark backgrounds */
.bg-teal-50 a.text-white,
.bg-teal-50 a.text-white:hover,
.bg-teal-50 a.text-white:focus {
  color: #ffffff !important;
  text-decoration: none;
}

/* Reveal on scroll utility */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .64s ease, transform .64s ease; will-change: opacity, transform; }
.reveal.visible{ opacity:1; transform: none; }

/* =====================================================================
   Authority design layer — RTCT / IHASG repositioning (2026)
   Additive only; does not alter existing component classes above.
   ===================================================================== */

/* Serif display for flagship headlines */
.font-display{ font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; letter-spacing: -0.01em; }

/* Eyebrow / kicker label */
.eyebrow{
  display:inline-block; font-weight:700; font-size:.78rem; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color: var(--gold);
}
.eyebrow--ink{ color: var(--gold); }
.on-navy .eyebrow{ color: var(--gold-2); }

/* Authority surfaces */
.bg-navy{ background-color: var(--navy); }
.bg-navy-grad{ background: radial-gradient(1200px 600px at 80% -10%, var(--navy-3), var(--navy) 60%); }
.text-navy{ color: var(--navy); }
.text-gold{ color: var(--gold); }
.on-navy{ color:#e6edf3; }
.on-navy h1,.on-navy h2,.on-navy h3{ color:#ffffff; }

/* Gold rule used under hero/section headlines */
.gold-rule{ width:64px; height:4px; border-radius:4px; background: var(--gold); }

/* Card on dark */
.card-navy{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:14px; }
.card-navy .label{ color: var(--gold-2); font-weight:700; letter-spacing:.04em; }

/* Lede paragraph */
.lede{ font-size:1.125rem; line-height:1.7; color: var(--ink-soft); }

/* Pull-quote / inspection question */
.pullquote{
  font-family:'Source Serif 4', Georgia, serif; font-style:italic;
  font-size:1.25rem; line-height:1.5; color:#fff;
}

/* ---- IHASG "four ways in" tiles ---- */
.ihasg-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media(min-width:768px){ .ihasg-grid{ grid-template-columns:1fr 1fr; } }
.ihasg-tile{ background:#fff; border:1px solid #e7edf2; border-left:4px solid var(--brand-green); border-radius:12px; padding:1.5rem; box-shadow:0 6px 18px rgba(13,36,56,.05); transition:transform .15s ease, box-shadow .15s ease; }
.ihasg-tile:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(13,36,56,.10); }
.ihasg-tile h4{ color:var(--navy); font-weight:700; font-size:1.15rem; margin-bottom:.4rem; }

/* ---- Five-step flow: flag -> decision ---- */
.flow{ display:grid; gap:.75rem; grid-template-columns:repeat(1,1fr); }
@media(min-width:640px){ .flow{ grid-template-columns:repeat(5,1fr); gap:.5rem; } }
.flow-step{ position:relative; background:#fff; border:1px solid #e7edf2; border-radius:12px; padding:1.1rem .9rem; text-align:center; }
.flow-step .n{ width:40px; height:40px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; margin:0 auto .6rem; background:var(--brand-green); }
.flow-step.is-key{ background:var(--navy); border-color:var(--navy); }
.flow-step.is-key .n{ background:var(--gold); color:var(--navy); }
.flow-step.is-key h5,.flow-step.is-key p{ color:#fff; }
.flow-step h5{ color:var(--navy); font-weight:700; font-size:.98rem; margin-bottom:.25rem; }
.flow-step p{ font-size:.82rem; color:var(--ink-soft); line-height:1.4; }
.flow-step .arrow{ display:none; }
@media(min-width:640px){
  .flow-step:not(:last-child) .arrow{ display:block; position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:var(--gold); z-index:2; font-size:1.1rem; }
}

/* ---- Readiness ladder 1–4 ---- */
.ladder{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media(min-width:768px){ .ladder{ grid-template-columns:repeat(4,1fr); } }
.rung{ border-radius:12px; padding:1.4rem 1.2rem; border:1px solid #e7edf2; }
.rung .lvl{ font-family:'Source Serif 4',Georgia,serif; font-size:2.25rem; font-weight:700; line-height:1; }
.rung--1{ background:#f3ede3; } .rung--1 .lvl{ color:#9a7b4f; }
.rung--2{ background:#e7e0d2; } .rung--2 .lvl{ color:#8a6d44; }
.rung--3{ background:#d7e3e1; } .rung--3 .lvl{ color:#3f6f68; }
.rung--4{ background:var(--navy); color:#fff; } .rung--4 .lvl{ color:var(--gold-2); }
.rung--4 .cap{ color:#fff; }
.rung .cap{ font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem; color:var(--navy); margin:.5rem 0 .4rem; }
.rung p{ font-size:.86rem; line-height:1.45; color:var(--ink-soft); }
.rung--4 p{ color:#cdd8e2; }

/* Primary CTA on gold */
.btn-gold{ background:var(--gold); color:var(--navy); font-weight:700; box-shadow:0 8px 22px rgba(192,137,74,.28); }
.btn-gold:hover{ background:var(--gold-2); transform:translateY(-2px); }

/* Section eyebrow header block */
.sec-head .eyebrow{ margin-bottom:.6rem; }
.sec-head h2{ font-family:'Source Serif 4',Georgia,serif; }

/* =====================================================================
   Injected header — structural CSS so the header and dropdowns render
   correctly even if Tailwind CDN hasn't generated their utility classes
   for the dynamically-injected HTML yet.
   ===================================================================== */

/* Sticky semi-transparent bar */
#site-header-inner{
  background-color: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
}

/* Desktop nav buttons (Solutions, Expertise, Resources, About) */
[role="menubar"] > a[role="menuitem"],
[role="menubar"] > div > button[role="menuitem"]{
  color: #4b5563;
  font-weight: 500;
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
[role="menubar"] > a[role="menuitem"]:hover,
[role="menubar"] > div > button[role="menuitem"]:hover{ color: #107569; }

/* Contact CTA button in the nav */
#site-header-inner a[href*="contact.html"].rounded-full{
  background-color: #107569;
  color: #ffffff;
}

/* Simple dropdown panels (Resources, About) */
#services-dropdown,
#about-dropdown{
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  width: 14rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
}
#services-dropdown a[role="menuitem"],
#about-dropdown a[role="menuitem"]{
  display: block;
  padding: 0.75rem 1rem;
  color: #374151;
  text-decoration: none;
}
#services-dropdown a[role="menuitem"]:hover,
#about-dropdown a[role="menuitem"]:hover{ background-color: #f9fafb; }

/* =====================================================================
   Mega-menu (desktop Solutions + Expertise panels) + mobile accordion
   ===================================================================== */
.mega-panel{
  padding:.6rem; width:520px; max-width:calc(100vw - 2rem);
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
}
.mega-feature{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1rem; border-radius:11px; margin-bottom:.5rem;
  background:linear-gradient(120deg, rgba(13,36,56,.05), rgba(192,137,74,.10)); }
.mega-feature-text .eyebrow{ color:var(--gold); margin-bottom:.15rem; }
.mega-feature-text .mf-title{ font-weight:700; color:var(--navy); font-size:1rem; line-height:1.2; }
.mega-feature-text .mf-sub{ font-size:.8rem; color:#647082; margin-top:.1rem; }
.mega-book-btn{ background:var(--gold); color:var(--navy); font-weight:700; padding:.45rem .95rem;
  border-radius:9999px; white-space:nowrap; font-size:.85rem; box-shadow:0 6px 16px rgba(192,137,74,.25); }
.mega-book-btn:hover{ background:var(--gold-2); }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.1rem 1rem; padding:.25rem; }
.mega-head{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); padding:.5rem .75rem .3rem; }
.mega-col a{ display:block; padding:.45rem .75rem; border-radius:8px; color:#374151; font-size:.92rem; }
.mega-col a:hover{ background:#f5f7f9; color:var(--brand-green); }
.mega-col a.is-primary{ font-weight:600; color:var(--navy); }

/* mobile accordion sub-headers (inside the expanded Solutions section) */
.mobile-subhead{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); padding:.6rem 0 .15rem; }

/* =====================================================================
   Global harmonization — bring the legacy pages onto the authority
   system without editing each one. Targets shared hooks only.
   ===================================================================== */

/* Serif + navy on the most prominent legacy headings */
.hero-inner h1{ font-family:'Source Serif 4', Georgia, serif; letter-spacing:-0.01em; }
.section-header{ border-left-color: var(--gold); }
.section-header h2,
.section-header h3{ font-family:'Source Serif 4', Georgia, serif; color: var(--navy); }

/* Legacy green brand-gradient headings -> solid navy for a calmer, consistent look */
.text-gradient{
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--navy);
}
/* keep the hero headline override (white over image) working */
.hero-inner .text-gradient{ color: var(--hero-headline-color, #ffffff) !important; }

/* Neutralize the loud multi-hue pastel gradient cards (teal/blue/indigo/purple/pink/gray)
   to a single clean surface. Borders softened to the same neutral. This only affects the
   handful of legacy pages still using these Tailwind gradient utilities. */
[class*="from-teal-50"][class*="bg-gradient"],
[class*="from-blue-50"][class*="bg-gradient"],
[class*="from-indigo-50"][class*="bg-gradient"],
[class*="from-purple-50"][class*="bg-gradient"],
[class*="from-pink-50"][class*="bg-gradient"],
[class*="from-gray-50"][class*="bg-gradient"]{
  background-image: none !important;
  background-color: #f7f9fb !important;
}
[class*="border-blue-200"],
[class*="border-indigo-200"],
[class*="border-purple-200"],
[class*="border-pink-200"]{ border-color: #e7edf2 !important; }

/* Unify legacy solid green pills/CTAs already use #107569 — keep as brand accent.
   Soften the legacy teal accent panels slightly toward the system neutral. */
.bg-teal-50{ background-color:#eef4f4 !important; }
.border-teal-200{ border-color:#cfe3e0 !important; }

/* ---- Legacy hero harmonization ----
   Every legacy hero uses `.hero-inner.text-center`; the new pages do NOT use
   `.text-center`, so this block restyles ONLY the old heroes to the new
   left-aligned authority layout (serif headline already applied globally). */
.hero-bg .hero-inner.text-center{
  text-align: left;          /* container width stays 1100px to match new pages */
}
.hero-bg .hero-inner.text-center h1{
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  max-width: 56rem;          /* match new pages' max-w-4xl headline column */
}
/* auto gold rule under the headline (the "gold treatment") */
.hero-bg .hero-inner.text-center h1::after{
  content: "";
  display: block;
  width: 64px; height: 4px; border-radius: 4px;
  background: var(--gold);
  margin: 1.5rem 0 0;
}
.hero-bg .hero-inner.text-center > p,
.hero-bg .hero-inner.text-center p.lead{
  margin-left: 0; margin-right: 0;
  max-width: 48rem;
  color: #cdd8e2;
}
/* JS-injected eyebrow on legacy heroes */
.hero-bg .hero-inner.text-center .eyebrow{ color: var(--gold-2); margin-bottom: .25rem; display:block; }
/* legacy hero CTAs: keep but align left and give the primary one the gold treatment */
.hero-bg .hero-inner.text-center .mt-4,
.hero-bg .hero-inner.text-center .mt-6{ display:flex; justify-content:flex-start; }
.hero-bg .hero-inner.text-center a.cta-button,
.hero-bg .hero-inner.text-center a.bg-\[\#107569\]{
  background: var(--gold) !important; color: var(--navy) !important; font-weight:700;
}