/* ==========================================================================

   UNICUS MARKETING — GLOBAL STYLESHEET

   File: /assets/css/global.css

   Version: 2.0

   ==========================================================================



   AI / DEVELOPER REFERENCE — APPROVED PERMANENT STANDARD



   PURPOSE

   This file contains only the sitewide CSS foundation and shared components

   used across the Unicus Marketing website. A change made here must be

   intended to affect multiple webpages.



   APPROVED CSS ARCHITECTURE

   1. Load this file first on every webpage.

   2. Load one page-specific stylesheet after this file.

   3. Store every page stylesheet directly in /assets/css/.

   4. Do not place page-specific sections, layouts, imagery, or overrides here.

   5. Do not place CSS inside PHP files.

   6. Do not use inline CSS except for a legitimate dynamic value.

   7. Scope every page-specific selector beneath the page body class.

   8. sections.css, style_dev.css, and template.css are retired after migration.



   APPROVED FONT SYSTEM

   Display / headlines: "Bebas Neue", sans-serif

   Body / interface:    "Inter", Arial, sans-serif

   Bebas Neue and Inter must be loaded by the document before this stylesheet

   is rendered. Do not introduce Oswald or another display font.



   APPROVED BRAND FOUNDATION

   Primary copper: #e48240

   Primary background: near-black

   Primary text: white

   Visual direction: dark, cinematic, precise, restrained



   NAMING AND MAINTENANCE RULES

   - Use the variables defined in :root instead of repeating brand values.

   - Preserve existing shared header and footer class names.

   - Use component-specific class names; do not introduce vague global classes.

   - Do not add an unscoped global .hero, .copy, .lead, .gold, or .wrap rule.

   - Do not modify approved design or content during structural migration.

   - Keep sections clearly labeled and keep responsive rules with global scope.



   CONTENTS

   01. Design Tokens

   02. Reset and Document Foundation

   03. Global Typography and Media

   04. Accessibility

   05. Layout Utilities

   06. Shared Hero Typography

   07. Shared Editorial Utilities

   08. Shared Buttons

   09. Shared Form Controls

   10. Header and Navigation

   11. Mega Menu

   12. Mobile Navigation

   13. Footer

   14. Shared Motion

   15. Responsive — Tablet

   16. Responsive — Mobile

   17. Reduced Motion

   ========================================================================== */





/* ==========================================================================

   01. DESIGN TOKENS

   ========================================================================== */



:root {

  /* Primary Copper */

  --primary: #e48240;

  --primary-light: #eda06d;

  --primary-dark: #bd6228;

  --primary-rgb: 228, 130, 64;



  /* Light neutrals */

  --white: #ffffff;

  --soft-white: #f3f0e9;

  --light-gray: #cacaca;

  --medium-gray: #969089;

  --muted-gray: #77736e;



  /* Dark neutrals */

  --dark-gray: #242424;

  --charcoal: #111111;

  --panel: #151515;

  --black-light: #0a0a0a;

  --black: #060606;



  /* RGB values */

  --white-rgb: 255, 255, 255;

  --black-rgb: 6, 6, 6;



  /* Borders */

  --border: rgba(255, 255, 255, 0.06);

  --border-soft: rgba(255, 255, 255, 0.08);

  --border-strong: rgba(255, 255, 255, 0.12);

  --border-primary: rgba(var(--primary-rgb), 0.44);



  /* Typography */

  --font-display: "Bebas Neue", sans-serif;

  --font-body: "Inter", Arial, sans-serif;



  --font-size-body: 16px;

  --line-height-body: 1.65;

  --hero-heading-size: clamp(62px, 7.2vw, 116px);

  --hero-heading-line: 0.87;

  --hero-heading-spacing: -0.04em;

  --hero-copy-size: clamp(15px, 1.1vw, 19px);

  --hero-copy-line: 1.65;

  --hero-eyebrow-size: 15px;

  --hero-eyebrow-spacing: 0.2em;

  --section-heading-size: clamp(3.375rem, 5.6vw, 7rem);

  --section-heading-line: 0.88;

  --section-copy-size: 1.125rem;

  --section-copy-line: 1.72;



  /* Layout */

  --site-max: 1400px;

  --site-wide-max: 1540px;

  --site-gutter: 40px;

  --site-gutter-tablet: 28px;

  --site-gutter-mobile: 20px;

  --header-height: 84px;

  --header-height-mobile: 72px;



  /* Backward-compatible layout aliases */

  --page-max: var(--site-max);

  --wide-max: var(--site-wide-max);

  --full-width: calc(100vw - (var(--site-gutter) * 2));

  --full-width-tablet: calc(100vw - (var(--site-gutter-tablet) * 2));

  --full-width-mobile: calc(100vw - (var(--site-gutter-mobile) * 2));



  /* Motion */

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  --transition-fast: 180ms ease;

  --transition-standard: 280ms ease;

  --transition-reveal: 700ms var(--ease-standard);



  /* Layering */

  --z-header: 1000;

  --z-menu: 1010;

  --z-modal: 2000;



  /*

   * TEMPORARY MIGRATION ALIASES

   * Remove each alias only after every page using it has been converted.

   */

  --color-copper: var(--primary);

  --color-copper-light: var(--primary-light);

  --color-copper-dark: var(--primary-dark);

  --color-copper-rgb: var(--primary-rgb);

  --color-bg: var(--black-light);

  --color-bg-dark: #080808;

  --color-bg-deep: var(--black);

  --color-bg-card: var(--charcoal);

  --color-bg-elevated: var(--panel);

  --color-text: var(--white);

  --color-text-strong: rgba(var(--white-rgb), 0.92);

  --color-text-body: rgba(var(--white-rgb), 0.72);

  --color-text-muted: rgba(var(--white-rgb), 0.58);

  --color-text-dim: rgba(var(--white-rgb), 0.42);

  --gold: var(--primary);

  --gold-light: var(--primary-light);

  --bg: var(--black-light);

  --bg-dark: #080808;

  --bg-darker: var(--black);

  --bg-mid: #0d0d0d;

  --bg-card: var(--charcoal);

  --text: var(--white);

  --text-soft: rgba(var(--white-rgb), 0.72);

  --text-muted: rgba(var(--white-rgb), 0.58);

  --text-dim: rgba(var(--white-rgb), 0.42);

  --text-faint: rgba(var(--white-rgb), 0.30);

  --display-font: var(--font-display);

}





/* ==========================================================================

   02. RESET AND DOCUMENT FOUNDATION

   ========================================================================== */



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  min-width: 320px;

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

  text-size-adjust: 100%;

}



