/* ==========================================================================
   DESIGN TOKENS — SINGLE SOURCE OF TRUTH (css/tokens.css)
   Consolidated from typography.css, main.css, components.css, glassmorphism.css,
   pages.css, hero-3d.css, scherre-scroll.css, project-modal.css, responsive.css,
   and inline #hero-tv-manual-controls.
   ========================================================================== */

:root {
  /* --- Typography & Preset Tokens --- */
  --f3-footer-signature-margin-top: 105px;
  --f3-footer-signature-margin-bottom: clamp(24px, 4vh, 48px);
  --f3-footer-signature-offset-y: -4px;
  --pm-context-box-width: 300px;
  --project-box-width: var(--pm-context-box-width);
  --pm-indicator-right: 25px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.15, 1);
  --transition-cover-speed: 0.90s;
  --transition-reveal-speed: 0.95s;
  --transition-blur: 16px;
  --transition-slide: 5px;
  --transition-cover-ease: cubic-bezier(0.65, 0, 0.15, 1);
  --transition-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'AT Aero', 'At Aero', 'AtAero', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-nav: 'AT Aero', 'At Aero', 'AtAero', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-sans: 'AT Aero', 'At Aero', 'AtAero', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-retina: 'AT Aero Retina', 'At Aero Retina', 'AtAero-Retina', 'AT Aero', 'At Aero', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-serif-italic: 'Playfair Display', Georgia, serif;
  --font-mono: 'PP Supply Mono', 'PPSupplyMono-Regular', 'Sometype Mono', 'Share Tech Mono', Menlo, Monaco, Consolas, monospace;
  --mono-font-size: 11.5px;
  --mono-font-weight: 400;
  --mono-letter-spacing: 0px;
  --hero-margin: 25px;
  --nav-font-size: 14px;
  --nav-font-weight: 500;
  --nav-line-height: 16px;
  --nav-letter-spacing: -0.8px;
  --nav-item-gap: 56px;
  --nav-padding-y: 13px;
  --nav-padding-x: 25px;
  --clock-font-size: 12.5px;
  --clock-font-weight: 400;
  --clock-letter-spacing: -0.035em;
  --clock-dot-size: 5.5px;
  --clock-dot-color: #00ff66;
  --cursor-size: 16px;
  --type-aero-a-font: var(--font-retina, 'AT Aero Retina', 'AT Aero', sans-serif);
  --type-aero-a-weight: 350;
  --type-aero-a-size: 32px;
  --type-aero-a-line: 37px;
  --type-aero-a-spacing: -1.5px;
  --type-aero-a-mobile-size: 30px;
  --type-aero-a-mobile-line: 36px;
  --type-aero-a-mobile-spacing: -1px;
  --type-aero-b-font: var(--font-primary, 'AT Aero', sans-serif);
  --type-aero-b-weight: 400;
  --type-aero-b-size: 30px;
  --type-aero-b-line: 38px;
  --type-aero-b-spacing: -1px;
  --type-aero-b-mobile-size: 24px;
  --type-aero-b-mobile-line: 28px;
  --type-aero-b-mobile-spacing: -0.8px;
  --type-aero-c-font: var(--font-primary, 'AT Aero', sans-serif);
  --type-aero-c-weight: 400;
  --type-aero-c-size: 20px;
  --type-aero-c-line: 30px;
  --type-aero-c-spacing: -0.8px;
  --type-aero-c-mobile-size: 16px;
  --type-aero-c-mobile-line: 22px;
  --type-aero-c-mobile-spacing: -0.55px;
  --type-aero-d-font: var(--font-primary, 'AT Aero', sans-serif);
  --type-aero-d-weight: 500;
  --type-aero-d-size: 95px;
  --type-aero-d-line: 120px;
  --type-aero-d-spacing: -5px;
  --type-aero-d-mobile-size: 184px;
  --type-aero-d-mobile-line: 184px;
  --type-aero-d-mobile-spacing: -13.6px;
  --type-aero-e-font: var(--font-retina, 'AT Aero Retina', 'AT Aero', sans-serif);
  --type-aero-e-weight: 350;
  --type-aero-e-size: 14.5px;
  --type-aero-e-line: 20px;
  --type-aero-e-spacing: -0.1px;
  --type-aero-e-mobile-size: 11.6px;
  --type-aero-e-mobile-line: 16px;
  --type-aero-f-font: var(--font-primary, 'AT Aero', sans-serif);
  --type-aero-f-weight: 400;
  --type-aero-f-size: 16px;
  --type-aero-f-line: 22px;
  --type-aero-f-spacing: -0.15px;
  --type-aero-f-mobile-size: 12.8px;
  --type-aero-f-mobile-line: 17.6px;
  --type-mono-a-font: var(--font-mono, 'PP Supply Mono', monospace);
  --type-mono-a-weight: 400;
  --type-mono-a-size: 11.5px;
  --type-mono-a-line: 13px;
  --type-mono-a-spacing: 0px;
  --type-mono-a-mobile-size: 9.35px;
  --type-mono-a-mobile-line: 11.05px;
  --type-mono-a-mobile-spacing: 0.425px;
  --font-mono-light: 'Supply-Light', 'PP Supply Mono', 'PPSupplyMono-Regular', monospace;
  --type-mono-light-font: var(--font-mono-light);
  --type-mono-light-weight: 300;
  --rect-btn-height: 22px;
  --rect-btn-padx: 8px;
  --rect-btn-min-width: auto;
  --rect-btn-gap: 11px;
  --mono-tag-height: var(--rect-btn-height, 22px);
  --mono-pill-height: var(--rect-btn-height, 22px);
  --mono-cap-offset: 0px;
  --mono-cap-padding-top: 0px;
  --mono-cap-padding-bottom: 0px;
  --nav-logo-mobile-size: 30px;
  --nav-logo-mobile-width: auto;
  --mobile-nav-link-font-size: 30px;
  --mobile-nav-link-gap: 5px;
  --mobile-nav-link-line-height: 1.1;
  --mobile-nav-link-letter-spacing: -0.02em;
  --mobile-nav-ongoing-font-size: 14.5px;
  --mobile-nav-clock-font-size: 12px;

  /* --- Global Theme, Spacing & Radii Tokens --- */
  --bg: #030303;
  --text-color: #faf9fc;
  --text-muted: #8e8e8e;
  --border-color: rgba(255, 255, 255, 0.14);
  --border-light: rgba(255, 255, 255, 0.08);
  --card-bg: #121212;
  --accent-red: #ff3333;
  --surface-dark: #030303;
  --surface-dark-card: #181818;
  --text-light: #faf9fc;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --container-max: 1440px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --transition-fast: 0.2s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  --transition-smooth: 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-theme: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Intro Loader Tokens --- */
  --loader-logo-size: 80px;
  --loader-edge-offset: 20px;
  --loader-counter-font-size: 13px;
  --loader-color-initial: #7a7a7a;
  --loader-color-active: #ffffff;

  /* --- Glassmorphism Tokens --- */
  --glass-bg-subtle: rgba(255, 255, 255, 0.03);
  --glass-bg-medium: rgba(255, 255, 255, 0.06);
  --glass-bg-heavy: rgba(255, 255, 255, 0.10);
  --glass-border-subtle: rgba(255, 255, 255, 0.08);
  --glass-border-medium: rgba(255, 255, 255, 0.14);
  --glass-border-highlight: rgba(255, 255, 255, 0.25);
  --glass-blur-sm: 8px;
  --glass-blur-md: 16px;
  --glass-blur-lg: 24px;

  /* --- Project Case Study Tokens --- */
  --project-content-top: max(110px, calc(50vh - 270px));
  --project-image-top: var(--project-content-top);
  --project-page-padding-top: var(--project-content-top);
  --project-page-padding-bottom: 120px;
  --project-page-padding-x: 25px;
  --project-title-margin-bottom: 24px;
  --project-meta-margin-top: 24px;
  --project-meta-gap-y: 20px;
  --project-meta-gap-x: 24px;
  --project-accordion-margin-top: 28px;
  --project-accordion-gap: 8px;
  --project-tab-padding-y: 18px;
  --project-tab-padding-x: 20px;
  --project-action-margin-top: 24px;
  --project-columns-gap: 60px;
  --project-image-gap: 48px;

  /* --- Modular Navigation & Dropdown Tokens --- */
  --nav-box-top: 25px;
  --nav-box-width: var(--nav-bar-width, 48px);
  --nav-box-height: var(--nav-bar-height, 48px);
  --nav-box-min-width: auto;
  --nav-box-offset-x: 0px;
  --nav-box-offset-y: 0px;
  --nav-box-margin-top: 0px;
  --nav-box-margin-bottom: 0px;
  --nav-box-margin-left: 0px;
  --nav-box-margin-right: 0px;
  --nav-box-gap: 0px;
  --nav-box-padx: 0px;
  --nav-box-pady: 0px;
  --nav-box-radius: 2px;
  --nav-glass-bg: #faf9fc;
  --nav-glass-blur: 16px;
  --nav-glass-saturate: 140%;
  --nav-glass-shadow-nav: none;
  --nav-glass-shadow-menu: none;
  --nav-glass-fallback-bg: #faf9fc;
  --nav-logo-size: 48px;
  --nav-logo-offset-x: 0px;
  --nav-logo-offset-y: 0px;
  --nav-status-font-size: 11.5px;
  --nav-status-font-weight: 500;
  --nav-status-letter-spacing: -0.02em;
  --nav-status-color: #070707;
  --nav-hamburger-size: 30px;
  --nav-hamburger-line-width: 19px;
  --nav-hamburger-line-height: 1.5px;
  --nav-hamburger-gap: 4.5px;
  --nav-hamburger-active-rotate: -68deg;
  --nav-dropdown-bg: #faf9fc;
  --nav-dropdown-padding-top: 24px;
  --nav-dropdown-padding-bottom: 22px;
  --nav-dropdown-padding-x: 22px;
  --nav-dropdown-item-font-size: 16.5px;
  --nav-dropdown-info-font-size: 14px;
  --nav-dropdown-item-font-weight: 400;

  /* --- Desktop Nav Glass Tokens --- */
  --nav-glass-bg-active: #faf9fc;
  --nav-site-dim-bg: rgba(4, 4, 6, 0.30);

  /* --- Hero Viewport Tokens --- */
  --headline-font-size: 48px;
  --hero-viewport-opacity: 1;
  --nav-box-opacity: 1;

  /* --- Manifesto, Works Grid & Editorial Tokens --- */
  --manifesto-top-margin: 30px;
  --manifesto-lockup-margin-top: 0px;
  --manifesto-gap: 260px;
  --manifesto-coord-margin-top: 2px;
  --manifesto-coord-gap: 7px;
  --manifesto-statement-margin-top: 0px;
  --manifesto-btn-gap: 20px;
  --manifesto-btn-margin-bottom: 0px;
  --manifesto-font-family: var(--type-aero-a-font, var(--font-retina, 'AT Aero Retina', 'At Aero Retina', var(--font-sans)));
  --manifesto-font-size: var(--type-aero-a-size, 32px);
  --manifesto-font-weight: var(--type-aero-a-weight, 350);
  --manifesto-line-height: var(--type-aero-a-line, 37px);
  --manifesto-letter-spacing: var(--type-aero-a-spacing, -1.5px);
  --intro-divider-color: #282828;
  --intro-divider-thickness: 1px;
  --intro-divider-margin-top: 0px;
  --intro-divider-margin-bottom: 24px;
  --f3-divider-square-size: 2px;
  --f3-divider-square-color: #e5e5e6;
  --featured-tag-font-family: var(--font-primary, 'AT Aero', sans-serif);
  --featured-tag-font-size: 25px;
  --featured-tag-font-weight: 400;
  --featured-tag-letter-spacing: -1.2px;
  --featured-tag-line-height: 27.5px;
  --featured-tag-color: #faf9fc;
  --featured-tag-margin-top: 0px;
  --works-grid-margin-top: 20px;
  --works-grid-padding-bottom: 100px;
  --f3-works-grid-gap: 25px;
  --contact-divider-gap: 50px;
  --contact-clocks-gap: 280px;
  --contact-actions-offset-top: 23px;
  --f3-footer-padding-top: 32px;
  --section-intro-padding-bottom: 0px;
  --f3-bg: #030303;
  --f3-text: #faf9fc;
  --f3-gutter-x: 25px;
  --f3-max-width: 100%;

  /* --- Contact Modal Tokens --- */
  --f3-contact-modal-backdrop-bg: rgba(4, 4, 6, 0.80);
  --f3-contact-modal-backdrop-blur: 26px;

  /* --- Project Quick-View Modal Tokens --- */
  --pm-z-index: 99999;
  --pm-backdrop-bg: rgba(4, 4, 6, 0.80);
  --pm-backdrop-blur: 26px;
  --pm-card-bg: rgba(14, 14, 18, 0.65);
  --pm-card-border: 1px solid rgba(255, 255, 255, 0.14);
  --pm-card-shadow: none;
  --pm-card-width: var(--pm-context-box-width, 360px);
  --pm-canvas-bg: transparent;
  --pm-canvas-padding: 5px;
  --pm-canvas-gap: 5px;
  --pm-img-radius: 2px;

  /* --- Mobile Navigation & Gallery Tokens --- */
  --mobile-nav-link-padding-y: 0px;
  --mobile-nav-top-spacing: 109px;
  --mobile-nav-info-margin-bottom: 25px;
  --mobile-nav-info-margin-right: 25px;
  --mobile-nav-backdrop-bg: rgba(0, 0, 0, 0.80);
  --mobile-nav-backdrop-blur: 20px;

  /* --- Mobile Gallery Row Height Token --- */
  --f3-gallery-mobile-height: calc((100vw - 58px) / 2.1133 + 25px);

  /* --- Calibrated Studio & Hero Overrides --- */
  --pm-card-top: 25px;
  --pm-card-left: 25px;
  --pm-action-left: 25px;
  --pm-action-bottom: 25px;
  --f3-footer-logo-size: 60px;
  --f3-footer-underscore-margin-left: 0px;
  --f3-footer-underscore-margin-right: 0px;
  --f3-footer-underscore-1-margin-left: 0px;
  --f3-footer-underscore-1-margin-right: 15px;
  --f3-footer-underscore-2-margin-left: 15px;
  --f3-footer-underscore-2-margin-right: 0px;
  --f3-footer-underscore-scale-y: 1.0;
  --f3-footer-underscore-offset-y: 0px;
  --nav-bar-width: 245px;
  --nav-bar-height: 58px;
  --nav-bar-bg: #faf9fc;
  --nav-cta-gap: 10px;
  --nav-cta-bg: #faf9fc;
  --nav-cta-color: #070707;
  --nav-cta-hover-bg: #030303;
  --nav-cta-hover-color: #faf9fc;
  --nav-dropdown-radius: 2px;
  --hero-bottom-text-size: 48px;
  --hero-bottom-text-weight: 400;
  --hero-bottom-text-spacing: calc(-0.02em - 0.7px);
  --hero-bottom-text-bottom: 25px;
  --hero-bottom-text-side: 25px;
  --hero-quote-size: 20px;
  --hero-quote-line-height: 30px;
  --hero-quote-letter-spacing: -0.8px;
}