/* ============================================================
   Tech2Connect — custom layer (loads after compiled tailwind.css)
   Design: warm editorial paper + deep indigo ink + brand green.
   Motion inspired by amp.framer.media: Lenis smooth scroll,
   line-mask heading reveals, parallax, marquee, sticky narrative.
   Everything decorative is gated on prefers-reduced-motion.
   ============================================================ */

:root {
  --paper: #F4F0E7;
  --ivory: #FBF9F4;
  --sand: #E3DACA;
  --ink: #141B3D;
  --ink-deep: #0C1130;
  --indigo: #2D3A8C;
  --indigo-bright: #3D50C3;
  --green: #6FD472;
  --green-deep: #1E7B24;
  --sky: #A8C4E0;
  --ash: #5C6076;
  --danger: #B3261E;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t: 0.3s var(--ease);
  --nav-h: 78px;
  --tap: 48px;

  --grad-ink: linear-gradient(165deg, #0C1130 0%, #18215A 55%, #2D3A8C 100%);
}

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--green); color: var(--ink); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--green); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Fraunces: warm, slightly wonky editorial serif */
.font-display { font-optical-sizing: auto; font-variation-settings: "SOFT" 20, "WONK" 1; }
.display-italic { font-style: italic; font-variation-settings: "SOFT" 30, "WONK" 1; }

/* ---------- micro-label (all three references use this) ---------- */
.label {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green-deep);
}
.label::before { content: ""; width: 6px; height: 6px; background: var(--green); flex: none; }
.label-light { color: var(--green); }
.label-plain::before { display: none; }

/* hairline rule, Prosa-style */
.rule { height: 1px; background: var(--sand); border: 0; }
.on-dark .rule { background: rgba(255,255,255,.14); }