body {

  min-width: 320px;

  margin: 0;

  overflow-x: hidden;

  background: var(--black-light);

  color: var(--white);

  font-family: var(--font-body);

  font-size: var(--font-size-body);

  line-height: var(--line-height-body);

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



body.menu-open,

body.modal-open,

body.uqi-modal-open {

  overflow: hidden;

}



main {

  display: block;

}



h1,

h2,

h3,

h4,

h5,

h6,

p,

figure,

blockquote,

dl,

dd {

  margin: 0;

}



ul,

ol {

  margin: 0;

  padding: 0;

}



button,

input,

optgroup,

select,

textarea {

  margin: 0;

  color: inherit;

  font: inherit;

}



button {

  border: 0;

}



a {

  color: inherit;

  text-decoration: none;

}



img,

picture,

svg,

video,

canvas {

  display: block;

  max-width: 100%;

}



img,

video {

  height: auto;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



[hidden] {

  display: none !important;

}





/* ==========================================================================

   03. GLOBAL TYPOGRAPHY AND MEDIA

   ========================================================================== */



h1,

h2,

h3,

.font-display {

  font-family: var(--font-display);

  font-weight: 400;

  letter-spacing: 0.02em;

}



h4,

h5,

h6 {

  font-family: var(--font-body);

}



p {

  color: rgba(var(--white-rgb), 0.72);

}



strong,

b {

  font-weight: 700;

}



small {

  font-size: 0.875em;

}



::selection {

  background: var(--primary);

  color: #080808;

}





/* ==========================================================================

   04. ACCESSIBILITY

   ========================================================================== */



:focus {

  outline: none;

}



:focus-visible {

  outline: 2px solid var(--primary);

  outline-offset: 4px;

}



.skip-link {

  position: fixed;

  top: 12px;

  left: 12px;

  z-index: calc(var(--z-modal) + 1);

  padding: 12px 18px;

  transform: translateY(-160%);

  background: var(--primary);

  color: #080808;

  font-size: 0.75rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  transition: transform var(--transition-fast);

}



.skip-link:focus {

  transform: translateY(0);

}



.sr-only {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}





/* ==========================================================================

   05. LAYOUT UTILITIES

   ========================================================================== */



.section-inner {

  width: 100%;

  max-width: var(--site-max);

  margin-inline: auto;

  padding-inline: var(--site-gutter);

}



.section-inner-wide {

  width: 100%;

  max-width: var(--site-wide-max);

  margin-inline: auto;

  padding-inline: var(--site-gutter);

}



.cinema-inner {

  position: relative;

  z-index: 3;

  width: min(var(--site-wide-max), var(--full-width));

  margin-inline: auto;

}



.grid-bg {

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

  background-size: 60px 60px;

}



/* ==========================================================================

   06. SHARED PAGE HERO

   Home page hero is the locked visual standard.

   ========================================================================== */



.page-hero {

  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  isolation: isolate;

  background: #080808;

}



.page-hero-image {

  position: absolute;

  inset: 0;

  z-index: -3;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

}



.page-hero::before {

  position: absolute;

  inset: 0;

  z-index: -2;

  background:

    linear-gradient(to right,

      rgba(8, 8, 8, .75),

      rgba(8, 8, 8, .55),

      rgba(8, 8, 8, .30));

  content: "";

}



.page-hero::after {

  position: absolute;

  right: -2%;

  bottom: -10%;

  z-index: -1;

  color: rgba(var(--white-rgb), .022);

  content: var(--hero-background-word, "");

  font: 700 clamp(210px, 26vw, 410px) / .8 var(--font-display);

  letter-spacing: -.05em;

  pointer-events: none;

}



.page-hero-inner {

  position: relative;

  z-index: 10;

  width: min(1400px, 100%);

  margin: 0 auto;

  padding: 128px 40px 80px;

}



.hero-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 32px;

  color: var(--primary);

  font-family: var(--font-body);

  font-size: var(--hero-eyebrow-size);

  font-weight: 700;

  letter-spacing: var(--hero-eyebrow-spacing);

  line-height: 1;

  text-transform: uppercase;

}



.hero-eyebrow::before {

  width: 48px;

  height: 1px;

  flex: 0 0 auto;

  background: var(--primary);

  content: "";

}



.hero-title {

  max-width: 980px;

  margin: 0 0 32px;

  color: var(--white);

  font-family: var(--font-display);

  font-size: clamp(42px, 5.2vw, 120px);

  font-weight: 400;

  letter-spacing: .025em;

  line-height: .99;

  text-transform: uppercase;

}



.hero-title span,

.hero-title .primary {

  display: inline;

  color: var(--primary);

}



.hero-supporting-copy {

  max-width: 700px;

  color: var(--text-muted);

  font-family: var(--font-body);

  font-size: clamp(16px, 1.2vw, 19px);

  font-weight: 300;

  line-height: 1.7;

}



@media (max-width: 760px) {

  .page-hero-inner {

    padding: 110px 24px 64px;

  }



  .page-hero::after {

    right: -4%;

    bottom: -2%;

    font-size: clamp(130px, 42vw, 230px);

  }



  .hero-title {

    font-size: clamp(42px, 13vw, 76px);

  }

}





/* ==========================================================================

   07. SHARED EDITORIAL UTILITIES

   ========================================================================== */



.cinema-section {

  position: relative;

  overflow: hidden;

  background: #070707;

  color: var(--white);

}



.cinema-section::before {

  position: absolute;

  inset: 0;

  z-index: 0;

  background:

    radial-gradient(circle at 16% 38%,

      rgba(var(--primary-rgb), 0.16),

      transparent 34%),

    radial-gradient(circle at 82% 64%,

      rgba(255, 255, 255, 0.04),

      transparent 28%),

    linear-gradient(to bottom,

      rgba(255, 255, 255, 0.025),

      transparent 22%,

      transparent 74%,

      rgba(255, 255, 255, 0.018));

  content: "";

  pointer-events: none;

}



.cinema-section::after {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255, 255, 255, 0.017) 1px, transparent 1px);

  background-size: 180px 100%, 100% 140px;

  content: "";

  opacity: 0.22;

  pointer-events: none;

}



.cinema-eyebrow,

.section-eyebrow,

.engine-v2-kicker {

  display: inline-flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 26px;

  color: var(--primary);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.24em;

  line-height: 1.2;

  text-transform: uppercase;

}



.cinema-eyebrow::before,

.engine-v2-kicker::before {

  width: 54px;

  height: 1px;

  background: rgba(var(--primary-rgb), 0.75);

  content: "";

  flex: 0 0 auto;

}



.section-eyebrow.center {

  justify-content: center;

}



.eyebrow-line-short {

  width: 32px;

  height: 1px;

  background: var(--primary);

}



.section-headline,

.cinema-headline {

  margin: 0;

  color: var(--white);

  font-family: var(--font-display);

  font-size: var(--section-heading-size);

  font-weight: 400;

  letter-spacing: 0.012em;

  line-height: var(--section-heading-line);

}



.section-headline .gold,

.cinema-headline .gold {

  color: var(--primary);

}



.section-headline .dim,

.section-headline .faint,

.cinema-headline .muted {

  color: rgba(255, 255, 255, 0.30);

}



.cinema-copy {

  max-width: 920px;

  margin-top: 24px;

  color: rgba(var(--white-rgb), 0.72);

  font-size: 1.1875rem;

  line-height: 1.78;

}



.cinema-rule {

  height: 1px;

  margin-top: 34px;

  background: linear-gradient(to right,

      rgba(var(--primary-rgb), 0),

      rgba(var(--primary-rgb), 0.46),

      rgba(var(--primary-rgb), 0));

}



.text-link-gold {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--primary);

  font-size: 0.8125rem;

  font-weight: 700;

  letter-spacing: 0.10em;

  text-transform: uppercase;

  transition: gap var(--transition-standard), color var(--transition-standard);

}



.text-link-gold:hover {

  gap: 20px;

  color: var(--primary-light);

}





/* ==========================================================================

   08. SHARED BUTTONS

   ========================================================================== */



.btn-primary,

.btn-outline,

.btn-primary-lg,

.btn-outline-lg,

.btn-text,

.header-cta,

.mobile-header-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border: 1px solid transparent;

  border-radius: 0;

  cursor: pointer;

  font-family: var(--font-body);

  font-size: 0.8125rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  line-height: 1;

  text-align: center;

  text-decoration: none;

  text-transform: uppercase;

  white-space: nowrap;

  transition:

    background-color var(--transition-standard),

    border-color var(--transition-standard),

    color var(--transition-standard),

    transform var(--transition-standard);

}



.btn-primary,

.btn-primary-lg,

.header-cta,

.mobile-header-cta {

  border-color: var(--primary);

  background: var(--primary);

  color: #080808;

}



.btn-primary {

  padding: 16px 28px;

}



.btn-primary-lg {

  padding: 20px 40px;

}



.header-cta,

.mobile-header-cta {

  padding: 13px 22px;

  font-size: 0.75rem;

}



.btn-primary:hover,

.btn-primary-lg:hover,

.header-cta:hover,

.mobile-header-cta:hover {

  border-color: var(--primary-light);

  background: var(--primary-light);

  color: #080808;

  transform: translateY(-1px);

}



.btn-outline,

.btn-outline-lg {

  border-color: rgba(255, 255, 255, 0.24);

  background: transparent;

  color: var(--white);

}



.btn-outline {

  padding: 16px 28px;

}



.btn-outline-lg {

  padding: 20px 40px;

}



.btn-outline:hover,

.btn-outline-lg:hover {

  border-color: rgba(255, 255, 255, 0.55);

  background: rgba(255, 255, 255, 0.04);

  color: var(--white);

  transform: translateY(-1px);

}



.btn-text {

  padding: 10px 0;

  border-color: transparent;

  background: transparent;

  color: var(--primary);

}



.btn-text::after {

  content: "\2192";

  transition: transform var(--transition-standard);

}



.btn-text:hover {

  color: var(--primary-light);

}



.btn-text:hover::after {

  transform: translateX(6px);

}



.btn-primary:disabled,

.btn-outline:disabled,

.btn-primary-lg:disabled,

.btn-outline-lg:disabled,

button:disabled {

  cursor: not-allowed;

  opacity: 0.52;

  transform: none;

}





/* ==========================================================================

   09. SHARED FORM CONTROLS

   ========================================================================== */



label {

  display: inline-block;

  color: rgba(var(--white-rgb), 0.92);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.10em;

  text-transform: uppercase;

}



input,

select,

