@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500&display=swap');
/* ============================================================
   FAJEM & CO. — POLISH LAYER
   Adds: continuous traveling gold rails across entire page,
   side-by-side hero with architectural image + animations,
   divider section with second image, brighter cursor spotlight.
   This file loads AFTER base/components/sections and overrides
   where needed. Keeps existing stylesheets untouched.
   ============================================================ */

/* ============================================================
   BRIGHTER CURSOR SPOTLIGHT
   Override the base.css version with a larger, warmer glow
   that responds to interactive elements.
   ============================================================ */
.cursor-glow {
  width: 800px !important;
  height: 800px !important;
  background: radial-gradient(circle,
    rgba(201, 168, 106, 0.14) 0%,
    rgba(201, 168, 106, 0.08) 20%,
    rgba(201, 168, 106, 0.03) 45%,
    transparent 65%) !important;
  transition: opacity 0.8s ease, background 0.4s ease !important;
}

.cursor-glow.intense {
  background: radial-gradient(circle,
    rgba(232, 200, 137, 0.22) 0%,
    rgba(201, 168, 106, 0.14) 22%,
    rgba(201, 168, 106, 0.06) 45%,
    transparent 65%) !important;
}


/* ============================================================
   CONTINUOUS TRAVELING RAILS (page-wide)
   Two vertical rails flanking the entire document, gold light
   travels down them continuously, staggered so one is always
   active somewhere. Horizontal rails at section transitions.
   ============================================================ */

/* Vertical rails — fixed position, run full viewport height */
.page-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.page-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--ink-line) 4%,
    var(--ink-line) 96%,
    transparent 100%);
}

.page-rail.left { left: 24px; }
.page-rail.right { right: 24px; }

.page-rail::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(201, 168, 106, 0.3) 30%,
    var(--gold-bright) 65%,
    var(--gold) 78%,
    rgba(201, 168, 106, 0.3) 90%,
    transparent 100%);
  animation: railTravelV 12s cubic-bezier(0.45, 0.05, 0.35, 0.95) infinite;
  filter: blur(0.5px);
  box-shadow: 0 0 12px rgba(201, 168, 106, 0.5);
}

.page-rail.left::after { animation-delay: 0s; }
.page-rail.right::after { animation-delay: -6s; }

@keyframes railTravelV {
  0%   { top: -40%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 140%; opacity: 0; }
}

/* Hide old hero-specific frame-lines since page-rails replace them */
.frame-line { display: none !important; }

/* Shift page-rails on mobile to match smaller container padding */
@media (max-width: 560px) {
  .page-rail.left { left: 12px; }
  .page-rail.right { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-rail::after { animation: none; opacity: 0.5; top: 50%; }
}


/* ============================================================
   HERO — Side-by-side layout with architectural image
   Overrides the single-column layout from sections.css
   ============================================================ */

/* New hero structure: type on left, image on right */
.hero-main {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: stretch;
  min-height: 560px;
  margin-top: 60px;
}

.hero-type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
}

/* Image container — framed, with gold corner accents */
.hero-image-wrap {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  border: 1px solid var(--ink-line);
  background: var(--ink-card);
  opacity: 0;
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s forwards;
}

.hero-image-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 1px;
  background: var(--gold);
  z-index: 3;
}

.hero-image-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  height: 1px;
  background: var(--gold);
  z-index: 3;
}

/* The actual image — with breathing parallax animation */
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.02) saturate(1.05);
  animation: heroBreathe 40s ease-in-out infinite alternate !important;
  transform-origin: center center;
  will-change: transform;
}

@keyframes heroBreathe {
  0%   { transform: scale(1.0) translate(0%, 0%); }
  100% { transform: scale(1.05) translate(-0.5%, 0.5%); }
}

/* Subtle dark gradient overlay for tonal unity */
.hero-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(10, 11, 14, 0.35) 0%,
    rgba(10, 11, 14, 0.15) 30%,
    rgba(10, 11, 14, 0) 60%,
    rgba(10, 11, 14, 0.25) 100%);
  pointer-events: none;
  z-index: 2;
}

/* LED pulse layer — amber glow overlay that breathes.
   This reinforces the building's lights as "real and alive". */
.hero-image-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 45% 55%,
    rgba(201, 168, 106, 0.08) 0%,
    transparent 50%);
  pointer-events: none;
  z-index: 2;
  animation: heroLedPulse 4s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes heroLedPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* Tiny italic caption at bottom-right of hero image */
.hero-image-caption {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  color: var(--paper-mute);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.02em;
}

.hero-image-caption::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--gold);
}

/* Hero subtitle and actions - for side-by-side layout */
.hero-type .hero-sub {
  margin-top: 36px;
  max-width: 520px;
}

.hero-type .hero-actions {
  margin-top: 40px;
  justify-content: flex-start;
}

/* The hero's existing credentials row stays below the hero-main block */

/* Hide old hero-grid + hero-body since hero-main replaces them.
   But we need to keep the hero-top and credentials. So we
   restructure via HTML — this CSS just supports the new structure. */


/* ============================================================
   DIVIDER SECTION — architectural light image between chapters
   ============================================================ */
.divider-section {
  padding: 80px 0;
  position: relative;
  background: var(--ink);
}

.divider-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}

.divider-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
  transform: scale(1.05);
  animation: dividerDrift 30s linear infinite alternate;
  will-change: transform;
}

@keyframes dividerDrift {
  0%   { transform: scale(1.05) translateX(-1%); }
  100% { transform: scale(1.05) translateX(1%); }
}

.divider-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 11, 14, 0.3) 0%,
    rgba(10, 11, 14, 0) 50%,
    rgba(10, 11, 14, 0.3) 100%);
  pointer-events: none;
  z-index: 2;
}

.divider-caption-wrap {
  text-align: center;
  margin-top: 28px;
  position: relative;
  z-index: 3;
}

.divider-caption {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--paper-mute);
  letter-spacing: 0.02em;
}

.divider-caption em {
  color: var(--gold);
  font-style: italic;
}


/* ============================================================
   RESPONSIVE — Hero stacks, divider shrinks on narrow screens
   ============================================================ */

@media (max-width: 1100px) {
  .hero-main {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 48px;
  }
  .hero-image-wrap {
    min-height: 320px;
    aspect-ratio: 16/10;
  }
}

@media (max-width: 900px) {
  .divider-section { padding: 56px 0; }
  .divider-wrap { height: 180px; }
}

@media (max-width: 560px) {
  .divider-wrap { height: 140px; }
  .hero-image-wrap {
    min-height: 260px;
  }
  .hero-image-caption {
    bottom: 14px;
    right: 14px;
    font-size: 11px;
  }
  .hero-image-caption::before {
    width: 20px;
  }
}


/* ============================================================
   REDUCED MOTION — turn off all heavy animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none; transform: none; }
  .hero-image-pulse { animation: none; opacity: 0.7; }
  .divider-image { animation: none; transform: scale(1.02); }
}


/* ============================================================
   IMAGE COMPOSITION FIXES
   Tuned to the actual source images:
   - hero-facade.jpg: portrait, corner centered, lights upper-middle
   - divider-amber-light.jpg: landscape, amber line at ~75% from top
   ============================================================ */

/* Hero image container — matches the 4:5 portrait source */
.hero-image-wrap {
  min-height: auto !important;
  aspect-ratio: 4 / 5 !important;
  max-height: 720px !important;
}

@media (max-width: 1100px) {
  .hero-image-wrap {
    min-height: auto !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 520px !important;
  }
}

@media (max-width: 560px) {
  .hero-image-wrap {
    aspect-ratio: 4 / 5 !important;
    max-height: 480px !important;
  }
}

/* Hero image — corner is centered horizontally, so keep 50%.
   Vertical crop slightly above center (45%) to emphasize the
   top LED trim and the main wraparound corner lighting. */
.hero-image {
  object-position: 50% 45% !important;
  animation: none !important;
  transform: none !important;
}

/* No overlay, no pulse, no caption */
.hero-image-overlay {
  display: none !important;
}

.hero-image-pulse {
  display: none !important;
}

.hero-image-caption {
  display: none !important;
}


/* ============================================================
   DIVIDER FIXES
   Source image has amber line at ~75% from top, so position
   the crop to keep the light line in the visible band.
   ============================================================ */

.divider-image {
  object-position: center 75% !important;
  transform: none !important;
  animation: dividerDriftGentle 30s ease-in-out infinite alternate !important;
}

@keyframes dividerDriftGentle {
  0%   { transform: scale(1.04) translateX(-0.5%); }
  100% { transform: scale(1.04) translateX(0.5%); }
}

/* Very subtle overlay to blend the image edges with page */
.divider-overlay {
  background: linear-gradient(180deg,
    rgba(10, 11, 14, 0.25) 0%,
    rgba(10, 11, 14, 0) 25%,
    rgba(10, 11, 14, 0) 75%,
    rgba(10, 11, 14, 0.25) 100%) !important;
}

.divider-wrap {
  height: 260px !important;
}

@media (max-width: 900px) {
  .divider-wrap { height: 200px !important; }
}

