/* ===================================================================
   HOME PAGE — page-specific styles for karnot-hero-v2.html
   Requires global.css to be loaded first (variables, nav, buttons,
   section/footer/reveal utilities, breakpoints).
   =================================================================== */

/* Page-wide fallback backdrop — sits behind the fixed hero video/overlay
   in the stacking order (they're position:fixed with their own z-index),
   so this can never hide them. It only shows through anywhere none of the
   in-flow sections below the hero paint their own opaque background —
   i.e. it's the safety net against a stray white gap, not a hero fix. */
body{ background: #010307; }

/* ============ FIXED HERO VIDEO ============ */
/* pointer-events: none — these are decorative and fixed over the full
   viewport at every scroll depth. Without this they silently swallow
   clicks on anything below them once faded (e.g. the industries-teaser
   CTA), even at opacity 0. */
#hero-bg-video{
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  object-fit: cover; z-index: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#hero-video-overlay{
  position: fixed; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(1,3,7,0.58) 0%, rgba(1,3,7,0.32) 38%, rgba(1,3,7,0.62) 100%);
  pointer-events: none;
  transition: opacity 0.5s ease, background 0.5s ease;
}
body.curtain-passed #hero-bg-video,
body.curtain-passed #hero-video-overlay{ opacity: 0; }

/* ============ TOP NAV LINK ROW — this page only. #nav-brand stays
   position:fixed top-left as defined in global.css (shared across every
   page); the "Book a Strategy Call" #top-cta button is not used on this
   page at all (removed from the markup) — the nav row replaces it,
   right-aligned with a gold underline beneath, matching the Canva
   reference exactly. ============ */
.site-nav-links{
  position: fixed; top: 34px; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 36px;
  padding: 0 36px 10px 64px;
  border-bottom: 1px solid var(--gold);
}
.site-nav-links a{
  font-family: 'Playfair Display', serif; font-weight: 500;
  font-size: 16px;
  opacity: 0.88; text-decoration: none;
  transition: color 0.3s ease, opacity 0.25s ease;
}
.site-nav-links a:hover{ opacity: 1; }
/* Color itself (navy default / frost on-photo) comes from global.css's
   shared rules — same convention as every other page now, so this page
   no longer needs its own inverted on-light override. */
@media (max-width: 1024px){
  .site-nav-links{ display: none; } /* mobile/tablet keep the existing logo-only nav */
}

/* ============ CURTAIN: fixed video + scrolling hero/second/third layers ============ */
#curtain{ position: relative; z-index: 2; }
.curtain-hero{
  position: relative; height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
  background: transparent;
}
.curtain-hero-inner{
  animation: curtainHeroIn 1.15s cubic-bezier(.16,1,.3,1) both;
  animation-delay: 0.15s;
}
@keyframes curtainHeroIn{
  from{ opacity: 0; transform: translateY(28px); }
  to{ opacity: 1; transform: translateY(0); }
}
.curtain-hero-headline{
  font-family: 'Playfair Display', serif; font-weight: 600;
  font-size: clamp(40px, 5.4vw, 84px); line-height: 1.16;
  color: #F7F9FB; margin: 0 auto; max-width: 20ch;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.curtain-hero-sub{
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.4vw, 21px); line-height: 1.65;
  color: #F7F9FB; opacity: 0.86; margin: 24px auto 0; max-width: 560px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.curtain-scroll-indicator{
  margin-top: 56px; font-family: 'Inter', sans-serif;
  font-size: 12.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #F7F9FB; opacity: 0.75;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.curtain-scroll-indicator span{
  display: inline-block; font-size: 16px;
  animation: curtainBounce 1.8s ease-in-out infinite;
}
@keyframes curtainBounce{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(8px); }
}

/* ============ INTRO — normal document flow (not pinned), directly under
   the hero. Paragraph is centered and container-width; the photo below it
   is full-bleed. Both fade up once via the shared .reveal. ============ */
