/* TD Technologies — base stylesheet.
   Inline styles carry the layout; this file holds only what inline cannot do:
   resets, fonts, focus, interaction states and responsive recomposition. */

:root { color-scheme: dark; }

html {
  /* fixed 74px header would otherwise cover in-page anchor targets */
  scroll-padding-top: 92px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #0C0D10;
  color: #F4F2EE;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: #7FA8FF; text-decoration: none; }
a:hover { color: #A8C4FF; }

:focus-visible { outline: 2px solid #2F6BFF; outline-offset: 3px; border-radius: 4px; }

[hidden] { display: none !important; }

@keyframes tdIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tdFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tdPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ------------------------------------------------------------------- brand
   Official TD Technologies logo. The header pairs the brain mark with the
   letterspaced wordmark so the lockup stays horizontal at every width; the
   footer uses the full stacked lockup where there is vertical room. Both keep
   their native aspect ratio via width:auto. */
.td-logo-mark {
  display: block;
  flex: none;
  width: auto;
  height: 34px;
  max-width: 100%;
}
.td-logo-mark-sm { height: 26px; }

.td-footer-logo {
  display: inline-block;
  margin-bottom: 20px;
  line-height: 0;
}
.td-logo-full {
  display: block;
  width: auto;
  height: 112px;
  max-width: 100%;
}

.td-sheet-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #F4F2EE;
  text-decoration: none;
}
.td-sheet-logo:hover { color: #F4F2EE; }
.td-sheet-logo span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
}

@media (max-width: 1023px) {
  .td-logo-mark { height: 31px; }
  .td-logo-full { height: 100px; }
}

@media (max-width: 600px) {
  .td-logo-mark { height: 28px; }
  .td-logo-full { height: 88px; }
}

@media (max-width: 360px) {
  .td-logo-mark { height: 25px; }
  .td-logo-full { height: 78px; }
}

/* ---------------------------------------------------------------- skip link */
.td-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 14px 20px; border-radius: 0 0 10px 0;
  background: #2F6BFF; color: #FFFFFF;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.td-skip:focus { left: 0; color: #FFFFFF; }

/* -------------------------------------------------------------- interactions
   Inline styles win on specificity, so state rules are marked important. */
.td-navlink:hover { color: #F4F2EE !important; background: rgba(255,255,255,0.05) !important; }
.td-drop:hover { background: rgba(47,107,255,0.12) !important; color: #FFFFFF !important; }
.td-cta:hover { background: #5187FF !important; color: #FFFFFF !important; transform: translateY(-1px); }
.td-cta-dark:hover { background: #2F6BFF !important; color: #FFFFFF !important; transform: translateY(-1px); }
.td-ghost:hover { background: rgba(255,255,255,0.06) !important; color: #F4F2EE !important; }
.td-ghost-dark:hover { background: rgba(16,18,22,0.06) !important; color: #101216 !important; }
.td-foot:hover { color: #F4F2EE !important; }
.td-arrow:hover { color: #A8C4FF !important; }
.td-card:hover { border-color: rgba(47,107,255,0.45) !important; color: #F4F2EE !important; transform: translateY(-3px); }
.td-card-flat:hover { border-color: rgba(47,107,255,0.5) !important; background: #12151B !important; color: #F4F2EE !important; }
.td-cell:hover { background: #14171D !important; color: #F4F2EE !important; }
.td-video:hover { border-color: rgba(47,107,255,0.5) !important; transform: translateY(-2px); }
.td-q:hover { color: #FFFFFF !important; }
.td-chip:hover { background: rgba(255,255,255,0.06) !important; color: #F4F2EE !important; }

.td-cta, .td-cta-dark, .td-card, .td-video { transition: background 160ms ease, border-color 200ms ease, transform 200ms ease; }
.td-navlink, .td-drop, .td-ghost, .td-foot, .td-cell, .td-card-flat { transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }

/* --------------------------------------------------------------- navigation */
.td-nav-desktop { display: flex; }
.td-burger { display: none; }

@media (max-width: 1079px) {
  .td-nav-desktop { display: none; }
  .td-burger { display: flex; }
}

.td-sheet { position: fixed; inset: 0; z-index: 95; background: #0C0D10; overflow-y: auto; -webkit-overflow-scrolling: touch; animation: tdFade 200ms ease both; }

/* ------------------------------------------------------------------ layouts */
.td-wrap { max-width: 1240px; margin: 0 auto; }

/* ------------------------------------------------------------- responsive
   Breakpoints: 1080 (nav switch), 1024 (tablet landscape), 768 (tablet
   portrait), 560 / 430 / 360 (phones). Inline styles carry the layout, so
   overrides here are marked important only where they must win. */

/* Narrowest phones: drop the wordmark rather than let it wrap under the mark */
@media (max-width: 399px) {
  .td-brand-word { display: none !important; }
}

/* Primary actions become full-width stacked rows on phones rather than two
   cramped buttons sharing a line, and clear the 48px touch-target minimum. */
@media (max-width: 560px) {
  .td-cta, .td-cta-dark, .td-ghost, .td-ghost-dark {
    flex: 1 1 100% !important;
    justify-content: center !important;
    min-height: 52px;
    box-sizing: border-box;
  }
}

/* Sticky page content has been removed site-wide (it trapped scrolling on
   mobile). This rule is a safety net: any future position:sticky on page
   content is neutralised at every width. The fixed header, mobile menu
   overlay and modal backdrop are deliberately exempt — they are UI chrome,
   not page sections. */
.td-sticky,
main [style*="position: sticky"],
main [style*="position:sticky"] {
  position: static !important;
  top: auto !important;
}

@media (max-width: 700px) {
  [data-td-span2] { grid-column: auto !important; }
}

@media (max-width: 620px) {
  .td-span2 { grid-column: auto !important; }
}

/* Applied per-component so a wide fixed-width child scrolls inside its own
   box instead of widening the document. Never used globally. */
.td-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -------------------------------------------------------- founder portrait
   Native 3:4 photo in a 4:5 card so it reads as a portrait without stretching.
   object-position keeps the subject in frame when the box crops the sides. */
.td-founder-photo {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  overflow: hidden;
  background: #14161B;
  aspect-ratio: 4 / 5;
  min-height: 380px;
}
.td-founder-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
}

@media (max-width: 700px) {
  .td-founder-photo { aspect-ratio: 3 / 4; min-height: 0; }
}

/* --------------------------------------------------------- founder video
   16:9 is held by aspect-ratio on the frame, so the iframe fills it exactly —
   never stretched, never cropped, and it cannot widen the document. Rounded
   corners are clipped by overflow:hidden to match the site's 20px cards. */
.td-video-frame {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  overflow: hidden;
  background: #101216;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.td-video-embed,
.td-video-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 600px) {
  .td-video-frame { border-radius: 16px; box-shadow: 0 18px 44px rgba(0,0,0,0.4); }
}

/* ------------------------------------------------------- GHL booking embed
   form_embed.js measures the widget and writes an inline height onto the
   iframe. Until it does, min-height reserves a sensible amount of space so
   the section doesn't jump; after it does, the inline height wins and there
   is no inner scrollbar. Heights are per-breakpoint because the GHL calendar
   stacks date-picker above time-slots on narrow screens. */
.td-ghl-embed {
  display: block;
  /* form_embed.js writes inline width/height onto the iframe. Width is forced
     back to the card so the calendar can't overhang and get clipped by the
     card's overflow:hidden. Height is deliberately NOT forced — the script's
     measured height is what avoids an inner scrollbar. */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: 0;
  overflow: hidden;
  min-height: 720px;
  background: #0F1114;
  color-scheme: light;
}

@media (max-width: 1024px) { .td-ghl-embed { min-height: 780px; } }
@media (max-width: 768px)  { .td-ghl-embed { min-height: 900px; } }
@media (max-width: 430px)  { .td-ghl-embed { min-height: 980px; } }

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