@media (max-width: 560px) {
  .divider-wrap { height: 160px !important; }
}


/* ============================================================
   HERO SIZE FIX
   The hero was forced to fill 100vh, making it feel too tall
   even when the content is tight. Release the minimum height
   so it sizes to content, and tighten the padding.
   ============================================================ */

.hero {
  min-height: auto !important;
  padding: 20px 0 60px !important;
  display: block !important;
}

@media (max-width: 900px) {
  .hero {
    padding: 16px 0 48px !important;
  }
}

/* Cap the headline size so it doesn't scale up too aggressively
   on wide monitors. Keeps proportion to the image on the right. */
.headline {
  font-size: clamp(42px, 5.5vw, 78px) !important;
  line-height: 1 !important;
}

@media (max-width: 900px) {
  .headline {
    font-size: clamp(36px, 8vw, 54px) !important;
  }
}

/* Tighten the hero-main min-height so the image doesn't force
   the whole row to be taller than the text needs */
.hero-main {
  min-height: auto !important;
  align-items: center !important;
}

/* Hero image slightly smaller max height so the whole section
   doesn't dominate the viewport */
.hero-image-wrap {
  max-height: 580px !important;
}

@media (max-width: 1100px) {
  .hero-image-wrap {
    max-height: 460px !important;
  }
}


/* ============================================================
   SECTION RHYTHM AND SMOOTHNESS
   Tightens padding, adds transition gradients, speeds up reveals.
   Aims for a tighter, more continuous feeling as you scroll.
   ============================================================ */

/* Tighter section padding across the board */
.section-pad {
  padding: 64px 0 !important;
}

@media (max-width: 900px) {
  .section-pad {
    padding: 48px 0 !important;
  }
}

@media (max-width: 560px) {
  .section-pad {
    padding: 40px 0 !important;
  }
}

/* Tighter divider spacing too */
.divider-section {
  padding: 32px 0 !important;
}

@media (max-width: 900px) {
  .divider-section {
    padding: 24px 0 !important;
  }
}

/* Tighter section-head bottom margin so headers don't push content too far */
.section-head {
  margin-bottom: 40px !important;
}

@media (max-width: 900px) {
  .section-head {
    margin-bottom: 32px !important;
  }
}

/* Section gradient transitions removed - they added visual weight
   and contributed to the empty-space feeling between sections */
.section-pad::before,
.section-pad::after {
  display: none !important;
}


/* ============================================================
   REVEAL ANIMATION TIMING
   Speed up the scroll-reveal so scrolling doesn't feel draggy.
   Previous 1s → 0.55s with a punchier easing.
   ============================================================ */

.reveal {
  transition: opacity 0.55s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 0.55s cubic-bezier(0.16, 0.84, 0.44, 1) !important;
  transform: translateY(20px) !important;
}

.reveal.in {
  transform: translateY(0) !important;
}

.reveal.d2 {
  transition-delay: 0.08s !important;
}

.reveal.d3 {
  transition-delay: 0.16s !important;
}

.reveal.d4 {
  transition-delay: 0.24s !important;
}


/* ============================================================
   SCROLL PERFORMANCE
   Disable the film grain overlay (it's pretty but repaints
   every frame on scroll, costing GPU budget). Keep everything
   else but trim the heaviest effects.
   ============================================================ */

body::after {
  display: none !important;
}

/* Tell the browser these layers need their own composition layers
   so they don't re-composite with the main page on scroll */
.page-rail,
.cursor-glow {
  will-change: transform;
}


/* ============================================================
   HERO EYEBROW — small caps label above headline
   ============================================================ */
.hero-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  display: block;
}

@media (max-width: 560px) {
  .hero-eyebrow {
    font-size: 10px;
    margin-bottom: 20px;
  }
}


/* ============================================================
   LARGER, MORE READABLE CHAPTER LABELS
   The section-meta column on the left of each chapter was too
   small to read easily. Increase type sizes across the board.
   ============================================================ */

.section-meta {
  gap: 22px !important;
}

/* ============================================================
   LARGER, MORE READABLE CHAPTER LABELS
   (Older block removed - see AGGRESSIVE READABILITY BOOST at end
    of file for active font-size rules)
   ============================================================ */


/* ============================================================
   PROBLEM SECTION — STICKY LEFT COLUMN
   Force sticky behavior with multiple safeguards. The left
   column (pullquote + label) pins to the viewport while
   the user scrolls through items 01-05 on the right.
   ============================================================ */

.problem-grid {
  align-items: start !important;
}

.problem-quote {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  align-self: start !important;
  height: fit-content !important;
  max-height: calc(100vh - 160px) !important;
}

@media (max-width: 900px) {
  .problem-quote {
    position: static !important;
    max-height: none !important;
  }
}


/* ============================================================
   HERO IMAGE — CONTAIN MODE
   Show the whole building uncropped. Any empty space above or
   below blends into the dark container background so it reads
   as a framed photograph rather than a broken container.
   ============================================================ */

.hero-image {
  object-fit: contain !important;
  object-position: center center !important;
  animation: none !important;
  transform: none !important;
  background: var(--ink) !important;
}

.hero-image-wrap {
  background: var(--ink) !important;
}


/* ============================================================
   DIVIDER IMAGE — FURTHER CROP TUNING
   The amber line sits near the bottom of the source. Push
   the object-position to show the bottom third where the
   light actually lives.
   ============================================================ */

.divider-image {
  object-position: center 90% !important;
  transform: scale(1.1) !important;
  animation: none !important;
}


/* ============================================================
   READABILITY BOOST
   The 52% opacity grey text was too pale against dark backgrounds.
   Bumps the tier-two and tier-three greys to more readable levels.
   Also slightly increases small-text font sizes where the pattern
   was too small to read comfortably.
   ============================================================ */

/* Mute grey (was 52% opacity) - captions, descriptions, leads. Now 78%. */
.hero-sub,
.cred-caption,
.problem-item-body p,
.section-lead,
.pillar-body p,
.service-card-body p,
.service-hero-content p,
.engagement-body p,
.capability p,
.industry-desc,
.firm-copy p,
.contact-copy p,
.section-meta .kicker,
.assessment-desc,
.portfolio-note,
.firm-fact-body,
.firm-principal-title,
.firm-principal-creds,
.contact-meta-body,
.footer-col li a {
  color: rgba(244, 239, 230, 0.82) !important;
}

/* Tier 3 grey (was 28% opacity, nearly invisible) - tiny labels, indices.
   Now 62%, still clearly "label" but readable. */
.cred-index,
.capability-tag,
.service-card-num,
.service-card-status,
.engagement-tag,
.portfolio-entry-num,
.portfolio-entry-meta,
.assessment-meta-item .label,
.firm-fact-label,
.contact-meta-label,
.industry-num,
.pillar-tag,
.problem-item-num,
.service-hero-meta .label {
  color: rgba(244, 239, 230, 0.66) !important;
}

/* Bump up small font sizes for comfortable reading at distance */
.cred-caption {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.cred-index {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
}

.cred-label {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: rgba(244, 239, 230, 0.7) !important;
}

.problem-item-body p {
  font-size: 15.5px !important;
  line-height: 1.65 !important;
}

.capability p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

.engagement-body p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.industry-desc {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}

.firm-fact-body,
.contact-meta-body {
  font-size: 15px !important;
}

.firm-fact-label,
.contact-meta-label,
.assessment-meta-item .label {
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
}

.service-hero-meta .label {
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
}


/* ============================================================
   FINAL OVERRIDES — loads last, wins over everything above
   Only the four things Omar asked for in the latest pass.
   ============================================================ */

/* 1. Hero top padding — kill the empty space above content */
.hero {
  padding: 20px 0 60px !important;
}

@media (max-width: 900px) {
  .hero {
    padding: 16px 0 48px !important;
  }
}

/* 2. Hero image — show at full size of the source file.
   Remove all max-height constraints and just let it be tall. */
.hero-image-wrap {
  max-height: none !important;
  aspect-ratio: auto !important;
  min-height: 620px !important;
}

@media (max-width: 1100px) {
  .hero-image-wrap {
    min-height: 520px !important;
  }
}

@media (max-width: 560px) {
  .hero-image-wrap {
    min-height: 420px !important;
  }
}

.hero-image {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* 3. Section-meta font-size rules moved to AGGRESSIVE READABILITY
   BOOST section at the end of this file. */


/* ============================================================
   AGGRESSIVE READABILITY BOOST — FINAL PASS
   Bumps all small/faint text noticeably larger so it's
   comfortable to read. Previous bumps were too modest.
   This loads last so it wins over everything.
   ============================================================ */


/* "THE FIVE PLACES IT SHOWS UP" and similar small-caps sublabels */
.problem-quote-attr {
  font-size: 14px !important;
  letter-spacing: 0.24em !important;
  color: rgba(244, 239, 230, 0.72) !important;
}

/* "The work behind the firm" credential label */
.cred-label {
  font-size: 20px !important;
  line-height: 1.4 !important;
  color: rgba(244, 239, 230, 0.78) !important;
  font-style: italic;
}

/* Credential captions ("Combined value of businesses..." etc.) */
.cred-caption {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: rgba(244, 239, 230, 0.82) !important;
}

/* Credential indices (01, 02, 03, 04) */
.cred-index {
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
  color: rgba(244, 239, 230, 0.6) !important;
}

/* Problem item body text (body of each failure mode) */
.problem-item-body p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: rgba(244, 239, 230, 0.88) !important;
}

.problem-item-body h3 {
  font-size: 22px !important;
  line-height: 1.3 !important;
}

.problem-item-num {
  font-size: 15px !important;
  color: rgba(244, 239, 230, 0.55) !important;
}

/* Pillar cards (How We Work — 4 cards) */
.pillar-body p {
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 230, 0.85) !important;
}

