/* ============================================================
 *  NEW SECTIONS — Ted Saunders homepage build-out
 *  Designed at the 1920 stage width, matching site.css vibe.
 * ============================================================ */

/* ---------- TEDFLIX PORTFOLIO (free, arrow-navigable) ---------- */
.tk-ip-section {
  position: relative;
  background: #000;
}
/* Blurred-carousel replacement — grid of all works + centered explore CTA */
.bc-header { position: relative; z-index: 10; text-align: center; padding: 8px 32px 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bc-rail { position: relative; z-index: 6; max-width: 1320px; margin: 42px auto 0; padding: 0 76px; }
.bc-viewport { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.bc-viewport::-webkit-scrollbar { display: none; }
.bc-track { display: flex; gap: 28px; padding: 4px; }
.bc-card { flex: 0 0 calc((100% - 84px) / 4); display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; }
.bc-card__art { position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
  box-shadow: 0 20px 44px -18px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(209,157,99,0.18);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
.bc-card__art img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease; filter: brightness(0.94); }
.bc-card__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; opacity: 0;
  background: rgba(10,7,4,0.55); border: 1px solid rgba(246,211,107,0.7); backdrop-filter: blur(3px);
  transition: opacity .4s ease, transform .4s ease; transform: scale(0.9); }
.bc-card__play svg { width: 20px; height: 20px; fill: #F6D36B; margin-left: 3px; }
.bc-card:hover .bc-card__art { transform: translateY(-6px); box-shadow: 0 30px 58px -18px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(246,211,107,0.5); }
.bc-card:hover .bc-card__art img { transform: scale(1.05); filter: brightness(1.02); }
.bc-card:hover .bc-card__play { opacity: 1; transform: scale(1); }
.bc-card__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.12;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--c-cream); margin: 13px 2px 0; }
.bc-card__meta { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(211,155,101,0.85); margin: 7px 2px 0; }
.bc-card__dot { margin: 0 8px; opacity: 0.6; }
.bc-arrow { position: absolute; top: 40%; transform: translateY(-50%); z-index: 8; width: 52px; height: 52px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(10,7,4,0.72); border: 1px solid rgba(209,157,99,0.5); backdrop-filter: blur(4px);
  transition: background .3s ease, border-color .3s ease; }
.bc-arrow:hover { background: rgba(30,20,10,0.9); border-color: rgba(246,211,107,0.9); }
.bc-arrow svg { width: 22px; height: 22px; fill: none; stroke: #F6D36B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bc-arrow--prev { left: 8px; } .bc-arrow--next { right: 8px; }
.bc-cta { position: relative; z-index: 6; display: flex; justify-content: center; margin: 44px 0 4px; }
.bc-explore { font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #1A1206; cursor: pointer; border: 0; padding: 17px 40px; border-radius: 6px;
  background: var(--grad-bronze); box-shadow: 0 14px 36px -12px rgba(201,162,75,0.55);
  transition: filter .3s ease, transform 80ms ease; }
.bc-explore:hover { filter: brightness(1.06); }
.bc-explore:active { transform: scale(0.97); }
@media (max-width: 1080px) { .bc-card { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 560px) { .bc-card { flex-basis: 100%; } }
.tk-ip-section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 340px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,0.75) 65%, rgba(0,0,0,0) 100%);
}
.ip-pin {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 56px 0 24px;
}
.tk-ip-cta {
  display: flex; justify-content: center; gap: 24px;
  margin-top: 64px;
}
.tk-ip-cta--out { background: #000; margin: 0; padding: 4px 0 120px; }

/* ---------- FOCUS RAIL ---------- */
.fr {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  outline: none;
  user-select: none;
  display: flex; flex-direction: column;
  flex: 1;
}
.fr-amb {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  animation: frAmbIn 0.8s ease both;
}
.fr-amb img {
  position: absolute; top: -12%; left: -12%; width: 124%; height: 124%;
  object-fit: cover;
  filter: blur(90px) saturate(1.5);
  opacity: 0.4;
}
.fr-amb__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    #000 0%, #000 7%, rgba(0,0,0,0.7) 18%, rgba(0,0,0,0.15) 34%,
    rgba(0,0,0,0.15) 64%, rgba(0,0,0,0.7) 82%, #000 93%, #000 100%);
}
@keyframes frAmbIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- PER-DISCIPLINE ATMOSPHERE ----------
   A cinematic environment behind the rail that changes with the tab:
   theatre · gallery · concert · study. Sits above the blurred poster
   backdrop (fr-amb, z0) and below the cards (fr-stage, z10). */
.fr-atmos {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  animation: frAtmosIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes frAtmosIn {
  from { opacity: 0; filter: blur(14px); transform: scale(1.04); }
  to   { opacity: 1; filter: blur(0);   transform: scale(1); }
}
.fr-atmos__bloom, .fr-atmos__haze { position: absolute; inset: 0; }
.fr-atmos__grain {
  position: absolute; inset: -40%;
  background-image: url("../assets/heading-texture.jpg");
  background-size: 380px; opacity: 0.05; mix-blend-mode: overlay;
  animation: frGrain 1.6s steps(3) infinite;
}
@keyframes frGrain {
  0% { transform: translate(0,0); } 33% { transform: translate(-2%, 1.5%); }
  66% { transform: translate(1.5%, -1%); } 100% { transform: translate(0,0); }
}

/* THEATRE — dark screening room: projector bloom from above, warm haze */
.fr-atmos--theatre .fr-atmos__bloom {
  background:
    radial-gradient(60% 42% at 50% -6%, rgba(244,213,142,0.20) 0%, rgba(244,213,142,0) 60%),
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%);
}
.fr-atmos--theatre .fr-atmos__haze {
  background: linear-gradient(180deg, rgba(20,12,5,0.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(8,5,2,0.7) 100%);
}

/* GALLERY — museum lighting: soft spotlight pools on a cool-neutral wall */
.fr-atmos--gallery .fr-atmos__bloom {
  background:
    radial-gradient(34% 60% at 24% 14%, rgba(245,237,227,0.16) 0%, rgba(245,237,227,0) 58%),
    radial-gradient(34% 60% at 76% 14%, rgba(245,237,227,0.12) 0%, rgba(245,237,227,0) 58%),
    radial-gradient(80% 70% at 50% 120%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%);
}
.fr-atmos--gallery .fr-atmos__haze {
  background: linear-gradient(180deg, rgba(29,37,45,0.32) 0%, rgba(0,0,0,0) 36%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.6) 100%);
}

