/* ============================================================
   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.
   ============================================================ */

/* Chapter labels (Chapter 01, Chapter 02, etc.) */
.section-meta .chapter {
  font-size: 15px !important;
  letter-spacing: 0.22em !important;
  color: var(--gold) !important;
}

/* Section names ("What buyers actually see", "How the work flows") */
.section-meta > span:nth-child(2) {
  font-family: var(--serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: rgba(244, 239, 230, 0.95) !important;
  font-style: normal !important;
}

/* Kicker italics (small italic line under the section name) */
.section-meta .kicker {
  font-size: 19px !important;
  line-height: 1.55 !important;
  max-width: 320px !important;
  color: rgba(244, 239, 230, 0.82) !important;
  font-style: italic;
}

/* "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: 680px;
  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);
}