.pillar-tag {
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  color: rgba(244, 239, 230, 0.65) !important;
}

/* Service cards (Primary + 4 adjacent) */
.service-hero-content p,
.service-card-body p {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 230, 0.85) !important;
}

.service-hero-tag,
.service-card-status {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
}

.service-hero-meta .label,
.service-hero-meta .val {
  font-size: 13px !important;
}

.service-hero-meta .label {
  letter-spacing: 0.2em !important;
  color: rgba(244, 239, 230, 0.6) !important;
}

/* Engagement/client cards (case studies) */
.engagement-body p {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 230, 0.85) !important;
}

.engagement-tag {
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
}

.engagement-touched-label {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
}

.engagement-touched ul li {
  font-size: 14.5px !important;
  color: rgba(244, 239, 230, 0.78) !important;
}

.engagement-visual-placeholder .label {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
}

/* Capability cards (6 capabilities) */
.capability p {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: rgba(244, 239, 230, 0.82) !important;
}

.capability-tag {
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  color: rgba(244, 239, 230, 0.62) !important;
}

.capability h3 {
  font-size: 20px !important;
}

.capability-list li {
  font-size: 14.5px !important;
  color: rgba(244, 239, 230, 0.78) !important;
}

/* Assessment teaser */
.assessment-desc {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: rgba(244, 239, 230, 0.85) !important;
}

.assessment-meta-item .label {
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  color: rgba(244, 239, 230, 0.6) !important;
}

.assessment-meta-item .val {
  font-size: 15.5px !important;
}

.assessment-label span {
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
}

/* Firm section */
.firm-copy p {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 230, 0.88) !important;
}

.firm-copy .lead-p {
  font-size: 19px !important;
  line-height: 1.55 !important;
}

.firm-principal-name {
  font-size: 22px !important;
}

.firm-principal-title {
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
  color: rgba(244, 239, 230, 0.62) !important;
}

.firm-principal-creds {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: rgba(244, 239, 230, 0.78) !important;
}

.firm-fact-label {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  color: rgba(244, 239, 230, 0.6) !important;
}

.firm-fact-body {
  font-size: 16px !important;
  color: rgba(244, 239, 230, 0.88) !important;
}

/* Industries cards */
.industry-num {
  font-size: 15px !important;
  color: rgba(244, 239, 230, 0.58) !important;
}

.industry-desc {
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: rgba(244, 239, 230, 0.82) !important;
}

/* Contact section */
.contact-copy p {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 230, 0.88) !important;
}

.contact-meta-label {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  color: rgba(244, 239, 230, 0.6) !important;
}

.contact-meta-body {
  font-size: 16px !important;
  color: rgba(244, 239, 230, 0.88) !important;
}

.contact-form-label {
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
  color: rgba(244, 239, 230, 0.62) !important;
}

/* Footer */
.footer-brand p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(244, 239, 230, 0.75) !important;
}

.footer-col h5 {
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
  color: rgba(244, 239, 230, 0.65) !important;
}

.footer-col li a {
  font-size: 15px !important;
  color: rgba(244, 239, 230, 0.82) !important;
}

.footer-bottom {
  font-size: 13px !important;
  color: rgba(244, 239, 230, 0.65) !important;
}

/* Hero eyebrow (top label) */
.hero-eyebrow {
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
}

/* Portfolio note fallback */
.portfolio-note {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(244, 239, 230, 0.75) !important;
}


/* ============================================================
   STICKY FIX - FINAL OVERRIDE
   Ensures sticky positioning applies. Common failure modes:
   - Parent with overflow hidden blocks sticky
   - Grid/flex containers need align-items: start
   ============================================================ */

.problem {
  overflow: visible !important;
}

.problem .container {
  overflow: visible !important;
}

.problem .problem-grid {
  overflow: visible !important;
  align-items: start !important;
}

.problem .problem-quote {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  align-self: flex-start !important;
  height: fit-content !important;
}

@media (max-width: 900px) {
  .problem .problem-quote {
    position: static !important;
  }
}


/* ============================================================
   HERO IMAGE — FINAL NON-NEGOTIABLE OVERRIDE
   Maximum specificity. Loads last. Nothing can undo this.
   ============================================================ */

html body .hero .hero-image-wrap {
  max-height: none !important;
  aspect-ratio: auto !important;
  min-height: 600px !important;
  background: var(--ink) !important;
  overflow: visible !important;
}

html body .hero .hero-image-wrap .hero-image {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: none !important;
  animation: none !important;
  background: var(--ink) !important;
}

/* Suppress any overlays that might darken or crop the visible image */
html body .hero .hero-image-wrap::before,
html body .hero .hero-image-wrap::after,
html body .hero .hero-image-overlay,
html body .hero .hero-image-pulse {
  display: none !important;
}

@media (max-width: 1100px) {
  html body .hero .hero-image-wrap {
    min-height: 480px !important;
  }
}

@media (max-width: 900px) {
  html body .hero .hero-image-wrap {
    min-height: 420px !important;
  }
}


/* ============================================================
   DIVIDER SECTION — TIGHTER HEIGHT
   The divider was showing as a large empty band with tiny text
   inside it. Reduce the height dramatically.
   ============================================================ */

html body .divider-section .divider-wrap {
  height: 140px !important;
}

@media (max-width: 900px) {
  html body .divider-section .divider-wrap {
    height: 100px !important;
  }
}

html body .divider-section .divider-caption-wrap {
  margin-top: 16px !important;
}




/* ============================================================
   SUBPAGE STYLES - Service pages, firm, industries, etc.
   Shared structure for all pages beyond the homepage
   ============================================================ */

/* Subpage Hero */
.subpage-hero {
  padding-top: 200px !important;
  padding-bottom: 80px !important;
  position: relative;
}

.subpage-hero-inner {
  max-width: 880px;
}

.subpage-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.subpage-eyebrow .eyebrow-divider {
  width: 24px;
  height: 1px;
  background: rgba(232, 200, 137, 0.3);
}

.subpage-headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin-bottom: 28px;
}

.subpage-headline em {
  font-style: italic;
  color: var(--gold);
}

.subpage-lead {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 720px;
  margin-bottom: 40px;
}

.subpage-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Subpage Sections */
.subpage-section {
  position: relative;
}

/* Subpage Cards (who-it-is-for grid) */
.subpage-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.subpage-card {
  padding: 36px 32px;
  background: linear-gradient(135deg,
    rgba(20, 22, 28, 0.6) 0%,
    rgba(10, 11, 14, 0.4) 100%);
  border: 1px solid rgba(232, 200, 137, 0.08);
  border-radius: 0;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.subpage-card:hover {
  border-color: rgba(232, 200, 137, 0.2);
  transform: translateY(-2px);
}

.subpage-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 16px;
}

.subpage-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: 14px;
}

.subpage-card p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper-dim);
}

@media (max-width: 760px) {
  .subpage-cards {
    grid-template-columns: 1fr;
  }
}

/* Dimension blocks (what gets done section) */
.dimension-list {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
}

.dimension-block {
  padding: 48px 0;
  border-top: 1px solid rgba(232, 200, 137, 0.08);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 40px;
  align-items: start;
}

.dimension-block:last-child {
  border-bottom: 1px solid rgba(232, 200, 137, 0.08);
}

.dimension-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--gold);
}

.dimension-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 18px;
}

.dimension-body p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--paper-dim);
  margin-bottom: 24px;
  max-width: 760px;
}

.dimension-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 32px;
}

.dimension-body ul li {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 239, 230, 0.7);
  padding-left: 16px;
  position: relative;
}

.dimension-body ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.5;
}

@media (max-width: 760px) {
  .dimension-block {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dimension-body ul {
    grid-template-columns: 1fr;
  }
  .dimension-body h3 {
    font-size: 24px;
  }
}

/* Flow steps */
.flow-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 48px;
}

.flow-step {
  padding: 40px 0;
  border-top: 1px solid rgba(232, 200, 137, 0.08);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 40px;
  align-items: start;
}

.flow-step:last-child {
  border-bottom: 1px solid rgba(232, 200, 137, 0.08);
}

.flow-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--gold);
}

.flow-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 14px;
}

.flow-body p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--paper-dim);
  margin-bottom: 22px;
  max-width: 720px;
}

.flow-meta {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 239, 230, 0.06);
}

.flow-meta > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flow-meta-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.5);
}

.flow-meta-value {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(244, 239, 230, 0.85);
}

