/* =========================================================
 PerspEQtive Coaching: Design Tokens
 Palette: ink navy / soft parchment-grey + a 6-stop
 "perspective spectrum" gradient used ONLY as signature accent
 Type: Fraunces (display) + Work Sans (body) + IBM Plex Mono (utility)
 ========================================================= */

:root {
 /* base */
 --ink: #12172B;
 --ink-soft: #1B2140;
 --paper: #EFEDE6;
 --paper-raise: #E4E1D6;
 --text-dark: #1B2030;
 --text-muted: #5B6072;
 --text-on-dark: #F3F1EA;
 --text-on-dark-muted: #A9ADC4;

 /* spectrum, six stops, indigo through crimson */
 --c1: #4B4E9E;
 --c2: #2C8C82;
 --c3: #6FA85A;
 --c4: #D6A23C;
 --c5: #C1652F;
 --c6: #B23A3A;

 --spectrum: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6));

 /* lighter tints of the same six stops, so the colored "EQ" stays
 readable on the dark navy backgrounds */
 --spectrum-on-dark: linear-gradient(90deg, #8E92E6, #46C2B5, #93D377, #F2C35E, #EE8B52, #E5605F);

 /* warm neutral skin tone, used only for the "human" hand in the ConnEQt handshake */
 --skin: #E3A97A;

 /* type */
 --font-display: 'Fraunces', Georgia, serif;
 --font-body: 'Work Sans', -apple-system, sans-serif;
 --font-mono: 'IBM Plex Mono', monospace;

 /* rhythm */
 --section-pad-y: clamp(64px, 9vw, 128px);
 --content-max: 1120px;
 --radius: 4px;

 --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
 * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
 margin: 0;
 font-family: var(--font-body);
 color: var(--text-dark);
 background: var(--paper);
 -webkit-font-smoothing: antialiased;
 line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection {
 background: var(--c4);
 color: var(--ink);
}

/* Scrollbar reads top-to-bottom through the same six-stop spectrum
 as the rest of the site, the scroll itself becomes the metaphor. */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
 background: linear-gradient(180deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6));
 border-radius: 10px;
 border: 2px solid var(--paper);
}

/* Ambient cursor glow, desktop, fine-pointer only. Positioned and
 colored entirely from JS; hidden by default until first movement. */
.cursor-glow {
 position: fixed;
 top: 0; left: 0;
 width: 340px; height: 340px;
 border-radius: 50%;
 pointer-events: none;
 z-index: 3;
 transform: translate(-50%, -50%);
 background: var(--spectrum);
 background-size: 600% 100%;
 filter: blur(70px);
 opacity: 0;
 mix-blend-mode: soft-light;
 transition: opacity 0.5s ease;
 will-change: transform, opacity, background-position;
}
.cursor-glow.is-active { opacity: 0.35; }
@media (hover: none), (pointer: coarse) {
 .cursor-glow { display: none; }
}

:focus-visible {
 outline: 2px solid var(--c3);
 outline-offset: 3px;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
 font-family: var(--font-mono);
 font-size: 0.72rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--text-on-dark-muted);
 margin: 0 0 18px;
}
.eyebrow-dark { color: var(--text-muted); }

/* Hero eyebrow sits on the light hero background, needs a dark,
 readable color rather than the on-dark-muted default. */
.hero-eyebrow { color: var(--text-dark); }

.section-title {
 font-size: clamp(1.7rem, 3.2vw, 2.6rem);
 font-weight: 500;
 line-height: 1.15;
 color: var(--text-dark);
 margin-bottom: 20px;
 max-width: 18ch;
}
.section-title-light { color: var(--text-on-dark); }

.fill-blank {
 font-family: var(--font-mono);
 font-size: 0.85em;
 color: var(--c5);
 background: rgba(193, 101, 47, 0.08);
 padding: 0 6px;
 border-radius: 3px;
}
.fill-blank-light { color: var(--c4); background: rgba(214, 162, 60, 0.12); }
.fill-blank-block {
 font-family: var(--font-mono);
 font-size: 0.85rem;
 color: var(--text-muted);
 border-left: 2px solid var(--c4);
 padding-left: 14px;
 margin: 20px 0;
}