textarea {

  width: 100%;

  border: 1px solid var(--border-strong);

  border-radius: 0;

  background: rgba(255, 255, 255, 0.035);

  color: var(--white);

  font-family: var(--font-body);

  font-size: 1rem;

  line-height: 1.45;

  transition:

    border-color var(--transition-fast),

    background-color var(--transition-fast),

    box-shadow var(--transition-fast);

}



input,

select {

  min-height: 52px;

  padding: 0 16px;

}



select option,

select optgroup {

  color: #000000;

  background-color: #ffffff;

}



textarea {

  min-height: 150px;

  padding: 15px 16px;

  resize: vertical;

}



input::placeholder,

textarea::placeholder {

  color: rgba(var(--white-rgb), 0.42);

  opacity: 1;

}



input:hover,

select:hover,

textarea:hover {

  border-color: rgba(255, 255, 255, 0.22);

}



input:focus,

select:focus,

textarea:focus {

  border-color: var(--primary);

  background: rgba(255, 255, 255, 0.05);

  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);

  outline: none;

}





/* ==========================================================================

   10. HEADER AND NAVIGATION

   ========================================================================== */



#nav {

  position: fixed;

  top: 0;

  right: 0;

  left: 0;

  z-index: var(--z-header);

  width: 100%;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(8, 8, 8, 0.54);

  -webkit-backdrop-filter: blur(18px);

  backdrop-filter: blur(18px);

  transition:

    background-color 350ms ease,

    border-color 350ms ease,

    box-shadow 350ms ease;

}



#nav.scrolled,

#nav.menu-open {

  border-bottom-color: rgba(255, 255, 255, 0.10);

  background: rgba(8, 8, 8, 0.88);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);

}



.nav-inner {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  height: var(--header-height);

  padding-inline: 34px;

  gap: 28px;

}



.nav-logo,

.nav-cta {

  position: relative;

  z-index: 3;

  display: flex;

  flex: 0 0 auto;

  align-items: center;

  min-width: 180px;

}



.nav-cta {

  justify-content: flex-end;

  gap: 12px;

}



.header-uqi-link {

  position: relative;

  display: grid;

  width: 46px;

  height: 46px;

  min-height: 46px;

  flex: 0 0 46px;

  box-sizing: border-box;

  place-items: center;

  border: 1px solid rgba(var(--primary-rgb), 0.78);

  background: rgba(8, 8, 8, 0.78);

  color: var(--primary);

  text-decoration: none;

  transition:

    border-color var(--transition-standard),

    background-color var(--transition-standard),

    transform var(--transition-standard);

}



.header-uqi-link::before {

  position: absolute;

  inset: 8px;

  border: 1px solid rgba(var(--primary-rgb), 0.28);

  content: "";

}



.header-uqi-core {

  position: relative;

  z-index: 1;

  width: 8px;

  height: 8px;

  background: var(--primary);

  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.55);

}



.header-uqi-link:hover,

.header-uqi-link:focus-visible {

  border-color: var(--primary-light);

  background: rgba(var(--primary-rgb), 0.08);

  transform: translateY(-1px);

}



.header-uqi-link:focus-visible {

  outline: 2px solid var(--primary);

  outline-offset: 3px;

}



.nav-logo-img {

  width: auto;

  max-width: 260px;

  height: 44px;

  object-fit: contain;

}



.nav-links {

  position: absolute;

  top: 0;

  left: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  height: var(--header-height);

  margin: 0;

  padding: 0;

  gap: 36px;

  list-style: none;

  transform: translateX(-50%);

}



.nav-item {

  display: flex;

  align-items: center;

  height: var(--header-height);

}



.nav-link,

.nav-links>li>a {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  height: 100%;

  color: rgba(255, 255, 255, 0.72);

  font-family: var(--font-body);

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  line-height: 1;

  text-transform: uppercase;

  white-space: nowrap;

  transition: color var(--transition-standard);

}



.nav-link:hover,

.nav-links>li>a:hover,

.nav-item:hover>.nav-link {

  color: var(--white);

}



.nav-link.active:hover,

.nav-links>li>a.active:hover,

.nav-item:hover>.nav-link.active,

.nav-link[aria-current="page"]:hover,

.nav-links>li>a[aria-current="page"]:hover {

  color: var(--primary);

}



.nav-link.active,

.nav-links>li>a.active,

.nav-link[aria-current="page"],

.nav-links>li>a[aria-current="page"] {

  color: var(--primary);

}



.nav-caret {

  opacity: 0.72;

  transition: opacity var(--transition-standard), transform var(--transition-standard);

  color: var(--primary);

}



.nav-link:hover .nav-caret,

.nav-item:hover .nav-caret {

  opacity: 1;

}



.nav-item:hover .nav-caret {

  transform: rotate(180deg);

}



.nav-hamburger {

  position: relative;

  z-index: 3;

  display: none;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  padding: 8px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: transparent;

  color: var(--white);

  cursor: pointer;

}





/* ==========================================================================

   11. MEGA MENU

   ========================================================================== */



.has-mega {

  position: static;

}



.mega-menu {

  position: absolute;

  top: var(--header-height);

  left: 0;

  z-index: var(--z-menu);

  width: 100%;

  opacity: 0;

  pointer-events: none;

  transform: translateY(10px);

  visibility: hidden;

  transition:

    opacity 250ms ease,

    visibility 250ms ease,

    transform 250ms ease;

}



.mega-menu::before {

  content: "";

  position: fixed;

  top: var(--header-height);

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 0;

  pointer-events: none;

  background: rgba(0, 0, 0, 0.58);

  -webkit-backdrop-filter: blur(2px) saturate(0.72);

  backdrop-filter: blur(2px) saturate(0.72);

}



.has-mega:hover .mega-menu,

.has-mega:focus-within .mega-menu,

.nav-item:hover .mega-menu,

.nav-item:focus-within .mega-menu {

  opacity: 1;

  pointer-events: auto;

  transform: translateY(0);

  visibility: visible;

}



.mega-inner {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns: 1.15fr 1fr 1fr 1fr;

  width: min(1180px, calc(100vw - 80px));

  margin-inline: auto;

  padding: 34px 38px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-top-color: rgba(var(--primary-rgb), 0.58);

  background:

    radial-gradient(circle at 88% 12%, rgba(var(--primary-rgb), 0.055), transparent 34%),

    rgba(7, 7, 7, 0.985);

  box-shadow:

    0 34px 110px rgba(0, 0, 0, 0.86),

    0 8px 28px rgba(0, 0, 0, 0.58),

    inset 0 1px rgba(255, 255, 255, 0.025);

  -webkit-backdrop-filter: blur(26px);

  backdrop-filter: blur(26px);

  gap: 38px;

}



.mega-inner-small {

  grid-template-columns: minmax(220px, 0.72fr) minmax(430px, 1.28fr);

  width: min(930px, calc(100vw - 80px));

  padding: 36px 40px;

  gap: 40px;

}



.mega-column {

  padding-right: 36px;

  border-right: 1px solid rgba(255, 255, 255, 0.08);

}



.mega-eyebrow {

  display: block;

  margin-bottom: 14px;

  color: var(--primary);

  font-size: 0.625rem;

  font-weight: 800;

  letter-spacing: 0.22em;

  line-height: 1.2;

  text-transform: uppercase;

}



.mega-feature {

  min-width: 0;

}



.mega-growth-feature {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-start;

  padding: 1px 4px 2px 0;

}



.mega-feature h3 {

  max-width: 420px;

  margin: 0 0 19px;

  color: var(--white);

  font-family: var(--font-display);

  font-size: clamp(1.75rem, 2.2vw, 2.125rem);

  font-weight: 400;

  letter-spacing: 0.025em;

  line-height: 0.96;

}



.mega-feature-copy {

  max-width: 510px;

  margin: 0;

  color: rgba(var(--white-rgb), 0.66);

  font-family: var(--font-body);

  font-size: 0.875rem;

  font-weight: 400;

  line-height: 1.65;

}



.mega-feature-actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 13px 22px;

  margin-top: 26px;

}



.mega-feature-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  color: var(--primary) !important;

  font-family: var(--font-body);

  font-size: 0.625rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.14em !important;

  line-height: 1 !important;

  text-decoration: none;

  text-transform: uppercase !important;

  white-space: nowrap;

  transition:

    background-color var(--transition-standard),

    border-color var(--transition-standard),

    color var(--transition-standard),

    transform var(--transition-standard);

}



.mega-feature-link-primary {

  padding: 13px 16px;

  border: 1px solid var(--primary);

  background: var(--primary);

  color: #080808 !important;

}



.mega-feature-link-primary:hover,

.mega-feature-link-primary:focus-visible {

  border-color: var(--primary-light);

  background: var(--primary-light);

  color: #080808 !important;

  transform: translateY(-1px);

}