/* CONCERT — stage lighting: amber beams, fog, an animated equalizer */
.fr-atmos--concert .fr-atmos__bloom {
  background:
    radial-gradient(28% 90% at 30% -10%, rgba(217,95,16,0.20) 0%, rgba(217,95,16,0) 60%),
    radial-gradient(28% 90% at 70% -10%, rgba(244,213,142,0.18) 0%, rgba(244,213,142,0) 60%),
    radial-gradient(40% 60% at 50% 116%, rgba(82,170,165,0.10) 0%, rgba(82,170,165,0) 60%);
}
.fr-atmos--concert .fr-atmos__haze {
  background: linear-gradient(180deg, rgba(12,8,4,0.45) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 64%, rgba(6,4,2,0.8) 100%);
  animation: frFog 9s ease-in-out infinite alternate;
}
@keyframes frFog { from { opacity: 0.8; } to { opacity: 1; } }
.fr-atmos__eq {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  opacity: 0.5; mask: linear-gradient(180deg, transparent, #000);
  -webkit-mask: linear-gradient(180deg, transparent, #000);
}
.fr-atmos__eq i {
  width: 5px; height: 20px; border-radius: 3px;
  background: linear-gradient(180deg, #F4D58E, #C9913F);
  animation: frEq 1.1s ease-in-out infinite alternate;
}
@keyframes frEq { from { height: 12px; opacity: 0.5; } to { height: 92px; opacity: 0.95; } }

/* STUDY — philosopher's room: warm candlelight, parchment, deep shadow */
.fr-atmos--study .fr-atmos__bloom {
  background:
    radial-gradient(46% 50% at 50% 8%, rgba(217,135,51,0.18) 0%, rgba(217,135,51,0) 62%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 55%);
}
.fr-atmos--study .fr-atmos__haze {
  background: linear-gradient(180deg, rgba(34,20,8,0.45) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 66%, rgba(10,6,2,0.78) 100%);
}
.fr-atmos--study .fr-atmos__grain { opacity: 0.09; }

@media (prefers-reduced-motion: reduce) {
  .fr-atmos, .fr-atmos__grain, .fr-atmos__eq i, .fr-atmos--concert .fr-atmos__haze { animation: none; }
}

/* Section header (TEDFLIX divider + blurb) sits inside the rail, above the
   ambient blur, so the backdrop spans the whole section and fades at the top. */
.fr-header {
  position: relative; z-index: 10;
  text-align: center;
  padding: 8px 32px 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px 18px;
  margin-bottom: 8px;
}
/* TEDFLIX eyebrow — "Explore the [Archive / Library / Work]" with a flipping word */
.tedflix-eyebrow {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; letter-spacing: 0.26em; text-transform: uppercase;
}
.tedflix-eyebrow__lead { color: rgba(245,237,227,0.6); }
.tedflix-eyebrow__word {
  background: var(--grad-bronze);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tedflix-flip {
  position: relative; display: inline-block;
  height: 1.2em; overflow: hidden; vertical-align: bottom;
  min-width: 6.4em; text-align: left;
}
.tedflix-flip__word {
  position: absolute; left: 0; top: 0;
  height: 1.2em; line-height: 1.2em; white-space: nowrap;
  background: var(--grad-bronze);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0;
  animation: tedflixFlip 6s infinite;
}
.tedflix-flip__word:nth-child(1) { animation-delay: 0s; }
.tedflix-flip__word:nth-child(2) { animation-delay: 2s; }
.tedflix-flip__word:nth-child(3) { animation-delay: 4s; }
@keyframes tedflixFlip {
  0%      { transform: translateY(100%) rotateX(-90deg); opacity: 0; }
  4%, 28% { transform: translateY(0) rotateX(0deg); opacity: 1; }
  33%, 100% { transform: translateY(-100%) rotateX(90deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tedflix-flip { min-width: 0; }
  .tedflix-flip__word { animation: none; }
  .tedflix-flip__word:nth-child(2), .tedflix-flip__word:nth-child(3) { display: none; }
}
/* TEDFLIX browse tabs — branded segmented control */
.tedflix-tabs {
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: 4px; margin-top: 2px; padding: 5px;
  border-radius: 999px;
  background: rgba(16,11,6,0.55);
  border: 1px solid rgba(201,162,75,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px -26px rgba(0,0,0,0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tedflix-tab {
  appearance: none; cursor: pointer; position: relative;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,237,227,0.6);
  background: transparent; border: 0;
  padding: 11px 26px; border-radius: 999px;
  transition: color .25s ease, background .3s ease, box-shadow .3s ease, transform .12s ease;
}
.tedflix-tab:hover { color: #F4E6C8; }
.tedflix-tab:active { transform: translateY(1px); }
.tedflix-tab.is-active {
  color: #1A1206;
  background: linear-gradient(180deg, #F4D58E 0%, #C9913F 100%);
  box-shadow: 0 12px 26px -12px rgba(244,213,142,0.6), inset 0 1px 0 rgba(255,255,255,0.45);
}
.tk-stage.is-mobile .tedflix-tabs { gap: 2px; padding: 4px; }
.tk-stage.is-mobile .tedflix-tab { font-size: 11px; letter-spacing: 0.12em; padding: 9px 14px; }
.tedflix-tabsub {
  margin: 14px 0 0; text-align: center;
  font-family: var(--font-body); font-style: italic;
  font-size: clamp(14px, 1.5vh, 18px); line-height: 1.4;
  color: rgba(245,237,227,0.66); letter-spacing: 0.01em;
}

.fr-header .blurb {
  font-family: var(--font-body); font-size: clamp(15px, 2.1vh, 22px); line-height: 1.5;
  color: var(--c-cream); max-width: 820px; margin: 0 auto;
}

.fr-stage {
  position: relative; z-index: 10;
  flex: none; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 28px 32px 0;
}
.fr-rail {
  position: relative;
  height: clamp(300px, 54vh, 500px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  perspective: 1400px;
  cursor: grab;
}
.fr-rail:active { cursor: grabbing; }

.fr-card {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(190px, 37vh, 360px);
  aspect-ratio: 2 / 3;
  border-radius: 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  background: #160F0A;
  box-shadow: 0 40px 90px rgba(0,0,0,0.65);
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s ease, filter 0.5s ease;
  will-change: transform, opacity, filter;
}
.fr-card.is-center {
  box-shadow: 0 50px 120px rgba(0,0,0,0.7), 0 0 60px rgba(209,157,99,0.14);
  cursor: pointer;
}
.fr-card.is-center::after {
  content: ""; position: absolute; inset: -2px; border-radius: 20px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(232,201,138,0.55), 0 0 42px rgba(232,201,138,0.28);
}
/* Category icon badge + year tag on each card */
.fr-card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10,7,4,0.62); border: 1px solid rgba(232,201,138,0.5);
  color: #F4D58E; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fr-card__year {
  position: absolute; top: 14px; right: 13px; z-index: 3;
  font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em;
  color: rgba(255,240,217,0.92); padding: 4px 8px; border-radius: 4px;
  background: rgba(10,7,4,0.55); border: 1px solid rgba(232,201,138,0.32);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fr-card:not(.is-center) .fr-card__badge,
.fr-card:not(.is-center) .fr-card__year { opacity: 0; }
.fr-card img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 18px;
  pointer-events: none;
}
.fr-card__sheen {
  position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 36%);
}

/* Play button on the centered card */
.fr-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 999px; border: none;
  padding-left: 6px;
  background: rgba(12,8,5,0.5);
  box-shadow: inset 0 0 0 1.5px rgba(247,219,160,0.7), 0 12px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.fr-play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(12,8,5,0.7); }
.fr-play:active { transform: translate(-50%, -50%) scale(0.97); }

/* Video lightbox */
.fr-lb {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  padding: 48px;
  animation: frLbIn 0.25s ease;
}
@keyframes frLbIn { from { opacity: 0; } to { opacity: 1; } }
.fr-lb__close {
  position: absolute; top: 28px; right: 32px;
  width: 52px; height: 52px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  color: var(--c-cream); cursor: pointer; transition: background 0.2s ease;
}
.fr-lb__close:hover { background: rgba(255,255,255,0.14); }
.fr-lb__frame {
  width: min(1280px, 100%); aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  background: #0B0805;
  box-shadow: 0 50px 140px rgba(0,0,0,0.7);
  border-top: 1px solid rgba(247,219,160,0.18);
}
.fr-lb__frame iframe { width: 100%; height: 100%; display: block; }
.fr-lb__placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(209,157,99,0.05) 0 1px, transparent 1px 26px),
    radial-gradient(60% 70% at 50% 40%, rgba(90,52,25,0.5) 0%, #0B0805 70%);
}
.fr-lb__meta {
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-top: 8px;
}
.fr-lb__title {
  font-family: var(--font-display); font-size: 38px; text-transform: uppercase;
  background: linear-gradient(180deg, #F7DBA0 0%, #C9915C 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.fr-lb__note {
  font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em;
  color: rgba(255,234,202,0.42); margin-top: 6px;
}

.fr-info {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  max-width: 1180px; width: 100%;
  margin: 44px auto 0;
}
.fr-info__text {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 640px;
  opacity: 1;
  animation: frTextIn 0.45s ease;
}
@keyframes frTextIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.fr-meta {
  font-family: var(--font-sans);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--grad-bronze);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Category lockup (icon + label) for the active featured card */
.fr-cat {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #E8C98A;
}
.fr-cat svg { color: #E8C98A; flex-shrink: 0; }
/* Spec chips: year · medium · duration */
.fr-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fr-spec {
  font-family: var(--font-sans); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,237,227,0.82);
  padding: 5px 11px; border: 1px solid rgba(201,162,75,0.4);
  border-radius: 3px; background: rgba(20,13,7,0.4);
}
.fr-title {
  font-family: var(--font-display);
  font-size: 46px; line-height: 0.96;
  text-transform: uppercase; letter-spacing: 0.01em;
  margin: 0;
  background: linear-gradient(180deg, #F7DBA0 0%, #E8B777 30%, #C9915C 70%, #B4823E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fr-desc {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.55;
  color: var(--c-cream); opacity: 0.86; margin: 0;
}

.fr-controls { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }

/* Coverflow navigation arrows — flank the rail, premium brass discs */
.fr-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,13,7,0.55); color: #F4E6C8;
  border: 1px solid rgba(201,162,75,0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.fr-arrow:hover {
  background: rgba(52,38,22,0.7); border-color: rgba(232,201,138,0.9);
  transform: translateY(-50%) scale(1.08);
}
.fr-arrow:active { transform: translateY(-50%) scale(0.96); }
.fr-arrow--prev { left: calc(50% - 360px); }
.fr-arrow--next { right: calc(50% - 360px); }

/* Position dots */
.fr-dots { display: flex; align-items: center; gap: 12px; }
.fr-dot {
  flex: 0 0 auto; box-sizing: border-box;
  width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(201,162,75,0.30); border: 1px solid rgba(201,162,75,0.5);
  transition: background 0.25s ease, transform 0.25s ease;
}
.fr-dot:hover { background: rgba(232,201,138,0.6); }
.fr-dot.is-active {
  width: 26px; border-radius: 5px;
  background: linear-gradient(90deg, #F4D58E, #C9913F); border-color: transparent;
}
/* The Explore CTA carries longer text than the fixed 312px button width —
   let it size to its content so the arrow isn't clipped. */
.fr-controls .tk-btn { width: auto; padding: 0 40px; }
.fr-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(20,14,9,0.8);
  border: 1px solid rgba(209,157,99,0.28);
  border-radius: 999px; padding: 6px;
  backdrop-filter: blur(8px);
}
.fr-pill button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; border-radius: 999px;
  background: transparent; color: var(--c-cream);
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.fr-pill button:hover { background: rgba(209,157,99,0.16); color: #fff; }
.fr-pill button:active { transform: scale(0.94); }
.fr-count {
  min-width: 58px; text-align: center;
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px; letter-spacing: 0.08em; color: rgba(255,234,202,0.6);
}
.fr-explore {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #000; text-decoration: none;
  background: linear-gradient(180deg, #FFF2C6 0%, #BD8332 100%);
  padding: 14px 26px; border-radius: 999px;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.fr-explore:hover { transform: scale(1.04); filter: brightness(0.96); }
.fr-explore svg { transition: transform 0.2s ease; }
.fr-explore:hover svg { transform: translate(2px, -2px); }

/* ---------- MOBILE ---------- */
.tk-stage.is-mobile .tk-ip-section { padding: 60px 0 64px; }
.tk-stage.is-mobile .fr { height: auto; }
.tk-stage.is-mobile .fr-stage { padding: 0 16px; height: 480px; }
.tk-stage.is-mobile .fr-rail { height: 360px; perspective: 900px; }
.tk-stage.is-mobile .fr-card { width: 230px; }
.tk-stage.is-mobile .fr-arrow--prev { left: 8px; }
.tk-stage.is-mobile .fr-arrow--next { right: 8px; }
.tk-stage.is-mobile .fr-info {
  flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 28px;
}
.tk-stage.is-mobile .fr-title { font-size: 30px; }
.tk-stage.is-mobile .fr-desc { font-size: 15px; }
.tk-stage.is-mobile .fr-controls { width: 100%; justify-content: space-between; }
.tk-stage.is-mobile .tk-ip-cta { flex-direction: column; padding: 0 24px; margin-top: 44px; }
.tk-stage.is-mobile .tk-ip-cta .tk-btn { width: 100%; }

/* Portfolio is now OUTSIDE the scaled stage — drive its mobile layout from a
   real viewport media query instead of the .tk-stage.is-mobile flag. */
@media (max-width: 768px) {
  .tk-ip-section { height: auto; }
  .ip-pin { height: auto; }
  .fr-stage { padding: 0 14px; }
  .fr-rail { height: 320px; perspective: 900px; }
  .fr-card { width: 210px; }
  .fr-info { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 18px; }
  .fr-title { font-size: 28px; }
  .fr-desc { font-size: 15px; }
  .fr-controls { width: 100%; justify-content: space-between; }
  .fr-header .blurb { font-size: 16px; }
  .tk-ip-cta--out { flex-direction: column; padding: 0 24px 80px; }
  .tk-ip-cta--out .tk-btn { width: 100%; }
}


/* ============================================================
 *  LAMP  — ported from Aceternity "Lamp", recolored bronze-gold.
 *  Light color: #E8B777 (beam) / #F7DBA0 (core + line).
 * ============================================================ */
.lamp-container {
  position: relative; z-index: 0;
  width: 100%; min-height: 600px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; background: #000;
}
.lamp-stage {
  position: relative; z-index: 0;
  display: flex; width: 100%; flex: 1;
  align-items: center; justify-content: center;
  transform: scaleY(1.25); isolation: isolate;
}

/* The two conic-gradient beams */
.lamp-beam {
  position: absolute; inset: auto;
  height: 16rem; width: 30rem;
  overflow: visible;
  opacity: 0.5;
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1), opacity 0.9s ease;
}
.lamp-beam--l {
  right: 50%;
  background-image: conic-gradient(from 70deg at center top, #E8B777, transparent 38%, transparent);
}
.lamp-beam--r {
  left: 50%;
  background-image: conic-gradient(from 290deg at center top, transparent, transparent 62%, #E8B777);
}
.is-lit .lamp-beam { width: 38rem; opacity: 1; }

.lamp-mask { position: absolute; bottom: 0; background: #000; z-index: 20; }
.lamp-mask--bottom { width: 100%; height: 11rem; left: 0;
  -webkit-mask-image: linear-gradient(to top, white, transparent);
          mask-image: linear-gradient(to top, white, transparent); }
.lamp-beam--l .lamp-mask--right { width: 11rem; height: 100%; left: 0;
  -webkit-mask-image: linear-gradient(to right, white, transparent);
          mask-image: linear-gradient(to right, white, transparent); }
.lamp-beam--r .lamp-mask--left { width: 11rem; height: 100%; right: 0;
  -webkit-mask-image: linear-gradient(to left, white, transparent);
          mask-image: linear-gradient(to left, white, transparent); }

/* Slate/black blur bar that grounds the beams */
.lamp-blurbar {
  position: absolute; top: 50%; width: 100%; height: 13rem;
  transform: translateY(0.75rem) scaleX(1.5);
  background: #000; filter: blur(40px); z-index: 1;
}
/* Big soft glow */
.lamp-glow {
  position: absolute; inset: auto; z-index: 30;
  height: 9rem; width: 30rem; transform: translateY(-50%);
  border-radius: 999px; background: #E8B777; opacity: 0.5; filter: blur(64px);
}
/* Bright inner core (animated width) */
.lamp-core {
  position: absolute; inset: auto; z-index: 30;
  height: 9rem; width: 8rem; transform: translateY(-6rem);
  border-radius: 999px; background: #F7DBA0; filter: blur(40px);
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1);
}
.is-lit .lamp-core { width: 18rem; }
/* The sharp light line at the apex (animated width) */
.lamp-line {
  position: absolute; inset: auto; z-index: 50;
  height: 2px; width: 15rem; transform: translateY(-7rem);
  background: #F7DBA0; box-shadow: 0 0 24px 2px rgba(247,219,160,0.7);
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1);
}
.is-lit .lamp-line { width: 38rem; }
/* Black crop above the line so beams read as a lamp */
.lamp-topcrop {
  position: absolute; inset: auto; z-index: 40;
  height: 12rem; width: 100%; transform: translateY(-12.5rem);
  background: #000;
}

.lamp-content {
  position: relative; z-index: 50;
  transform: translateY(-12rem);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 24px;
}

/* Default headline treatment for lamp content */
.lamp-content h2 {
  font-family: var(--font-display);
  font-size: 72px; line-height: 1.0; text-transform: uppercase;
  letter-spacing: 0.01em; margin: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBEFD6 42%, #E8B777 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 26px rgba(0,0,0,0.45));
  opacity: 0; transform: translateY(60px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}
.is-lit .lamp-content h2 { opacity: 1; transform: translateY(0); }
.lamp-content .lamp-sub {
  font-family: var(--font-body); font-size: 22px; line-height: 1.5;
  color: var(--c-cream); max-width: 720px; margin: 22px auto 0;
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s ease 0.45s, transform 0.8s ease 0.45s;
}
.is-lit .lamp-content .lamp-sub { opacity: 1; transform: translateY(0); }
.lamp-content .lamp-cta { margin-top: 38px; opacity: 0; transition: opacity 0.8s ease 0.6s; }
.is-lit .lamp-content .lamp-cta { opacity: 1; }

/* Mobile */
.tk-stage.is-mobile .lamp-container { min-height: 440px; }
.tk-stage.is-mobile .lamp-content { transform: translateY(-8rem); }
.tk-stage.is-mobile .lamp-content h2 { font-size: 34px; }
.tk-stage.is-mobile .lamp-content .lamp-sub { font-size: 15px; }


/* ============================================================
 *  MANIFESTO — gooey bronze gradient bg + scroll word-reveal
 * ============================================================ */
.tk-manifesto {
  position: relative; overflow: hidden;
  background: #000;
  padding: 200px 0 220px;
  --goo-size: 80%; /* @kind spacing */
  --goo-1: 191,135,83; /* @kind color */
  --goo-2: 250,194,136; /* @kind color */
  --goo-3: 217,95,16; /* @kind color */
  --goo-4: 217,151,51; /* @kind color */
  --goo-5: 246,211,107; /* @kind color */
  --goo-pointer: 250,194,136; /* @kind color */
  --goo-blend: screen; /* @kind other */
}

/* --- Gooey background --- */
.goo-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.goo-svg { position: absolute; width: 0; height: 0; }
.goo-layer {
  position: absolute; inset: 0;
  filter: url("#bronzeGoo") blur(46px);
}
.goo-blob {
  position: absolute;
  width: var(--goo-size); height: var(--goo-size);
  top: calc(50% - var(--goo-size) / 2);
  left: calc(50% - var(--goo-size) / 2);
  mix-blend-mode: var(--goo-blend);
  transform-origin: center center;
  opacity: 0.85;
}
.goo-1 {
  background: radial-gradient(circle at center, rgba(var(--goo-1),0.85) 0, rgba(var(--goo-1),0) 52%) no-repeat;
  animation: gooVertical 32s ease-in-out infinite;
}
.goo-2 {
  background: radial-gradient(circle at center, rgba(var(--goo-2),0.8) 0, rgba(var(--goo-2),0) 52%) no-repeat;
  transform-origin: calc(50% - 420px) center;
  animation: gooCircle 26s linear infinite reverse;
}
.goo-3 {
  background: radial-gradient(circle at center, rgba(var(--goo-3),0.75) 0, rgba(var(--goo-3),0) 52%) no-repeat;
  transform-origin: calc(50% + 420px) center;
  animation: gooCircle 44s linear infinite;
}
.goo-4 {
  background: radial-gradient(circle at center, rgba(var(--goo-4),0.8) 0, rgba(var(--goo-4),0) 52%) no-repeat;
  transform-origin: calc(50% - 220px) center;
  animation: gooHorizontal 40s ease-in-out infinite;
  opacity: 0.6;
}
.goo-5 {
  background: radial-gradient(circle at center, rgba(var(--goo-5),0.8) 0, rgba(var(--goo-5),0) 52%) no-repeat;
  transform-origin: calc(50% - 800px) calc(50% + 800px);
  animation: gooCircle 22s ease-in-out infinite;
}
.goo-pointer {
  width: 100%; height: 100%; top: -50%; left: -50%;
  background: radial-gradient(circle at center, rgba(var(--goo-pointer),0.7) 0, rgba(var(--goo-pointer),0) 50%) no-repeat;
  mix-blend-mode: var(--goo-blend);
  opacity: 0.6;
}
/* Vignette so the glow grounds into black at the edges */
.goo-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 72%, #000 100%);
}

@keyframes gooVertical {
  0% { transform: translateY(-46%); }
  50% { transform: translateY(46%); }
  100% { transform: translateY(-46%); }
}
@keyframes gooCircle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes gooHorizontal {
  0% { transform: translateX(-44%) translateY(-8%); }
  50% { transform: translateX(44%) translateY(8%); }
  100% { transform: translateX(-44%) translateY(-8%); }
}

/* --- Content --- */
.tk-manifesto__inner {
  position: relative; z-index: 2;
  max-width: 1040px; margin: 0 auto; padding: 0 40px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tk-manifesto__head {
  font-family: var(--font-display);
  font-size: 96px; line-height: 0.96; text-transform: uppercase;
  letter-spacing: 0.005em; margin: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBEFD6 40%, #E8B777 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 40px rgba(0,0,0,0.5));
}
.tk-manifesto__sub {
  font-family: var(--font-display);
  font-size: 30px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em;
  margin: 26px 0 0;
  color: var(--c-cream);
}
.tk-manifesto__body {
  margin-top: 56px;
  display: flex; flex-direction: column; gap: 18px;
  max-width: 880px;
}
.tk-manifesto__cta { margin-top: 52px; }

/* --- Magic scroll-reveal text --- */
.magic-text {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 0.34em;
  font-family: var(--font-body);
  font-weight: 500; font-size: 27px; line-height: 1.5;
  margin: 0;
}
.magic-word { position: relative; display: inline-block; }
.magic-ghost { color: rgba(255,234,202,0.16); }
.magic-reveal {
  position: absolute; left: 0; top: 0;
  color: var(--c-cream-deep);
  transition: opacity 0.1s linear;
}

/* --- Mobile --- */
.tk-stage.is-mobile .tk-manifesto { padding: 96px 0 110px; }
.tk-stage.is-mobile .tk-manifesto__inner { padding: 0 24px; }
.tk-stage.is-mobile .tk-manifesto__head { font-size: 42px; }
.tk-stage.is-mobile .tk-manifesto__sub { font-size: 18px; }
.tk-stage.is-mobile .magic-text { font-size: 18px; }
.tk-stage.is-mobile .tk-manifesto__body { margin-top: 36px; }


/* ============================================================
 *  CINEMATIC MANIFESTO — pinned scroll-scrub (outside scaled stage)
 * ============================================================ */
.tk-cine {
  position: relative;
  height: 200vh;            /* scroll track length for the pinned scrub (~50% less wheel) */
  background: #000;
}
.cine-pin {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
  background: #060402;
}
/* Full-opacity photograph */
.cine-photo {
  position: absolute; inset: 0; z-index: 0;
  background: url("../assets/opt/parchment-desk.jpg") center/cover no-repeat;
}
/* Strong vignette on all sides + black fade at top & bottom so the section
   melts into the black background above (compass) and below (footer area). */
.cine-photoveil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(105% 80% at 50% 50%, rgba(6,4,2,0) 30%, rgba(6,4,2,0.45) 60%, rgba(6,4,2,0.85) 82%, rgba(6,4,2,1) 100%),
    linear-gradient(180deg,
      #000 0%, rgba(6,4,2,0.85) 9%, rgba(6,4,2,0) 24%,
      rgba(6,4,2,0) 74%, rgba(6,4,2,0.85) 91%, #000 100%);
}

/* Film grain — fits the brand's "analog imperfection" direction */
.cine-grain {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+');
}
.cine-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-size: 64px 64px;
  background-image:
    linear-gradient(to right, rgba(209,157,99,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(209,157,99,0.06) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 64%);
          mask-image: radial-gradient(ellipse at center, #000 0%, transparent 64%);
}

/* Phase 1 — title (absolute, JS drives opacity/scale/blur) */
.cine-intro {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 2px; will-change: transform, opacity, filter;
  max-width: 620px; margin: 0 auto;
}
.cine-line {
  font-family: var(--font-display);
  font-size: clamp(46px, 6.4vw, 104px); line-height: 0.98;
  text-transform: none; letter-spacing: 0.01em; margin: 0;
  background: none;
  -webkit-text-fill-color: #0A0704; color: #0A0704;
}
.cine-line--1 { filter: drop-shadow(0 2px 10px rgba(255,238,200,0.4)); }
.cine-line--2 {
  filter: drop-shadow(0 2px 10px rgba(255,238,200,0.4));
}
.cine-scrollcue {
  position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.28em;
  color: rgba(255,234,202,0.5); animation: cineBob 2.2s ease-in-out infinite;
}
@keyframes cineBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* Phase 2 — the manifesto is INKED onto the parchment, not a 2D card.
   No shell: no dark gradient, border, radius or shadow — content sits
   directly on the desk world and develops in. */
.cine-card {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%);
  width: min(1360px, 92vw); height: min(840px, 86vh);
  display: block;
  opacity: 0;
  will-change: transform, opacity;
}
.card-sheen { display: none; }
.cine-card__photo {
  display: none;
}
.cine-card__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  object-position: right bottom; transform-origin: 100% 100%;
  will-change: transform, opacity, filter;
}
.cine-card__photo-veil { display: none; }
.cine-card__copy {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  height: 100%; max-width: 1040px; margin: 0 auto;
  padding: 32px; will-change: transform, opacity;
}
/* Warm lamplight pooling on the parchment behind the copy — lifts the
   ink off the page and sells the "magically illuminated manuscript" feel. */
.cine-card__copy::before {
  content: ""; position: absolute; inset: -8% -12% -8% -22%; z-index: -1;
  background: radial-gradient(72% 70% at 52% 50%,
    rgba(252,242,216,0.92) 0%, rgba(250,238,208,0.45) 44%, rgba(250,238,208,0) 76%);
  filter: blur(10px); pointer-events: none;
}
.cine-eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 15px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #7a531f;
  margin-bottom: 14px;
}
.cine-card__head {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.5vw, 46px); line-height: 1.04; text-transform: uppercase; letter-spacing: 0.01em;
  margin: 0 0 18px; max-width: 680px;
  color: #241606;
  text-shadow: 0 1px 0 rgba(255,250,236,0.5);
}
.cine-card__copy p {
  font-family: var(--font-body); font-size: clamp(15px, 1.05vw, 20px); line-height: 1.55;
  color: #3a2814; opacity: 0.96; margin: 0 0 14px; max-width: 760px;
}
.cine-card__cta { margin-top: 14px; }

/* Short viewports — tighten the manifesto copy so it never overflows the card */
@media (max-height: 800px) {
  .cine-eyebrow { margin-bottom: 10px; }
  .cine-card__head { font-size: clamp(24px, 2.1vw, 34px); margin-bottom: 12px; }
  .cine-card__copy p { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
  .cine-card__cta { margin-top: 10px; }
}

/* Mobile (this section is outside the scaled stage → its own breakpoint) */
@media (max-width: 768px) {
  .tk-cine { height: 190vh; }
  .cine-card {
    grid-template-columns: 1fr; height: min(620px, 80vh);
    width: 92vw; border-radius: 26px;
  }
  .cine-card__photo { height: 46%; }
  .cine-card__photo-veil { background: linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(10,7,5,0.96) 100%); }
  .cine-card__copy { padding: 26px 26px 30px; justify-content: flex-start; }
  .cine-card__head { margin-bottom: 16px; }
  .cine-card__copy p { margin-bottom: 12px; }
  .cine-card__cta { margin-top: 12px; }
}


/* ============================================================
 *  FEATURE SCROLL — Aceternity ContainerScroll (3D card un-tilt)
 *  Headline translates up while the video card rotates flat + scales.
 * ============================================================ */
.tk-fscroll {
  position: relative;
  background: #000;
  /* vw padding (110px @ 1920 = 5.73vw) so the section rhythm matches the
     in-stage sections, which scale with the viewport. */
  padding: 2.4vw 0 5.73vw;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fscroll-inner {
  width: 100%;
  perspective: 1100px;
  display: flex; flex-direction: column; align-items: center;
}

/* Headline block (shared bronze type styles) */
.fintro-eyebrow {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 18px; letter-spacing: 0.30em; text-transform: uppercase;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 28px;
}
.fintro-head {
  font-family: var(--font-display);
  /* Sized in vw to match the in-stage section heads (56px @ 1920 = 2.92vw) */
  font-size: clamp(30px, 2.92vw, 58px); line-height: 0.94;
  text-transform: uppercase; letter-spacing: 0.020em; margin: 0;
  background: linear-gradient(180deg,
    #F7DBA0 0%, #E8B777 28%, #D29B5A 60%, #B4823E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fintro-blurb {
  font-family: var(--font-body); font-size: clamp(15px, 1.15vw, 22px); line-height: 1.5;
  color: var(--c-cream); opacity: 0.9; max-width: 720px; margin: 18px auto 0;
}
/* Awards — laurel-flanked wins, on-brand bronze */
.fintro-awards {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 54px;
  margin: 34px auto 0;
}
/* On wide viewports keep all three wins on a single line */
@media (min-width: 1080px) {
  .fintro-awards { flex-wrap: nowrap; gap: clamp(24px, 2.6vw, 48px); }
  .award { gap: 10px; }
  .award__laurel { height: 56px; }
}
.award {
  display: flex; align-items: center; gap: 14px;
  color: #D9A85C;
}
.award__laurel { height: 64px; width: auto; flex-shrink: 0; opacity: 0.92; }
.award__body { text-align: center; }
.award__title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(18px, 1.5vw, 24px); letter-spacing: 0.04em; line-height: 1;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.award__org {
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-cream);
  opacity: 0.86; margin-top: 7px;
}
.award__year {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; color: rgba(217,168,92,0.75); margin-top: 4px;
}
.fscroll-header {
  max-width: 1100px; margin: 0 auto 2vw; padding: 0 48px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 4;
  will-change: transform;
}

/* ---- full-bleed autoplaying reel ---- */
.fwork-stage {
  position: relative;
  width: 100vw; margin-left: calc(-50vw + 50%);
  height: min(82vh, 820px);
  overflow: hidden;
  /* pull the reel up so its soft top fade tucks under the awards instead of
     leaving a black gap */
  margin-top: clamp(-220px, -13vh, -120px);
}
.fwork-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.8;
  /* long, gentle top fade so the reel emerges softly from under the awards;
     soft fade at the bottom so the CTAs below stay legible */
  -webkit-mask: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 16%, #000 34%, #000 82%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 16%, #000 34%, #000 82%, transparent 100%);
}
/* extra bottom scrim into the page black */
.fwork-fade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 80%, #000 100%);
}

/* ---- rising YouTube reviews ---- */
.fwork-reviews {
  position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none;
}
.fwork-review {
  position: absolute; bottom: 0;
  height: auto; border-radius: 12px;
  opacity: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  background: rgba(255,255,255,0.96);
  padding: 4px;
  animation-name: fworkReviewFly;
  animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes fworkReviewFly {
  0%   { transform: translateY(8%); opacity: 0; }
  10%  { opacity: 0.97; }
  46%  { opacity: 0.97; }
  100% { transform: translateY(calc(-1 * var(--rise, 44vh))); opacity: 0; }
}

/* ---- centered play button ---- */
.fwork-play {
  position: absolute; left: 50%; top: 46%; z-index: 6;
  transform: translate(-50%, -50%);
  width: 108px; height: 108px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(20,15,10,0.55), rgba(10,7,4,0.78));
  border: 1px solid rgba(247,219,160,0.55);
  box-shadow: 0 0 40px rgba(240,196,120,0.35), inset 0 1px 2px rgba(255,240,210,0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  backdrop-filter: blur(2px);
}
.fwork-play:hover {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 0 60px rgba(240,196,120,0.55), inset 0 1px 2px rgba(255,240,210,0.4);
}
.fwork-play:active { transform: translate(-50%, -50%) scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .fwork-review { animation: none !important; opacity: 0 !important; }
}

/* Testimonials + CTA, sitting directly below the reel */
.fscroll-after {
  width: min(1280px, 92vw); margin: 0 auto;
}
.fscroll-after .tk-testimonials {
  max-width: none; padding: 20px 84px 0; gap: 56px; margin: 3.3vw auto 0;
}
/* Featured quotes on the dark page — keep the enlarged quote glyph; the body
   and attribution inherit the on-dark bronze/cream treatment. */
.fscroll-after .tk-testimonial .quote-icon {
  width: 132px; height: 123px; margin-bottom: 28px;
}
.fscroll-after .tk-feature-cta { margin-top: 3.3vw; }

@media (max-width: 768px) {
  .fscroll-after { width: 92vw; }
  .fscroll-after .tk-testimonials {
    grid-template-columns: 1fr; gap: 28px; margin-top: 40px;
  }
  .fscroll-after .tk-testimonials .tk-vrule { display: none; }
  .fscroll-after .tk-feature-cta { flex-direction: column; gap: 12px; margin-top: 40px; }
  .fscroll-after .tk-feature-cta .tk-btn { width: 100%; }
}

@media (max-width: 768px) {
  .tk-fscroll { padding: 20px 0 40px; }
  .fscroll-header { padding: 0 24px; }
  .fscroll-card { width: 92vw; border-width: 2px; padding: 8px; border-radius: 22px; }
}


/* ============================================================
 *  COMPASS OF CREATIONS — cinematic orrery (outside scaled stage)
 * ============================================================ */
.tk-compass {
  position: relative;
  height: auto;                  /* click-driven: no scroll lock */
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 70% 30%, rgba(74,46,20,0.55) 0%, rgba(0,0,0,0) 55%),
    #060402;
}
.compass-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Leather-macro photograph bleeding in from the top, fading to black toward
   the bottom so it melts into the section's dark base. */
.compass-photo {
  position: absolute; left: 0; right: 0; top: 0; height: 64%;
  background: url("../assets/compass-leather-bg.jpg") center 38% / cover no-repeat;
  opacity: 0.65; filter: brightness(1.15) contrast(1.05);
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 34%, rgba(0,0,0,0.4) 72%, transparent 100%);
          mask: linear-gradient(180deg, #000 0%, #000 34%, rgba(0,0,0,0.4) 72%, transparent 100%);
}
.compass-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #060402 0%, rgba(6,4,2,0.85) 6%, rgba(6,4,2,0) 20%),
    radial-gradient(70% 60% at 72% 42%, rgba(232,201,138,0.10) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
}
/* Faint explorer's-lab engraving texture */
.compass-bg::before {
  content: ""; position: absolute; inset: -10%;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(232,201,138,0.6) 0 1px, transparent 1.5px),
    repeating-linear-gradient(64deg, rgba(232,201,138,0.12) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(-22deg, rgba(232,201,138,0.10) 0 1px, transparent 1px 90px);
  background-size: 42px 42px, auto, auto;
}
/* Drifting dust motes */
.compass-dust {
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(251,230,184,0.8), transparent),
    radial-gradient(1.2px 1.2px at 70% 60%, rgba(251,230,184,0.6), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(251,230,184,0.5), transparent),
    radial-gradient(1.3px 1.3px at 85% 20%, rgba(251,230,184,0.7), transparent),
    radial-gradient(1px 1px at 32% 65%, rgba(251,230,184,0.5), transparent);
  background-size: 600px 600px, 700px 700px, 500px 500px, 800px 800px, 650px 650px;
  animation: compassDrift 26s linear infinite;
}
@keyframes compassDrift { to { background-position: 0 -600px, 0 -700px, 0 -500px, 0 -800px, 0 -650px; } }

.compass-pin {
  position: relative; min-height: calc(100vh + 72px); overflow: hidden;
  padding: 120px 0 64px;
}
/* Section heading — centered, sized + spaced so it clears the right-side orrery */
.compass-header {
  position: relative; z-index: 5;
  max-width: 760px; margin: 0 auto 56px; padding: 0 24px; text-align: center;
}
/* "Click to explore my universe" cue — floats over the top-right of the compass */
.compass-cue {
  position: absolute; z-index: 6; top: 12px; right: 6%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: max-content; margin: 26px auto 0; cursor: pointer;
  color: #E8C98A;
  transition: color 0.2s ease, transform 0.2s ease;
}
.compass-cue:hover { color: #F7DBA0; transform: translateY(2px); }
.compass-cue__text {
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.26em; text-transform: uppercase;
}
.compass-cue__arrow { animation: compassCueBob 1.8s ease-in-out infinite; }
@keyframes compassCueBob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .compass-cue__arrow { animation: none; } }
.compass-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: center;
  max-width: 1700px; margin: 0 auto; padding: 0 4vw;
}

/* ---------- LEFT — editorial ---------- */
.compass-left { max-width: 620px; }
.compass-eyebrow {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; letter-spacing: 0.34em; text-transform: uppercase;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 22px;
}
.compass-head {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 58px); line-height: 1.0;
  text-transform: uppercase; letter-spacing: 0.01em; margin: 0;
  background: linear-gradient(180deg, #F7DBA0 0%, #E8B777 30%, #C9915C 70%, #B4823E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0.92;
}
.compass-header .compass-sub {
  margin: 18px auto 0; max-width: 620px;
}
.compass-sub {
  font-family: var(--font-body); font-size: clamp(16px, 1.1vw, 20px); line-height: 1.55;
  color: var(--c-cream); opacity: 0.9; margin: 22px 0 0; max-width: 460px;
}

/* Active destination panel */
.compass-active {
  margin-top: 0; padding-top: 0;
  animation: compassPanelIn 0.6s ease;
}
@keyframes compassPanelIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.compass-active__head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.compass-active__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  color: #FBE6B8;
  background: radial-gradient(circle at 38% 32%, #3A2C16 0%, #160F07 100%);
  border: 1px solid #B98F3F;
  box-shadow: 0 0 16px rgba(240,196,120,0.4), inset 0 1px 2px rgba(251,230,184,0.4);
}
.compass-active__num {
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.26em; text-transform: uppercase; color: rgba(232,201,138,0.7);
}
/* Large cinematic preview — the focal point of the chapter */
.compass-active__preview {
  position: relative; margin: 4px 0 22px;
  width: 100%; max-width: 540px; aspect-ratio: 16 / 10;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(201,162,75,0.45);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,0.85), inset 0 1px 2px rgba(251,230,184,0.22), 0 0 30px rgba(240,196,120,0.12);
}
.compass-active__preview[data-key="props"] img { object-position: right center; }
.compass-active__preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: compassPreviewIn 0.75s cubic-bezier(0.16,1,0.3,1);
}
@keyframes compassPreviewIn {
  from { opacity: 0; transform: scale(1.08); filter: blur(8px) brightness(1.3); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0) brightness(1); }
}
.compass-active__previewedge {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(251,230,184,0.08) 0%, rgba(0,0,0,0) 30%);
}
.compass-active__name {
  font-family: var(--font-display); font-size: clamp(28px, 2.3vw, 40px);
  letter-spacing: 0.04em; text-transform: uppercase;
  background: linear-gradient(180deg, #FBE6B8 0%, #C9A24B 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.compass-active__desc {
  font-family: var(--font-body); font-size: 18px; line-height: 1.55;
  color: var(--c-cream); opacity: 0.88; margin: 14px 0 0; max-width: 520px;
}
.compass-active__cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
  background: transparent; border: 1px solid rgba(201,162,75,0.5);
  color: #E8C98A; padding: 13px 24px; border-radius: 2px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.compass-active__cta:hover {
  background: linear-gradient(180deg, #F4D58E, #B4823E); color: #1A1206;
  border-color: transparent; gap: 16px;
}

/* ---------- RIGHT — the orrery ---------- */
.compass-right { position: relative; height: 100%; align-self: stretch; }
/* Brass connector — an energy path from the panel toward the instrument */
.compass-link {
  position: absolute; left: 44%; top: 50%; transform: translateY(-50%);
  z-index: 3; display: flex; align-items: center; pointer-events: none;
}
.compass-link__dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: #F4D58E; box-shadow: 0 0 14px rgba(240,196,120,0.85);
  animation: linkPulse 2.6s ease-in-out infinite;
}
.compass-link__line {
  width: 8vw; max-width: 150px; height: 1px;
  background: linear-gradient(90deg, rgba(240,196,120,0.85) 0%, rgba(240,196,120,0) 100%);
}
@keyframes linkPulse {
  0%,100% { opacity: 0.6; transform: scale(0.85); }
  50%     { opacity: 1;   transform: scale(1.1); }
}
.orrery-stage {
  position: absolute; top: 60%; left: 50%;
  width: 62vh; height: 62vh; max-width: 860px; max-height: 860px;
  transform: translate(-50%, -50%);   /* centered so edge labels aren't clipped */
}
.orrery-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 0 60px rgba(232,201,138,0.16));
  color: #D9B96B;
}
.orrery-engrave {
  font-family: var(--font-sans); font-size: 17px; font-weight: 600;
  letter-spacing: 0.34em; fill: #E8C98A; opacity: 0.75;
  text-transform: uppercase;
}