/* =========================================================
 Signature: scroll progress bar in the perspective spectrum
 ========================================================= */
.progress-track {
 position: fixed;
 top: 0; left: 0; right: 0;
 height: 4px;
 z-index: 200;
 background: #000000; /* solid black so the uncovered track reads as the black ribbon, not transparent */
}
.progress-fill {
 height: 100%;
 width: 0%;
 background: var(--spectrum);
 background-size: 600% 100%;
 transition: width 0.08s linear;
}

/* =========================================================
 Nav
 ========================================================= */
.site-header {
 position: sticky;
 top: 4px;
 z-index: 100;
 background: #000000; /* jet black, matches the logo's own background */
 border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav {
 max-width: var(--content-max);
 margin: 0 auto;
 padding: 10px 24px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
}
.logo {
 display: flex;
 align-items: center;
 flex-shrink: 0;
 /* so the logo's alt text stays readable on the black header if the image fails */
 color: var(--text-on-dark);
}
.logo-img {
 height: 42px;
 width: auto;
 display: block;
 font-family: var(--font-display);
 font-size: 0.9rem;
 line-height: 42px;
}
.nav-links {
 display: flex;
 align-items: center;
 gap: 8px;
}
.nav-link {
 font-size: 0.88rem;
 font-weight: 500;
 color: var(--text-on-dark-muted);
 position: relative;
 padding: 9px 16px;
 border-radius: 999px;
 white-space: nowrap; /* keeps "Meet The Founder" on one line */
 transition: color 0.2s var(--ease);
}
.nav-link:hover { color: var(--text-on-dark); }

/* Active tab: a multicolored outline outside the button, in the logo's spectrum */
.nav-link.active {
 color: var(--text-on-dark);
 position: relative;
 z-index: 0;
}
.nav-link.active::before {
 content: '';
 position: absolute;
 inset: -4px;
 border-radius: 999px;
 padding: 2px;
 background: var(--spectrum);
 background-size: 600% 100%;
 animation: spectrum-shift 8s ease infinite;
 -webkit-mask:
 linear-gradient(#000 0 0) content-box,
 linear-gradient(#000 0 0);
 -webkit-mask-composite: xor;
 mask:
 linear-gradient(#000 0 0) content-box,
 linear-gradient(#000 0 0);
 mask-composite: exclude;
 pointer-events: none;
 z-index: -1;
}

.nav-cta {
 padding: 10px 20px;
 border: 1px solid rgba(255,255,255,0.35);
 border-radius: 999px;
 color: var(--text-on-dark);
}
.nav-cta.active::before { inset: -4px; }

.nav-toggle {
 display: none;
 flex-direction: column;
 justify-content: center;
 gap: 5px;
 width: 40px; height: 40px;
 background: none;
 border: none;
 cursor: pointer;
}
.nav-toggle span {
 display: block;
 height: 2px;
 width: 22px;
 background: var(--text-on-dark);
 transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
 Layout helpers
 ========================================================= */
.section { padding: var(--section-pad-y) 24px; }
.section-inner { max-width: var(--content-max); margin: 0 auto; }
.section-light { background: var(--paper); }
.section-dark { background: var(--ink); }

.reveal {
 opacity: 0;
 transform: translateY(24px);
 transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================
 Hero
 Text column is given more room (1.3fr vs 0.7fr) and the disc
 is pinned to the right edge of its own column, instead of
 floating centered, so it can move rightward without crowding
 the headline, which is why "Emotional Intelligence" was
 wrapping awkwardly before.
 ========================================================= */
.hero {
 min-height: calc(100vh - 65px);
 display: grid;
 grid-template-columns: 1.3fr 0.7fr;
 align-items: center;
 gap: 24px;
 padding: 40px 24px 80px;
 max-width: var(--content-max);
 margin: 0 auto;
}
.hero-inner { max-width: 620px; will-change: transform, opacity; }
.hero-visual { will-change: transform, opacity; }
.hero-inner > * { animation: fade-up 0.9s var(--ease) both; }
.hero-inner .eyebrow { animation-delay: 0.05s; }
.hero-title { animation-delay: 0.18s; }
.hero-sub { animation-delay: 0.32s; }
.hero-actions { animation-delay: 0.46s; }
.hero-visual { animation: fade-up 1s var(--ease) both; animation-delay: 0.4s; }
@keyframes fade-up {
 from { opacity: 0; transform: translateY(18px); }
 to { opacity: 1; transform: translateY(0); }
}
.hero-title {
 font-size: clamp(2.4rem, 5vw, 3.8rem);
 font-weight: 500;
 line-height: 1.08;
 color: var(--text-dark);
 margin-bottom: 26px;
}
.hero-accent {
 font-style: italic;
 font-weight: 500;
 background: var(--spectrum);
 background-size: 600% 100%;
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 animation: spectrum-shift 12s ease infinite;
}
@keyframes spectrum-shift {
 0%, 100% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
}
.hero-sub {
 font-size: 1.08rem;
 color: var(--text-muted);
 max-width: 46ch;
 margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 14px 26px;
 border-radius: 999px;
 font-weight: 500;
 font-size: 0.95rem;
 transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
 border: 1px solid transparent;
 cursor: pointer;
}
.btn-primary {
 background: var(--ink);
 color: var(--text-on-dark);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,23,43,0.25); }
.btn-ghost {
 border-color: rgba(27,32,48,0.25);
 color: var(--text-dark);
}
.btn-ghost:hover { border-color: var(--text-dark); }
.btn-invert {
 background: var(--paper);
 color: var(--ink);
}
.btn-invert:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.btn-large { padding: 16px 32px; font-size: 1rem; margin: 28px 0 36px; }

/* Big ConnEQt CTA, the "schedule a chat" button, styled to lead the section */
.btn-hero-cta {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 18px 36px;
 margin: 6px 0 28px;
 border-radius: 999px;
 font-size: 1.05rem;
 font-weight: 600;
 color: var(--text-on-dark);
 background: var(--spectrum);
 background-size: 600% 100%;
 animation: spectrum-shift 10s ease infinite;
 box-shadow: 0 14px 32px -10px rgba(0,0,0,0.45);
 transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-hero-cta:hover {
 transform: translateY(-3px) scale(1.02);
 box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}

/* Magnetic buttons, desktop only; JS applies the pull, this just
 ensures a smooth spring back when the pointer leaves. */
.magnetic { transition: transform 0.35s var(--ease), box-shadow 0.2s var(--ease); }

/* hero interactive spectrum, Goleman's four pillars of EQ.
 align-items: flex-end pins the disc to the right edge of its
 grid column instead of centering it, moving it rightward. */
.hero-visual { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.spectrum-wrap {
 width: 100%;
 max-width: 380px;
 animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.035); }
}
.spectrum {
 position: relative;
 width: 100%;
 max-width: 380px;
 height: 220px;
 border-radius: 50%;
 background: conic-gradient(from 200deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6), var(--c1));
 filter: saturate(1.2) brightness(1.1);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: transform 0.4s var(--ease), filter 0.3s var(--ease);
 cursor: pointer;
}
.spectrum:hover { filter: saturate(1.35) brightness(1.15); }
.spectrum-hole {
 position: absolute;
 inset: 22%;
 background: var(--paper);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 0 8%;
}
.spectrum-label {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: 1.05rem;
 color: var(--text-dark);
 transition: color 0.25s var(--ease);
}

/* =========================================================
 About. Desktop: all text in one left column, Kar's portrait
 in the right column. The portrait is sticky, so it stays in
 view beside the long text instead of leaving a big empty
 gap. Tablet/phone: single column, portrait on top.
 ========================================================= */
.about-grid {
 display: grid;
 grid-template-columns: 1.25fr 0.75fr;
 gap: 64px;
 align-items: start;
}
.about-photo {
 position: sticky;
 top: 100px; /* clears the sticky black header */
}
.photo-frame {
 aspect-ratio: 2 / 3;
 width: 100%;
 max-width: 380px;
 border-radius: 14px;
 overflow: hidden;
 background: transparent;
 position: relative;
 margin: 0 auto;
}
.photo-frame::after {
 content: '';
 position: absolute;
 inset: -6px;
 border-radius: 20px;
 padding: 6px;
 background: var(--spectrum);
 background-size: 600% 100%;
 -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 -webkit-mask-composite: xor;
 mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 mask-composite: exclude;
 pointer-events: none;
}
.photo-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: top center;
 /* alt text styling, only visible if the image fails to load */
 color: var(--text-muted);
 font-size: 0.9rem;
 line-height: 1.4;
}
.about-copy p { color: var(--text-muted); max-width: 62ch; }

/* The About heading is a full sentence, so it gets a wider measure
 and a slightly smaller size than the short section titles. */
.about-copy .section-title {
 max-width: 28ch;
 font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}
.about-subtitle {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: clamp(1.3rem, 2.2vw, 1.75rem);
 line-height: 1.2;
 color: var(--text-dark);
 margin: 40px 0 16px;
 max-width: 30ch;
}

.signoff {
 margin-top: 32px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 2px;
}
.signoff-gradient {
 font-family: var(--font-display);
 font-style: italic;
 font-weight: 500;
 background: var(--spectrum);
 background-size: 600% 100%;
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 animation: spectrum-shift 12s ease infinite;
}
.signoff-line {
 font-size: 1.05rem;
}
.signoff-name {
 display: flex;
 align-items: center;
 gap: 8px;
}
.signoff-name .signoff-gradient {
 font-size: 1.4rem;
}
.heart-doodle {
 color: #6B6B6B;
 flex-shrink: 0;
 transform: translateY(1px);
}
.heart-doodle path {
 fill: none;
 stroke: currentColor;
 stroke-width: 1.4;
 stroke-linecap: round;
 stroke-linejoin: round;
}
.heart-doodle-overlay {
 opacity: 0.5;
 transform: translate(0.7px, -0.6px) rotate(-2deg);
 transform-origin: center;
}

/* =========================================================
 Services / cards
 ========================================================= */
.cards {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 margin: 40px 0 32px;
 perspective: 1000px;
}
.card {
 background: var(--ink-soft);
 border-radius: var(--radius);
 padding: 32px 26px;
 border-top: 3px solid var(--card-accent, var(--c1));
 transition: transform 0.15s ease-out, box-shadow 0.3s var(--ease);
 transform-style: preserve-3d;
 will-change: transform;
 position: relative;
}
.card:hover {
 transform: translateY(-6px);
 box-shadow: 0 24px 44px -18px rgba(0,0,0,0.5);
}
.card::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.10), transparent 70%);
 opacity: 0;
 transition: opacity 0.3s ease;
 pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card-tag {
 display: inline-block;
 font-family: var(--font-mono);
 font-size: 0.68rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--card-accent);
 margin-bottom: 14px;
}
.card h3 {
 font-size: 1.2rem;
 color: var(--text-on-dark);
 margin-bottom: 12px;
 font-weight: 500;
}
.card p { color: var(--text-on-dark-muted); font-size: 0.94rem; margin: 0; }
.card p + p { margin-top: 12px; }

.services-footnote {
 color: var(--text-on-dark-muted);
 font-size: 0.95rem;
}
.inline-link {
 color: var(--c4);
 font-weight: 500;
 border-bottom: 1px solid transparent;
 transition: border-color 0.2s;
}
.inline-link:hover { border-color: var(--c4); }

/* =========================================================
 Marquee, the four EQ pillars, always in motion
 ========================================================= */
.marquee { position: relative; padding: 22px 0 50px; overflow: hidden; white-space: nowrap; background: var(--paper-raise); border-top: 1px solid rgba(27,32,48,0.08); border-bottom: 1px solid rgba(27,32,48,0.08); }
.marquee-track {
 display: inline-flex;
 align-items: center;
 gap: 20px;
 animation: marquee-scroll 26s linear infinite;
 width: max-content;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
 font-family: var(--font-mono);
 font-size: 0.78rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--pillar-color, var(--text-muted));
 transition: color 0.2s;
}
.marquee-dot { color: var(--text-muted); opacity: 0.5; }
@keyframes marquee-scroll {
 from { transform: translateX(0); }
 to { transform: translateX(-50%); }
}
.marquee-track-ghost {
 position: absolute;
 top: 46px;
 left: 0;
 display: inline-flex;
 align-items: center;
 gap: 20px;
 width: max-content;
 white-space: nowrap;
 opacity: 0.4;
 filter: blur(0.2px);
 animation: marquee-scroll-rev 32s linear infinite;
}
.marquee:hover .marquee-track-ghost { animation-play-state: paused; }
@keyframes marquee-scroll-rev {
 from { transform: translateX(-50%); }
 to { transform: translateX(0); }
}