.mega-feature-link-secondary {

  padding: 12px 0;

  color: rgba(var(--white-rgb), 0.68) !important;

}



.mega-feature-link-secondary:hover,

.mega-feature-link-secondary:focus-visible {

  color: var(--primary-light) !important;

  transform: translateX(3px);

}



.mega-column h4 {

  margin-bottom: 18px;

  color: var(--white);

  font-size: 0.6875rem;

  font-weight: 800;

  letter-spacing: 0.18em;

  line-height: 1.2;

  text-transform: uppercase;

}



.mega-column a {

  display: block;

  padding: 7px 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: 0.875rem;

  font-weight: 500;

  letter-spacing: 0.01em;

  line-height: 1.35;

  text-transform: none;

  transition: color 220ms ease, transform 220ms ease;

}



.mega-column a:hover,

.mega-column a:focus-visible,

.mega-column a[aria-current="page"] {

  color: var(--primary);

  transform: translateX(4px);

}





/* ==========================================================================

   12. MOBILE NAVIGATION

   ========================================================================== */



#mobile-menu {

  display: none;

  flex-direction: column;

  padding: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(8, 8, 8, 0.96);

  -webkit-backdrop-filter: blur(18px);

  backdrop-filter: blur(18px);

  gap: 20px;

}



#mobile-menu.open {

  display: flex;

}



@media (min-width: 1025px) {

  #mobile-menu.open { display: none; }

}



#mobile-menu .mobile-submenu[hidden] { display: none; }



.mobile-about-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

}



.mobile-about-row > a { flex: 1; }



.mobile-submenu-toggle {

  display: grid;

  place-items: center;

  width: 44px;

  height: 1.18125rem;

  padding: 0;

  border: 0;

  background: transparent;

  color: var(--white);

  cursor: pointer;

  font: inherit;

}



.mobile-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.mobile-submenu-toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }



#mobile-menu a {

  color: rgba(var(--white-rgb), 0.58);

  font-size: 0.875rem;

  font-weight: 600;

  letter-spacing: 0.10em;

  line-height: 1.35;

  text-transform: uppercase;

  transition: color var(--transition-fast);

}



#mobile-menu .mobile-submenu {

  display: flex;

  flex-direction: column;

  margin: -6px 0 2px;

  padding: 2px 0 2px 16px;

  border-left: 1px solid rgba(var(--primary-rgb), 0.45);

  gap: 14px;

}



#mobile-menu .mobile-submenu a {

  display: block;

  width: fit-content;

  font-size: 0.75rem;

  letter-spacing: 0.09em;

  line-height: 1.4;

}



#mobile-menu a:hover,

#mobile-menu a:focus-visible,

#mobile-menu a[aria-current="page"] {

  color: var(--white);

}



#mobile-menu .mobile-header-cta {

  justify-content: center;

  margin-top: 8px;

  color: #080808;

  text-align: center;

}





/* ==========================================================================

   13. FOOTER

   ========================================================================== */



footer,

.site-footer {

  padding: 80px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  background: #080808;

}



.footer-inner {

  width: 100%;

  max-width: var(--site-max);

  margin-inline: auto;

  padding-inline: var(--site-gutter);

}



.footer-top {

  display: grid;

  grid-template-columns: 1fr 1fr;

  margin-bottom: 56px;

  gap: 48px;

}



.footer-logo {

  display: flex;

  align-items: center;

  margin-bottom: 20px;

  gap: 12px;

}



.footer-logo-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  border: 1px solid var(--primary);

}



.footer-logo-icon-dot {

  width: 10px;

  height: 10px;

  background: var(--primary);

}



.footer-logo-text {

  color: var(--white);

  font-size: 0.875rem;

  font-weight: 600;

  letter-spacing: 0.15em;

  line-height: 1.2;

  text-transform: uppercase;

}



.footer-logo-text span {

  color: var(--primary);

}



.footer-desc {

  max-width: 380px;

  color: rgba(var(--white-rgb), 0.58);

  font-size: 0.875rem;

  line-height: 1.7;

}



.footer-links {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px 32px;

}



.footer-link {

  display: block;

  margin-bottom: 12px;

  color: rgba(var(--white-rgb), 0.58);

  font-size: 0.6875rem;

  font-weight: 600;

  letter-spacing: 0.10em;

  line-height: 1.4;

  text-transform: uppercase;

  transition: color var(--transition-fast);

}



.footer-link:hover,

.footer-link:focus-visible {

  color: var(--white);

}



.footer-bottom {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  padding-top: 32px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  gap: 16px;

}



.footer-copy,

.footer-legal a {

  color: rgba(var(--white-rgb), 0.42);

  font-size: 0.75rem;

  letter-spacing: 0.08em;

  line-height: 1.5;

}



.footer-legal {

  display: flex;

  flex-wrap: wrap;

  gap: 24px;

}



.footer-legal a {

  transition: color var(--transition-fast);

}



.footer-legal a:hover,

.footer-legal a:focus-visible {

  color: rgba(var(--white-rgb), 0.58);

}



/* Sitewide UQI gateway launcher */

.uqi-floating-link {

  position: fixed;

  right: max(42px, env(safe-area-inset-right));

  bottom: max(24px, env(safe-area-inset-bottom));

  z-index: calc(var(--z-header) - 1);

  display: grid;

  grid-template-columns: 38px 1fr 22px;

  align-items: center;

  width: 164px;

  min-height: 58px;

  padding: 9px 10px;

  border: 1px solid rgba(var(--primary-rgb), 0.76);

  background: rgba(8, 9, 9, 0.96);

  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.48);

  color: var(--soft-white);

  font-family: var(--font-body);

  cursor: pointer;

  gap: 10px;

  transition:

    border-color var(--transition-fast),

    background-color var(--transition-fast),

    box-shadow var(--transition-fast),

    transform var(--transition-fast);

}



body.uqi-modal-open .uqi-floating-link {

  opacity: 0;

  pointer-events: none;

}



.uqi-floating-link:hover,

.uqi-floating-link:focus-visible {

  border-color: var(--primary-light);

  background: #0d0e0e;

  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.58);

  transform: translateY(-2px);

}



.uqi-floating-link:focus-visible {

  outline: 2px solid var(--primary);

  outline-offset: 4px;

}



.uqi-floating-mark {

  position: relative;

  display: grid;

  width: 38px;

  height: 38px;

  place-items: center;

  border: 1px solid rgba(var(--primary-rgb), 0.86);

}



.uqi-floating-mark::before {

  position: absolute;

  inset: 7px;

  border: 1px solid rgba(var(--primary-rgb), 0.25);

  content: "";

}



.uqi-floating-mark::after {

  width: 9px;

  height: 9px;

  background: var(--primary);

  box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.72);

  content: "";

  animation: uqi-launcher-pulse 2.8s ease-in-out infinite;

}



.uqi-floating-label {

  font-size: 0.6875rem;

  font-weight: 900;

  letter-spacing: 0.075rem;

  text-align: left;

  text-transform: uppercase;

  white-space: nowrap;

}



.uqi-floating-badge {

  display: grid;

  height: 20px;

  place-items: center;

  border: 1px solid rgba(var(--primary-rgb), 0.72);

  color: var(--primary);

  cursor: pointer;

  font-size: 0.5rem;

  font-weight: 900;

  letter-spacing: 0.04rem;

}



.uqi-floating-link.uqi-is-paused .uqi-floating-mark::after {

  animation-play-state: paused;

}



@keyframes uqi-launcher-pulse {

  0%,

  100% {

    opacity: 0.7;

    transform: scale(0.88);

  }



  50% {

    opacity: 1;

    transform: scale(1);

  }

}



/* Sitewide UQI conversation modal */

.uqi-modal {

  position: fixed;

  inset: 0;

  z-index: calc(var(--z-modal) - 1);

  display: grid;

  place-items: center;

  padding: 20px;

  opacity: 0;

  visibility: hidden;

  transition:

    opacity 240ms ease,

    visibility 240ms ease;

}



.uqi-modal[hidden] {

  display: none;

}



.uqi-modal.open {

  opacity: 1;

  visibility: visible;

}



.uqi-modal-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(1, 5, 7, 0.5);

  -webkit-backdrop-filter: blur(8px);

  backdrop-filter: blur(8px);

}



.uqi-turn-time {

  display: block;

  margin-top: 6px;

  color: #92a5af;

  font-size: 10px;

  font-weight: 400;

  line-height: 1.4;

  letter-spacing: .02em;

}



.uqi-user-bubble .uqi-turn-time { text-align: right; }