@media (max-width: 760px) {
  .flow-step {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .flow-meta {
    gap: 24px;
  }
}

/* Cost frame */
.cost-frame {
  margin-top: 48px;
  border-top: 1px solid rgba(232, 200, 137, 0.08);
}

.cost-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(232, 200, 137, 0.08);
  align-items: start;
}

.cost-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 4px;
}

.cost-body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--paper-dim);
}

@media (max-width: 760px) {
  .cost-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Subpage CTA */
.subpage-cta {
  text-align: left;
}

.subpage-cta-inner {
  max-width: 880px;
}

.subpage-cta-headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-top: 24px;
  margin-bottom: 20px;
}

.subpage-cta-headline em {
  font-style: italic;
  color: var(--gold);
}

.subpage-cta-lead {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--paper-dim);
  max-width: 460px;
  margin-bottom: 36px;
}

.subpage-cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Footer */
.site-footer {
  padding: 80px 0 40px;
  background: rgba(10, 11, 14, 0.6);
  border-top: 1px solid rgba(232, 200, 137, 0.08);
  margin-top: 80px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 60px;
}

.footer-wordmark {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--paper);
  margin-bottom: 16px;
}

.footer-wordmark .amp {
  font-style: italic;
  font-weight: 300;
  margin: 0 6px;
  color: var(--gold);
}

.footer-col p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244, 239, 230, 0.6);
  max-width: 280px;
}

.footer-col-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li,
.footer-col ul li a {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(244, 239, 230, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col ul li a:hover {
  color: var(--gold);
}

.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid rgba(232, 200, 137, 0.06);
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(244, 239, 230, 0.5);
}

@media (max-width: 880px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 500px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Section padding override for subpages */
.subpage-section.section-pad,
.subpage-cta.section-pad {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}



/* Founder portrait image styling */
.firm-principal-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.95) contrast(1.02);
  transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.firm-principal-frame:hover .firm-principal-image {
  filter: brightness(1) contrast(1.05);
  transform: scale(1.02);
}

/* ============================================================
   HOMEPAGE REBUILD — Polish layer
   Demoted chapter columns + Cormorant italics +
   Timeline + Arc flow + Practice cards
   ============================================================ */

/* ---------- 1. DEMOTED chapter column (left side) ---------- */
html body .section-meta {
  gap: 14px !important;
}

html body .section-meta .chapter {
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  color: rgba(201, 168, 106, 0.85) !important;
  font-weight: 500 !important;
}

html body .section-meta > span:nth-child(2) {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(244, 239, 230, 0.55) !important;
  font-style: normal !important;
}

html body .section-meta .kicker {
  display: none !important;
}

/* ---------- 2. CORMORANT ITALICS (replacing Fraunces italics) ---------- */
html body em,
html body .italic,
html body .section-title em,
html body .headline em,
html body .subpage-headline em,
html body .firm-copy em,
html body .section-lead em,
html body .industry-name em,
html body .contact-copy h2 em,
html body .firm-fact-body em,
html body .cred-label em,
html body .firm-copy .lead-p em,
html body .firm-principal-creds em,
html body .practice-card-title em,
html body .timeline-desc-title em {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* ---------- 3. SECTION TITLES + LEADS (improved legibility) ---------- */
html body .section-title {
  font-size: clamp(42px, 5.4vw, 76px) !important;
  line-height: 1.05 !important;
  color: #f4efe6 !important;
}

@media (max-width: 900px) {
  html body .section-title { font-size: clamp(36px, 6vw, 52px) !important; }
}

html body .section-lead {
  font-size: 20px !important;
  line-height: 1.75 !important;
  color: rgba(244, 239, 230, 0.92) !important;
  font-weight: 400 !important;
}

html body .section-lead strong {
  color: #f4efe6 !important;
  font-weight: 600 !important;
}

@media (max-width: 900px) {
  html body .section-lead { font-size: 18px !important; line-height: 1.7 !important; }
}

/* ---------- 4. HORIZONTAL TIMELINE (Chapter 02) ---------- */
.pillars-timeline { position: relative; }

.timeline-track {
  position: relative;
  margin: 24px 0 56px;
  padding: 40px 0;
}

.timeline-line {
  position: absolute;
  top: 50%;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(201, 168, 106, 0.6) 10%,
    rgba(232, 200, 137, 1) 50%,
    rgba(201, 168, 106, 0.6) 90%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(201, 168, 106, 0.4);
}

.timeline-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: center;
}

.timeline-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.timeline-node-dot {
  width: 14px;
  height: 14px;
  background: #c9a86a;
  border-radius: 50%;
  border: 2px solid #0a0b0e;
  box-shadow: 0 0 0 4px rgba(201, 168, 106, 0.2),
              0 0 20px rgba(232, 200, 137, 0.6);
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.timeline-node-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: rgba(244, 239, 230, 0.5);
  margin-bottom: 8px;
}

.timeline-node-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: #f4efe6;
}

.timeline-descriptions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 24px;
  padding-top: 48px;
  border-top: 1px solid rgba(232, 200, 137, 0.12);
}

.timeline-desc {
  padding: 0 8px;
}

.timeline-desc-num {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(201, 168, 106, 0.85);
  margin-bottom: 16px;
}

.timeline-desc-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #f4efe6;
  margin-bottom: 16px;
}

.timeline-desc p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.78);
}

@media (max-width: 880px) {
  .timeline-nodes {
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
  }
  .timeline-line { display: none; }
  .timeline-descriptions {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 36px;
  }
  .timeline-node-title { font-size: 18px; }
}

/* ---------- 5. ARC FLOW (Build → Scale → Sell → Continue) ---------- */
.arc-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 64px;
  max-width: 720px;
  padding: 24px 0;
}

.arc-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.arc-node-dot {
  width: 10px;
  height: 10px;
  background: rgba(201, 168, 106, 0.5);
  border-radius: 50%;
}

.arc-node-dot.active {
  background: #e8c889;
  box-shadow: 0 0 0 4px rgba(201, 168, 106, 0.18),
              0 0 16px rgba(232, 200, 137, 0.7);
}

.arc-node-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.72);
}

.arc-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    rgba(201, 168, 106, 0.4),
    rgba(201, 168, 106, 0.4));
  margin-bottom: 22px;
}

@media (max-width: 560px) {
  .arc-flow { gap: 0; padding: 16px 0; margin-bottom: 40px; }
  .arc-node-label { font-size: 9px; letter-spacing: 0.2em; }
}

/* ---------- 6. PRACTICE CARDS (5 services) ---------- */
.practices-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px;
  background: rgba(232, 200, 137, 0.12);
  border: 1px solid rgba(232, 200, 137, 0.12);
}

.practice-card {
  background: var(--ink-card, #101217);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 0.4s ease;
  min-height: 240px;
}

.practice-card:hover {
  background: #14171d;
}

.practice-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #c9a86a;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.practice-card:hover::before {
  width: 100%;
}

.practice-card-primary {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #14171d 0%, #0a0b0e 100%);
  padding: 56px 48px;
}

.practice-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.practice-card-num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: rgba(244, 239, 230, 0.5);
}

.practice-card-badge {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #c9a86a);
  padding: 4px 10px;
  border: 1px solid rgba(201, 168, 106, 0.32);
  border-radius: 999px;
}

.practice-card-primary .practice-card-badge {
  color: #0a0b0e;
  background: #c9a86a;
  border-color: #c9a86a;
}

.practice-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--paper, #f4efe6);
  margin: 0;
}

.practice-card-primary .practice-card-title {
  font-size: 42px;
}

.practice-card-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 239, 230, 0.78);
  margin: 0;
}

.practice-card-primary .practice-card-tagline {
  font-size: 18px;
  line-height: 1.5;
  color: rgba(244, 239, 230, 0.88);
}

.practice-card-meta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(232, 200, 137, 0.12);
}

.practice-card-for {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 239, 230, 0.7);
}

.practice-card-primary .practice-card-for {
  font-size: 15px;
}

.practice-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.65);
  transition: color 0.3s ease;
}

.practice-card:hover .practice-card-cta {
  color: #c9a86a;
}

.practice-card-cta .arrow {
  transition: transform 0.3s ease;
}

.practice-card:hover .practice-card-cta .arrow {
  transform: translateX(4px);
}

@media (max-width: 880px) {
  .practices-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .practice-card-primary {
    grid-column: 1 / 3;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .practices-grid {
    grid-template-columns: 1fr;
  }
  .practice-card-primary {
    grid-column: 1;
    padding: 40px 32px;
  }
  .practice-card-primary .practice-card-title {
    font-size: 32px;
  }
}

/* Position the section relative for rail-top/bottom */
main section.pillars-timeline,
main section.services-new {
  position: relative !important;
}

main section.pillars-timeline[id],
main section.services-new[id] {
  scroll-margin-top: 100px !important;
}
/* ============================================================
   COMMIT 1 — Refinements
   Practice rows, arc flow enhancements, proof-of-work compaction,
   confidentiality note styling
   ============================================================ */

/* ---------- 1. PRACTICE ROWS (replaces practice cards) ---------- */
.practices-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(232, 200, 137, 0.18);
}