/* Top pointer */
.orrery-pointer {
  position: absolute; top: 6%; left: 50%; transform: translateX(-50%); z-index: 5;
  filter: drop-shadow(0 0 8px rgba(251,230,184,0.5));
}

/* Center medallion — the source. Present but rebalanced so the destinations
   lead: reduced size, glow and bloom dialled back. */
.orrery-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
  width: 19.5%; height: 19.5%; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #F4DCA6 0%, #C09A48 42%, #5F4720 100%);
  box-shadow:
    0 0 26px rgba(240,196,120,0.30),
    inset 0 3px 8px rgba(255,240,200,0.5),
    inset 0 -6px 14px rgba(40,26,8,0.7);
  display: flex; align-items: center; justify-content: center;
  animation: corePulse 5.5s ease-in-out infinite;
}
@keyframes corePulse {
  0%,100% { box-shadow: 0 0 24px rgba(240,196,120,0.26), inset 0 3px 8px rgba(255,240,200,0.5), inset 0 -6px 14px rgba(40,26,8,0.7); }
  50%     { box-shadow: 0 0 38px rgba(240,196,120,0.38), inset 0 3px 8px rgba(255,240,200,0.5), inset 0 -6px 14px rgba(40,26,8,0.7); }
}
.orrery-core__inner {
  width: 84%; height: 84%; border-radius: 50%;
  border: 1px solid rgba(60,40,16,0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.orrery-core__label {
  font-family: var(--font-display); font-size: clamp(13px, 1.5vh, 22px);
  letter-spacing: 0.06em; text-transform: uppercase; color: #2A1C0A; line-height: 1;
}
.orrery-core__rule { width: 38%; height: 1px; background: rgba(42,28,10,0.6); margin: 7% 0; }
.orrery-core__mark {
  width: 96%; height: 96%; object-fit: contain;
  filter: brightness(0) saturate(100%) invert(11%) sepia(40%) saturate(900%) hue-rotate(2deg) brightness(95%);
  opacity: 0.9;
}
.orrery-core__sub {
  font-family: var(--font-sans); font-size: clamp(9px, 1vh, 13px);
  letter-spacing: 0.22em; text-transform: uppercase; color: #3A2810;
}

/* Orbiting medallions */
.orrery-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  cursor: pointer; will-change: left, top;
}
.orrery-node__disc {
  position: relative;
  width: 86px; height: 86px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #F0D595;
  background: radial-gradient(circle at 38% 32%, #3A2C16 0%, #160F07 100%);
  border: 2px solid #B98F3F;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    inset 0 1px 3px rgba(251,230,184,0.35),
    inset 0 -4px 10px rgba(0,0,0,0.6);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.orrery-node__label {
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em; color: #F0DCB0;
  white-space: nowrap; transition: color 0.4s ease, opacity 0.4s ease; opacity: 0.92;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.85);
}
/* Inactive destinations stay elegant but visually secondary */
.orrery-node:not(.is-active):not(.is-hover) .orrery-node__disc { opacity: 0.72; }
.orrery-node:not(.is-active) .orrery-node__label { opacity: 0.78; }

.orrery-node.is-hover .orrery-node__disc {
  color: #FCEFD0; border-color: #F4D58E;
  box-shadow: 0 0 24px rgba(240,196,120,0.45), 0 12px 28px rgba(0,0,0,0.5), inset 0 1px 4px rgba(255,240,200,0.5);
  transform: scale(1.12);
}
/* Active destination — clearly dominant: larger, lifted, brass halo + depth */
.orrery-node.is-active { z-index: 8; }
.orrery-node.is-active .orrery-node__disc {
  color: #FFF6DE; border-color: #FBE6B8;
  transform: scale(1.34);
  box-shadow:
    0 0 0 5px rgba(247,219,160,0.16),
    0 0 46px rgba(243,200,128,0.7),
    0 22px 46px rgba(0,0,0,0.7),
    inset 0 2px 5px rgba(255,244,212,0.65);
}
.orrery-node.is-active .orrery-node__label {
  color: #FFF1D2; opacity: 1; font-size: 15px; letter-spacing: 0.05em;
  margin-top: 18px;   /* clear the enlarged (scaled 1.34) disc so it isn't covered */
  text-shadow: 0 0 14px rgba(240,196,120,0.5), 0 2px 6px rgba(0,0,0,0.9);
}
/* Active glow halo */
.orrery-node.is-active .orrery-node__disc::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(240,196,120,0.4); animation: nodeRipple 2.4s ease-out infinite;
}
@keyframes nodeRipple {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* Brass shimmer that sweeps across the marker the moment it locks in */
.orrery-node.is-active .orrery-node__disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255,242,206,0.6) 50%, transparent 62%);
  background-size: 250% 100%;
  animation: nodeShimmer 0.85s ease-out;
}
@keyframes nodeShimmer {
  from { background-position: 130% 0; opacity: 1; }
  to   { background-position: -130% 0; opacity: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .tk-compass { height: auto; }
  .compass-pin { position: relative; height: auto; padding: 80px 0 90px; }
  .compass-grid { grid-template-columns: 1fr; gap: 8vw; padding: 0 24px; }
  .compass-left { max-width: 100%; }
  .orrery-stage {
    position: relative; top: auto; left: auto; transform: none;
    width: 90vw; height: 90vw; margin: 0 auto;
  }
  .orrery-node__disc { width: 60px; height: 60px; }
  .orrery-node__label { font-size: 10px; }
  .orrery-engrave { font-size: 22px; }
}


/* ============================================================
 *  PATHWAYS — three cinematic world-portals (expand on hover)
 *  Rendered outside the scaled stage; full-width immersive.
 * ============================================================ */
.tk-pathways {
  position: relative; background: #050302;
  padding: 110px 0 28px;
}
.pathways-head {
  max-width: 980px; margin: 0 auto 64px; padding: 0 40px; text-align: center;
}
.pathways-eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: 0.34em; text-transform: uppercase;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 22px;
}
.pathways-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 64px); line-height: 1.0; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap;
  margin: 0;
  background: linear-gradient(180deg, #F7DBA0 0%, #E8B777 32%, #C9915C 72%, #B4823E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.pathways-sub {
  font-family: var(--font-body); font-size: clamp(16px, 1.2vw, 21px); line-height: 1.55;
  color: var(--c-cream); opacity: 0.9; max-width: 760px; margin: 22px auto 0;
}