.uqi-modal-dialog {

  position: relative;

  display: flex;

  flex-direction: column;

  width: min(840px, 100%);

  height: calc(100dvh - 40px);

  min-height: 0;

  border: 1px solid rgba(var(--primary-rgb), 0.42);

  background: linear-gradient(145deg, #091014, #0b1115);

  box-shadow: 0 35px 120px rgba(0, 0, 0, 0.82);

  transform: translateY(14px);

  transition: transform 240ms ease;

}



.uqi-modal.open .uqi-modal-dialog {

  transform: none;

}



.uqi-modal-head {

  display: flex;

  flex: 0 0 72px;

  align-items: center;

  justify-content: space-between;

  min-height: 72px;

  padding: 0 18px;

  border-bottom: 1px solid rgba(var(--white-rgb), 0.1);

  gap: 16px;

}



.uqi-modal-identity,

.uqi-modal-title-row,

.uqi-modal-actions {

  display: flex;

  align-items: center;

}



.uqi-modal-identity {

  min-width: 0;

  gap: 12px;

}



.uqi-modal-title-row {

  gap: 9px;

}



.uqi-modal-actions {

  justify-content: flex-end;

  gap: 9px;

}



.uqi-modal-mark {

  position: relative;

  display: grid;

  flex: 0 0 38px;

  width: 38px;

  height: 38px;

  place-items: center;

  border: 1px solid rgba(var(--primary-rgb), 0.8);

}



.uqi-modal-mark::before {

  position: absolute;

  inset: 7px;

  border: 1px solid rgba(var(--primary-rgb), 0.25);

  content: "";

}



.uqi-modal-mark::after {

  width: 8px;

  height: 8px;

  background: var(--primary);

  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.7);

  content: "";

}



.uqi-modal-name {

  color: var(--soft-white);

  font-size: 0.9375rem;

  font-weight: 900;

  letter-spacing: 0.095rem;

  line-height: 1;

  text-transform: uppercase;

}



.uqi-modal-system {

  color: #7f8d91;

  font-size: 0.5rem;

  font-weight: 800;

  letter-spacing: 0.0875rem;

  line-height: 1.2;

  text-transform: uppercase;

  white-space: nowrap;

}



.uqi-modal-subtitle {

  display: block;

  margin-top: 4px;

  color: #7f8a8e;

  font-size: 0.5625rem;

  font-weight: 600;

  line-height: 1.2;

}



.uqi-modal-status {

  display: flex;

  align-items: center;

  height: 25px;

  padding: 0 10px;

  border: 1px solid rgba(var(--white-rgb), 0.12);

  color: #859399;

  font-size: 0.4375rem;

  font-weight: 900;

  letter-spacing: 0.0625rem;

  line-height: 1;

  text-transform: uppercase;

  white-space: nowrap;

}



.uqi-modal-status--online::before {

  width: 5px;

  height: 5px;

  margin-right: 6px;

  background: #59d9a8;

  box-shadow: 0 0 8px rgba(89, 217, 168, 0.7);

  content: "";

}



.uqi-modal-contact {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 34px;

  padding: 0 15px;

  background: var(--primary);

  color: #090909;

  font-size: 0.625rem;

  font-weight: 900;

  white-space: nowrap;

}



.uqi-modal-contact:hover,

.uqi-modal-contact:focus-visible {

  background: var(--primary-light);

}



.uqi-modal-close {

  display: grid;

  flex: 0 0 34px;

  width: 34px;

  height: 34px;

  padding: 0;

  place-items: center;

  border: 1px solid rgba(var(--white-rgb), 0.14);

  background: transparent;

  color: #aaa6a2;

  font-family: var(--font-body);

  font-size: 1.3125rem;

  line-height: 1;

  cursor: pointer;

}



.uqi-modal-close:hover,

.uqi-modal-close:focus-visible {

  border-color: rgba(var(--primary-rgb), 0.7);

  color: var(--primary);

}



.uqi-modal-body {

  display: flex;

  flex: 1;

  flex-direction: column;

  min-height: 0;

  padding: 0 18px 12px;

}



.uqi-modal-conversation {

  overflow-anchor: none;

  position: relative;

  flex: 1;

  min-height: 0;

  padding: 22px 16px 20px;

  overflow-y: auto;

  scroll-behavior: smooth;

  scrollbar-color: rgba(var(--primary-rgb), 0.45) transparent;

}



.uqi-empty-state {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-height: 100%;

  padding: 10px 10px 88px;

  text-align: center;

}



.uqi-empty-kicker {

  color: var(--primary);

  font-size: 0.5rem;

  font-weight: 900;

  letter-spacing: 0.1rem;

  text-transform: uppercase;

}



.uqi-empty-kicker::before {

  display: inline-block;

  width: 6px;

  height: 6px;

  margin-right: 8px;

  background: var(--primary);

  content: "";

}



.uqi-empty-state h2,

.uqi-empty-state h3 {

  margin: 10px 0 8px;

  color: var(--soft-white);

  font-family: var(--font-body);

  font-size: 1.75rem;

  font-weight: 800;

  letter-spacing: -0.025em;

  line-height: 1.1;

  text-transform: none;

}



.uqi-empty-state p {

  max-width: 570px;

  margin: 0;

  color: #869398;

  font-size: 0.6875rem;

  font-weight: 500;

  line-height: 1.55;

}



.uqi-start-options {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  width: min(600px, 100%);

  margin-top: 28px;

  gap: 9px;

}



.uqi-start-option {

  min-height: 76px;

  padding: 14px 12px;

  border: 1px solid rgba(var(--white-rgb), 0.12);

  border-left-color: var(--primary);

  background: #0e181d;

  color: #efeeec;

  font-family: var(--font-body);

  text-align: left;

  cursor: pointer;

}



.uqi-start-option strong {

  display: block;

  margin-bottom: 8px;

  color: var(--primary);

  font-size: 0.5rem;

  letter-spacing: 0.0625rem;

  text-transform: uppercase;

}



.uqi-start-option span {

  display: block;

  font-size: 0.625rem;

  font-weight: 700;

  line-height: 1.35;

}



.uqi-start-option:hover,

.uqi-start-option:focus-visible {

  border-color: rgba(var(--primary-rgb), 0.8);

  background: #111d22;

}



.uqi-empty-proof {

  margin-top: 14px;

  color: #69767b;

  font-size: 0.4375rem;

  font-weight: 900;

  letter-spacing: 0.075rem;

  text-transform: uppercase;

}



.uqi-empty-proof b {

  padding: 0 7px;

  color: var(--primary);

}



.uqi-turn {

  display: flex;

  margin-bottom: 28px;

}



.uqi-turn.assistant {

  align-items: flex-start;

  gap: 14px;

}



.uqi-turn.user {

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

}



.uqi-turn-avatar {

  position: relative;

  display: grid;

  flex: 0 0 38px;

  width: 38px;

  height: 38px;

  place-items: center;

  border: 1px solid rgba(var(--primary-rgb), 0.76);

}



.uqi-turn-avatar::before {

  position: absolute;

  inset: 7px;

  border: 1px solid rgba(var(--primary-rgb), 0.25);

  content: "";

}



.uqi-turn-avatar::after {

  width: 8px;

  height: 8px;

  background: var(--primary);

  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.7);

  content: "";

}



.uqi-turn-content {

  max-width: calc(100% - 58px);

  padding-top: 1px;

}



.uqi-turn-label {

  margin-bottom: 7px;

  color: var(--primary);

  font-size: 0.625rem;

  font-weight: 900;

  letter-spacing: 0.075rem;

  text-transform: uppercase;

}



.uqi-turn-text {

  color: #eeece9;

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.6;

  overflow-wrap: anywhere;

}



.uqi-turn-text p {

  margin: 0 0 12px;

}



.uqi-turn-text p:last-child {

  margin-bottom: 0;

}



.uqi-turn-text ul,

.uqi-turn-text ol {

  margin: 8px 0 12px;

  padding-left: 20px;

}



.uqi-turn-text a {

  color: var(--primary-light);

  font-weight: 700;

  text-decoration: underline;

  text-decoration-color: rgba(var(--primary-rgb), 0.55);

  text-underline-offset: 3px;

}



.uqi-turn.assistant.thinking .uqi-turn-text {

  color: #899397;

  font-style: italic;

}



.uqi-user-bubble {

  max-width: 72%;

  padding: 13px 16px;

  border: 1px solid rgba(var(--white-rgb), 0.16);

  background: #15222a;

  color: var(--soft-white);

  font-size: 0.8125rem;

  font-weight: 500;

  line-height: 1.45;

  overflow-wrap: anywhere;

}



