/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* No sideways scrolling, on any phone: clip the page at its edges (phones ignore it on the body alone) */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: 'Montserrat', sans-serif;
  color: #1B2A4A;
  background: #fff;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
.content-sections { overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ===== HEADER ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s, box-shadow 0.4s;
}
.site-header.transparent { background: transparent; }
.site-header.solid {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.header-logo {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-logo .logo-img {
  height: 25.5px; /* 25% smaller than the original 34px (owner, Sept 15) */
  width: auto;
  display: block;
  transition: filter 0.3s;
}
/* Over the dark tunnel the wordmark turns white so it reads; navy + orange once the header goes white */
.site-header.transparent .logo-img { filter: brightness(0) invert(1); }
.site-header.transparent .header-logo,
.site-header.transparent .nav-link { color: #fff; }
.site-header.solid .header-logo,
.site-header.solid .nav-link { color: #1B2A4A; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-link {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: opacity 0.2s;
}
.nav-link:hover { opacity: 0.7; }

/* ===== MEGA MENU (Software & Services) ===== */
.nav-item {
  display: flex;
  align-items: center;
  height: 100%;
}
.nav-link.has-sub::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  opacity: 0.7;
  transition: transform 0.25s;
}
.nav-item:hover .nav-link.has-sub::after { transform: rotate(45deg) translateY(-1px); }
.mega-menu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #fff;
  border-top: 1px solid #EEF0F4;
  box-shadow: 0 24px 60px rgba(27,42,74,0.16);
  padding: 32px 40px 36px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
/* The first section of a page without a banner clears the fixed header */
.page-top { padding-top: 150px !important; scroll-margin-top: 0; }
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}
.mega-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #FF6100;
  margin: 0 0 10px;
}
.mega-heading {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  color: #1B2A4A;
  margin: 0;
}
.mega-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
/* The small "All resources" door in a panel's intro */
.mega-all {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #FF6B2B;
  text-decoration: none;
}
.mega-all:hover { text-decoration: underline; }
.mega-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid #EEF0F4;
  color: #1B2A4A;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.mega-card:hover {
  background: #F5F5F7;
  border-color: #FFD9B8;
  transform: translateY(-2px);
}
.mega-icon {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #FFF1E8;
  color: #FF6100;
  display: grid;
  place-items: center;
}
.mega-text strong { display: block; font-size: 1rem; font-weight: 800; margin-bottom: 4px; }
.mega-text span { display: block; font-size: 0.85rem; line-height: 1.5; color: #5F6B80; }

/* The header's Book a Demo: the site's energy button, small. The gradient flows
   through it, a soft halo breathes out every few seconds so the eye keeps finding it,
   and on hover the flow quickens and the chevron nudges right. */
.btn-demo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #FF6B2B 0%, #F0446B 35%, #C43BB5 65%, #7C3AED 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: energyFlow 3.6s ease-in-out infinite;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 11px 18px 11px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(240,68,107,0.28);
  transition: transform 0.25s, box-shadow 0.25s;
  white-space: nowrap;
}
.btn-demo::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
  flex: 0 0 auto;
  transition: transform 0.25s;
}
/* the halo: a thin ring that breathes out from the button every ~5s */
.btn-demo::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid rgba(255,107,43,0.7);
  opacity: 0;
  pointer-events: none;
  animation: demoBreath 5.2s ease-out infinite;
}
.btn-demo:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(124,58,237,0.38);
  animation-duration: 1.4s;
}
.btn-demo:hover::after { transform: rotate(45deg) translate(2px, -2px); }
@keyframes demoBreath {
  0%, 60% { transform: scale(1); opacity: 0; }
  64%     { transform: scale(1); opacity: 0.8; }
  92%, 100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-demo, .btn-demo::before { animation: none; }
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 4px 0;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: background 0.3s;
}
.site-header.solid .menu-toggle span { background: #1B2A4A; }

/* ===== HERO / PORTAL ===== */
.hero-portal {
  position: relative;
  width: 100%;
  background: #0B1528;
}
.hero-portal-inner {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ring container */
.rings-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Soft haze in the far distance of the tunnel */
.portal-haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(45,74,138,0.35) 0%, rgba(11,21,40,0) 55%),
    radial-gradient(ellipse at 50% 50%, rgba(255,97,0,0.12) 0%, rgba(11,21,40,0) 40%);
  pointer-events: none;
}

/* Rings: thin glowing strokes, each a hoop of the tunnel.
   The conic gradient paints the arcs, the mask cuts it to a soft ring. */
.portal-ring {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: var(--depth);
  will-change: transform, opacity;
  /* The arcs are drawn as SVG strokes by the page's script (drawRings): the old
     conic-gradient + mask broke into rectangular tiles on large screens. */
}
.portal-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.portal-ring.r1 { --size: 132vmin; --depth: 1;    --from: 0deg;   }
.portal-ring.r2 { --size: 110vmin; --depth: 0.95; --from: 130deg; }
.portal-ring.r3 { --size: 90vmin;  --depth: 0.9;  --from: 250deg; }
.portal-ring.r4 { --size: 73vmin;  --depth: 0.8;  --from: 40deg;  }
.portal-ring.r5 { --size: 58vmin;  --depth: 0.7;  --from: 170deg; }
.portal-ring.r6 { --size: 45vmin;  --depth: 0.58; --from: 290deg; }
.portal-ring.r7 { --size: 34vmin;  --depth: 0.46; --from: 80deg;  }
.portal-ring.r8 { --size: 25vmin;  --depth: 0.36; --from: 210deg; }

/* What you're flying toward: the photo, masked to a soft disc (--r opens it up as it nears).
   Rings and sparks sit above it so they fly past around it; the glow stays beneath as its halo. */
.tunnel-photo {
  position: absolute;
  /* A square as big as the screen's longer side, centred, so its straight edges never
     show while the disc is opening (on a phone the screen is taller than it is wide) */
  width: 100vmax;
  height: 100vmax;
  left: 50%;
  top: 50%;
  margin-left: -50vmax;
  margin-top: -50vmax;
  overflow: hidden;
  transform: scale(0.2);
  z-index: 1;   /* over the glow (its halo), under the rings and sparks */
  will-change: transform, filter;
  -webkit-mask-image: radial-gradient(circle farthest-corner at 50% 50%, #000 calc(var(--r) - 22%), transparent var(--r));
          mask-image: radial-gradient(circle farthest-corner at 50% 50%, #000 calc(var(--r) - 22%), transparent var(--r));
}
.tunnel-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 35%;
}
.portal-ring, .portal-dots { z-index: 2; }

/* The light at the end of the tunnel */
.portal-glow {
  position: absolute;
  width: 34vmin;
  height: 34vmin;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,240,225,1) 0%, rgba(255,170,90,0.9) 18%, rgba(255,97,0,0.45) 40%, rgba(255,97,0,0.12) 60%, rgba(255,97,0,0) 75%);
  opacity: 0.85;
  will-change: transform, opacity;
}

/* Sparks scattered through the tunnel */
.portal-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.portal-dot {
  position: absolute;
  border-radius: 50%;
  background: #ffd9b8;
  box-shadow: 0 0 6px rgba(255,160,80,0.9);
  will-change: transform, opacity;
}

/* The light on the other side, hidden until the portal opens; the headline lands here */
.portal-scene {
  position: absolute;
  inset: 0;
  z-index: 15;
  /* Warm emergence: cream with soft orange and purple blooms at the edges */
  background:
    radial-gradient(ellipse 48% 42% at 6% 78%, rgba(255,107,43,0.22) 0%, rgba(255,107,43,0) 70%),
    radial-gradient(ellipse 40% 46% at 96% 22%, rgba(124,58,237,0.20) 0%, rgba(124,58,237,0) 70%),
    radial-gradient(ellipse 30% 30% at 88% 92%, rgba(240,68,107,0.10) 0%, rgba(240,68,107,0) 70%),
    #F8F6F0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 900px;
}
.portal-scene .hit-section {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 90px 24px 32px;
  background: transparent;
}

/* The emergence: the headline lands, then two revenue cards and the button beneath it */
.hit-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.5vh, 40px);
}
.hit-copy { text-align: center; max-width: 900px; will-change: transform; }
.hit-headline { margin: 0 auto; }