.practice-row {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 32px;
  align-items: center;
  padding: 32px 24px;
  border-bottom: 1px solid rgba(232, 200, 137, 0.12);
  text-decoration: none;
  color: inherit;
  transition: background 0.4s ease, padding 0.4s ease;
  position: relative;
  overflow: hidden;
}

.practice-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(201, 168, 106, 0.08), transparent);
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
}

.practice-row:hover {
  background: rgba(20, 23, 29, 0.4);
  padding-left: 32px;
  padding-right: 32px;
}

.practice-row:hover::before {
  width: 100%;
}

.practice-row-primary {
  background: linear-gradient(135deg, rgba(20, 23, 29, 0.6) 0%, rgba(10, 11, 14, 0.4) 100%);
  border-bottom: 1px solid rgba(201, 168, 106, 0.3);
}

.practice-row-primary::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 1px;
  background: #c9a86a;
}

.practice-row-num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: rgba(201, 168, 106, 0.85);
  line-height: 1;
}

.practice-row-primary .practice-row-num {
  font-size: 22px;
  color: #c9a86a;
}

.practice-row-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.practice-row-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #f4efe6;
  margin: 0;
  transition: color 0.3s ease;
}

.practice-row-primary .practice-row-title {
  font-size: 30px;
}

.practice-row:hover .practice-row-title {
  color: #c9a86a;
}

.practice-row-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(244, 239, 230, 0.72);
  margin: 0;
}

.practice-row-primary .practice-row-tagline {
  font-size: 15.5px;
  color: rgba(244, 239, 230, 0.85);
}

.practice-row-badge {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.6);
  padding: 5px 12px;
  border: 1px solid rgba(232, 200, 137, 0.2);
  border-radius: 999px;
  white-space: nowrap;
}

.practice-row-primary .practice-row-badge {
  color: #0a0b0e;
  background: #c9a86a;
  border-color: #c9a86a;
}

.practice-row-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: rgba(244, 239, 230, 0.4);
  transition: transform 0.3s ease, color 0.3s ease;
}

.practice-row:hover .practice-row-arrow {
  color: #c9a86a;
  transform: translateX(6px);
}

@media (max-width: 760px) {
  .practice-row {
    grid-template-columns: 40px 1fr auto;
    gap: 16px;
    padding: 24px 16px;
  }
  .practice-row-badge {
    display: none;
  }
  .practice-row-title {
    font-size: 19px;
  }
  .practice-row-primary .practice-row-title {
    font-size: 24px;
  }
  .practice-row-tagline {
    font-size: 13.5px;
  }
}

/* ---------- 2. ARC FLOW — bigger, traveling light ---------- */
.arc-flow {
  max-width: 880px !important;
  padding: 48px 0 !important;
  margin-bottom: 72px !important;
  position: relative;
}

.arc-node-dot {
  width: 14px !important;
  height: 14px !important;
  background: rgba(201, 168, 106, 0.6) !important;
  position: relative;
  z-index: 2;
}

.arc-node-dot.active {
  background: #e8c889 !important;
  box-shadow: 0 0 0 5px rgba(201, 168, 106, 0.2),
              0 0 24px rgba(232, 200, 137, 0.8) !important;
}

.arc-node-label {
  font-size: 13px !important;
  letter-spacing: 0.32em !important;
  color: rgba(244, 239, 230, 0.85) !important;
}

.arc-line {
  flex: 1;
  height: 1px;
  background: rgba(201, 168, 106, 0.3);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}

.arc-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(201, 168, 106, 0.5) 20%,
    rgba(232, 200, 137, 1) 50%,
    rgba(201, 168, 106, 0.5) 80%,
    transparent 100%);
  filter: blur(0.4px);
  box-shadow: 0 0 10px rgba(232, 200, 137, 0.7);
  animation: arcLightTravel 5s linear infinite;
}

/* Stagger each segment by 1.25s so the light flows continuously across all 4 segments */
.arc-flow .arc-line:nth-of-type(2)::after { animation-delay: 0s; }
.arc-flow .arc-line:nth-of-type(4)::after { animation-delay: -1.25s; }
.arc-flow .arc-line:nth-of-type(6)::after { animation-delay: -2.5s; }

@keyframes arcLightTravel {
  0% { left: -30%; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .arc-line::after { animation: none; opacity: 0; }
}

@media (max-width: 560px) {
  .arc-flow {
    padding: 24px 0 !important;
    margin-bottom: 48px !important;
  }
  .arc-node-label {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }
}

/* ---------- 3. PROOF-OF-WORK CARDS — compacted ---------- */
html body .engagement-result-card {
  padding: 32px 24px !important;
  min-height: 280px !important;
}

@media (max-width: 900px) {
  html body .engagement-result-card {
    min-height: 240px !important;
    padding: 28px 20px !important;
  }
}

html body .engagement-result-card .result-hero-figure {
  font-size: clamp(48px, 6vw, 64px) !important;
}

html body .engagement-result-card .result-hero-caption {
  font-size: 15px !important;
  max-width: 180px !important;
}

html body .engagement-result-card .result-eyebrow {
  margin-bottom: 0 !important;
  font-size: 10px !important;
}

html body .engagement-body {
  padding: 24px 28px 28px !important;
}

html body .engagement-body h3 {
  font-size: 22px !important;
  margin-bottom: 12px !important;
}

html body .engagement-body > p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
}

html body .engagement-touched {
  padding-top: 18px !important;
}

html body .engagement-touched ul li {
  font-size: 13.5px !important;
  margin-bottom: 4px !important;
}

/* ---------- 4. CONFIDENTIALITY NOTE ---------- */
.engagements-confidentiality {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(232, 200, 137, 0.1);
  text-align: center;
}

.engagements-confidentiality p {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244, 239, 230, 0.6);
  max-width: 640px;
  margin: 0 auto;
}

.engagements-confidentiality p em {
  color: rgba(201, 168, 106, 0.9);
  font-style: italic;
}

@media (max-width: 560px) {
  .engagements-confidentiality {
    margin-top: 32px;
    padding-top: 24px;
  }
  .engagements-confidentiality p {
    font-size: 14px;
  }
}
/* ============================================================
   COMMIT 2 — Full homepage rebuild
   3D pillars, credentials band, confidentiality, fixes
   ============================================================ */

/* ---------- 1. CONFIDENTIALITY NOTE — bigger, no italic emphasis ---------- */
html body .engagements-confidentiality {
  margin-top: 64px !important;
  padding-top: 36px !important;
  border-top: 1px solid rgba(232, 200, 137, 0.1) !important;
  text-align: center !important;
}

html body .engagements-confidentiality p {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 230, 0.75) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

@media (max-width: 560px) {
  html body .engagements-confidentiality p {
    font-size: 15px !important;
  }
}

/* ---------- 2. CREDENTIALS BAND ---------- */
.credentials-band {
  padding: 80px 0;
  position: relative;
  background: rgba(10, 11, 14, 0.4);
  border-top: 1px solid rgba(232, 200, 137, 0.08);
  border-bottom: 1px solid rgba(232, 200, 137, 0.08);
}

.credentials-band-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 80px;
  align-items: start;
}

.credentials-band-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: rgba(244, 239, 230, 0.7);
  max-width: 200px;
  padding-top: 8px;
}

.credentials-band-label em {
  color: #c9a86a;
}

.credentials-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.cred-band-item {
  position: relative;
}

.cred-band-item::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 30px;
  height: 1px;
  background: rgba(201, 168, 106, 0.4);
}

.cred-band-index {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.55);
  margin-bottom: 16px;
}

.cred-band-value {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #f4efe6;
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
}

.cred-band-value .small {
  font-size: 28px;
  color: rgba(244, 239, 230, 0.7);
  font-style: italic;
  margin-left: 4px;
}

.cred-band-value .currency {
  font-size: 26px;
  color: rgba(244, 239, 230, 0.7);
  vertical-align: super;
  margin-right: 2px;
}

.cred-band-caption {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244, 239, 230, 0.72);
  max-width: 240px;
}

@media (max-width: 1100px) {
  .credentials-band-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 760px) {
  .credentials-band {
    padding: 56px 0;
  }
  .credentials-band-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .cred-band-value {
    font-size: 44px;
  }
}

/* ---------- 3. 3D PILLARS CARDS (Chapter 02) ---------- */
.pillars-cinematic { position: relative; }

.pillars-stage {
  position: relative;
  height: 500vh;
}

.pillars-stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 2000px;
}

.pillars-track {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.pillar-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 680px;
  max-width: 92vw;
  height: 620px;
  max-height: 82vh;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(232, 200, 137, 0.25);
  padding: 60px 56px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #f4efe6;
  box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.pillar-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 1px;
  background: #c9a86a;
  z-index: 2;
}

