/* CSS Custom Properties for Brand Colors */
:root {
  --color-brand: #0D3B66;
  --color-brand-dark: #0A1C3A;
  --color-brand-light: #E6EEFF;
  --color-slate-200: #E2E8F0;
}

/* Reveal-on-scroll animation system */
.reveal { 
  opacity: 0; 
  transform: translateY(6px); 
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
.reveal.in { 
  opacity: 1; 
  transform: translateY(0); 
  will-change: auto;
}
#word{
  display: inline-block;
  min-width: 200px;
  text-align: left;
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
  transform-origin: center;
  line-height: 1.2;
}
.word-enter{ opacity:1; transform: translateY(0); }
.word-leave{ opacity:0; transform: translateY(2px); }

/* Mobile-specific word animation adjustments */
@media (max-width: 640px) {
  #word {
    display: inline;
    min-width: auto;
    text-align: left;
    line-height: 1.1;
  }
}

/* Additional mobile hero improvements */
@media (max-width: 640px) {
  /* Ensure hero section has proper spacing */
  .hero-section {
    padding-top: 6rem !important;
    padding-bottom: 3rem !important;
  }

  /* Prevent text overflow in hero */
  .hero-content h1 {
    line-height: 1.1 !important;
    word-wrap: break-word;
    hyphens: auto;
  }


}
.logo-dot{ display:inline-block; width:0.5rem; height:0.5rem; border-radius:9999px; background:linear-gradient(135deg,#E7C97E,#C8A76B,#B68A3A); box-shadow:0 0 0 1px rgba(0,0,0,.15),0 0 8px rgba(231,201,126,.5); margin-left:6px; transform:translateY(-1px); }

/* Skip link */
.skip-navigation{ position:absolute; inset-inline:0; top:0; }
.skip-link{ position:absolute; left:-9999px; top:8px; background:#0D3B66; color:#fff; padding:8px 12px; border-radius:4px; }
.skip-link:focus{ left:12px; z-index:50; outline:2px solid #fff; }

/* Enhanced card hover system */
.card-hover{ 
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.card-hover:hover{ 
  transform: translateY(-1px); 
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.18);
}
@media (prefers-reduced-motion: reduce) {
  .card-hover { transition: none; }
  .card-hover:hover { transform: none; }
}

/* Softer global shadow override */
.shadow-soft{ box-shadow: 0 8px 20px -14px rgba(0,0,0,.18); }

/* Step badge (numbered) */
.step-badge{ display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:9999px; background:#0D3B66; color:#fff; font-weight:600; font-size:.875rem; }


/* Process page: connectors, icons, motion */
.process-steps{ position:relative; }
.step-card{ position:relative; overflow:visible; }
.step-icon{ display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:9999px; color:#0A1C3A; background:#E6EEFF; }
.accent-1 .step-icon{ background:var(--color-brand-light); color:var(--color-brand-dark); }
.accent-2 .step-icon{ background:oklch(92.9% .013 255.508); color:var(--color-brand-dark); }
.accent-3 .step-icon{ background:oklch(86.9% .022 252.894); color:var(--color-brand-dark); }
.accent-4 .step-icon{ background:oklch(96.8% .007 247.896); color:var(--color-brand-dark); }
.accent-5 .step-icon{ background:oklch(98.4% .003 247.858); color:var(--color-brand-dark); }
.accent-6 .step-icon{ background:#fff; color:var(--color-brand-dark); box-shadow:0 1px 3px 0 rgba(0,0,0,.1); }

.connector-right,.connector-down{ position:absolute; pointer-events:none; opacity:.9; }
.connector-right{ top:50%; right:-18px; transform:translateY(-50%); width:28px; height:16px; display:none; }
.connector-down{ left:50%; bottom:-18px; transform:translateX(-50%); width:16px; height:28px; display:block; }
.accent-1 .connector svg path{ stroke:var(--color-brand); }
.accent-2 .connector svg path{ stroke:oklch(44.6% .043 257.281); }
.accent-3 .connector svg path{ stroke:oklch(55.4% .046 257.417); }
.accent-4 .connector svg path{ stroke:oklch(37.2% .044 257.287); }
.accent-5 .connector svg path{ stroke:oklch(27.9% .041 260.031); }
.accent-6 .connector svg path{ stroke:#0A1C3A; }

/* Show horizontal connectors on md+, hide vertical */
@media (min-width: 48rem){
  .connector-right{ display:block; }
  .connector-down{ display:none; }
  /* On 2-column layouts, hide connector after every 2nd card */
  .process-steps li:nth-child(2n) .connector-right{ display:none; }
}
/* On 3-column layouts, hide connector after every 3rd card */
@media (min-width: 64rem){
  .process-steps li:nth-child(2n) .connector-right{ display:block; }
  .process-steps li:nth-child(3n) .connector-right{ display:none; }
}

/* "Next" row subtle motion */
.step-next{ transition: transform .2s ease, opacity .2s ease; opacity:.85; }
.group:hover .step-next{ transform: translateX(4px); opacity:1; }

/* Artifacts list */
.list-check{ list-style:none; padding:0; margin:0; }
.list-check li{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--color-slate-200); }
.list-check li:last-child{ border-bottom:0; }
.check-icon{ width:18px; height:18px; color:var(--color-slate-600); flex-shrink:0; margin-top:2px; }

/* Vertical timeline */
.timeline{ position:relative; margin-left:12px; padding-left:16px; border-left:1px solid var(--color-slate-200); }
.timeline-item{ position:relative; padding:12px 0 18px 0; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{ position:absolute; left:-9px; top:16px; width:10px; height:10px; border-radius:9999px; background:var(--color-brand); box-shadow:0 0 0 2px #fff; }

/* Centered "chain" timeline */
.center-timeline{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.tl-node{ display:flex; flex-direction:column; align-items:center; }
.tl-dot{ width:14px; height:14px; border-radius:9999px; background:var(--color-brand); box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--color-slate-200); }
.tl-link{ width:2px; height:36px; background:var(--color-slate-200); position:relative; margin:6px 0; }
.tl-link svg{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; color:var(--color-slate-400); opacity:.9; }
.tl-card{ border:1px solid var(--color-slate-200); background:#fff; padding:16px; width:100%; max-width:40rem; box-shadow:0 1px 3px 0 rgba(0,0,0,.06); }
.tl-card h3{ font-weight:600; color:var(--color-brand-dark); }
.tl-card p{ color:var(--color-slate-700); }

/* Timeline interactivity */
.tl-card{ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; outline: none; }
.tl-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.2); border-color: var(--color-brand); }
.tl-card:focus-visible{ transform: translateY(-3px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.2); border-color: var(--color-brand); outline: 2px solid var(--color-brand-light); outline-offset: 2px; }
.tl-card:active{ transform: translateY(-1px) scale(0.99); }
.tl-node:hover .tl-dot{ box-shadow:0 0 0 3px #fff, 0 0 0 7px var(--color-brand-light); }
@keyframes floatY{ 0%,100%{ transform:translate(-50%,-50%);} 50%{ transform:translate(-50%,-47%);} }
.tl-link svg{ animation: floatY 2.6s ease-in-out infinite; }

/* Decorative background for timeline section */
.timeline-wrap{ position:relative; }
.timeline-wrap::before{ content:""; position:absolute; inset:-2rem 0; background-image: radial-gradient(var(--color-slate-200) 1px, transparent 1px); background-size:28px 28px; opacity:.18; pointer-events:none; mask-image:linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); }
.timeline-wrap::after{ content:""; position:absolute; left:50%; transform:translateX(-1px); top:0; bottom:0; width:2px; background: var(--color-slate-200); opacity:.5; pointer-events:none; }

/* Alternating tints for timeline cards */
.center-timeline > .tl-node:nth-of-type(odd) .tl-card{ background:var(--color-slate-50); }
.center-timeline > .tl-node:nth-of-type(even) .tl-card{ background:#fff; }

/* Editorial heading font for display headings */
h1, h2, h3{ font-family: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }

/* Section heading treatment: thin rule and spacing */
.section-heading{ position: relative; padding-bottom: .5rem; }
.section-heading:after{ content:""; display:block; width:72px; height:1px; background: oklch(86.9% .022 252.894); margin-top:.75rem; }

/* Figure presentation: thin border and refined captions */
figure img.rounded-md{ border:1px solid var(--color-slate-200); }
figure figcaption{ color: var(--color-slate-600); font-size: .875rem; line-height: 1.4; }

/* Recessed image window for practice cards */
.image-recess{ background: transparent; border: 0 !important; box-shadow: none !important; }
.image-recess .image-window{
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
}
.image-recess .image-window::before{ content: none; }
.image-recess .image-window::after{ content: none; }
.image-recess .image-window img{
  display: block;
  border-radius: 0;
  filter: saturate(1.02) contrast(1.02);
}
.image-recess .image-window:hover img{ transform: none; transition: none; }
.image-recess .image-window{ transition: none; }
.group:hover .image-recess .image-window{ background: transparent; }

/* Ensure outer figure never lifts visually on hover */
.group:hover .image-recess{ box-shadow: none !important; }

/* Golden-ratio sizing for practice images */
.image-recess .image-window{ aspect-ratio: 1.618 / 1; max-width: 100%; }
.image-recess .image-window img{
  width: 100%;
  height: 100% !important; /* override any utility fixed heights */
  object-fit: cover;
}

@media (max-width: 640px){
  .image-recess .image-window{ aspect-ratio: 1.618 / 1; }
}

/* Nav polish */
header nav a{ letter-spacing: .01em; }

/* Footer grid fallback in case utility classes are purged */
.footer-grid{ display:grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 48rem){ .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem){ .footer-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* Mobile menu button size tweak (narrower without changing layout) */
#mobile-menu-button{ padding-inline: .25rem !important; }
#mobile-menu-button svg{ width: 18px; height: 18px; }

/* "Professional book" styling for detailed practice section */
.practice-book{
  position: relative;
  background: linear-gradient(180deg, oklch(98% .005 260), oklch(96% .006 260));
}
.practice-book::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* subtle paper grain overlay */
  background-image: radial-gradient(rgba(0,0,0,.015) 1px, transparent 1px);
  background-size: 6px 6px;
  mask-image: linear-gradient(to bottom, transparent, black 6%, black 94%, transparent);
}
.practice-book .border{ border-color: oklch(87% .01 260) !important; }
.practice-book .shadow-sm{ box-shadow: 0 10px 20px -18px rgba(0,0,0,.25); }

/* Card polish to feel like typeset spreads */
.practice-book .reveal.border{
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px -24px rgba(0,0,0,.35);
}
.practice-book .section-heading:after{
  background: oklch(83% .02 252.5);
}

/* Headings: slight letterspacing and refined color */
.practice-book h3.section-heading,
.practice-book h3.text-2xl{ letter-spacing: .005em; color: oklch(28% .04 257); }

/* Paragraph typography adjustments */
.practice-book p{ color: oklch(40% .02 257); }
.practice-book p.text-slate-600{ color: oklch(42% .02 257) !important; }
.practice-book p.text-slate-700{ color: oklch(38% .02 257) !important; }

/* Divider rhythm between cards on large screens */
@media (min-width: 64rem){
  .practice-book .reveal.border{ margin-bottom: 2.25rem; }
}

/* Enhanced Mobile Menu Styling */
#mobile-menu {
  background: linear-gradient(135deg, var(--color-brand-dark) 0%, oklch(16% 0.02 260) 100%);
  backdrop-filter: blur(12px);
  border-top: 1px solid oklch(25% 0.02 260);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

#mobile-menu .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

#mobile-menu .py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Mobile menu navigation links */
#mobile-menu a {
  padding: 0.5rem 0;
  border-bottom: 1px solid oklch(25% 0.015 260);
  transition: all 0.2s ease;
  font-weight: 500;
  letter-spacing: 0.025em;
}

#mobile-menu a:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: oklch(35% 0.02 260);
  transform: translateX(4px);
  padding-left: 0.5rem;
}

#mobile-menu a:last-child {
  border-bottom: none;
}

/* Mobile menu CTA buttons section */
#mobile-menu .mobile-cta-section {
  border-top: 1px solid oklch(25% 0.02 260);
  margin-top: 0.25rem;
  padding-top: 0.75rem;
}

#mobile-menu .mobile-cta-section a {
  border-bottom: none;
  margin-bottom: 0.375rem;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  transition: all 0.2s ease;
}

#mobile-menu .mobile-cta-section a:first-child {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#mobile-menu .mobile-cta-section a:first-child:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

#mobile-menu .mobile-cta-section a:last-child {
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-brand-dark);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

#mobile-menu .mobile-cta-section a:last-child:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

/* Replace inline styles for GTM noscript iframe */
.gtm-noscript{ display:none; visibility:hidden; width:0; height:0; border:0; }

/* Utility: fixed-size avatar (replaces inline styles) */
.avatar-225{ width:225px; height:225px; }

/* Replace inline styles added by third-party widgets (HubSpot / reCAPTCHA) */
.hs-captcha-hidden{ display:none !important; width:0 !important; height:0 !important; }
.recaptcha-badge-inline{ width:256px !important; height:60px !important; box-shadow: gray 0 0 5px !important; }
.grecaptcha-response-field{ width:250px !important; height:40px !important; border:1px solid rgb(193,193,193) !important; margin:10px 25px !important; padding:0 !important; resize:none !important; display:none !important; }