/* =========================================================
 ConnEQt, intro grid (copy + handshake visual), light theme
 ========================================================= */
.conneqt-intro-grid {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: 48px;
 align-items: center;
}
.conneqt-copy { color: var(--text-muted); max-width: 50ch; margin-bottom: 8px; }
.conneqt-divider {
 height: 1px;
 background: rgba(27,32,48,0.12);
 margin: 48px 0 44px;
}

/* Handshake, a supplied illustration: one hand rendered in the EQ
 spectrum, the other in a natural skin tone. No SVG, no animation. */
.handshake-visual { display: flex; justify-content: center; align-items: center; }
.handshake-img {
 width: clamp(260px, 24vw, 400px);
 height: auto;
 display: block;
 filter: drop-shadow(0 14px 26px rgba(0,0,0,0.18));
 /* alt text styling, only visible if the image fails to load */
 color: var(--text-muted);
 font-size: 0.9rem;
 line-height: 1.4;
 text-align: center;
}

/* =========================================================
 FAQs, custom accordion, smoothly animated with JS-measured height
 ========================================================= */
.faq-list { display: flex; flex-direction: column; margin-top: 8px; }
.faq-item {
 border-top: 1px solid rgba(255,255,255,0.12);
 padding: 6px 0;
}
.faq-list .faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.faq-q {
 width: 100%;
 background: none;
 border: none;
 padding: 14px 0;
 cursor: pointer;
 font-family: var(--font-display);
 font-size: 1.05rem;
 font-weight: 500;
 color: var(--text-on-dark);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 text-align: left;
}
.faq-icon {
 position: relative;
 flex-shrink: 0;
 width: 18px; height: 18px;
}
.faq-icon::before, .faq-icon::after {
 content: '';
 position: absolute;
 top: 50%; left: 50%;
 background: var(--c4);
 transform: translate(-50%, -50%);
 transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.4s var(--ease);
}
.faq-a p {
 color: var(--text-on-dark-muted);
 margin: 0 0 18px;
 max-width: 62ch;
 font-size: 0.95rem;
}
.faq-steps {
 margin: 0 0 18px;
 padding-left: 0;
 list-style: none;
 counter-reset: faq-step;
 display: flex;
 flex-direction: column;
 gap: 12px;
 max-width: 62ch;
}
.faq-steps li {
 counter-increment: faq-step;
 color: var(--text-on-dark-muted);
 font-size: 0.95rem;
 padding-left: 30px;
 position: relative;
}
.faq-steps li::before {
 content: counter(faq-step);
 position: absolute;
 left: 0;
 top: 0.05em;
 width: 20px; height: 20px;
 border-radius: 50%;
 background: var(--c4);
 color: var(--ink);
 font-family: var(--font-mono);
 font-size: 0.68rem;
 font-weight: 600;
 display: flex;
 align-items: center;
 justify-content: center;
}
.faq-steps li strong {
 color: var(--text-on-dark);
 font-weight: 600;
}