.pillar-card.p1 { background: linear-gradient(135deg, #14171d 0%, #0a0b0e 60%, #050608 100%); }
.pillar-card.p2 { background: linear-gradient(135deg, #181b22 0%, #0c0e13 60%, #060709 100%); }
.pillar-card.p3 { background: linear-gradient(135deg, #1a1d24 0%, #0e1015 60%, #07080a 100%); }
.pillar-card.p4 { background: linear-gradient(135deg, #161922 0%, #0b0d12 60%, #050608 100%); }

.pillar-card-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pillar-card-num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 72px;
  line-height: 1;
  color: #c9a86a;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

.pillar-card-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.6);
  margin-bottom: 14px;
}

.pillar-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #f4efe6;
  margin-bottom: 18px;
}

.pillar-card-title em {
  font-style: italic;
  color: #c9a86a;
}

.pillar-card-tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.4;
  color: rgba(244, 239, 230, 0.92);
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(232, 200, 137, 0.18);
}

.pillar-card-body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.85);
  margin: 0;
}

.pillars-counter {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.55);
  z-index: 10;
}

.pillars-counter strong {
  color: #c9a86a;
  font-weight: 500;
  margin-right: 10px;
  font-size: 14px;
}

.pillars-progress {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 10;
}

.pillars-progress-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(201, 168, 106, 0.25);
  transition: all 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.pillars-progress-dot.active {
  background: #c9a86a;
  transform: scale(1.5);
  box-shadow: 0 0 14px rgba(232, 200, 137, 0.5);
}

.pillars-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(244, 239, 230, 0.5);
  z-index: 10;
  animation: pillarsHintFade 4s ease-in-out 0.5s forwards;
}

@keyframes pillarsHintFade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 760px) {
  .pillars-cinematic .pillars-stage { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pillars-cinematic .pillars-stage { display: none; }
}

/* Mobile swipe cards */
.pillars-swipe {
  display: none;
  position: relative;
  width: 100%;
  padding: 0;
  margin-top: 40px;
}

@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .pillars-swipe { display: block; }
}

.pillars-swipe-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 6vw;
  gap: 16px;
}

.pillars-swipe-track::-webkit-scrollbar { display: none; }

.pillars-swipe-card {
  flex: 0 0 88vw;
  max-width: 440px;
  scroll-snap-align: center;
  min-height: 480px;
  border: 1px solid rgba(232, 200, 137, 0.3);
  padding: 40px 28px;
  box-sizing: border-box;
  position: relative;
  color: #f4efe6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pillars-swipe-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 1px;
  background: #c9a86a;
}

.pillars-swipe-card.ps1 { background: linear-gradient(135deg, #14171d, #0a0b0e); }
.pillars-swipe-card.ps2 { background: linear-gradient(135deg, #181b22, #0c0e13); }
.pillars-swipe-card.ps3 { background: linear-gradient(135deg, #1a1d24, #0e1015); }
.pillars-swipe-card.ps4 { background: linear-gradient(135deg, #161922, #0b0d12); }

.pillars-swipe-num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 44px;
  color: #c9a86a;
  line-height: 1;
  margin-bottom: 20px;
}

.pillars-swipe-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.6);
  margin-bottom: 14px;
}

.pillars-swipe-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  line-height: 1.2;
  color: #f4efe6;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.pillars-swipe-title em {
  font-style: italic;
  color: #c9a86a;
}

.pillars-swipe-tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  line-height: 1.4;
  color: rgba(244, 239, 230, 0.92);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(232, 200, 137, 0.18);
  font-size: 16px;
}

.pillars-swipe-body {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.85);
}

.pillars-swipe-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.pillars-swipe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(201, 168, 106, 0.25);
  transition: all 0.3s;
}

.pillars-swipe-dot.active {
  background: #c9a86a;
  transform: scale(1.4);
}

.pillars-swipe-hint {
  text-align: center;
  margin-top: 20px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(244, 239, 230, 0.55);
}

/* Position the section relative */
main section.credentials-band,
main section.pillars-cinematic {
  position: relative !important;
}
/* ============================================================
   FIRM SECTION — bright white paragraph text
   ============================================================ */
   html body .firm-copy p {
    color: #f4efe6 !important;
  }
  
  html body .firm-copy .lead-p {
    color: #f4efe6 !important;
  }
  
  html body .firm-copy .lead-p em {
    color: #c9a86a !important;
  }
  /* ============================================================
   SITEWIDE LEGIBILITY STANDARD — Final pass
   Sets minimum font sizes, opacity floors, and line-height
   for comfortable reading. Affects every page.
   ============================================================ */

/* ---------- BODY TEXT / PARAGRAPHS — 17px minimum ---------- */
html body .firm-copy p,
html body .firm-copy .lead-p,
html body .contact-copy p,
html body .problem-item-body p,
html body .pillar-body p,
html body .pillar-card-body,
html body .engagement-body > p,
html body .capability > p,
html body .industry-desc,
html body .assessment-desc,
html body .firm-principal-creds {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: rgba(244, 239, 230, 0.92) !important;
}

@media (max-width: 760px) {
  html body .firm-copy p,
  html body .firm-copy .lead-p,
  html body .contact-copy p,
  html body .problem-item-body p,
  html body .pillar-body p,
  html body .pillar-card-body,
  html body .engagement-body > p,
  html body .capability > p,
  html body .industry-desc,
  html body .assessment-desc,
  html body .firm-principal-creds {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
}

/* ---------- LEAD PARAGRAPH (bigger first paragraph in firm section) ---------- */
html body .firm-copy .lead-p {
  font-size: 19px !important;
  line-height: 1.65 !important;
  color: #f4efe6 !important;
}

@media (max-width: 760px) {
  html body .firm-copy .lead-p {
    font-size: 17px !important;
  }
}

/* ---------- CAPTIONS / DESCRIPTIONS — 15px minimum ---------- */
html body .cred-caption,
html body .cred-band-caption,
html body .engagement-touched ul li,
html body .capability-list li,
html body .practice-row-tagline,
html body .timeline-desc p,
html body .footer-col li a,
html body .footer-col p,
html body .contact-meta-body,
html body .firm-fact-body {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 230, 0.85) !important;
}

@media (max-width: 760px) {
  html body .cred-caption,
  html body .cred-band-caption,
  html body .engagement-touched ul li,
  html body .capability-list li,
  html body .practice-row-tagline,
  html body .timeline-desc p,
  html body .footer-col li a,
  html body .footer-col p,
  html body .contact-meta-body,
  html body .firm-fact-body {
    font-size: 14px !important;
  }
}

/* ---------- LABELS / TAGS / EYEBROWS — 13px minimum ---------- */
html body .eyebrow,
html body .cred-band-index,
html body .cred-index,
html body .practice-card-num,
html body .practice-row-num,
html body .capability-tag,
html body .service-card-num,
html body .service-card-status,
html body .engagement-tag,
html body .pillar-tag,
html body .problem-item-num,
html body .problem-quote-attr,
html body .assessment-meta-item .label,
html body .firm-fact-label,
html body .firm-principal-title,
html body .contact-meta-label,
html body .footer-col-label,
html body .footer-col h5,
html body .footer-bottom,
html body .engagement-touched-label,
html body .practice-row-badge,
html body .arc-node-label,
html body .pillars-counter,
html body .timeline-desc-num,
html body .pillar-card-eyebrow,
html body .contact-form-label,
html body .service-hero-meta .label,
html body .assessment-label span,
html body .result-eyebrow {
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
  color: rgba(244, 239, 230, 0.75) !important;
}

@media (max-width: 760px) {
  html body .eyebrow,
  html body .cred-band-index,
  html body .practice-card-num,
  html body .capability-tag,
  html body .engagement-tag,
  html body .problem-item-num,
  html body .firm-fact-label,
  html body .footer-col-label,
  html body .arc-node-label,
  html body .timeline-desc-num {
    font-size: 12px !important;
  }
}

/* Gold labels (chapter labels, badges, etc) stay gold */
html body .section-meta .chapter,
html body .firm-fact-label,
html body .footer-col-label,
html body .contact-meta-label,
html body .engagement-touched-label,
html body .contact-form-label,
html body .assessment-label span {
  color: #c9a86a !important;
}

/* ---------- VALUES (numbers, prices, stats) ---------- */
html body .firm-fact-body {
  font-size: 19px !important;
  font-weight: 400 !important;
  color: #f4efe6 !important;
}

html body .assessment-meta-item .val {
  font-size: 17px !important;
  color: #f4efe6 !important;
}

html body .firm-principal-name {
  font-size: 24px !important;
  color: #f4efe6 !important;
}

html body .contact-meta-body {
  color: #f4efe6 !important;
}

/* ---------- HEADINGS within cards (h3 inside engagement, capability, etc) ---------- */
html body .engagement-body h3,
html body .capability h3,
html body .pillar-card-title,
html body .practice-row-title,
html body .timeline-desc-title,
html body .problem-item-body h3 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: #f4efe6 !important;
}

@media (max-width: 760px) {
  html body .engagement-body h3,
  html body .capability h3,
  html body .pillar-card-title,
  html body .practice-row-title,
  html body .problem-item-body h3 {
    font-size: 21px !important;
  }
}

/* ---------- FOOTER TEXT readable ---------- */
html body .footer-bottom {
  color: rgba(244, 239, 230, 0.7) !important;
  font-size: 13px !important;
}

html body .footer-brand p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 230, 0.85) !important;
}