.uqi-user-label {

  display: grid;

  width: 34px;

  height: 30px;

  place-items: center;

  border: 1px solid rgba(var(--white-rgb), 0.18);

  background: #142027;

  color: var(--white);

  font-size: 0.5rem;

  font-weight: 900;

  letter-spacing: 0.03rem;

}



.uqi-modal-compose {

  position: relative;

  flex: 0 0 auto;

}



.uqi-back-to-top {

  position: absolute;

  right: 8px;

  bottom: calc(100% + 10px);

  z-index: 1;

  width: 40px;

  height: 40px;

  border: 1px solid var(--primary);

  background: #111c22;

  color: var(--primary);

  font-size: 1.25rem;

  cursor: pointer;

  line-height: 1rem;

}



.uqi-back-to-top[hidden] { display: none; }



.uqi-back-to-top:hover,

.uqi-back-to-top:focus-visible {

  background: var(--primary);

  color: #090909;

}



.uqi-modal-form {

  display: flex;

  align-items: flex-end;

  padding: 7px;

  border: 1px solid rgba(var(--white-rgb), 0.16);

  background: #111c22;

}



.uqi-modal-form textarea {

  min-height: 0;

  box-sizing: border-box;

  height: 48px;

  max-height: 180px;

  line-height: 20px;

  resize: none;

  overflow-y: auto;

  overflow-x: hidden;

  overflow-wrap: anywhere;

  flex: 1;

  min-width: 0;

  padding: 14px 12px;

  border: 0;

  outline: 0;

  background: transparent;

  color: var(--white);

  font-family: var(--font-body);

  font-size: 0.8125rem;

  font-weight: 500;

}



.uqi-modal-form textarea::placeholder {

  color: #7f8d91;

  opacity: 1;

}



.uqi-modal-form button {

  flex-shrink: 0;

  height: 48px;

  width: 50px;

  border: 0;

  background: var(--primary);

  color: #090909;

  font-family: var(--font-body);

  font-size: 1.25rem;

  font-weight: 700;

  cursor: pointer;

}



.uqi-modal-form button:hover,

.uqi-modal-form button:focus-visible {

  background: var(--primary-light);

}



.uqi-modal-form button:disabled,

.uqi-modal-form textarea:disabled {

  cursor: wait;

  opacity: 0.65;

}



.uqi-modal-note {

  margin-top: 7px;

  color: #69767b;

  font-size: 0.4375rem;

  font-weight: 600;

  letter-spacing: 0.0625rem;

  text-align: center;

  text-transform: uppercase;

}





/* ==========================================================================

   14. SHARED MOTION

   ========================================================================== */



.reveal {

  opacity: 0;

  transform: translateY(28px);

  transition:

    opacity 3300ms var(--ease-standard),

    transform 1700ms var(--ease-standard);

}



.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



.reveal-delay-1 {

  transition-delay: 600ms;

}



.reveal-delay-2 {

  transition-delay: 600ms;

}



.reveal-delay-3 {

  transition-delay: 600ms;

}



.reveal-delay-4 {

  transition-delay: 600ms;

}



@keyframes bounce {



  0%,

  100% {

    transform: translateX(-50%) translateY(0);

  }



  50% {

    transform: translateX(-50%) translateY(-8px);

  }

}



@keyframes clientLogoScroll {

  from {

    transform: translateX(0);

  }



  to {

    transform: translateX(calc(-50% - (var(--logo-gap) / 2)));

  }

}





/* ==========================================================================

   15. RESPONSIVE — TABLET

   ========================================================================== */



@media (max-width: 1180px) {

  .nav-links {

    gap: 24px;

  }



  .nav-logo,

  .nav-cta {

    min-width: 150px;

  }



  .nav-logo-img {

    max-width: 220px;

    height: 40px;

  }

}



@media (max-width: 1024px) {



  #mobile-menu {

    max-height: calc(100vh - var(--header-height));

    max-height: calc(100dvh - var(--header-height));

    overflow-y: auto;

    overscroll-behavior: contain;

  }



  .section-inner,

  .section-inner-wide,

  .footer-inner {

    padding-inline: var(--site-gutter-tablet);

  }



  .cinema-inner {

    width: var(--full-width-tablet);

  }



  .nav-inner {

    padding-inline: var(--site-gutter-tablet);

  }



  .nav-links,

  .nav-cta {

    display: none;

  }



  .nav-hamburger {

    display: flex;

  }



  #nav .nav-actions {

    display: none;

  }



  #mobile-menu .mobile-product-link {

    order: 1;

  }

}





/* ==========================================================================

   16. RESPONSIVE — MOBILE

   ========================================================================== */



@media (max-width: 760px) {

  :root {

    --section-heading-size: clamp(3rem, 15vw, 5.25rem);

  }



  .section-inner,

  .section-inner-wide,

  .footer-inner {

    padding-inline: var(--site-gutter-mobile);

  }



  .cinema-inner {

    width: var(--full-width-mobile);

  }



  .nav-inner {

    height: var(--header-height-mobile);

    padding-inline: var(--site-gutter-mobile);

  }



  .nav-logo-img {

    max-width: 190px;

    height: 36px;

  }



  #mobile-menu {

    max-height: calc(100dvh - var(--header-height-mobile));

    overflow-y: auto;

    padding: 22px var(--site-gutter-mobile) 28px;

  }



  .footer-top,

  .footer-links {

    grid-template-columns: 1fr;

  }



  .footer-top {

    margin-bottom: 42px;

    gap: 36px;

  }



  .footer-bottom {

    align-items: flex-start;

    flex-direction: column;

  }

}



@media (max-width: 480px) {



  .btn-primary,

  .btn-outline,

  .btn-primary-lg,

  .btn-outline-lg {

    width: 100%;

  }



  .cinema-eyebrow,

  .section-eyebrow,

  .engine-v2-kicker {

    letter-spacing: 0.18em;

  }



  .cinema-copy {

    font-size: 1rem;

  }



  .footer-legal {

    flex-direction: column;

    gap: 10px;

  }

}





/* ==========================================================================

   17. REDUCED MOTION

   ========================================================================== */



@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }



  *,

  *::before,

  *::after {

    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }



  .reveal {

    opacity: 1;

    transform: none;

  }

}





/* ==========================================================================

   18. SITEWIDE SCHEDULING REQUEST MODAL

   ========================================================================== */



.scheduler-modal[hidden] {

  display: none;

}



.scheduler-modal {

  position: fixed;

  inset: 0;

  z-index: var(--z-modal);

  display: grid;

  place-items: center;

  padding: 32px;

}



.scheduler-modal-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.86);

  -webkit-backdrop-filter: blur(10px);

  backdrop-filter: blur(10px);

  opacity: 0;

  transition: opacity var(--transition-standard);

}



.scheduler-dialog {

  position: relative;

  z-index: 1;

  width: min(920px, 100%);

  max-height: calc(100dvh - 64px);

  overflow-y: auto;

  padding: 25px clamp(30px, 4vw, 58px) 25px clamp(30px, 4vw, 58px);

  border: 1px solid rgba(var(--primary-rgb), 0.38);

  background:

    radial-gradient(circle at 92% 8%, rgba(var(--primary-rgb), 0.14), transparent 32%),

    #111111;

  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.72);

  opacity: 0;

  transform: translateY(22px) scale(0.985);

  transition:

    opacity var(--transition-standard),

    transform var(--transition-standard);

}



.scheduler-modal.open .scheduler-modal-backdrop,

.scheduler-modal.open .scheduler-dialog {

  opacity: 1;

}



.scheduler-modal.open .scheduler-dialog {

  transform: translateY(0) scale(1);

}



.scheduler-close {

  position: absolute;

  top: 18px;

  right: 18px;

  z-index: 2;

  display: grid;

  width: 46px;

  height: 46px;

  place-items: center;

  border: 1px solid var(--border-strong);

  background: rgba(255, 255, 255, 0.035);

  color: var(--white);

  cursor: pointer;

  transition:

    border-color var(--transition-fast),

    background-color var(--transition-fast),

    color var(--transition-fast);

}



.scheduler-close:hover,

.scheduler-close:focus-visible {

  border-color: var(--primary);

  background: rgba(var(--primary-rgb), 0.10);

  color: var(--primary-light);

}



.scheduler-modal-header {}



.scheduler-eyebrow {

  margin-bottom: 14px;

  color: var(--primary);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.2em;

  line-height: 1.2;

  text-transform: uppercase;

}



.scheduler-modal-header h2 {

  margin: 0 0 18px;

  color: var(--white);

  font-family: var(--font-display);

  font-size: clamp(3rem, 6vw, 4.5rem);

  font-weight: 400;

  letter-spacing: 0.015em;

  line-height: 0.9;

  text-transform: uppercase;

}