/* =========================================================
 Podcast, now shares the ConnEQt section's light background
 ========================================================= */
.podcast-grid {
 display: grid;
 grid-template-columns: 1.2fr 0.8fr;
 gap: 48px;
 align-items: center;
}
.podcast-title {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: clamp(1.4rem, 2.4vw, 1.9rem);
 color: var(--text-dark);
 margin: 0 0 20px;
 max-width: 16ch;
}
.podcast-copy { color: var(--text-muted); max-width: 50ch; margin-bottom: 30px; }
.waveform {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 height: 140px;
 transition: transform 0.3s ease;
}
.waveform span {
 width: 6px;
 border-radius: 3px;
 background: var(--spectrum);
 background-size: 100% 600%;
 animation: wave-boost 0.9s ease-in-out infinite;
 transition: transform 0.9s var(--ease), height 1.3s ease, border-radius 1.3s ease, filter 0.15s ease-out;
}
.waveform span:nth-child(odd) { animation-duration: 0.65s; }
.waveform span:nth-child(1) { height: 30%; }
.waveform span:nth-child(2) { height: 60%; }
.waveform span:nth-child(3) { height: 90%; }
.waveform span:nth-child(4) { height: 45%; }
.waveform span:nth-child(5) { height: 100%; }
.waveform span:nth-child(6) { height: 55%; }
.waveform span:nth-child(7) { height: 80%; }
.waveform span:nth-child(8) { height: 40%; }
.waveform span:nth-child(9) { height: 65%; }
@keyframes wave-boost {
 0%, 100% { transform: scaleY(calc(0.6 * var(--boost, 1))); }
 50% { transform: scaleY(calc(1 * var(--boost, 1))); }
}