/* ============================================================
   CREDENTIALS BAND — gold hover effect
   ============================================================ */
html body .credentials-band .cred-band-item {
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

html body .credentials-band .cred-band-item:hover {
  transform: translateY(-3px);
}

html body .credentials-band .cred-band-item::before {
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.4s ease;
}

html body .credentials-band .cred-band-item:hover::before {
  width: 80px !important;
  background: #c9a86a !important;
}

html body .credentials-band .cred-band-value {
  transition: color 0.4s ease;
}

html body .credentials-band .cred-band-item:hover .cred-band-value {
  color: #e8c889 !important;
}

html body .credentials-band .cred-band-value .small,
html body .credentials-band .cred-band-value .currency {
  transition: color 0.4s ease;
}

html body .credentials-band .cred-band-item:hover .cred-band-value .small,
html body .credentials-band .cred-band-item:hover .cred-band-value .currency {
  color: #c9a86a !important;
}

html body .credentials-band .cred-band-index {
  transition: color 0.4s ease;
}

html body .credentials-band .cred-band-item:hover .cred-band-index {
  color: #c9a86a !important;
}
/* ============================================================
   ITALIC FIX — Cormorant ONLY for big display headlines
   Everywhere else: Fraunces italic at parent's font size
   ============================================================ */

/* Body paragraphs — italics use Fraunces, inherit parent size */
html body p em,
html body .firm-copy em,
html body .firm-copy .lead-p em,
html body .firm-copy p em,
html body .pillar-card-body em,
html body .pillar-card-tagline em,
html body .timeline-desc p em,
html body .timeline-desc-title em,
html body .engagement-body em,
html body .engagement-body > p em,
html body .capability > p em,
html body .practice-card-tagline em,
html body .practice-row-tagline em,
html body .practice-card-for em,
html body .practice-row em,
html body .problem-item-body p em,
html body .contact-copy p em,
html body .assessment-desc em,
html body .industry-desc em,
html body .firm-principal-creds em,
html body .firm-fact-body em,
html body .footer-col em,
html body .footer-brand p em,
html body .hero-sub em,
html body .subpage-lead em,
html body .section-lead em,
html body .cred-band-caption em,
html body .cred-caption em,
html body .engagement-touched ul li em,
html body .capability-list li em {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
}

/* KEEP Cormorant italic on big display headlines where it looks intentional */
html body .headline em,
html body .section-title em,
html body .subpage-headline em,
html body .practice-card-title em,
html body .practice-row-title em,
html body .subpage-cta-headline em,
html body .pillar-card-title em,
html body .assessment-title em,
html body .problem-quote-text em,
html body .types-swipe-title em,
html body .benefits-stage-title em,
html body .type-card-title em,
html body .contact-copy h2 em {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
/* ============================================================
   MOBILE FIX — Force broken sections to render
   3D pillars → swipe cards visible
   Arc flow → stacks vertically with visible nodes
   Practice rows → readable card layout
   Credentials band → proper stat blocks
   ============================================================ */

   @media (max-width: 760px) {

    /* ---------- PILLARS — show swipe carousel, hide 3D stage ---------- */
    html body .pillars-cinematic .pillars-stage {
      display: none !important;
    }
  
    html body .pillars-swipe {
      display: block !important;
      margin-top: 32px !important;
      padding: 0 16px !important;
    }
  
    html body .pillars-swipe-track {
      display: flex !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory !important;
      gap: 16px !important;
      padding-bottom: 16px !important;
    }
  
    html body .pillars-swipe-card {
      flex: 0 0 85vw !important;
      max-width: 380px !important;
      min-height: 420px !important;
      scroll-snap-align: center !important;
      padding: 32px 24px !important;
      border: 1px solid rgba(232, 200, 137, 0.3) !important;
      background: linear-gradient(135deg, #14171d 0%, #0a0b0e 100%) !important;
      display: flex !important;
      flex-direction: column !important;
      position: relative !important;
    }
  
    html body .pillars-swipe-card::after {
      content: "" !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 80px !important;
      height: 1px !important;
      background: #c9a86a !important;
    }
  
    html body .pillars-swipe-num {
      font-family: 'Fraunces', Georgia, serif !important;
      font-style: italic !important;
      font-weight: 300 !important;
      font-size: 40px !important;
      color: #c9a86a !important;
      line-height: 1 !important;
      margin-bottom: 18px !important;
    }
  
    html body .pillars-swipe-eyebrow {
      font-family: 'Inter', sans-serif !important;
      font-size: 11px !important;
      letter-spacing: 0.24em !important;
      text-transform: uppercase !important;
      color: rgba(244, 239, 230, 0.6) !important;
      margin-bottom: 12px !important;
    }
  
    html body .pillars-swipe-title {
      font-family: 'Fraunces', Georgia, serif !important;
      font-size: 24px !important;
      line-height: 1.2 !important;
      color: #f4efe6 !important;
      margin-bottom: 14px !important;
    }
  
    html body .pillars-swipe-tagline {
      font-family: 'Fraunces', Georgia, serif !important;
      font-style: italic !important;
      font-size: 15px !important;
      line-height: 1.4 !important;
      color: rgba(244, 239, 230, 0.9) !important;
      padding-bottom: 16px !important;
      margin-bottom: 16px !important;
      border-bottom: 1px solid rgba(232, 200, 137, 0.18) !important;
    }
  
    html body .pillars-swipe-body {
      font-family: 'Inter', sans-serif !important;
      font-size: 14px !important;
      line-height: 1.6 !important;
      color: rgba(244, 239, 230, 0.85) !important;
    }
  
    html body .pillars-swipe-dots {
      display: flex !important;
      justify-content: center !important;
      gap: 10px !important;
      margin-top: 24px !important;
    }
  
    html body .pillars-swipe-dot {
      width: 8px !important;
      height: 8px !important;
      border-radius: 50% !important;
      background: rgba(201, 168, 106, 0.25) !important;
    }
  
    html body .pillars-swipe-dot.active {
      background: #c9a86a !important;
      transform: scale(1.4) !important;
    }
  
    html body .pillars-swipe-hint {
      text-align: center !important;
      margin-top: 16px !important;
      font-family: 'Fraunces', Georgia, serif !important;
      font-style: italic !important;
      font-size: 13px !important;
      color: rgba(244, 239, 230, 0.5) !important;
    }
  
    /* ---------- ARC FLOW — stack vertically, visible nodes ---------- */
    html body .arc-flow {
      flex-direction: column !important;
      gap: 16px !important;
      padding: 24px 0 !important;
      margin: 0 auto 40px !important;
      max-width: 100% !important;
    }
  
    html body .arc-flow .arc-line {
      width: 1px !important;
      height: 24px !important;
      flex: none !important;
      background: rgba(201, 168, 106, 0.4) !important;
      margin: 0 !important;
    }
  
    html body .arc-flow .arc-line::after {
      display: none !important;
    }
  
    html body .arc-node {
      flex-direction: row !important;
      gap: 14px !important;
    }
  
    html body .arc-node-dot {
      width: 14px !important;
      height: 14px !important;
      border-radius: 50% !important;
      background: rgba(201, 168, 106, 0.5) !important;
      flex-shrink: 0 !important;
    }
  
    html body .arc-node-dot.active {
      background: #e8c889 !important;
      box-shadow: 0 0 16px rgba(232, 200, 137, 0.8) !important;
    }
  
    html body .arc-node-label {
      font-family: 'Inter', sans-serif !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      letter-spacing: 0.28em !important;
      text-transform: uppercase !important;
      color: rgba(244, 239, 230, 0.9) !important;
    }
  
    /* ---------- PRACTICE ROWS — clean stacked cards ---------- */
    html body .practices-list {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      border-top: none !important;
    }
  
    html body .practice-row {
      display: grid !important;
      grid-template-columns: 40px 1fr 20px !important;
      gap: 16px !important;
      padding: 24px 20px !important;
      background: var(--ink-card, #101217) !important;
      border: 1px solid rgba(232, 200, 137, 0.15) !important;
      text-decoration: none !important;
      color: inherit !important;
      align-items: center !important;
      position: relative !important;
    }
  
    html body .practice-row-primary {
      background: linear-gradient(135deg, rgba(20, 23, 29, 0.8) 0%, rgba(10, 11, 14, 0.6) 100%) !important;
      border-color: rgba(201, 168, 106, 0.3) !important;
    }
  
    html body .practice-row-primary::after {
      content: "" !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 80px !important;
      height: 1px !important;
      background: #c9a86a !important;
    }
  
    html body .practice-row-num {
      font-family: 'Fraunces', Georgia, serif !important;
      font-style: italic !important;
      font-weight: 300 !important;
      font-size: 22px !important;
      color: #c9a86a !important;
    }
  
    html body .practice-row-content {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
    }
  
    html body .practice-row-title {
      font-family: 'Fraunces', Georgia, serif !important;
      font-weight: 400 !important;
      font-size: 20px !important;
      line-height: 1.2 !important;
      color: #f4efe6 !important;
      margin: 0 !important;
    }
  
    html body .practice-row-tagline {
      font-family: 'Inter', sans-serif !important;
      font-size: 14px !important;
      line-height: 1.5 !important;
      color: rgba(244, 239, 230, 0.78) !important;
      margin: 0 !important;
    }
  
    html body .practice-row-badge {
      display: none !important;
    }
  
    html body .practice-row-arrow {
      font-family: 'Inter', sans-serif !important;
      font-size: 18px !important;
      color: rgba(201, 168, 106, 0.7) !important;
      text-align: right !important;
    }
  
    /* ---------- CREDENTIALS BAND — stacked clean blocks ---------- */
    html body .credentials-band {
      padding: 48px 0 !important;
    }
  
    html body .credentials-band-inner {
      display: flex !important;
      flex-direction: column !important;
      gap: 32px !important;
    }
  
    html body .credentials-band-label {
      text-align: center !important;
      font-size: 18px !important;
      max-width: 100% !important;
      padding-top: 0 !important;
    }
  
    html body .credentials-band-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 32px !important;
    }
  
    html body .cred-band-item {
      padding: 24px 20px !important;
      border: 1px solid rgba(232, 200, 137, 0.12) !important;
      background: rgba(10, 11, 14, 0.4) !important;
      position: relative !important;
    }
  
    html body .cred-band-item::before {
      content: "" !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 40px !important;
      height: 1px !important;
      background: rgba(201, 168, 106, 0.5) !important;
    }
  
    html body .cred-band-index {
      font-family: 'Inter', sans-serif !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      letter-spacing: 0.24em !important;
      text-transform: uppercase !important;
      color: rgba(244, 239, 230, 0.55) !important;
      margin-bottom: 12px !important;
    }
  
    html body .cred-band-value {
      font-family: 'Fraunces', Georgia, serif !important;
      font-weight: 300 !important;
      font-size: 44px !important;
      line-height: 1 !important;
      color: #f4efe6 !important;
      margin-bottom: 14px !important;
      display: flex !important;
      align-items: baseline !important;
    }
  
    html body .cred-band-caption {
      font-size: 14px !important;
      line-height: 1.5 !important;
      color: rgba(244, 239, 230, 0.78) !important;
      max-width: 100% !important;
    }
  }
  /* ============================================================
   HEADLINE ITALIC FIX — Replace Cormorant Garamond italic
   (too calligraphic at display sizes) with Fraunces italic
   with all decorative stylistic sets disabled.
   Result: classical italic with straight, restrained f, g, y.
   ============================================================ */

html body .headline em,
html body .section-title em,
html body .subpage-headline em,
html body .practice-card-title em,
html body .practice-row-title em,
html body .subpage-cta-headline em,
html body .pillar-card-title em,
html body .focus-card-title em,
html body .focus-swipe-title em,
html body .closing-display-headline em,
html body .closing-cta-headline em,
html body .closing-quiet-headline em,
html body .network-card-title em,
html body .engage-node-title em,
html body .fit-block h3 em,
html body .assessment-title em,
html body .problem-quote-text em,
html body .types-swipe-title em,
html body .benefits-stage-title em,
html body .type-card-title em,
html body .contact-copy h2 em,
html body .ba-col.before .ba-col-headline,
html body .ba-col.before .ba-list li {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0, "swsh" 0, "salt" 0, "dlig" 0, "calt" 0 !important;
}
/* ============================================================
   FINAL HEADLINE EMPHASIS FIX — Replace italic gold emphasis
   in display headlines with upright gold emphasis.
   Italic at display sizes reads as "dancy" regardless of font.
   Upright gold is more restrained and more institutional.
   Loads LAST so it wins over every prior rule.
   ============================================================ */

   html body .headline em,
   html body .section-title em,
   html body .subpage-headline em,
   html body .practice-card-title em,
   html body .practice-row-title em,
   html body .subpage-cta-headline em,
   html body .pillar-card-title em,
   html body .focus-card-title em,
   html body .focus-swipe-title em,
   html body .closing-display-headline em,
   html body .closing-cta-headline em,
   html body .closing-quiet-headline em,
   html body .network-card-title em,
   html body .engage-node-title em,
   html body .fit-block h3 em,
   html body .assessment-title em,
   html body .problem-quote-text em,
   html body .types-swipe-title em,
   html body .benefits-stage-title em,
   html body .type-card-title em,
   html body .contact-copy h2 em {
     font-family: 'Fraunces', Georgia, serif !important;
     font-style: normal !important;
     font-weight: 400 !important;
     color: #c9a86a !important;
     font-feature-settings: normal !important;
     letter-spacing: inherit !important;
   }
   /* ============================================================
   HEADLINE FONT SWAP — Manrope Light (300)
   Replaces Fraunces / Cormorant Garamond in all display
   headlines sitewide. Sans-serif, restrained, contemporary.
   Loads LAST. Wins over all prior font-family rules.
   ============================================================ */

html body .headline,
html body .section-title,
html body .subpage-headline,
html body .practice-card-title,
html body .practice-row-title,
html body .subpage-cta-headline,
html body .pillar-card-title,
html body .focus-card-title,
html body .focus-swipe-title,
html body .closing-display-headline,
html body .closing-cta-headline,
html body .closing-quiet-headline,
html body .network-card-title,
html body .engage-node-title,
html body .fit-block h3,
html body .assessment-title,
html body .problem-quote-text,
html body .types-swipe-title,
html body .benefits-stage-title,
html body .type-card-title,
html body .contact-copy h2,
html body .ba-col-headline,
html body .timeline-node-title,
html body .timeline-desc-title,
html body .pillars-swipe-title,
html body .firm-principal-name {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: -0.02em !important;
  font-feature-settings: normal !important;
}

/* Gold emphasis inside headlines — same weight, just gold */
html body .headline em,
html body .section-title em,
html body .subpage-headline em,
html body .practice-card-title em,
html body .practice-row-title em,
html body .subpage-cta-headline em,
html body .pillar-card-title em,
html body .focus-card-title em,
html body .focus-swipe-title em,
html body .closing-display-headline em,
html body .closing-cta-headline em,
html body .closing-quiet-headline em,
html body .network-card-title em,
html body .engage-node-title em,
html body .fit-block h3 em,
html body .assessment-title em,
html body .problem-quote-text em,
html body .types-swipe-title em,
html body .benefits-stage-title em,
html body .type-card-title em,
html body .contact-copy h2 em,
html body .ba-col-headline em {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: #c9a86a !important;
  letter-spacing: inherit !important;
}
/* ============================================================
   SECONDARY CTA — outlined gold
   ------------------------------------------------------------
   .btn-secondary previously used a 28%-opacity cream border
   (rgba(244,239,230,0.28)), roughly 2:1 contrast on the dark
   ground. It read as inactive, so the "Book a Call" option
   sitting beside every primary CTA was easy to miss.

   Gold border + gold label reads as fully live while still
   conceding first place to the filled primary. Existing hover
   behaviour (gold fill slides up, label goes dark) is unchanged.
   ============================================================ */
.btn-secondary {
  border-color: rgba(201, 168, 106, 0.55);
  color: var(--gold-bright);
}

.btn-secondary:hover {
  border-color: var(--gold-bright);
}

.btn-secondary > span {
  color: inherit;
}

.btn-secondary:hover > span {
  color: var(--ink);
}

/* Qualifier line above a secondary CTA — self-selects the
   visitor who is already in a process and wants the call. */
.cta-qualifier {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--paper-dim);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .cta-qualifier { font-size: 12px; }
}

/* ============================================================
   CTA QUALIFIER — spacing and scale
   ------------------------------------------------------------
   The qualifier sits BELOW the button row, so it needs top
   margin, not bottom. 13px also read as fine print next to a
   48px-tall button; 14px sits properly as a subordinate line.
   ============================================================ */
.cta-qualifier {
  font-size: 14px !important;
  line-height: 1.5;
  margin: 24px 0 0 !important;
  color: var(--paper-mute);
}

@media (max-width: 640px) {
  .cta-qualifier {
    font-size: 13px !important;
    margin-top: 20px !important;
  }
}

/* ============================================================
   ASSESSMENT INTRO — vertical compression
   ------------------------------------------------------------
   The hero reserved 160px top padding and 80vh min-height, and
   the title / desc / facts each carried 40–48px bottom margin.
   Total column height pushed the CTA row below the fold on a
   laptop. Trimmed so the buttons are visible without scrolling.
   ============================================================ */
.assessment-intro-hero {
  padding: 112px 0 84px !important;
  min-height: 0 !important;
}

.assessment-intro-title {
  font-size: clamp(40px, 5.2vw, 72px) !important;
  margin-bottom: 28px !important;
}

.assessment-intro-desc {
  font-size: 17px !important;
  margin-bottom: 28px !important;
}

.assessment-intro-facts {
  margin-bottom: 30px !important;
  padding: 20px 0 !important;
  gap: 40px !important;
}

.assessment-intro-fact .val {
  font-size: 21px !important;
}

@media (max-width: 900px) {
  .assessment-intro-hero { padding: 96px 0 72px !important; }
  .assessment-intro-title { margin-bottom: 24px !important; }
}