.scheduler-modal-header h2 span {

  color: var(--primary);

}



.scheduler-modal-header>p:last-child {

  max-width: 680px;

  color: rgba(var(--white-rgb), 0.68);

  font-size: 1rem;

  line-height: 1.7;

}



.scheduler-fields {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 22px;

}



.scheduler-field {

  min-width: 0;

}



.scheduler-field--full {

  grid-column: 1 / -1;

}



.scheduler-field label,

.scheduler-choice-group legend {

  margin-bottom: 9px;

}



.scheduler-field label span,

.scheduler-choice-group legend span,

.scheduler-form-actions p span {

  color: var(--primary);

}



.scheduler-field select {

  color-scheme: dark;

}



.scheduler-field textarea {

  min-height: 80px;

}



.scheduler-choice-group {

  min-width: 0;

  margin: 0;

  padding: 0;

  border: 0;

}



.scheduler-choice-group legend {

  color: rgba(var(--white-rgb), 0.92);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.10em;

  line-height: 1.4;

  text-transform: uppercase;

}



.scheduler-choice-help {

  margin: -4px 0 10px;

  color: rgba(var(--white-rgb), 0.46);

  font-size: 0.75rem;

  line-height: 1.4;

}



.scheduler-choice-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 10px;

}



.scheduler-choice {

  position: relative;

  display: block;

  cursor: pointer;

}



.scheduler-choice input {

  position: absolute;

  width: 1px;

  height: 1px;

  min-height: 0;

  padding: 0;

  border: 0;

  overflow: hidden;

  background: transparent;

  opacity: 0;

  pointer-events: none;

}



.scheduler-choice span {

  display: flex;

  min-height: 50px;

  align-items: center;

  justify-content: center;

  padding: 10px 12px;

  border: 1px solid var(--border-strong);

  background: rgba(255, 255, 255, 0.035);

  color: rgba(var(--white-rgb), 0.72);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  line-height: 1.3;

  text-align: center;

  text-transform: uppercase;

  transition:

    border-color var(--transition-fast),

    background-color var(--transition-fast),

    color var(--transition-fast);

}



.scheduler-choice:hover span {

  border-color: rgba(255, 255, 255, 0.28);

  color: var(--white);

}



.scheduler-choice input:checked+span {

  border-color: var(--primary);

  background: rgba(var(--primary-rgb), 0.16);

  color: var(--primary-light);

}



.scheduler-choice input:focus-visible+span {

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);

}



.scheduler-choice input:disabled+span {

  cursor: not-allowed;

  opacity: 0.38;

}



.scheduler-field-error {

  min-height: 18px;

  margin-top: 7px;

  color: #ff9b8d;

  font-size: 0.75rem;

  line-height: 1.45;

}



.scheduler-form-notice {

  margin-bottom: 22px;

  padding: 14px 16px;

  border: 1px solid rgba(255, 107, 87, 0.45);

  background: rgba(255, 107, 87, 0.08);

  color: #ffd0ca;

  font-size: 0.875rem;

  line-height: 1.55;

}



.scheduler-form-notice[hidden] {

  display: none;

}



.scheduler-form-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 28px;

  gap: 20px;

}



.scheduler-form-actions p {

  color: rgba(var(--white-rgb), 0.42);

  font-size: 0.75rem;

  line-height: 1.5;

}



.scheduler-honeypot {

  position: absolute !important;

  left: -10000px !important;

  width: 1px !important;

  height: 1px !important;

  overflow: hidden !important;

}



.scheduler-success {

  padding: clamp(44px, 7vw, 88px) 0;

  text-align: center;

}



.scheduler-success[hidden] {

  display: none;

}



.scheduler-success-mark {

  display: grid;

  width: 66px;

  height: 66px;

  margin: 0 auto 24px;

  place-items: center;

  border: 1px solid var(--primary);

  color: var(--primary-light);

  font-size: 1.75rem;

}



.scheduler-success h3 {

  margin-bottom: 14px;

  color: var(--white);

  font-family: var(--font-display);

  font-size: clamp(3rem, 6vw, 5rem);

  font-weight: 400;

  letter-spacing: 0.02em;

  line-height: 0.95;

  text-transform: uppercase;

}



.scheduler-success p {

  max-width: 620px;

  margin: 0 auto 28px;

  color: rgba(var(--white-rgb), 0.70);

  font-size: 1rem;

  line-height: 1.7;

}



@media (max-width: 760px) {

  .scheduler-modal {

    display: block;

    padding: 0;

  }



  .scheduler-dialog {

    width: 100%;

    min-height: 100dvh;

    max-height: 100dvh;

    padding: 86px var(--site-gutter-mobile) 42px;

    border: 0;

    transform: translateY(28px);

  }



  .scheduler-close {

    position: fixed;

    top: 16px;

    right: 16px;

  }



  .scheduler-modal-header {

    padding-right: 0;

  }



  .scheduler-modal-header h2 {

    font-size: clamp(3rem, 15vw, 4.75rem);

  }



  .scheduler-fields {

    grid-template-columns: 1fr;

  }



  .scheduler-field--full {

    grid-column: auto;

  }



  .scheduler-form-actions {

    align-items: stretch;

    flex-direction: column;

  }



  .scheduler-submit {

    width: 100%;

  }

}



@media (max-width: 520px) {

  .scheduler-choice-grid {

    grid-template-columns: 1fr;

  }

}





/* Scheduler option groups */

.scheduler-option-group legend {

  margin-bottom: 10px;

  color: var(--primary);

  font-family: var(--font-display);

  font-size: 1.35rem;

  font-weight: 400;

  letter-spacing: 0.035em;

}



.scheduler-option-group+.scheduler-option-group {

  margin-top: 2px;

}



.scheduler-time-grid {

  margin-top: 10px;

}



.scheduler-availability-note {

  margin-left: 5px;

  padding: 4px 8px;

  border-left: 3px solid var(--primary);

  background: rgba(var(--primary-rgb), 0.07);

  color: rgba(var(--white-rgb), 0.68);

  font-size: 0.6rem;

  display: inline-block;

}



.grecaptcha-badge {

  visibility: hidden;

}



/* Header Book a Call — outlined CTA */

.nav-cta .header-cta {

  border: 1px solid var(--primary);

  background: transparent;

  color: var(--primary);

}



.nav-cta .header-cta:hover,

.nav-cta .header-cta:focus-visible {

  border-color: var(--primary-light);

  background: var(--primary);

  color: #080808;

  transform: translateY(-1px);

}



/* =========================================================

   SCHEDULER — MOBILE OPTION UI

   Desktop scheduler remains unchanged.

========================================================= */



.scheduler-mobile-day,

.scheduler-mobile-option-head,

.scheduler-mobile-time-heading,

.scheduler-mobile-time-help {

  display: none;

}