/* The row beneath the headline: Unmet card, Jason, Invisible card */
.emergence-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vh, 24px);
  width: 100%;
  max-width: 1040px;
  align-items: center;
}
/* Just his face, as large as the room allows, melting away from the collar down */
.jason-panel {
  position: relative;
  height: clamp(200px, 40vh, 420px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
  mix-blend-mode: multiply;
  -webkit-mask: linear-gradient(#000 60%, rgba(0,0,0,0.5) 76%, transparent 92%);
          mask: linear-gradient(#000 60%, rgba(0,0,0,0.5) 76%, transparent 92%);
}
.jason-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale(1.62);
  transform-origin: 50% 4%;
  display: block;
}
.hit-copy { position: relative; }
.hit-section > .btn-hook { position: relative; }

/* The second door: a quiet "keep scrolling" under the button, like the tunnel's cue in navy */
.hit-scroll {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(-1 * clamp(6px, 1.6vh, 18px));
  color: rgba(27,42,74,0.55);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s;
}
.hit-scroll:hover { color: #1B2A4A; }
.hit-scroll .scroll-hint {
  width: 18px;
  height: 28px;
  margin-top: 10px;
  border-color: rgba(27,42,74,0.28);
}
.hit-scroll .scroll-hint::after { background: rgba(27,42,74,0.55); height: 7px; top: 5px; }
.hit-scroll:hover .scroll-hint { border-color: rgba(27,42,74,0.5); }

.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ico.o { color: #FF6B2B; }
.ico.p { color: #7C3AED; }

/* "Built for venues. Nothing else." under the line */
.hit-sub {
  margin: calc(-1 * clamp(6px, 1.2vh, 14px)) 0 0;
  font-size: clamp(1rem, min(1.5vw, 2.6vh), 1.3rem);
  font-weight: 600;
  color: #1B2A4A;
  letter-spacing: -0.01em;
}

/* The demand field: six timestamped chips scattered like the banner, his head peeking up behind */
.demand-field {
  position: relative;
  width: 100%;
  max-width: 1040px;
  height: clamp(190px, 30vh, 290px);
}
.demand-field .jason-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 82%;
  margin: 0;
  z-index: 0;
}
.demand-chip {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(27,42,74,0.10), 0 2px 8px rgba(27,42,74,0.05), inset 0 0 0 1px rgba(255,255,255,0.7);
  white-space: nowrap;
  text-align: left;
  will-change: transform, opacity;
}
.chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: 0 0 auto;
}
.chip-ico .ico { width: 22px; height: 22px; }
.demand-chip.o .chip-ico { background: rgba(255,107,43,0.13); color: #FF6B2B; }
.demand-chip.p .chip-ico { background: rgba(124,58,237,0.12); color: #7C3AED; }
.chip-text { display: flex; flex-direction: column; line-height: 1.2; }
.chip-text strong { font-size: clamp(0.95rem, min(1.35vw, 2.4vh), 1.2rem); font-weight: 700; color: #1B2A4A; }
.chip-text span { font-size: clamp(0.78rem, min(1.05vw, 1.9vh), 0.95rem); font-weight: 500; color: #6B7488; margin-top: 2px; }
/* The banner's scatter */
.demand-chip.d1 { left: 2%;  top: 6%; }
.demand-chip.d2 { left: 29%; top: 0; }
.demand-chip.d3 { right: 1%; top: 10%; }
.demand-chip.d4 { left: 15%; top: 58%; }
.demand-chip.d5 { right: 23%; top: 50%; }
.demand-chip.d6 { right: 0; top: 76%; }
.demand-chip.d6 .chip-text strong, .demand-chip.d6 .chip-text span { opacity: 0.8; }

/* The finalist badge, top right, frosted like the chips */
.iaapa-badge {
  position: absolute;
  left: 32px;
  bottom: 28px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(124,58,237,0.12), 0 2px 8px rgba(27,42,74,0.05), inset 0 0 0 1px rgba(255,255,255,0.75);
  text-align: left;
  white-space: nowrap;
}
.badge-ico { width: 22px; height: 22px; fill: none; stroke: #7C3AED; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.badge-text { display: flex; flex-direction: column; line-height: 1.15; }
.badge-text strong { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #7C3AED; }
.badge-text span { font-size: 0.82rem; font-weight: 600; color: #1B2A4A; margin-top: 2px; }
/* The house card: pure white, soft navy-tinted shadow, no rules or borders */
.revenue-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: clamp(22px, 3.4vh, 36px) clamp(24px, 3.4vh, 40px);
  text-align: left;
  box-shadow: 0 30px 80px rgba(27,42,74,0.12), 0 4px 16px rgba(27,42,74,0.05);
}
.revenue-card.unmet { color: #FF6B2B; }
.revenue-card.invisible { color: #7C3AED; }
.revenue-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: currentColor;
  margin: 0 0 14px;
}
.revenue-quote {
  font-size: clamp(1.15rem, min(2vw, 3.2vh), 1.6rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1B2A4A;
  margin: 0;
}
.revenue-quote .q { color: currentColor; font-weight: 800; }
.revenue-card.unmet .revenue-quote .q { color: #FF6B2B; }
.revenue-card.invisible .revenue-quote .q { color: #7C3AED; }

@media (min-width: 700px) {
  .emergence-row { grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 2.4vw, 32px); }
  .hit-headline { font-size: clamp(2.6rem, min(6.4vw, 11vh), 5.6rem); }
  .hit-headline.demand { font-size: clamp(2.4rem, min(5.4vw, 10vh), 5rem); }
  .hit-copy { max-width: 1100px; }
}
@media (max-width: 699px) {
  .hit-headline { font-size: clamp(2.1rem, min(10.5vw, 8vh), 4rem); }
  .hit-headline.demand { font-size: clamp(2rem, min(10vw, 7vh), 3.4rem); }
  .hit-section { gap: clamp(14px, 2.4vh, 26px); }
  /* Phone: the chips become a tidy two-column grid, his head above them */
  .demand-field {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 440px;
  }
  .demand-field .jason-panel {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    grid-column: 1 / -1;
    order: 10;
    height: clamp(104px, 15vh, 170px);
    margin: 2px auto -10px;
    z-index: auto;
    /* His head peeks up between the chips and the button. Phone browsers drop the page-level
       blend inside the pinned scene (a white box appears), so here the photo is painted as the
       panel's own background and multiplied against the scene's cream inside the panel, which
       every phone honours; the edges and the collar are then faded away. */
    mix-blend-mode: normal;
    background:
      url("images/emergence-owner.jpg") 50% calc(-0.0248 * clamp(104px, 15vh, 170px)) / 162% auto no-repeat,
      #F8F6F0;
    background-blend-mode: multiply, normal;
    -webkit-mask-image: linear-gradient(#000 52%, rgba(0,0,0,0.45) 72%, transparent 88%),
                        linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(#000 52%, rgba(0,0,0,0.45) 72%, transparent 88%),
                        linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .demand-field .jason-img { visibility: hidden; }
  /* Tighter stack on phones so his head keeps its place */
  .portal-scene .hit-section { padding: 84px 20px 14px; gap: clamp(10px, 1.6vh, 20px); }
  .hit-scroll { margin-top: 0; }
  .hit-scroll .scroll-hint { display: none; }
  .badge-text { flex-direction: row; align-items: baseline; gap: 8px; }
  .badge-text span { margin-top: 0; }
  .demand-chip {
    position: static;
    width: 100%;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 14px;
    white-space: normal;
  }
  .chip-ico { width: 32px; height: 32px; border-radius: 10px; }
  .chip-ico .ico { width: 17px; height: 17px; }
  .chip-text strong { font-size: 0.82rem; }
  .chip-text span { font-size: 0.7rem; }
  .demand-chip.d6 .chip-text strong, .demand-chip.d6 .chip-text span { opacity: 1; }
  /* Phone: the badge sits above the line, out of the chat bubble's corner */
  .iaapa-badge {
    position: relative;
    left: auto;
    bottom: auto;
    order: -1;
    padding: 6px 14px 6px 10px;
  }
  .badge-text strong { font-size: 0.62rem; }
  .badge-text span { font-size: 0.74rem; }
}
@media (max-width: 699px) and (max-height: 740px) {
  .jason-panel { display: none; }
}

/* Hero text */
.hero-headline {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  z-index: 10;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}
.hero-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(16px);
}
.hero-headline h1 {
  font-size: clamp(2rem, 5.6vw, 4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(24px);
  text-shadow: 0 4px 40px rgba(11,21,40,0.8);
}
.hero-headline h1 span {
  color: #FF6100;
  white-space: nowrap;
}
@media (max-width: 699px) {
  /* Phones: the headline fills the width, three lines, "you're losing." kept whole */
  .hero-headline h1 { font-size: clamp(2.2rem, 10vw, 2.7rem); line-height: 1.08; }
}
.hero-subline {
  position: absolute;
  bottom: 12vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  text-align: center;
}
.hero-subline p {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.scroll-hint {
  display: inline-block;
  width: 20px;
  height: 32px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  position: relative;
  margin-top: 12px;
}
.scroll-hint::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 2px;
  animation: scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 0.3; }
}

/* Overlay that fades to dark as you go through the portal */
.portal-overlay {
  position: absolute;
  inset: 0;
  background: #0B1528;
  opacity: 0;
  z-index: 20;
  pointer-events: none;
}

/* ===== MAIN CONTENT (after portal) ===== */
.content-sections {
  position: relative;
  z-index: 5;
  background: #fff;
}

/* Section spacing */
.section {
  padding: 80px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.section-lg {
  padding: 100px 24px;
}
.section-dark {
  background: #0B1528;
  color: #fff;
  max-width: none;
}
.section-dark .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.section-grey {
  background: #F5F5F7;
  max-width: none;
}
.section-grey .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== INTRO SECTION ===== */
.intro-section {
  text-align: center;
  padding-top: 100px;
}
.intro-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF6100;
  margin-bottom: 20px;
}
.intro-section h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  color: #1B2A4A;
  line-height: 1.15;
  margin-bottom: 24px;
}
.intro-section h2 span { color: #FF6100; }
.intro-body {
  max-width: 680px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  color: #3a4a6a;
  line-height: 1.7;
}
.intro-body strong { color: #FF6100; }

/* ===== THREE-STEP FLOW ===== */
.steps-heading {
  text-align: center;
  margin-bottom: 48px;
}
.steps-heading h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #1B2A4A;
}
.steps-heading h2 .orange { color: #FF6100; }
.steps-heading h2 .blue { color: #2D4A8A; }
.steps-heading h2 .green { color: #22a867; }

.steps-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}
.step-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
}
.step-dot.orange { background: #FF6100; }
.step-dot.purple { background: #7B61FF; }
.step-dot.green { background: #22a867; }
.step-arrow {
  color: #ccc;
  font-size: 1.2rem;
  letter-spacing: 2px;
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.step-card {
  background: #fff;
  border: 1px solid #e8ecf2;
  border-radius: 12px;
  padding: 36px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}
.step-number.orange { background: #FF6100; }
.step-number.purple { background: #7B61FF; }
.step-number.green { background: #22a867; }
.step-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.step-card h3.orange { color: #FF6100; }
.step-card h3.purple { color: #7B61FF; }
.step-card h3.green { color: #22a867; }
.step-card p {
  font-size: 0.95rem;
  color: #3a4a6a;
  line-height: 1.7;
}
.step-card p strong { color: #1B2A4A; }

/* ===== PLATFORM SECTION: one screen, two boards side by side ===== */
.platform-section {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #F5F5F7;
  padding: calc(64px + 2vh) 20px 3vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.platform-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.platform-kicker {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #FF6100;
  margin: 0 0 10px;
}
.platform-section h2 {
  font-size: clamp(1.5rem, min(4.4vw, 5.5vh), 3.6rem);
  font-weight: 800;
  color: #111;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 3vh;
  flex: 0 0 auto;
  max-width: 22ch;
}
.platform-section h2 span { color: #FF6100; }

.pursuit-compare {
  flex: 0 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.pcard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 20px;
  padding: 16px;
  overflow: hidden;
  box-sizing: border-box;
}
.pcard.other {
  background: #F9FAFC;
  box-shadow: 0 10px 40px rgba(27,42,74,0.04);
}
.pcard.ours {
  background: #fff;
  box-shadow: 0 30px 80px rgba(27,42,74,0.12), 0 4px 16px rgba(27,42,74,0.05);
}
.pcard-title {
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.pcard.other .pcard-title { color: #7F8A9E; }
.pcard.ours .pcard-title { color: #FF6100; margin: 0; }
.pcard-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ppills { position: relative; flex: 0 0 auto; min-width: 84px; height: 30px; }
.ppill {
  position: absolute; right: 0; top: 0;
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.ppill.open { background: #F1F2F5; color: #8a94a6; }
.ppill.booked { background: #22C55E; color: #fff; opacity: 0; }

.pcard-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.pcard-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pbubble {
  background: #F3F4F6;
  color: #111;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.86rem;
  line-height: 1.45;
}
.pbubble.grey {
  background: #EAEDF1;
  color: #5F6B80;
  font-weight: 500;
}
.pcard-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #7F8A9E;
}
.pcard-foot i {
  width: 12px; height: 12px; border-radius: 50%;
  background: #C3C9D3;
  flex: 0 0 12px;
}
.prow {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F3F4F6;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
}
.prow.done { background: #E9F8EE; color: #16A34A; }
.picon {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
/* Text that writes itself: a hidden full copy keeps the layout steady
   while the typed copy fills in on top of it. */
.type { position: relative; display: block; }
.type .ghost { visibility: hidden; }
.type .typed { position: absolute; left: 0; top: 0; right: 0; }
.type .typed.typing::after {
  content: "";
  display: inline-block;
  width: 2px; height: 0.95em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.12em;
  animation: caretBlink 0.7s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.picon.grey { background: #CFD3DA; }
.picon.purple { background: #A855F7; }
.picon.blue { background: #3B82F6; }
.picon.green { background: #22C55E; }

/* ===== STATS ===== */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  text-align: center;
  margin-bottom: 60px;
}
.stat-item h3 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 800;
  color: #FF6100;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-item .stat-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.stat-item .stat-source {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ===== TESTIMONIALS ===== */
.testimonials-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 32px;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.testimonial-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 32px 28px;
}
.testimonial-card blockquote {
  font-size: 1rem;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  margin-bottom: 16px;
}
.testimonial-card cite {
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}

/* ===== CTA BANNER ===== */
.cta-banner {
  text-align: center;
  padding: 80px 24px;
  max-width: none;
  background: linear-gradient(135deg, #0B1528 0%, #162444 100%);
  color: #fff;
}
.cta-banner h2 {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.3;
}
.cta-banner p {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.cta-banner .btn-demo {
  font-size: 1rem;
  padding: 14px 36px;
}

/* ===== FOOTER ===== */
/* ===== FOOTER (navy, per the Sept 2026 spec) ===== */
.site-footer {
  background: #1B2A4A;
  color: #fff;
  padding: 64px 24px 28px;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 24px;
}
.footer-brand { grid-column: 1 / -1; }
.footer-logo-img {
  height: 30px;
  width: auto;
  display: block;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}
.footer-brand a {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}
.footer-brand .footer-demo {
  display: inline-block;
  margin: 18px 0 20px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #FF6B2B;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  transition: background 0.2s, transform 0.2s;
}
.footer-brand .footer-demo:hover { background: #ff7d47; transform: translateY(-1px); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.8);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.footer-social a:hover { border-color: #FF6B2B; color: #fff; background: rgba(255,107,43,0.15); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h4 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #FF6B2B;
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  padding: 4px 0;
  margin-bottom: 4px;
  transition: color 0.2s;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  max-width: 1160px;
  margin: 44px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
}

/* ===== NEW HOME PAGE (Sept 2026 spec) ===== */
.content-sections { background: #F8F6F0; }

/* Section 1, after the tunnel: the hit */
.hit-section {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  background: #F8F6F0;
}
.hit-headline {
  font-size: clamp(2.2rem, min(8vw, 11.5vh), 6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #1B2A4A;
  max-width: 15ch;
  margin: 0 auto;
}
.hit-headline .word { display: inline-block; white-space: nowrap; }

/* DEMAND DOESN'T WAIT / UNTIL YOU'RE FREE. — the banner's line, set like the banner */
.hit-headline.demand {
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.0;
  max-width: none;
  position: relative;
}
/* Every word is painted through its own letters, so it can be glass, solid or gradient */
.hit-headline.demand .word {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  background-image: linear-gradient(#1B2A4A, #1B2A4A);
  will-change: transform, opacity;
}
/* Default and final: line one navy, line two the gradient (fixed stops per word, so it survives wrapping) */
.hit-headline.demand .word.b1 { background-image: linear-gradient(90deg, #FF6B2B, #F0446B); }
.hit-headline.demand .word.b2 { background-image: linear-gradient(90deg, #F0446B, #C43BB5); }
.hit-headline.demand .word.b3 { background-image: linear-gradient(90deg, #C43BB5, #7C3AED); }
/* Glass: the letters are translucent navy with a white light streak that sweeps across as they land */
.hit-headline.demand.glass .word {
  background-image: linear-gradient(112deg,
    rgba(27,42,74,0.50) 0%, rgba(27,42,74,0.62) 38%, rgba(255,255,255,0.96) 47%, rgba(230,236,255,0.92) 50%,
    rgba(27,42,74,0.62) 58%, rgba(27,42,74,0.50) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.55);
}
/* The wash: two script-made copies of the line sit exactly over it, a white glowing band leading
   and the final colours following, both revealed left to right with a moving clip */
.hit-headline.demand.wash-solid,
.hit-headline.demand.wash-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
}
.hit-headline.demand.wash-light .word {
  background-image: linear-gradient(#fff, #fff);
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 0 14px rgba(255,255,255,0.95)) drop-shadow(0 0 30px rgba(240,68,107,0.45));
}
/* The energy button: orange to pink to purple, the gradient flowing through it */
.btn-hook {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(90deg, #FF6B2B 0%, #F0446B 35%, #C43BB5 65%, #7C3AED 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: energyFlow 3.6s ease-in-out infinite;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 18px 34px 18px 36px;
  border-radius: 18px;
  min-height: 44px;
  box-shadow: 0 12px 32px rgba(240,68,107,0.28);
  transition: transform 0.25s, box-shadow 0.25s;
}
.btn-hook::after {
  content: "";
  width: 11px; height: 11px;
  border-right: 2.5px solid #fff;
  border-top: 2.5px solid #fff;
  transform: rotate(45deg);
  flex: 0 0 auto;
  transition: transform 0.25s;
}
.btn-hook:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(124,58,237,0.35);
  animation-duration: 1.4s;
}
.btn-hook:hover::after { transform: rotate(45deg) translate(3px, -3px); }
.btn-hook.large { font-size: 1.2rem; padding: 22px 42px 22px 46px; border-radius: 22px; }
@keyframes energyFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-hook { animation: none; }
}

/* Story sections */
.story-section { padding: 96px 24px; background: #F8F6F0; }

/* Section 2, The Inside: warm, calm, full of life; the owner in full colour */
.story-section.inside-section { padding: 96px 24px 100px; overflow: hidden; }
.inside-section .present { font-weight: 800; color: #FF6B2B; }
.inside-split { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; max-width: 1140px; margin: 0 auto; }
/* The picture sits still in a house card, with air around it (owner, Oct 12) */
.inside-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 24px;
  background: #F8F6F0;
  box-shadow: 0 30px 80px rgba(27,42,74,0.12), 0 4px 16px rgba(27,42,74,0.05);
}
.inside-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;         /* the whole height shows: both heads in, the floor is what gets cut */
  filter: saturate(1.08) contrast(1.02);
}
.inside-media::after {            /* the venue radiating warmth */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 55%, rgba(255,107,43,0) 50%, rgba(255,107,43,0.12) 100%);
  pointer-events: none;
}
.inside-copy { padding: 0; }
@media (min-width: 900px) {
  .story-section.inside-section { padding: 150px 48px 140px; }
  .inside-split { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); }
  .inside-copy { max-width: 560px; margin: 0; }
}

/* Section 3, The Turn: a hard edge into a cooler room */
.story-section.turn-section {
  background: #EEF1F7;
  padding: 120px 24px 130px;
}
.hinge-line {
  font-size: clamp(1.7rem, 3.8vw, 2.7rem) !important;
  font-weight: 800;
  line-height: 1.15 !important;
  letter-spacing: -0.025em;
  color: #1B2A4A;
  margin: 0 0 36px !important;
}
.story-section.turn-section { padding-top: 90px; }
/* The three families as ghosted cards: translucent, faint icon, fading before anyone noticed */
.ghost-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto 40px;
}
.ghost-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px 26px 26px;
  box-shadow: 0 30px 80px rgba(27,42,74,0.10), 0 4px 16px rgba(27,42,74,0.04);
  will-change: opacity, transform;
}
.ghost-card .ico { width: 30px; height: 30px; opacity: 0.4; margin-bottom: 18px; stroke-width: 1.6; }
.ghost-card p { margin: 0 !important; font-size: 1.08rem !important; font-weight: 500; opacity: 0.85; line-height: 1.55 !important; }
.anchor-line .accent { font-style: normal; color: #FF6B2B; }
@media (min-width: 760px) {
  .ghost-cards { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
}
.anchor-block { padding: clamp(110px, 16vh, 190px) 24px clamp(48px, 7vh, 80px); }
.anchor-hook { text-align: center; }
.anchor-first { display: block; }
.anchor-line {
  max-width: 30ch;
  margin: 0 auto !important;
  text-align: center;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem) !important;
  font-weight: 800;
  line-height: 1.18 !important;
  letter-spacing: -0.03em;
  color: #1B2A4A;
}

/* Section 3B, The Clues: scattered signals that want to connect and can't */
.clues-section {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  background: linear-gradient(180deg, #EEF1F7 0%, #F4F6FA 100%);
  overflow: hidden;
}
.clue-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.clue-field { position: absolute; inset: 0; pointer-events: none; }
.clue-pill {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(27,42,74,0.09), 0 2px 6px rgba(27,42,74,0.04);
  font-size: 0.82rem;
  font-weight: 600;
  color: #1B2A4A;
  white-space: nowrap;
  opacity: 0.6;
  will-change: transform, opacity, filter;
  transition: box-shadow 0.45s ease;
}
/* A signal that has come to the surface: lifted, with a warm halo */
.clue-pill.lit { box-shadow: 0 22px 50px rgba(27,42,74,0.18), 0 0 0 5px rgba(255,107,43,0.10), 0 0 40px rgba(255,107,43,0.18); }
.clues-line {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 30ch;
  text-align: center;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1B2A4A;
}
@media (max-width: 699px) {
  .clues-section { min-height: 88vh; padding: 64px 24px; }
  .clue-pill { font-size: 0.76rem; padding: 8px 13px 8px 10px; }
  /* All ten signals on a phone: a band above the line and a band below it */
  .clue-pill.c1  { --x: 4% !important;  --y: 4% !important; }
  .clue-pill.c2  { --x: 54% !important; --y: 10% !important; }
  .clue-pill.c3  { --x: 8% !important;  --y: 17% !important; }
  .clue-pill.c4  { --x: 46% !important; --y: 23% !important; }
  .clue-pill.c9  { --x: 4% !important;  --y: 31% !important; }
  .clue-pill.c11 { --x: 62% !important; --y: 33% !important; }
  .clue-pill.c5  { --x: 4% !important;  --y: 66% !important; }
  .clue-pill.c6  { --x: 54% !important; --y: 72% !important; }
  .clue-pill.c7  { --x: 8% !important;  --y: 79% !important; }
  .clue-pill.c10 { --x: 42% !important; --y: 85% !important; }
  .clue-pill.c8  { --x: 6% !important;  --y: 92% !important; }
}

/* Section 4, The Eric banner: the trade-show banner brought to the web. Purple is Eric's colour. */
.eric-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 120px 24px 110px;
  color: #1B2A4A;
  background:
    radial-gradient(ellipse 55% 30% at 50% 78%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #F5F1FC 0%, #E6DCF7 34%, #CDB9F0 68%, #AE93E3 100%);
}
.eric-waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.eric-waves path { fill: none; stroke: #fff; stroke-width: 1; opacity: 0.35; }
.eric-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.eric-headline {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 34px;
}
.eric-line {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  font-weight: 500;
  line-height: 1.45;
  margin: 0 auto 26px;
  max-width: 30ch;
}
.eric-turn {
  font-size: clamp(1.5rem, 2.9vw, 2.05rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 42px auto 30px;
  max-width: 22ch;
}
.eric-name { color: #6D3FD1; }
.eric-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* The site's energy button, in Eric's purples */
.btn-hook.eric {
  background-image: linear-gradient(90deg, #A47CF0 0%, #7C3AED 35%, #5B2FB8 65%, #8B5CF6 100%);
  background-size: 220% 100%;
  box-shadow: 0 14px 36px rgba(91,47,184,0.32);
  font-size: 1.55rem;
  font-weight: 700;
  padding: 22px 42px 22px 46px;
  border-radius: 22px;
}
@media (max-width: 699px) { .btn-hook.eric { font-size: 1.3rem; padding: 20px 32px; } }
.btn-hook.eric:hover { box-shadow: 0 20px 44px rgba(91,47,184,0.42); }
.hear-call.pulse { animation: energyFlow 3.6s ease-in-out infinite, hearPulse 2.6s ease-in-out infinite; }
@keyframes hearPulse {
  0%, 100% { box-shadow: 0 14px 36px rgba(91,47,184,0.32); }
  50% { box-shadow: 0 18px 44px rgba(91,47,184,0.42), 0 0 0 10px rgba(124,58,237,0.10); }
}
/* The always-available door: the same weight as every other section's hook link */
.meet-eric {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin-top: 10px;
  padding: 6px 14px;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #6D3FD1;
  transition: gap 0.25s;
}
.meet-eric:hover { gap: 22px; }
@media (max-width: 699px) { .meet-eric { font-size: 1.3rem; } }
.eric-player {
  /* wider than the text column: the flex centring lets it spill evenly either side */
  width: min(936px, calc(100vw - 48px));
  flex-shrink: 0;
  margin: 8px 0 0;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #1B2A4A;
  box-shadow: 0 30px 80px rgba(60,30,140,0.28), 0 4px 16px rgba(27,42,74,0.08);
  order: 2;
}
.eric-player iframe { width: 100%; height: 100%; display: block; border: 0; }
.eric-cta .meet-eric { order: 3; }
.eric-cta.open .hear-call { display: none; }
.eric-cta.open .call-scene { display: none; }

/* ===== THE CALL SCENE: a photo with the call playing over it as frosted chat ===== */
.call-scene {
  position: relative;
  width: min(936px, calc(100vw - 48px));
  flex-shrink: 0;
  aspect-ratio: 16 / 10;
  margin: 8px 0 10px;
  border-radius: 24px;
  overflow: hidden;
  /* warm kitchen tones while the photo arrives, so a slow connection never shows a black box */
  background: linear-gradient(160deg, #F3E6D8 0%, #E6D7E8 55%, #CDB9E6 100%);
  box-shadow: 0 30px 80px rgba(60,30,140,0.28), 0 4px 16px rgba(27,42,74,0.08);
  order: 0;
  isolation: isolate;
}
.call-scene > img.cs-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
}
/* a quiet navy wash where the words sit, so white text reads on a bright kitchen */
.cs-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(27,42,74,0.72) 0%, rgba(27,42,74,0.42) 38%, rgba(27,42,74,0) 72%),
    linear-gradient(to right, rgba(27,42,74,0.38) 0%, rgba(27,42,74,0) 55%);
  pointer-events: none;
}
.cs-title {
  position: absolute; top: 22px; right: 26px;
  max-width: 46%;
  text-align: right;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-shadow: 0 2px 18px rgba(27,42,74,0.55);
}
.cs-chat {
  position: absolute; left: 22px; bottom: 22px;
  width: min(380px, 62%);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px;
  font-size: 0.95rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em;
  color: #fff;
  text-align: left;
}
/* channel badge: Eric on the line, three bars breathing */
.cs-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(124,58,237,0.78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 4px;
}
.cs-badge .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.cs-badge .bars i { width: 3px; height: 5px; border-radius: 2px; background: #fff; animation: csBar 0.9s ease-in-out infinite; }
.cs-badge .bars i:nth-child(2) { animation-delay: 0.15s; }
.cs-badge .bars i:nth-child(3) { animation-delay: 0.3s; }
@keyframes csBar { 0%, 100% { height: 4px; } 50% { height: 12px; } }
/* one message: a row that grows open as it arrives */
.cs-msg { width: 100%; display: flex; align-items: flex-end; gap: 10px; }
.cs-msg.guest { justify-content: flex-end; transform-origin: right center; }
.cs-msg.eric { justify-content: flex-start; transform-origin: left center; }
/* the frosting: white at 16%, blurred, a hairline ring painted inside the edge */
.cs-bubble {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 11px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff;
}
@supports not (backdrop-filter: blur(1px)) {
  .cs-bubble { background: rgba(255,255,255,0.26); }
}
.cs-bubble p { margin: 0; }
/* a silent copy of the full reply holds the bubble at its final width, so the typed words never re-wrap */
.cs-bubble.answer .ghost { height: 0; overflow: hidden; visibility: hidden; }
.cs-msg.guest .cs-bubble { max-width: 86%; }
.cs-msg.eric .cs-bubble { max-width: calc(100% - 46px); }
/* Eric's disc: white, our mark inside, breathing */
.cs-avatar {
  flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff url('images/touchpoints-mark.jpg') center 42% / 72% auto no-repeat;
  box-shadow: 0 6px 18px rgba(27,42,74,0.28);
  animation: csBreathe 2.4s ease-in-out infinite;
}
@keyframes csBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
/* typing dots and the answer share one cell; the dots give way as the answer types */
.cs-stack { display: grid; min-width: 0; max-width: calc(100% - 46px); }
.cs-stack > .cs-bubble { grid-area: 1 / 1; max-width: 100%; }
.cs-bubble.typing { display: none; align-items: center; gap: 4px; padding: 13px 16px; align-self: start; justify-self: start; }
.cs-bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0.9; animation: csDot 1.2s ease-in-out infinite; }
.cs-bubble.typing i:nth-child(2) { animation-delay: 0.15s; }
.cs-bubble.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes csDot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
.call-scene.js .cs-bubble.typing { display: flex; }
.cs-bubble.answer.typing-on p::after {
  content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  vertical-align: -0.15em; background: #fff; animation: csCaret 0.8s steps(1) infinite;
}
@keyframes csCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cs-badge .bars i, .cs-avatar, .cs-bubble.typing i { animation: none; }
}
@media (max-width: 699px) {
  .call-scene { aspect-ratio: 3 / 4; border-radius: 18px; margin-top: 4px; }
  .call-scene > img.cs-photo { object-position: 50% 0; }
  .cs-title { top: 14px; right: 16px; max-width: 60%; font-size: 0.92rem; }
  .cs-chat { left: 12px; right: 12px; bottom: 12px; width: auto; font-size: 0.84rem; gap: 6px; }
  .cs-bubble { padding: 9px 13px; border-radius: 16px; }
  .cs-avatar { flex-basis: 30px; width: 30px; height: 30px; }
  .cs-msg.eric .cs-bubble, .cs-stack { max-width: calc(100% - 40px); }
}

/* The three channels: glossy purple spheres, the phone the largest */
.eric-spheres { position: relative; width: 340px; height: 300px; margin: 44px auto 34px; }
/* Matched to the sphere in Eric's video: soft white highlight up and right of centre,
   lavender melting to violet, a faint glow all round and a shadow pooling beneath */
.sphere {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 56% 24%, #F4EEFF 0%, #CDB9F8 9%, #A986F0 26%, #8A5FE7 50%, #7248DB 74%, #6238C8 100%);
  box-shadow:
    inset -18px -26px 44px rgba(70,30,160,0.30),
    inset 12px 14px 34px rgba(255,255,255,0.22),
    0 36px 60px rgba(80,40,170,0.30),
    0 0 46px rgba(160,120,250,0.35);
  display: flex; align-items: center; justify-content: center;
}
.sphere::before {
  content: "";
  position: absolute;
  left: 40%; top: 8%;
  width: 32%; height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 72%);
  filter: blur(2px);
}
.sphere::after {                 /* the halo of light around the sphere */
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190,160,255,0.45) 45%, rgba(190,160,255,0) 72%);
  z-index: -1;
}
.sphere { background-size: 140% 140%; background-position: 50% 50%; }
.sphere svg { z-index: 2; }
.sheen {                          /* a streak of light that sweeps across the sphere now and then */
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.sheen i {
  position: absolute;
  top: -20%; bottom: -20%; left: 0;
  width: 34%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg) translateX(-200%);
}
.flash {                          /* Eric arriving: one bright pulse from the phone */
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(230,220,255,0.5) 40%, rgba(230,220,255,0) 70%);
  opacity: 0;
  pointer-events: none;
}
.edot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #C9B4F7 0%, #8B5CF6 55%, #6D3FD1 100%);
  box-shadow: 0 4px 10px rgba(80,40,170,0.25);
  opacity: 0.9;
}
.sphere svg { width: 46%; height: 46%; position: relative; }
.s-dot   { left: 6px;  top: 8px;   width: 62px;  height: 62px; }
.s-phone { left: 34px; top: 42px;  width: 200px; height: 200px; }
.s-chat  { right: 0;   top: 88px;  width: 124px; height: 124px; }
.s-msg   { left: 178px; top: 208px; width: 90px;  height: 90px; }
.ring-wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
  opacity: 0;
  pointer-events: none;
}
.eric-close { font-size: 0.98rem; line-height: 1.6; margin: 0; }
.eric-close .muted { color: #5F6B80; }
#ericClose .muted { color: #1B2A4A; font-weight: 700; }
.eric-close strong { color: #6D3FD1; font-weight: 800; }
@media (max-width: 699px) {
  .eric-section { padding: 90px 24px 80px; }
  .eric-spheres { width: 260px; height: 232px; margin: 36px auto 28px; }
  .s-dot   { left: 4px;  top: 6px;   width: 46px;  height: 46px; }
  .s-phone { left: 24px; top: 32px;  width: 154px; height: 154px; }
  .s-chat  { right: 0;   top: 70px;  width: 94px;  height: 94px; }
  .s-msg   { left: 136px; top: 162px; width: 68px;  height: 68px; }
  .eric-player { border-radius: 14px; }
}

/* Section 6, The Weight: pure white, nothing but the words */
/* ===== THE DIAGNOSIS HINGE: bare, white, the verdict at display size ===== */
.story-section.diag-section { padding: 170px 24px 150px; background: #fff; }
.diag-section .story-inner { max-width: 600px; }
.diag-section p { font-size: 1.22rem; }
.diag-head { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: #1B2A4A; margin: 0 0 30px; }
.diag-section .story-anchor.strong { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 34px 0; }
/* the two spine lines share one treatment */
.spine-block { text-align: center; padding: 150px 24px 40px; }
.story-section .spine-line {
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #1B2A4A;
  max-width: 14ch;
  margin: 0 auto;
}
.bridge-link { display: inline-block; margin-top: 44px; font-size: 1.05rem; font-weight: 600; color: #7F8A9E; font-style: italic; padding: 8px; transition: color 0.2s; }
.bridge-link:hover { color: #FF6B2B; }

/* ===== THE LAYER: the exhale. Lighter, open, rings of light wrapping the line ===== */
.story-section.exhale-section { overflow: hidden; padding: 150px 24px 190px; background: linear-gradient(180deg, #fff 0%, #FBF8F1 45%, #F8F6F0 100%); }
.exhale-section .story-inner { max-width: 640px; }
.exhale-section p { font-size: 1.22rem; }
.exhale-head { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: #1B2A4A; margin: 0 0 34px; }
.spine-block.wrapped { position: relative; padding: 170px 24px 60px; }
.light-rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.light-rings i {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);
  border: 2px solid transparent;
  background: linear-gradient(135deg, rgba(255,107,43,0.55), rgba(240,68,107,0.35), rgba(124,58,237,0.5)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.35;
}
.light-rings i:nth-child(1) { width: 380px; height: 380px; }
.light-rings i:nth-child(2) { width: 560px; height: 560px; opacity: 0.28; }
.light-rings i:nth-child(3) { width: 760px; height: 760px; opacity: 0.2; }
.light-rings i:nth-child(4) { width: 980px; height: 980px; opacity: 0.12; }
.spine-block.wrapped .spine-line { position: relative; }

/* ===== SENSITIVITY: eleven boring calls, one that matters ===== */
.story-section.sense-section { padding: 150px 24px 140px; background: #fff; }
.sense-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; align-items: center; max-width: 1100px; margin: 0 auto 70px; }
.sense-split .story-inner { margin: 0; max-width: 560px; }
.sense-head, .intimacy-head { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; color: #1B2A4A; margin: 0 0 30px; }
.sense-section p, .intimacy-section p { font-size: 1.15rem; }
.sense-section .story-anchor.strong, .intimacy-section .story-anchor.strong { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 30px 0; }
.sense-sub, .intimacy-sub { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; line-height: 1.2; color: #1B2A4A; margin: 0 0 22px; }
.call-log { background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(27,42,74,0.12), 0 4px 16px rgba(27,42,74,0.05); padding: 20px 22px 18px; font-size: 0.86rem; }
.cl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cl-day { font-weight: 800; color: #1B2A4A; }
.cl-count { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9AA3B5; }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #EEF1F6; color: #7F8A9E; font-weight: 500; }
.cl-list li i { font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #B4BCCB; white-space: nowrap; }
.cl-list li.yours { color: #1B2A4A; font-weight: 700; padding: 12px 12px; margin: 6px -12px 0; border-radius: 14px; border-top: 0; }
.cl-list li.yours.lit { background: #F1EAFE; }
.cl-list li.yours .route { display: inline-flex; align-items: center; gap: 6px; color: #7C3AED; font-size: 0.7rem; }
.cl-list li.yours .route .ico { width: 14px; height: 14px; }
.cl-list li.yours.ringing .route .ico { animation: routeRing 0.6s ease-in-out 3; }
@keyframes routeRing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.cl-timer { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #EEF1F6; }
.cl-timer b { font-size: 2rem; font-weight: 800; color: #7C3AED; line-height: 1; }
.cl-timer small { font-size: 0.78rem; font-weight: 600; color: #7F8A9E; }

/* ===== INTIMACY: mostly type, one thread joining two days ===== */
.story-section.intimacy-section { padding: 140px 24px 150px; background: #F8F6F0; }
.intimacy-section .story-inner { max-width: 640px; }
/* The thread card: one conversation as the Conversation Center shows it (its own quiet UI
   language: small type, light rules, grey in / blue out, a tag for who answered). */
.thread-card { background: #fff; border-radius: 14px; border: 1px solid #E6EAF2; box-shadow: 0 30px 80px rgba(27,42,74,0.12), 0 4px 16px rgba(27,42,74,0.05); margin: 30px 0 42px; overflow: hidden; font-size: 0.8rem; line-height: 1.45; text-align: left; color: #1B2A4A; }
/* channel filters along the top, like the real panel */
.tc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #EDF0F5; background: #fff; }
.tc-filter.add { background: transparent; color: #2A7CE8; }
.tc-filter .ico.fb { color: #1877F2; }
.tc-filter .ico.wa { color: #25D366; }
.tc-filter { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 600; color: #4B5873; background: #F3F5F9; border-radius: 999px; padding: 4px 10px; }
.tc-filter.on { background: #E4ECFB; color: #1B4FA3; }
.tc-filter .ico { width: 12px; height: 12px; color: #2A7CE8; }
.tc-open { margin-left: auto; flex: 0 0 auto; font-size: 0.66rem; font-weight: 700; color: #16A34A; background: #ECFDF3; border: 1px solid #BBF0CC; border-radius: 999px; padding: 3px 10px; }
.tc-open::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; margin-right: 6px; vertical-align: 1px; }
/* the thread */
.tc-thread { padding: 16px 14px 14px; background: #F3F6FB; display: flex; flex-direction: column; gap: 16px; }
.tc-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 90%; }
.tc-entry.out { align-self: flex-end; align-items: flex-end; max-width: 78%; }
.tc-chip { font-size: 0.62rem; font-weight: 600; color: #6B7790; background: #E6EAF2; border-radius: 6px; padding: 2px 7px; }
.tc-row { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.tc-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid #DCE2EE; color: #1B2A4A; font-weight: 800; font-size: 0.62rem; display: grid; place-items: center; }
.tc-bubble { background: #E5E9F1; color: #1B2A4A; border-radius: 12px 12px 12px 3px; padding: 10px 13px; font-weight: 500; }
.tc-entry.out .tc-bubble { background: #2A7CE8; color: #fff; border-radius: 12px 12px 3px 12px; }
.tc-when { font-size: 0.64rem; font-weight: 500; color: #9AA3B5; padding-left: 36px; }
.tc-entry.out .tc-when { padding-left: 0; }
.tc-qr { display: inline-flex; align-items: center; gap: 6px; font-size: 0.62rem; font-weight: 600; color: #6B7790; background: #fff; border: 1px solid #DCE2EE; border-radius: 6px; padding: 2px 4px 2px 7px; }
.tc-qr .ico { width: 11px; height: 11px; color: #9AA3B5; }
.tc-eric { font-style: normal; font-size: 0.62rem; font-weight: 700; color: #6D3FD1; background: #F1EBFD; border-radius: 5px; padding: 2px 7px; line-height: 1.3; }
/* the call entry: who answered, the player, what was agreed */
.tc-call { flex: 1 1 auto; min-width: 0; background: #fff; border: 1px solid #DCE2EE; border-radius: 12px 12px 12px 3px; padding: 12px 12px 12px; }
.tc-call-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tc-call-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #F1EBFD; display: grid; place-items: center; }
.tc-call-ico .ico { width: 14px; height: 14px; color: #6D3FD1; }
.tc-call-who { display: flex; flex-direction: column; line-height: 1.25; }
.tc-call-who strong { font-size: 0.8rem; font-weight: 700; }
.tc-call-who small { font-size: 0.64rem; color: #7F8A9E; font-weight: 500; }
.tc-call-head .tc-eric { margin-left: auto; }
.story-section .thread-card p.tc-summary { margin: 10px 0 0; font-size: 0.78rem; line-height: 1.5; font-weight: 500; color: #3E4A63; }
.tc-summary b { font-weight: 700; color: #1B2A4A; }
/* the player: the one we'll use. A gradient play disc, the waveform colouring as it plays, the clock */
.tc-player { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, #FBFAFE 0%, #F4F1FC 100%); border: 1px solid #E8E2F7; border-radius: 12px; padding: 10px 12px 10px 10px; }
.tc-play { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; padding: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #A47CF0 0%, #7C3AED 55%, #5B2FB8 100%); box-shadow: 0 8px 18px rgba(124,58,237,0.32), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform 0.2s, box-shadow 0.2s; }
.tc-play:hover { transform: scale(1.06); box-shadow: 0 10px 22px rgba(124,58,237,0.4), inset 0 1px 0 rgba(255,255,255,0.35); }
.tc-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; grid-area: 1 / 1; }
.tc-play .p-pause { display: none; }
.tc-player.playing .p-play { display: none; }
.tc-player.playing .p-pause { display: block; }
.tc-track { flex: 1 1 auto; min-width: 0; height: 36px; position: relative; }
.tc-wave { display: block; width: 100%; height: 36px; overflow: visible; }
.tc-wave .base rect { fill: #C3CBDB; }
.tc-wave .done rect { fill: url(#tcGrad); }
.tc-wave .head { fill: #7C3AED; opacity: 0; }
.tc-time { flex: 0 0 auto; font-size: 0.68rem; font-weight: 600; color: #7F8A9E; font-variant-numeric: tabular-nums; }
.tc-time b { color: #1B2A4A; font-weight: 700; }
.tc-time i { font-style: normal; margin: 0 4px; color: #B8C0CF; }
/* the booking line: green only because the booking landed */
.tc-status { display: flex; align-items: center; gap: 8px; background: #ECFDF3; border: 1px solid #BBF0CC; border-radius: 10px; padding: 9px 12px; font-size: 0.74rem; font-weight: 700; color: #15803D; }
.tc-status .ico { width: 14px; height: 14px; color: #16A34A; stroke-width: 2.4; }
.tc-status small { margin-left: auto; font-size: 0.66rem; font-weight: 600; color: #4D9A68; }
/* the composer beneath */
.tc-compose { padding: 10px 14px 12px; border-top: 1px solid #EDF0F5; background: #fff; }
.tc-compose-top { display: flex; gap: 6px; margin-bottom: 8px; }
.tc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 600; color: #4B5873; background: #fff; border: 1px solid #DCE2EE; border-radius: 999px; padding: 4px 10px; }
.tc-pill .ico { width: 11px; height: 11px; color: #2A7CE8; }
.tc-input { font-size: 0.74rem; color: #A6AFBF; padding: 9px 0 10px; border-bottom: 1px solid #EDF0F5; margin-bottom: 8px; }
.tc-compose-bar { display: flex; align-items: center; gap: 6px; }
.tc-you { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700; color: #1B2A4A; border: 1px solid #DCE2EE; border-radius: 7px; padding: 4px 8px; margin-right: 4px; }
.tc-you svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.tc-cbtn { width: 28px; height: 28px; border: 1px solid #DCE2EE; border-radius: 7px; display: grid; place-items: center; font-size: 0.9rem; color: #7F8A9E; font-weight: 600; }
.tc-cbtn.on { border-color: #2A7CE8; color: #2A7CE8; background: #EEF4FD; }
.tc-cbtn .ico { width: 13px; height: 13px; }
.tc-send { margin-left: auto; font-size: 0.68rem; font-weight: 700; color: #fff; background: #2A7CE8; border-radius: 7px; padding: 6px 14px; }

/* ===== EVIDENCE: Hayden's card inside the navy band ===== */
.mirror-voice { margin: 44px auto 40px !important; text-align: left; }
.mirror-voice .voice-quote { font-size: clamp(1.15rem, 2vw, 1.45rem); }

/* the Eric banner's paragraph after the catch */
.eric-after { font-size: clamp(1rem, 1.5vw, 1.12rem); font-weight: 500; line-height: 1.55; margin: 0 auto 30px; max-width: 46ch; color: #3E4A63; }

/* the close's extra lines */
.close-line.bold { font-weight: 800; letter-spacing: -0.02em; }
.close-line.body { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 500; line-height: 1.6; max-width: 48ch; color: rgba(255,255,255,0.82); }
.close-alt { display: block; width: max-content; margin: 18px auto 0; color: rgba(255,255,255,0.8); font-weight: 700; font-size: 1.02rem; padding: 6px; }
.close-alt:hover { color: #fff; text-decoration: underline; }

@media (max-width: 899px) {
  .story-section.diag-section { padding: 110px 20px 90px; }
  .spine-block { padding: 90px 20px 20px; }
  .story-section .spine-line { font-size: clamp(2rem, 9.5vw, 3rem); max-width: 12ch; }
  .story-section.exhale-section { padding: 100px 20px 120px; }
  .spine-block.wrapped { padding: 110px 20px 40px; }
  .light-rings i:nth-child(1) { width: 260px; height: 260px; } .light-rings i:nth-child(2) { width: 380px; height: 380px; }
  .light-rings i:nth-child(3) { width: 520px; height: 520px; } .light-rings i:nth-child(4) { width: 680px; height: 680px; }
  .story-section.sense-section { padding: 100px 20px 90px; }
  .sense-split { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .call-log { max-width: 440px; }
  .story-section.intimacy-section { padding: 90px 20px 100px; }
  .thread-card { font-size: 0.78rem; margin: 24px 0 36px; }
  .tc-bar { padding: 8px 10px; overflow: hidden; }
  .tc-filter { white-space: nowrap; }
  .tc-bar { padding: 8px 10px; gap: 5px; }
  .tc-thread { padding: 14px 10px 12px; }
  .tc-entry { max-width: 100%; }
  .tc-entry.out { max-width: 88%; }
  .tc-player { gap: 8px; padding: 8px; }
  .tc-play { width: 36px; height: 36px; }
  .tc-status { flex-wrap: wrap; }
  .tc-status small { margin-left: 22px; }
  .tc-compose-top .tc-pill:last-child { display: none; }
  .tc-cbtn:nth-child(4), .tc-cbtn:nth-child(5) { display: none; }
}
.story-anchor.strong.weight-final { margin-top: 72px !important; font-size: clamp(1.9rem, 4.2vw, 2.55rem) !important; white-space: nowrap; }
@media (max-width: 480px) { .story-anchor.strong.weight-final { white-space: normal; } }
.story-inner { max-width: 760px; margin: 0 auto; }
.eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #FF6B2B;
  margin-bottom: 28px;
}
.story-section p {
  font-size: 1.15rem;
  line-height: 1.65;
  color: #1B2A4A;
  margin-bottom: 22px;
}
.story-time {
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 28px !important;
}
.story-lead { font-weight: 500; }
.story-anchor { font-weight: 600; }
.story-anchor.strong {
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  font-weight: 800;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
}
.hook-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #FF6B2B;
  transition: gap 0.2s;
}
.hook-link:hover { gap: 16px; }
.hook-link.light { color: #fff; }

.family-number {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #7C3AED;
  margin-bottom: 10px;
}

/* Section 4: the stat mirror */
.stat-mirror {
  background: #1B2A4A;
  color: #fff;
  padding: 110px 24px;
}
.mirror-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.mirror-number {
  display: block;
  font-size: clamp(4rem, 12vw, 7.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #FF6B2B;
  margin-bottom: 16px;
}
.mirror-number em { font-style: normal; color: rgba(255,255,255,0.35); font-weight: 500; margin: 0 0.05em; }
.mirror-stat p {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  max-width: 24ch;
}
.mirror-anchor {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 16px;
}
.mirror-source {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}

/* Section 6: the owner voice, with the faintest echo of the venue behind it */
.voice-section {
  position: relative;
  background: #F3EDE2;
  padding: 120px 24px;
  text-align: center;
  overflow: hidden;
}
.voice-ghost {
  position: absolute;
  left: 50%; top: 50%;
  width: min(100%, 1100px);
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0.06;
  mix-blend-mode: multiply;
  filter: saturate(0.6);
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
          mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
  pointer-events: none;
}
.voice-section .story-inner { position: relative; z-index: 1; }
@media (max-width: 699px) { .voice-ghost { display: none; } }
.voice-card {
  background: #fff;
  border-radius: 26px;
  padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 52px) clamp(30px, 3.6vw, 44px);
  box-shadow: 0 34px 90px rgba(27,42,74,0.11), 0 6px 18px rgba(27,42,74,0.04);
  text-align: left;
  max-width: 780px;
  margin: 0 auto 36px;
}
.voice-mark {
  display: block;
  font-size: 5.2rem;
  line-height: 0.55;
  height: 44px;
  font-weight: 800;
  color: #FF6B2B;
  margin-bottom: 18px;
}
.voice-quote {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #1B2A4A;
  margin: 0 0 22px;
}
.voice-name {
  font-size: 1rem;
  font-weight: 500;
  color: #5F6B80;
  margin: 0;
}

/* Section 7: the close */
.close-section {
  position: relative;
  background: linear-gradient(180deg, #0F1629 0%, #1B2A4A 100%);
  color: #fff;
  text-align: center;
  padding: 160px 24px;
  overflow: hidden;
}
.close-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.close-rings .portal-ring { opacity: calc(var(--depth) * 0.3); }
.close-copy { position: relative; z-index: 2; }
.clue-pill.dark {
  background: rgba(255,255,255,0.07);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.72);
  opacity: 0.5;
}
.close-section .clue-lines path { opacity: 0.35; }
.btn-hook.door { box-shadow: 0 16px 50px rgba(255,107,43,0.38), 0 0 90px rgba(255,107,43,0.22); }
@media (max-width: 699px) {
  .clue-pill.dark.k3, .clue-pill.dark.k6 { display: none; }
  .clue-pill.dark.k1 { --x: 4% !important;  --y: 6% !important; }
  .clue-pill.dark.k2 { --x: 46% !important; --y: 12% !important; }
  .clue-pill.dark.k4 { --x: 6% !important;  --y: 86% !important; }
  .clue-pill.dark.k5 { --x: 52% !important; --y: 92% !important; }
}
.close-line {
  font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  font-weight: 500;
  line-height: 1.3;
  max-width: 30ch;
  margin: 0 auto 20px;
}
.close-line.strong { font-weight: 800; letter-spacing: -0.02em; margin-bottom: 28px; }
.close-line.last { margin-bottom: 52px; }

/* Crisp entrances: hidden until the script snaps them in */
.snap { will-change: transform, opacity; }

/* ===== RESPONSIVE ===== */
@media (min-width: 640px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .pursuit-compare { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
  .platform-section { padding-left: 48px; padding-right: 48px; }
  .pcard { padding: clamp(18px, 3vh, 32px) clamp(20px, 3.4vh, 36px); border-radius: 24px; }
  .pcard.other { margin-top: clamp(16px, 4.5vh, 40px); }
  .pcard-title { font-size: clamp(0.7rem, 1.1vh, 0.8rem); }
  .pcard-scroll { gap: clamp(8px, 1.3vh, 12px); }
  .pbubble { font-size: clamp(0.86rem, 1.85vh, 1.1rem); padding: clamp(12px, 2.2vh, 22px) clamp(14px, 2.4vh, 24px); }
  .prow { font-size: clamp(0.82rem, 1.7vh, 1rem); padding: clamp(9px, 1.5vh, 14px) clamp(12px, 1.9vh, 18px); }
  .picon { flex-basis: clamp(32px, 4.5vh, 40px); width: clamp(32px, 4.5vh, 40px); height: clamp(32px, 4.5vh, 40px); }
  .pcard-foot { font-size: clamp(0.84rem, 1.6vh, 1rem); }
  .ppills { height: 34px; min-width: 92px; }
  .ppill { padding: 9px 18px; font-size: 0.7rem; }
  .platform-caption { font-size: 0.9rem; margin-top: 16px; }
  .footer-inner { grid-template-columns: repeat(4, 1fr); }
  .mirror-stats { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (min-width: 1000px) {
  .footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}
@media (max-width: 639px) {
  .btn-hook { display: flex; width: 100%; text-align: center; }
  .story-section p { font-size: 1.05rem; }
  .hook-link { display: inline-block; padding: 8px 0; line-height: 1.4; }
  .hook-link span { margin-left: 4px; }
  .anchor-line { font-size: 1.65rem !important; letter-spacing: -0.02em; }
  .hinge-line { font-size: 1.6rem !important; }
}

@media (min-width: 768px) {
  .site-header { padding: 0 40px; height: 72px; }
  .section { padding: 100px 40px; }
  .section-lg { padding: 120px 40px; }
  .intro-section { padding-top: 120px; }
}

@media (min-width: 900px) and (max-width: 1150px) {
  .header-nav { gap: 20px; }
  .nav-link { font-size: 0.84rem; }
}
@media (max-width: 899px) {
  .header-nav { display: none; }
  .header-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: #fff;
    padding: 24px;
    gap: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }
  .header-nav.open .nav-link { color: #1B2A4A; }
  .menu-toggle { display: flex; }
  /* On phones the sub-menu simply sits under its link */
  .header-nav.open { align-items: flex-start; gap: 18px; }
  .header-nav.open .nav-link { font-size: 1rem; }
  .header-nav.open .nav-item { flex-direction: column; align-items: flex-start; width: 100%; height: auto; gap: 12px; }
  .header-nav.open .nav-link.has-sub::after { display: none; }
  .header-nav.open .mega-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    width: 100%;
    padding: 0;
    border: 0; box-shadow: none;
    background: transparent;
  }
  .header-nav.open .mega-intro { display: none; }
  .header-nav.open .mega-inner { display: block; }
  .header-nav.open .mega-links { display: flex; flex-direction: column; gap: 10px; }
  /* Indented plain link: no icon, no description */
  .header-nav.open .mega-card { padding: 0 0 0 20px; border: 0; background: transparent; transform: none; }
  .header-nav.open .mega-icon { display: none; }
  .header-nav.open .mega-text span { display: none; }
  .header-nav.open .mega-text strong { font-size: 0.95rem; font-weight: 600; color: #5F6B80; margin: 0; }
  .header-nav.open .btn-demo { margin-top: 6px; }
}

/* ===== ABOUT PAGE ===== */
.page-hero {
  padding: 140px 24px 80px;
  background: #0B1528;
  color: #fff;
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  margin-bottom: 16px;
}
.page-hero p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.6);
  max-width: 600px;
  margin: 0 auto;
}
.about-content h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #1B2A4A;
  margin-bottom: 20px;
}
.about-content h2 span { color: #FF6100; }
.about-content p {
  font-size: 1rem;
  color: #3a4a6a;
  line-height: 1.7;
  margin-bottom: 16px;
}
.about-content p strong { color: #1B2A4A; }

/* ===== CONTACT PAGE ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.contact-info h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #1B2A4A;
  margin-bottom: 20px;
}
.contact-info p {
  font-size: 1rem;
  color: #3a4a6a;
  line-height: 1.7;
  margin-bottom: 16px;
}
.contact-detail {
  margin-bottom: 24px;
}
.contact-detail h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FF6100;
  margin-bottom: 6px;
}
.contact-detail p {
  margin-bottom: 4px;
}
.contact-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1B2A4A;
  margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #dde1e8;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 20px;
  transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #FF6100;
}
.contact-form textarea { min-height: 120px; resize: vertical; }

@media (min-width: 640px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}