/* Podcast frequency lines to heart shape. Each bar stays a plain
 vertical line, only its height and vertical position change,
 computed in JS from the real heart curve (x²+y²-1)³ - x²y³ ≤ 0
 sampled at that bar's x position. */
.waveform.heart-mode {
 animation: heartbeat-pulse 0.7s ease-in-out infinite;
}
.waveform.heart-mode span {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 4px;
 height: var(--hlen, 22px);
 border-radius: 2px;
 margin: 0;
 animation: heart-line-pulse 0.7s ease-in-out infinite;
}
@keyframes heart-line-pulse {
 0%, 100% {
 transform: translate(-50%, -50%) translate(var(--hx, 0px), var(--hy, 0px)) scaleY(0.94);
 }
 50% {
 transform: translate(-50%, -50%) translate(var(--hx, 0px), var(--hy, 0px)) scaleY(1.06);
 }
}
@keyframes heartbeat-pulse {
 0%, 100% { transform: scale(1); }
 25% { transform: scale(1.06); }
 40% { transform: scale(0.98); }
 60% { transform: scale(1.04); }
}

/* =========================================================
 Connect / footer
 ========================================================= */
.connect-links {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 margin: 12px 0 0;
}
.connect-link {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 12px 20px;
 border: 1px solid rgba(27,32,48,0.18);
 border-radius: 999px;
 font-size: 0.9rem;
 font-weight: 500;
 transition: border-color 0.2s, transform 0.2s var(--ease), background 0.2s;
}
.connect-link:hover {
 border-color: transparent;
 background: var(--ink);
 color: var(--text-on-dark);
 transform: translateY(-2px);
}
.footer-signoff {
 font-family: var(--font-display);
 font-style: italic;
 font-size: 1.15rem;
 margin-bottom: 6px;
}
.footer-signoff span { font-weight: 600; }
.footer-fine { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.footer-inner { text-align: center; }
.footer-inner .footer-signoff { margin-bottom: 6px; }

/* Colorful "EQ" painted with the six-stop EQ spectrum. Used in the
 ConnEQt and DirEQt headings (applied by script.js) and the
 RespEQtfully sign-off. On dark sections the lighter tint of the
 same spectrum is used so it stays readable. */
.eq-color {
 display: inline-block;
 background: var(--spectrum);
 background-size: 100% 100%;
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 color: transparent;
 font-weight: inherit;
}
.section-dark .eq-color {
 background: var(--spectrum-on-dark);
 background-size: 100% 100%;
 -webkit-background-clip: text;
 background-clip: text;
}

/* =========================================================
 Terms & Agreements
 ========================================================= */
.terms-copy { color: var(--text-muted); max-width: 56ch; }
.terms-meta {
 font-family: var(--font-mono);
 font-size: 0.78rem;
 color: var(--text-muted);
 margin: 0 0 24px;
}
/* Two download buttons, always side by side */
.terms-actions {
 display: flex;
 flex-wrap: nowrap;
 align-items: stretch;
 gap: 14px;
}
.terms-actions .btn {
 justify-content: center;
 text-align: center;
}

/* =========================================================
 Section title word-reveal, split into words by JS, each
 rises into place on scroll with a short stagger. A thin
 spectrum underline draws in alongside it.
 ========================================================= */
.reveal-word {
 display: inline-block;
 overflow: hidden;
 vertical-align: top;
 padding-bottom: 0.08em;
}
.reveal-word > span {
 display: inline-block;
 transform: translateY(115%);
 transition: transform 0.75s var(--ease);
 transition-delay: calc(var(--i, 0) * 0.05s);
}
.reveal-word.is-visible > span { transform: translateY(0); }

.section-title {
 position: relative;
 padding-bottom: 16px;
}
.section-title::after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 height: 2px;
 width: 0;
 background: var(--spectrum);
 background-size: 600% 100%;
 transition: width 0.9s var(--ease) 0.25s;
}
.section-title.is-visible::after { width: 56px; }