@media (max-width: 760px) {



  .uqi-floating-link {

    right: max(16px, env(safe-area-inset-right));

    bottom: max(16px, env(safe-area-inset-bottom));

    grid-template-columns: 1fr;

    width: 54px;

    min-height: 54px;

    padding: 7px;

    place-items: center;

  }



  .uqi-floating-label,

  .uqi-floating-badge {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

  }



  /* OPTION CARD */

  .scheduler-option-group {

    padding: 22px 18px 20px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 16px;

    background:

      radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), 0.09), transparent 42%),

      rgba(255, 255, 255, 0.018);

  }



  .scheduler-option-group + .scheduler-option-group {

    margin-top: 4px;

  }



  .scheduler-option-group legend {

    margin: 0;

    padding: 0 8px 0 0;

    color: var(--primary);

    font-family: var(--font-display);

    font-size: 1.75rem;

    font-weight: 400;

    letter-spacing: 0.035em;

    line-height: 1;

    text-transform: uppercase;

  }



  /* SMALL SUPPORT LINE */

  .scheduler-mobile-option-head {

    display: block;

    margin: 5px 0 20px;

  }



  .scheduler-mobile-option-head span {

    color: rgba(var(--white-rgb), 0.54);

    font-size: 0.78rem;

    line-height: 1.45;

  }



  /* HIDE DESKTOP DAY BUTTONS */

  .scheduler-option-group .scheduler-day-grid {

    display: none;

  }



  /* DAY DROPDOWN */

  .scheduler-mobile-day {

    display: block;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);

  }



  .scheduler-mobile-day label {

    display: block;

    margin-bottom: 9px;

    color: rgba(var(--white-rgb), 0.92);

    font-size: 0.875rem;

    font-weight: 700;

    letter-spacing: 0;

    line-height: 1.3;

    text-transform: none;

  }



  .scheduler-day-select {

    width: 100%;

    min-height: 58px;

    padding: 0 46px 0 16px;

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 10px;

    background-color: rgba(255, 255, 255, 0.025);

    color: var(--white);

    font-size: 1rem;

  }



  .scheduler-day-select:hover {

    border-color: rgba(255, 255, 255, 0.28);

  }



  .scheduler-day-select:focus {

    border-color: var(--primary);

    background-color: rgba(var(--primary-rgb), 0.045);

    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);

  }



  /* TIME HEADING */

  .scheduler-mobile-time-heading {

    display: flex;

    align-items: baseline;

    margin: 20px 0 12px;

    gap: 10px;

  }



  .scheduler-mobile-time-heading strong {

    color: var(--white);

    font-size: 0.9rem;

    font-weight: 700;

    line-height: 1.3;

  }



  .scheduler-mobile-time-heading span {

    color: rgba(var(--white-rgb), 0.46);

    font-size: 0.72rem;

    line-height: 1.3;

  }



  /* MULTIPLE TIME SELECTION */

  .scheduler-option-group .scheduler-time-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: 0;

    gap: 8px;

  }



  .scheduler-option-group .scheduler-time-choice span {

    position: relative;

    min-height: 54px;

    padding: 10px 6px;

    border-color: rgba(255, 255, 255, 0.15);

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.025);

    color: rgba(var(--white-rgb), 0.82);

    font-size: 0.67rem;

    font-weight: 700;

    letter-spacing: 0.04em;

  }



  .scheduler-option-group .scheduler-time-choice:hover span {

    border-color: rgba(255, 255, 255, 0.28);

    color: var(--white);

  }



  .scheduler-option-group .scheduler-time-choice input:checked + span {

    border-color: var(--primary);

    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.21), rgba(var(--primary-rgb), 0.08));

    color: var(--primary-light);

    box-shadow:

      inset 0 0 0 1px rgba(var(--primary-rgb), 0.16),

      0 5px 20px rgba(0, 0, 0, 0.16);

  }



  .scheduler-option-group .scheduler-time-choice input:checked + span::after {

    position: absolute;

    top: -7px;

    right: -6px;

    display: grid;

    width: 19px;

    height: 19px;

    place-items: center;

    border: 1px solid var(--primary);

    border-radius: 50%;

    background: var(--soft-white);

    color: #111111;

    content: "✓";

    font-size: 0.65rem;

    font-weight: 900;

    line-height: 1;

  }



  /* TIME HELP */

  .scheduler-mobile-time-help {

    display: block;

    margin: 11px 0 0;

    color: rgba(var(--white-rgb), 0.42);

    font-size: 0.72rem;

    line-height: 1.45;

  }

}



@media (max-width: 390px) {

  .scheduler-option-group {

    padding: 20px 14px 18px;

  }



  .scheduler-option-group .scheduler-time-grid {

    gap: 6px;

  }



  .scheduler-option-group .scheduler-time-choice span {

    min-height: 50px;

    padding-inline: 4px;

    font-size: 0.62rem;

  }

}



/* Small text-only scheduler clear controls */

.scheduler-option-group [data-clear-option] {

  display: inline-block;

  width: auto;

  min-width: 0;

  min-height: 0;

  margin: 10px 0 0;

  padding: 0;

  border: 0;

  background: transparent;

  box-shadow: none;

  color: rgba(var(--white-rgb), 0.55);

  font-family: inherit;

  font-size: 11px;

  font-weight: 600;

  line-height: 1.4;

  letter-spacing: 0.06em;

  text-align: left;

  text-transform: uppercase;

  cursor: pointer;

}



.scheduler-option-group [data-clear-option]:hover,

.scheduler-option-group [data-clear-option]:focus-visible {

  border: 0;

  background: transparent;

  box-shadow: none;

  color: var(--primary);

}



@media (max-width: 900px) {

  .uqi-modal-status:not(.uqi-modal-status--online) {

    display: none;

  }

}



@media (max-width: 700px) {

  .uqi-modal {

    padding:

      max(12px, env(safe-area-inset-top))

      max(12px, env(safe-area-inset-right))

      max(12px, env(safe-area-inset-bottom))

      max(12px, env(safe-area-inset-left));

  }



  .uqi-modal-dialog {

    width: 100%;

    height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));

    max-height: 100%;

  }



  .uqi-modal-head {

    flex: 0 0 auto;

    min-height: 68px;

    padding: 10px 12px;

  }



  .uqi-modal-system,

  .uqi-modal-subtitle,

  .uqi-modal-status:not(.uqi-modal-status--online),

  .uqi-modal-contact {

    display: none;

  }



  .uqi-modal-actions {

    gap: 7px;

  }



  .uqi-modal-body {

    padding: 0 12px 10px;

  }



  .uqi-modal-conversation {

    padding: 18px 4px;

  }



  .uqi-empty-state {

    justify-content: flex-start;

    padding: 42px 0 30px;

  }



  .uqi-empty-state h2,

  .uqi-empty-state h3 {

    font-size: 1.5rem;

  }



  .uqi-empty-state p {

    max-width: 34rem;

    font-size: 0.75rem;

  }



  .uqi-start-options {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin-top: 24px;

  }



  .uqi-turn-text {

    font-size: 0.8125rem;

  }



  .uqi-user-bubble {

    max-width: 78%;

  }

}



@media (max-width: 390px) {

  .uqi-modal-status--online {

    display: none;

  }



  .uqi-empty-state {

    padding-top: 24px;

  }



  .uqi-start-option {

    min-height: 68px;

    padding: 11px 10px;

  }



  .uqi-empty-proof {

    line-height: 1.7;

  }

}



@media (prefers-reduced-motion: reduce) {

  .uqi-floating-link,

  .uqi-modal,

  .uqi-modal-dialog {

    transition: none;

  }



  .uqi-floating-mark::after {

    animation: none;

  }

}







/* ================================================================

     UQIsense PRODUCT NAVIGATION

     ================================================================ */

  .site-nav .nav-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 16px;

  }



  .site-nav .nav-product-link,

  .site-nav .nav-actions .header-cta {

    height: 46px;

    min-height: 46px;

    box-sizing: border-box;

    border: 1px solid #d7793b;

    background: linear-gradient(135deg, rgba(215, 121, 59, .14), rgba(255, 255, 255, .018));

    box-shadow: none;

  }



  .site-nav .nav-product-link {

    position: relative;

    min-width: 182px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 6px 15px;

    color: #fff;

    text-decoration: none;

    transition: border-color .2s ease, background .2s ease, transform .2s ease;

  }



  .site-nav .nav-actions .header-cta {

    min-width: 142px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 7px 20px;

    color: #d7793b;

    font-weight: 800;

    letter-spacing: .12em;

    line-height: 1;

    text-decoration: none;

    text-transform: uppercase;

    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;

  }



  .site-nav .nav-actions .header-cta:hover,

  .site-nav .nav-actions .header-cta:focus-visible {

    border-color: #d7793b;

    background: linear-gradient(135deg, rgba(215, 121, 59, .2), rgba(255, 255, 255, .025));

    color: #fff;

    transform: translateY(-1px);

  }



  .site-nav .nav-product-link:hover,

  .site-nav .nav-product-link:focus-visible,

  .site-nav .nav-product-link.active {

    border-color: #d7793b;

    background: linear-gradient(135deg, rgba(215, 121, 59, .2), rgba(255, 255, 255, .025));

    color: #fff;

    transform: translateY(-1px);

  }



  .site-nav .nav-product-link.active {

    box-shadow: none;

  }



  .site-nav .nav-product-logo {

    display: block;

    width: 102px;

    height: auto;

  }



  .site-nav .nav-product-description {

    margin-top: 4px;

    color: rgba(255, 255, 255, .62);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .15em;

    line-height: 1;

    text-transform: uppercase;

    white-space: nowrap;

  }



  .mobile-menu .mobile-product-link {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin: 13px 0;

    padding: 17px 18px;

    border: 1px solid rgba(215, 121, 59, .42);

    background: rgba(215, 121, 59, .08);

    text-decoration: none;

  }



  .mobile-menu .mobile-product-copy {

    display: flex;

    flex-direction: column;

  }



  .mobile-menu .mobile-product-logo {

    display: block;

    width: 146px;

    height: auto;

  }



  .mobile-menu .mobile-product-description {

    margin-top: 6px;

    color: rgba(255, 255, 255, .6);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .14em;

    line-height: 1;

    text-transform: uppercase;

  }



  @media (max-width: 1180px) {

    .site-nav .nav-actions .nav-product-link {

      display: none;

    }

  }