/* ============================================================
   BUTTONS — pill (Get Blue) with a wipe fill on hover
   ============================================================ */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: var(--tap); padding: 0.78rem 1.7rem;
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 0.98rem;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; isolation: isolate;
  transition: transform var(--t), color var(--t), border-color var(--t), background-color var(--t);
}
.btn > * { position: relative; z-index: 1; }
.btn::after { /* wipe layer */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
.btn:hover::after { transform: scaleX(1); }
.btn:active { transform: scale(0.985); }
.btn-lg { padding: 0.95rem 2.1rem; font-size: 1.04rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .65; cursor: wait; }

.btn-green { background: var(--green); color: var(--ink); }
.btn-green::after { background: var(--ink); }
.btn-green:hover { color: #fff; }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink::after { background: var(--green); }
.btn-ink:hover { color: var(--ink); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline::after { background: var(--ink); }
.btn-outline:hover { color: var(--paper); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn-ghost::after { background: #fff; }
.btn-ghost:hover { color: var(--ink); border-color: #fff; }

.spinner {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%;
}

/* arrow that slides on hover */
.btn .arw { transition: transform 0.4s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* ============================================================
   SURFACES
   ============================================================ */
.surface {
  background: var(--ivory);
  border: 1px solid var(--sand);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.surface-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 70px -30px rgba(20,27,61,.3);
  border-color: rgba(45,58,140,.35);
}

/* numbered / lettered index like editorial refs */
.idx {
  font-family: "IBM Plex Mono", monospace; font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; color: var(--ash);
}

/* ============================================================
   NAV — glass pill that condenses on scroll (Amp)
   ============================================================ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
  transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease),
              border-color .5s var(--ease), height .5s var(--ease);
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  height: 66px;
  background: rgba(12,17,48,.72);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: rgba(255,255,255,.1);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; height: 100%; padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); text-decoration: none; }
.nav-logo { width: 36px; height: 36px; border-radius: 10px; }
.nav-wordmark {
  font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.2rem;
  color: #fff; letter-spacing: -0.01em;
}
.nav-links { display: flex; align-items: center; gap: .1rem; list-style: none; }
.nav-links a:not(.btn) {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 .9rem; color: rgba(255,255,255,.82); text-decoration: none;
  font-size: .9rem; font-weight: 500; transition: color var(--t);
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 13px; height: 1px;
  background: var(--green); transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease);
}
.nav-links a:not(.btn):hover, .nav-links a:not(.btn).active { color: #fff; }
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn).active::after { transform: scaleX(1); }
.nav-cta { margin-left: .7rem; padding: .48rem 1.2rem; min-height: 40px; font-size: .9rem; }

.nav-toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: var(--tap); height: var(--tap); background: none; border: 0; cursor: pointer;
}
.nav-toggle span { width: 24px; height: 2px; background: #fff; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  #nav { background: rgba(12,17,48,.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--ink-deep); max-height: 0; overflow: hidden;
    transition: max-height .5s var(--ease);
  }
  .nav-links.open { max-height: 70vh; }
  .nav-links li { border-top: 1px solid rgba(255,255,255,.08); }
  .nav-links a:not(.btn) { width: 100%; padding: .8rem 26px; font-size: 1rem; }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-cta { margin: 1.1rem 26px 1.4rem; }
}

/* ============================================================
   HERO — cinematic full-bleed (Amp / Get Blue)
   ============================================================ */
#hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; background: var(--grad-ink); color: #fff;
  padding: calc(var(--nav-h) + 60px) 26px 120px;
}
#hero::before { /* fine grid, masked */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 30% 45%, #000 10%, transparent 76%);
  mask-image: radial-gradient(ellipse 75% 65% at 30% 45%, #000 10%, transparent 76%);
}
#hero::after { /* legibility scrim, weighted left like a photo hero */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(8,11,32,.82) 0%, rgba(8,11,32,.5) 46%, rgba(8,11,32,.12) 78%);
}
#hero-fx { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
#hero.fx-on .hero-dots { display: none; }
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; }

.hero-headline {
  font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(3rem, 7.4vw, 6.4rem); line-height: 0.96;
  letter-spacing: -0.03em; margin: 1.1rem 0 0; max-width: 15ch;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 20, "WONK" 1;
}
.hero-headline em {
  font-style: italic; color: var(--green);
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.hero-sub {
  color: #C3CDE6; font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  max-width: 44ch; margin: 1.6rem 0 2.4rem; line-height: 1.65;
}
.hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; }

/* stat rail along the hero bottom */
.hero-rail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
}
.hero-rail-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 26px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.rail-cell {
  padding: 1.15rem .6rem; border-left: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; gap: .1rem;
}
.rail-cell:first-child { border-left: 0; }
.rail-num { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.5rem; color: #fff; line-height: 1.1; }
.rail-label { font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
@media (max-width: 860px) {
  /* below this width the hero copy is tall enough that an absolutely
     positioned rail would sit on top of the CTAs — let it flow instead */
  #hero { display: block; padding-bottom: 0; }
  .hero-inner { padding-top: 2rem; }
  .hero-rail { position: static; margin-top: 3rem; }
  .hero-rail-inner { grid-template-columns: repeat(2, 1fr); padding: 0; }
  .rail-cell { padding: 1.1rem 1rem; }
  .rail-cell:nth-child(3) { border-left: 0; }
  .rail-cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}

.hero-dots { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-dots .dot { position: absolute; border-radius: 50%; filter: blur(9px); opacity: .3; will-change: transform; }
.d1{width:30px;height:30px;background:var(--green);top:18%;left:12%}
.d2{width:18px;height:18px;background:var(--sky);top:28%;left:80%}
.d3{width:40px;height:40px;background:var(--sky);top:64%;left:8%}
.d4{width:14px;height:14px;background:var(--green);top:74%;left:86%}
.d5{width:22px;height:22px;background:var(--green);top:12%;left:58%}
.d6{width:18px;height:18px;background:var(--sky);top:48%;left:90%}
.d7{width:32px;height:32px;background:var(--sky);top:80%;left:34%}
.d8{width:15px;height:15px;background:var(--green);top:38%;left:5%}
.d9{width:20px;height:20px;background:var(--sky);top:8%;left:36%}

/* floating WebGL phone — fills its column in the session section */
.courses-fx {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 45%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 82% at 50% 45%, #000 55%, transparent 100%);
}
.courses-fx canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 1023px) { .courses-fx { position: relative; min-height: 420px; } }

/* ============================================================
   MARQUEE ticker
   ============================================================ */
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; flex: none; gap: 3rem; padding-right: 3rem; align-items: center; }
.marquee-item {
  display: inline-flex; align-items: center; gap: .7rem; flex: none;
  font-family: Fraunces, Georgia, serif; font-size: 1.35rem; color: var(--ink); white-space: nowrap;
}
.marquee-item::after { content: ""; width: 5px; height: 5px; background: var(--green); flex: none; }

/* ============================================================
   COURSE ACCORDION — editorial rows, not cards
   ============================================================ */
.course-row { border-top: 1px solid var(--sand); }
.course-row:last-child { border-bottom: 1px solid var(--sand); }
.course-toggle {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 1.4rem; padding: 1.65rem 0; background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--ink); transition: color var(--t), padding-left var(--t);
}
.course-toggle:hover { color: var(--indigo); padding-left: .5rem; }
.course-title {
  font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem); letter-spacing: -.02em; line-height: 1.15;
}
.course-plus { position: relative; width: 22px; height: 22px; flex: none; }
.course-plus::before, .course-plus::after {
  content: ""; position: absolute; background: currentColor; border-radius: 1px;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.course-plus::before { top: 10px; left: 0; width: 22px; height: 2px; }
.course-plus::after  { left: 10px; top: 0; height: 22px; width: 2px; }
.course-toggle[aria-expanded="true"] .course-plus::after { transform: rotate(90deg); opacity: 0; }
.course-toggle[aria-expanded="true"] .course-plus::before { transform: rotate(180deg); }

.course-detail { display: grid; grid-template-rows: 0fr; opacity: 0; }
.course-row.open .course-detail { grid-template-rows: 1fr; opacity: 1; }
.course-detail-inner { overflow: hidden; }
.course-detail ul { list-style: none; padding: 0 0 1.9rem; margin: 0; max-width: 62ch; }
.course-detail li {
  position: relative; padding-left: 1.5rem; margin-bottom: .5rem;
  color: var(--ash); font-size: 1rem;
}
.course-detail li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--green-deep);
}

/* ============================================================
   PEOPLE — portraits with hover zoom (Amp image treatment)
   ============================================================ */
.portrait {
  position: relative; overflow: hidden; background: var(--sand);
  aspect-ratio: 3 / 4;
}
.portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
  filter: saturate(.92);
}
.person:hover .portrait img { transform: scale(1.055); filter: saturate(1); }
.portrait-tba {
  display: grid; place-items: center; background: transparent;
  border: 1px dashed var(--sand); color: var(--ash);
  font-family: Fraunces, Georgia, serif; font-size: 1.6rem;
}

