/* Shared Ontitled marketing nav — used on all public/*.html pages */

@font-face {
  font-family: "GT Standard";
  src: url("/fonts/gt-standard-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Standard";
  src: url("/fonts/gt-standard-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ot-bg: #fbfaf6;
  --ot-ink: #2b2b29;
  --ot-ink-muted: rgba(43, 43, 41, 0.62);
  --ot-ink-soft: #494444;
  --ot-line: rgba(43, 43, 41, 0.1);
  --ot-sans: "GT Standard", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* Wordmark: intentional serif contrast vs sans nav links */
  --ot-logo: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/*
  Kill Framer site chrome ASAP so the ribbon never doubles behind ot-nav.
  NEVER match bare "Header" / "Banner" — content blocks use those names.
  Avoid left:-9999px (can expand scroll width).
*/
html, body {
  overflow-x: clip;
}
[data-framer-name="Top Nav"],
[data-framer-name="Logo Banner"],
a[data-framer-name="Logo Banner"],
[data-framer-name="Nav"],
[data-framer-name="Navigation"],
[data-framer-name="Navbar"],
[data-framer-name="Desktop Nav"],
[data-framer-name="Mobile Nav"],
[data-framer-name="Site Header"],
[data-framer-name="Logo Ribbon"],
.framer-hw1M8,
.ot-hide-framer-nav,
.nav-legacy,
a.nav-ribbon.nav-legacy,
header.nav.nav-legacy {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  z-index: -1 !important;
}

/*
 * Home splash: Ontitled-owned overlay (not Framer Pre_Loader).
 * Framer's export is stuck on D-01 (missing clean handoff) and injecting into
 * its tree causes React hydration mismatches that freeze appear animations.
 */
#ot-splash {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbfaf6;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.65s linear,
    filter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter;
}
#ot-splash .ot-splash-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
#ot-splash .ot-splash-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ot-splash .ot-splash-mark svg {
  display: block;
  width: 38px;
  height: 38px;
}
#ot-splash .ot-splash-word {
  font-family: "GT Standard L Medium", "GT Standard", var(--ot-sans);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -0.045em;
  line-height: 1;
  color: #2b2b29;
  white-space: nowrap;
}

/* Hide broken Framer preloader completely — we own the splash now */
#hero [data-framer-name="Pre_Loader"],
#hero .framer-ghci25-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Hide nav while our splash is up */
body.ot-splash-active:not(.ot-preloader-exiting):not(.ot-preloader-done) .ot-nav,
body.ot-splash-active:not(.ot-preloader-exiting):not(.ot-preloader-done) .ot-nav-ribbon {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Nav fades in with the hero (not a hard pop) */
.ot-nav,
.ot-nav-ribbon {
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.55s linear;
}

body.ot-preloader-exiting #ot-splash {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: blur(6px);
}

body.ot-preloader-done #ot-splash {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hero content eases in after splash (less monotone hard cut) */
#hero [data-framer-name="Content"] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
  will-change: opacity, transform;
}

body.ot-hero-in #hero [data-framer-name="Content"],
body.ot-preloader-done #hero [data-framer-name="Content"] {
  opacity: 1;
  transform: none;
}

/*
 * Framer appear often sticks at opacity:0.001 after hydration mismatches.
 * Force-reveal hero appear nodes once splash is done (inline !important needed).
 */
body.ot-hero-in #hero [data-framer-appear-id],
body.ot-preloader-done #hero [data-framer-appear-id] {
  opacity: 1 !important;
  transform: none !important;
}

