@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

/* Tyler Winkler — single stylesheet. Everything is in this one file so
   the site cannot break if a subfolder fails to upload. */

/* ===== tokens/colors.css ===== */
/* Tyler Winkler — color tokens */
:root {
  /* Ground */
  --c-white: #ffffff;
  --c-paper: #f7f8fb;
  --c-paper-2: #eef1f7;

  /* Ink (used for the rail and the DJ section only) */
  --c-ink: #0b0d17;
  --c-ink-2: #151827;
  --c-ink-3: #232741;

  /* Text */
  --c-text: #171a27;
  --c-text-2: #3d4356;
  --c-muted: #626a80;
  --c-on-ink: #ffffff;
  --c-on-ink-muted: #a7aec4;

  /* Lines */
  --c-line: #e3e7f0;
  --c-line-strong: #cdd3e2;
  --c-line-ink: #2a2f4a;

  /* Brand accents — pulled from the Winkz Designs mark */
  --c-accent: #a855f7;
  --c-accent-2: #22d3ee;
  --c-accent-ink: #7c3aed;
  --c-brand-blue: #0fa9e6;

  --c-grad: linear-gradient(135deg, #c084fc 0%, #a855f7 24%, #6366f1 52%, #22d3ee 100%);
  --c-grad-soft: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(34, 211, 238, 0.12) 100%);

  --c-glow: rgba(124, 58, 237, 0.34);
  --c-glow-2: rgba(34, 211, 238, 0.30);

  --c-focus: #22d3ee;
}

/* ===== tokens/typography.css ===== */
/* Tyler Winkler — typography tokens */
:root {
  --f-display: "Oswald", "Helvetica Neue Condensed", "Arial Narrow", "Haettenschweiler", sans-serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Mobile-first scale */
  --fs-hero: 2.5rem;
  --fs-h1: 1.9rem;
  --fs-h2: 1.55rem;
  --fs-h3: 1.15rem;
  --fs-lead: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.06;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  --ls-display: 0.005em;
  --ls-eyebrow: 0.18em;
}

@media (min-width: 768px) {
  :root {
    --fs-hero: 3.6rem;
    --fs-h1: 2.6rem;
    --fs-h2: 2rem;
    --fs-h3: 1.25rem;
    --fs-lead: 1.15rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --fs-hero: 4rem;
    --fs-h1: 3rem;
    --fs-h2: 2.35rem;
  }
}

/* ===== tokens/spacing.css ===== */
/* Tyler Winkler — spacing + layout tokens */
:root {
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 3.5rem;
  --s-9: 4.5rem;
  --s-10: 6rem;

  --gutter: 1.25rem;
  --section-y: 3.25rem;
  --measure: 62ch;
  --content-max: 1080px;

  --rail-w: 280px;
  --topbar-h: 64px;

  --tap: 44px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2.5rem;
    --section-y: 4.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 4rem;
    --section-y: 6rem;
  }
}

/* ===== tokens/elevation.css ===== */
/* Tyler Winkler — elevation tokens */
:root {
  --e-1: 0 1px 2px rgba(16, 20, 40, 0.05);
  --e-2: 0 4px 14px rgba(16, 20, 40, 0.07);
  --e-3: 0 12px 34px rgba(16, 20, 40, 0.1);
  --e-4: 0 24px 60px rgba(16, 20, 40, 0.14);

  --e-cta: 0 12px 30px var(--c-glow), 0 4px 12px var(--c-glow-2);
  --e-cta-hover: 0 18px 44px var(--c-glow), 0 6px 18px var(--c-glow-2);

  --e-ring: 0 0 0 3px rgba(34, 211, 238, 0.45);
}