/* ---- The three expanding panels ---- */
.pathways-row {
  display: flex; gap: 6px;
  height: 76vh; min-height: 560px;
  padding: 0 6px;
}
.pathway {
  position: relative; flex: 1; overflow: hidden;
  cursor: pointer; isolation: isolate;
  border-top: 1px solid rgba(247,219,160,0.14);
  transition: flex 0.7s cubic-bezier(0.16,1,0.3,1);
}
.pathways-row:hover .pathway { flex: 0.84; }
.pathways-row .pathway:hover { flex: 2.2; }

/* User-droppable full-bleed image */
.pathway__img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0;
  object-fit: cover; object-position: center;
}
/* Distinct cinematic atmosphere behind each (shows until a photo is dropped,
   and tints the photo once it is). */
.pathway__atmos {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  opacity: 0.5; transition: opacity 0.7s ease;
}
.pathway--brands .pathway__atmos {
  background: radial-gradient(120% 90% at 50% 20%, rgba(58,86,104,0.6) 0%, rgba(8,12,16,0.9) 70%);
}
.pathway--individuals .pathway__atmos {
  background: radial-gradient(120% 90% at 50% 18%, rgba(120,74,30,0.6) 0%, rgba(20,12,5,0.92) 72%);
}
.pathway--investors .pathway__atmos {
  background: radial-gradient(120% 90% at 50% 20%, rgba(74,52,96,0.6) 0%, rgba(12,8,20,0.92) 72%);
}
.pathway:hover .pathway__atmos { opacity: 0.18; }

