/* ─── Transvo Global ───────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

/* ─── Akt (self-hosted, available as secondary) ─────────────────────────────── */
@font-face {
  font-family: 'Akt';
  src: url('/fonts/Akt-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face { font-family: 'Akt'; src: url('/fonts/Akt-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Akt'; src: url('/fonts/Akt-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Akt'; src: url('/fonts/Akt-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Akt'; src: url('/fonts/Akt-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Akt'; src: url('/fonts/Akt-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Akt'; src: url('/fonts/Akt-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Akt'; src: url('/fonts/Akt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Akt'; src: url('/fonts/Akt-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Akt'; src: url('/fonts/Akt-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

/* ─── Color tokens ────────────────────────────────────────────────────────────── */
:root {
  --bg:       #ffffff;
  --surface:  #f5f5f5;
  --ink:      #0c0c0c;
  --muted:    #7a7a7a;
  --border:   rgba(12,12,12,0.08);
  --nav-bg:   #ffffff;
  --nav-bg-scrolled: #ffffff;
}
html[data-theme="dark"] {
  --bg:       #0c0c0c;
  --surface:  #141414;
  --ink:      #ffffff;
  --muted:    #a0a0a0;
  --border:   rgba(255,255,255,0.07);
  --nav-bg:   #0c0c0c;
  --nav-bg-scrolled: #0c0c0c;
}
html[data-theme="dark"] .nav-logo img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* ─── Skip link ──────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -48px; left: 16px;
  background: var(--ink); color: var(--bg);
  padding: 8px 16px; border-radius: 0 0 6px 6px;
  font-size: 14px; font-weight: 300;
  text-decoration: none; z-index: 9999;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ─── Base ────────────────────────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
               'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 300;
  background: var(--bg);
  color: var(--ink);
  animation: tvo-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ─── Compound split CTA (pill + circle arrow) ──────────────────────────────── */
.cta-split {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.cta-split .cta-pill {
  background: var(--ink);
  color: var(--bg);
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 300;
  white-space: nowrap;
  line-height: 1;
  transition: opacity 0.2s ease;
}
.cta-split .cta-circle {
  background: var(--ink);
  color: var(--bg);
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease;
}
.cta-split:hover .cta-pill,
.cta-split:hover .cta-circle { opacity: 0.55; }
.cta-split:hover .cta-circle { transform: translateX(6px); }
.cta-split.cta-lg .cta-pill {
  font-size: clamp(56px, 9vw, 120px);
  padding: 36px 64px;
  letter-spacing: -0.04em;
}
.cta-split.cta-lg .cta-circle {
  width: clamp(110px, 13vw, 160px);
  height: clamp(110px, 13vw, 160px);
  font-size: clamp(36px, 5vw, 60px);
}

@keyframes tvo-in { from { opacity: 0; } to { opacity: 1; } }

/* ─── Accessibility: keyboard focus ─────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Inline square bullet ───────────────────────────────────────────────────── */
.sq {
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--ink);
  vertical-align: middle;
  flex-shrink: 0;
}

/* ─── Hamburger (base — pages override display) ─────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.23,1,0.32,1), opacity 0.35s cubic-bezier(0.23,1,0.32,1);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ─── Nav ────────────────────────────────────────────────────────────────────── */
nav {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 200 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
  padding: 0 44px !important;
  background: var(--nav-bg) !important;
  transition: box-shadow 0.3s ease !important;
}
@media (max-width: 768px) {
  nav { padding: 0 24px !important; }
}
nav.scrolled {
  background: var(--nav-bg-scrolled) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
}

/* ─── Nav structure ─────────────────────────────────────────────────────────── */
.nav-right { display: flex !important; align-items: center !important; gap: 36px !important; }
.nav-links { display: flex !important; align-items: center !important; list-style: none !important; gap: 24px !important; }
.nav-links li { list-style: none !important; }

/* ─── Nav links — editorial text style ──────────────────────────────────────── */
.nav-links a {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  opacity: 0.45 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: opacity 0.15s ease !important;
}
.nav-links a:hover { opacity: 0.7 !important; text-decoration: none !important; }
.nav-links a.nav-active { opacity: 1 !important; font-weight: 400 !important; }

/* ─── Nav CTA ────────────────────────────────────────────────────────────────── */
.nav-cta {
  font-size: 14px !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  color: var(--bg) !important;
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease !important;
}
.nav-cta:hover { opacity: 0.5 !important; }

/* ─── Mobile CTA ─────────────────────────────────────────────────────────────── */
.mobile-cta {
  background: var(--ink) !important;
  color: var(--surface) !important;
  border: none !important;
  border-radius: 999px !important;
  transition: opacity 0.2s ease !important;
}
.mobile-cta:hover { opacity: 0.7 !important; }

/* ─── Theme toggle (Apple-style pill) ────────────────────────────────────────── */
.theme-toggle {
  width: 40px; height: 24px;
  background: rgba(12,12,12,0.14);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.3s ease;
  padding: 0;
}
html[data-theme="dark"] .theme-toggle {
  background: rgba(255,255,255,0.2);
}
.toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
html[data-theme="dark"] .toggle-knob {
  transform: translateX(16px);
  background: #ffffff;
}

/* ─── Scroll reveal ─────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ─── Section labels ─────────────────────────────────────────────────────────── */
.section-label {
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 300 !important;

  text-transform: uppercase !important;
}

/* ─── Ampersand — SF Pro (no serif override) ─────────────────────────────────── */
.amp { font-style: normal; }

/* ─── Filled pill CTAs ───────────────────────────────────────────────────────── */
.submit-btn,
.process-btn,
.hero-enroll,
.inv-cta,
.price-cta,
.modal-download-btn {
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: 1px solid var(--ink) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  display: inline-block !important;
  width: fit-content !important;
  align-self: flex-start !important;
  text-align: left !important;
}
.submit-btn:hover,
.process-btn:hover,
.hero-enroll:hover,
.inv-cta:hover,
.price-cta:hover,
.modal-download-btn:hover {
  opacity: 0.6 !important;
}
.modal-download-btn:disabled { opacity: 0.35 !important; cursor: not-allowed !important; }

/* ─── Active filter state ────────────────────────────────────────────────────── */
.filter-btn.active {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-bottom-color: transparent !important;
}

/* ─── Badges ─────────────────────────────────────────────────────────────────── */
.badge-new, .badge-featured {
  display: inline-block;
  font-size: 14px; font-weight: 300;
 text-transform: uppercase;
  color: var(--surface); background: var(--ink);
  padding: 3px 7px; border-radius: 3px;
  vertical-align: middle; line-height: 1.4;
}

/* ─── Form states ────────────────────────────────────────────────────────────── */
.state-success { color: var(--muted) !important; }
.req { color: var(--ink); }

/* ─── Accordion ─────────────────────────────────────────────────────────────── */
.accordion-panel {
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ─── Footer layout (global) ─────────────────────────────────────────────────── */
footer {
  background: var(--surface) !important;

  transition: background 0.3s ease !important;
  padding: 48px 40px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: stretch !important;
  gap: 16px !important;
}
footer > div {
  background: rgba(12,12,12,0.04) !important;
  border-radius: 16px !important;
  padding: 28px 28px 32px !important;
}
html[data-theme="dark"] footer > div {
  background: rgba(255,255,255,0.04) !important;
}
.footer-bottom {
  background: var(--surface) !important;

  padding: 20px 40px 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.footer-copy {
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--muted) !important;
}
.footer-legal {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
}
.footer-legal a {
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  position: relative !important;
}
.footer-legal a:hover { color: var(--ink) !important; }
.footer-legal a + a::before {
  content: '·' !important;
  position: absolute !important;
  left: -13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--muted) !important;
  pointer-events: none !important;
  text-decoration: none !important;
}
.footer-address {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  margin-top: 10px;
  padding: 0 2px;
}

/* ─── Footer city times ──────────────────────────────────────────────────────── */
.footer-times {
  display: flex;
  gap: 48px;
  padding: 20px 40px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease;
}
.ft-city { display: flex; align-items: baseline; gap: 10px; }
.ft-sep { display: inline-block; width: 3px; height: 3px; background: var(--ink); vertical-align: middle; font-size: 0; align-self: center; }
.ft-label-full, .ft-label-short {
  font-size: 10px; font-weight: 300;
  text-transform: uppercase;
  color: var(--muted);
}
/* Legacy .ft-label support */
.ft-label {
  font-size: 10px; font-weight: 300;
  text-transform: uppercase;
  color: var(--muted);
}
.ft-label-short { display: none; }
.ft-time {
  font-size: 10px; font-weight: 300;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ─── Theme toggle — desktop vs mobile ──────────────────────────────────────── */
.theme-toggle-mobile { display: none !important; }

/* Footer contact sub-labels */
.footer-contact-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: var(--muted) !important;
  margin-top: 14px !important;
  margin-bottom: 4px !important;
}
.footer-contact-label:first-of-type { margin-top: 0 !important; }

/* Footer col label */
.footer-col-label {
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

/* Footer CTA — filled rectangle */
.footer-cta-link {
  display: inline-block !important;
  background: var(--ink) !important;
  color: var(--surface) !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  padding: 13px 24px !important;
  text-decoration: none !important;
  transition: opacity 0.22s ease !important;
}
.footer-cta-link:hover { opacity: 0.6 !important; }

/* Footer link row wrapper */
.footer-links-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 0 !important;
  margin-left: -2px !important;
}

/* Footer link pills */
.footer-link,
.footer-social a {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: var(--ink) !important;
  background: rgba(12,12,12,0.08) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  margin-right: 6px !important;
  margin-bottom: 0 !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}
html[data-theme="dark"] .footer-link,
html[data-theme="dark"] .footer-social a {
  background: rgba(255,255,255,0.1) !important;
}
.footer-link:hover,
.footer-social a:hover {
  background: rgba(12,12,12,0.16) !important;
  color: var(--ink) !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
html[data-theme="dark"] .footer-link:hover,
html[data-theme="dark"] .footer-social a:hover {
  background: rgba(255,255,255,0.18) !important;
}

/* Footer social row */
.footer-social {
  display: block !important;
  margin-top: 0 !important;
  margin-left: -2px !important;
}

/* Single pill direct child of footer column */
footer > div > .footer-link {
  margin-left: -2px !important;
}
.footer-copy, .footer-legal a { color: var(--muted) !important; }
.footer-legal a { text-decoration: none !important; }
.footer-legal a:hover { color: var(--ink) !important; opacity: 1 !important; }

/* ─── Dark mode: page-level overrides ───────────────────────────────────────── */
html[data-theme="dark"] .filter-wrap {
  background: #0c0c0c !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
html[data-theme="dark"] .work-hero {
  background: #0c0c0c !important;
}
html[data-theme="dark"] .work-grid-section {
  background: #0c0c0c !important;
}
html[data-theme="dark"] .grid-thumb {
  background: #1e1e1e !important;
}
html[data-theme="dark"] .ph-light { background: #2a2a2a !important; }
html[data-theme="dark"] .filter-btn {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.5) !important;
}
html[data-theme="dark"] .filter-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .filter-btn.active {
  background: #ffffff !important;
  color: #0c0c0c !important;
}
html[data-theme="dark"] footer > div {
  background: rgba(255,255,255,0.04) !important;
}
html[data-theme="dark"] .footer-times {

}
html[data-theme="dark"] .hamburger span,
html[data-theme="dark"] .nav-hamburger span {
  background: #ffffff !important;
}
html[data-theme="dark"] .mobile-nav {
  background: #0c0c0c !important;
}

/* ─── CTA arrows ─────────────────────────────────────────────────────────────── */
.more-work-text, .enroll-text {
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.more-work-arrow, .enroll-arrow {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ─── Global mobile overrides (≤768px) ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide desktop nav, show hamburger */
  .nav-right { display: none !important; }
  .nav-hamburger { display: flex !important; }

  /* Toggle + hamburger grouped on right side of nav */
  .theme-toggle-mobile { margin-left: auto !important; margin-right: 12px !important; }

  /* Mobile nav pill: fit to text */
  .mobile-cta { display: inline-block !important; align-self: flex-start !important; }

  /* Prevent iOS zoom on form focus */
  input, textarea, select { font-size: max(16px, 1em) !important; }

  /* Footer: single column */
  footer {
    grid-template-columns: 1fr !important;
    padding: 32px 20px !important;
    gap: 16px !important;
  }
  footer > div {
    padding: 24px 20px 28px !important;
    border-radius: 12px !important;
  }
  .footer-bottom {
    padding: 16px 20px 32px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  /* Footer legal links: underline on mobile */
  .footer-legal a { text-decoration: underline !important; }

  /* Timezone strip: single row, no wrap, spaced evenly */
  .footer-times {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 12px 20px !important;
  }
  .footer-times .ft-sep { display: inline-block !important; width: 3px !important; height: 3px !important; background: var(--ink) !important; vertical-align: middle !important; font-size: 0 !important; align-self: center !important; }
  .ft-city { gap: 5px !important; }
  .ft-label-full { display: none !important; }
  .ft-label-short { display: inline !important; font-size: 9px !important; }
  .ft-time { font-size: 9px !important; }

  /* Theme toggle: hide desktop copy, show mobile copy */
  .theme-toggle-desktop { display: none !important; }
  .theme-toggle-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* cta-split.cta-lg: scale down so it doesn't overflow narrow screens */
  .cta-split.cta-lg .cta-pill {
    font-size: clamp(28px, 7vw, 44px) !important;
    padding: 18px 32px !important;
    letter-spacing: -0.03em !important;
  }
  .cta-split.cta-lg .cta-circle {
    width: clamp(52px, 13vw, 68px) !important;
    height: clamp(52px, 13vw, 68px) !important;
    font-size: clamp(20px, 5vw, 28px) !important;
  }
}