/* ===== tokens/base.css ===== */
/* Tyler Winkler — base / reset */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip` contains sideways overflow WITHOUT turning the element into a
     scroll container the way `hidden` does. `hidden` here (or on body) breaks
     scroll-position reads and viewport observers. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--c-text);
}

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--c-accent-ink);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button { font: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--e-ring);
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink);
  color: var(--c-on-ink);
  border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== winkler-site.css ===== */
/* ==========================================================================
   Tyler Winkler — layout + components
   Mobile-first. Widen with min-width only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */
.shell { min-height: 100vh; }

.main { display: block; }

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--paper { background: var(--c-paper); }
.section--ink { background: var(--c-ink); color: var(--c-on-ink); }
.section--ink h2,
.section--ink h3 { color: var(--c-on-ink); }

/* --------------------------------------------------------------------------
   2. Top bar (mobile) — logo left, menu button right. No centered middle
      column, so there is no unequal-flank centering problem.
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--topbar-h);
  padding-inline: var(--gutter);
  background: var(--c-ink);
  border-bottom: 1px solid var(--c-line-ink);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  gap: 0.4em;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-on-ink);
}
.topbar__brand:hover { text-decoration: none; }
.topbar__brand .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-grad);
  align-self: center;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: transparent;
  border: 1px solid var(--c-line-ink);
  border-radius: var(--r-pill);
  color: var(--c-on-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-btn__bars {
  position: relative;
  width: 16px; height: 10px;
}
.menu-btn__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: var(--c-on-ink);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.menu-btn__bars span:nth-child(1) { top: 0; }
.menu-btn__bars span:nth-child(2) { top: 4px; }
.menu-btn__bars span:nth-child(3) { top: 8px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   3. Rail — a slide-down panel on mobile, a fixed left column from 1024px.
      With JS off the panel is always open (no toggle attribute is set),
      so every nav link stays reachable.
   -------------------------------------------------------------------------- */
.rail {
  background: var(--c-ink);
  color: var(--c-on-ink);
  padding: var(--s-5) var(--gutter) var(--s-6);
  border-bottom: 1px solid var(--c-line-ink);
}
.js .rail[data-open="false"] { display: none; }

.rail__brand { display: none; }

.rail__nav { margin-bottom: var(--s-5); }

.rail__link {
  display: block;
  padding: var(--s-3) 0;
  min-height: var(--tap);
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: var(--fw-med);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-on-ink);
  border-bottom: 1px solid var(--c-line-ink);
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.rail__link:hover,
.rail__link:focus-visible {
  color: var(--c-accent-2);
  padding-left: var(--s-2);
  text-decoration: none;
}
.rail__link[aria-current="page"] {
  color: transparent;
  background: var(--c-grad);
  -webkit-background-clip: text;
  background-clip: text;
}

.rail__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--c-line-ink);
  border-radius: 50%;
  color: var(--c-on-ink);
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.social svg { width: 18px; height: 18px; fill: currentColor; }
.social:hover {
  border-color: transparent;
  background: var(--c-grad);
  transform: translateY(-2px);
  text-decoration: none;
}

.rail__foot {
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  color: var(--c-on-ink-muted);
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--s-6) var(--s-6);
  background:
    radial-gradient(1000px 460px at 88% -6%, rgba(34, 211, 238, 0.14), transparent 62%),
    radial-gradient(760px 400px at 4% 0%, rgba(168, 85, 247, 0.12), transparent 60%),
    var(--c-white);
  overflow: hidden;
}

.hero__grid { display: grid; gap: var(--s-5); }

/* On a phone the hero reads better centred. Reset to left from 768px up. */
.hero__copy { text-align: center; }
.hero__copy .eyebrow { justify-content: center; }
.hero__lead { margin-inline: auto; }
.hero__copy .btn-row { justify-content: center; }
.hero__copy .reassure { text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-family: var(--f-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 3px;
  border-radius: 2px;
  background: var(--c-grad);
}

.hero__title {
  font-size: var(--fs-hero);
  margin-bottom: var(--s-4);
}
.hero__title .grad {
  background: var(--c-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--c-text-2);
  max-width: var(--measure);
  margin-bottom: var(--s-5);
}

.hero__media {
  position: relative;
  order: -1;
  justify-self: center;
}
.hero__photo {
  width: 100%;
  max-width: 132px;
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: var(--r-lg);
  object-fit: cover;
  object-position: center 22%;
  box-shadow: var(--e-4);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 54px;
  padding: 0 var(--s-6);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { text-decoration: none; }
.btn .arrow { transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--c-grad);
  color: var(--c-white);
  box-shadow: var(--e-cta);
  min-height: 60px;
  padding: 0 var(--s-7);
  font-size: 1.0625rem;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--e-cta-hover);
}

.btn--ghost {
  background: var(--c-white);
  color: var(--c-text);
  border: 1.5px solid var(--c-line-strong);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--c-accent-2);
  box-shadow: var(--e-2);
}

.btn--on-ink {
  background: var(--c-white);
  color: var(--c-ink);
}
.btn--on-ink:hover { transform: translateY(-2px); box-shadow: var(--e-3); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.reassure {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   6. Link stack — the "link in bio" block
   -------------------------------------------------------------------------- */
.linkstack { display: grid; gap: var(--s-3); }

.linkcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 72px;
  padding: var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  color: var(--c-text);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.linkcard:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--e-3);
  text-decoration: none;
}
.linkcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  padding: 1px;
  background: var(--c-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.linkcard:hover::before { opacity: 1; }

.linkcard__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--c-grad-soft);
  color: var(--c-accent-ink);
}
.linkcard__icon svg { width: 20px; height: 20px; fill: currentColor; }

.linkcard__body { flex: 1 1 auto; min-width: 0; }
.linkcard__title {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: 1.3;
}
.linkcard__meta {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.4;
}
.linkcard__go {
  flex: 0 0 auto;
  color: var(--c-muted);
  transition: transform 0.18s ease, color 0.18s ease;
}
.linkcard:hover .linkcard__go {
  transform: translateX(3px);
  color: var(--c-accent-ink);
}

/* --------------------------------------------------------------------------
   7. Section headings
   -------------------------------------------------------------------------- */
.sec-head { margin-bottom: var(--s-6); max-width: var(--measure); text-align: center; margin-inline: auto; }
.sec-head .eyebrow { justify-content: center; }
.sec-head h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.sec-head p { color: var(--c-text-2); font-size: var(--fs-lead); }
.section--ink .sec-head p { color: var(--c-on-ink-muted); }

/* --------------------------------------------------------------------------
   8. Venture cards
   -------------------------------------------------------------------------- */
.ventures { display: grid; gap: var(--s-4); }

.venture {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.venture:hover { transform: translateY(-3px); box-shadow: var(--e-3); }

/* Both marks render at exactly the same height. Fixed box so the two cards
   line up regardless of each logo's aspect ratio. */
.venture__mark {
  display: flex;
  align-items: center;
  height: 64px;
  margin-bottom: var(--s-5);
}
.venture__mark img {
  height: 64px;
  max-height: 64px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
/* The Winkz Designs mark is a solid icon rather than a wordmark, so it reads
   heavier at the same height. It sits smaller to balance. */
.venture__mark--icon img { height: 46px; max-height: 46px; }

.venture__kicker {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--s-2);
}
.venture h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.venture p { color: var(--c-text-2); font-size: var(--fs-sm); }

.venture__list {
  margin-top: var(--s-4);
  display: grid;
  gap: var(--s-2);
}
.venture__list li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.venture__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-grad);
}

.venture__link {
  margin-top: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--c-accent-ink);
}

/* --------------------------------------------------------------------------
   9. Clarity / featured callout
   -------------------------------------------------------------------------- */
.feature {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--s-5);
  text-align: center;
  padding: var(--s-6) var(--s-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 300px at 92% 8%, rgba(34, 211, 238, 0.16), transparent 60%),
    var(--c-ink-2);
  color: var(--c-on-ink);
  border: 1px solid var(--c-line-ink);
}

.feature h2 { color: var(--c-on-ink); font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.feature p { color: var(--c-on-ink-muted); }
.feature .eyebrow { color: var(--c-accent-2); justify-content: center; }
.offer .eyebrow { justify-content: center; }

/* Faint panel behind the Clarity HCM button so it sits on something rather
   than floating on the dark ground. */
/* A real card you can see the Clarity site inside, rather than a button on
   a tinted panel. The whole card is the link. */
.feature__card {
  display: block;
  max-width: 340px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--e-4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
  text-decoration: none;
}
.feature__card-shot {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--c-line);
}
/* White bar so the navy Clarity mark stays clearly visible. */
.feature__card-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--c-white);
}
.feature__card-logo { height: 28px; width: auto; align-self: center; }
.feature__card-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  background: var(--c-grad);
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  box-shadow: 0 8px 20px var(--c-glow);
}
.feature__card:hover .feature__card-go .arrow { transform: translateX(4px); }
.feature__card-go .arrow { transition: transform 0.18s ease; }

.feature__points {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
  text-align: left;
  max-width: 34ch;
  margin-inline: auto;
}
.feature__points li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--c-on-ink);
  font-size: var(--fs-sm);
}
.feature__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-grad);
}
.feature__points li::after {
  content: "";
  position: absolute;
  left: 5px; top: 0.78em;
  width: 8px; height: 4px;
  border-left: 2px solid var(--c-ink-2);
  border-bottom: 2px solid var(--c-ink-2);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   10. Steps — numbered markers FIRST, variable-length labels BELOW, and the
       connector line is anchored to the marker's centre so a two-line label
       can never be sliced by it.
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--s-5); }

.step { position: relative; }

.step__marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: var(--c-grad);
  color: var(--c-white);
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: var(--fw-bold);
  box-shadow: 0 6px 16px var(--c-glow);
  margin-bottom: var(--s-4);
}

.step__body h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.step__body p { color: var(--c-text-2); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   11. Credential strip
   -------------------------------------------------------------------------- */
.creds { display: grid; gap: var(--s-4); }
.cred {
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.cred__num {
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 1;
  background: var(--c-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--s-2);
}
.cred__label { font-weight: var(--fw-bold); margin-bottom: var(--s-1); }
.cred__meta { font-size: var(--fs-sm); color: var(--c-muted); }

/* --------------------------------------------------------------------------
   12. DJ strip
   -------------------------------------------------------------------------- */
.dj { position: relative; overflow: hidden; }
.dj__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: var(--s-6);
}
.dj__logo {
  height: 34px;
  width: auto;
  margin-bottom: var(--s-4);
}

/* --------------------------------------------------------------------------
   12b. Place — Tampa band with the real skyline and the UT credential
   -------------------------------------------------------------------------- */
.place__grid { display: grid; gap: var(--s-6); align-items: center; }

.place__photo { margin: 0; }
.place__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--e-3);
}
.place__caption {
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.place__copy h2 { font-size: var(--fs-h2); margin-bottom: var(--s-4); }
.place__copy p { color: var(--c-text-2); }

.place__cred {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
/* The mark sits on the white ground with its background knocked out — never
   in a white chip. */
.place__cred img {
  flex: 0 0 auto;
  width: 168px;
  height: auto;
}
.place__cred-text {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.45;
}
.place__cred-text strong {
  display: block;
  color: var(--c-text);
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .place__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); }
  .place__grid--nophoto { grid-template-columns: 1fr; max-width: var(--measure); }
  .place__photo img { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------------------
   13. Prose (about / detail pages)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose p { color: var(--c-text-2); font-size: var(--fs-lead); }
.prose h2 { font-size: var(--fs-h2); margin: var(--s-7) 0 var(--s-4); }
.prose h3 { font-size: var(--fs-h3); margin: var(--s-6) 0 var(--s-3); }
.prose ul { margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.prose ul li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--c-text-2);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-grad);
}

.page-head {
  padding-block: var(--s-8) var(--s-6);
  background:
    radial-gradient(760px 360px at 6% 0%, rgba(168, 85, 247, 0.1), transparent 62%),
    var(--c-white);
}
.page-head h1 { font-size: var(--fs-h1); margin-bottom: var(--s-4); }
.page-head p { font-size: var(--fs-lead); color: var(--c-text-2); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); }
.faq__item {
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.faq__item h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }
.faq__item p { color: var(--c-text-2); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   15. Final CTA
   -------------------------------------------------------------------------- */
.cta-final {
  text-align: center;
  padding: var(--s-8) var(--s-5);
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(168, 85, 247, 0.16), transparent 65%),
    var(--c-ink);
  color: var(--c-on-ink);
}
.cta-final h2 { color: var(--c-on-ink); font-size: var(--fs-h2); margin-bottom: var(--s-4); }
.cta-final p { color: var(--c-on-ink-muted); max-width: 46ch; margin-inline: auto; margin-bottom: var(--s-6); }
.cta-final .btn-row { justify-content: center; }
.cta-final .reassure { color: var(--c-on-ink-muted); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--c-ink);
  color: var(--c-on-ink-muted);
  padding-block: var(--s-7);
  border-top: 1px solid var(--c-line-ink);
}
.footer__grid { display: grid; gap: var(--s-6); }
.footer__brand {
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-on-ink);
  margin-bottom: var(--s-3);
}
.footer h4 {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-on-ink);
  margin-bottom: var(--s-3);
}
.footer__links { display: grid; gap: var(--s-1); }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-on-ink-muted);
  font-size: var(--fs-sm);
}
.footer__links a:hover { color: var(--c-accent-2); text-decoration: none; }
.footer__bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-ink);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   17. Scroll reveal — below the fold only. The hero and anything above the
       fold is never given .reveal, so first paint is always complete.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Hard override. Set by the script when the reveal pass is finished or has
   been given up on. It wins over the transition, so content cannot be left
   stranded at opacity 0 — including in a background tab, where transitions
   are frozen and would otherwise never advance. */
.no-reveal .reveal,
.js.no-reveal .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. 404
   -------------------------------------------------------------------------- */
.notfound { padding-block: var(--s-9); text-align: center; }
.notfound__code {
  font-family: var(--f-display);
  font-size: 5rem;
  line-height: 1;
  background: var(--c-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--s-4);
}

/* ==========================================================================
   Wider screens
   ========================================================================== */

@media (min-width: 620px) {
  .linkstack { grid-template-columns: repeat(2, 1fr); }
  .creds { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .hero { padding-block: var(--s-8) var(--s-7); }

  /* back to a left aligned two column hero on real screens */
  .hero__copy { text-align: left; }
  .hero__copy .eyebrow { justify-content: flex-start; }
  .hero__lead { margin-inline: 0; }
  .hero__copy .btn-row { justify-content: flex-start; }
  .hero__copy .reassure { text-align: left; }
  .sec-head { text-align: left; margin-inline: 0; }
  .sec-head .eyebrow { justify-content: flex-start; }
  .feature, .offer { text-align: left; }
  .feature .eyebrow, .offer .eyebrow { justify-content: flex-start; }
  .feature__points, .offer__list { text-align: left; max-width: none; margin-inline: 0; }
  .offer__card, .feature__card { max-width: none; }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-8);
  }
  .hero__media { order: 0; justify-self: end; }
  .hero__photo { width: 240px; max-width: none; }

  .ventures { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }

  /* Connector line sits at the marker's vertical centre (23px = 46/2),
     behind the markers, and stops inside the row. */
  .steps { position: relative; }
  .steps::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.35), rgba(34, 211, 238, 0.35));
    z-index: 0;
  }
  .step { z-index: 1; }
  .step__marker { margin-inline: auto; }
  .step__body { text-align: center; }

  .feature { grid-template-columns: 1.1fr 0.9fr; align-items: center; padding: var(--s-8) var(--s-7); }


  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }

  .dj__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
  .dj__photo { margin-bottom: 0; aspect-ratio: 3 / 4; }

  .creds { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .shell { padding-left: var(--rail-w); }

  .topbar { display: none; }

  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--rail-w);
    display: flex;
    flex-direction: column;
    padding: var(--s-7) var(--s-6);
    border-bottom: 0;
    border-right: 1px solid var(--c-line-ink);
    overflow-y: auto;
    z-index: 50;
  }
  .js .rail[data-open="false"] { display: flex; }

  .rail__brand {
    display: block;
    margin-bottom: var(--s-8);
  }
  .rail__brand a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    gap: 0.4em;
    font-family: var(--f-display);
    font-size: 1.35rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--c-on-ink);
  }
  .rail__brand a:hover { text-decoration: none; }
  .rail__brand .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-grad);
    align-self: center;
  }
  .rail__brand .rail__role {
    display: block;
    margin-top: var(--s-3);
    font-family: var(--f-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--c-on-ink-muted);
    line-height: 1.5;
  }

  .rail__nav { margin-bottom: auto; }
  .rail__link { font-size: 1.05rem; }

  .rail__socials { margin-top: var(--s-6); }

  .linkstack { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .hero__photo { width: 300px; max-width: none; }
}

/* --------------------------------------------------------------------------
   19. Contact form (contact page only)
   -------------------------------------------------------------------------- */
.form {
  max-width: 680px;
  padding: var(--s-6) var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
}

.form__grid { display: grid; gap: 0; }

.form__row { margin: 0 0 var(--s-5); }

.form__label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.form__input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--c-text);
  background: var(--c-white);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form__input:hover { border-color: var(--c-muted); }
.form__input:focus {
  outline: none;
  border-color: var(--c-accent-2);
  box-shadow: var(--e-ring);
}

.form__select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-muted) 50%),
    linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-8);
}

.form__textarea { min-height: 150px; resize: vertical; line-height: var(--lh-body); }

/* Honeypot. Real people never see it; bots fill it and get rejected. */
.form__hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.form__actions { margin-top: var(--s-6); }
.form__actions .btn { width: 100%; }
.form__actions .reassure { margin-top: var(--s-4); }

@media (min-width: 620px) {
  .form { padding: var(--s-7) var(--s-6); }
  .form__grid { grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
  .form__actions { display: flex; align-items: center; gap: var(--s-5); }
  .form__actions .btn { width: auto; flex: 0 0 auto; }
  .form__actions .reassure { margin-top: 0; flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   20. Living gradient
   The brand gradient drifts slowly across the headline and the primary
   buttons. Slow enough to read as depth rather than movement, and switched
   off entirely for anyone who asks for reduced motion.
   -------------------------------------------------------------------------- */
@keyframes grad-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero__title .grad,
.btn--primary,
.feature__card-go {
  background-size: 165% 165%;
  animation: grad-drift 9s ease-in-out infinite;
  will-change: background-position;
}

/* The gradient text needs the clip re-stated alongside the larger size. */
.hero__title .grad {
  -webkit-background-clip: text;
  background-clip: text;
}

@media (prefers-reduced-motion: reduce) {
  .hero__title .grad,
  .btn--primary,
  .feature__card-go {
    animation: none;
    background-size: 100% 100%;
  }
}

/* --------------------------------------------------------------------------
   21. Free program offer band
   -------------------------------------------------------------------------- */
.offer {
  display: grid;
  gap: var(--s-5);
  text-align: center;
  padding: var(--s-6) var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
  position: relative;
  overflow: hidden;
}
/* Gradient edge so it reads as the offer, not another content card. */
.offer::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--c-grad);
}

.offer h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.offer > .offer__copy > p { color: var(--c-text-2); max-width: var(--measure); }

.offer__list {
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-3);
  text-align: left;
  max-width: 34ch;
  margin-inline: auto;
}
.offer__list li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.offer__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-grad);
}
.offer__list li::after {
  content: "";
  position: absolute;
  left: 5px; top: 0.68em;
  width: 8px; height: 4px;
  border-left: 2px solid var(--c-white);
  border-bottom: 2px solid var(--c-white);
  transform: rotate(-45deg);
}

.offer__action .btn { width: 100%; }

@media (min-width: 768px) {
  .offer {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--s-8);
    padding: var(--s-8) var(--s-7) var(--s-8) var(--s-8);
  }
  .offer__action .btn { width: auto; white-space: nowrap; padding-inline: var(--s-5); }
  .offer__action { text-align: center; }
}

/* --------------------------------------------------------------------------
   22. Offer card. Same idea as the Clarity card: you can see the thing, and
       the whole card is the link.
   -------------------------------------------------------------------------- */
.offer__card {
  display: block;
  max-width: 340px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #0a0a0a;
  border: 1px solid var(--c-line);
  box-shadow: var(--e-3);
  margin-bottom: var(--s-5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.offer__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--e-4);
  text-decoration: none;
}
.offer__card-shot { display: block; width: 100%; height: auto; }

.offer__card-bar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
}
.offer__card-stat { display: block; text-align: center; }
.offer__card-stat strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.6rem;
  line-height: 1;
  background: var(--c-grad);
  background-size: 165% 165%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-drift 9s ease-in-out infinite;
}
.offer__card-stat small {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.offer__card-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-grad);
  background-size: 165% 165%;
  animation: grad-drift 9s ease-in-out infinite;
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  box-shadow: 0 8px 20px var(--c-glow);
}
.offer__card:hover .offer__card-go .arrow { transform: translateX(4px); }
.offer__card-go .arrow { transition: transform 0.18s ease; }

@media (prefers-reduced-motion: reduce) {
  .offer__card-stat strong,
  .offer__card-go { animation: none; background-size: 100% 100%; }
}

/* Disclaimer under the offer card. Small and quiet, but sitting with the
   figure it qualifies rather than buried at the foot of the page. */
.proof__disclaimer {
  margin-top: var(--s-4);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-muted);
  text-align: center;
}

/* Keep the card button on one line. */
.offer__card-go { white-space: nowrap; padding-inline: var(--s-3); }

/* Confirmation shown in place of the form once it sends. */
.form__sent {
  margin: 0;
  padding: var(--s-5) var(--s-4);
  text-align: center;
  font-size: var(--fs-lead);
  color: var(--c-text-2);
}
.form__sent strong { color: var(--c-text); }