/* =========================================================
 Minimal scroll rail, a quiet spine down the right edge;
 one dot per section, spectrum-lit when it's the one in view.
 Themes to whichever section is active via body.on-dark-section.
 ========================================================= */
.scroll-rail {
 position: fixed;
 left: 24px;
 top: 50%;
 transform: translateY(-50%);
 z-index: 150;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
}
.rail-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: rgba(27, 32, 48, 0.28);
 cursor: pointer;
 pointer-events: auto;
 transition: transform 0.3s var(--ease), background 0.4s ease;
}
body.on-dark-section .rail-dot { background: rgba(243, 241, 234, 0.32); }
.rail-dot.active {
 background: var(--spectrum);
 background-size: 600% 100%;
 animation: spectrum-shift 8s ease infinite;
 transform: scale(1.7);
}
@media (max-width: 1024px) {
 .scroll-rail { display: none; }
}

/* =========================================================
 Media queries
 ========================================================= */
@media (max-width: 1024px) {
 .hero { grid-template-columns: 1fr; text-align: left; padding-top: 60px; }
 .hero-visual { order: -1; margin-bottom: 20px; align-items: center; }
 .spectrum { max-width: 280px; height: 180px; }

 /* About: single column, portrait on top, no sticky */
 .about-grid { grid-template-columns: 1fr; gap: 40px; }
 .about-photo { position: static; order: -1; }
 .photo-frame { max-width: 320px; }

 .cards { grid-template-columns: repeat(2, 1fr); }
 .conneqt-intro-grid { grid-template-columns: 1fr; }
 .handshake-visual { order: -1; margin-bottom: 20px; }
 .podcast-grid { grid-template-columns: 1fr; }
 .podcast-visual { order: -1; }
}