/* Prefer reduced motion: skip the flourish */
@media (prefers-reduced-motion: reduce) {
  #ot-splash,
  #hero [data-framer-name="Content"],
  .ot-nav,
  .ot-nav-ribbon {
    transition: none !important;
    filter: none !important;
  }
  #hero [data-framer-name="Content"],
  #hero [data-framer-appear-id] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* No hero / decorative background videos — static paper + texture only */
#hero video,
[data-framer-name="HERO BKG Image"] video,
[data-framer-name="Image Scramble"] video,
[data-framer-name="BKG"] video,
body.ot-no-bg-video video[src*="xXF7zMolOXHM52BTEfXsZnKa0Fw"],
body.ot-no-bg-video video[src*="hmg5dFU33RwVgzS4V0wrSxuKJ3E"],
body.ot-no-bg-video video[src*="MLWPbW1dUQawJLhhun3dBwpgJak"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/*
 * Paper grain — match Framer export (subtle).
 * Do NOT use soft-light / high opacity: that reads as TV static.
 * Original: container 0.1, tile 0.5. Nudge only slightly for presence.
 */
[data-framer-name="Texture (Z=10)"] .framer-1kb2pfb-container {
  opacity: 0.12 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
[data-framer-name="Texture (Z=10)"] .framer-1kb2pfb-container > div {
  opacity: 0.5 !important;
  filter: none !important;
}

@media (max-width: 809.98px) {
  .ot-logo {
    font-size: 26px !important;
  }
  .ot-nav-shell {
    padding-left: 56px !important;
    padding-right: 16px !important;
  }
  .ot-nav-ribbon {
    left: 12px !important;
    width: 40px !important;
    height: 84px !important;
  }
  .ot-nav-ribbon svg {
    width: 40px !important;
    height: 84px !important;
  }
}

/* Ribbon */
.ot-nav-ribbon {
  position: fixed;
  top: 0;
  left: 48px;
  z-index: 10050;
  display: block;
  width: 64px;
  height: 132px;
  text-decoration: none;
  pointer-events: auto;
  opacity: 0;
}
.ot-nav-show .ot-nav-ribbon {
  animation: ot-ribbon-in 0.4s ease-out both;
}
@keyframes ot-ribbon-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ot-nav-ribbon svg {
  display: block;
  width: 64px;
  height: 132px;
}

/* Bar */
.ot-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10040;
  padding-top: env(safe-area-inset-top, 0);
  pointer-events: none;
  font-family: var(--ot-sans);
  -webkit-font-smoothing: antialiased;
  opacity: 0;
}
.ot-nav-show .ot-nav {
  animation: ot-nav-in 0.4s ease-out both;
}
@keyframes ot-nav-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ot-nav *,
.ot-nav-ribbon * {
  box-sizing: border-box;
}
.ot-nav a {
  color: inherit;
  text-decoration: none;
}
.ot-nav > * {
  pointer-events: auto;
}

.ot-nav-shell {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 72px;
  padding: 8px 48px 0 140px;
  display: flex;
  align-items: center;
}
.ot-nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ot-nav-left {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.ot-logo {
  font-family: var(--ot-logo);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.03em;
  color: var(--ot-ink);
  white-space: nowrap;
  line-height: 1;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  /* Distinct from 14.5px sans nav links */
  font-feature-settings: "liga" 1, "kern" 1;
}
.ot-logo:hover {
  opacity: 0.55;
}

.ot-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ot-nav-links a {
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ot-ink);
  transition: opacity 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding: 8px 4px;
  min-height: 44px;
  opacity: 0.92;
}
.ot-nav-links a:hover {
  opacity: 0.55;
}
.ot-nav-links a[aria-current="page"] {
  opacity: 1;
  font-weight: 500;
}

.ot-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ot-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ot-ink);
  color: var(--ot-bg) !important;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ot-nav-cta:hover {
  background: var(--ot-ink-soft);
  transform: translateY(-1px);
}

.ot-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--ot-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.ot-nav-toggle:hover {
  background: rgba(43, 43, 41, 0.05);
}
.ot-nav-toggle svg {
  width: 20px;
  height: 20px;
}

.ot-nav-drawer {
  display: none;
  position: fixed;
  top: calc(56px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  z-index: 10045;
  background: var(--ot-bg);
  border: 1px solid var(--ot-line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 16px 36px rgba(43, 43, 41, 0.12);
  pointer-events: auto;
}
.ot-nav-drawer.is-open {
  display: block;
}
.ot-nav-drawer .ot-nav-cta {
  width: 100%;
  margin-bottom: 10px;
  height: 42px;
}
.ot-nav-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ot-nav-drawer-list a {
  display: block;
  padding: 11px 10px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--ot-ink);
}
.ot-nav-drawer-list a:hover {
  background: rgba(43, 43, 41, 0.04);
}
.ot-nav-drawer-list a[aria-current="page"] {
  font-weight: 500;
}

@media (min-width: 1600px) {
  .ot-nav-shell {
    height: 80px;
    padding: 10px 64px 0 140px;
  }
  .ot-nav-ribbon {
    left: 56px;
    width: 70px;
    height: 144px;
  }
  .ot-nav-ribbon svg {
    width: 70px;
    height: 144px;
  }
  .ot-nav-left,
  .ot-nav-links {
    gap: 26px;
  }
  .ot-nav-links a {
    font-size: 15px;
  }
  .ot-logo {
    font-size: 40px;
  }
  .ot-nav-cta {
    height: 42px;
    padding: 0 20px;
    font-size: 14px;
  }
}

@media (max-width: 1200px) {
  .ot-nav-shell {
    height: 68px;
    padding: 6px 36px 0 100px;
  }
  .ot-nav-ribbon {
    left: 32px;
    width: 56px;
    height: 116px;
  }
  .ot-nav-ribbon svg {
    width: 56px;
    height: 116px;
  }
  .ot-nav-left,
  .ot-nav-links {
    gap: 18px;
  }
  .ot-nav-links a {
    font-size: 14px;
  }
  .ot-logo {
    font-size: 32px;
  }
}

@media (max-width: 900px) {
  .ot-nav-shell {
    height: 60px;
    padding: 4px 20px 0 72px;
  }
  .ot-nav-ribbon {
    left: 16px;
    width: 48px;
    height: 100px;
  }
  .ot-nav-ribbon svg {
    width: 48px;
    height: 100px;
  }
  .ot-nav-cta {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }
}

@media (max-width: 810px) {
  .ot-nav-shell {
    height: 56px;
    padding: 4px 16px 0 64px;
  }
  .ot-nav-links-desktop {
    display: none;
  }
  .ot-nav-cta-desktop {
    display: none;
  }
  .ot-nav-toggle {
    display: inline-flex;
  }
  .ot-nav-ribbon {
    left: 12px;
    width: 42px;
    height: 88px;
  }
  .ot-nav-ribbon svg {
    width: 42px;
    height: 88px;
  }
}

/* ================================================================
   Hero centering — handled in home.html inline (<style id="ot-hero-center">)
   Keeping this block empty so prior rules don't fight the inline ones.
   ================================================================ */

/* Safety nets — guard against Framer hydration stalls so content is never
   silently invisible, and the 1920px Building canvas never blows layout if
   the rescale script hasn't run yet. */
.framer-fp1rch-container {
  overflow-x: clip;
  max-width: 100vw;
}

/* Reveal any appear node + the Symbol & Images gallery once splash is done,
   even outside #hero (page-wide appear nodes use this body class). */
body.ot-preloader-done [data-framer-appear-id],
body.ot-hero-in [data-framer-appear-id] {
  opacity: 1 !important;
  transform: none !important;
}
body.ot-preloader-done [data-framer-name="Symbol & Images"],
body.ot-hero-in [data-framer-name="Symbol & Images"] {
  opacity: 1 !important;
  transform: none !important;
}