.intro-section{
  background: #010307;
  padding: 130px 0 0;
}
.intro-text{
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(19px, 1.7vw, 24px); line-height: 1.7;
  color: var(--frost);
  text-align: center;
  max-width: 780px;
  margin: 0 auto 70px;
}
.intro-photo{
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.intro-photo img{
  display: block;
  width: 100%; height: auto;
  border-radius: 4px;
  transition: transform 1.2s ease;
}
.intro-photo:hover img{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .intro-photo:hover img{ transform: none; }
}

/* ============ OUR PRACTICES — navy header band (title only) + white
   body band. The card grid is pulled up with a negative margin so the
   top of each glass card overlaps into the navy band above it, matching
   the Canva reference's "floating cards" look. ============ */
.practices-section{ background: #fff; }
.practices-header{
  background: var(--navy);
  padding: 90px 0 96px;
}
.practices-title{
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(24px, 2.2vw, 34px);
  color: var(--gold);
  text-align: center;
  margin: 0;
}
.practices-body{
  padding: 0 0 100px;
}
.practices-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: -72px; /* pulls the cards' top edge up into the navy header */
}
.practices-grid .practice-card:nth-child(2){ transition-delay: 0.1s; }
.practices-grid .practice-card:nth-child(3){ transition-delay: 0.2s; }
.practice-card{
  /* Frosted-glass panel — sits half on the navy header, half on the white
     body, so the fill needs its own opacity/blur rather than relying on
     whatever's behind it (navy vs white) to read consistently. */
  background: rgba(30,30,35,0.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  padding: 26px 22px;
  text-align: center;
  /* "translate" (not "transform") for the hover lift — keeps it independent
     of the .reveal fade-up, which already animates "transform". Combining
     both onto "transform" would mean whichever rule's shorthand loses the
     cascade drops the other's animation entirely. */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out,
              translate 0.35s ease, border-color 0.35s ease, background 0.35s ease,
              box-shadow 0.35s ease;
}
.practice-card:hover{
  translate: 0 -6px;
  border-color: rgba(232,184,75,0.35);
  background: rgba(30,30,35,0.68);
  box-shadow: 0 26px 48px rgba(0,0,0,0.32), 0 0 0 1px rgba(232,184,75,0.2);
}
.practice-name{
  font-family: 'Playfair Display', serif; font-weight: 600;
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--gold);
  margin: 0 0 12px;
}
.practice-text{
  font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.55;
  color: var(--frost); opacity: 0.82;
  margin: 0;
}

/* Single supporting line + one shared CTA below the whole card grid,
   replacing the old per-card "Explore" links. */
.practices-support{
  text-align: center;
  margin-top: 56px;
}
.practices-support-line{
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4;
  color: var(--navy);
  margin: 0 0 32px;
}
.practices-support .btn-gold{ font-weight: 600; }
@media (prefers-reduced-motion: reduce){
  .practice-card:hover{ transform: none; }
}

/* Pin-scroll distance: 250vh (not 500vh) — the page script reads this
   dynamically via offsetHeight, so it never needs to be kept in sync with
   anything in the JS; only the visual "how long this chapter stays
   pinned" feel changes if you tune this value. */
.curtain-second{
  position: relative; height: 250vh; width: 100%;
  background-color: #000;
  display: grid; /* lets the network layer and the text layer share one
                    grid cell below, so both position:sticky children pin
                    to the same viewport slot instead of pinning one after
                    the other in sequence */
}
/* Contained network stage — a fixed 1366:635 aspect box, centered and
   padded within the pinned viewport, so the diagram is never cropped or
   stretched edge-to-edge at any desktop width. Sits behind the text
   (z-index 0), which sits above it via .curtain-second-sticky's z-index. */
.kai-network{
  grid-area: 1 / 1;
  position: sticky; top: 0; height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 70px 4vw;
  pointer-events: none;
  z-index: 0;
}
.kai-network-stage{
  position: relative;
  /* Width is derived up-front from three caps — the image's own pixel
     width, the available container width, and a height-derived width
     (78vh converted through the 1366:635 ratio) — so the box always ends
     up at the correct aspect ratio on its own. This avoids clamping
     height *after* the aspect-ratio calc (which would leave the box at
     the wrong ratio and force the image/SVG to letterbox awkwardly). */
  width: min(1366px, 100%, calc(78vh * 1366 / 635));
  aspect-ratio: 1366 / 635;
}
.kai-network-img,
.kai-network-overlay{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.kai-network-img{
  object-fit: contain;
  opacity: 0.9;
}
.kai-network-overlay{ pointer-events: none; }
.kai-particle{ filter: blur(0.15px); }
.kai-pulse-ring{
  fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0;
  animation: kaiArrowPulse 0.9s ease-out forwards;
}
@keyframes kaiArrowPulse{
  0%{ opacity: 0; stroke-width: 2; }
  30%{ opacity: 0.5; stroke-width: 7; }
  100%{ opacity: 0; stroke-width: 13; }
}
@media (prefers-reduced-motion: reduce){
  .kai-particle, .kai-pulse-ring{ display: none; }
}

/* Sticks the moment its 250vh parent's top reaches the viewport top, releases
   at the parent's bottom. Nothing in this box moves except the .cs-line children. */
.curtain-second-sticky{
  grid-area: 1 / 1;
  position: sticky; top: 0; height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: flex-start;
  text-align: left; padding: 110px 7vw 0; /* top padding clears the fixed nav at any viewport height */
  overflow: hidden;
  z-index: 1;
}
.curtain-second-inner{
  position: relative;
  width: min(1240px, 86vw);
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
  padding: 48px 56px 48px 0;
}
/* Dark scrim behind the copy block only (not the whole section) so the
   network lines never collide visually with the text, regardless of
   where the diagram happens to fall at a given viewport size. */
.curtain-second-inner::before{
  content: '';
  position: absolute;
  top: -10%; bottom: -10%; left: -6vw; right: -4vw;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.cs-line{
  opacity: 0;
  transform: translateY(46px);
  will-change: opacity, transform;
}
.cs-intro{
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(20px, 2.1vw, 28px); line-height: 1.5;
  color: var(--frost); margin: 0;
}
.cs-headline{
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(44px, 5.6vw, 82px); line-height: 1.1;
  color: var(--frost); margin: 0; width: 100%;
}
.cs-support{
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(20px, 2.1vw, 28px); line-height: 1.5;
  color: var(--frost); opacity: 0.82; margin: 0; max-width: 620px;
}
/* .cs-cta composes with the shared .btn-gold class (global.css) for its
   background/color/shape — this just handles its position in the stack. */
.cs-cta{ margin-top: 10px; align-self: flex-end; }

/* ============ APPROACH / BUSINESSES PANELS — normal document flow (not
   pinned). Both share one continuous #010307 backdrop that runs from the
   Thinking carousel all the way through the footer; each is a contained
   inset photo panel floating on that backdrop, with the headline + CTA
   anchored bottom-left inside the panel (per the Canva reference — not
   centered). ============ */
.approach-panel-section{
  background: #010307;
  padding: 36px 0;
}
.approach-panel{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 70vh;
  border-radius: 6px;
  overflow: hidden;
  background-color: #010307;
  background-size: cover;
  background-position: center;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 5vw 6vw;
}
.approach-panel::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(1,3,7,0.82) 0%, rgba(1,3,7,0.35) 45%, rgba(1,3,7,0.05) 100%);
}
.approach-panel--work{
  background-image: url('../approach/business-transformation-plans.jpg');
  background-position: 15% 40%;
}
.approach-panel--businesses{
  background-image: url('../organizations-we-support-hero-bg.jpg');
  background-position: center 35%;
}
.approach-panel-inner{
  position: relative;
  width: min(560px, 78vw);
  display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
  text-align: left;
}
.approach-headline{
  font-family: 'Playfair Display', serif; font-weight: 600;
  font-size: clamp(24px, 2.6vw, 38px); line-height: 1.3;
  color: #F7F9FB; margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
/* .approach-cta composes with the shared .btn-gold class (global.css)
   for its background/color/shape — this just positions it in the stack. */
.approach-cta{ margin-top: 0; }

/* ============ FAQ TEASER — compact link-out bar, replaces the full
   accordion (now on its own page, faq.html). Sits directly on the same
   continuous #010307 backdrop as the panels above and the footer below —
   no separate white wrap, just a subtle divider line top/bottom. ============ */
.faq-teaser{
  background: #010307;
  padding: 56px 0;
  border-top: 1px solid rgba(247,249,251,0.1);
  border-bottom: 1px solid rgba(247,249,251,0.1);
}
.faq-teaser-inner{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
}
.faq-teaser-text{
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  color: var(--frost);
  margin: 0;
}

/* ============ THINKING — blog teaser carousel ============ */
/* The ENTIRE chapter — heading, subtitle, carousel, arrows — is ONE
   pinned unit, driven by scroll progress exactly like .curtain-second:
   a tall scroll-spacer (.th-header-section) with a single position:sticky
   inner (.th-header-sticky). Heading/carousel opacity+translateY and the
   carousel's first queue-advance are all driven off that same scroll
   progress value in the JS (updateThinking()), not timers, while the
   chapter is pinned. Once the pin's scroll budget is used up the section
   unpins and the carousel switches to its normal timer/arrow-driven mode.
   Background is white (#F7F9FB) for the ENTIRE chapter — heading through
   the arrow buttons at the bottom — via .th-header-band/.th-carousel-band.
   Only the carousel cards themselves stay dark (their own photo + bottom
   gradient scrim). Content is capped to the .t-container margin and the
   carousel card itself is narrower still, never touching the raw viewport
   edge. th-* namespace throughout, deliberately not reusing .teaser-*/
   .wp-* (the industries teaser) so this carousel's own JS selectors can
   never collide with anything else on the page. */
.th-header-section{
  position: relative;
  /* Was 170vh (only 70vh of actual pin dwell after the 100vh sticky is
     subtracted) — too short to read as "locked," easy to blow straight
     through in one scroll gesture and mistake for normal scrolling.
     Widened to give a genuinely long, unmistakable pinned dwell (~220vh),
     closer in feel to .curtain-second's 150vh dwell. */
  height: 320vh;
  width: 100%;
  background: #F7F9FB; /* fallback only — the two bands below fully cover this */
}
.th-header-sticky{
  position: sticky; top: 0; height: 100vh; width: 100%;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  background: transparent;
}
/* WHITE band — heading only. Independent rule, deliberately not sharing
   .curtain-second's background so it can never be pulled dark by that
   selector again. */
.th-header-band{
  width: 100%; flex: 0 0 auto;
  background: #F7F9FB;
  padding: 90px min(6vw, 88px) 40px;
  text-align: center;
}
/* NAVY #010307 band — carousel + arrows only. */
/* White too, same as .th-header-band — the whole pinned chapter (heading
   through the arrow buttons) is one continuous white section now. Only
   the carousel cards themselves stay dark (their own photo + gradient
   scrim), not the band behind them. */
.th-carousel-band{
  width: 100%; flex: 1 1 auto;
  background: #F7F9FB;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  padding: 30px min(6vw, 88px) 50px;
}
/* Default state is fully visible/settled — the pin-scroll JS animates OUT
   of this (dropping to opacity 0 + translateY offset) as its enhancement.
   If the JS never runs for any reason, content still shows. */
.th-header{ opacity: 1; will-change: opacity, transform; }
.th-title{
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(24px, 2.2vw, 34px); /* matches .practices-title exactly */
  color: var(--gold); margin: 0 0 10px;
}
.th-subtitle{
  /* Same face/size/weight/color as .practices-support-line — this band is white again. */
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4;
  color: #0A1628; margin: 0;
}
/* Card strip: 3 slides always mounted, each wider than 1/3 of the box so
   the strip overflows the container — one is cut off at the left edge,
   one sits fully visible center, one peeks in at the right edge. The
   whole .th-track slides via translateX (never crossfade/opacity swap);
   DOM is reordered after each transition so the sequence loops forever.
   Narrower than the .t-container box (see width below) so there's real
   whitespace/navy margin on both sides, matching the Canva reference. */
.th-carousel{
  position: relative;
  width: min(1100px, 80vw);
  margin: 0 auto;
  height: 50vh;
  overflow: hidden;
  opacity: 1;
  will-change: opacity, transform;
  /* Perspective for the peek cards' rotateY() below — makes them recede
     in actual 3D depth rather than just skew flat. */
  perspective: 1400px;
}
.th-track{
  display: flex;
  height: 100%;
  transform-style: preserve-3d;
}
/* Each card's photo is a full-bleed background image filling the ENTIRE
   card (edge to edge, both axes) — text is overlaid on top of it via
   .th-slide-overlay (position:absolute, same box), never a separate
   stacked block below/above the photo. Wide horizontal panel: 72% of
   the (now wider) carousel container, not a portrait/near-square block.
   DOM order is always [left-peek, center, right-peek] (+ a transient 4th
   child mid-transition) after thSetBase() resets — see the JS, which is
   why the 3D roles below key off nth-child position, not a class. */
.th-slide{
  position: relative;
  flex: 0 0 78%; /* wider center card => thinner left/right peek slivers */
  margin-right: 20px;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background-size: cover; background-position: center;
  transition: transform 1.1s ease, opacity 1.1s ease;
  /* .th-category-heading + .th-slide-overlay stack bottom-anchored — the
     heading is always in flow and visible; the overlay panel is collapsed
     (max-height:0) beneath it at rest and expands open on hover, so the
     already-visible heading ends up sitting on top of the glass panel once
     it rises, instead of both fading in/out together. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.th-slide-1{ background-image: url('../thinking/ai-business-transformation.jpg'); }
.th-slide-2{ background-image: url('../thinking/decision-intelligence.jpg'); }
.th-slide-3{ background-image: url('../thinking/growth trap.jpg'); }
.th-slide-4{ background-image: url('../thinking/TReDS.png'); }
.th-slide-5{ background-image: url('../thinking/The 195-Day Problem.png'); }
/* No real photo yet — a visibly distinct fill (not the same navy as the
   surrounding .th-carousel-band) so this still reads as a card frame,
   not raw floating text with no boundary. */
.th-slide-placeholder{
  background: linear-gradient(135deg, #16202E 0%, #0A1220 100%);
  border: 1px solid rgba(247,249,251,0.14);
}
/* 3D depth: center card sits flat and popped forward; left/right peeks
   recede at an angle, scaled down and dimmed. Driven by explicit role
   classes the JS assigns at the START of each transition (not by
   nth-child) — nth-child only recomputes at DOM-mutation instants, which
   left every card's rotation frozen for the whole 1.1-1.4s slide and then
   snapping to its new angle the instant the DOM was pruned at the end,
   producing a visible pop/glitch right as each transition finished. */
.th-slide.th-role-left{
  transform: rotateY(-14deg) translateZ(-70px) scale(0.9);
  opacity: 0.62;
}
.th-slide.th-role-center{
  transform: rotateY(0deg) translateZ(20px) scale(1);
  opacity: 1;
}
.th-slide.th-role-right{
  transform: rotateY(14deg) translateZ(-70px) scale(0.9);
  opacity: 0.62;
}
/* Frosted-glass text panel — semi-transparent + blurred, letting the
   photo's color/light show through, instead of a flat solid scrim. */
/* At rest the card shows only the clear photo — the glass panel sits
   pushed fully below the card's bottom edge (translateY(100%), clipped
   by .th-slide's overflow:hidden) and rises into view on hover. */
.th-slide-overlay{
  width: 100%;
  background: rgba(10,20,35,0.35);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
  padding: 0 6%;
  text-align: left;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
}
.th-slide:hover .th-slide-overlay,
.th-slide:focus-within .th-slide-overlay{
  max-height: 280px;
  padding: 24px 6% 28px;
}
/* Always-visible topic label — sits outside the hover-only glass panel so
   even at rest the card reads as "a blog post," not a plain image slide.
   Small chip in the top-left corner, amber/gold on a dark scrim for
   legibility against any photo. */
.th-topic-tag{
  position: absolute; top: 20px; left: 6%; z-index: 2;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
  background: rgba(1,3,7,0.55);
  padding: 8px 14px;
  margin: 0;
}
/* Topic/category name — ALWAYS visible (unlike the rest of the card
   copy), sitting directly on the photo at rest. It's a sibling of
   .th-slide-overlay, not nested inside it, so hiding the overlay never
   hides this. On hover, the overlay panel expands open right beneath it
   (see .th-slide's flex-end stacking), so this heading ends up sitting
   on top of the glass surface once it rises, reading as one continuous
   piece rather than two separately-appearing texts. */
.th-category-heading{
  position: relative; z-index: 2;
  font-family: 'Playfair Display', serif; font-weight: 600;
  font-size: clamp(15px, 1.2vw, 19px);
  color: var(--gold); margin: 0;
  padding: 0 6% 16px;
  border-bottom: 1px solid rgba(232,184,75,0.5);
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
  display: block;
}
.th-headline{
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(18px, 1.5vw, 24px); line-height: 1.3;
  color: #F7F9FB; margin: 0 0 14px; max-width: 30ch;
}
.th-divider{
  border: none; height: 1px; background: rgba(247,249,251,0.35);
  margin: 0 0 14px;
}
.th-subtext{
  font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.6;
  color: #F7F9FB; opacity: 0.82; margin: 0 0 18px; max-width: 46ch;
}
.th-cta{
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--gold); text-decoration: none;
  display: block; text-align: right;
}
.th-cta:hover{ text-decoration: underline; }

.th-arrows{
  display: flex; justify-content: center; gap: 16px;
  opacity: 1;
  will-change: opacity, transform;
}
/* Round icon buttons in the site's gold/navy language, not plain grey
   system circles — thin gold ring, transparent fill, gold glyph; hover
   fills solid gold with a navy glyph, echoing .btn-gold elsewhere. */
.th-arrow{
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid var(--gold); cursor: pointer;
  color: var(--gold); font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.th-arrow:hover{ background: var(--gold); color: #010307; }

/* ============ FOOTER — this page only, #010307 instead of the shared
   var(--navy) used in global.css, so the footer continues the same
   backdrop as the approach/businesses panels and FAQ strip above it.
   Scoped via the #site-footer ID (higher specificity than global.css's
   bare selector) so other pages keep the standard navy footer. ============ */
#site-footer{ background: #010307; }

/* ============ RESPONSIVE — tablet ============ */
@media (max-width: 1024px){
  .intro-photo{ padding: 16px; }
  .practices-grid{ grid-template-columns: 1fr; gap: 20px; }
}

/* ============ RESPONSIVE — mobile ============ */
@media (max-width: 640px){
  .curtain-hero-headline{ font-size: 9.4vw; }

  .faq-teaser-inner{ text-align: center; justify-content: center; }

  .intro-section{ padding: 100px 0 0; }
  .intro-text{ margin-bottom: 44px; }
  .intro-photo{ padding: 10px; }

  .practices-header{ padding: 70px 0 64px; }
  .practices-body{ padding: 0 0 70px; }
  .practices-grid{ margin-top: -48px; }
  .practice-card{ padding: 32px 26px; }

  .kai-network{ padding: 40px 5vw; }
  .curtain-second-sticky{ padding: 96px 6vw 0; }
  .curtain-second-inner{ width: 92vw; padding: 28px 24px 28px 0; }
  .cs-cta{ align-self: flex-start; }

  .approach-panel-section{ padding: 20px 0; }
  .approach-panel{ aspect-ratio: 4 / 5; max-height: 60vh; padding: 8vw 7vw; }
  .approach-headline{ font-size: 6.4vw; }

  .faq-teaser{ padding: 40px 0; }

  .th-header-section{ height: 260vh; }
  .th-header-sticky{ height: 100vh; }
  .th-header-band{ padding: 50px 6vw 30px; }
  .th-carousel-band{ padding: 20px 6vw 40px; gap: 20px; }
  .th-carousel{ width: 84vw; height: 32vh; }
  .th-slide{ flex-basis: 84%; }
  .th-slide:hover .th-slide-overlay,
  .th-slide:focus-within .th-slide-overlay{ padding: 20px 6% 20px; }
  .th-subtext{ display: none; }
}