/* founder monogram — a mark, not a missing photo */
.monogram {
  flex: none; width: 84px; height: 84px; display: grid; place-items: center;
  border: 1px solid var(--sand); background: var(--ivory);
  font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.5rem;
  letter-spacing: .02em; color: var(--indigo);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.monogram:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* ============================================================
   FORMS
   ============================================================ */
.field-label {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: .68rem;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ash); margin-bottom: .55rem;
}
.req { color: var(--danger); }
.t2c-input {
  width: 100%; min-height: var(--tap); font-family: inherit; font-size: 1rem;
  padding: .7rem 0; border: 0; border-bottom: 1px solid var(--sand);
  background: transparent; color: var(--ink);
  transition: border-color var(--t);
}
.t2c-input:focus { outline: none; border-bottom-color: var(--indigo); }
.t2c-input.invalid { border-bottom-color: var(--danger); }
textarea.t2c-input { resize: vertical; }
::placeholder { color: var(--ash); opacity: .55; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error {
  background: #FBEAE8; color: var(--danger); padding: .7rem 1rem;
  font-size: .92rem; font-weight: 500; margin: .4rem 0 1rem;
}

/* ============================================================
   TOASTS
   ============================================================ */
#toast-root {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 300;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 32px); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: .7rem;
  background: var(--ink); color: #fff; border-left: 3px solid var(--green);
  padding: .9rem 1.4rem; box-shadow: 0 24px 54px -20px rgba(12,17,48,.6);
  font-weight: 500; font-size: .95rem; max-width: 460px; cursor: pointer;
}
.toast-error { border-left-color: var(--danger); }
.toast-icon { font-size: 1.05rem; }

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .spinner { animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Every hidden starting state below is scoped to html.js (set by boot.js).
     If JS is off, broken, or the reveal never fires, the flag is absent or
     removed and the content simply renders — it is never hidden by default. */

  /* line-mask reveal: each line sits in an overflow-hidden frame and slides up */
  .lines .line-mask { overflow: hidden; display: block; }
  .js .lines .line-inner {
    display: block; transform: translateY(105%);
    transition: transform 1.05s var(--ease);
    transition-delay: calc(var(--l, 0) * .09s);
  }
  .lines.revealed .line-inner, .hero-in .lines .line-inner { transform: translateY(0); }

  /* generic reveal */
  .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  [data-reveal].revealed { opacity: 1; transform: none; }
  [data-reveal][style*="--i"] { transition-delay: calc(var(--i) * .08s); }

  /* hero supporting content */
  .js .hero-fade { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, .5s); }
  .hero-in .hero-fade { opacity: 1; transform: none; }

  /* clip-reveal for images/blocks */
  .js .clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease); }
  .clip-reveal.revealed { clip-path: inset(0 0 0 0); }

  .hero-dots .dot { animation: drift 22s ease-in-out infinite; }
  .d2{animation-delay:-3s;animation-duration:26s}.d3{animation-delay:-6s;animation-duration:29s}
  .d4{animation-delay:-9s;animation-duration:23s}.d5{animation-delay:-2s;animation-duration:27s}
  .d6{animation-delay:-5s;animation-duration:21s}.d7{animation-delay:-8s;animation-duration:30s}
  .d8{animation-delay:-11s;animation-duration:24s}.d9{animation-delay:-7s;animation-duration:25s}
  @keyframes drift {
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    33%{transform:translate3d(18px,-32px,0) scale(1.09)}
    66%{transform:translate3d(-16px,-18px,0) scale(.93)}
  }

  .marquee-track { animation: slide 34s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes slide { to { transform: translateX(-100%); } }

  .course-detail { transition: grid-template-rows .5s var(--ease), opacity .45s var(--ease); }

  .toast { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .toast.show { opacity: 1; transform: none; }

  .scroll-cue { animation: cue 2.2s ease-in-out infinite; }
  @keyframes cue { 0%,100%{transform:translateY(0);opacity:.85} 50%{transform:translateY(7px);opacity:.4} }
}

/* reduced motion: everything is simply present */
@media (prefers-reduced-motion: reduce) {
  .lines .line-inner, .hero-fade, [data-reveal] { opacity: 1 !important; transform: none !important; }
  .clip-reveal { clip-path: none !important; }
}