/* Bottom-weighted scrim so type always reads */
.pathway__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,3,2,0.25) 0%, rgba(5,3,2,0) 28%, rgba(5,3,2,0.55) 58%, rgba(5,3,2,0.9) 82%, rgba(5,3,2,0.97) 100%);
  transition: background 0.7s ease;
}
.pathway:hover .pathway__scrim {
  background: linear-gradient(180deg, rgba(5,3,2,0.2) 0%, rgba(5,3,2,0) 32%, rgba(5,3,2,0.5) 60%, rgba(5,3,2,0.88) 82%, rgba(5,3,2,0.96) 100%);
}

.pathway__index {
  position: absolute; top: 26px; left: 28px; z-index: 4;
  font-family: var(--font-display); font-size: 20px; letter-spacing: 0.1em;
  color: rgba(247,219,160,0.6);
}

.pathway__content {
  position: absolute; left: 0; right: 0; top: 30%; bottom: 0; z-index: 4;
  padding: 0 34px 40px; pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-start;
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
/* All text shows by default; when a card is hovered, the OTHER cards' text
   fades away so focus lands on the chosen world. */
.pathways-row:hover .pathway:not(:hover) .pathway__copy,
.pathways-row:hover .pathway:not(:hover) .pathway__cta {
  opacity: 0; transform: translateY(12px); pointer-events: none;
}
/* Hover affordance — small bronze "+" badge on each condensed card; fades
   out on the one being hovered (its full copy takes over). */
.pathway__hint {
  position: absolute; bottom: 34px; right: 28px; z-index: 5;
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 1; transition: opacity 0.5s ease;
}
.pathway__hint span {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,237,227,0.82); text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.pathway__hint i {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid rgba(201,162,75,0.55);
  display: inline-flex; align-items: center; justify-content: center;
  color: #CBA14C; font-style: normal; font-size: 15px; line-height: 1;
  background: rgba(8,5,3,0.38);
}
.pathway:hover .pathway__hint { opacity: 0; }
.pathways-row:hover .pathway:not(:hover) .pathway__index { opacity: 0; }
.pathways-row:hover .pathway:not(:hover) .pathway__category { opacity: 0; }
.pathway__index { transition: opacity 0.4s ease; }
.pathway__category {
  transition: opacity 0.4s ease;
  opacity: 0;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.26em; text-transform: uppercase; color: #CBA14C;
  margin-bottom: 14px; white-space: nowrap;
}
.pathway:hover .pathway__category { opacity: 1; }
.pathway__label {
  font-family: var(--font-display); font-size: clamp(26px, 2.1vw, 40px);
  line-height: 1.04; text-transform: uppercase; letter-spacing: 0.01em; margin: 0;
  background: linear-gradient(180deg, #F4D58E 0%, #D7A64C 55%, #BC8B3C 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
}
/* Copy + CTA are visible by default (always-on, matching the reference) */
.pathway__copy {
  font-family: var(--font-body); font-size: 16px; line-height: 1.58;
  color: #D9CDB6; opacity: 0.92; max-width: 440px; margin: 18px 0 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.pathway__cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; white-space: nowrap; align-self: flex-start;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; pointer-events: auto;
  background: transparent; color: #E8C98A; border: 1px solid rgba(201,162,75,0.55);
  padding: 14px 26px; border-radius: 2px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.pathway__cta:hover {
  background: linear-gradient(180deg, #F4D58E, #B4823E); color: #1A1206; border-color: transparent;
}
.pathway__cta svg { transition: transform 0.2s ease; }
.pathway__cta:hover svg { transform: translateX(3px); }

/* ---- Convergence CTA ---- */
.pathways-converge {
  text-align: center; margin: 78px auto 0; max-width: 720px; padding: 0 40px;
  display: flex; flex-direction: column; align-items: center;
}
.pathways-converge__rule {
  width: 1px; height: 56px; margin-bottom: 30px;
  background: linear-gradient(180deg, rgba(209,157,99,0) 0%, rgba(209,157,99,0.8) 100%);
}
.pathways-converge__q {
  font-family: var(--font-display); font-size: clamp(24px, 2vw, 34px);
  text-transform: uppercase; letter-spacing: 0.01em; margin: 0;
  background: linear-gradient(180deg, #F7DBA0, #C9915C);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.pathways-converge__line {
  font-family: var(--font-body); font-size: 18px; color: var(--c-cream); opacity: 0.85; margin: 14px 0 0;
}
.pathways-converge__cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 32px;
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  background: transparent; color: #E8C98A; border: 1px solid rgba(201,162,75,0.5);
  padding: 16px 34px; border-radius: 2px;
  transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease;
}
.pathways-converge__cta:hover {
  background: linear-gradient(180deg, #F4D58E, #B4823E); color: #1A1206; border-color: transparent;
}

/* ---- Mobile: stack the portals ---- */
@media (max-width: 768px) {
  .tk-pathways { padding: 64px 0 72px; }
  .pathways-head { margin-bottom: 40px; padding: 0 24px; }
  .pathways-row { flex-direction: column; height: auto; gap: 10px; padding: 0 16px; }
  .pathway { flex: none; height: 64vh; min-height: 420px; border-radius: 10px; }
  .pathways-row:hover .pathway, .pathways-row .pathway:hover { flex: none; }
  /* On touch, always reveal copy + CTA (no hover) */
  .pathway__copy { opacity: 0.92; max-width: 100%; transform: none; }
  .pathway__cta { opacity: 1; transform: none; pointer-events: auto; }
  .pathway__atmos { opacity: 0.32; }
  .pathways-converge { margin-top: 48px; }
}


/* ============================================================
 *  FILM STRIP — slanted infinite marquee bridging TEDFLIX → Cinematic
 * ============================================================ */
.tk-filmstrip {
  position: relative; z-index: 6;
  height: 460px;
  /* Tall enough that the slanted strip's sprocket edges aren't clipped;
     big negative margins keep the in-flow footprint small and bleed it into
     the sections above & below for a continuous-reel feel. */
  margin: -20px 0 -150px;
  overflow: hidden;            /* clip horizontal bleed only */
  pointer-events: none;
  background: transparent;
}
.film-strip {
  position: absolute; top: 50%; left: -8vw;
  width: 116vw; height: 280px;
  transform: translateY(-50%) rotate(-4.5deg);
  overflow: hidden;
  /* Solid film-brown body so no black shows behind images anywhere. */
  background: #34230f;
  box-shadow: 0 26px 70px rgba(0,0,0,0.6), inset 0 0 60px rgba(0,0,0,0.4);
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.film-track {
  position: relative;
  display: flex; height: 100%; width: max-content;
  /* Fully solid film-brown stock — no gradient, so images float in continuous
     brown with even spacing and zero black space behind them. */
  background: #34230f;
  animation: filmScroll 48s linear infinite;
}
/* Subtle perforations punched into the top & bottom edge bands only —
   drawn in shadow (not bright squares), kept clear of the image band. */
.film-track::before,
.film-track::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 11px;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,0.45) 0 13px,
    transparent 13px 31px);
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}
.film-track::before { top: 7px; }
.film-track::after  { bottom: 7px; }
@keyframes filmScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.film-cell {
  flex: 0 0 auto;
  width: 320px; height: 100%;
  /* Extra top/bottom clearance so images sit well clear of the
     perforation edge bands, and a touch more side gap. */
  padding: 30px 10px;
  box-sizing: border-box;
}
.film-photo {
  width: 100%; height: 100%; overflow: hidden;
  background: #34230f;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.film-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 12px;
  /* Slight zoom crops any black letterbox bars baked into source frames. */
  transform: scale(1.07);
  filter: grayscale(1) sepia(0.32) brightness(0.92) contrast(1.02);
}

@media (max-width: 768px) {
  .tk-filmstrip { height: 260px; margin: -70px 0 -96px; }
  .film-strip { height: 132px; width: 130vw; left: -15vw; transform: translateY(-50%) rotate(-5deg); }
  .film-cell { width: 150px; padding: 28px 8px; }
  .film-track { animation-duration: 32s; }
}


/* ============================================================
 *  TEXTURED HEADINGS — gold grunge texture clipped to heading text
 * ============================================================ */
.tk-director h2,
.fintro-head,
.tk-section-head h2,
.compass-head,
.compass-active__name,
.pathways-title,
.pathway__label,
.tk-hero .wordmark {
  background: url("../assets/heading-texture.jpg") center / cover !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
          color: transparent !important;
}


/* ============================================================
 *  SPARKLE BAND — particle field replacing the client-logo marquee
 * ============================================================ */
.tk-sparkleband {
  position: relative; width: 100%; height: 200px; overflow: hidden;
}
.tk-sparkles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tk-sparkleband__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 130% at 50% 50%, rgba(240,196,120,0.10) 0%, rgba(0,0,0,0) 68%);
}
.tk-stage.is-mobile .tk-sparkleband { height: 130px; }


/* Sparkles as the cosmic starfield behind the Director (origin) content */
.tk-cosmic-sparkles {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Confine the field to the upper (logo-marquee) band — fade out before it
     reaches the origin-story content so it doesn't bleed over the Director. */
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 26%, rgba(0,0,0,0) 52%);
          mask: linear-gradient(180deg, #000 0%, #000 26%, rgba(0,0,0,0) 52%);
}
.tk-cosmic-inner { position: relative; z-index: 1; }


/* Client-logo marquee floating over the sparkle backdrop */
.tk-logobar {
  position: relative; z-index: 2; overflow: hidden;
  padding: 4px 0 54px; margin-top: -8px;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.tk-logobar__track {
  display: flex; width: max-content; align-items: center; gap: 96px;
  animation: logoScroll 40s linear infinite;
  opacity: 0.5;
}
.tk-logobar__track img {
  height: 34px; width: auto; flex: 0 0 auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk-stage.is-mobile .tk-logobar__track { gap: 56px; }
.tk-stage.is-mobile .tk-logobar__track img { height: 25px; }
.tk-logobar__track img.logo-salesforce { height: 78px; }
.tk-logobar__track img.logo-dolab { height: 24px; }
.tk-logobar__track img.logo-lucidity { height: 27px; }
.tk-logobar__track img.logo-burningman { height: 36px; }
.tk-stage.is-mobile .tk-logobar__track img.logo-salesforce { height: 50px; }
.tk-stage.is-mobile .tk-logobar__track img.logo-dolab { height: 18px; }
.tk-stage.is-mobile .tk-logobar__track img.logo-lucidity { height: 17px; }
.tk-stage.is-mobile .tk-logobar__track img.logo-burningman { height: 16px; }


/* ============================================================
 *  ORIGINAL IP — vault of four cinematic worlds (2x2)
 * ============================================================ */
.tk-ip { background: #050302; padding: 120px 0 130px; }
.tk-ip .tk-section-head { margin-bottom: 60px; }
/* When IP (light) sits directly above Financial Strategy, tighten the seam */
.tk-ip--light { padding-bottom: 56px; }

/* ---- Light / gallery variant (concept-art prints framed on warm ivory) ---- */
.tk-ip--light {
  background:
    url("../assets/ip-camera-bg.jpg") center / cover no-repeat,
    #EFE7D7;
}
.tk-ip--light .tk-section-head .eyebrow {
  background: none; -webkit-text-fill-color: initial;
  color: #9A6A2C;
}
.tk-ip--light .tk-section-head h2 {
  background: linear-gradient(180deg, #2A1A0C 0%, #5E3E18 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tk-ip--light .tk-section-head .blurb { color: #6A5B47; opacity: 1; }

/* Cards sit as framed prints on the ivory — defining shadow + hairline ring */
.tk-ip--light .ip-world {
  border-color: rgba(58,38,18,0.18);
  box-shadow: 0 30px 70px -34px rgba(40,24,10,0.55), 0 0 0 1px rgba(40,24,10,0.06);
}
.tk-ip--light .ip-world:hover {
  box-shadow: 0 40px 90px -34px rgba(40,24,10,0.6), 0 0 50px rgba(240,196,120,0.22);
}

/* CTAs on light */
.tk-ip--light .ip-cta__btn--ghost {
  color: #8A5A24; border-color: rgba(120,80,30,0.45);
}
.tk-ip--light .ip-cta__btn--ghost:hover { background: rgba(120,80,30,0.08); }

.ip-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  max-width: 1500px; margin: 0 auto; padding: 0 40px;
}
.ip-world {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid rgba(247,219,160,0.16);
  background: #0b0805;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.9);
}
.ip-world__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.ip-world:hover .ip-world__img { transform: scale(1.07); }
.ip-world__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(5,3,2,0.92) 0%, rgba(5,3,2,0.7) 32%, rgba(5,3,2,0.1) 60%, rgba(5,3,2,0) 78%),
    linear-gradient(0deg, rgba(5,3,2,0.85) 0%, rgba(5,3,2,0) 38%);
}
/* thin inset gold keyline frame */
.ip-world__frame {
  position: absolute; inset: 14px; pointer-events: none;
  border: 1px solid rgba(247,219,160,0.18);
}

.ip-world__top { position: absolute; top: 0; left: 0; padding: 38px 40px; max-width: 76%; z-index: 2; }
.ip-world__num {
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.28em; text-transform: uppercase; color: rgba(232,201,138,0.8);
  margin-bottom: 16px;
}
.ip-world__title {
  font-family: var(--font-display); font-size: clamp(28px, 2.7vw, 46px);
  line-height: 0.98; text-transform: uppercase; letter-spacing: 0.01em; margin: 0;
  overflow-wrap: break-word;
  background: linear-gradient(180deg, #F4D58E 0%, #D7A64C 55%, #BC8B3C 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.6));
}
.ip-world__rule { width: 46px; height: 2px; margin: 18px 0; background: linear-gradient(90deg, #D7A64C, rgba(215,166,76,0)); }
.ip-world__genres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ip-world__genre {
  font-family: var(--font-sans); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,234,202,0.92);
  padding: 5px 11px; border: 1px solid rgba(215,166,76,0.55);
  border-radius: 3px; background: rgba(20,12,4,0.32);
  backdrop-filter: blur(2px);
}
.ip-world__log {
  font-family: var(--font-body); font-size: clamp(13px, 0.95vw, 16px); line-height: 1.6;
  color: var(--c-cream); opacity: 0.9; margin: 0; max-width: 420px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

/* aged fragment / annotation card */
.ip-world__frag {
  position: absolute; left: 40px; bottom: 36px; z-index: 2;
  max-width: 300px; padding: 14px 18px;
  background: rgba(8,5,3,0.55);
  border: 1px solid rgba(201,162,75,0.32);
  backdrop-filter: blur(3px);
}
.frag__label {
  font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(232,201,138,0.7); margin-bottom: 8px;
}
.frag__quote {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 15px; line-height: 1.45; color: rgba(247,233,205,0.92);
}

.ip-world__side {
  position: absolute; right: 30px; bottom: 40px; z-index: 2; text-align: right;
  font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(232,201,138,0.6); line-height: 1.5; max-width: 160px;
}
.ip-world__side-t { display: block; margin-top: 8px; font-size: 13px; color: rgba(232,201,138,0.85); letter-spacing: 0.3em; }

.ip-cta { display: flex; justify-content: center; gap: 22px; margin-top: 64px; flex-wrap: wrap; }
.ip-cta__btn {
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  padding: 16px 32px; border-radius: 2px; transition: all 0.25s ease;
}
.ip-cta__btn--solid { background: linear-gradient(180deg, #F4D58E, #B4823E); color: #1A1206; border: 0; }
.ip-cta__btn--solid:hover { filter: brightness(0.95); }
.ip-cta__btn--ghost { background: transparent; color: #E8C98A; border: 1px solid rgba(201,162,75,0.5); }
.ip-cta__btn--ghost:hover { background: rgba(201,162,75,0.12); }

@media (max-width: 900px) {
  .tk-ip { padding: 70px 0 80px; }
  .ip-grid { grid-template-columns: 1fr; gap: 16px; padding: 0 18px; }
  .ip-world { aspect-ratio: 4 / 5; }
  .ip-world__top { max-width: 78%; padding: 26px 26px; }
  .ip-world__log { max-width: 100%; }
  .ip-world__frag { max-width: 64%; left: 26px; bottom: 26px; }
  .ip-world__side { display: none; }
  .ip-cta { flex-direction: column; align-items: center; padding: 0 24px; }
  .ip-cta__btn { width: 100%; max-width: 360px; text-align: center; }
}


/* Cursor-tracking gold spotlight glow-border on the IP cards (hover) — now global, see site.css */
.ip-world {
  --glow-spot: 240px;
  --glow-hue: calc(36 + (var(--glow-xp, 0.5) * 26));
}
.ip-world:hover {
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.9), 0 0 50px rgba(240,196,120,0.18);
}


/* ============================================================
 *  FINANCIAL STRATEGY — live three-column navigator's ledger
 * ============================================================ */
.tk-finance {
  position: relative; overflow: hidden;
  background: #0A0705;
  padding: 0 0 90px;
  display: block;
}

/* Photographic zone — only the top portion of the section. Field Notes
   sits BELOW this zone in a clean dark band so it never overlaps Ted. */
.finance-stage {
  position: relative;
  min-height: 880px;
  display: flex; align-items: center;
}

/* Ted as full-bleed centerpiece — confined to the stage, not the whole section */
.finance-portrait {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  display: block;
  /* Lift Ted out of the murk — brighter, warmer, a touch more contrast. */
  filter: brightness(1.18) contrast(1.06) saturate(1.1);
}
/* Legibility + cinematic grade: darken the LEFT (text side) and bottom,
   but keep the RIGHT clear so Ted's face stays bright. */
.finance-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,5,3,0) 0%, rgba(8,5,3,0) 66%, rgba(8,5,3,0.95) 100%),
    linear-gradient(90deg, rgba(8,5,3,0.95) 0%, rgba(8,5,3,0.78) 26%, rgba(8,5,3,0.20) 50%, rgba(8,5,3,0) 70%, rgba(8,5,3,0) 100%);
}
/* Treasure accent — sits as a prop in the lower-left of the scene. Swap
   .financeTreasure to a real transparent PNG to replace the placeholder. */
.finance-treasure {
  position: absolute; z-index: 4; top: 0; left: 58%;
  width: 280px; height: auto; pointer-events: none;
  transform: translateY(-74%) rotate(3deg);
  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.5));
}

/* --- Background intelligence (<10% opacity) --- */
.finance-bg { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.finance-compass {
  position: absolute; top: 40px; left: max(40px, 12%);
  width: 420px; height: 420px; color: #C9A24B; opacity: 0.09;
}
.finance-cyclewave {
  position: absolute; left: 0; right: 0; bottom: 60px; height: 220px; opacity: 0.05;
  background:
    repeating-linear-gradient(90deg, rgba(201,162,75,0.25) 0 1px, transparent 1px 96px),
    radial-gradient(120% 80% at 50% 120%, rgba(201,162,75,0.4) 0%, transparent 60%);
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAwJyBoZWlnaHQ9JzIyMCcgdmlld0JveD0nMCAwIDEyMDAgMjIwJz48cGF0aCBkPSdNMCAxNjAgQyAxMDAgMTYwIDE1MCA0MCAyNTAgNDAgUyA0MDAgMTYwIDUwMCAxNjAgUyA2NTAgNDAgNzUwIDQwIFMgOTAwIDE2MCAxMDAwIDE2MCBTIDExNTAgNDAgMTIwMCA0MCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzInLz48L3N2Zz4=") no-repeat center / contain;
          mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAwJyBoZWlnaHQ9JzIyMCcgdmlld0JveD0nMCAwIDEyMDAgMjIwJz48cGF0aCBkPSdNMCAxNjAgQyAxMDAgMTYwIDE1MCA0MCAyNTAgNDAgUyA0MDAgMTYwIDUwMCAxNjAgUyA2NTAgNDAgNzUwIDQwIFMgOTAwIDE2MCAxMDAwIDE2MCBTIDExNTAgNDAgMTIwMCA0MCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzInLz48L3N2Zz4=") no-repeat center / contain;
}

/* --- Layout (overlay grid on top of the full-bleed portrait) --- */
.finance-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 1640px; margin: 0 auto;
  padding: 90px clamp(40px, 6.5vw, 110px) 60px;
  display: grid; grid-template-columns: 1.32fr 0.62fr 0.82fr;
  gap: 56px; align-items: center;
}
.finance-col { min-width: 0; }
.finance-col--text { display: flex; flex-direction: column; justify-content: center; }
.finance-col--spacer { pointer-events: none; }

/* LEFT editorial */
.finance-eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: 0.32em; text-transform: uppercase; color: #C9A24B;
  position: relative; padding-bottom: 18px; margin-bottom: 30px;
}
.finance-eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 190px; height: 1px;
  background: linear-gradient(90deg, rgba(201,162,75,0.85), rgba(201,162,75,0));
}
.finance-head {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38px, 4vw, 66px); line-height: 1.02; letter-spacing: 0.005em;
  margin: 0; color: #F4E9D2;
  text-wrap: balance;
}
.finance-sub {
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(15px, 1.15vw, 19px);
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5;
  margin: 30px 0 0; color: #C9A24B;
}
.finance-body { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.finance-body p {
  font-family: var(--font-body); font-size: 17px; line-height: 1.62;
  color: #C7BBA6; margin: 0;
}
.finance-cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.finance-btn {
  display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 17px 26px; border-radius: 3px; border: 1px solid transparent;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.25s ease, color 0.25s ease, gap 0.25s ease;
}
.finance-btn svg { transition: transform 0.2s ease; }
.finance-btn:hover svg { transform: translateX(3px); }
.finance-btn--primary {
  background: linear-gradient(180deg, #E8C277 0%, #B4823E 100%); color: #1A1206;
  box-shadow: 0 14px 36px -16px rgba(232,194,119,0.6);
}
.finance-btn--primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
.finance-btn--ghost {
  background: transparent; color: #E8C98A; border-color: rgba(201,162,75,0.45);
}
.finance-btn--ghost:hover { background: rgba(201,162,75,0.10); border-color: rgba(201,162,75,0.8); }

/* ============================================================
 *  FINANCIAL STRATEGY — light / ivory variant (merges with IP)
 *  Every black fade is swapped for the same ivory used by .tk-ip--light.
 * ============================================================ */
.tk-finance--light {
  background:
    radial-gradient(120% 70% at 50% 0%, #FBF6EC 0%, rgba(239,231,215,0) 55%),
    #EFE7D7;
  padding-top: 56px;
}
/* Ivory scrim: fades to ivory at top (merge w/ IP), bottom, and both sides,
   leaving the portrait visible through the centre band. */
.tk-finance--light .finance-scrim {
  background:
    linear-gradient(180deg, #EFE7D7 0%, rgba(239,231,215,0.84) 9%, rgba(239,231,215,0) 32%, rgba(239,231,215,0.10) 68%, #EFE7D7 100%),
    linear-gradient(90deg, #EFE7D7 0%, rgba(239,231,215,0.95) 38%, rgba(239,231,215,0.06) 50%, rgba(239,231,215,0.06) 74%, rgba(239,231,215,0.48) 86%, #EFE7D7 100%);
}
/* Move the portrait a touch left so his face lands in the cleared centre band */
.tk-finance--light .finance-portrait { object-position: 60% 20%; }
/* Background intelligence reads darker on ivory */
.tk-finance--light .finance-compass { color: #8A5A24; opacity: 0.14; }
.tk-finance--light .finance-cyclewave { opacity: 0.10; }

/* Editorial text → ink on ivory */
.tk-finance--light .finance-eyebrow { color: #9A6A2C; }
.tk-finance--light .finance-eyebrow::after { background: linear-gradient(90deg, rgba(120,80,30,0.7), rgba(120,80,30,0)); }
.tk-finance--light .finance-head { color: #241608; }
.tk-finance--light .finance-sub { color: #9A6A2C; }
.tk-finance--light .finance-body p { color: #5E5040; }
.tk-finance--light .finance-btn--ghost { color: #8A5A24; border-color: rgba(120,80,30,0.45); }
.tk-finance--light .finance-btn--ghost:hover { background: rgba(120,80,30,0.08); border-color: rgba(120,80,30,0.8); }

/* Field Notes → light paper card */
.tk-finance--light .finance-journal {
  background: linear-gradient(160deg, #FBF7EE 0%, #F3EBDB 100%);
  border-color: rgba(120,80,30,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 30px 70px -36px rgba(40,24,10,0.45);
}
.tk-finance--light .finance-journal::before { border-color: rgba(120,80,30,0.18); }
.tk-finance--light .finance-journal__title { color: #8A5A24; }
.tk-finance--light .finance-journal__star { color: #9A6A2C; }
.tk-finance--light .finance-note { border-top-color: rgba(120,80,30,0.20); }
.tk-finance--light .finance-note__n { color: #9A6A2C; }
.tk-finance--light .finance-note__t { color: #4A3D2C; }
@media (max-width: 1080px) {
  .tk-finance--light .finance-scrim {
    background: linear-gradient(180deg, rgba(239,231,215,0.5) 0%, rgba(239,231,215,0) 30%, rgba(239,231,215,0.7) 78%, #EFE7D7 100%);
  }
}

/* CENTER portrait — clean contained frame, full column height like the ref */
.finance-col--portrait { position: relative; align-self: stretch; min-height: 600px; }
.finance-portrait {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%;
  display: block; border-radius: 6px;
}
.finance-portrait__fade {
  position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(247,219,160,0.16), inset 0 30px 60px -30px rgba(0,0,0,0.7);
  background:
    linear-gradient(180deg, rgba(10,7,5,0.10) 0%, rgba(10,7,5,0) 30%, rgba(10,7,5,0.55) 100%);
}

/* RIGHT Field Notes journal */
.finance-col--notes { display: flex; }
.finance-journal {
  position: relative; flex: 1;
  background:
    linear-gradient(160deg, rgba(36,26,16,0.82) 0%, rgba(16,11,6,0.84) 100%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(201,162,75,0.30);
  border-radius: 6px;
  padding: 36px 32px 40px;
  box-shadow: inset 0 1px 0 rgba(247,219,160,0.12), 0 40px 90px -40px rgba(0,0,0,0.95);
}
.finance-journal::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,162,75,0.14);
  border-radius: 3px; pointer-events: none;
}
.finance-journal__title {
  font-family: var(--font-sans); font-weight: 700; font-size: 15px;
  letter-spacing: 0.34em; text-transform: uppercase; color: #E8C98A; text-align: center;
}
.finance-journal__star { display: flex; justify-content: center; color: #C9A24B; margin: 14px 0 6px; }
.finance-notes { list-style: none; margin: 0; padding: 0; }
.finance-note {
  display: flex; align-items: baseline; gap: 16px;
  padding: 20px 4px; border-top: 1px solid rgba(201,162,75,0.16);
}
.finance-note:first-of-type { border-top: 0; }
.finance-note__n {
  font-family: var(--font-display); font-size: 26px; color: #C9A24B; line-height: 1;
  flex-shrink: 0; min-width: 34px;
}
.finance-note__t {
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1.45;
  letter-spacing: 0.06em; text-transform: uppercase; color: #D8CCB6;
}

/* Field Notes — full-width horizontal strip (5 blocks) BELOW the photo zone */
.finance-fieldnotes {
  position: relative; z-index: 3;
  background: #0A0705;
  max-width: 1640px; margin: 0 auto;
  padding: 64px clamp(40px, 6.5vw, 110px) 90px;
  border-top: 1px solid rgba(201,162,75,0.22);
}
.finance-fieldnotes__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
}
.finance-fieldnotes__star { display: inline-flex; color: #C9A24B; }
/* Inline "What this looks like:" header — sits above the CTA buttons */
.finance-fieldnotes__head--inline { margin: 4px 0 16px; }
.finance-fieldnotes__title {
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: 0.34em; text-transform: uppercase; color: #E8C98A;
}
.finance-fieldnotes__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: rgba(201,162,75,0.18);
  border: 1px solid rgba(201,162,75,0.18);
}
/* Inline field-notes grid sits in the left column, above the CTAs — a single
   horizontal row so it doesn't stack tall. */
.finance-fieldnotes__grid--inline {
  grid-template-columns: repeat(5, 1fr); margin: 0; max-width: none;
}
/* Full-width band beneath the scene — Field Notes (5-across) + CTAs */
.finance-band {
  position: relative; z-index: 3;
  max-width: 1640px; margin: 0 auto;
  padding: 14px clamp(40px, 6.5vw, 110px) 0;
}
.finance-band .finance-fieldnotes__head--inline { margin: 0 0 16px; }
.finance-band .finance-cta-row { margin-top: 30px; justify-content: center; }
.finance-fnote {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px 30px; background: rgba(10,7,5,0.72);
  transition: background 0.3s ease;
}
.finance-fnote:hover { background: rgba(28,19,10,0.85); }
.finance-fnote__n {
  font-family: var(--font-display); font-size: 40px; color: #C9A24B; line-height: 1;
  display: inline-flex; align-items: center;
}
.finance-fnote__n svg { width: 30px; height: 30px; display: block; }
.finance-fnote__t {
  font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 1.5;
  letter-spacing: 0.06em; text-transform: uppercase; color: #D8CCB6;
}

/* --- Responsive --- */
@media (max-width: 1080px) {
  .tk-finance { min-height: 0; padding: 0 0 64px; flex-direction: column; }
  .finance-portrait { position: relative; height: 480px; }
  .finance-scrim {
    background:
      linear-gradient(180deg, rgba(8,5,3,0.4) 0%, rgba(8,5,3,0) 30%, rgba(8,5,3,0.6) 78%, #0A0705 100%);
    height: 480px; bottom: auto;
  }
  .finance-inner {
    grid-template-columns: 1fr 0.72fr; gap: 40px; padding: 40px 40px 0; align-items: start;
  }
  .finance-col--spacer { display: none; }
  .finance-col--text { grid-column: 1; }
  .finance-col--notes { grid-column: 2; }
  .finance-fieldnotes { padding: 30px 40px 0; }
  .finance-fieldnotes__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .finance-portrait { height: 380px; }
  .finance-scrim { height: 380px; }
  .finance-inner { grid-template-columns: 1fr; gap: 30px; padding: 30px 22px 0; }
  .finance-col--text, .finance-col--notes { grid-column: 1; }
  .finance-compass { width: 280px; height: 280px; left: -40px; }
  .finance-cta-row { flex-direction: column; }
  .finance-btn { width: 100%; justify-content: center; }
  .finance-fieldnotes { padding: 26px 22px 0; }
  .finance-fieldnotes__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
 *  GET FREE INSIGHTS — dedicated full-width finale (rotating compass)
 * ============================================================ */
.tk-insights {
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 32%, rgba(96,58,24,0.4) 0%, rgba(96,58,24,0) 60%),
    radial-gradient(120% 90% at 50% 120%, rgba(40,26,12,0.6) 0%, rgba(0,0,0,0) 60%),
    #060402;
  padding: 150px 40px 160px;
  display: flex; justify-content: center;
}
/* top fade so this closing chapter blends into the section above */
.tk-insights::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 340px;
  background: linear-gradient(180deg, #050302 0%, #050302 24%, rgba(6,4,2,0) 100%);
  z-index: 1; pointer-events: none;
}
/* bottom fade so it blends into the footer below */
.tk-insights::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 220px;
  background: linear-gradient(0deg, #060402 0%, rgba(6,4,2,0) 100%);
  z-index: 1; pointer-events: none;
}

/* --- Ambient backdrop --- */
.ins-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ins-stars {
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(247,219,160,0.7) 50%, transparent),
    radial-gradient(1.2px 1.2px at 76% 16%, rgba(247,219,160,0.5) 50%, transparent),
    radial-gradient(1.6px 1.6px at 64% 64%, rgba(247,219,160,0.6) 50%, transparent),
    radial-gradient(1.1px 1.1px at 28% 72%, rgba(247,219,160,0.45) 50%, transparent),
    radial-gradient(1.3px 1.3px at 88% 48%, rgba(247,219,160,0.5) 50%, transparent),
    radial-gradient(1px 1px at 42% 34%, rgba(247,219,160,0.4) 50%, transparent),
    radial-gradient(1.2px 1.2px at 8% 56%, rgba(247,219,160,0.4) 50%, transparent);
  animation: insTwinkle 5.5s ease-in-out infinite alternate;
}
@keyframes insTwinkle { from { opacity: 0.35; } to { opacity: 0.7; } }
.ins-glow {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%,-50%);
  width: 900px; height: 900px; max-width: 96vw;
  background: radial-gradient(circle, rgba(240,196,120,0.16) 0%, rgba(240,196,120,0) 60%);
  filter: blur(24px); animation: insPulse 6s ease-in-out infinite;
}
@keyframes insPulse { 0%,100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }

/* Big rotating compass behind the headline */
.ins-compass-wrap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(620px, 76vw); opacity: 0.26;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 38%, rgba(0,0,0,0) 72%);
          mask: radial-gradient(circle at 50% 50%, #000 38%, rgba(0,0,0,0) 72%);
}
.ins-compass { width: 100%; height: auto; filter: drop-shadow(0 0 46px rgba(240,196,120,0.25)); }
.ins-compass__ring { transform-box: fill-box; transform-origin: center; animation: insSpin 60s linear infinite; }
.ins-compass__needle { transform-box: fill-box; transform-origin: center; animation: insSweep 14s ease-in-out infinite; }
@keyframes insSpin { to { transform: rotate(360deg); } }
@keyframes insSweep { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }
.ins-compass__card { font-family: var(--font-display); font-size: 22px; fill: rgba(232,201,138,0.7); letter-spacing: 0.04em; }

/* Side light beams */
.ins-beam {
  position: absolute; top: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(201,162,75,0) 0%, rgba(201,162,75,0.25) 40%, rgba(201,162,75,0) 100%);
}
.ins-beam--l { left: 16%; } .ins-beam--r { right: 16%; }

@media (prefers-reduced-motion: reduce) {
  .ins-compass__ring, .ins-compass__needle, .ins-stars, .ins-glow { animation: none; }
}

/* --- Content (two columns: text left, form right) --- */
.ins-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px; text-align: left;
  display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 72px; align-items: center;
}
.ins-text { display: flex; flex-direction: column; align-items: flex-start; }
.ins-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.36em; text-transform: uppercase; color: #C9A24B;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ins-kicker__star { color: #9A6A2C; font-size: 12px; }
.ins-head {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(44px, 6vw, 92px); line-height: 0.98; letter-spacing: 0.005em;
  margin: 26px 0 0;
  background: linear-gradient(180deg, #FCEBC6 0%, #E8B777 42%, #C9915C 80%, #B4823E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,0.6));
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s ease 0.1s, transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
.ins-head em { font-style: italic; color: transparent; }
.ins-rule {
  width: 0; height: 2px; margin: 30px 0 0;
  background: linear-gradient(90deg, rgba(201,162,75,0), #E8C98A, rgba(201,162,75,0));
  transition: width 1s ease 0.5s;
}
.ins-sub {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.8vw, 27px); color: #E8D8BC; margin: 26px 0 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}
.ins-body {
  font-family: var(--font-body); font-size: 17px; line-height: 1.66;
  color: #BFB29C; max-width: 520px; margin: 20px 0 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s ease 0.42s, transform 0.8s ease 0.42s;
}

/* reveal states */
.tk-insights.is-in .ins-kicker,
.tk-insights.is-in .ins-head,
.tk-insights.is-in .ins-sub,
.tk-insights.is-in .ins-body,
.tk-insights.is-in .ins-form { opacity: 1; transform: translateY(0); }
.tk-insights.is-in .ins-rule { width: 90px; }

/* --- Form (right column) --- */
.ins-form {
  margin-top: 0; width: 100%; max-width: 520px;
  background: linear-gradient(160deg, rgba(34,24,14,0.5) 0%, rgba(12,8,4,0.55) 100%);
  border: 1px solid rgba(201,162,75,0.24); border-radius: 16px;
  padding: 34px 34px 30px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(247,219,160,0.12), 0 50px 110px -50px rgba(0,0,0,0.9);
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s ease 0.54s, transform 0.8s ease 0.54s;
}
.ins-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ins-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; text-align: left; min-width: 0; }
.ins-field span {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: #B79A66;
}
.ins-field input {
  font-family: var(--font-body); font-size: 16px; color: #F3E9D6;
  background: rgba(14,9,5,0.55); border: 1px solid rgba(201,162,75,0.28);
  border-radius: 8px; padding: 15px 17px; outline: none;
  width: 100%; min-width: 0; box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ins-field input::placeholder { color: rgba(191,178,156,0.4); }
.ins-field input:focus {
  border-color: rgba(232,201,138,0.7);
  box-shadow: 0 0 0 3px rgba(232,201,138,0.14);
  background: rgba(14,9,5,0.8);
}
.ins-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ins-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  padding: 16px 34px; border-radius: 8px; border: 1px solid transparent;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.25s ease, color 0.25s ease;
}
.ins-btn svg { transition: transform 0.2s ease; }
.ins-btn--primary {
  width: 100%;
  background: linear-gradient(180deg, #F4D58E 0%, #C9913F 100%); color: #1A1206;
  box-shadow: 0 16px 40px -16px rgba(244,213,142,0.6);
}
.ins-btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ins-btn--primary:hover svg { transform: translateX(4px); }
.ins-btn--ghost { width: 100%; background: transparent; color: #E8C98A; border-color: rgba(201,162,75,0.45); }
.ins-btn--ghost:hover { background: rgba(201,162,75,0.10); border-color: rgba(201,162,75,0.85); }
.ins-fineprint {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.08em;
  color: rgba(191,178,156,0.55); margin: 18px 0 0; text-align: left;
}

@media (max-width: 920px) {
  .ins-inner { grid-template-columns: 1fr; gap: 40px; max-width: 620px; text-align: center; }
  .ins-text { align-items: center; text-align: center; }
  .ins-rule { margin-left: auto; margin-right: auto; }
  .ins-body { margin-left: auto; margin-right: auto; }
  .ins-form { margin-left: auto; margin-right: auto; }
  .ins-actions { justify-content: center; }
}

@media (max-width: 600px) {
  .tk-insights { padding: 90px 22px 100px; }
  .ins-compass-wrap { width: 90vw; top: 26%; }
  .ins-beam--l { left: 6%; } .ins-beam--r { right: 6%; }
  .ins-row { grid-template-columns: 1fr; gap: 0; }
  .ins-btn--primary { min-width: 0; width: 100%; }
  .ins-btn--ghost { width: 100%; }
}


/* ============================================================
 *  FOOTER — opt-in finale (full-width scene, opt-in L / connect R)
 * ============================================================ */
/* FooterStage — full-bleed wrapper that breaks the footer out of any
   constrained column to viewport width, then scales a 1920-design stage
   to fit (matches homepage rendering on standalone pages). */
.ft-scaler { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; }
.ft-stage { transform-origin: top left; }
.ft-scaler .tk-footer2 { width: 100%; left: auto; transform: none; }
.tk-footer2 {
  position: relative; overflow: hidden;
  background: #050302;
  padding: 0 0 30px;
}
/* top black fade so the footer blends into the section above */
.tk-footer2::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 240px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #050302 0%, rgba(5,3,2,0.6) 42%, rgba(5,3,2,0) 100%);
}
/* Full-width centerpiece scene, faded to black on all edges (strong top fade) */
.ft-bg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 720px; z-index: 0; pointer-events: none;
}
.ft-bg__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.ft-bg__fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #050302 0%, rgba(5,3,2,0.7) 12%, rgba(5,3,2,0.05) 34%, rgba(5,3,2,0.62) 78%, #050302 96%),
    linear-gradient(90deg, #050302 0%, rgba(5,3,2,0.35) 14%, rgba(5,3,2,0) 38%, rgba(5,3,2,0) 62%, rgba(5,3,2,0.35) 86%, #050302 100%);
}

.ft-inner {
  position: relative; z-index: 2;
  max-width: 1760px; margin: 0 auto; padding: 96px 72px 60px;
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.5fr) minmax(300px, 1fr);
  gap: 40px; align-items: start;
}

/* ---- LEFT: opt-in ---- */
.ft-optin { display: flex; flex-direction: column; align-items: flex-start; }
.ft-optin__head {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 2.5vw, 42px);
  line-height: 1.0; margin: 0; color: #F2E6CD;
}
.ft-optin__sub {
  font-family: var(--font-display); font-style: italic; font-size: 17px; color: #C9A24B; margin: 14px 0 26px;
}
.ft-optin__form { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 420px; }
.ft-optin__form input {
  font-family: var(--font-body); font-size: 16px; color: #F3E9D6;
  background: rgba(20,13,8,0.55); border: 1px solid rgba(201,162,75,0.28);
  border-radius: 8px; padding: 17px 18px; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ft-optin__form input::placeholder { color: rgba(191,178,156,0.55); }
.ft-optin__form input:focus { border-color: rgba(232,201,138,0.7); box-shadow: 0 0 0 3px rgba(232,201,138,0.13); background: rgba(20,13,8,0.8); }
.ft-optin__btn {
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #1A1206; cursor: pointer; border: 0; border-radius: 8px; padding: 17px 20px; margin-top: 4px;
  background: linear-gradient(180deg, #F4D58E 0%, #C9913F 100%);
  box-shadow: 0 16px 40px -16px rgba(244,213,142,0.6);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.ft-optin__btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

.ft-spacer { pointer-events: none; }

/* ---- RIGHT: connect ---- */
.ft-connect { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ft-connect__head {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.6vw, 32px);
  line-height: 0.98; text-transform: uppercase; margin: 0 0 26px; color: #EFE2C8; letter-spacing: 0.01em;
  white-space: nowrap;
}
.ft-connect__head strong {
  font-weight: 700;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ft-connect__rail { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; }
.ft-social {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 22px; border-radius: 9px; text-decoration: none;
  background: linear-gradient(120deg, rgba(36,26,16,0.5) 0%, rgba(14,9,5,0.55) 100%);
  border: 1px solid rgba(201,162,75,0.26);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}
.ft-social:hover { border-color: rgba(232,201,138,0.7); background: linear-gradient(120deg, rgba(52,38,22,0.6) 0%, rgba(20,13,7,0.6) 100%); transform: translateX(-3px); }
.ft-social__label { font-family: var(--font-sans); font-weight: 500; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #D8CCB6; }
.ft-social__label strong { font-weight: 700; color: #F4E6C8; }
.ft-social__rune { font-size: 22px; color: #D9824A; line-height: 1; min-width: 24px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.ft-social__rune svg { width: 20px; height: 20px; display: block; }
.ft-social:hover .ft-social__rune { color: #F4B97A; }

/* ---- BASE: wordmark divider + nav ---- */
.ft-base { position: relative; z-index: 2; max-width: 1400px; margin: 90px auto 0; padding: 30px 64px 0; }
.ft-mark { display: flex; align-items: center; gap: 30px; }
.ft-mark__rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201,162,75,0) 0%, rgba(201,162,75,0.6) 50%, rgba(201,162,75,0) 100%); }
.ft-mark__center { display: flex; align-items: center; gap: 16px; }
.ft-mark__logo { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(240,196,120,0.35)); }

.ft-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 56px; margin-top: 40px; }
.ft-nav a {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #E8C687; text-decoration: none; transition: color 0.2s ease;
}
.ft-nav a:hover { color: #FFFFFF; }

.ft-credit { text-align: center; margin-top: 40px; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.1em; color: rgba(185,172,151,0.6); }
.ft-credit strong { color: #C9A24B; font-weight: 800; letter-spacing: 0.12em; }
.ft-legal { text-align: center; margin-top: 14px; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.05em; color: rgba(185,172,151,0.5); }
.ft-legal a { color: rgba(185,172,151,0.7); text-decoration: none; }
.ft-legal a:hover { color: #F4D58E; }

@media (max-width: 1080px) {
  .ft-bg { width: 100%; height: 620px; }
  .ft-inner { grid-template-columns: 1fr; gap: 56px; padding: 60px 30px 40px; justify-items: center; text-align: center; }
  .ft-optin { align-items: center; text-align: center; order: 2; }
  .ft-optin__form { align-items: stretch; }
  .ft-connect { align-items: center; text-align: center; order: 3; }
  .ft-connect__rail { max-width: 480px; }
  .ft-spacer { display: none; }
  .ft-base { padding: 24px 24px 0; }
  .ft-nav { gap: 28px; }
}
@media (max-width: 540px) {
  .ft-bg { width: 100%; height: 440px; }
  .ft-mark { gap: 14px; }
  .ft-social { padding: 14px 18px; }
  .ft-social__label { font-size: 13px; }
}