/* Tablets: tighten nav pills so all five links, including the
 longer "Meet The Founder", fit on one row */
@media (min-width: 781px) and (max-width: 920px) {
 .nav-link { padding: 9px 10px; font-size: 0.84rem; }
 .nav-links { gap: 4px; }
}

@media (max-width: 780px) {
 .nav-toggle { display: flex; }
 .nav-links {
 position: fixed;
 top: 63px; left: 0; right: 0;
 background: #000000;
 flex-direction: column;
 align-items: flex-start;
 gap: 0;
 padding: 8px 24px 20px;
 border-bottom: 1px solid rgba(255,255,255,0.1);
 transform: translateY(-8px);
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
 }
 .nav-links.open {
 transform: translateY(0);
 opacity: 1;
 pointer-events: auto;
 }
 .nav-link { padding: 12px 0; width: 100%; }
 .nav-cta { margin-top: 8px; text-align: center; }

 .cards { grid-template-columns: 1fr; }
 .marquee-item { font-size: 0.7rem; }
 .marquee-track { gap: 14px; animation-duration: 18s; }
 .photo-frame { max-width: 280px; }

 /* Terms buttons: share the row equally on tablets/large phones */
 .terms-actions .btn { flex: 1 1 0; min-width: 0; padding: 14px 18px; }
}

@media (max-width: 480px) {
 .section { padding: 56px 18px; }
 .hero { padding: 40px 18px 60px; }
 .hero-title { font-size: 2.1rem; }
 .btn { width: 100%; justify-content: center; }
 .btn-hero-cta { width: 100%; }
 .hero-actions { flex-direction: column; }
 .connect-links { flex-direction: column; }
 .connect-link { width: 100%; justify-content: center; }
 .photo-frame { max-width: 260px; }

 /* Terms buttons stay side by side on phones; labels wrap if needed */
 .terms-actions { gap: 10px; }
 .terms-actions .btn {
 width: auto;
 flex: 1 1 0;
 min-width: 0;
 padding: 12px 10px;
 font-size: 0.82rem;
 line-height: 1.25;
 }
}